/* ==========================================================================
   Raidnarok website: a scroll story.
   Look: docs/ui/raidnarok_web_entwurf.png (owner-approved mockup).
   Colours follow the game: warm near-black, bronze, gold, parchment text.
   Frames are the game's own UI pictures (assets/ui/*.webp) as border-image.

   Rules:
   - No JavaScript on this site. All motion is CSS.
   - Every scroll-driven effect lives inside
       @supports (animation-timeline: view())  +  prefers-reduced-motion: no-preference
     (see "MOTION" near the end). Outside of it the page is complete and
     static: the story beats stack, nothing stays invisible.
   - prefers-reduced-motion: every animation stops (end of file).
   - No inline style attributes: the CSP in public/.htaccess allows only
     this stylesheet.
   ========================================================================== */

@font-face {
  font-family: "Marcellus SC";
  src: url("../assets/fonts/marcellus-sc.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg:            #100b07;
  --bg-alt:        #170f09;
  --bg-deep:       #0a0604;
  --panel:         #1f160e;

  --border:        rgba(200, 160, 96, .32);
  --border-soft:   rgba(236, 228, 214, .08);

  --text:          #ece4d6;
  --text-dim:      #c2b5a0;
  --text-faint:    #8d806f;

  --bronze:        #c8a060;
  --gold:          #ffd982;
  --ember:         #ff8a3a;

  --wrap:          1200px;
  --radius-sm:     8px;
  --torn:          40px;     /* height of the torn edge between sections */

  --font-head:     "Marcellus SC", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:     ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow:        0 18px 48px rgba(0, 0, 0, .6);
  --ease:          cubic-bezier(.22, .61, .36, 1);

  /* Frames, slices measured on the HALF-SIZE files from tools/make_images.py:
     slot 381x74 (rim + rivet 14 px), buy 515x81 (rim 20 px),
     title_plaque 733x118 and sail 587x97 (only the knotwork ends are kept). */
  --frame-slot:    url("../assets/ui/slot.webp") 14 fill / 14px stretch;
}

/* ---------------------------------------------------------------- base -- */

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

html { scroll-padding-top: 70px; overflow-x: hidden; scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
/* Slide-ins move content sideways for a moment. clip (not hidden) keeps it
   from widening the page on phones without creating a scroll container,
   which would break the scroll-driven animations inside. */
main, .site-footer { overflow-x: clip; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--gold); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: #fff1c9; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400; line-height: 1.12;
  margin: 0 0 .5em; letter-spacing: .03em;
}
h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
p  { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { text-wrap: balance; }

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

.wrap {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 400;
  background: var(--gold); color: #1a1206;
  padding: 10px 18px; border-radius: 0 0 8px 8px; font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

.eyebrow {
  font-size: .8rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 1em;
}
.center { text-align: center; }

/* -------------------------------------------------------------- header -- */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: 8px 0;
  background: rgba(16, 11, 7, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.home .site-header { background: transparent; border-bottom: 0; backdrop-filter: none; pointer-events: none; }
.home .site-header .header-right { pointer-events: auto; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.header-left { min-width: 0; }
.header-right { display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; }
.brand picture { display: block; line-height: 0; }
.brand-logo { width: 120px; height: auto; }

/* ---------------------------------------------------- language switch -- */

.lang-switch { position: relative; }
.lang-switch summary {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; cursor: pointer; list-style: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(16, 11, 7, .7);
  font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  color: var(--text-dim);
  transition: border-color .25s, color .25s, background-color .25s;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::marker { content: ""; }
.lang-switch summary:hover { color: var(--text); border-color: var(--gold); background: rgba(200, 160, 96, .18); }
.lang-switch summary img,
.lang-list img { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.lang-arrow {
  width: 0; height: 0; margin-left: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .25s var(--ease);
}
.lang-switch[open] .lang-arrow { transform: rotate(180deg); }
.lang-switch[open] summary { border-color: var(--gold); color: var(--text); }
.lang-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 190px; padding: 6px;
  background: rgba(23, 16, 9, .98);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.lang-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 6px;
  color: var(--text-dim); font-size: .9rem;
}
.lang-list a:hover { background: rgba(200, 160, 96, .14); color: var(--text); }
.lang-list a[aria-current="true"] { color: var(--gold); background: rgba(200, 160, 96, .08); }
.lang-list .lang-name { flex: 1; }
.lang-list .lang-code { font-size: .72rem; letter-spacing: .1em; color: var(--text-faint); }

/* ================================================================ HERO == */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 110px 0 clamp(80px, 9vw, 120px);
  background: var(--bg-deep);
}
.hero-depth { position: absolute; inset: 0; pointer-events: none; }
.hero-back { z-index: -4; }
.hero-art { display: block; width: 100%; height: 100%; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }

.hero-fire {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 26% at 82% 55%, rgba(255, 128, 40, .42), transparent 70%),
    radial-gradient(ellipse 22% 20% at 12% 62%, rgba(255, 120, 40, .30), transparent 70%),
    radial-gradient(ellipse 80% 26% at 50% 100%, rgba(255, 96, 24, .36), transparent 72%);
  mix-blend-mode: screen;
  animation: fireFlicker 3.4s ease-in-out infinite;
}
@keyframes fireFlicker {
  0% { opacity: .55; } 18% { opacity: .95; } 31% { opacity: .7; } 47% { opacity: 1; }
  63% { opacity: .62; } 80% { opacity: .9; } 100% { opacity: .55; }
}

.hero-mist { z-index: -2; overflow: hidden; }
.hero-mist span {
  position: absolute; left: -40%; width: 180%; height: 34%;
  background:
    radial-gradient(ellipse 18% 46% at 15% 50%, rgba(190, 170, 150, .16), transparent 70%),
    radial-gradient(ellipse 22% 40% at 42% 55%, rgba(160, 140, 125, .14), transparent 70%),
    radial-gradient(ellipse 16% 50% at 68% 45%, rgba(190, 170, 150, .15), transparent 70%),
    radial-gradient(ellipse 20% 44% at 90% 55%, rgba(160, 140, 125, .13), transparent 70%);
  animation: mistDrift 46s linear infinite alternate;
}
.hero-mist span:nth-child(1) { top: 46%; }
.hero-mist span:nth-child(2) { top: 64%; height: 30%; animation-duration: 63s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes mistDrift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

/* Vignette + fade into the next section. */
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(6, 3, 1, .7) 100%),
    linear-gradient(180deg, rgba(10, 6, 3, .4) 0%, transparent 18%, transparent 46%, rgba(16, 11, 7, .7) 76%, var(--bg) 100%);
}

/* Rising embers: own column, size, speed, sway and delay per span. */
.embers { z-index: 0; overflow: hidden; }
.embers span {
  --x: 50%; --s: 4px; --d: 9s; --w: 30px; --del: 0s;
  position: absolute; left: var(--x); bottom: -12px;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #fff6d0 0%, #ffc35a 45%, rgba(255, 110, 30, 0) 72%);
  box-shadow: 0 0 calc(var(--s) * 2) calc(var(--s) / 2) rgba(255, 130, 40, .65);
  opacity: 0;
  animation: emberRise var(--d) linear var(--del) infinite;
}
.embers span:nth-child(1)  { --x: 6%;  --s: 4px; --d: 9s;    --w: 40px;  --del: -1s; }
.embers span:nth-child(2)  { --x: 13%; --s: 3px; --d: 12s;   --w: -30px; --del: -6s; }
.embers span:nth-child(3)  { --x: 21%; --s: 5px; --d: 10s;   --w: 25px;  --del: -3s; }
.embers span:nth-child(4)  { --x: 28%; --s: 2px; --d: 8s;    --w: -45px; --del: -7s; }
.embers span:nth-child(5)  { --x: 35%; --s: 4px; --d: 13s;   --w: 35px;  --del: -2s; }
.embers span:nth-child(6)  { --x: 42%; --s: 3px; --d: 9.5s;  --w: -20px; --del: -9s; }
.embers span:nth-child(7)  { --x: 49%; --s: 6px; --d: 11s;   --w: 50px;  --del: -4s; }
.embers span:nth-child(8)  { --x: 55%; --s: 2px; --d: 7.5s;  --w: -35px; --del: -1.5s; }
.embers span:nth-child(9)  { --x: 61%; --s: 4px; --d: 10.5s; --w: 30px;  --del: -8s; }
.embers span:nth-child(10) { --x: 67%; --s: 5px; --d: 12.5s; --w: -40px; --del: -5s; }
.embers span:nth-child(11) { --x: 72%; --s: 3px; --d: 8.5s;  --w: 20px;  --del: -2.5s; }
.embers span:nth-child(12) { --x: 77%; --s: 6px; --d: 9s;    --w: -50px; --del: -6.5s; }
.embers span:nth-child(13) { --x: 82%; --s: 4px; --d: 11.5s; --w: 45px;  --del: -3.5s; }
.embers span:nth-child(14) { --x: 86%; --s: 3px; --d: 7s;    --w: -25px; --del: -.5s; }
.embers span:nth-child(15) { --x: 90%; --s: 5px; --d: 10s;   --w: 30px;  --del: -7.5s; }
.embers span:nth-child(16) { --x: 94%; --s: 2px; --d: 8s;    --w: -30px; --del: -4.5s; }
.embers span:nth-child(17) { --x: 97%; --s: 4px; --d: 12s;   --w: 25px;  --del: -10s; }
.embers span:nth-child(18) { --x: 3%;  --s: 3px; --d: 10s;   --w: 35px;  --del: -8.5s; }
@keyframes emberRise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: 1; }
  45%  { transform: translate(var(--w), -38vh) scale(.9); }
  75%  { opacity: .8; }
  100% { transform: translate(calc(var(--w) * -0.6), -82vh) scale(.4); opacity: 0; }
}

.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero-title { margin: 0; }
.logo-wrap { position: relative; display: block; width: min(820px, 88vw); margin: 0 auto; }
.logo-wrap picture { display: block; }
.hero-logo {
  width: 100%; height: auto;
  filter:
    drop-shadow(0 0 2px rgba(255, 217, 130, .5))
    drop-shadow(0 0 24px rgba(255, 140, 40, .35))
    drop-shadow(0 10px 30px rgba(0, 0, 0, .8));
}
/* One warm light sweep across the letters, masked by the logo itself. */
.logo-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 246, 214, .95) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-mask: url("../assets/logo-900.webp") center / 100% 100% no-repeat;
  mask: url("../assets/logo-900.webp") center / 100% 100% no-repeat;
  mix-blend-mode: overlay;
  animation: logoShine 1.8s var(--ease) 1.4s 1 both;
}
@keyframes logoShine { from { background-position: 120% 0; } to { background-position: -20% 0; } }

.hero-tagline {
  margin: .3em auto 0; max-width: 34ch;
  font-family: var(--font-head); font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  letter-spacing: .06em; color: #f6ecd8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9);
}
.hero-actions { display: flex; justify-content: center; margin-top: 1.4em; }

/* Cinematic opening: two black bars close away once on load. Their end state
   (height 0) is the default, so without animations they are simply absent. */
.letterbox { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.letterbox::before, .letterbox::after {
  content: ""; position: absolute; left: 0; right: 0; height: 0; background: #000;
  animation: letterbox 1.9s cubic-bezier(.7, 0, .2, 1) .15s 1 both;
}
.letterbox::before { top: 0; }
.letterbox::after { bottom: 0; }
@keyframes letterbox { from { height: 13vh; } to { height: 0; } }

/* -------------------------------------------------------- Steam button --
   Gold frame (buy.webp) around a dark plate, gold text, pulsing glow.
   Not a link yet: see _steam_button.html. */
.steam-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 64px; padding: 0 1.4em;
  border: 12px solid #c8a060;
  border-image: url("../assets/ui/buy.webp") 20 / 12px stretch;
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, rgba(255, 190, 90, .22), transparent 70%),
    linear-gradient(180deg, #3a2410, #1c1006);
  color: var(--gold);
  font-family: var(--font-head); font-size: clamp(1.1rem, 1.9vw, 1.35rem); letter-spacing: .05em;
  text-shadow: 0 0 10px rgba(255, 170, 60, .55), 0 2px 3px rgba(0, 0, 0, .9);
  white-space: nowrap;
  animation: btnGlow 2.8s ease-in-out infinite;
}
.steam-btn img { width: 34px; height: auto; filter: drop-shadow(0 0 6px rgba(255, 170, 60, .6)); }
@keyframes btnGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 200, 90, .35)) drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
  50%      { filter: drop-shadow(0 0 20px rgba(255, 200, 90, .9)) drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
}
.steam-btn.is-link { transition: transform .18s var(--ease); }
.steam-btn.is-link:hover { transform: translateY(-2px); color: #fff1c9; }

.scroll-arrow {
  position: absolute; left: 50%; bottom: 18px; z-index: 2;
  width: 44px; height: 44px; margin-left: -22px;
  display: grid; place-items: center;
}
.scroll-arrow span {
  width: 16px; height: 16px;
  border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 6px rgba(255, 180, 60, .8));
  animation: arrowBob 1.8s ease-in-out infinite;
}
.scroll-arrow:hover span { border-color: #fff1c9; }
@keyframes arrowBob {
  0%, 100% { transform: translateY(-4px) rotate(45deg); opacity: .65; }
  50%      { transform: translateY(5px) rotate(45deg); opacity: 1; }
}

/* ======================================================= SHARED HEADS == */

.sec-title {
  display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
  margin: 0 0 .7em; text-align: center;
  color: var(--gold); letter-spacing: .08em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .85);
}
.sec-title::before, .sec-title::after {
  content: ""; flex: 1; height: 2px; min-width: 20px;
  background: linear-gradient(90deg, transparent, var(--bronze));
}
.sec-title::after { background: linear-gradient(270deg, transparent, var(--bronze)); }
.sec-title span { position: relative; padding: 0 22px; }
.sec-title span::before, .sec-title span::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: var(--bronze); transform: rotate(45deg);
}
.sec-title span::before { left: 0; }
.sec-title span::after  { right: 0; }
.sec-lead {
  max-width: 64ch; margin: 0 auto clamp(30px, 4vw, 50px); text-align: center;
  color: var(--text-dim); font-size: 1.06rem;
}
.sub-title {
  margin: clamp(60px, 8vw, 110px) 0 .4em; text-align: center;
  color: var(--gold); font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

/* Torn edge: the section overlaps the one before by --torn and its top is cut
   with a jagged mask (assets/ui/torn.svg). */
.torn {
  position: relative;
  margin-top: calc(var(--torn) * -1);
  -webkit-mask:
    url("../assets/ui/torn.svg") top / 100% var(--torn) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat;
  mask:
    url("../assets/ui/torn.svg") top / 100% var(--torn) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat;
}

/* ================================================================ STORY ==
   DEFAULT (no scroll timeline, or reduced motion): beats stacked. */

.story { position: relative; background: var(--bg); padding-top: clamp(40px, 6vw, 80px); }
.story-intro { text-align: center; }
.beats { counter-reset: none; }
.beat { position: relative; margin: 0 auto clamp(30px, 5vw, 60px); max-width: var(--wrap); padding-inline: clamp(16px, 4vw, 32px); }
.beat-art { display: block; overflow: hidden; border: 14px solid #6a4a26; border-image: var(--frame-slot); box-shadow: var(--shadow); }
.beat-art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.beat-art-ship img { object-position: 12% 50%; }
.beat-text { padding: 18px 4px 0; }
.beat-no {
  display: block; font-family: var(--font-head); font-size: 1rem; letter-spacing: .3em;
  color: var(--ember); margin-bottom: .3em;
}
.beat-text h3 {
  font-size: clamp(1.8rem, 4.6vw, 3.6rem); color: #fff3d6; margin: 0 0 .25em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .9);
}
.beat-text p { color: var(--text-dim); font-size: clamp(1rem, 1.6vw, 1.3rem); margin: 0; max-width: 40ch; }
.fuse { display: none; }

/* ============================================================= FEATURES == */

.features {
  padding: calc(var(--torn) + clamp(50px, 7vw, 100px)) 0 clamp(60px, 8vw, 110px);
  background:
    radial-gradient(70% 40% at 15% 20%, rgba(255, 120, 40, .07), transparent 70%),
    radial-gradient(60% 40% at 90% 60%, rgba(200, 160, 96, .06), transparent 70%),
    var(--bg-alt);
}

.row {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(26px, 4vw, 64px);
  align-items: center; margin-top: clamp(50px, 7vw, 100px);
}
.row-flip .row-media { order: 2; }
.row-media {
  position: relative; margin: 0; line-height: 0;
  border: 14px solid #6a4a26; border-image: var(--frame-slot);
  background: #000; box-shadow: var(--shadow);
}
.row-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.row-media-duo { margin-bottom: 40px; }
.duo-inset {
  position: absolute; width: 46%; right: -6%; bottom: -16%;
  border: 10px solid #6a4a26; border-image: url("../assets/ui/slot.webp") 14 fill / 10px stretch;
  box-shadow: var(--shadow); background: #000;
}

.row-text h3 { color: #fff3d6; }
.row-text > p { color: var(--text-dim); font-size: 1.05rem; }
.kick {
  margin: 0 0 .6em; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ember);
}
.mini-head { margin: 1.2em 0 .5em; font-family: var(--font-head); color: var(--bronze); letter-spacing: .1em; }

/* Labels: glowing words separated by thin pipes, no frames (owner 01.11.2026; plaques and pills both rejected).
   Every word sits 22px right of the one before, with its pipe in that gap. The list is shifted 22px left and
   cut off on its left 18px, so the pipe in front of the first word of every line is hidden. */
.chips { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; margin-left: -22px; padding: 8px 0;
  clip-path: inset(-20px -20px -20px 18px); }
.chips li {
  position: relative; isolation: isolate; margin-left: 22px; padding: 2px 4px;
  color: var(--gold); font-family: var(--font-head); font-size: .98rem; letter-spacing: .04em;
  text-shadow: 0 0 5px rgba(255, 190, 90, .75), 0 0 9px rgba(255, 140, 40, .35);
  cursor: default;
}
.chips li::after {   /* a soft ember glow behind each word */
  content: ""; position: absolute; inset: 1px -8px; z-index: -1; border-radius: 50%;   /* flat: ends just above and below the word */
  background: radial-gradient(farthest-side, rgba(255, 150, 50, .3), transparent);
}
.chips li::before {   /* the pipe in the gap before each word */
  content: "|"; position: absolute; left: -15px; top: 50%; transform: translateY(-52%);
  color: var(--bronze); opacity: .65; text-shadow: none;
}
.chips-boss li { color: #ffb08a; text-shadow: 0 0 5px rgba(255, 120, 70, .75), 0 0 9px rgba(255, 70, 30, .35); }
.chips-dark li { color: var(--text-dim); text-shadow: 0 0 8px rgba(255, 220, 160, .25); }
.chips-dark li::after { display: none; }

.fusions { display: grid; gap: 6px; }
.fusions li { color: var(--text-dim); font-size: .95rem; padding-left: 18px; position: relative; }
.fusions li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--ember); transform: rotate(45deg); }
.fusions strong { color: var(--gold); font-family: var(--font-head); font-weight: 400; letter-spacing: .04em; margin-right: .35em; }

/* Events: framed painting tiles. */
.events { display: grid; gap: 14px; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 760px) { .events { grid-template-columns: repeat(2, 1fr); } }
.events li {
  position: relative; overflow: hidden; text-align: center;
  border: 12px solid #6a4a26; border-image: url("../assets/ui/slot.webp") 14 fill / 12px stretch;
  background: #120b06; padding-bottom: 12px;
}
.events img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.events strong { display: block; margin: 10px 6px 2px; font-family: var(--font-head); font-weight: 400; color: var(--gold); font-size: 1.05rem; }
.events span { display: block; padding: 0 8px; color: var(--text-dim); font-size: .84rem; line-height: 1.4; }
.events span.con { color: #ff8a70; }   /* bad weather: only a drawback, in the game's drawback red */

/* "And also": dense icon tiles. */
.also { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 26px; }
.also li {
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 14px;
  align-items: center; padding: 16px 18px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: linear-gradient(160deg, rgba(42, 28, 15, .9), rgba(20, 13, 7, .9));
}
.also img { grid-row: 1 / span 2; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 180, 70, .35)); }
.also strong { font-family: var(--font-head); font-weight: 400; color: var(--gold); font-size: 1.08rem; letter-spacing: .04em; }
.also span { color: var(--text-dim); font-size: .9rem; line-height: 1.45; }

/* =============================================================== WORLDS == */

.sec-worlds {
  isolation: isolate; overflow: hidden;
  padding: calc(var(--torn) + clamp(50px, 7vw, 100px)) 0 clamp(60px, 8vw, 110px);
  background: var(--bg-deep);
}
.worlds-art { position: absolute; inset: 0; z-index: -2; display: block; }
.worlds-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.worlds-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 6, 4, .85) 0%, rgba(10, 6, 4, .35) 30%, rgba(10, 6, 4, .35) 60%, rgba(10, 6, 4, .9) 100%);
}
.sec-worlds .sec-lead { color: #e2d7c4; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }

/* Nine cards in a row; hover/focus widens a card and reveals its painting. */
.wcards { display: flex; gap: 8px; height: clamp(360px, 34vw, 460px); }
.wcard {
  --place: none;
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 10px 18px;
  border: 12px solid #6a4a26; border-image: url("../assets/ui/slot.webp") 14 fill / 12px stretch;
  background: #120b06;
  transition: flex-grow .6s var(--ease), box-shadow .4s var(--ease);
}
.wcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(10, 6, 4, .1) 30%, rgba(10, 6, 4, .92) 100%), var(--place) center / cover no-repeat;
  opacity: .35; filter: saturate(.5);
  transition: opacity .6s var(--ease), filter .6s var(--ease), transform 1.2s var(--ease);
}
.wcard > * { position: relative; z-index: 1; }
.wcard img { width: min(100%, 96px); transition: transform .4s var(--ease), filter .4s var(--ease); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .8)); }
.wcard strong {
  display: block; margin-top: .4em; font-family: var(--font-head); font-weight: 400;
  color: var(--gold); font-size: clamp(.78rem, 1vw, 1rem); letter-spacing: .04em; text-align: center;
  text-shadow: 0 2px 6px #000; white-space: nowrap;
  /* Closed cards are narrow: the name runs upwards like on a banner. */
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.wmore {
  display: block; flex: none; max-height: 0; opacity: 0; overflow: hidden; text-align: center;
  /* = the inner width of an OPEN card (grow 6 of 14 shares of the free row
     width; 460px = 9 x (border + padding) + 8 gaps, 25px for the scrollbar),
     so the text never rewraps while the card widens. */
  width: min(290px, calc((min(1136px, 100vw - 64px) - 485px) * 6 / 14));
}
.wmore span { display: block; margin-top: .5em; color: #f0e6d2; font-size: .95rem; line-height: 1.45; text-shadow: 0 1px 4px #000; }
.wmore em { display: block; margin-top: .4em; font-style: normal; color: #ffb08a; font-family: var(--font-head); letter-spacing: .05em; }
.wcard:hover, .wcard:focus, .wcard:focus-within,
.wcards:not(:hover):not(:focus-within) .wcard:first-child { flex-grow: 6; box-shadow: 0 0 30px rgba(255, 170, 70, .25); }
.wcard:hover::before, .wcard:focus::before,
.wcards:not(:hover):not(:focus-within) .wcard:first-child::before { opacity: 1; filter: saturate(1); transform: scale(1.04); }
.wcard:hover img, .wcard:focus img,
.wcards:not(:hover):not(:focus-within) .wcard:first-child img { transform: translateY(-6px) scale(1.06); filter: drop-shadow(0 0 16px rgba(255, 200, 90, .9)); }
.wcard:hover strong, .wcard:focus strong, .wcard:focus-within strong,
.wcards:not(:hover):not(:focus-within) .wcard:first-child strong {
  writing-mode: horizontal-tb; transform: none;
  animation: afterOpen .9s linear both;
}
.wcard:hover .wmore, .wcard:focus .wmore, .wcard:focus-within .wmore,
.wcards:not(:hover):not(:focus-within) .wcard:first-child .wmore {
  max-height: 12em; opacity: 1;
  animation: afterOpen .9s linear both;
}
/* invisible while the card widens (.6s), then fade in */
@keyframes afterOpen { 0%, 66% { opacity: 0; } 100% { opacity: 1; } }
.wcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.w-midgard      { --place: url("../assets/worlds/midgard-place.webp"); }
.w-vanaheim     { --place: url("../assets/worlds/vanaheim-place.webp"); }
.w-alfheim      { --place: url("../assets/worlds/alfheim-place.webp"); }
.w-svartalfheim { --place: url("../assets/worlds/svartalfheim-place.webp"); }
.w-jotunheim    { --place: url("../assets/worlds/jotunheim-place.webp"); }
.w-niflheim     { --place: url("../assets/worlds/niflheim-place.webp"); }
.w-helheim      { --place: url("../assets/worlds/helheim-place.webp"); }
.w-muspelheim   { --place: url("../assets/worlds/muspelheim-place.webp"); }
.w-asgard       { --place: url("../assets/worlds/asgard-place.webp"); }

/* ============================================================== GALLERY == */

.sec-gallery {
  padding: calc(var(--torn) + clamp(50px, 7vw, 100px)) 0 clamp(60px, 8vw, 110px);
  background: var(--bg);
}
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
.gallery .g-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery .g-item:nth-child(7) { grid-column: span 2; grid-row: span 2; }
.shot {
  position: relative; display: block; height: 100%; line-height: 0; overflow: hidden;
  border: 12px solid #6a4a26; border-image: url("../assets/ui/slot.webp") 14 fill / 12px stretch;
  background: #000; box-shadow: var(--shadow);
}
.shot img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .88; transition: transform .8s var(--ease), opacity .3s; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.07); opacity: 1; }
.shot-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 8px; line-height: 1.3;
  background: linear-gradient(180deg, transparent, rgba(8, 5, 2, .92));
  font-family: var(--font-head); color: var(--gold); letter-spacing: .06em; text-align: center;
  opacity: .85; transition: opacity .35s, letter-spacing .35s var(--ease);
}
.shot:hover .shot-label, .shot:focus-visible .shot-label { opacity: 1; letter-spacing: .1em; }

/* Large view (:target), no JavaScript. */
.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  place-items: center; padding: clamp(14px, 4vw, 50px);
}
.lightbox:target { display: grid; animation: lbIn .3s var(--ease) both; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-backdrop { position: absolute; inset: 0; background: rgba(6, 4, 2, .93); }
.lb-frame {
  position: relative; margin: 0;
  width: min(1600px, 100%, calc((100vh - 190px) * 16 / 9));
  border: 14px solid #6a4a26; border-image: var(--frame-slot);
  background: #000;
}
.lb-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.lb-frame figcaption { padding: 8px 12px; background: #140d07; font-family: var(--font-head); color: var(--gold); text-align: center; }
.lb-count { color: var(--text-faint); margin-left: .6em; font-size: .85em; }
.lb-close {
  position: absolute; top: 14px; right: 18px; z-index: 2;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(20, 13, 7, .9); color: var(--text); font-size: .9rem;
}
.lb-close:hover { border-color: var(--gold); color: var(--gold); }
.lb-nav {
  position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px;
  border: 1px solid var(--border); border-radius: 50%; background: rgba(20, 13, 7, .85);
}
.lb-nav:hover { border-color: var(--gold); background: rgba(60, 38, 16, .95); }
.lb-nav::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px;
  border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
}
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-prev::before { transform: translate(-30%, -50%) rotate(135deg); }
.lb-next::before { transform: translate(-70%, -50%) rotate(-45deg); }

/* ================================================================== FAQ == */

.sec-faq {
  padding: calc(var(--torn) + clamp(50px, 7vw, 90px)) 0 clamp(70px, 9vw, 120px);
  background: radial-gradient(80% 60% at 50% 0%, rgba(200, 160, 96, .08), transparent 70%), var(--bg-alt);
}
.faq-wrap { max-width: 860px; }
.faq {
  margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(20, 13, 7, .7); transition: border-color .3s, background-color .3s;
}
.faq:hover, .faq[open] { border-color: var(--gold); background: rgba(40, 26, 13, .8); }
.faq summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 16px 52px 16px 20px;
  font-family: var(--font-head); font-size: 1.15rem; color: var(--gold); letter-spacing: .03em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq p { margin: 0; padding: 0 20px 18px; color: var(--text-dim); }

/* ========================================================== FINAL CALL == */

.cta {
  isolation: isolate; overflow: hidden; text-align: center;
  padding: calc(var(--torn) + clamp(90px, 12vw, 170px)) 0 clamp(90px, 12vw, 170px);
  background: var(--bg-deep);
}
.cta-art { position: absolute; inset: 0; z-index: -2; display: block; }
.cta-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 70% at 50% 55%, rgba(10, 6, 3, .55), rgba(10, 6, 3, .92));
}
.cta-logo { width: min(560px, 80vw); margin: 0 auto .4em; filter: drop-shadow(0 0 24px rgba(255, 140, 40, .4)) drop-shadow(0 10px 30px #000); }
.cta h2 { color: #fff3d6; text-shadow: 0 3px 18px #000; }
.cta p { color: var(--gold); font-family: var(--font-head); font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: .06em; margin: 0; text-shadow: 0 2px 10px #000; }

/* ============================================================ SUB PAGES == */

.page-head {
  padding: 120px 0 40px; border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #0b0805, var(--bg));
}
.page-head h1 { font-size: clamp(2rem, 5vw, 3rem); color: var(--gold); }
.page-head p { color: var(--text-dim); max-width: 92ch; margin: 0; }
.section { padding: clamp(34px, 4vw, 55px) 0 clamp(60px, 8vw, 100px); }
.back-link {
  display: inline-flex; align-items: center; gap: .5em;
  margin-bottom: 1.1em;
  color: var(--text-dim); font-size: .92rem; letter-spacing: .02em;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.back-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back-link:hover { color: var(--gold); transform: translateX(-3px); }
.prose { max-width: 100ch; }
.prose h2 { font-size: 1.45rem; margin-top: 2em; color: var(--text); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-dim); text-wrap: pretty; }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--bronze); }

/* =============================================================== FOOTER == */

.site-footer { padding: 34px 0 18px; background: linear-gradient(180deg, var(--bg-deep), #050302); }
.footer-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px clamp(20px, 4vw, 54px);
  min-height: 110px; padding: 18px 10px;
  border: solid #3a2614; border-width: 0 56px;
  background: #1a110a;
  border-image: url("../assets/ui/sail.webp") 0 56 fill / 0 56px stretch;
}
.footer-band .steam-btn { min-height: 56px; font-size: 1.05rem; }
.footer-langs, .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer-langs a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-dim); font-size: .74rem; letter-spacing: .1em; }
.footer-langs img { width: 26px; height: 17px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); transition: transform .2s var(--ease); }
.footer-langs a:hover img { transform: translateY(-2px); }
.footer-langs a[aria-current="true"] { color: var(--gold); }
.footer-links a { color: var(--text-dim); font-size: .9rem; }
.footer-links a:hover, .footer-langs a:hover { color: var(--gold); }
.footer-copy { margin: 14px 0 0; text-align: center; font-size: .8rem; color: var(--text-faint); }

/* ============================================================== MOTION ==
   Scroll-driven effects. Only where the browser supports scroll timelines
   AND the visitor has not asked for less motion. Everything above is the
   complete static page; nothing here hides content for good. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---- hero parallax: back slow, mist medium, embers fast, text away */
    .hero-back   { animation: pxBack linear both;  animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-mid    { animation: pxMid linear both;   animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-front  { animation: pxFront linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-inner  { animation: pxText linear both;  animation-timeline: scroll(root); animation-range: 0 85vh; }

    /* ---- story: pinned stage, five beats on the track's view timeline */
    .story-track { height: 520vh; view-timeline: --story block; }
    .story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
    .beats { position: absolute; inset: 0; }
    .beat { position: absolute; inset: 0; margin: 0; max-width: none; padding: 0; opacity: 0;
            animation: beatMid linear both; animation-timeline: --story; }
    .beat-art { position: absolute; inset: 0; border: 0; border-image: none; box-shadow: none; }
    .beat-art img { height: 100%; aspect-ratio: auto; animation: kenBurns linear both; animation-timeline: --story; }
    .beat::after { content: ""; position: absolute; inset: 0; background:
      linear-gradient(90deg, rgba(8, 5, 2, .88) 0%, rgba(8, 5, 2, .55) 38%, transparent 70%),
      linear-gradient(0deg, rgba(8, 5, 2, .8) 0%, transparent 35%); }
    .beat-text {
      position: absolute; z-index: 2; left: max(5vw, calc((100vw - var(--wrap)) / 2 + 32px)); bottom: 18vh;
      max-width: min(640px, 86vw); padding: 0;
      animation: textRise linear both; animation-timeline: --story;
    }
    .beat-1, .beat-1 img, .beat-1 .beat-text { animation-range: contain 0% contain 20%; }
    .beat-2, .beat-2 img, .beat-2 .beat-text { animation-range: contain 20% contain 40%; }
    .beat-3, .beat-3 img, .beat-3 .beat-text { animation-range: contain 40% contain 60%; }
    .beat-4, .beat-4 img, .beat-4 .beat-text { animation-range: contain 60% contain 80%; }
    .beat-5, .beat-5 img, .beat-5 .beat-text { animation-range: contain 80% contain 100%; }
    .beat-1 { animation-name: beatFirst; }
    .beat-5 { animation-name: beatLast; }

    /* the burning fuse: fills over the whole track, flame at its tip */
    .fuse {
      display: flex; align-items: center; gap: 14px;
      position: absolute; z-index: 3; left: 50%; bottom: 6vh; transform: translateX(-50%);
      width: min(760px, 86vw);
      font-family: var(--font-head); color: var(--gold); font-size: .9rem; letter-spacing: .12em; white-space: nowrap;
      text-shadow: 0 2px 6px #000;
    }
    .fuse-bar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px rgba(200, 160, 96, .5); }
    .fuse-fill {
      position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px;
      background: linear-gradient(90deg, #7a2a08, #ff7a2a 70%, #ffd982);
      box-shadow: 0 0 12px rgba(255, 120, 40, .8);
      animation: fuseBurn linear both; animation-timeline: --story; animation-range: contain 0% contain 100%;
    }
    .fuse-fill::after {
      content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
      background: radial-gradient(circle, #fff6d0 0%, #ffb347 40%, rgba(255, 90, 20, 0) 70%);
      animation: flameTip .35s ease-in-out infinite alternate;
    }

    /* ---- features slide in from the sides */
    .row-media  { animation: fromLeft linear both;  animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .row-flip .row-media { animation-name: fromRight; }
    .row-text   { animation: fromRight linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .row-flip .row-text { animation-name: fromLeft; }
    .events li, .also li, .g-item, .faq {
      animation: popUp linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
    .sec-title { animation: titleIn linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    .cta-art img { animation: pxBack linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

@keyframes pxBack  { from { transform: translateY(0) scale(1.02); } to { transform: translateY(22%) scale(1.1); } }
@keyframes pxMid   { from { transform: translateY(0); } to { transform: translateY(-12%); } }
@keyframes pxFront { from { transform: translateY(0); } to { transform: translateY(-35%); } }
@keyframes pxText  { from { transform: none; opacity: 1; } to { transform: translateY(-14vh) scale(.86); opacity: 0; } }
@keyframes beatMid   { 0% { opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes beatFirst { 0% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes beatLast  { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 1; } }
@keyframes kenBurns  { from { transform: scale(1.14) translateX(-2%); } to { transform: scale(1.02) translateX(1%); } }
@keyframes textRise  { 0% { transform: translateY(70px); } 20% { transform: none; } 80% { transform: none; } 100% { transform: translateY(-50px); } }
@keyframes fuseBurn  { from { width: 0; } to { width: 100%; } }
@keyframes flameTip  { from { transform: scale(.8); opacity: .8; } to { transform: scale(1.25); opacity: 1; } }
@keyframes fromLeft  { from { transform: translateX(-90px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fromRight { from { transform: translateX(90px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes popUp     { from { transform: translateY(40px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes titleIn   { from { letter-spacing: .3em; opacity: 0; } to { letter-spacing: .08em; opacity: 1; } }

/* ========================================================== RESPONSIVE == */

/* 21:9 and wider: keep the helmet in view, let the logo grow. */
@media (min-aspect-ratio: 2/1) {
  .hero-art img { object-position: 50% 6%; }
  .logo-wrap { width: min(1000px, 36vw); }
}

@media (max-aspect-ratio: 4/5) {
  .hero-art img { object-position: 50% 20%; }
}

@media (max-width: 1000px) {
  .row { grid-template-columns: 1fr; }
  .row-flip .row-media { order: 0; }
  .duo-inset { right: 4%; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery .g-item:nth-child(7) { grid-column: auto; grid-row: auto; }
  /* Cards stack; every card is open (no hover on touch screens). */
  .wcards { display: grid; grid-template-columns: 1fr 1fr; height: auto; gap: 12px; }
  .wcard { min-height: 260px; flex: none; }
  .wcard::before { opacity: 1; filter: none; }
  .wcard .wmore { max-height: none; opacity: 1; width: auto; flex: initial; }
  .wcard strong, .wcard .wmore { animation: none !important; }
  .wcard strong { writing-mode: horizontal-tb; transform: none; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  :root { --torn: 26px; }
  .hero { padding-top: 80px; padding-bottom: 76px; }
  .steam-btn { min-height: 54px; padding: 0 1em; }
  .wcards { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .g-item:nth-child(1) { grid-column: auto; grid-row: auto; }
  .footer-band { flex-direction: column; border: 14px solid #6a4a26; border-image: var(--frame-slot); padding: 22px 12px; }
  .beat-text h3 { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .fuse { font-size: .72rem; }
}

/* ------------------------------------------------- less motion wanted -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .embers, .hero-mist { display: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .hero-art, .hero-fire, .hero-mist, .embers, .hero-shade, .lightbox, .letterbox { display: none !important; }
}