/* ==========================================================================
   Ghost in the Log: séance held inside a log file
   ========================================================================== */

:root {
  --velvet: #0C0510;
  --velvet-2: #170A1E;
  --candle: #FFB547;
  --bone: #EFE6D4;
  --bone-dim: #B8AD9B;
  --mint: #8CFFD0;
  --lilac: #B9A2FF;
  --orchid: #FF86D8;
  --gilt: #C8A45C;
  --ward: #FF5A5A;

  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Didot LT STD", Georgia, serif;
  --mono: "Victor Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --bar-h: 64px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--bar-h);
  background: var(--velvet);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--velvet);
  color: var(--bone);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--candle); color: var(--velvet); }

a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--candle);
  outline-offset: 3px;
  border-radius: 4px;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* -------------------------------------------------------------- the smoke */
#ectoplasm {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

html.no-gl body {
  background:
    radial-gradient(55% 45% at 25% 30%, rgba(185, 162, 255, .22), transparent 62%),
    radial-gradient(45% 40% at 75% 55%, rgba(255, 134, 216, .16), transparent 62%),
    radial-gradient(40% 35% at 50% 92%, rgba(140, 255, 208, .14), transparent 62%),
    var(--velvet);
  background-attachment: fixed;
}
html.no-gl #ectoplasm { display: none; }

main, .goodbye { position: relative; z-index: 1; }

/* soft velvet pool behind text so smoke never fights legibility */
.scrim { position: relative; isolation: isolate; }
.scrim::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(12, 5, 16, .82), rgba(12, 5, 16, .55) 55%, rgba(12, 5, 16, 0));
  pointer-events: none;
}

.caret {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .15em;
  vertical-align: -.15em;
  background: var(--candle);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ================================================================ GATE */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  text-align: center;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
html:not(.js) .gate { display: none; }
.gate.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__inner { max-width: 560px; }

.gate__candle {
  position: relative;
  width: 60px;
  height: 210px;
  margin: 0 auto 26px;
}
.gate__wax {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 38px;
  height: 118px;
  transform: translateX(-50%);
  border-radius: 7px 7px 4px 4px;
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(255, 200, 120, .55), transparent 60%),
    linear-gradient(90deg, #8f7d63, #e9dfca 32%, #f7f0e2 48%, #d8cbb2 70%, #7d6c55);
  box-shadow: 0 -10px 40px rgba(255, 181, 71, .25), 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.gate__wax::before { /* a wax drip */
  content: "";
  position: absolute;
  top: 2px;
  left: 7px;
  width: 7px;
  height: 34px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, #e3d7bf, #f8f1e4);
}
.gate__wick {
  position: absolute;
  left: 50%;
  bottom: 118px;
  width: 2px;
  height: 11px;
  transform: translateX(-50%);
  background: linear-gradient(#000, #3a2a1c);
  border-radius: 1px;
}

.gate__brand {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.gate__cmd {
  margin: 0 0 14px;
  font: 400 15px/1.5 var(--mono);
  color: var(--mint);
}
.gate__sigil { color: var(--candle); }
.gate__note {
  margin: 0 auto 30px;
  max-width: 44ch;
  font: italic 400 14px/1.6 var(--mono);
  color: var(--bone-dim);
  text-wrap: balance;
}
.gate__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 26px; }

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 14px 24px;
  font: 500 15px/1 var(--mono);
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--candle {
  background: var(--candle);
  color: var(--velvet);
  box-shadow: 0 0 0 0 rgba(255, 181, 71, .5), 0 10px 40px -8px rgba(255, 181, 71, .6);
}
.btn--candle:hover { box-shadow: 0 0 0 6px rgba(255, 181, 71, .18), 0 10px 50px -6px rgba(255, 181, 71, .8); }
.btn--quiet {
  background: rgba(12, 5, 16, .5);
  color: var(--bone);
  border-color: rgba(239, 230, 212, .28);
}
.btn--quiet:hover { border-color: var(--bone); }

.lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(239, 230, 212, .18); }
.lang button {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 11px;
  font: 500 12px/1 var(--mono);
  color: var(--bone-dim);
  cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--bone); color: var(--velvet); }

/* main content hidden while the gate is open */
html.gate-open main,
html.gate-open .bar,
html.gate-open .goodbye { opacity: 0; visibility: hidden; }
main, .bar, .goodbye { transition: opacity 1.4s ease .3s; }

/* ================================================================ BAR */
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  font: 400 13px/1 var(--mono);
  color: var(--bone-dim);
  background: linear-gradient(180deg, rgba(12, 5, 16, .82), rgba(12, 5, 16, .4) 70%, rgba(12, 5, 16, 0));
}
.bar__brand { color: var(--bone); text-decoration: none; font-weight: 600; font-size: 14px; }
.bar__brand span { color: var(--candle); }
.bar__nav { display: flex; gap: 26px; }
.bar__nav a { text-decoration: none; font-style: italic; transition: color .25s; }
.bar__nav a:hover { color: var(--candle); }
.bar__controls { display: flex; align-items: center; gap: 12px; }

.veil {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 3px 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239, 230, 212, .16);
  background: rgba(12, 5, 16, .45);
}
.veil__label { margin-right: 6px; font-style: italic; }
.veil button {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  font: 400 12px/1 var(--mono);
  color: var(--bone-dim);
  cursor: pointer;
  transition: color .25s, background-color .25s;
}
.veil button:hover { color: var(--bone); }
.veil button[aria-checked="true"] { background: var(--candle); color: var(--velvet); font-weight: 600; }
.veil button[data-veil="torn"][aria-checked="true"] {
  background: linear-gradient(100deg, var(--mint), var(--lilac), var(--orchid), var(--candle));
  background-size: 300% 100%;
  animation: foilshift 6s linear infinite;
}

.sound {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(239, 230, 212, .16);
  background: rgba(12, 5, 16, .45);
  border-radius: 999px;
  padding: 6px 12px 6px 9px;
  font: 400 12px/1 var(--mono);
  color: var(--bone-dim);
  cursor: pointer;
}
.sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound .sound__cone { fill: currentColor; stroke: none; }
.sound .sound__wave { display: none; }
.sound[aria-pressed="true"] { color: var(--candle); border-color: rgba(255, 181, 71, .5); }
.sound[aria-pressed="true"] .sound__wave { display: block; }
.sound[aria-pressed="true"] .sound__mute { display: none; }

.lang--bar { background: rgba(12, 5, 16, .45); }

@media (max-width: 980px) { .bar__nav { display: none; } }
@media (max-width: 640px) {
  :root { --bar-h: 56px; }
  .veil__label, .sound__label { display: none; }
  .bar__controls { gap: 6px; }
  .veil { padding-left: 3px; }
  .veil button { padding: 6px 9px; font-size: 0; line-height: 0; }
  .veil button::before { font-size: 14px; line-height: 1; display: block; }
  .veil button[data-veil="intact"]::before { content: "○"; }
  .veil button[data-veil="thin"]::before { content: "◐"; }
  .veil button[data-veil="torn"]::before { content: "✺"; }
  .sound { padding: 6px 8px; }
  .bar__brand span { display: none; }
}
@media (max-width: 380px) {
  .bar__brand { font-size: 12px; }
  .veil button { padding: 6px 7px; }
}

/* ================================================================ BOARD (hero) */
.board {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--bar-h) + clamp(16px, 4vh, 48px)) var(--gutter) clamp(32px, 6vh, 64px);
  text-align: center;
}

.board__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(3.3rem, 10.6vw, 11.5rem);
  line-height: .9;
  letter-spacing: -.025em;
  color: var(--bone);
  text-shadow: 0 0 60px rgba(12, 5, 16, .9), 0 4px 30px rgba(12, 5, 16, .6);
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.board__title .w { display: inline-block; white-space: nowrap; }
.board__title .ch {
  display: inline-block;
  font-variation-settings: "wght" 800, "opsz" 96;
}
html.ready .board__title .ch {
  animation: breathe 7s ease-in-out infinite, rise 1.6s var(--ease-out) both;
  animation-delay: calc(var(--i) * -0.32s), calc(var(--i) * 60ms + 200ms);
}
@keyframes breathe {
  0%, 100% { font-variation-settings: "wght" 480, "opsz" 96; }
  50% { font-variation-settings: "wght" 900, "opsz" 96; }
}
@keyframes rise {
  from { opacity: 0; filter: blur(14px); transform: translateY(.25em) scale(1.08); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

.board__tagline {
  margin: clamp(14px, 2.4vh, 26px) 0 0;
  max-width: 52ch;
  font: italic 400 clamp(14px, 1.15vw, 16px)/1.55 var(--mono);
  color: var(--bone-dim);
  text-shadow: 0 0 20px var(--velvet), 0 0 6px var(--velvet);
}

/* the Ouija board of light */
.ouija {
  position: relative;
  width: min(1120px, 100%);
  height: clamp(190px, 31vh, 340px);
  margin-top: clamp(10px, 3vh, 34px);
}
.ouija__glyphs { position: absolute; inset: 0; }
.ouija__glyph {
  position: absolute;
  left: 0;
  top: 0;
  appearance: none;
  background: none;
  border: 0;
  padding: .08em .14em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 3vw, 2.85rem);
  line-height: 1;
  color: var(--bone);
  opacity: .78;
  cursor: pointer;
  text-shadow: 0 0 18px rgba(12, 5, 16, .95), 0 0 4px rgba(12, 5, 16, .9);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
  transition: color .35s, opacity .35s, text-shadow .35s;
  font-variation-settings: "opsz" 60;
}
.ouija__glyph:hover { opacity: 1; color: var(--candle); }
.ouija__glyph.is-lit,
.ouija__yes.is-lit,
.ouija__no.is-lit {
  opacity: 1;
  color: var(--candle);
  text-shadow: 0 0 10px var(--candle), 0 0 34px rgba(255, 181, 71, .75), 0 0 80px rgba(255, 181, 71, .45);
}
.ouija__num { font-size: clamp(.95rem, 2vw, 1.8rem); font-style: italic; opacity: .62; }

.ouija__yes, .ouija__no {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.3vw, 2.1rem);
  color: var(--bone);
  opacity: .85;
  text-shadow: 0 0 18px rgba(12, 5, 16, .95);
  transition: color .35s, text-shadow .35s;
}
.ouija__yes { left: 0; }
.ouija__no { right: 0; }
.ouija__sun, .ouija__moon {
  width: clamp(30px, 4.2vw, 56px);
  height: clamp(30px, 4.2vw, 56px);
  fill: none;
  stroke: var(--gilt);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.ouija__sun .f, .ouija__moon .f { fill: var(--gilt); stroke: none; }
html.ready .ouija__sun g { transform-origin: 32px 32px; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the séance terminal */
.terminal {
  width: min(760px, 100%);
  margin-top: clamp(10px, 2.6vh, 30px);
  text-align: left;
  background: linear-gradient(180deg, rgba(23, 10, 30, .72), rgba(12, 5, 16, .86));
  border: 1px solid rgba(200, 164, 92, .34);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(239, 230, 212, .07);
  font: 400 14.5px/1.6 var(--mono);
  transition: border-color .3s, box-shadow .3s;
}
.terminal:focus-within {
  border-color: rgba(255, 181, 71, .7);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 0 4px rgba(255, 181, 71, .12);
}
.terminal__out {
  height: 8.6em;
  overflow-y: auto;
  padding: 14px 18px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 164, 92, .4) transparent;
}
.tl { margin: 0; white-space: pre-wrap; word-break: break-word; }
.tl--you { color: var(--bone); }
.tl--you::before { content: "› "; color: var(--candle); }
.tl--ghost { color: var(--lilac); font-style: italic; }
.tl--sys { color: var(--bone-dim); }
.tl--hi { color: var(--mint); }
.tl--warn { color: var(--ward); }
.terminal__in {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(200, 164, 92, .18);
}
.terminal__prompt { color: var(--mint); white-space: nowrap; }
.terminal__in input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--bone);
  font: inherit;
  font-size: 16px; /* no zoom on iOS */
  caret-color: var(--candle);
}
.terminal__in input::placeholder { color: rgba(184, 173, 155, .55); font-style: italic; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  max-width: 760px;
}
.chip {
  appearance: none;
  border: 1px solid rgba(239, 230, 212, .2);
  background: rgba(12, 5, 16, .5);
  border-radius: 999px;
  padding: 8px 13px;
  font: italic 400 13px/1 var(--mono);
  color: var(--bone-dim);
  cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}
.chip:hover { color: var(--candle); border-color: rgba(255, 181, 71, .6); background: rgba(255, 181, 71, .06); }

@media (max-width: 640px) {
  .ouija { height: clamp(250px, 36vh, 300px); }
  .ouija__yes, .ouija__no { top: -4px; }
  .terminal { font-size: 13px; }
  .terminal__out { height: 9.6em; }
  .terminal__prompt { display: none; }
}

/* ================================================================ SECTIONS */
.section-title {
  margin: 0 0 .32em;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.7rem, 7.2vw, 6.6rem);
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--bone);
  font-variation-settings: "opsz" 96;
}
.section-title .w { display: inline-block; }

.lead {
  margin: 0 0 1.1em;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.38;
  font-style: italic;
  font-weight: 500;
  max-width: 30ch;
  color: var(--bone);
}
.prose p { margin: 0 0 1em; max-width: 60ch; color: rgba(239, 230, 212, .88); }

/* ---------------- who's there */
.whos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  padding: clamp(96px, 16vh, 180px) var(--gutter);
  max-width: 1380px;
  margin: 0 auto;
}
.whos__apparition { margin: 0; display: flex; justify-content: center; }
.whos__apparition::before { inset: -6% -4%; }
#apparition {
  margin: 0;
  font: 600 clamp(7px, 1.06vw, 15px)/1 var(--mono);
  letter-spacing: 0;
  white-space: pre;
  background: linear-gradient(170deg, var(--mint), var(--lilac) 38%, var(--orchid) 64%, var(--candle) 92%);
  background-size: 100% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(185, 162, 255, .35));
  animation: aura 14s linear infinite;
  user-select: none;
}
@keyframes aura { 0% { background-position: 0 0; } 100% { background-position: 0 220%; } }

.whos__hunt {
  margin: 1.8em 0 .6em;
  font: italic 500 15px/1.4 var(--mono);
  color: var(--candle);
}
.hunts { list-style: none; margin: 0; padding: 0; max-width: 54ch; }
.hunts li {
  position: relative;
  padding: .55em 0 .55em 1.6em;
  border-top: 1px solid rgba(200, 164, 92, .22);
  font-size: 17px;
}
.hunts li:last-child { border-bottom: 1px solid rgba(200, 164, 92, .22); }
.hunts li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: 1.15em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gilt);
  transform: rotate(45deg);
}

@media (max-width: 860px) {
  .whos { grid-template-columns: 1fr; }
  #apparition { font-size: clamp(6px, 1.9vw, 11px); }
}

/* ---------------- the deck (tarot) */
.deck { padding: clamp(80px, 12vh, 150px) var(--gutter) clamp(96px, 14vh, 170px); }
.deck__head { max-width: 1380px; margin: 0 auto clamp(40px, 7vh, 80px); }
.deck__intro, .log__intro { margin: 0; font: italic 400 15px/1.6 var(--mono); color: var(--bone-dim); }

.spread {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2vw, 30px);
  max-width: 1380px;
  perspective: 1400px;
}
.card {
  --w: clamp(210px, 21vw, 290px);
  position: relative;
  width: var(--w);
  flex: 0 0 auto;
  transform: translateY(calc(var(--lift, 0) * 1px)) rotate(calc(var(--fan, 0) * 1deg));
  transition: transform .8s var(--ease-out);
}
/* fan the spread: outer cards tilt out, inner cards stay near level (works for any count) */
.card:first-child:not(:last-child) { --fan: -5; --lift: 28; }
.card:last-child:not(:first-child) { --fan: 5; --lift: 28; }
.card:nth-child(2):not(:last-child) { --fan: -1.6; --lift: 4; }
.card:nth-last-child(2):not(:first-child) { --fan: 1.6; --lift: 4; }
.card:nth-child(2):nth-last-child(2) { --fan: 0; --lift: -6; }
.card:hover, .card.is-flipped { --fan: 0; --lift: -10; z-index: 2; }

.card__tilt {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-out);
}
.card.is-tilting .card__tilt { transition: transform .08s linear; }

.card__inner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 7 / 12;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-out);
  border-radius: 16px;
  text-align: left;
}
.card.is-flipped .card__inner { transform: rotateY(180deg); }

.card__face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9), 0 0 0 1px rgba(200, 164, 92, .55);
}

/* back */
.card__back {
  background:
    radial-gradient(80% 60% at 50% 45%, #2a1236 0%, #160a1d 60%, #0c0510 100%);
}
.card__back svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card__back .ln { fill: none; stroke: var(--gilt); stroke-width: 1; }
.card__back .ln2 { fill: none; stroke: var(--gilt); stroke-width: .6; opacity: .7; }
.card__back .fl { fill: var(--gilt); }

/* holographic foil */
.card__foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: .55;
  background:
    repeating-linear-gradient(115deg,
      rgba(140, 255, 208, .0) 0%, rgba(140, 255, 208, .55) 6%, rgba(185, 162, 255, .55) 12%,
      rgba(255, 134, 216, .55) 18%, rgba(255, 181, 71, .5) 24%, rgba(140, 255, 208, .0) 30%),
    repeating-linear-gradient(25deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 5px);
  background-size: 260% 260%, 100% 100%;
  background-position: var(--mx, 50%) var(--my, 50%), 0 0;
  filter: saturate(1.4) contrast(1.1);
  transition: opacity .4s;
}
.card__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  opacity: .7;
}
.card:not(.is-tilting) .card__foil { animation: foilshift 9s linear infinite; }
@keyframes foilshift { from { background-position: 0% 50%, 0 0; } to { background-position: 260% 50%, 0 0; } }

/* front */
.card__front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  background:
    radial-gradient(90% 55% at 50% 30%, rgba(255, 181, 71, .12), transparent 70%),
    linear-gradient(180deg, #1c0d24, #0f0714);
  color: var(--bone);
}
.card__front::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(200, 164, 92, .55);
  border-radius: 10px;
  pointer-events: none;
}
.card__front .card__foil { opacity: .22; }
.card__numeral {
  display: block;
  text-align: center;
  font: italic 700 15px/1 var(--serif);
  color: var(--gilt);
  letter-spacing: .08em;
  margin-top: 6px;
}
.card__art {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin: 10px 8px 6px;
}
.card__art svg { width: 100%; height: 100%; fill: none; stroke: var(--gilt); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.card__art .fl { fill: var(--gilt); stroke: none; }
.card__art .glow { stroke: var(--candle); }
.card__title {
  display: block;
  text-align: center;
  font: 800 clamp(20px, 1.9vw, 25px)/1.05 var(--serif);
  font-variation-settings: "opsz" 40;
  margin: 2px 0 8px;
}
.card__text {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(239, 230, 212, .86);
  font-variation-settings: "opsz" 11;
  text-align: center;
}
.card__tags {
  display: block;
  margin-top: 10px;
  text-align: center;
  font: italic 400 12px/1.3 var(--mono);
  color: var(--mint);
}
.card__link {
  display: block;
  margin-top: 16px;
  text-align: center;
  font: italic 400 13px/1 var(--mono);
  color: var(--candle);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .5s .4s, transform .5s .4s var(--ease-out);
  pointer-events: none;
}
.card.is-flipped .card__link { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 1080px) {
  .spread { flex-wrap: wrap; }
  .card { --w: clamp(220px, 40vw, 290px); }
  .card:nth-child(n) { --fan: 0; --lift: 0; }
}
@media (max-width: 520px) {
  .spread { flex-direction: column; align-items: center; gap: 28px; }
  .card { --w: min(300px, 82vw); }
}

/* ---------------- the log */
.log { padding: clamp(80px, 12vh, 150px) var(--gutter) clamp(96px, 14vh, 170px); }
.log__head { max-width: 1100px; margin: 0 auto clamp(30px, 5vh, 56px); }
.logview {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(200, 164, 92, .3);
  background: linear-gradient(180deg, rgba(23, 10, 30, .78), rgba(12, 5, 16, .9));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 400 14px/1.6 var(--mono);
  overflow: hidden;
}
.logview__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(200, 164, 92, .2);
  color: var(--bone-dim);
}
.logview__sigil { color: var(--candle); }
.logview__grep { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.logview__pipe { margin-right: 6px; color: var(--mint); }
.logview__grep button {
  appearance: none;
  border: 1px solid rgba(239, 230, 212, .18);
  background: none;
  border-radius: 999px;
  padding: 5px 11px;
  font: italic 400 12.5px/1 var(--mono);
  color: var(--bone-dim);
  cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}
.logview__grep button:hover { color: var(--bone); border-color: rgba(239, 230, 212, .4); }
.logview__grep button[aria-checked="true"] { background: var(--bone); color: var(--velvet); border-color: var(--bone); font-style: normal; font-weight: 600; }

.logview__lines { list-style: none; margin: 0; padding: 10px 0 0; }
.logline > a, .logline > span.logline__row {
  display: grid;
  grid-template-columns: max-content 3.4em 10.6em minmax(0, 1fr);
  gap: 0 .9em;
  padding: 9px 20px;
  text-decoration: none;
  color: inherit;
  transition: background-color .25s, color .25s;
}
.logline > a:hover { background: rgba(255, 181, 71, .07); }
.logline > a:hover .logline__msg { color: var(--candle); text-decoration: underline; text-underline-offset: 3px; }
.logline time { color: rgba(184, 173, 155, .8); font-variant-numeric: tabular-nums; white-space: nowrap; }
.logline__fac { white-space: nowrap; }
.logline__host { color: rgba(184, 173, 155, .55); }
.logline__fac { font-style: italic; }
.logline--ctf .logline__fac { color: var(--candle); }
.logline--writeup .logline__fac { color: var(--mint); }
.logline--talk .logline__fac { color: var(--orchid); }
.logline--note .logline__fac { color: var(--lilac); }
.logline__msg { color: var(--bone); }
.logline.is-hidden { display: none; }
.logline.is-pending { opacity: 0; }
.logline.is-arriving { animation: arrive .7s var(--ease-out) both; }
@keyframes arrive {
  0% { opacity: 0; transform: translateX(-10px); filter: blur(4px); }
  30% { opacity: 1; }
  45% { opacity: .35; }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
.logview__empty { padding: 9px 20px; color: var(--bone-dim); font-style: italic; }
.logview__tail { margin: 0; padding: 4px 20px 16px; }

@media (max-width: 760px) {
  .logline > a, .logline > span.logline__row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "time fac" "msg msg";
    gap: 2px .8em;
  }
  .logline time { grid-area: time; }
  .logline__host { display: none; }
  .logline__fac { grid-area: fac; }
  .logline__msg { grid-area: msg; }
}

/* ================================================================ GOODBYE */
.goodbye {
  padding: clamp(60px, 10vh, 120px) var(--gutter) calc(40px + env(safe-area-inset-bottom));
  text-align: center;
}
.goodbye__word {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 .1em;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(4rem, 17vw, 17rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--bone);
  cursor: pointer;
  text-shadow: 0 0 60px rgba(12, 5, 16, .9);
  transition: color .5s, text-shadow .5s;
  font-variation-settings: "opsz" 96;
}
.goodbye__word .w { display: inline-block; }
.goodbye__word:hover, .goodbye__word.is-lit {
  color: var(--candle);
  text-shadow: 0 0 30px rgba(255, 181, 71, .6), 0 0 120px rgba(255, 181, 71, .35);
}
.goodbye__note {
  margin: 18px auto 8px;
  max-width: 50ch;
  font: italic 400 14px/1.6 var(--mono);
  color: var(--bone-dim);
}
.goodbye__small { margin: 0; font: 400 12px/1.6 var(--mono); color: rgba(184, 173, 155, .6); }

.blackout {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--velvet);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
  font: italic 400 15px/1 var(--mono);
  color: var(--bone-dim);
}
.blackout.is-on { opacity: 1; visibility: visible; transition: opacity 1.2s ease; }

/* ================================================================ PLANCHETTE */
.planchette {
  position: fixed;
  left: 0;
  top: 0;
  width: 96px;
  height: 112px;
  margin: -64px 0 0 -48px; /* lens centre = hotspot */
  transform-origin: 48px 64px;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease, width .3s, height .3s;
  will-change: transform;
}
.planchette.is-on { opacity: 1; }
.planchette svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)); }
.planchette__body { stroke: var(--gilt); stroke-width: 1.4; }
.planchette__inlay { fill: none; stroke: rgba(200, 164, 92, .45); stroke-width: .8; stroke-dasharray: 2 3; }
.planchette__pad { fill: var(--gilt); opacity: .7; }
.planchette__lens {
  position: absolute;
  left: 30px;
  top: 46px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -webkit-backdrop-filter: invert(1) hue-rotate(180deg) saturate(1.7) contrast(1.15);
  backdrop-filter: invert(1) hue-rotate(180deg) saturate(1.7) contrast(1.15);
  box-shadow: 0 0 0 1.5px var(--gilt), 0 0 22px rgba(255, 181, 71, .35), inset 0 0 10px rgba(255, 255, 255, .25);
  transition: box-shadow .3s;
}
.planchette__dot {
  position: absolute;
  left: 46px;
  top: 62px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--candle);
  box-shadow: 0 0 8px var(--candle);
}
.planchette.is-hover .planchette__lens { box-shadow: 0 0 0 2px var(--candle), 0 0 30px rgba(255, 181, 71, .7), inset 0 0 12px rgba(255, 255, 255, .3); }
.planchette.is-spelling .planchette__lens { box-shadow: 0 0 0 2px var(--candle), 0 0 40px rgba(255, 181, 71, .9); }

@media (pointer: fine) {
  html.planchette-cursor,
  html.planchette-cursor * { cursor: none !important; }
}

/* ================================================================ VEIL: TORN */
html[data-veil="torn"] .board__title,
html[data-veil="torn"] .goodbye__word { filter: url(#melt); }
html[data-veil="torn"] .board__title,
html[data-veil="torn"] .section-title,
html[data-veil="torn"] .goodbye__word {
  text-shadow: -.04em 0 rgba(255, 134, 216, .75), .04em 0 rgba(140, 255, 208, .75), 0 0 60px rgba(12, 5, 16, .9);
  animation: split 4.5s ease-in-out infinite;
}
@keyframes split {
  0%, 100% { text-shadow: -.035em 0 rgba(255, 134, 216, .75), .035em 0 rgba(140, 255, 208, .75), 0 0 60px rgba(12, 5, 16, .9); }
  50% { text-shadow: .05em .01em rgba(255, 134, 216, .75), -.05em -.01em rgba(140, 255, 208, .75), 0 0 60px rgba(12, 5, 16, .9); }
}
html.ready[data-veil="torn"] .ouija__glyph { animation: drift 5s ease-in-out infinite; animation-delay: calc(var(--k) * -0.37s); }
@keyframes drift {
  0%, 100% { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); }
  50% { transform: translate(-50%, -50%) translate(calc(var(--x) + 4px), calc(var(--y) - 9px)) rotate(calc(var(--r) + 6deg)); }
}
html[data-veil="torn"] #apparition { animation-duration: 4s; filter: drop-shadow(0 0 24px rgba(255, 134, 216, .55)) hue-rotate(0deg); }

/* ================================================================ VEIL: INTACT / reduced motion */
html[data-veil="intact"] .board__title .ch { animation-name: none, rise; }
html[data-veil="intact"] .card__foil { animation: none; }

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

.noscript { position: relative; z-index: 2; padding: 20px var(--gutter); font: italic 14px/1.5 var(--mono); color: var(--bone-dim); text-align: center; }
html:not(.js) main, html:not(.js) .goodbye { opacity: 1; visibility: visible; }