/*
  ============================================================
  Robert Warren Lyons, Jr. · The Catalogue of the House
  File: css/catalogue.css
  The production stylesheet for the July 7, 2026 launch.
  Design: the family's catalog room. Warm dark, bone paper,
  gold accents. Built at the Gate from concept v3, Session 169.
  Principle: plain, dependency-light, built to render in
  twenty years.
  ============================================================
*/

/* ============================================================
   TOKENS · a warm dark, candlelight not fluorescent
============================================================ */
:root{
  --ink:        #070605;
  --room:       #0D0B09;
  --panel:      #141109;
  --bone:       #EDE6D6;
  --bone-dim:   #C9C1AE;
  --muted:      #857E6D;
  --faint:      #857E6D;
  --gold:       #B8973A;
  --gold-light: #D4B25A;
  --hairline:   rgba(184,151,58,0.22);
  --hairline-dim: rgba(184,151,58,0.12);

  --display: 'Cormorant Garamond', Georgia, serif;
  --caps:    'Cormorant SC', Georgia, serif;
  --utility: 'Lato', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

/* NO scroll-behavior:smooth — Chrome kills the smooth glide mid-flight on
   this page (verified empirically 2026-07-06: anchor clicks landed a whole
   section short, "training dropped into book 3 of the works"; the cancel
   persisted with all animations disabled and every overflow arrangement).
   Instant jumps land exactly, honoring each room's scroll-margin-top. */
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--display);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: overflow-x:hidden promotes body to its own scroll
     container, which broke anchor navigation (nav links landed short —
     "training dropped into book 3 of the works") */
  overflow-x:clip;
}

::selection{ background:rgba(184,151,58,0.35); color:var(--bone); }

img{ max-width:100%; height:auto; display:block; }
/* anchor targets clear the fixed nav and land true */
.room{ scroll-margin-top:3.4rem; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:4px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed;
  z-index:120;
  top:0.75rem;
  left:0.75rem;
  width:auto;
  height:auto;
  padding:0.7rem 1rem;
  margin:0;
  overflow:visible;
  clip:auto;
  white-space:normal;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--utility);
  font-size:0.78rem;
  text-decoration:none;
}

/* ============================================================
   SHARED PIECES
============================================================ */
.eyebrow{
  font-family:var(--utility);
  font-weight:300;
  font-size:0.62rem;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:var(--gold);
}

.room-label{
  display:flex;
  align-items:center;
  gap:1.25rem;
  margin-bottom:clamp(2.5rem, 6vh, 4.5rem);
}
.room-label .numeral{
  font-family:var(--display);
  font-weight:300;
  font-size:1.1rem;
  color:var(--gold);
  opacity:0.7;
}
.room-label .line{
  width:44px; height:1px; background:var(--hairline);
}

h2.room-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  line-height:1.12;
  letter-spacing:0.005em;
  color:var(--bone);
  max-width:18em;
}

.room-intro{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.02rem, 1.35vw, 1.2rem);
  line-height:1.75;
  color:var(--bone-dim);
  max-width:34em;
  margin-top:1.5rem;
}

.room{
  position:relative;
  padding:clamp(5rem, 14vh, 9rem) clamp(1.5rem, 7vw, 7rem);
}

/* scroll reveal */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.12s; } .rv.d2{ transition-delay:.24s; } .rv.d3{ transition-delay:.36s; }

/* ============================================================
   FIXED NAV · appears after the Door
============================================================ */
.house-nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.9rem clamp(1.5rem, 4vw, 3rem);
  background:linear-gradient(to bottom, rgba(7,6,5,0.92), rgba(7,6,5,0.75));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline-dim);
  transform:translateY(-110%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.house-nav.show{ transform:none; }
.house-nav .sig-mini{ flex-shrink:0; }
.house-nav .sig-mini img{
  height:26px; width:auto; opacity:0.75;
  filter:invert(1) hue-rotate(180deg); mix-blend-mode:screen;
}
.house-nav .links{ display:flex; gap:clamp(1.1rem, 3vw, 2.4rem); }
.nav-menu{ display:none; }
/* room names shorten on phones: the full labels out-measure the viewport
   and flexbox crushes the signature (the home button) to nothing */
.house-nav .links .short{ display:none; }
@media (max-width: 680px){
  .house-nav .links .full{ display:none; }
  .house-nav .links .short{ display:inline; }
}
.house-nav .links a{
  font-family:var(--caps);
  font-weight:400;
  font-size:0.78rem;
  letter-spacing:0.24em;
  text-decoration:none;
  color:var(--bone-dim);
  transition:color .25s ease;
  white-space:nowrap;
}
.house-nav .links a:hover{ color:var(--gold-light); }
.house-nav .links a.nav-daily{ color:var(--gold); }
.house-nav .links a.nav-daily:hover{ color:var(--gold-light); }

/* ============================================================
   ROOM 0 · THE DOOR
============================================================ */
.door{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:4rem 1.5rem 6rem;
  position:relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% 115%, rgba(184,151,58,0.055), transparent 60%),
    var(--ink);
}

/* the keeper, barely there: a pencil ghost of the portrait,
   gray on black, dissolved at every edge, standing to the right
   of the text column rather than behind it */
.door::before{
  content:'';
  position:absolute; top:0; bottom:0; right:-6%; width:58%;
  background:url('../assets/images/door-sketch.jpg') center 14% / cover no-repeat;
  opacity:0.10;
  -webkit-mask-image:radial-gradient(ellipse 62% 84% at 52% 38%,
      #000 22%, rgba(0,0,0,0.45) 55%, transparent 80%);
  mask-image:radial-gradient(ellipse 62% 84% at 52% 38%,
      #000 22%, rgba(0,0,0,0.45) 55%, transparent 80%);
  pointer-events:none;
}
.door > *{ position:relative; z-index:1; }

@media (max-width: 680px){
  /* stacked mobile: let the ghost drift back to center, fainter still */
  .door::before{ right:0; width:100%; opacity:0.08; }
}

.door .eyebrow{ margin-bottom:clamp(3rem, 8vh, 5.5rem); opacity:0.9; }

/* the signature, written by hand (see inline SVG mask in the HTML) */
.sig-frame{ margin-bottom:1.75rem; }
.sig-svg{
  width:clamp(240px, 32vw, 360px);
  height:auto;
  display:block;
  mix-blend-mode:screen;
  overflow:visible;
}
.sig-svg .sig-ink{ filter:invert(1) hue-rotate(180deg); }
/* the pen: 28 strokes machine-traced from the ink's own centerlines,
   played in writing order (cross, letters left to right, flourish last) */
.sig-svg .mp{
  fill:none;
  stroke:#fff;
  stroke-width:14;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
/* THE PEN FOLLOWS THE HAND (reordered 2026-07-05, Bishop's
   correction): strokes fire in writing order, letter by letter,
   left to right. The tracer had chained the two Robert top-sweeps
   (sg26, sg27) last, so the start of the name finished AFTER the
   end — not how the Bishop writes. Durations are unchanged per
   stroke (they encode ink length); only the firing order moved. */
/* Robert — the R, its bar, the grand top sweep, then o·b·e·r·t */
.sig-svg .sg2{ animation:penDraw 0.13s linear 0.60s forwards; }
.sig-svg .sg3{ animation:penDraw 0.05s linear 0.74s forwards; }
.sig-svg .sg26{ animation:penDraw 0.16s linear 0.80s forwards; }
.sig-svg .sg4{ animation:penDraw 0.05s linear 0.98s forwards; }
.sig-svg .sg5{ animation:penDraw 0.06s linear 1.04s forwards; }
.sig-svg .sg6{ animation:penDraw 0.09s linear 1.11s forwards; }
.sig-svg .sg7{ animation:penDraw 0.05s linear 1.21s forwards; }
.sig-svg .sg8{ animation:penDraw 0.06s linear 1.27s forwards; }
.sig-svg .sg9{ animation:penDraw 0.05s linear 1.34s forwards; }
.sig-svg .sg10{ animation:penDraw 0.05s linear 1.40s forwards; }
/* the t-sweep that closes Robert */
.sig-svg .sg27{ animation:penDraw 0.19s linear 1.47s forwards; }
/* the W */
.sig-svg .sg11{ animation:penDraw 0.13s linear 1.72s forwards; }
.sig-svg .sg13{ animation:penDraw 0.05s linear 1.86s forwards; }
.sig-svg .sg15{ animation:penDraw 0.05s linear 1.92s forwards; }
.sig-svg .sg12{ animation:penDraw 0.46s linear 1.98s forwards; }
.sig-svg .sg14{ animation:penDraw 0.05s linear 2.45s forwards; }
.sig-svg .sg16{ animation:penDraw 0.05s linear 2.51s forwards; }
/* Lyons — the letters, the y-tail, the underline into the J of Jr. */
.sig-svg .sg18{ animation:penDraw 0.05s linear 2.62s forwards; }
.sig-svg .sg19{ animation:penDraw 0.06s linear 2.68s forwards; }
.sig-svg .sg17{ animation:penDraw 0.08s linear 2.75s forwards; }
.sig-svg .sg21{ animation:penDraw 0.06s linear 2.84s forwards; }
.sig-svg .sg22{ animation:penDraw 0.05s linear 2.91s forwards; }
.sig-svg .sg23{ animation:penDraw 0.05s linear 2.97s forwards; }
.sig-svg .sg20{ animation:penDraw 0.40s linear 3.04s forwards; }
.sig-svg .sg24{ animation:penDraw 0.05s linear 3.45s forwards; }
.sig-svg .sg25{ animation:penDraw 0.05s linear 3.52s forwards; }
/* THE CROSS IS WRITTEN LAST: the name is signed — then the pen
   RESTS (a full beat, lengthened at Bishop's direction 7/5) —
   and the bishop sets the cross before his name, slowly and
   deliberately, because he stands behind the cross of Christ. */
.sig-svg .sg0{ animation:penDraw 0.30s ease-out 4.70s forwards; }
.sig-svg .sg1{ animation:penDraw 0.26s ease-out 5.08s forwards; }
@keyframes penDraw{ to{ stroke-dashoffset:0; } }

.door h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(3.2rem, 7.5vw, 6rem);
  line-height:1;
  letter-spacing:0.01em;
  color:#FBF7EC;
}
.gold-period{ color:var(--gold); }

.door-rule{ width:44px; height:1px; background:var(--gold); opacity:0.8; margin:2.25rem auto; }

.door-line{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.15rem, 2vw, 1.55rem);
  color:var(--bone-dim);
  letter-spacing:0.02em;
}

.door-offices{
  margin-top:1.4rem;
  font-family:var(--utility);
  font-weight:300;
  font-size:0.6rem;
  letter-spacing:0.38em;
  text-transform:uppercase;
  color:var(--muted);
}

/* the kin line — beneath the offices, the roles that remain:
   the offices are stewardships that pass; these do not.
   (Added 2026-07-05 at Bishop's direction: his humanity
   belongs on the door.) */
.door-kin{
  margin-top:0.9rem;
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(0.9rem, 1.4vw, 1.05rem);
  letter-spacing:0.06em;
  color:var(--bone-dim);
}
.door-kin .kin-dot{ color:var(--gold); opacity:0.75; }

.door-enter{
  /* centered via auto margins, NOT translateX: the rise animation ends at
     transform:none with fill forwards, which would wipe a transform-based
     centering and leave the element 50%-left (the off-center Enter bug) */
  position:absolute; bottom:4.4rem; left:0; right:0;
  margin:0 auto; width:fit-content;
  display:flex; flex-direction:column; align-items:center; gap:0.8rem;
  text-decoration:none;
}
.door-enter .word{
  font-family:var(--caps); font-size:0.72rem; letter-spacing:0.4em; color:var(--muted);
  margin-right:-0.4em; /* cancel the trailing tracking so the glyphs center true */
  transition:color .3s ease;
}
.door-enter:hover .word{ color:var(--gold-light); }
.door-daily{
  position:absolute;
  right:0;
  bottom:1.45rem;
  left:0;
  width:fit-content;
  margin:0 auto;
  color:var(--gold);
  font-family:var(--utility);
  font-size:0.62rem;
  font-weight:300;
  letter-spacing:0.18em;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .25s ease;
}
.door-daily:hover{ color:var(--gold-light); }
.door-enter .thread{
  width:1px; height:44px; overflow:hidden; position:relative; background:var(--hairline-dim);
}
.door-enter .thread::after{
  content:''; position:absolute; left:0; top:-50%;
  width:1px; height:50%; background:var(--gold);
  animation:descend 2.6s ease-in-out infinite;
}
@keyframes descend{ 0%{ top:-50%; } 60%,100%{ top:110%; } }

/* door entrance fade · text rises after the pen finishes,
   and the pen finishes with the cross (cross now ends ~5.34s) */
.door .rise{ opacity:0; animation:rise 1.1s cubic-bezier(.22,.61,.36,1) forwards; }
.door .r1{ animation-delay:.2s; }  .door .r2{ animation-delay:5.55s; }
.door .r3{ animation-delay:5.9s; } .door .r4{ animation-delay:6.2s; }
.door .r5{ animation-delay:6.5s; } .door .r6{ animation-delay:6.8s; }
.door .r7{ animation-delay:7.4s; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ============================================================
   ROOM I · THE HOUSE · the why leads
============================================================ */
.house{
  background:
    radial-gradient(ellipse 80% 55% at 15% 8%, rgba(184,151,58,0.06), transparent 55%),
    var(--room);
  border-top:1px solid var(--hairline-dim);
}
.house-grid{
  display:grid;
  grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(2.5rem, 6vw, 6rem);
  align-items:start;
}
.chi-rho{ width:54px; height:auto; margin-bottom:2rem; opacity:0.9; }

.house-copy p{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.08rem, 1.5vw, 1.28rem);
  line-height:1.85;
  color:var(--bone-dim);
  margin-top:1.5rem;
  max-width:33em;
}
.house-copy p strong{ font-weight:500; color:var(--bone); }
.house-copy p.address{
  color:var(--bone);
  border-left:1px solid var(--gold);
  padding-left:1.6rem;
}
.house-sig{ margin-top:3rem; }
.house-sig img{
  width:190px;
  filter:invert(1) hue-rotate(180deg);
  mix-blend-mode:screen;
  opacity:0.85;
}
.house-sig .who{
  margin-top:0.9rem;
  font-family:var(--utility); font-weight:300; font-size:0.6rem;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--muted);
}

.house-portrait{
  position:sticky; top:6rem;
}
/* the keeper emerges from the room's darkness: no frame, no hard edge.
   the mask ellipse is deliberately SMALLER than the photo, so the fade
   reaches full transparency well inside the rectangle: no edge can show.
   screen blend lets the room's warm tone through the dark pixels. */
.house-portrait img{
  width:100%;
  filter:grayscale(1) contrast(1.06) brightness(0.95) sepia(0.2);
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 55% 50% at 50% 42%,
      #000 28%, rgba(0,0,0,0.5) 55%, transparent 80%);
  mask-image:radial-gradient(ellipse 55% 50% at 50% 42%,
      #000 28%, rgba(0,0,0,0.5) 55%, transparent 80%);
}
.house-portrait .pcap{
  margin-top:1rem; text-align:center;
  font-family:var(--utility); font-weight:300; font-size:0.55rem;
  letter-spacing:0.26em; text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   ROOM II · THE WORKS · ordered by availability
============================================================ */
.works{ background:var(--ink); border-top:1px solid var(--hairline-dim); }

.plate{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:clamp(2.5rem, 6vw, 6rem);
  align-items:center;
  padding:clamp(3.5rem, 10vh, 7rem) 0;
  position:relative;
  border-top:1px solid var(--hairline-dim);
}
.plate:first-of-type{ border-top:none; }
.plate.flip{ grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); }
.plate.flip .plate-visual{ order:2; }
.plate.flip .plate-copy{ order:1; }

/* the ghost numeral, watermark of the accession number */
.plate .ghost{
  position:absolute;
  top:50%; transform:translateY(-52%);
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(9rem, 22vw, 19rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(184,151,58,0.10);
  user-select:none;
  pointer-events:none;
  z-index:0;
}
.plate .ghost.left{ left:-1.5rem; }
.plate .ghost.right{ right:-1.5rem; }

.plate-visual{ position:relative; z-index:1; display:flex; justify-content:center; }
.plate-visual .frame{
  position:relative;
  padding:clamp(1rem, 2vw, 1.6rem);
  border:1px solid var(--hairline);
  background:linear-gradient(160deg, rgba(184,151,58,0.05), transparent 55%);
}
.plate-visual img{
  width:clamp(200px, 22vw, 300px);
  height:auto;
  box-shadow:0 30px 70px rgba(0,0,0,0.65);
}

.plate-copy{ position:relative; z-index:1; max-width:30em; }
.accession{
  font-family:var(--caps);
  font-size:0.85rem;
  letter-spacing:0.34em;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.plate-copy h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1.15;
  color:#F7F2E4;
}
.plate-copy .edition{
  margin-top:0.8rem;
  font-family:var(--utility); font-weight:300;
  font-size:0.62rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted);
}
.plate-copy .curation{
  margin-top:1.4rem;
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(1.02rem, 1.3vw, 1.18rem);
  line-height:1.7;
  color:var(--bone-dim);
}
.plate-copy .held{
  display:inline-flex; align-items:center; gap:0.6rem;
  margin-top:1.7rem;
  font-family:var(--caps); font-size:0.8rem; letter-spacing:0.26em;
  color:var(--gold);
  text-decoration:none;
  padding-bottom:0.3rem;
  border-bottom:1px solid var(--hairline);
  transition:color .25s ease, border-color .25s ease;
}
.plate-copy a.held:hover{ color:var(--gold-light); border-color:var(--gold); }
.plate-copy span.held{ cursor:default; }

/* ============================================================
   ROOM III · THE READING ROOM
============================================================ */
.reading{
  background:
    radial-gradient(ellipse 70% 50% at 85% 0%, rgba(184,151,58,0.05), transparent 55%),
    var(--room);
  border-top:1px solid var(--hairline-dim);
}

.reading-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 4vw, 4rem);
  margin-top:clamp(2.5rem, 6vh, 4rem);
}
.rpanel{
  border:1px solid var(--hairline-dim);
  background:linear-gradient(170deg, rgba(184,151,58,0.045), transparent 45%);
  padding:clamp(1.8rem, 3.5vw, 3rem);
  display:flex; flex-direction:column;
}
.rpanel .rp-eyebrow{ margin-bottom:1.3rem; }
.rpanel h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.55rem, 2.4vw, 2.1rem); line-height:1.2;
  color:#F7F2E4;
}
.rpanel p{
  margin-top:1rem;
  font-family:var(--display); font-weight:300;
  font-size:1.02rem; line-height:1.75; color:var(--bone-dim);
}
.rpanel .rp-cta{
  margin-top:auto; padding-top:1.8rem;
  display:inline-flex; align-items:center; gap:0.6rem; align-self:flex-start;
  font-family:var(--caps); font-size:0.8rem; letter-spacing:0.26em;
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--hairline); padding-bottom:0.3rem;
  transition:color .25s ease, border-color .25s ease;
}
.rpanel .rp-cta:hover{ color:var(--gold-light); border-color:var(--gold); }

/* the specimen, the long-form typesetting standard */
.specimen{
  margin-top:clamp(3rem, 8vh, 5rem);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
}
.specimen-page{
  max-width:620px;
  background:var(--panel);
  border:1px solid var(--hairline-dim);
  padding:clamp(2.2rem, 5vw, 4rem) clamp(1.8rem, 5vw, 3.5rem);
  position:relative;
}
.specimen-page .spec-label{
  position:absolute; top:-0.55rem; left:50%; transform:translateX(-50%);
  background:var(--room);
  padding:0 1rem;
  font-family:var(--utility); font-weight:300; font-size:0.55rem;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
.specimen-page p.body{
  font-family:var(--display); font-weight:400;
  font-size:1.12rem; line-height:1.9;
  color:var(--bone);
}
.specimen-page p.body::first-letter{
  font-size:3.4em; float:left; line-height:0.82;
  padding-right:0.12em; padding-top:0.06em;
  color:var(--gold); font-weight:300;
}
.spec-quote{
  margin-top:2.2rem;
  padding:1.6rem 1.8rem;
  border-left:1px solid var(--gold);
  background:rgba(184,151,58,0.045);
}
.spec-quote p{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:1.12rem; line-height:1.8; color:var(--bone);
}
.spec-quote cite{
  display:block; margin-top:1rem;
  font-family:var(--utility); font-style:normal; font-weight:300;
  font-size:0.62rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--gold);
}

/* ============================================================
   ROOM IV · THE TRAINING HALL + COURSE No. 001
============================================================ */
.training{
  background:var(--ink);
  border-top:1px solid var(--hairline-dim);
  text-align:center;
}
.training .room-label{ justify-content:center; }
.training h2.room-title{ margin:0 auto; }
.training .hall-statement{
  margin:clamp(2rem, 5vh, 3rem) auto 0;
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.25rem, 2.2vw, 1.7rem);
  line-height:1.6;
  max-width:26em;
  color:var(--bone-dim);
}

/* the course card · Course No. 001 */
.course-card{
  max-width:680px;
  margin:clamp(3rem, 8vh, 5rem) auto 0;
  text-align:left;
  border:1px solid var(--hairline);
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(184,151,58,0.08), transparent 60%),
    var(--panel);
  padding:clamp(2rem, 4.5vw, 3.5rem);
  position:relative;
}
.course-card .cc-eyebrow{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:1.5rem;
}
.course-card .cc-eyebrow .line{ width:34px; height:1px; background:var(--hairline); }
.course-card h3{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2rem, 3.6vw, 2.9rem); line-height:1.1;
  color:#F7F2E4;
}
.course-card .cc-sub{
  margin-top:0.7rem;
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem, 1.5vw, 1.25rem);
  color:var(--bone-dim);
}
.course-quote{
  margin:1.8rem 0 0;
  padding:1.3rem 1.5rem;
  border-left:1px solid var(--gold);
  background:rgba(184,151,58,0.045);
}
.course-quote p{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:1.02rem; line-height:1.75; color:var(--bone);
}
.course-quote cite{
  display:block; margin-top:0.8rem;
  font-family:var(--utility); font-style:normal; font-weight:300;
  font-size:0.58rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--gold);
}
.cc-details{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1.4rem;
  margin-top:2rem;
  padding-top:1.8rem;
  border-top:1px solid var(--hairline-dim);
}
.cc-detail .dt{
  font-family:var(--utility); font-weight:300; font-size:0.55rem;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--muted);
}
.cc-detail .dd{
  margin-top:0.45rem;
  font-family:var(--display); font-weight:400;
  font-size:1.08rem; line-height:1.4; color:var(--bone);
}
.cc-kit{
  margin-top:1.8rem;
  font-family:var(--display); font-weight:300;
  font-size:1rem; line-height:1.7; color:var(--bone-dim);
}
.cc-kit strong{ font-weight:500; color:var(--bone); }
.cc-actions{
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
  margin-top:2.2rem;
}
.cc-register{
  display:inline-flex; align-items:center; gap:0.7rem;
  font-family:var(--caps); font-size:0.85rem; letter-spacing:0.3em;
  color:var(--ink);
  background:var(--gold);
  text-decoration:none;
  padding:0.95rem 2.2rem;
  transition:background .25s ease;
}
.cc-register:hover{ background:var(--gold-light); }
.cc-note{
  font-family:var(--utility); font-weight:300; font-size:0.6rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--muted);
}
.held-links{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0.8rem 1.2rem; }
.held-secondary{
  color:var(--muted);
  font-family:var(--utility);
  font-size:0.6rem;
  letter-spacing:0.12em;
  text-underline-offset:3px;
}
.held-secondary:hover{ color:var(--gold-light); }
.cc-actions.is-closed{
  display:block;
  padding-top:1.2rem;
  border-top:1px solid var(--hairline-dim);
}
.cc-actions.is-closed .cc-note{
  display:block;
  max-width:34em;
  color:var(--bone-dim);
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:0.02em;
  line-height:1.6;
  text-transform:none;
}

/* ============================================================
   ROOM IV · DAILY PORTION · the daily practice
============================================================ */
.daily-portion{
  overflow:hidden;
  background:
    radial-gradient(ellipse 75% 70% at 84% 32%, rgba(184,151,58,0.09), transparent 62%),
    var(--room);
  border-top:1px solid var(--hairline-dim);
}
.daily-portion-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(250px, 0.7fr);
  gap:clamp(3rem, 8vw, 8rem);
  align-items:center;
}
.daily-portion-kicker{
  margin-bottom:1.2rem;
  color:var(--gold);
  font-family:var(--caps);
  font-size:0.78rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
}
.daily-portion-lede{
  max-width:34em;
  margin-top:1.6rem;
  color:var(--bone-dim);
  font-family:var(--display);
  font-size:clamp(1.08rem, 1.55vw, 1.3rem);
  font-weight:300;
  line-height:1.8;
}
.daily-portion-rooms{
  display:flex;
  flex-wrap:wrap;
  gap:0.65rem;
  margin-top:2rem;
  list-style:none;
}
.daily-portion-rooms li{
  padding:0.45rem 0.8rem;
  border:1px solid var(--hairline);
  color:var(--bone-dim);
  font-family:var(--utility);
  font-size:0.62rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.daily-portion-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.4rem;
  margin-top:2.2rem;
}
.daily-primary,
.daily-secondary{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  font-family:var(--caps);
  font-size:0.78rem;
  letter-spacing:0.2em;
  text-decoration:none;
}
.daily-primary{
  padding:0.85rem 1.4rem;
  background:var(--gold);
  color:var(--ink);
  transition:background .25s ease;
}
.daily-primary:hover{ background:var(--gold-light); }
.daily-secondary{
  padding-bottom:0.2rem;
  border-bottom:1px solid var(--hairline);
  color:var(--gold);
  transition:color .25s ease, border-color .25s ease;
}
.daily-secondary:hover{ color:var(--gold-light); border-color:var(--gold); }
.daily-portion-note{
  max-width:39em;
  margin-top:1.5rem;
  color:var(--muted);
  font-family:var(--utility);
  font-size:0.65rem;
  letter-spacing:0.08em;
  line-height:1.7;
}
.daily-portion-visual{
  position:relative;
  display:block;
  width:min(100%, 340px);
  justify-self:center;
  padding:0.8rem;
  border:1px solid var(--hairline);
  background:linear-gradient(145deg, rgba(184,151,58,0.1), transparent 42%);
  text-decoration:none;
}
.daily-portion-visual img{
  width:100%;
  aspect-ratio:1 / 2;
  object-fit:cover;
  object-position:top;
  box-shadow:0 2rem 5rem rgba(0,0,0,0.5);
}
.daily-portion-seal{
  position:absolute;
  right:-1.25rem;
  bottom:2rem;
  display:grid;
  width:4.6rem;
  height:4.6rem;
  place-items:center;
  border:1px solid var(--gold);
  border-radius:50%;
  background:var(--ink);
  color:var(--gold);
  font-family:var(--caps);
  font-size:1.05rem;
  letter-spacing:0.12em;
}

/* ============================================================
   ROOM VI · THE PILLARS · patronage, not purchase
   (Ratified S172, 2026-07-07. The free-canon doctrine governs:
   a pledge supports the mission; it buys and unlocks nothing.)
============================================================ */
.pillars{
  background:
    radial-gradient(ellipse 75% 50% at 12% 0%, rgba(184,151,58,0.05), transparent 55%),
    var(--ink);
  border-top:1px solid var(--hairline-dim);
}

/* the Galatians epigraph, set like the house's other quotations */
.pillar-quote{
  margin-top:1.8rem;
  padding:1.3rem 1.5rem;
  border-left:1px solid var(--gold);
  background:rgba(184,151,58,0.045);
  max-width:34em;
}
.pillar-quote p{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:1.02rem; line-height:1.75; color:var(--bone);
}
.pillar-quote cite{
  display:block; margin-top:0.8rem;
  font-family:var(--utility); font-style:normal; font-weight:300;
  font-size:0.58rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--gold);
}

.pillars-copy p{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.05rem, 1.45vw, 1.24rem);
  line-height:1.8;
  color:var(--bone-dim);
  margin-top:1.5rem;
  max-width:34em;
}
.pillars-copy p strong{ font-weight:500; color:var(--bone); }

/* the pledge cards: three monthly pillars + one single gift */
.pillar-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(1.2rem, 2.5vw, 2rem);
  margin-top:clamp(2.5rem, 6vh, 4rem);
}
.pillar-card{
  border:1px solid var(--hairline-dim);
  background:linear-gradient(170deg, rgba(184,151,58,0.045), transparent 45%), var(--panel);
  padding:clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.2vw, 1.8rem);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.pillar-card .pc-eyebrow{ margin-bottom:1.3rem; }
.pillar-card .pc-amount{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem, 3.2vw, 2.7rem); line-height:1;
  color:#F7F2E4;
}
.pillar-card .pc-per{
  font-size:0.42em; font-style:italic; font-weight:300;
  letter-spacing:0.04em; color:var(--bone-dim);
}
.pillar-card .pc-line{
  margin-top:1rem; margin-bottom:1.8rem;
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:0.98rem; line-height:1.65; color:var(--bone-dim);
}
.pillar-card .pc-pledge{
  /* auto top margin pushes the button to the card's floor, so the
     four buttons align across the row whatever the copy height */
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--caps); font-size:0.78rem; letter-spacing:0.24em;
  color:var(--gold);
  text-decoration:none;
  border:1px solid var(--hairline);
  padding:0.8rem 1.2rem;
  width:100%;
  transition:color .25s ease, background .25s ease, border-color .25s ease;
}
.pillar-card .pc-pledge:hover{
  color:var(--ink); background:var(--gold); border-color:var(--gold);
}

/* the honesty line: visible, near the buttons, plain */
.pillar-honesty{
  margin:2.2rem auto 0; text-align:center; max-width:44em;
  font-family:var(--utility); font-weight:300; font-size:0.62rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--muted);
}
.pillar-close{
  margin:2rem auto 0; text-align:center; max-width:34em;
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.02rem, 1.3vw, 1.18rem); line-height:1.7;
  color:var(--bone-dim);
}

@media (max-width: 1020px){
  .pillar-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px){
  .pillar-cards{ grid-template-columns:1fr; }
}

/* ============================================================
   COLOPHON
============================================================ */
.colophon{
  background:var(--ink);
  border-top:1px solid var(--hairline-dim);
  padding:clamp(3.5rem, 9vh, 6rem) clamp(1.5rem, 7vw, 7rem);
  text-align:center;
}
.colophon .chi-rho{ width:30px; margin:0 auto 1.6rem; opacity:0.6; }
.colophon .holding{
  font-family:var(--caps); font-size:0.85rem; letter-spacing:0.3em;
  color:var(--bone-dim);
}
.colophon .correspondence{
  margin-top:1.3rem;
  font-family:var(--utility); font-weight:300; font-size:0.62rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--bone-dim);
}
.colophon .correspondence a{ color:var(--bone-dim); }
.colophon .correspondence a:hover{ color:var(--gold); }
.colophon .tell-someone{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--utility); font-weight:300; font-size:0.62rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--gold);
  transition:color .25s ease;
}
.colophon .tell-someone:hover{ color:var(--gold-light); }
.colophon .legal{
  margin-top:1.1rem;
  font-family:var(--utility); font-weight:300; font-size:0.58rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--faint);
}
.colophon .legal a{ color:var(--faint); }
.colophon .legal a:hover{ color:var(--gold); }
.colophon .domain{
  margin-top:1.6rem;
  font-family:var(--caps); font-size:0.78rem; letter-spacing:0.34em;
  color:var(--gold); opacity:0.85;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 860px){
  .plate, .plate.flip{ grid-template-columns:1fr; gap:2.2rem; }
  .plate.flip .plate-visual{ order:1; } .plate.flip .plate-copy{ order:2; }
  .plate .ghost{ font-size:8rem; top:0; transform:none; }
  .reading-panels{ grid-template-columns:1fr; }
  .house-grid{ grid-template-columns:1fr; }
  .house-portrait{ position:static; max-width:420px; }
  .daily-portion-grid{ grid-template-columns:1fr; }
  .daily-portion-visual{ width:min(82vw, 320px); }
  .house-nav{ padding:0.75rem 1rem; }
  .nav-menu{
    display:flex;
    min-height:44px;
    align-items:center;
    gap:0.65rem;
    padding:0 0.2rem;
    border:0;
    background:transparent;
    color:var(--bone-dim);
    cursor:pointer;
    font-family:var(--caps);
    font-size:0.74rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
  }
  .nav-menu-mark,
  .nav-menu-mark::before,
  .nav-menu-mark::after{
    display:block;
    width:18px;
    height:1px;
    background:var(--gold);
    content:'';
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav-menu-mark{ position:relative; }
  .nav-menu-mark::before{ position:absolute; top:-5px; }
  .nav-menu-mark::after{ position:absolute; top:5px; }
  .nav-menu[aria-expanded="true"] .nav-menu-mark{ background:transparent; }
  .nav-menu[aria-expanded="true"] .nav-menu-mark::before{ top:0; transform:rotate(45deg); }
  .nav-menu[aria-expanded="true"] .nav-menu-mark::after{ top:0; transform:rotate(-45deg); }
  .house-nav .links{
    position:absolute;
    top:100%;
    right:0;
    left:0;
    display:grid;
    max-height:0;
    gap:0;
    overflow:hidden;
    background:rgba(7,6,5,0.98);
    border-bottom:1px solid transparent;
    opacity:0;
    pointer-events:none;
    transition:max-height .3s ease, opacity .2s ease, border-color .2s ease;
  }
  .house-nav .links.open{
    max-height:26rem;
    border-color:var(--hairline-dim);
    opacity:1;
    pointer-events:auto;
  }
  .house-nav .links a{
    display:flex;
    min-height:48px;
    align-items:center;
    padding:0 1.4rem;
    border-top:1px solid var(--hairline-dim);
    font-size:0.76rem;
    letter-spacing:0.2em;
  }
  .house-nav .links .full{ display:inline; }
  .house-nav .links .short{ display:none; }
  .cc-actions{ gap:1rem; }
  .cc-register{ width:100%; justify-content:center; }
}

/* ============================================================
   THE THRESHOLD · Carry it further (share band, S173)
============================================================ */
.tell-band{
  scroll-margin-top:3.4rem;
  padding:clamp(4rem, 9vh, 6rem) 1.5rem;
  text-align:center;
  border-top:1px solid var(--hairline-dim);
  border-bottom:1px solid var(--hairline-dim);
}
.tell-eyebrow{
  font-family:var(--caps); font-size:0.72rem; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gold);
}
.tell-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem, 2.8vw, 2.2rem); line-height:1.2;
  margin:1rem auto 0; max-width:24em;
}
.tell-line{
  margin:0.9rem auto 0; max-width:36em;
  font-style:italic; color:var(--bone-dim);
}
.tell-context{
  max-width:42em;
  margin:1.5rem auto 0;
  color:var(--muted);
  font-family:var(--utility);
  font-size:0.64rem;
  letter-spacing:0.08em;
  line-height:1.65;
}
.tell-actions{
  margin-top:2.2rem;
  display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap;
}
.tell-btn{
  cursor:pointer; background:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--caps); font-size:0.78rem; letter-spacing:0.24em;
  color:var(--gold); border:1px solid var(--hairline);
  padding:0.85rem 1.7rem;
  transition:color .25s ease, background .25s ease, border-color .25s ease;
}
.tell-btn:hover{ color:var(--ink); background:var(--gold); border-color:var(--gold); }
@media (max-width: 680px){
  .tell-actions{ flex-direction:column; align-items:center; }
  .tell-btn{ width:100%; max-width:22rem; }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .sig-svg .mp{ animation:none; stroke-dashoffset:0; }
  .door .rise{ animation:none; opacity:1; }
  .rv{ opacity:1; transform:none; transition:none; }
  .door-enter .thread::after{ animation:none; }
}