/*
  ============================================================
  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:      #4E4A3F;
  --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; }

html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--display);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

img{ max-width:100%; display:block; }
a{ color:inherit; }

.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;
}

/* ============================================================
   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 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); }
.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); }

/* ============================================================
   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{
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  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);
  transition:color .3s ease;
}
.door-enter:hover .word{ 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);
}

/* ============================================================
   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 .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; }
  .house-nav .links{ gap:0.9rem; }
  .house-nav .links a{ font-size:0.62rem; letter-spacing:0.16em; }
  .cc-actions{ gap:1rem; }
  .cc-register{ width:100%; justify-content:center; }
}

/* ============================================================
   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; }
}