/* ---------- Ninefall · About ----------
   The page for people who want to read about the game rather than play it: press, festivals, search, the making-of. Shared links still
   open the game at /. It runs under the site's policy (static/_headers: style-src and script-src 'self'), so everything is here and in
   about.js: no inline style or script. Every element rests in its final place; about.js adds html.motion only when motion is allowed,
   and only then do things start out of place and fall in. Lines are a hairline core inside a soft glow, the game's line grammar. */
@font-face { font-family: "Playfair Display"; src: url("/fonts/playfair-display.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --deep: #050813; --night: #0b1024; --navy: #121a40; --panel: #0f1633; --line: #27305a;
  --gold: #e2b458; --gold-soft: #f4d58f; --gold-hot: #fff3cf; --ivory: #f3ecdc; --mist: #b9bdcc; --muted: #8a90a8;
  --fall: cubic-bezier(.2, .75, .12, 1);
  --land: cubic-bezier(.34, 1.36, .52, 1);
  --gut: clamp(16px, 5vw, 72px);
  --hero-k: .5;   /* one scale for every hero on the page, so every stand is the same size: about.js sets it from the band's cells */
}
@media (min-width: 960px) { :root { --hero-k: .85; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the itch.io links wait for launch (about.js), whatever display their own rules give */
html { background: var(--deep); color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--deep); color: var(--ivory); font: 400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 400; letter-spacing: .01em; text-wrap: balance; }
h2 { font-size: clamp(36px, 6vw, 68px); line-height: 1.02; }
.eyebrow { font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.lede { color: var(--mist); font-size: clamp(16px, 1.6vw, 19px); max-width: 46ch; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 12px; background: var(--night); color: var(--ivory); }
.skip:focus { left: 16px; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--gold); color: var(--night); font: 700 15px/1 Inter, sans-serif; text-decoration: none; box-shadow: 0 0 0 1px #f4d58f66, 0 12px 34px -14px #e2b458cc; transition: transform .25s var(--fall), box-shadow .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #f4d58f99, 0 18px 40px -14px #e2b458; }
.btn.ghost { background: transparent; color: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); }

/* ---------- the bar ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gut); background: linear-gradient(#050813f0, #05081300); }
.brand { font: 400 22px/1 "Playfair Display", serif; color: var(--ivory); text-decoration: none; }
.top .btn { padding: 9px 16px; font-size: 14px; }

/* ---------- the sky and the fall ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 84px var(--gut) 0; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse 90% 60% at 62% 74%, #1b2454 0%, #10173d 38%, #080c20 72%, var(--deep) 100%); }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-copy { position: relative; z-index: 3; display: grid; gap: 14px; justify-items: start; max-width: 600px; }
.wordmark { font-size: clamp(66px, 14vw, 156px); line-height: .9; display: flex; color: var(--ivory); text-shadow: 0 2px 0 #0007, 0 0 40px #e2b45822; }
.wordmark .l { display: inline-block; }
.tag { font-size: clamp(17px, 2vw, 21px); color: var(--mist); max-width: 30ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.stage { position: relative; z-index: 2; align-self: end; justify-self: center; width: min(1040px, 100%); height: clamp(380px, 60vh, 580px); }
/* the ring stands behind the nine, its foot at the middle of their height: on a phone as wide as the nine allow (it may rise behind the words above),
   on a wide screen as large as the room above them (it never leaves the stage) */
.ring { position: absolute; left: 50%; bottom: calc(300px * var(--hero-k) + 20px); width: min(88%, calc(640px * var(--hero-k))); height: auto; transform: translateX(-50%); overflow: visible; }
.ring circle { fill: none; }
.ring .glow { stroke: #e2b45830; stroke-width: 7; }
.ring .core { stroke: var(--gold); stroke-width: 1.4; }
.ring .inner { stroke: #e2b45848; stroke-width: 1; stroke-dasharray: 2 9; transform-origin: 300px 300px; animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* the nine at one scale, as the game drew them: five behind, four in front between them, the row fitted to the stage (about.js sets --fit) */
.lineup { position: absolute; left: 50%; bottom: 20px; display: grid; justify-items: center; transform-origin: 50% 100%; transform: translateX(-50%) scale(var(--hero-k)); }
.rank { display: flex; align-items: flex-end; margin: 0; padding: 0; list-style: none; }
.rank.front { margin-top: -200px; position: relative; z-index: 2; }
/* every hero in a slot as wide as its stand, the stand centred in it (the stands block below): the back rank's stands side by side, the front rank's in their gaps */
.fig { position: relative; flex: 0 0 auto; width: 130px; }
.fig img, .pose img { position: relative; display: block; max-width: none; width: auto; height: auto; }
.fig .drop { display: block; width: 130px; transform-origin: 50% 90%; }
/* each of the nine stands in a pool of shadow under its stand and casts a soft one of its own, so the line-up stands on the ground and the
   front rank stands clear of the back (owner, 21 Oct 2026: "add some nice shadow on the heroes lineup"; then "Shadow is too strong", so light) */
.fig::before { content: ""; position: absolute; left: 50%; bottom: -26px; z-index: -1; width: 230px; height: 62px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(1 2 8 / .38), rgb(1 2 8 / .18) 50%, rgb(1 2 8 / 0)); pointer-events: none; }
.fig img { filter: drop-shadow(0 8px 10px rgb(1 2 8 / .22)); }
.scroll-hint { position: absolute; left: 50%; bottom: 14px; z-index: 1; transform: translateX(-50%); font: 600 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: grid; justify-items: center; gap: 8px; }
.scroll-hint::after { content: ""; width: 1px; height: 28px; background: linear-gradient(#e2b45800, var(--gold)); }
@media (max-width: 959px) { .scroll-hint { display: none; } }   /* on a phone it would show between the heroes' feet */
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr; align-items: center; padding-top: 72px; }
  .hero-copy { padding-bottom: 8vh; }
  .stage { align-self: center; height: min(82vh, 740px); }
  .ring { top: 4px; width: auto; aspect-ratio: 1; max-width: 70%; }
}

/* the intro: only with motion */
.motion .wordmark .l { opacity: 0; transform: translateY(-.55em) rotate(-7deg); }
.motion.ready .wordmark .l { opacity: 1; transform: none; transition: transform .95s var(--land), opacity .5s ease; }
.motion.ready .wordmark .l:nth-child(1) { transition-delay: .30s; } .motion.ready .wordmark .l:nth-child(2) { transition-delay: .37s; }
.motion.ready .wordmark .l:nth-child(3) { transition-delay: .44s; } .motion.ready .wordmark .l:nth-child(4) { transition-delay: .51s; }
.motion.ready .wordmark .l:nth-child(5) { transition-delay: .58s; } .motion.ready .wordmark .l:nth-child(6) { transition-delay: .65s; }
.motion.ready .wordmark .l:nth-child(7) { transition-delay: .72s; } .motion.ready .wordmark .l:nth-child(8) { transition-delay: .79s; }
.motion .hero-copy > :not(.wordmark) { opacity: 0; transform: translateY(12px); }
.motion.ready .hero-copy > :not(.wordmark) { opacity: 1; transform: none; transition: opacity .8s ease 1s, transform .9s var(--fall) 1s; }
.motion .ring .core, .motion .ring .glow { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion.ready .ring .core, .motion.ready .ring .glow { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--fall) .15s; }
.motion .ring .inner { opacity: 0; }
.motion.ready .ring .inner { opacity: 1; transition: opacity 1.2s ease 1.4s; }
.motion .fig .drop { opacity: 0; transform: translateY(-46vh) scale(.6); }
.motion .fig.landed .drop { opacity: 1; transform: none; transition: transform .75s var(--land), opacity .2s ease; }
.motion .fig::before { opacity: 0; transform: translateX(-50%) scale(.35); }   /* the shadow spreads as its hero lands */
.motion .fig.landed::before { opacity: 1; transform: translateX(-50%); transition: transform .75s var(--land), opacity .35s ease; }
.motion .scroll-hint { opacity: 0; }
.motion.ready .scroll-hint { opacity: 1; transition: opacity 1s ease 3.2s; }
.motion .scroll-hint::after { animation: hint 2.2s var(--fall) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- held scenes: the band, the Anchor ---------- */
.scene { position: relative; }
.scene .stick { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; gap: 28px; padding: 76px var(--gut) 36px; }
.motion .scene.held { height: 330vh; height: 330svh; }
.motion .scene.held .stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.band .stick { justify-items: center; }
@media (min-width: 960px) { .band .stick { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; justify-items: stretch; } }
.band-copy { position: relative; display: grid; gap: 28px; align-self: center; width: 100%; max-width: 520px; }
.panel { display: grid; gap: 12px; }
.count { color: var(--muted); font-size: 14px; letter-spacing: .04em; }
.count b { color: var(--gold-soft); font: 400 30px/1 "Playfair Display", serif; margin-right: 6px; }
.motion .band .panel { grid-area: 1 / 1; }   /* the two panels share one cell, so the taller sets its height */
.grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 16px); width: min(94vw, 560px, 46vh); aspect-ratio: 1; justify-self: center; }
@media (min-width: 960px) { .grid { width: min(620px, 70vh); } }
/* at the larger scale a hero rises past its cell: the grid keeps headroom for the top row, and on a phone the band's words close up a little */
.grid { margin-top: calc(70px * var(--hero-k)); }
@media (max-width: 959px) { .band .lede { font-size: 15px; line-height: 1.5; } .band .stick { gap: 18px; } }
.slot { position: relative; min-width: 0; min-height: 0; border-radius: 16px; overflow: visible; background: radial-gradient(ellipse 72% 34% at 50% 90%, #1f2c6a 0%, #111940 55%, #0b1024 100%); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .5s ease; }
/* a hero at the page's one scale, standing at the foot of its box */
.pose { position: absolute; left: 50%; bottom: 0; line-height: 0; transform: translateX(-50%) scale(var(--hero-k)); transform-origin: 50% 100%; }
.slot .pose { bottom: 6%; }
.slot .streak { position: absolute; left: 50%; top: -60%; width: 2px; height: 70%; border-radius: 2px; background: linear-gradient(#f4d58f00, #f4d58fbb 70%, var(--gold-hot)); box-shadow: 0 0 12px 2px #e2b45855; opacity: 0; transform: translateX(-50%); pointer-events: none; }
.slot.lit { box-shadow: inset 0 0 0 1px #e2b458aa, 0 0 26px -6px #e2b458bb; }
.motion .band .slot img { opacity: 0; }
.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lines path { fill: none; stroke-linecap: round; }
.lines .glow { stroke: #e2b45850; stroke-width: 9; }
.lines .core { stroke: var(--gold-hot); stroke-width: 1.6; }
.motion .lines path { stroke-dasharray: 1; stroke-dashoffset: 1; }

.anchors .stick { justify-items: center; text-align: center; }
.anchor-art { position: relative; width: min(86vw, 460px, 58vh); aspect-ratio: 1; }
.anchor-art .shard { position: absolute; inset: 0; will-change: transform; }
.anchor-art .shard img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.shard.k0 { clip-path: polygon(52% 46%, 43.9% 37.4%, 35.5% 29%, 26.5% 20.4%, 14.2% 15.3%, 6.1% 7.8%, 0% 0%, 48% 0%, 47.4% 6.5%, 47.9% 13.9%, 47.4% 22.3%, 50.6% 30.4%, 52.8% 38.1%); }
.shard.k1 { clip-path: polygon(52% 46%, 52.8% 38.1%, 50.6% 30.4%, 47.4% 22.3%, 47.9% 13.9%, 47.4% 6.5%, 48% 0%, 100% 0%, 92.5% 5.6%, 86.5% 14.7%, 75.6% 20.6%, 66.3% 28.2%, 59.5% 37.4%); }
.shard.k2 { clip-path: polygon(52% 46%, 59.5% 37.4%, 66.3% 28.2%, 75.6% 20.6%, 86.5% 14.7%, 92.5% 5.6%, 100% 0%, 100% 53%, 93.4% 51.1%, 85.3% 52.6%, 76.5% 53%, 68.7% 45.9%, 60.4% 45.4%); }
.shard.k3 { clip-path: polygon(52% 46%, 60.4% 45.4%, 68.7% 45.9%, 76.5% 53%, 85.3% 52.6%, 93.4% 51.1%, 100% 53%, 100% 100%, 92.7% 92.9%, 87.2% 82.4%, 74.4% 76.3%, 65.7% 66.7%, 60.4% 54.9%); }
.shard.k4 { clip-path: polygon(52% 46%, 60.4% 54.9%, 65.7% 66.7%, 74.4% 76.3%, 87.2% 82.4%, 92.7% 92.9%, 100% 100%, 45% 100%, 44.8% 92.3%, 45% 83.5%, 44.9% 73.6%, 48% 64.1%, 49.2% 55%); }
.shard.k5 { clip-path: polygon(52% 46%, 49.2% 55%, 48% 64.1%, 44.9% 73.6%, 45% 83.5%, 44.8% 92.3%, 45% 100%, 0% 100%, 5.9% 91.1%, 13% 81.3%, 27.3% 76.3%, 33.9% 64%, 44.3% 56.3%); }
.shard.k6 { clip-path: polygon(52% 46%, 44.3% 56.3%, 33.9% 64%, 27.3% 76.3%, 13% 81.3%, 5.9% 91.1%, 0% 100%, 0% 51%, 7.1% 48.5%, 15.6% 49%, 25.2% 51%, 34% 44.4%, 43.3% 48%); }
.shard.k7 { clip-path: polygon(52% 46%, 43.3% 48%, 34% 44.4%, 25.2% 51%, 15.6% 49%, 7.1% 48.5%, 0% 51%, 0% 0%, 6.1% 7.8%, 14.2% 15.3%, 26.5% 20.4%, 35.5% 29%, 43.9% 37.4%); }
/* the break: a burst of light where it gives, then the game's own verdict where the Anchor stood */
.burst { position: absolute; left: 52%; top: 46%; width: 76%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.4); background: radial-gradient(circle, #fff3cf 0%, #f4d58f99 16%, #e2b45838 40%, #e2b45800 68%); opacity: 0; pointer-events: none; }
.anchor-verdict { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; opacity: 0; pointer-events: none; }
.verdict-word { font: 400 clamp(56px, 10vw, 104px)/1 "Playfair Display", serif; color: var(--ivory); text-shadow: 0 0 42px #e2b45855; }
.cracks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cracks path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cracks .glow { stroke: #ffcf7a55; stroke-width: 3.2; }
.cracks .core { stroke: var(--gold-hot); stroke-width: .6; }
.motion .cracks path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anchor-copy { display: grid; gap: 12px; justify-items: center; max-width: 560px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; margin: 4px 0 0; padding: 0; list-style: none; }
.chips li { padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 600 12px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; transition: background .4s, color .4s, box-shadow .4s; }
.chips li.on, .chips li:not(.off) { color: var(--night); background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.motion .chips li.off { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
/* beside the Anchor the copy sits centred, as the band's does beside its grid: stretched to the art's height, its rows spread apart and the
   difficulties grew into tall pills with their words at the top (owner, 21 Oct 2026, in Safari) */
@media (min-width: 960px) { .anchors .stick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; text-align: left; } .anchor-copy { justify-items: start; } .chips { justify-content: flex-start; } }

/* ---------- plain sections ---------- */
.section { padding: clamp(72px, 12vh, 140px) var(--gut); display: grid; gap: 28px; }
.section-head { display: grid; gap: 12px; max-width: 760px; }

/* the 34 outfits drift past */
/* the cards hold the hero's body and stand; weapons reach past them (owner: "Let the weapon overflow the card"), so the rows leave room above */
.marquee { display: grid; gap: calc(130px * var(--hero-k) + 22px); overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: calc(140px * var(--hero-k) + 10px) var(--gut) 10px; }
.track { display: flex; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none; }
.motion .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.motion .track { animation: drift 78s linear infinite; }
.motion .track.rev { animation-direction: reverse; animation-duration: 92s; }
.motion .marquee:hover .track, .motion .marquee:focus-within .track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }
.card { position: relative; width: max(118px, calc(210px * var(--hero-k) + 26px)); display: grid; justify-items: center; gap: 4px; padding: 12px 8px 12px; border-radius: 16px; background: linear-gradient(#141c46, #0b1024); box-shadow: inset 0 0 0 1px var(--line); }
.card .frame { position: relative; z-index: 1; display: block; width: 100%; height: calc(250px * var(--hero-k)); }   /* above every card's ground, so a weapon reaching past its card stays in front */
.card b { font: 600 14px/1.2 Inter, sans-serif; }
.card small { color: var(--muted); font-size: 12px; }

/* the phone, at different depths */
.phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 40px); justify-items: center; align-items: start; max-width: 1100px; width: 100%; justify-self: center; }
@media (min-width: 760px) { .phones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.phone { width: 100%; max-width: 236px; border-radius: 30px; padding: 7px; background: #0e1430; box-shadow: inset 0 0 0 1px #2a3360, 0 40px 70px -40px #000; will-change: transform; }
.phone img { width: 100%; aspect-ratio: 720 / 1500; border-radius: 23px; object-fit: cover; }
.phone figcaption { padding: 10px 4px 2px; text-align: center; color: var(--muted); font-size: 13px; }

/* the making-of, in numbers */
.making { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .making { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.numbers div { padding: 18px 18px 16px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; }
.numbers dt { order: 2; color: var(--muted); font-size: 14px; }
.numbers dd { order: 1; margin: 0; font: 400 clamp(38px, 5vw, 56px)/1 "Playfair Display", serif; color: var(--gold-soft); font-variant-numeric: tabular-nums; }

/* press */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; margin: 0; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--mist); }
.kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.kit a { display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ivory); text-decoration: none; font-size: 14px; }
.kit a:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.kit img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: var(--night); }
.kit small { color: var(--muted); font-size: 12px; }

.ja { font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Inter, sans-serif; }
.ja h2 { font-family: "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", "Playfair Display", serif; font-size: clamp(30px, 5vw, 54px); line-height: 1.25; }
.ja .lede { max-width: 38em; line-height: 1.9; }

.foot { padding: clamp(80px, 14vh, 160px) var(--gut) 40px; display: grid; gap: 22px; justify-items: center; text-align: center; background: radial-gradient(ellipse 70% 80% at 50% 100%, #1b2454 0%, #0b1024 55%, var(--deep) 100%); }
.foot h2 { font-size: clamp(40px, 7vw, 84px); }
.foot small { color: var(--muted); font-size: 13px; }
.foot .support { color: var(--mist); font-size: 15px; max-width: 46ch; text-wrap: balance; }   /* the owner's PayPal (23 Oct 2026: "Just use paypal and my real name can be disclosed") */
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; font-size: 14px; }
.foot nav .row { display: contents; }
@media (max-width: 480px) { .foot nav { display: grid; justify-items: center; gap: 14px; } .foot nav .row { display: flex; gap: 24px; } }   /* two centred rows on a phone, never one link alone */

/* a section's head rises once as it enters (about.js marks .seen) */
.motion .rise { opacity: 0; transform: translateY(26px); }
.motion .rise.seen { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s var(--fall); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ring .inner { animation: none; } }

/* ---------- stands (generated by about-gen.py from the renders) ----------
   Every render shares one scale, so every stand is the same size; these put each stand on one baseline and centre it. */
.fig img[src$="/heroes/alchemist.webp"] { left: -30px; }
.slot img[src$="/heroes/alchemist.webp"], .card img[src$="/heroes/alchemist.webp"] { left: 4px; }
.fig img[src$="/heroes/archer.webp"] { left: -30px; }
.slot img[src$="/heroes/archer.webp"], .card img[src$="/heroes/archer.webp"] { left: 5px; }
.fig img[src$="/heroes/astrape.webp"] { left: -30px; }
.slot img[src$="/heroes/astrape.webp"], .card img[src$="/heroes/astrape.webp"] { left: 7px; }
.fig img[src$="/heroes/bastion.webp"] { left: -30px; }
.fig img[src$="/heroes/berserker.webp"] { left: -30px; }
.slot img[src$="/heroes/berserker.webp"], .card img[src$="/heroes/berserker.webp"] { left: 47px; }
.fig img[src$="/heroes/bloomsinger.webp"] { left: -30px; }
img[src$="/heroes/brushmage.webp"] { top: 1px; }
.fig img[src$="/heroes/brushmage.webp"] { left: -30px; }
.slot img[src$="/heroes/brushmage.webp"], .card img[src$="/heroes/brushmage.webp"] { left: 15px; }
img[src$="/heroes/cleric.webp"] { top: 5px; }
.fig img[src$="/heroes/cleric.webp"] { left: -30px; }
.slot img[src$="/heroes/cleric.webp"], .card img[src$="/heroes/cleric.webp"] { left: 18px; }
.fig img[src$="/heroes/conduit.webp"] { left: -30px; }
.slot img[src$="/heroes/conduit.webp"], .card img[src$="/heroes/conduit.webp"] { left: 1px; }
img[src$="/heroes/corsair.webp"] { top: 28px; }
.fig img[src$="/heroes/corsair.webp"] { left: -30px; }
.slot img[src$="/heroes/corsair.webp"], .card img[src$="/heroes/corsair.webp"] { left: 46px; }
img[src$="/heroes/dancer.webp"] { top: -1px; }
.fig img[src$="/heroes/dancer.webp"] { left: -46px; }
.slot img[src$="/heroes/dancer.webp"], .card img[src$="/heroes/dancer.webp"] { left: 10px; }
.fig img[src$="/heroes/duelist.webp"] { left: -30px; }
.fig img[src$="/heroes/elementalist.webp"] { left: -30px; }
.slot img[src$="/heroes/elementalist.webp"], .card img[src$="/heroes/elementalist.webp"] { left: 28px; }
img[src$="/heroes/guardian.webp"] { top: 8px; }
.fig img[src$="/heroes/guardian.webp"] { left: -70px; }
.slot img[src$="/heroes/guardian.webp"], .card img[src$="/heroes/guardian.webp"] { left: -2px; }
img[src$="/heroes/gunbrand.webp"] { top: -1px; }
.fig img[src$="/heroes/gunbrand.webp"] { left: -30px; }
.slot img[src$="/heroes/gunbrand.webp"], .card img[src$="/heroes/gunbrand.webp"] { left: 90px; }
.fig img[src$="/heroes/gunner.webp"] { left: -29px; }
.slot img[src$="/heroes/gunner.webp"], .card img[src$="/heroes/gunner.webp"] { left: 14px; }
.fig img[src$="/heroes/invoker.webp"] { left: -30px; }
.slot img[src$="/heroes/invoker.webp"], .card img[src$="/heroes/invoker.webp"] { left: 16px; }
.fig img[src$="/heroes/juggernaut.webp"] { left: -30px; }
.slot img[src$="/heroes/juggernaut.webp"], .card img[src$="/heroes/juggernaut.webp"] { left: 62px; }
img[src$="/heroes/khione.webp"] { top: 1px; }
.fig img[src$="/heroes/khione.webp"] { left: -30px; }
.slot img[src$="/heroes/khione.webp"], .card img[src$="/heroes/khione.webp"] { left: 2px; }
img[src$="/heroes/kindler.webp"] { top: 1px; }
.fig img[src$="/heroes/kindler.webp"] { left: -68px; }
.slot img[src$="/heroes/kindler.webp"], .card img[src$="/heroes/kindler.webp"] { left: -18px; }
img[src$="/heroes/lashshade.webp"] { top: 73px; }
.fig img[src$="/heroes/lashshade.webp"] { left: -46px; }
.slot img[src$="/heroes/lashshade.webp"], .card img[src$="/heroes/lashshade.webp"] { left: -6px; }
img[src$="/heroes/mimic.webp"] { top: 11px; }
.fig img[src$="/heroes/mimic.webp"] { left: -29px; }
.slot img[src$="/heroes/mimic.webp"], .card img[src$="/heroes/mimic.webp"] { left: 1px; }
img[src$="/heroes/monk.webp"] { top: 1px; }
.fig img[src$="/heroes/monk.webp"] { left: -30px; }
img[src$="/heroes/moonblade.webp"] { top: 23px; }
.fig img[src$="/heroes/moonblade.webp"] { left: -31px; }
.slot img[src$="/heroes/moonblade.webp"], .card img[src$="/heroes/moonblade.webp"] { left: 12px; }
img[src$="/heroes/necromancer.webp"] { top: 1px; }
.fig img[src$="/heroes/necromancer.webp"] { left: -74px; }
.slot img[src$="/heroes/necromancer.webp"], .card img[src$="/heroes/necromancer.webp"] { left: -12px; }
img[src$="/heroes/oculist.webp"] { top: -1px; }
.fig img[src$="/heroes/oculist.webp"] { left: -30px; }
img[src$="/heroes/oracle.webp"] { top: 1px; }
.fig img[src$="/heroes/oracle.webp"] { left: -72px; }
.slot img[src$="/heroes/oracle.webp"], .card img[src$="/heroes/oracle.webp"] { left: -13px; }
.fig img[src$="/heroes/razorwing.webp"] { left: -34px; }
.slot img[src$="/heroes/razorwing.webp"], .card img[src$="/heroes/razorwing.webp"] { left: -2px; }
img[src$="/heroes/reaper.webp"] { top: 9px; }
.fig img[src$="/heroes/reaper.webp"] { left: -30px; }
.slot img[src$="/heroes/reaper.webp"], .card img[src$="/heroes/reaper.webp"] { left: 42px; }
img[src$="/heroes/refractor.webp"] { top: -1px; }
.fig img[src$="/heroes/refractor.webp"] { left: -77px; }
.slot img[src$="/heroes/refractor.webp"], .card img[src$="/heroes/refractor.webp"] { left: 18px; }
.fig img[src$="/heroes/ronin.webp"] { left: -30px; }
.slot img[src$="/heroes/ronin.webp"], .card img[src$="/heroes/ronin.webp"] { left: 2px; }
img[src$="/heroes/scribe.webp"] { top: -1px; }
.fig img[src$="/heroes/scribe.webp"] { left: -30px; }
.slot img[src$="/heroes/scribe.webp"], .card img[src$="/heroes/scribe.webp"] { left: 8px; }
.fig img[src$="/heroes/shinobi.webp"] { left: -30px; }
.slot img[src$="/heroes/shinobi.webp"], .card img[src$="/heroes/shinobi.webp"] { left: 20px; }
img[src$="/heroes/skylancer.webp"] { top: 3px; }
.fig img[src$="/heroes/skylancer.webp"] { left: -30px; }
.slot img[src$="/heroes/skylancer.webp"], .card img[src$="/heroes/skylancer.webp"] { left: 22px; }
img[src$="/heroes/starseer.webp"] { top: 4px; }
.fig img[src$="/heroes/starseer.webp"] { left: -39px; }
.slot img[src$="/heroes/starseer.webp"], .card img[src$="/heroes/starseer.webp"] { left: 20px; }
img[src$="/heroes/twinfang.webp"] { top: -1px; }
.fig img[src$="/heroes/twinfang.webp"] { left: -30px; }
.fig img[src$="/heroes/wildheart.webp"] { left: -30px; }
.slot img[src$="/heroes/wildheart.webp"], .card img[src$="/heroes/wildheart.webp"] { left: 13px; }
/* ---------- end of stands ---------- */
/* ---------- glows the capture cut ----------
   Six renders' Limit Break lightning runs off the edge of the capture and ended in a hard straight line; it fades out toward that edge. */
img[src$="/heroes/elementalist.webp"], img[src$="/heroes/skylancer.webp"], img[src$="/heroes/gunbrand.webp"] {
  -webkit-mask-image: linear-gradient(#0000, #0003 11px, #0008 22px, #000d 33px, #000 44px); mask-image: linear-gradient(#0000, #0003 11px, #0008 22px, #000d 33px, #000 44px); }
img[src$="/heroes/necromancer.webp"] { -webkit-mask-image: linear-gradient(#0000, #0008 10px, #000 20px); mask-image: linear-gradient(#0000, #0008 10px, #000 20px); }
img[src$="/heroes/guardian.webp"] { -webkit-mask-image: linear-gradient(90deg, #0000, #0008 7px, #000 14px); mask-image: linear-gradient(90deg, #0000, #0008 7px, #000 14px); }
img[src$="/heroes/refractor.webp"] { -webkit-mask-image: linear-gradient(90deg, #0000, #0003 9px, #0008 18px, #000d 27px, #000 36px); mask-image: linear-gradient(90deg, #0000, #0003 9px, #0008 18px, #000d 27px, #000 36px); }