/* Hallmark · macrostructure: chaptered stage (stone choice → colour-flood chapters) · studied: yes · theme: studied-DNA (source: Cartier, Le Chœur des Pierres) · paper #ede6d6 · accent #c0142f · display Instrument Serif · body EB Garamond · genre: atmospheric */
/* HANDS. A jewellery house's stage on silk, a cave of obsidian wine, a parchment desk for the hand check. */
:root {
  --silk: #ede6d6;
  --silk-deep: #cfc6b4;
  --ink: #1d1814;
  --graphite: #3a3530;
  --wine: #170c10;
  --wine-2: #3a1420;
  --ash: #ddd4c3;
  --ruby: #c0142f;
  --sapphire: #2b4fd6;
  --night: #120a0d;
  --ruby-mist: #f4c6c9;
  --ruby-flare: #ff9aa4;
  --cream-line: rgba(237, 230, 214, 0.28);
  --ink-line: rgba(29, 24, 20, 0.22);
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --text: 'EB Garamond', Garamond, Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fg: var(--ink);
  --line: var(--ink-line);
  /* translucent steps of the palette, used for lines, shadows and grounds */
  --ash-00: rgba(221, 212, 195, 0);
  --ash-98: rgba(221, 212, 195, 0.98);
  --gleam-2-55: rgba(255, 252, 244, 0.55);
  --gleam-32: rgba(255, 253, 247, 0.32);
  --ink-06: rgba(29, 24, 20, 0.06);
  --ink-18: rgba(29, 24, 20, 0.18);
  --ink-25: rgba(29, 24, 20, 0.25);
  --ink-35: rgba(29, 24, 20, 0.35);
  --ink-45: rgba(29, 24, 20, 0.45);
  --ink-55: rgba(29, 24, 20, 0.55);
  --night-00: rgba(18, 10, 13, 0);
  --night-98: rgba(18, 10, 13, 0.98);
  --shade-45: rgba(0, 0, 0, 0.45);
  --shade-50: rgba(0, 0, 0, 0.5);
  --shade-55: rgba(0, 0, 0, 0.55);
  --shade-60: rgba(0, 0, 0, 0.6);
  --silk-10: rgba(237, 230, 214, 0.1);
  --silk-55: rgba(237, 230, 214, 0.55);
  --silk-62: rgba(237, 230, 214, 0.62);
  --silk-70: rgba(237, 230, 214, 0.7);
  --silk-82: rgba(237, 230, 214, 0.82);
  --silk-96: rgba(237, 230, 214, 0.96);
  --umber-22: rgba(150, 132, 108, 0.22);
  --wine-00: rgba(23, 12, 16, 0);
  --wine-40: rgba(23, 12, 16, 0.4);
  --wine-62: rgba(23, 12, 16, 0.62);
  --wine-86: rgba(23, 12, 16, 0.86);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--silk); }
body {
  margin: 0; min-height: 100vh; color: var(--fg);
  font: 400 19px/1.5 var(--text); font-feature-settings: 'onum', 'liga';
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: color 0.9s var(--ease);
}
body[data-view="stage"] { overflow: hidden; height: 100vh; height: 100dvh; }
body[data-view="cave"] { --fg: var(--silk); --line: var(--cream-line); background: var(--wine); }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }
em { font-style: italic; }

#world { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; touch-action: pan-y; }
body[data-view="check"] #world { visibility: hidden; }

/* the parchment flood for the hand check: a circle that opens from the chosen stone */
.parchment {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--gleam-2-55), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, var(--umber-22), transparent 70%),
    var(--ash);
  clip-path: circle(0% at var(--ox, 70%) var(--oy, 40%));
  transition: clip-path 1.4s var(--ease);
}
body[data-view="check"] .parchment { clip-path: circle(150% at var(--ox, 70%) var(--oy, 40%)); }

/* ---------- masthead ---------- */
.masthead {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(16px, 3vw, 40px);
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }
.sigil { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sigil img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 6px var(--ink-18)); }
.sigil-word { font: 400 30px/1 var(--display); letter-spacing: 0.04em; }
.coinbar { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.glyph { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); transition: border-color 0.3s, transform 0.3s var(--ease); }
.glyph:hover { border-color: currentColor; transform: translateY(-1px); }
.glyph svg { width: 16px; height: 16px; }
.mint-group { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; height: 36px; padding: 0 4px 0 14px; gap: 10px; }
.mint-chip { background: none; border: 0; padding: 0; cursor: pointer; font-style: italic; white-space: nowrap; }
.mint-chip:disabled { cursor: default; opacity: 0.8; }
.quote-coin { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--ink-06); text-decoration: none; white-space: nowrap; }
body[data-view="cave"] .quote-coin { background: var(--silk-10); }
.quote-coin img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.quote-coin:hover span { text-decoration: underline; text-underline-offset: 3px; }
.buy-link, .phantom {
  height: 36px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.buy-link { background: var(--fg); color: var(--silk); border: 1px solid var(--fg); }
body[data-view="cave"] .buy-link { color: var(--wine); }
.buy-link:hover { background: transparent; color: var(--fg); }
.phantom { background: none; border: 1px solid var(--line); }
.phantom:hover { border-color: currentColor; }
.phantom.is-on { font-style: italic; }

.masthead::before { content: ''; position: absolute; inset: 0 0 -44px; z-index: -1; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
body[data-view="cave"] .masthead::before { background: linear-gradient(180deg, var(--night-98) 68%, var(--night-00)); }
body[data-view="check"] .masthead::before { background: linear-gradient(180deg, var(--ash-98) 68%, var(--ash-00)); }
.masthead.is-scrolled::before { opacity: 1; }

/* ---------- views ---------- */
.view { position: relative; z-index: 2; }
.stage { position: fixed; inset: 0; pointer-events: none; }
.stage > * { pointer-events: auto; }

/* stone labels follow the stones on screen (positioned from JS) */
.stone-tag {
  position: absolute; left: 0; top: 0; transform: translate(-50%, 0);
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font: italic 400 21px/1 var(--text); color: var(--graphite);
  opacity: 0; transition: opacity 1.2s var(--ease) 0.6s, color 0.4s;
}
.is-ready .stone-tag { opacity: 1; }
.stone-tag span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease); padding-bottom: 3px; }
.stone-tag:hover span, .stone-tag.is-near span, .stone-tag:focus-visible span { background-size: 100% 1px; }

.stage-foot { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 72px); text-align: center; pointer-events: none; padding: 0 16px; }
.stage-title { margin: 0; font: 400 clamp(54px, min(7.4vw, 11.8vh), 150px)/0.86 var(--display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.stage-title span { display: block; white-space: nowrap; }
.stage-title .row-b { padding-left: 1.4em; }
.stage-title em { text-transform: none; font-size: 0.42em; letter-spacing: 0; vertical-align: 0.62em; margin-right: 0.12em; }
.stage-title span { opacity: 0; transform: translateY(28px); filter: blur(10px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease); }
.stage-title .row-b { transition-delay: 0.18s; }
.is-ready .stage-title span { opacity: 1; transform: none; filter: none; }
.stage-sub { margin: 18px auto 0; max-width: 34em; font-size: 18px; color: var(--graphite); opacity: 0; transition: opacity 1.4s var(--ease) 0.5s; }
.is-ready .stage-sub { opacity: 1; }

.ring {
  position: fixed; left: 0; top: 0; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  font: italic 400 15px/1.15 var(--text); text-align: center; color: var(--ink); padding: 0 22px;
  opacity: 0; transform: translate3d(-200px, -200px, 0) scale(0.6);
  transition: opacity 0.5s;
  z-index: 30; will-change: transform;
}
.ring.is-on { opacity: 1; }
.ring::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; border: 1px solid var(--ink-35); transition: transform 0.5s var(--ease), background-color 0.5s; }
.ring.is-over::before { transform: scale(1.27); background-color: var(--gleam-32); backdrop-filter: blur(2px); }
@media (hover: none) { .ring { display: none; } }

/* ---------- the cave ---------- */
.cave { color: var(--silk); }
.cave-screen { position: relative; height: 100vh; height: 100svh; pointer-events: none; }
.cave-screen > * { pointer-events: auto; }
.cave-intro { position: absolute; left: 0; right: 0; top: clamp(84px, 13vh, 140px); text-align: center; pointer-events: none; padding: 0 16px; }
.cave-intro h2 { margin: 0; font: 400 clamp(56px, 7vw, 128px)/0.9 var(--display); text-transform: uppercase; letter-spacing: 0.01em; text-shadow: 0 2px 30px var(--shade-50); }
.cave-census { margin: 14px auto 0; max-width: 30em; font-size: 19px; color: var(--silk-82); text-shadow: 0 1px 12px var(--shade-60); }
.cave-hint { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); margin: 0; font-style: italic; font-size: 16px; color: var(--silk-62); white-space: nowrap; pointer-events: none; }
.zoomers { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 32px; display: flex; gap: 6px; }
.zoomers button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--cream-line); background: var(--wine-40); cursor: pointer; font-size: 18px; line-height: 1; transition: border-color 0.3s; }
.zoomers button:hover { border-color: var(--silk); }
.keystone { position: fixed; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--wine-62); border: 1px solid var(--cream-line); text-decoration: none; font-size: 15px; white-space: nowrap; transform: translate(-50%, -100%); backdrop-filter: blur(4px); }
.keystone img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.keystone em { color: var(--silk-70); }
body:not([data-view="cave"]) .keystone { display: none; }

.tremors { position: absolute; left: clamp(16px, 3vw, 40px); bottom: 32px; width: min(340px, calc(100vw - 32px)); max-height: 34vh; overflow: hidden; }
.tremors h3 { margin: 0 0 8px; font: italic 400 22px/1 var(--display); }
.tremors ol { list-style: none; margin: 0; padding: 0; font-size: 15.5px; line-height: 1.35; }
.tremors li { padding: 7px 0; border-top: 1px solid var(--cream-line); display: grid; grid-template-columns: 1fr auto; gap: 10px; animation: tremor-in 0.9s var(--ease) both; }
.tremors li a { text-decoration: none; border-bottom: 1px solid var(--cream-line); }
.tremors li time { color: var(--silk-55); font-style: italic; }
.tremors li.is-crack { color: var(--ruby-mist); }
.tremors li.is-shatter { color: var(--ruby-flare); }
.tremors-empty { margin: 0; font-size: 15.5px; color: var(--silk-70); border-top: 1px solid var(--cream-line); padding-top: 8px; }
@keyframes tremor-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
.descend { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 16px; }
.descend svg { width: 34px; height: 34px; animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

.crystal-sheet {
  position: fixed; z-index: 15; right: clamp(16px, 3vw, 40px); top: 50%; width: min(330px, calc(100vw - 32px));
  transform: translateY(-50%); padding: 26px 26px 22px; border-radius: 4px;
  background: var(--silk-96); color: var(--ink); box-shadow: 0 30px 80px var(--shade-45);
  animation: sheet-in 0.7s var(--ease);
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-46%); filter: blur(8px); } }
.sheet-x { position: absolute; right: 10px; top: 8px; background: none; border: 0; font-size: 26px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.sheet-stone { width: 96px; height: 96px; object-fit: contain; margin: -8px auto 4px; }
.sheet-tier { margin: 0; text-align: center; font: 400 38px/1 var(--display); }
.sheet-who { margin: 6px 0 14px; text-align: center; font-style: italic; color: var(--graphite); }
.sheet-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 16.5px; }
.sheet-facts dt { color: var(--graphite); }
.sheet-facts dd { margin: 0; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.sheet-link { display: block; margin-top: 16px; text-align: center; font-size: 16px; }

.ladder {
  position: relative; padding: 18vh clamp(20px, 6vw, 96px) 14vh;
  background: linear-gradient(180deg, var(--wine-00) 0, var(--wine-86) 22vh, var(--night) 60vh);
}
.ladder-lead, .crack-law p { margin: 0 auto; max-width: 20em; text-align: center; font: 400 clamp(32px, 3.6vw, 58px)/1.12 var(--display); }
.rungs { list-style: none; margin: 16vh auto; padding: 0; max-width: 1200px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: start; }
.rung { text-align: center; opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.rung.is-in { opacity: 1; transform: none; }
.rung img { width: 100%; max-width: 220px; margin: 0 auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 30px var(--shade-55)); }
.rung:nth-child(1) img { transform: scale(0.62); } .rung:nth-child(2) img { transform: scale(0.7); } .rung:nth-child(3) img { transform: scale(0.78); }
.rung:nth-child(4) img { transform: scale(0.86); } .rung:nth-child(5) img { transform: scale(0.94); }
.rung h4 { margin: 4px 0 2px; font: 400 32px/1 var(--display); }
.rung p { margin: 0; font-size: 16px; color: var(--silk-70); font-style: italic; }
.crack-law { margin: 0 auto 18vh; }
.cave-faq { max-width: 40em; margin: 0 auto; font-size: 18px; color: var(--silk-82); }
.cave-faq h3 { font: italic 400 30px/1.1 var(--display); color: var(--silk); margin: 0 0 12px; }
.cave-faq p { margin: 0 0 14px; }

[data-words] .w { display: inline-block; opacity: 0.16; filter: blur(7px); transition: opacity 0.9s var(--ease), filter 0.9s var(--ease); }
[data-words] .w.is-lit { opacity: 1; filter: none; }
[data-blur] { opacity: 0; filter: blur(10px); transform: translateY(14px); transition: opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease); }
[data-blur].is-in { opacity: 1; filter: none; transform: none; }

/* ---------- the hand check ---------- */
.check { min-height: 100vh; padding: clamp(110px, 16vh, 170px) clamp(20px, 6vw, 96px) 12vh; color: var(--ink); }
.check-desk { max-width: 760px; margin: 0 auto; text-align: center; }
.check-title { margin: 0; font: 400 clamp(58px, 7vw, 124px)/0.9 var(--display); text-transform: uppercase; }
.check-title em { text-transform: none; font-size: 0.42em; vertical-align: 0.62em; margin-right: 0.12em; }
.check-lead { margin: 22px auto 34px; max-width: 30em; font-size: 20px; color: var(--graphite); transition-delay: 0.15s; }
.probe { margin: 0 auto; max-width: 640px; }
.probe-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.probe-row { display: flex; border-bottom: 1px solid var(--ink); }
.probe-row input { flex: 1; min-width: 0; background: none; border: 0; padding: 14px 4px; font-size: 20px; font-variant-numeric: lining-nums; }
.probe-row input::placeholder { color: var(--ink-55); font-style: italic; }
.probe-row input:focus { outline: none; }
.probe-go { background: var(--ink); color: var(--silk); border: 0; border-radius: 999px; padding: 0 22px; margin: 6px 0 8px; cursor: pointer; white-space: nowrap; transition: transform 0.3s var(--ease); }
.probe-go:hover { transform: translateX(3px); }
.probe-mine { margin-top: 14px; background: none; border: 0; cursor: pointer; font-style: italic; border-bottom: 1px solid var(--ink-line); padding: 2px 0; }
.probe-err { min-height: 1.5em; margin: 10px 0 0; color: var(--ruby); font-size: 17px; }
.reading { margin: 30px auto 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.reading p { margin: 0; max-width: 30em; color: var(--graphite); }
.reading-clock { font-variant-numeric: tabular-nums lining-nums; font-style: italic; }
.reading-stone { width: 44px; height: 44px; background: url(/assets/img/logo-128.png) center / contain no-repeat; animation: turn 3.2s linear infinite; margin-bottom: 6px; }
@keyframes turn { to { transform: rotateY(360deg); } }

.verdict { max-width: 1180px; margin: 10vh auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.verdict-plate { margin: 0; animation: plate-in 1.3s var(--ease) both; }
.verdict-plate img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 40px 90px -30px var(--ink-55); }
.verdict-plate figcaption { margin-top: 10px; font-size: 15px; font-style: italic; color: var(--graphite); }
@keyframes plate-in { from { opacity: 0; transform: translateY(90px); } }
.verdict-who { margin: 0 0 10px; font-style: italic; color: var(--graphite); }
.verdict-who a { text-decoration-color: var(--ink-line); }
.verdict-lines p { margin: 0 0 18px; font: 400 clamp(30px, 3.1vw, 50px)/1.1 var(--display); }
.verdict-lines p.is-soft { font: 400 20px/1.45 var(--text); color: var(--graphite); }
.verdict-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.verdict-acts a, .verdict-acts button { height: 42px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ink); text-decoration: none; background: none; cursor: pointer; }
.act-x { background: var(--ink) !important; color: var(--silk); }
.holdings { grid-column: 1 / -1; border-top: 1px solid var(--ink-line); padding-top: 34px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.holdings h3 { margin: 18px 0 4px; font: italic 400 30px/1.1 var(--display); }
.holding-list { list-style: none; margin: 0; padding: 0; }
.holding-list li { display: grid; grid-template-columns: 54px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ink-line); font-size: 17px; }
.holding-list li.is-none { display: block; color: var(--graphite); font-style: italic; }
.holding-list .h-stone { width: 54px; height: 54px; object-fit: contain; }
.holding-list .h-coin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.holding-list .h-coin img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: var(--silk-deep); }
.holding-list .h-coin b { font: 400 24px/1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holding-list .h-dim { color: var(--graphite); }
.holding-list .h-num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.grading { margin: 9vh auto 0; }
.grading-lead { margin: 0 0 18px; font-style: italic; color: var(--graphite); }
.grades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.grades li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.grades img { width: 100%; max-width: 96px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 14px var(--ink-25)); }
.grades b { font: 400 24px/1 var(--display); margin-top: 4px; }
.grades span { font-size: 15px; color: var(--graphite); font-style: italic; }
.verdict:not([hidden]) ~ * .grading, .has-verdict .grading { display: none; }
.limits { margin-top: 24px; font-size: 16px; color: var(--graphite); max-width: 46em; }
.limits p { margin: 0 0 8px; }

/* ---------- chapter rail ---------- */
.rail { position: fixed; z-index: 18; right: clamp(12px, 2vw, 28px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.rail button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; display: grid; place-items: center; color: var(--fg); transition: border-color 0.3s, background 0.3s; }
.rail button svg { width: 18px; height: 18px; }
.rail-x { font-size: 22px; line-height: 1; margin-bottom: 10px; border-radius: 3px !important; }
.rail-dot.is-on { border-color: currentColor; box-shadow: inset 0 0 0 3px transparent, 0 0 0 3px var(--line); }
body[data-view="check"] .rail button { color: var(--ink); }

/* ---------- small screens ---------- */
@media (max-width: 1100px) {
  .quote-coin span .q-long { display: none; }
}
@media (max-width: 900px) {
  .coinbar { gap: 4px; font-size: 15px; }
  .glyph { width: 32px; height: 32px; }
  .mint-group { padding-left: 10px; height: 32px; }
  .buy-link, .phantom { height: 32px; padding: 0 12px; }
  .rungs { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .verdict { grid-template-columns: 1fr; }
  .grades { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .holding-list li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .holding-list .h-stone { width: 44px; height: 44px; }
  .holding-list .h-mid { display: none; }
}
@media (max-width: 760px) {
  .masthead { flex-wrap: wrap; padding: 12px 14px; gap: 8px; }
  .sigil-word { font-size: 26px; }
  .sigil img { width: 34px; height: 34px; }
  .coinbar { width: 100%; justify-content: space-between; }
  .phantom .p-long { display: none; }
  .stage-title .row-b { padding-left: 0.6em; }
  .stage-sub { font-size: 16px; margin-top: 12px; }
  .cave-intro { top: 118px; }
  .cave-hint { bottom: 150px; white-space: normal; text-align: center; width: 90vw; font-size: 15px; }
  .tremors { bottom: 84px; max-height: 64px; }
  .tremors h3 { display: none; }
  .tremors li:nth-child(n + 2) { display: none; }
  .zoomers { bottom: 26px; right: 14px; }
  .descend { left: 14px; transform: none; bottom: 28px; }
  .descend svg { width: 28px; height: 28px; }
  .crystal-sheet { top: auto; bottom: 14px; transform: none; right: 14px; left: 14px; width: auto; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(20px); } }
  .rail { top: auto; bottom: 14px; transform: none; flex-direction: row; right: auto; left: 50%; translate: -50% 0; }
  body[data-view="cave"] .rail { display: none; }
  .rail-x { margin: 0 10px 0 0; }
  .check { padding-top: 136px; }
  .probe-row { flex-direction: column; border: 0; gap: 10px; }
  .probe-row input { border-bottom: 1px solid var(--ink); font-size: 17px; }
  .probe-go { height: 46px; margin: 0; }
}
@media (max-width: 420px) {
  .glyph:nth-child(1), .glyph:nth-child(2) { width: 30px; height: 30px; }
  .mint-chip { font-size: 14px; }
  .quote-coin { padding-right: 6px; }
  .quote-coin span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-words] .w { opacity: 1; filter: none; }
}

/* the cave's first screen lets pointer events through to the world so drag and tap reach the crystals */
.view.cave, .cave-screen { pointer-events: none; }
.cave-screen a, .cave-screen button, .zoomers, .tremors, .crystal-sheet, .ladder { pointer-events: auto; }
@media (max-width: 760px) {
  .check { padding-bottom: 110px; }
  .stone-tag { font-size: 18px; white-space: nowrap; }
}
@media (max-width: 360px) {
  .masthead { padding: 10px 10px; }
  .coinbar { gap: 5px; }
  .quote-coin { display: none !important; }
  .stone-tag { font-size: 16px; }
  .buy-link, .phantom { padding: 0 11px; }
}
/* big screens: the small type grows with the room */
@media (min-width: 1900px) {
  .stage-sub { font-size: 22px; max-width: 38em; }
  .stone-tag { font-size: 26px; }
  .check-desk { max-width: 980px; }
  .check-lead { font-size: 24px; }
  .probe { max-width: 820px; }
  .probe-row input { font-size: 24px; }
  .grading-lead { font-size: 21px; }
}

/* states: focus appears at once, presses sink, disabled rests */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; transition: none; }
button:active, a.buy-link:active, a.act-x:active, a.act-save:active, .probe-go:active { transform: translateY(1px); }
button:disabled, button[disabled] { cursor: default; opacity: 0.72; }
.mint-chip:disabled { opacity: 1; }
.probe-go:disabled { opacity: 0.5; cursor: progress; }
.cave-intro h2, .check-title { white-space: nowrap; }