/* Church Suffering sell page. Ink, ivory and crimson; leaning slabs, hard shadows, one focal
   point per section. See docs/agent-guidance/ui-style.md and docs/sell-site.md. */
@font-face { font-family:Rocker; src:url('assets/fonts/NewRocker.woff2') format('woff2'), url('assets/fonts/NewRocker.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:Germania; src:url('assets/fonts/GermaniaOne.woff2') format('woff2'), url('assets/fonts/GermaniaOne.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:Chakra; src:url('assets/fonts/ChakraPetch.woff2') format('woff2'), url('assets/fonts/ChakraPetch.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:ChakraLabel; src:url('assets/fonts/ChakraPetch-BoldItalic.woff2') format('woff2'), url('assets/fonts/ChakraPetch-BoldItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:Fell; src:url('assets/fonts/IMFeENit28P.woff2') format('woff2'), url('assets/fonts/IMFeENit28P.ttf') format('truetype'); font-display:swap; }

:root {
  --ink:#09080c;
  --ink-2:#16151a;
  --ivory:#f4efe1;
  --bone:#dcd7ce;
  --crimson:#b01230;
  --red:#e2243a;
  --blood:#4e0c0c;
  --steel:#3a6892;
  --gold:#deb25c;
  --muted:#a59d90;
  --px:0; --py:0;           /* pointer, -1..1, set by site.js */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.2,1.6,.4,1);
  color-scheme:dark;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font:17px/1.5 Chakra,system-ui,sans-serif;
  overflow-x:hidden;
}
img,video { display:block; max-width:100%; }
a { color:inherit; }
button { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--ivory); outline-offset:4px; }
.skip { position:absolute; left:-999px; top:8px; z-index:200; background:var(--ivory); color:var(--ink); padding:8px 14px; }
.skip:focus { left:8px; }
.noscript { padding:40px; text-align:center; color:var(--muted); }

/* ---------- Shared: titles, decks, blades ---------- */
section { position:relative; }
.section-number {
  position:absolute; top:-.12em; right:2vw; z-index:0;
  font:clamp(160px,28vw,420px)/1 Rocker,serif;
  color:transparent; -webkit-text-stroke:2px #ffffff10;
  pointer-events:none; user-select:none;
}
.slam-title {
  position:relative; z-index:2; margin:0;
  font:clamp(44px,8vw,112px)/.92 Rocker,serif;
  letter-spacing:-.01em;
  transform:rotate(-3deg);
  transform-origin:left bottom;
}
.slam-title span { display:inline-block; }
.slam-title em {
  font-style:normal; display:inline-block; position:relative;
  color:var(--ivory); padding:0 .18em;
}
.slam-title em::before {
  content:''; position:absolute; inset:.1em -.06em .02em; z-index:-1;
  background:var(--crimson); transform:skewX(-12deg);
  box-shadow:8px 8px 0 var(--ink);
}
.deck {
  position:relative; z-index:2; max-width:46ch; margin:28px 0 0;
  font-size:clamp(17px,1.5vw,20px); color:var(--bone);
}
.sub-title { font:clamp(30px,3.4vw,48px)/1.05 Rocker,serif; margin:0 0 14px; transform:rotate(-2deg); }

.blade {
  --lean:-4deg;
  position:relative; display:inline-flex; align-items:center; gap:18px;
  padding:16px 44px 16px 28px; border:0; cursor:pointer; text-decoration:none;
  font:clamp(22px,2.4vw,34px)/1 ChakraLabel,sans-serif; text-transform:uppercase; letter-spacing:.02em;
  transform:rotate(var(--lean)) translate(var(--bx,0),var(--by,0));
  transition:transform .25s var(--ease-snap), filter .2s;
  isolation:isolate;
}
.blade::before {
  content:''; position:absolute; inset:0; z-index:-1;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);
  transition:transform .2s var(--ease-out);
}
.blade::after { /* hard shadow */
  content:''; position:absolute; inset:0; z-index:-2;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);
  background:var(--ink); transform:translate(8px,8px);
}
.blade-crimson { color:var(--ivory); }
.blade-crimson::before { background:var(--crimson); box-shadow:inset 0 0 0 3px var(--ivory); }
.blade-ink { color:var(--ivory); }
.blade-ink::before { background:var(--ink); box-shadow:inset 0 0 0 3px var(--ivory); }
.blade-ink::after { background:var(--crimson); }
.blade:hover,.blade:focus-visible { --by:-4px; }
.blade:hover::before { background-image:repeating-linear-gradient(-60deg,#ffffff14 0 10px,transparent 10px 22px); background-size:44px 100%; animation:stripes .6s linear infinite; }
.blade:active { --by:2px; transition-duration:.05s; }
.blade:active::after { transform:translate(3px,3px); }
.blade-tag {
  position:absolute; top:-15px; left:20px;
  font:14px/1 ChakraLabel,sans-serif; padding:5px 10px; background:var(--ivory); color:var(--ink); white-space:nowrap;
  transform:rotate(-2deg) skewX(-10deg);
}
.blade-chev { letter-spacing:-.15em; color:var(--ink); font-size:1.1em; }
.blade:hover .blade-chev { animation:chev .5s steps(3) infinite; }
.blade.small { font-size:20px; padding:10px 36px 10px 20px; }
.blade.huge { font-size:clamp(26px,4vw,52px); padding:26px 70px 26px 40px; }
.play-tri { width:0; height:0; border-left:22px solid var(--crimson); border-top:13px solid transparent; border-bottom:13px solid transparent; }
@keyframes stripes { to { background-position:44px 0; } }
@keyframes chev { 50% { opacity:.4; } }

.link-tag {
  display:inline-block; margin-top:26px; padding:8px 18px; text-decoration:none;
  font:18px ChakraLabel,sans-serif; background:var(--ivory); color:var(--ink);
  transform:rotate(-2deg); box-shadow:5px 5px 0 var(--crimson); transition:transform .2s var(--ease-snap);
}
.link-tag:hover { transform:rotate(-2deg) translateY(-3px); }

/* Reveal: quick arrival, then still. */
[data-reveal] { opacity:0; translate:-40px 0; transition:opacity .5s, translate .7s var(--ease-out); }
[data-reveal].in { opacity:1; translate:0 0; }

/* ---------- Deus Vult cut ---------- */
.cut { position:fixed; inset:0; z-index:150; pointer-events:none; overflow:hidden; }
.cut-slab { position:absolute; top:-10%; bottom:-10%; width:70%; background:var(--crimson); }
.cut-a { left:0; clip-path:polygon(0 0,100% 0,78% 50%,100% 100%,0 100%); box-shadow:inset -6px 0 0 var(--ink); }
.cut-b { right:0; clip-path:polygon(22% 0,100% 0,100% 100%,22% 100%,0 50%); background:#8f0e26; }
.cut-blade {
  position:absolute; left:-5%; right:-5%; top:42%; height:16%;
  background:var(--ink); transform:rotate(-6deg); display:flex; align-items:center; justify-content:center; gap:.4em;
  border-top:4px solid var(--ivory); border-bottom:4px solid var(--ivory);
  font:clamp(48px,10vw,140px)/1 Rocker,serif; color:var(--ivory);
}
.cut-blade span { display:inline-block; }
.cut { visibility:hidden; }
.cut.run { visibility:visible; pointer-events:auto; }
.cut.run .cut-a { animation:cutA 1.5s var(--ease-out) both; }
.cut.run .cut-b { animation:cutB 1.5s var(--ease-out) both; }
.cut.run .cut-blade { animation:cutBlade 1.5s var(--ease-out) both; }
.cut.run .cut-blade span:nth-child(1) { animation:stamp 1.5s both; }
.cut.run .cut-blade span:nth-child(2) { animation:stamp2 1.5s both; color:var(--red); }
@keyframes cutA { 0% { translate:-110% 0; } 18%,62% { translate:-8% 0; } 100% { translate:-130% 0; } }
@keyframes cutB { 0% { translate:110% 0; } 18%,62% { translate:6% 0; } 100% { translate:130% 0; } }
@keyframes cutBlade { 0%,14% { translate:-120% 0; } 26%,66% { translate:0 0; } 100% { translate:140% 0; } }
@keyframes stamp { 0%,26% { scale:2.4; opacity:0; } 32% { scale:.92; opacity:1; } 36%,100% { scale:1; } }
@keyframes stamp2 { 0%,36% { scale:2.4; opacity:0; } 42% { scale:.92; opacity:1; } 46%,100% { scale:1; } }

/* ---------- Command ladder ---------- */
.ladder { position:fixed; top:14px; right:14px; z-index:90; }
.ladder-toggle {
  display:flex; align-items:center; gap:10px; cursor:pointer; border:0;
  padding:10px 18px; background:var(--ink); color:var(--ivory);
  font:18px ChakraLabel,sans-serif; text-transform:uppercase;
  box-shadow:inset 0 0 0 2px var(--ivory), 5px 5px 0 var(--crimson);
  transform:rotate(2deg); transition:transform .2s var(--ease-snap);
}
.ladder-toggle:hover { transform:rotate(2deg) translateY(-2px); }
.ladder-glyph { width:18px; height:12px; background:linear-gradient(var(--ivory) 0 2px,transparent 2px 5px,var(--ivory) 5px 7px,transparent 7px 10px,var(--crimson) 10px 12px); }
.ladder-list {
  list-style:none; margin:0; padding:14px 0 0; position:absolute; right:0; top:100%;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  /* Closed, the list keeps its box over the page; hide it so it takes no taps or focus. */
  visibility:hidden; pointer-events:none; transition:visibility 0s .4s;
}
.ladder.open .ladder-list { visibility:visible; pointer-events:auto; transition-delay:0s; }
.ladder-list li { transform:translateX(130%) rotate(-6deg); transition:transform .35s var(--ease-snap); }
.ladder.open .ladder-list li { transform:translateX(calc(var(--i) * -8px)) rotate(-6deg); }
.ladder.open .ladder-list li { transition-delay:calc(var(--i) * 35ms); }
.ladder-list a {
  display:block; padding:8px 22px; text-decoration:none; white-space:nowrap;
  font:22px/1 ChakraLabel,sans-serif; text-transform:uppercase;
  background:var(--ink); color:var(--ivory); box-shadow:inset 0 0 0 2px var(--ivory), 6px 6px 0 #0008;
  transition:background .12s, transform .2s var(--ease-snap);
}
.ladder-list a:hover,.ladder-list a:focus-visible { background:var(--crimson); transform:translateX(-10px); }
.ladder-play a { background:var(--crimson); }

/* ---------- Hero ---------- */
.hero { min-height:100svh; overflow:hidden; display:grid; isolation:isolate; }
.hero-stage { position:absolute; inset:-4%; z-index:-3; }
.hero-stage .layer {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:translate3d(calc(var(--px) * var(--d) * -28px), calc(var(--py) * var(--d) * -14px + var(--scroll,0) * var(--d) * 60px), 0) scale(calc(1.02 + var(--d) * .04));
  will-change:transform;
}
.hero-print {
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle,#09080c 1.4px,transparent 1.6px) 0 0/7px 7px,
    linear-gradient(105deg,#09080cf0 0 34%,#09080c90 52%,#4e0c0c55 70%,#09080c66 100%);
  mask-image:linear-gradient(90deg,#000 0 55%,#0006 100%);
}
.hero-wedge {
  position:absolute; z-index:-1; right:-8vw; bottom:-20vh; width:62vw; height:130vh;
  background:var(--crimson); transform:rotate(14deg) translate(calc(var(--px) * 10px), calc(var(--py) * 6px));
  box-shadow:-18px 0 0 var(--ink), -24px 0 0 var(--ivory);
  animation:wedgeIn .9s var(--ease-out) .2s both;
}
.hero-disc {
  position:absolute; z-index:-1; right:8vw; top:12vh; width:min(54vw,620px); aspect-ratio:1;
  border-radius:50%; background:#8f0e26; box-shadow:0 0 0 10px var(--ink), 0 0 0 16px var(--ivory);
  transform:rotate(calc(var(--px) * 18deg));
  animation:discIn 1s var(--ease-snap) .35s both;
}
.disc-cross {
  position:absolute; inset:12%;
  background:conic-gradient(from -20deg,#b01230 0 40deg,transparent 0 90deg,#b01230 0 130deg,transparent 0 180deg,#b01230 0 220deg,transparent 0 270deg,#b01230 0 310deg,transparent 0);
  clip-path:polygon(38% 0,62% 0,56% 40%,100% 36%,100% 62%,56% 58%,62% 100%,38% 100%,44% 58%,0 62%,0 38%,44% 42%);
  opacity:.8; animation:spin 40s linear infinite;
}
.hero-crusader {
  position:absolute; z-index:0; right:max(2vw,calc(50vw - 760px)); bottom:-6vh; height:104svh; width:auto; max-width:none;
  filter:drop-shadow(14px 10px 0 var(--ink));
  transform:translate(calc(var(--px) * 16px), calc(var(--py) * 8px)) rotate(calc(-2deg + var(--px) * 1.5deg));
  transform-origin:50% 100%; will-change:transform;
  animation:crusaderIn .9s var(--ease-out) .45s both;
}
.hero-copy { position:relative; z-index:2; align-self:center; padding:14vh 0 16vh 6vw; max-width:900px; }
.wordmark { margin:0; font-weight:400; line-height:.82; transform:rotate(-5deg); transform-origin:left; }
/* The game's title wordmark (TitleMenuDisplaySystem): ivory letters in an ink outline on crimson
   sides, each with its own fixed jitter, and each word's capital larger on a crimson tile. */
.word {
  --o:.022em; --d:.0156em; --ex:.04em; --ey:.034em;
  --outline:var(--o) 0 0 var(--ink), calc(-1 * var(--o)) 0 0 var(--ink), 0 var(--o) 0 var(--ink), 0 calc(-1 * var(--o)) 0 var(--ink),
    var(--d) var(--d) 0 var(--ink), calc(-1 * var(--d)) var(--d) 0 var(--ink), var(--d) calc(-1 * var(--d)) 0 var(--ink), calc(-1 * var(--d)) calc(-1 * var(--d)) 0 var(--ink);
  display:block; white-space:nowrap; font:clamp(64px,9vw + 30px,184px)/.86 Rocker,serif; color:var(--ivory);
  text-shadow:var(--outline), calc(var(--ex) / 2) calc(var(--ey) / 2) 0 var(--ink), var(--ex) var(--ey) 0 var(--crimson);
}
.w2 { margin-left:.5em; }
.word .ch {
  display:inline-block; rotate:var(--jt,0rad); translate:0 var(--jy,0); scale:var(--js,1);
  animation:letterDrop .55s var(--ease-snap) both; animation-delay:calc(.5s + var(--i) * 45ms); transition:transform .2s var(--ease-snap);
}
/* An initial stands on its tile, so its sides are ink; the tile is turned against it and printed off register. */
.word .ch.initial {
  position:relative; isolation:isolate; font-size:1.2em; margin-right:.06em;
  text-shadow:var(--outline), var(--ex) var(--ey) 0 var(--ink);
}
.word .ch.initial::before {
  content:''; position:absolute; z-index:-1; left:-.06em; right:-.06em; top:.2em; bottom:.02em;
  background:var(--crimson); transform:rotate(-5.7deg) skewX(-3deg);
  box-shadow:0 0 0 .02em var(--ink), .05em .045em 0 var(--ivory);
}
.word .ch:hover { transform:translateY(-.08em) rotate(-6deg); }
.hero-tape {
  display:inline-block; margin:34px 0 0 10px; padding:10px 18px; max-width:40ch;
  background:var(--ink); border:2px solid var(--ivory); transform:rotate(-2deg);
  font-size:clamp(16px,1.4vw,19px); box-shadow:6px 6px 0 var(--crimson);
  animation:tapeIn .6s var(--ease-out) 1.1s both;
}
.hero-tape span { font-family:ChakraLabel,sans-serif; color:var(--red); text-transform:uppercase; }
.hero-actions { display:flex; flex-wrap:wrap; gap:26px 36px; margin-top:44px; animation:tapeIn .6s var(--ease-out) 1.3s both; }
.scroll-cue {
  position:absolute; left:6vw; bottom:4vh; z-index:2; text-decoration:none;
  font:14px ChakraLabel,sans-serif; letter-spacing:.3em; text-transform:uppercase; color:var(--bone);
}
.scroll-cue span::after { content:''; display:block; width:2px; height:46px; margin:8px 0 0 6px; background:linear-gradient(var(--ivory),transparent); animation:cue 1.6s ease-in-out infinite; }
@keyframes cue { 0% { transform:scaleY(0); transform-origin:top; } 50% { transform:scaleY(1); transform-origin:top; } 51% { transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; } }
@keyframes letterDrop { 0% { opacity:0; transform:translateY(-1.2em) rotate(-30deg) scale(1.6); } 100% { opacity:1; } }
@keyframes wedgeIn { from { transform:rotate(14deg) translateX(60vw); } }
@keyframes discIn { from { scale:.2; opacity:0; } }
@keyframes crusaderIn { from { opacity:0; translate:12vw 0; } }
@keyframes tapeIn { from { opacity:0; translate:-60px 0; } }

/* ---------- Trailer ---------- */
.trailer { padding:16vh 6vw 12vh; overflow:hidden; background:linear-gradient(170deg,var(--ink) 0 60%,var(--blood) 60.2% 100%); }
.screen {
  position:relative; display:block; width:min(1100px,100%); margin:56px 0 0 auto; padding:0; border:0; cursor:pointer;
  aspect-ratio:16/9; background:var(--ink-2);
  transform:perspective(1400px) rotateY(calc(-6deg + var(--tx,0) * 4deg)) rotateX(calc(var(--ty,0) * -4deg)) rotate(1.5deg);
  box-shadow:0 0 0 4px var(--ivory), 18px 18px 0 var(--crimson), 26px 26px 0 var(--ink);
  transition:transform .3s var(--ease-out);
}
.screen-video { width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.05); }
.screen-play {
  position:absolute; left:-18px; bottom:28px; display:flex; align-items:center; gap:16px;
  padding:16px 34px 16px 22px; background:var(--ivory); color:var(--ink);
  font:clamp(20px,2.4vw,32px) ChakraLabel,sans-serif; text-transform:uppercase;
  transform:rotate(-4deg); box-shadow:8px 8px 0 var(--ink); transition:transform .2s var(--ease-snap), background .12s;
}
.screen:hover .screen-play { transform:rotate(-4deg) translateY(-5px) scale(1.04); background:var(--crimson); color:var(--ivory); }
.screen:hover .screen-play .play-tri { border-left-color:var(--ivory); }
.screen-tag { position:absolute; top:-14px; right:24px; padding:4px 12px; background:var(--crimson); font:15px ChakraLabel,sans-serif; transform:rotate(3deg); }

/* ---------- Clips: a video that loads only near the viewport ---------- */
video[data-clip] { width:100%; height:auto; object-fit:cover; background:var(--ink-2); }
.clip { margin:0; position:relative; }
.clip video { aspect-ratio:16/9; }
.clip figcaption {
  position:absolute; left:16px; bottom:-18px; z-index:2; padding:6px 14px; background:var(--ivory); color:var(--ink);
  font:15px ChakraLabel,sans-serif; text-transform:uppercase; transform:rotate(-2deg); box-shadow:4px 4px 0 var(--ink);
}
.kicker { display:inline-block; padding:4px 12px; background:var(--crimson); color:var(--ivory); font:15px ChakraLabel,sans-serif; text-transform:uppercase; transform:rotate(-3deg); }
.sub-title em,.slam-title.small em { font-style:normal; color:var(--red); }
.slam-title.small { font-size:clamp(36px,5.4vw,76px); }
.slam-title.small em { color:var(--ivory); }

/* ---------- Your hand: four uses ---------- */
/* ---------- About: carries on the trailer's blood band, then cuts back to ink ---------- */
.about {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3vw 5vw; align-items:center;
  padding:6vh 6vw 18vh; overflow:hidden; background:linear-gradient(175deg,var(--blood) 0 74%,var(--ink) 74.2%);
}
.about .deck { margin:0; max-width:52ch; color:var(--ivory); }
/* ---------- Story: three leaning ivory panels, each closing on a line from the game ---------- */
.story { padding:10vh 4vw 16vh; overflow:hidden; background:var(--ink); }
.story::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 80% 0%,#b0123014 0 5deg,transparent 5deg 14deg);
  mask-image:linear-gradient(180deg,#000,transparent 75%);
}
.story-head { position:relative; padding-left:2vw; }
.beats { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3vw; align-items:start; max-width:1320px; margin:9vh auto 0; }
/* Each panel leans its own way; the crimson print follows the clipped edge. */
.beat { position:relative; filter:drop-shadow(10px 10px 0 var(--crimson)); }
.beat:nth-child(1) { rotate:-2deg; }
.beat:nth-child(2) { rotate:1.5deg; margin-top:7vh; }
.beat:nth-child(3) { rotate:-1deg; margin-top:2vh; }
.beat::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--ivory); clip-path:polygon(0 12px,100% 0,100% 100%,0 100%); }
.beat { padding:30px 28px 26px; color:var(--ink); isolation:isolate; }
.beat-no { position:absolute; top:10px; right:16px; font:52px/1 Rocker,serif; color:#b0123026; }
.beat h3 { margin:0 0 10px; padding-right:62px; font:clamp(26px,2.4vw,34px)/1.05 Rocker,serif; color:var(--crimson); }
.beat p { margin:0; font-size:16px; line-height:1.5; color:#2a2630; }
.balloon-line { position:relative; display:grid; grid-template-columns:auto 1fr; align-items:end; gap:0 12px; margin:22px 0 0; }
.balloon-line blockquote {
  grid-column:2; margin:0; padding:12px 16px; background:var(--ink); color:var(--ivory);
  font:17px/1.4 Fell,serif; font-style:italic; border-radius:18px 18px 18px 4px; box-shadow:4px 4px 0 var(--crimson);
}
.balloon-line figcaption {
  grid-column:2; justify-self:start; margin-top:8px; padding:3px 10px; background:var(--crimson); color:var(--ivory);
  font:13px ChakraLabel,sans-serif; text-transform:uppercase; transform:rotate(-2deg);
}
.speaker { grid-row:1 / span 2; width:88px; height:auto; align-self:end; filter:drop-shadow(3px 3px 0 var(--ink)); }
/* The Keeper and the Crusader stand full length; show them from the waist up. */
.speaker.tall { width:92px; height:132px; object-fit:cover; object-position:50% 0; }
.hand-sec { padding:16vh 4vw 14vh; overflow:hidden; background:linear-gradient(176deg,var(--ink) 0 72%,#120d12 72.2%); }
.hand-head { padding-left:2vw; }
.uses { position:relative; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr); gap:3vw; align-items:center; max-width:1320px; margin:56px auto 0; }
.verbs { display:grid; gap:12px; transform:rotate(-2deg); }
.verb {
  position:relative; display:grid; grid-template-columns:auto; gap:6px; text-align:left; cursor:pointer; border:0;
  padding:14px 20px 14px 22px; background:var(--ink-2); color:var(--bone);
  box-shadow:inset 0 0 0 2px #ffffff26; clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
  transition:background .12s, color .12s, transform .25s var(--ease-snap);
}
.verb b { font:clamp(26px,2.6vw,36px)/1 Rocker,serif; color:var(--ivory); }
.verb span { font-size:15px; line-height:1.35; max-height:0; overflow:hidden; opacity:0; transition:max-height .3s var(--ease-out), opacity .2s; }
.verb:hover { transform:translateX(8px); }
.verb[aria-selected=true] { background:var(--crimson); color:var(--ivory); box-shadow:inset 0 0 0 3px var(--ivory), 8px 8px 0 var(--ink); transform:translateX(14px) rotate(-1deg); }
.verb[aria-selected=true] span { max-height:6em; opacity:1; }
.verb[aria-selected=true]::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-60deg,#ffffff12 0 10px,transparent 10px 22px); background-size:44px 100%; animation:stripes .8s linear infinite;
}
.verb-line { display:none; }
.table { position:relative; height:clamp(380px,40vw,520px); }
.tcard {
  position:absolute; left:0; top:0; width:268px; height:377px; transform-origin:50% 100%;
  transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(var(--s,1));
  transition:transform .55s var(--ease-snap), filter .3s, opacity .3s;
}
.tcard .cc { position:relative; cursor:default; }
.tcard .cc { transition:filter .3s, opacity .3s; }
.tcard.dim .cc { filter:brightness(.42) saturate(.5); }
.tcard.gone .cc { opacity:.6; filter:grayscale(1) brightness(.6); }
.use-stamp {
  position:absolute; z-index:6; left:50%; top:-26px; white-space:nowrap;
  padding:6px 14px; background:var(--ivory); color:var(--ink); font:24px/1 ChakraLabel,sans-serif; text-transform:uppercase;
  box-shadow:5px 5px 0 var(--crimson); transform:translateX(-50%) rotate(-4deg) scale(0); transition:transform .3s var(--ease-snap);
}
.use-stamp.show { transform:translateX(-50%) rotate(-4deg) scale(1); }
.use-stamp.red { background:var(--red); color:var(--ivory); box-shadow:5px 5px 0 var(--ink); }
.use-stamp.ink { background:var(--ink); color:var(--ivory); box-shadow:inset 0 0 0 2px var(--ivory), 5px 5px 0 var(--crimson); }
.table-blow,.table-pledge,.table-pile { position:absolute; z-index:0; opacity:0; transition:opacity .25s, transform .4s var(--ease-snap); pointer-events:none; }
.table-blow {
  right:2%; top:2%; display:flex; align-items:center; gap:12px; padding:10px 22px; background:var(--ink);
  box-shadow:inset 0 0 0 3px var(--ivory), 8px 8px 0 var(--crimson); transform:rotate(4deg) translateX(40px);
  font:16px ChakraLabel,sans-serif; text-transform:uppercase; color:var(--bone);
}
.table-blow b { font:46px/1 Germania,serif; color:var(--ivory); background:var(--red); padding:4px 12px; clip-path:polygon(50% 0,62% 18%,82% 8%,80% 30%,100% 34%,86% 52%,100% 70%,78% 72%,80% 94%,60% 84%,50% 100%,40% 84%,20% 94%,22% 72%,0 70%,14% 52%,0 34%,20% 30%,18% 8%,38% 18%); }
.table[data-verb=block] .table-blow { opacity:1; transform:rotate(4deg); }
.table-pledge {
  right:0; bottom:4%; width:min(250px,30%); aspect-ratio:268/377; border:3px dashed #ffffff55; transform:rotate(6deg);
  display:grid; place-items:end center; padding-bottom:10px; font:18px ChakraLabel,sans-serif; text-transform:uppercase; color:var(--bone);
}
.table[data-verb=pledge] .table-pledge { opacity:1; }
.table-pile { z-index:8; left:0; bottom:0; padding:6px 16px; background:var(--ink); box-shadow:inset 0 0 0 2px #ffffff55; font:16px ChakraLabel,sans-serif; text-transform:uppercase; transform:rotate(-4deg); }
.table[data-verb=pay] .table-pile { opacity:1; }
.table[data-verb=pay] .tcard.payer .pip { animation:pip .6s var(--ease-snap) both; }
@keyframes pip { 0% { scale:1; } 50% { scale:1.5; filter:brightness(1.6); } }

.linger { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:4vw; align-items:center; max-width:1320px; margin:18vh auto 0; }
.linger-copy .deck { margin-top:22px; }
.marks { margin-top:28px; }
.marks p { margin:14px 0 8px; font:14px ChakraLabel,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.marks ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.marks li {
  padding:4px 12px; background:var(--ink-2); box-shadow:inset 0 0 0 2px #ffffff30; font:16px ChakraLabel,sans-serif; text-transform:uppercase;
  transform:rotate(calc(var(--i,0) * 1deg - 2deg)); animation:tapeIn .35s var(--ease-out) both; animation-delay:calc(.2s + var(--i,0) * 50ms); animation-play-state:paused;
}
.marks.in li { animation-play-state:running; }
.marks ul:first-of-type li { background:var(--blood); box-shadow:inset 0 0 0 2px var(--red); }
.card-marks li { background:var(--ivory) !important; color:var(--ink); box-shadow:3px 3px 0 var(--crimson) !important; }
.linger-clip { position:relative; margin:0; transform:rotate(1.6deg); box-shadow:0 0 0 4px var(--ivory), 16px 16px 0 var(--crimson); }
.linger-clip video { aspect-ratio:16/9; }
/* Rings the HP and bleed readout in the footage's bottom-left corner. */
.linger-ring { position:absolute; left:1.5%; top:56%; width:17%; height:18%; border:4px solid var(--red); border-radius:50%; transform:rotate(-6deg); box-shadow:0 0 0 3px var(--ink); animation:ring 2.4s ease-in-out infinite; pointer-events:none; }
@keyframes ring { 50% { scale:1.08; } }
.linger-clip figcaption {
  position:absolute; left:22%; top:calc(100% + 18px); max-width:70%; padding:10px 16px; background:var(--ivory); color:var(--ink);
  font:15px/1.35 Chakra,sans-serif; box-shadow:6px 6px 0 var(--ink); transform:rotate(-2deg);
}
.linger-clip figcaption b { display:block; font:22px/1.1 ChakraLabel,sans-serif; text-transform:uppercase; color:var(--crimson); }
.linger-clip figcaption::before { content:''; position:absolute; left:-30px; top:-6px; width:42px; height:4px; background:var(--red); transform:rotate(-40deg); transform-origin:right; }

/* ---------- Climb (manga page) ---------- */
.climb { padding:16vh 4vw 16vh; background:var(--bone); color:var(--ink); overflow:hidden; }
.climb .slam-title { margin-left:2vw; color:var(--ink); }
.climb .slam-title em { color:var(--ivory); }
.climb .deck { color:#2a2629; margin-left:2vw; }
.climb .section-number { -webkit-text-stroke-color:#00000012; }
.page {
  position:relative; margin:56px auto 0; max-width:1280px; padding:18px;
  background:var(--ivory); box-shadow:0 0 0 4px var(--ink), 16px 16px 0 var(--crimson);
  display:grid; grid-template-columns:1fr 1fr; gap:14px; transform:rotate(1deg);
}
.panel { position:relative; margin:0; overflow:hidden; background:var(--ink); box-shadow:0 0 0 4px var(--ink); transition:transform .25s var(--ease-snap), box-shadow .2s; }
.panel video { aspect-ratio:16/9; }
.p-climb { grid-column:1 / -1; clip-path:polygon(0 0,100% 0,100% 88%,0 100%); }
.p-climb video { aspect-ratio:2.6/1; object-position:50% 40%; }
.p-battle { grid-column:1 / -1; margin-top:-3.4%; clip-path:polygon(0 12%,100% 0,100% 100%,0 100%); }
.p-hazard { clip-path:polygon(0 0,100% 0,95% 100%,0 100%); }
.p-visitor { clip-path:polygon(5% 0,100% 0,100% 100%,0 100%); }
.panel:hover { transform:translateY(-6px) rotate(-.5deg); z-index:3; box-shadow:0 0 0 4px var(--ink), 10px 10px 0 var(--crimson); }
.caption {
  position:absolute; left:18px; bottom:14px; max-width:min(60%,420px); padding:7px 12px;
  background:var(--ivory); color:var(--ink); border:2px solid var(--ink); font:15px/1.3 ChakraLabel,sans-serif;
  transform:rotate(-1.5deg); box-shadow:4px 4px 0 var(--ink); transition:opacity .2s, transform .25s var(--ease-snap);
}
.p-battle .caption { top:16%; bottom:auto; }
.p-visitor .caption { top:14px; bottom:auto; }
.panel:hover .caption { opacity:0; transform:rotate(-1.5deg) translateY(10px); }
.balloon {
  position:absolute; right:-10px; top:-56px; z-index:4; padding:22px 34px; background:var(--crimson); color:var(--ivory);
  font:clamp(22px,2.6vw,34px)/1.05 Rocker,serif; transform:rotate(6deg); pointer-events:none;
  clip-path:polygon(0 12%,8% 0,22% 10%,36% 0,50% 8%,64% 0,78% 10%,92% 0,100% 14%,96% 34%,100% 52%,94% 70%,100% 88%,84% 100%,64% 92%,46% 100%,30% 90%,12% 100%,4% 84%,0 64%,6% 46%,0 30%);
}
[data-panel] { opacity:0; scale:1.12; rotate:3deg; }
[data-panel].in { opacity:1; scale:1; rotate:0deg; transition:opacity .2s, scale .45s var(--ease-snap), rotate .45s var(--ease-snap); }
.spoils { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:4vw; align-items:center; max-width:1240px; margin:12vh auto 0; }
.spoils-clip { margin:0; transform:rotate(-2deg); box-shadow:0 0 0 4px var(--ink), 16px 16px 0 var(--crimson); }
.spoils-clip video { aspect-ratio:16/9; }
.spoils-copy .sub-title { margin-top:14px; font-size:clamp(32px,4vw,54px); }
.spoils-copy p { margin:0; color:#2a2629; max-width:38ch; }

/* ---------- Arsenal ---------- */
.arsenal { padding:16vh 4vw 16vh; overflow:hidden; background:linear-gradient(185deg,#120d12 0 40%,var(--ink) 40.2%); }
.arsenal > .slam-title { margin-left:2vw; }
.tally { display:flex; flex-wrap:wrap; gap:14px 34px; margin:46px 0 0 2vw; padding:0; list-style:none; transform:rotate(-3deg); }
.tally li { display:flex; align-items:baseline; gap:10px; }
.tally b { font:clamp(54px,7vw,96px)/1 Germania,serif; color:var(--ivory); text-shadow:5px 5px 0 var(--crimson); }
.tally span { font:18px ChakraLabel,sans-serif; text-transform:uppercase; color:var(--bone); max-width:9em; line-height:1.1; }
.dealer { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(220px,.7fr); gap:3vw; align-items:center; max-width:1320px; margin:8vh auto 0; }
.deal { position:relative; height:clamp(300px,30vw,420px); }
.deal .cc { position:absolute; transform-origin:50% 120%; transition:transform .45s var(--ease-snap), left .3s var(--ease-out), top .3s var(--ease-snap); }
.deal.gathering .cc { transition:transform .38s cubic-bezier(.6,0,.25,1), left .38s cubic-bezier(.6,0,.25,1), top .38s cubic-bezier(.6,0,.25,1); }
.deal-copy p { margin:0 0 26px; color:var(--bone); max-width:34ch; }
.forge { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,.55fr); gap:3vw; align-items:center; max-width:1320px; margin:14vh auto 0; }
.forge-copy p { color:var(--bone); margin:0 0 24px; max-width:44ch; }
.forms { display:flex; flex-wrap:wrap; gap:8px; transform:rotate(-2deg); }
.form {
  border:0; cursor:pointer; padding:8px 16px; background:var(--ink-2); color:var(--bone); font:17px ChakraLabel,sans-serif; text-transform:uppercase;
  box-shadow:inset 0 0 0 2px #ffffff30; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition:background .12s, transform .2s var(--ease-snap);
}
.form:hover { transform:translateY(-3px); }
.form[aria-selected=true] { background:var(--crimson); color:var(--ivory); transform:translateY(-4px); }
.anvil { position:relative; height:400px; display:grid; place-items:center; pointer-events:none; }
.anvil::before { content:''; position:absolute; inset:6% -6%; background:repeating-conic-gradient(from 0deg,#b0123022 0 8deg,transparent 8deg 18deg); mask-image:radial-gradient(circle,#000 25%,transparent 68%); animation:spin 40s linear infinite; }
.anvil .cc { position:relative; transform:rotate(-5deg) scale(var(--anvil-scale,1)); }
.anvil .cc.struck { animation:struck .45s var(--ease-snap); }
.anvil .flash { position:absolute; inset:0; background:radial-gradient(circle,#f4efe1 0 20%,transparent 60%); opacity:0; pointer-events:none; }
.anvil .flash.go { animation:flash .5s both; }
@keyframes struck { 0% { transform:rotate(-5deg) scale(calc(var(--anvil-scale,1) * 1.25)) translateY(-30px); } 40% { transform:rotate(-8deg) scale(calc(var(--anvil-scale,1) * .94)); } 100% { transform:rotate(-5deg) scale(var(--anvil-scale,1)); } }
@keyframes flash { 0% { opacity:0; } 15% { opacity:.9; } 100% { opacity:0; } }
.rack { display:grid; gap:10px; transform:rotate(-4deg); }
.sealed-tile {
  position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; text-align:left;
  border:0; cursor:pointer; padding:10px 14px; color:var(--ivory); overflow:hidden;
  background:repeating-linear-gradient(-60deg,#2a0c12 0 12px,#1a0a0e 12px 24px); box-shadow:inset 0 0 0 2px var(--ivory), 6px 6px 0 var(--crimson);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%); transition:transform .2s var(--ease-snap);
}
.sealed-tile::before { content:''; position:absolute; left:-10%; right:-10%; top:46%; height:4px; background:var(--crimson); transform:rotate(-12deg); }
.sealed-tile .wax { grid-row:1 / span 2; width:34px; height:34px; background:var(--crimson); border:3px solid var(--ivory); transform:rotate(45deg); position:relative; z-index:1; animation:wax 1.8s ease-in-out infinite; }
.sealed-tile b { position:relative; font:26px/1 ChakraLabel,sans-serif; text-transform:uppercase; }
.sealed-tile small { position:relative; font:12px ChakraLabel,sans-serif; text-transform:uppercase; color:var(--red); }
.sealed-tile:hover { transform:translateX(-8px); }
.sealed-tile.rattle { animation:rattle .4s; }
@keyframes wax { 50% { scale:1.1; } }
@keyframes rattle { 20% { translate:-6px 0; rotate:-2deg; } 40% { translate:5px 0; rotate:2deg; } 60% { translate:-3px 0; } 80% { translate:2px 0; } }

.saints { margin-top:14vh; }
.saints .sub-title,.saints .deck { margin-left:2vw; }
.rail {
  position:relative; height:330px; margin:30px -4vw 0 0; overflow:hidden;
  background:linear-gradient(-3deg,transparent 0 22px,var(--ink-2) 22px 44px,var(--crimson) 44px 50px,transparent 50px) top/100% 60px no-repeat;
}
/* Too narrow for every medal: the rail scrolls sideways, cord and all. */
.rail.scrolls { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; background-attachment:local; background-size:var(--rail-width) 60px; }
.rail.scrolls::-webkit-scrollbar { display:none; }
.rail-end { position:absolute; top:0; width:1px; height:1px; }
.medal { position:absolute; top:28px; width:118px; transform-origin:50% 0; cursor:grab; will-change:transform; }
.ribbon { width:30px; height:110px; margin:0 auto; background:linear-gradient(90deg,var(--crimson) 0 38%,var(--ivory) 38% 62%,var(--crimson) 62%); clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%); }
.tack { position:absolute; top:-6px; left:50%; width:16px; height:16px; margin-left:-8px; background:var(--ivory); transform:rotate(45deg); box-shadow:0 0 0 2px var(--ink); }
.medal img { width:118px; height:118px; object-fit:contain; margin-top:-10px; pointer-events:none; }
.medal.chosen::after { content:''; position:absolute; left:50%; bottom:-14px; width:20px; height:20px; margin-left:-10px; background:var(--crimson); border:3px solid var(--ivory); transform:rotate(45deg); }
.saint-tape { min-height:90px; margin:10px 0 0 2vw; max-width:640px; transform:rotate(-2deg); }
.saint-tape .tape { display:inline-block; padding:8px 18px; background:var(--crimson); font:28px Rocker,serif; box-shadow:6px 6px 0 var(--ink); animation:tapeIn .35s var(--ease-out) both; }
.saint-tape p { margin:12px 0 0 10px; padding:10px 14px; background:var(--ivory); color:var(--ink); font:16px/1.4 Chakra,sans-serif; box-shadow:6px 6px 0 var(--ink); animation:tapeIn .35s var(--ease-out) .06s both; }

.foes { margin:14vh 0 0 auto; max-width:1100px; }
.foe-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr); gap:14px; margin-top:24px; transform:rotate(-2deg); }
.foe {
  margin:0;
  position:relative; height:250px; overflow:hidden; background:#1d1820; box-shadow:inset 0 0 0 2px #ffffff22;
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%); transition:transform .25s var(--ease-snap);
}
.foe img { position:absolute; left:50%; bottom:-6%; height:118%; width:auto; max-width:none; transform:translateX(-50%); transition:transform .3s var(--ease-out); }
.foe:hover img { transform:translateX(-50%) scale(1.06); }
.foe span { position:absolute; left:8%; bottom:10px; padding:3px 10px; background:var(--ink); font:16px ChakraLabel,sans-serif; text-transform:uppercase; }
.foe b { position:absolute; right:10%; top:10px; font:28px/1 Germania,serif; color:var(--ivory); text-shadow:3px 3px 0 var(--crimson); }
.foe.unknown { display:grid; place-content:center; text-align:center; padding:20px; background:repeating-linear-gradient(-60deg,#2a0c12 0 14px,#1a0a0e 14px 28px); box-shadow:inset 0 0 0 3px var(--ivory); }
.foe.unknown strong { font:clamp(48px,5vw,70px)/1 Rocker,serif; color:var(--ivory); text-shadow:5px 5px 0 var(--crimson); }
.foe.unknown small { font:15px ChakraLabel,sans-serif; text-transform:uppercase; color:var(--bone); max-width:16ch; margin:8px auto 0; }

/* ---------- Waystation ---------- */
.waystation { padding:16vh 4vw 14vh; overflow:hidden; background:radial-gradient(ellipse at 70% 30%,#2a0c12,var(--ink) 65%); }
.waystation .slam-title,.waystation .deck { margin-left:2vw; }
.hub {
  position:relative; margin:56px auto 0; max-width:1280px; aspect-ratio:16/9;
  transform:perspective(1600px) rotateX(calc(4deg + var(--ty,0) * -2deg)) rotateY(calc(var(--tx,0) * 3deg)) rotate(-1deg);
  box-shadow:0 0 0 4px var(--ivory), 18px 18px 0 var(--crimson); transition:transform .4s var(--ease-out);
}
.hub-img { width:100%; height:100%; object-fit:cover; background:var(--ink-2); }
.hub-pins { position:absolute; inset:0; }
.pin { position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; background:var(--crimson); border:3px solid var(--ivory); transform:rotate(45deg); }
.pin-lead { position:absolute; height:3px; background:var(--crimson); transform-origin:0 50%; pointer-events:none; }
.tag {
  position:absolute; z-index:2; width:max-content; max-width:260px; border:0; cursor:pointer; text-align:left;
  padding:10px 16px 10px 14px; background:var(--ink); color:var(--ivory);
  box-shadow:inset 0 0 0 2px var(--ivory), 6px 6px 0 var(--crimson);
  transform:translate(-50%,-50%) rotate(var(--r,-3deg)); transition:transform .22s var(--ease-snap), background .1s;
  animation:tagSlam .45s var(--ease-snap) both; animation-delay:calc(var(--i) * 90ms); animation-play-state:paused;
}
.hub.in .tag { animation-play-state:running; }
.tag b { display:block; font:22px/1 Rocker,serif; }
.tag small { display:block; font:13px ChakraLabel,sans-serif; color:var(--bone); text-transform:uppercase; margin-top:4px; }
.tag:hover,.tag:focus-visible,.tag.active { background:var(--crimson); transform:translate(-50%,-56%) rotate(calc(var(--r,-3deg) - 2deg)) scale(1.06); }
.tag-card {
  position:absolute; z-index:5; width:min(420px,60%); padding:0; background:var(--ivory); color:var(--ink);
  box-shadow:0 0 0 3px var(--ink), 10px 10px 0 var(--crimson); transform:rotate(2deg); pointer-events:none;
  opacity:0; translate:0 20px; transition:opacity .18s, translate .3s var(--ease-snap);
}
.tag-card.show { opacity:1; translate:0 0; }
.tag-card video { aspect-ratio:16/9; }
.tag-card p { margin:0; padding:10px 14px 12px; font:15px/1.35 Chakra,sans-serif; }
@keyframes tagSlam { 0% { opacity:0; transform:translate(-50%,-140%) rotate(var(--r,-3deg)) scale(1.3); } 100% { opacity:1; } }

/* ---------- Gospel ---------- */
.gospel { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:4vw; align-items:center; padding:16vh 6vw; overflow:hidden; background:linear-gradient(160deg,#1a1016,var(--ink) 60%); }
.gospel-rays { position:absolute; inset:0; background:repeating-linear-gradient(115deg,#f4efe108 0 40px,transparent 40px 120px); mask-image:linear-gradient(90deg,#000,transparent 70%); pointer-events:none; }
.lancet {
  /* A wide church window: the whole 16:9 clip under a stained-glass arch. The top padding (a
     share of the width) is the arch's height, about a quarter of the window's. */
  position:relative; margin:0 auto; width:min(100%,860px); padding:19% 10px 10px; background:var(--ivory);
  clip-path:polygon(50% 0,64% 1.6%,78% 4%,90% 8%,97% 15%,100% 25%,100% 100%,0 100%,0 25%,3% 15%,10% 8%,22% 4%,36% 1.6%);
}
.lancet::before {
  content:''; position:absolute; top:10px; left:10px; right:10px; height:calc(25% - 18px);
  clip-path:polygon(50% 0,64% 6%,78% 16%,90% 32%,97% 60%,100% 100%,0 100%,3% 60%,10% 32%,22% 16%,36% 6%);
  background:
    radial-gradient(circle at 50% 100%,var(--ivory) 0 9%,var(--ink) 9% 11%,transparent 11%),
    repeating-conic-gradient(from -90deg at 50% 100%,var(--crimson) 0 9deg,var(--ink) 9deg 10.5deg,#6e0b1d 10.5deg 19.5deg,var(--ink) 19.5deg 21deg);
}
.lancet video { aspect-ratio:16/9; }
.tag-card video { height:auto; }
.gospel-copy { position:relative; }
.leaf {
  position:relative; margin:40px 0 0; padding:30px 36px 26px; max-width:520px; background:var(--ivory); color:var(--ink);
  clip-path:polygon(0 4%,62% 0,100% 6%,100% 100%,0 100%); transform:rotate(-2deg); box-shadow:none;
}
.leaf { padding-right:64px; }
.leaf::after { content:''; position:absolute; right:22px; top:0; width:22px; height:110px; background:#4b6a2b; clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%); }
.leaf p { margin:14px 0 14px; font:clamp(20px,2vw,26px)/1.4 Fell,serif; }
.leaf p::first-letter { float:left; font:72px/.8 Rocker,serif; color:var(--crimson); margin:6px 10px 0 0; }
.leaf cite { font:15px ChakraLabel,sans-serif; font-style:normal; text-transform:uppercase; color:var(--crimson); }

/* ---------- Achievements ---------- */
.deeds { padding:16vh 4vw 16vh; overflow:hidden; background:var(--ink); }
.deeds .slam-title,.deeds .deck { margin-left:2vw; }
.deeds-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:3vw; align-items:start; max-width:1320px; margin:60px auto 0; }
.deeds-board { transform:rotate(-2.5deg); box-shadow:0 0 0 4px var(--ivory), 12px 12px 0 var(--crimson); margin-top:8vh; }
.deeds-pack { transform:rotate(1.5deg); box-shadow:0 0 0 4px var(--ivory), 18px 18px 0 var(--crimson); }
.deeds-pack::before { content:''; position:absolute; inset:-14%; z-index:-1; background:repeating-conic-gradient(from 0deg,#b0123033 0 7deg,transparent 7deg 16deg); mask-image:radial-gradient(circle,#000 30%,transparent 70%); animation:spin 50s linear infinite; }

/* ---------- Penance ---------- */
.penance { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:4vw; align-items:center; padding:16vh 4vw 18vh; overflow:hidden; background:linear-gradient(168deg,var(--blood) 0 46%,var(--ink) 46.2%); }
.penance-numeral { position:absolute; left:-2vw; top:4vh; font:clamp(200px,34vw,520px)/.8 Rocker,serif; color:#00000040; pointer-events:none; user-select:none; }
.penance-copy { position:relative; padding-left:2vw; }
.penance-clip { transform:rotate(-2deg); box-shadow:0 0 0 4px var(--ivory), 18px 18px 0 var(--ink), 24px 24px 0 var(--crimson); }
/* Calling Card face, after ECS/Rendering/CardConcepts/CallingCardStyle.cs via catalog/catalog.css. */
.cc {
  position:absolute; width:268px; height:377px; padding:0; border:0; border-radius:10px; text-align:left; cursor:pointer;
  background:var(--bg); color:var(--fi); box-shadow:5px 7px 0 var(--ink);
  transform-origin:50% 120%; user-select:none; -webkit-user-select:none;
}
.cc .art-window { position:absolute; inset:0; overflow:hidden; border-radius:10px; }
.cc .card-art { position:absolute; bottom:-8px; left:50px; width:252px; height:auto; pointer-events:none; }
.cc .card-art.contain { left:56px; bottom:0; width:200px; height:330px; object-fit:contain; }
.cc .costs { position:absolute; z-index:2; top:57px; left:-8px; display:flex; gap:6px; padding:1px 12px 1px 15px; height:27px; background:var(--ink); transform:skewX(10deg); box-shadow:0 0 0 1px var(--ivory); }
.cc .pip { display:block; width:21px; height:25px; background:#84807c; border:3px solid var(--ivory); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); transform:skewX(-10deg); }
.cc .pip.Red { background:var(--red); } .cc .pip.White { background:#fffaee; } .cc .pip.Black { background:#18161c; }
.cc .card-name { position:absolute; z-index:2; top:9px; left:40px; width:194px; height:40px; font:28px/40px Rocker,serif; white-space:nowrap; color:var(--ivory); transform:rotate(-1.6deg); }
.cc .card-name::before { content:''; position:absolute; z-index:-1; inset:-1px -10px -1px -32px; background:var(--ink); border:1.6px solid var(--ivory); transform:skewX(3deg); box-shadow:5px 5px 0 var(--ink); }
.cc .card-capital { position:absolute; z-index:3; top:8px; left:-5px; width:40px; height:46px; text-align:center; font:43px/46px Rocker,serif; background:var(--bg); color:var(--fi); border:2px solid currentColor; box-shadow:3px 3px 0 var(--ink); transform:rotate(-8deg); }
.cc .card-text { position:absolute; bottom:10px; left:68px; right:10px; padding:6px 7px; background:var(--sb); color:var(--si); font:16px/1.15 Chakra,sans-serif; clip-path:polygon(3% 0,100% 0,97% 100%,0 100%); }
.cc .stat { position:absolute; z-index:1; left:12px; width:50px; text-align:center; filter:drop-shadow(3px 4px 0 var(--ink)); }
.cc .stat-value { display:grid; place-items:center; height:58px; font:44px/1 Germania,serif; color:var(--ivory); }
.cc .stat.block .stat-value { background:var(--steel); border-top:3px solid var(--ivory); clip-path:polygon(0 0,100% 0,100% 45%,85% 78%,50% 100%,15% 78%,0 45%); text-shadow:2px 2px #1a3450; }
.cc .stat.damage { left:-1px; width:76px; }
.cc .stat.damage .stat-value { height:72px; background:var(--red); clip-path:polygon(50% 0,59% 14%,76% 4%,77% 23%,96% 19%,88% 38%,100% 50%,86% 60%,95% 79%,75% 77%,73% 96%,58% 86%,45% 100%,38% 84%,18% 94%,21% 73%,2% 73%,13% 55%,0 42%,18% 36%,9% 17%,31% 21%,32% 2%,43% 16%); text-shadow:2px 2px var(--ink); }
.cc .stat.ap .stat-value,.cc .stat.free .stat-value { height:32px; border:2px solid var(--ink); background:var(--ivory); color:var(--ink); font-size:26px; }
.cc .stat.ap .stat-value { display:flex; justify-content:space-evenly; }
.cc .stat.ap .stat-value::after { content:'AP'; color:var(--crimson); font:14px ChakraLabel,sans-serif; }
.cc .stat.free { transform:rotate(-9deg); }
.cc .stat.free .stat-value { font:17px/1 ChakraLabel,sans-serif; background:var(--crimson); color:var(--ivory); border:3px solid var(--ivory); }
.cc .delta { position:absolute; right:-5px; bottom:0; background:#56c45c; color:var(--ink); padding:1px 4px; font:14px ChakraLabel,sans-serif; transform:rotate(-8deg); }
.cc .type-seal { position:absolute; bottom:23px; left:13px; display:grid; place-items:center; width:48px; height:48px; border:3px solid var(--ivory); border-radius:50%; background:var(--red); box-shadow:0 0 0 2px var(--ink),3px 4px 0 2px var(--ink); }
.cc .type-seal.block { background:var(--steel); } .cc .type-seal.prayer { background:var(--gold); }
.cc .type-icon { width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1); }
.cc .type-seal.prayer .type-icon { filter:brightness(0); }
.cc .upg { position:absolute; top:-12px; right:-10px; z-index:4; padding:3px 10px; background:var(--ivory); color:var(--crimson); font:15px ChakraLabel,sans-serif; transform:rotate(8deg); box-shadow:3px 3px 0 var(--ink); }

/* ---------- Download ---------- */
.final { min-height:90svh; display:grid; place-content:center; justify-items:start; gap:44px; padding:14vh 8vw; overflow:hidden; background:var(--crimson); }
.final-rays { position:absolute; inset:-50%; background:repeating-conic-gradient(from 0deg at 70% 50%,#00000022 0 7deg,transparent 7deg 16deg); animation:spin 60s linear infinite; }
.final-title { position:relative; margin:0; font:clamp(56px,11vw,170px)/.88 Rocker,serif; transform:rotate(-5deg); text-shadow:8px 8px 0 var(--ink); }
.final-title em { font-style:normal; color:var(--ink); text-shadow:6px 6px 0 var(--ivory); }
.platforms { position:relative; display:flex; flex-wrap:wrap; gap:30px 34px; max-width:1100px; }
.final .blade-crimson::before { background:var(--ink); }
.final .blade-crimson::after { background:var(--ivory); }
.final .blade-chev { color:var(--red); }
.platform.mine { --lean:-6deg; font-size:clamp(30px,3.4vw,46px); padding:22px 60px 22px 34px; order:-1; }
.platform.mine { color:var(--ink); }
.final .platform.mine::before { background:var(--ivory); box-shadow:inset 0 0 0 4px var(--ink); }
.final .platform.mine::after { background:var(--ink); }
.platform.mine .blade-chev { color:var(--crimson); }
.platform.mine .blade-tag { background:var(--gold); }
.final-note { position:relative; margin:0; font:16px ChakraLabel,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.foot { display:flex; flex-wrap:wrap; gap:18px 28px; padding:28px 6vw 40px; background:var(--ink); font:15px ChakraLabel,sans-serif; color:var(--muted); }
.foot span { color:var(--ivory); margin-right:auto; }
@keyframes spin { to { rotate:360deg; } }

/* ---------- Theater ---------- */
.theater { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:5vh 4vw; }
.theater[hidden] { display:none; }
.theater-slab { position:absolute; inset:-10%; background:var(--ink); transform:skewX(-8deg); animation:theaterIn .35s var(--ease-out) both; }
.theater-slab::after { content:''; position:absolute; top:0; bottom:0; right:8%; width:24px; background:var(--crimson); }
.theater-video { position:relative; width:min(1500px,100%); max-height:88vh; aspect-ratio:16/9; background:#000; box-shadow:0 0 0 4px var(--ivory), 14px 14px 0 var(--crimson); animation:theaterVideo .45s var(--ease-snap) .1s both; }
.theater-close { position:absolute; top:18px; right:22px; border:0; cursor:pointer; padding:10px 18px; background:var(--ivory); color:var(--ink); font:18px ChakraLabel,sans-serif; text-transform:uppercase; transform:rotate(3deg); box-shadow:5px 5px 0 var(--crimson); }
.theater-close:hover { background:var(--crimson); color:var(--ivory); }
@keyframes theaterIn { from { transform:skewX(-8deg) translateX(-110%); } }
@keyframes theaterVideo { from { opacity:0; transform:scale(.85) rotate(-3deg); } }

/* ---------- Mid widths ---------- */
@media (max-width: 1180px) {
  .forge { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .rack { grid-column:1 / -1; grid-template-columns:repeat(4,minmax(0,1fr)); transform:rotate(-2deg); }
  .foe-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .foe.unknown { grid-column:1 / -1; height:auto; }
  /* Three columns squeeze the speech balloons; stack the panels and stagger them instead. */
  .beats { grid-template-columns:1fr; max-width:760px; gap:44px; }
  .beat:nth-child(2) { margin:0 0 0 8%; }
  .beat:nth-child(3) { margin-top:0; }
}

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  body { font-size:16px; }
  .hero-copy { padding:18vh 6vw 30vh; }
  .hero-crusader { height:70svh; right:-14vw; bottom:-4vh; opacity:.92; }
  .hero-disc { width:86vw; right:-28vw; top:auto; bottom:4vh; }
  .hero-wedge { width:100vw; right:-40vw; }
  .hero-print { mask-image:none; background:radial-gradient(circle,#09080c 1.4px,transparent 1.6px) 0 0/7px 7px, linear-gradient(180deg,#09080cdd 0 50%,#09080c55); }
  .hero-actions { gap:22px; }
  .blade { font-size:22px; }
  .uses { grid-template-columns:1fr; gap:24px; }
  .verbs { grid-template-columns:1fr 1fr; transform:none; gap:8px; }
  .verb { padding:10px 14px; }
  .verb span { display:none; }
  .verb[aria-selected=true] { transform:none; }
  .verb-line { display:block; min-height:4.2em; margin:0; padding:10px 14px; background:var(--ivory); color:var(--ink); font-size:15px; line-height:1.35; transform:rotate(-1deg); box-shadow:5px 5px 0 var(--crimson); }
  .table { height:auto; aspect-ratio:1/1.05; }
  .use-stamp { font-size:30px; top:-40px; }
  .linger { grid-template-columns:1fr; margin-top:12vh; }
  .linger-clip { margin-bottom:110px; }
  .linger-clip figcaption { left:12%; max-width:84%; }
  .page { grid-template-columns:1fr; padding:10px; gap:10px; }
  .p-hazard,.p-visitor,.p-climb,.p-battle { clip-path:none; margin-top:0; }
  .p-climb video { aspect-ratio:16/9; }
  .panel:hover { transform:none; }
  .caption,.p-battle .caption,.p-visitor .caption { position:static; display:block; max-width:none; transform:none; box-shadow:none; border:0; border-top:3px solid var(--ink); font-size:14px; padding:8px 10px; }
  .panel:hover .caption { opacity:1; transform:none; }
  .balloon { top:-48px; right:-6px; padding:14px 20px; }
  .spoils,.dealer,.forge,.about,.beats { grid-template-columns:1fr; }
  .beats { gap:34px; margin-top:6vh; }
  .beat:nth-child(n) { margin:0; }
  .about { padding-bottom:14vh; background:linear-gradient(176deg,var(--blood) 0 84%,var(--ink) 84.2%); }
  .deal { height:auto; aspect-ratio:1/.8; }
  .anvil { height:auto; aspect-ratio:1/1.1; }
  .rack { grid-template-columns:1fr 1fr; }
  .tally { gap:6px 22px; }
  .tally span { font-size:14px; }
  .rail { height:270px; }
  .medal { width:88px; } .medal img { width:88px; height:88px; } .ribbon { height:90px; width:24px; }
  .foe-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .foe { height:170px; }
  .foe span { font-size:12px; padding:2px 6px; }
  .foe b { font-size:20px; }
  .tag { max-width:150px; padding:6px 10px; }
  .tag b { font-size:16px; }
  .tag small { display:none; }
  .tag-card { position:relative; left:auto !important; top:auto !important; width:100%; transform:none; margin-top:16px; display:none; }
  .tag-card.show { display:block; }
  .hub { transform:none; }
  .gospel { grid-template-columns:1fr; padding:14vh 6vw; }
  .lancet { width:100%; padding-left:6px; padding-right:6px; padding-bottom:6px; }
  .lancet::before { top:6px; left:6px; right:6px; height:calc(25% - 12px); }
  .deeds-grid { grid-template-columns:1fr; gap:44px; }
  .deeds-board { margin-top:0; }
  .penance { grid-template-columns:1fr; gap:8vh; }
  .platforms { flex-direction:column; align-items:flex-start; gap:26px; }
  .ladder-list a { font-size:20px; }
}
@media (max-width: 480px) {
  .hero-actions .blade { font-size:19px; padding:14px 38px 14px 20px; gap:14px; }
  .tag { max-width:120px; }
  .tag b { font-size:14px; }
  .foe { height:140px; }
  .foe.unknown { grid-column:1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:1ms !important; animation-delay:0s !important; transition-duration:1ms !important; }
  [data-reveal],[data-panel] { opacity:1; translate:none; scale:none; rotate:none; }
  .cut { display:none; }
}