/* ============================================================
   YRF DESIGN SYSTEM V2 — "The Archive in Color"
   Extracted from home-v2-color.html (rev. 2, approved).
   One stylesheet for every page of the site.

   Every hue is sampled from the photographs — Swamiji's robes,
   the lamplight, the rudraksha beads: marigold, sindoor, brass,
   rudraksha ink. Type: Rozha One + Martel, both Indian Type
   Foundry families built alongside Devanagari.

   Usage rules, shared markup partials, and the component
   catalog live in ../v2-system.md. Read that before restyling
   a page.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* -- sampled palette (light surfaces) -- */
  --ink:          #241009;   /* rudraksha ink — headings on paper */
  --ink-soft:     #56371f;   /* secondary text on paper */
  --body:         #3b2213;   /* body text on paper */
  --paper:        #f1e5cc;   /* aged-paper cream — page background */
  --paper-raised: #f9f0dd;   /* cards, inputs — one step lighter */
  --paper-deep:   #e8d9b8;   /* recessed sections — one step darker */
  --marigold:     #e79517;   /* marigold, from the robes' warm edge */
  --marigold-bright: #f2a52e;/* marigold hover state */
  --saffron-deep: #8a4c07;   /* saffron legible on paper (provenance notes; fifth door hue) */
  --sindoor:      #a93413;   /* the robe's red edge — primary accent */
  --sindoor-deep: #8c2a0e;   /* sindoor hover state */
  --brass:        #a67c33;   /* hairlines & frames only — never text on paper */
  --maroon:       #6e2f14;   /* fourth door hue */

  /* -- the lamplit field (footer / page heads) -- */
  --field:        #29120a;
  --field-2:      #33170c;
  --field-ink:    #f4e4c6;   /* primary text on the field */
  --field-soft:   #d9ba8e;   /* secondary text on the field */
  --field-bright: #f8ebd2;   /* display headings on the field */

  /* -- the dusk field (HOME HERO ONLY) — azure, rev. 3 --
     The one cool hue in the system: the Miami sky at dusk,
     the counterpoint that makes every warm lamp (marigold,
     sindoor, brass) read as light. Approved over the saffron
     and sindoor studies. The cream field inks above are shared:
     field-ink 8.3:1 · field-soft 5.6:1 · marigold 4.3:1 on azure
     (marigold at display/CTA sizes only). */
  --azure:       #10445e;   /* the dusk-sky field behind the home hero */
  --azure-2:     #175b7a;   /* the sky's high glow, top right */
  --azure-frame: #164f6b;   /* portrait frame & mat on the azure field */

  /* -- the aqua field (INTERIOR PAGE HEADS) — test, rev. 4 --
     Sampled from the live site's "Path to Enlightenment" tagline
     (#669999 — the old Elementor global primary) and darkened to
     field depth: same teal hue (~184°), lightness brought down to
     sit beside the hero's azure. Deliberately greener than the
     azure so the front door keeps its own sky. Cream field inks
     hold: field-ink 8.8:1 · field-soft 5.9:1 · field-bright 9.3:1
     · marigold 4.6:1 (display/CTA sizes + focus rings only).
     Sindoor fails on aqua (1.7:1) just as it does on azure —
     focus rings and in-band text links go marigold/cream. */
  --aqua:        #0f4347;   /* the deep-water field behind interior page heads */
  --aqua-2:      #16585e;   /* the field's high glow, top right */

  /* -- ink on the sindoor band -- */
  --on-sindoor:      #fdf2dd; /* headings / strong on sindoor */
  --on-sindoor-soft: #f3d9b4; /* body text on sindoor */
  --on-sindoor-gold: #fdd79e; /* small labels (years) on sindoor */

  /* -- ink on the marigold band -- */
  --on-marigold:      #2a1206; /* headings / body on marigold */
  --on-marigold-soft: #4a2408; /* secondary text on marigold */

  /* -- rules & shadows -- */
  --rule:         rgba(36, 16, 9, 0.18);
  --rule-strong:  rgba(36, 16, 9, 0.40);
  --shadow: 0 1px 2px rgba(36,16,9,.08), 0 16px 44px -20px rgba(36,16,9,.38);
  --shadow-lift: 0 2px 4px rgba(36,16,9,.09), 0 24px 52px -20px rgba(36,16,9,.46);

  /* -- paper grain for dark fields (self-contained SVG) -- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");

  /* -- type -- */
  --display: "Rozha One", "Georgia", serif;
  --serif: "Martel", "Georgia", serif;
  --sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text-hero: clamp(2.3rem, 1.05rem + 4.4vw, 4.1rem);
  --text-h2: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --text-h3: clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
  --text-deck: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem);
  --text-base: clamp(0.98rem, 0.94rem + 0.2vw, 1.05rem);
  --text-label: 0.72rem;

  /* -- rhythm -- */
  --space-lg: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --space-md: clamp(3rem, 2.2rem + 3vw, 5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   2. BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--body);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
p { text-wrap: pretty; } /* fewer orphans in prose; headings balance instead */
a { color: var(--sindoor); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sindoor-deep); }
:focus-visible { outline: 2px solid var(--sindoor); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--marigold); color: var(--on-marigold); }

/* ============================================================
   3. UTILITIES
   ============================================================ */
.wrap { max-width: 76rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }

.label {
  font-family: var(--sans);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--sindoor); color: var(--paper-raised);
  padding: 0.6rem 1.1rem; font-family: var(--sans); font-weight: 600; z-index: 40;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Shared section head: constrained intro block above a grid.
   .router-head and .shelf-head are the homepage's instances. */
.section-head, .router-head, .shelf-head { max-width: 44rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head h2, .router-head h2, .shelf-head h2 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--text-h2); line-height: 1.18; color: var(--ink);
  text-wrap: balance;
}
.section-head p, .router-head p, .shelf-head p { margin-top: 0.9rem; color: var(--ink-soft); max-width: 34em; }

/* ============================================================
   4. BUTTONS & LINKS
   ============================================================ */
/* Generic single-line button. Use on interior pages; the home
   hero uses the richer two-line .cta-primary below. */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  padding: 0.75rem 1.4rem; border: none; border-radius: 3px;
  cursor: pointer; text-decoration: none;
  transition: background-color 160ms var(--ease), transform 200ms var(--ease), box-shadow 220ms var(--ease);
}
.btn:active { transform: translateY(0); }
.btn-marigold { background: var(--marigold); color: var(--on-marigold); }
.btn-marigold:hover { background: var(--marigold-bright); color: var(--on-marigold); transform: translateY(-2px); }
.btn-sindoor { background: var(--sindoor); color: var(--paper-raised); }
.btn-sindoor:hover { background: var(--sindoor-deep); color: var(--paper-raised); transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--paper-raised); }
.btn-ink:hover { background: #3a2213; color: var(--paper-raised); transform: translateY(-1px); }

/* Hero CTA — two-line: bold action + small context line. */
.cta-primary {
  display: inline-flex; flex-direction: column; gap: 0.1rem;
  background: var(--marigold); color: var(--on-marigold);
  text-decoration: none;
  padding: 1rem 1.65rem 0.95rem;
  border-radius: 3px;
  box-shadow: 0 18px 40px -16px rgba(231,149,23,.55);
  transition: transform 220ms var(--ease), background-color 160ms var(--ease), box-shadow 220ms var(--ease);
}
.cta-primary strong { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.005em; }
.cta-primary span { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; opacity: 0.8; }
.cta-primary:hover { background: var(--marigold-bright); color: var(--on-marigold); transform: translateY(-2px); box-shadow: 0 24px 48px -16px rgba(231,149,23,.65); }
.cta-primary:active { transform: translateY(0); }
.cta-quiet { font-family: var(--sans); font-size: 0.9rem; color: var(--field-soft); }
.cta-quiet a { color: var(--field-ink); font-weight: 500; }
.cta-quiet a:hover { color: #fff; }

/* Arrow link — sindoor underline, arrow slides 4px on hover.
   .shelf-cta is the homepage instance; .link-arrow is the
   page-agnostic name. Use on light (paper) surfaces. */
.link-arrow, .shelf-cta {
  align-self: flex-start;
  font-family: var(--sans); font-weight: 600; font-size: 0.93rem;
  color: var(--sindoor); text-decoration: none;
  border-bottom: 2px solid var(--sindoor);
  padding-bottom: 0.15rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.link-arrow::after, .shelf-cta::after { content: "→"; transition: transform 220ms var(--ease); }
.link-arrow:hover, .shelf-cta:hover { color: var(--sindoor-deep); border-color: var(--sindoor-deep); }
.link-arrow:hover::after, .shelf-cta:hover::after { transform: translateX(4px); }

/* Arrow link on the sindoor band — cream text, marigold underline.
   .teacher-link is the homepage instance. */
.link-arrow-light, .teacher-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  color: var(--on-sindoor); text-decoration: none;
  border-bottom: 2px solid var(--marigold); padding-bottom: 0.2rem;
  transition: gap 200ms var(--ease);
}
.link-arrow-light::after, .teacher-link::after { content: "→"; transition: transform 220ms var(--ease); }
.link-arrow-light:hover, .teacher-link:hover { color: #fff; }
.link-arrow-light:hover::after, .teacher-link:hover::after { transform: translateX(4px); }

/* ============================================================
   5. HEADER — wordmark with the seal
   ============================================================ */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: relative; z-index: 10;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 0.95rem; flex-wrap: wrap;
}
.wordmark {
  display: flex; align-items: center; gap: 0.85rem;
  text-decoration: none; color: var(--ink);
}
/* The Foundation emblem is printed on white — so it sits on a small
   white roundel, ringed in brass, like a pressed seal on the paper.
   NEVER place the bare JPEG on a dark or colored surface. */
.seal {
  flex: none;
  width: 3.1rem; height: 3.1rem;
  background: #fff;
  border-radius: 50%;
  padding: 0.18rem;
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(166,124,51,.55), 0 1px 3px rgba(36,16,9,.16);
}
.seal img { width: 100%; height: 100%; border-radius: 50%; }
.wordmark-text { display: flex; flex-direction: column; gap: 0.05rem; }
.wordmark-text strong {
  font-family: var(--display); font-weight: 400;
  font-size: 1.18rem; letter-spacing: 0.005em; line-height: 1.2;
}
.wordmark-text span {
  font-family: var(--sans); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
}
.site-nav ul { display: flex; gap: clamp(0.9rem, 2.5vw, 1.9rem); list-style: none; flex-wrap: wrap; align-items: center; }
.site-nav a {
  font-family: var(--sans);
  color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; font-weight: 500;
  padding-block: 0.25rem; border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--brass); }
/* Mark the current page's nav item with aria-current="page". */
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }
.site-nav .nav-start {
  color: var(--paper-raised); background: var(--sindoor);
  padding: 0.5rem 1.05rem; border-radius: 2px; font-weight: 600;
  border-bottom: none;
  transition: background-color 160ms var(--ease), transform 200ms var(--ease);
}
.site-nav .nav-start:hover { background: var(--sindoor-deep); color: var(--paper-raised); transform: translateY(-1px); }

/* ============================================================
   6. HERO — the dusk field (homepage only) — AZURE, rev. 3
   The sky over the archive cools to dusk while everything lit
   stays warm: the marigold CTA, the brass rules, the lamplit
   portrait in its frame, and a faint lamp-glow rising behind
   the figure. Approved comp: home-hero-azure.html.
   ============================================================ */
.hero {
  background:
    /* the sky's high glow, top right, above the portrait */
    radial-gradient(ellipse 120% 90% at 78% 10%, var(--azure-2), transparent 60%),
    /* lamp warmth rising behind the portrait frame */
    radial-gradient(ellipse 52% 44% at 78% 82%, rgba(231, 149, 23, 0.13), transparent 62%),
    var(--azure);
  color: var(--field-ink);
  padding-block: var(--space-md) 0;
  position: relative;
}
/* sindoor fails 3:1 on azure — focus rings inside the hero are marigold (4.3:1) */
.hero :focus-visible { outline-color: var(--marigold); }
/* faint paper grain on the dark field, self-contained */
.hero::before, .page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain);
}
.hero .wrap {
  position: relative;
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 62rem) {
  .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.hero-copy { padding-bottom: clamp(3rem, 5vw, 5.5rem); }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-copy > * { animation: rise 720ms var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: 90ms; }
.hero-copy > *:nth-child(3) { animation-delay: 180ms; }
.hero-copy > *:nth-child(4) { animation-delay: 270ms; }
.hero-figure { animation: rise 820ms var(--ease) 140ms both; }

/* the kicker's brass rule draws itself once the copy has risen */
@keyframes draw-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero .hero-kicker::before {
  transform-origin: left center;
  animation: draw-rule 700ms var(--ease) 500ms both;
}
/* the archive stamp lands last — its own soft settle, same tilt */
@keyframes stamp-land {
  from { opacity: 0; transform: rotate(-1.8deg) translateY(12px); }
  to   { opacity: 1; transform: rotate(-1.8deg) translateY(0); }
}
.hero-stamp { animation: stamp-land 620ms var(--ease) 700ms both; }

.hero-kicker {
  display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.7rem;
  color: var(--field-soft);
}
.hero-kicker::before { content: ""; width: 2.4rem; height: 1px; background: var(--brass); flex: none; }

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: 1.1;
  letter-spacing: 0.002em;
  max-width: 16em;
  color: var(--field-bright);
  text-wrap: balance;
}
.hero h1 .h1-accent { color: var(--marigold); }
.hero-deck {
  font-size: var(--text-deck);
  font-weight: 300;
  line-height: 1.7;
  color: var(--field-soft);
  max-width: 33em;
  margin-top: 1.5rem;
}
.hero-deck em { font-style: italic; color: #eed7ac; }

.hero-actions { margin-top: 2.3rem; display: flex; flex-direction: column; gap: 1.05rem; align-items: flex-start; }

/* -- hero figure: the photograph does the work -- */
.hero-figure {
  position: relative;
  max-width: 25rem; width: 100%;
  justify-self: center;
  margin-bottom: calc(-1 * clamp(2rem, 4vw, 3.2rem)); /* dips into the ledger's top padding */
  z-index: 2;
}
@media (min-width: 62rem) { .hero-figure { justify-self: end; } }
.hero-frame {
  border: 1px solid rgba(166,124,51,.65);
  padding: 0.65rem;
  background: var(--azure-frame); /* the mat follows the field into azure */
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.75);
}
.hero-frame img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 12%;
}
.hero-stamp {
  position: absolute; left: -0.9rem; bottom: 2.6rem;
  transform: rotate(-1.8deg);
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--sindoor);
  box-shadow: var(--shadow);
  padding: 0.7rem 0.95rem 0.75rem;
  width: min(14.5rem, 82%);
}
.hero-stamp .label { display: block; color: var(--sindoor); margin-bottom: 0.3rem; }
.hero-stamp p { font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.hero-stamp p strong { font-weight: 700; color: var(--ink); }
figcaption.hero-caption {
  margin-top: 0.75rem;
  font-style: italic; font-weight: 300;
  font-size: 0.9rem; color: var(--field-soft);
}

/* ============================================================
   6b. PAGE HEAD — compact deep-water band for interior pages.
   Same grain + type as before, one type step down from the hero.
   Use this at the top of every non-home page.
   REV. 4 TEST: the band's field switches from the warm chocolate
   (--field) to the dark aqua (--aqua) — webmaster request,
   matched to a darkened "Path to Enlightenment" teal. To revert
   to the warm banners, swap --aqua/--aqua-2 back to
   --field/--field-2 here and drop the two aqua-only rules below.
   ============================================================ */
.page-head {
  background:
    radial-gradient(ellipse 120% 90% at 78% 10%, var(--aqua-2), transparent 60%),
    var(--aqua);
  color: var(--field-ink);
  padding-block: clamp(3.2rem, 6vw, 5.5rem);
  position: relative;
}
/* sindoor fails 3:1 on aqua (as on azure) — marigold rings in the band */
.page-head :focus-visible { outline-color: var(--marigold); }
/* plain text links in the band: cream with a marigold underline —
   sindoor (the default link color) is illegible on the dark aqua */
.page-head .hero-kicker a, .page-head .page-deck a {
  color: var(--field-ink);
  text-decoration-color: var(--marigold);
}
.page-head .hero-kicker a:hover, .page-head .page-deck a:hover { color: #fff; }
.page-head .wrap { position: relative; }
.page-head .hero-kicker { margin-bottom: 1.2rem; }
.page-head h1 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--text-h2);
  line-height: 1.14; letter-spacing: 0.002em;
  max-width: 18em;
  color: var(--field-bright);
  text-wrap: balance;
}
.page-head .page-deck {
  font-size: var(--text-deck); font-weight: 300;
  line-height: 1.7; color: var(--field-soft);
  max-width: 33em; margin-top: 1.1rem;
}

/* ============================================================
   7. LEDGER — the stat bar
   ============================================================ */
.ledger { background: var(--paper); border-bottom: 1px solid var(--rule); }
.ledger .wrap { padding-block: clamp(3rem, 5.5vw, 4.6rem) clamp(1.6rem, 3vw, 2.4rem); }
.ledger ul {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 0;
}
@media (min-width: 52rem) { .ledger ul { grid-template-columns: repeat(4, 1fr); } }
.ledger li { padding-inline: clamp(1rem, 2.5vw, 2rem); border-inline-start: 1px solid var(--brass); }
.ledger li { border-image: linear-gradient(to bottom, transparent 8%, var(--brass) 8% 76%, transparent 76%) 1; }
.ledger strong {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem);
  color: var(--ink);
  line-height: 1.25;
}
.ledger span { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); }

/* ============================================================
   8. DOORS — numbered router cards with the hover bounce
   ============================================================ */
.router { padding-block: var(--space-lg); background: var(--paper-deep); border-block: 1px solid var(--rule); }

.router-grid {
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .router-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .router-grid { grid-template-columns: repeat(4, 1fr); } }

.door {
  --door-hue: var(--sindoor);
  display: flex; flex-direction: column; gap: 0.75rem;
  background: var(--paper-raised);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  text-decoration: none; color: var(--ink);
  min-height: 14.5rem;
  position: relative;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
/* resting hue — each door keeps a quiet band of its own color */
.door::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--door-hue);
  opacity: 0.4;
}
.door::after {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--door-hue);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--ease);
}
/* the hover bounce — keep this on every page */
.door:hover, .door:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  z-index: 1;
  color: var(--ink);
}
.door:hover::after, .door:focus-visible::after { transform: scaleX(1); }
.door[data-door="2"] { --door-hue: var(--marigold); }
.door[data-door="3"] { --door-hue: var(--brass); }
.door[data-door="4"] { --door-hue: var(--maroon); }
.door[data-door="5"] { --door-hue: var(--saffron-deep); }

/* five-door variant — door V ("Deepening a practice") joined the
   router 2026-07. The hairline lattice must stay fully tiled: no
   orphan cells showing the --rule field. 2-up: the fifth door runs
   full width. Wide: a 6-col lattice, three doors over two. */
@media (min-width: 40rem) {
  .router-grid--5 .door:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 66rem) {
  .router-grid--5 { grid-template-columns: repeat(6, 1fr); }
  .router-grid--5 .door { grid-column: span 2; }
  .router-grid--5 .door:nth-child(n+4) { grid-column: span 3; }
}

.door-no {
  font-family: var(--display); font-weight: 400;
  font-size: 2.4rem; line-height: 1;
  color: var(--door-hue);
}
.door h3 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--text-h3); line-height: 1.25; color: var(--ink);
}
.door p { font-size: 0.92rem; line-height: 1.65; color: var(--ink-soft); flex-grow: 1; }
.door-go {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 600; color: var(--sindoor);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.door-go::after { content: "→"; transition: transform 220ms var(--ease); }
.door:hover .door-go::after, .door:focus-visible .door-go::after { transform: translateX(4px); }
.router-foot {
  margin-top: 1.5rem; font-size: 0.9rem; color: var(--ink-soft);
  font-style: italic; font-weight: 300;
}

/* ============================================================
   9. SINDOOR BAND — the drenched statement band, carried by
   typography. .teacher is the homepage instance; .band-sindoor
   is the page-agnostic name. No photographs inside this band.
   ============================================================ */
.teacher, .band-sindoor {
  background: var(--sindoor);
  color: #f9e9d2;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.teacher .wrap, .band-sindoor .wrap { padding-block: clamp(3.2rem, 6vw, 5.5rem); }
.teacher-head, .band-head { max-width: 42rem; }
.teacher-head h2, .band-head h2 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--text-h2); line-height: 1.16; color: var(--on-sindoor);
  text-wrap: balance;
}
.teacher-head p, .band-head p {
  margin-top: 1.15rem; font-size: var(--text-deck); font-weight: 300;
  line-height: 1.72; color: var(--on-sindoor-soft);
}
.teacher-head p strong, .band-head p strong { font-weight: 700; color: var(--on-sindoor); }

/* the itinerary — a real sequence, so the dates earn their place */
.journey {
  list-style: none;
  margin-top: clamp(2.4rem, 4.5vw, 3.8rem);
  display: grid; gap: 1.7rem;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .journey { grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 3rem); }
}
.journey li {
  border-top: 1px solid rgba(253,242,221,.38);
  padding-top: 1.15rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.j-year {
  font-family: var(--sans); font-size: var(--text-label);
  font-weight: 700; letter-spacing: 0.16em;
  color: var(--on-sindoor-gold);
}
.j-place {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
  line-height: 1.12; color: var(--on-sindoor);
}
.j-note { font-size: 0.93rem; line-height: 1.68; color: var(--on-sindoor-soft); max-width: 26em; }

/* ============================================================
   10. SHELF — archive cards with drawn motifs
   ============================================================ */
.shelf { padding-block: var(--space-lg); background: var(--paper); }

.shelf-grid {
  display: grid; gap: clamp(1.4rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .shelf-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) {
  .shelf-grid { grid-template-columns: repeat(12, 1fr); }
  .shelf-lead { grid-column: span 7; grid-row: span 2; }
  .shelf-side { grid-column: span 5; }
}
.shelf-item {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.shelf-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.shelf-figure { position: relative; overflow: hidden; }
.shelf-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shelf-lead .shelf-figure img { aspect-ratio: 16 / 10; object-position: 50% 30%; }
/* drawn archive motifs (inline SVG) stand in where photographs used to be */
.shelf-figure svg { width: 100%; height: auto; display: block; }
.shelf-row .row-img svg { width: 100%; height: 100%; display: block; }
.shelf-tag {
  position: absolute; left: 1rem; bottom: 1rem;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-sindoor); background: rgba(36,16,9,.62);
  border: 1px solid rgba(249,240,221,.4);
  padding: 0.32rem 0.8rem; border-radius: 999px;
}
.shelf-body { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.4rem, 2.5vw, 2rem); flex-grow: 1; }
.shelf-body h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  line-height: 1.22; color: var(--ink); text-wrap: balance;
}
.shelf-body > p { color: var(--ink-soft); font-size: 0.95rem; flex-grow: 1; }
.shelf-provenance {
  font-family: var(--sans); font-size: 0.78rem; color: var(--saffron-deep);
  border-top: 1px dashed var(--rule-strong); padding-top: 0.75rem;
}

/* archive-card row: narrow drawn plate beside the body. Works inside
   any .shelf-item (home's side cards, the catalog's collections). */
.shelf-row { display: flex; gap: 1.2rem; align-items: stretch; flex-grow: 1; }
.shelf-row .row-img {
  flex: none; width: clamp(6.5rem, 30%, 9rem);
  overflow: hidden;
}
.shelf-row .row-img img { width: 100%; height: 100%; object-fit: cover; }
.shelf-row .shelf-body { padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem) 0; }
.shelf-side .shelf-row .row-img { margin: 0; }
.shelf-guide { border-top: 3px solid var(--marigold); }

/* ============================================================
   11. LETTER — the marigold newsletter band
   ============================================================ */
.letter { background: var(--marigold); color: var(--on-marigold); }
.letter .wrap {
  display: grid; gap: clamp(1.6rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: clamp(2.6rem, 5vw, 4.2rem);
}
@media (min-width: 56rem) { .letter .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.letter h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.18;
  text-wrap: balance;
}
.letter .letter-sub { margin-top: 0.7rem; font-size: 0.98rem; line-height: 1.65; color: var(--on-marigold-soft); max-width: 34em; }
.letter-form { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.letter-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.letter-form input[type="email"] {
  flex: 1 1 14rem;
  font-family: var(--sans); font-size: 0.98rem;
  padding: 0.9rem 1.05rem;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid rgba(42,18,6,.45); border-radius: 3px;
}
.letter-form input[type="email"]::placeholder { color: #7a5a33; }
.letter-form input[type="email"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.letter-form button {
  font-family: var(--sans); font-size: 0.98rem; font-weight: 700;
  background: var(--ink); color: var(--paper-raised);
  border: none; border-radius: 3px;
  padding: 0.9rem 1.6rem; cursor: pointer;
  transition: transform 200ms var(--ease), background-color 160ms var(--ease);
}
.letter-form button:hover { background: #3a2213; transform: translateY(-1px); }
.letter-form button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.letter-fineprint { margin-top: 0.85rem; font-family: var(--sans); font-size: 0.8rem; color: var(--on-marigold-soft); }
.letter-status { margin-top: 0.6rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; min-height: 1.3em; }

/* ============================================================
   12. FOOTER — the field again
   ============================================================ */
.site-footer {
  background: var(--field);
  color: var(--field-soft);
  padding-block: clamp(2.8rem, 5vw, 4.5rem) 2rem;
}
.footer-grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-mission {
  font-style: italic; font-weight: 300;
  font-size: 1.08rem; color: var(--field-ink); max-width: 26em; line-height: 1.7;
}
.footer-mission strong { font-style: normal; font-weight: 700; color: var(--on-sindoor); }
/* the emblem again, larger — a white roundel pressed onto the dark field */
.footer-seal {
  display: grid; place-items: center;
  width: 6.75rem; height: 6.75rem;
  background: #fff;
  border-radius: 50%;
  padding: 0.4rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 0 0 1px rgba(217,186,142,.45), 0 0 0 7px rgba(217,186,142,.12);
}
.footer-seal img { width: 100%; height: 100%; border-radius: 50%; }
.site-footer h4 {
  font-family: var(--sans); font-size: var(--text-label);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 0.9rem; font-weight: 700;
}
.site-footer ul { list-style: none; display: grid; gap: 0.5rem; }
.site-footer li a { font-family: var(--sans); color: var(--field-soft); text-decoration: none; font-size: 0.92rem; }
.site-footer li a:hover { color: var(--field-ink); text-decoration: underline; }
.footer-colophon {
  margin-top: 3rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(217,186,142,.25);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  font-family: var(--sans); font-size: 0.8rem; color: #a28763;
}