/* ============================================================
   miris.studio — a skeuomorphic almanac of foresight
   Triadic palette held strictly solid. Light source: upper-left.
   ============================================================ */

:root{
  --kiln:      #b04a2f;   /* Triad A — Kiln Terracotta */
  --teal:      #2c5d63;   /* Triad B — Workshop Teal   */
  --mustard:   #c89234;   /* Triad C — Lamplight Mustard */
  --parchment: #f0e6d2;   /* Ground (light) */
  --felt:      #5a5a3e;   /* Ground (mid)   */
  --walnut:    #241c14;   /* Ground (dark)  */
  --brass:     #d4a953;   /* Highlight      */
  --indigo:    #1f2a3a;   /* Wash — cool shadow */

  --settle: cubic-bezier(0.22, 0.61, 0.36, 1);

  --contact-shadow: 0 4px 4px rgba(20,14,8,0.55);
  --ambient-shadow: 14px 22px 28px rgba(20,14,8,0.30);
  --double-shadow: var(--contact-shadow), var(--ambient-shadow);

  --display: "Fraunces", Georgia, serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "DM Sans", cursive;
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.62;
  letter-spacing:0.002em;
  color:var(--walnut);
  background:
    radial-gradient(120% 80% at 20% 0%, #6b6b4b 0%, var(--felt) 38%, #4a4a32 100%);
  overflow-x:hidden;
  position:relative;
}

/* ---- felt deck textures ---- */
.deck-noise{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.5;
  background-image:
    repeating-linear-gradient(48deg, rgba(20,14,8,0.05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-48deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 6px);
  mix-blend-mode:multiply;
}
.deck-primstav{ position:fixed; inset:0; pointer-events:none; z-index:1; }
.primstav-glyph{
  position:absolute; left:var(--x); top:var(--y);
  font-size:3.4rem; color:rgba(20,14,8,0.10);
  text-shadow:0 1px 0 rgba(255,255,255,0.06);
  transform:rotate(-6deg); transition:color .5s var(--settle), text-shadow .5s var(--settle);
}
.primstav-glyph.lit{
  color:rgba(20,14,8,0.22);
  text-shadow:1px 2px 0 rgba(255,255,255,0.10), 0 0 0 rgba(0,0,0,0);
}

/* ---- pencil construction lines (the drawn Z) ---- */
.construction{
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:2;
}
.pencil-rule{
  fill:none;
  stroke:#7c6a4c;
  stroke-width:0.7;
  stroke-linecap:round;
  stroke-dasharray:1800;
  stroke-dashoffset:1800;
  opacity:0;
  filter:url(#none);
  transition:stroke-dashoffset 1400ms var(--settle), opacity 600ms ease;
}
.pencil-rule.drawn{ stroke-dashoffset:0; opacity:0.7; }

/* ---- jeolgi left rail ---- */
.jeolgi-rail{
  position:fixed; left:0; top:0; bottom:0; width:46px; z-index:6;
  background:linear-gradient(90deg, rgba(20,14,8,0.30), rgba(20,14,8,0.04));
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.jeolgi-track{ display:flex; flex-direction:column; gap:0.55rem; }
.jeolgi-track span{
  font-family:var(--display); font-weight:700; font-size:0.82rem;
  color:rgba(36,28,20,0.55); writing-mode:vertical-rl;
  text-align:center; letter-spacing:0.1em;
  transition:color .4s var(--settle), transform .4s var(--settle);
}
.jeolgi-track span.current{ color:var(--kiln); transform:scale(1.18); }

/* ---- navigation latch + drawer ---- */
.nav-latch{
  position:fixed; top:18px; left:60px; z-index:30;
  width:92px; height:64px; border:none; background:transparent; cursor:pointer;
  filter:drop-shadow(2px 4px 5px rgba(20,14,8,0.45));
  transition:transform .25s var(--settle);
}
.nav-latch:hover{ transform:translateY(-1px) rotate(-1deg); }
.latch-svg{ width:100%; height:100%; }
.latch-ribbon{
  position:absolute; left:50%; bottom:-22px; width:10px; height:34px;
  background:#7a2e1c; transform:translateX(-50%) rotate(8deg);
  clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
  box-shadow:inset 0 0 4px rgba(0,0,0,0.4);
}
.nav-drawer{
  position:fixed; top:0; left:0; z-index:29;
  width:300px; height:100vh;
  background:
    linear-gradient(135deg, #234a4f, var(--teal) 40%, #1c3d41);
  box-shadow:18px 0 40px rgba(20,14,8,0.5);
  transform:translateX(-104%);
  transition:transform .5s var(--settle);
  padding:96px 28px 28px;
  border-right:6px solid var(--walnut);
}
.nav-drawer.open{ transform:translateX(0); }
.drawer-twine{
  position:absolute; top:78px; left:0; right:0; height:3px;
  background:repeating-linear-gradient(90deg,#cbb98a 0 6px,#a08f64 6px 10px);
  opacity:0.7;
}
.drawer-title{
  font-family:var(--display); font-weight:500; font-size:1.5rem;
  color:var(--parchment); margin-bottom:1.4rem; letter-spacing:-0.01em;
}
.drawer-cards{ list-style:none; display:flex; flex-direction:column; gap:0.85rem; }
.drawer-cards li a{
  display:block; padding:0.85rem 1rem;
  background:var(--parchment);
  color:var(--walnut);
  font-family:var(--hand); font-size:1.4rem; line-height:1.1;
  text-decoration:none;
  border-radius:2px 14px 2px 14px;
  box-shadow:2px 3px 0 rgba(20,14,8,0.35);
  transform:rotate(calc(var(--r,0) * 1deg));
  transition:transform .2s var(--settle), box-shadow .2s var(--settle);
  border-left:3px solid var(--kiln);
}
.drawer-cards li:nth-child(odd) a{ --r:-1.4; }
.drawer-cards li:nth-child(even) a{ --r:1.2; }
.drawer-cards li a:hover{ transform:rotate(0deg) translateX(4px); box-shadow:4px 5px 0 rgba(20,14,8,0.4); }
.drawer-oxblood{
  position:absolute; right:-2px; top:34%; width:14px; height:160px;
  background:linear-gradient(180deg,#8a3320,#5e1f12);
  clip-path:polygon(0 0,100% 0,100% 90%,50% 100%,0 90%);
  box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
.drawer-scrim{
  position:fixed; inset:0; z-index:28; background:rgba(20,14,8,0.0);
  pointer-events:none; transition:background .4s ease;
}
.drawer-scrim.show{ background:rgba(20,14,8,0.45); pointer-events:auto; }

/* ============================================================
   STATIONS — the Z skeleton
   ============================================================ */
main{ position:relative; z-index:5; }
.station{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:7vh 6vw 7vh 7vw;
  overflow:hidden;
}
.station-numeral{
  position:absolute; top:4vh; font-family:var(--display); font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:1.4rem; color:rgba(36,28,20,0.55);
  letter-spacing:0.04em;
}
.station-inner{ width:min(1080px,100%); position:relative; }
.station-inner.left{ margin-right:auto; }
.station-inner.right{ margin-left:auto; text-align:right; }
.station-inner.right .pencil-note{ text-align:right; }

/* reveal-on-scroll utility */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--settle), transform .7s var(--settle); }
.reveal.in{ opacity:1; transform:none; }

/* pencil annotations */
.pencil-note{
  display:inline-block;
  font-family:var(--hand); font-size:1.5rem; color:#56657a; opacity:0.72;
  margin-top:1rem;
}
.pencil-arrow{ font-family:var(--hand); color:#56657a; opacity:0.72; font-size:1.8rem; }

/* ---------- §I THE LATCH ---------- */
.station-latch{ background:transparent; align-items:center; }
.big-latch{ position:relative; width:min(420px,72vw); margin-bottom:2.4rem; }
.big-latch-svg{ width:100%; filter:drop-shadow(4px 8px 12px rgba(20,14,8,0.4)); }
.leather-burn{
  font-family:var(--display); font-weight:400; font-size:18px;
  fill:rgba(208,74,47,0.42); letter-spacing:0.18em;
  paint-order:stroke; stroke:rgba(0,0,0,0.18); stroke-width:0.4px;
}
.clasp-arm{ transform-origin:160px 104px; transition:transform .9s var(--settle); }
.big-latch.open .clasp-arm{ transform:rotate(-148deg) translateY(-6px); }
.note-a{ position:absolute; top:-2.2rem; left:55%; transform:rotate(-3deg); }
.note-a-arrow{ position:absolute; top:0.4rem; left:52%; transform:rotate(18deg); }
.big-latch.open .note-a, .big-latch.open .note-a-arrow{ opacity:0; transition:opacity .4s ease; }

.latch-reveal{
  max-width:560px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height 1s var(--settle), opacity .8s ease .2s;
}
.latch-reveal.open{ max-height:640px; opacity:1; }
.studio-mark{
  font-family:var(--display); font-weight:500; font-size:clamp(3.4rem,9vw,5.6rem);
  color:var(--teal); line-height:1.05; letter-spacing:-0.01em;
  font-feature-settings:'ss01' on;
}
.hairline-rule{ display:block; width:200px; height:1px; background:var(--walnut); opacity:0.5; margin:1rem 0 1.4rem; }
.dedication{ color:var(--walnut); max-width:48ch; }

/* ---------- §II THE LOUPE ---------- */
.station-loupe{ background:linear-gradient(160deg, rgba(240,230,210,0.05), rgba(20,14,8,0.06)); }
.loupe-stage{ position:relative; display:inline-block; width:min(620px,86vw); }
.starchart{
  position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(20,14,8,0.02) 0 26px, transparent 26px 27px),
    linear-gradient(135deg, #f4ead2, var(--parchment) 60%, #e6d8b8);
  border:1px solid #b5a47c;
  border-radius:3px;
  padding:1.8rem 1.6rem 2.6rem;
  box-shadow:var(--double-shadow);
  text-align:left;
  filter:contrast(1) saturate(1);
  transition:filter .3s var(--settle);
}
.station-loupe .starchart{ filter:contrast(0.94) saturate(0.92) blur(0.5px); }
.starchart-svg{ width:100%; display:block; opacity:0.85; }
.chart-caption{
  font-family:var(--body); font-weight:400; font-size:0.78rem; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--walnut); opacity:0.7; margin-top:0.8rem;
}
.loupe-text-layer{ margin-top:1rem; display:flex; flex-direction:column; gap:0.2rem; }
.loupe-phrase{
  font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,3vw,2rem);
  color:var(--walnut); opacity:0.20; line-height:1.15; transition:opacity .3s ease, color .3s ease;
}
.loupe-phrase:nth-child(even){ color:var(--kiln); }
.loupe-phrase.focused{ opacity:0.95; }

/* zoom layer inside the lens */
.starchart--zoom{
  box-shadow:none; border:none; padding:1.8rem 1.6rem 2.6rem;
  background:
    repeating-linear-gradient(0deg, rgba(20,14,8,0.02) 0 26px, transparent 26px 27px),
    linear-gradient(135deg, #f4ead2, var(--parchment) 60%, #e6d8b8);
  filter:contrast(1.08) saturate(1.05);
}
.starchart--zoom .loupe-phrase{ opacity:0.95; }

/* the loupe object */
.loupe{
  position:absolute; top:30%; left:55%;
  width:230px; height:320px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:8;
  filter:drop-shadow(8px 14px 16px rgba(20,14,8,0.38));
  will-change:transform;
}
.loupe-glass{
  position:absolute; top:0; left:0; width:200px; height:200px;
  border-radius:50%; overflow:hidden;
  box-shadow:inset 0 0 24px rgba(31,42,58,0.25), inset 8px 8px 18px rgba(255,255,255,0.35);
}
.loupe-content{
  position:absolute; width:620px; max-width:none;
  transform-origin:0 0;
  transform:scale(1.04);
}
.loupe-frame-svg{ position:absolute; top:-30px; left:-15px; width:260px; height:360px; }
.loupe-glass::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,0.5), rgba(255,255,255,0) 45%);
  pointer-events:none;
}

/* lens flare rig */
.flare-rig{ position:absolute; inset:-10%; pointer-events:none; mix-blend-mode:screen; z-index:7; }
.ghost{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(200,146,52,0.55), rgba(200,146,52,0) 70%);
}
.ghost.g1{ width:120px; height:120px; left:8%; top:18%; animation:drift1 26s var(--settle) infinite alternate; }
.ghost.g2{ width:74px;  height:74px;  left:24%; top:34%; animation:drift2 33s var(--settle) infinite alternate; }
.ghost.g3{ width:48px;  height:48px;  left:42%; top:50%; animation:drift1 41s var(--settle) infinite alternate; }
.ghost.g4{ width:32px;  height:32px;  left:58%; top:62%; animation:drift2 19s var(--settle) infinite alternate; }
.ghost.g5{ width:20px;  height:20px;  left:72%; top:74%; animation:drift1 46s var(--settle) infinite alternate; }
.ghost.streak{
  width:340px; height:6px; left:6%; top:30%; border-radius:3px;
  background:linear-gradient(90deg, rgba(212,169,83,0) 0%, rgba(212,169,83,0.45) 50%, rgba(212,169,83,0) 100%);
  transform:rotate(38deg); animation:drift2 30s var(--settle) infinite alternate;
}
@keyframes drift1{ from{ transform:translate(0,0) scale(1); opacity:0.5;} to{ transform:translate(28px,-22px) scale(1.12); opacity:0.85;} }
@keyframes drift2{ from{ transform:translate(0,0) scale(1); opacity:0.4;} to{ transform:translate(-24px,18px) scale(0.9); opacity:0.7;} }

/* ---------- §III THE ALMANAC ---------- */
.station-almanac{ background:transparent; }
.almanac{
  position:relative;
  background:
    radial-gradient(80% 60% at 80% 12%, rgba(200,146,52,0.08), transparent 60%),
    repeating-linear-gradient(91deg, rgba(20,14,8,0.015) 0 40px, transparent 40px 41px),
    linear-gradient(135deg, #f6ecd4, var(--parchment) 55%, #e4d6b6);
  border:1px solid #b5a47c;
  border-radius:4px;
  padding:2.4rem 2.4rem 2.8rem;
  box-shadow:var(--double-shadow);
  text-align:left;
}
.almanac-fold{
  position:absolute; left:25%; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(20,14,8,0.18), rgba(20,14,8,0.04), rgba(20,14,8,0.18));
  box-shadow:1px 0 3px rgba(20,14,8,0.10);
}
.thumb-print{
  position:absolute; right:2.6rem; top:1.8rem; width:54px; height:64px;
  background:radial-gradient(60% 80% at 40% 30%, rgba(20,14,8,0.10), transparent 70%);
  border-radius:50% 50% 48% 52%/60% 60% 40% 40%;
  filter:blur(0.5px);
}
.foxing{ position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(200,146,52,0.18), transparent 70%); }
.foxing.fx1{ width:40px; height:40px; left:14%; top:62%; }
.foxing.fx2{ width:26px; height:26px; left:58%; top:30%; }
.foxing.fx3{ width:34px; height:34px; left:82%; top:78%; }
.almanac-head{ margin-bottom:1.8rem; }
.cartouche{ display:inline-block; color:var(--kiln); font-size:1.3rem; margin-right:0.5rem; }
.almanac-head h2{
  font-family:var(--display); font-weight:500; font-size:clamp(2.4rem,5vw,3.6rem);
  color:var(--teal); display:inline; letter-spacing:-0.01em; font-feature-settings:'ss01' on;
}
.almanac-sub{ font-family:var(--body); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; opacity:0.7; margin-top:0.6rem; }
.almanac-cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.acol h3{
  font-family:var(--body); font-weight:500; font-size:0.95rem;
  color:var(--kiln); margin-bottom:0.8rem; padding-bottom:0.3rem;
  border-bottom:1.5px solid rgba(176,74,47,0.4);
}
.zij-head{ font-family:var(--body); }
.zij-table{ width:100%; border-collapse:collapse; font-size:0.82rem; }
.zij-table td, .zij-table th{ padding:0.18rem 0.25rem; text-align:left; vertical-align:top; }
.zij-table th{ color:var(--teal); font-weight:500; border-bottom:1px solid rgba(44,93,99,0.4); }
.zij-table .gl{ font-family:var(--display); font-weight:700; color:var(--kiln); width:1.6em; }
.zij-table .dt{ font-variant-numeric:tabular-nums lining-nums; color:rgba(36,28,20,0.92); white-space:nowrap; }
.zij-table--ruled td, .zij-table--ruled th{ border-right:1.5px solid rgba(176,74,47,0.5); }
.zij-table--ruled td:last-child, .zij-table--ruled th:last-child{ border-right:none; }
.zij-table--ruled td:last-child, .zij-table--ruled th:last-child{ text-align:right; font-variant-numeric:tabular-nums lining-nums; }
.zij-table tr.now td{ background:rgba(176,74,47,0.12); }
.principles{ list-style:none; counter-reset:p; display:flex; flex-direction:column; gap:0.5rem; font-size:0.92rem; }
.principles li{ counter-increment:p; position:relative; padding-left:1.5rem; }
.principles li::before{
  content:counter(p,upper-roman); position:absolute; left:0; top:0;
  font-family:var(--display); font-weight:700; font-size:0.75rem; color:var(--teal);
}
.acol-margin{ position:relative; }
.caveat-note{
  font-family:var(--hand); font-size:1.25rem; line-height:1.1;
  color:#56657a; opacity:0.78; transform:rotate(var(--rot));
  margin-bottom:0.6rem;
}
.caveat-strike{ text-decoration:line-through; text-decoration-color:var(--kiln); opacity:0.55; }

/* ---------- §IV THE COMPASS ROSE ---------- */
.station-compass{ background:linear-gradient(200deg, rgba(31,42,58,0.10), rgba(20,14,8,0.05)); }
.compass-stage{ position:relative; display:inline-block; }
.compass-tilt{ perspective:900px; }
.compass-rose{
  position:relative;
  width:min(60vmin,520px); height:min(60vmin,520px);
  margin:0 auto;
  transform-style:preserve-3d;
  transition:transform .25s var(--settle);
  filter:drop-shadow(10px 18px 18px rgba(20,14,8,0.4));
}
.rose-svg{ width:100%; height:100%; animation:roseSpin 240s linear infinite; }
@keyframes roseSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.rose-eng{ font-family:var(--display); font-weight:700; font-size:11px; fill:rgba(36,28,20,0.7); font-variant-numeric:tabular-nums lining-nums; }
.rose-label{
  position:absolute; font-family:var(--body); font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--parchment);
  background:rgba(36,28,20,0.55); padding:0.2rem 0.45rem; border-radius:2px;
  white-space:nowrap; pointer-events:none;
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
.rl-n{ top:-1.6rem; left:50%; transform:translateX(-50%); }
.rl-s{ bottom:-1.6rem; left:50%; transform:translateX(-50%); }
.rl-e{ right:-1rem; top:50%; transform:translate(100%,-50%); }
.rl-w{ left:-1rem; top:50%; transform:translate(-100%,-50%); }
.rl-ne{ top:8%; right:8%; transform:translate(60%,-60%); }
.rl-nw{ top:8%; left:8%; transform:translate(-60%,-60%); }
.rl-se{ bottom:8%; right:8%; transform:translate(60%,60%); }
.rl-sw{ bottom:8%; left:8%; transform:translate(-60%,60%); }
.compass-text{ margin-top:3rem; max-width:46ch; margin-left:auto; }
.compass-text h2{
  font-family:var(--display); font-weight:500; font-size:clamp(2rem,4.4vw,3rem);
  color:var(--teal); letter-spacing:-0.01em; font-feature-settings:'ss01' on;
}
.compass-text p{ margin-top:0.6rem; color:var(--walnut); }
.compass-text em{ font-style:italic; color:var(--kiln); }

/* ---------- §V THE RELIQUARY ---------- */
.station-reliquary{ background:transparent; }
.reliquary-stage{ position:relative; width:min(960px,100%); }
.reliquary-head{
  font-family:var(--display); font-weight:500; font-size:clamp(2.2rem,4.6vw,3.2rem);
  color:var(--teal); letter-spacing:-0.01em; font-feature-settings:'ss01' on;
}
.reliquary-sub{ font-family:var(--body); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; opacity:0.7; margin:0.5rem 0 1.8rem; }
.velvet-tray{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
  padding:1.6rem;
  background:
    radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,0.06), transparent 50%),
    linear-gradient(135deg, #2f6268, var(--teal) 50%, #1c3d41);
  border:8px solid;
  border-image:linear-gradient(135deg,#7c5d20,#4a3814) 1;
  border-radius:6px;
  box-shadow:inset 0 0 40px rgba(20,14,8,0.5), var(--double-shadow);
}
.well{
  position:relative;
  padding:1.4rem 1rem;
  border-radius:4px;
  background:radial-gradient(120% 100% at 35% 25%, rgba(20,14,8,0.05), rgba(20,14,8,0.32) 80%);
  box-shadow:inset 0 4px 10px rgba(20,14,8,0.55), inset 0 -2px 6px rgba(255,255,255,0.05);
  display:flex; flex-direction:column; align-items:center; gap:0.7rem;
  cursor:pointer;
}
.instrument{
  width:100%; max-width:150px;
  transition:transform .45s var(--settle), filter .45s var(--settle);
  filter:drop-shadow(3px 5px 5px rgba(20,14,8,0.45));
}
.instrument svg{ width:100%; display:block; }
.inst-name{
  font-family:var(--body); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--parchment); opacity:0.85; text-align:center;
}
.well:hover .instrument, .well.lifted .instrument{ transform:translateY(-8px); filter:drop-shadow(5px 12px 12px rgba(20,14,8,0.5)); }
.well.lifted{ box-shadow:inset 0 6px 16px rgba(20,14,8,0.65); }

.side-card{
  position:absolute; right:-8px; top:0; width:min(280px,80vw);
  background:var(--parchment);
  border:1px solid #b5a47c; border-left:4px solid var(--kiln);
  border-radius:2px 12px 2px 12px;
  padding:1.2rem 1.3rem;
  box-shadow:var(--double-shadow);
  opacity:0; transform:translateX(20px) scale(0.96);
  transition:opacity .4s var(--settle), transform .4s var(--settle);
  pointer-events:none;
}
.side-card.show{ opacity:1; transform:none; pointer-events:auto; }
.side-connector{
  position:absolute; left:-60px; top:50%; width:60px; height:2px;
  background:repeating-linear-gradient(90deg,#7c6a4c 0 5px,transparent 5px 9px);
  opacity:0; transition:opacity .3s ease;
}
.side-card.show .side-connector{ opacity:0.7; }
.side-card-title{ font-family:var(--display); font-weight:500; font-size:1.3rem; color:var(--teal); margin-bottom:0.4rem; }
.side-card-body{ font-size:0.92rem; color:var(--walnut); }
.side-card-cycle{
  margin-top:0.8rem; background:transparent; border:none; cursor:pointer;
  font-family:var(--hand); font-size:1.2rem; color:var(--kiln);
}
.side-card-cycle:hover{ color:var(--teal); }

/* ---------- COLOPHON ---------- */
.station-colophon{
  min-height:60vh; background:linear-gradient(180deg, rgba(20,14,8,0.05), rgba(20,14,8,0.18));
  align-items:center; justify-content:center; text-align:center;
}
.colophon-inner{ max-width:60ch; }
.colophon-glyph{ font-size:2rem; color:var(--brass); display:block; margin-bottom:1rem; }
.colophon-line{ font-family:var(--display); font-weight:400; font-size:1.15rem; color:var(--parchment); margin-bottom:0.5rem; }
.colophon-line.dim{ font-family:var(--body); font-size:0.92rem; color:rgba(240,230,210,0.65); }
.relatch{
  margin-top:1.6rem; background:var(--brass); border:1px solid #7c5d20;
  color:var(--walnut); font-family:var(--body); font-weight:500; font-size:0.88rem;
  letter-spacing:0.04em; padding:0.6rem 1.2rem; border-radius:3px; cursor:pointer;
  box-shadow:0 3px 0 #7c5d20, var(--ambient-shadow);
  transition:transform .15s var(--settle), box-shadow .15s var(--settle);
}
.relatch:hover{ transform:translateY(2px); box-shadow:0 1px 0 #7c5d20, var(--ambient-shadow); }

/* ============================================================
   RESPONSIVE — folio of plates on mobile
   ============================================================ */
@media (max-width:880px){
  .station-inner.right{ text-align:left; }
  .station-inner.right .pencil-note{ text-align:left; }
  .almanac-cols{ grid-template-columns:repeat(2,1fr); }
  .almanac-fold{ display:none; }
  .velvet-tray{ grid-template-columns:repeat(2,1fr); }
  .side-card{ position:relative; right:auto; top:auto; width:100%; margin-top:1.4rem; }
  .side-connector{ display:none; }
  .compass-text{ margin-left:0; }
  .nav-latch{ left:54px; }
}
@media (max-width:560px){
  body{ font-size:1rem; }
  .station{ padding:6vh 5vw 6vh 6vw; }
  .almanac-cols{ grid-template-columns:1fr; }
  .velvet-tray{ grid-template-columns:1fr; }
  .jeolgi-rail{ width:30px; }
  .primstav-glyph{ font-size:2.2rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  .pencil-rule{ stroke-dashoffset:0; opacity:0.7; }
  .latch-reveal{ max-height:640px; opacity:1; }
  .rose-svg{ animation:none; }
}