/* ============================================================================
   THE HALL OF AGES — the skin. Same voice as the flat map: obsidian, silver,
   gold. A reliquary, not a console. Fonts are vendored — the hall works from
   file:// with no network at all.
   ============================================================================ */
@import url('fonts/fonts.css');

:root{
  --obsidian:   #0b0d12;
  --obsidian-2: #06070b;
  --gold:       #f0c45a;
  --gold-bright:#ffe49a;
  --gold-deep:  #b8893a;
  --silver:     #cdd2dc;
  --silver-dim: #828b9c;
  --parchment:  #e9dcc0;
  --hair:       rgba(240,196,90,0.22);
  --panel-bg:   rgba(10,12,17,0.88);
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--obsidian-2);
  font-family:'Spectral', Georgia, serif; color:var(--silver);
  -webkit-font-smoothing:antialiased; }

#app{ position:fixed; inset:0; }
canvas{ display:block; touch-action:none; }

/* ---------- the passage veil (hall <-> rotunda) ---------- */
#passage-veil{ position:fixed; inset:0; z-index:24; background:#000;
  opacity:0; pointer-events:none; transition:opacity .6s ease; }
#passage-veil.dark{ opacity:1; pointer-events:auto; }


/* ---------- the walk pad + rise bar (touch devices, every in-hall stage) ----------
   Joe: phones have no arrows — the directional device lives bottom right. */
#walk-pad, #rise-bar{ position:fixed; z-index:8; display:none;
  background:rgba(12,14,20,0.55); border:1px solid rgba(240,196,90,0.25);
  touch-action:none; align-items:center; justify-content:center; }
body.touch[data-stage="room"] #walk-pad, body.touch[data-stage="holo"] #walk-pad,
body.touch[data-stage="room"] #rise-bar, body.touch[data-stage="holo"] #rise-bar{ display:flex; }
#walk-pad{ right:16px; bottom:18px; width:96px; height:96px; border-radius:50%; }
#rise-bar{ right:122px; bottom:18px; width:44px; height:96px; border-radius:22px; }
#walk-nub, #rise-nub{ width:34px; height:34px; border-radius:50%;
  background:rgba(240,196,90,0.18); border:1px solid rgba(240,196,90,0.5);
  pointer-events:none; }

/* ---------- the gate (threshold overlay) ---------- */
#gate{
  position:fixed; inset:0; z-index:30; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(240,196,90,0.09), rgba(6,7,11,0) 46%),
    radial-gradient(circle at 50% 50%, #0b0d12 0%, #06070b 72%);
  transition:opacity 1.4s ease;
}
#gate.hidden{ opacity:0; pointer-events:none; }
#gate .kicker{ font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:1.7em; }
#gate h1{
  font-family:'Marcellus', serif; font-weight:400; margin:0;
  font-size:clamp(36px, 6vw, 62px); letter-spacing:.05em; line-height:1.18;
  padding-bottom:.06em;   /* gradient-clipped text crops descenders without it (the g in Ages) */
  background:linear-gradient(180deg,#fff1c8,#e7b24a 68%,#a9772f);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
#gate .sub{ margin:.9em 0 0; font-style:italic; font-weight:300;
  font-size:clamp(14px,2.2vw,18px); color:var(--silver-dim); letter-spacing:.03em; }
#gate-enter{
  margin-top:3.1em; font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--silver-dim); border:1px solid rgba(240,196,90,0.22);
  border-radius:2px; padding:13px 30px; background:rgba(240,196,90,0.03);
}
#gate-enter.ready{
  color:var(--gold-bright); border-color:rgba(240,196,90,0.4);
  animation:breathe 3.4s ease-in-out infinite;
}
/* the boot could not lay the mirror (WebGL blocked is the usual cause): the
   pill stops being a button and becomes a plain-spoken, readable rescue note */
#gate-enter.gate-fail{
  text-transform:none; letter-spacing:.015em; font-size:13.5px; line-height:1.65;
  max-width:33em; text-align:center; color:rgba(205,210,220,0.9);
  border-color:rgba(240,196,90,0.26); background:rgba(240,196,90,0.04);
  animation:none; cursor:default;
}
#gate-enter.gate-fail b{ color:var(--gold-bright); font-weight:400; }
#gate-enter.gate-fail a{ color:var(--gold-bright); text-decoration:underline;
  text-underline-offset:2px; cursor:pointer; }
@keyframes breathe{
  0%,100%{ opacity:.6; box-shadow:0 0 0 rgba(240,196,90,0); }
  50%    { opacity:1;  box-shadow:0 0 26px rgba(240,196,90,0.16); }
}
#gate .controls-note{ margin-top:2.3em; font-size:11.5px; letter-spacing:.05em;
  color:rgba(130,139,156,0.6); line-height:1.8; }
#gate .controls-note.touch{ display:none; }
#gate .controls-note b{ color:rgba(205,210,220,0.75); font-weight:400; }
#gate-skip{
  margin-top:1.6em; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(130,139,156,0.55); cursor:pointer;
  border-bottom:1px solid rgba(130,139,156,0.25); padding-bottom:2px;
}
#gate-skip:hover{ color:var(--gold-bright); border-color:rgba(240,196,90,0.4); }

/* the gate over the living world (the approach's title): the opaque card
   thins to a vignette so the temple shows through, and pointer events fall
   through to the orbit rig — only the two buttons still catch the hand */
#gate.over-world{
  pointer-events:none; cursor:default;
  background:
    radial-gradient(circle at 50% 42%, rgba(240,196,90,0.05), rgba(6,7,11,0) 46%),
    linear-gradient(180deg, rgba(6,7,11,0.68) 0%, rgba(6,7,11,0.24) 30%,
                            rgba(6,7,11,0) 52%, rgba(6,7,11,0.26) 80%, rgba(6,7,11,0.62) 100%);
}
#gate.over-world #gate-enter,
#gate.over-world #gate-skip{ pointer-events:auto; cursor:pointer; }
#gate.over-world #gate-enter{ background:rgba(6,7,11,0.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
#gate.over-world h1{ filter:drop-shadow(0 2px 18px rgba(0,0,0,0.6)); }
#gate.over-world .kicker,
#gate.over-world .sub,
#gate.over-world .controls-note{ text-shadow:0 1px 12px rgba(0,0,0,0.75); }

/* ---------- the outside vantage (between Begin and Enter) ---------- */
#enter-live{ position:fixed; bottom:9vh; left:50%; transform:translateX(-50%);
  z-index:20; display:flex; flex-direction:column; align-items:center; gap:14px; }
#enter-live-btn{
  font-family:'Spectral',serif; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-bright); cursor:pointer;
  background:rgba(6,7,11,0.55); border:1px solid rgba(240,196,90,0.4);
  border-radius:2px; padding:13px 34px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:breathe 3.4s ease-in-out infinite;
}
#enter-live-skip{
  font-family:'Spectral',serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(205,210,220,0.75); cursor:pointer;
  background:none; border:none; border-bottom:1px solid rgba(130,139,156,0.35);
  padding:0 0 2px; text-shadow:0 1px 10px rgba(0,0,0,0.8);
}
#enter-live-skip:hover{ color:var(--gold-bright); border-color:rgba(240,196,90,0.4); }

/* ---------- the approach (fly-in) ---------- */
#skip-intro{
  position:fixed; bottom:26px; right:30px; z-index:20; cursor:pointer;
  font-family:'Spectral',serif; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(205,210,220,0.7);
  background:rgba(12,14,20,0.55); border:1px solid rgba(240,196,90,0.2);
  border-radius:2px; padding:9px 16px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
#skip-intro span{ color:rgba(130,139,156,0.7); margin-left:.7em; font-size:10px; }
#skip-intro:hover{ color:var(--gold-bright); border-color:rgba(240,196,90,0.45); }

/* ---------- header ---------- */
#hall-header{ position:fixed; top:26px; left:32px; z-index:6; pointer-events:none;
  text-shadow:0 2px 20px rgba(0,0,0,0.75); }
#hall-header h1{ font-family:'Marcellus', serif; font-weight:400; margin:0;
  font-size:26px; letter-spacing:.06em; line-height:1.2; padding-bottom:.06em;
  background:linear-gradient(180deg,#fff1c8,#e7b24a 70%,#a9772f);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#hall-header .sub{ margin:.4em 0 0; font-style:italic; font-weight:300;
  font-size:13.5px; letter-spacing:.04em; color:var(--silver-dim); }
/* the name flips with the stage: the HALL states itself in the room; the
   MIRROR takes the head once a simulation runs */
#hall-header .hh-holo{ display:none; }
body[data-stage="holo"] #hall-header .hh-room{ display:none; }
body[data-stage="holo"] #hall-header .hh-holo{ display:block; }

/* ---------- nav (stations) + year ----------
   The chrome reveals itself in stages (Joe's staging): nothing at the gate;
   the two relic stations once inside; the seeker, the year and the mend only
   once a simulation runs — and the mend only at the instrument. */
#nav{ position:fixed; top:26px; right:30px; z-index:7; text-align:right; display:none; }
body[data-stage="room"] #nav, body[data-stage="holo"] #nav{ display:block; }
#btn-mend{ display:none; }
body[data-stage="holo"][data-station="instrument"] #btn-mend{ display:inline-block; }
#search{ display:none; }
body[data-stage="holo"] #search{ display:block; }
#nav .stations{ display:flex; gap:6px; justify-content:flex-end; }
#nav button{
  font-family:'Spectral',serif; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--silver-dim); background:rgba(12,14,20,0.66);
  border:1px solid rgba(240,196,90,0.16); border-radius:2px; padding:7px 12px;
  cursor:pointer; transition:.2s;
}
#nav button:hover{ color:var(--gold); border-color:rgba(240,196,90,0.4); }
#nav button.on{ color:var(--gold-bright); border-color:rgba(240,196,90,0.55);
  background:rgba(240,196,90,0.08); }
#nav #btn-mend{ margin-top:6px; }

/* ---------- the legend, folded into the gate (Joe: keep the hall clear) ---------- */
#gate-legend{ margin-top:2.6em; max-width:620px; }
#gate-legend .mandate{ margin:0 0 10px; line-height:1.5; color:var(--silver-dim);
  font-weight:300; font-size:12px; letter-spacing:.04em; }
#gate-legend .mandate b{ color:var(--gold); font-weight:400; }
#legend-tiers{ display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; }
.tier-row{ display:flex; align-items:center; gap:7px; }
.tier-desc{ display:none; }              /* the chip name carries it on the splash */
.tier-chip{ display:inline-block; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c); border:1px solid var(--c); border-radius:10px; padding:1px 8px;
  vertical-align:middle; opacity:.92; white-space:nowrap; }
.tier-row[title]{ cursor:help; }

/* ---------- the seeker ---------- */
#search{ margin-top:8px; position:relative; }
#search-input{ width:228px; max-width:56vw; padding:7px 12px;
  font-family:'Spectral',serif; font-size:13px; color:var(--silver);
  background:rgba(12,14,20,0.72); border:1px solid rgba(240,196,90,0.25);
  border-radius:16px; outline:none; transition:.25s; text-align:right; }
#search-input::placeholder{ color:rgba(130,139,156,0.55); font-style:italic; }
#search-input:focus{ border-color:rgba(240,196,90,0.6); color:var(--gold-bright);
  box-shadow:0 0 18px rgba(240,196,90,0.14); }
#search-results{ position:absolute; right:0; top:calc(100% + 6px); width:300px;
  max-height:52vh; overflow:auto; display:none; text-align:left;
  background:var(--panel-bg); border:1px solid rgba(240,196,90,0.25);
  border-radius:8px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
#search-results.open{ display:block; }
.search-hit{ padding:8px 14px; cursor:pointer; display:flex; justify-content:space-between;
  align-items:baseline; gap:12px; border-bottom:1px solid rgba(240,196,90,0.08); }
.search-hit:last-child{ border-bottom:none; }
.search-hit b{ font-family:'Marcellus',serif; font-weight:400; font-size:14.5px;
  color:var(--silver); }
.search-hit span{ font-size:11px; font-style:italic; color:var(--silver-dim); white-space:nowrap; }
.search-hit:hover, .search-hit.hot{ background:rgba(240,196,90,0.08); }
.search-hit:hover b, .search-hit.hot b{ color:var(--gold-bright); }

/* ---------- the trail: the path the seeker has walked ----------
   Sits under the field, matched to its width and wrapping so a long walk
   folds into rows. A crumb flies you back and lights it; the path stays a
   persistent ledger until the × at its end clears it. */
#search-trail{ display:none; width:228px; max-width:56vw; margin:9px 0 0 auto;
  text-align:left; line-height:1.85; max-height:26vh; overflow-y:auto; }
#search-trail.on{ display:block; }
#search-trail::-webkit-scrollbar{ width:5px; }
#search-trail::-webkit-scrollbar-thumb{ background:rgba(240,196,90,0.22); border-radius:3px; }
.trail-crumb{ cursor:pointer; color:var(--silver-dim); font-size:12px;
  font-family:'Spectral',serif; transition:color .2s; }
.trail-crumb:hover{ color:var(--gold); }
.trail-sep{ color:rgba(240,196,90,0.30); margin:0 5px; font-size:10px; }
.trail-current{ color:var(--gold-bright); font-size:12px; font-family:'Marcellus',serif;
  cursor:default; }
/* where you left off: the restored tail, one tap back until you move again */
.trail-current.resume{ cursor:pointer; transition:color .2s; }
.trail-current.resume::before{ content:'\21A9'; color:var(--gold); margin-right:.35em; }
.trail-current.resume:hover{ color:#fff; }
/* the clear glyph: the one manual way to empty a persistent trail.
   Scoped past #nav button (border/bg/pad/uppercase) so it reads as a bare ×. */
#search-trail .trail-clear{ margin-left:10px; padding:0 3px; border:0; background:none;
  border-radius:0; text-transform:none; letter-spacing:0; color:var(--silver-dim);
  font-family:'Marcellus',serif; font-size:14px; line-height:1; opacity:.5;
  cursor:pointer; transition:color .2s,opacity .2s; vertical-align:baseline; }
#search-trail .trail-clear:hover{ color:var(--gold); opacity:1; border-color:transparent; }

/* ---------- the roll of systems: the left rail, folded until wanted ----------
   A shaded, blurred pane so the names read over any color in the space; the
   whole roster in one scrollable column, a shard's hue on every dot. */
#systems{ display:none; position:fixed; top:96px; left:32px; z-index:7;
  width:238px; max-width:60vw; overflow:hidden;
  background:var(--panel-bg); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border:1px solid var(--hair); border-radius:8px; box-shadow:0 18px 50px rgba(0,0,0,0.45); }
body[data-stage="holo"] #systems{ display:block; }
#systems > summary{ cursor:pointer; list-style:none; user-select:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 14px; font-family:'Spectral',serif; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); transition:color .2s; }
#systems > summary::-webkit-details-marker{ display:none; }
#systems > summary:hover{ color:var(--gold); }
#systems .sys-title::before{ content:'◇'; margin-right:.6em; }
#systems[open] .sys-title::before{ content:'◈'; }
#systems .sys-count{ font-size:10px; letter-spacing:.1em; font-style:italic; color:var(--silver-dim); }
/* our own display:flex on the list (ID specificity) would otherwise beat the UA
   rule that hides a closed <details>'s content — so hide it ourselves when shut */
#systems:not([open]) #systems-list{ display:none; }
#systems-list{ max-height:calc(100vh - 172px); overflow-y:auto;
  padding:5px 6px 8px; border-top:1px solid rgba(240,196,90,0.12);
  display:flex; flex-direction:column; gap:1px; }
#systems-list::-webkit-scrollbar{ width:7px; }
#systems-list::-webkit-scrollbar-thumb{ background:rgba(240,196,90,0.20); border-radius:4px; }
#systems-list::-webkit-scrollbar-track{ background:transparent; }
.sys-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; color:var(--silver-dim);
  font-family:'Spectral',serif; font-size:12.5px; line-height:1.25;
  padding:4px 8px; border-radius:4px; transition:background .15s, color .15s; }
.sys-item i{ width:8px; height:8px; border-radius:50%; flex:none; box-shadow:0 0 5px rgba(0,0,0,0.5); }
.sys-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sys-item:hover{ color:var(--silver); background:rgba(240,196,90,0.06); }
.sys-item.on{ color:var(--gold-bright); background:rgba(240,196,90,0.10); }
/* a system already read fades its name (the dot keeps its hue); the active row never dims */
.sys-item.read span{ opacity:.5; }
.sys-item.read i{ opacity:.7; }
.sys-item.on span, .sys-item.on i{ opacity:1; }

/* ---------- your favorites: the same rail language, bottom-left, born only when it holds a star ---------- */
#favorites{ display:none; position:fixed; left:32px; bottom:24px; z-index:7;
  width:238px; max-width:60vw; overflow:hidden;
  background:var(--panel-bg); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border:1px solid var(--hair); border-radius:8px; box-shadow:0 18px 50px rgba(0,0,0,0.45); }
body[data-stage="holo"] #favorites.has-stars{ display:block; }
#favorites > summary{ cursor:pointer; list-style:none; user-select:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 14px; font-family:'Spectral',serif; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); transition:color .2s; }
#favorites > summary::-webkit-details-marker{ display:none; }
#favorites > summary:hover{ color:var(--gold); }
#favorites .fav-title::before{ content:'★'; margin-right:.6em; font-size:.85em; color:var(--gold); }
#favorites .fav-count{ font-size:10px; letter-spacing:.1em; font-style:italic; color:var(--silver-dim); }
#favorites:not([open]) #favorites-list{ display:none; }
#favorites-list{ max-height:38vh; overflow-y:auto;
  padding:5px 6px 8px; border-top:1px solid rgba(240,196,90,0.12);
  display:flex; flex-direction:column; gap:1px; }
#favorites-list::-webkit-scrollbar{ width:7px; }
#favorites-list::-webkit-scrollbar-thumb{ background:rgba(240,196,90,0.20); border-radius:4px; }
#favorites-list::-webkit-scrollbar-track{ background:transparent; }
.fav-item{ display:flex; align-items:center; gap:7px; width:100%; text-align:left;
  cursor:pointer; color:var(--silver-dim);
  font-family:'Spectral',serif; font-size:12.5px; line-height:1.25;
  padding:4px 6px; border-radius:4px; transition:background .15s, color .15s; }
.fav-item:hover{ color:var(--silver); background:rgba(240,196,90,0.06); }
.fav-item .fav-star{ flex:none; font-size:11px; color:var(--gold); }
.fav-item .fav-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-item .fav-kind{ flex:none; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(130,139,156,0.6); }
.fav-item .fav-remove{ flex:none; border:none; background:none; color:rgba(130,139,156,0.5);
  cursor:pointer; font-size:14px; line-height:1; padding:0 2px; opacity:0; transition:opacity .15s, color .15s; }
.fav-item:hover .fav-remove{ opacity:1; }
.fav-item .fav-remove:hover{ color:var(--gold-bright); }

/* ---------- hint ---------- */
#hint{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:6;
  font-size:12.5px; letter-spacing:.06em; color:rgba(150,158,175,0.85); pointer-events:none;
  text-align:center; transition:opacity 1s ease; text-shadow:0 2px 12px rgba(0,0,0,0.9); }
#hint b{ color:var(--gold); font-weight:400; }

/* ---------- hover label (anchored to 3D) ---------- */
#hover-label{
  position:fixed; z-index:9; pointer-events:none; transform:translate(-50%,-130%);
  text-align:center; opacity:0; transition:opacity .22s ease; white-space:nowrap;
}
#hover-label b{ display:block; font-family:'Marcellus',serif; font-weight:400;
  font-size:16.5px; letter-spacing:.05em; color:var(--gold-bright);
  text-shadow:0 2px 16px rgba(0,0,0,0.95), 0 0 20px rgba(240,196,90,0.2); }
#hover-label i{ display:block; font-style:italic; font-weight:300; font-size:11.5px;
  letter-spacing:.1em; color:var(--silver-dim); margin-top:.3em;
  text-shadow:0 2px 10px rgba(0,0,0,0.95); }

/* ---------- ceremony line ---------- */
#ceremony-line{
  position:fixed; top:16vh; left:50%; transform:translateX(-50%); z-index:8;
  font-family:'Marcellus',serif; font-weight:400; font-size:clamp(22px,3.4vw,34px);
  letter-spacing:.08em; color:var(--gold-bright); pointer-events:none;
  opacity:0; transition:opacity 1.6s ease;
  text-shadow:0 2px 30px rgba(0,0,0,0.9), 0 0 40px rgba(240,196,90,0.18);
  white-space:nowrap;
}
#ceremony-line.on{ opacity:1; }

/* ---------- reliquary ---------- */
#reliquary{ position:fixed; top:0; right:0; z-index:12; width:400px; max-width:92vw;
  height:100vh; overflow-y:auto; padding:60px 30px 40px;
  background:var(--panel-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-left:1px solid var(--hair);
  transform:translateX(110%); transition:transform .45s cubic-bezier(.2,.7,.2,1);
  box-shadow:-30px 0 60px rgba(0,0,0,0.5); }
#reliquary.open{ transform:translateX(0); }
#reliquary::-webkit-scrollbar{ width:7px; }
#reliquary::-webkit-scrollbar-thumb{ background:rgba(240,196,90,0.2); border-radius:4px; }
#rel-close{ position:absolute; top:16px; right:20px; background:none; border:none;
  color:var(--silver-dim); font-size:26px; line-height:1; cursor:pointer; transition:.2s; }
#rel-close:hover{ color:var(--gold-bright); }
/* the bookmark: ☆ hollow until dropped, ★ gold and lit once it is */
#rel-star{ position:absolute; top:17px; left:24px; background:none; border:none;
  color:var(--silver-dim); font-size:21px; line-height:1; cursor:pointer;
  transition:color .2s, transform .15s; }
#rel-star:hover{ color:var(--gold); transform:scale(1.14); }
#rel-star.on{ color:var(--gold); text-shadow:0 0 14px rgba(240,196,90,0.55); }
#reliquary .rel-kicker{ font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.4em; }
#reliquary h2{ font-family:'Marcellus',serif; font-weight:400; font-size:26px;
  margin:0 0 .5em; color:var(--gold-bright); letter-spacing:.02em; }
#reliquary h3{ font-family:'Marcellus',serif; font-weight:400; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--silver-dim);
  margin:1.8em 0 .7em; border-bottom:1px solid rgba(240,196,90,0.12); padding-bottom:.5em; }
#reliquary p{ font-size:14.5px; line-height:1.62; color:#d4d9e2; font-weight:300; }
#reliquary .rel-gloss{ font-size:15.5px; color:#e2e6ee; }
#reliquary .rel-facet{ color:var(--gold-bright); font-style:italic; }
#reliquary .rel-prov{ font-size:13px; color:var(--silver-dim); }
#reliquary .rel-years{ font-size:13px; letter-spacing:.05em; color:var(--gold); }
#reliquary .rel-arch{ font-size:13px; color:var(--silver-dim); }
#reliquary .rel-arch b{ color:#f4d78a; font-weight:400; cursor:pointer;
  border-bottom:1px dotted rgba(244,215,138,0.35); }
#reliquary .rel-arch b:hover{ color:var(--gold-bright); }
#reliquary .rel-mini{ font-size:11px; color:var(--silver-dim); font-style:italic; }
#reliquary .rel-mini-line{ font-size:12px; color:var(--silver-dim); font-style:italic; }
#reliquary .rel-jump{ cursor:pointer; border-bottom:1px dotted rgba(205,210,220,0.3); }
#reliquary .rel-jump:hover{ color:#fff; }
/* verified source links — an anchor and a quiet access badge */
#reliquary a.rel-src{ color:var(--silver); text-decoration:none;
  border-bottom:1px dotted rgba(240,196,90,0.45); }
#reliquary a.rel-src:hover{ color:var(--gold-bright); border-bottom-color:var(--gold); }
#reliquary .rel-access{ display:inline-block; margin-left:.45em; padding:0 5px;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; vertical-align:1px;
  color:var(--gold-deep); border:1px solid rgba(240,196,90,0.3); border-radius:3px; }
.rel-edges,.rel-figs{ list-style:none; margin:0; padding:0; }
.rel-edges li{ margin:0 0 1.05em; }
.rel-figs li{ margin:0 0 .5em; font-size:13.5px; }
.rel-rel{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--silver-dim); }
.rel-edges b,.rel-figs b{ color:#e9edf4; font-weight:500; cursor:pointer;
  border-bottom:1px dotted rgba(205,210,220,0.3); }
.rel-edges b:hover,.rel-figs b:hover{ color:var(--gold-bright); border-color:var(--gold); }
.rel-note{ font-size:12.5px; line-height:1.5; color:var(--silver-dim); margin-top:.25em; font-weight:300; }
.forgery-banner{ display:inline-block; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#c4c49a; background:rgba(111,124,76,0.16);
  border:1px solid rgba(111,124,76,0.5); border-radius:2px; padding:5px 10px; margin-bottom:1em; }

/* ============================================================
   MOBILE — the hall in the hand.
   The reliquary becomes a bottom sheet; the chrome tightens;
   nothing of the register is lost, only re-set for the palm.
   ============================================================ */
@media (max-width:760px){
  #gate-legend{ display:none; }   /* small screens: title + Enter carry the splash */
  #hall-header{ top:14px; left:16px; }
  #hall-header h1{ font-size:17px; }
  #hall-header .sub{ font-size:11px; margin-top:.25em; }

  #nav{ top:12px; right:12px; left:auto; }
  #nav .stations{ flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:62vw; }
  #nav .stations button{ padding:6px 8px; font-size:9.5px; letter-spacing:.1em; }
  #nav #btn-mend{ padding:5px 8px; font-size:9.5px; }

  #systems{ top:52px; left:16px; width:198px; }
  #systems-list{ max-height:40vh; }

  #hint{ bottom:14px; font-size:11px; width:92vw; line-height:1.6; }
  #ceremony-line{ font-size:clamp(17px,5.4vw,26px); white-space:normal; width:92vw; text-align:center; }
  #hover-label b{ font-size:14px; }
  #hover-label i{ font-size:10.5px; }

  /* the reliquary rises from below instead of sliding from the side */
  #reliquary{ top:auto; bottom:0; right:0; left:0; width:100%; max-width:none;
    height:62vh; padding:44px 22px 32px;
    border-left:none; border-top:1px solid var(--hair);
    border-radius:14px 14px 0 0;
    transform:translateY(110%); box-shadow:0 -24px 60px rgba(0,0,0,0.55); }
  #reliquary.open{ transform:translateY(0); }
  #reliquary h2{ font-size:21px; }

  #gate .controls-note{ display:none; }
  #gate .controls-note.touch{ display:block; }
  #gate h1{ font-size:clamp(30px,9vw,44px); }
}