/* Shared token + base layer for the secondary pages (/sample/, /thanks/).
   The homepage inlines its own copy on purpose: it is the LCP-critical surface and an
   external stylesheet would add a render-blocking round trip to the page that matters most.
   Source of truth for the values is business/brand/DESIGN.md, propagated by
   tools/sync_design_contract.py. Type and composition per type-composition-spec.md. */

@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/newsreader-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/geist-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/geistmono-500-latin.woff2") format("woff2");
}

:root {
  --pine:#264D40; --pine-deep:#1B382E; --paper:#FAF7F1; --ink:#1A1A17;
  --stone:#6B675E; --hairline:#E4DED2; --on-accent:#FAF7F1;
  --r-sm:2px; --r-md:4px;

  --s-1:8px; --s-2:16px; --s-3:32px; --s-4:48px; --s-5:64px; --s-6:96px; --s-7:128px;

  --t-display:clamp(2.5rem, 5.5vw, 4rem);
  --t-head:clamp(1.75rem, 3.2vw, 2.5rem);
  --t-sub:1.5rem; --t-title:1.25rem; --t-lead:1.125rem;
  --t-body:1rem; --t-small:0.875rem; --t-micro:0.75rem;

  --measure:68ch; --shell:1120px;
  --ease:cubic-bezier(0.23, 1, 0.32, 1);
}

/* LIGHT ONLY (D1, ENG-051/ENG-053). Dark mode is deleted from the brand: business/brand/DESIGN.md
   declares no dark palette, and tools/site_regression.py captures light only. The dark
   prefers-color-scheme block that used to sit here was the last live remnant, and while the
   homepage inlined its own copy the two shared pages did not - a dark-mode visitor got a light
   homepage and dark /sample/ and /thanks/ in the same visit. */

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Geist", system-ui, sans-serif;
  font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
p { margin:0; }
a { color:inherit; }

h1, h2, h3 { font-family:"Newsreader", Georgia, serif; font-weight:400; margin:0; }
.display { font-size:var(--t-display); line-height:1.05; letter-spacing:-0.02em; }
.head    { font-size:var(--t-head);    line-height:1.15; letter-spacing:-0.015em; }
.sub     { font-size:var(--t-sub);     line-height:1.25; letter-spacing:-0.01em; }
.title   { font-size:var(--t-title);   line-height:1.25; letter-spacing:-0.01em; }

.shell { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:24px; }

.eyebrow {
  font-family:"Geist Mono", ui-monospace, monospace;
  font-size:var(--t-micro); font-weight:500; line-height:1.4;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--stone);
}
.lede  { font-size:var(--t-lead); line-height:1.5; color:var(--stone); max-width:52ch; }
.small { font-size:var(--t-small); line-height:1.5; color:var(--stone); }
.figure { font-family:"Geist Mono", ui-monospace, monospace; font-weight:500;
          font-variant-numeric:tabular-nums; }

.btn {
  display:inline-block; font-family:inherit; font-size:var(--t-body); font-weight:500;
  line-height:1; padding:14px 28px; border-radius:var(--r-sm); text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn-primary { background:var(--pine); color:var(--on-accent); }
.btn-primary:hover, .btn-primary:focus-visible { background:var(--pine-deep); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--hairline); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color:var(--pine); }
:where(a, button):focus-visible { outline:2px solid var(--pine); outline-offset:3px; border-radius:var(--r-sm); }

.nav {
  min-height:68px; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-2); padding-block:var(--s-2); border-bottom:1px solid var(--hairline);
}
.wordmark { font-family:"Newsreader", Georgia, serif; font-size:var(--t-title);
            color:var(--pine); text-decoration:none; white-space:nowrap; }

.footer {
  border-top:1px solid var(--hairline); padding-block:var(--s-3);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-1) var(--s-2);
  font-size:var(--t-small); color:var(--stone);
}

main { flex:1; }