/* Shade Diary landing.
   Rebuilt 2026-07-29 alongside the Worker. Every colour, radius, space and
   duration below reads the promoted token scale (design-system/tokens.css,
   generated from state/theme.tokens.json) — raw millisecond literals in motion
   styles are a `check:landing-funnel` failure, and retiming the brand happens
   by re-promoting tokens rather than editing this file. */

:root {
  --color-background: #F7F3F0;
  --color-surface: #FFFDFC;
  --color-surface-elevated: #FFFFFF;
  --color-primary: #30232A;
  --color-accent: #B44E6B;
  --color-text: #211A1E;
  --color-muted: #6C6267;
  --color-border: #DED4D8;

  --font-display: "New York", Georgia, serif;
  --font-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  --motion-duration-fast: 120ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 360ms;
  --motion-duration-celebrate: 500ms;
  --motion-duration-reveal: 600ms;
  --motion-duration-cinematic: 1200ms;
  --motion-easing: cubic-bezier(0.22, 0.8, 0.24, 1);
  --motion-easing-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-stagger: 60ms;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -0.015em; margin-bottom: var(--space-lg); }
h3 { font-size: 1.12rem; margin-bottom: var(--space-xs); }
p { margin: 0 0 var(--space-md); }
a { color: var(--color-accent); }

.skip {
  position: absolute; left: -9999px; top: var(--space-sm);
  background: var(--color-surface); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm); z-index: 10;
}
.skip:focus { left: var(--space-md); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

main, .site, .site-footer { max-width: 62rem; margin: 0 auto; padding: 0 var(--space-lg); }

.site {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-lg); padding-bottom: var(--space-lg);
}
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; }
.ghost {
  font-size: 0.92rem; text-decoration: none; color: var(--color-primary);
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: var(--space-sm) var(--space-md);
  transition: border-color var(--motion-duration-base) var(--motion-easing),
              background-color var(--motion-duration-base) var(--motion-easing);
}
.ghost:hover { border-color: var(--color-primary); background: var(--color-surface); }

section { padding: clamp(3rem, 9vw, 6rem) 0; }

.hero { padding-top: clamp(2rem, 6vw, 4rem); }
.eyebrow {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-muted); margin-bottom: var(--space-md);
}
.lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--color-muted); max-width: 34rem; margin-top: var(--space-lg); }
.cta {
  display: inline-block; margin-top: var(--space-lg);
  background: var(--color-primary); color: var(--color-surface);
  text-decoration: none; font-weight: 600;
  padding: var(--space-md) var(--space-xl); border-radius: 999px;
  transition: transform var(--motion-duration-fast) var(--motion-easing-spring),
              background-color var(--motion-duration-base) var(--motion-easing);
}
.cta:hover { background: var(--color-accent); }
.cta:active { transform: scale(0.97); }
.microcopy { font-size: 0.88rem; color: var(--color-muted); margin-top: var(--space-md); }

/* --- The reveal ------------------------------------------------------------
   Two stills side by side. The "after" carries the catalog-grounded entrance:
   it starts slightly small and transparent and settles with a spring, so the
   recolour reads as arriving rather than as having always been there. */
.reveal-stage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.shot { margin: 0; }
.shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-md); background: var(--color-border);
}
.shot figcaption {
  font-size: 0.85rem; color: var(--color-muted); margin-top: var(--space-sm); text-align: center;
}
.provenance {
  font-size: 0.85rem; color: var(--color-muted); margin-top: var(--space-lg);
  max-width: 40rem; border-left: 2px solid var(--color-border); padding-left: var(--space-md);
}

.belief p, .privacy-note p { max-width: 44rem; color: var(--color-muted); }
.belief p strong, .privacy-note strong { color: var(--color-text); }

.step-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.step-list li { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); }
.step-list p { color: var(--color-muted); margin: 0; font-size: 0.95rem; }
.num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 999px;
  background: var(--color-background); color: var(--color-muted);
  font-size: 0.85rem; font-weight: 600; margin-bottom: var(--space-md);
}

.swatches { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.swatches li { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.swatches strong { font-size: 0.98rem; }
.swatches span:last-child { font-size: 0.85rem; color: var(--color-muted); }
.chip { width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--chip); margin-bottom: var(--space-sm); }

.boundary { background: var(--color-surface); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem); }
.boundary-lead { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-text); }
.limits { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
.limits li { color: var(--color-muted); padding-left: var(--space-lg); position: relative; }
.limits li::before { content: "—"; position: absolute; left: 0; color: var(--color-border); }

.waitlist form { display: flex; gap: var(--space-sm); flex-wrap: wrap; max-width: 30rem; }
.waitlist input {
  flex: 1 1 15rem; font: inherit; padding: var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-elevated); color: var(--color-text);
  transition: border-color var(--motion-duration-base) var(--motion-easing);
}
.waitlist input:focus { outline: none; border-color: var(--color-accent); }
.waitlist button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--color-primary); color: var(--color-surface);
  border: none; border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg);
  transition: transform var(--motion-duration-fast) var(--motion-easing-spring),
              background-color var(--motion-duration-base) var(--motion-easing);
}
.waitlist button:hover { background: var(--color-accent); }
.waitlist button:active { transform: scale(0.97); }
.form-status { font-size: 0.9rem; margin-top: var(--space-md); min-height: 1.4em; }
.form-status[data-state="error"] { color: var(--color-accent); }

.site-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--space-md); padding-top: var(--space-xl); padding-bottom: var(--space-xl);
  border-top: 1px solid var(--color-border); font-size: 0.88rem; color: var(--color-muted);
}
.site-footer nav { display: flex; gap: var(--space-lg); }
.site-footer p { margin: 0; }

/* --- Motion ----------------------------------------------------------------
   Every rule below is gated on html.js, which main.js sets on hydration. With
   JavaScript off none of these selectors match, so the page renders in its
   final state immediately and no text is ever hidden behind an animation. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity var(--motion-duration-reveal) var(--motion-easing-emphasis),
              transform var(--motion-duration-reveal) var(--motion-easing-emphasis);
}
.js [data-reveal].in [data-step] {
  animation: rise var(--motion-duration-reveal) var(--motion-easing-emphasis) both;
  animation-delay: calc(var(--i, 0) * var(--motion-stagger));
}
.js h1[data-stagger] .w { display: inline-block; animation: rise var(--motion-duration-reveal) var(--motion-easing-emphasis) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger)); }

/* The catalog recipe: the recoloured frame fades in from slightly small and
   settles with a spring, so it reads as resolving into place. */
.js [data-reveal-after] { opacity: 0; transform: scale(0.94); }
.js .in [data-reveal-after] {
  opacity: 1; transform: none;
  transition: opacity var(--motion-duration-reveal) var(--motion-easing) var(--motion-duration-base),
              transform var(--motion-duration-celebrate) var(--motion-easing-spring) var(--motion-duration-base);
}

/* Forced final state — see main.js `settle`. Deliberately mirrors the
   reduced-motion block: whatever the reason motion cannot run, the answer is
   the same calm finished page rather than a half-faded one. */
.js.motion-settled [data-reveal],
.js.motion-settled [data-reveal].in,
.js.motion-settled [data-reveal-after],
.js.motion-settled .in [data-reveal-after],
.js.motion-settled h1[data-stagger] .w,
.js.motion-settled [data-reveal].in [data-step] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].in,
  .js [data-reveal-after],
  .js .in [data-reveal-after],
  .js h1[data-stagger] .w,
  .js [data-reveal].in [data-step] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .cta:active, .waitlist button:active { transform: none; }
}

@media (max-width: 34rem) {
  .reveal-stage { gap: var(--space-sm); }
  .site-footer { flex-direction: column; align-items: flex-start; }
}