/* The castle's visitors' guide, as the King would have it: crimson damask on every wall, gold leaf on every edge,
   titles on crowned cartouches, pictures in baroque gilt frames, velvet curtains over the view, and fireworks. No
   expense spared, and no taste either. Parchment by day, the castle's night blue by night (dark mode). Lettering is
   the game's: Cinzel for signs and titles, Source Sans 3 for reading, Caveat for Sir Roderick's hand. */
@font-face { font-family: Cinzel; src: url(/fonts/Cinzel.ttf) format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(/fonts/SourceSans3.ttf) format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: Caveat; src: url(/fonts/Caveat.ttf) format("truetype"); font-weight: 400 700; font-display: swap; }

:root {
  --paper: #f4e7c8;
  --paper-2: #ead7a8;
  --card: #fbf3df;
  --ink: #2b1a0c;
  --ink-soft: #5b4128;
  --rule: #c69a45;
  --gold: #a87720;
  --gold-bright: #f0c95a;
  --red: #8e1712;
  --crimson: #5e0b0b;
  --night: #0d1122;
  --night-ink: #f6e9c6;
  --shadow: 0 14px 34px rgba(43, 20, 6, 0.35);
  --leaf: url(/assets/media/gilt-goldleaf.webp?v=b938595c06);
  --damask: url(/assets/media/gilt-damask.webp?v=8281604045);
  --velvet: url(/assets/media/gilt-velvet.webp?v=cac8ffdf4d);
  --gilt: linear-gradient(180deg, #fff6c2 0%, #f6d266 22%, #c89534 48%, #fbe28c 64%, #a7741f 82%, #e9c060 100%);
  /* On parchment by day the gilt is deeper, bronze and old gold, so it reads. */
  /* A gold plaque: gold leaf, burnished with a pale wash so the lettering on it reads. */
  --plaque: linear-gradient(180deg, rgba(255, 246, 205, 0.8), rgba(244, 210, 120, 0.55) 55%, rgba(170, 115, 30, 0.4)), var(--leaf) center / 220px, #d9a93e;
  --gilt-deep: linear-gradient(180deg, #d9a234 0%, #9a6512 40%, #c8902a 62%, #6b420a 100%);
  --heading-gilt: var(--gilt-deep);
  --heading-edge: drop-shadow(0 1px 0 rgba(255, 250, 225, 0.9)) drop-shadow(0 2px 3px rgba(60, 30, 5, 0.35));
  --display: Cinzel, "Trajan Pro", Georgia, serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  --hand: Caveat, "Comic Sans MS", cursive;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121731;
    --paper-2: #181e3d;
    --card: #1c2347;
    --ink: #f1e4c2;
    --ink-soft: #c2b28d;
    --rule: #8a6a2c;
    --gold: #f0c95a;
    --red: #d6473b;
    --shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
    --heading-gilt: var(--gilt);
    --heading-edge: drop-shadow(0 1px 0 #3a2106) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 1.075rem/1.6 var(--body);
  /* The walls: crimson damask, darkened a little so the gold on it shows. */
  background: linear-gradient(rgba(40, 4, 4, 0.5), rgba(40, 4, 4, 0.5)), var(--damask) 0 0 / 360px repeat, var(--crimson);
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-underline-offset: 0.18em; }
a:hover { color: var(--gold); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; letter-spacing: 0.03em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.shell { width: min(1200px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(800px, 100% - 32px); }
.narrow-wide { width: min(1040px, 100% - 32px); }
.small { font-size: 0.9rem; }
.dim { opacity: 0.75; }
.centre { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 30; }
.skip:focus { left: 8px; }

/* Gold leaf: the headings, cast in it. */
.band h2, .chapter h2, .section > h2, .eotm h2, .hall h3, .panel h2, .panel h3, .card h3, .byline h2 {
  background: var(--heading-gilt); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: var(--heading-edge);
}
/* On the night and the damask, always the bright gilt. */
.band.night h2, .band.wall h2 { background-image: var(--gilt); filter: drop-shadow(0 1px 0 #3a2106) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.band.night .sign, .band.wall .sign { color: var(--gold-bright); text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.8); }
.hero .sign { color: var(--gold-bright); text-shadow: 0 1px 3px #000, 0 0 12px #000; }
h2.sentence { font-family: var(--body); font-style: italic; font-weight: 700; letter-spacing: 0; max-width: 46ch; font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.35; }

/* A label as the game's signs letter it: the German in gold capitals, the English smaller beneath. */
.sign { font-family: var(--display); color: var(--gold); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.92rem; font-weight: 700; margin: 0 0 0.6em; display: flex; flex-direction: column; gap: 0.1em; }
.sign small { font-family: var(--body); text-transform: none; letter-spacing: 0.04em; font-weight: 600; font-size: 0.82rem; color: var(--ink-soft); }
.centre .sign, .page-head .sign { align-items: center; }
.kicker { font-family: var(--display); color: var(--gold); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 0.25em; font-weight: 700; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 62ch; }
.centre .lede, .page-head .lede { margin-inline: auto; }

/* The filigree flourish under a title. */
.flourish { width: min(460px, 80%); margin: 0.2em auto 1.2em; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4)); pointer-events: none; }
.flourish.left { margin-left: 0; }
.page-head .flourish { width: min(300px, 60%); margin-top: -0.6em; }

/* Buttons: gold leaf plaques, embossed. */
.button { display: inline-block; font-family: var(--display); font-weight: 700; letter-spacing: 0.1em; text-decoration: none; color: #2a1402; background: var(--plaque); border: 2px solid #6e4a12; border-radius: 6px; padding: 0.75em 1.4em; text-shadow: 0 1px 0 rgba(255, 248, 215, 0.9); box-shadow: inset 0 0 0 2px rgba(255, 240, 190, 0.6), inset 0 -6px 12px rgba(110, 60, 10, 0.45), 0 4px 0 #5a3a0c, 0 8px 18px rgba(0, 0, 0, 0.4); transition: transform 0.1s, filter 0.2s; }
.button:hover { color: #3a2106; transform: translateY(-1px); filter: brightness(1.12) saturate(1.1); }
.button:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255, 240, 190, 0.6), 0 1px 0 #5a3a0c; }
.button.ghost { background: rgba(20, 6, 6, 0.65); color: #f6e9c6; text-shadow: none; border-color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(240, 201, 90, 0.5), 0 6px 16px rgba(0, 0, 0, 0.35); }
.button.soon { opacity: 0.65; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.3em 0; }
.hero .actions { justify-content: center; }

/* A framed picture: the baroque gilt frame (the frame as a border, its crown at the top) hung in the middle of a black
   velvet mount, with black all round it, and a plain gold frame round the mount. --f is how thick the gilt frame's sides
   are; the mount's margin of black follows from it, and its plain frame is a 2 px gold line. */
.mount { --f: 30px; display: block; margin: 0; position: relative; background: radial-gradient(ellipse at 50% 45%, #1c120b, #050302 80%); padding: max(14px, calc(var(--f) * 0.8));
  border: 2px solid #d9a93e;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55); }
.mount.small { --f: 18px; }
.mount.big { --f: 40px; }
/* The gilt frame, built as a framer builds one, so it fits any shape of picture without stretching: the four carved
   corners, the crowned crest at the top and the pendant at the foot, and between them lengths of moulding repeated
   whole along each edge (scripts/export-media.mjs cuts them from one frame). Its sides are --f thick, its top 1.79
   times that and its foot 1.36; each piece's size follows (its size in the frame / 286, the sides' width there). */
.gilt { display: block; margin: 0; position: relative; background: #050302;
  padding: calc(var(--f) * 1.787) calc(var(--f) * 0.993) calc(var(--f) * 1.357) var(--f); }
/* The corners and the crests on top; the top and bottom edges between the corners (::before), and the sides between
   them (.sides), so no moulding runs under a corner's open carving. */
.gilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
  background:
    url(/assets/media/frame-tl.webp?v=84bc15664a) left top / calc(var(--f) * 1.958) calc(var(--f) * 2.098) no-repeat,
    url(/assets/media/frame-tr.webp?v=136a3e9ad5) right top / calc(var(--f) * 1.958) calc(var(--f) * 2.098) no-repeat,
    url(/assets/media/frame-bl.webp?v=b9387be597) left bottom / calc(var(--f) * 1.958) calc(var(--f) * 1.818) no-repeat,
    url(/assets/media/frame-br.webp?v=8f7677768c) right bottom / calc(var(--f) * 1.958) calc(var(--f) * 1.818) no-repeat,
    url(/assets/media/frame-crest.webp?v=c60d83389e) center top / calc(var(--f) * 2.238) calc(var(--f) * 1.958) no-repeat,
    url(/assets/media/frame-pendant.webp?v=d384541ff8) center bottom / calc(var(--f) * 2.238) calc(var(--f) * 1.503) no-repeat; }
.gilt::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--f) * 1.958); right: calc(var(--f) * 1.958); pointer-events: none; z-index: 2;
  background:
    url(/assets/media/frame-top.webp?v=c9ee807964) left top / calc(var(--f) * 1.399) calc(var(--f) * 1.787) round no-repeat,
    url(/assets/media/frame-bottom.webp?v=67bd1a649d) left bottom / calc(var(--f) * 1.399) calc(var(--f) * 1.357) round no-repeat; }
.gilt > .sides { position: absolute; left: 0; right: 0; top: calc(var(--f) * 2.098); bottom: calc(var(--f) * 1.818); pointer-events: none; z-index: 2;
  background:
    url(/assets/media/frame-left.webp?v=355e166da9) left top / var(--f) calc(var(--f) * 1.748) no-repeat round,
    url(/assets/media/frame-right.webp?v=e472230a36) right top / calc(var(--f) * 0.993) calc(var(--f) * 1.748) no-repeat round; }
.gilt > img, .gilt > video { width: 100%; }
.pinned { position: relative; }
@media (max-width: 560px) { .mount { --f: 18px; } .mount.big { --f: 24px; } }

/* A gold leaf edge: cards, panels and bands are trimmed with it. */
.leafed { border: 6px solid transparent; border-image: var(--leaf) 60 round; }

/* The header: black lacquer with a gold leaf rail and a velvet fringe beneath. */
.site-head { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, #1a0d08, #0b0604); border-bottom: 8px solid transparent; border-image: var(--leaf) 60 round; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.head-row { display: flex; align-items: center; gap: 18px; min-height: 70px; }
/* The header's mark: the app icon's crest. */
.brand .crest { height: 58px; width: auto; filter: drop-shadow(0 0 10px rgba(255, 200, 90, 0.45)) drop-shadow(0 2px 4px #000); transition: transform 0.2s; }
.brand:hover .crest { transform: rotate(-4deg) scale(1.06); }
.site-nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.site-nav a { font-family: var(--display); font-weight: 700; text-decoration: none; letter-spacing: 0.1em; font-size: 0.86rem; padding: 0.55em 0.75em; border-radius: 3px; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 210, 110, 0.7)); }
.site-nav a[aria-current="page"] { text-decoration: underline 2px #f0c95a; text-underline-offset: 0.45em; }
.menu-toggle { display: none; margin-left: auto; font: 700 0.9rem var(--display); color: #3a2106; background: var(--plaque); text-shadow: 0 1px 0 rgba(255, 248, 215, 0.9); border: 2px solid #6e4a12; border-radius: 4px; padding: 0.45em 0.9em; }
.switch { font: 700 0.8rem var(--body); color: #f6e9c6; background: rgba(240, 201, 90, 0.08); border: 1px solid rgba(240, 201, 90, 0.6); border-radius: 999px; padding: 0.35em 0.85em; cursor: pointer; white-space: nowrap; }
.switch[aria-pressed="true"] { color: #2a1402; background: var(--plaque); }
.switch.waiting b { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
@media (max-width: 1000px) {
  .menu-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #0b0604; flex-direction: column; padding: 10px 16px 18px; border-bottom: 6px solid transparent; border-image: var(--leaf) 60 round; }
  .js .site-nav { display: none; }
  .js .site-nav.open, .site-nav.open { display: flex; }
  html:not(.js) .site-nav { display: flex; position: static; background: none; flex-direction: row; padding: 0; border: 0; }
  html:not(.js) .menu-toggle { display: none; }
  .switch .word { display: none; }
}

/* The hero: the castle in gold under its fireworks (the travel poster on a tall phone), the velvet curtains drawn
   back over it, the heralds' trumpets either side of the logo. */
.hero { position: relative; min-height: min(92vh, 940px); display: grid; align-items: center; justify-items: center; color: #f6e9c6; overflow: hidden; background: var(--night); text-align: center; }
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) saturate(1.1); }
.fireworks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 58%, rgba(13, 8, 20, 0.62), transparent 75%), linear-gradient(180deg, transparent 60%, rgba(13, 8, 20, 0.85) 100%); pointer-events: none; }
.curtains { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; z-index: 2; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)); }
/* The curtains' tassels, hung outside the section so they fall past its gold edge onto what's below, casting a shadow
   there (app.js lays each over its painted twin; without it they stay hidden and the painted ones do). */
.curtained { position: relative; overflow-x: clip; }
.tassels { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.tassels img { position: absolute; display: none; max-width: none; filter: drop-shadow(8px 16px 10px rgba(0, 0, 0, 0.55)); }
.tassels img.hung { display: block; }
.hero-copy { position: relative; z-index: 3; padding: clamp(150px, 21vh, 230px) 0 90px; display: flex; flex-direction: column; align-items: center; }
.hero .sign { align-items: center; }
.hero .sign small { color: #f6e9c6; }
.logo-row { display: flex; align-items: center; justify-content: center; gap: clamp(0px, 1vw, 16px); margin: 0; }
.hero-logo img { width: min(640px, 100%); filter: drop-shadow(0 0 30px rgba(255, 190, 80, 0.55)) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.85)); }
.trumpet { width: clamp(120px, 19vw, 300px); flex: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); cursor: pointer; transition: transform 0.2s; background: none; border: 0; padding: 0; }
.trumpet img { width: 100%; }
.trumpet.left { transform: scaleX(-1); }
.trumpet:hover { transform: rotate(-6deg) scale(1.05); }
.trumpet.left:hover { transform: scaleX(-1) rotate(-6deg) scale(1.05); }
.trumpet.blowing { animation: toot 0.18s 8 alternate; }
.trumpet.left.blowing { animation-name: toot-left; }
@keyframes toot { to { transform: rotate(-9deg) scale(1.08); } }
@keyframes toot-left { to { transform: scaleX(-1) rotate(-9deg) scale(1.08); } }
@media (max-width: 640px) { .trumpet { display: none; } }
.fanfare { margin-top: 0.4em; font: 700 0.85rem var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: #f6e9c6; background: none; border: 0; cursor: pointer; text-decoration: underline dotted rgba(240, 201, 90, 0.8); text-underline-offset: 0.4em; }
.hero-line { font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 700; margin: 0.4em 0 0; text-shadow: 0 2px 12px #000, 0 0 2px #000; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0.6em 0; justify-content: center; }
.chips li a, .chips li.note { display: inline-block; font: 700 0.85rem var(--body); letter-spacing: 0.05em; padding: 0.3em 0.95em; border-radius: 999px; border: 1px solid var(--gold-bright); color: #f6e9c6; text-decoration: none; background: rgba(20, 6, 6, 0.7); }
.chips li.note { border-style: dashed; }
@media (max-width: 560px) { .hero-copy { padding-top: 110px; } .curtains { object-position: 50% 0; } }

/* Bands: the page's rooms, each trimmed in gold leaf top and bottom. */
.band { padding: clamp(60px, 8vw, 104px) 0; position: relative; background: var(--paper); border-block: 10px solid transparent; border-image: var(--leaf) 60 round; }
.band.night { background: radial-gradient(ellipse at 50% 0%, rgba(90, 70, 170, 0.3), transparent 70%), var(--velvet) 0 0 / 320px repeat, var(--night); color: var(--night-ink); }

.band.night .sign small, .band.night .lede { color: #d4c39a; }
.band.wall { background: transparent; color: #f6e9c6; }
.band.wall .sign small, .band.wall .lede { color: #f0dcae; }
.band.wall h2.sentence { color: #fff1c9; background: none; filter: none; text-shadow: 0 2px 8px #000; }
.split-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 760px) { .split-row { grid-template-columns: 1fr; } }

/* The legend, on the intro's four pictures, each in its gilt frame on the damask. */
.panels { list-style: none; padding: 0; margin: 2em 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.panels li { display: flex; flex-direction: column; }
.panels .gilt img { aspect-ratio: 16 / 10; object-fit: cover; }
.panels p { margin: 14px 0 0; padding: 12px 14px; font-style: italic; color: #f6e9c6; background: rgba(18, 4, 4, 0.82); border: 1px solid rgba(240, 201, 90, 0.55); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); }
@media (max-width: 900px) { .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .panels { grid-template-columns: 1fr; } }

/* The trailer. */
.trailer { width: 100%; background: #000; position: relative; display: block; overflow: hidden; }
.trailer-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
/* The play button in the poster's corner, clear of the thumbnail's logo. */
.play-icon { position: absolute; right: 4%; bottom: 6%; width: 92px; height: 92px; border-radius: 50%; background: rgba(20, 6, 6, 0.7); border: 3px solid var(--gold-bright); }
.play-icon::after { content: ""; position: absolute; left: 34px; top: 24px; border-style: solid; border-width: 20px 0 20px 32px; border-color: transparent transparent transparent var(--gold-bright); }
.trailer-label { position: absolute; left: 20px; bottom: 16px; color: #fff; font: 700 1.2rem var(--display); }
.trailer-label small { display: block; font: 400 0.85rem var(--body); }

/* Cards: parchment, edged in gold leaf, a gold rule under the picture. */
.grid { display: grid; gap: 26px; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid.three { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 7px solid transparent; border-image: var(--leaf) 60 round; box-shadow: var(--shadow), inset 0 0 0 2px rgba(168, 119, 32, 0.5); position: relative; }
.card::before, .card::after { content: "❦"; position: absolute; top: -18px; font-size: 1.6rem; color: #f0c95a; text-shadow: 0 2px 3px #000; z-index: 1; }
.card::before { left: -10px; }
.card::after { right: -10px; transform: scaleX(-1); }
.card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-bottom: 4px double var(--gold); }
.card-body { padding: 18px 20px 20px; }
.card-body p:last-child { margin-bottom: 0; }

/* The visitors' book: comment cards pinned to the damask, each askew. */
.reviews { list-style: none; padding: 0; margin: 1.5em 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.review { background: #fffaf0; color: #2b1a0c; padding: 24px 20px 18px; border-radius: 2px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); transform: rotate(var(--tilt)); position: relative; border: 3px double #c69a45; }
.review::before { content: ""; position: absolute; top: -10px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff0a8, #d9a93e 50%, #7a5212); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
.review blockquote { margin: 0.4em 0 0.8em; font: 1.45rem/1.2 var(--hand); }
.review .who { font-size: 0.85rem; font-weight: 700; color: #5b4128; margin: 0; }
.stars { color: #d4a12f; letter-spacing: 0.1em; font-size: 1.2rem; text-shadow: 0 0 6px rgba(240, 190, 60, 0.6); }
@media (max-width: 960px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .reviews { grid-template-columns: 1fr; } }

/* Portraits. */
.portrait { margin: 0; }
.role { font-weight: 700; color: var(--ink-soft); margin-bottom: 0.3em; }
.citation { font: 1.75rem/1.2 var(--hand); color: var(--red); }

/* The poster, in its gilt frame, its lettering printed on the plain band at its foot. */
.poster { margin: 0 auto; transform: rotate(-1.5deg); width: fit-content; max-width: 100%; }
.poster img { max-height: 620px; width: auto; }
.poster figcaption { position: absolute; left: 0; right: 0; bottom: 0; height: 16.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #f0c95a; }
.poster figcaption b { font: 700 clamp(0.85rem, 1.55vw, 1.3rem)/1.1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.poster figcaption span { font: 600 clamp(0.55rem, 0.9vw, 0.75rem) var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: #f6e9c6; margin-top: 0.4em; }

/* Facts: a ledger with gold rules. */
.facts { margin: 0 0 1.2em; display: grid; }
.facts div { display: grid; grid-template-columns: minmax(8em, 40%) 1fr; gap: 12px; border-bottom: 1px solid rgba(198, 154, 69, 0.55); padding: 0.5em 0; }
.facts dt { font-family: var(--display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--gold); }
.facts dd { margin: 0; }
.band.night .facts dt { color: var(--gold-bright); }

/* Inner pages: a parchment room on the damask, its title on the crowned cartouche. */
.page { padding: 56px clamp(18px, 4vw, 56px) 80px; margin-block: 40px 60px; background: var(--paper); border: 10px solid transparent; border-image: var(--leaf) 60 round; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(168, 119, 32, 0.45); }
.page-head { margin: 0 auto 2.4em; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cartouche { width: min(660px, 100%); aspect-ratio: 1536 / 864; background: url(/assets/media/gilt-cartouche.webp?v=5525e58517) center / contain no-repeat; display: grid; place-items: center; padding: 10% 15% 9%; margin: -10px 0 0; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45)); }
.cartouche h1 { margin: 0; font-size: clamp(1rem, 2.6vw, 1.9rem); color: #3e2305; text-shadow: 0 1px 0 rgba(255, 246, 200, 0.85), 0 -1px 0 rgba(90, 50, 5, 0.55); text-align: center; line-height: 1.15; }
.cartouche h1 small { display: block; font-size: 0.5em; letter-spacing: 0.25em; margin-top: 0.4em; color: #6e420c; background: none; filter: none; }
.page-hero { max-height: 54vh; overflow: hidden; background: var(--night); position: relative; border-bottom: 10px solid transparent; border-image: var(--leaf) 60 round; }
.page-hero img { width: 100%; height: 54vh; object-fit: cover; }
.page-hero.tall img { object-position: 50% 12%; }
.page-hero .curtains { z-index: 1; }
.section { margin: 0 0 64px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 7px solid transparent; border-image: var(--leaf) 60 round; padding: 22px 24px; box-shadow: var(--shadow), inset 0 0 0 2px rgba(168, 119, 32, 0.45); }
.panel h2 { font-size: 1.35rem; }
.quote { font-style: italic; color: var(--ink-soft); }
.inset { margin-top: 16px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps .journey { margin: -6px -2px 16px; border: 4px solid transparent; border-image: var(--leaf) 60 round; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
.steps .journey img { width: 100%; aspect-ratio: 500 / 656; object-fit: cover; }
.steps li { counter-increment: step; background: var(--card); border: 7px solid transparent; border-image: var(--leaf) 60 round; padding: 26px 22px 22px; position: relative; box-shadow: var(--shadow); }
.steps li::before { content: counter(step); position: absolute; top: -22px; left: 16px; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e44a3c, #8e1712 60%, #4c0806); color: #f6d47a; font: 700 1.1rem/42px var(--display); text-align: center; border: 2px solid #f0c95a; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* The visitors' map, in its frame, with numbered wax-seal pins. */
.map-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr); gap: 30px; align-items: start; }
@media (max-width: 960px) { .map-row { grid-template-columns: 1fr; } }
.visit-map img { display: block; }
.pin { position: absolute; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e44a3c, #8e1712 60%, #4c0806); color: #f6d47a; border: 2px solid #f0c95a; font: 700 0.85rem/28px var(--display); text-align: center; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.pin:hover, .pin.lit { background: var(--leaf) center / 80px, #f0c95a; color: #3a2106; transform: translate(-50%, -50%) scale(1.2); }
@media (max-width: 560px) { .pin { width: 22px; height: 22px; font-size: 0.7rem; line-height: 18px; } }
.stops { margin: 0; padding-left: 1.8em; display: grid; gap: 0.5em; font-size: 0.98rem; }
.stops li::marker { font-family: var(--display); font-weight: 700; color: var(--red); }
.stops li:target, .stops li.lit { background: rgba(240, 201, 90, 0.25); border-radius: 3px; }

/* The price list. */
.prices { width: 100%; border-collapse: collapse; }
.prices th { text-align: left; font-weight: 400; padding: 0.7em 0; border-bottom: 1px solid rgba(198, 154, 69, 0.55); }
.prices th { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: start; }
.prices th .item { grid-row: span 3; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); background: radial-gradient(circle, rgba(240, 201, 90, 0.25), transparent 70%); border-radius: 50%; }
.prices th b { display: block; font-family: var(--display); }
.prices th small { display: block; }
.prices th em { display: block; color: var(--ink-soft); font-size: 0.9rem; }
.prices td { text-align: right; font-family: var(--display); font-weight: 700; white-space: nowrap; vertical-align: top; padding-top: 0.7em; border-bottom: 1px solid rgba(198, 154, 69, 0.55); }
.coin { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.3em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }

/* The house rules, as a framed notice in its own gilt frame. */
.rules-frame { max-width: 820px; }
.rules { margin: 0; background: var(--card); padding: 30px 34px 30px 58px; display: grid; gap: 0.65em; }
.rules li::marker { font-family: var(--display); font-weight: 700; color: var(--gold); }

/* History. */
.byline { display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: center; max-width: 800px; margin: 0 auto 36px; }
.byline h2 { font-size: 1.35rem; }
.byline p { margin: 0; }
@media (max-width: 560px) { .byline { grid-template-columns: 110px 1fr; } }
.contents ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 0; list-style: none; margin: 0 0 56px; font-family: var(--display); font-weight: 700; }
.contents a::before { content: "❧ "; color: var(--gold); }
.chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(26px, 5vw, 60px); align-items: start; margin-bottom: 80px; scroll-margin-top: 100px; }
.chapter.flip > figure { order: 2; }
.chapter > figure { position: sticky; top: 100px; }
.chapter > .panel, .eotm > .panel { padding: 28px 30px; }
.chapter .facts + p::first-letter { float: left; font: 700 3.6em/0.85 var(--display); margin: 0.06em 0.12em 0 0; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 1px #3a2106); }
@media (max-width: 820px) { .chapter { grid-template-columns: 1fr; } .chapter.flip > figure { order: 0; } .chapter > figure { position: static; } }

/* Sir Roderick's letter: a scroll, rolled at the top and the foot on its turned rods, as long as the letter is (the
   parchment between the rolls repeats), written in his hand in brown ink, his seal pressed on under his name. */
.letter { position: relative; width: min(680px, 100%); margin: 0 auto; color: #3b2410;
  padding: 21% 13% 22%; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.5));
  background: url(/assets/media/scroll-top.webp?v=ec6982fa93) center top / 100% auto no-repeat, url(/assets/media/scroll-bottom.webp?v=6133108535) center bottom / 100% auto no-repeat,
    url(/assets/media/scroll-middle.webp?v=c67973a5e1) center top / 100% auto repeat-y; background-origin: border-box; }
.letter p { font: 1.55rem/1.25 var(--hand); margin: 0 0 0.6em; }
.letter .re { font: 700 1rem/1.3 var(--display); letter-spacing: 0.06em; margin-bottom: 1em; }
.letter .signature { font: 3.2rem/1 var(--hand); margin: 0.5em 0 0.1em; }
.letter .rank { font: 0.85rem var(--display); letter-spacing: 0.1em; }
.seal { position: absolute; right: 12%; bottom: 15%; width: clamp(110px, 24%, 170px); transform: rotate(-10deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
@media (max-width: 560px) { .letter p { font-size: 1.3rem; } .letter .signature { font-size: 2.6rem; } .seal { position: static; margin: 10px auto 0; display: block; } }
.sayings { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.sayings li { border-left: 6px solid transparent; border-image: var(--leaf) 60 round; padding: 4px 0 4px 18px; }
.sayings blockquote { margin: 0; font: 700 1.2rem/1.35 var(--display); }
.sayings p { margin: 0.3em 0 0; color: var(--ink-soft); font-size: 0.92rem; }
@media (max-width: 760px) { .sayings { grid-template-columns: 1fr; } }

/* The staff. */
.eotm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(26px, 5vw, 64px); align-items: center; margin-bottom: 80px; }
@media (max-width: 820px) { .eotm { grid-template-columns: 1fr; } }
.portrait.big { max-width: 480px; position: relative; }
.plaque { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; background: var(--plaque); color: #3a2106; font: 700 0.95rem var(--display); letter-spacing: 0.12em; padding: 0.5em 1.4em; border: 2px solid #6e4a12; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 240, 190, 0.6), 0 6px 12px rgba(0, 0, 0, 0.45); text-shadow: 0 1px 0 rgba(255, 245, 200, 0.7); z-index: 2; }
blockquote.quote { margin: 1em 0; border-left: 6px solid transparent; border-image: var(--leaf) 60 round; padding-left: 16px; font: 700 1.2rem/1.35 var(--display); font-style: normal; color: var(--ink); }
blockquote.quote small { display: block; font: italic 400 1rem var(--body); color: var(--ink-soft); margin-top: 0.2em; }
.hall { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.hall h3 { margin: 0.8em 0 0.2em; }
.hall .sign { font-size: 0.72rem; letter-spacing: 0.12em; }
.hall .citation { font-size: 1.3rem; }
.hall .quote { font-size: 0.95rem; }
@media (max-width: 1000px) { .hall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notice { max-width: 660px; margin: 24px auto 0; text-align: center; background: #fffaf0; color: #2b1a0c; padding: 20px 26px; border: 4px double #c69a45; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); font-size: 0.95rem; }
.notice span { display: block; font: 700 0.85rem var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: #8e1712; margin-bottom: 0.3em; }

/* The game. */
.stores { list-style: none; padding: 0; display: grid; gap: 14px; }
.stores .small { margin: 0.4em 0 0; }
.sum { margin: 0.2em 0 0; font-size: 0.75rem; overflow-wrap: anywhere; color: var(--ink-soft); }
.sum code { font-size: 0.72rem; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shots a { display: block; border: 5px solid transparent; border-image: var(--leaf) 60 round; box-shadow: var(--shadow); cursor: zoom-in; }
.shots a:hover { filter: brightness(1.1); }
@media (max-width: 620px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The lightbox: a screenshot, framed in gilt, over the darkened page. */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1400px, 94vw); width: 100%; overflow: visible; }
.lightbox::backdrop { background: rgba(10, 3, 3, 0.88); }
.lightbox .mount { --f: 34px; }
.lightbox img { width: 100%; height: auto; max-height: 76vh; object-fit: contain; background: #000; }
.lightbox-bar { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; }
.lightbox-bar button { font: 700 0.95rem var(--display); color: #3a2106; background: var(--plaque); text-shadow: 0 1px 0 rgba(255, 248, 215, 0.9); border: 2px solid #6e4a12; border-radius: 4px; padding: 0.5em 1.1em; cursor: pointer; }
.lightbox-bar span { color: #f6e9c6; font: 600 0.9rem var(--body); min-width: 4em; text-align: center; }
@media (max-width: 560px) { .lightbox .mount { --f: 16px; } }

/* Support, credits, privacy, the 404. */
.faq div { border-bottom: 1px solid rgba(198, 154, 69, 0.55); padding: 0.85em 0; }
.faq dt { font-family: var(--display); font-weight: 700; }
.faq dd { margin: 0.2em 0 0; }
.about { text-align: center; margin-bottom: 32px; }
.about img { width: min(440px, 100%); margin: 0 auto 12px; filter: drop-shadow(0 0 18px rgba(255, 190, 80, 0.5)); }
.credits { padding-left: 1.2em; display: grid; gap: 0.5em; }
.prose h2 { font-size: 1.35rem; margin-top: 1.4em; }
.lost { text-align: center; }

/* The footer: on the damask, under a gold leaf rail. */
.site-foot { background: linear-gradient(rgba(12, 3, 3, 0.82), rgba(12, 3, 3, 0.92)), var(--damask) 0 0 / 300px; color: #e6d6ae; padding: 44px 0 52px; border-top: 10px solid transparent; border-image: var(--leaf) 60 round; }
.site-foot a { color: #f0dcae; }
.foot-row { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.studio { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.studio img { width: 76px; height: auto; }
.studio strong { display: block; font-family: var(--display); }
.studio small { color: #c9b88f; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; font-family: var(--display); font-weight: 700; font-size: 0.9rem; }
.site-foot nav a { text-decoration: none; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 700px) { .foot-row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button, .pin, .trumpet { transition: none; animation: none; } .fireworks { display: none; } }

/* (Last, so it wins over each room's, card's and panel's own background.) */
/* By night, the rooms are lined with the same midnight velvet... */
@media (prefers-color-scheme: dark) {
  .band:not(.wall):not(.night), .page { background: linear-gradient(rgba(8, 10, 28, 0.2), rgba(8, 10, 28, 0.2)), var(--velvet) 0 0 / 320px repeat, var(--paper); }
  /* ...and the cards and panels in them are a plain, lighter blue, so their writing reads. */
  .card, .panel, .steps li, .rules { background: #22305e; }
}