/* =========================================================
   Arvin — a quiet journey
   Day = a spring meadow at golden hour. Night = moonlight and fireflies.
   Every colour lives here as a token, so the whole world can change at once.
   ========================================================= */

:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* page */
  --paper: #f6f0e1;
  --paper-2: #eee5cf;
  --card: #fbf7ec;
  --ink: #2b3433;
  --ink-soft: #5b6664;
  --line: #d8cbad;
  --line-soft: #e8ddc4;
  --gold: #9c7322;
  --accent: #3b6a7b;
  --rose: #b8616d;
  --on-accent: #fbf7ec;
  --shadow: rgba(90, 66, 20, .38);
  --hero-ink: #22302f;
  --hero-accent: #74561a;
  --hero-glow: rgba(255, 250, 236, .8);

  /* world */
  --sky-top: #9fcdea;
  --sky-mid: #cfe8f1;
  --sky-horizon: #fbf0d8;
  --sun: #fff6dc;
  --sun-glow: #ffe3a0;
  --crater-opacity: 0;
  --cloud: #ffffff;
  --cloud-shade: #dce9f1;
  --cloud-opacity: 1;
  --bird: #5d6c74;
  --birds-opacity: .65;
  --stars-opacity: 0;
  --mtn-far: #bccfe0;
  --mtn-far-light: #d0dfeb;
  --snow: #f5f9fc;
  --mtn-near: #a3bdd2;
  --mist: #f8f1e2;
  --castle: #93a9c1;
  --window: #7f96b0;
  --hill-far: #aacd9b;
  --tree-far: #8cb886;
  --hill-mid: #88ba7f;
  --tree-mid: #5f9b63;
  --hill-near: #6ba569;
  --road: #dccb98;
  --meadow: #5c9a60;
  --grass: #47864f;
  --tree: #3f7c55;
  --tree-light: #77b377;
  --trunk: #6a5040;
  --ground-shadow: rgba(30, 50, 30, .16);
  --cloak: #33476a;
  --cloak-trim: #efe3c6;
  --bag: #8a6a48;
  --staff: #7a5a3a;
  --gem: #6fd3f7;
  --flower-1: #fffbf2;
  --flower-2: #bcd9f2;
  --flower-3: #f4c4cf;
  --flower-4: #f5df95;
  --flower-core: #e3b043;
  --stem: #4b8a52;
  --mote: 246, 196, 208;
  --brass: #d4a646;
  --wood: #9a7550;
  --iron: #727a85;
  --glass: #e4eff4;
  --glass-warm: #fff1cc;
  --wax: #a8323d;
  --sand: #e2bf72;
  --silhouette: #394050;
  --sage: #5f8a55;
  --bg-mid: #f4ebd6;
  --bg-end: #f0dcc0;
  --ridge-far: rgba(96, 128, 140, .1);
  --ridge-near: rgba(74, 110, 98, .16);
  --terrain-ink: rgba(60, 92, 86, .3);
  --wave: rgba(70, 110, 130, .28);
  --lit-opacity: 0;
  --topo: rgba(140, 104, 46, .18);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #0f1524;
  --paper-2: #131b2e;
  --card: #172036;
  --ink: #e9e4d4;
  --ink-soft: #a7afc0;
  --line: #2d3955;
  --line-soft: #222c44;
  --gold: #e0c079;
  --accent: #8cc3d6;
  --rose: #d98d99;
  --on-accent: #0f1524;
  --shadow: rgba(0, 0, 0, .65);
  --hero-ink: #f1ecdc;
  --hero-accent: #e9cf8c;
  --hero-glow: rgba(8, 14, 30, .75);

  --sky-top: #0a1430;
  --sky-mid: #18284c;
  --sky-horizon: #3b4b78;
  --sun: #f3eedb;
  --sun-glow: #a9bdf0;
  --crater-opacity: .14;
  --cloud: #2b3a63;
  --cloud-shade: #202d4f;
  --cloud-opacity: .7;
  --birds-opacity: 0;
  --stars-opacity: 1;
  --mtn-far: #26365a;
  --mtn-far-light: #2f4169;
  --snow: #8796bd;
  --mtn-near: #1f2d4b;
  --mist: #33416a;
  --castle: #172238;
  --window: #f6c867;
  --hill-far: #1b2d44;
  --tree-far: #162739;
  --hill-mid: #162638;
  --tree-mid: #112030;
  --hill-near: #122030;
  --road: #26324a;
  --meadow: #0e1a27;
  --grass: #1b3140;
  --tree: #0f1d2a;
  --tree-light: #1e3347;
  --trunk: #151b26;
  --ground-shadow: rgba(0, 0, 0, .3);
  --cloak: #2a3b60;
  --cloak-trim: #9aa2bd;
  --bag: #3a3140;
  --staff: #4a3d33;
  --gem: #b9f0ff;
  --flower-1: #e6ecff;
  --flower-2: #9ec4ee;
  --flower-3: #d9b3d8;
  --flower-4: #eadb9c;
  --flower-core: #f2cf72;
  --stem: #2a4a46;
  --mote: 248, 218, 130;
  --brass: #c99e45;
  --wood: #6f5844;
  --iron: #4f5868;
  --glass: #24314d;
  --glass-warm: #3e3a33;
  --wax: #a0353f;
  --sand: #d9b66e;
  --silhouette: #060a14;
  --sage: #9cc48c;
  --bg-mid: #111a30;
  --bg-end: #1a1a2c;
  --ridge-far: rgba(140, 168, 228, .065);
  --ridge-near: rgba(150, 178, 236, .11);
  --terrain-ink: rgba(170, 196, 245, .22);
  --wave: rgba(160, 190, 240, .2);
  --lit-opacity: .9;
  --topo: rgba(224, 192, 121, .11);

  color-scheme: dark;
}

@property --paper { syntax: "<color>"; inherits: true; initial-value: #f6f0e1; }
@property --bg-mid { syntax: "<color>"; inherits: true; initial-value: #f4ebd6; }
@property --bg-end { syntax: "<color>"; inherits: true; initial-value: #f0dcc0; }
:root { transition: --paper .9s ease, --bg-mid .9s ease, --bg-end .9s ease; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--noise), linear-gradient(180deg, var(--paper) 0%, var(--bg-mid) 45%, var(--bg-end) 100%);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.1875rem;
  line-height: 1.65;
  transition: background-color .9s ease, color .9s ease;
}
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.1; letter-spacing: .01em; }
a { color: inherit; }
[id] { scroll-margin-top: 84px; } /* land below the fixed nav */
main, .footer { overflow-x: clip; } /* nothing decorative may widen the page on phones */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); padding: .5rem 1rem; border-radius: 6px; }
.skip:focus { left: 8px; }

.eyebrow {
  margin: 0;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

.container { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* ---------- navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 14px clamp(16px, 4vw, 48px);
  color: var(--hero-ink);
  transition: background-color .4s ease, box-shadow .4s ease, color .4s ease;
}
.nav--solid {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  text-decoration: none;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: .04em;
}
.brand__rose { width: 30px; height: 30px; color: var(--gold); transition: transform 1.2s cubic-bezier(.3, .8, .3, 1); }
.brand__rose * { fill: none; stroke: currentColor; stroke-width: 4; }
.brand__rose .thin { stroke-width: 2.5; }
.brand__rose .solid { fill: currentColor; stroke: none; }
.brand:hover .brand__rose { transform: rotate(90deg); }
.nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav ul a { position: relative; text-decoration: none; letter-spacing: .04em; opacity: .85; transition: opacity .3s; }
.nav ul a:hover { opacity: 1; }
.nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transition: transform .35s ease;
}
.nav ul a:hover::after { transform: scaleX(1); }
.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color .3s;
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .icon-moon, :root:not([data-theme="dark"]) .icon-sun { display: none; }
.menu-btn { display: none; }

@media (max-width: 1020px) {
  .menu-btn { display: grid; }
  .nav nav {
    position: absolute; top: calc(100% - 4px); left: 12px; right: 12px;
    display: none;
    padding: .6rem 1.2rem;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 20px 40px -24px var(--shadow);
  }
  .nav--open nav { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding: .6rem 0; }
}

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.5em;
  font: 500 1.05rem/1 "EB Garamond", serif;
  letter-spacing: .04em;
  text-decoration: none;
  text-shadow: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s ease, background-color .3s, box-shadow .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -14px var(--accent); }
.btn--ghost {
  color: inherit;
  background: color-mix(in srgb, var(--paper) 45%, transparent);
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--quiet { color: var(--ink); background: transparent; border-color: var(--line); }
.btn--quiet:hover { border-color: var(--gold); }
.link { color: var(--accent); text-decoration: none; font-weight: 500; letter-spacing: .02em; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero__content {
  position: relative; z-index: 2;
  width: min(640px, 100% - 32px);
  margin-left: clamp(16px, 8vw, 140px);
  padding: 110px 0 22vh;
  color: var(--hero-ink);
  text-shadow: 0 1px 18px var(--hero-glow);
}
.hero .eyebrow { color: var(--hero-accent); }
.hero h1 { font-size: clamp(4.2rem, 11vw, 7.5rem); line-height: .9; margin: .12em 0 .12em; letter-spacing: .02em; }
.hero__roles { margin: 0 0 1.1rem; font-size: 1.1rem; letter-spacing: .1em; font-variant: small-caps; }
.hero__lead { margin: 0 0 2rem; max-width: 27em; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-style: italic; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.spell-link {
  margin: 1.1rem 0 0 .2rem; padding: 0;
  font: italic 1.02rem "EB Garamond", serif; color: inherit;
  background: none; border: 0; cursor: pointer; opacity: .85;
  text-decoration: underline dotted; text-underline-offset: 5px;
  text-shadow: inherit;
}
.spell-link:hover { opacity: 1; }
.spell-link span { color: var(--hero-accent); }
/* the share image (assets/og-card.jpg) is a square rendered from index.html?og at 600x600 (2x): square so
   WhatsApp's small thumbnail is sharp; name and title sit in the middle band that wide previews crop to */
.og-only { display: none; }
.og-mode .nav, .og-mode .hero__actions, .og-mode .spell-link, .og-mode .spell-note, .og-mode .scroll-hint, .og-mode .hero__lead, .og-mode .motes { display: none !important; }
.og-mode .hero { align-items: flex-start; }
.og-mode .hero__content { width: 100%; margin: 0 auto; padding: 150px 16px 0; text-align: center; }
.og-mode .hero h1 { font-size: 8.6rem; font-weight: 700; } /* heavier strokes survive WhatsApp's tiny thumbnail */
.og-mode .hero__roles { margin-bottom: .5rem; font-size: .92rem; letter-spacing: .05em; font-weight: 500; }
.og-mode .og-only { display: block; margin: 0; font-size: 1.3rem; font-weight: 500; }
.spell-note {
  min-height: 1.6em;
  margin: 1rem 0 0 .4rem;
  font-size: 1.02rem;
  font-style: italic;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .8s ease, transform .8s ease;
}
.spell-note::before { content: "✿ "; color: var(--hero-accent); }
.spell-note.is-shown { opacity: 1; transform: none; }

.scroll-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.scroll-hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; animation: nudge 2.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* ---------- the drawn world ---------- */
.scene path, .scene circle, .scene ellipse, .scene rect { transition: fill .9s ease, stroke .9s ease, opacity .9s ease; }
.scene stop { transition: stop-color .9s ease; }
.stop-sky-top { stop-color: var(--sky-top); }
.stop-sky-mid { stop-color: var(--sky-mid); }
.stop-sky-horizon { stop-color: var(--sky-horizon); }
.stop-glow { stop-color: var(--sun-glow); }
.stop-mist { stop-color: var(--mist); }
.stop-paper { stop-color: var(--paper); }

.stars { opacity: var(--stars-opacity); transition: opacity 1.2s ease; }
.stars circle { fill: #fff8e6; }
.twinkle { animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; } }
.sun { fill: var(--sun); }
.crater { fill: #8f99b8; opacity: var(--crater-opacity); }
.clouds { opacity: var(--cloud-opacity); transition: opacity .9s ease; }
.cloud-body { fill: var(--cloud); }
.cloud-shade { fill: var(--cloud-shade); }
.drift { animation: drift 80s ease-in-out infinite alternate; }
.drift--slower { animation-duration: 130s; animation-direction: alternate-reverse; }
@keyframes drift { from { transform: translateX(-40px); } to { transform: translateX(60px); } }
.birds { opacity: var(--birds-opacity); transition: opacity .9s ease; }
.birds path { fill: none; stroke: var(--bird); stroke-width: 1.6; stroke-linecap: round; }
.flock { animation: fly 64s linear infinite; }
@keyframes fly { from { transform: translateX(0); } 70%, to { transform: translateX(-1950px); } }
.bob { animation: bob 3.2s ease-in-out infinite; }
.bob--b { animation-duration: 2.7s; animation-delay: -1s; }
.bob--c { animation-duration: 3.6s; animation-delay: -2s; }
@keyframes bob { 50% { transform: translateY(-7px); } }
.meteors { opacity: var(--stars-opacity); transition: opacity 1.2s ease; }
.meteor path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.meteor { opacity: 0; animation: meteor 13s linear 3s infinite; }
.meteor--late { animation-duration: 17s; animation-delay: 9s; }
@keyframes meteor {
  0% { opacity: 0; transform: translate(1150px, -60px); }
  1.5% { opacity: 1; }
  6% { opacity: 0; transform: translate(760px, 86px); }
  100% { opacity: 0; transform: translate(760px, 86px); }
}

.mtn-far { fill: var(--mtn-far); }
.mtn-far-light { fill: var(--mtn-far-light); }
.snow { fill: var(--snow); }
.mtn-near { fill: var(--mtn-near); }
.hill-far { fill: var(--hill-far); }
.tree-far { fill: var(--tree-far); }
.castle { fill: var(--castle); }
.castle .window { fill: var(--window); }
.castle-flag { stroke: var(--castle); stroke-width: 1.5; }
[data-theme="dark"] .castle .window { filter: url(#f-glow); animation: window-flicker 5s ease-in-out infinite; }
@keyframes window-flicker { 40% { opacity: .7; } 46% { opacity: 1; } 72% { opacity: .85; } }
.hill-mid { fill: var(--hill-mid); }
.tree-mid { fill: var(--tree-mid); }
.hill-near { fill: var(--hill-near); }
.road { fill: var(--road); }
.road-line { fill: none; stroke: none; }
.meadow { fill: var(--meadow); }
.grass { fill: none; stroke: var(--grass); stroke-width: 1.2; stroke-linecap: round; }

.tree .trunk { fill: var(--trunk); }
.tree .branch { fill: none; stroke: var(--trunk); stroke-width: 4; stroke-linecap: round; }
.canopy { fill: var(--tree); }
.canopy-light { fill: var(--tree-light); }
.canopy-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: canopy-sway 7s ease-in-out infinite alternate; }
@keyframes canopy-sway { from { transform: rotate(-1deg); } to { transform: rotate(1.3deg); } }
.shadow { fill: var(--ground-shadow); }

.traveler { cursor: pointer; }
.cloak, .cloak-tail, .hood { fill: var(--cloak); }
.cloak-trim { fill: none; stroke: var(--cloak-trim); stroke-width: 2; }
.bag { fill: var(--bag); }
.strap { fill: none; stroke: var(--bag); stroke-width: 1.6; stroke-linecap: round; }
.staff { fill: none; stroke: var(--staff); stroke-width: 2.4; stroke-linecap: round; }
.hand { fill: var(--cloak-trim); }
.foot { fill: var(--trunk); transform-box: fill-box; transform-origin: center; }
.traveler.is-walking .foot--l { animation: step .42s ease-in-out infinite alternate; }
.traveler.is-walking .foot--r { animation: step .42s ease-in-out infinite alternate-reverse; }
@keyframes step { from { transform: translate(-1px, 0); } to { transform: translate(1.5px, -2.5px); } }
.gem, .gem-halo { fill: var(--gem); transform-box: fill-box; transform-origin: center; }
.gem { filter: url(#f-glow); animation: gem 3.6s ease-in-out infinite; }
.gem-halo { opacity: .25; filter: url(#f-blur); }
@keyframes gem { 50% { opacity: .65; } }
.cloak-tail { transform-box: fill-box; transform-origin: 100% 60%; animation: flutter 5s ease-in-out infinite; }
@keyframes flutter { 50% { transform: scaleX(1.3) skewY(-5deg); } }
.traveler.is-casting .gem { animation: flare 1.4s ease-out; }
.traveler.is-casting .gem-halo { animation: halo 1.8s ease-out; }
@keyframes flare { 30% { transform: scale(2.4); } }
@keyframes halo { 30% { transform: scale(3.2); opacity: .85; } }

.spell-ring {
  fill: none; stroke: var(--gem); stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.spell-ring.is-casting { animation: ripple 2.6s cubic-bezier(.2, .7, .3, 1); }
.spell-ring--late.is-casting { animation-delay: .4s; }
@keyframes ripple { from { transform: scale(.03); opacity: .95; } to { transform: scale(1); opacity: 0; } }
/* flowers (drawn by js/main.js) */
.flower, .sway { transform-box: fill-box; transform-origin: 50% 100%; }
.sway { animation: sway var(--sway-t, 4s) ease-in-out var(--sway-d, 0s) infinite alternate; }
@keyframes sway { from { transform: rotate(-6deg); } to { transform: rotate(5deg); } }
/* stop everything in a scene while it's scrolled away */
.is-paused, .is-paused * { animation-play-state: paused !important; }
.flower--bloom { animation: bloom 1.1s cubic-bezier(.2, .9, .25, 1.25) both; }
@keyframes bloom { from { transform: scale(0); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.flower__stem { fill: none; stroke: var(--stem); stroke-width: .9; }
.flower__leaf { fill: var(--stem); }
.f1 ellipse { fill: var(--flower-1); }
.f2 ellipse { fill: var(--flower-2); }
.f3 ellipse { fill: var(--flower-3); }
.f4 ellipse { fill: var(--flower-4); }
.flower__core { fill: var(--flower-core); }

/* ---------- the world below the hero ---------- */
/* stars & fireflies by night, drifting sunlight by day (js/main.js draws it) */
.ambient { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* a distant landscape at the start of each chapter, fading into mist */
.terrain {
  position: absolute; left: 0; right: 0; top: -100px; height: 160px;
  overflow-x: clip; /* the ridges run past the edges; clip them here rather than on <body>, which breaks scrolling in Firefox */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.terrain svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ridge-far { fill: var(--ridge-far); }
.ridge-near { fill: var(--ridge-near); }
.terrain .ink { fill: var(--terrain-ink); }
.terrain .ink-line { fill: none; stroke: var(--terrain-ink); stroke-width: 1.6; stroke-linecap: round; }
.terrain .lit { fill: #f6c867; opacity: var(--lit-opacity); transition: opacity .9s ease; }
.terrain .chimney-smoke { fill: none; stroke: var(--terrain-ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 40; animation: smoke 5s linear infinite; }
.terrain .waves path { fill: none; stroke: var(--wave); stroke-width: 1.5; stroke-linecap: round; }
.terrain .waves path:nth-child(odd) { animation: tide 9s ease-in-out infinite alternate; }
.terrain .waves path:nth-child(even) { animation: tide 11s ease-in-out infinite alternate-reverse; }
@keyframes tide { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
.terrain .glint { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; opacity: .35; animation: twinkle 3.5s ease-in-out infinite; }
.terrain .boat { animation: sail 110s linear infinite; }
.terrain .rock { transform-box: fill-box; transform-origin: 50% 100%; animation: rock 3.2s ease-in-out infinite alternate; }
@keyframes sail { from { transform: translateX(-120px); } to { transform: translateX(1720px); } }
@keyframes rock { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.terrain .blades { transform-box: fill-box; transform-origin: center; animation: turn 26s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

/* an old map behind the journey: contour lines traced by marching squares */
.topo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, #000 25%, transparent 80%);
}
.topo path { fill: none; stroke: var(--topo); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.topo .major { stroke-width: 1.7; }

/* ---------- sections ---------- */
.section { --section-bg: var(--paper); position: relative; padding: clamp(4.5rem, 10vw, 8rem) 0; }
.section > .container { position: relative; z-index: 1; }
.section__head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); position: relative; }
.section__head h2 { font-size: clamp(2.5rem, 5vw, 3.5rem); margin: .2em 0 .35em; }
.section__lead { max-width: 34em; margin: 1.1rem auto 0; color: var(--ink-soft); font-style: italic; }
.ornament { display: block; width: 180px; margin: 0 auto; color: var(--gold); }
.ornament * { fill: none; stroke: currentColor; stroke-width: 1.2; }
.ornament .solid { fill: currentColor; }

.card {
  position: relative;
  background: var(--card) var(--noise);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px -28px var(--shadow);
  transition: background-color .9s ease, border-color .9s ease, transform .4s ease, box-shadow .4s ease;
}
.card::after {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid var(--line-soft); border-radius: 6px;
  pointer-events: none;
}

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* I. traveler */
.traveler-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.story p { margin: 0 0 1.2em; }
.dropcap::first-letter {
  float: left;
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: 4.4em; line-height: .78;
  padding: .06em .1em 0 0;
  color: var(--gold);
}
.papers { padding: 1.9rem 1.8rem 1.6rem; }
.papers__head { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: 0 0 .7rem; }
.papers__photo {
  width: 84px; height: 105px; object-fit: cover;
  border: 4px solid #f3eee2; border-radius: 3px; /* photo paper, same in day and night */
  box-shadow: 0 8px 16px -10px var(--shadow);
  transform: rotate(-3deg);
  filter: sepia(.1);
  transition: filter .9s ease;
}
[data-theme="dark"] .papers__photo { filter: sepia(.08) brightness(.88); }
.papers__title { margin: 0; text-align: center; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.6rem; }
.papers dl { margin: 0; }
.papers dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.papers dt { color: var(--ink-soft); font-variant: small-caps; letter-spacing: .06em; white-space: nowrap; }
.papers dd { margin: 0; text-align: right; }
.papers__sub { margin: 1.5rem 0 .8rem; text-align: center; font-size: .78rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }

/* facts instead of self-ratings: each number counts up once when the papers come into view */
.marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.marks li { padding: .8rem .7rem; text-align: center; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 8px; transition: background-color .9s ease; }
.marks strong {
  display: block;
  font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 2rem; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.marks span { display: block; margin-top: .35rem; font-size: .86rem; line-height: 1.3; color: var(--ink-soft); }

/* passport stamps for real trips; they thump onto the page one by one */
.visas { display: flex; justify-content: center; margin-top: 1.3rem; padding: 0 .4rem; }
.visa { flex: 0 1 88px; min-width: 0; width: 88px; height: auto; aspect-ratio: 1; overflow: visible; opacity: .85; transform: rotate(var(--r)); }
.visa + .visa { margin-left: -10px; }
.visa * { fill: none; stroke: currentColor; }
.visa text { fill: currentColor; stroke: none; font-family: "EB Garamond", Georgia, serif; text-anchor: middle; }
.visa--a { color: var(--accent); }
.visa--b { color: var(--rose); }
.visa--c { color: var(--gold); }
.visa--d { color: var(--sage); }
.visas__note { margin: .7rem 0 0; text-align: center; font-size: .9rem; font-style: italic; color: var(--ink-soft); }
.js .papers .visa { opacity: 0; }
.js .papers.is-visible .visa { animation: visa-stamp .55s cubic-bezier(.3, 1.5, .5, 1) var(--d) both; }
@keyframes visa-stamp {
  from { opacity: 0; transform: rotate(var(--r)) scale(1.8); }
  to { opacity: .85; transform: rotate(var(--r)) scale(1); }
}
@media (max-width: 820px) { .traveler-grid { grid-template-columns: minmax(0, 1fr); } }

/* II. the traveler's pack: hand-drawn items that move when you hover, tap or first see them */
.defs-only { position: absolute; width: 0; height: 0; overflow: hidden; }
.pack { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.5rem; }
.item { padding: 2rem 1.7rem; text-align: center; }
.item:hover, .item:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 46px -28px var(--shadow); }
.item:focus { outline: none; }
.item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.item h3 { font-size: 1.8rem; margin: .25rem 0 .8rem; }
.item p:last-child { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.item-art { display: block; width: 120px; height: 120px; margin: 0 auto 1.1rem; overflow: visible; color: var(--ink); }
.item-art * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.item-art .thin { stroke-width: 1.3; }
.item-art .art-fill, .item-art .art-paper { fill: var(--paper); }
.item-art .art-soft { fill: var(--ink-soft); }
.item-art .art-rose { fill: var(--rose); }
.item-art .art-brass { fill: var(--brass); }
.item-art .art-wood { fill: var(--wood); }
.item-art .art-iron { fill: var(--iron); }
.item-art .art-glass { fill: var(--glass); }
.item-art .art-glass-warm { fill: var(--glass-warm); }
.item-art .art-wax { fill: var(--wax); }
.item-art .wax-ring { stroke: rgba(255, 225, 215, .55); stroke-width: 1.4; }
.item-art .sand { fill: var(--sand); stroke: none; }
.item-art .sand-stream { stroke: var(--sand); stroke-width: 1.6; opacity: 0; }
.item-art .art-iron-light { fill: var(--glass); }
.item-art .art-ok { fill: var(--sage); stroke: none; }
.item-art .ok-tick { stroke: var(--paper); stroke-width: 2.4; }
.item-art .flame { fill: #ffc65a; stroke: #e08a2c; stroke-width: 1.2; }
.item-art .lantern-glow { fill: url(#g-lantern); stroke: none; opacity: .35; transition: opacity .6s ease; }
.item-art .sparks path { stroke: #f2b041; stroke-width: 2; }

.needle, .sand-top, .sand-bottom, .accepted, .stamp, .wax, .hammer, .sparks, .lantern, .item-art .flame { transform-box: fill-box; }
.needle { transform-origin: center; }
.sand-top, .sand-bottom, .wax, .item-art .flame { transform-origin: 50% 100%; }
/* gears turn about their own axles (set inline); view-box keeps those px in user units */
.gear { transform-box: view-box; }
.accepted { transform-origin: center; opacity: 0; }
.sand-bottom { transform: scaleY(.45); }
.hammer { transform-origin: 94% 50%; transform: rotate(16deg); }
.sparks { opacity: 0; transform-origin: 70% 100%; }
.lantern { transform-origin: 50% 0; }
.item-art .flame { animation: flame-flicker 1.4s ease-in-out infinite alternate; }
@keyframes flame-flicker { 50% { transform: scale(.94, 1.06) skewX(-3deg); } to { transform: scale(1.04, .94) skewX(2deg); } }

.item:is(:hover, :focus, .is-active) .needle { animation: needle 2s cubic-bezier(.3, .6, .3, 1); }
@keyframes needle { 18% { transform: rotate(80deg); } 38% { transform: rotate(-50deg); } 56% { transform: rotate(28deg); } 72% { transform: rotate(-12deg); } 86% { transform: rotate(5deg); } }
.item:is(:hover, :focus, .is-active) .sand-top { animation: sand-drain 2.2s ease-in both; }
.item:is(:hover, :focus, .is-active) .sand-bottom { animation: sand-fill 2.2s ease-in both; }
.item:is(:hover, :focus, .is-active) .sand-stream { animation: sand-stream 2.2s linear both; }
@keyframes sand-drain { from { transform: scaleY(1); } to { transform: scaleY(.08); } }
@keyframes sand-fill { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes sand-stream { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* The gears turn exactly four teeth each (12, 7 and 5 teeth), so they stay meshed throughout
   and end where they started; then the work is Accepted. */
.item:is(:hover, :focus, .is-active) .gear--a { animation: gear-a 2.4s cubic-bezier(.45, 0, .3, 1); }
.item:is(:hover, :focus, .is-active) .gear--b { animation: gear-b 2.4s cubic-bezier(.45, 0, .3, 1); }
.item:is(:hover, :focus, .is-active) .gear--c { animation: gear-c 2.4s cubic-bezier(.45, 0, .3, 1); }
.item:is(:hover, :focus, .is-active) .accepted { animation: accepted 2.4s ease-out both; }
@keyframes gear-a { to { transform: rotate(120deg); } }
@keyframes gear-b { to { transform: rotate(-205.714deg); } }
@keyframes gear-c { to { transform: rotate(-288deg); } }
@keyframes accepted { 0%, 78% { opacity: 0; transform: scale(.4); } 90% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
.item:is(:hover, :focus, .is-active) .stamp { animation: stamp 1.8s cubic-bezier(.5, 0, .3, 1); }
.item:is(:hover, :focus, .is-active) .wax { animation: wax 1.8s ease-out; }
@keyframes stamp { 30%, 46% { transform: translateY(20px); } 80% { transform: translateY(0); } }
@keyframes wax { 28% { transform: scale(1); } 36% { transform: scale(1.14, .86); } 50% { transform: scale(.97, 1.03); } 60% { transform: scale(1); } }
.item:is(:hover, :focus, .is-active) .hammer { animation: hammer 1.6s ease-in-out; }
.item:is(:hover, :focus, .is-active) .sparks { animation: sparks 1.6s ease-out; }
@keyframes hammer {
  0% { transform: rotate(16deg); } 22% { transform: rotate(38deg); } 34% { transform: rotate(-17deg); } 44% { transform: rotate(-6deg); }
  58% { transform: rotate(32deg); } 70% { transform: rotate(-17deg); } 82% { transform: rotate(-6deg); } 100% { transform: rotate(16deg); }
}
@keyframes sparks {
  0%, 33% { opacity: 0; transform: scale(.4); } 36% { opacity: 1; transform: scale(1); } 50% { opacity: 0; transform: scale(1.3); }
  68% { opacity: 0; transform: scale(.4); } 71% { opacity: 1; transform: scale(1); } 86%, 100% { opacity: 0; transform: scale(1.3); }
}
.item:is(:hover, :focus, .is-active) .lantern { animation: lantern-swing 2.4s ease-in-out; }
.item:is(:hover, :focus, .is-active) .lantern-glow { opacity: 1; }
@keyframes lantern-swing { 15% { transform: rotate(9deg); } 38% { transform: rotate(-7deg); } 58% { transform: rotate(4deg); } 76% { transform: rotate(-2deg); } }

.proof {
  display: inline-block; margin-bottom: 1rem; padding: .3em .85em;
  font-size: .9rem; letter-spacing: .02em; text-decoration: none;
  color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .3s ease, background-color .3s ease;
}
.proof:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
/* III. trials */
.trial-feature {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 860px; margin: 0 auto 1.5rem;
  padding: 2.2rem clamp(1.5rem, 4vw, 2.6rem);
}
.laurel { width: 180px; height: 180px; overflow: visible; }
.laurel .globe-fill { fill: var(--paper-2); }
.laurel .globe-line { fill: none; stroke: var(--accent); stroke-width: 1.1; opacity: .7; }
.laurel .globe-rim { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.laurel__stem { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.laurel .leaf { fill: var(--gold); transform-box: fill-box; transform-origin: center; }
.laurel__ribbon { fill: var(--rose); }
.js .trial-feature .leaf { transform: scale(0); }
.js .trial-feature .laurel__stem { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .trial-feature.is-visible .leaf { animation: leaf-grow .7s cubic-bezier(.3, .9, .4, 1.3) var(--d) both; }
.js .trial-feature.is-visible .laurel__stem { animation: stem-draw 1.6s ease-out .1s both; }
@keyframes leaf-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes stem-draw { to { stroke-dashoffset: 0; } }
/* the problem-setter card: a quill finishing the last line of a problem statement */
.trial-feature--setter { margin-bottom: 1.5rem; }
.trial-feature .setter-art { width: 150px; height: 150px; margin: 0 auto; }
.item-art .art-quill { fill: var(--paper-2); }
.item-art .art-ink { fill: var(--ink); stroke: none; }
.item-art .setter-line { stroke-width: 1.3; }
.js .trial-feature--setter .setter-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .trial-feature--setter.is-visible .setter-line { animation: stem-draw 1.4s ease-out .5s both; }
.trial-feature h3 { font-size: clamp(2rem, 4vw, 2.6rem); margin: .3rem 0 .2rem; }
.trial-feature__result { margin: 0 0 .7rem; font-size: 1.2rem; font-style: italic; color: var(--accent); }
.trial-feature p:last-child { margin: 0; color: var(--ink-soft); }
.medals { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.medal { display: flex; align-items: center; gap: 1.1rem; padding: 1.25rem 1.4rem; flex: 0 1 calc((100% - 2.4rem) / 3); }
@media (max-width: 980px) { .medal { flex-basis: calc((100% - 1.2rem) / 2); } }
@media (max-width: 640px) { .medal { flex-basis: 100%; } }
.medal:hover { transform: translateY(-3px); }
.medal h3 { font-size: 1.3rem; margin: .15rem 0 .1rem; }
.medal p:last-child { margin: 0; font-size: .98rem; color: var(--ink-soft); }
.medal-icon { width: 52px; height: 52px; flex: none; }
.medal--gold { --metal: #e2b448; --metal-dark: #a3761a; }
.medal--silver { --metal: #cdd4dc; --metal-dark: #7c8794; }
.medal--bronze { --metal: #d39a6a; --metal-dark: #8c5a33; }
.medal-icon .ribbon-l { fill: var(--accent); }
.medal-icon .ribbon-r { fill: var(--rose); }
.medal-icon .disc { fill: var(--metal); stroke: var(--metal-dark); stroke-width: 1.4; stroke-linejoin: round; }
.medal-icon .mark { fill: none; stroke: var(--metal-dark); stroke-width: 1.3; stroke-linejoin: round; }
.medal-icon .handle { fill: none; stroke: var(--metal-dark); stroke-width: 2.2; stroke-linecap: round; }
@media (max-width: 640px) {
  .trial-feature { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .trial-feature .laurel { width: 160px; height: 160px; margin: 0 auto; }
  .trial-feature .setter-art { width: 130px; height: 130px; }
}

/* IV. journey */
.journey { position: relative; max-width: 940px; margin: 0 auto; padding: 0; list-style: none; }
.journey-wrap { position: relative; }
.journey-road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.road-ahead, .road-walked { fill: none; stroke-linecap: round; stroke-dasharray: 1 9; }
.road-ahead { stroke: var(--line); stroke-width: 2.5; }
.road-walked { stroke: var(--gold); stroke-width: 3.6; }
.road-mask { fill: none; stroke: #fff; stroke-width: 16; }
.walker__glow { fill: var(--gold); opacity: .2; }
.walker__cloak { fill: var(--ink); }
.walker__lamp { fill: var(--gold); }
.walker__body { animation: walker-bob .45s ease-in-out infinite alternate; }
@keyframes walker-bob { to { transform: translateY(-1.5px); } }
.waypoint__marker.is-reached { background: var(--gold); color: var(--section-bg); animation: reached .7s ease; }
@keyframes reached { 45% { scale: 1.22; } }
.waypoint { position: relative; width: 50%; padding: 0 3rem 3rem 0; }
.waypoint:nth-child(even) { margin-left: 50%; padding: 0 0 3rem 3rem; }
.waypoint__marker {
  position: absolute; top: 1.2rem; right: 0; transform: translateX(50%);
  z-index: 1; width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1.5px solid var(--gold); border-radius: 50%;
  background: var(--card); color: var(--gold);
  transition: background-color .9s ease;
}
.waypoint:nth-child(even) .waypoint__marker { right: auto; left: 0; transform: translateX(-50%); }
.waypoint__marker svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.waypoint__card { padding: 1.5rem 1.7rem; }
.waypoint:nth-child(odd) .waypoint__card { text-align: right; }
.waypoint h3 { font-size: 1.65rem; margin: .3rem 0 .1rem; }
.waypoint__role { margin: 0 0 .6rem; color: var(--accent); font-style: italic; }
.waypoint__card p:last-child { margin: 0; color: var(--ink-soft); }
.journey__end { margin: .5rem 0 0; text-align: center; font-family: "Cormorant Garamond", serif; font-size: 1.4rem; font-style: italic; color: var(--ink-soft); }
@media (max-width: 760px) {
  .waypoint, .waypoint:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 2rem 60px; }
  .waypoint__marker, .waypoint:nth-child(even) .waypoint__marker { left: 22px; right: auto; transform: translateX(-50%); }
  .waypoint:nth-child(odd) .waypoint__card { text-align: left; }
}

/* IV. relics */
.relics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.5rem; }
.relic { display: flex; flex-direction: column; padding: 2rem 1.8rem; }
.relic:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -28px var(--shadow); }
.relic__icon { width: 52px; height: 52px; margin-bottom: 1rem; color: var(--accent); }
.relic__icon * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.relic__icon .thin { stroke-width: .8; }
.relic__icon .solid { fill: var(--gold); stroke: none; }
.relic h3 { font-size: 1.65rem; margin: .3rem 0 .6rem; }
.relic > p:not(.eyebrow) { flex: 1; margin: 0; color: var(--ink-soft); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 1.3rem; padding: 0; list-style: none; }
.tags li { padding: .1em .75em; font-size: .85rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; }
/* in the two-column range, a lone last relic spans the row instead of leaving a hole */
@media (min-width: 641px) and (max-width: 949px) {
  .relic:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.relic > p.relic__status { flex: none; margin: 0; font-size: .95rem; font-style: italic; color: var(--accent); }

/* V. journal */
.entries { max-width: 820px; margin: 0 auto; padding: 0; list-style: none; }
.entry { display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; padding: 1.8rem 0; border-bottom: 1px dashed var(--line); }
.entry:first-child { border-top: 1px dashed var(--line); }
.entry time, .entry__when { padding-top: .45rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.entry h3 { font-size: 1.75rem; margin: 0 0 .35rem; }
.entry h3 a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s ease;
}
.entry h3 a:hover { background-size: 100% 1px; }
.entry p { margin: 0; color: var(--ink-soft); }
.entry .entry__meta { margin-top: .4rem; font-size: .92rem; font-style: italic; }
.sample-note { margin: 1.6rem 0 0; text-align: center; font-size: .95rem; font-style: italic; color: var(--ink-soft); }
@media (max-width: 640px) { .entry { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }

/* VI. letters */
.letter { max-width: 680px; margin: 2.5rem auto 0; padding: 3.8rem clamp(1.4rem, 5vw, 3.2rem) 2.6rem; text-align: center; }
.letter p { margin: 0 0 1rem; color: var(--ink-soft); }
.letter .letter__lead { font-family: "Cormorant Garamond", serif; font-size: 1.65rem; font-style: italic; line-height: 1.3; color: var(--ink); }
.letter .letter__elsewhere { margin: 1.3rem 0 0; font-size: .98rem; }
@media (max-width: 480px) { .letter__actions .btn { flex: 1 1 100%; justify-content: center; } } /* stacked buttons, same width */
.letter__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.8rem; }
.seal {
  position: absolute; z-index: 2; top: 0; left: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #c95a62, #8e2a33 72%);
  box-shadow: 0 8px 18px -8px rgba(80, 10, 20, .7), inset 0 -3px 6px rgba(0, 0, 0, .25), inset 0 2px 3px rgba(255, 200, 200, .25);
}
.seal::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid rgba(255, 222, 212, .3); border-radius: 50%; }
.seal__mark {
  font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 2.5rem; line-height: 1;
  color: rgba(255, 222, 212, .75);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 -1px 0 rgba(255, 255, 255, .15);
}
.js .letter .seal { opacity: 0; }
.js .letter.is-visible .seal { animation: seal-stamp .9s cubic-bezier(.3, 1.4, .5, 1) .4s both; }
@keyframes seal-stamp {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-30deg) scale(1.9); }
  60% { opacity: 1; }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}

/* footer */
.footer { position: relative; padding: 3.5rem 16px 4rem; text-align: center; font-size: .95rem; color: var(--ink-soft); }
.footer > :not(.terrain) { position: relative; z-index: 1; }
.campfire { display: block; width: min(360px, 100%); height: auto; margin: 0 auto .8rem; overflow: visible; }
.camp-stars circle { fill: var(--gold); animation: twinkle 4s ease-in-out infinite; }
.camp-stars circle:nth-child(2n) { animation-duration: 5.5s; animation-delay: -2s; }
.camp-ground { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; }
.camp-log { fill: var(--wood); }
.camp-staff { fill: none; stroke: var(--wood); stroke-width: 2.4; stroke-linecap: round; }
.camp-gem { fill: var(--gem); }
.camp-figure path { fill: var(--silhouette); }
.camp-stones ellipse { fill: var(--iron); }
.camp-logs { fill: none; stroke: var(--wood); stroke-width: 5; stroke-linecap: round; }
.campfire .flame { transform-box: fill-box; transform-origin: 50% 100%; }
.flame--outer { fill: #f08a2b; animation: fire-a 1.3s ease-in-out infinite alternate; }
.flame--mid { fill: #ffbf47; animation: fire-b .9s ease-in-out infinite alternate; }
.flame--core { fill: #fff0bf; animation: fire-a .7s ease-in-out infinite alternate-reverse; }
@keyframes fire-a { to { transform: scale(.92, 1.1) skewX(-4deg); } }
@keyframes fire-b { from { transform: scale(1.04, .94) skewX(3deg); } to { transform: scale(.95, 1.08) skewX(-2deg); } }
.fire-glow { animation: glow-pulse 2.6s ease-in-out infinite alternate; }
@keyframes glow-pulse { from { opacity: .7; } to { opacity: 1; } }
.embers circle { fill: #ffcf6b; opacity: 0; animation: ember var(--t) ease-out var(--d) infinite; }
@keyframes ember { 10% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), -58px); } }
.smoke { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; opacity: .25; stroke-dasharray: 10 60; animation: smoke 4s linear infinite; }
@keyframes smoke { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -10; } }
.footer p { margin: .3rem 0; }
.footer .footer__quote { font-family: "Cormorant Garamond", serif; font-size: 1.45rem; font-style: italic; color: var(--ink); }

/* ---------- small & tall screens ---------- */
/* Squarish or portrait: text sits at the top in open sky, the landscape below it. */
@media (max-aspect-ratio: 5/4) {
  .hero { align-items: flex-start; }
  .hero__content { padding: 120px 0 0; }
}
@media (max-width: 640px) {
  body { font-size: 1.09rem; }
  .hero__content { margin-left: 16px; padding-top: 100px; }
  .hero__lead { margin-bottom: 1.5rem; }
  .spell-note { min-height: 3.2em; }
  .papers dl div { flex-direction: column; gap: 0; }
  .papers dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .trial-feature .leaf { transform: none; }
  .js .trial-feature .laurel__stem { stroke-dashoffset: 0; }
  .js .letter .seal { opacity: 1; }
  .js .papers .visa { opacity: .85; }
  .js .trial-feature--setter .setter-line { stroke-dashoffset: 0; }
}