/* Lucky Bones — Black Magic system (spec §3). No inline styles anywhere; this file is the law. */

:root {
  --abyss:#050507; --obsidian:#111016; --hex-deep:#2e1a42; --hex:#7b4fa0;
  --hex-text:#a985cc; --spectral:#c6cad3; --spectral-hi:#e8eaf0; --spectral-lo:#6f7480;
  --bone:#ddd4c0; --bone-dim:#9a927f; --blood:#7a1010;
  --spectral-label:#9099a8; /* AA-safe (>4.5:1 on abyss/obsidian) for small FUNCTIONAL text — labels, tags */
  --glow-x:50vw; --glow-y:30vh;
}

@font-face{font-family:Cinzel;src:url(/fonts/cinzel-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/fonts/ebgaramond-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/fonts/ebgaramond-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------- base ---------- */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--abyss); color:var(--bone);
  font-family:"EB Garamond",Georgia,serif; font-size:1.0625rem; line-height:1.75;
}
main { display:block; }
a { color:var(--hex-text); text-decoration:none; border-bottom:1px solid var(--hex-deep); }
a:hover { border-bottom-color:var(--hex); }
:focus-visible { outline:2px solid var(--hex); outline-offset:3px; }
.visually-hidden {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.skip-link {
  position:absolute; left:-999px; top:0; z-index:99; background:var(--obsidian);
  color:var(--bone); padding:.6rem 1rem; font-family:"IBM Plex Mono",monospace; font-size:.8rem;
}
.skip-link:focus { left:0; }
.hp { display:none; }

/* ---------- type roles ---------- */
.monument {
  font-family:Cinzel,serif; font-weight:600; color:var(--spectral);
  letter-spacing:.32em; text-transform:uppercase; font-size:clamp(1.15rem,3.2vw,1.6rem);
  text-align:center;
}
.ledger {
  font-family:"IBM Plex Mono",monospace; font-weight:400; color:var(--spectral-lo);
  letter-spacing:.22em; text-transform:uppercase; font-size:.66rem; text-align:center;
}
.prose { max-width:52ch; margin-inline:auto; text-align:center; }
.prose em, .voice { font-style:italic; }
.sig { font-style:italic; color:var(--bone-dim); text-align:center; }
.hint { font-size:.92rem; color:var(--bone-dim); }
.rule {
  width:64px; height:1px; border:0; margin:1.1rem auto 1.6rem;
  background:linear-gradient(90deg,transparent,var(--hex),transparent);
}

/* ---------- components ---------- */
.veil-frame { position:relative; border:1px solid rgba(198,202,211,.13); padding:2rem 1.5rem; }
.veil-frame::before, .veil-frame::after {
  content:""; position:absolute; width:10px; height:10px; border:1px solid var(--spectral-lo);
}
.veil-frame::before { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.veil-frame::after  { bottom:-1px; right:-1px; border-left:0; border-top:0; }

.ritual-cta {
  display:inline-block; font-family:Cinzel,serif; font-weight:600; font-size:.78rem;
  letter-spacing:.26em; color:var(--spectral); background:transparent;
  border:1px solid var(--spectral-lo); border-radius:2px; padding:.95rem 1.9rem;
  cursor:pointer; text-transform:uppercase; transition:color .3s,border-color .3s,box-shadow .3s;
}
.ritual-cta:hover { color:var(--spectral-hi); border-color:var(--spectral); }
.ritual-cta--violet { color:var(--hex-text); border-color:var(--hex); box-shadow:0 0 18px rgba(123,79,160,.25); }
.ritual-cta--violet:hover { color:var(--spectral-hi); box-shadow:0 0 26px rgba(123,79,160,.4); }

/* ---------- the descent ---------- */
.section { padding:clamp(4.5rem,12vh,8rem) 1.25rem; position:relative; }
.section .ledger { margin-bottom:2.2rem; }
.movement { max-width:52ch; margin:0 auto 3rem; text-align:center; }
.movement h3 { font-family:Cinzel,serif; font-weight:600; font-size:.85rem; letter-spacing:.3em; color:var(--spectral-lo); margin-bottom:1rem; }

/* reveal + sconces — hidden state gated on .js so no-JS visitors still see the form + copy */
.reveal { transition:opacity .9s ease,transform .9s ease; }
.js .reveal { opacity:0; transform:translateY(22px); }
.reveal.lit { opacity:1; transform:none; }
.sconce { display:block; width:6px; height:6px; margin:0 auto 1.2rem; border-radius:50%;
  background:var(--hex-deep); transition:background .8s,box-shadow .8s; }
.lit .sconce { background:var(--hex-text); box-shadow:0 0 14px 3px rgba(123,79,160,.5); }

/* hero */
.hero {
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1.4rem; text-align:center; padding:2rem 1.25rem; position:relative;
}
.hero .seam {
  position:absolute; left:50%; top:0; width:1px; height:0;
  background:linear-gradient(180deg,transparent,var(--hex),transparent);
  transition:height 1.1s ease; pointer-events:none;
}
.hero.open .seam { height:100%; }
.wordmark { width:min(78vw,560px); height:auto; display:block; }
.wordmark path { fill:url(#foilGrad); }
.tagline { font-style:italic; font-size:clamp(1.05rem,2.6vw,1.3rem); color:var(--bone); }
.hero-bone { width:56px; height:68px; color:var(--spectral-lo); transition:transform .8s ease,color .8s; }
.hero.open .hero-bone { transform:translateY(10px) rotate(180deg); color:var(--hex-text); }

/* plumb line */
#plumb {
  position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:5;
  display:none; flex-direction:column; gap:1.6rem; align-items:flex-end;
}
#plumb .mark {
  font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.18em;
  color:var(--spectral-lo); opacity:.45; transition:opacity .4s,color .4s; white-space:nowrap;
}
#plumb .mark.hot { opacity:1; color:var(--hex-text); }
@media (min-width:768px){ #plumb { display:flex; } }
.depth-inline { display:inline; }
@media (min-width:768px){ .depth-inline { display:none; } }

/* ---------- tarot ---------- */
.deck { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1.1rem;
  max-width:1080px; margin:2.5rem auto 0; }
.tarot {
  aspect-ratio:3/5; perspective:900px; background:none; border:0; cursor:pointer;
  opacity:0; transform:translateY(26px);
  transition:opacity .8s ease,transform .8s ease; transition-delay:calc(var(--i,0)*110ms);
  padding:0; width:100%;
}
.deck.lit .tarot { opacity:1; transform:rotate(calc((var(--i,0) - 2.5)*1.6deg)); }
.tarot-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.tarot.flipped .tarot-inner { transform:rotateY(180deg); }
.tarot-face {
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(170deg,var(--obsidian),#0a0910 60%,#16101f);
  border:1px solid var(--hex-deep); border-radius:9px;
  box-shadow:0 0 26px rgba(123,79,160,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1rem .8rem;
}
.tarot-face::after { content:""; position:absolute; inset:5px;
  border:1px solid rgba(198,202,211,.13); border-radius:6px; pointer-events:none; }
.tarot-back { transform:rotateY(180deg); }
.tarot .num { font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.2em; color:var(--spectral-lo); }
.tarot .glyph { width:44px; height:44px; color:var(--spectral); }
.tarot .name { font-family:Cinzel,serif; font-weight:600; font-size:.72rem; letter-spacing:.13em; color:var(--spectral); text-align:center; }
.tarot .style { font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.13em; color:var(--hex-text); text-align:center; }
.tarot .lore { font-style:italic; font-size:.8rem; color:var(--bone-dim); text-align:center; line-height:1.5; }
.tarot .tag { font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.12em; color:var(--spectral-label); text-align:center; margin-top:.4rem; }
@media (max-width:767px){
  .deck { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem;
    scrollbar-width:thin; }
  .tarot { flex:0 0 72vw; max-width:280px; scroll-snap-align:center; }
  .deck.lit .tarot { transform:none; }
}

/* ---------- the book ---------- */
.book-form { max-width:430px; margin:2.2rem auto 0; display:flex; flex-direction:column; gap:1.1rem; }
.book-form label { font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.18em;
  color:var(--spectral-label); text-transform:uppercase; display:block; margin-bottom:.45rem; }
.book-form input[type=email] {
  width:100%; font-family:"IBM Plex Mono",monospace; font-size:.95rem; color:var(--bone);
  background:#0a0910; border:1px solid var(--hex-deep); border-radius:2px; padding:.85rem .95rem;
}
.book-form input[type=email]:focus { border-color:var(--hex); outline:none; }
.checks { display:flex; flex-wrap:wrap; gap:.9rem 1.6rem; justify-content:center; }
.checks label { display:flex; align-items:center; gap:.55rem; margin:0; cursor:pointer; }
.checks input { accent-color:var(--hex); width:15px; height:15px; }
#book-status { min-height:1.6rem; font-style:italic; text-align:center; color:var(--hex-text); }
#book-status.err { color:var(--bone-dim); }

/* ---------- footer ---------- */
.crypt { border-top:1px solid rgba(198,202,211,.1); padding:3.5rem 1.25rem 4.5rem;
  display:flex; flex-direction:column; align-items:center; gap:1.3rem; text-align:center; }
#wishbone { background:none; border:0; cursor:pointer; color:var(--spectral-lo);
  width:64px; height:78px; padding:4px; transition:color .4s,filter .4s; }
#wishbone:hover, #wishbone:focus-visible { color:var(--spectral); filter:drop-shadow(0 0 8px rgba(123,79,160,.55)); }
#wishbone svg { width:100%; height:100%; }
#wishbone .wb-intact,#wishbone .wb-crack,#wishbone .wb-splinter,#wishbone .wb-snapped { display:none; }
#wishbone.wb-state-0 .wb-intact { display:block; }
#wishbone.wb-state-1 .wb-crack { display:block; }
#wishbone.wb-state-2 .wb-splinter { display:block; }
#wishbone.wb-state-3 .wb-snapped { display:block; }
#wishbone.wb-state-1, #wishbone.wb-state-2 { color:var(--spectral); }
#wishbone.wb-state-3 { color:var(--hex-text); }

/* snap blackout */
body::after { content:""; position:fixed; inset:0; background:var(--abyss); opacity:0;
  pointer-events:none; transition:opacity .7s ease; z-index:90; }
body.snap::after { opacity:1; pointer-events:auto; }

/* cursor glow (desktop, motion-ok only) */
@media (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .glow { position:fixed; inset:0; pointer-events:none; z-index:1; mix-blend-mode:screen;
    background:radial-gradient(240px circle at var(--glow-x) var(--glow-y),rgba(123,79,160,.10),transparent 70%); }
}

/* ---------- séance ---------- */
.room { min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:clamp(3rem,9vh,6rem) 1.25rem 4rem; gap:1.6rem; text-align:center; }
.table-row { display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; max-width:900px; margin-top:1.4rem; }
.table-row .tarot { width:96px; flex:0 0 auto; opacity:1; transform:rotate(calc((var(--i,0) - 6)*2.2deg)) translateY(calc((var(--i,0) - 6)*(var(--i,0) - 6)*.55px)); }
.table-row .tarot:disabled { cursor:default; opacity:.45; }
.card-back-pattern { position:absolute; inset:10px; border-radius:5px;
  background:repeating-linear-gradient(45deg,rgba(123,79,160,.14) 0 1px,transparent 1px 7px); }
.card-back-bone { width:26px; height:32px; color:var(--hex-deep); position:relative; }
#fortune { max-width:46ch; display:none; flex-direction:column; align-items:center; gap:1rem; }
#fortune.shown { display:flex; }
#fortune .f-text { font-style:italic; font-size:1.25rem; line-height:1.7; }
.mini-pour { display:flex; flex-direction:column; gap:.3rem; align-items:center;
  border:1px solid var(--hex-deep); border-radius:9px; padding:1.1rem 1.6rem;
  background:linear-gradient(170deg,var(--obsidian),#16101f); }
@media (max-width:767px){
  .table-row { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start;
    max-width:100%; padding:0 8vw 1rem; }
  .table-row .tarot { scroll-snap-align:center; transform:none; width:88px; }
}

/* ---------- utility pages (privacy / 404) ---------- */
.page { max-width:60ch; margin:0 auto; padding:clamp(3.5rem,10vh,6rem) 1.4rem 5rem; }
.page .monument { margin-bottom:.8rem; }
.page p { margin:1.1rem 0; }
.page .plain { text-align:left; }
.page .plain strong { color:var(--spectral); }

/* ---------- reduced motion: instant everything ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
  .tarot { opacity:1; transform:none; }
  .glow { display:none; }
}