/* Nattergale public site: shared stylesheet.
 * REQ-MKT-1xx SEO/AEO groundwork: consolidates the rules that were
 * byte-for-byte identical in index.html and register-interest.html's
 * inline <style> blocks (same 'Hearth' system, same Plus Jakarta Sans
 * axis). Anything that differed between the two pages, even slightly
 * (e.g. --band-x, --text-h3, .cta base rule, .hero specifics), stays
 * inline on its own page: this file must not change what either page
 * renders. See design.md for the full 'Hearth' system rationale.
 */

:root {
  --color-paper: oklch(97.5% 0.012 80);
  --color-paper-2: oklch(94% 0.018 75);
  --color-panel: oklch(90% 0.05 55);
  --color-panel-ink: oklch(24% 0.05 220);
  --color-ink: oklch(28% 0.045 220);
  --color-ink-soft: oklch(40% 0.035 220);
  --color-accent: oklch(52% 0.16 35);
  --color-accent-deep: oklch(42% 0.14 35);
  --color-accent-ink: oklch(99% 0.01 80);
  --color-line: oklch(80% 0.02 80);
  --color-line-strong: oklch(66% 0.03 75);
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --text-lede: clamp(1.25rem, 1.7vw, 1.5rem);
  --text-h2: clamp(2rem, 3.6vw, 3rem);
  --text-body: clamp(1.125rem, 1.4vw, 1.25rem);
  --text-sm: 1rem;
  --text-kicker: 0.8125rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --band-y: clamp(4rem, 9vw, 7.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fade: 500ms;
  --measure: 58ch;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ overflow-x: clip; }
body{
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}
.page{ text-align: center; animation: appear var(--dur-fade) var(--ease-out) both; }
@keyframes appear{ from{ opacity:0; } to{ opacity:1; } }
.band{ padding: var(--band-y) var(--band-x); }
.band--head{ padding: var(--space-lg) var(--band-x) var(--space-md); }
.band--clay{ background: var(--color-panel); color: var(--color-panel-ink); }
.band--ink{ background: var(--color-ink); color: var(--color-paper); }
.container{ max-width: 68rem; margin-inline: auto; }
h1, h2, h3{ font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; min-width: 0; }
p{ text-wrap: pretty; }

/* wordmark glyph and label: identical on every page that carries the mark */
.mark svg{ width: 26px; height: 26px; flex: none; }
.mark span{
  font-weight: 600;
  font-size: var(--text-kicker);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* shared CTA pill states (base rule stays page-specific: sizing differs) */
.cta:hover{ background: var(--color-accent-deep); color: var(--color-accent-ink); }
.cta:focus-visible{ outline: 2px solid var(--color-panel-ink); outline-offset: 3px; }
.cta:active{ transform: translateY(1px); }

/* footer statement band: the one deep-ink block, identical on both pages */
.foot .statement{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-paper);
  margin-bottom: var(--space-md);
}
.foot .statement b{ font-weight: 400; color: var(--color-paper-2); }

@media (prefers-reduced-motion: reduce){
  .page{ animation: none; }
}

/* ---------- Heading hierarchy reset (REQ-MKT SEO/AEO groundwork) ----------
   index.html promotes its section-heading <p class="kicker"> and
   <p class="statement"> elements to <h2>/<h3> for a real heading
   outline. Browsers give headings default margins that <p> does not
   have at these class names; zero them so the promoted elements keep
   the exact box the design already relies on. */
h2.kicker, h3.kicker, h2.statement, h3.statement {
  margin: 0;
}