/* ============================================================
   Hush — Bone, Tin & Brass marketing styles
   Built from the design system: base tokens, Tin & Brass
   palette overrides, then component CSS.
   ============================================================ */

/* ── Fonts ───────────────────────────────────────────────────── */
/* Self-hosted variable woff2 — three files cover every weight + italic
   the system uses. Removes the Google Fonts CSS hop and the fonts.gstatic.com
   DNS/TCP round-trip on cold loads. The latin subset is enough for en-GB.
   `font-display: swap` keeps text rendered in the fallback during the
   ~50–150ms it takes the woff2 to land. */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond.woff2") format("woff2-variations"),
       url("/assets/fonts/eb-garamond.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-italic.woff2") format("woff2-variations"),
       url("/assets/fonts/eb-garamond-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2-variations"),
       url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Base tokens ─────────────────────────────────────────────── */
:root {
  --surface:        #EEEAE2;
  --surface-stone:  #E1DBCF;
  --surface-paper:  #F5F2EB;
  --surface-ink:    #1A1410;

  --ink:            #1A1410;
  --ink-press:      #0B0805;
  --ink-2:          #5A4F46;
  --ink-3:          #8C8378;
  --ink-rule:       rgba(26, 20, 16, 0.16);
  --ink-rule-strong:rgba(26, 20, 16, 0.42);
  --ink-tint:       rgba(26, 20, 16, 0.08);

  --accent:         var(--ink);
  --accent-press:   var(--ink-press);
  --accent-tint:    var(--ink-tint);
  --accent-fg:      var(--surface);

  --on-ink:         #EEEAE2;
  --on-ink-2:       #B8AFA3;
  --on-ink-rule:    rgba(238, 234, 226, 0.18);

  /* Tin & Brass uses one book serif (EB Garamond) for display, body, labels.
     EB Garamond is a body serif pushed to display scale on purpose — the
     "Penguin paperback enlarged" register, deliberately not the saturated
     editorial-display-serif lane (Newsreader / Fraunces / Tiempos cluster).
     The token is still named --font-sans for compatibility with existing
     selectors; treat it as "the primary type voice", not as a category. */
  --font-sans: "EB Garamond", "Sorts Mill Goudy", "Iowan Old Style", "Georgia", serif;
  --font-mono: "JetBrains Mono", "Söhne Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-display:   5.5rem;
  --fs-h1:        4rem;
  --fs-h2:        2.75rem;
  --fs-h3:        1.75rem;
  --fs-body-lg:   1.25rem;
  --fs-body:      1.0625rem;
  --fs-body-sm:   0.9375rem;
  --fs-tag:       0.75rem;
  --fs-mono-lg:   1rem;
  --fs-mono:      0.8125rem;
  --fs-mono-sm:   0.6875rem;


  --lh-tight:     1.02;
  --lh-snug:      1.12;
  --lh-normal:    1.45;
  --lh-prose:     1.55;

  /* EB Garamond is a body serif being used at display scale. It carries
     more natural width than a true display serif, so it wants slightly
     tighter tracking at large sizes and a touch of positive tracking
     for small-caps labels to make them breathe. */
  --tracking-display: -0.018em;
  --tracking-tight:   -0.008em;
  --tracking-normal:   0em;
  --tracking-tag:      0.16em;
  --tracking-mono:     0em;

  --gutter:         clamp(1.25rem, 4vw, 2.5rem);
  --page-max:       80rem;
  --measure-prose:  36rem;
  --measure-narrow: 28rem;

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  --bw: 1px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 320ms;
}

@media (max-width: 768px) {
  :root {
    --fs-display: 3rem;
    --fs-h1:      2.5rem;
    --fs-h2:      1.75rem;
    --fs-h3:      1.375rem;
    --fs-body-lg: 1.0625rem;
    --fs-body:    1rem;
  }
}

/* ── Tin & Brass palette ─────────────────────────────────────── */
/* Palette architecture:
   1. Bone (warm pulp-paper cream) — the page surface
   2. Stone — one step warmer-darker, for chunking
   3. Paper — slightly brighter cream, for inputs and on-ink text
   4. Tin — cool matte near-black, used as drenched surface AND
            as primary action fill (--accent maps to it)
   5. Cocoa-ink — warm near-black, used for body type
   6. Brass (--foil) — true brass-foil hue, the rare metallic accent.
                       Used at the hero strip, wordmark dot, open-FAQ
                       marker, focus rings, inline link hover. Never
                       as a button fill (its contrast on cream fails
                       for body text). Brass is foil-stamping; ink is
                       the printed label. */
:root {
  --surface:        #F2EBD8;
  --surface-stone:  #E7DFCA;
  --surface-paper:  #FBF7EC;
  --surface-ink:    #15191E;
  --on-ink:         #FBF7EC;
  --on-ink-2:       #B7AE9F;
  --on-ink-rule:    rgba(251, 247, 236, 0.28);

  --ink:            #1E1814;
  --ink-press:      #0A0B0E;
  --ink-2:          #5C5247;
  --ink-3:          #8B8175;
  --ink-rule:       rgba(30, 24, 20, 0.18);
  --ink-rule-strong:rgba(30, 24, 20, 0.42);
  --ink-tint:       rgba(30, 24, 20, 0.08);

  /* Primary action = ink. Cream type on ink rectangle = ~13:1 (AAA). */
  --accent:         var(--ink);
  --accent-press:   var(--ink-press);
  --accent-tint:    var(--ink-tint);
  --accent-fg:      var(--surface-paper);

  /* Brass foil — the rare metallic note. */
  --foil:           #B0833A;
  --foil-press:     #8C6829;
  --foil-tint:      rgba(176, 131, 58, 0.16);
}

/* ── Element base ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  letter-spacing: var(--tracking-normal);
  color: var(--ink);
  background: var(--surface);
}

img { max-width: 100%; display: block; }

.h-display, h1.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  margin: 0;
  text-wrap: pretty;
  max-width: var(--measure-prose);
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-prose); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ink-rule);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease),
              text-decoration-color var(--dur) var(--ease),
              text-decoration-thickness var(--dur) var(--ease);
}
/* Hover keeps text at ink; brass moves to the underline only.
   Brass on cream (~3.65:1) fails AA 4.5:1 as text colour at body sizes,
   so the foil-stamp gesture lives in the rule, not in the letterforms. */
a:hover {
  color: var(--ink);
  text-decoration-color: var(--foil);
  text-decoration-thickness: 2px;
}

::selection { background: var(--accent); color: var(--surface-paper); }

:focus-visible {
  outline: 2px solid var(--foil);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

hr.rule, .rule {
  border: 0;
  border-top: 1px solid var(--ink-rule);
  margin: 0;
}

/* ── Wordmark ────────────────────────────────────────────────── */
/* "Hush." set in EB Garamond 500 with a single brass full stop.
   The dot is the brand's only chromatic gesture in the header. */
.wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}
/* 44px tap target on the wordmark link; padding is symmetric so the
   header's 18px inner padding still controls vertical rhythm. */
.wordmark--nav    {
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wordmark--footer { font-size: 30px; }
.wordmark__dot    { color: var(--foil); }

/* ── Tag ─────────────────────────────────────────────────────── */
.tag {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.tag--on-ink { color: var(--on-ink-2); }

/* ── Data line (mono) ────────────────────────────────────────── */
.data {
  font-family: var(--font-mono);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.5;
}
.data--lg { font-size: 16px; }
.data--md { font-size: 13px; }
.data--sm { font-size: 11px; }
.data .v   { color: var(--ink); }

/* ── Buttons ─────────────────────────────────────────────────── */
/* Tin & Brass buttons are small printed-label rectangles, not pills.
   Primary fill is tin-ink; cream-on-ink text gives ~13:1 contrast (AAA).
   Hover slides to a deeper ink-press and reveals a brass hairline ring
   that reads as foil stamping. No shadows. */
.btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0 22px;
  height: 46px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn--primary:hover {
  background: var(--accent-press);
  color: var(--accent-fg);
  border-color: var(--foil);
}
.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover { background: var(--ink-tint); color: var(--ink); border-color: var(--ink); }
.btn--link {
  background: transparent;
  color: var(--ink);
  padding: 0;
  height: auto;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid transparent;
}
.btn--link:hover { border-bottom: 2px solid var(--foil); color: var(--ink); }
/* CTA band: cream rectangle on the tin surface. */
.btn--form {
  height: 48px;
  padding: 0 22px;
  border-radius: 2px;
  background: var(--surface-paper);
  color: var(--ink);
  border: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
/* Brass foil-stamp reveal on hover, parity with .btn--primary. Inset shadow
   so the rectangle's footprint doesn't shift when the border resolves. */
.btn--form:hover {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--foil);
}

/* ── Section wrapper ─────────────────────────────────────────── */
.section {
  padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--ink-rule);
}
.section--bone  { background: var(--surface);       color: var(--ink); }
.section--stone { background: var(--surface-stone); color: var(--ink); }
.section--ink   { background: var(--surface-ink);   color: var(--on-ink); border-top: 0; }
.section--no-top-border { border-top: 0; }
.section__inner { max-width: var(--page-max); margin: 0 auto; }

/* ── Nav ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--ink-rule); }
.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  /* Vertical padding is light: the 44px tap-target boxes on the wordmark
     and nav-links carry their own visual breathing room, so the inner
     padding only adds optical air above and below the row. */
  padding: 10px clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.nav-link:hover, .nav-link[aria-current="true"] { border-bottom-color: var(--foil); color: var(--ink); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero { padding-top: clamp(56px, 9vw, 112px); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.hero__headline {
  font-size: clamp(40px, 5.5vw, 88px);
  max-width: 18ch;
}
/* Emphasis is typographic only: italic vs roman, no colour. EB Garamond's
   true italic carries the literary voice the brand wants. */
.hero__headline em { font-style: italic; font-weight: 500; color: inherit; }
.hero__sub {
  margin-top: 28px;
  font-size: var(--fs-body-lg);
  color: var(--ink-2);
  max-width: 440px;
}
[data-hush-variant-pending] .hero__headline,
[data-hush-variant-pending] .hero__sub { visibility: hidden; }
.hero__form-meta {
  margin-top: 8px;
  max-width: 440px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-2);
}
.hero__form-meta a { text-decoration-color: var(--ink-2); }

/* The 20% offer kicker sits between the sub (and, on mobile, the credibility
   strip) and the form, so the carrot is visible at the moment of the CTA
   rather than hidden in the meta paragraph below. Brass colour ties it to
   the strip hairline and wordmark dot — the page's only metallic note. */
.hero__offer {
  margin-top: 28px;
  margin-bottom: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--foil);
}

/* Hero technical strip: JetBrains Mono spec line on a brass hairline.
   Brass is the page's only metallic note; the strip and the wordmark
   dot are its primary appearances on this screen.
   Ships in two positions: --desktop is the full-width sibling of
   .hero__grid; --mobile lives inside .hero__left between the sub and
   the form so the three credibility facts land before the CTA on
   phones, where the desktop strip would otherwise sit below the
   form-and-photo stack. */
.hero__strip {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--foil);
}
.hero__strip .data { font-size: 18px; line-height: 1.4; }
/* Each phrase stays atomic across viewports — "Authorised in the UK since 2005"
   never breaks mid-sentence. Wrap happens only between phrases. */
.hero__strip .data > span { white-space: nowrap; }
.hero__strip--mobile { display: none; }

/* Hero photo. Lives on the right of the hero grid. Ink-rule border, not
   brass — the hero strip's brass hairline and the wordmark dot are
   already the two foil anchors on this screen (DESIGN.md placement). */
.hero__media { margin: 0; }
.hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border: 1px solid var(--ink-rule);
  background: var(--surface-stone);
}

/* Placeholder block — the sanctioned empty-slot component (DESIGN.md
   §5). Default ink-rule border; promoted to a brass border on the
   hero variant so the mono caption doubles as a brief for the future
   photograph. Currently unused on this page (the hero ships a real
   photo) but kept as the empty-slot pattern for other surfaces. */
.placeholder {
  background: var(--surface-stone);
  border: 1px solid var(--ink-rule);
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.placeholder__num,
.placeholder__ratio,
.placeholder__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.placeholder__num   { position: absolute; top: 12px; left: 14px; }
.placeholder__ratio { position: absolute; top: 12px; right: 14px; }
.placeholder--hero {
  border-color: var(--foil);
  background: var(--surface-stone);
}
.placeholder--hero .placeholder__num,
.placeholder--hero .placeholder__ratio,
.placeholder--hero .placeholder__caption {
  color: var(--foil);
  opacity: 0.85;
}

/* ── Hero form ───────────────────────────────────────────────── */
.form-row {
  margin-top: 36px;
  display: flex;
  gap: 8px;
  max-width: 440px;
  align-items: stretch;
}
.form-row .input-email { flex: 1; }
/* Hero form button matches the 48px input height; the default 46px is for
   nav and standalone Reserve placements where the button isn't paired with
   an input. */
.form-row .btn { height: 48px; }
.input-email {
  height: 48px;
  padding: 0 14px;
  background: var(--surface-paper);
  border: 1px solid var(--ink-rule);
  border-radius: var(--r-1);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-width: 0;
}
/* ink-2 not ink-3: the placeholder is the affordance that explains the
   input, so it needs AA contrast (~5.5:1) rather than the borderline 3.3:1
   that ink-3 produced on paper. */
.input-email::placeholder { color: var(--ink-2); }
.input-email:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-tint); }
.input-email.has-error { border: 2px solid var(--ink); box-shadow: none; padding: 0 13px; }

/* Post-form siblings (Turnstile, error, meta) use Figma's 8px sibling
   rhythm directly. Turnstile is interaction-only so its wrapper is
   invisible unless a challenge is required. */

.turnstile-wrap { min-height: 0; }

.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-error {
  margin-top: 8px;
  max-width: 440px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: none;
}
.form-error.show { display: block; }
/* Action affordances rendered inside the form-error region: the typo-catch
   "Did you mean …" link inherits the error region's colour and uses the
   same ink-rule → brass underline gesture as inline body links. */
.form-error a { font-weight: 500; }
.cta .form-error a { color: var(--on-ink); text-decoration-color: var(--on-ink-rule); }
.cta .form-error a:hover { text-decoration-color: var(--foil); }

/* form-status: role="status" sibling of form-error. Happy-path notices like
   the reserved-state "Already reserved with X. Use a different email →"
   live here, announced politely. Brass ✓ glyph echoes the confirmation
   wax-stamp; the text body stays at ink for AA contrast. */
.form-status {
  margin-top: 8px;
  max-width: 440px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: none;
}
.form-status.show { display: block; }
.form-status::before {
  content: "✓ ";
  color: var(--foil);
  font-weight: 500;
}
.form-status a { font-weight: 500; }
.cta .form-status { color: var(--on-ink); }
.cta .form-status a { color: var(--on-ink); text-decoration-color: var(--on-ink-rule); }
.cta .form-status a:hover { text-decoration-color: var(--foil); }

/* ── Features ────────────────────────────────────────────────── */
.features__title {
  max-width: 16ch;
  margin-top: 16px;
  margin-bottom: 64px;
}
.features__list { display: flex; flex-direction: column; }
.features__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--ink-rule);
  align-items: start;
}
/* Row 1 has no top border or padding so it flows directly out of the
   section title. The title's question and the first answer read as a
   single beat; rows 2 and 3 keep their dividers, marking them as
   "and also" rather than "and first." */
.features__row[data-row="1"] { border-top: 0; padding-top: 0; }
.features__row h3 { margin-bottom: 8px; }
.features__row p  { color: var(--ink-2); max-width: 38ch; }
.features__data { margin-top: 6px; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.faq__title { margin-top: 0; }
/* Spec-data fallback line balances the left column visually with the
   founder colophon and gives users an email path when the FAQ misses
   their question. Mono register, sibling of .hero__strip .data. */
.faq__fallback {
  margin-top: 20px;
  max-width: 22ch;
}
.faq__list { display: flex; flex-direction: column; }
/* Two-group chunking: roman small-caps in the .tag register. Italic is
   reserved for emphasis (hero <em>, founder signature, confirmation
   wax-stamp) — keeping it out of structural ornament protects the
   page's one emphasis device. */
.faq__group-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  margin: 0;
  padding: 0 0 18px;
}
.faq__group-title:not(:first-child) { padding-top: 40px; }
.faq__item { border-top: 1px solid var(--ink-rule); }
.faq__item:first-child,
.faq__group-title + .faq__item { border-top: 0; }
.faq__q {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  font-family: var(--font-sans);
}
.faq__q-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
/* One glyph, rotated on open. Keeps optical width identical between states
   (a − and a + have different optical centers in JetBrains Mono); the open
   marker reads as × (close) which is semantically aligned. */
.faq__q-mark {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-2);
  text-align: right;
  line-height: 1;
  display: inline-block;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq__item--open .faq__q-mark {
  color: var(--foil);
  transform: rotate(45deg);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.faq__a-inner {
  min-height: 0;
  overflow: hidden;
  padding-right: 60px;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
}
.faq__item--open .faq__a { grid-template-rows: 1fr; }
.faq__item--open .faq__a-inner { padding-bottom: 32px; }

/* ── Founder note ────────────────────────────────────────────── */
/* Single-column essay: eyebrow + data line on one rule at the top,
   prose stacked beneath at the measure, signature pushed right.
   Deliberately not a 1fr/2fr grid — that pattern is the saturated
   editorial-typographic rhythm. */
.founder {
  max-width: 56rem;
  margin: 0 auto;
}
.founder__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink-rule);
  margin-bottom: 48px;
}
/* Founder heading matches Features/FAQ at h2 scale (2.75rem). Intimacy on
   this section is carried by the surface shift (bone → stone), the data-line
   colophon, the prose register, and the italic signature — not by under-
   sizing the heading. Keeping the three section h2s at one scale avoids
   the "h2 at different sizes" question. */
.founder__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}
/* Spec-data register, sibling of .hero__strip .data. Mono keeps this
   distinct from the small-caps eyebrow family (.tag, .footer-col__title,
   .faq__group-title) so the founder head reads as "location/date" rather
   than as another category label. */
.founder__head-data {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.founder__body p {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure-prose);
}
.founder__body p + p { margin-top: 20px; }
.founder__sig {
  margin-top: 56px;
  margin-left: auto;
  display: block;
  text-align: right;
  max-width: var(--measure-prose);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 500;
  font-style: italic;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

/* ── CTA band ────────────────────────────────────────────────── */
.cta {
  padding-top: clamp(96px, 13vw, 160px);
  padding-bottom: clamp(96px, 13vw, 160px);
}
.cta__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.cta__title {
  margin-top: 18px;
  color: var(--on-ink);
  max-width: 16ch;
  /* Cream type on the drenched tin band reads visually one weight-step
     lighter, so the CTA title sizes up beyond the section-h2 default to
     anchor the page's emphatic finale. Stays below hero display scale. */
  font-size: clamp(36px, 4.5vw, 64px);
}
.cta__intro p {
  color: var(--on-ink-2);
  font-size: var(--fs-body-lg);
  max-width: 36ch;
}
.cta__form { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.cta__row {
  display: flex;
  gap: 8px;
  max-width: 440px;
  align-items: stretch;
}
.cta__input {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  background: var(--surface-paper);
  /* on-ink-2 (warm desaturated cream) carries the rest-state outline at
     ~3.4:1 against tin, passing SC 1.4.11 for non-text contrast. Focus
     state still resolves to solid paper. */
  border: 1px solid var(--on-ink-2);
  border-radius: var(--r-1);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur) var(--ease);
  min-width: 0;
}
.cta__input:focus { border-color: var(--on-ink); }
.cta__input.has-error { border: 2px solid var(--on-ink); padding: 0 13px; }
.cta__meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--on-ink-2);
  line-height: 1.5;
}
.cta__meta a { color: var(--on-ink); text-decoration: underline; }
.cta .form-error { color: var(--on-ink); }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--ink-rule);
}
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 56px clamp(20px, 4vw, 40px) 28px;
}
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 6px; }
/* Footer column titles: small-caps serif, tracked. The mono register
   here used to read as decoration, not data — serif small-caps is the
   more honest editorial choice. */
.footer-col__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.footer-col span,
.footer-col a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  text-decoration: none;
}
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--foil); text-decoration-thickness: 2px; }
.site-footer__bottom {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-rule);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-footer__disclaimer { color: var(--ink-2); }

/* ── Confirmation page ───────────────────────────────────────── */
.confirmation { padding-top: clamp(72px, 12vw, 144px); border-top: 0; }
.confirmation__body { max-width: 720px; }
/* Tin & Brass: the ✓ Reserved tag escalates to a 64px brass wax-stamp.
   Brass on cream at 64px passes WCAG AA-large (~3.7:1) and reads as
   foil-stamped paper. */
.confirmation__mark {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--foil);
  font-weight: 500;
  font-family: var(--font-sans);
  font-style: italic;
  display: inline-block;
  margin-bottom: 24px;
}
.confirmation__h1 { margin-top: 24px; }
.confirmation__body p {
  margin-top: 28px;
  font-size: var(--fs-body-lg);
  color: var(--ink-2);
  max-width: var(--measure-prose);
}
.confirmation__body p + p { margin-top: 18px; }
.confirmation__email {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.confirmation__reservation {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-rule);
}
.confirmation__actions {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Privacy page ────────────────────────────────────────────── */
.privacy-head { border-top: 0; padding-top: clamp(72px, 12vw, 128px); padding-bottom: 48px; }
.privacy-head h1 { margin-top: 24px; max-width: 14ch; }
.privacy-head .data { margin-top: 18px; }

.privacy-body { padding-top: 32px; }
.privacy-intro {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 64px;
}
.privacy-intro p {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure-prose);
}
.privacy-sections { margin-top: 64px; }
.privacy-section {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 64px;
  padding: 32px 0;
  border-top: 1px solid var(--ink-rule);
}
.privacy-section p {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure-prose);
}
.privacy-section ul,
.privacy-section li {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure-prose);
}
.privacy-section ul { padding-left: 22px; margin: 12px 0; }
.privacy-section li + li { margin-top: 6px; }
/* §0N markers as display-scale serif anchors. */
.privacy-section__marker {
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.018em;
  color: var(--ink);
  display: block;
  font-weight: 700;
  font-family: var(--font-sans);
  line-height: 1;
  margin-bottom: 8px;
}
.privacy-section__title {
  margin-top: 16px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.privacy-footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-rule-strong);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── 404 page ────────────────────────────────────────────────── */
.notfound {
  border-top: 0;
  padding-top: clamp(96px, 16vw, 200px);
  padding-bottom: clamp(96px, 16vw, 200px);
  min-height: 70vh;
}
.notfound__body {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.notfound__topline {
  border-bottom: 1px solid var(--ink-rule);
  padding-bottom: 24px;
  margin-bottom: 8px;
}
/* The "404" mark is the page. Serif at display scale carries it alone. */
.notfound__mark {
  font-size: clamp(120px, 18vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink);
  display: block;
}
.notfound__headline {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.015em;
  color: var(--ink-2);
  max-width: 14ch;
}
.notfound__body p {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure-prose);
}
.notfound__actions {
  margin-top: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.notfound__meta {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-rule);
  max-width: 520px;
}

/* ── Skip link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--surface);
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-2);
  z-index: 100;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 12px;
  top: 12px;
  color: var(--surface);
  outline: 2px solid var(--foil);
  outline-offset: 2px;
}

/* ── Visually hidden ─────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Mobile collapses ────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero__grid,
  .cta__grid,
  .faq__grid,
  .privacy-intro,
  .privacy-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .faq__grid { gap: 40px; }
  .founder__head { gap: 8px; }
  .privacy-section { gap: 8px; }
  .features__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .site-footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__top { flex-direction: column; align-items: stretch; gap: 32px; }
  .form-row { flex-wrap: wrap; }
  .form-row .input-email { min-width: 0; flex-basis: 100%; }
  .form-row .btn { width: 100%; justify-content: center; }
  .cta__row { flex-wrap: wrap; }
  .cta__input { flex-basis: 100%; }
  .cta__row .btn--form { width: 100%; }
  .hero__strip--desktop { display: none; }
  .hero__strip--mobile {
    display: block;
    margin-top: 28px;
    padding-top: 20px;
  }
  .hero__offer { margin-top: 24px; font-size: 13px; }
  .faq__a-inner { padding-right: 0; }
}

@media (max-width: 600px) {
  .nav-link { font-size: 13px; }
  .site-header__nav { gap: 16px; }
}

/* ============================================================
   FX module — opt-in hero enhancements (?fx=daylight|breathing|pour).
   Each effect is fully self-contained and additive. Baseline hero
   styles are unchanged.
   ============================================================ */

/* ── FX: daylight ────────────────────────────────────────────── */
/* Canvas sits inside the photo's 1px ink-rule and paints a soft-light
   warm-light field. Pointer events pass through to keep the photo
   non-interactive (matches baseline). */
.fx-daylight-host { position: relative; }
canvas.fx-daylight {
  position: absolute; inset: 1px;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.92;
}
.fx-daylight--fallback::after {
  content: ''; position: absolute; inset: 1px;
  background:
    radial-gradient(80% 60% at 32% 30%, rgba(176, 131, 58, 0.30), transparent 70%),
    radial-gradient(60% 50% at 70% 70%, rgba(30, 24, 20, 0.18), transparent 75%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ── FX: breathing ──────────────────────────────────────────── */
/* The SVG <filter> defs live off-screen; the H1 references it
   via filter: url(#fxInk). Filter scale is animated by JS on a
   slow throttle. */
.fx-breath-defs { position: absolute; left: -9999px; top: -9999px; }

/* Brass hairline that draws on left-to-right on hero enter. We
   replace the static border with a pseudo so we can scaleX it. */
.fx-strip { border-top: 0 !important; position: relative; }
.fx-strip::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  border-top: 1px solid var(--foil);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fx-strip.fx-strip--drawn::before { transform: scaleX(1); }

/* Italic em becomes a positioned host so the flourish anchors
   beneath the baseline. The flourish itself is an SVG path with
   stroke-dasharray draw-on. */
.fx-em-host { position: relative; display: inline-block; }
/* Anchor under the last word of the italic phrase, not its full
   width. Right-aligned, ~40% of em width. */
.fx-flourish {
  display: block;
  position: absolute;
  right: 0.05em; bottom: -0.18em;
  width: 42%; height: 0.32em;
  color: var(--foil);
  pointer-events: none;
  overflow: visible;
}
.fx-flourish path {
  transition: stroke-dashoffset 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 700ms;
}
.fx-flourish--drawn path { stroke-dashoffset: 0 !important; }

/* ── FX: pour ───────────────────────────────────────────────── */
/* Pour is JS-driven (fx.js). The photo's filter is set inline
   on scroll, throttled to rAF. No CSS keyframes needed. */

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  canvas.fx-daylight { display: none; }
  .fx-daylight-host.fx-daylight--fallback::after { animation: none; }
  .fx-strip::before { transition: none; transform: scaleX(1); }
  .fx-flourish path { transition: none; stroke-dashoffset: 0; }
  /* pour is JS-gated by reduce flag; no CSS needed here. */
}