/* =============================================================
   ROOTegra — rootegra.com
   Vintage Scientific Beauty Academy × Modern Editorial Luxury SaaS
   Block / grid editorial composition — May 2026 rebuild
   ============================================================= */

/* ============================================================
   01 · TOKENS
   ============================================================ */
:root {
  /* color */
  --moss: #5E6B55;
  --moss-deep: #4A5644;
  --sage: #8C9888;
  --clay: #C9A58E;
  --dusty-blue: #6C89AB;
  --parchment: #F5EFE6;
  --warm-ivory: #FAF7F2;
  --espresso: #26221F;

  /* derived */
  --ink: #26221F;
  --ink-70: rgba(38, 34, 31, 0.70);
  --ink-50: rgba(38, 34, 31, 0.50);
  --ink-30: rgba(38, 34, 31, 0.30);
  --ink-15: rgba(38, 34, 31, 0.15);
  --rule: rgba(38, 34, 31, 0.12);
  --rule-strong: rgba(38, 34, 31, 0.22);
  --rule-moss: rgba(94, 107, 85, 0.30);
  --rule-parchment: rgba(245, 239, 230, 0.35);

  /* paper-noise overlay */
  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0 0.11 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.45'/></svg>");

  /* type */
  --serif-display: 'Cormorant Garamond', 'Newsreader', Georgia, serif;
  --serif-editorial: 'Newsreader', 'Cormorant Garamond', Georgia, serif;
  --sans: 'General Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --script: 'Caveat', 'Cormorant Garamond', cursive;

  /* spacing scale (8) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* layout */
  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* ============================================================
   02 · RESET / BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--moss); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   03 · UTILITY: skip, top bar, eyebrow, kicker
   ============================================================ */
.skip {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip:focus {
  left: 12px; top: 12px;
  width: auto; height: auto;
  padding: 8px 12px;
  background: var(--espresso);
  color: var(--parchment);
  z-index: 1000;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  background: rgba(245, 239, 230, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.topbar-brand img { border-radius: 6px; }
.topbar-rmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--moss);
  color: var(--parchment);
  font-family: var(--serif-display);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
  border: 1px solid var(--moss-deep);
}
.topbar-name {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--espresso);
}

.topbar-right {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.topbar-cta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  white-space: nowrap;
  transition: color 120ms ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.topbar-cta:hover {
  color: var(--moss);
  border-bottom-color: var(--moss);
}

.beta-pill {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.beta-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 3px rgba(94, 107, 85, 0.18);
}
.beta-sep { opacity: 0.5; }

/* Section eyebrow */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin: 0 0 var(--s-2);
}

.kicker-mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.6;
  margin: var(--s-3) 0 0;
}

/* ============================================================
   04 · HAND-WRITTEN ANNOTATIONS (Dusty Blue)
   ============================================================ */
.hand {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--dusty-blue);
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.hand-text {
  font-family: var(--script);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  color: var(--dusty-blue);
}
.hand-arrow { width: 56px; height: 36px; }
.hand-arrow.flip { transform: scaleX(-1); }

/* Specific placements */
.root-word {
  position: relative;
  display: inline-block;
}
.hand-root {
  position: absolute;
  top: -8px;
  left: calc(100% + 14px);
  transform: rotate(-4deg);
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
  width: max-content;
}
.hand-root .hand-arrow {
  width: 56px;
  height: 42px;
  flex-shrink: 0;
}
.hand-root .hand-text {
  font-size: 20px;
  line-height: 1.1;
}
.hand-pillars {
  position: absolute;
  right: var(--gutter);
  top: var(--s-5);
  transform: rotate(2deg);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.hand-arrow-pillars {
  width: 60px;
  height: 40px;
  margin-right: 8px;
}
.hand-values {
  position: absolute;
  right: var(--gutter);
  top: var(--s-5);
  transform: rotate(-2deg);
}
.hand-manifesto {
  display: block;
  position: static;
  margin-top: var(--s-3);
  transform: rotate(-2deg);
}
.hand-manifesto .hand-text { color: #B7C9DC; }

/* ============================================================
   05 · SHARED CELL / GRID PRIMITIVES
   ============================================================ */

/* Every section is a contained band. Inner content sits inside a max-width grid. */
section.hero-spread,
section.pillars,
section.learn,
section.archive,
section.values,
section.manifesto,
section.waitlist-band {
  position: relative;
}

.band-head {
  position: relative;
  padding: var(--s-6) var(--gutter) var(--s-4);
  max-width: var(--maxw);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
}
.band-head .eyebrow { margin-bottom: var(--s-2); }
.band-head .display-h2 {
  margin: 0;
  max-width: 18ch;
}

.display-hero {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-3);
  color: var(--espresso);
}
.display-hero em {
  font-style: italic;
  font-weight: 500;
  color: var(--moss);
}

.display-h2 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--espresso);
}
.display-h2 em {
  font-style: italic;
  color: var(--moss);
}

/* Generic cell — the workhorse */
.cell {
  position: relative;
  padding: var(--s-4) var(--s-3);
  border-right: 1px solid var(--rule);
}
.cell:last-child { border-right: none; }

/* ============================================================
   06 · HERO SPREAD — two rows of two cells each (max-2 rule)
   Row 1: | MOSS BRAND | MENTOR PHOTO |
   Row 2: | PARCHMENT MISSION (full-width, measured interior) |
   ============================================================ */
.hero-spread {
  max-width: var(--maxw);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
  background: var(--parchment);
}
.hero-row {
  display: grid;
}
.hero-row-anchors {
  /* Row 1 — two visual anchors side-by-side */
  grid-template-columns: 1fr 1.2fr;
  border-bottom: 1px solid var(--rule);
}
.hero-row-mission {
  /* Row 2 — single full-width mission cell; copy is measured inside */
  grid-template-columns: 1fr;
}
.hero-row-mission .cell-parch {
  border-right: none;
}
.hero-mission-inner {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.cell-moss {
  background: var(--moss);
  color: var(--parchment);
  padding: var(--s-6) var(--s-4);
  border-right: 1px solid var(--moss-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 560px;
}
.hero-mark-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 360px;
  width: 100%;
}
.hero-row-anchors .hero-photo-mentor {
  min-height: 560px;
}
.cell-moss .hero-rmark {
  width: 110px;
  height: auto;
  border-radius: 14px;
  filter: brightness(1.02);
  margin: 0 0 var(--s-3);
}
.cell-moss .hero-wordmark {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1;
  margin: 0 0 6px;
  color: var(--parchment);
}
.cell-moss .hero-parent {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.70);
  margin: 0 0 var(--s-3);
}
.hero-rule {
  width: 48px;
  height: 1px;
  background: rgba(245, 239, 230, 0.35);
  margin: 0 0 var(--s-3);
}
.hero-rule-2 { margin-top: var(--s-3); }
.cell-moss .hero-manifesto-line {
  font-family: var(--serif-display);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.35;
  font-style: italic;
  font-weight: 400;
  color: rgba(245, 239, 230, 0.92);
  margin: 0;
  max-width: 28ch;
}
.cell-moss .hero-tagline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  line-height: 1.8;
  color: rgba(245, 239, 230, 0.92);
  margin: 0;
}
.cell-moss .stamp {
  color: rgba(245, 239, 230, 0.88);
  width: 110px;
  margin-top: auto;
}
.stamp-text {
  fill: currentColor;
  font-family: var(--mono);
  font-weight: 500;
}

.cell-parch {
  background: var(--parchment);
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.hero-lead {
  font-family: var(--serif-editorial);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 var(--s-2);
  max-width: 38ch;
}
.hero-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
  max-width: 38ch;
}

.cell-photo {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--espresso);
  border-right: 1px solid var(--rule);
}
.cell-photo:last-child { border-right: none; }
.cell-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cell-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-2) var(--s-3);
  background: linear-gradient(to top, rgba(38,34,31,0.85), rgba(38,34,31,0));
  color: var(--parchment);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.figcap-num { font-weight: 500; color: var(--parchment); }
.figcap-rule {
  display: inline-block;
  flex: 1;
  height: 1px;
  background: rgba(245, 239, 230, 0.4);
}
.figcap-text { color: rgba(245, 239, 230, 0.85); }

/* ============================================================
   07 · PILLARS — 2-col grid, capstone (5th) spans full width
   Layout: 2-2-1 (three rows, last is capstone)
   ============================================================ */
.pillars { background: var(--warm-ivory); }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--maxw);
  margin: 0 auto;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.pillar-cell {
  position: relative;
  padding: var(--s-4);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
/* Remove right border on every 2nd cell, last row has no bottom rule */
.pillar-cell:nth-child(2n) { border-right: none; }

.pillar-photo {
  margin: 0 0 var(--s-3);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--espresso);
  border: 1px solid var(--ink-15);
}
.pillar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Capstone — 5th pillar, full-width row, 2-col interior; intentional closer */
.pillar-capstone {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
  align-items: center;
  border-right: none;
  border-bottom: none;
  padding: var(--s-6) var(--s-4);
  background: var(--parchment);
  border-top: 1px solid var(--rule);
}
.pillar-capstone .pillar-capstone-text {
  display: flex;
  flex-direction: column;
  padding-right: var(--s-3);
}
.pillar-capstone .pillar-name {
  font-size: 36px;
  margin-bottom: var(--s-2);
}
.pillar-capstone .pillar-body {
  font-size: 16px;
  max-width: 42ch;
  margin-bottom: var(--s-3);
}
.pillar-capstone-pull {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  color: var(--moss);
  max-width: 44ch;
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.pillar-photo-wide {
  aspect-ratio: 16 / 9;
  margin: 0;
}
.pillar-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--moss);
  margin: 0 0 var(--s-1);
}
.pillar-name {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.05;
  color: var(--espresso);
  margin: 0 0 var(--s-1);
}
.pillar-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-70);
  margin: 0;
  max-width: 28ch;
}

/* ============================================================
   08 · LEARN — two large editorial cells
   ============================================================ */
.learn { background: var(--parchment); }
.learn-head { padding-bottom: var(--s-3); }

.learn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.learn-cell {
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--rule);
  display: grid;
  grid-template-rows: auto auto;
}
.learn-cell:last-child { border-right: none; }
.learn-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--espresso);
  border-bottom: 1px solid var(--rule);
}
.learn-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.learn-cap {
  padding: var(--s-4) var(--s-3);
}
.learn-cap-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 var(--s-2);
}
.learn-cap-title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-style: italic;
  font-size: 28px;
  line-height: 1.05;
  color: var(--espresso);
  margin: 0 0 var(--s-2);
}
.learn-cap-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
  max-width: 42ch;
}

/* ============================================================
   09 · ARCHIVE PHOTO GRID — 2 × 3 (max-2 rule)
   ============================================================ */
.archive { background: var(--warm-ivory); }

.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.plate {
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.plate:nth-child(2n) { border-right: none; }
.plate:nth-last-child(-n+2) { border-bottom: none; }
.plate-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--espresso);
}
.plate-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plate figcaption {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-70);
  border-top: 1px solid var(--rule);
}
.plate-num {
  color: var(--moss);
  font-weight: 500;
  letter-spacing: 0.24em;
}

/* ============================================================
   10 · VALUES — 2-col, 5th value spans full row as capstone (2-2-1)
   ============================================================ */
.values { background: var(--parchment); }

.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--maxw);
  margin: 0 auto;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.value-cell {
  position: relative;
  padding: var(--s-4);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.value-cell:nth-child(2n) { border-right: none; }

.value-photo {
  margin: 0 0 var(--s-3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--espresso);
  border: 1px solid var(--ink-15);
}
.value-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capstone — 5th value, full-width row, 2-col interior */
.value-capstone {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
  align-items: center;
  border-right: none;
  border-bottom: none;
  padding: var(--s-5) var(--s-4);
}
.value-capstone .value-photo {
  margin: 0;
}
.value-photo-wide {
  aspect-ratio: 16 / 9;
}
.value-capstone .value-name {
  font-size: 14px;
}
.value-capstone .value-body {
  font-size: 16px;
  max-width: 38ch;
}
.value-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 var(--s-1);
}
.value-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 28ch;
}

/* ============================================================
   11 · MANIFESTO BAND — moss panel, 2 cells (max-2 rule)
   Cell 1: R-mark + manifesto copy stacked
   Cell 2: mentor-hands photo
   ============================================================ */
.manifesto {
  background: var(--moss);
  color: var(--parchment);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  max-width: var(--maxw);
  margin: 0 auto;
  align-items: stretch;
  position: relative;
}
.manifesto-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--rule-parchment);
  gap: var(--s-4);
}
.manifesto-mark {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.manifesto-mark img {
  width: 120px;
  height: auto;
  border-radius: 18px;
  filter: brightness(1.02);
}
.manifesto-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.manifesto-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.65);
  margin: 0 0 var(--s-3);
}
.manifesto-lines {
  font-family: var(--mono);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--parchment);
  margin: 0;
}
.manifesto-photo {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--moss-deep);
}
.manifesto-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 280px;
  display: block;
}

/* ============================================================
   12 · WAITLIST
   ============================================================ */
.waitlist-band {
  background: var(--warm-ivory);
  padding: var(--s-6) var(--gutter) var(--s-6);
}
.waitlist-card {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4);
  background: var(--parchment);
  border: 1px solid var(--rule);
  position: relative;
}
.waitlist-headline {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  color: var(--espresso);
  margin: 0 0 var(--s-2);
}
.waitlist-headline em {
  font-style: italic;
  color: var(--moss);
}
.waitlist-deck {
  font-size: 15px;
  color: var(--ink-70);
  margin: 0 0 var(--s-4);
  max-width: 50ch;
}
.waitlist-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin: 0 0 var(--s-1);
}
.waitlist-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  align-items: stretch;
}
.waitlist-input {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  color: var(--espresso);
  background: var(--warm-ivory);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  outline: none;
  transition: border-color 120ms ease;
}
.waitlist-input:focus {
  border-color: var(--moss);
}
.btn-moss {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--parchment);
  background: var(--moss);
  border: 1px solid var(--moss-deep);
  border-radius: 12px;
  cursor: pointer;
  transition: background 120ms ease;
}
.btn-moss:hover { background: var(--moss-deep); }
.btn-arrow { font-size: 18px; }
.waitlist-status {
  margin: var(--s-2) 0 0;
  font-size: 14px;
  color: var(--ink-70);
  min-height: 1.4em;
}
.waitlist-status.ok { color: var(--moss); }
.waitlist-status.err { color: #9A4A3D; }
.waitlist-fineprint {
  margin: var(--s-2) 0 0;
  font-size: 13px;
  color: var(--ink-50);
}
.waitlist-beta {
  margin: var(--s-4) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-70);
}

/* ============================================================
   13 · FOOTER COLOPHON
   ============================================================ */
.colophon {
  background: var(--parchment);
  border-top: 1px solid var(--rule);
  padding: var(--s-5) var(--gutter);
}
.colophon-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  max-width: var(--maxw);
  margin: 0 auto;
}
.col-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.col-mark img { border-radius: 8px; }
.col-name {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 22px;
  margin: 6px 0 0;
}
.col-parent {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: 0;
}
.col-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: end;
}
.col-meta-line {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin: 0;
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 4px;
}
.col-meta-line a { color: var(--moss); }
.col-meta-line a:hover { color: var(--moss-deep); }
.colophon-rule {
  max-width: var(--maxw);
  margin: var(--s-4) auto 0;
  height: 1px;
  background: var(--rule);
}
.colophon-end {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: var(--s-3) 0 0;
}

/* ============================================================
   14 · RESPONSIVE — collapse the grids
   (Desktop ≥1024 already obeys max-2-per-row. Below that we
    collapse to single column.)
   ============================================================ */

/* 1024px — collapse to single-column on all multi-cell sections */
@media (max-width: 1024px) {
  .hero-row-anchors { grid-template-columns: 1fr; }
  .cell-moss {
    border-right: none;
    border-bottom: 1px solid var(--moss-deep);
    min-height: 0;
  }
  .hero-row-anchors .hero-photo-mentor {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .pillar-capstone {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-4);
  }

  .value-capstone {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-4);
  }

  .manifesto { grid-template-columns: 1fr; }
  .manifesto-text { border-right: none; border-bottom: 1px solid var(--rule-parchment); }
  .manifesto-photo { min-height: 280px; }
}

/* 880px — top-bar reflow: hide the beta pill, keep CTA */
@media (max-width: 880px) {
  .topbar-right .beta-pill { display: none; }
}

/* 720px — single-column for everything; hide side annotations */
@media (max-width: 720px) {
  .topbar { padding: 10px var(--gutter); }
  .beta-pill { font-size: 10px; letter-spacing: 0.12em; }
  .topbar-cta { font-size: 10px; letter-spacing: 0.14em; }

  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-cell { border-right: none; border-bottom: 1px solid var(--rule); }
  .pillar-cell:last-child { border-bottom: none; }

  .pillar-capstone {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-4);
  }
  .pillar-capstone .pillar-capstone-text { padding-right: 0; }

  .learn-grid { grid-template-columns: 1fr; }
  .learn-cell { border-right: none; border-bottom: 1px solid var(--rule); }
  .learn-cell:last-child { border-bottom: none; }

  .archive-grid { grid-template-columns: 1fr; }
  .plate { border-right: none; border-bottom: 1px solid var(--rule); }
  .plate:last-child { border-bottom: none; }

  .value-grid { grid-template-columns: 1fr; }
  .value-cell { border-right: none; border-bottom: 1px solid var(--rule); }
  .value-cell:last-child { border-bottom: none; }

  .colophon-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .col-meta { align-self: start; }

  .hand-pillars, .hand-values { display: none; }
  .hand-root {
    position: static;
    display: block;
    transform: rotate(-2deg);
    margin-top: var(--s-2);
  }
  .hand-root .hand-arrow { display: none; }
}

/* 480px — tighter type + waitlist single-col */
@media (max-width: 480px) {
  .display-hero { font-size: 40px; }
  .display-h2 { font-size: 30px; }

  .waitlist-card { padding: var(--s-4) var(--s-3); }
  .waitlist-row { grid-template-columns: 1fr; }
  .btn-moss { justify-content: center; }

  .hand-root { display: none; }
}

/* Reduced motion — already low, but be safe */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Wordmark — uppercase ROOT + italic lowercase egra. */
.wm-egra { font-style: italic; font-weight: inherit; }