/* ───────────────────────────────────────────────────────────
   Kit & Coast — landing page
   Colour, type and spacing values come from BRANDING.md.
   Layout follows the master logo lockup on the brand board:
   mark → wordmark → tagline, stacked and centred.
   Typefaces are self-hosted (both SIL Open Font License 1.1).

   Asset paths are relative to this file, which sits in assets/css/.
   ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --kc-navy:        #1F2D3D;
  --kc-navy-deep:   #131B25;
  --kc-slate:       #414C5A;
  --kc-slate-light: #6D7681;
  --kc-shell:       #F9F6F1;
  --kc-sand:        #E7DCC6;
  --kc-coral:       #FF6F61;
  --kc-amber:       #F1A033;   /* logo: sun + first wave */
  --kc-teal:        #1E6E68;   /* logo: last wave */

  /* Semantic — light is the default theme.
     Every value here is measured against the water ramp below; the
     worst-case stop is --water-4, so that is what they are checked on. */
  --bg:          var(--water-2);
  --ink:         var(--kc-navy);    /* 8.75:1 at worst */
  --ink-muted:   var(--kc-slate);   /* 5.46:1 at worst */
  --ink-faint:   #4A5563;           /* 4.74:1 — Slate Light would be 2.88 here */
  --hairline:    #2E6B65;           /* 6.16 on the field, 3.86 on the water */
  --mark-sun:    var(--kc-amber);
  --mark-sea:    var(--kc-teal);
  --field:       #FFFFFF;
  --action:      var(--kc-coral);
  --action-ink:  var(--kc-navy);   /* Navy, not white — Coral/white is 2.7:1 */
  --focus:       var(--kc-navy);

  /* Sunlit shallows. Tints of the brand teal, kept pale on purpose so
     Navy type stays AAA over every stop. Reads top-to-bottom as the
     water deepening away from you. */
  --water-1:     #F2F8F7;
  --water-2:     #DCEDEA;
  --water-3:     #C6E1DD;
  --water-4:     #AFD4CF;
  --water-glint: rgba(255, 216, 158, 0.30);

  /* Type scale (BRANDING.md §4), anchored to the documented steps but
     bounded by viewport HEIGHT as well as width, so the page fits one
     screen without scrolling. min() lets whichever axis is tighter win. */
  --t-wordmark: clamp(1.75rem, min(6.4vh, 10.5vw), 3.4rem);
  --t-lead:     clamp(0.95rem, min(2.1vh, 3.4vw), 1.2rem);
  --t-body:     1rem;
  --t-small:    0.8125rem;
  --t-label:    0.75rem;

  /* Vertical rhythm. Sized against viewport height so the page still
     clears one screen at these more generous settings. */
  --mark-size:    clamp(4.5rem, min(13vh, 26vw), 8.5rem);
  --space-lockup: clamp(0.65rem, 2vh, 1.4rem);
  --space-block:  clamp(0.8rem, 2.3vh, 1.85rem);

  --gutter: clamp(1.5rem, 5vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        var(--water-2);
    --ink:       var(--kc-shell);   /* 10.5:1 at worst */
    --ink-muted: #AEB4BC;           /* 5.43 — #9AA0A8 would be 4.30 here */
    --ink-faint: #9FA6AE;           /* 4.61:1 */
    --hairline:  #54868C;           /* 4.36 on the field, 3.42 on the water */
    --mark-sun:  var(--kc-amber);   /* 7.2:1 on the darkest stop */
    --mark-sea:  #2CA098;           /* same hue/sat, lifted for dark water */
    --field:     #1B2635;
    --focus:     var(--kc-sand);

    /* The same water after dark — depth, not an inversion. */
    --water-1:     #184043;
    --water-2:     #17383C;
    --water-3:     #163036;
    --water-4:     #15272F;
    --water-glint: rgba(241, 160, 51, 0.12);
  }
}
/* The viewer's theme toggle must win over the media query, both ways. */
:root[data-theme="dark"] {
  --bg:        var(--water-2);
  --ink:       var(--kc-shell);
  --ink-muted: #AEB4BC;
  --ink-faint: #9FA6AE;
  --hairline:  #54868C;
  --mark-sun:  var(--kc-amber);
  --mark-sea:  #2CA098;
  --field:     #1B2635;
  --focus:     var(--kc-sand);
  --water-1:     #184043;
  --water-2:     #17383C;
  --water-3:     #163036;
  --water-4:     #15272F;
  --water-glint: rgba(241, 160, 51, 0.12);
}
:root[data-theme="light"] {
  --bg:        var(--water-2);
  --ink:       var(--kc-navy);
  --ink-muted: var(--kc-slate);
  --ink-faint: #4A5563;
  --hairline:  #2E6B65;
  --mark-sun:  var(--kc-amber);
  --mark-sea:  var(--kc-teal);
  --field:     #FFFFFF;
  --focus:     var(--kc-navy);
  --water-1:     #F2F8F7;
  --water-2:     #DCEDEA;
  --water-3:     #C6E1DD;
  --water-4:     #AFD4CF;
  --water-glint: rgba(255, 216, 158, 0.30);
}

/* ── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* dvh tracks mobile browser chrome as it collapses; vh is the fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);

  /* Water, built in CSS rather than from a photograph — a photo fights
     the type at every size, and this stays legible by construction.
     Four layers, top to bottom:
       1. fine caustics   — the tight sparkle where light hits the surface
       2. broad caustics  — the slow rolling light-web underneath it
       3. sun glint       — warmth falling from overhead, tied to the mark
       4. depth ramp      — pale shallows above, deeper water below
     Both caustic layers are white ridges shaped out of fractal noise:
     the colour matrix forces RGB to white and derives alpha from the
     noise, so only the crests show. soft-light keeps them as light on
     water rather than a grey film. */
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.026' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.9 0 0 0 -0.78'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23a)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.009' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.5 0 0 0 -0.58'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23b)'/%3E%3C/svg%3E"),
    radial-gradient(120% 65% at 50% -8%, var(--water-glint), transparent 64%),
    linear-gradient(180deg,
      var(--water-1)  0%,
      var(--water-2) 34%,
      var(--water-3) 72%,
      var(--water-4) 100%);
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-size: 420px 420px, 900px 900px, 100% 100%, 100% 100%;
  background-blend-mode: soft-light, soft-light, normal, normal;
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  z-index: 10;
}
.skip-link:focus { left: 0; }

/* For labels that the layout carries visually but assistive tech still needs. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* centre in whatever height is left over */
  text-align: center;
  padding: var(--space-block) var(--gutter);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-block);
  width: 100%;
  max-width: 42rem;
}

/* ── The lockup: mark → wordmark → tagline (brand board, master logo) ── */
.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lockup);
}

.lockup__mark {
  width: var(--mark-size);
  line-height: 0;
}
.lockup__mark svg { width: 100%; height: auto; display: block; }
.lockup__mark path {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;   /* caps unified — BRANDING.md §2 recommendation */
  stroke-linejoin: round;
}
/* Sun and the first underlying wave share the amber; the last wave is teal. */
.mark-sun path,
.mark-wave-first { stroke: var(--mark-sun); }
.mark-wave-last  { stroke: var(--mark-sea); }

.lockup__wordmark {
  font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
  font-weight: 300;
  font-size: var(--t-wordmark);
  line-height: 1;
  letter-spacing: 0.14em;
  /* Tracking adds trailing space; nudge back to optical centre. */
  text-indent: 0.14em;
  color: var(--ink);
  /* Cormorant's cap height sits well below the em-box top, so the box is
     taller than the letters look. Pull it in so the wordmark reads tight
     to the mark instead of floating away from it. */
  margin: -0.1em 0 -0.12em;
}
/* Where supported, trim to the real cap and baseline edges instead. */
@supports (text-box: trim-both cap alphabetic) {
  .lockup__wordmark {
    text-box: trim-both cap alphabetic;
    margin: 0;
  }
}

.lockup__tagline {
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--t-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ink-muted);
}

/* Divider: two periods of the logo's own wave, sitting between the
   tagline and the copy. Outside .lockup, so the lockup stays one object
   and the wave gets the full block rhythm on either side. */
.divider {
  width: clamp(4rem, 7vw, 6rem);
  color: var(--mark-sea);
  opacity: 0.7;
  line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }
.divider path {
  fill: none;
  stroke: currentColor;
  /* 5, not the mark's 7: the divider's viewBox is narrower than the
     logo's, so an identical stroke number renders heavier on screen.
     5 lands it within ~5% of the mark's own stroke weight. */
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Copy ────────────────────────────────────────────────── */
.copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.6vh, 1.1rem);
  max-width: 44ch;   /* keeps each paragraph to 2–3 lines when centred */
}
.copy p {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.copy p:first-child { color: var(--ink); }

/* ── Sign-up ─────────────────────────────────────────────── */
.signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.3vh, 0.8rem);
  width: 100%;
  max-width: 32rem;
}
.signup__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
}
.signup input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  font: inherit;
  text-align: center;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: 2px;          /* §5: 2px on inputs */
  padding: 0.9rem 1rem;
}
.signup input[type="email"]::placeholder { color: var(--ink-faint); }

.btn {
  flex: 0 0 auto;
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--action);
  color: var(--action-ink);
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0.95rem 1.75rem;
  cursor: pointer;
  /* Coral and pale water sit at similar luminance (1.7:1), so the fill
     alone would not define the button's edge. The shadow does. */
  box-shadow: 0 2px 6px rgba(18, 48, 52, 0.22);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(18, 48, 52, 0.26);
}
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.microcopy {
  font-size: var(--t-small);
  color: var(--ink-faint);
  max-width: 40ch;
}

.status {
  font-size: var(--t-small);
  min-height: 1.4em;
}
.status:empty { display: none; }
.status[data-state="error"] { color: var(--ink); }
.status[data-state="ok"]    { color: var(--ink-muted); }

/* Success replaces the form rather than sitting beside it. */
.done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 40ch;
}
.done h2 {
  font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem);
  letter-spacing: 0.02em;
  margin: 0;
}
.done h2:focus { outline: none; }
.done p { font-size: var(--t-small); color: var(--ink-muted); }
[hidden] { display: none !important; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  flex: 0 0 auto;
  /* No band — it sits on the sand end of the page gradient. */
  padding: clamp(1.25rem, 3vh, 2rem) var(--gutter) clamp(1rem, 2.5vh, 1.5rem);
  text-align: center;
}
.colophon {
  font-size: var(--t-small);
  color: var(--ink-faint);
}

/* ── Motion: one quiet load sequence ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Only leaf elements animate — animating .lockup as well as its
     children would compound the two translates. */
  .lockup > *,
  .hero__inner > .divider,
  .hero__inner > .copy,
  .hero__inner > .signup {
    animation: rise 900ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .lockup > *:nth-child(1)   { animation-delay:  60ms; }
  .lockup > *:nth-child(2)   { animation-delay: 180ms; }
  .lockup > *:nth-child(3)   { animation-delay: 260ms; }
  .hero__inner > .divider    { animation-delay: 340ms; }
  .hero__inner > .copy       { animation-delay: 420ms; }
  .hero__inner > .signup     { animation-delay: 500ms; }

  /* Rays fade in; they never sparkle (BRANDING.md §2 misuse). */
  .mark-sun .rays { animation: fade 1100ms ease-out 620ms backwards; }
}

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