/* basvolgas.nl — colour chapters direction
   One ground per niveau (chapter), flat, no gradients, no shadows at rest.
   Pilcrow Rounded display + text. */

:root {
  --ink: #1a1a1a;
  --bone: #e6e0d2;
  --muted: #5f5b52;

  --field-1: #ed4b44; --field-1-ink: #0f0f0f;   /* bright accent only (stripes, gift papers) */
  --field-2: #1a1a1a; --field-2-ink: #e6e0d2;
  --field-3: #18bc42; --field-3-ink: #1a1a1a;
  --field-4: #f2c21a; --field-4-ink: #1a1a1a;
  --field-5: #e6e0d2; --field-5-ink: #1a1a1a;   /* the poem's parchment — stays light on purpose */

  /* the maze's own rooms: dark and moody, of a piece with the preloader and the castle */
  --room-red:   #4a1811; --room-red-ink:   #f1e6d6;   /* niveau 1 — de stapel */
  --room-black: #15110c; --room-black-ink: #e9ddc8;   /* niveau 2b en het laatste pakje */
  --room-green: #16321f; --room-green-ink: #e9f0e2;   /* niveau 2a — de echte tak */
  --room-gold:  #4a3414; --room-gold-ink:  #f3e9d2;   /* niveau 3 — bijna er */
  --gold: #d4af37; --gold-dark: #a88828;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --accent-red: #d6362b;
  --ruler-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='22'%3E%3Cg stroke='%23efe7d6' stroke-width='1'%3E%3Cline x1='0' y1='22' x2='0' y2='8'/%3E%3Cline x1='22' y1='22' x2='22' y2='15'/%3E%3Cline x1='44' y1='22' x2='44' y2='8'/%3E%3Cline x1='66' y1='22' x2='66' y2='15'/%3E%3C/g%3E%3C/svg%3E");

  --motif-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg%3E%3Cg transform='translate(28,18) rotate(-8)'%3E%3Cpolygon points='10,55 25,0 40,55'/%3E%3Cpolygon points='20,55 35,10 50,55'/%3E%3Crect x='5' y='50' width='50' height='10' rx='3'/%3E%3C/g%3E%3Cg transform='translate(150,26) rotate(8)'%3E%3Cpath d='M10,70 L10,20 Q10,0 30,0 Q50,0 50,18 Q50,32 34,32 Q22,32 22,22' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(150,135)'%3E%3Cpolygon points='20,0 25,15 40,15 28,24 33,40 20,30 7,40 12,24 0,15 15,15'/%3E%3C/g%3E%3Cg transform='translate(34,148) rotate(10)'%3E%3Cellipse cx='0' cy='0' rx='14' ry='7' transform='rotate(-20)'/%3E%3Cellipse cx='16' cy='4' rx='14' ry='7' transform='rotate(15)'/%3E%3Ccircle cx='8' cy='14' r='4'/%3E%3Ccircle cx='16' cy='18' r='4'/%3E%3Ccircle cx='24' cy='13' r='4'/%3E%3C/g%3E%3Cg transform='translate(100,185)'%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Ccircle cx='16' cy='7' r='5'/%3E%3Ccircle cx='-8' cy='12' r='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  --font-display: "Pilcrow Rounded", system-ui, sans-serif;
  --font-text: "Pilcrow Rounded", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --step-lead: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  --step-head: clamp(2.2rem, 1.3rem + 4vw, 4.6rem);
  --step-display: clamp(3rem, 1rem + 10vw, 9.5rem);

  --margin: clamp(1rem, 4vw, 2.75rem);
  --radius: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --t-press: 140ms; --t-hover: 180ms; --t-ui: 240ms;
  --t-reveal: 700ms; --t-open: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
.display { font-size: var(--step-display); line-height: 0.88; letter-spacing: -0.045em; font-weight: 700; }
.head { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.03em; font-weight: 700; }
.lead { font-size: var(--step-lead); line-height: 1.3; max-width: 38ch; font-weight: 500; }
.small { font-size: var(--step-small); line-height: 1.4; }
p { max-width: 60ch; text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- app shell ---------- */
#app { position: relative; width: 100%; height: 100svh; overflow: hidden; background: var(--ink); opacity: 0; transition: opacity 700ms var(--ease-in-out); }
#app.is-ready { opacity: 1; }
#header { opacity: 0; transition: opacity 500ms; }
#header.is-ready { opacity: 1; }

.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.9rem, 2.4vw, 1.5rem) var(--margin);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--header-ink, var(--bone)); }
.chrome-controls { display: flex; gap: 0.6rem; align-items: center; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 1.1rem;
  border-radius: var(--radius); background: var(--bone); color: var(--ink);
  font-weight: 700; font-size: var(--step-small); transition: transform var(--t-press) var(--ease-out);
}
.pill-btn:active { transform: scale(0.94); }
.pill-btn[hidden] { display: none; }

/* ---------- chapters ---------- */
.level {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: none; flex-direction: column;
  background: var(--chapter-bg); color: var(--chapter-ink);
  pointer-events: none;
}
.level.is-active { display: flex; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .level.is-entering { animation: chapter-in var(--t-open) var(--ease-in-out); }
}
@keyframes chapter-in { from { opacity: 0; } to { opacity: 1; } }
.level--start  { --chapter-bg: var(--room-red); --chapter-ink: var(--room-red-ink); }
.level--2a  { --chapter-bg: var(--room-green); --chapter-ink: var(--room-green-ink); }
.level--2b  { --chapter-bg: var(--room-black); --chapter-ink: var(--room-black-ink); }
.level--3   { --chapter-bg: var(--room-gold); --chapter-ink: var(--room-gold-ink); }
.level--final { --chapter-bg: var(--room-black); --chapter-ink: var(--room-black-ink); }

.level-head {
  position: relative; z-index: 5; flex: none;
  padding: clamp(5.5rem, 13vw, 8rem) var(--margin) 0.5rem;
}
.level-head h1, .level-head h2 { color: var(--chapter-ink); }
.level-sub { margin-top: 0.6rem; }

/* marquee ticker — the loop that keeps the page moving (two26-style rhythm) */
.marquee {
  position: relative; z-index: 5; overflow: hidden; white-space: nowrap;
  border-block: 2px solid color-mix(in srgb, var(--chapter-ink) 18%, transparent);
  padding-block: 0.6rem; margin-top: clamp(1.2rem, 3vw, 2rem);
}
.marquee__track { display: inline-flex; gap: 2.5rem; animation: marquee 22s linear infinite; }
.marquee__track span { font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.01em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- fixed artwork: stays put while the field underneath is panned ---------- */
.level-art { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; transition: transform 300ms var(--ease-out); }
.bas-hero {
  position: absolute; z-index: 2; pointer-events: none;
  width: min(23vw, 300px); aspect-ratio: 4 / 5; object-fit: cover;
  right: 5%; top: 12%; left: auto;
  border-radius: 20px; transform: rotate(-4deg);
  outline: 6px solid var(--bone); outline-offset: -2px;
}
.bas-hero--side { right: 4%; top: 10%; transform: rotate(3deg); }
@media (max-width: 760px) {
  .bas-hero { width: 48vw; right: 4%; top: 32%; }
  .flourish--sm { display: none; }
}

/* ---------- background texture: a scatter of sinterklaas line motifs ---------- */
.pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.09; background-color: var(--chapter-ink);
  -webkit-mask-image: var(--motif-tile); mask-image: var(--motif-tile);
  -webkit-mask-size: 220px 220px; mask-size: 220px 220px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}

/* ---------- the field: a wide, pannable plane you get lost in ---------- */
.field-wrap { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.field {
  position: relative;
  width: max(135vw, 1250px);
  height: max(135%, 950px);
}

.field-hint {
  position: absolute; left: var(--margin); bottom: clamp(1.2rem, 3vw, 2rem); z-index: 3;
  font-weight: 500; opacity: 0.8;
}

/* ---------- a gift: a real CSS 3D box, not a flat icon ---------- */
.gift {
  position: absolute; display: block; border: 0; padding: 0;
  width: var(--gw, 150px); height: var(--gh, 150px);
  perspective: 900px;
}
.gift-rig {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-42deg) rotateY(var(--gr, -24deg));
  transition: transform 260ms var(--ease-out);
}
.gift:hover .gift-rig, .gift:focus-visible .gift-rig {
  transform: rotateX(-46deg) rotateY(calc(var(--gr, -24deg) + 16deg)) scale(1.08);
}
.gift:active .gift-rig { transform: rotateX(-38deg) rotateY(var(--gr, -24deg)) scale(0.95); }
.gift.is-opened { pointer-events: none; }
.gift.is-opened .gift-rig { opacity: 0.22; transform: rotateX(-42deg) rotateY(var(--gr, -24deg)) scale(0.82); transition: transform 500ms var(--ease-out), opacity 500ms; }

/* Each face is sized and centred in its own right, then rotated and pushed out
   along its own local Z — the ribbon strips and the bow are nested INSIDE their
   face, so they inherit its placement instead of duplicating the 3D math. */
.face { position: absolute; background: var(--paper); backface-visibility: hidden; overflow: hidden; }
.face-front { width: var(--w); height: var(--h); top: 0; left: 0; transform: translateZ(calc(var(--d) / 2)); }
.face-side  { width: var(--d); height: var(--h); top: 0; left: calc((var(--w) - var(--d)) / 2); background: var(--paper-dark); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.face-top   { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); left: 0; background: var(--paper-light); transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); overflow: visible; }

.ribbon-strip { position: absolute; background: var(--ribbon); }
.face-front > .ribbon-strip { top: 0; left: calc(50% - var(--rw, 16px) / 2); width: var(--rw, 16px); height: 100%; }
.face-side > .ribbon-strip { top: 0; left: calc(50% - var(--rw, 16px) / 2); width: var(--rw, 16px); height: 100%; background: color-mix(in srgb, var(--ribbon) 75%, black); }
.face-top > .ribbon-strip { top: calc(50% - var(--rw, 16px) / 2); left: 0; width: 100%; height: var(--rw, 16px); }

.bow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(3px); width: calc(var(--w) * 0.5); height: calc(var(--w) * 0.38); }
.bow svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* round ornament variant: flat layered circles imply a sphere, no blended gradient */
.gift--ball .gift-rig { transform: rotateX(-6deg) rotateY(var(--gr, -24deg)); }
.gift:hover .gift--ball .gift-rig { transform: rotateX(-6deg) rotateY(calc(var(--gr, -24deg) + 16deg)) scale(1.08); }
.ball-body { position: absolute; inset: 0; border-radius: 50%; background: var(--paper); }
.ball-shade { position: absolute; right: 6%; bottom: 8%; width: 62%; height: 62%; border-radius: 50%; background: var(--paper-dark); opacity: 0.55; }
.ball-shine { position: absolute; left: 14%; top: 12%; width: 34%; height: 28%; border-radius: 50%; background: var(--paper-light); opacity: 0.85; }
.ball-cap { position: absolute; left: 50%; top: -6%; width: 20%; height: 16%; transform: translateX(-50%); background: var(--ribbon); border-radius: 3px; }

/* idle motion: the whole stack stays alive even before a click */
@media (prefers-reduced-motion: no-preference) {
  .gift-rig { animation: gift-float 4.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.37s); }
  .gift:hover .gift-rig, .gift:focus-visible .gift-rig, .gift.is-opened .gift-rig { animation-play-state: paused; }
}
@keyframes gift-float {
  0%, 100% { transform: rotateX(-42deg) rotateY(var(--gr, -24deg)) translateY(0); }
  50% { transform: rotateX(-35deg) rotateY(calc(var(--gr, -24deg) + 8deg)) translateY(-10px); }
}

/* open animations: the lid and ribbon fly off in real 3D space */
.gift.is-opened.gift--pop .face-top, .gift.is-opened.gift--pop .bow,
.gift.is-opened.gift--tear .face-top, .gift.is-opened.gift--tear .bow { animation: lid-pop var(--t-open) var(--ease-expo) forwards; }
.gift.is-opened.gift--flap .face-front { animation: door-open var(--t-open) var(--ease-expo) forwards; transform-origin: left center; }
.gift.is-opened.gift--untie .bow, .gift.is-opened.gift--curtain .bow { animation: bow-pop var(--t-open) var(--ease-out) forwards; }
.gift.is-opened.gift--untie .gift-rig, .gift.is-opened.gift--curtain .gift-rig { animation: box-wiggle var(--t-open) var(--ease-in-out); }

@keyframes lid-pop { 0% { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); } 100% { transform: rotateX(90deg) translateZ(calc(var(--h) / 2 + 260px)) translateX(40px) rotate(70deg); opacity: 0; } }
@keyframes door-open { to { transform: rotateY(-130deg) translateZ(calc(var(--d) / 2)); opacity: 0.3; } }
@keyframes bow-pop { to { transform: translate(-50%, -50%) translateZ(220px) rotate(140deg) scale(1.1); opacity: 0; } }
@keyframes box-wiggle {
  0% { transform: rotateX(-42deg) rotateY(var(--gr, -24deg)); }
  20% { transform: rotateX(-42deg) rotateY(calc(var(--gr, -24deg) - 10deg)); }
  45% { transform: rotateX(-42deg) rotateY(calc(var(--gr, -24deg) + 8deg)); }
  70% { transform: rotateX(-42deg) rotateY(calc(var(--gr, -24deg) - 4deg)) scale(1.04); }
  100% { transform: rotateX(-42deg) rotateY(var(--gr, -24deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .gift--pop .face-top, .gift--pop .bow, .gift--tear .face-top, .gift--tear .bow,
  .gift--flap .face-front,
  .gift--untie .bow, .gift--curtain .bow, .gift--untie .gift-rig, .gift--curtain .gift-rig { animation-duration: 1ms !important; }
}

/* ---------- entrance: the parts of a chapter arrive staggered, not as one block ---------- */
@media (prefers-reduced-motion: no-preference) {
  .level.is-entering .level-head > * { animation: rise-in 650ms var(--ease-out) both; }
  .level.is-entering .level-head > *:nth-child(2) { animation-delay: 110ms; }
  .level.is-entering .level-head > *:nth-child(3) { animation-delay: 220ms; }
  .level.is-entering .gift {
    animation: gift-in 560ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms + 80ms);
  }
  .level.is-entering .flourish { animation: rise-in 800ms var(--ease-out) both; animation-delay: 260ms; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes gift-in {
  from { opacity: 0; transform: scale(0.3) translateY(40px); }
  60% { transform: scale(1.08) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- overlay (joke / hint panel) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60; display: none; place-items: center;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  padding: var(--margin);
}
.overlay.is-open { display: grid; animation: fade-in var(--t-ui) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .overlay.is-open { animation-duration: 1ms; } }
.overlay-card {
  position: relative; width: min(640px, 100%); background: var(--bone); color: var(--ink);
  border-radius: 28px; padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.6rem, 5vw, 3rem) clamp(1.6rem, 5vw, 3rem);
  transform: translateY(32px) scale(0.9) rotate(-1.5deg); opacity: 0;
  transition: transform 480ms var(--ease-expo), opacity 320ms var(--ease-out);
  overflow: hidden;
}
.overlay-card .stripe { position: absolute; top: 0; height: 10px; width: 25%; }
.overlay-card .stripe:nth-child(1) { left: 0; background: var(--gold); }
.overlay-card .stripe:nth-child(2) { left: 25%; background: var(--field-3); }
.overlay-card .stripe:nth-child(3) { left: 50%; background: var(--field-1); }
.overlay-card .stripe:nth-child(4) { left: 75%; background: var(--field-4); }
.overlay.is-open .overlay-card { transform: none; opacity: 1; transition-timing-function: var(--ease-expo); }
.overlay-card .mini-gift { position: absolute; top: 1.1rem; right: 1.3rem; width: 64px; height: 64px; perspective: 400px; }
.overlay-card h2 { font-size: var(--step-head); margin-bottom: 0.8rem; max-width: 80%; }
.overlay-card .rhyme { margin-top: 1.4rem; font-style: normal; font-weight: 500; color: var(--muted); border-top: 2px solid color-mix(in srgb, var(--ink) 12%, transparent); padding-top: 1.2rem; white-space: pre-line; }
.overlay-actions { display: flex; gap: 0.8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: 0 1.6rem;
  border-radius: var(--radius); font-weight: 700; font-size: var(--step-body);
  transition: transform var(--t-press) var(--ease-out);
}
.btn:active { transform: scale(0.96); }
.btn--primary { background: var(--ink); color: var(--bone); }
.btn--ghost { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }

/* ---------- finale ---------- */
.finale-stage { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; z-index: 5; }
.finale-gift { position: relative; width: min(58vw, 380px); cursor: pointer; }
.finale-photo { display: block; border-radius: 50%; overflow: hidden; }
.finale-photo img { width: 100%; display: block; }
.finale-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .finale-gift.is-opened .finale-ribbon { animation: ribbon-fly 650ms var(--ease-in-out) forwards; }
  .finale-gift.is-opened .finale-photo { animation: photo-pop 650ms var(--ease-out) forwards; }
}
.finale-gift.is-opened .finale-ribbon { opacity: 0; }
@keyframes ribbon-fly { from { opacity: 1; transform: scale(1) rotate(0); } to { opacity: 0; transform: scale(1.6) rotate(25deg); } }
@keyframes photo-pop { from { transform: scale(1); } 50% { transform: scale(1.1); } to { transform: scale(1.04); } }

.confetti { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.confetti span {
  position: absolute; top: -5%; width: 10px; height: 16px; background: var(--gold);
  animation: confetti-fall 2.6s var(--ease-in-out) forwards;
}
@keyframes confetti-fall { to { transform: translateY(115vh) rotate(540deg); opacity: 0.3; } }

/* ---------- poem scene ---------- */
.poem-scene {
  position: fixed; inset: 0; z-index: 70; display: none; place-items: center;
  background: var(--field-5); color: var(--field-5-ink);
  padding: var(--margin);
}
.poem-scene.is-open { display: grid; animation: fade-in 900ms var(--ease-in-out); }
@media (prefers-reduced-motion: reduce) { .poem-scene.is-open { animation-duration: 1ms; } }
.poem-scroll {
  width: min(680px, 100%); max-height: 86svh; overflow-y: auto;
  background: #f4ecd8; color: #241f14; border-radius: 10px;
  padding: clamp(2rem, 6vw, 3.6rem) clamp(1.6rem, 6vw, 3.2rem);
}
.poem-scroll h2 { font-size: var(--step-head); margin-bottom: 1.4rem; color: #241f14; }
.poem-line { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); font-size: var(--step-lead); line-height: 1.55; font-weight: 500; }
.poem-line.is-in { opacity: 1; transform: none; }
.poem-title { font-size: var(--step-head); font-weight: 700; font-family: var(--font-display); margin-bottom: 0.4em; }
.poem-back { margin-top: 1.8rem; }

/* ---------- archival flourishes ---------- */
.flourish {
  position: absolute; z-index: 1; width: clamp(140px, 22vw, 320px); height: clamp(110px, 17vw, 240px);
  border-radius: 14px; overflow: hidden; opacity: 0.9;
}
.flourish--sm { width: clamp(100px, 14vw, 190px); height: clamp(110px, 17vw, 220px); }
.flourish img { width: 100%; height: 100%; object-fit: cover; }
.credit {
  position: fixed; left: var(--margin); bottom: 0.7rem; z-index: 45;
  opacity: 0.65; max-width: 60vw; color: var(--bone); font-weight: 500;
}

@media (max-width: 760px) {
  .level-head { padding-top: clamp(5rem, 22vw, 6.5rem); }
  .credit { display: none; }
}