/* Arstid — the about page. Colours, type and paper are the game's own (src/login.css, storybook.css, council.css). */

@property --paint { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
  --night: #0c0a13;
  --night-2: #14141a;
  --violet-deep: #4b3873;
  --violet-mid: #634d94;
  --violet: #9f8bc9;
  --violet-pale: #c0b0de;
  --lavender: #e2d9f2;
  --amber: #efb67c;
  --gold: #e7c97d;
  --cream: #f0e1b4;
  --cream-hi: #fff4dc;
  --mark-ink: #f3e9ce;
  --parchment: #f1e3c4;
  --parchment-deep: #e2cda2;
  --parchment-edge: #c9a978;
  --ink: #4a3326;
  --ink-deep: #2f1f17;
  --ink-soft: #7a5b43;
  --postmark: #b0564a;
  --red: #8a2a22;
  --wine: #5e2130;
  --slate: #1d2226e6;
  --slate-line: #e9e2cf3d;

  --serif: 'Zen Old Mincho', 'Cormorant Garamond', Georgia, serif;
  --fell: 'IM Fell English', Georgia, serif;
  --fellsc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --hand: 'Caveat', 'Kalam', cursive;

  /* Set by main.js from the hour the reader has scrolled to. */
  --sky-top: #0c0a13;
  --sky-bottom: #1a1530;
  --sky-glow: #4b387355;

  --gutter: max(16px, env(safe-area-inset-left));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--night); color: var(--cream);
  font: 17px/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 1px dashed var(--amber); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--violet-deep); color: var(--cream-hi); }

/* ── The sky ─────────────────────────────────────────────────────────────── */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 115%, var(--sky-glow), transparent 70%),
    linear-gradient(var(--sky-top), var(--sky-bottom)); }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.bar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 58px; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px; transition: background .5s ease, box-shadow .5s ease, backdrop-filter .5s ease; }
.bar.is-scrolled { background: #0c0a13b8; backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 1px 0 #4b387366; }
.bar-home { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 20px var(--fellsc); letter-spacing: .14em; color: var(--mark-ink); }
.bar-home img { width: 26px; height: 26px; border-radius: 5px; }
.bar-nav { display: flex; gap: 22px; margin-right: auto; }
.bar-nav a { text-decoration: none; font-size: 13px; letter-spacing: .16em; text-transform: lowercase; color: var(--violet-pale); transition: color .2s; }
.bar-nav a:hover { color: var(--cream-hi); }
.bar-clock { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .16em; color: var(--violet-pale); font-variant-numeric: tabular-nums; }
.bar-sun { width: 10px; height: 10px; border-radius: 50%; background: var(--sun, #c0b0de); box-shadow: 0 0 10px var(--sun, #c0b0de); transition: background .6s, box-shadow .6s; }

/* ── Shared bits ─────────────────────────────────────────────────────────── */
section { position: relative; }
.kicker { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; justify-content: center; gap: 14px; }
.kicker::before, .kicker::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.kicker::after { transform: scaleX(-1); }
.section-head { max-width: 760px; margin: 0 auto 56px; padding: 0 var(--gutter); text-align: center; }
.section-head h2 { margin: 0; font: 400 clamp(32px, 4.6vw, 56px)/1.1 var(--fell); color: var(--cream-hi); text-shadow: 0 2px 30px #000a; text-wrap: balance; }
.section-sub { margin: 18px auto 0; max-width: 620px; color: #e9dcc0cc; font-size: 16.5px; text-wrap: pretty; }
.hand { font-family: var(--hand); font-size: 21px; line-height: 1.2; color: var(--red); }
.hand-kalam, .hand-kalam * { font-family: 'Kalam', cursive; }
.hand-caveat { font-family: 'Caveat', cursive; }
.hand-reenie { font-family: 'Reenie Beanie', cursive; }

/* Parchment with the game's torn edge: the filter tears only the backing, so the words stay sharp. */
.paper { position: relative; isolation: isolate; color: var(--ink); }
.paper::before { content: ''; position: absolute; inset: 0; z-index: -1; filter: url(#torn-edge);
  background:
    radial-gradient(ellipse at 0 100%, #c695a84a, transparent 62%),
    radial-gradient(ellipse at 100% 0, #bc884b3b, transparent 65%),
    repeating-linear-gradient(3deg, #fff9e510 0 2px, #a2754810 3px 4px),
    linear-gradient(#ead6ac, #f3e4c4 45%, #dcc19a);
  box-shadow: 0 24px 60px #000a; }

/* Things arrive as you reach them. */
.reveal { opacity: 0; transform: translateY(26px) rotate(var(--r, 0deg)); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }

/* ── Hero: the storybook ─────────────────────────────────────────────────── */
/* An open book on the night: the attic tipped in as its frontispiece, the title page facing it. Inside a page, lengths
   are in page units (--u: the page is 750 × 1000), so the whole spread scales like one picture. */
.hero { position: relative; overflow: clip; --pencil: #a8382a; }
.hero-stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; display: grid; place-items: center; padding: 64px var(--gutter) 58px; }
.book-frame { position: relative; perspective: 2600px; }
.book { position: relative; display: flex; width: min(1320px, 92vw, (100svh - 140px) * 1.5); aspect-ratio: 3 / 2;
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .9s cubic-bezier(.2,.7,.2,1);
  animation: book-in 1.8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes book-in { from { opacity: 0; translate: 0 46px; rotate: x 16deg; } }

/* The cover: wine leather with one gold rule tooled round it. */
.book::before { content: ''; position: absolute; inset: -1.7% -1.15% -2.6%; z-index: -1; border-radius: 9px 9px 12px 12px;
  background:
    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='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .02  0 0 0 0 .06  0 0 0 -.9 .62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 0 0, #9a5a6a40, transparent 7%), radial-gradient(circle at 100% 0, #9a5a6a40, transparent 7%),
    radial-gradient(circle at 0 100%, #9a5a6a38, transparent 7%), radial-gradient(circle at 100% 100%, #9a5a6a38, transparent 7%),
    radial-gradient(ellipse 60% 50% at 25% 15%, #6a3346aa, transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 95%, #12060cbb, transparent 70%),
    linear-gradient(90deg, #3a1828, #4b2232 47%, #1d0a13 50%, #4b2232 53%, #3a1828);
  box-shadow: inset 0 0 0 7px #44202f, inset 0 0 0 8px #c9a24a66, inset 0 2px 0 9px #ffffff0a; }
/* Candlelight from the upper right, and the room's dark creeping in at the corners. */
.book::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 4px;
  background:
    radial-gradient(ellipse 55% 50% at 78% 6%, #ffd9a02a, transparent 70%),
    radial-gradient(ellipse 75% 95% at 52% 42%, transparent 58%, #2a140a44 100%); }

.page { position: relative; isolation: isolate; flex: 1 1 50%; min-width: 0; aspect-ratio: 3 / 4; container-type: inline-size; --u: calc(100cqw / 750); color: var(--ink); }
.page::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .24  0 0 0 0 .12  0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .28  0 0 0 0 .14  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, transparent 0 3.3%, #7a5a3a0c 3.3% 3.42%),
    repeating-linear-gradient(0deg, transparent 0 2px, #7a5a3a05 2px 3px),
    radial-gradient(circle at 14% 88%, #b0805024 0 3%, transparent 9%),
    radial-gradient(circle at 82% 12%, #b0805018 0 2%, transparent 7%),
    var(--fold),
    linear-gradient(170deg, #f3e6c9, #efdfbd 45%, #e3cda2); }
.page-plate::before { --fold: linear-gradient(90deg, #4a2e1418 0, transparent 5%, transparent 74%, #4a2e1426 88%, #3a20107a 100%);
  border-radius: 6px 1px 1px 6px; box-shadow: inset 0 0 26px #9a6a3a24, -1px 1px 0 #c9b086, -2px 2px 0 #efe0bf, -3px 3px 0 #b99d72, -4px 4px 0 #e8d6b0, -5px 5px 0 #a3875e, -6px 6px 0 #d9c49c; }
.page-title::before { --fold: linear-gradient(270deg, #4a2e1418 0, transparent 5%, transparent 74%, #4a2e1426 88%, #3a20107a 100%);
  border-radius: 1px 6px 6px 1px; box-shadow: inset 0 0 26px #9a6a3a24, 1px 1px 0 #c9b086, 2px 2px 0 #efe0bf, 3px 3px 0 #b99d72, 4px 4px 0 #e8d6b0, 5px 5px 0 #a3875e, 6px 6px 0 #d9c49c; }

/* The plate: the attic still, cropped to the mage, the desk, the round window and the orb lamp (source x 690–1705),
   with its plate mark pressed round it. It sits 24 units right of the pencil's 90, so the notes shift with it. */
.plate { position: absolute; z-index: 1; margin: 0; left: calc(114 * var(--u)); top: calc(190 * var(--u)); width: calc(522 * var(--u)); height: calc(428 * var(--u));
  overflow: hidden; background: #0c0a13; box-shadow: 0 0 0 1px #2f1f17, 0 2px 5px #2f1f1755;
  outline: 1px solid #7a5b4377; outline-offset: calc(11 * var(--u)); }
.plate .attic-room { position: absolute; top: 0; left: -67.98%; width: 189.16%; height: 100%; animation: attic-in 2.6s ease .3s backwards; }
.attic-room img { width: 100%; height: 100%; image-rendering: pixelated; }
@keyframes attic-in { from { opacity: 0; transform: scale(1.05); filter: brightness(.25) sepia(.6); } }
/* The whole plate is a way in: it takes the reader on to the story. */
.plate-link { position: absolute; inset: 0; z-index: 1; cursor: pointer; box-shadow: inset 0 0 0 0 #ffd58a00; transition: box-shadow .4s, background .4s; }
.plate-link:hover { background: #ffd58a12; box-shadow: inset 0 0 0 2px #ffd58a66; }
.plate-link:focus-visible { outline-offset: -4px; }
.glow { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; transform: translate(-50%, -50%); }
.glow-candle { left: 66.3%; top: 55%; width: 26%; aspect-ratio: 1; background: radial-gradient(circle, #ffb46b66, #ff8a3a22 35%, transparent 65%); animation: flicker 3.1s infinite steps(1); }
.glow-lamp { left: 25.6%; top: 31%; width: 15%; aspect-ratio: 1; background: radial-gradient(circle, #ffcf8a55, transparent 62%); animation: flicker 4.3s infinite steps(1) -1.2s; }
.glow-orb { left: 85.9%; top: 44.6%; width: 7%; aspect-ratio: 1; background: radial-gradient(circle, #7ff3ff88, #45c6d633 40%, transparent 70%); animation: orb 4s ease-in-out infinite; }
@keyframes flicker { 0% { opacity: 1; } 12% { opacity: .82; } 19% { opacity: .95; } 33% { opacity: .78; } 41% { opacity: 1; } 58% { opacity: .86; } 70% { opacity: .97; } 84% { opacity: .8; } }
@keyframes orb { 50% { opacity: .55; transform: translate(-50%, -50%) scale(.85); } }
/* The round window's stars, twinkling over the painted ones. */
.attic-stars { position: absolute; left: 60.6%; top: 11.5%; width: 14.6%; aspect-ratio: 1 / 1.05; border-radius: 50%; overflow: hidden; pointer-events: none; }
.attic-stars::before, .attic-stars::after { content: ''; position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%;
  box-shadow: 18px 22px #fff, 42px 12px #e2d9f2, 70px 30px #fff, 90px 18px #c0b0de, 30px 60px #fff, 120px 46px #fff, 60px 84px #e2d9f2, 104px 92px #fff, 140px 70px #c0b0de, 24px 104px #fff, 82px 120px #fff;
  animation: twinkle 2.6s ease-in-out infinite; }
.attic-stars::after { left: 9px; top: 7px; animation-delay: -1.3s; animation-duration: 3.4s; transform: scale(.7); }
@keyframes twinkle { 50% { opacity: .15; } }

/* Somebody's pencil: notes written in, arrows and a ring drawn after them. */
.pencil { position: absolute; inset: 0; z-index: 2; translate: calc(24 * var(--u)) 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pen { fill: none; stroke: var(--pencil); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: pen .8s cubic-bezier(.5,0,.4,1) var(--d) forwards; }
.pen-soft { stroke: #8a6a4e; stroke-width: 1.7; }
@keyframes pen { to { stroke-dashoffset: 0; } }
.pnote { position: absolute; z-index: 2; translate: calc(24 * var(--u)) 0; margin: 0; font: 700 calc(31 * var(--u))/.98 var(--hand); color: var(--pencil); white-space: nowrap;
  clip-path: inset(-20% 100% -20% -5%); animation: write 1.1s cubic-bezier(.45,.05,.55,1) var(--d) forwards; }
.pnote small { font-size: .8em; font-weight: 500; color: #8a4a3a; }
@keyframes write { to { clip-path: inset(-20% -8% -20% -5%); } }
.pnote-window { left: calc(470 * var(--u)); top: calc(94 * var(--u)); rotate: -4deg; }
.pnote-candle { left: calc(468 * var(--u)); top: calc(684 * var(--u)); rotate: 3deg; }
.pnote-you { left: calc(112 * var(--u)); top: calc(680 * var(--u)); rotate: -3deg; text-align: center; }
.plate-caption { position: absolute; left: 0; right: 0; top: calc(852 * var(--u)); margin: 0; text-align: center;
  font: italic calc(24 * var(--u))/1.2 var(--fell); color: var(--ink); }
.plate-caption span { font: calc(20 * var(--u)) var(--fellsc); font-style: normal; letter-spacing: .14em; color: var(--red); margin-right: .35em; }
.folio { position: absolute; left: 0; right: 0; bottom: calc(40 * var(--u)); text-align: center; font: calc(18 * var(--u)) var(--fell); letter-spacing: .12em; color: var(--ink-soft); }

/* The title page. */
.page-title { display: flex; flex-direction: column; align-items: center; text-align: center; }
.title-over { display: flex; align-items: center; gap: calc(18 * var(--u)); margin: calc(80 * var(--u)) 0 auto; font: calc(17 * var(--u)) var(--fellsc); letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft);
  animation: rise 1.2s ease .3s both; }
.title-over::before, .title-over::after { content: ''; width: calc(46 * var(--u)); height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.title-over::after { transform: scaleX(-1); }
.hero-mark { position: relative; width: calc(560 * var(--u)); aspect-ratio: 1; margin: calc(-60 * var(--u)) 0 calc(-94 * var(--u)); }
.fleuron { width: calc(220 * var(--u)); margin-top: calc(8 * var(--u)); fill: none; stroke: var(--ink-soft); stroke-width: 1.4; stroke-linecap: round; animation: rise 1.2s ease 2.2s both; }
.fleuron .fl-fill { fill: var(--red); stroke: none; }
.hero-line { margin: calc(22 * var(--u)) 0 0; max-width: calc(510 * var(--u)); font: italic calc(30 * var(--u))/1.38 var(--fell); color: var(--ink-deep); text-wrap: balance; animation: rise 1.2s ease 2.4s both; }
.hero-doors { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: calc(10 * var(--u)) calc(34 * var(--u)); margin: calc(40 * var(--u)) 0 auto; animation: rise 1.2s ease 2.8s both; }
.prompt { text-decoration: none; font: calc(20 * var(--u)) var(--fellsc); letter-spacing: .2em; color: var(--ink-deep); padding: 4px 0;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.2,.7,.2,1), color .3s; }
.prompt span::before { content: '▸'; display: inline-block; margin-right: .6em; color: var(--red); transition: transform .3s; }
.prompt:hover { color: var(--red); background-size: 100% 1px; }
.prompt:hover span::before { transform: translateX(3px); }
.hero-play { font: italic calc(19 * var(--u)) var(--fell); letter-spacing: .03em; color: var(--wine); text-decoration: none; }
.hero-play:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.imprint { margin: 0 0 calc(84 * var(--u)); font: calc(15 * var(--u))/1.6 var(--fellsc); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft);
  animation: rise 1.2s ease 3s both; }
.imprint::before { content: ''; display: block; width: calc(90 * var(--u)); height: 1px; margin: 0 auto calc(14 * var(--u)); background: currentColor; opacity: .6; }
.imprint b { display: block; font-weight: 400; }
/* The beta stamp, struck a little crooked in red ink. */
.beta-stamp { position: absolute; right: calc(30 * var(--u)); top: calc(26 * var(--u)); width: calc(136 * var(--u)); rotate: 12deg; overflow: visible;
  fill: none; stroke: var(--postmark); mix-blend-mode: multiply; opacity: .88; animation: stamp .45s cubic-bezier(.3,1.5,.5,1) 3.5s both; }
.beta-stamp text, .stamp-star { fill: var(--postmark); stroke: none; }
.stamp-ring { font: 15px var(--fellsc); letter-spacing: 1px; }
.stamp-word { font: 33px var(--fellsc); letter-spacing: 4px; }
@keyframes stamp { from { opacity: 0; scale: 1.5; } 60% { opacity: .95; } }
/* The page curl: the title page's corner lifted, the next page showing under it. It stirs now and then, lifts on hover,
   and turning it takes the reader on to the story. */
.page-turn { position: absolute; right: 0; bottom: 0; z-index: 4; width: max(70px, calc(190 * var(--u))); height: max(56px, calc(150 * var(--u))); }
.page-turn-under, .page-turn-flap { position: absolute; right: 0; bottom: 0; width: calc(64 * var(--u)); height: calc(64 * var(--u));
  transition: width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1); animation: page-stir 7s ease-in-out 5s infinite; }
.page-turn-under { clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-right-radius: 6px; background: linear-gradient(315deg, #c4aa7e, #dcc8a2 60%); }
.page-turn-flap { filter: drop-shadow(-2px -2px 3px #3a201050); }
.page-turn-flap::before { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, #d9c49c 0%, #ebdcba 32%, #fbf3df 47%, #d8c39a 50%); }
.page-turn-note { position: absolute; right: calc(80 * var(--u)); bottom: calc(26 * var(--u)); white-space: nowrap;
  font: 700 max(15px, calc(26 * var(--u)))/1 var(--hand); color: var(--pencil); opacity: .55; rotate: -4deg; transition: opacity .4s, translate .4s; }
.page-turn:hover .page-turn-under, .page-turn:hover .page-turn-flap,
.page-turn:focus-visible .page-turn-under, .page-turn:focus-visible .page-turn-flap { width: calc(116 * var(--u)); height: calc(116 * var(--u)); animation: none; }
.page-turn:hover .page-turn-note, .page-turn:focus-visible .page-turn-note { opacity: 1; translate: calc(-44 * var(--u)) calc(-30 * var(--u)); }
.page-turn:focus-visible { outline-offset: -6px; }
@keyframes page-stir { 0%, 84%, 100% { width: calc(64 * var(--u)); height: calc(64 * var(--u)); } 90% { width: calc(82 * var(--u)); height: calc(82 * var(--u)); } }

/* The ribbon, from the head of the spine. */
.ribbon { position: absolute; z-index: 4; left: 50.7%; top: -1.6%; width: 1.6%; height: 109%; transform-origin: 50% 0;
  background: linear-gradient(90deg, #5a1418, #a3302a 40%, #c0473a 55%, #7a1e22);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 97.6%, 0 100%); animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { rotate: -.5deg; } 50% { rotate: .6deg; } }

/* On paper the mark is printed: ink letters and sword, a red rune ring, gilt stars. */
.book .m-ring { fill: #8a6a4e; }
.book .m-rune { fill: var(--postmark); }
.book .m-letter, .book .m-sword { fill: var(--ink-deep); }
.book .m-stars path, .book .m-guard-star { fill: #b9862e; }
.book .hero-mark::after { mix-blend-mode: normal; background: radial-gradient(circle, #fff6dc99, #e7c97d22 30%, transparent 62%); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* Music: four bars in the header, lying still when it is off. */
.now-playing { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--violet); transition: color .25s, background .25s; }
.now-playing:hover { color: var(--lavender); background: #4b387344; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.eq i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; transform: scaleY(var(--h, .5)); transition: transform .4s; }
.eq i:nth-child(1) { --h: .4; } .eq i:nth-child(2) { --h: .75; } .eq i:nth-child(3) { --h: .55; } .eq i:nth-child(4) { --h: .9; }
.is-playing { color: var(--amber); }
.is-playing .eq i { animation: eq 1.1s ease-in-out infinite; }
.is-playing .eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.is-playing .eq i:nth-child(3) { animation-duration: 1.4s; animation-delay: -.6s; }
.is-playing .eq i:nth-child(4) { animation-duration: .95s; animation-delay: -.15s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* The mark: the ring turns in, the letters are struck one after another, the sword drops into the gap left for it. */
.mark { width: 100%; height: 100%; overflow: visible; }
.m-ring { fill: var(--violet-pale); animation: ring-in 2.2s cubic-bezier(.2,.7,.2,1) both, ring-turn 240s linear 2.2s infinite; transform-box: view-box; }
.m-arc { opacity: 0; animation: fade-in .9s ease forwards; animation-delay: calc(.1s + var(--i) * .05s); }
.m-rune { fill: var(--amber); opacity: 0; animation: fade-in 1s ease forwards, rune-glow 6s ease-in-out infinite; animation-delay: calc(1.3s + var(--i) * .08s), calc(3s + var(--i) * .4s); }
.m-stars path { fill: var(--gold); opacity: 0; transform-box: view-box; animation: star-in .7s ease forwards, star-twinkle 4.5s ease-in-out infinite; animation-delay: calc(1.95s + var(--i) * .06s), calc(3s + var(--i) * .7s); }
.m-letter { transform-box: fill-box; fill: var(--mark-ink); opacity: 0; transform: translateY(26px) scale(.96); animation: strike .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.45s + var(--i) * .12s); }
.m-sword { fill: var(--mark-ink); transform: translateY(-120%); opacity: 0; animation: sword-drop .55s cubic-bezier(.55,0,.9,.4) 1.4s forwards, blade-glow 6s ease-in-out 2.4s infinite; filter: drop-shadow(0 0 0 #e7c97d00); }
.m-guard-star { fill: var(--gold); transform-box: view-box; transform: scale(0); animation: guard-star .8s cubic-bezier(.2,1.6,.4,1) 1.95s forwards; }
.hero-mark::after { content: ''; position: absolute; left: 56.5%; top: 35%; width: 60%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, #fff4d6cc, #e7c97d33 30%, transparent 62%); pointer-events: none; animation: landing 1.1s ease-out 1.95s both; mix-blend-mode: screen; }
@keyframes ring-in { from { opacity: 0; transform: rotate(-38deg) scale(.9); } }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes strike { to { opacity: 1; transform: none; } }
@keyframes sword-drop { 0% { opacity: 0; transform: translateY(-120%); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes guard-star { to { transform: scale(1); } }
@keyframes star-in { to { opacity: 1; } }
@keyframes star-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rune-glow { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes blade-glow { 0%, 80%, 100% { filter: drop-shadow(0 0 0 #e7c97d00); } 88% { filter: drop-shadow(0 0 14px #e7c97dcc); } }
@keyframes landing { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }

/* ── The promise ─────────────────────────────────────────────────────────── */
.promise { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 80px); align-items: center;
  max-width: 1280px; margin: 0 auto; padding: clamp(90px, 14vh, 170px) var(--gutter); }
.promise-page { padding: 44px 46px 34px; --r: -1deg; }
.promise-page .kicker { justify-content: flex-start; color: var(--ink-soft); }
.promise-page .kicker::before { display: none; }
.promise-title { margin: 0 0 18px; font: 400 clamp(28px, 3.2vw, 38px)/1.1 var(--fellsc); letter-spacing: .02em; color: var(--red); }
.promise-text p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.75; color: var(--ink); }
.dropcap::first-letter { float: left; margin: 6px 8px 0 0; font: 3.6em/.72 var(--fellsc); color: #a3332a; }
.promise-last { font: italic 22px var(--fell) !important; color: var(--ink-deep) !important; margin-top: 22px !important; }
.signed { margin: 18px 0 0; text-align: right; font: 22px var(--hand); color: var(--ink-soft); }

.painting { margin: 0; --r: .8deg; }
.painting-frame { position: relative; padding: 12px; background: linear-gradient(135deg, #3a2618, #5c3d26 40%, #2d1c12); box-shadow: inset 0 0 0 2px #8a6236, inset 0 0 0 5px #24170f, 0 30px 70px #000c; }
.painting-frame::after { content: ''; position: absolute; inset: 12px; box-shadow: inset 0 0 40px #0008; pointer-events: none; }
.painting-frame img { width: 100%; aspect-ratio: 1920 / 832; object-fit: cover; }
/* The sketch first, as in the trailer; then the paint comes in over it from a few strokes at once. */
.paint-sketch { filter: grayscale(1) sepia(.55) contrast(1.5) brightness(1.35); background: var(--parchment); }
.paint-colour { position: absolute; inset: 12px; width: calc(100% - 24px) !important; height: calc(100% - 24px);
  -webkit-mask-image: radial-gradient(circle at 34% 58%, #000 calc(var(--paint) - 18%), transparent var(--paint)),
    radial-gradient(ellipse at 74% 36%, #000 calc(var(--paint) - 30%), transparent calc(var(--paint) - 6%)),
    radial-gradient(ellipse at 55% 90%, #000 calc(var(--paint) - 34%), transparent calc(var(--paint) - 14%));
  mask-image: radial-gradient(circle at 34% 58%, #000 calc(var(--paint) - 18%), transparent var(--paint)),
    radial-gradient(ellipse at 74% 36%, #000 calc(var(--paint) - 30%), transparent calc(var(--paint) - 6%)),
    radial-gradient(ellipse at 55% 90%, #000 calc(var(--paint) - 34%), transparent calc(var(--paint) - 14%));
  transition: --paint 3.2s cubic-bezier(.4,.1,.3,1) .5s; }
.painting.is-in .paint-colour { --paint: 170%; }
.painting figcaption { margin-top: 14px; text-align: center; font: italic 15px var(--fell); color: #e9dcc0bb; }

/* ── Trailer ─────────────────────────────────────────────────────────────── */
.trailer { padding: clamp(70px, 12vh, 150px) var(--gutter); }
.screen { position: relative; max-width: 1120px; margin: 0 auto; padding: 14px; border: 1px solid #634d94aa; background: #0c0a13cc; box-shadow: 0 40px 100px #000c, 0 0 0 6px #0c0a1366, 0 0 120px #4b387344; }
.screen-corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--amber); }
.screen-corner.tl { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.screen-corner.tr { top: -7px; right: -7px; border-left: 0; border-bottom: 0; }
.screen-corner.bl { bottom: -7px; left: -7px; border-right: 0; border-top: 0; }
.screen-corner.br { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.video img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6s ease, filter .6s; filter: brightness(.82); }
.video:hover img { transform: scale(1.07); filter: brightness(.95); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: none; border: 0; cursor: pointer;
  color: var(--cream); font: 13px var(--serif); letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 1px 8px #000; }
.video-play svg { width: 84px; height: 84px; overflow: visible; filter: drop-shadow(0 6px 20px #000a); transition: transform .3s cubic-bezier(.2,1.4,.4,1); }
.video-play circle { fill: #4b3873cc; stroke: var(--amber); stroke-width: 1.5; }
.video-play path { fill: var(--cream-hi); }
.video-play svg::after { content: ''; }
.video-play:hover svg { transform: scale(1.1); }
.video-play::before { content: ''; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -58px 0 0 -42px; border-radius: 50%; border: 1px solid var(--amber); animation: ripple 2.6s ease-out infinite; }
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
/* The theater: the trailer at the biggest 16:9 the window holds, so YouTube serves it in full resolution. */
body.is-theater { overflow: hidden; }
.theater { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #07060df5; animation: theater-in .4s ease both; }
.theater-frame { position: relative; width: min(100vw, calc(100vh * 16 / 9)); width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 120px #4b387366; }
.theater-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.theater-close { position: absolute; top: 12px; right: var(--gutter); z-index: 1; padding: 6px 12px; background: #0c0a13cc; border: 1px solid #634d94; border-radius: 2px; cursor: pointer;
  font: 13px var(--serif); letter-spacing: .14em; color: var(--violet-pale); }
.theater-close:hover { color: var(--cream-hi); border-color: var(--amber); }
@keyframes theater-in { from { opacity: 0; } }
.trailer-alt { text-align: center; margin: 26px 0 0; font-size: 13px; letter-spacing: .1em; }
.trailer-alt a { color: var(--violet); text-decoration: none; }
.trailer-alt a:hover { color: var(--lavender); }

/* ── A day in Lanternfall ────────────────────────────────────────────────── */
.day { height: 620vh; }
.day-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* Laid out at 114% and only ever scaled down: Chrome rasterizes a transformed layer at its layout size, so scaling it
   up blurs it until something forces a re-raster (a zoom change). Shrinking a bigger raster stays sharp. */
.day-frames img { position: absolute; left: -7%; top: -7%; width: 114%; height: 114%; max-width: none; object-fit: cover; opacity: 0;
  transform: scale(var(--kb, .95)); transition: opacity 1.4s ease; will-change: opacity, transform; }
.day-frames img.is-on { opacity: 1; }
.day-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #0c0a13e6 0%, #0c0a1388 32%, transparent 60%), linear-gradient(#0c0a13aa, transparent 22%, transparent 70%, #0c0a13cc),
    radial-gradient(ellipse at 70% 40%, transparent 50%, #0c0a1388), var(--tint, transparent); mix-blend-mode: normal; }
.day-head { position: absolute; top: clamp(80px, 13vh, 130px); left: clamp(20px, 6vw, 110px); }
.day-head .kicker { justify-content: flex-start; }
.day-head .kicker::before { display: none; }
.day-clock { margin: 0; display: flex; align-items: baseline; gap: 16px; }
.day-clock b { font: 400 clamp(56px, 8vw, 104px)/1 var(--fell); color: var(--cream-hi); font-variant-numeric: tabular-nums; text-shadow: 0 4px 40px #000c; }
.day-clock span { font: italic 22px var(--fell); color: var(--amber); }
.day-note { margin: 8px 0 0; font-size: 14px; letter-spacing: .04em; color: #e9dcc0aa; }
.day-cards { list-style: none; margin: 0; padding: 0; position: absolute; left: clamp(20px, 6vw, 110px); bottom: clamp(60px, 12vh, 120px); width: min(430px, calc(100vw - 40px)); }
.day-card { position: absolute; left: 0; bottom: 0; width: 100%; padding: 22px 26px 18px; color: var(--ink); opacity: 0; transform: translateY(30px) rotate(-1.5deg);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); pointer-events: none; isolation: isolate; }
.day-card::before { content: ''; position: absolute; inset: 0; z-index: -1; filter: url(#torn-edge); background: linear-gradient(#ead6ac, #f3e4c4 45%, #dcc19a); box-shadow: 0 20px 50px #000b; }
.day-card.is-on { opacity: 1; transform: rotate(-.8deg); pointer-events: auto; }
.day-card h3 { margin: 0 0 6px; font: 400 26px var(--fellsc); color: var(--red); }
.day-card p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; }
.day-card .hand { font-size: 20px; }
.day-dial { position: absolute; right: clamp(20px, 5vw, 80px); bottom: clamp(40px, 9vh, 90px); width: 120px; height: 60px; border: 1px solid #f0e1b455; border-bottom: 0; border-radius: 120px 120px 0 0; }
.day-dial::after { content: ''; position: absolute; left: -10px; right: -10px; bottom: 0; height: 1px; background: #f0e1b455; }
.day-dial i { position: absolute; left: 50%; bottom: 0; width: 60px; height: 2px; transform-origin: 0 50%; transform: rotate(var(--dial, -180deg)); }
.day-dial i::after { content: ''; position: absolute; right: -8px; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--sun, var(--amber)); box-shadow: 0 0 18px var(--sun, var(--amber)); }

/* ── Noticeboard ─────────────────────────────────────────────────────────── */
.board { padding: clamp(90px, 14vh, 160px) var(--gutter) clamp(60px, 10vh, 120px); }
.cork { max-width: 1240px; margin: 0 auto; padding: clamp(26px, 4vw, 54px); columns: 3 300px; column-gap: 34px;
  background:
    radial-gradient(circle at 20% 30%, #ffffff0d 0 1px, transparent 2px) 0 0 / 7px 9px,
    radial-gradient(circle at 70% 60%, #0000001f 0 1px, transparent 2px) 0 0 / 5px 6px,
    radial-gradient(ellipse at 50% 0, #c58f5a, transparent 70%),
    linear-gradient(#a7703f, #8c5a31);
  border: 16px solid #4a2f1c; border-image: linear-gradient(135deg, #5c3b22, #3a2414 50%, #5c3b22) 1;
  box-shadow: inset 0 0 60px #2a160a99, 0 40px 90px #000b; }
.note { break-inside: avoid; position: relative; margin: 0 0 34px; padding: 22px 22px 18px; color: var(--ink); font-size: 15px; line-height: 1.55;
  box-shadow: 0 10px 24px #2a160a88, 0 2px 4px #2a160a66; transition: opacity 1s ease, transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.note.is-in:hover { transform: translateY(-6px) rotate(0deg) scale(1.02); box-shadow: 0 22px 40px #2a160a99; z-index: 2; }
.note h3 { margin: 0 0 8px; font: 400 23px/1.15 var(--fell); color: var(--ink-deep); }
.note p { margin: 0 0 8px; }
.note img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin: 6px 0 12px; }
.note-foot { font-size: 14px; color: var(--ink-soft); font-style: italic; }
.note-cat { margin: 0 0 2px !important; font: 13px var(--fellsc); letter-spacing: .3em; text-transform: uppercase; color: var(--red); text-align: center; }
.note-wanted { background: linear-gradient(#ecd9b0, #f4e6c6 50%, #ddc29b); text-align: left; }
.note-wanted h3 { font: 400 30px/1 var(--fellsc); color: var(--red); text-align: center; letter-spacing: .02em; }
.note-wanted img { filter: sepia(.25) contrast(1.05); box-shadow: 0 0 0 1px #9b704a66; }
.note-plain { background: repeating-linear-gradient(#fbf5e4 0 27px, #9fb4c94d 27px 28px); padding-top: 26px; }
.note-plain h3 { font-family: inherit; font-weight: 700; font-size: 26px; color: #273a63; }
.note-plain.hand-caveat { font-size: 21px; line-height: 1.3; }
.note-plain.hand-kalam { font-size: 15.5px; }
.note-vellum { background: linear-gradient(160deg, #f6eedb, #eadbb8); border-left: 3px double #c9a97888; }
.note-vellum p:first-of-type::first-letter { float: left; margin: 3px 5px 0 0; font: 2.4em/.78 var(--fellsc); color: #a3332a; }
.note-slip { background: none; box-shadow: none; isolation: isolate; padding: 26px 24px 22px; }
.note-slip::before { content: ''; position: absolute; inset: 0; z-index: -1; filter: url(#torn-edge); background: linear-gradient(#ead6ac, #f3e4c4 45%, #dcc19a); box-shadow: 0 10px 24px #2a160a88; }
.note-slip h3 { font-size: 36px; color: var(--wine); }
.note-photo { background: #fbf8f0; padding: 12px 12px 18px; }
.note-photo img { margin: 0 0 12px; aspect-ratio: 4 / 3; }
.note-photo h3 { font-size: 30px; color: var(--ink-deep); }
.tick { margin: 0 0 10px; padding: 0; list-style: none; }
.tick li::before { content: '✓ '; color: var(--red); }
.pin { position: absolute; top: 8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), radial-gradient(circle, #c9a24a, #8a6420); box-shadow: 1px 3px 4px #0007; }
.pin-red { background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), radial-gradient(circle, #c2453a, #7d1f18); }
.pin-blue { background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), radial-gradient(circle, #4e6fb0, #243a6d); }
.pin-green { background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), radial-gradient(circle, #5b9a5a, #2b5a2a); }
.tape { position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; transform: rotate(-4deg); z-index: 2;
  background: linear-gradient(#f4ecd2cc, #e8dcb8cc); box-shadow: 0 1px 3px #0003; }
.tape-r { transform: rotate(6deg); left: 70%; }
.stamp { position: absolute; right: 14px; bottom: 12px; padding: 2px 10px; transform: rotate(-11deg); font: 14px var(--fellsc); letter-spacing: .18em; text-transform: uppercase;
  color: #4b3873cc; border: 2px solid #4b3873aa; border-radius: 3px; mix-blend-mode: multiply; }
.stamp-red { color: #8a2a22cc; border-color: #8a2a22aa; }

/* ── The Reach ───────────────────────────────────────────────────────────── */
.reach { padding: clamp(90px, 14vh, 160px) var(--gutter); }
.reach-layout { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 660px) minmax(260px, 1fr); gap: clamp(24px, 4vw, 54px); align-items: start; justify-content: center; }
.map { margin: 0; padding: 16px 16px 10px; --r: -.6deg; }
.map-scroll { position: relative; aspect-ratio: 260 / 372; }
.map-scroll > svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: italic 18px var(--fell); color: var(--ink-soft); }
.map-hint { margin: 8px 4px 0; font: italic 14px var(--fell); color: var(--ink-soft); }

/* Plain ink on the parchment, as the first sketch had it, laid on the game's own lines. */
.map-ink { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.map-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.4,.1,.3,1); }
.map.is-drawn .map-draw { stroke-dashoffset: 0; }
.map-wall { stroke-width: 1.1; }
.map-wall.thin { stroke-width: .45; transition-delay: .1s; }
.map-ridges { fill: none; stroke: var(--ink); stroke-width: .5; opacity: .7; }
.map-river { fill: #3d6b8f2e; stroke: none; }
.map-bank { stroke: #3d6b8f; stroke-width: .7; transition-delay: .15s; }
.map-pond { fill: #3d6b8f2e; stroke: #3d6b8f; stroke-width: .5; }
.map-channel { stroke: #3d6b8f; stroke-width: .5; opacity: .8; transition-delay: .25s; }
.map-rim { stroke-width: .9; transition-delay: .05s; }
.map-hatch { stroke: var(--ink); stroke-width: .35; opacity: .55; }
.map-fall { stroke: #3d6b8f; stroke-width: .45; opacity: .8; }
.map-road { stroke: var(--ink-soft); stroke-width: .8; transition-delay: .3s; }
.map-road.lane { stroke-width: .5; }
.map-field rect { fill: #c9b06a44; stroke: var(--ink-soft); stroke-width: .35; }
.map-field path { stroke: var(--ink-soft); stroke-width: .25; opacity: .7; }
.map-fence { stroke: var(--ink-soft); stroke-width: .35; stroke-dasharray: .8 .6; }
.map-bridge path { stroke: var(--ink); stroke-width: .5; }
.map-bridge .thin { stroke-width: .3; }
.map-trees path { stroke-width: .35; stroke-linejoin: round; }
.map-trees .leaf { fill: #5d7a45aa; stroke: #3f5a2e; }
.map-trees .pine { fill: #46603baa; stroke: #2f4526; }
.map-trees .amber { fill: #d58a3caa; stroke: #8a4f1c; }
.map-houses :is(rect, circle) { fill: #f3e4c4; stroke: var(--ink); stroke-width: .35; }
.map-glyph { fill: #f3e4c4; stroke: var(--ink); stroke-width: .5; stroke-linejoin: round; }
.map-waymark { fill: var(--gold); stroke: #4b3a1c; stroke-width: .35; }
.map-beam { fill: #efb67c33; stroke: var(--amber); stroke-width: .4; transform-box: fill-box; transform-origin: center; animation: beam 2.8s ease-out infinite; }
.map-borders { fill: none; stroke: var(--ink-soft); stroke-width: .45; stroke-dasharray: 1.6 1.3; stroke-linecap: round; }
.map-trees, .map-houses, .map-marks, .map-places, .map-title, .map-subtitle, .map-compass, .map-river-name, .map-edge, .map-field, .map-fence, .map-bridge, .map-borders { opacity: 0; transition: opacity .6s ease .6s; }
.map.is-drawn :is(.map-trees, .map-houses, .map-marks, .map-places, .map-title, .map-subtitle, .map-compass, .map-river-name, .map-edge, .map-field, .map-fence, .map-bridge) { opacity: 1; }
.map.is-drawn .map-borders { opacity: .75; }
.map-place { font: italic 5.4px var(--fell); fill: var(--ink-deep); paint-order: stroke; stroke: #f3e4c4; stroke-width: 1.4px; stroke-linejoin: round; }
.map-place.small { font-size: 4px; }
.map-place.is-on { fill: var(--red); text-decoration: underline; text-decoration-color: #8a2a2266; }
.map-title { font: 12px var(--fellsc); fill: var(--wine); paint-order: stroke; stroke: #f3e4c4; stroke-width: 2px; stroke-linejoin: round; }
.map-subtitle { font: italic 4.2px var(--fell); fill: var(--ink-soft); paint-order: stroke; stroke: #f3e4c4; stroke-width: 1.2px; stroke-linejoin: round; }
.map-compass circle { fill: none; stroke: var(--ink-soft); stroke-width: .4; }
.map-compass path { fill: var(--ink-soft); }
.map-compass text { font: 4px var(--fellsc); fill: var(--ink-soft); text-anchor: middle; }
.map-river-name { font: italic 4.2px var(--fell); fill: #3d6b8f; letter-spacing: .25em; }
.map-edge { font: italic 3.6px var(--fell); fill: var(--ink-soft); }
@keyframes beam { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Regions answer the pointer. */
.map-hit { fill: transparent; stroke: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.map-hit:hover, .map-hit.is-on { fill: #8a2a220d; stroke: var(--red); stroke-width: .45; stroke-dasharray: 1.6 1.2; }
.map-hit:focus-visible { outline: none; stroke: var(--amber); stroke-width: .8; }

.place-card { position: sticky; top: 88px; padding: 30px 30px 26px; --r: 1deg; }
.place-card .pc-view { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 18px; border: 5px solid var(--cream-hi);
  box-shadow: 0 1px 0 #0000001a, 0 6px 16px -8px #3a2a1a99; transform: rotate(-.8deg); background: #2b3a22; }
.place-card .kicker { justify-content: flex-start; color: var(--ink-soft); }
.place-card .kicker::before { display: none; }
.place-card h3 { margin: 0 0 8px; font: 400 32px/1.1 var(--fellsc); color: var(--red); }
.place-card p { margin: 0 0 10px; font-size: 15.5px; }
.place-card .hand { font-size: 19px; color: var(--ink-soft); }

/* ── The invitation ──────────────────────────────────────────────────────── */
.beta { padding: clamp(100px, 16vh, 190px) var(--gutter); display: grid; place-items: center; }
.beta::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(1100px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, #ffb46b2e, #ff8a3a10 35%, transparent 62%); animation: flicker 4s infinite steps(1); }
.letter { max-width: 700px; padding: clamp(34px, 5vw, 60px) clamp(26px, 5vw, 64px) 40px; --r: -.7deg; }
.letter-date { margin: 0 0 6px; text-align: right; font: italic 15px var(--fell); color: var(--ink-soft); }
.letter h2 { margin: 0 0 18px; font: 400 clamp(40px, 6vw, 64px)/1 var(--fellsc); color: var(--wine); letter-spacing: .02em; }
.letter-lead { font-size: 18px; line-height: 1.7; margin: 0 0 20px; }
.letter-lead b { color: var(--red); }
.letter-lead a { color: var(--wine); text-decoration-color: #5e213066; text-underline-offset: 3px; }
.letter-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; }
.letter-list li { padding-left: 26px; position: relative; font-size: 16px; }
.letter-list li::before { content: '✦'; position: absolute; left: 2px; top: 1px; color: var(--postmark); }
.letter-list b { color: var(--ink-deep); }
.letter-doors { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; padding-top: 22px; border-top: 1px dashed #9b704a88; }
.seal-button { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font: 20px var(--fell); color: var(--wine); letter-spacing: .04em; }
.seal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 30%, #d0584e, #8a2a22 55%, #5e1712); box-shadow: inset 0 0 0 5px #00000022, inset 0 2px 3px #ffffff44, 0 6px 14px #5e171288;
  transition: transform .35s cubic-bezier(.2,1.5,.4,1); }
.seal img { width: 34px; height: 34px; border-radius: 6px; mix-blend-mode: luminosity; opacity: .85; filter: contrast(1.2); }
.seal-button:hover .seal { transform: rotate(-12deg) scale(1.08); }
.seal-button:hover span:last-child { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.letter-ps { margin: 0; flex: 1 1 220px; font-size: 19px; color: var(--ink-soft); }
.letter-sign { margin: 26px 0 0; text-align: right; font: 26px var(--hand); color: var(--ink); }
.candle { position: absolute; left: calc(50% - min(350px, 46vw) - 70px); bottom: clamp(100px, 16vh, 190px); width: 22px; height: 110px; border-radius: 3px 3px 2px 2px;
  background: linear-gradient(90deg, #e9dcc0, #fbf3df 45%, #cdbb92); box-shadow: 0 0 40px #ffb46b44; }
.candle::after { content: ''; position: absolute; left: -20px; right: -20px; bottom: -8px; height: 12px; border-radius: 50%; background: linear-gradient(#6b4a2c, #3a2414); }
.flame { position: absolute; left: 50%; top: -34px; width: 14px; height: 30px; margin-left: -7px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #fff8e0, #ffd27a 40%, #ff8a3a 70%, transparent 72%); box-shadow: 0 0 30px 10px #ffb46b55, 0 0 90px 40px #ff8a3a22;
  transform-origin: 50% 100%; animation: flame 2.2s ease-in-out infinite; }
@keyframes flame { 0%, 100% { transform: rotate(-2deg) scaleY(1); } 25% { transform: rotate(3deg) scaleY(1.08); } 50% { transform: rotate(-1deg) scaleY(.94); } 75% { transform: rotate(2deg) scaleY(1.04); } }

/* ── Footer: one slip of paper ─────────────────────────────────────────── */
.foot { padding: clamp(40px, 8vh, 90px) var(--gutter) 48px; display: grid; place-items: center; }
.foot-paper { width: min(640px, 100%); padding: 30px clamp(20px, 5vw, 44px) 24px; text-align: center; rotate: -.5deg; }
.foot-quote { margin: 0 0 14px; font: italic 22px/1.35 var(--fell); color: var(--ink-deep); text-wrap: balance; }
.foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; font: 15px var(--fellsc); letter-spacing: .1em; }
.foot-links a { color: var(--wine); text-decoration: none; }
.foot-links a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.foot-links span { color: var(--postmark); font-size: 11px; align-self: center; }
.foot-small { margin: 0; padding-top: 12px; border-top: 1px dashed #9b704a88; font-size: 12.5px; color: var(--ink-soft); letter-spacing: .03em; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .bar-nav { display: none; }
  .bar-clock { margin-left: auto; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .bar { gap: 14px; }
  .bar-home span { display: none; }
  /* On a phone the book comes apart into two loose leaves: the title page, then the plate. */
  .hero-stage { height: auto; min-height: 0; display: block; place-items: normal; padding: 78px var(--gutter) 96px; }
  .book { width: 100%; aspect-ratio: auto; flex-direction: column; gap: 22px; transform: none; }
  .book::before, .book::after, .ribbon { display: none; }
  .page { flex: none; width: 100%; }
  .page::before { --fold: linear-gradient(transparent, transparent); border-radius: 3px; box-shadow: inset 0 0 22px #9a6a3a24, 2px 2px 0 #c9b086, 4px 4px 0 #a3875e; }
  .page-title { order: -1; rotate: -.6deg; }
  .page-plate { rotate: .8deg; }
  .hero-line { font-size: max(16px, calc(30 * var(--u))); }
  .prompt, .hero-play { font-size: max(15px, calc(20 * var(--u))); }
  .promise { grid-template-columns: 1fr; }
  .promise-page { padding: 32px 24px 26px; }
  .day-head { top: 76px; }
  .day-clock b { font-size: 56px; }
  .day-cards { left: var(--gutter); bottom: 96px; width: calc(100vw - 2 * var(--gutter)); }
  .day-card { padding: 18px 18px 14px; }
  .day-card h3 { font-size: 22px; }
  .day-dial { right: var(--gutter); bottom: 24px; width: 80px; height: 40px; }
  .day-dial i { width: 40px; }
  .cork { columns: 1; padding: 22px 16px; border-width: 10px; }
  .reach-layout { grid-template-columns: 1fr; }
  .map { padding: 8px; }
  /* On a phone the map keeps a readable scale and pans inside its frame, like a real one. */
  .map-scroll { aspect-ratio: auto; height: 72vh; height: 72svh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .map-scroll > svg { width: 620px; height: auto; }
  .map-hint::after { content: ' Drag to look around.'; }
  .place-card { position: static; }
  .candle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: rotate(var(--r, 0deg)); }
  .m-ring { animation: none; }
}