/* ============================================================
   TOKENS — inherited verbatim from design-tokens.json
   ============================================================ */
:root {
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-sans:  "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, monospace;
  --font-code:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ink-body: oklch(0.12 0.02 76.35);
  --ink-h1:   oklch(0.23 0.02 76.35);
  --ink-h2:   oklch(0.18 0.02 76.35);
  --ink-h3:   #0A0806;
  --ink-h4:   oklch(0.20 0 76.35);
  --ink-meta: oklch(0.35 0.01 76.35);
  --ink-40:   oklch(0.55 0.01 76.35);
  --rule:     oklch(0.12 0.02 76.35 / 0.14);

  --surface-0: #E0D5C5;
  --surface-1: #F1EAE0;
  --surface-2: #F8F5F0;
  --surface-3: #FBF9F5;
  --surface-4: #FDFCFA;

  --midnight-green: #1B576B;
  --ash-grey:       #A9C1BF;

  --link:       color-mix(in oklch, #1B576B 55%, #1976D2);
  --link-hover: color-mix(in oklch, #1B576B 30%, #1976D2);

  --step--1: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  --step-0:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --step-2:  clamp(1.375rem, 1.20rem + 0.85vw, 1.875rem);
  --step-3:  clamp(1.75rem,  1.35rem + 2.00vw, 2.875rem);
  --step-4:  clamp(2.5rem,   1.60rem + 4.50vw, 5rem);
  --step-5:  clamp(3rem,     1.50rem + 7.50vw, 8rem);

  --lh-tight: 1.05;
  --lh-snug:  1.20;
  --lh-body:  1.60;

  --radius:    4px;
  --radius-lg: 6px;

  /* ============================================================
     LAYOUT TOKENS — landing-specific
     ============================================================ */
  --page-max:     160rem;
  --content-max:  64rem;
  --prose-max:    44rem;
  --gutter:       1.25rem;
  --bp-wide:      64rem;

  --rhythm:    1.5rem;
  --rhythm-l:  3rem;
  --rhythm-xl: 5rem;

  --section-pad: clamp(4rem, 3rem + 4vw, 8rem);
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-body: oklch(0.95 0.012 76.35);
    --ink-h1:   oklch(0.84 0.015 76.35);
    --ink-h2:   oklch(0.89 0.015 76.35);
    --ink-h3:   oklch(0.985 0 76.35);
    --ink-h4:   oklch(0.88 0 76.35);
    --ink-meta: oklch(0.68 0.01 76.35);
    --ink-40:   oklch(0.50 0.01 76.35);
    --rule:     oklch(0.95 0.012 76.35 / 0.15);

    --surface-0: #0E0B07;
    --surface-1: #16130F;
    --surface-2: #1E1A14;
    --surface-3: #262019;
    --surface-4: #2E271E;

    --midnight-green: #6FAEBE;
    --ash-grey:       #3B4E4C;

    --link:       color-mix(in oklch, #6FAEBE 45%, #64B5F6);
    --link-hover: color-mix(in oklch, #6FAEBE 20%, #64B5F6);
  }
}
:root[data-theme="dark"] {
  --ink-body: oklch(0.95 0.012 76.35);
  --ink-h1:   oklch(0.84 0.015 76.35);
  --ink-h2:   oklch(0.89 0.015 76.35);
  --ink-h3:   oklch(0.985 0 76.35);
  --ink-h4:   oklch(0.88 0 76.35);
  --ink-meta: oklch(0.68 0.01 76.35);
  --ink-40:   oklch(0.50 0.01 76.35);
  --rule:     oklch(0.95 0.012 76.35 / 0.15);

  --surface-0: #0E0B07;
  --surface-1: #16130F;
  --surface-2: #1E1A14;
  --surface-3: #262019;
  --surface-4: #2E271E;

  --midnight-green: #6FAEBE;
  --ash-grey:       #3B4E4C;

  --link:       color-mix(in oklch, #6FAEBE 45%, #64B5F6);
  --link-hover: color-mix(in oklch, #6FAEBE 20%, #64B5F6);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-1);
  color: var(--ink-body);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--midnight-green); color: var(--surface-2); }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-serif); line-height: var(--lh-tight); }
h3, h4 { font-family: var(--font-sans); line-height: var(--lh-snug); }
hgroup { margin: 0; }    /* reset browser default */
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.06em; transition: color 140ms ease; }
a:hover { color: var(--link-hover); }

/* ============================================================
   SHARED SHELL
   ============================================================ */
.room {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
}
.room-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--prose-max); }

/* ============================================================
   NAV — landing variant (less navigation, more funnel-through).
   Note: a more complete main-nav component comes in a later bench.
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background 200ms ease;
}
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 1rem var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 1.5rem;
}
.brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.015em;
  color: var(--ink-h1);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.brand .version {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.55em;
  color: var(--ink-meta);
  letter-spacing: 0.05em;
}
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  gap: 1.75rem;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}
.nav-links a {
  color: var(--ink-body);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 140ms ease;
}
.nav-links a::before {
  content: "#";
  color: var(--ink-40);
  margin-right: 0.25rem;
  opacity: 0.5;
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::before { color: var(--midnight-green); opacity: 1; }

@media (min-width: 40rem) { .nav-links { display: flex; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.005em;
  padding: 0.7em 1.2em;
  border-radius: var(--radius);
  border: 1.5px solid var(--midnight-green);
  background: transparent;
  color: var(--midnight-green);
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:hover {
  background: var(--midnight-green);
  color: var(--surface-2);
}
.btn--solid {
  background: var(--midnight-green);
  color: var(--surface-2);
}
.btn--solid:hover {
  background: var(--ink-body);
  border-color: var(--ink-body);
  color: var(--surface-2);
}
.btn--compact {
  font-size: var(--step--1);
  padding: 0.55em 1em;
}
.link-quiet {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink-body);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.15em;
  transition: border-color 160ms ease, color 160ms ease;
}
.link-quiet:hover {
  color: var(--midnight-green);
  border-bottom-color: var(--midnight-green);
}
.link-quiet::after {
  content: " →";
  font-family: var(--font-mono);
  opacity: 0.6;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: clamp(5rem, 4rem + 5vw, 10rem) 0 clamp(4rem, 3rem + 4vw, 8rem);
}
.hero hgroup { margin: 0 0 calc(var(--rhythm-l) + 0.5rem); }
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-meta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--rhythm-l);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--midnight-green);
}
.hero h1 {
  font-size: var(--step-5);
  font-weight: 500;
  line-height: 0.98;
  color: var(--ink-h1);
  margin: 0 0 var(--rhythm-l);
  max-width: 18ch;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--midnight-green);
}
.hero-lede {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink-h2);
  max-width: 42ch;
  margin: 0;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--rule);
}
.manifesto-head {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 var(--rhythm-l);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.manifesto-head .idx {
  color: var(--midnight-green);
  font-variant-numeric: tabular-nums;
}
.manifesto-grid {
  display: grid;
  gap: var(--rhythm-l);
}
@media (min-width: 48rem) {
  .manifesto-grid { grid-template-columns: 1fr 1fr 1fr; gap: 3rem; }
}
.stanza { max-width: 30ch; }
.stanza h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: -0.01em;
  color: var(--ink-h2);
  margin: 0 0 var(--rhythm);
  line-height: 1.15;
}
.stanza p {
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0;
}
.stanza p + p { margin-top: 0.75em; }

/* ============================================================
   SUBSTANCE
   ============================================================ */
.substance {
  background: var(--surface-0);
  padding: var(--section-pad) 0;
}
.substance-head {
  display: grid;
  gap: var(--rhythm-l);
  margin-bottom: calc(var(--rhythm-xl) + 1rem);
}
@media (min-width: 48rem) {
  .substance-head {
    grid-template-columns: 1fr 1.6fr;
    gap: 4rem;
    align-items: end;
  }
}
.substance-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.substance-label .idx {
  color: var(--midnight-green);
  font-variant-numeric: tabular-nums;
  margin-right: 0.4em;
}
.substance h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  color: var(--ink-h2);
  line-height: 1.05;
  max-width: 16ch;
  margin: 1rem 0 0;
}
.substance-intro {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-h2);
  max-width: 40ch;
  margin: 0;
}

.principles {
  list-style: none;
  counter-reset: principle;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.principles li {
  counter-increment: principle;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: var(--rhythm-l) 0;
  border-top: 1px solid var(--rule);
}
.principles li:last-child { border-bottom: 1px solid var(--rule); }
.principles li::before {
  content: counter(principle, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--midnight-green);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding-top: 0.6em;
}
.principles .principle {
  display: grid;
  gap: var(--rhythm);
}
@media (min-width: 52rem) {
  .principles li { grid-template-columns: 4rem 18rem 1fr; gap: 2rem; }
  .principles .principle { grid-template-columns: subgrid; grid-column: span 2; gap: 2rem; align-items: baseline; }
}
.principles h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: -0.01em;
  color: var(--ink-h2);
  line-height: 1.1;
  margin: 0;
  max-width: 20ch;
}
.principles p {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0;
  max-width: 48ch;
}

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pullquote {
  background: var(--surface-2);
  padding: calc(var(--section-pad) + 1rem) 0;
}
.pullquote .room-inner { max-width: 56rem; }
.pullquote-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--rhythm-l);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.pullquote-label::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--midnight-green);
}
.pullquote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.1rem + 2.5vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-h1);
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.pullquote blockquote::before {
  content: "“";
  display: block;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 4em;
  line-height: 0.8;
  color: var(--midnight-green);
  margin-bottom: -0.2em;
  margin-left: -0.15em;
}
.pullquote cite {
  display: block;
  margin-top: var(--rhythm-l);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-meta);
}
.pullquote cite .who {
  color: var(--ink-body);
  font-weight: 500;
}

/* ============================================================
   INVITATION
   ============================================================ */
.invitation {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--rule);
}
.invitation .inner {
  display: grid;
  gap: var(--rhythm-l);
  align-items: start;
}
@media (min-width: 48rem) {
  .invitation .inner { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: end; }
}
.invitation-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 var(--rhythm);
}
.invitation h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  color: var(--ink-h1);
  line-height: 1.05;
  margin: 0 0 var(--rhythm-l);
  max-width: 16ch;
}
.invitation p {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-h2);
  margin: 0 0 var(--rhythm-l);
  max-width: 44ch;
}
.invitation-actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-meta);
}
.invitation-actions .btn { align-self: flex-start; }

/* ============================================================
   FOOTER — landing variant.
   Note: a more complete main footer component comes in a later bench.
   ============================================================ */
footer.colophon {
  background: var(--surface-0);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-meta);
  letter-spacing: 0.02em;
}
.colophon-body { padding: var(--rhythm-xl) 0 var(--rhythm-l); }
.colophon .cols {
  display: grid;
  gap: var(--rhythm-l);
  padding-bottom: var(--rhythm-xl);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--rhythm-l);
}
@media (min-width: 48rem) {
  .colophon .cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}
.colophon h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-meta);
  margin: 0 0 1rem;
}
.colophon p {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 38ch;
  margin: 0;
}
.colophon ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.colophon ul a {
  color: var(--ink-body);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 140ms ease;
}
.colophon ul a::before {
  content: "#";
  color: var(--ink-40);
  margin-right: 0.3em;
  opacity: 0.5;
}
.colophon ul a:hover { opacity: 1; }
.colophon ul a:hover::before { color: var(--midnight-green); opacity: 1; }
.colophon dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.75rem;
}
.colophon dt { color: var(--ink-meta); }
.colophon dt::after { content: ":"; }
.colophon dd { margin: 0; color: var(--ink-body); }
.colophon .meta-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  letter-spacing: 0.04em;
}

/* ============================================================
   USER PREFERENCES — sits OUTSIDE the footer content-max.
   Uses page-max so it spans wider than .colophon .room-inner
   on desktop. On mobile it wraps naturally.
   ============================================================ */
.user-preferences {
  border-top: 1px solid var(--rule);
  padding: 1.1rem 0;
}
.up-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.25rem;
}
.up-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}
.up-label {
  color: var(--ink-meta);
  letter-spacing: 0.02em;
  font-size: var(--step--1);
}
.up-label::after { content: ":"; }

/* Theme nav — segmented, mono, underline marks active */
.theme-nav {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}
.theme-nav button {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-body);
  background: transparent;
  border: 0;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  opacity: 0.62;
  border-bottom: 1px solid transparent;
  transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease;
  letter-spacing: 0.02em;
}
.theme-nav button:hover { opacity: 1; }
.theme-nav button[aria-checked="true"] {
  opacity: 1;
  color: var(--midnight-green);
  border-bottom-color: var(--midnight-green);
}

/* Shared control button style for language and cookies */
.up-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-body);
  background: transparent;
  border: 0;
  padding: 0.3rem 0;
  cursor: pointer;
  opacity: 0.72;
  border-bottom: 1px solid var(--rule);
  transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease;
  letter-spacing: 0.02em;
}
.up-control:hover {
  opacity: 1;
  color: var(--midnight-green);
  border-bottom-color: var(--midnight-green);
}
.up-control .icon {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  opacity: 0.7;
}
.up-control .chev {
  width: 0.7em;
  height: 0.7em;
  opacity: 0.5;
  margin-left: 0.15em;
}