/* ============================================================================
   Root Integrity Collective — styles.css
   Vintage Scientific Beauty Academy × modern editorial luxury SaaS.
   Cormorant Garamond (display) · Newsreader (editorial) · General Sans (UI)
   · IBM Plex Mono (scientific labels) · Caveat (handwritten annotations).

   Photography-led rebuild — magazine grids of real photo cells +
   short text cells. The only inline SVG that survives is the apothecary
   stamp (text-on-path) and the brand R-mark glyph.
   ============================================================================ */


/* 01 ── Tokens ─────────────────────────────────────────────────────────── */

:root {
  /* palette — canonical */
  --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-12:        rgba(38, 34, 31, 0.12);
  --rule:          rgba(38, 34, 31, 0.12);
  --rule-strong:   rgba(38, 34, 31, 0.22);
  --rule-faint:    rgba(38, 34, 31, 0.07);
  --moss-on-dark:  rgba(245, 239, 230, 0.78);

  /* paper grain — very subtle */
  --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;

  /* measure */
  --measure:        62ch;
  --measure-tight:  44ch;

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

  /* radii */
  --r-card: 4px;       /* photo cells are crisp, almost square */
  --r-btn:  14px;
}


/* 02 ── Reset + base ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p, li { max-width: var(--measure); }

a {
  color: var(--moss-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule-strong);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover {
  color: var(--clay);
  text-decoration-color: currentColor;
}

img { display: block; max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; }

::selection { background: var(--clay); color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--parchment);
  padding: 8px 14px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }


/* 03 ── Paper grain ───────────────────────────────────────────────────── */

body::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--paper-noise);
  opacity: 0.05;
  pointer-events: none;
  z-index: 200;
  mix-blend-mode: multiply;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.muted { color: var(--ink-70); }


/* IBM Plex Mono eyebrow / kicker */
.eyebrow, .kicker, .chapter-mark, .mono-caps {
  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-3) 0;
}
.eyebrow .dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--clay);
  margin: 0 8px 2px 8px;
  vertical-align: middle;
}

.hr-thin { border: 0; border-top: 1px solid var(--rule); margin: var(--s-4) 0; }


/* 04 ── Site header + running head ─────────────────────────────────────── */

.site-header {
  background: var(--parchment);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}
.site-header .inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(20px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
.wordmark {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 6px;
  line-height: 1;
}
.wordmark .of { font-style: italic; font-weight: 400; color: var(--moss); }
.primary { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.primary a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-70);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.primary a:hover { color: var(--ink); }
.primary a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--moss);
}

.running-head {
  border-bottom: 1px solid var(--rule);
  background: var(--warm-ivory);
}
.running-head .inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px clamp(20px, 4vw, 56px);
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.running-head em { font-style: italic; color: var(--moss); letter-spacing: 0.08em; }


/* 05 ── Handwritten Dusty-Blue annotation system ──────────────────────── */

.annot {
  font-family: var(--script);
  color: var(--dusty-blue);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-3.5deg);
  transform-origin: left center;
}
.annot--right   { transform: rotate(2.5deg); }
.annot--tilt    { transform: rotate(-6deg); }
.annot--upright { transform: rotate(-1deg); }
.annot--small   { font-size: clamp(16px, 1.2vw, 20px); }
.annot--big     { font-size: clamp(28px, 2.8vw, 40px); }
.annot--block   { display: block; margin: var(--s-2) 0; }

.dusty-heart {
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: -2px;
}
.dusty-heart path { fill: var(--dusty-blue); }
.clay-heart path  { fill: var(--clay); }
.moss-heart path  { fill: var(--moss); }


/* 06 ── Chapter opener / hero ─────────────────────────────────────────── */

.opener {
  padding: clamp(48px, 6vw, 80px) 0 clamp(28px, 3.6vw, 48px);
  border-bottom: 1px solid var(--rule);
  background: var(--parchment);
}
.opener .display {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(44px, 6.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: var(--s-3) 0 var(--s-3);
  color: var(--ink);
  max-width: 18ch;
}
.opener .display em { font-style: italic; color: var(--ink); }
.opener .display .ribbon { font-style: italic; color: var(--clay); }
.opener .tagline {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-70);
  max-width: 56ch;
  margin: 0 0 var(--s-3);
}


/* 07 ── Section heads + base type ──────────────────────────────────────── */

section { padding: clamp(40px, 5vw, 72px) 0; }
section.tight { padding: clamp(24px, 3vw, 40px) 0; }

.section-head {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.008em;
  margin: 0 0 var(--s-3);
  color: var(--ink);
  max-width: 22ch;
}
.section-head em { font-style: italic; color: var(--moss); }

h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-2);
}

p { margin: 0 0 var(--s-2); }

.lede {
  font-family: var(--serif-editorial);
  font-size: clamp(18px, 1.3vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 50ch;
}

ul, ol { margin: var(--s-3) 0 var(--s-3); padding-left: 1.4em; }
ul li, ol li { margin: 0 0 8px; padding-left: 4px; }
ul li::marker { color: var(--clay); }
ol li::marker { color: var(--moss); font-family: var(--mono); font-size: 0.85em; }

.gloss { border-bottom: 1px dotted var(--ink-50); cursor: help; }

.fn-ref {
  font-family: var(--mono);
  font-size: 0.7em;
  vertical-align: super;
  color: var(--moss);
  margin-left: 1px;
  text-decoration: none;
}
.footnotes {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
  font-family: var(--serif-editorial);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 60ch;
}
.footnotes li { margin: 0 0 var(--s-2); padding-left: 0; }

.dingbat {
  text-align: center;
  margin: var(--s-5) 0;
  letter-spacing: 1.5em;
  color: var(--clay);
}
.dingbat::before { content: "✦  ✦  ✦"; font-family: var(--serif-display); font-size: 14px; }


/* 08 ── Photo cell — THE primary building block ───────────────────────── */

/* A photo cell: a tight bordered rectangle that holds an <img> + caption.
   These compose into magazine grids everywhere. */

.photo-cell {
  position: relative;
  overflow: hidden;
  background: var(--warm-ivory);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.photo-cell > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 1 1 auto;
  min-height: 0;
}
.photo-cell.aspect-1   { aspect-ratio: 1 / 1; }
.photo-cell.aspect-45  { aspect-ratio: 4 / 5; }
.photo-cell.aspect-54  { aspect-ratio: 5 / 4; }
.photo-cell.aspect-32  { aspect-ratio: 3 / 2; }
.photo-cell.aspect-23  { aspect-ratio: 2 / 3; }
.photo-cell.aspect-21  { aspect-ratio: 2 / 1; }

.photo-cell .cap {
  position: absolute;
  left: 12px; bottom: 10px; right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--parchment);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  margin: 0;
}
.photo-cell .cap-top {
  position: absolute;
  top: 10px; left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--parchment);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  margin: 0;
}

/* Text cell — a sister to photo-cell, same bordering, holds short copy */
.text-cell {
  background: var(--warm-ivory);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.text-cell.parchment { background: var(--parchment); }
.text-cell.moss { background: var(--moss); color: var(--parchment); border-color: var(--moss-deep); }
.text-cell.moss .eyebrow { color: var(--moss-on-dark); }
.text-cell.moss .section-head, .text-cell.moss h3 { color: var(--parchment); }
.text-cell.clay { background: var(--clay); color: var(--ink); }
.text-cell .text-cell-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: inherit;
  margin: 0 0 4px;
  max-width: 22ch;
}
.text-cell .text-cell-title em { font-style: italic; color: var(--clay); }
.text-cell.moss .text-cell-title em { color: var(--clay); }
.text-cell .text-cell-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: inherit;
  margin: 0;
  max-width: 38ch;
}
.text-cell.moss .text-cell-body { color: var(--moss-on-dark); }


/* Caption strip beneath a photo cell, mono caps */
.photo-strip-cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin: 8px 0 0;
}
.photo-strip-cap em {
  font-family: var(--serif-editorial);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink);
  margin-left: 6px;
}


/* 09 ── Apothecary stamp — typographic SVG (kept) ──────────────────────── */

.stamp-badge {
  width: 110px;
  height: 110px;
  display: inline-block;
}
.stamp-badge svg { width: 100%; height: 100%; }
.stamp-badge text {
  font-family: var(--mono);
  font-size: 9.6px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.stamp-badge--parchment .ring-outer,
.stamp-badge--parchment .ring-inner { stroke: var(--parchment); fill: none; }
.stamp-badge--parchment text { fill: var(--parchment); }
.stamp-badge--parchment .star { fill: var(--clay); }
.stamp-badge--ink .ring-outer,
.stamp-badge--ink .ring-inner { stroke: var(--ink); fill: none; }
.stamp-badge--ink text { fill: var(--ink); }
.stamp-badge--ink .star { fill: var(--clay); }
.stamp-badge .ring-outer { stroke-width: 1.2; }
.stamp-badge .ring-inner { stroke-width: 0.6; opacity: 0.7; }


/* 10 ── Home masthead — 2×2 band (max 2 cells per row) ────────────────── */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: minmax(420px, auto);
  align-items: stretch;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--parchment);
}
.masthead > * {
  padding: clamp(28px, 3vw, 44px);
  position: relative;
  min-height: 420px;
}
/* Hairline rules: between the two cells of each row, and between rows. */
.masthead > *:nth-child(even)  { border-left:  1px solid var(--rule); }
.masthead > *:nth-child(n+3)   { border-top:   1px solid var(--rule); }

/* Zone 1 — Moss panel */
.zone-moss {
  background: var(--moss);
  color: var(--parchment);
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.zone-moss .wordmark-display {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: var(--parchment);
  margin: var(--s-2) 0 0;
  max-width: 12ch;
}
.zone-moss .wordmark-display em { font-style: italic; color: var(--clay); font-weight: 400; }
.zone-moss .subhead {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.78);
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.zone-moss .subhead .dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--clay);
}
.zone-moss .tagline {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.35;
  color: var(--parchment);
  max-width: 26ch;
  margin: 0;
}
.zone-moss .zone-moss-foot {
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.zone-moss .stamp-wrap {
  padding-top: var(--s-3);
  display: flex; justify-content: flex-start;
}
.zone-moss .app-acknowledgment {
  display: flex; align-items: center; gap: 10px;
  padding-top: var(--s-2);
  border-top: 1px solid rgba(245, 239, 230, 0.18);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.78);
  margin: 0;
}
.zone-moss .app-acknowledgment .r-mark-inline {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--parchment);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.zone-moss .app-acknowledgment .r-mark-inline img { display: block; }
.zone-moss .app-acknowledgment .wm-egra {
  font-family: var(--serif-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--parchment);
}
.zone-moss .app-acknowledgment .dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--clay);
  vertical-align: middle;
  margin: 0 4px;
}

/* Larger, more legible apothecary stamp */
.stamp-badge--lg {
  width: 180px;
  height: 180px;
}
.stamp-badge--lg text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.stamp-badge--lg .ring-outer { stroke-width: 1.4; }
.stamp-badge--lg .ring-inner { stroke-width: 0.8; opacity: 0.55; }
@media (max-width: 720px) {
  .stamp-badge--lg { width: 150px; height: 150px; }
}

/* Zone 2 — Parchment mission */
.zone-mission {
  background: var(--parchment);
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.zone-mission .mission-headline {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.014em;
  margin: var(--s-2) 0 var(--s-3);
  color: var(--ink);
  max-width: 14ch;
}
.zone-mission .mission-headline em { font-style: italic; color: var(--clay); }
.zone-mission .mission-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 36ch;
}
.zone-mission .mission-tagline {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Zone 3 — Anatomy photo */
.zone-anatomy {
  background: var(--warm-ivory);
  display: flex; flex-direction: column;
  gap: var(--s-2);
  justify-content: center;
}
.zone-anatomy .fig-frame {
  position: relative;
  background: var(--parchment);
  border: 1px solid var(--rule);
  padding: 12px;
  flex: 1 1 auto;
  display: flex;
}
.zone-anatomy .fig-frame img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--parchment);
}

/* Anatomy key — labelled-parts caption strip beneath a figure.
   Replaces in-image labels so spelling stays correct forever. */
.anatomy-key {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  background: var(--warm-ivory);
  border: 1px solid var(--rule);
  display: flex; flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-70);
  justify-content: center;
}
.anatomy-key li { position: relative; padding: 0; margin: 0; max-width: none; }
.anatomy-key li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%);
  color: var(--clay);
}

/* Zone 4 — Mentor portrait + sticky note */
.zone-portrait {
  background: var(--warm-ivory);
  display: flex; flex-direction: column;
  gap: var(--s-2);
  overflow: hidden;
}
.portrait-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  isolation: isolate;
  border: 1px solid var(--rule);
  flex: 1 1 auto;
}
.portrait-card > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.portrait-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(38, 34, 31, 0.55) 100%);
  pointer-events: none;
}
.portrait-card .portrait-headline {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.008em;
  color: var(--parchment);
  margin: 0;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  max-width: 18ch;
}
.portrait-card .portrait-headline em { font-style: italic; color: var(--clay); }
/* Stronger bottom gradient so the headline always reads cleanly */
.portrait-card::after {
  background: linear-gradient(180deg, transparent 35%, rgba(38, 34, 31, 0.18) 55%, rgba(38, 34, 31, 0.72) 100%);
}
.sticky-note {
  position: absolute;
  right: 14px; top: 14px;
  background: var(--warm-ivory);
  border: 1px solid var(--rule);
  padding: 12px 14px 14px;
  font-family: var(--script);
  color: var(--dusty-blue);
  font-size: 17px;
  line-height: 1.2;
  transform: rotate(3deg);
  max-width: 160px;
  z-index: 3;
  box-shadow: 0 1px 0 rgba(38,34,31,0.06), 0 14px 24px -16px rgba(38,34,31,0.35);
}
.sticky-note .pin {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.sticky-note ul { list-style: none; padding: 0; margin: 0; }
.sticky-note li { margin: 0 0 2px; padding: 0; max-width: none; }


/* 11 ── Pillars — five photo-led cells ─────────────────────────────────── */

.pillars-band {
  padding-block: clamp(48px, 5.5vw, 80px);
  background: var(--parchment);
  position: relative;
}
.pillars-eyebrow { text-align: center; margin-bottom: var(--s-4); }

.pillars {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pillar {
  padding: 0;
  display: flex; flex-direction: column;
  position: relative;
  background: var(--warm-ivory);
}
/* hairlines: every even pillar has a left border (rows of 2);
   rows after the first get a top border;
   the fifth pillar spans the full width as a capstone. */
.pillar:nth-child(even) { border-left: 1px solid var(--rule); }
.pillar:nth-child(n+3) { border-top: 1px solid var(--rule); }

.pillar.capstone {
  grid-column: 1 / -1;
  border-left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.pillar.capstone .pillar-photo {
  aspect-ratio: auto;
  min-height: 320px;
  border-right: 1px solid var(--rule);
}
.pillar.capstone .pillar-text {
  border-top: 0;
  padding: clamp(28px, 3.4vw, 48px);
  justify-content: center;
}
.pillar.capstone .pillar-name {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: none;
}
.pillar.capstone .pillar-desc {
  font-family: var(--serif-editorial);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  max-width: 44ch;
}
.pillar .pillar-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pillar .pillar-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pillar .pillar-photo .pillar-numeral {
  position: absolute;
  top: 10px; left: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--parchment);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.pillar .pillar-text {
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--rule);
}
.pillar .pillar-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.pillar .pillar-desc {
  font-family: var(--serif-editorial);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-70);
  max-width: 28ch;
  margin: 0;
}

.pillars-annot {
  margin-top: var(--s-3);
  text-align: center;
}


/* 12 ── Diptych — two photo cells side by side ──────────────────────────── */

.diptych-band {
  background: var(--warm-ivory);
  padding-block: clamp(48px, 5.5vw, 80px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.diptych-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-align: center;
  margin-bottom: var(--s-4);
  line-height: 1.8;
}
.diptych-head em {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(30px, 3.8vw, 48px);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  display: block;
  margin-top: 4px;
  line-height: 1;
}
.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
}
.diptych figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.diptych-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0;
}
.diptych figure .photo-cell { aspect-ratio: 4 / 3; }
.diptych-cap {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-70);
  margin: 0;
  max-width: 36ch;
}
.fig-caption-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.fig-caption-line em {
  font-family: var(--serif-editorial);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  color: var(--ink);
}


/* 13 ── Table of contents (dot-leader) ──────────────────────────────────── */

.toc {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0;
  border-top: 1px solid var(--rule);
}
.toc li {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0;
  max-width: none;
}
.toc a {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: baseline;
  column-gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
}
.toc a:hover .toc-title { color: var(--moss); }
.toc-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--moss);
  text-transform: uppercase;
}
.toc-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  position: relative;
  transition: color 160ms ease;
}
.toc-title::after {
  content: "";
  display: inline-block;
  width: 100%;
  margin-left: 10px;
  border-bottom: 1.5px dotted var(--ink-30);
  vertical-align: 5px;
}
.toc-page {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-50);
}
.toc-promise {
  display: block;
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-70);
  margin: 6px 0 0 calc(48px + var(--s-3));
  max-width: 56ch;
}


/* 14 ── Moss quote band ─────────────────────────────────────────────────── */

.quote-band {
  background: var(--moss);
  color: var(--parchment);
  padding-block: clamp(64px, 7vw, 112px);
  position: relative;
  overflow: hidden;
}
.quote-band::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--paper-noise);
  opacity: 0.08; mix-blend-mode: overlay;
  pointer-events: none;
}
.quote-band .container { display: grid; grid-template-columns: 1fr; text-align: center; position: relative; }
.quote-band blockquote {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.18;
  color: var(--parchment);
  margin: 0 auto;
  max-width: 22ch;
}
.quote-band cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--moss-on-dark);
}
.quote-band cite .clay-heart { vertical-align: middle; margin: 0 6px 2px; }
.quote-band .floating-annot {
  position: absolute;
  right: clamp(20px, 6vw, 96px);
  bottom: clamp(40px, 6vw, 88px);
  color: rgba(245, 239, 230, 0.92);
}
.quote-band .floating-annot.annot { transform: rotate(-4deg); }


/* 15 ── Photo grid band — six cells ─────────────────────────────────────── */

.photo-band {
  padding-block: clamp(48px, 5.5vw, 88px);
  background: var(--parchment);
}
.photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: clamp(320px, 36vw, 460px);
  gap: 14px;
}
.photo-grid .photo-cell { border-radius: var(--r-card); }
/* legacy span hooks — kept as no-ops in the 2-col layout so the existing
   markup degrades safely. The grid is now strictly two cells per row. */
.photo-grid .photo-cell.span-tall,
.photo-grid .photo-cell.span-wide,
.photo-grid .photo-cell.span-big { grid-column: auto; grid-row: auto; }
.photo-grid .photo-cell.tile-quote {
  background: var(--warm-ivory);
  display: grid; place-items: center;
  padding: 22px;
  border: 1px solid var(--rule);
}
.photo-grid .photo-cell.tile-quote blockquote {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  text-align: center;
  max-width: 16ch;
}


/* 16 ── Footer band (moss) ──────────────────────────────────────────────── */

.foot-band {
  background: var(--moss);
  color: var(--parchment);
  padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.foot-band::before {
  content: ""; position: absolute; inset: 0;
  background: var(--paper-noise);
  opacity: 0.07; mix-blend-mode: overlay;
  pointer-events: none;
}
.foot-band .inner {
  max-width: 1240px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
/* Left cell: R-mark stacked above the mantra (one block, two stacked elements) */
.foot-band .colophon-cluster {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
}
.foot-band .mantra {
  font-family: var(--mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--parchment);
  margin: 0;
}
.foot-band .mark {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--parchment);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.foot-band .mark img { width: 50px; height: 50px; }
.foot-band .stamp-wrap { display: flex; justify-content: flex-end; }
.foot-band .stamp-wrap .stamp-badge { width: 96px; height: 96px; }


/* 17 ── Curriculum — module spreads ────────────────────────────────────── */

.chapter-spread {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 64px);
  align-items: start;
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule);
}
/* The left cell is a single text block: a giant numeral that sits above the
   prose, all inside one column. */
.chapter-spread .content { min-width: 0; }
.chapter-spread .number {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(80px, 9vw, 132px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--sage);
  margin: 0 0 var(--s-3);
  display: block;
}
.chapter-spread .number small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--moss);
  margin-top: var(--s-2);
  font-weight: 500;
}
.chapter-spread .content h2 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  margin: 0 0 var(--s-3);
  color: var(--ink);
  max-width: 22ch;
}
.chapter-spread .content h2 em { font-style: italic; color: var(--clay); }
.chapter-spread .content p { max-width: var(--measure); }
.chapter-spread .content ul li { max-width: 64ch; }
.chapter-spread .figure {
  margin: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
  position: sticky;
  top: 96px;
}
.chapter-spread .figure .photo-cell { aspect-ratio: 4 / 5; }

/* Alternate sides for editorial rhythm: figure left, content right. */
.chapter-spread.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.chapter-spread.flip .figure  { order: 0; }
.chapter-spread.flip .content { order: 1; }


/* Hours specimen typeset grid — 2-col × 4 rows */
.hours-specimen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: var(--s-3);
}
.hours-specimen [role="listitem"] {
  padding: var(--s-3);
  border-right: 1px solid var(--rule);
}
.hours-specimen [role="listitem"]:nth-child(2n) { border-right: 0; }
.hours-specimen [role="listitem"]:nth-child(n+3) { border-top: 1px solid var(--rule); }
.hours-specimen .roman {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0;
}
.hours-specimen .name {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1;
  color: var(--ink);
  margin: 6px 0 4px;
}
.hours-specimen .gloss-line {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-70);
  margin: 0;
}


/* 18 ── Methodology — annotated reading spread ─────────────────────────── */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}
.spread .body { min-width: 0; }
.spread .body p { max-width: var(--measure); }
.spread .margin {
  position: sticky;
  top: 96px;
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding-top: 6px;
  border-left: 1px solid var(--rule);
  padding-left: var(--s-3);
}
.spread .margin .note {
  font-family: var(--serif-editorial);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 28ch;
}
.spread .margin .note-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 6px;
}
.spread .margin em { color: var(--ink); font-style: italic; }
.spread .margin .photo-cell { aspect-ratio: 4 / 5; }

.pull {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.32;
  color: var(--ink);
  margin: var(--s-3) 0;
  padding: 0;
  max-width: 28ch;
}
.spread .margin .pull {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--moss-deep);
  padding: 12px 0 0 0;
  margin: 0;
}


/* Methodology body-with-inline-figure pattern */
.body-with-fig {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.body-with-fig .figure-cell .photo-cell { aspect-ratio: 4 / 5; }
.body-with-fig .figure-cell.wide .photo-cell { aspect-ratio: 4 / 3; }


/* 19 ── Collective — numbered clauses + photo blocks ───────────────────── */

.clauses {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
  counter-reset: clause;
}
.clauses > li {
  counter-increment: clause;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  max-width: none;
}
.clauses > li::before {
  content: "Clause " counter(clause, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--moss);
}
.clauses > li:last-child { border-bottom: 1px solid var(--rule); }
.clauses h3 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  margin: 0 0 var(--s-2);
  line-height: 1.15;
  color: var(--ink);
}
.clauses h3 em { font-style: italic; color: var(--clay); }
.clauses p { margin: 0; max-width: var(--measure); }

/* Photo interlude inside the clauses flow */
.clause-photo {
  margin: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-4) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.clause-photo .photo-cell { aspect-ratio: 4 / 3; }


/* 20 ── The-app — sage mark band + specimen ───────────────────────────── */

.app-mark-band {
  background: var(--moss);
  color: var(--parchment);
  padding-block: clamp(56px, 6vw, 96px);
  position: relative;
  overflow: hidden;
}
.app-mark-band::before {
  content: ""; position: absolute; inset: 0;
  background: var(--paper-noise);
  opacity: 0.08; mix-blend-mode: overlay;
  pointer-events: none;
}
.app-mark-band .inner-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.app-mark-band .left { text-align: center; }
.app-mark-band .r-mark {
  width: 200px; height: 200px;
  border-radius: 36px;
  display: block;
  margin: 0 auto var(--s-3);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.4);
}
.app-mark-band .mark-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss-on-dark);
  margin: 0 0 var(--s-2);
}
.app-mark-band .mark-name {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  color: var(--parchment);
  margin: 0;
}
.app-mark-band .mark-tag {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--moss-on-dark);
  margin: var(--s-3) 0 0;
}
.app-mark-band .right .photo-cell {
  aspect-ratio: 4 / 3;
  border-color: var(--moss-deep);
}
.app-mark-band .floating-annot {
  position: absolute;
  bottom: clamp(28px, 4vw, 56px);
  right: clamp(28px, 6vw, 88px);
  color: rgba(245, 239, 230, 0.92);
  transform: rotate(-4deg);
}

.specimen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: var(--s-3) 0 0;
}
.specimen [role="listitem"] {
  padding: var(--s-4);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: none;
}
.specimen [role="listitem"]:nth-child(2n) { border-right: 0; }
.specimen [role="listitem"]:nth-last-child(-n+2) { border-bottom: 0; }
.specimen .label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: var(--s-2);
}
.specimen .desc {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 42ch;
  display: block;
}


/* 21 ── Contact — editorial card ────────────────────────────────────────── */

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(24px, 3.5vw, 64px);
  align-items: start;
  background: var(--warm-ivory);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: clamp(28px, 3.6vw, 48px);
}
.contact-card .right .photo-cell { aspect-ratio: 3 / 4; }


/* 22 ── Buttons ─────────────────────────────────────────────────────────── */

.button {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 13px 22px;
  border-radius: var(--r-btn);
  background: var(--moss);
  color: var(--parchment);
  text-decoration: none;
  border: 1px solid var(--moss);
  transition: background 160ms ease, color 160ms ease;
}
.button:hover { background: var(--moss-deep); color: var(--parchment); }
.button.ghost {
  background: transparent;
  color: var(--moss);
  border-color: var(--moss);
}
.button.ghost:hover { background: var(--moss); color: var(--parchment); }
.button.dusty {
  background: var(--dusty-blue);
  border-color: var(--dusty-blue);
}
.button.dusty:hover { background: #5a7a9e; border-color: #5a7a9e; }


/* 23 ── Site footer / colophon ──────────────────────────────────────────── */

.site-footer {
  background: var(--parchment);
  border-top: 1px solid var(--rule);
  padding: clamp(28px, 3.4vw, 48px) 0;
}
.site-footer .inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-4);
}
.colophon-block { max-width: 60ch; }
.colophon-mark {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  margin: 0 0 8px;
}
.colophon-mark em { font-style: italic; color: var(--moss); }
.colophon {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: 0;
}
.site-footer nav { display: flex; gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap; }
.site-footer nav a {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-70);
  text-decoration: none;
}
.site-footer nav a:hover { color: var(--ink); }


/* 24 ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Masthead already 2-col at desktop — keep, but allow it to relax */
  .masthead > * { min-height: 0; }

  /* Pillars already 2-col at desktop — keep, but the capstone needs to
     collapse to a stacked single column since it is itself 2-col. */
  .pillar.capstone { grid-template-columns: 1fr; }
  .pillar.capstone .pillar-photo { border-right: 0; border-bottom: 1px solid var(--rule); }

  .specimen { grid-template-columns: 1fr; }
  .specimen [role="listitem"] { border-right: 0 !important; }

  .body-with-fig { grid-template-columns: 1fr; }
  .body-with-fig .figure-cell { max-width: 460px; }

  .app-mark-band .inner-grid { grid-template-columns: 1fr; }

  .contact-card { grid-template-columns: 1fr; }
  .contact-card .right .photo-cell { max-width: 320px; }

  .foot-band .inner { grid-template-columns: 1fr; text-align: center; gap: var(--s-4); }
  .foot-band .colophon-cluster { justify-content: center; }
  .foot-band .stamp-wrap { justify-content: center; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-header .inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px clamp(16px, 4vw, 32px); }
  .primary { flex-wrap: wrap; gap: 16px; }
  .running-head { display: none; }

  .masthead { grid-template-columns: 1fr; }
  .masthead > *:nth-child(even) { border-left: 0; }
  .masthead > *:nth-child(n+2)  { border-top: 1px solid var(--rule); }

  .pillars { grid-template-columns: 1fr; }
  .pillar:nth-child(even) { border-left: 0; }
  .pillar:nth-child(n+2) { border-top: 1px solid var(--rule); }
  .pillar.capstone { grid-template-columns: 1fr; }

  .spread { grid-template-columns: 1fr; }
  .spread .margin { position: static; border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: var(--s-3); }
  .spread .margin .photo-cell { max-width: 320px; }

  .diptych { grid-template-columns: 1fr; }
  .chapter-spread,
  .chapter-spread.flip { grid-template-columns: 1fr; }
  .chapter-spread .figure { position: static; max-width: 480px; }
  .chapter-spread .number { font-size: 96px; line-height: 0.85; }
  .clauses > li { grid-template-columns: 1fr; gap: 8px; }
  .clause-photo { grid-template-columns: 1fr; }

  .photo-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(240px, 60vw, 340px); }

  .hours-specimen { grid-template-columns: 1fr; }
  .hours-specimen [role="listitem"] { border-right: 0; }
  .hours-specimen [role="listitem"]:nth-child(n+2) { border-top: 1px solid var(--rule); }

  .site-footer .inner { flex-direction: column; }
}

@media (max-width: 480px) {
  .opener .display { font-size: clamp(36px, 9vw, 48px); }
  .photo-grid { grid-auto-rows: 160px; }
  .toc a { grid-template-columns: 36px 1fr auto; column-gap: 12px; }
  .toc-promise { margin-left: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

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