:root {
  --navy: #082d5d;
  --blue: #0f56a1;
  --blue-2: #153e72;
  --green: #59b91d;
  --green-dark: #3d8513;
  --paper: #f4efe4;
  --paper-2: #e8dfcd;
  --ink: #17233a;
  --muted: #66707b;
  --white: #fffdf8;
  --burgundy: #7b2f39;
  --danger: #a33535;
  --line: rgba(23,35,58,.14);
  --shadow: 0 22px 60px rgba(8,45,93,.14);
  --radius: 22px;
  --max: 1180px;
  --font-ui: "Segoe UI Variable", "Aptos", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-label: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-ui);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  z-index: -1;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, .button { touch-action: manipulation; }
img { max-width: 100%; }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; padding: 12px 18px; background: var(--white); border-radius: 10px; }
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,239,228,.93);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(8,45,93,.1);
}
.nav { width: min(var(--max), calc(100% - 36px)); min-height: 94px; margin: auto; display: flex; align-items: center; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 900; text-decoration: none; letter-spacing: -.03em; font-size: 1.22rem; }
.brand img { width: 90px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(8,45,93,.12)); }
.brand span em { color: var(--green-dark); font-style: normal; }
.nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-links a { text-decoration: none; font-weight: 700; font-size: .94rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--blue); }
.menu-button { display: none; margin-left: auto; border: 0; background: transparent; padding: 10px; font-weight: 800; }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,86,161,.22);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-2px); background: var(--navy); box-shadow: 0 14px 30px rgba(15,86,161,.28); }
.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #ffb01f; outline-offset: 3px; }
.button.green { background: var(--green-dark); box-shadow: 0 10px 24px rgba(61,133,19,.2); }
.button.ghost { background: transparent; color: var(--blue); box-shadow: none; border: 1px solid rgba(15,86,161,.3); }
.button.paper { background: var(--white); color: var(--navy); }
.button.small { min-height: 40px; padding: 8px 15px; font-size: .9rem; }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 8vw, 120px) 0 86px;
  background:
    radial-gradient(circle at 86% 24%, rgba(89,185,29,.26), transparent 18%),
    linear-gradient(135deg, #062850 0%, #0c4b91 66%, #0e5aa5 100%);
  color: #fff;
}
.hero::after { content:""; position:absolute; width:520px; height:520px; right:-180px; bottom:-250px; border: 46px dashed rgba(98,193,35,.55); border-radius:50%; transform:rotate(-18deg); }
.hero-grid { position: relative; z-index: 2; width: min(var(--max), calc(100% - 36px)); margin: auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 7vw, 94px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; color: var(--green); }
.eyebrow::before { content: ""; width: 27px; height: 2px; background: currentColor; }
.hero h1, .page-hero h1 { margin: 0; max-width: 790px; font-family: var(--font-display); font-weight: 650; letter-spacing: -.045em; line-height: .98; font-size: clamp(3.4rem, 7.7vw, 7rem); }
.hero .lead { max-width: 640px; margin: 26px 0 30px; font-size: clamp(1.07rem, 1.8vw, 1.3rem); color: rgba(255,255,255,.82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { margin-top: 27px; display:flex; flex-wrap:wrap; gap:18px; font-size:.9rem; color:rgba(255,255,255,.78); }
.hero-proof span::before { content:"✓"; color:var(--green); font-weight:900; margin-right:7px; }
.hero-art { position: relative; min-height: 470px; display: grid; place-items: center; }
.hero-logo { width: min(510px, 98%); height: auto; object-fit: contain; transform: rotate(1.5deg); filter: drop-shadow(0 34px 42px rgba(0,0,0,.35)); }
.stamp { position:absolute; right:-4px; bottom:28px; width:155px; height:155px; border:3px double var(--green); border-radius:50%; display:grid; place-items:center; text-align:center; transform:rotate(-12deg); color:var(--green); font-weight:950; letter-spacing:.06em; text-transform:uppercase; background:rgba(7,42,85,.88); }

.section { padding: 88px 0; }
.section.tight { padding: 52px 0; }
.section.dark { background: var(--navy); color: #fff; }
.section.white { background: rgba(255,253,248,.76); }
.container { width: min(var(--max), calc(100% - 36px)); margin: auto; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:38px; }
.section-head h2, .content h2 { margin:0; font-family:var(--font-display); font-size:clamp(2rem,4vw,3.7rem); line-height:1.05; letter-spacing:-.035em; }
.section-head p { margin:0; max-width:570px; color:var(--muted); }
.dark .section-head p { color:rgba(255,255,255,.7); }
.kicker { color:var(--green-dark); text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:900; }

.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { position:relative; min-height:260px; padding:30px; overflow:hidden; background:var(--white); border:1px solid rgba(8,45,93,.11); border-radius:var(--radius); box-shadow:0 16px 36px rgba(8,45,93,.08); }
.feature-card .num { font-family:Georgia,serif; color:var(--green-dark); font-size:3.2rem; line-height:1; }
.feature-card h3 { margin:28px 0 8px; font-size:1.22rem; }
.feature-card p { color:var(--muted); margin:0; }

.escape-card { display:grid; grid-template-columns:.85fr 1.15fr; overflow:hidden; background:var(--white); border-radius:32px; box-shadow:var(--shadow); }
.escape-visual { min-height:520px; position:relative; padding:42px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(180deg,rgba(12,34,32,.08),rgba(14,34,35,.9)), url('/assets/archive/grote-kerk-hoofdwacht-1945.jpg') 52% center/cover; color:#fff; }
.escape-visual::before { content:"ZWOLLE · APRIL 1945"; position:absolute; top:38px; left:34px; border:2px solid rgba(255,255,255,.7); padding:8px 12px; font-family:monospace; letter-spacing:.14em; transform:rotate(-4deg); }
.escape-visual h3 { margin:0; max-width:440px; font-family:Georgia,serif; font-size:clamp(2.5rem,5vw,4.4rem); line-height:.95; }
.escape-visual p { color:rgba(255,255,255,.82); }
.archive-credit { position:absolute; right:18px; bottom:15px; max-width:70%; font:700 .62rem/1.25 var(--font-label); letter-spacing:.05em; text-align:right; color:rgba(255,255,255,.58); }
.escape-copy { padding:clamp(34px,5vw,68px); display:flex; flex-direction:column; justify-content:center; }
.escape-copy .quote { font-family:Georgia,serif; font-style:italic; font-size:1.32rem; color:var(--burgundy); }
.meta-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; margin:24px 0 32px; }
.meta { padding:15px; border-left:3px solid var(--green); background:#f8f5ed; }
.meta strong { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.price-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.price { font-size:2rem; font-weight:950; color:var(--navy); }
.price small { display:block; font-size:.74rem; color:var(--muted); font-weight:600; }

.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:step; }
.step { position:relative; padding:30px 24px 30px 0; counter-increment:step; }
.step::before { content:counter(step); width:42px; height:42px; display:grid; place-items:center; color:#fff; background:var(--blue); border-radius:50%; font-weight:900; }
.step:not(:last-child)::after { content:""; position:absolute; top:50px; left:52px; width:calc(100% - 66px); border-top:2px dashed rgba(89,185,29,.65); }
.step h3 { margin:20px 0 7px; }
.step p { margin:0; color:var(--muted); }

.page-hero { padding:76px 0 58px; background:linear-gradient(135deg,#082d5d,#135aa3); color:#fff; }
.page-hero h1 { font-size:clamp(2.8rem,6vw,5.5rem); }
.page-hero p { max-width:720px; margin:22px 0 0; color:rgba(255,255,255,.78); font-size:1.15rem; }
.breadcrumbs { margin-bottom:18px; font-size:.88rem; color:rgba(255,255,255,.7); }
.breadcrumbs a { color:#fff; }
.content { max-width:820px; }
.content h2 { margin-top:52px; font-size:2rem; }
.content h3 { margin-top:32px; }
.content p, .content li { color:#465362; }
.content blockquote { margin:28px 0; padding:20px 26px; background:var(--white); border-left:5px solid var(--burgundy); font-family:Georgia,serif; font-size:1.18rem; }

.detail-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:38px; align-items:start; }
.paper-panel { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,42px); box-shadow:0 14px 42px rgba(8,45,93,.08); }
.sticky { position:sticky; top:102px; }
.edition-switch { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:22px 0; }
.edition-switch button { border:1px solid var(--line); background:#f7f3e9; border-radius:15px; padding:14px; font-weight:850; cursor:pointer; }
.edition-switch button.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.info-list { list-style:none; padding:0; margin:0; }
.info-list li { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding:13px 0; }
.info-list span { color:var(--muted); }
.warning { padding:16px 18px; border-radius:14px; background:#f4e8e5; border-left:4px solid var(--burgundy); color:#56232a; }
.notice { padding:16px 18px; border-radius:14px; background:#e8f3df; border-left:4px solid var(--green-dark); color:#244c19; }

.form { display:grid; gap:18px; }
.field { display:grid; gap:7px; }
.field label, fieldset legend { font-weight:800; }
.field input, .field select, .field textarea { width:100%; padding:14px 15px; border:1px solid rgba(23,35,58,.24); border-radius:13px; background:#fff; color:var(--ink); }
.field small { color:var(--muted); }
.check { display:flex; align-items:flex-start; gap:10px; }
.check input { margin-top:5px; width:18px; height:18px; accent-color:var(--blue); }
fieldset { margin:0; padding:0; border:0; }
.segmented { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.segmented label { display:flex; gap:9px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.error { color:var(--danger); font-weight:750; }

.checkout-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start; }
.order-summary { background:var(--navy); color:#fff; }
.order-summary .line { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.order-summary .total { font-size:1.4rem; font-weight:900; }

.success-ticket { position:relative; padding:34px; background:#fffdf8; border:2px dashed #917a56; border-radius:18px; overflow:hidden; }
.success-ticket::before { content:"BETAALD"; position:absolute; right:24px; top:24px; padding:7px 11px; border:3px double var(--green-dark); color:var(--green-dark); font-weight:950; transform:rotate(8deg); }
.secret-code { display:inline-block; padding:12px 15px; background:#ebe5d7; border-radius:9px; font:800 1.02rem ui-monospace,monospace; letter-spacing:.07em; user-select:all; }
.qr { width:190px; height:190px; padding:9px; background:#fff; border:1px solid var(--line); }

.leaderboard-controls { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.leaderboard-controls select { padding:10px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.table-wrap { overflow-x:auto; border-radius:18px; border:1px solid var(--line); background:#fff; }
table { width:100%; border-collapse:collapse; }
th, td { padding:15px 17px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
th { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); background:#f7f3ea; }
tbody tr:hover { background:#faf8f2; }
.rank { font-family:Georgia,serif; font-size:1.35rem; color:var(--blue); }

.game-shell { min-height:100dvh; background:#eef2ed; }
.game-topbar { position:sticky; top:0; z-index:45; min-height:72px; display:flex; align-items:center; gap:14px; padding:11px max(18px,env(safe-area-inset-left)); background:rgba(8,45,93,.96); color:#fff; box-shadow:0 8px 30px rgba(8,45,93,.2); }
.game-topbar .brand img { width:104px; height:52px; filter:drop-shadow(0 5px 10px rgba(0,0,0,.22)); }
.game-progress { flex:1; max-width:520px; height:8px; margin-left:auto; background:rgba(255,255,255,.2); border-radius:99px; overflow:hidden; }
.game-progress span { display:block; height:100%; background:var(--green); border-radius:inherit; transition:width .35s ease; }
.game-score { font-weight:900; white-space:nowrap; }
.game-main { width:min(720px,calc(100% - 28px)); margin:auto; padding:28px 0 calc(110px + env(safe-area-inset-bottom)); }
.game-card { position:relative; background:var(--white); border-radius:28px; padding:clamp(24px,5vw,42px); box-shadow:0 16px 55px rgba(8,45,93,.13); }
.chapter-number { color:var(--green-dark); font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; font-weight:950; }
.game-card h1 { font-family:Georgia,serif; font-size:clamp(2.1rem,8vw,3.6rem); line-height:1.02; margin:10px 0 20px; }
.game-card .story { font-family:Georgia,serif; font-size:1.13rem; line-height:1.72; color:#303c4c; }
.route-card { padding:20px; background:linear-gradient(135deg,#0b427e,#082d5d); color:#fff; border-radius:20px; margin:24px 0; }
.route-card .distance { font-size:2rem; font-weight:950; }
.puzzle { margin-top:28px; padding:24px; border-radius:18px; background:#ebe4d4; border:1px solid #d8ccb4; }
.puzzle h2 { margin-top:0; font-size:1.1rem; text-transform:uppercase; letter-spacing:.05em; }
.feedback { margin:14px 0; padding:13px 15px; border-radius:12px; font-weight:750; }
.feedback.good { background:#dff1d4; color:#265c16; }
.feedback.bad { background:#f5dede; color:#792a2a; }
.inventory { display:flex; gap:8px; overflow-x:auto; padding:8px 0 2px; scrollbar-width:thin; }
.inventory-item { flex:0 0 auto; padding:8px 11px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.83rem; }
.game-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.bottom-action { position:fixed; z-index:44; left:0; right:0; bottom:0; padding:12px max(14px,env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)); background:rgba(255,253,248,.96); border-top:1px solid var(--line); backdrop-filter:blur(16px); display:flex; justify-content:center; gap:10px; }
.bottom-action .button { width:min(680px,100%); }
.offline-bar { background:#7b2f39; color:#fff; text-align:center; padding:8px 14px; font-weight:800; font-size:.85rem; }
.permission-list { display:grid; gap:12px; margin:22px 0; }
.permission { display:grid; grid-template-columns:45px 1fr; gap:14px; align-items:start; padding:15px; border:1px solid var(--line); border-radius:15px; }
.permission i { width:42px; height:42px; display:grid; place-items:center; background:#e6f1dc; border-radius:12px; font-style:normal; font-size:1.25rem; }
.avatar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.avatar-grid label { display:grid; place-items:center; gap:4px; min-height:72px; border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; }
.avatar-grid input { position:absolute; opacity:0; }
.avatar-grid label:has(input:checked) { border:3px solid var(--blue); background:#edf4fb; }
.avatar-icon { font-size:1.5rem; }

.newspaper { padding:28px; background:#e9dfca; border:7px double #2d2a24; color:#1f211f; font-family:Georgia,serif; text-align:center; }
.newspaper .masthead { font-size:clamp(2.2rem,9vw,4.6rem); letter-spacing:-.05em; border-bottom:5px double #2d2a24; }
.newspaper .date { display:flex; justify-content:space-between; font:700 .75rem ui-monospace,monospace; padding:7px 0; border-bottom:1px solid #2d2a24; }
.newspaper h2 { font-size:clamp(2.2rem,8vw,4rem); line-height:.92; margin:24px 0 12px; }
.newspaper .deck { font-style:italic; font-size:1.2rem; }
.newspaper .result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:22px; border-top:1px solid #2d2a24; padding-top:16px; }
.newspaper strong { display:block; font-size:1.5rem; }

.admin-shell { min-height:100vh; background:#edf1f3; }
.admin-layout { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.admin-nav { padding:26px 20px; background:#092c57; color:#fff; }
.admin-nav .brand { margin-bottom:34px; }
.admin-nav .brand img { width:132px; height:74px; }
.admin-nav nav { display:grid; gap:8px; }
.admin-nav button { text-align:left; padding:12px 14px; color:rgba(255,255,255,.78); background:transparent; border:0; border-radius:10px; cursor:pointer; }
.admin-nav button.active,.admin-nav button:hover { background:rgba(255,255,255,.1); color:#fff; }
.admin-main { padding:34px; min-width:0; }
.admin-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
.admin-head h1 { margin:0; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric { padding:20px; background:#fff; border-radius:16px; border:1px solid #dbe1e5; }
.metric span { color:var(--muted); font-size:.84rem; }
.metric strong { display:block; font-size:2rem; color:var(--navy); }
.admin-section { margin-top:25px; padding:24px; background:#fff; border-radius:18px; border:1px solid #dbe1e5; }
.status { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#e9edf1; font-size:.76rem; font-weight:850; }
.status.approved,.status.paid,.status.checked { background:#dff1d6; color:#2f681c; }
.status.beta,.status.review-needed,.status.open { background:#fff0c7; color:#735100; }

.faq { display:grid; gap:11px; }
.faq details { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.faq summary { cursor:pointer; font-weight:850; }
.faq p { color:var(--muted); }
.toast { position:fixed; z-index:200; left:50%; bottom:24px; transform:translate(-50%,130%); max-width:min(520px,calc(100% - 32px)); padding:13px 18px; border-radius:13px; background:var(--ink); color:#fff; box-shadow:var(--shadow); transition:transform .25s ease; }
.toast.show { transform:translate(-50%,0); }
.empty { padding:34px; text-align:center; color:var(--muted); }
.skeleton { height:120px; border-radius:18px; background:linear-gradient(90deg,#e9e4da,#f7f3ea,#e9e4da); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* Escaperbus brandkit */
.brandkit-page { background:linear-gradient(180deg,var(--paper),#fffdf8); }
.brandkit-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:45px; align-items:end; margin-bottom:70px; }
.brandkit-intro h2 { margin:.15em 0 0; font:650 clamp(2.3rem,5vw,4.6rem)/.98 var(--font-display); letter-spacing:-.045em; }
.brandkit-intro > p { margin:0; color:var(--muted); font-size:1.12rem; }
.brandkit-block { padding:45px 0; border-top:1px solid var(--line); }
.swatch-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.swatch { min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; border-radius:18px; box-shadow:0 10px 30px rgba(8,45,93,.08); }
.swatch span { font:700 .72rem var(--font-label); letter-spacing:.06em; }
.swatch strong { margin-top:6px; font-size:1.03rem; }
.swatch small { margin-top:5px; opacity:.74; }
.swatch.navy { background:#082d5d; color:#fff; }
.swatch.blue { background:#0f56a1; color:#fff; }
.swatch.green { background:#59b91d; color:#102509; }
.swatch.paper { background:#f4efe4; color:#17233a; border:1px solid var(--line); }
.swatch.ink { background:#17233a; color:#fff; }
.type-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.type-grid article { min-height:250px; padding:30px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.type-grid article > span { color:var(--green-dark); font-size:.76rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.type-display { margin:26px 0; font:650 clamp(2.5rem,5vw,4.5rem)/.95 var(--font-display); letter-spacing:-.045em; }
.type-ui { margin:28px 0; font:850 1.15rem/1.6 var(--font-ui); letter-spacing:.08em; }
.type-ui b { font-size:1rem; letter-spacing:0; }
.logo-rules { display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:center; }
.logo-stage { min-height:320px; display:grid; place-items:center; border-radius:24px; }
.logo-stage.dark { background:linear-gradient(145deg,#061f3f,#0f56a1); }
.logo-stage img { width:min(360px,80%); filter:drop-shadow(0 25px 28px rgba(0,0,0,.25)); }
.voice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.voice-grid article { padding:24px; background:#fff; border-left:4px solid var(--green); box-shadow:0 12px 30px rgba(8,45,93,.07); }
.voice-grid strong { color:var(--navy); }
.voice-grid p { font:italic 1.18rem var(--font-display); }
.voice-grid small { color:var(--muted); }
.theme-contract { display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; margin:24px 0 30px; }
.theme-core,.theme-story { display:grid; gap:8px; min-height:150px; padding:26px; border-radius:19px; }
.theme-core { color:#fff; background:var(--navy); }
.theme-story { color:#1d211d; background:#e9dfc7; border:1px solid #c7b891; }
.theme-core span,.theme-story span { opacity:.76; }
.theme-arrow { color:var(--green-dark); font-size:2.2rem; font-weight:900; }

/* Story theme: De Laatste Brief */
.story-theme {
  --story-ink:#1d211d;
  --story-paper:#e9dfc7;
  --story-paper-light:#f3ead6;
  --story-paper-deep:#d4c5a4;
  --story-forest:#273d34;
  --story-bordeaux:#6d2f35;
  --story-brass:#967b4d;
  --story-blueblack:#1b2e3a;
  --story-line:rgba(29,33,29,.2);
  color:var(--story-ink);
  font-family:var(--font-ui);
}
.story-theme h1,.story-theme h2,.story-theme h3 { font-family:var(--font-display); }
.story-cover { position:relative; min-height:78svh; overflow:hidden; display:grid; align-items:end; background:var(--story-blueblack); color:#fff; }
.story-cover-image,.story-cover-wash { position:absolute; inset:0; width:100%; height:100%; }
.story-cover-image { object-fit:cover; object-position:center 58%; filter:grayscale(1) sepia(.18) contrast(1.04); }
.story-cover-wash { background:linear-gradient(90deg,rgba(15,21,19,.95) 0%,rgba(24,31,28,.76) 46%,rgba(24,31,28,.2) 78%),linear-gradient(0deg,rgba(10,15,13,.75),transparent 55%); }
.story-cover-inner { position:relative; z-index:2; min-height:78svh; padding-top:80px; padding-bottom:76px; display:grid; grid-template-columns:1fr 280px; gap:40px; align-items:end; }
.story-cover-copy h1 { margin:0; font-size:clamp(4.8rem,11vw,10rem); line-height:.72; letter-spacing:-.075em; font-weight:600; text-shadow:0 8px 35px rgba(0,0,0,.35); }
.story-overline,.story-folio { margin:0 0 16px; font:800 .7rem/1.35 var(--font-label); letter-spacing:.16em; text-transform:uppercase; }
.story-overline { color:#d9c69a; }
.story-deck { max-width:590px; margin:30px 0; font:italic clamp(1.2rem,2.2vw,1.65rem)/1.35 var(--font-display); color:rgba(255,255,255,.82); }
.story-cover-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.story-button { background:var(--story-bordeaux); box-shadow:0 10px 26px rgba(44,12,16,.32); }
.story-button:hover { background:#4e2026; }
.story-text-link { color:inherit; font-weight:800; text-underline-offset:4px; }
.dossier-label { align-self:center; display:grid; gap:7px; padding:25px; background:rgba(233,223,199,.9); color:var(--story-ink); border:1px solid rgba(255,255,255,.4); box-shadow:0 18px 50px rgba(0,0,0,.28); transform:rotate(2.5deg); }
.dossier-label span { font:800 .75rem var(--font-label); letter-spacing:.15em; }
.dossier-label strong { padding:13px 0; border-block:4px double var(--story-ink); font:700 2.1rem var(--font-display); }
.dossier-label small { line-height:1.3; }
.archive-cover-credit { position:absolute; z-index:3; right:20px; bottom:15px; color:rgba(255,255,255,.65); font:700 .62rem var(--font-label); }
.story-section { position:relative; padding:clamp(75px,10vw,125px) 0; }
.story-paper,.archive-section { background-color:var(--story-paper); background-image:linear-gradient(rgba(255,255,255,.12),rgba(104,85,50,.05)),url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.12'/%3E%3C/svg%3E"); }
.story-book-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:60px; align-items:start; }
.story-opening { max-width:730px; }
.story-opening h2,.story-heading h2,.story-cta h2 { margin:.1em 0 .45em; font-size:clamp(2.8rem,6vw,5.6rem); font-weight:600; line-height:.93; letter-spacing:-.05em; }
.story-opening p:not(.story-folio) { font:1.16rem/1.78 var(--font-display); }
.story-opening .dropcap::first-letter { float:left; margin:.03em .12em 0 0; font:700 5.1rem/.78 var(--font-display); color:var(--story-bordeaux); }
.story-opening blockquote { margin:38px 0 0; padding:24px 30px; border-block:1px solid var(--story-line); font:italic 1.4rem/1.45 var(--font-display); color:var(--story-bordeaux); }
.story-booking { position:sticky; top:112px; padding:34px; background:rgba(245,237,219,.88); border:1px solid var(--story-line); box-shadow:14px 18px 0 rgba(89,72,43,.11); }
.story-booking h2 { margin:0; font-size:2.1rem; }
.story-theme .edition-switch button { border-radius:2px; background:transparent; border-color:var(--story-line); }
.story-theme .edition-switch button.active { background:var(--story-forest); border-color:var(--story-forest); }
.story-theme .info-list li { border-color:var(--story-line); }
.story-theme .price { color:var(--story-ink); }
.story-note { padding:14px; background:rgba(150,123,77,.13); border-left:3px solid var(--story-brass); font-size:.9rem; }
.story-props { position:relative; min-height:clamp(420px,62vw,760px); overflow:hidden; background:var(--story-ink); }
.story-props::before,.story-props::after { content:""; position:absolute; z-index:2; border-radius:50%; background:rgba(21,20,17,.8); pointer-events:none; }
.story-props::before { width:18px; height:14px; right:11%; bottom:20%; box-shadow:20px -8px 0 -4px rgba(21,20,17,.72),-13px 17px 0 -6px rgba(21,20,17,.65); }
.story-props::after { width:8px; height:8px; left:8%; top:16%; box-shadow:14px 7px 0 -2px rgba(21,20,17,.65),-7px 15px 0 -3px rgba(21,20,17,.55); }
.story-props > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:sepia(.08) contrast(1.03) saturate(.82); }
.story-props-overlay { position:absolute; z-index:3; inset:auto clamp(18px,7vw,100px) clamp(24px,7vw,78px) auto; max-width:600px; padding:28px 34px; color:var(--story-paper-light); background:rgba(29,33,29,.88); border:1px solid rgba(233,223,199,.35); box-shadow:15px 18px 0 rgba(29,33,29,.2); }
.story-props-overlay blockquote { margin:8px 0 0; font:italic clamp(1.7rem,3.5vw,3.2rem)/1.08 var(--font-display); }
.story-ink { background:var(--story-ink); color:#f5ecd8; }
.story-heading { max-width:790px; margin-bottom:50px; }
.story-heading > p:not(.story-folio) { max-width:700px; color:inherit; opacity:.7; font-size:1.08rem; }
.character-grid { display:grid; gap:46px; }
.character-card { display:grid; grid-template-columns:minmax(260px,.8fr) 1.2fr; gap:42px; align-items:center; padding:34px; border:1px solid rgba(233,223,199,.18); background:#252924; }
.character-card.reverse { grid-template-columns:1.2fr minmax(260px,.8fr); }
.character-card.reverse figure { order:2; }
.character-card figure { margin:0; position:relative; }
.character-card img { width:100%; aspect-ratio:4/5; object-fit:cover; filter:sepia(.12) contrast(1.02); }
.character-card figcaption { margin-top:9px; color:rgba(255,255,255,.48); font:700 .64rem/1.4 var(--font-label); }
.character-card h3 { margin:.15em 0 .4em; font-size:clamp(2.2rem,4.2vw,4rem); font-weight:600; }
.character-card p { color:rgba(255,255,255,.72); }
.character-card dl { display:grid; gap:0; margin-top:28px; }
.character-card dl div { display:grid; grid-template-columns:80px 1fr; gap:15px; padding:10px 0; border-top:1px solid rgba(255,255,255,.14); }
.character-card dt { color:#cfb988; font:800 .68rem var(--font-label); text-transform:uppercase; letter-spacing:.08em; }
.character-card dd { margin:0; color:rgba(255,255,255,.75); }
.character-disclaimer { margin:28px 0 0; color:rgba(255,255,255,.52); font-size:.82rem; }
.archive-section { background-color:#d9ceb4; }
.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.archive-card { margin:0; padding:13px 13px 20px; background:#f7f0e1; box-shadow:7px 13px 25px rgba(47,39,25,.2); }
.archive-card.tilt-left { transform:rotate(-1.3deg); }
.archive-card.tilt-right { transform:rotate(1.5deg) translateY(16px); }
.archive-card img { width:100%; aspect-ratio:1/1; object-fit:cover; filter:grayscale(1) sepia(.18) contrast(1.06); }
.archive-card figcaption { display:grid; gap:5px; padding:15px 6px 0; }
.archive-card figcaption strong { font:700 1.2rem var(--font-display); }
.archive-card figcaption span,.archive-card figcaption a { color:#5c574a; font-size:.7rem; }
.source-ledger { margin-top:74px; padding:36px; display:grid; grid-template-columns:1.3fr .7fr; gap:38px; border:1px solid var(--story-line); background:rgba(247,240,225,.55); box-shadow:inset 0 0 0 8px rgba(150,123,77,.06); }
.source-ledger h3 { margin:.2em 0; font-size:2.1rem; }
.source-links { display:grid; align-content:center; gap:10px; }
.source-links a { padding:12px 0; border-bottom:1px solid var(--story-line); font-weight:800; }
.film-ledger { margin-top:90px; }
.film-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.film-card { margin:0; padding:11px; background:#171a17; color:#f2ead8; box-shadow:0 14px 30px rgba(47,39,25,.22); }
.film-card.wide { grid-column:1 / -1; }
.film-frame { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#080908; }
.film-frame::before,.film-frame::after { content:""; position:absolute; z-index:2; top:0; bottom:0; width:9px; pointer-events:none; background:repeating-linear-gradient(180deg,#e8dfc7 0 8px,transparent 8px 15px); opacity:.28; }
.film-frame::before { left:6px; }
.film-frame::after { right:6px; }
.film-frame img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) sepia(.12) contrast(1.05); }
.film-card figcaption { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:15px 12px 9px; }
.film-card figcaption span { grid-row:1/3; font:800 .66rem var(--font-label); color:#cbb684; text-transform:uppercase; letter-spacing:.08em; }
.film-card figcaption strong { font-family:var(--font-display); font-size:1.05rem; }
.film-card figcaption small { color:rgba(255,255,255,.58); font-size:.72rem; }
.video-source-list { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:28px; padding:18px 22px; border:1px solid var(--story-line); background:rgba(247,240,225,.55); }
.video-source-list strong { margin-right:auto; font:800 .72rem var(--font-label); text-transform:uppercase; letter-spacing:.08em; }
.video-source-list a { font-weight:800; color:var(--story-bordeaux); }
.film-rights-note { max-width:820px; margin:24px auto 0; color:#5a5447; font-size:.82rem; }
.location-ledger { margin-top:78px; padding:clamp(24px,5vw,46px); display:grid; grid-template-columns:1.25fr .75fr; gap:30px 46px; border:1px solid var(--story-line); background:rgba(247,240,225,.72); box-shadow:inset 0 0 0 8px rgba(150,123,77,.06); }
.location-ledger h2 { margin:.15em 0 .45em; }
.location-ledger-links { display:grid; align-content:start; gap:10px; }
.location-ledger-links a { display:flex; justify-content:space-between; gap:18px; padding:14px 0; color:var(--story-ink); border-bottom:1px solid var(--story-line); text-decoration:none; }
.location-ledger-links span { color:#6d604a; font-size:.78rem; }
.location-ledger .film-rights-note { grid-column:1 / -1; margin:0; padding-top:18px; border-top:1px solid var(--story-line); }
.checkpoint-media { margin:28px 0 22px; }
.checkpoint-media figure { margin:0; padding:10px; background:#171a17; color:#f2ead8; box-shadow:0 12px 28px rgba(47,39,25,.2); }
.checkpoint-media img { width:100%; max-height:460px; object-fit:cover; display:block; filter:grayscale(1) sepia(.08) contrast(1.04); }
.checkpoint-media figcaption { display:grid; gap:4px; padding:13px 10px 8px; }
.checkpoint-media figcaption strong { font-family:var(--font-display); }
.checkpoint-media figcaption span,.checkpoint-media figcaption a { color:rgba(255,255,255,.66); font-size:.76rem; }
.checkpoint-media figcaption a { width:max-content; color:#d9c69a; }
.story-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.story-principles article { padding:28px; border-top:6px solid var(--story-forest); background:rgba(246,238,221,.7); box-shadow:0 12px 30px rgba(65,52,29,.08); }
.story-principles span { font:800 .72rem var(--font-label); color:var(--story-bordeaux); }
.story-principles h3 { margin:28px 0 8px; font-size:1.5rem; }
.story-warning { display:grid; grid-template-columns:180px 1fr; gap:25px; margin-top:50px; padding:26px; border:1px solid rgba(109,47,53,.35); background:rgba(109,47,53,.08); }
.story-warning strong { color:var(--story-bordeaux); text-transform:uppercase; letter-spacing:.08em; }
.story-warning p { margin:0; }
.story-cta { margin-top:70px; padding-top:45px; border-top:5px double var(--story-ink); display:flex; align-items:end; justify-content:space-between; gap:35px; }
.story-cta h2 { margin-bottom:0; font-size:clamp(2.5rem,5vw,4.7rem); }
.puzzle-preview { background:var(--story-ink); color:var(--story-paper-light); }
.puzzle-showcase { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.puzzle-example { padding:18px 22px 26px; border:1px solid rgba(233,223,199,.18); background:#252924; box-shadow:0 18px 38px rgba(0,0,0,.18); }
.puzzle-example h3 { margin:.35em 0 .55em; font:600 1.75rem/1.05 var(--font-display); }
.puzzle-example p:not(.story-folio) { color:rgba(255,255,255,.72); }
.puzzle-example small { display:block; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); color:#cfb988; font:.72rem/1.5 var(--font-label); }
.puzzle-visual { min-height:180px; margin:-2px -6px 24px; display:flex; align-items:center; justify-content:center; background:#e5d8bb; color:var(--story-ink); overflow:hidden; }
.letter-puzzle { gap:4px; transform:rotate(-1deg); }
.letter-puzzle span { width:28px; height:40px; display:grid; place-items:center; font:800 1.2rem var(--font-label); border:1px solid #4a4438; background:#f1e8d4; box-shadow:2px 3px 0 rgba(45,39,29,.14); }
.letter-puzzle span:nth-child(5) { color:transparent; border-style:dashed; background:transparent; box-shadow:none; }
.fold-puzzle { gap:13px; background:linear-gradient(135deg,#eee3cb 49.5%,#b9a77f 50%,#eee3cb 50.5%); }
.fold-puzzle span { font:700 3.3rem var(--font-display); }
.fold-puzzle i { width:34px; border-top:2px dashed #766947; transform:rotate(45deg); }
.rhythm-puzzle { gap:11px; }
.rhythm-puzzle b { width:13px; height:62px; background:var(--story-bordeaux); border-radius:8px; }
.rhythm-puzzle b:nth-child(2),.rhythm-puzzle b:nth-child(5),.rhythm-puzzle b:nth-child(6) { height:26px; background:var(--story-forest); }
.play-promise { margin-top:28px; padding:22px 26px; display:flex; gap:20px; align-items:center; border-left:5px solid var(--story-brass); background:rgba(255,255,255,.06); }
.play-promise strong { white-space:nowrap; color:#cfb988; }
.play-promise span { color:rgba(255,255,255,.72); }
.source-bottom-link { margin-top:45px; padding:22px 0 0; display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--story-line); color:#675f50; }
.source-bottom-link a { font-weight:800; color:var(--story-bordeaux); }
.footer-source-link { margin:12px 0 16px !important; padding:10px 12px; border:1px solid rgba(255,255,255,.22); color:#fff !important; }
.sources-page { background:var(--story-paper); }
.sources-hero { padding:110px 0 90px; color:var(--story-paper-light); background:linear-gradient(120deg,rgba(29,33,29,.98),rgba(39,61,52,.9)),url('/assets/archive/grote-kerk-hoofdwacht-1945.jpg') center/cover; }
.sources-hero .breadcrumbs,.sources-hero .breadcrumbs a { color:rgba(255,255,255,.58); }
.sources-hero h1 { max-width:900px; margin:.12em 0 .28em; font:600 clamp(4rem,9vw,7.8rem)/.82 var(--font-display); letter-spacing:-.065em; }
.sources-hero > .container > p:last-child { max-width:760px; color:rgba(255,255,255,.78); font:1.18rem/1.7 var(--font-display); }
.source-intro-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:start; }
.source-logo { display:block; width:132px; height:132px; object-fit:contain; margin:-10px auto 16px; opacity:.88; }
.source-intro-grid h2 { margin:.2em 0 .45em; font-size:clamp(2.6rem,5vw,4.7rem); }
.source-intro-grid article > p:not(.story-folio) { font:1.08rem/1.7 var(--font-display); }
.source-summary { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--story-line); background:rgba(255,255,255,.28); }
.source-summary span { padding:24px; display:grid; gap:4px; border:1px solid var(--story-line); color:#655c4b; }
.source-summary strong { color:var(--story-bordeaux); font:600 2.8rem var(--font-display); }
.source-foundations { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.source-foundations a { padding:24px; display:grid; gap:7px; border:1px solid var(--story-line); background:rgba(247,240,225,.68); color:var(--story-ink); text-decoration:none; }
.source-foundations a:hover { transform:translateY(-2px); background:#f7f0e1; }
.source-foundations strong { font:600 1.35rem var(--font-display); }
.source-foundations span { color:#655c4b; font-size:.82rem; }
.source-video-links { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.source-video-links a { min-height:120px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; color:var(--story-paper-light); text-decoration:none; background:var(--story-ink); border-top:5px solid var(--story-brass); }
.source-video-links a:hover { transform:translateY(-2px); background:var(--story-forest); }
.source-video-links strong { font:600 1.45rem var(--font-display); }
.source-video-links span { color:rgba(255,255,255,.63); font-size:.75rem; }
.source-register-heading { margin-top:76px; }
.source-group { margin-top:48px; }
.source-group > h3 { margin:0; padding-bottom:14px; display:flex; justify-content:space-between; gap:18px; border-bottom:5px double var(--story-ink); font-size:1.55rem; }
.source-group > h3 span { color:var(--story-bordeaux); font-family:var(--font-label); }
.source-group > p { color:#675f50; }
.source-record { margin:0; border-bottom:1px solid var(--story-line); }
.source-record summary { padding:17px 5px; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; cursor:pointer; list-style:none; }
.source-record summary::-webkit-details-marker { display:none; }
.source-record summary span { display:grid; gap:3px; }
.source-record summary small { color:#756a57; font:700 .66rem var(--font-label); text-transform:uppercase; letter-spacing:.08em; }
.source-record summary strong { font:600 1.12rem var(--font-display); }
.source-status { padding:6px 9px; font:800 .62rem var(--font-label); font-style:normal; text-transform:uppercase; letter-spacing:.05em; border:1px solid currentColor; }
.source-status.verified { color:#2e654f; }
.source-status.probable { color:#8b641d; }
.source-status.unresolved { color:#76584a; }
.source-status.excluded { color:#8b2f37; }
.source-record-body { padding:8px 8px 28px; display:grid; grid-template-columns:1fr; gap:12px 25px; }
.source-record-body img { grid-row:1 / 3; width:180px; height:125px; object-fit:cover; filter:grayscale(1) sepia(.08); }
.source-record-body dl { margin:0; }
.source-record-body dl div { display:grid; grid-template-columns:95px 1fr; gap:14px; padding:7px 0; border-bottom:1px dotted var(--story-line); }
.source-record-body dt { font:800 .66rem var(--font-label); text-transform:uppercase; }
.source-record-body dd { margin:0; color:#544d40; }
.source-record-body > a { width:max-content; color:var(--story-bordeaux); font-weight:800; }
.source-method { margin-top:70px; padding:34px; border:1px solid var(--story-line); background:#e2d6bc; }
.source-method ol { padding-left:1.25em; line-height:1.8; }
.source-method > p { margin-bottom:0; color:#675f50; font-size:.85rem; }
.story-cta.compact h2 { font-size:clamp(2rem,4vw,3.6rem); }
.story-kit-hero { padding:95px 0 72px; background:var(--story-ink); color:var(--story-paper-light); }
.story-kit-hero h1 { margin:0; font-size:clamp(4.2rem,10vw,8rem); font-weight:600; letter-spacing:-.07em; }
.story-kit-hero > .container > p:not(.story-folio) { max-width:650px; font:italic 1.3rem var(--font-display); color:rgba(255,255,255,.7); }
.story-kit-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:45px 0; }
.story-kit-grid > article { padding:32px; border:1px solid var(--story-line); background:rgba(247,240,225,.58); }
.story-swatches { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.story-swatches span { min-height:108px; display:flex; flex-direction:column; justify-content:end; padding:12px; background:var(--c); color:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.13); }
.story-swatches span:nth-child(2) { color:var(--story-ink); }
.story-swatches b { font:.72rem var(--font-label); }
.kit-headline { margin:24px 0; font:600 clamp(2.8rem,5vw,4.6rem)/.92 var(--font-display); letter-spacing:-.045em; }
.kit-body { font:1.12rem/1.7 var(--font-display); }
.story-kit-grid code,.story-cta code { font-family:var(--font-label); }
.character-mini { display:grid; grid-template-columns:210px 210px 1fr; gap:22px; align-items:center; margin:60px 0; padding:26px; background:var(--story-ink); color:var(--story-paper-light); }
.character-mini img { width:100%; aspect-ratio:4/5; object-fit:cover; filter:sepia(.15); }
.character-mini h3 { margin:.2em 0; font-size:2.4rem; }
.character-mini p:not(.story-folio) { color:rgba(255,255,255,.68); }

/* The game inherits the story cover while the global controls stay Escaperbus. */
.game-shell.story-theme { background:var(--story-paper); background-image:linear-gradient(rgba(255,255,255,.12),rgba(104,85,50,.05)),url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.12'/%3E%3C/svg%3E"); }
.game-shell.story-theme .game-topbar { background:rgba(29,33,29,.97); box-shadow:0 8px 30px rgba(29,33,29,.2); }
.game-shell.story-theme .game-progress span { background:var(--story-brass); }
.game-shell.story-theme .game-card { color:var(--story-ink); background:var(--story-paper-light); border:1px solid var(--story-line); border-radius:3px; box-shadow:12px 16px 0 rgba(90,70,38,.11),0 16px 55px rgba(29,33,29,.14); }
.game-shell.story-theme .chapter-number { color:var(--story-bordeaux); font-family:var(--font-label); }
.game-shell.story-theme .game-card .story { color:#383b35; }
.game-shell.story-theme .puzzle { border-radius:2px; background:#dcd0b3; border-color:#bbaa82; }
.game-shell.story-theme .route-card { border-radius:3px; background:linear-gradient(135deg,var(--story-blueblack),var(--story-forest)); }
.game-shell.story-theme .button.green { background:var(--story-bordeaux); box-shadow:0 10px 24px rgba(109,47,53,.2); }
.game-shell.story-theme .button.ghost { color:var(--story-forest); border-color:rgba(39,61,52,.35); }

.site-footer { padding:64px 0 26px; background:#061f3f; color:#fff; }
.site-footer .brand img { width:176px; height:94px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.24)); }
.footer-grid { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:42px; }
.site-footer h3 { font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; color:var(--green); }
.site-footer a { display:block; margin:8px 0; color:rgba(255,255,255,.72); text-decoration:none; }
.site-footer a:hover { color:#fff; }
.footer-bottom { margin-top:45px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:18px; color:rgba(255,255,255,.55); font-size:.84rem; }

@media (max-width: 900px) {
  .nav-links { display:none; position:absolute; inset:78px 0 auto; padding:22px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .menu-button { display:block; }
  .hero-grid,.escape-card,.detail-grid,.checkout-layout { grid-template-columns:1fr; }
  .hero-art { min-height:360px; }
  .hero-logo { width:390px; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .admin-layout { grid-template-columns:1fr; }
  .admin-nav { position:sticky; top:0; z-index:40; padding:14px 20px; display:flex; align-items:center; overflow-x:auto; }
  .admin-nav .brand { margin:0 25px 0 0; }
  .admin-nav nav { display:flex; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .sticky { position:static; }
  .brandkit-intro,.logo-rules,.story-book-grid,.source-ledger,.location-ledger,.source-intro-grid { grid-template-columns:1fr; }
  .swatch-grid { grid-template-columns:repeat(3,1fr); }
  .story-cover-inner { grid-template-columns:1fr; }
  .dossier-label { display:none; }
  .story-booking { position:static; }
  .character-card,.character-card.reverse { grid-template-columns:minmax(220px,.8fr) 1.2fr; }
  .character-card.reverse figure { order:0; }
  .archive-grid,.story-principles,.puzzle-showcase { grid-template-columns:1fr 1fr; }
  .source-video-links { grid-template-columns:1fr 1fr; }
  .puzzle-example:last-child { grid-column:1/-1; }
  .archive-card:nth-child(3) { grid-column:1/-1; max-width:560px; }
  .character-mini { grid-template-columns:1fr 1fr; }
  .character-mini > div { grid-column:1/-1; }
}

@media (max-width: 600px) {
  .nav { width:min(100% - 24px,var(--max)); min-height:82px; }
  .nav-links { top:82px; }
  .hero { padding-top:46px; }
  .hero h1 { font-size:3.35rem; }
  .hero-art { min-height:300px; }
  .brand img { width:72px; height:68px; }
  .hero-logo { width:310px; }
  .stamp { width:110px; height:110px; font-size:.72rem; right:8px; }
  .section { padding:62px 0; }
  .section-head { align-items:start; flex-direction:column; }
  .feature-grid,.steps,.meta-grid,.footer-grid { grid-template-columns:1fr; }
  .step:not(:last-child)::after { display:none; }
  .escape-visual { min-height:410px; }
  .footer-bottom { flex-direction:column; }
  .game-topbar .brand img { width:86px; height:46px; }
  .game-progress { margin-left:0; }
  .game-score { font-size:.85rem; }
  .game-card { border-radius:22px; }
  .puzzle { padding:18px; }
  .avatar-grid { grid-template-columns:repeat(2,1fr); }
  .admin-main { padding:20px 14px; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .admin-head { align-items:flex-start; flex-direction:column; }
  .swatch-grid,.type-grid,.voice-grid,.story-kit-grid,.film-grid { grid-template-columns:1fr; }
  .theme-contract { grid-template-columns:1fr; }
  .theme-arrow { transform:rotate(90deg); justify-self:center; }
  .story-cover { min-height:72svh; }
  .story-cover-inner { min-height:72svh; padding-top:60px; padding-bottom:70px; }
  .story-cover-copy h1 { font-size:4.4rem; line-height:.77; }
  .archive-cover-credit { max-width:80%; text-align:right; }
  .character-card,.character-card.reverse { grid-template-columns:1fr; padding:18px; }
  .character-card.reverse figure { order:0; }
  .archive-grid,.story-principles,.puzzle-showcase,.source-foundations { grid-template-columns:1fr; }
  .source-video-links { grid-template-columns:1fr; }
  .story-props { min-height:520px; }
  .story-props > img { object-position:42% center; }
  .story-props-overlay { inset:auto 18px 20px; padding:22px; }
  .puzzle-example:last-child { grid-column:auto; }
  .play-promise,.source-bottom-link { align-items:flex-start; flex-direction:column; }
  .source-summary { grid-template-columns:1fr 1fr; }
  .source-record summary { grid-template-columns:1fr; }
  .source-status { width:max-content; }
  .source-record-body { grid-template-columns:1fr; }
  .source-record-body img { grid-row:auto; width:100%; height:auto; max-height:320px; }
  .source-record-body dl div { grid-template-columns:1fr; gap:3px; }
  .archive-card,.archive-card.tilt-left,.archive-card.tilt-right { transform:none; }
  .archive-card:nth-child(3) { grid-column:auto; }
  .source-ledger { padding:24px; }
  .story-warning { grid-template-columns:1fr; }
  .story-cta { align-items:flex-start; flex-direction:column; }
  .character-mini { grid-template-columns:1fr 1fr; padding:15px; }
  .film-card figcaption { grid-template-columns:1fr; }
  .film-card figcaption span { grid-row:auto; }
  .film-card.wide { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}

body.dyslexia { font-family: Verdana, Arial, sans-serif; letter-spacing:.025em; word-spacing:.08em; }
body.large-text { font-size:118%; }