/* ==========================================================================
   Fernwild — Tavern & Tails landing page
   Palette sampled from the game's own locked palette (assets/menu/palette.json).
   ========================================================================== */

/* The two typefaces live in fonts.css, inlined as data URIs — see the note
   there for why they are not fetched from this sheet. */

:root {
  --ink: #05171a;
  --ink-2: #08201f;
  --deep: #0b2527;
  --forest: #11433c;
  --moss: #18613c;
  --leaf: #297e42;
  --gold: #edac42;
  --gold-dim: #d29030;
  --amber: #a86b1f;
  --rust: #a13c2f;
  --bone: #f0f6f4;
  --parch: #fcddc0;
  --mist: #b1c1cf;
  --stone: #6d768d;
  --frame: #4a3115;
  --frame-lit: #7a5223;

  --wrap: 1140px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --band: clamp(4.5rem, 9vw, 7.5rem);

  --display: "Jacquard 12", "Times New Roman", serif;
  --ui: "Silkscreen", "Courier New", monospace;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--mist);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: none;
}

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

/* Every picture on the page is a `<picture>`: a WebP source and the PNG behind
   it as the fallback. `<picture>` is left at its own display, which lays out
   exactly as the bare image did - checked in Chromium and WebKit, in a column
   flex, a row flex and a run of text. The two full-bleed backgrounds below are
   the exception and say `display: block`, because there the picture is the box
   being positioned rather than a wrapper around one.

   `display: contents` is the obvious way to write "this wrapper is not here",
   and it is wrong: it makes a `<picture>` that is a flex child count as an item
   for `gap`, so a column that held an image and a caption quietly grows by one
   gap - 16px a card, 64px down the mobile page. Both engines do it.

   The wrapper is also the flex item now, so the "do not squeeze this" that
   three of the rules below put on an image has to live here instead: without
   it the boss card's sprite shrank from 128px to 48px as the caption beside it
   took the space. `flex` means nothing outside a flex container, so it is safe
   to say once, for every picture on the page. */
picture { flex: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--gold);
  line-height: 0.98;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
h4 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-bottom: 0.35em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

code {
  font-family: var(--ui);
  font-size: 0.86em;
  color: var(--parch);
  background: rgba(237, 172, 66, 0.1);
  border: 1px solid rgba(237, 172, 66, 0.22);
  padding: 0.08em 0.32em;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--parch); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: #1a1008;
  padding: 0.75rem 1.25rem;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0 0 1.1rem;
}
.eyebrow img { image-rendering: pixelated; }

.lede {
  font-size: 1rem;
  line-height: 1.95;
  color: var(--mist);
  max-width: 56ch;
}

.fineprint {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(197, 210, 222, 0.86);
}

/* ---------- Buttons ---------- */

.btn {
  --lift: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border: 3px solid var(--frame-lit);
  background: linear-gradient(180deg, #241708, #150d05);
  color: var(--parch);
  cursor: pointer;
  transform: translateY(var(--lift));
  box-shadow: 0 0 0 3px rgba(5, 12, 10, 0.85), 0 6px 0 0 rgba(5, 12, 10, 0.85);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, color 0.2s ease;
}
.btn--primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  color: #2a1806;
  border-color: #f7d68f;
  font-weight: 700;
}
.btn--ghost {
  background: rgba(6, 22, 22, 0.72);
  border-color: rgba(237, 172, 66, 0.5);
  color: var(--parch);
}
.btn--small { padding: 0.7rem 1.1rem; font-size: 0.68rem; }
.btn--big { padding: 1.25rem 2.75rem; font-size: 0.9rem; }

.btn:hover { --lift: -3px; color: inherit; }
.btn--primary:hover { background: linear-gradient(180deg, #ffc766, var(--gold)); color: #2a1806; }
.btn--ghost:hover { background: rgba(12, 40, 36, 0.9); border-color: var(--gold); }
.btn:active { --lift: 1px; box-shadow: 0 0 0 3px rgba(5, 12, 10, 0.85), 0 2px 0 0 rgba(5, 12, 10, 0.85); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* ---------- Header ---------- */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(5, 20, 22, 0.92), rgba(5, 20, 22, 0));
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-head.is-stuck {
  background: rgba(5, 20, 22, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 0 rgba(237, 172, 66, 0.18);
}

.site-head__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  color: var(--parch);
}
.brand__mark { image-rendering: pixelated; }
.brand__name {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--parch);
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  gap: 1.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav a { color: var(--mist); position: relative; padding-block: 0.35rem; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right 0.22s ease;
}
.nav a:hover { color: var(--parch); }
.nav a:hover::after { right: 0; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem 0 0;
  overflow: hidden;
  background: var(--ink);
}

.hero__art {
  /* The title plate, as a real <picture> rather than a CSS background: it is
     the first thing on the page and the biggest thing in it, and an `<img>`
     is what the preload scanner can find in the markup. */
  display: block;
  position: absolute;
  inset: -2% -1% -6%;
  transform: translate3d(0, calc(var(--par, 0) * -30px), 0) scale(1.06);
  will-change: transform;
}
.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

.hero__warmth {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 40% at 38% 84%, rgba(255, 186, 92, 0.24), transparent 70%),
    radial-gradient(30% 26% at 63% 76%, rgba(255, 170, 70, 0.18), transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(4, 16, 18, 0.55) 78%, rgba(4, 16, 18, 0.92) 100%),
    linear-gradient(180deg, rgba(4, 16, 18, 0.75) 0%, rgba(4, 16, 18, 0.28) 35%, rgba(4, 16, 18, 0.5) 72%, var(--ink) 100%);
  animation: warmth 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes warmth {
  0%, 100% { opacity: 0.82; }
  35% { opacity: 1; }
  62% { opacity: 0.88; }
}

.hero__spores { position: absolute; inset: 0; pointer-events: none; }
.hero__spores span {
  position: absolute;
  bottom: -4vh;
  left: var(--x, 50%);
  width: 3px;
  height: 3px;
  background: #f6dda4;
  box-shadow: 0 0 7px 2px rgba(246, 221, 164, 0.55);
  opacity: 0;
  animation: spore var(--dur, 16s) linear var(--delay, 0s) infinite;
}
.hero__spores span:nth-child(1)  { --x: 6%;  --dur: 19s; --delay: -2s;  --drift: 40px; }
.hero__spores span:nth-child(2)  { --x: 14%; --dur: 15s; --delay: -7s;  --drift: -30px; }
.hero__spores span:nth-child(3)  { --x: 24%; --dur: 22s; --delay: -12s; --drift: 60px; }
.hero__spores span:nth-child(4)  { --x: 33%; --dur: 17s; --delay: -4s;  --drift: -45px; }
.hero__spores span:nth-child(5)  { --x: 42%; --dur: 20s; --delay: -15s; --drift: 25px; }
.hero__spores span:nth-child(6)  { --x: 51%; --dur: 16s; --delay: -9s;  --drift: -55px; }
.hero__spores span:nth-child(7)  { --x: 58%; --dur: 23s; --delay: -1s;  --drift: 35px; }
.hero__spores span:nth-child(8)  { --x: 66%; --dur: 18s; --delay: -13s; --drift: -20px; }
.hero__spores span:nth-child(9)  { --x: 74%; --dur: 21s; --delay: -6s;  --drift: 50px; }
.hero__spores span:nth-child(10) { --x: 83%; --dur: 15s; --delay: -11s; --drift: -40px; }
.hero__spores span:nth-child(11) { --x: 91%; --dur: 19s; --delay: -3s;  --drift: 30px; }
.hero__spores span:nth-child(12) { --x: 97%; --dur: 24s; --delay: -16s; --drift: -65px; }

@keyframes spore {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 0.9; }
  75%  { opacity: 0.6; }
  100% { transform: translate3d(var(--drift, 30px), -92vh, 0); opacity: 0; }
}

.hero__inner { position: relative; z-index: 2; }

/* A soft scrim so the copy keeps its contrast wherever the plate is bright. */
.hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2.5rem;
  bottom: -2rem;
  left: calc(var(--pad) * -1);
  right: -10%;
  background: radial-gradient(115% 105% at 6% 42%, rgba(4, 16, 18, 0.82), rgba(4, 16, 18, 0.5) 46%, rgba(4, 16, 18, 0) 76%);
  pointer-events: none;
}

.hero__title {
  font-size: clamp(4.25rem, 14vw, 9.5rem);
  margin: 0 0 0.1em;
  color: var(--parch);
  text-shadow:
    0 3px 0 #2a1607,
    0 6px 0 rgba(5, 12, 10, 0.9),
    0 0 46px rgba(237, 172, 66, 0.4);
}

.hero__tag {
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.6rem;
}

.hero__inner .lede { max-width: 46ch; }

.hero__stats {
  position: relative;
  z-index: 2;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
  padding: 1.35rem 0 1.75rem;
  border-top: 1px solid rgba(237, 172, 66, 0.22);
  background: linear-gradient(180deg, rgba(4, 16, 18, 0), rgba(4, 16, 18, 0.62));
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(190, 204, 217, 0.9);
}
.hero__stats li { padding-inline: 0.4rem; }
.hero__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold);
  line-height: 1.2;
}

/* ---------- Arrow flight divider ---------- */

.flight {
  position: relative;
  height: 78px;
  overflow: hidden;
  background: var(--ink);
}
.flight::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(237, 172, 66, 0.32) 20%, rgba(237, 172, 66, 0.32) 80%, transparent);
}
.flight img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  image-rendering: pixelated;
  opacity: 0;
}
.flight.in img { animation: fly 1.5s cubic-bezier(0.35, 0.6, 0.3, 1) 0.15s forwards; }

@keyframes fly {
  0%   { transform: translateX(-60px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 20px)); opacity: 0; }
}

/* ---------- Bands ---------- */

.band {
  position: relative;
  padding: var(--band) 0;
  border-top: 1px solid rgba(237, 172, 66, 0.12);
}
.band--art { background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
.band--archer { background: linear-gradient(180deg, var(--ink), #0a2022); }

.band__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.band__head .lede { margin-top: 1rem; }

.sub-head {
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 1.75rem;
  color: var(--parch);
}

/* ---------- Steps ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.step {
  padding-top: 1.4rem;
  border-top: 2px solid rgba(237, 172, 66, 0.28);
}
.step__num {
  display: block;
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.step h3 { color: var(--parch); margin-bottom: 0.4em; }
.step p { font-size: 0.85rem; line-height: 1.9; color: var(--mist); }

.aside {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.25rem 1.5rem;
  border: 3px solid var(--frame);
  background: rgba(8, 32, 31, 0.6);
  font-size: 0.8rem;
  line-height: 1.9;
  color: var(--mist);
  max-width: 74ch;
}
.aside__mark { flex: none; margin-top: 0.35rem; image-rendering: pixelated; }
.aside strong { color: var(--parch); font-weight: 400; }

.inplay { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.inplay img {
  width: 100%;
  border: 3px solid var(--frame);
  box-shadow: 0 0 0 3px rgba(5, 12, 10, 0.7);
}
.inplay figcaption {
  margin-top: 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--stone);
}

/* ---------- Stages ---------- */

.stages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

.stage {
  border: 3px solid var(--frame);
  background: #061a1c;
  box-shadow: 0 0 0 3px rgba(5, 12, 10, 0.7);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.stage:hover { border-color: var(--frame-lit); transform: translateY(-4px); }
.stage img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 3px solid var(--frame);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
  filter: saturate(1) brightness(0.92);
}
.stage:hover img { transform: scale(1.045); filter: saturate(1.1) brightness(1); }
.stage__body { padding: 1.5rem 1.6rem 1.75rem; }
.stage__num {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 0.6rem;
}
.stage h3 { color: var(--parch); margin-bottom: 0.35em; }
.stage p:last-child { font-size: 0.82rem; line-height: 1.85; color: var(--mist); }

/* ---------- Bestiary ---------- */

.beasts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.beast {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.25rem;
  border: 3px solid rgba(74, 49, 21, 0.85);
  background: linear-gradient(180deg, rgba(10, 34, 34, 0.75), rgba(6, 22, 24, 0.9));
  transition: border-color 0.22s ease, background 0.22s ease;
}
.beast:hover { border-color: var(--frame-lit); background: linear-gradient(180deg, rgba(16, 48, 44, 0.85), rgba(8, 28, 28, 0.95)); }
.beast img {
  flex: none;
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  transition: transform 0.25s ease;
}
.beast:hover img { transform: translateY(-3px) scale(1.06); }
.beast h3 { font-size: 1.2rem; margin: 0 0 0.3rem; color: var(--parch); }
.beast p { font-size: 0.76rem; line-height: 1.8; margin: 0; }

/* ---------- Skills ---------- */

.skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.8rem, 2vw, 1.25rem);
}

.skill {
  padding: 1.25rem 1.1rem 1.35rem;
  border: 3px solid rgba(74, 49, 21, 0.85);
  background:
    radial-gradient(70% 55% at 50% 8%, rgba(237, 172, 66, 0.1), transparent 72%),
    linear-gradient(180deg, rgba(10, 34, 34, 0.75), rgba(6, 22, 24, 0.9));
}
.skill img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.85rem;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.45));
}
.skill h4 {
  color: var(--parch);
  font-size: 1.12rem;
  margin-bottom: 0.45rem;
}
.skill p {
  font-size: 0.72rem;
  line-height: 1.8;
  margin: 0;
}

/* ---------- Bosses ---------- */

.bosses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.boss {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 3px solid var(--frame);
  background:
    radial-gradient(70% 60% at 18% 50%, rgba(237, 172, 66, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(9, 30, 30, 0.85), rgba(5, 18, 20, 0.95));
}
.boss img {
  flex: none;
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55));
}
.boss__num {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 0.4rem;
}
.boss h4 { color: var(--parch); }
.boss__text p:last-child { font-size: 0.8rem; line-height: 1.85; color: var(--mist); }

/* ---------- Archer ---------- */

.archer {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.archer__stage { position: sticky; top: 6.5rem; }

.stage-box {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2.5rem 1rem 3rem;
  border: 3px solid var(--frame);
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(35, 92, 76, 0.55), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #0d2b29, #071b1c);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(5, 12, 10, 0.7);
  overflow: hidden;
}
.sprite {
  --frames: 4;
  --frame-ms: 260;
  --scale: 5;
  /* The cell one frame of the strip is drawn on, which is the width the
     animation steps by. Every clip in the pack is 64px; the bow is not - see
     tools/sprites.py, which cuts both from the game's own strips. */
  --cell: 64px;
  position: relative;
  z-index: 1;
  width: calc(var(--cell) * var(--scale));
  height: calc(64px * var(--scale));
  background-image: url("assets/sprites/elf_idle.png");
  background-repeat: no-repeat;
  background-size: calc(var(--frames) * var(--cell) * var(--scale)) auto;
  background-position: 0 0;
  image-rendering: pixelated;
  animation-name: sprite-play;
  animation-duration: calc(var(--frames) * var(--frame-ms) * 1ms);
  animation-timing-function: steps(var(--frames));
  animation-iteration-count: infinite;
}

/* A pool of shade under her heels, so she stands on the panel. */
.sprite::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 79%;
  width: 46%;
  height: 10px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 72%);
}
.sprite[data-clip="idle"]  { --frames: 4; --frame-ms: 260; background-image: url("assets/sprites/elf_idle.png"); }
.sprite[data-clip="walk"]  { --frames: 8; --frame-ms: 130; background-image: url("assets/sprites/elf_walk.png"); }
.sprite[data-clip="shoot"] { --frames: 9; --frame-ms: 95; --cell: 80px; background-image: url("assets/sprites/elf_shoot.png"); }
.sprite[data-clip="cast"]  { --frames: 6; --frame-ms: 150; background-image: url("assets/sprites/elf_cast.png"); }

/* These four are sprite sheets walked by `background-position`, so they cannot
   be an `<img>` and so cannot be a `<picture>`. `image-set()` is the same offer
   one level down - the WebP when the browser can decode it, the PNG when it
   cannot - and the guard is what keeps the PNG for anything that has neither.
   The strips are the same size in both formats, which is what the stepped
   `background-size` above depends on. */
@supports (background-image: image-set(url("assets/sprites/elf_idle.webp") 1x)) {
  .sprite[data-clip="idle"]  { background-image: image-set(url("assets/sprites/elf_idle.webp") 1x, url("assets/sprites/elf_idle.png") 1x); }
  .sprite[data-clip="walk"]  { background-image: image-set(url("assets/sprites/elf_walk.webp") 1x, url("assets/sprites/elf_walk.png") 1x); }
  .sprite[data-clip="shoot"] { background-image: image-set(url("assets/sprites/elf_shoot.webp") 1x, url("assets/sprites/elf_shoot.png") 1x); }
  .sprite[data-clip="cast"]  { background-image: image-set(url("assets/sprites/elf_cast.webp") 1x, url("assets/sprites/elf_cast.png") 1x); }
}

@keyframes sprite-play {
  from { background-position-x: 0; }
  to   { background-position-x: calc(-1 * var(--frames) * var(--cell) * var(--scale)); }
}

.clip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.1rem;
}
.chip {
  font-family: var(--ui);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  color: var(--mist);
  background: rgba(8, 30, 30, 0.85);
  border: 3px solid var(--frame);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.chip:hover { color: var(--parch); border-color: var(--frame-lit); }
.chip.is-on {
  color: #2a1806;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  border-color: #f7d68f;
}

.stage-box__caption {
  margin: 1rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: center;
}

.archer__text p { max-width: 56ch; }

.portrait {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  max-width: 330px;
}
.portrait img {
  border: 3px solid var(--frame);
  box-shadow: 0 0 0 3px rgba(5, 12, 10, 0.7);
}
.portrait figcaption {
  margin-top: 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--stone);
}

/* ---------- Outro ---------- */

.outro {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 10vw, 8rem) 0;
  border-top: 1px solid rgba(237, 172, 66, 0.12);
  background: var(--ink);
}
.outro__art {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0.9;
}
.outro__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.outro::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 60% 50%, rgba(4, 16, 18, 0.35), rgba(4, 16, 18, 0.9) 78%),
    linear-gradient(90deg, rgba(4, 16, 18, 0.92) 0%, rgba(4, 16, 18, 0.5) 55%, rgba(4, 16, 18, 0.75) 100%);
}

.outro__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.outro__elf {
  flex: none;
  width: clamp(120px, 18vw, 190px);
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6));
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.outro__text { max-width: 46ch; }
.outro__text .btn { margin-top: 1.75rem; }

/* ---------- Footer ---------- */

.foot {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2.5rem;
  background: #041214;
  border-top: 1px solid rgba(237, 172, 66, 0.14);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}
.foot__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: auto;
}
.foot__brand img { image-rendering: pixelated; }
.foot__name {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--parch);
  margin: 0 0 0.3rem;
}
.foot__by { font-size: 0.72rem; color: var(--stone); margin: 0; letter-spacing: 0.08em; }

/* The footer wordmark is a link to the studio; it keeps the parchment weight
   and only shows its link colour on hover, or the footer reads as two brands. */
.foot__name a { color: inherit; }
.foot__name a:hover { color: var(--gold); }

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foot__nav a { color: var(--mist); }

.foot__small {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(237, 172, 66, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 0.68rem;
  line-height: 1.8;
  color: var(--stone);
}
.foot__small p { margin: 0; max-width: 68ch; }

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .nav { gap: 1.1rem; font-size: 0.64rem; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .beasts { grid-template-columns: repeat(2, 1fr); }
  .skills { grid-template-columns: repeat(3, 1fr); }
  .archer { grid-template-columns: 1fr; }
  .archer__stage { position: static; }
  .stage-box { padding: 2rem 1rem 2.5rem; }
  .portrait { max-width: 280px; }
}

@media (max-width: 820px) {
  body { font-size: 14px; }
  .nav { display: none; }
  .stages { grid-template-columns: 1fr; }
  .bosses { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.5rem; }
  .sprite { --scale: 3; }
  .outro__inner { flex-direction: column; align-items: flex-start; }
  /* The elf comes after the copy in the column, and the flex item is the
     `<picture>` now, so the place in the order belongs to the wrapper. Left on
     the image it stops meaning anything and the elf jumps above the heading. */
  .outro__inner > picture { order: 2; }
}

@media (max-width: 620px) {
  .beasts { grid-template-columns: 1fr; }
  .skills { grid-template-columns: repeat(2, 1fr); }
  .beast { flex-wrap: wrap; align-items: center; column-gap: 0.9rem; row-gap: 0.15rem; }
  .beast img { width: 56px; height: 56px; }
  .beast h3 { margin: 0; }
  .beast p { flex: 1 0 100%; margin-top: 0.4rem; }
  .steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .brand__name { font-size: 1.25rem; }
  .site-head .btn--small { padding: 0.6rem 0.85rem; font-size: 0.62rem; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .boss { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero { padding-top: 6rem; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__warmth,
  .hero__spores span,
  .sprite,
  .outro__elf,
  .flight img { animation: none !important; }
  .flight img { opacity: 1; transform: translateX(2rem); }
  .stage:hover img,
  .beast:hover img,
  .stage:hover { transform: none; }
}