/* Dunmaris's website wears the game's own interface (client/src/styles.css): ink ground, parchment
   text, flat gold pills like the game's own controls, panels with a double gold rule, Grenze Gotisch for
   names and Alegreya Sans for reading. Real footage from the game carries every section; vocations bring
   their colours (knight red, ranger green, mage blue), lands their palette's cloth
   (assets/palettes.json). One dark look, like the game.

   The home page is made like an illuminated chart: every section is a layered scene (ground texture,
   drifting fog, embers, a drawn ornament, then the footage and the words), the sections are torn from
   one another along a cut edge, and the lands are a sea chart with Captain Bren's route drawn across it.

   Mobile first: the base rules are the phone; wider screens are added at 640px and 960px. */
:root {
  color-scheme: dark;
  --ink: #0d1513;
  --ink-2: #121d1a;
  --stone: #17231f;
  --panel: #15211e;
  --panel-2: #1c2a26;
  --line: rgba(226, 206, 150, .2);
  --line-gold: rgba(227, 179, 76, .5);
  --parch: #ece2c6;
  --parch-2: #cfc6ab;
  --dim: #97a498;
  --gold: #e3b34c;
  --gold-hi: #f6d88a;
  --gold-deep: #b8862c;
  --hp: #d5503f;
  --mp: #4c84dc;
  --ok: #74c95c;
  --bad: #ff6a55;
  --display: "Grenze Gotisch", "Alegreya Sans", Georgia, serif;
  --body: "Alegreya Sans", "Trebuchet MS", system-ui, sans-serif;
  --gutter: 16px;
  --measure: 1120px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* The gold of the metalwork: lit at the top, deep in the middle, catching light again below. */
  --foil: linear-gradient(180deg, #f6d88a 0%, #e3b34c 42%, #b8862c 56%, #f1cf7a 100%);
  /* The knot rule under every headline: a line, a loop each side, a ring with a diamond in it. */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24'%3E%3Cg fill='none' stroke='%23e3b34c' stroke-linecap='round'%3E%3Cpath stroke-width='1.2' stroke-opacity='.7' d='M0 12h86M154 12h86'/%3E%3Cpath stroke-width='1.2' d='M58 12c0-5 8-5 8 0s-8 5-8 0M174 12c0-5 8-5 8 0s-8 5-8 0'/%3E%3Ccircle cx='120' cy='12' r='9.5' stroke-width='1.2'/%3E%3Cpath d='M92 12h12M136 12h12'/%3E%3C/g%3E%3Cpath fill='%23e3b34c' d='M120 6l6 6-6 6-6-6zM100 12l3-3 3 3-3 3zM134 12l3-3 3 3-3 3z'/%3E%3C/svg%3E");
  /* Grain: fine noise over everything. Mottle: slow noise that makes a ground read as worn stone. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .82 0 0 0 0 .55 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  /* The torn edge between sections, repeated along it. */
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v9l-9 5-12-7-10 10-13-6-9 8-14-9-11 7-13-4-9 9-12-10-10 6-12-7-13 9-11-6-12 8-10-9-13 5-9-7-11 9-12-5-13 7-2-7z' fill='%23000'/%3E%3C/svg%3E");
  /* The sea, in the small wave marks of a chart. */
  --waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40'%3E%3Cpath d='M0 12c8-10 16-10 24 0s16 10 24 0s16-10 24 0s16 10 24 0' fill='none' stroke='%23e3b34c' stroke-width='.9'/%3E%3C/svg%3E");
}

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

html {
  scrollbar-color: #33433e var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--parch);
  font: 500 17px/1.5 var(--body);
  background:
    radial-gradient(110% 55% at 50% -8%, rgba(227, 179, 76, .09), transparent 62%),
    var(--ink);
}
/* Grain over everything, so the dark reads as a surface and not as a void. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .07;
  background-image: var(--grain);
}
/* A vignette, so the edges of the screen fall off into the dark like a lit table. */
body.home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 9, 8, .55) 100%);
}

::selection { background: var(--gold); color: var(--ink); }
input, textarea { caret-color: var(--gold); }
a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
img, video, svg { display: block; max-width: 100%; }
time, .num { font-variant-numeric: tabular-nums; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; line-height: 1.02; margin: 0; text-wrap: balance; }
/* Names are cut into the ground: a dark edge below each letter, a thread of light above it. */
.home h2, .home h3 { text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 -1px 0 rgba(255, 240, 200, .07); }
p { margin: 0; text-wrap: pretty; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.ornament { display: block; pointer-events: none; }

/* Footage from the game sits in a frame with the interface's double gold rule. */
.frame { position: relative; margin: 0; overflow: hidden; background: var(--panel); }
.frame img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-gold), inset 0 0 0 5px rgba(13, 21, 19, .55), inset 0 0 0 6px rgba(227, 179, 76, .22);
}
/* An ornate frame has knotwork in its four corners, over the double rule. */
.corner { position: absolute; width: 46px; height: 46px; color: var(--gold); opacity: .85; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); z-index: 2; }
.corner-tl { top: 6px; left: 6px; }
.corner-tr { top: 6px; right: 6px; transform: scaleX(-1); }
.corner-bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.corner-br { bottom: 6px; right: 6px; transform: scale(-1); }

/* ---------- header and footer ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px;
}
.home .top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
  background: linear-gradient(180deg, rgba(13, 21, 19, .9), rgba(13, 21, 19, 0));
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 900 30px/1 var(--display);
  color: var(--gold);
  text-decoration: none;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .5);
}
.wordmark:hover { color: var(--gold-hi); }
/* The mark beside the name: the D in white, the rose in gold (shared/_mark). The D's path has no fill of its own, so it takes this one. */
.mark { width: 1.2em; height: 1.2em; flex: none; color: #fff; fill: currentColor; --rose: var(--gold); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9)) drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); }
.wordmark:hover .mark { --rose: var(--gold-hi); }
.top-nav { display: flex; align-items: center; gap: 14px; }
.top-link {
  color: var(--parch);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.top-link:hover { color: var(--gold); }

.bottom {
  position: relative;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: 44px var(--gutter) calc(28px + env(safe-area-inset-bottom));
}
.bottom::before { content: ""; position: absolute; top: -1px; left: 50%; width: 240px; height: 24px; transform: translate(-50%, -50%); background: var(--ink) var(--ornament) center / 240px 24px no-repeat; }
.bottom-inner { max-width: var(--measure); margin: 0 auto; display: grid; gap: 18px; }
.bottom .wordmark { font-size: 26px; }
.bottom-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.bottom-nav a { color: var(--parch-2); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.bottom-nav a:hover { color: var(--gold); }
.bottom-note { color: var(--dim); font-size: 14px; }

/* ---------- buttons: the game's own gold pill (.pill) and its ghost ---------- */

.button, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  font: 800 17px/1 var(--body);
  color: #241a05;
  text-decoration: none;
  background: linear-gradient(180deg, #f0cd78, var(--gold) 55%, #d6a63f) var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 10px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out), filter .2s var(--ease-out);
}
.button:hover, button:hover, input[type="submit"]:hover { color: #241a05; filter: brightness(1.08); border-color: var(--gold-hi); }
.button:active, button:active, input[type="submit"]:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 4px rgba(0, 0, 0, .5); }
.button.quiet, button.quiet {
  color: var(--parch);
  font-weight: 700;
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
.button.quiet:hover, button.quiet:hover { color: var(--gold-hi); background: var(--panel-2); border-color: var(--line-gold); filter: none; }
.button.small, button.small { min-height: 38px; padding: 0 16px; font-size: 15px; }
button.link {
  min-height: 44px;
  padding: 0;
  color: var(--parch-2);
  font: 700 16px var(--body);
  background: none;
  border: 0;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.link:hover { color: var(--gold); background: none; filter: none; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .button { flex: 1 1 auto; }

/* ---------- flash ---------- */

.flash {
  max-width: 560px;
  margin: 4px var(--gutter) 12px;
  padding: 12px 16px;
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .9);
}
.flash-alert { border-color: var(--bad); color: #ffb3a6; }
.flash-notice { border-color: var(--ok); }
.home .flash { position: absolute; z-index: 11; top: 64px; left: 0; right: 0; margin-inline: auto; width: calc(100% - 2 * var(--gutter)); }
@media (min-width: 640px) { .flash { margin-inline: auto; } }

/* ---------- section scaffolding ---------- */

main { flex: 1; width: 100%; min-width: 0; }
.page main { padding: 4px var(--gutter) 56px; }
.home main > section { position: relative; padding: 64px max(var(--gutter), calc((100% - var(--measure)) / 2)); }

.section-head { display: grid; gap: 10px; margin-bottom: 28px; max-width: 46ch; }
.section-head h2 { font-size: 40px; font-weight: 900; color: var(--parch); }
.section-head h2::after {
  content: "";
  display: block;
  width: 240px;
  max-width: 100%;
  height: 24px;
  margin-top: 10px;
  background: var(--ornament) left / 240px 24px no-repeat;
}
.section-head p { color: var(--parch-2); font-size: 18px; }

/* Things settle into place as they scroll into view (reveal_controller.js adds .reveals and .in). */
.reveals [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.reveals [data-reveal].in { opacity: 1; transform: none; }
.reveals .feature:nth-child(2) { transition-delay: .12s; }
.reveals .feature:nth-child(3) { transition-delay: .24s; }
.reveals .land:nth-child(3) { transition-delay: .1s; }
.reveals .land:nth-child(4) { transition-delay: .2s; }
.reveals .land:nth-child(5) { transition-delay: .3s; }

/* The torn edge: each section's ground hangs a little over the next one's, cut like paper, with its
   shadow falling on what is below. The section sets --tear to the colour of its own foot. */
.tear { position: absolute; left: 0; right: 0; bottom: -23px; height: 24px; z-index: 3; pointer-events: none; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .55)); }
.tear::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tear, var(--ink));
  -webkit-mask: var(--torn) 0 0 / 240px 24px repeat-x;
  mask: var(--torn) 0 0 / 240px 24px repeat-x;
}

/* Weather: fog that drifts across a scene, and embers that rise through it (embers_controller.js). */
.fog, .embers, .shaft { position: absolute; pointer-events: none; }
.fog {
  inset: -30% -20%;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: .5;
  filter: blur(2px);
}
.fog-a { background: radial-gradient(40% 50% at 30% 60%, rgba(236, 226, 198, .14), transparent 70%), radial-gradient(35% 45% at 75% 35%, rgba(227, 179, 76, .1), transparent 70%); }
.fog-b { background: radial-gradient(45% 40% at 60% 70%, rgba(236, 226, 198, .1), transparent 70%), radial-gradient(30% 40% at 15% 25%, rgba(227, 179, 76, .09), transparent 70%); }
.embers { inset: 0; z-index: 0; width: 100%; height: 100%; }
.shaft { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fog-a { animation: drift-a 46s ease-in-out infinite alternate; }
  .fog-b { animation: drift-b 58s ease-in-out infinite alternate; }
}
@keyframes drift-a { from { transform: translate3d(-4%, 2%, 0) scale(1); } to { transform: translate3d(5%, -3%, 0) scale(1.08); } }
@keyframes drift-b { from { transform: translate3d(5%, -2%, 0) scale(1.05); } to { transform: translate3d(-5%, 3%, 0) scale(1); } }

/* ---------- hero ---------- */

.home main > .hero {
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  /* The headline steps up into the fading bottom of the footage. */
  padding-top: calc(100vw * 546 / 720 * .8);
  padding-bottom: 48px;
  --tear: var(--ink);
}
.hero-light { display: none; }
.hero-corners { display: none; }
/* On a phone the footage plays across the top at the size it has in the game (no zoom, so it stays
   sharp), and fades into the ink the headline stands on; the phone it is shown in on a desk is put
   away until 960px. */
@media (max-width: 959px) {
  .hero .hero-film { position: absolute; inset: 0 0 auto; z-index: -2; isolation: auto; aspect-ratio: 720 / 546; border-radius: 0; background: none; box-shadow: none; }
  .hero .hero-film :is(.phone-button, .phone-status, .phone-island, .phone-home, .phone-screen::after) { display: none; }
  .hero .hero-film :is(.phone-screen, .phone-view) { position: static; inset: auto; height: 100%; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .hero .hero-film video { width: 100%; height: 100%; object-fit: cover; background: none; }
  .hero .hero-film::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0;
    opacity: 1;
    background: linear-gradient(180deg, rgba(13, 21, 19, .75) 0%, rgba(13, 21, 19, 0) 20%, rgba(13, 21, 19, 0) 58%, rgba(13, 21, 19, .85) 86%, var(--ink) 100%);
  }
}
.hero-copy { position: relative; z-index: 1; display: grid; gap: 16px; max-width: 34rem; }
.hero h1 {
  font-size: clamp(48px, 13.5vw, 96px);
  font-weight: 900;
  line-height: .92;
  color: var(--parch);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 6px 28px rgba(0, 0, 0, .65);
}
/* The illuminated capital: the first letter in gold leaf, in a ruled box with a diamond at each corner. */
.cap {
  position: relative;
  display: inline-block;
  padding: 0 .06em;
  margin-right: .02em;
  color: transparent;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)) drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
}
.cap::before {
  content: "";
  position: absolute;
  inset: .08em -.02em -.02em;
  z-index: -1;
  border: 1px solid rgba(227, 179, 76, .55);
  box-shadow: inset 0 0 0 3px rgba(13, 21, 19, .6), inset 0 0 0 4px rgba(227, 179, 76, .25);
  background: repeating-linear-gradient(135deg, rgba(227, 179, 76, .08) 0 2px, transparent 2px 7px), rgba(13, 21, 19, .55);
}
.cap::after {
  content: "";
  position: absolute;
  inset: .08em -.02em -.02em;
  z-index: -1;
  background:
    radial-gradient(circle at 0 0, var(--gold) 2.5px, transparent 3px),
    radial-gradient(circle at 100% 0, var(--gold) 2.5px, transparent 3px),
    radial-gradient(circle at 0 100%, var(--gold) 2.5px, transparent 3px),
    radial-gradient(circle at 100% 100%, var(--gold) 2.5px, transparent 3px);
}
.hero-lede { font-size: 19px; line-height: 1.45; color: var(--parch); max-width: 32ch; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.hero .actions { margin-top: 6px; }
/* Over footage the ghost pill frosts what is behind it, so it stays legible on any frame. */
.hero .button.quiet { background: rgba(21, 33, 30, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-note { color: var(--dim); font-size: 14px; }

/* The one authored moment: the raid lights up as the words settle into place. */
@media (prefers-reduced-motion: no-preference) {
  .hero-film video { animation: kindle 1.6s var(--ease-out) both; }
  .hero-copy > * { animation: settle .9s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: .07s; }
  .hero-copy > :nth-child(3) { animation-delay: .14s; }
  .hero-copy > :nth-child(4) { animation-delay: .21s; }
}
@keyframes kindle { from { filter: brightness(.2) saturate(.5); } to { filter: none; } }
@keyframes settle { from { opacity: .4; transform: translateY(10px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* Reels: a row of footage that a thumb swipes through on a phone, one item snapping in at a time. */
.thumb-reel, .vocation-reel {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.thumb-reel::-webkit-scrollbar, .vocation-reel::-webkit-scrollbar { display: none; }
.thumb-reel > li, .vocation-reel > li { scroll-snap-align: start; }

/* ---------- one thumb: the game's whole screen, in a phone ---------- */

.thumb {
  --tear: var(--stone);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(227, 179, 76, .08), transparent 70%),
    var(--mottle) center / 1000px 1000px,
    linear-gradient(180deg, var(--ink-2) 0%, var(--stone) 100%);
}
.thumb-reel {
  margin: 0 calc(-1 * var(--gutter));
  padding: 56px var(--gutter) 12px;
  grid-auto-columns: min(74%, 280px);
  gap: 20px;
}
.feature { position: relative; display: grid; align-content: start; gap: 8px; }
/* The number of each, drawn in outline behind its phone, big as a poster. */
.numeral {
  position: absolute;
  top: -50px;
  left: -12px;
  z-index: 0;
  font: 900 150px/1 var(--display);
  color: rgba(227, 179, 76, .1);
  -webkit-text-stroke: 1px rgba(227, 179, 76, .3);
  letter-spacing: -.02em;
  pointer-events: none;
  user-select: none;
}
.feature h3 { font-size: 32px; color: var(--parch); margin-top: 12px; }
.feature p { color: var(--parch-2); }
/* A pool of light under each phone, on the table. */
.feature .phone::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -26px;
  height: 40px;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(227, 179, 76, .28), transparent 70%);
  filter: blur(6px);
}

/* ---------- the phone: footage recorded on a phone is shown on one ---------- */

/* A titanium body with its buttons, a black bezel, the screen with its island and status bar, the
   footage in the safe area between the status bar and the home bar. Everything is measured in the
   phone's own width (cqw), so the same phone is a 280px one in the reel and a 360px one in the hero.
   Drawn with CSS only: no mockup image to license or to load. */
.phone {
  position: relative;
  z-index: 1;
  isolation: isolate;
  container-type: inline-size;
  margin: 0;
  aspect-ratio: 70.6 / 146.6;
  border-radius: 16cqw;
  background: linear-gradient(150deg, #7a7a80 0%, #3c3c41 14%, #232327 40%, #2a2a2e 60%, #45454a 86%, #85858b 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 0 0 .6cqw rgba(0, 0, 0, .35),
    0 1px 0 rgba(255, 255, 255, .08),
    0 40px 70px -28px rgba(0, 0, 0, 1),
    0 14px 24px -16px rgba(0, 0, 0, .9);
}
/* The antenna lines in the band. */
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 18cqw, rgba(0, 0, 0, .55) 18cqw, rgba(0, 0, 0, .55) calc(18cqw + 1px), transparent calc(18cqw + 1px)) top / 100% 2.2cqw no-repeat,
    linear-gradient(90deg, transparent 18cqw, rgba(0, 0, 0, .55) 18cqw, rgba(0, 0, 0, .55) calc(18cqw + 1px), transparent calc(18cqw + 1px)) bottom / 100% 2.2cqw no-repeat,
    linear-gradient(180deg, transparent 24cqw, rgba(0, 0, 0, .55) 24cqw, rgba(0, 0, 0, .55) calc(24cqw + 1px), transparent calc(24cqw + 1px)) left / 2.2cqw 100% no-repeat,
    linear-gradient(180deg, transparent 24cqw, rgba(0, 0, 0, .55) 24cqw, rgba(0, 0, 0, .55) calc(24cqw + 1px), transparent calc(24cqw + 1px)) right / 2.2cqw 100% no-repeat;
  opacity: .7;
}
.phone-button {
  position: absolute;
  z-index: -1;
  width: 2.2cqw;
  border-radius: 1px;
  background: linear-gradient(90deg, #6b6b71, #2b2b2f 50%, #4a4a4f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 .3cqw rgba(0, 0, 0, .4);
}
.phone-action { left: -1.4cqw; top: 23cqw; height: 7cqw; }
.phone-volume-up { left: -1.4cqw; top: 35cqw; height: 13cqw; }
.phone-volume-down { left: -1.4cqw; top: 50cqw; height: 13cqw; }
.phone-power { right: -1.4cqw; top: 40cqw; height: 21cqw; background: linear-gradient(90deg, #4a4a4f, #2b2b2f 50%, #6b6b71); }
.phone-screen {
  position: absolute;
  inset: 4.4cqw;
  overflow: hidden;
  border-radius: 12cqw;
  background: var(--ink);
  box-shadow: 0 0 0 2.4cqw #060607, 0 0 0 2.6cqw rgba(255, 255, 255, .06);
}
/* The glass: a sheen across the top corner. */
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .035) 26%, transparent 44%);
}
.phone-island {
  position: absolute;
  top: 3.6cqw;
  left: 50%;
  z-index: 3;
  width: 31cqw;
  height: 9.4cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 .4cqw rgba(255, 255, 255, .04);
}
.phone-island::after { content: ""; position: absolute; right: 2.4cqw; top: 50%; width: 4.4cqw; height: 4.4cqw; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #26304a, #050609 60%); box-shadow: inset 0 0 0 .5cqw #0b0d12; }
.phone-status {
  position: absolute;
  top: 5.2cqw;
  left: 11cqw;
  right: 9.5cqw;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  height: 6cqw;
  color: #fff;
  font: 600 4.4cqw/1 -apple-system, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -.01em;
}
.phone-time { margin-right: auto; }
.phone-signal, .phone-wifi, .phone-battery { display: block; background: currentColor; }
.phone-signal { width: 5cqw; height: 3.4cqw; -webkit-mask: linear-gradient(0deg, #000 0 100%) 0 100% / 0.95cqw 1.4cqw no-repeat, linear-gradient(0deg, #000 0 100%) 1.35cqw 100% / 0.95cqw 2cqw no-repeat, linear-gradient(0deg, #000 0 100%) 2.7cqw 100% / 0.95cqw 2.7cqw no-repeat, linear-gradient(0deg, #000 0 100%) 4.05cqw 100% / 0.95cqw 3.4cqw no-repeat; mask: linear-gradient(0deg, #000 0 100%) 0 100% / 0.95cqw 1.4cqw no-repeat, linear-gradient(0deg, #000 0 100%) 1.35cqw 100% / 0.95cqw 2cqw no-repeat, linear-gradient(0deg, #000 0 100%) 2.7cqw 100% / 0.95cqw 2.7cqw no-repeat, linear-gradient(0deg, #000 0 100%) 4.05cqw 100% / 0.95cqw 3.4cqw no-repeat; }
.phone-wifi { width: 4.6cqw; height: 3.4cqw; -webkit-mask: radial-gradient(circle at 50% 100%, #000 0 .8cqw, transparent .8cqw 1.5cqw, #000 1.5cqw 2.3cqw, transparent 2.3cqw 3cqw, #000 3cqw 3.8cqw, transparent 3.8cqw), conic-gradient(from 225deg at 50% 100%, #000 0 90deg, transparent 90deg); -webkit-mask-composite: source-in; mask: radial-gradient(circle at 50% 100%, #000 0 .8cqw, transparent .8cqw 1.5cqw, #000 1.5cqw 2.3cqw, transparent 2.3cqw 3cqw, #000 3cqw 3.8cqw, transparent 3.8cqw), conic-gradient(from 225deg at 50% 100%, #000 0 90deg, transparent 90deg); mask-composite: intersect; }
.phone-battery { position: relative; width: 7.4cqw; height: 3.6cqw; background: none; border: 1px solid rgba(255, 255, 255, .5); border-radius: 1cqw; }
.phone-battery::before { content: ""; position: absolute; inset: .5cqw; right: 1.6cqw; border-radius: .5cqw; background: #fff; }
.phone-battery::after { content: ""; position: absolute; right: -1.1cqw; top: 50%; width: .6cqw; height: 1.4cqw; transform: translateY(-50%); border-radius: 0 .3cqw .3cqw 0; background: rgba(255, 255, 255, .5); }
.phone-view { position: absolute; inset: 15cqw 0 7.6cqw; z-index: 1; overflow: hidden; }
.phone-view video { width: 100%; height: 100%; object-fit: cover; background: var(--panel); }
.phone-home { position: absolute; bottom: 2.2cqw; left: 50%; z-index: 3; width: 36cqw; height: 1.4cqw; transform: translateX(-50%); border-radius: 999px; background: rgba(255, 255, 255, .92); }

/* ---------- hunts: a field of colour per vocation, the game itself on top ---------- */

.hunts {
  --tear: var(--ink-2);
  background:
    repeating-linear-gradient(135deg, rgba(227, 179, 76, .025) 0 1px, transparent 1px 14px),
    var(--mottle) center / 1000px 1000px,
    var(--ink-2);
}
.vocation {
  --voc: var(--gold);
  --voc-hi: var(--gold-hi);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: calc(-1 * var(--gutter));
  display: grid;
  /* A reel inside scrolls; it never widens the page. */
  grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(120% 60% at 100% 100%, color-mix(in srgb, var(--voc) 30%, transparent), transparent 70%),
    var(--mottle) center / 1000px 1000px,
    linear-gradient(180deg, color-mix(in srgb, var(--voc) 24%, var(--ink-2)), color-mix(in srgb, var(--voc) 8%, var(--ink-2)));
  /* Cut on the slant, each field hanging a little over the next. */
  clip-path: polygon(0 0, 100% 14px, 100% 100%, 0 calc(100% - 14px));
  padding-bottom: 14px;
}
.vocation + .vocation { margin-top: -16px; }
.vocation.knight { --voc: var(--hp); --voc-hi: #f6a091; z-index: 3; }
.vocation.ranger { --voc: var(--ok); --voc-hi: #b4eb9f; z-index: 2; clip-path: polygon(0 14px, 100% 0, 100% calc(100% - 14px), 0 100%); }
.vocation.mage { --voc: var(--mp); --voc-hi: #a7c6f6; z-index: 1; }
.vocation .embers { opacity: .8; }
/* The vocation's crest, drawn in one fine line, big behind its words. */
.crest {
  position: absolute;
  right: -40px;
  bottom: -30px;
  z-index: 0;
  width: 300px;
  height: 300px;
  color: var(--voc-hi);
  opacity: .09;
  stroke-width: .3;
  pointer-events: none;
}
/* Each vocation's footage: a reel on a phone, a big shot over two small ones on a wide screen. */
.vocation-reel {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 30px var(--gutter) 2px;
  grid-auto-columns: 84%;
  gap: 10px;
}
.vocation-reel > li { border-radius: 10px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); }
.vocation-reel video, .vocation-reel img, .clip-placeholder { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
/* A clip not filmed yet: the vocation's colour, hatched, saying what will play there. */
.clip-placeholder {
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 18px;
  color: var(--parch-2);
  font-size: 15px;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--voc) 14%, transparent) 0 12px, transparent 12px 24px),
    color-mix(in srgb, var(--voc) 10%, var(--ink-2));
}
.clip-placeholder-tag { font-weight: 800; color: var(--voc-hi); }
.vocation-text { position: relative; z-index: 1; display: grid; gap: 10px; padding: 18px var(--gutter) 30px; }
.vocation h3 { display: flex; align-items: center; gap: 12px; font-size: 46px; font-weight: 900; color: var(--parch); }
.vocation-mark { width: 34px; height: 34px; color: var(--voc-hi); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--voc) 60%, transparent)); }
.vocation-role { font-size: 19px; color: var(--parch); }
.vocation-text ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; color: var(--parch-2); }
.vocation-text li { display: flex; gap: 10px; align-items: baseline; }
.vocation-text li::before { content: ""; flex: none; width: 6px; height: 6px; transform: translateY(-2px) rotate(45deg); background: var(--voc-hi); }
.vocation-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 2px;
  font-weight: 800;
  font-size: 17px;
  color: var(--voc-hi);
  text-decoration: none;
}
.vocation-go .icon { transition: transform .25s var(--ease-out); }
.vocation-go:hover { color: var(--parch); }
.vocation-go:hover .icon { transform: translateX(4px); }
.hunts-note { margin-top: 22px; max-width: 62ch; color: var(--dim); font-size: 15px; }

/* ---------- gear: what you wear shows on you ---------- */

.gear {
  --tear: var(--ink);
  background:
    var(--mottle) center / 1000px 1000px,
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}
.gear-media { display: grid; gap: 22px; }
.gear-film, .gear-lineup { border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.gear-film video, .gear-lineup img, .spoils-film video { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; }
/* Spoils: the rarest gear, one close-up hung under a lamp beside what it is. */
.spoils { display: grid; gap: 28px; margin-top: 72px; }
.spoils-hang { position: relative; }
.beam {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 40px);
  width: 86%;
  height: 160px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(246, 216, 138, 0) 0%, rgba(246, 216, 138, .18) 100%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.beam::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 12px 4px rgba(246, 216, 138, .6); }
.spoils-film { border-radius: 12px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 1); }
.spoils-film::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(246, 216, 138, .12), transparent 35%); mix-blend-mode: screen; }
.spoils-text { display: grid; gap: 12px; }
.spoils h3 { font-size: 40px; font-weight: 900; color: var(--parch); }
.spoils p { color: var(--parch-2); font-size: 18px; max-width: 46ch; }
.spoils ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; color: var(--parch-2); }
.spoils li { display: flex; gap: 10px; align-items: baseline; }
.spoils li::before { content: ""; flex: none; width: 6px; height: 6px; transform: translateY(-2px) rotate(45deg); background: var(--gold); }

/* ---------- lands: a chart of the sea ---------- */

.lands { overflow: hidden; isolation: isolate; background: var(--ink); }
.chart { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.chart::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .09;
  background: var(--waves) 0 0 / 96px 40px, var(--waves) 48px 20px / 96px 40px;
}
@media (prefers-reduced-motion: no-preference) { .chart::before { animation: swell 14s linear infinite; } }
@keyframes swell { to { background-position: 96px 0, 144px 20px; } }
.rhumb { position: absolute; left: 50%; top: 42%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%); color: var(--gold); opacity: .06; }
.compass { position: absolute; right: -50px; top: 70px; width: 220px; height: 220px; color: var(--gold); opacity: .22; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1)); }
.lands .section-head, .land-strip, .land-more { position: relative; z-index: 1; }
.land-strip {
  list-style: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 12px var(--gutter) 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 320px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.land-strip::-webkit-scrollbar { display: none; }
/* Captain Bren's route, drawn as the chart comes into view (route_controller.js sets --drawn). */
.route { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; }
.route-line { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .004 .007; opacity: .8; }
.route-drawn { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: var(--drawn, 1) 1; }
.land { position: relative; z-index: 1; scroll-snap-align: start; display: grid; align-content: start; gap: 6px; }
.land-film { border-radius: 10px; margin-bottom: 8px; overflow: visible; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .95); }
.land-film img { border-radius: inherit; }
/* The land's cloth, from its palette, as a pennant hung from the top of its picture. */
.pennant {
  position: absolute;
  top: -5px;
  left: 20px;
  z-index: 2;
  width: 26px;
  height: 58px;
  background: linear-gradient(90deg, var(--cloth) 0 72%, var(--accent) 72%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55));
}
.pennant::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gold); }
/* The harbour mark at the picture's corner, where the route calls. */
.harbour { position: absolute; left: -9px; bottom: -9px; z-index: 3; width: 24px; height: 24px; color: var(--gold); filter: drop-shadow(0 0 3px rgba(13, 21, 19, 1)); }
.land h3, .land-more h3 { font-size: 30px; color: var(--parch); }
.land-town { font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--accent) 60%, var(--parch)); }
.land > p:last-child { color: var(--parch-2); }
.land-more { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.land-more li { padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.land-more li h3::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -1px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--cloth) 0 70%, var(--accent) 70%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 2px var(--line-gold);
}
.land-more p { color: var(--parch-2); }
.land-more .land-town { font-size: inherit; }

/* ---------- closing: the gate on the Isle of Choosing ---------- */

.home main > .closing {
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding-top: 96px;
  padding-bottom: 150px;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(227, 179, 76, .22), transparent 70%),
    var(--mottle) center / 1000px 1000px,
    var(--ink);
  display: grid;
  justify-items: center;
}
.closing .fog { opacity: .35; }
.gate {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: min(104%, 680px);
  transform: translateX(-50%);
  color: var(--gold);
  opacity: .42;
  filter: drop-shadow(0 0 12px rgba(227, 179, 76, .25));
}
.closing-copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; }
/* The mark hangs at the crown of the gate, over the words. */
.closing-mark { width: 120px; height: 120px; margin-bottom: 4px; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 28px rgba(227, 179, 76, .22)); }
@media (min-width: 640px) { .closing-mark { width: 150px; height: 150px; } }
.closing h2 { font-size: clamp(40px, 11vw, 72px); font-weight: 900; max-width: 14ch; }
.closing h2::after { content: ""; display: block; width: 240px; max-width: 100%; height: 24px; margin: 14px auto 0; background: var(--ornament) center / 240px 24px no-repeat; }
.closing p { color: var(--parch-2); font-size: 18px; max-width: 40ch; }
.closing .actions { justify-content: center; width: 100%; max-width: 440px; margin-top: 8px; }

/* ---------- panels: forms and the account ---------- */

.card {
  width: 100%;
  max-width: 460px;
  margin: 12px auto;
  padding: 26px 20px 22px;
  border-radius: 12px;
  border: 1px solid var(--line-gold);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px rgba(227, 179, 76, .2), 0 24px 60px -30px rgba(0, 0, 0, .95);
}
.card.wide { max-width: 680px; }
.card h2 { font-size: 36px; font-weight: 900; margin-bottom: 18px; }
.card h2::after { content: ""; display: block; width: 240px; max-width: 100%; height: 24px; margin-top: 8px; background: var(--ornament) left / 240px 24px no-repeat; }
.card h3 { font-size: 28px; margin-bottom: 12px; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-weight: 800; }
.field .hint { color: var(--dim); font-size: 14px; }
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  min-height: 50px;
  font: 500 17px var(--body);
  color: var(--parch);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
  transition: border-color .2s var(--ease-out);
}
input:hover { border-color: rgba(226, 206, 150, .35); }
input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
input::placeholder { color: #7f8c80; }
.card input[type="submit"] { width: 100%; }
.errors { border: 1px solid var(--bad); border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; color: #ffb3a6; background: rgba(255, 106, 85, .06); }
.errors ul { margin: 0; padding-left: 18px; }
.below { margin-top: 18px; color: var(--dim); font-size: 15px; }
.account-meta { color: var(--dim); }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.account-actions form { margin: 0; }

.characters { width: 100%; border-collapse: collapse; margin: 4px 0 20px; }
.characters th, .characters td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.characters th { color: var(--dim); font-weight: 700; font-size: 14px; }
.characters td:first-child, .characters th:first-child { padding-left: 0; }
.characters .name { font: 700 22px/1.1 var(--display); color: var(--gold); }
.characters .created { display: none; }
.empty { color: var(--dim); margin-bottom: 18px; }

/* ---------- wider screens ---------- */

@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .home main > section { padding-block: 88px; }
  .section-head h2 { font-size: 52px; }
  .actions .button { flex: 0 0 auto; }
  .card { padding: 34px 32px 28px; margin-top: 28px; }
  .characters .created { display: table-cell; }
  .land-strip { grid-auto-columns: 320px; }
  .corner { width: 56px; height: 56px; }
  .compass { width: 300px; height: 300px; right: -40px; top: 60px; }
  .vocation { clip-path: polygon(0 0, 100% 22px, 100% 100%, 0 calc(100% - 22px)); padding-bottom: 22px; }
  .vocation.ranger { clip-path: polygon(0 22px, 100% 0, 100% calc(100% - 22px), 0 100%); }
  .vocation + .vocation { margin-top: -26px; }
  .numeral { font-size: 190px; top: -60px; left: -22px; }
}

@media (min-width: 960px) {
  .home main > .hero {
    min-height: min(100svh, 920px);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    align-content: center;
    gap: 72px;
    padding-top: 128px;
    padding-bottom: 96px;
  }
  .hero-light {
    display: block;
    position: absolute;
    inset: -8%;
    z-index: -3;
    background: url("/assets/dragon-raid-e7e1e5d5.jpg") center / cover;
    filter: blur(56px) saturate(1.3) brightness(.42);
  }
  @media (prefers-reduced-motion: no-preference) { .hero-light { animation: breathe 14s ease-in-out infinite alternate; } }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(70% 90% at 30% 50%, rgba(13, 21, 19, .82), rgba(13, 21, 19, .35) 70%), linear-gradient(180deg, transparent 70%, var(--ink));
  }
  /* A shaft of light falls across the scene from the top left. */
  .shaft {
    display: block;
    inset: 0;
    z-index: 0;
    background: linear-gradient(104deg, rgba(246, 216, 138, .13), rgba(246, 216, 138, .04) 30%, transparent 55%);
    clip-path: polygon(0 0, 46% 0, 78% 100%, 0 100%);
    mix-blend-mode: screen;
  }
  /* The knotwork at the four corners of the scene. */
  .hero-corners { display: block; position: absolute; inset: 22px; z-index: 1; pointer-events: none; will-change: transform; }
  .hero-corners .corner { width: 150px; height: 150px; opacity: .6; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9)); }
  .hero-corners .corner-tl { top: 0; left: 0; }
  .hero-corners .corner-tr { top: 0; right: 0; }
  .hero-corners .corner-bl { bottom: 0; left: 0; }
  .hero-corners .corner-br { bottom: 0; right: 0; }
  .fog { will-change: transform; }
  .hero-film {
    grid-column: 2;
    grid-row: 1;
    width: 360px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .22),
      inset 0 0 0 .6cqw rgba(0, 0, 0, .35),
      0 60px 100px -40px rgba(0, 0, 0, 1),
      0 0 0 10px rgba(13, 21, 19, .5),
      0 0 90px -10px rgba(227, 179, 76, .28);
    will-change: transform;
  }
  .hero-copy { grid-column: 1; grid-row: 1; gap: 22px; }
  .hero-lede { font-size: 22px; }

  .thumb-reel {
    margin: 0;
    padding: 64px 0 24px;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    gap: 44px;
  }
  .feature:nth-child(2) { transform: translateY(-34px); }
  .reveals .feature:nth-child(2) { transform: translateY(-12px); }
  .reveals .feature:nth-child(2).in { transform: translateY(-34px); }
  .numeral { font-size: 220px; top: -74px; left: -34px; }

  .vocation {
    margin-inline: 0;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 calc(100% - 36px));
    padding-bottom: 36px;
    background:
      radial-gradient(90% 120% at 100% 50%, color-mix(in srgb, var(--voc) 30%, transparent), transparent 70%),
      var(--mottle) center / 1000px 1000px,
      linear-gradient(90deg, color-mix(in srgb, var(--voc) 10%, var(--ink-2)), color-mix(in srgb, var(--voc) 22%, var(--ink-2)));
  }
  .vocation + .vocation { margin-top: -40px; }
  .vocation.ranger { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); clip-path: polygon(0 36px, 100% 0, 100% calc(100% - 36px), 0 100%); }
  .vocation.ranger .vocation-reel { order: 2; }
  .vocation.ranger .crest { right: auto; left: -40px; transform: scaleX(-1); }
  .crest { width: 420px; height: 420px; bottom: -60px; }
  .vocation-reel {
    padding: 40px 28px 28px;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .vocation.knight .vocation-reel, .vocation.mage .vocation-reel { padding-bottom: 56px; }
  .vocation.ranger .vocation-reel { padding-top: 24px; padding-bottom: 60px; }
  .vocation-reel > li:first-child { grid-column: 1 / -1; }
  .vocation-reel > li:first-child :is(video, img, .clip-placeholder) { aspect-ratio: 4 / 3; }
  .vocation-text { padding: 56px 44px 60px; }
  .vocation h3 { font-size: 56px; }

  .gear-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .spoils { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 56px; margin-top: 96px; }
  .spoils-hang { transform: rotate(-.8deg); }
  .beam { height: 200px; }
  .spoils h3 { font-size: 52px; }

  .land-strip {
    margin: 0;
    padding: 0;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 48px 72px;
  }
  .land:nth-child(odd) { transform: translateY(28px); }
  .reveals .land:nth-child(odd) { transform: translateY(50px); }
  .reveals .land:nth-child(odd).in { transform: translateY(28px); }
  .compass { width: 380px; height: 380px; right: 2%; top: 30px; }
  .land-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 64px; }

  .closing .actions { max-width: none; }
  .home main > .closing { padding-bottom: 180px; }
}
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.07); } }