/* ═══════════════════════════════════════════════════════════
   mindz — the atrium of the mind
   chiaroscuro · Caravaggio · Hammershøi · Hopper · Turrell
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink:        #0B0E14;
  --ink-2:      #06080d;
  --bone:       #E8E2D4;
  --bone-mute:  #b7b1a4;
  --bone-dim:   #6f6a60;
  --bone-deep:  #3a372f;
  --gold:       #C8985A;
  --gold-soft:  #8d6a3d;
  --oxblood:    #A33F3F;
  --serif: "EB Garamond","Cormorant Garamond",Georgia,serif;
  --mono:  "JetBrains Mono",ui-monospace,Menlo,monospace;
  --rule:        rgba(232,226,212,0.10);
  --rule-strong: rgba(232,226,212,0.22);
  --accent: var(--gold);  /* re-bound per chamber */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--ink); scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--bone);
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(200,152,90,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 50%, var(--ink) 0%, var(--ink-2) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern","liga","onum" 1;
}
body.locked { overflow: hidden; }
::selection { background: var(--gold); color: var(--ink); }

a { color: inherit; }

/* ── atmosphere layers ─────────────────────────────────── */
.grain {
  position: fixed; inset: -10%; pointer-events: none; z-index: 100;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background: radial-gradient(ellipse 85% 65% at 50% 45%, transparent 35%, rgba(6,8,13,0.5) 82%, rgba(0,0,0,0.92) 100%);
}
.candle {
  position: fixed; top: 0; left: 0; width: 620px; height: 620px;
  margin: -310px 0 0 -310px; pointer-events: none; z-index: 80;
  background: radial-gradient(circle, rgba(200,152,90,0.06) 0%, rgba(200,152,90,0.02) 32%, transparent 70%);
  transform: translate3d(50vw,50vh,0); transition: opacity 1.2s ease; opacity: 0;
  mix-blend-mode: screen;
}
body.has-pointer .candle { opacity: 1; }

/* ── shared type ───────────────────────────────────────── */
.meta {
  font-family: var(--mono); font-size: 11px; font-weight: 300;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim);
}
.gold { color: var(--gold); }

/* ════════════ INVOCATION — cinematic cold open ══════════ */
.invocation {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 6vh 24px;
  background: #04050a;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 1.1s, transform 1.1s cubic-bezier(.4,0,.2,1), filter 1.1s;
  cursor: pointer; overflow: hidden;
}
.invocation.gone { opacity: 0; visibility: hidden; transform: translateY(-34px) scale(1.03); filter: blur(6px); }

/* the Turrell light-seam that splits the dark first */
.inv-seam {
  position: absolute; top: 50%; left: 50%; height: 1px; width: 0;
  transform: translate(-50%,-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 22px 2px rgba(200,152,90,0.55);
  animation: seam 1.7s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes seam {
  0%   { width: 0; opacity: 0; }
  22%  { opacity: 1; }
  70%  { width: min(64vw,720px); opacity: .9; }
  100% { width: min(80vw,900px); opacity: 0; }
}

.inv-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4.5vh; }
.inv-glow {
  position: absolute; top: -8vh; left: 50%; width: 460px; height: 460px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(200,152,90,0.14) 0%, rgba(200,152,90,0.04) 38%, transparent 68%);
  opacity: 0; animation: fadeIn 2.6s ease 0.7s forwards; pointer-events: none;
}
.inv-sigil {
  width: 92px; height: 92px; transform-origin: 50% 50%;
  opacity: 0; transform: scale(.45);
  animation: sigilIgnite 1.6s cubic-bezier(.2,.8,.2,1) 0.55s forwards,
             breathe 9s ease-in-out 2.2s infinite, slowSpin 240s linear 2.2s infinite;
}
@keyframes sigilIgnite { 0% { opacity: 0; transform: scale(.45); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

.inv-mark {
  font-family: var(--serif); font-weight: 500; font-size: clamp(64px,15vw,150px);
  letter-spacing: -0.045em; line-height: 0.9; margin: 0;
  opacity: 0; filter: blur(16px); transform: translateY(0.2em);
  animation: markEmerge 1.7s cubic-bezier(.2,.7,.2,1) 1.25s forwards;
}
@keyframes markEmerge { to { opacity: 1; filter: blur(0); transform: translateY(0); } }
.inv-mark .z { font-style: italic; color: var(--gold); display: inline-block; transform: translateY(0.04em) scaleY(1.05); }

.inv-line {
  max-width: 26ch; font-style: italic; font-size: clamp(18px,2.4vw,24px);
  color: var(--bone-mute); line-height: 1.5; margin: 0;
  opacity: 0; animation: fadeUp 1.6s ease 2.1s forwards;
}
.inv-enter {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bone-dim); margin: 1vh 0 0;
  opacity: 0; animation: fadeUp 1.6s ease 2.9s forwards;
}
.inv-enter .arrow { display: block; width: 1px; height: 34px; margin: 8px auto 0; background: linear-gradient(to bottom, var(--bone-dim), transparent); animation: drop 2.4s ease-in-out infinite; }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }

/* ════════════ HEADER / TOOLBAR ══════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(6,8,13,0.92) 30%, rgba(6,8,13,0.0));
  border-bottom: 1px solid var(--rule);
  padding: 16px 28px 18px;
}
.topbar-row { display: flex; align-items: center; gap: 20px; max-width: 1320px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; }
.brand .sigil { width: 26px; height: 26px; }
.brand b { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.03em; }
.brand b .z { font-style: italic; color: var(--gold); }
.count { margin-left: auto; flex: none; text-align: right; line-height: 1.5; }
.count b { font-family: var(--serif); color: var(--bone); font-weight: 500; font-size: 15px; }

.search {
  flex: 1 1 auto; max-width: 380px; position: relative;
}
.search input {
  width: 100%; background: rgba(232,226,212,0.04); border: 1px solid var(--rule);
  border-radius: 999px; padding: 9px 16px 10px 38px; color: var(--bone);
  font-family: var(--serif); font-size: 16px; outline: none;
  transition: border-color .4s ease, background .4s ease;
}
.search input::placeholder { color: var(--bone-deep); font-style: italic; }
.search input:focus { border-color: var(--rule-strong); background: rgba(232,226,212,0.06); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); opacity: .5; }

/* chamber filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1320px; margin: 14px auto 0; padding: 0; }
.chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-mute); background: transparent; border: 1px solid var(--rule);
  border-radius: 999px; padding: 6px 13px 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: color .3s, border-color .3s, background .3s;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bone-deep); transition: background .3s, box-shadow .3s; }
.chip:hover { color: var(--bone); border-color: var(--rule-strong); }
.chip.active { color: var(--bone); border-color: var(--rule-strong); background: rgba(232,226,212,0.05); }
.chip.active .dot { box-shadow: 0 0 9px currentColor; }
/* image-thumbnail chips — the shrunk chamber 'cards' that become the navbar nav */
.chip.chip-img { padding: 4px 12px 4px 5px; }
.chip-thumb { width: 30px; height: 20px; border-radius: 3px; object-fit: cover; object-position: 50% 30%; filter: grayscale(.1) contrast(1.05); flex: none; }
.chip.chip-img.active { box-shadow: inset 0 0 0 1px var(--accent); }
.chip.chip-img.active .chip-thumb { box-shadow: 0 0 0 1px var(--accent); }

/* ════════════ CHAMBER SELECT (carousel) ════════════════ */
.chamber-select { max-width: 1320px; margin: 0 auto; padding: 6vh 28px 10vh;
  min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.cs-head { text-align: center; margin-bottom: 5vh; }
.cs-head h2 { font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(30px,5vw,54px); letter-spacing: -.02em; margin: 14px 0 0; color: var(--bone); }
.cs-sub { color: var(--bone-dim); font-style: italic; font-size: 17px; margin: 16px 0 0; }
.cs-sub a { color: var(--bone-mute); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.cs-sub a:hover { color: var(--gold); border-color: var(--gold); }

.cs-rail { position: relative; }
.cs-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px 4px 22px; scroll-behavior: smooth; scrollbar-width: none; }
.cs-track::-webkit-scrollbar { display: none; }

.cs-box { flex: 0 0 auto; width: clamp(260px, 30vw, 358px); aspect-ratio: 3 / 4;
  scroll-snap-align: center; position: relative; border-radius: 6px; overflow: hidden;
  cursor: pointer; border: 1px solid var(--rule); background: var(--ink-2);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s; }
.cs-box:hover { transform: translateY(-6px); border-color: var(--accent);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 1px var(--accent); }
.cs-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 30%; opacity: .82; transition: opacity .6s, transform 6s ease; filter: grayscale(.08) contrast(1.05); }
.cs-box:hover img { opacity: .97; transform: scale(1.05); }
.cs-box .scrim { position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,8,13,.97) 4%, rgba(6,8,13,.6) 42%, rgba(6,8,13,.12) 100%); }
.cs-box .edge { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.cs-box .body { position: absolute; inset: 0; padding: 22px 22px 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.cs-box .roman { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--accent); }
.cs-box .name { font-family: var(--serif); font-weight: 500; font-size: clamp(23px,2.6vw,30px); line-height: 1.1; letter-spacing: -.01em; color: var(--bone); }
.cs-box .desc { font-size: 14.5px; line-height: 1.45; color: var(--bone-mute); }
.cs-box .cnt { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); margin-top: 4px; }

.cs-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-strong);
  background: rgba(6,8,13,.7); backdrop-filter: blur(8px); color: var(--bone);
  font-size: 24px; line-height: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color .3s, border-color .3s; }
.cs-arrow:hover { color: var(--gold); border-color: var(--gold); }
.cs-arrow.prev { left: -10px; } .cs-arrow.next { right: -10px; }
@media (max-width: 720px) { .cs-arrow { display: none; } .cs-box { width: 80vw; } .chamber-select { padding: 4vh 18px 8vh; } }

/* ════════════ ATRIUM ════════════════════════════════════ */
.atrium { max-width: 1320px; margin: 0 auto; padding: 5vh 28px 16vh; scroll-margin-top: 96px; }

.chamber-head { margin: 9vh 0 3.5vh; display: flex; align-items: baseline; gap: 18px; }
.chamber-head:first-of-type { margin-top: 3vh; }
.chamber-head .roman { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--bone-deep); }
.chamber-head h2 { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(26px,3.4vw,38px); letter-spacing: -0.012em; margin: 0; color: var(--bone); }
.chamber-head .blurb { font-style: italic; color: var(--bone-dim); font-size: 16px; margin-left: auto; max-width: 36ch; text-align: right; }
.chamber-head .cnt { font-family: var(--mono); font-size: 11px; color: var(--bone-deep); letter-spacing: .1em; }

.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ── CARD ──────────────────────────────────────────────── */
.card {
  position: relative; border-radius: 4px; overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 11; border: 1px solid var(--rule);
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 14%, var(--ink-2)) 0%, var(--ink-2) 70%);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s;
  opacity: 0; transform: translateY(20px);
}
.card.in { opacity: 1; transform: translateY(0); }
.card:hover { transform: translateY(-4px); border-color: var(--rule-strong); box-shadow: 0 18px 50px -20px rgba(0,0,0,.8); }
.card:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.card .face { position: absolute; inset: 0; object-fit: cover; object-position: 50% 22%; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease, transform 6s ease, filter .5s ease; filter: grayscale(.12) contrast(1.05); }
/* clean extracted photo (no baked text) — show it richly, scrim only at the foot for title legibility */
.card.has-cover .face.loaded { opacity: .9; }
/* on hover the hook is revealed — soften & blur the photo so the text stays readable */
.card.has-cover:hover .face { opacity: .82; transform: scale(1.04); filter: grayscale(.12) contrast(1.02) blur(4px); }
.card.has-cover .scrim { position: absolute; inset: 0; transition: background .5s ease; background:
  linear-gradient(0deg, rgba(6,8,13,0.96) 2%, rgba(6,8,13,0.7) 26%, rgba(6,8,13,0.2) 58%, rgba(6,8,13,0.04) 100%); }
.card.has-cover:hover .scrim { background:
  linear-gradient(0deg, rgba(6,8,13,0.97) 4%, rgba(6,8,13,0.86) 38%, rgba(6,8,13,0.66) 70%, rgba(6,8,13,0.5) 100%); }
/* fallback: raw slide thumbnail still carries baked text — keep the heavier scrim */
.card.has-img:not(.has-cover) .face.loaded { opacity: .5; }
.card.has-img:not(.has-cover):hover .face { opacity: .78; transform: scale(1.05); }
.card .scrim { position: absolute; inset: 0; background:
  linear-gradient(0deg, rgba(6,8,13,0.97) 4%, rgba(6,8,13,0.82) 34%, rgba(6,8,13,0.62) 64%, rgba(6,8,13,0.5) 100%); }

/* procedural sigil watermark for deckless cards */
.card .watermark { position: absolute; right: -18px; top: -18px; width: 120px; height: 120px; opacity: .14; color: var(--accent); }
.card.has-img .watermark { display: none; }

.card .body { position: absolute; inset: 0; padding: 16px 17px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.card .ctag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.card .ctitle { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.12; letter-spacing: -0.01em; color: var(--bone); }
.card .chook { font-size: 14.5px; line-height: 1.45; color: var(--bone-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .5s ease, opacity .5s ease; }
.card:hover .chook { max-height: 4em; opacity: 1; }

.card .glyphs { position: absolute; top: 13px; right: 14px; display: flex; gap: 8px; align-items: center; }
.card .glyph { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); display: inline-flex; align-items: center; gap: 4px; }
.card .glyph.deep { color: var(--accent); }
.card .glyph svg { width: 11px; height: 11px; }

.empty { text-align: center; color: var(--bone-dim); font-style: italic; padding: 14vh 0; font-size: 20px; }

/* ════════════ DEEP-DIVE OVERLAY ═════════════════════════ */
.dive {
  position: fixed; inset: 0; z-index: 150; overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 55%),
    var(--ink);
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s ease;
}
.dive.open { opacity: 1; visibility: visible; }

.dive-close {
  position: fixed; top: 20px; right: 24px; z-index: 160;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-strong);
  background: rgba(6,8,13,0.6); backdrop-filter: blur(10px); color: var(--bone);
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .4s, border-color .4s, color .4s;
}
.dive-close:hover { transform: rotate(90deg); border-color: var(--accent); color: var(--accent); }

.dive-rail { position: fixed; top: 50%; left: 22px; transform: translateY(-50%); z-index: 158; display: flex; flex-direction: column; gap: 7px; }
.dive-rail span { width: 2px; height: 16px; background: var(--bone-deep); border-radius: 2px; transition: background .4s, height .4s; }
.dive-rail span.on { background: var(--accent); height: 24px; }

.dive-inner { max-width: 1100px; margin: 0 auto; padding: 0 28px 22vh; }

.dive-hero { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; padding: 14vh 0 6vh; text-align: center; }
.dive-hero .roman { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--accent); }
.dive-hero .chamber { display: block; margin: 10px 0 4vh; }
.dive-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(40px,8vw,92px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; color: var(--bone); }
.dive-hero .hook { margin: 4vh auto 0; max-width: 30ch; font-style: italic; font-size: clamp(20px,2.6vw,28px); line-height: 1.45; color: var(--bone-mute); }
.dive-hero .tagrow { margin-top: 4vh; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.dive-hero .pin { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 13px; }

/* audio player */
.player { margin: 5vh auto 0; max-width: 460px; border: 1px solid var(--rule); border-radius: 999px; padding: 10px 16px; display: flex; align-items: center; gap: 14px; background: rgba(232,226,212,0.03); }
.player .pp { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.player .pp:hover { background: var(--accent); color: var(--ink); }
.player .bar { flex: 1; height: 3px; background: var(--bone-deep); border-radius: 3px; cursor: pointer; position: relative; }
.player .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); border-radius: 3px; }
.player .time { font-family: var(--mono); font-size: 10px; color: var(--bone-dim); flex: none; min-width: 78px; text-align: right; }
.player .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-deep); }

.descend-cue { text-align: center; margin-top: 7vh; font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--bone-deep); }
.descend-cue .arrow { display: block; width: 1px; height: 40px; margin: 10px auto 0; background: linear-gradient(to bottom, var(--bone-dim), transparent); animation: drop 2.4s ease-in-out infinite; }

/* slides as cinematic scenes */
.scene { margin: 11vh 0; opacity: 0; transform: translateY(40px); transition: opacity 1.4s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1); }
.scene.in { opacity: 1; transform: translateY(0); }
.scene img { width: 100%; height: auto; display: block; border-radius: 5px; border: 1px solid var(--rule); box-shadow: 0 40px 90px -40px rgba(0,0,0,.9); }
.scene .num { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--bone-deep); margin: 14px 2px 0; text-align: right; }

.dive-foot { text-align: center; padding: 8vh 0 2vh; }
.dive-foot .benediction { font-style: italic; font-size: clamp(22px,3vw,30px); color: var(--bone); max-width: 22ch; margin: 0 auto 5vh; line-height: 1.35; }
.dive-foot .yt { display: inline-block; font-style: italic; font-size: 20px; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--oxblood); padding-bottom: 3px; transition: letter-spacing .6s; }
.dive-foot .yt:hover { letter-spacing: .03em; }
.dive-foot .yt .arrow { color: var(--oxblood); margin-left: 10px; font-style: normal; }

/* deckless deep-dive */
.no-deck { text-align: center; padding: 6vh 0 0; }
.no-deck p { color: var(--bone-mute); font-style: italic; font-size: 19px; max-width: 40ch; margin: 0 auto 2vh; }
.kin { margin-top: 8vh; }
.kin h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); text-align: center; margin-bottom: 3vh; }

/* ── footer ────────────────────────────────────────────── */
footer { text-align: center; padding: 9vh 28px 8vh; border-top: 1px solid var(--rule); }
footer .foot-sigil { width: 22px; height: 22px; opacity: .6; margin-bottom: 22px; }
footer p { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-deep); margin: 0; }
footer .sep { margin: 0 12px; opacity: .6; }

/* ── animations ────────────────────────────────────────── */
@keyframes fadeIn   { to { opacity: 1; } }
@keyframes breathe  { 0%,100%{opacity:.9} 50%{opacity:1} }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes drop     { 0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4} 50%{transform:scaleY(1);transform-origin:top;opacity:1} }

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 720px) {
  body { font-size: 17px; }
  .topbar { padding: 14px 18px; }
  .topbar-row { flex-wrap: wrap; gap: 12px; }
  .search { order: 3; max-width: none; flex-basis: 100%; }
  .atrium { padding: 4vh 18px 14vh; }
  .grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
  .card .ctitle { font-size: 18px; }
  .chamber-head .blurb { display: none; }
  .dive-rail { display: none; }
  .dive-inner { padding: 0 18px 18vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .card, .scene { opacity: 1 !important; transform: none !important; }
}