/* Neon Arcana — after the look of arcanamana.com: near-black, cream and old
   gold; monospace captions, a serif for numerals, a display face for names;
   hairline gold rules that end in four-point sparkles. */

:root {
  color-scheme: dark;
  --ink: #131415;
  --ink-2: #1a1b1d;
  --ink-3: #242528;
  --cream: #f3ede1;
  --cream-dim: #c9c2b4;
  --muted: #8f8a80;
  --paper: #f1eadc;
  --paper-2: #e6dccb;
  --paper-ink: #1c1a17;
  --paper-muted: #6d6556;
  --gold: #b3924f;
  --gold-hi: #d9bc7a;
  --gold-line: rgba(179, 146, 79, 0.55);
  --gold-faint: rgba(179, 146, 79, 0.16);
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --serif: 'Bellefair', 'Cormorant Garamond', Georgia, serif;
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --gutter: 16px;
  --frame: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
/* No visible scrollbar: a classic one takes width, and appearing on the long
   screens and vanishing on the short ones it shifted every page sideways. The
   pages still scroll by wheel, touch and keyboard. */
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--cream);
  font: 400 14px/1.6 var(--mono);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 4px; }
/* arcanamana's cursor: a four-point sparkle trailing a short tail; the hot
   spot is the sparkle's centre. Mouse and trackpad only. */
@media (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 9.5L19 19' stroke='%23f3ede1' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M7 1Q7.8 6.2 13 7Q7.8 7.8 7 13Q6.2 7.8 1 7Q6.2 6.2 7 1Z' fill='%23f3ede1' stroke='%23131415' stroke-width='0.9'/%3E%3C/svg%3E") 7 7, auto; }
  a, button, [role='button'], .fc, .tcard { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 9.5L19 19' stroke='%23d9bc7a' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M7 1Q7.8 6.2 13 7Q7.8 7.8 7 13Q6.2 7.8 1 7Q6.2 6.2 7 1Z' fill='%23d9bc7a' stroke='%23131415' stroke-width='0.9'/%3E%3C/svg%3E") 7 7, pointer; }
  input[type='text'], input[type='number'], textarea { cursor: text; }
}
#view:focus { outline: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.caps { text-transform: uppercase; letter-spacing: 0.06em; }
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- ornaments ---------- */

.spark { display: inline-block; width: 11px; height: 11px; color: var(--gold); flex: none; }
.spark svg { width: 100%; height: 100%; fill: currentColor; display: block; }

.rule {
  display: flex; align-items: center; gap: 10px;
  color: var(--gold);
}
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: var(--gold-line); }

/* Fixed hairline frame around the viewport, with sparkles at its corners. */
.frame {
  position: fixed; inset: var(--frame); z-index: 5; pointer-events: none;
  border: 1px solid var(--gold-line); border-radius: 10px;
}
.frame .spark { position: absolute; width: 12px; height: 12px; }
.frame .s-tl { left: -6px; top: 18%; } .frame .s-tr { right: -6px; top: 18%; }
.frame .s-bl { left: -6px; bottom: 18%; } .frame .s-br { right: -6px; bottom: 18%; }
.frame .s-t { left: calc(50% - 6px); top: -6px; } .frame .s-b { left: calc(50% - 6px); bottom: -6px; }
body.home .frame { opacity: 0; visibility: hidden; }
.corner { position: absolute; width: 58px; height: 58px; color: var(--gold-line); pointer-events: none; }
.corner svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; display: block; }
.corner.tl { left: 5px; top: 5px; } .corner.tr { right: 5px; top: 5px; transform: rotate(90deg); }
.corner.br { right: 5px; bottom: 5px; transform: rotate(180deg); } .corner.bl { left: 5px; bottom: 5px; transform: rotate(270deg); }

.back {
  position: fixed; z-index: 6;
  top: calc(var(--frame) + 22px); left: calc(var(--frame) + 22px);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(19, 20, 21, 0.72); padding: 6px 10px 6px 4px; border-radius: 6px;
}
/* Text scrolling up fades out under the fixed back link and sound toggle. */
body::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none; transition: opacity 0.35s ease;
  height: calc(var(--frame) + 66px); background: linear-gradient(rgba(10, 10, 12, 0.92) 45%, rgba(10, 10, 12, 0));
}
.back .line { width: 22px; height: 1px; background: var(--cream); }
.back:hover { color: var(--gold-hi); }
body.home .back { opacity: 0; visibility: hidden; }
/* The fixed chrome fades with the screens: the sound toggle moves between
   the home page's corner and the others', and the frame and back link come
   and go, so they are hidden while the router swaps screens. */
.frame, .back, .sound { transition: opacity 0.35s ease, visibility 0.35s; }
body.routing .frame, body.routing .back, body.routing .sound, body.routing::before, body.home::before {
  opacity: 0; visibility: hidden; transition-duration: 0.18s;
}

/* Sound toggle, top right, with a little equalizer while music plays. */
.sound {
  position: fixed; z-index: 6; top: calc(var(--frame) + 22px); right: calc(var(--frame) + 22px);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px;
  background: rgba(19, 20, 21, 0.72); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
}
.sound:hover { color: var(--gold-hi); }
.sound .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.sound .bars i { display: block; width: 2px; height: 3px; background: currentColor; }
.sound.on .bars i { animation: eq 0.9s ease-in-out infinite alternate; }
.sound.on .bars i:nth-child(2) { animation-delay: -0.3s; }
.sound.on .bars i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { from { height: 2px; } to { height: 11px; } }
body.home .sound { top: auto; bottom: 44px; right: var(--gutter); }

/* Link stacks between two vertical rules that end in sparkles. */
.menu {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 22px 38px;
}
.menu::before, .menu::after {
  content: ''; position: absolute; top: 8px; bottom: 8px; width: 1px; background: var(--cream-dim);
}
.menu::before { left: 0; } .menu::after { right: 0; }
.menu .sp { position: absolute; width: 9px; height: 9px; color: var(--cream-dim); }
.menu .sp.a { left: -4px; top: 0; } .menu .sp.b { left: -4px; bottom: 0; }
.menu .sp.c { right: -4px; top: 0; } .menu .sp.d { right: -4px; bottom: 0; }
.menu .sp.e { left: -4px; top: calc(50% - 4px); } .menu .sp.f { right: -4px; top: calc(50% - 4px); }
.menu a, .menu button {
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream);
  transition: color 0.2s, letter-spacing 0.3s;
}
.menu a:hover, .menu button:hover { color: var(--gold-hi); letter-spacing: 0.1em; }

.pair {
  display: flex; justify-content: center; align-items: stretch; gap: 0; margin: 28px auto 0;
}
.pair > * {
  position: relative; padding: 10px 28px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
}
.pair > *::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--cream-dim);
}
.pair > *:last-child::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--cream-dim);
}
.pair > *:hover { color: var(--gold-hi); }
.pair > *[disabled] { opacity: 0.4; cursor: default; }

/* ---------- page shell ---------- */

/* The painted scene behind every screen, one per menu entry (set by the
   router). Two layers, so a change of scene crossfades; darkened the way
   arcanamana darkens its own, and more under the long reading pages. */
.paint { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--ink); }
.paint i { position: absolute; inset: 0; background: center 40% / cover no-repeat; opacity: 0; transition: opacity 1s ease; }
.paint i.on { opacity: 1; }
.paint i.top { z-index: 1; }
.paint::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.74) 0%, rgba(10, 10, 12, 0.46) 45%, rgba(10, 10, 12, 0.78) 100%);
  transition: background 1s ease;
}
.paint[data-scene='consult']::after {
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.8) 0%, rgba(10, 10, 12, 0.6) 45%, rgba(10, 10, 12, 0.8) 100%);
}
.paint[data-scene='key']::after, .paint[data-scene='credits']::after, .paint[data-scene='journal']::after {
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.84) 0%, rgba(10, 10, 12, 0.7) 45%, rgba(10, 10, 12, 0.86) 100%);
}

/* Screens fade: the old one out (the router waits for it), the new one in.
   Each step of a reading fades in the same way. */
main { position: relative; z-index: 1; min-height: 100vh; transition: opacity 0.22s ease; }
main.leaving { opacity: 0; }
#view > *, .ritual > *, .ritual .say > *, .ritual .stage > * { animation: screen-in 0.6s ease backwards; }
@keyframes screen-in { from { opacity: 0; } }
.page {
  position: relative; max-width: 1100px; margin: 0 auto;
  padding: calc(var(--frame) + 86px) calc(var(--frame) + 26px) calc(var(--frame) + 60px);
}
.lede {
  max-width: 620px; margin: 0 auto 30px; text-align: center; font-size: 14px; line-height: 1.8;
}
.title-xl {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(44px, 10vw, 150px); line-height: 0.82; letter-spacing: -0.02em;
  color: var(--cream); text-align: center;
}
.numeral { font-family: var(--serif); color: var(--gold-hi); font-size: 20px; letter-spacing: 0.08em; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-hi); }

/* ---------- home ---------- */

body.home { overflow: hidden; }
.home-wrap { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
/* No stacking context on .drift, so its columns can pass in front of the
   wordmark or behind it, as on arcanamana. */
.drift {
  position: absolute; inset: 0; display: flex; justify-content: center; gap: clamp(12px, 3.2vw, 44px);
  padding: 0 12px;
}
.drift-col { display: flex; flex-direction: column; gap: clamp(12px, 3vw, 40px); will-change: transform; z-index: 1; }
@media (min-width: 720px) { .drift-col.front { z-index: 3; } } /* phones keep the wordmark whole */
.drift-col.up { animation: drift-up 90s linear infinite; }
.drift-col.down { animation: drift-down 110s linear infinite; }
.drift-col .cell { --cw: clamp(78px, 9vw, 124px); width: var(--cw); height: calc(var(--cw) * 1.5); flex: none; }
.drift-col .cell.empty { visibility: hidden; }
.drift-col .cell > * { width: 100%; height: 100%; }
.drift-col img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
@keyframes drift-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes drift-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.wordmark {
  position: absolute; left: 0; right: 0; top: clamp(18px, 4vh, 44px); z-index: 2;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(64px, 19.5vw, 300px); line-height: 0.8; letter-spacing: -0.01em; font-weight: 900;
  text-align: center; color: var(--cream); pointer-events: none;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}
.home-center {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; pointer-events: none;
}
.home-sub {
  margin: 0; padding: 5px 12px; border-radius: 3px; background: rgba(19, 20, 21, 0.82);
  font: 400 12px/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-hi);
}
.home-center .menu { pointer-events: auto; background: rgba(19, 20, 21, 0.78); border-radius: 4px; }
.home-foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12px; z-index: 4;
  display: flex; flex-direction: column; gap: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
}
.home-foot .row { display: flex; justify-content: space-between; gap: 12px; }
.home-foot .row > * { background: rgba(19, 20, 21, 0.8); padding: 2px 6px; }
.home-foot a:hover { color: var(--gold-hi); }

/* ---------- cards ---------- */

.tcard {
  --cw: 150px;
  position: relative; display: block; width: var(--cw); aspect-ratio: 2 / 3;
  perspective: 1200px; -webkit-tap-highlight-color: transparent; flex: none;
}
.tcard-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(.45, 0, .2, 1);  /* a slow, deliberate turn */
}
.tcard.up .tcard-inner { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; border-radius: 5px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
/* The two faces sit a hair apart, each on its own side: back to back in one
   plane they fought, and the card flashed while the table leaned. */
.face.back { transform: translateZ(0.6px); }
.face.front { transform: rotateY(180deg) translateZ(0.6px); }
.face img, .face .ph { width: 100%; height: 100%; object-fit: cover; }
.tcard:hover .face { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--gold-line); }

.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%;
  padding: 10%; text-align: center;
  background: radial-gradient(circle at 50% 40%, #2a2419, #161616 70%);
  border: 1px solid var(--gold-line); border-radius: inherit;
  font-size: calc(var(--cw, 150px) / 10);
}
.ph .n { font-family: var(--serif); color: var(--gold-hi); font-size: 1.8em; line-height: 1; }
.ph .t { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7em; color: var(--cream-dim); }
.ph.back { background: repeating-linear-gradient(60deg, transparent 0 14px, var(--gold-faint) 14px 15px), #151515; }

.crossed { transform: rotate(90deg) scale(0.82); }

/* ---------- consult / methods ---------- */

.methods { display: grid; gap: 0; max-width: 720px; margin: 0 auto; border-top: 1px solid var(--gold-line); }
.method {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: start; gap: 14px;
  padding: 20px 4px; border-bottom: 1px solid var(--gold-line); transition: background 0.2s;
}
.method:hover { background: rgba(179, 146, 79, 0.06); }
.method .idx { font-family: var(--serif); color: var(--gold-hi); font-size: 22px; line-height: 1; }
.method .nm { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; }
.method .by { font-size: 11px; color: var(--gold-hi); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.method .bl { color: var(--cream-dim); font-size: 13px; margin-top: 6px; }
.method .go { color: var(--gold); padding-top: 4px; }

/* ---------- ritual (choose, shuffle, cut, draw) ---------- */

.ritual { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.ritual.fanning .stage { place-items: end center; padding: 0; overflow: hidden; }
.ritual .say {
  margin: calc(var(--frame) + 100px) auto 0; max-width: 640px; padding: 0 24px; text-align: center; line-height: 1.9;
}
.ritual .say .step { display: block; color: var(--gold-hi); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.ritual .stage { flex: 1; display: grid; place-items: center; padding: 24px; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 620px; width: 100%; border: 1px solid var(--gold-line); }
.choice { padding: 22px 18px; text-align: left; border: 0 solid var(--gold-line); transition: background 0.2s; }
.choice:nth-child(odd) { border-right-width: 1px; }
.choice:nth-child(-n+2) { border-bottom-width: 1px; }
.choice:hover { background: rgba(179, 146, 79, 0.08); }
.choice .nm { font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
.choice .su { font-family: var(--serif); color: var(--gold-hi); font-size: 17px; margin: 2px 0 6px; }
.choice .ds { color: var(--cream-dim); font-size: 12.5px; }

.question {
  width: min(560px, 100%); margin: 26px auto 0; display: block;
  background: transparent; border: 0; border-bottom: 1px solid var(--gold-line);
  color: var(--cream); font: 400 14px var(--mono); text-align: center; padding: 10px 4px;
}
.question::placeholder { color: var(--muted); }

.pile { position: relative; width: 150px; aspect-ratio: 2 / 3; cursor: pointer; }
.pile .pc { position: absolute; inset: 0; transform: translate(calc(var(--k) * -1.2px), calc(var(--k) * -1.6px)); }
.pile .pc img, .pile .pc .ph { width: 100%; height: 100%; border-radius: 5px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); object-fit: cover; }
.pile.shuffling .pc:nth-child(odd) { animation: riffle-l 0.95s cubic-bezier(.45, 0, .25, 1) 2; }
.pile.shuffling .pc:nth-child(even) { animation: riffle-r 0.95s cubic-bezier(.45, 0, .25, 1) 2; }
@keyframes riffle-l { 50% { transform: translate(-72%, -8px) rotate(-9deg); } }
@keyframes riffle-r { 50% { transform: translate(72%, -8px) rotate(9deg); } }
.pile.cutting .pc.top { transition: transform 0.5s; transform: translate(62%, -18px) rotate(6deg); }
.hint { margin-top: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-hi); text-align: center; }

/* The fan of face-down cards to choose from: an arc on wide screens, a
   grid on phones where twenty-two cards on one arc would be too thin to tap. */
.fan-wrap { width: 100%; overflow: hidden; }
.fan-wrap.arc { padding-top: 34px; }
.fan { position: relative; margin: 0 auto; width: 100%; }
.fan .fc {
  position: absolute; left: calc(50% - var(--cw) / 2); top: 44px;
  width: var(--cw); aspect-ratio: 2 / 3; transform-origin: 50% calc(var(--r) + var(--cw) * 0.75);
  transform: rotate(var(--a)); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), filter 0.3s;
  animation: fan-in 1.8s cubic-bezier(.3, .7, .2, 1) calc(var(--i) * 45ms) backwards;
}
@keyframes fan-in { from { transform: rotate(0deg) translateY(60px); opacity: 0; } }
.fan .fc img, .fan .fc .ph { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6); }
.fan .fc:hover { transform: rotate(var(--a)) translateY(-22px); }
.fan .fc.picked { transform: rotate(var(--a)) translateY(-44px); filter: drop-shadow(0 0 12px rgba(217, 188, 122, 0.8)); }
.fan.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 10px 8px; height: auto; max-width: 420px; padding: 14px 4px 0; }
.fan.grid .fc { position: relative; left: auto; top: auto; width: 100%; transform: none; }
.fan.grid .fc:hover { transform: none; }
.fan.grid .fc.picked { transform: translateY(-6px); }
.fan-count { text-align: center; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-hi); margin-top: 8px; }

/* ---------- spreads ---------- */

/* The table the spread is laid on (dealIn in ui.js): seen in perspective,
   tilted away while the cards fly in, then flat, leaning toward the mouse. */
.table-wrap { perspective: 1600px; perspective-origin: 50% 30%; }
.table {
  transform-style: preserve-3d;
  transform: rotateX(var(--lean-x, 0deg)) rotateY(var(--lean-y, 0deg));
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.table.dealing { transform: rotateX(30deg) scale(0.92); transition: none; }
.table.settling { transition: transform 2.4s cubic-bezier(.45, 0, .2, 1); }
.table > div, .table .strip { transform-style: preserve-3d; }
/* The cards ride a hair above the table. Lying in its plane, they tied with
   the table in depth, and hit testing sometimes picked the table: clicks on a
   visible card went nowhere, and its hover flickered as the table leaned. */
.table > .slot { transform: translate(-50%, -50%) translateZ(2px); }
.table .strip { transform: translateZ(2px); }
.deal-pile {
  position: absolute; left: 50%; top: 50%; width: var(--cw, 90px); aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%); transition: opacity 1.2s ease;
}
.deal-pile span { position: absolute; inset: 0; transform: translate(calc(var(--k) * -1px), calc(var(--k) * -1.5px)); }
.deal-pile img, .deal-pile .ph { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.deal-pile.gone { opacity: 0; }

.spread { position: relative; margin: 10px auto 0; }
.slot { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -50%); }
.slot .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream-dim); text-align: center; line-height: 1.25; max-width: calc(var(--cw) * 1.5); }
.slot .lbl b { font-family: var(--serif); font-weight: 400; color: var(--gold-hi); font-size: 13px; margin-right: 4px; }

.spread.rapid { --cw: clamp(56px, min(15vw, calc((100vh - 210px) / 8)), 118px); width: calc(var(--cw) * 5.6); height: calc(var(--cw) * 6.4); max-width: 100%; }
.spread.great { --cw: clamp(24px, 7.2vw, 62px); }
.spread.great .slot { gap: calc(var(--cw) * 0.06); }
.spread.great .slot .lbl { font-size: max(8px, calc(var(--cw) * 0.2)); line-height: 1.1; }
.spread.great .slot .lbl b { font-size: max(9px, calc(var(--cw) * 0.24)); margin: 0; }
/* The Inquirer: a little smaller than the drawn cards, ringed in gold. */
.slot.inq .tcard { transform: scale(0.76); }
.slot.inq .face { box-shadow: 0 0 0 1px var(--gold-hi), 0 0 18px rgba(217, 188, 122, 0.45); }
.spread .tcard { --cw: inherit; width: var(--cw); }

.rows { display: grid; gap: 22px; }
.row-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-hi); margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.row-lbl::after { content: ''; flex: 1; height: 1px; background: var(--gold-line); }
.strip { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.strip .tcard { --cw: clamp(44px, 7vw, 70px); }
.strip.big .tcard { --cw: clamp(70px, 12vw, 120px); }

.actions { display: flex; justify-content: center; margin: 26px 0 8px; }

/* ---------- the paper sheet (readings and card pages) ---------- */

.sheet {
  position: relative; background: var(--paper); color: var(--paper-ink);
  border-radius: 3px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  max-width: 760px; margin: 0 auto;
}
.sheet + .sheet { margin-top: 18px; }
.sheet-head { display: grid; grid-template-columns: minmax(0, 190px) 1fr; gap: 22px; padding: 22px; }
.sheet-head .art { cursor: zoom-in; }
.sheet-head .art img, .sheet-head .art .ph { width: 100%; border-radius: 3px; aspect-ratio: 2 / 3; object-fit: cover; }
.sheet .pos { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--paper-muted); }
.sheet .nm { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 4.6vw, 44px); line-height: 0.92; letter-spacing: -0.01em; margin: 6px 0 4px; }
.sheet .nr { font-family: var(--serif); color: var(--gold); font-size: 18px; }
.sheet .msg { font-size: 14px; line-height: 1.75; margin: 12px 0 0; }
.sheet .fine { font-size: 12.5px; color: var(--paper-muted); line-height: 1.7; margin-top: 8px; }
.sheet .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.sheet .more .spark { color: var(--paper-ink); width: 9px; height: 9px; }

.quad { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(28, 26, 23, 0.35); position: relative; }
.quad > div { padding: 16px 20px 20px; font-size: 13px; line-height: 1.7; }
.quad > div:nth-child(odd) { border-right: 1px solid rgba(28, 26, 23, 0.35); }
.quad > div:nth-child(-n+2) { border-bottom: 1px solid rgba(28, 26, 23, 0.35); }
.quad h4 { margin: 0 0 8px; font-weight: 400; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; }
.quad .x { position: absolute; width: 9px; height: 9px; color: var(--paper-ink); }
.quad .x.m { left: calc(50% - 4.5px); top: calc(50% - 4.5px); }
.quad .x.t { left: calc(50% - 4.5px); top: -5px; }
.quad .x.b { left: calc(50% - 4.5px); bottom: -5px; }
.quad .x.l { left: -5px; top: calc(50% - 4.5px); }
.quad .x.r { right: -5px; top: calc(50% - 4.5px); }
.jp { font-family: var(--jp); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; }

/* ---------- all cards ---------- */

.gridlines {
  position: fixed; inset: var(--frame); z-index: 0; pointer-events: none; border-radius: 10px;
  background-image:
    linear-gradient(rgba(243, 237, 225, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 237, 225, 0.05) 1px, transparent 1px);
  background-size: calc((100vw - 2 * var(--frame)) / 5) 34vh;
}
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0 auto 30px; width: fit-content; border: 1px solid var(--gold-line); }
.tabs a { padding: 8px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; border-right: 1px solid var(--gold-line); }
.tabs a:last-child { border-right: 0; }
.tabs a.on { background: var(--cream); color: var(--ink); }
.portraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 18px 16px; position: relative; z-index: 1; }
.portrait { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; text-align: center; }
.portrait .pic {
  width: 100%; aspect-ratio: 4 / 5; background-size: 175% auto; background-position: 50% 30%;
  background-color: #1c1c1c;
  -webkit-mask: radial-gradient(circle 9px at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
                radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
                radial-gradient(circle 9px at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
                radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
          mask: radial-gradient(circle 9px at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
                radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
                radial-gradient(circle 9px at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
                radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
  transition: filter 0.25s;
}
.portrait:hover .pic { filter: brightness(1.12); }
/* The gilded edge: a gold layer 3px larger than the picture, cut by the same
   scalloped corners (radius 6px about the picture's own corner centres), so
   the gold runs an even 3px all round, curves included. The light moves
   across the gold on hover. */
.portrait .gild {
  display: block; width: 100%; padding: 3px;
  background: linear-gradient(135deg, #6c4c1a, #f4da8f 17%, #a37a2c 34%, #fbe6a6 50%, #87611f 67%, #e8c877 84%, #6c4c1a) 0 0 / 240% 240%;
  -webkit-mask: radial-gradient(circle 6px at 3px 3px, transparent 98%, #000) top left / 51% 51% no-repeat,
                radial-gradient(circle 6px at calc(100% - 3px) 3px, transparent 98%, #000) top right / 51% 51% no-repeat,
                radial-gradient(circle 6px at 3px calc(100% - 3px), transparent 98%, #000) bottom left / 51% 51% no-repeat,
                radial-gradient(circle 6px at calc(100% - 3px) calc(100% - 3px), transparent 98%, #000) bottom right / 51% 51% no-repeat;
          mask: radial-gradient(circle 6px at 3px 3px, transparent 98%, #000) top left / 51% 51% no-repeat,
                radial-gradient(circle 6px at calc(100% - 3px) 3px, transparent 98%, #000) top right / 51% 51% no-repeat,
                radial-gradient(circle 6px at 3px calc(100% - 3px), transparent 98%, #000) bottom left / 51% 51% no-repeat,
                radial-gradient(circle 6px at calc(100% - 3px) calc(100% - 3px), transparent 98%, #000) bottom right / 51% 51% no-repeat;
  transition: transform 0.25s, background-position 1.2s ease;
}
.portrait:hover .gild { transform: translateY(-4px); background-position: 100% 100%; }
.portrait .gild .pic { display: block; }
.portrait .cap { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; color: var(--cream-dim); line-height: 1.3; }
.portrait .cap b { display: block; font-family: var(--serif); font-weight: 400; color: var(--gold-hi); font-size: 13px; }

/* ---------- today ---------- */

.today-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
.today-cards .tc { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.still { display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 5px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); transition: transform 0.25s; }
.still img, .still .ph { width: 100%; height: 100%; object-fit: cover; }
.today-cards .tc:hover .still { transform: translateY(-4px); }
.today-cards .tc .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-hi); }
.today-cards .tc .v { font-size: 12.5px; color: var(--cream-dim); line-height: 1.5; }

/* ---------- key, journal, credits ---------- */

.prose { max-width: 720px; margin: 0 auto; font-size: 14px; line-height: 1.85; }
.prose h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 30px; letter-spacing: -0.01em; margin: 44px 0 14px; color: var(--cream); }
.prose h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-hi); margin: 24px 0 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 13px; }
.prose th, .prose td { border-bottom: 1px solid var(--gold-line); padding: 8px 6px; text-align: left; vertical-align: top; }
.prose th { font-weight: 400; color: var(--gold-hi); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.calc { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; border: 1px solid var(--gold-line); padding: 16px; margin: 14px 0; }
.calc input { width: 110px; background: transparent; border: 0; border-bottom: 1px solid var(--gold-line); color: var(--cream); font: 400 18px var(--mono); padding: 4px; text-align: center; }
.calc output { font-size: 13px; line-height: 1.8; }
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.toc a { border-bottom: 1px solid var(--gold-line); padding-bottom: 2px; }

.journal { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--gold-line); }
.jitem { display: grid; gap: 4px; padding: 16px 4px; border-bottom: 1px solid var(--gold-line); }
.jitem:hover { background: rgba(179, 146, 79, 0.06); }
.jitem .w { font-size: 11px; color: var(--gold-hi); text-transform: uppercase; letter-spacing: 0.1em; }
.jitem .m { font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; }
.jitem .q { color: var(--cream-dim); font-size: 13px; }
.notes { width: 100%; min-height: 110px; background: transparent; color: var(--paper-ink); border: 1px solid rgba(28, 26, 23, 0.35); font: 400 13.5px/1.7 var(--mono); padding: 12px; resize: vertical; }

/* ---------- overlays ---------- */

.zoom { position: fixed; inset: 0; z-index: 50; background: rgba(8, 8, 9, 0.96); }
.zoom[hidden] { display: none; }
/* 'safe': content bigger than the box starts at its edge instead of spilling
   off the top and left, where it could never be scrolled back into view. */
.zoom-scroll { width: 100%; height: 100%; overflow: auto; display: grid; place-items: safe center; }
.zoom img { max-width: 100%; max-height: 100vh; object-fit: contain; cursor: zoom-in; }
.zoom.natural .zoom-scroll { display: block; place-items: normal; }
.zoom.natural img { max-width: none; max-height: none; cursor: zoom-out; }
.zoom.natural .zoom-scroll { cursor: grab; user-select: none; }
.zoom.natural .zoom-scroll:active { cursor: grabbing; }
.x-btn { position: absolute; top: calc(var(--frame) + 12px); right: calc(var(--frame) + 12px); z-index: 2; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; background: rgba(19, 20, 21, 0.8); padding: 8px 12px; border: 1px solid var(--gold-line); border-radius: 4px; }

.dlg { border: 0; padding: 0; background: transparent; max-width: min(760px, calc(100vw - 24px)); width: 100%; max-height: 90vh; }
.dlg::backdrop { background: rgba(8, 8, 9, 0.8); backdrop-filter: blur(3px); }
.dlg .x-btn { position: sticky; float: right; top: 10px; right: 10px; margin: 10px 10px 0 0; color: var(--paper-ink); background: var(--paper); border-color: rgba(28, 26, 23, 0.3); }

/* Reading results: one hairline row per position; each opens the card. */
.read-rows { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--gold-line); }
.read-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'pos go' 'card go' 'msg go';
  gap: 4px 16px; width: 100%; padding: 18px 6px; text-align: left; border-bottom: 1px solid var(--gold-line);
  transition: background 0.2s;
}
.read-row:hover { background: rgba(179, 146, 79, 0.07); }
.rr-pos { grid-area: pos; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-hi); }
.rr-card { grid-area: card; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; letter-spacing: 0.01em; }
.rr-msg { grid-area: msg; font-size: 13px; color: var(--cream-dim); line-height: 1.6; }
.rr-go { grid-area: go; align-self: center; width: 12px; height: 12px; }

/* ---------- a drawn card: arcanamana's result page ---------- */
/* The stage is pinned (sticky) inside the scrolling overlay; --p is scroll
   progress in viewport heights, set by openReveal(). The card's frame opens
   in the middle of the dark screen and grows to fill it, revealing the art;
   then the name rises between the art and the figure cut out of it. Scrolling
   lifts the name faster than the art, darkens the scene and slides the sheet
   up over it. The art and the figure share one transform, so they stay in
   register. */

.reveal {
  --p: 0;
  --ch: min(60vh, 150vw);   /* the card-sized frame's height; its width is 0.58 of it */
  --grow: 1.45s cubic-bezier(0.65, 0, 0.25, 1) 0.5s;
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overflow-x: hidden;
  background: #060607; animation: rv-in 0.45s ease both; overscroll-behavior: contain;
}
@keyframes rv-in { from { opacity: 0; } }
.reveal { scrollbar-width: none; }
.reveal::-webkit-scrollbar { display: none; }
.reveal.closing { animation: rv-out 0.4s ease forwards; pointer-events: none; }
@keyframes rv-out { to { opacity: 0; } }
.rv-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.rv-art { position: absolute; inset: 0; animation: rv-open var(--grow) backwards; }
@keyframes rv-open {
  from { clip-path: inset(calc(50% - var(--ch) / 2) calc(50% - var(--ch) * 0.29) round 12px); }
  to { clip-path: inset(0 round 0); }
}
/* The art and the box holding the figure move as one (the figure's own
   pixels are still in the art underneath). --mx/--my are the mouse position,
   -1..1; --oy frames the band of art on screen (set per card by the script). */
.rv-bg, .rv-fgwrap {
  --s: 1.3;
  position: absolute; left: -6%; top: -6%; width: 112%; height: 112%;
  transform: translate(calc(var(--mx, 0) * -5px), calc(var(--p) * -5vh + var(--my, 0) * -4px)) scale(calc(var(--s) + var(--p) * 0.05));
  animation: rv-bg 2.5s cubic-bezier(0.3, 0.6, 0.2, 1) 0.85s backwards;
  will-change: transform;
}
@media (min-aspect-ratio: 1/1) { .rv-bg, .rv-fgwrap { --s: 1.46; } }
@keyframes rv-bg { from { opacity: 0; transform: scale(calc(var(--s) + 0.14)); } }
.rv-bg, .rv-fg { object-fit: cover; object-position: 50% var(--oy, 36%); filter: brightness(0.82) saturate(1.05); }
/* The figure, cut out of the art: it steps forward over the name with a
   shadow, comes on as the page scrolls, and follows the mouse further than
   the art does. Scaled about its own centre, it keeps covering its copy. */
.rv-fg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: brightness(0.82) saturate(1.05) drop-shadow(0 22px 30px rgba(0, 0, 0, 0.6));
  transform: translate(calc(var(--mx, 0) * 9px), calc(var(--my, 0) * 6px)) scale(calc(1.04 + var(--p) * 0.08));
  animation: rv-step 1.9s cubic-bezier(0.3, 0.6, 0.2, 1) 2s backwards;
  will-change: transform;
}
@keyframes rv-step { from { transform: scale(1); filter: brightness(0.82) saturate(1.05) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); } }
/* Over a clean plate nothing of the figure is left behind it, so it can
   truly move: it rises faster than the art as the page scrolls, comes
   further forward and follows the mouse further. */
.rv-art.has-plate .rv-fg {
  transform: translate(calc(var(--mx, 0) * 22px), calc(var(--p) * -9vh + var(--my, 0) * 14px)) scale(calc(1.03 + var(--p) * 0.12));
}
.ph-bg { background: radial-gradient(circle at 50% 40%, #2a2419, #0d0d0e 70%); }
.rv-title {
  --title-max: 17vw;
  position: absolute; left: 2vw; right: 2vw; top: calc(var(--frame) + 4vh); margin: 0;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.8;
  letter-spacing: -0.01em; text-align: center; color: var(--accent);
  transform: translateY(calc(var(--p) * -26vh)); text-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
  animation: rv-title 1.9s cubic-bezier(0.3, 0.6, 0.2, 1) 1.55s backwards;
  will-change: transform;
}
@keyframes rv-title { from { opacity: 0; translate: 0 10vh; } }
@media (max-aspect-ratio: 1/1) { .rv-title { --title-max: 25vw; } }
.rv-over {
  position: absolute; left: calc(var(--frame) + 3vw); top: 38vh; max-width: min(340px, 80vw); margin: 0;
  font-size: 13px; line-height: 1.85; color: var(--cream); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
  opacity: calc(1 - var(--p) * 2.4); animation: rv-fade 1.6s 2.4s ease backwards;
}
@keyframes rv-fade { from { opacity: 0; } }
.rv-dim { position: absolute; inset: 0; background: #070708; opacity: min(0.52, calc(0.06 + var(--p) * 0.55)); pointer-events: none; }
.rv-hint {
  position: absolute; left: 50%; bottom: calc(var(--frame) + 76px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream);
  opacity: calc(1 - var(--p) * 3.5); animation: rv-fade 1.4s 2.9s ease backwards;
}
.rv-hint .line { width: 1px; height: 34px; background: var(--cream-dim); }
.rv-hint .spark { color: var(--cream); width: 9px; height: 9px; }
.rv-frame {
  position: absolute; inset: var(--frame); pointer-events: none; color: var(--gold);
  animation: rv-grow var(--grow) backwards;
}
@keyframes rv-grow {
  from {
    top: calc(50% - var(--ch) / 2); bottom: calc(50% - var(--ch) / 2);
    left: calc(50% - var(--ch) * 0.29); right: calc(50% - var(--ch) * 0.29);
  }
}
/* Stepping through the deck swaps cards in place: no card-sized opening,
   and a quicker entrance for the art, the name and the figure. */
.reveal.quick, .reveal.quick .rv-art, .reveal.quick .rv-frame { animation: none; }
.reveal.quick .rv-bg, .reveal.quick .rv-fgwrap { animation-duration: 0.7s; animation-delay: 0s; }
.reveal.quick .rv-title { animation-duration: 0.9s; animation-delay: 0.1s; }
.reveal.quick .rv-fg { animation-duration: 0.9s; animation-delay: 0.3s; }
.reveal.quick .rv-over { animation-delay: 0.4s; }
.reveal.quick .rv-hint { animation-delay: 0.5s; }
.fa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; }
.rv-num, .rv-name { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--serif); color: var(--gold-hi); white-space: nowrap; line-height: 1; }
.rv-num { top: 27px; font-size: 18px; }
.rv-name { bottom: 30px; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.rv-body { position: relative; z-index: 2; margin-top: 4vh; padding: 0 16px 16vh; }
.rv-sheet { max-width: 500px; }
.rv-sheet .sheet-head { grid-template-columns: 42% 1fr; gap: 16px; padding: 16px 18px 18px; }
.rv-sheet .nm { font-size: clamp(28px, 3.2vw, 40px); }
.rv-sheet .msg { font-size: 13px; line-height: 1.7; margin-top: 10px; }
.rv-sheet .fine { font-size: 12px; }
.rv-sheet .quad > div { padding: 14px 16px 16px; font-size: 12.5px; }
.rv-top { display: flex; align-items: center; gap: 10px; padding: 14px 22px 0; font-family: var(--serif); font-size: 16px; color: var(--paper-ink); }
.rv-top::before, .rv-top::after { content: ''; flex: 1; height: 1px; background: rgba(28, 26, 23, 0.4); order: 0; }
.rv-top .spark { color: var(--paper-ink); width: 8px; height: 8px; }
.rv-top .spark:first-child { order: -1; } .rv-top .spark:last-of-type { order: 3; }
.rv-top span { order: 1; } .rv-top::after { order: 2; }
.rv-sheet .more .dash { display: inline-block; width: 22px; height: 1px; background: var(--paper-ink); }
/* A quick way out once the scene has darkened; the stage starts clean, as on
   arcanamana, and Escape or the browser's back button close it too. */
.rv-back {
  position: fixed; z-index: 3; top: calc(var(--frame) + 22px); left: calc(var(--frame) + 22px);
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(10, 10, 11, 0.8); padding: 6px 10px 6px 4px; border-radius: 6px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.reveal.scrolled .rv-back { opacity: 1; visibility: visible; }
.rv-back .line { width: 22px; height: 1px; background: var(--cream); }
.rv-back .spark { color: var(--cream); }
.reveal .pair { margin-top: 26px; }
.heb { font-family: 'Times New Roman', serif; font-size: 1.35em; }

/* ---------- a card browsed from the deck: arcanamana's detail page ---------- */

.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.dt-left { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; place-items: center; overflow: hidden; }
.dt-card {
  position: relative; z-index: 1; height: min(66vh, 640px); aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); cursor: zoom-in; transition: transform 0.4s;
}
.dt-card:hover { transform: translateY(-4px); }
.dt-card img, .dt-card .ph { width: 100%; height: 100%; object-fit: cover; }
/* Turning in three.js (card3d.js): the canvas reaches past the card so its
   near corners have room as it turns; the flat picture waits underneath. */
.dt-card.spinning { overflow: visible; box-shadow: none; }
.dt-card.spinning img { visibility: hidden; }
.dt-card .card3d { position: absolute; left: -13%; top: -13%; width: 126%; height: 126%; pointer-events: none; }
.dt-card.spinning:hover { transform: none; }

/* Sofia reading the card's page */
.dt-voice {
  display: inline-flex; align-items: center; gap: 10px; margin: -6px 0 22px; padding: 9px 18px 9px 14px;
  border: 1px solid var(--gold-line); border-radius: 999px; color: var(--gold-hi);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(12, 12, 14, 0.5);
  transition: background 0.3s, border-color 0.3s;
}
.dt-voice:hover { border-color: var(--gold-hi); background: rgba(40, 32, 18, 0.6); }
.dt-voice .dv-icon { display: inline-grid; }
.dt-voice.on .dv-w1 { animation: dv-wave 1.1s ease-in-out infinite; }
.dt-voice.on .dv-w2 { animation: dv-wave 1.1s ease-in-out 0.25s infinite; }
@keyframes dv-wave { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .dt-voice.on .dv-w1, .dt-voice.on .dv-w2 { animation: none; } }
.rays { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rays i {
  position: absolute; width: 1px; height: 128vh;
  background: linear-gradient(transparent 6%, rgba(243, 237, 225, 0.22) 26%, transparent 42%, transparent 58%, rgba(243, 237, 225, 0.22) 74%, transparent 94%);
  transform: rotate(var(--r)) scaleY(1);
  animation: ray 5.4s ease-in-out var(--d) infinite;
}
@keyframes ray { 50% { transform: rotate(var(--r)) scaleY(1.16); opacity: 0.55; } }
.dt-right { padding: calc(var(--frame) + 108px) calc(var(--frame) + 7vw) calc(var(--frame) + 90px) 1vw; }
.dt-title {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; color: var(--cream);
  font-size: clamp(54px, 6.6vw, 118px); line-height: 0.86; letter-spacing: -0.01em; margin: 14px 0 26px;
}
.dt-num { color: var(--accent); }
.dt-sec h3 { margin: 32px 0 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); }
.dt-sec p { font-size: 13.5px; line-height: 1.9; color: var(--cream-dim); margin: 0 0 10px; }
.dt-sec .lead { font-size: 16px; color: var(--cream); }
.dt-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 13.5px; line-height: 1.7; }
.dt-list dt { color: var(--gold-hi); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; padding-top: 2px; }
.dt-list dd { margin: 0; color: var(--cream-dim); }
.dt-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.dt-pager a:hover, .ul:hover { color: var(--gold-hi); }
.ul { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Sofia's interpretation (narrate.js) ---------- */

.interpret {
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 26px;
  border: 1px solid var(--gold-line); border-radius: 999px;
  background: linear-gradient(180deg, rgba(217, 188, 122, 0.14), rgba(179, 146, 79, 0.05));
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi);
  transition: background 0.3s, box-shadow 0.3s, color 0.3s;
}
.interpret:hover { background: rgba(217, 188, 122, 0.2); box-shadow: 0 0 26px rgba(217, 188, 122, 0.25); color: var(--cream); }
.interpret .spark { width: 10px; height: 10px; }

.narrate {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 6, 7, 0.82); backdrop-filter: blur(6px); animation: rv-in 0.5s ease both;
}
.narrate[hidden] { display: none; }
.nr-panel {
  position: relative; width: min(780px, 100%); height: min(86vh, 900px); display: flex; flex-direction: column;
  border: 1px solid var(--gold-line); border-radius: 12px;
  background: linear-gradient(180deg, #151517, #0c0c0e); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
}
.nr-panel:focus { outline: none; }   /* focused by script on open; its buttons keep their rings */
.nr-head {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 20px 4px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-hi);
}
.nr-head .spark { width: 9px; height: 9px; }
/* A scroll of text that the voice moves through: the lines fade in at the
   bottom and out at the top, and the current sentence is lit. */
.nr-scroll {
  flex: 1; overflow-y: auto; padding: 14vh 34px 32vh; scrollbar-width: none;
  -webkit-mask: linear-gradient(transparent, #000 13%, #000 78%, transparent);
          mask: linear-gradient(transparent, #000 13%, #000 78%, transparent);
}
.nr-scroll::-webkit-scrollbar { display: none; }
.nr-text { max-width: 600px; margin: 0 auto; font-family: var(--serif); font-size: clamp(19px, 2.3vw, 25px); line-height: 1.62; color: var(--cream); }
.nr-text p { margin: 0 0 1.1em; }
.nr-text .nr-note { margin-top: 2em; font: 400 11px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.nr-writing::after {
  content: ''; display: inline-block; width: 0.45em; height: 1em; margin-left: 3px; vertical-align: -0.12em;
  background: var(--gold-hi); animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.nr-s { transition: opacity 0.7s ease, color 0.7s ease, text-shadow 0.7s ease; }
.nr-text:has(.now) .nr-s { opacity: 0.34; }
.nr-text:has(.now) .nr-s.past { opacity: 0.52; }
.nr-text .nr-s.now { opacity: 1; color: #fff7e6; text-shadow: 0 0 20px rgba(217, 188, 122, 0.35); }
.nr-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 18px 16px; border-top: 1px solid var(--gold-faint);
}
.nr-state { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; font-size: 12px; line-height: 1.5; color: var(--cream-dim); }
.nr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nr-btn {
  padding: 8px 14px; border: 1px solid var(--gold-line); border-radius: 6px; background: rgba(19, 20, 21, 0.6);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream);
}
.nr-btn:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.nr-btn[hidden] { display: none; }
.nr-dots { display: inline-flex; gap: 4px; }
.nr-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-hi); animation: nr-dot 1.2s ease-in-out infinite; }
.nr-dots i:nth-child(2) { animation-delay: 0.2s; }
.nr-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes nr-dot { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* ---------- small screens ---------- */

@media (max-width: 720px) {
  :root { --frame: 10px; }
  .page { padding: calc(var(--frame) + 74px) calc(var(--frame) + 12px) calc(var(--frame) + 40px); }
  .sheet-head { grid-template-columns: 110px 1fr; gap: 14px; padding: 16px; }
  .quad { grid-template-columns: 1fr; }
  .quad > div:nth-child(odd) { border-right: 0; }
  .quad > div:not(:last-child) { border-bottom: 1px solid rgba(28, 26, 23, 0.35); }
  .quad .x { display: none; }
  .choices { grid-template-columns: 1fr; }
  .choice:nth-child(odd) { border-right-width: 0; }
  .choice:not(:last-child) { border-bottom-width: 1px; }
  .today-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method { grid-template-columns: 26px 1fr; }
  .method .go { display: none; }
  .home-foot .row { font-size: 10.5px; }
  .detail { grid-template-columns: 1fr; }
  .dt-left { position: relative; height: 74vh; }
  .dt-card { height: min(53vh, 480px); }   /* room for its corners as it turns (card3d.js) */
  .dt-right { padding: 8px calc(var(--frame) + 16px) calc(var(--frame) + 60px); }
  .rv-over { top: auto; bottom: calc(var(--frame) + 170px); }
  .rv-body { margin-top: 3vh; padding-bottom: 12vh; }
  .rv-sheet .sheet-head { grid-template-columns: 38% 1fr; gap: 12px; padding: 14px; }
  .narrate { padding: 8px; }
  .nr-panel { height: 92vh; height: 92dvh; }
  .nr-scroll { padding: 10vh 20px 30vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}