/* ALTAR ─────────────────────────────────────────────────────────────────────────────────────
   Candlelight on stone. Everything is dark except what the flames reach, so the page has one
   light source and the eye goes where it goes in the room.

   Structure: no rail, no tab bar, no bottom gauge. The altar is always present in 3D and the
   navigation MOVES THE CAMERA around it, so the pages are vantages on one object rather than
   separate screens. The nav itself is a short arc of candles, which is the ring seen edge on. */

:root {
  --void:   #050403;
  --ink:    #0A0806;
  --stone:  #221B14;
  --gold:   #C98B2E;
  --flame:  #FFB444;
  --ember:  #FFE9BE;
  --ash:    #8E7F6C;
  --bone:   #E8DCC8;
  --line:   rgba(201, 139, 46, .16);

  --display: "Cinzel", Georgia, serif;
  --body:    "Karla", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --measure: 60ch;
  --top: 92px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--void); color: var(--bone);
  font-family: var(--body); font-size: 16px; line-height: 1.65;
  overflow-x: clip; font-synthesis-weight: none;
}

/* ── the room ────────────────────────────────────────────────────────────────────────────
   🔴 A canvas is a replaced element: `inset:0` alone leaves it at its intrinsic 300x150 and the
      scene renders as a stamp in the corner. width/height must be explicit. */
#room { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
#veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120vw 100vh at 50% 62%, transparent 18%, rgba(5,4,3,.58) 60%, rgba(5,4,3,.94) 100%),
    linear-gradient(180deg, rgba(5,4,3,.92) 0%, rgba(5,4,3,.30) 16%, transparent 40%);
}
/* On the front the reading column is on the left, so the dark is too. Everywhere else the panels
   carry their own ground and the room is allowed to stay visible. */
body[data-page="home"] #veil {
  background:
    linear-gradient(95deg, rgba(5,4,3,.95) 0%, rgba(5,4,3,.86) 34%, rgba(5,4,3,.30) 58%, transparent 78%),
    radial-gradient(120vw 100vh at 62% 62%, transparent 24%, rgba(5,4,3,.45) 66%, rgba(5,4,3,.9) 100%),
    linear-gradient(180deg, rgba(5,4,3,.92) 0%, rgba(5,4,3,.28) 16%, transparent 40%);
}
/* On a phone there is no room beside the altar, so it gets a band of its own at the top and the
   dark closes under it. Type over a lit 3D object is unreadable at any contrast. */
@media (max-width: 900px) {
  body[data-page="home"] #veil, #veil {
    background:
      linear-gradient(180deg,
        rgba(5,4,3,.55) 0%, rgba(5,4,3,.12) 10%, rgba(5,4,3,.16) 26%,
        rgba(5,4,3,.80) 36%, rgba(5,4,3,.96) 46%, rgba(5,4,3,.99) 100%);
  }
  body[data-page="home"] .hall { padding-top: 34vh; }
  :root { --top: 76px; }
}
/* film grain, so the gradients above do not band on a screen this dark */
#grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── the inscription ─────────────────────────────────────────────────────────────────────*/
.mast {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18px clamp(14px, 4vw, 40px) 0;
  pointer-events: none;
}
.mast > * { pointer-events: auto; }

.sigil { position: absolute; left: clamp(14px, 4vw, 40px); top: 8px; display: flex; align-items: center; gap: 11px; text-decoration: none; padding: 9px 0; }
.sigil svg { width: 26px; height: 26px; display: block; }
.sigil b {
  font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .22em;
  color: var(--bone); text-transform: uppercase;
}

/* the nav: candles on a shallow arc, which is the ring of the altar seen edge on */
.rite { display: flex; align-items: flex-end; gap: clamp(4px, 1.6vw, 22px); }
.rite a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; padding: 4px 6px 8px; min-width: 54px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #6B5D4C; transition: color .25s ease, transform .35s ease;
}
.rite a i { /* the wick */
  display: block; width: 3px; height: 13px; border-radius: 2px; background: #2A231A;
  position: relative; transition: background .25s ease;
}
.rite a i::after { /* the flame */
  content: ""; position: absolute; left: 50%; top: -9px; width: 7px; height: 11px;
  margin-left: -3.5px; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 65%, var(--ember), var(--flame) 55%, rgba(255,180,68,0) 78%);
  opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s ease;
}
.rite a:hover { color: var(--ash); }
.rite a:hover i::after { opacity: .45; transform: scale(.85); }
.rite a[aria-current="page"] { color: var(--ember); }
.rite a[aria-current="page"] i { background: var(--gold); }
.rite a[aria-current="page"] i::after { opacity: 1; transform: scale(1); animation: flick 2.6s ease-in-out infinite; }
@keyframes flick {
  0%,100% { transform: scale(1) translateY(0); opacity: 1; }
  40%     { transform: scale(1.08) translateY(-1px); opacity: .88; }
  70%     { transform: scale(.96) translateY(.5px); opacity: 1; }
}
/* the arc: each candle sits a little lower as it leaves the centre */
.rite a:nth-child(1), .rite a:nth-child(5) { transform: translateY(9px); }
.rite a:nth-child(2), .rite a:nth-child(4) { transform: translateY(3px); }
/* ── the sound control ───────────────────────────────────────────────────────────────────
   A seventeenth candle, off. It sits opposite the sigil and it is the only thing on the page
   that makes a noise, so it says so in words as well as in light. */
.snd {
  position: absolute; right: clamp(14px, 4vw, 40px); top: 12px;
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; padding: 8px 2px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #6B5D4C; transition: color .25s ease;
}
.snd:hover { color: var(--ash); }
.snd i {
  display: block; width: 3px; height: 13px; border-radius: 2px; background: #2A231A;
  position: relative; transition: background .25s ease;
}
.snd i::after {
  content: ""; position: absolute; left: 50%; top: -9px; width: 7px; height: 11px;
  margin-left: -3.5px; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 65%, var(--ember), var(--flame) 55%, rgba(255,180,68,0) 78%);
  opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s ease;
}
.snd[data-on="1"] { color: var(--bone); }
.snd[data-on="1"] i { background: #6B5B45; }
.snd[data-on="1"] i::after { opacity: 1; transform: scale(1); animation: flick 2.6s ease-in-out infinite; }
.snd:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

@media (max-width: 620px) {
  .rite a { min-width: 0; padding: 4px 3px 8px; font-size: 8.5px; letter-spacing: .1em; }
  .rite a i { height: 10px; }
  .sigil b { display: none; }
  /* 🔴 Two rows, because on one row the sound control landed ON the "Rites" link: at 320px its
     44px box ran 262 to 306 and the link ran 266 to 301. A control sitting on a link is a
     mis-tap waiting to happen, and 44px is not negotiable either. The mark and the control take
     the top row, the arc of candles gets the second to itself. */
  :root { --top: 112px; }
  .mast { display: grid; grid-template-columns: 44px 1fr 44px; grid-template-rows: auto auto;
          align-items: start; padding-top: 10px; }
  .sigil { position: static; grid-column: 1; grid-row: 1; top: auto; left: auto; padding: 0; }
  /* With no word beside it a bare 3px wick is a control nobody finds. The ring says button. */
  .snd   { position: static; grid-column: 3; grid-row: 1; justify-self: end;
           min-width: 44px; min-height: 44px; justify-content: center; padding: 8px;
           border: 1px solid rgba(201,139,46,.22); border-radius: 999px; }
  .snd i { background: #4A3E2E; }
  .snd[data-on="1"] { border-color: rgba(201,139,46,.5); }
  .snd b { display: none; }
  .rite  { grid-column: 1 / -1; grid-row: 2; justify-content: center; margin-top: 2px; }
}

/* ── the page ────────────────────────────────────────────────────────────────────────────*/
.hall { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto;
  padding: var(--top) clamp(16px, 4vw, 40px) clamp(56px, 9vw, 120px); }
.col { max-width: var(--measure); }
.col.right { margin-left: auto; }
.col.mid { margin: 0 auto; }

h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 5.2vw, 62px); line-height: 1.06; letter-spacing: .02em;
  margin: 0 0 20px; text-wrap: balance; text-transform: uppercase;
}
h1 em { font-style: normal; color: var(--flame); }
h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(21px, 2.7vw, 30px); line-height: 1.18; letter-spacing: .04em;
  margin: 0 0 12px; text-transform: uppercase;
}
h3 { font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--gold); margin: 24px 0 6px; letter-spacing: .01em; }
p { margin: 0 0 16px; color: #BCAF9C; }
p.lead { font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--bone); }
strong { color: var(--bone); font-weight: 700; }
a { color: var(--flame); text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: .88em; color: var(--ember); background: rgba(201,139,46,.09); padding: 1px 5px; border-radius: 2px; }

/* a section break, drawn as an inscription rule */
.rite-mark { display: flex; align-items: center; gap: 14px; margin: 54px 0 22px; }
.rite-mark span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  white-space: nowrap;
}
.rite-mark::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* ── the stones: panels cut from the same block ──────────────────────────────────────────*/
.grid { display: grid; gap: 12px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.split { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); align-items: start; }
@media (max-width: 980px) { .grid.split, .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px)  { .grid.c3, .grid.c4, .grid.split { grid-template-columns: minmax(0,1fr); } .grid.c2 { gap: 10px; } }
/* On a narrow screen the status chip was pushed to the far right of its OWN second line by the
   margin-left:auto that lines it up with the title on a desk. Let it sit under the sub. */
/* 🔴 `docs` is the one page with no panels: the prose sits straight on the room, and at desk width
   the reading column lands exactly on the altar, so a paragraph crosses a lit candle. A radial
   scrim darkens the middle where the words are and leaves the edges of the chamber burning, which
   an edge to edge veil would have killed along with the text problem. */
body[data-view="docs"] .hall::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(126% 74% at 50% 46%,
    rgba(5,4,3,.9) 0%, rgba(5,4,3,.82) 40%, rgba(5,4,3,.42) 66%, rgba(5,4,3,0) 82%);
}

/* 🔴 On a phone the reading column owns the whole width, so the altar stands directly BEHIND the
   prose and the brazier lights up the middle of a paragraph. A scrim keeps the room visible and
   the text winning. Same lesson as panels at 86% letting the candles through the copy.
   Not on the home page: there the altar sits above the type and never crosses it. */
@media (max-width: 760px) {
  body:not([data-view="home"]) .hall::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(5,4,3,.42) 0%, rgba(5,4,3,.76) 30%, rgba(5,4,3,.86) 100%);
  }
}
@media (max-width: 620px) { .page-head { gap: 8px; } .page-head > [style*='margin-left'] { margin-left: 0 !important; } }

.stone {
  /* Opaque enough to sit IN the room rather than let it burn through the type. Candlelight is
     bright and warm and it wrecks small text at any contrast below this. */
  background: linear-gradient(rgba(8,6,4,.945), rgba(8,6,4,.945)),
              linear-gradient(160deg, rgba(201,139,46,.075), rgba(201,139,46,.015));
  backdrop-filter: blur(3px);
  border: 1px solid var(--line); border-radius: 2px; padding: 16px 17px 17px; min-width: 0;
  position: relative;
}
.stone > header {
  line-height: 1.5;
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.stone > header .sub { margin-left: auto; color: #6B5D4C; letter-spacing: .1em; }

.figure { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.figure b { display: block; font-weight: 400; font-size: clamp(23px, 3vw, 32px); line-height: 1.05; color: var(--bone); letter-spacing: -.01em; }
.figure b.lit { color: var(--flame); }
.figure b.cold { color: #4B4136; }
.figure span { display: block; margin-top: 7px; font-size: 11px; color: #7C6E5D; line-height: 1.5; letter-spacing: .02em; }
.figure span em { font-style: normal; color: var(--gold); }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(201,139,46,.08); font-size: 13.5px; color: #B0A392; }
.kv:last-child { border-bottom: 0; }
.kv b { font-family: var(--mono); font-weight: 400; color: var(--bone); font-variant-numeric: tabular-nums; }
.kv b.lit { color: var(--flame); }
.kv b.cold { color: #4B4136; }

/* ── controls ────────────────────────────────────────────────────────────────────────────*/
input[type=text] {
  width: 100%; background: rgba(5,4,3,.7); border: 1px solid var(--line); color: var(--bone);
  font-family: var(--mono); font-size: 13px; padding: 12px 13px; border-radius: 2px;
}
input:focus { outline: none; border-color: var(--gold); }
label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #6B5D4C; margin-bottom: 7px; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; }
.suffix { display: flex; align-items: center; padding: 0 13px; font-family: var(--mono); font-size: 12px; color: var(--gold); border: 1px solid var(--line); border-left: 0; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(180deg, var(--flame), #E08A1E); color: #1A0F02;
  border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 14px 24px; min-height: 44px;
}
button:hover, .btn:hover { background: linear-gradient(180deg, var(--ember), var(--flame)); }
button:disabled { background: #241C13; color: #5C5040; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ember); border: 1px solid rgba(201,139,46,.34); }
.btn.ghost:hover { background: rgba(201,139,46,.09); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 0; }

.mark-cold {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--flame); border: 1px solid rgba(255,180,68,.3); border-radius: 2px; padding: 5px 10px;
}
.mark-cold::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--flame); }

/* The page title lived here and is gone: the nav bar sits directly above and already names the
   page, so an H1 repeating it was the same word twice. The sub carries what the nav cannot. */
.page-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); }
.page-head .sub { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8A7862; }
.say { font-size: 15px; line-height: 1.6; color: #B4A794; max-width: 76ch; margin: 6px 0 22px; }
.say b { color: var(--bone); }

/* ── the collection grid ─────────────────────────────────────────────────────────────────*/
.ring { display: grid; grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); gap: 4px; margin: 6px 0 0; }
.ring i { aspect-ratio: 1; border-radius: 50%; background: #17120D; display: block; transition: transform .12s ease; }
.ring i.lit { background: radial-gradient(circle at 50% 40%, var(--ember), var(--flame) 60%, #8A5410); }
.ring i:hover { transform: scale(1.7); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6B5D4C; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend b { width: 9px; height: 9px; border-radius: 50%; display: block; }

table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12.5px; }
th { text-align: left; padding: 9px 12px 9px 0; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 400; border-bottom: 1px solid var(--line); }
td { padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(201,139,46,.07); color: #B0A392; font-variant-numeric: tabular-nums; }
/* 🔴 padding-right:0 was written for a numeric LAST column. Here the number is the middle one,
   so the zero padding welded it to the verdict: "3,429,152admitted". Strip the padding on
   whatever is actually last instead. */
td.n, th.n { text-align: right; }
tr > *:last-child { padding-right: 0; }
tr > *:nth-child(2) { padding-right: 28px; }
td b { color: var(--bone); font-weight: 400; }

ul.rites { list-style: none; padding: 0; margin: 16px 0; }
ul.rites li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid rgba(201,139,46,.07); color: #B4A794; font-size: 14.5px; }
ul.rites li::before {
  content: ""; position: absolute; left: 5px; top: 19px; width: 7px; height: 9px; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 65%, var(--ember), var(--flame) 60%, rgba(255,180,68,0) 80%);
}
ul.rites li.dark::before { background: #2A231A; border-radius: 2px; height: 7px; width: 3px; left: 7px; }

footer {
  position: relative; z-index: 2; max-width: 1240px; margin: 0 auto;
  padding: 40px clamp(16px, 4vw, 40px) 60px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #5E5244;
}
footer a { color: #5E5244; text-decoration: none; }
footer a:hover { color: var(--flame); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }