/* Hallmark · macrostructure: Split Hero + sticky Workbench · tone: bright, confident, American · anchor hue: red 27° on navy 265°
 * theme: custom (vibe: "morning light, flag on the porch, confident" · paper oklch(98% 0.006 85) · accent oklch(56% 0.22 27) red · ink oklch(24% 0.06 265) navy · Anton + Newsreader + Inter)
 * nav: N6 masthead · footer: Ft5 statement · enrichment: generated daylight stills (flag, Capitol, highway sunrise, porch, main street)
 * pre-emit critique: P5 H4 E5 S4 R4 V5 */

:root {
  --color-paper: oklch(98% 0.006 85);
  --color-paper-2: oklch(95.5% 0.01 85);
  --color-paper-3: oklch(92% 0.014 85);
  --color-ink: oklch(24% 0.06 265);
  --color-ink-2: oklch(34% 0.05 265);
  --color-text: var(--color-ink);
  --color-text-2: oklch(38% 0.04 265);
  --color-muted: oklch(55% 0.025 265);
  --color-on-ink: oklch(98% 0.006 85);
  --color-accent: oklch(56% 0.22 27);
  --color-accent-deep: oklch(46% 0.19 27);
  --color-line: oklch(24% 0.06 265 / .14);
  --color-line-strong: oklch(24% 0.06 265 / .34);
  --color-focus: oklch(50% 0.16 265);

  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px;
  --space-xl: 56px; --space-2xl: 96px; --space-3xl: 150px;

  --text-xs: .72rem; --text-sm: .86rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.5rem;
  --text-2xl: clamp(1.7rem, 3.4vw, 2.6rem);
  --text-3xl: clamp(2.4rem, 5.4vw, 4.2rem);
  --text-display: clamp(3.4rem, 8.2vw, 7.4rem);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms; --dur-base: 420ms; --dur-slow: 900ms; --dur-cinema: 1400ms;

  --rule: 1px solid var(--color-line);
  --radius: 0;
  --gutter: 20px;
  --wide: min(1200px, calc(100% - 2 * var(--gutter)));
}
@media (min-width: 760px) { :root { --gutter: 40px; } }

@font-face { font-family: 'Anton'; src: url('/assets/fonts/anton.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader-var.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader-italic-var.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

* { box-sizing: border-box; }
html { background: var(--color-paper); scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-text);
  font-family: var(--font-ui); font-size: var(--text-md); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-style: normal; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.wrap { width: var(--wide); margin: 0 auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--color-ink); color: var(--color-on-ink); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* paper grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- masthead ---------- */
.masthead { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--color-paper); border-bottom: var(--rule); transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.masthead.is-stuck { background: oklch(98% 0.006 85 / .88); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 30px -18px oklch(24% 0.06 265 / .35); }
.masthead__inner { width: var(--wide); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 22px 0; transition: padding var(--dur-base) var(--ease-out); }
.masthead.is-stuck .masthead__inner { padding: 12px 0; }
.brand img { width: min(200px, 42vw); height: auto; transition: width var(--dur-base) var(--ease-out); }
.masthead.is-stuck .brand img { width: min(140px, 36vw); }
.nav { display: none; gap: 4px; }
.nav a, .mobile-nav a {
  position: relative; font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--color-ink-2); padding: 10px 12px; transition: color var(--dur-fast) var(--ease-out);
}
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.nav a:hover, .nav a:focus-visible { color: var(--color-ink); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--color-paper); border: 1px solid var(--color-line-strong); color: var(--color-ink); padding: 10px 14px; font: 600 var(--text-xs)/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.menu-btn__bar { display: block; width: 18px; height: 2px; background: currentColor; transition: transform var(--dur-base) var(--ease-out); }
.menu-btn__bar + .menu-btn__bar { margin-top: -6px; transform: translateY(6px); }
.menu-btn[aria-expanded="true"] .menu-btn__bar:first-child { transform: translateY(2px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar + .menu-btn__bar { transform: translateY(0) rotate(-45deg); }
.mobile-nav { display: none; flex-direction: column; width: var(--wide); margin: 0 auto; padding: 4px 0 18px; border-top: var(--rule); }
.mobile-nav a { padding: 14px 0; border-bottom: var(--rule); font-size: var(--text-sm); }
.masthead.is-open { background: oklch(98% 0.006 85 / .97); border-bottom: var(--rule); }
.masthead.is-open .mobile-nav { display: flex; }
@media (min-width: 860px) { .nav { display: flex; } .menu-btn { display: none; } .mobile-nav { display: none !important; } }

/* ---------- hero (split) ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100svh; overflow: clip; background: var(--color-paper); }
.hero__text { order: 2; width: var(--wide); margin: 0 auto; padding: var(--space-xl) 0 var(--space-xl); display: flex; flex-direction: column; justify-content: center; }
.hero__media { order: 1; position: relative; height: 52svh; min-height: 300px; margin-top: 88px; overflow: clip; will-change: transform; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; transform: scale(1.12); animation: kenburns 16s var(--ease-out) forwards; }
@keyframes kenburns { to { transform: scale(1.0); } }
.hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink-2); margin-bottom: var(--space-md); }
.hero__kicker .dot { width: 6px; height: 6px; background: var(--color-accent); border-radius: 50%; }
.hero__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-display); line-height: .92; letter-spacing: .005em; color: var(--color-ink); max-width: 11ch; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.hero__title .line > span { display: block; transform: translateY(110%); animation: rise var(--dur-cinema) var(--ease-out) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: 120ms; color: var(--color-accent); }
@keyframes rise { to { transform: translateY(0); } }
.hero__lede { font-family: var(--font-serif); font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.45; max-width: 30em; color: var(--color-text-2); margin: var(--space-lg) 0 var(--space-lg); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.reveal-line { opacity: 0; transform: translateY(18px); animation: fadeup var(--dur-slow) var(--ease-out) forwards; }
.hero__kicker.reveal-line { animation-delay: 80ms; } .hero__lede.reveal-line { animation-delay: 520ms; } .hero__ctas.reveal-line { animation-delay: 700ms; }
@keyframes fadeup { to { opacity: 1; transform: none; } }
.scroll-cue { display: none; position: absolute; left: var(--gutter); bottom: 28px; width: 1px; height: 64px; overflow: hidden; background: var(--color-line); }
.scroll-cue span { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--color-ink); animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { 0%{top:-100%} 60%,100%{top:100%} }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
  .hero__text { order: 1; width: auto; margin: 0; padding: 140px var(--space-xl) var(--space-2xl) max(var(--gutter), calc((100vw - 1200px) / 2)); }
  .hero__media { order: 2; height: auto; min-height: 100svh; margin-top: 0; }
  .scroll-cue { display: block; left: max(var(--gutter), calc((100vw - 1200px) / 2)); }
}

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 600; font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; padding: 16px 22px; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn i { width: 22px; height: 1px; background: currentColor; position: relative; transition: width var(--dur-base) var(--ease-out); }
.btn i::after { content: ""; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover i, .btn:focus-visible i { width: 34px; }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); }
.btn--solid:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn--ghost { background: transparent; color: var(--color-ink); border: 1px solid var(--color-line-strong); }
.btn--ghost:hover { border-color: var(--color-ink); background: var(--color-paper-2); }

/* ---------- shared ---------- */
.eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--color-accent); }
section { position: relative; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- statement ---------- */
.statement { padding: var(--space-2xl) 0; border-top: var(--rule); border-bottom: var(--rule); background: var(--color-paper); }
.statement__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: end; }
.statement__copy { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.55rem, 3.1vw, 2.75rem); line-height: 1.22; letter-spacing: -.005em; margin-top: var(--space-md); text-wrap: pretty; color: var(--color-ink); }
.statement__copy .w { color: var(--color-muted); opacity: .45; transition: opacity 160ms linear, color 320ms var(--ease-out); }
.statement__copy .w.lit { color: var(--color-ink); opacity: 1; }
.ledger { border-top: 1px solid var(--color-line-strong); font-size: var(--text-sm); }
.ledger__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md); padding: 12px 0; border-bottom: var(--rule); }
.ledger__row span { color: var(--color-muted); letter-spacing: .1em; text-transform: uppercase; font-size: var(--text-xs); padding-top: 2px; }
.ledger__row b { font-weight: 500; color: var(--color-ink); }
@media (min-width: 900px) { .statement { padding: var(--space-3xl) 0; } .statement__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); gap: var(--space-2xl); } }

/* ---------- work ---------- */
.work { padding: var(--space-2xl) 0; border-bottom: var(--rule); background: var(--color-paper-2); }
.work__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.work__sticky { position: relative; }
.work__frames { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: var(--color-paper-3); box-shadow: 0 30px 60px -30px oklch(24% 0.06 265 / .35); }
.work__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity var(--dur-cinema) var(--ease-out), transform 2.4s var(--ease-out); }
.work__frame.is-active { opacity: 1; transform: scale(1); }
.work__counter { position: absolute; left: 0; bottom: 0; background: var(--color-ink); color: var(--color-on-ink); padding: 8px 14px; font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: .06em; display: flex; gap: 6px; }
.work__counter .slash { color: var(--color-accent); }
.work__head { margin-bottom: var(--space-lg); }
.work__lede { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1.15; margin-top: var(--space-md); max-width: 18em; color: var(--color-ink); }
.step { position: relative; padding: var(--space-lg) 0; border-top: var(--rule); transition: opacity var(--dur-base) var(--ease-out); }
.step__num { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent); letter-spacing: .08em; margin-bottom: var(--space-xs); }
.step__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-3xl); line-height: .95; margin-bottom: var(--space-sm); color: var(--color-ink); }
.step p { color: var(--color-text-2); font-size: var(--text-lg); line-height: 1.55; max-width: 32em; }
@media (min-width: 900px) {
  .work { padding: var(--space-2xl) 0 var(--space-3xl); }
  .work__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: start; }
  .work__sticky { position: sticky; top: 96px; }
  .work__frames { aspect-ratio: 4 / 5; }
  .step { padding: var(--space-xl) 0; min-height: 44vh; display: flex; flex-direction: column; justify-content: center; }
  .step:last-child { padding-bottom: var(--space-md); }
  .step.is-dim { opacity: .4; }
}

/* ---------- ticker ---------- */
.ticker { overflow: clip; background: var(--color-ink); color: var(--color-on-ink); padding: 14px 0; }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker__track span { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: .04em; padding: 0 28px; position: relative; white-space: nowrap; }
.ticker__track span::after { content: ""; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; background: var(--color-accent); transform: translateY(-50%) rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- principles ---------- */
.principles { padding: var(--space-2xl) 0; border-bottom: var(--rule); background: var(--color-paper); }
.principles__head { margin-bottom: var(--space-lg); }
.principles__lede { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1.15; margin-top: var(--space-md); max-width: 22em; color: var(--color-ink); }
.plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line-strong); }
.plist__item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-xs) var(--space-md); padding: var(--space-lg) 0; border-bottom: var(--rule); }
.plist__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-accent); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-base) var(--ease-out); }
.plist__item:hover::before, .plist__item:focus-within::before { transform: scaleY(1); }
.plist__num { grid-row: 1 / span 2; font-family: var(--font-serif); font-size: var(--text-xl); color: var(--color-accent); padding-top: .35em; padding-left: 14px; }
.plist__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-3xl); line-height: .95; color: var(--color-ink); transition: transform var(--dur-base) var(--ease-out); }
.plist__item:hover .plist__title { transform: translateX(10px); }
.plist__body { color: var(--color-text-2); font-size: var(--text-lg); line-height: 1.55; max-width: 34em; }
.plist__item.in { transition-delay: calc(var(--i, 0) * 90ms); }
@media (min-width: 900px) {
  .principles { padding: var(--space-3xl) 0; }
  .plist__item { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-xl); padding: var(--space-xl) 0; }
  .plist__num { grid-row: auto; }
}

/* ---------- closing ---------- */
.closing { position: relative; min-height: 70svh; display: flex; align-items: center; overflow: clip; isolation: isolate; color: var(--color-on-ink); }
.closing__media { position: absolute; inset: -10% 0; z-index: -2; will-change: transform; }
.closing__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.closing__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, oklch(24% 0.06 265 / .78) 0%, oklch(24% 0.06 265 / .45) 55%, oklch(24% 0.06 265 / .15) 100%); }
.closing__inner { padding: var(--space-2xl) 0; }
.closing__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-display); line-height: .92; margin-bottom: var(--space-md); }
.closing__title span { display: block; } .closing__title span:last-child { color: oklch(78% 0.16 27); }
.closing__lede { font-family: var(--font-serif); font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.45; max-width: 28em; color: oklch(96% 0.006 85 / .92); transition-delay: 120ms; }
@media (min-width: 900px) { .closing { min-height: 80svh; } .closing__inner { padding: var(--space-3xl) 0; } }

/* ---------- footer ---------- */
.footer { padding: var(--space-lg) 0 var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); background: var(--color-paper); }
.footer__disc { background: var(--color-paper-2); border: 1px solid var(--color-line-strong); padding: 14px 16px; text-align: center; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--color-ink-2); font-size: var(--text-xs); margin-bottom: var(--space-md); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }
.footer__links { display: flex; gap: var(--space-md); }
.footer__links a { text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--color-line); transition: color var(--dur-fast), border-color var(--dur-fast); }
.footer__links a:hover { color: var(--color-ink); border-color: var(--color-ink); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__img { animation: none; transform: none; }
  .hero__title .line > span, .reveal-line { animation: none; transform: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none; }
  .scroll-cue span { animation: none; top: 0; }
  .statement__copy .w { opacity: 1; color: var(--color-ink); }
  .work__frame { transition: opacity var(--dur-fast) linear; transform: none; }
  .step.is-dim { opacity: 1; }
}

/* ---------- nav cta ---------- */
.nav__cta { margin-left: 8px; background: var(--color-ink); color: var(--color-on-ink) !important; padding: 10px 16px !important; }
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--color-accent); }

/* ---------- statement (single column) ---------- */
.statement__single .statement__copy { max-width: 26em; }

/* ---------- join / opt-in ---------- */
.join { padding: var(--space-2xl) 0; border-top: var(--rule); background: var(--color-paper-2); }
.join__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.join__lede { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-3xl); line-height: .95; color: var(--color-ink); margin-top: var(--space-md); max-width: 12ch; }
.join__body { color: var(--color-text-2); font-size: var(--text-lg); line-height: 1.55; max-width: 28em; margin-top: var(--space-md); transition-delay: 100ms; }
.optin { background: var(--color-paper); border: 1px solid var(--color-line-strong); padding: var(--space-lg); display: grid; gap: var(--space-md); box-shadow: 0 30px 60px -40px oklch(24% 0.06 265 / .4); transition-delay: 150ms; }
.optin__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
@media (min-width: 560px) { .optin__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: grid; gap: 6px; }
.field .opt { font-style: normal; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--color-muted); margin-left: 6px; }
.field span { font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-2); }
.field input { font: 400 var(--text-md)/1.3 var(--font-ui); color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-line-strong); padding: 13px 14px; width: 100%; min-width: 0; border-radius: var(--radius); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.field input::placeholder { color: var(--color-muted); }
.field input:hover { border-color: var(--color-ink-2); }
.field input:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px oklch(24% 0.06 265 / .14); }
.field input:focus-visible { outline: none; }
.field.is-invalid input { border-color: var(--color-accent); box-shadow: 0 0 0 3px oklch(56% 0.22 27 / .16); }
.field .err { font-size: var(--text-xs); font-style: normal; color: var(--color-accent); letter-spacing: 0; text-transform: none; font-weight: 500; display: none; }
.field.is-invalid .err { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-2); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-accent); cursor: pointer; }
.consent a { color: var(--color-ink); }
.consent.is-invalid { color: var(--color-accent); }
.optin__submit { justify-content: center; width: 100%; border: 0; cursor: pointer; font-family: var(--font-ui); }
.optin__submit[disabled] { opacity: .6; cursor: progress; }
.optin__msg { font-size: var(--text-sm); color: var(--color-text-2); margin: 0; }
.optin__msg:empty { display: none; }
.optin__msg.is-error { color: var(--color-accent); }
.optin.is-done .optin__row, .optin.is-done .field, .optin.is-done .consent, .optin.is-done .optin__submit { display: none; }
.optin.is-done { grid-template-columns: 1fr; }
.optin__done { display: none; text-align: center; padding: var(--space-lg) 0; }
.optin.is-done .optin__done { display: block; }
.optin__done b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-2xl); color: var(--color-ink); line-height: 1; margin-bottom: var(--space-sm); }
.optin__done p { color: var(--color-text-2); }
@media (min-width: 900px) { .join { padding: var(--space-3xl) 0; } .join__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-2xl); } .optin { padding: var(--space-xl); } }

/* ---------- legal pages ---------- */
.legal { padding: 150px 0 var(--space-2xl); max-width: 42em; }
.legal h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-3xl); line-height: .95; color: var(--color-ink); margin: var(--space-md) 0 var(--space-lg); }
.legal h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-xl); color: var(--color-ink); margin: var(--space-xl) 0 var(--space-sm); }
.legal p, .legal li { color: var(--color-text-2); font-size: var(--text-md); line-height: 1.65; margin-bottom: var(--space-sm); }
.legal ul { padding-left: 1.2em; }
.legal .updated { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }