:root{
  --navy:#0d1b36; --navy-2:#13264a; --ink:#16203a; --muted:#5d6782; --line:#e3e6ee;
  --paper:#fbfaf7; --card:#ffffff; --gold:#eab308; --gold-d:#b98a05;
  --parch:#f3e9d2; --parch-ink:#4a3418; --parch-line:#d9c49a;
  --true:#1f9d6b; --partly:#d88a12; --unproven:#6b62d6; --busted:#d6453d; --legend:#9a7b3b;
  --serif:"Fraunces",Georgia,serif; --sans:"Jost",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:18px; --wrap:1180px;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#e8ebf3; --muted:#9aa3bb; --line:#26304a; --paper:#0a1224; --card:#111b33;
  --parch:#2a2113; --parch-ink:#f0dfba; --parch-line:#5a4726;
}}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit} img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:0}
.eyebrow,.kicker{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d)}
@media (prefers-color-scheme:dark){.eyebrow,.kicker{color:var(--gold)}}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px max(16px,calc((100vw - var(--wrap))/2));background:color-mix(in srgb,var(--navy) 92%,transparent);
  backdrop-filter:blur(12px);color:#fff}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:600 20px var(--sans)}
.brand img{width:28px;height:28px;filter:brightness(0) invert(1)}
.brand b{font-weight:800;color:var(--gold);letter-spacing:.02em}
.top nav{display:flex;gap:22px;align-items:center;font-size:15px}
.top nav a{text-decoration:none;opacity:.85} .top nav a:hover{opacity:1}
.top .cta{background:var(--gold);color:var(--navy);padding:7px 14px;border-radius:99px;font-weight:600;opacity:1}
@media (max-width:720px){.top nav a:not(.cta){display:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;
  padding:72px max(16px,calc((100vw - var(--wrap))/2)) 64px;background:
  radial-gradient(1200px 500px at 85% -10%,rgba(234,179,8,.18),transparent 60%),var(--navy);color:#fff}
.hero h1{font-size:clamp(46px,7vw,92px);margin:18px 0 20px}
.hero h1 em{color:var(--gold);font-style:italic}
.lede{font-size:19px;color:color-mix(in srgb,currentColor 78%,transparent);max-width:58ch;margin:0}
.searchbox{margin-top:32px;display:flex;align-items:center;gap:12px;background:#fff;color:var(--navy);
  border-radius:14px;padding:6px 8px 6px 18px;box-shadow:0 20px 60px rgba(0,0,0,.35);max-width:620px}
.searchbox svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:2}
.searchbox input{flex:1;border:0;outline:0;font:500 18px var(--sans);padding:12px 0;background:transparent;color:var(--navy)}
.searchbox kbd{font:12px var(--mono);border:1px solid #ccd;border-radius:6px;padding:4px 8px;color:#889}
.stats{display:flex;gap:36px;margin-top:30px}
.stats div{font-size:14px;color:rgba(255,255,255,.65)} .stats b{display:block;font:600 34px var(--serif);color:#fff}
.hero-feature{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;text-decoration:none;
  box-shadow:0 30px 80px rgba(0,0,0,.45);transform:rotate(1.5deg);transition:transform .4s}
.hero-feature:hover{transform:rotate(0) scale(1.01)}
.hero-feature img{width:100%;height:100%;object-fit:cover}
.hf-cap{position:absolute;inset:auto 0 0 0;padding:70px 22px 22px;background:linear-gradient(transparent,rgba(5,10,25,.92));display:grid;gap:6px}
.hf-cap b{font:600 24px/1.15 var(--serif)} .hf-cap span:last-child{font-size:14px;opacity:.75}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:48px}.hero-feature{max-width:360px;transform:none}}

/* verdict stamps */
.stamp{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:7px 10px;border-radius:6px;color:#fff;background:var(--c);width:max-content}
.v-true{--c:var(--true)} .v-partly{--c:var(--partly)} .v-unproven{--c:var(--unproven)} .v-busted{--c:var(--busted)} .v-legend{--c:var(--legend)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:7px}

/* browse */
.browse,.places,.how{padding:56px max(16px,calc((100vw - var(--wrap))/2))}
.filters{display:grid;gap:12px;position:sticky;top:60px;z-index:5;background:var(--paper);padding:14px 0;border-bottom:1px solid var(--line)}
.filters .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lbl{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);width:72px}
.chip{font:500 14px var(--sans);border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:7px 14px;border-radius:99px;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--gold)} .chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (prefers-color-scheme:dark){.chip.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}}
.active-place{display:flex;gap:8px;align-items:center;font-weight:600}
.active-place button{border:0;background:var(--line);border-radius:50%;width:24px;height:24px;cursor:pointer;color:var(--ink)}
.count{margin:22px 0 14px;color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px}
.card{text-decoration:none;background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,27,54,.14)}
.card-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--navy)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-img img{transform:scale(1.05)}
.card-img .stamp{position:absolute;top:14px;left:14px}
.card-body{padding:18px 20px 20px;display:grid;gap:8px;flex:1}
.card h3{font-size:21px} .card p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.card .meta{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--muted);margin-top:auto;padding-top:8px}
.card mark{background:color-mix(in srgb,var(--gold) 40%,transparent);color:inherit;border-radius:3px}
.empty{padding:40px;text-align:center;color:var(--muted)}
[hidden]{display:none!important}
.card .hit{font-size:14px;line-height:1.45;color:var(--ink);border-left:3px solid var(--gold);padding-left:10px}
.card .hit span{display:block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.empty a{color:var(--gold-d);font-weight:600}
.places h2,.how h2{font-size:38px;margin-bottom:24px}
.place-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.place{flex:0 0 220px;height:150px;border-radius:16px;overflow:hidden;position:relative;scroll-snap-align:start;text-decoration:none;color:#fff}
.place img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.place span{position:absolute;inset:auto 16px 14px;font-size:13px;opacity:.95} .place b{display:block;font:600 20px var(--serif)}
.how ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;counter-reset:h}
.how li{counter-increment:h;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:8px}
.how li::before{content:counter(h,decimal-leading-zero);font:600 13px var(--mono);color:var(--gold-d)}
.how li b{font:600 19px var(--serif)} .how li span{color:var(--muted);font-size:15px}

/* story */
.crumbs{padding:18px max(16px,calc((100vw - var(--wrap))/2));font-size:14px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink)}
.story>section{padding-left:max(16px,calc((100vw - var(--wrap))/2));padding-right:max(16px,calc((100vw - var(--wrap))/2))}
.s-hero{display:grid;grid-template-columns:380px 1fr;gap:56px;padding-top:20px;padding-bottom:64px;align-items:start}
.s-video{position:sticky;top:84px}
.s-video video{width:100%;aspect-ratio:9/16;border-radius:22px;background:#000;object-fit:cover;box-shadow:0 30px 70px rgba(13,27,54,.3)}
.ig{display:block;text-align:center;margin-top:12px;font-size:14px;color:var(--muted)}
.s-head h1{font-size:clamp(38px,5vw,64px);margin:14px 0 18px}
.s-head .lede{color:var(--muted)}
.verdict{margin:30px 0;display:flex;gap:18px;align-items:center;padding:18px 22px;border-radius:var(--r);
  background:color-mix(in srgb,var(--c) 10%,var(--card));border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.seal{flex:0 0 auto;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;
  font:600 13px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c);
  border:3px double var(--c);transform:rotate(-12deg);padding:10px}
.verdict p{margin:0;font:500 18px var(--serif)}
.jump{list-style:none;padding:0;margin:0;display:grid;gap:2px;border-top:1px solid var(--line)}
.jump a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500}
.jump a::after{content:"↓";float:right;color:var(--gold-d)} .jump a:hover{color:var(--gold-d)}
.byline{margin-top:18px;font:12px var(--mono);color:var(--muted)}
@media (max-width:900px){.s-hero{grid-template-columns:1fr}.s-video{position:static;max-width:340px}}

.legend{--lg-bg:var(--parch);--lg-ink:var(--parch-ink);--lg-head:var(--parch-ink);--lg-accent:#7a520b;
  background-color:var(--lg-field,var(--lg-bg));color:var(--lg-ink);padding-top:80px;padding-bottom:80px;
  background-image:radial-gradient(circle at 20% 10%,rgba(255,255,255,.35),transparent 40%),
  repeating-linear-gradient(0deg,transparent 0 31px,rgba(120,80,20,.06) 31px 32px)}
.legend-inner{max-width:760px;margin:0 auto}
.legend h2{font-size:clamp(40px,5vw,60px);font-style:italic;margin:12px 0 32px;color:var(--lg-head)}
.legend .eyebrow{color:var(--lg-accent)}
.scroll p{font:400 23px/1.65 var(--serif);margin:0 0 18px}
.scroll p:first-child::first-letter{float:left;font:600 88px/.8 var(--serif);color:#a0221b;margin:10px 12px 0 0;
  padding:8px 12px;border:2px solid var(--parch-line);background:linear-gradient(135deg,#f6d77a,#c99406);-webkit-background-clip:padding-box}
.legend .note{margin-top:30px;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 30%,transparent);font:italic 16px var(--serif)}
.turn{display:grid;place-items:center;height:0;position:relative;z-index:2}
.turn span{transform:translateY(-50%);background:var(--navy);color:var(--gold);font:italic 600 34px var(--serif);
  padding:14px 34px;border-radius:99px;box-shadow:0 14px 40px rgba(13,27,54,.35)}

.record,.timeline,.leftout,.sources,.transcript,.visit{padding-top:72px;padding-bottom:8px}
.record h2,.timeline h2,.leftout h2,.sources h2{font-size:clamp(34px,4vw,48px);margin:10px 0 10px}
.sub{color:var(--muted);margin:0 0 30px;max-width:64ch}
.facts{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.fact{display:grid;grid-template-columns:56px 1fr;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.fnum{font:600 26px var(--serif);color:var(--gold-d)}
.fact p{margin:0 0 12px;font-size:18px;font-weight:500}
.srcs{display:flex;flex-direction:column;gap:6px}
.src summary{cursor:pointer;list-style:none;font:13px/1.4 var(--mono);color:var(--muted);display:flex;gap:8px;align-items:baseline}
.src summary::-webkit-details-marker{display:none}
.src summary::before{content:"+";color:var(--gold-d);font-weight:700} .src[open] summary::before{content:"–"}
.src sup{font-size:11px;background:var(--line);border-radius:4px;padding:1px 5px;color:var(--ink)}
.src blockquote{margin:8px 0 6px 18px;padding:10px 16px;border-left:3px solid var(--gold);background:color-mix(in srgb,var(--gold) 7%,transparent);
  font:italic 16px/1.55 var(--serif);border-radius:0 10px 10px 0}

.legendkey{display:flex;gap:20px;font-size:13px;color:var(--muted);margin-bottom:26px}
.legendkey span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.k-record::before{background:var(--navy);border:2px solid var(--gold)} .k-legend::before{border:2px dashed var(--legend)}
.timeline ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.timeline ol::before{content:"";position:absolute;top:9px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--line))}
.timeline li{position:relative;padding:34px 18px 0 0;display:grid;gap:6px;align-content:start}
.timeline li::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--navy);border:3px solid var(--gold)}
.timeline li.t-legend::before{background:var(--paper);border:3px dashed var(--legend)}
.when{font:600 13px var(--mono);color:var(--gold-d)} .timeline b{font:600 18px var(--serif)} .timeline li span:last-child{font-size:14px;color:var(--muted)}
@media (max-width:820px){.timeline ol{grid-template-columns:1fr;gap:26px}.timeline ol::before{top:0;bottom:0;left:9px;width:2px;height:auto;right:auto}
  .timeline li{padding:0 0 0 38px}}

.lo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.lo{border:1px dashed color-mix(in srgb,var(--muted) 50%,transparent);border-radius:var(--r);padding:20px 22px;position:relative}
.lo::before{content:"✕";position:absolute;top:16px;right:18px;color:var(--busted);font-weight:700}
.lo b{display:block;font:600 17px var(--serif);margin-bottom:6px;padding-right:22px} .lo p{margin:0;color:var(--muted);font-size:15px}

.visit{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding-top:80px}
.visit h2{font-size:36px;margin:10px 0} .visit p{color:var(--muted)}
.product{display:grid;gap:8px;text-decoration:none;padding:28px;border-radius:22px;color:#fff;
  background:radial-gradient(500px 200px at 100% 0,rgba(234,179,8,.35),transparent 70%),var(--navy);box-shadow:0 20px 50px rgba(13,27,54,.25)}
.product .tag{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.product b{font:600 26px/1.15 var(--serif)} .product span{opacity:.8}
.product .go{margin-top:8px;color:var(--gold);font-weight:600;opacity:1}
@media (max-width:820px){.visit{grid-template-columns:1fr}}

.transcript details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 24px}
.transcript summary{cursor:pointer;font-weight:600}
.transcript p{margin:10px 0;color:var(--muted)} .transcript p b{color:var(--ink);font:500 12px var(--mono);text-transform:uppercase;margin-right:8px}
.sources ol{font:14px/1.6 var(--mono);color:var(--muted);padding-left:22px}
.fix{margin:28px 0 60px;padding:18px 22px;border-radius:var(--r);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.soon{padding:120px 16px;text-align:center}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:30px max(16px,calc((100vw - var(--wrap))/2));
  background:var(--navy);color:rgba(255,255,255,.7);font-size:14px}
.foot b{color:var(--gold)}
[hidden]{display:none!important}
.brand img{filter:none;width:32px;height:32px;box-shadow:0 0 0 1px rgba(234,179,8,.5);border-radius:50%}
.scroll p:first-child::first-letter{float:left;font:600 76px/.82 var(--serif);color:#a0221b;margin:6px 14px 0 0;padding:6px 12px 2px;
  border:2px solid var(--parch-line);background:linear-gradient(135deg,#f6d77a,#d9a41c)}

/* ===== Legend themes: the legend half takes the look of the post's video style =====
   One .theme-<style> per style in the Dariche panel's list (data/video_styles.json), and .theme-default for a style
   with none yet. Each theme names its colours, so site/tests/test_themes.py can check them against WCAG AA:
   --lg-bg behind the body text, --lg-field behind the heading and note (when it differs), --lg-ink text,
   --lg-head the heading, --lg-accent the eyebrow. Themes style only the legend section; the record half never changes. */
.solo{grid-template-columns:1fr}
.legend{position:relative;overflow:hidden}
.legend-inner{position:relative;z-index:1}
.legend .scroll p:first-child::first-letter{all:unset}

/* default: neutral, for a video style that has no theme yet */
.theme-default{--lg-bg:#eef0f4;--lg-ink:#16203a;--lg-head:#16203a;--lg-accent:#4a5470;background-image:none}
@media (prefers-color-scheme:dark){.theme-default{--lg-bg:#17213a;--lg-ink:#e8ebf3;--lg-head:#e8ebf3;--lg-accent:#aab3c9}}
.theme-default h2{font-style:normal}
.theme-default .scroll p{font:400 20px/1.65 var(--sans)}

/* manuscript: vellum, gilded initial */
.theme-manuscript{--lg-bg:var(--parch);--lg-ink:var(--parch-ink);--lg-head:var(--parch-ink);--lg-accent:#7a520b}
@media (prefers-color-scheme:dark){.theme-manuscript{--lg-accent:#e0b04a}}
.theme-manuscript .scroll p:first-child::first-letter{float:left;font:600 76px/.82 var(--serif);color:#a0221b;margin:6px 14px 0 0;padding:6px 12px 2px;
  border:2px solid var(--parch-line);background:linear-gradient(135deg,#f6d77a,#d9a41c)}

/* parchment-chart: old chart paper, compass grid, sepia */
.theme-parchment-chart{--lg-bg:#efe2c4;--lg-ink:#4b3517;--lg-head:#6b4512;--lg-accent:#6b4512;background-image:
  radial-gradient(circle at 80% 30%,transparent 0 120px,rgba(110,70,20,.18) 121px 122px,transparent 123px 200px,rgba(110,70,20,.12) 201px 202px,transparent 203px),
  linear-gradient(rgba(110,70,20,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(110,70,20,.08) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}
.theme-parchment-chart .scroll p{font-family:"Special Elite",var(--serif);font-size:20px}

/* collage: kraft paper, torn scraps with tape */
.theme-collage{--lg-field:#c9a878;--lg-bg:#fbf7ee;--lg-ink:#1d1a16;--lg-head:#111;--lg-accent:#5a2a10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
.theme-collage h2{font:400 clamp(44px,6vw,76px)/1 "Anton",sans-serif;font-style:normal;text-transform:uppercase;background:#f2ead8;display:inline-block;padding:6px 18px;transform:rotate(-2deg);box-shadow:4px 6px 0 rgba(0,0,0,.25)}
.theme-collage .scroll p{font:500 20px/1.55 var(--sans);background:var(--lg-bg);padding:16px 20px;margin:0 0 16px;box-shadow:3px 5px 0 rgba(0,0,0,.18);position:relative;
  clip-path:polygon(0 3%,4% 0,30% 2%,60% 0,100% 2%,99% 40%,100% 97%,70% 100%,40% 98%,3% 100%,1% 60%)}
.theme-collage .scroll p:nth-child(odd){transform:rotate(-.8deg);margin-right:8%} .theme-collage .scroll p:nth-child(even){transform:rotate(.7deg);margin-left:8%;background:#f6e7a6}
.theme-collage .scroll p::before{content:"";position:absolute;top:-8px;left:40%;width:70px;height:20px;background:rgba(255,255,255,.55);transform:rotate(-4deg)}

/* ink-wash: rice paper, brush ink, red seal */
.theme-ink-wash{--lg-bg:#f6f3ec;--lg-ink:#1b1b1b;--lg-head:#111;--lg-accent:#b3261e;
  background-image:radial-gradient(ellipse 500px 260px at 85% 20%,rgba(0,0,0,.10),transparent 70%),radial-gradient(ellipse 380px 200px at 10% 90%,rgba(0,0,0,.08),transparent 70%)}
.theme-ink-wash h2{font-weight:400}
.theme-ink-wash h2::after{content:"D";display:inline-grid;place-items:center;width:46px;height:46px;margin-left:16px;font:600 26px serif;color:#fff;background:#b3261e;border-radius:6px;vertical-align:middle;font-style:normal}
.theme-ink-wash .scroll p{font-weight:300;border-left:3px solid rgba(0,0,0,.75);padding-left:18px}

/* line-art: white, hairlines, architect's grid */
.theme-line-art{--lg-bg:#fff;--lg-ink:#111;--lg-head:#111;--lg-accent:#111;
  background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:24px 24px}
.theme-line-art h2{font:300 clamp(40px,5vw,62px) var(--sans);font-style:normal;letter-spacing:.02em;border-bottom:1px solid #111;padding-bottom:12px}
.theme-line-art .scroll p{font:300 21px/1.7 var(--sans);padding-left:22px;position:relative}
.theme-line-art .scroll p::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:#111}

/* bauhaus: primaries and shapes */
.theme-bauhaus{--lg-bg:#f4efe3;--lg-ink:#111;--lg-head:#111;--lg-accent:#1f4fa8;background-image:none}
.theme-bauhaus::before{content:"";position:absolute;right:-80px;top:40px;width:320px;height:320px;border-radius:50%;background:#e63b2e}
.theme-bauhaus::after{content:"";position:absolute;right:60px;bottom:-150px;width:200px;height:200px;background:#1f4fa8;transform:rotate(12deg)}
.theme-bauhaus h2{font:800 clamp(44px,6vw,80px)/1 var(--sans);font-style:normal;text-transform:uppercase;letter-spacing:-.02em}
.theme-bauhaus h2::first-letter{color:#e63b2e}
.theme-bauhaus .eyebrow{display:inline-block;background:var(--lg-bg);padding:4px 6px}
.theme-bauhaus .scroll p{font:500 21px/1.55 var(--sans);border-left:10px solid #f2c230;padding-left:16px}
@media (max-width:720px){.theme-bauhaus::before{width:160px;height:160px;right:-90px;top:16px}.theme-bauhaus::after{width:120px;height:120px;bottom:-80px}}

/* night-chart: night sky, gold lines */
.theme-night-chart{--lg-bg:#071230;--lg-ink:#e9e4d4;--lg-head:#f3c64a;--lg-accent:#f3c64a;background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 70% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#ffe9a8,transparent),radial-gradient(1px 1px at 85% 75%,#fff,transparent),radial-gradient(1px 1px at 25% 85%,#fff,transparent),radial-gradient(800px 400px at 80% 0,rgba(234,179,8,.18),transparent)}
.theme-night-chart .scroll p{border-bottom:1px dashed rgba(243,198,74,.25);padding-bottom:14px}

/* narrative (veo / higgsfield): cinema, letterbox, subtitles over the cover */
.theme-narrative-veo{--lg-field:#000;--lg-bg:#0d1b36;--lg-ink:#fff;--lg-head:#fff;--lg-accent:#eab308;background-image:none}
.theme-narrative-veo::before{content:"";position:absolute;inset:0;background:var(--cover) center/cover;filter:brightness(.35) blur(2px);transform:scale(1.05)}
.theme-narrative-veo::after{content:"";position:absolute;inset:0;background:linear-gradient(#000 0 40px,transparent 40px calc(100% - 40px),#000 calc(100% - 40px))}
.theme-narrative-veo h2{font-family:var(--sans);font-weight:500;font-style:normal;letter-spacing:.3em;text-transform:uppercase;font-size:clamp(26px,3vw,36px)}
.theme-narrative-veo .scroll p{font:500 21px/1.5 var(--sans);text-align:center;background:color-mix(in srgb,var(--lg-bg) 82%,transparent);padding:10px 18px;border-radius:8px;width:fit-content;margin:0 auto 14px}
.theme-narrative-veo .note{text-align:center}

/* text-mask: the heading cut out of the picture */
.theme-text-mask{--lg-bg:#0d0d0d;--lg-ink:#eee;--lg-head:#f3d27a;--lg-accent:#eab308;background-image:none}
.theme-text-mask h2{font:800 clamp(56px,9vw,130px)/.9 var(--sans);font-style:normal;text-transform:uppercase;background:var(--cover) center/cover,var(--lg-head);background-blend-mode:screen;-webkit-background-clip:text;background-clip:text;color:transparent}
.theme-text-mask .scroll p{font:400 21px/1.6 var(--sans)}

/* infinite-zoom: rings pulling inward */
.theme-infinite-zoom{--lg-bg:#1a0f08;--lg-ink:#f5e6cf;--lg-head:#f0c46a;--lg-accent:#f0c46a;background-image:none}
.theme-infinite-zoom::before{content:"";position:absolute;inset:-50%;background:repeating-radial-gradient(circle at 50% 50%,rgba(234,179,8,.10) 0 2px,transparent 2px 60px);animation:zoom 18s linear infinite}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.6)}}

/* parallax: layered depth from the cover */
.theme-parallax{--lg-bg:#0e1f33;--lg-ink:#fff;--lg-head:#fff;--lg-accent:#fff;background-image:none}
.theme-parallax::before{content:"";position:absolute;inset:0;background:var(--cover) center/cover fixed;filter:brightness(.4) saturate(1.2)}
.theme-parallax .legend-inner{background:rgba(14,31,51,.55);backdrop-filter:blur(10px);padding:clamp(22px,5vw,40px);border-radius:24px;border:1px solid rgba(255,255,255,.18)}
.theme-parallax .scroll p{font-family:var(--sans);font-weight:400}

/* blueprint: navy drafting sheet, fine grid, white and blue lines with dimension marks */
.theme-blueprint{--lg-bg:#0b2a55;--lg-ink:#e8f1ff;--lg-head:#fff;--lg-accent:#9cc9ff;
  background-image:linear-gradient(rgba(156,201,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(156,201,255,.22) 1px,transparent 1px),
  linear-gradient(rgba(156,201,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(156,201,255,.09) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px}
.theme-blueprint h2{font:500 clamp(30px,4.5vw,54px)/1.1 var(--mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase;padding-bottom:20px;
  background:linear-gradient(#9cc9ff,#9cc9ff) left bottom/100% 1px no-repeat,linear-gradient(#9cc9ff,#9cc9ff) left bottom/1px 14px no-repeat,
  linear-gradient(#9cc9ff,#9cc9ff) right bottom/1px 14px no-repeat}
.theme-blueprint .scroll p{font:400 18px/1.75 var(--mono);border:1px dashed rgba(156,201,255,.5);padding:14px 18px;position:relative;background:var(--lg-bg)}
.theme-blueprint .scroll p::before,.theme-blueprint .scroll p::after{content:"";position:absolute;width:12px;height:12px;border:0 solid #fff}
.theme-blueprint .scroll p::before{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
.theme-blueprint .scroll p::after{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}

/* trencadís: broken tiles in turquoise, blue and gold, the story on a tiled bench panel */
.theme-trencadis{--lg-bg:#fffaf0;--lg-ink:#12324a;--lg-head:#0d5c75;--lg-accent:#8a4300;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23fff' stroke-width='3' stroke-linejoin='round'%3E%3Cpath fill='%231aa6b7' d='M0 0h50l-15 40-35-10z'/%3E%3Cpath fill='%232f5fb3' d='M50 0h70v25l-40 20-45-5z'/%3E%3Cpath fill='%23e3b23c' d='M0 30l35 10-10 40-25-10z'/%3E%3Cpath fill='%237fd1d8' d='M35 40l45 5-10 40-45-5z'/%3E%3Cpath fill='%230d5c75' d='M80 45l40-20v50l-50 10z'/%3E%3Cpath fill='%232f5fb3' d='M0 70l25 10 15 40H0z'/%3E%3Cpath fill='%23e3b23c' d='M25 80l45 5 15 35H40z'/%3E%3Cpath fill='%231aa6b7' d='M70 85l50-10v45H85z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px}
.theme-trencadis .legend-inner{background:var(--lg-bg);padding:clamp(22px,5vw,48px);border-radius:32px 8px 32px 8px;box-shadow:0 0 0 6px #fff,0 18px 40px rgba(0,0,0,.28)}
.theme-trencadis h2{font-style:normal}
.theme-trencadis .scroll p{font:400 21px/1.65 var(--serif)}
.theme-trencadis .scroll p:first-child{border-left:6px solid #1aa6b7;padding-left:16px}

/* riso zine: two-ink print, pink and blue out of register, halftone dots, big cut letters that shiver */
.theme-riso-zine{--lg-bg:#f6f1e7;--lg-ink:#1c2b7a;--lg-head:#e0266f;--lg-accent:#b8124f;background-image:none}
.theme-riso-zine::before{content:"";position:absolute;right:-60px;top:-60px;width:min(560px,70%);height:420px;
  background:radial-gradient(#e0266f 1.6px,transparent 2px) 0 0/10px 10px;-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);opacity:.45}
.theme-riso-zine::after{content:"";position:absolute;left:-80px;bottom:-80px;width:360px;height:360px;
  background:radial-gradient(#1c2b7a 1.6px,transparent 2px) 0 0/10px 10px;-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);opacity:.3}
.theme-riso-zine h2{font:400 clamp(52px,9vw,112px)/.92 "Anton",sans-serif;font-style:normal;text-transform:uppercase;text-shadow:5px 4px 0 rgba(28,43,122,.8);animation:riso 1.6s steps(2) infinite}
@keyframes riso{50%{text-shadow:3px 5px 0 rgba(28,43,122,.8);transform:translate(1px,-1px)}}
.theme-riso-zine .eyebrow{background:var(--lg-bg);display:inline-block;padding:4px 6px}
.theme-riso-zine .scroll p{font:500 20px/1.6 var(--sans);border-top:3px solid var(--lg-ink);padding-top:12px;background:color-mix(in srgb,var(--lg-bg) 90%,transparent)}
.theme-riso-zine .scroll p:first-child{font-size:24px;font-weight:600}

/* mudéjar: dark jewel ground, eight-point star tiles, glazed bands top and bottom */
.theme-mudejar{--lg-bg:#141a3a;--lg-ink:#f2ead8;--lg-head:#e9c46a;--lg-accent:#e9c46a;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23e9c46a' stroke-opacity='.22' stroke-width='1.5'%3E%3Crect x='24' y='24' width='32' height='32'/%3E%3Crect x='24' y='24' width='32' height='32' transform='rotate(45 40 40)'/%3E%3C/g%3E%3Cpath fill='%230f7a5c' fill-opacity='.35' d='M0 0l8 0-8 8zM80 0v8l-8-8zM0 80v-8l8 8zM80 80h-8l8-8z'/%3E%3C/svg%3E");
  background-size:80px 80px}
.theme-mudejar::before,.theme-mudejar::after{content:"";position:absolute;left:0;right:0;height:24px;
  background:repeating-linear-gradient(45deg,#0f7a5c 0 10px,#e9c46a 10px 12px,#8a1c3a 12px 22px,#e9c46a 22px 24px)}
.theme-mudejar::before{top:0} .theme-mudejar::after{bottom:0}
.theme-mudejar h2{font-style:normal;letter-spacing:.02em}
.theme-mudejar h2::before{content:"✶ ";color:#0fa37a}
.theme-mudejar .scroll p{padding-left:20px;border-left:2px solid #0fa37a;background:color-mix(in srgb,var(--lg-bg) 85%,transparent)}

/* split-flap: a station board, mono capitals on dark flaps that turn into place */
.theme-split-flap{--lg-field:#121212;--lg-bg:#1f1f1f;--lg-ink:#f1f1ea;--lg-head:#ffd23f;--lg-accent:#ffd23f;background-image:linear-gradient(#0b0b0b,#1a1a1a)}
.theme-split-flap .eyebrow{display:inline-block;background:var(--lg-bg);padding:8px 10px;border-radius:3px}
.theme-split-flap h2{font:500 clamp(24px,4.6vw,54px)/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.12em;display:inline-block;
  padding:16px 18px;border-radius:6px;background:linear-gradient(#2a2a2a 0 calc(50% - 1px),#000 calc(50% - 1px) calc(50% + 1px),#222 calc(50% + 1px));
  box-shadow:0 8px 18px rgba(0,0,0,.5);animation:flap .9s cubic-bezier(.3,1.4,.5,1) both}
@keyframes flap{from{transform:perspective(600px) rotateX(-90deg)}to{transform:none}}
.theme-split-flap .scroll p{font:400 18px/1.7 var(--mono);background:var(--lg-bg);padding:14px 18px;border-radius:6px;border-top:1px solid #333;box-shadow:0 3px 0 #000}
.theme-split-flap .scroll p::before{content:"▸ ";color:var(--lg-head)}

/* isometric: a small 3D world, blocks on an isometric grid */
.theme-isometric{--lg-field:#eaf0fa;--lg-bg:#fff;--lg-ink:#1c2540;--lg-head:#2a3a8c;--lg-accent:#a33a1f;
  background-image:repeating-linear-gradient(30deg,rgba(42,58,140,.10) 0 1px,transparent 1px 28px),repeating-linear-gradient(150deg,rgba(42,58,140,.10) 0 1px,transparent 1px 28px)}
.theme-isometric::before{content:"";position:absolute;right:6%;top:56px;width:150px;height:170px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 170'%3E%3Cpath fill='%23c9d5f2' d='M75 0l65 37-65 38-65-38z'/%3E%3Cpath fill='%239fb3e6' d='M10 37l65 38v75L10 112z'/%3E%3Cpath fill='%232a3a8c' d='M140 37v75l-65 38V75z'/%3E%3C/svg%3E") center/contain no-repeat}
.theme-isometric h2{font:800 clamp(40px,5.5vw,70px)/1 var(--sans);font-style:normal;text-shadow:3px 3px 0 #9fb3e6,6px 6px 0 #c9d5f2}
.theme-isometric .scroll p{font:400 20px/1.6 var(--sans);background:var(--lg-bg);padding:16px 20px;margin:0 14px 24px 0;border-radius:4px;box-shadow:7px 7px 0 #9fb3e6,14px 14px 0 #c9d5f2}
@media (max-width:720px){.theme-isometric::before{display:none}}

/* flat explainer: flat colour shapes with no outline, cut shadows, a little bounce */
.theme-flat-explainer{--lg-field:#ffd166;--lg-bg:#fff;--lg-ink:#1b1f3b;--lg-head:#1b1f3b;--lg-accent:#7c2a0c;background-image:none}
.theme-flat-explainer::before{content:"";position:absolute;left:-90px;bottom:-90px;width:300px;height:300px;border-radius:50%;background:#06a3a0}
.theme-flat-explainer::after{content:"";position:absolute;right:-40px;top:30px;width:220px;height:190px;background:#ef6f5e;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:24px}
.theme-flat-explainer h2{font:800 clamp(42px,6vw,76px)/1 var(--sans);font-style:normal;text-shadow:5px 5px 0 #ef6f5e}
.theme-flat-explainer .scroll p{font:500 20px/1.6 var(--sans);background:var(--lg-bg);padding:18px 22px;border-radius:20px;box-shadow:0 8px 0 rgba(27,31,59,.14);animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.theme-flat-explainer .scroll p:nth-child(2){animation-delay:.12s} .theme-flat-explainer .scroll p:nth-child(3){animation-delay:.24s} .theme-flat-explainer .scroll p:nth-child(n+4){animation-delay:.36s}
@keyframes pop{from{transform:scale(.92)}}
@media (max-width:720px){.theme-flat-explainer::after{display:none}}

/* travel notebook: squared notebook page, a yellow sticky note, taped paper labels, a passport stamp */
.theme-travel-notebook{--lg-bg:#fff;--lg-field:#fbfaf3;--lg-ink:#26323f;--lg-head:#26323f;--lg-accent:#9b2d20;
  background-image:linear-gradient(rgba(70,110,170,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(70,110,170,.16) 1px,transparent 1px);background-size:22px 22px}
.theme-travel-notebook::after{content:"DORNYX";position:absolute;right:7%;top:48px;width:112px;height:112px;display:grid;place-items:center;
  font:600 15px var(--mono);letter-spacing:.2em;color:rgba(155,45,32,.6);border:3px double rgba(155,45,32,.6);border-radius:50%;transform:rotate(-14deg)}
.theme-travel-notebook h2{font:700 clamp(46px,6vw,72px)/1 "Caveat",cursive;font-style:normal;background:#ffe46b;display:inline-block;padding:8px 22px 12px;transform:rotate(-1.5deg);box-shadow:2px 5px 10px rgba(0,0,0,.15)}
.theme-travel-notebook .scroll p{font:400 20px/1.65 var(--sans);position:relative;background:var(--lg-bg);padding:18px 20px 16px;margin:0 0 26px;border:1px solid #dcd7c6}
.theme-travel-notebook .scroll p::before{content:"";position:absolute;top:-10px;left:24px;width:76px;height:20px;background:rgba(234,200,120,.65);transform:rotate(-3deg)}
.theme-travel-notebook .scroll p:nth-child(even){transform:rotate(.5deg)}
@media (max-width:720px){.theme-travel-notebook::after{display:none}}

/* travel map: a city map with a route drawn between pins, each part of the story a photo card on a pin */
.theme-travel-map{--lg-field:#e7eee0;--lg-bg:#fff;--lg-ink:#1f2a24;--lg-head:#1f3d2f;--lg-accent:#a8321d;
  background-image:linear-gradient(160deg,transparent 62%,#b9d7e8 62.2%),repeating-linear-gradient(45deg,rgba(255,255,255,.9) 0 3px,transparent 3px 44px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.9) 0 3px,transparent 3px 44px)}
.theme-travel-map h2{font-style:normal}
.theme-travel-map .scroll{position:relative;padding-left:42px}
.theme-travel-map .scroll::before{content:"";position:absolute;left:13px;top:24px;bottom:24px;border-left:3px dashed #d2462b}
.theme-travel-map .scroll p{font:400 20px/1.6 var(--sans);position:relative;background:var(--lg-bg);padding:16px 20px;border-radius:12px;box-shadow:0 6px 18px rgba(31,42,36,.16)}
.theme-travel-map .scroll p::before{content:"";position:absolute;left:-40px;top:16px;width:20px;height:20px;border-radius:50% 50% 50% 0;background:#d2462b;transform:rotate(-45deg);box-shadow:0 0 0 3px #fff}

/* duotone: the cover in the two brand inks, navy and gold, big type, hard cuts */
.theme-duotone{--lg-bg:#0d1b36;--lg-ink:#f5f1e6;--lg-head:#eab308;--lg-accent:#eab308;background-image:none}
.theme-duotone::before{content:"";position:absolute;inset:0 0 0 35%;background:var(--cover) center/cover;filter:grayscale(1) contrast(1.2);mix-blend-mode:luminosity;opacity:.22;
  -webkit-mask:linear-gradient(90deg,transparent,#000 60%);mask:linear-gradient(90deg,transparent,#000 60%)}
.theme-duotone::after{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--lg-head)}
.theme-duotone h2{font:800 clamp(52px,9vw,120px)/.9 var(--sans);font-style:normal;text-transform:uppercase;letter-spacing:-.03em}
.theme-duotone .scroll p{font:500 21px/1.6 var(--sans)}
.theme-duotone .scroll p:first-child{font-size:25px;border-left:6px solid var(--lg-head);padding-left:16px}

/* polaroid: instant prints dropped on a cork desk, a numbered caption under each */
.theme-polaroid{--lg-field:#dcc7a3;--lg-bg:#fff;--lg-ink:#26221d;--lg-head:#26221d;--lg-accent:#6e2a10;
  background-image:radial-gradient(rgba(90,60,20,.18) 1px,transparent 1.5px),radial-gradient(rgba(255,255,255,.25) 1px,transparent 1.5px);background-size:7px 7px,11px 11px}
.theme-polaroid .legend-inner{counter-reset:pol}
.theme-polaroid h2{font:700 clamp(48px,6vw,74px)/1 "Caveat",cursive;font-style:normal}
.theme-polaroid .scroll p{counter-increment:pol;font:400 19px/1.6 var(--sans);position:relative;background:var(--lg-bg);padding:18px 20px 48px;margin:0 0 28px;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.theme-polaroid .scroll p::after{content:"No. " counter(pol);position:absolute;left:20px;bottom:12px;font:700 22px/1 "Caveat",cursive;color:var(--lg-accent)}
.theme-polaroid .scroll p:nth-child(odd){transform:rotate(-1.2deg)} .theme-polaroid .scroll p:nth-child(even){transform:rotate(1deg)}
@media (min-width:1260px){.theme-polaroid .legend-inner::before{content:"";position:absolute;right:-250px;top:0;width:200px;height:240px;background:var(--cover) center/cover;
  border:12px solid #fff;border-bottom-width:46px;transform:rotate(6deg);box-shadow:0 12px 28px rgba(0,0,0,.3)}}

/* moving backgrounds and effects stop under reduced motion */
@media (prefers-reduced-motion:reduce){.legend,.legend *,.legend::before,.legend::after,.legend *::before,.legend *::after{
  animation:none!important;transition:none!important;background-attachment:scroll!important}}