/* pathvietnam.com: one frame, five looks. body[data-skin] = home | afvn | deros | dispatch | community.
 * Shared: header, footer, AFVN radio bar, motion. Each skin owns its palette, type and texture. */

:root {
  --ink: #efe6cf; --dim: #b7ab8d; --bg: #11130d; --panel: #1b1e15; --line: #3a3b2c;
  --amber: #e9b04a; --amber-2: #ffd27a; --red: #c8402b; --od: #4f5a33; --od-2: #6d7a45;
  --stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", Impact, sans-serif;
  --display: "Big Shoulders Display", Impact, sans-serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --type: "Special Elite", "Courier Prime", "Courier New", monospace;
  --mono: "Courier Prime", "Courier New", monospace;
  --comic: Bangers, Impact, sans-serif;
  --fest: Bungee, Impact, sans-serif; --hand: Caveat, "Comic Sans MS", cursive;
  --radio-h: 64px;
  --wrap: 1220px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); padding-bottom: var(--radio-h); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber-2); text-underline-offset: .18em; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--amber-2); outline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 99; background: var(--amber); color: #111; padding: 8px 14px; }
.skip:focus { left: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { display: block; min-height: 60vh; }
html.swapping main { opacity: .35; transition: opacity .15s; }

/* ---------- motion ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s } .rv.d2 { transition-delay: .16s } .rv.d3 { transition-delay: .24s } .rv.d4 { transition-delay: .32s }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; } }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: 128px; }
.site-nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a { font: 700 15px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: var(--dim); padding: 10px 11px; border-radius: 6px; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.play-btn, .btn { display: inline-flex; align-items: center; gap: .5em; font: 800 16px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; background: var(--amber); color: #15120a; padding: 14px 20px; border-radius: 6px; border: 2px solid var(--amber); box-shadow: 0 6px 0 #8a5f1a; transition: transform .12s, box-shadow .12s; }
.play-btn:hover, .btn:hover { color: #15120a; transform: translateY(2px); box-shadow: 0 4px 0 #8a5f1a; }
.btn.ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 45%, transparent); box-shadow: none; }
.btn.ghost:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.site-head .play-btn { padding: 11px 15px; font-size: 14px; box-shadow: 0 4px 0 #8a5f1a; }
.menu-btn { display: none; }
@media (max-width: 1020px) {
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--bg); padding: 10px 16px 18px; border-bottom: 1px solid var(--line); }
  .site-head[data-open] .site-nav { display: flex; }
  .site-nav a { padding: 14px 8px; font-size: 18px; }
  .menu-btn { display: inline-flex; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--ink); font: 700 14px var(--display); letter-spacing: .1em; padding: 10px 12px; border-radius: 6px; }
  .site-head .play-btn { display: none; }
}

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: #0c0d09; color: var(--dim); font-size: 15px; padding: 56px 0 40px; }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-foot h2 { font: 800 15px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-foot a { color: var(--dim); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.site-foot .fine { margin-top: 36px; font-size: 13px; border-top: 1px solid var(--line); padding-top: 18px; }
@media (max-width: 760px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } }

/* ---------- AFVN radio bar (every page) ---------- */
.radio { --amber: #e9b04a; --amber-2: #ffd27a; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--radio-h); display: flex; align-items: center; gap: 14px; padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #2a1d0f, #170f07); color: #f6e7c4; border-top: 2px solid #8b5a24; box-shadow: 0 -10px 30px #0009; font-family: var(--mono); }
.radio::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--amber) calc(var(--p, 0) * 100%), #3b2a17 0); }
.radio-play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #ffe4a3, var(--amber) 60%, #a86b1c); color: #2a1b08; font-size: 18px; cursor: pointer; box-shadow: 0 0 0 3px #3d2810, 0 4px 12px #000a; }
.radio-play::before { content: "▶"; padding-left: 3px; }
.radio[data-state=playing] .radio-play::before { content: "❚❚"; padding: 0; font-size: 14px; letter-spacing: -2px; }
.radio-dial { flex: none; font: 400 20px/1 "Shrikhand", var(--display); color: var(--amber-2); text-shadow: 0 0 12px #ffb34a88; }
.radio-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.radio-who { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #d9a65a; }
.radio-line { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-time { font-size: 12px; color: #b89a6c; flex: none; }
.radio-vu { display: flex; gap: 3px; align-items: flex-end; height: 22px; flex: none; }
.radio-vu i { width: 4px; height: 30%; background: var(--amber); border-radius: 1px; opacity: .45; }
.radio[data-state=playing] .radio-vu i { opacity: 1; animation: vu .9s ease-in-out infinite alternate; }
.radio-vu i:nth-child(2) { animation-delay: -.3s } .radio-vu i:nth-child(3) { animation-delay: -.6s } .radio-vu i:nth-child(4) { animation-delay: -.15s } .radio-vu i:nth-child(5) { animation-delay: -.45s }
@keyframes vu { 0% { height: 15% } 50% { height: 95% } 100% { height: 40% } }
.radio-links { display: flex; gap: 8px; flex: none; }
.radio-links a { font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: #f6e7c4; border: 1px solid #8b5a24; padding: 9px 10px; border-radius: 4px; white-space: nowrap; }
.radio-links a.hot { background: var(--amber); color: #2a1b08; border-color: var(--amber); }
.radio-close { flex: none; background: none; border: 0; color: #b89a6c; font-size: 20px; cursor: pointer; padding: 8px; }
.radio[data-state=ready] .radio-who::after { content: " · tap anywhere to tune in"; color: var(--amber-2); }
.radio.nudge[data-state=ready] { animation: nudge 1.2s ease-in-out 3; }
@keyframes nudge { 50% { box-shadow: 0 -10px 40px #e9b04a66; border-top-color: var(--amber-2); } }
.radio[data-state=closed] { height: 40px; cursor: pointer; }
.radio[data-state=closed] > :not(.radio-dial):not(.radio-text) { display: none; }
.radio[data-state=closed] .radio-line { display: none; }
.radio[data-state=closed] .radio-who::after { content: " · off · click to turn the radio back on"; }
@media (max-width: 860px) { .radio-time, .radio-vu, .radio-links a:not(.hot) { display: none; } .radio-dial { display: none; } }
@media (max-width: 520px) { .radio-links { display: none; } }

/* ---------- shared section pieces ---------- */
.sec { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.eyebrow { font: 800 14px/1.2 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--amber); margin: 0 0 14px; }
.h2 { font: 900 clamp(38px, 6vw, 78px)/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; margin: 0 0 22px; }
.lede { font-size: clamp(18px, 2vw, 22px); color: var(--dim); max-width: 62ch; margin: 0 0 28px; }
.acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.note { font-size: 14px; color: var(--dim); }

/* =====================================================================================
   HOME / THE GAME: cinematic, stencilled, olive drab and amber, film grain, movement
   ===================================================================================== */
body[data-skin=home] { background: #0e100b; }
.hero { position: relative; min-height: min(100svh, 980px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-art { position: absolute; inset: -8% 0 0; z-index: -2; transform: translateY(var(--py, 0)) scale(1.06); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); animation: kenburns 28s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.08) translate(-1.5%, -1%); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0e100b00 30%, #0e100bcc 72%, #0e100b), radial-gradient(ellipse at 20% 80%, #0e100bcc, transparent 60%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .7; pointer-events: none; }
.hero .wrap { padding: 140px 0 clamp(60px, 9vw, 110px); }
.hero h1 { font: 800 clamp(64px, 12vw, 178px)/.84 var(--stencil); text-transform: uppercase; margin: 0 0 22px; letter-spacing: .01em; }
.hero h1 span { display: block; }
.hero h1 span:nth-child(2) { color: var(--amber); }
.hero .tagline { font: 700 15px var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--amber-2); margin: 0 0 18px; }
.hero .lede { color: var(--ink); max-width: 46ch; font-size: clamp(19px, 2.2vw, 25px); }
.hero .sub { max-width: 60ch; color: var(--dim); margin: 0 0 30px; }
.ticker { border-block: 1px solid var(--line); background: #15170f; overflow: hidden; white-space: nowrap; font: 700 14px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ticker div { display: inline-block; padding: 14px 0; animation: tick 46s linear infinite; }
.ticker span { margin: 0 28px; } .ticker b { color: var(--amber); }
@keyframes tick { to { transform: translateX(-50%); } }

.goals { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.goal { position: relative; min-height: 520px; display: grid; align-items: end; padding: clamp(28px, 4vw, 56px); overflow: hidden; text-decoration: none; color: var(--ink); isolation: isolate; }
.goal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s ease; }
.goal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, #000d); }
.goal:hover img { transform: scale(1.06); }
.goal .num { font: 800 120px/.8 var(--stencil); color: color-mix(in srgb, var(--amber) 70%, transparent); }
.goal h3 { font: 900 clamp(34px, 4vw, 54px)/.95 var(--display); text-transform: uppercase; margin: 6px 0 10px; }
.goal p { max-width: 44ch; color: #e6dcc2; margin: 0 0 18px; }
.goal .go { font: 800 15px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--amber-2); }
.goal.music { background: #1d0f2a; } .goal.comic { background: #2a1209; }
@media (max-width: 860px) { .goals { grid-template-columns: 1fr; } .goal { min-height: 420px; } }

.day { background: linear-gradient(180deg, #0e100b, #151a10); }
.shiftbox { display: grid; grid-template-columns: 340px 1fr; gap: 36px; align-items: stretch; }
.shift-tabs { display: grid; gap: 10px; align-content: start; }
.shift-tabs button { text-align: left; background: #1a1d13; border: 1px solid var(--line); color: var(--dim); padding: 18px 20px; border-radius: 8px; cursor: pointer; font: inherit; position: relative; overflow: hidden; }
.shift-tabs button b { display: block; font: 900 30px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin-bottom: 4px; }
.shift-tabs button[aria-selected=true] { border-color: var(--amber); color: var(--ink); background: #232716; }
.shift-tabs button[aria-selected=true]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; background: var(--amber); animation: fill 4.2s linear forwards; }
@keyframes fill { from { width: 0 } to { width: 100% } }
.shift-stage { position: relative; min-height: 460px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.shift-stage [role=tabpanel] { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.shift-stage [role=tabpanel].on { opacity: 1; }
.shift-stage img { width: 100%; height: 100%; object-fit: cover; }
.shift-stage figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px; background: linear-gradient(transparent, #000c); font: 700 22px/1.25 var(--display); letter-spacing: .03em; }
.shiftbox[data-shift=dawn] .shift-stage { box-shadow: 0 0 80px #ffb25d33; } .shiftbox[data-shift=dusk] .shift-stage { box-shadow: 0 0 80px #ff6a3d33; } .shiftbox[data-shift=night] .shift-stage { box-shadow: 0 0 80px #4a6cff33; }
@media (max-width: 860px) { .shiftbox { grid-template-columns: 1fr; } .shift-tabs { grid-template-columns: repeat(4, 1fr); } .shift-tabs button { padding: 12px; } .shift-tabs button b { font-size: 20px; } .shift-tabs button span { display: none; } .shift-stage { min-height: 300px; } }

.board { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.board h3 { font: 900 30px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; display: flex; gap: 12px; align-items: baseline; }
.board h3 small { font: 400 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--dim); }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.card { position: relative; border-radius: 10px; overflow: hidden; background: #1a1d13; border: 1px solid var(--line); min-height: 210px; display: grid; align-items: end; isolation: isolate; transition: transform .25s, border-color .25s; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; transition: opacity .35s, transform .9s; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 10%, #0d0e0aee 75%); }
.card:hover { transform: translateY(-4px) rotate(-.3deg); border-color: var(--amber); }
.card:hover img { opacity: .85; transform: scale(1.05); }
.card .in { padding: 16px; }
.card .k { font: 700 12px var(--mono); letter-spacing: .14em; color: var(--amber); text-transform: uppercase; }
.card h4 { font: 900 22px/1.05 var(--display); text-transform: uppercase; margin: 4px 0 6px; }
.card p { margin: 0; font-size: 14.5px; color: #d6ccb2; line-height: 1.45; }
.cards.minor { grid-template-columns: repeat(3, 1fr); } .cards.minor .card { min-height: 170px; } .cards.minor h4 { font-size: 18px; }
@media (max-width: 1020px) { .board { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cards, .cards.minor { grid-template-columns: 1fr 1fr; } .card p { display: none; } }

.wire { background: #0b0c08; }
.wire-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 520px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 18px; margin: 0 -16px; scrollbar-width: thin; }
.wire-card { scroll-snap-align: start; position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; isolation: isolate; display: grid; align-items: end; }
.wire-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.wire-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, #000e); }
.wire-card div { padding: 26px; } .wire-card h3 { font: 900 34px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; } .wire-card p { margin: 0; color: #e0d6bc; }

.squad { overflow: hidden; background: #12140e; }
.squad-strip { display: flex; gap: 18px; width: max-content; animation: tick 60s linear infinite; padding: 8px 0; }
.squad:hover .squad-strip { animation-play-state: paused; }
.mate { width: 170px; flex: none; text-align: center; }
.mate img { width: 170px; height: 210px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); filter: sepia(.15); }
.mate b { display: block; font: 900 22px var(--display); text-transform: uppercase; margin-top: 8px; } .mate span { font-size: 13px; color: var(--dim); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.feature { background: #14160f; padding: 28px; }
.feature h3 { font: 900 24px/1.05 var(--display); text-transform: uppercase; margin: 0 0 10px; color: var(--amber-2); }
.feature p { margin: 0; color: var(--dim); font-size: 15.5px; }
@media (max-width: 860px) { .features { grid-template-columns: 1fr; } }

.desk { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 760px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 16px 20px; margin: 0 -16px; }
.desk figure { margin: 0; scroll-snap-align: center; }
.desk img { border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 20px 50px #000a; }
.desk figcaption { font: 700 14px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 10px; }

.rpg { background: radial-gradient(ellipse at 70% 30%, #3a2a12, #120f08 70%); }
.books { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 30px 0; }
.book { aspect-ratio: 3/4; border-radius: 4px 10px 10px 4px; padding: 22px 18px; display: grid; align-content: space-between; background: linear-gradient(135deg, #3a4223, #20250f); border-left: 10px solid #151a09; box-shadow: 8px 12px 24px #000a; transform: perspective(800px) rotateY(-8deg); transition: transform .4s; }
.book:hover { transform: perspective(800px) rotateY(0) translateY(-6px); }
.book:nth-child(2) { background: linear-gradient(135deg, #5a2d1a, #2b140b); } .book:nth-child(3) { background: linear-gradient(135deg, #2b3b4a, #121b24); } .book:nth-child(4) { background: linear-gradient(135deg, #5b4a1c, #2a210b); }
.book b { font: 900 26px/1 var(--display); text-transform: uppercase; } .book span { font: 700 12px var(--mono); letter-spacing: .14em; color: var(--amber-2); }
@media (max-width: 760px) { .books { grid-template-columns: 1fr 1fr; } }

.final { text-align: center; background: linear-gradient(180deg, #0e100b, #1b1408); }
.final .h2 { font-family: var(--stencil); font-size: clamp(54px, 9vw, 130px); }

/* =====================================================================================
   AFVN: night station, Bakelite and dial glow, close to afvn.fm, with the music up front
   ===================================================================================== */
body[data-skin=afvn] { --bg: #120b1d; --panel: #1f1430; --line: #3d2b55; --amber: #f3c76c; --dim: #c7b6d9; background: radial-gradient(ellipse at 50% -10%, #3b1f5c 0, #120b1d 60%) fixed; }
body[data-skin=afvn] .h2, body[data-skin=afvn] .afvn-hero h1 { font-family: "Shrikhand", var(--display); text-transform: none; letter-spacing: 0; }
.afvn-hero { padding: clamp(70px, 10vw, 130px) 0 60px; text-align: center; }
.afvn-hero h1 { font-size: clamp(54px, 10vw, 128px); line-height: .9; margin: 0 0 18px; background: linear-gradient(90deg, #ffb35c, #ff6fb1, #9f7bff, #5fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent; animation: hue 12s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.afvn-hero .lede { margin-inline: auto; color: var(--dim); }
.dial { position: relative; margin: 40px auto 0; max-width: 980px; border-radius: 22px; padding: 28px; background: linear-gradient(180deg, #5b3a1c, #3a230f); box-shadow: inset 0 2px 0 #ffd79a55, inset 0 -6px 0 #0006, 0 30px 70px #000b; }
.dial-glass { position: relative; height: 96px; border-radius: 12px; background: linear-gradient(180deg, #2a1a08, #120a03); box-shadow: inset 0 0 30px #ffb34a33; overflow: hidden; }
.dial-glass::before { content: ""; position: absolute; inset: 12px 18px; background: repeating-linear-gradient(90deg, #f3c76c88 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, #f3c76c 0 2px, transparent 2px 110px); mask: linear-gradient(180deg, #000 0 38%, transparent 38% 62%, #000 62%); }
.dial-needle { position: absolute; top: 6px; bottom: 6px; left: 18%; width: 3px; background: #ff4a2a; box-shadow: 0 0 12px #ff4a2a; animation: needle 9s ease-in-out infinite alternate; }
@keyframes needle { to { left: 78%; } }
.dial-labels { display: flex; justify-content: space-between; font: 700 13px var(--mono); color: #f3c76c; letter-spacing: .14em; margin-top: 10px; padding: 0 6px; }
.onair { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center; background: #1d1230; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.onair img { border-radius: 12px; box-shadow: 0 20px 40px #0009; }
.onair h2 { font-family: "Shrikhand", var(--display); font-size: clamp(30px, 4vw, 46px); line-height: 1; margin: 6px 0 12px; }
.cue-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; font: 14px/1.4 var(--mono); color: var(--dim); max-height: 220px; overflow: auto; }
.cue-list li b { color: #f3c76c; font-weight: 700; margin-right: 8px; }
@media (max-width: 760px) { .onair { grid-template-columns: 1fr; } }
.crate { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.sleeve { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 24px #000a; transition: transform .3s; }
.sleeve:hover { transform: translateY(-6px) rotate(-1.5deg); }
.sleeve img { width: 100%; height: 100%; object-fit: cover; }
.sleeve .lock { position: absolute; left: 8px; bottom: 8px; font: 700 11px var(--mono); letter-spacing: .12em; background: #000c; color: #f3c76c; padding: 5px 7px; border-radius: 4px; text-transform: uppercase; }
.sleeve.free .lock { background: #f3c76c; color: #1a0f05; }
.djs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dj { background: #1d1230; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.dj img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.dj div { padding: 18px; } .dj h3 { font-family: "Shrikhand", var(--display); font-size: 28px; margin: 0 0 6px; font-weight: 400; } .dj p { margin: 0; color: var(--dim); font-size: 15px; }
@media (max-width: 760px) { .djs { grid-template-columns: 1fr; } }

/* =====================================================================================
   DEROS: comic book shop. Halftone, pulp colour, spinner rack, price stickers, balloons
   ===================================================================================== */
body[data-skin=deros] { --bg: #fff3d6; --ink: #1a1408; --dim: #4b3d22; --line: #1a1408; --amber: #e2231a; --amber-2: #c4140c; background-color: #fff3d6; background-image: radial-gradient(#e7c98a 1.3px, transparent 1.6px); background-size: 14px 14px; color: #1a1408; }
body[data-skin=deros] .site-head { background: #ffe14a; border-bottom: 4px solid #1a1408; }
body[data-skin=deros] .site-nav a { color: #1a1408; }
body[data-skin=deros] .site-nav a[aria-current], body[data-skin=deros] .site-nav a:hover { background: #1a1408; color: #ffe14a; }
body[data-skin=deros] a { color: #c4140c; }
body[data-skin=deros] .h2, body[data-skin=deros] h1 { font-family: var(--comic); letter-spacing: .03em; text-transform: uppercase; color: #1a1408; text-shadow: 3px 3px 0 #ffe14a; }
body[data-skin=deros] .eyebrow { color: #c4140c; }
body[data-skin=deros] .lede { color: #3a2e18; }
.shop-hero { padding: clamp(56px, 8vw, 100px) 0 40px; }
.shop-hero h1 { font-size: clamp(70px, 14vw, 190px); line-height: .85; margin: 0 0 10px; transform: rotate(-2deg); text-shadow: 5px 5px 0 #ffe14a, 9px 9px 0 #1a1408; color: #e2231a !important; }
.balloon { position: relative; display: inline-block; background: #fff; border: 3px solid #1a1408; border-radius: 26px; padding: 16px 22px; font: 400 22px/1.3 var(--comic); letter-spacing: .04em; max-width: 520px; box-shadow: 5px 5px 0 #1a1408; }
.balloon::after { content: ""; position: absolute; left: 44px; bottom: -22px; border: 12px solid transparent; border-top: 14px solid #1a1408; }
.rack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; perspective: 1400px; }
.issue { position: relative; text-decoration: none; color: inherit; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.issue img { width: 100%; border: 3px solid #1a1408; box-shadow: 8px 8px 0 #1a1408; background: #fff; }
.issue:hover { transform: rotateY(-12deg) rotateX(4deg) translateY(-8px); }
.price { position: absolute; top: -14px; right: -12px; width: 92px; height: 92px; border-radius: 50%; background: #ffe14a; border: 3px solid #1a1408; display: grid; place-content: center; text-align: center; font: 400 15px/1 var(--comic); letter-spacing: .04em; transform: rotate(12deg); box-shadow: 3px 3px 0 #1a1408; z-index: 2; }
.price b { display: block; font-size: 26px; }
.issue h3 { font: 400 26px/1 var(--comic); letter-spacing: .04em; margin: 16px 0 4px; } .issue p { margin: 0; font-size: 15px; color: #3a2e18; }
.next-up { border: 3px dashed #1a1408; display: grid; place-content: center; text-align: center; min-height: 300px; font: 400 26px/1.1 var(--comic); background: #ffffffaa; padding: 20px; }
@media (max-width: 860px) { .rack { grid-template-columns: 1fr 1fr; } .price { right: -4px; width: 74px; height: 74px; font-size: 13px; } .price b { font-size: 21px; } }
.omnibus { background: #1a1408; color: #fff3d6; border: 4px solid #1a1408; box-shadow: 10px 10px 0 #e2231a; padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; }
.omnibus h2 { font: 400 clamp(40px, 6vw, 72px)/.9 var(--comic); color: #ffe14a; margin: 0 0 12px; text-shadow: none; }
.omnibus p { color: #f4e3bc; } .omnibus .stack { display: flex; } .omnibus .stack img { width: 34%; margin-right: -14%; border: 2px solid #fff3d6; transform: rotate(-6deg); box-shadow: 6px 6px 0 #000; }
.omnibus .stack img:nth-child(2) { transform: rotate(-1deg) translateY(-8px); } .omnibus .stack img:nth-child(3) { transform: rotate(5deg); }
@media (max-width: 760px) { .omnibus { grid-template-columns: 1fr; } }
body[data-skin=deros] .btn { background: #e2231a; color: #fff; border-color: #1a1408; box-shadow: 5px 5px 0 #1a1408; font-family: var(--comic); font-weight: 400; letter-spacing: .06em; font-size: 20px; }
body[data-skin=deros] .btn.ghost { background: #fff; color: #1a1408; }

/* =====================================================================================
   DISPATCHES: military paperwork. Manila folders, typewriter, stamps, routing slips
   ===================================================================================== */
body[data-skin=dispatch] { --bg: #2d2a21; --ink: #241e12; --dim: #5a4f39; --line: #b9a77a; --amber: #8f2416; background: #2d2a21 repeating-linear-gradient(45deg, #ffffff05 0 2px, transparent 2px 9px); color: #f0e6cc; }
body[data-skin=dispatch] .site-head { background: #1f1d16ee; --ink: #f0e6cc; --dim: #cfc2a0; --amber: #e9b04a; }
body[data-skin=dispatch] .play-btn, body[data-skin=dispatch] .btn { --amber: #e9b04a; }
.desk-top { padding: clamp(56px, 8vw, 96px) 0 30px; color: #f0e6cc; }
.desk-top h1 { font: 400 clamp(46px, 8vw, 98px)/.95 var(--type); margin: 0 0 14px; letter-spacing: -.01em; }
.desk-top .lede { color: #cfc2a0; font-family: var(--mono); font-size: 17px; }
.stamp { display: inline-block; border: 3px double #b3261e; color: #b3261e; font: 700 15px/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; padding: 9px 12px 7px; transform: rotate(-6deg); opacity: .85; mix-blend-mode: multiply; }
.desk-top .stamp { color: #e2533f; border-color: #e2533f; mix-blend-mode: normal; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 8px; }
.tabs button { font: 700 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: #d9c58f; color: #2a2316; border: 0; border-radius: 6px 6px 0 0; padding: 10px 14px 8px; cursor: pointer; box-shadow: inset 0 -3px 0 #0002; }
.tabs button[aria-pressed=true] { background: #f3e5b8; transform: translateY(-3px); }
.count { font: 14px var(--mono); color: #cfc2a0; }
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px 24px; padding: 20px 0 40px; }
.folder { position: relative; display: block; text-decoration: none; color: #241e12; background: linear-gradient(180deg, #e9d7a3, #dcc58a); border-radius: 0 10px 8px 8px; padding: 20px 20px 18px; box-shadow: 0 10px 22px #0007; transition: transform .25s, box-shadow .25s; min-height: 100%; }
.folder::before { content: attr(data-no); position: absolute; top: -26px; left: 0; height: 28px; padding: 6px 14px; border-radius: 8px 8px 0 0; background: #dcc58a; font: 700 12px var(--mono); letter-spacing: .14em; color: #5a4f39; }
.folder:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 18px 30px #000a; color: #241e12; }
.folder .snap { position: relative; background: #fff; padding: 6px 6px 22px; transform: rotate(1.5deg); box-shadow: 0 4px 10px #0004; margin-bottom: 14px; }
.folder .snap img { aspect-ratio: 16/9; object-fit: cover; width: 100%; filter: sepia(.25) contrast(1.05); }
.folder .snap::after { content: ""; position: absolute; top: -10px; left: 42%; width: 64px; height: 20px; background: #f6efd6cc; transform: rotate(-4deg); }
.folder h2 { font: 400 22px/1.15 var(--type); margin: 0 0 8px; }
.folder .meta { font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6b5d40; margin: 0 0 8px; }
.folder p { font: 15px/1.5 var(--serif); margin: 0; color: #3a3120; }
.folder .stamp { position: absolute; z-index: 3; right: 12px; top: 14px; background: #f3e5b8cc; font-size: 11px; padding: 6px 8px 4px; }
.report { background: #f4ead0; color: #241e12; margin: 0; padding: clamp(26px, 5vw, 64px); box-shadow: 0 30px 60px #000b; position: relative; background-image: linear-gradient(#f4ead0, #efe2c0); }
.report::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .5; pointer-events: none; }
.routing { display: grid; grid-template-columns: 110px 1fr; gap: 4px 14px; font: 14px/1.5 var(--mono); border-block: 2px solid #241e12; padding: 14px 0; margin-bottom: 28px; text-transform: uppercase; letter-spacing: .06em; }
.routing dt { font-weight: 700; } .routing dd { margin: 0; }
.report h1 { font: 400 clamp(32px, 5vw, 52px)/1.05 var(--type); margin: 0 0 18px; }
.report .stamp { position: absolute; top: 28px; right: 26px; }
.report .body { font: 18px/1.7 var(--serif); }
.report .body h2 { font: 400 26px/1.2 var(--type); margin: 2em 0 .5em; }
.report .body h3 { font: 700 18px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.report .body figure { margin: 28px 0; background: #fff; padding: 10px 10px 14px; box-shadow: 0 6px 16px #0003; transform: rotate(-.5deg); }
.report .body figcaption { font: 14px var(--mono); color: #5a4f39; margin-top: 8px; }
.report .body a { color: #8f2416; }
.report .body blockquote { border-left: 4px solid #8f2416; margin: 1.5em 0; padding: .2em 0 .2em 1em; font-style: italic; }
.report .body aside, .report .body .series-note { border: 1px dashed #8a7a55; padding: 14px; font: 14px var(--mono); margin-top: 2em; }
.report .tags { margin-top: 36px; border-top: 2px solid #241e12; padding-top: 14px; font: 13px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.report-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin: 22px 0; font: 14px/1.4 var(--mono); }
.report-nav .next { text-align: right; } .report-nav .all { border: 1px solid #b9a77a; padding: 8px 14px; border-radius: 4px; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
@media (max-width: 760px) { .report-nav { grid-template-columns: 1fr; } .report-nav .next { text-align: left; } }
.report-nav a { color: #f0e6cc; }

/* =====================================================================================
   COMMUNITY: summer festival. Sunset, bunting, string lights, posters, polaroids
   ===================================================================================== */
body[data-skin=community] { --bg: #1e2214; --ink: #ece4c8; --dim: #c2b98f; --line: #4a4f33; --amber: #d9a441; --amber-2: #f0c46a; background: #1e2214 var(--grain); }
.bunting { height: 46px; background: conic-gradient(from 135deg at 50% 0, #ffcf3f 0 90deg, transparent 0) 0 0/60px 46px, conic-gradient(from 135deg at 50% 0, #2bb6a3 0 90deg, transparent 0) 30px 0/60px 46px; filter: drop-shadow(0 4px 2px #0003); }
.lights { height: 40px; background: radial-gradient(circle, #fff6b0 3px, #ffd34a 4px, transparent 6px) 0 50%/48px 40px repeat-x; animation: twinkle 2.4s ease-in-out infinite alternate; }
@keyframes twinkle { to { filter: brightness(1.6) drop-shadow(0 0 6px #ffd34a); } }
.fest-hero { text-align: center; padding: 50px 0 70px; }
.fest-hero h1 { font: 400 clamp(56px, 11vw, 150px)/.9 var(--fest); color: #fff4e2; margin: 0 0 14px; text-shadow: 0 6px 0 #7b2a7e, 0 12px 30px #0006; }
.fest-hero .hand { font: 600 clamp(26px, 3.4vw, 40px)/1.1 var(--hand); color: var(--amber-2); transform: rotate(-3deg); display: inline-block; margin-bottom: 18px; }
.fest-hero .lede { margin-inline: auto; color: #ffe9d6; }
.posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.poster { background: #fff4e2; color: #2b0f2a; padding: 22px; border-radius: 4px; box-shadow: 0 16px 30px #0007; transform: rotate(var(--r, -1.5deg)); transition: transform .3s; text-decoration: none; display: block; }
.poster:nth-child(2) { --r: 1.2deg; background: #ffcf3f; } .poster:nth-child(3) { --r: -.6deg; background: #2bb6a3; color: #08201c; }
.poster:hover { transform: rotate(0) scale(1.03); color: inherit; }
.poster h3 { font: 400 28px/1 var(--fest); margin: 0 0 10px; } .poster p { margin: 0; font-size: 16px; }
.polaroids { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.polaroid { background: #fff; padding: 10px 10px 36px; width: 170px; box-shadow: 0 10px 22px #0008; transform: rotate(var(--r, 2deg)); color: #2b0f2a; text-align: center; font: 600 22px var(--hand); }
.polaroid:nth-child(odd) { --r: -2.5deg; } .polaroid:nth-child(3n) { --r: 4deg; }
.polaroid img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
@media (max-width: 760px) { .posters { grid-template-columns: 1fr; } }

/* ---------- round 2: action board, dog tags, slideshows, manuals, detail window ---------- */
.center { text-align: center; justify-content: center; margin-inline: auto; }
.board-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 26px; }
.board-tabs button { font: 900 clamp(20px, 2.4vw, 28px)/1 var(--display); text-transform: uppercase; letter-spacing: .05em; background: #1a1d13; color: var(--dim); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; cursor: pointer; }
.board-tabs button small { display: block; font: 400 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; margin-top: 6px; }
.board-tabs button[aria-selected=true] { background: var(--amber); color: #15120a; border-color: var(--amber); }
.acts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.act { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #1a1d13; color: var(--ink); text-align: left; padding: 0; cursor: pointer; display: grid; align-content: end; isolation: isolate; font: inherit; transition: transform .25s, border-color .25s, box-shadow .25s; }
.act img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s ease; }
.act::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, #0b0c08f2); }
.act .act-k { margin: 0 18px; font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.act b { margin: 4px 18px 16px; font: 900 clamp(22px, 2vw, 28px)/1.02 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.act .act-more { position: absolute; top: 14px; right: 14px; font: 800 12px var(--display); letter-spacing: .14em; text-transform: uppercase; background: #0009; border: 1px solid #fff3; padding: 7px 10px; border-radius: 99px; opacity: 0; transform: translateY(-4px); transition: .25s; }
.act:hover, .act:focus-visible { transform: translateY(-5px); border-color: var(--amber); box-shadow: 0 18px 40px #000a; }
.act:hover img { transform: scale(1.07); } .act:hover .act-more, .act:focus-visible .act-more { opacity: 1; transform: none; }
@media (max-width: 520px) { .acts-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .act b { font-size: 18px; margin: 4px 12px 12px; } .act .act-k { margin: 0 12px; } }

.squad { background: #12140e; overflow: visible; }
.tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.tag { position: relative; background: linear-gradient(160deg, #c9ccc4, #8d918a); color: #1b1d18; border: 0; border-radius: 16px 16px 16px 16px / 14px; padding: 12px 12px 14px; cursor: pointer; text-align: center; font: inherit; box-shadow: inset 0 1px 0 #fff8, 0 10px 22px #000a; transition: transform .25s; }
.tag::before { content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #12140e; box-shadow: inset 0 1px 2px #000; }
.tag img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px; margin-top: 12px; filter: grayscale(.25) sepia(.15); transition: filter .3s; }
.tag b { display: block; font: 900 22px/1 var(--display); text-transform: uppercase; margin-top: 10px; letter-spacing: .03em; }
.tag span { display: block; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; color: #33362f; }
.tag:hover, .tag:focus-visible { transform: translateY(-6px) rotate(-1.2deg); } .tag:hover img { filter: none; }

.slides { position: relative; border-radius: 14px; outline-offset: 6px; }
.slides-view { overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #000; }
.slides-track { display: flex; transition: transform .8s cubic-bezier(.3,.7,.2,1); }
.slide { flex: 0 0 100%; margin: 0; position: relative; aspect-ratio: 16/8; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3vw, 40px); background: linear-gradient(transparent, #000d 70%); display: grid; gap: 6px; }
.slide figcaption b { font: 900 clamp(28px, 4vw, 54px)/1 var(--display); text-transform: uppercase; }
.slide figcaption span { max-width: 60ch; color: #e6dcc2; }
.slides-prev, .slides-next { position: absolute; top: 50%; translate: 0 -70%; width: 54px; height: 54px; border-radius: 50%; border: 1px solid #fff5; background: #000a; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); }
.slides-prev { left: 14px; } .slides-next { right: 14px; }
.slides-prev:hover, .slides-next:hover { background: var(--amber); color: #15120a; }
.slides-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.slides-dots { display: flex; gap: 8px; flex-wrap: wrap; }
.slides-dots button { width: 28px; height: 6px; border-radius: 3px; border: 0; background: #ffffff33; cursor: pointer; padding: 0; }
.slides-dots button[aria-current=true] { background: var(--amber); }
.slides-live { font: 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.slides.paused .slides-live::after { content: " · paused"; color: var(--amber); }
@media (max-width: 640px) { .slide { aspect-ratio: 4/5; } .slides-prev, .slides-next { width: 42px; height: 42px; font-size: 26px; } }

.manuals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 30px 0; }
.manual { background: none; border: 0; padding: 0; text-align: left; color: var(--ink); cursor: pointer; font: inherit; display: grid; gap: 6px; }
.manual img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: 10px 14px 28px #000b; transform: perspective(900px) rotateY(-10deg); transition: transform .4s; margin-bottom: 10px; }
.manual:hover img, .manual:focus-visible img { transform: perspective(900px) rotateY(0) translateY(-6px); }
.manual .m-meta { font: 700 12px var(--mono); letter-spacing: .14em; color: var(--amber-2); text-transform: uppercase; }
.manual b { font: 900 24px/1.05 var(--display); text-transform: uppercase; }
.manual .m-hook { font-size: 15px; color: var(--dim); }
@media (max-width: 860px) { .manuals { grid-template-columns: 1fr 1fr; } }

dialog.detail { width: min(980px, 100% - 24px); max-height: calc(100vh - 40px); border: 1px solid var(--line); border-radius: 16px; padding: 0; background: #14160f; color: #efe6cf; box-shadow: 0 40px 100px #000; overflow: auto; }
dialog.detail::backdrop { background: #000c; backdrop-filter: blur(3px); }
dialog.detail[open] { animation: pop .25s ease; } @keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.detail-close { position: sticky; float: right; top: 10px; margin: 10px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #fff4; background: #000a; color: #fff; font-size: 18px; cursor: pointer; }
.detail-body { padding: 0 0 28px; }
.detail-body > :not(.detail-art):not(.detail-split) { margin-left: 28px; margin-right: 28px; }
.detail-art img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.detail-body h2 { font: 900 clamp(32px, 4vw, 52px)/1 var(--display); text-transform: uppercase; margin: 6px 0 12px; }
.detail-body .eyebrow { margin-top: 24px; color: #e9b04a; }
.detail-split { display: grid; grid-template-columns: minmax(200px, 340px) 1fr; gap: 28px; padding: 28px; align-items: start; }
.detail-split img { width: 100%; border-radius: 10px; box-shadow: 0 14px 30px #000a; }
.detail-split .eyebrow { margin-top: 0; }
.detail-body .hook { font: 700 20px/1.3 var(--sans); color: #ffd27a; }
.detail-body blockquote { margin: 18px 0 0; padding: 14px 18px; border-left: 4px solid #e9b04a; background: #1d2015; font: italic 19px/1.5 var(--serif); }
@media (max-width: 680px) { .detail-split { grid-template-columns: 1fr; } }
.strip { overflow: hidden; padding: 10px 0 26px; mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.strip-track { display: flex; gap: 18px; width: max-content; animation: tick 130s linear infinite; }
.strip.rev .strip-track { animation-direction: reverse; animation-duration: 95s; }
.strip:hover .strip-track, .strip:focus-within .strip-track { animation-play-state: paused; }
.strip .tag { width: 160px; flex: none; }
.strip-label { font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin: 10px 0 4px; }
#board-major { grid-template-columns: repeat(3, 1fr); } #board-minor { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { #board-major, #board-minor { grid-template-columns: repeat(2, 1fr); } }
/* hidden must win over any display rule (tab panels) */
[hidden] { display: none !important; }
.waitlist { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 40px; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: 16px; background: #13110bcc; scroll-margin-top: 90px; }
.waitlist h2 { font: 900 clamp(32px, 4vw, 52px)/1 var(--display); text-transform: uppercase; margin: 0 0 12px; }
@media (max-width: 860px) { .waitlist { grid-template-columns: 1fr; } }
.waitlist-form { display: grid; gap: 14px; max-width: 560px; margin-top: 18px; }
.waitlist-form label { display: grid; gap: 6px; font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #cfc2a0; }
.waitlist-form input:not([type=checkbox]) { font: 17px var(--sans); padding: 12px 14px; border-radius: 6px; border: 1px solid #4b4a38; background: #0e100b; color: #efe6cf; }
.waitlist-form .consent { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font: 15px/1.4 var(--sans); color: #efe6cf; }
.waitlist-form .consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: #e9b04a; }
.waitlist-form .honey { position: absolute; left: -9999px; }
.waitlist-result { min-height: 1.4em; font-weight: 600; color: #ffd27a; }
.volumes { display: grid; gap: 70px; }
.volume { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.volume img { width: 100%; border-radius: 3px 10px 10px 3px; box-shadow: 14px 18px 40px #000c; }
.volume h2 { font: 900 clamp(34px, 4vw, 54px)/1 var(--display); text-transform: uppercase; margin: 4px 0 10px; }
.volume .hook { font: 700 20px/1.3 var(--sans); color: var(--amber-2); }
.ticks { padding-left: 0; list-style: none; display: grid; gap: 6px; } .ticks li::before { content: "✓ "; color: var(--amber); font-weight: 800; }
.volume details { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 18px 0; background: #14160f; }
.volume summary { cursor: pointer; font: 800 16px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-2); }
.toc { margin: 12px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; color: #d9cfb3; font-size: 15.5px; }
@media (max-width: 760px) { .volume { grid-template-columns: 1fr; } .volume img { max-width: 300px; } }

/* ---------- back to top (all pages) ---------- */
.to-top { position: fixed; right: 18px; bottom: calc(var(--radio-h) + 18px); z-index: 45; width: 50px; height: 50px; border-radius: 50%; border: 0; background: #e9b04a; color: #15120a; font: 900 22px/1 var(--sans); cursor: pointer; box-shadow: 0 8px 22px #000a; transition: transform .2s, opacity .2s; }
.to-top:hover { transform: translateY(-3px); }

/* ---------- community board (live) ---------- */
.fest-board { padding: 10px 0 40px; }
.fest-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.fest-stats div { background: #fff4e2; color: #2b0f2a; border-radius: 14px; padding: 16px 12px; text-align: center; box-shadow: 0 10px 22px #0005; }
.fest-stats b { display: block; font: 400 clamp(30px, 4vw, 46px)/1 var(--fest); color: #e44b6b; }
.fest-stats span { font: 600 18px/1.1 var(--hand); }
.feed { margin: 24px 0 8px; overflow: hidden; background: #2b0f2acc; border-block: 2px dashed #ffcf3f; white-space: nowrap; }
.feed-track { display: inline-block; padding: 12px 0; animation: tick 80s linear infinite; font: 600 20px var(--hand); color: #ffe08a; }
.feed-track span { margin: 0 26px; } .feed-track b { color: #fff4e2; }
.feed:hover .feed-track { animation-play-state: paused; }
.fest-h { font: 400 clamp(38px, 6vw, 72px)/1 var(--fest); text-align: center; color: #fff4e2; text-shadow: 0 5px 0 #7b2a7e; margin: 40px 0 18px; }
.board-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.sort-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sort-tabs button, .board-refresh { font: 400 14px var(--fest); letter-spacing: .02em; border: 2px solid #fff4e2; background: transparent; color: #fff4e2; padding: 9px 14px; border-radius: 99px; cursor: pointer; }
.sort-tabs button[aria-pressed=true] { background: #ffcf3f; color: #2b0f2a; border-color: #ffcf3f; }
.board-refresh { border-style: dashed; }
.board-status { text-align: center; font: 600 20px var(--hand); color: #ffe9d6; margin: 14px 0 6px; }
.fest-board.loading .badges { opacity: .4; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: end; max-width: 860px; margin: 18px auto 30px; }
.place { background: #fff4e2; color: #2b0f2a; border-radius: 16px 16px 6px 6px; padding: 18px 14px; text-align: center; box-shadow: 0 14px 30px #0006; }
.place.p1 { order: 2; padding-top: 34px; background: #ffcf3f; } .place.p2 { order: 1; } .place.p3 { order: 3; }
.place .medal { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e44b6b; color: #fff; font: 400 22px var(--fest); margin-bottom: 8px; }
.place b { display: block; font: 400 20px/1.1 var(--fest); } .place span:last-child { font: 600 20px var(--hand); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.badge { background: #fff4e2; color: #2b0f2a; border-radius: 14px; padding: 18px 18px 16px; box-shadow: 0 14px 28px #0006; transform: rotate(var(--r)); transition: transform .25s; position: relative; }
.badge::before { content: ""; position: absolute; top: -10px; left: 50%; width: 46px; height: 16px; margin-left: -23px; background: #2bb6a3; border-radius: 4px; }
.badge:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.badge header { display: flex; justify-content: space-between; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7b2a7e; }
.badge h3 { font: 400 22px/1.1 var(--fest); margin: 8px 0 2px; word-break: break-word; }
.badge .when { margin: 0 0 10px; font: 600 18px var(--hand); color: #a33a5d; }
.bar { position: relative; height: 22px; background: #2b0f2a1a; border-radius: 99px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff8a3d, #e44b6b, #7b2a7e); border-radius: 99px; }
.bar span { position: relative; display: block; text-align: center; font: 700 12px/22px var(--mono); color: #2b0f2a; mix-blend-mode: multiply; }
.badge dl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 12px 0; text-align: center; }
.badge dt { font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #7b2a7e; } .badge dd { margin: 0; font: 400 16px var(--fest); }
.stamps { display: flex; flex-wrap: wrap; gap: 6px; }
.stamps span { font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; background: #ffcf3f; color: #2b0f2a; }
.stamps .stamp-gold { background: #2b0f2a; color: #ffcf3f; } .stamps .stamp-red { background: #e44b6b; color: #fff; } .stamps .stamp-teal { background: #2bb6a3; color: #08201c; } .stamps .stamp-none { background: none; border: 1px dashed #7b2a7e; color: #7b2a7e; }
.board-fine { font-size: 13.5px; color: #ffe9d6cc; max-width: 80ch; margin: 30px auto 0; text-align: center; }
.fest-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .fest-stats { grid-template-columns: repeat(2, 1fr); } .fest-notes { grid-template-columns: 1fr; } .podium { grid-template-columns: 1fr; } .place.p1 { order: 0; } }

/* ---------- Developer's Dispatch: masthead, archive tools, shelves, wide reports ---------- */
.masthead-title { font: 400 clamp(36px, 6vw, 76px)/1 var(--type); margin: 14px 0 6px; color: #f0e6cc; }
.masthead-sub { font: 700 clamp(18px, 2vw, 24px) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #e2c88a; margin: 0 0 12px; }
.archive-tools { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 18px; }
.archive-tools label { display: grid; gap: 6px; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #cfc2a0; }
.archive-tools input, .archive-tools select { font: 17px var(--mono); padding: 13px 14px; border-radius: 4px; border: 2px solid #8a7a55; background: #f3e5b8; color: #241e12; }
@media (max-width: 700px) { .archive-tools { grid-template-columns: 1fr; } }
.library { padding: 10px 0 60px; }
.active-filter { display: flex; gap: 14px; align-items: center; background: #f3e5b8; color: #241e12; padding: 10px 16px; border-radius: 4px; font: 14px var(--mono); margin: 10px 0; }
.active-filter a { color: #8f2416; }
.shelf { font: 400 clamp(26px, 3vw, 36px)/1 var(--type); color: #f0e6cc; margin: 34px 0 6px; padding-bottom: 10px; border-bottom: 2px dashed #6b5d40; }
.pinned-row .folder { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 28px; align-items: center; padding: 26px; }
.pinned-row .folder .snap { margin: 0; } .pinned-row .folder h2 { font-size: clamp(26px, 3vw, 38px); }
@media (max-width: 760px) { .pinned-row .folder { grid-template-columns: 1fr; } }
.stamp.pin { color: #1d5d8f; border-color: #1d5d8f; }
.folder .pills, .pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.folder .pills span, .pills a { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: #241e1212; color: #5a4f39; padding: 4px 8px; border-radius: 3px; text-decoration: none; }
.pills a:hover { background: #8f2416; color: #f4ead0; }
.folder .open { display: inline-block; margin-top: 12px; font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8f2416; }
.count, .feed-link { font: 14px var(--mono); color: #cfc2a0; } .feed-link a { color: #e2c88a; }
.empty { font: 20px var(--type); color: #f0e6cc; text-align: center; padding: 40px 0; }
.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; margin-bottom: 30px; }
.report .body { max-width: 78ch; }
.report .filed { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-top: 40px; border-top: 2px solid #241e12; padding-top: 16px; }
.report .filed h2 { font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; }
.side { position: sticky; top: 84px; display: grid; gap: 16px; max-height: calc(100vh - 100px - var(--radio-h)); overflow: auto; }
.side-card { background: #e9d7a3; color: #241e12; border-radius: 0 8px 8px 8px; padding: 16px 18px; box-shadow: 0 10px 22px #0006; }
.side-card h2 { font: 700 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; color: #5a4f39; }
.side-card ol, .side-card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font: 14.5px/1.35 var(--serif); }
.side-card a { color: #241e12; } .side-card a[aria-current] { color: #8f2416; font-weight: 700; }
.next-list { list-style: none; padding: 0 !important; } .next-list a { display: grid; text-decoration: none; padding: 6px 0; border-bottom: 1px dashed #8a7a55; }
.next-list b { font: 400 16px/1.25 var(--type); } .next-list span { font: 12px var(--mono); color: #6b5d40; }
.play-card { background: #241e12; color: #f0e6cc; } .play-card h2 { color: #e2c88a; } .play-card p { font-size: 14px; }
.related { margin-bottom: 40px; }
@media (max-width: 1020px) { .report-layout { grid-template-columns: 1fr; } .side { position: static; max-height: none; } .report .filed { grid-template-columns: 1fr; } }
.pinned-row .folder { grid-template-rows: auto; align-content: center; row-gap: 0; }
.pinned-row .folder > .snap { grid-column: 1; grid-row: 1 / span 6; }
.pinned-row .folder > :not(.ph):not(.stamp) { grid-column: 2; margin-top: 0; }
.pinned-row .folder > .meta { align-self: end; } .pinned-row .folder > .open { align-self: start; }
@media (max-width: 760px) { .pinned-row .folder > .snap, .pinned-row .folder > :not(.ph):not(.stamp) { grid-column: 1; grid-row: auto; } }

/* ---------- Dispatch v3: compact masthead, pin bar, clean report sheet (after the live layout) ---------- */
.desk-top.compact { padding: 26px 0 8px; }
.desk-top.compact .masthead-title { font: 400 clamp(24px, 3vw, 34px)/1.1 var(--type); margin: 0; }
.desk-top.compact .masthead-title a { color: #e2533f; text-decoration: none; }
.desk-top.compact .masthead-sub { font-size: 14px; margin: 6px 0 0; }
.desk-top.compact .archive-tools { margin-top: 14px; }
.pin-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 26px 0 0; padding: 14px 18px; background: #f3e5b8; color: #241e12; border-left: 6px solid #1d5d8f; border-radius: 4px; text-decoration: none; box-shadow: 0 8px 18px #0005; transition: transform .2s; }
.pin-bar:hover { transform: translateX(4px); color: #241e12; }
.pin-tag { font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: #1d5d8f; padding: 5px 9px; border-radius: 3px; }
.pin-bar b { font: 400 clamp(18px, 2vw, 22px)/1.2 var(--type); flex: 1; min-width: 220px; }
.pin-go { font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8f2416; }
.sheet { width: min(var(--wrap), 100% - 32px); margin: 0 auto 40px; background: #f4ead0; color: #241e12; border-radius: 4px; box-shadow: 0 24px 60px #000a; overflow: hidden; }
.sheet-head { padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 64px) 18px; }
.kicker { font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #a33a24; margin: 0 0 14px; }
.sheet-head h1 { font: 700 clamp(38px, 5.4vw, 72px)/1.04 var(--serif); letter-spacing: -.01em; margin: 0 0 18px; max-width: 22ch; }
.routing-line { font: 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6b5d40; border-top: 1px solid #241e1233; padding-top: 12px; margin: 0; }
.sheet-hero figure { margin: 0 clamp(22px, 5vw, 64px); }
.sheet-hero img { width: 100%; max-height: 640px; object-fit: cover; border-radius: 3px; }
.sheet-hero figcaption { font: italic 14px var(--serif); color: #6b5d40; margin-top: 8px; }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; padding: 30px clamp(22px, 5vw, 64px) clamp(30px, 5vw, 60px); align-items: start; }
.sheet .body { font: 19px/1.72 var(--serif); max-width: 82ch; }
.sheet .body h2 { font: 700 30px/1.15 var(--serif); margin: 1.8em 0 .5em; scroll-margin-top: 90px; }
.sheet .body h3 { font: 700 15px var(--mono); text-transform: uppercase; letter-spacing: .1em; margin: 1.6em 0 .4em; }
.sheet .body figure { margin: 30px 0; } .sheet .body figure img { border-radius: 3px; }
.sheet .body figcaption { font: italic 14px var(--serif); color: #6b5d40; margin-top: 8px; }
.sheet .body a { color: #8f2416; }
.sheet .body blockquote { border-left: 4px solid #8f2416; margin: 1.5em 0; padding: .2em 0 .2em 1.1em; font-style: italic; }
.sheet .body aside, .sheet .body .series-note { border-top: 1px solid #241e1233; padding-top: 14px; font: 14px var(--mono); margin-top: 2em; }
.sheet .filed { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-top: 44px; border-top: 2px solid #241e12; padding-top: 16px; }
.sheet .filed h2 { font: 700 12px var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px !important; }
.toc-side { position: sticky; top: 90px; border-left: 2px solid #241e1222; padding-left: 18px; }
.toc-side h2 { font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #6b5d40; margin: 0 0 12px; }
.toc-side ol { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; counter-reset: s; }
.toc-side li { counter-increment: s; font: 15px/1.35 var(--serif); }
.toc-side li::before { content: counter(s, decimal-leading-zero) " "; font: 700 11px var(--mono); color: #a33a24; }
.toc-side a { color: #3a3120; text-decoration: none; } .toc-side a:hover, .toc-side a[aria-current] { color: #8f2416; text-decoration: underline; }
.toc-play { font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8f2416 !important; }
.rel-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rel-card { display: grid; align-content: start; gap: 8px; background: #f4ead0; color: #241e12; text-decoration: none; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 26px #0008; padding-bottom: 18px; transition: transform .2s; }
.rel-card:hover { transform: translateY(-4px); color: #241e12; }
.rel-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.rel-card .k, .rel-card b, .rel-card .x { margin: 0 18px; }
.rel-card .k { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #a33a24; margin-top: 8px; }
.rel-card b { font: 700 21px/1.2 var(--serif); } .rel-card .x { font: 15px/1.5 var(--serif); color: #5a4f39; }
@media (max-width: 1020px) { .sheet-grid { grid-template-columns: 1fr; } .toc-side { position: static; order: -1; } .rel-cards { grid-template-columns: 1fr; } .sheet .filed { grid-template-columns: 1fr; } }


/* ================= Community v2: company muster board (military, not festival) ================= */
.muster-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 12vw, 150px) 0 clamp(40px, 6vw, 70px); }
.muster-art { position: absolute; inset: -10% 0 0; z-index: -2; transform: translateY(var(--py, 0)); }
.muster-art img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(.7) contrast(1.05); }
.muster-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #1e2214f2 0, #1e2214cc 45%, #1e221466), linear-gradient(0deg, #1e2214, transparent 40%); }
.muster-hero h1 { font: 800 clamp(58px, 10vw, 140px)/.86 var(--stencil); text-transform: uppercase; margin: 0 0 18px; color: #ece4c8; }
.fest-stats div { background: #2b301d; color: #ece4c8; border: 1px solid #4a4f33; border-top: 4px solid #d9a441; border-radius: 4px; box-shadow: 0 10px 20px #0006; }
.fest-stats b { font: 800 clamp(34px, 4vw, 50px)/1 var(--stencil); color: #f0c46a; }
.fest-stats span { font: 700 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #c2b98f; }
.feed { background: #11130b; border-block: 1px solid #4a4f33; }
.feed-track { font: 14px var(--mono); letter-spacing: .06em; color: #c2b98f; text-transform: uppercase; }
.feed-track b { color: #f0c46a; } .feed-track span::before { content: "▸ "; color: #d9a441; }
.fest-h { font: 800 clamp(40px, 6vw, 80px)/1 var(--stencil); text-transform: uppercase; color: #ece4c8; text-shadow: none; letter-spacing: .02em; }
.sort-tabs button, .board-refresh { font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid #6d7445; color: #ece4c8; border-radius: 3px; background: #2b301d; }
.sort-tabs button[aria-pressed=true] { background: #d9a441; color: #1e2214; border-color: #d9a441; }
.board-status { font: 14px var(--mono); letter-spacing: .06em; color: #c2b98f; }
.place { background: linear-gradient(180deg, #3a3f27, #2b301d); color: #ece4c8; border: 1px solid #4a4f33; border-radius: 4px; }
.place.p1 { background: linear-gradient(180deg, #8a6b2a, #5b461b); border-color: #d9a441; }
.place .medal { background: radial-gradient(circle at 35% 30%, #ffe4a3, #c8902d 60%, #7a5418); color: #2b1d08; font: 800 22px var(--stencil); box-shadow: 0 0 0 3px #2b1d0855; }
.place b { font: 800 22px/1.05 var(--display); text-transform: uppercase; } .place span:last-child { font: 700 14px var(--mono); letter-spacing: .06em; color: #f0c46a; }
.badge { all: unset; box-sizing: border-box; display: block; cursor: pointer; background: #d8cba0; color: #2a2617; border-radius: 4px; padding: 16px 16px 14px; box-shadow: 0 12px 26px #0008; transform: none; transition: transform .2s, box-shadow .2s; position: relative; background-image: linear-gradient(#d8cba0, #cfc092); }
.badge::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; margin: 0; width: auto; background: repeating-linear-gradient(90deg, #4f5a33 0 14px, #2a2617 14px 16px); border-radius: 4px 4px 0 0; }
.badge:hover, .badge:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 36px #000a; }
.badge header { color: #4f5a33; margin-top: 4px; }
.idrow { display: flex; gap: 12px; align-items: center; margin: 10px 0; }
.initials { flex: none; width: 52px; height: 52px; display: grid; place-items: center; background: #4f5a33; color: #ece4c8; font: 800 22px var(--stencil); border-radius: 3px; }
.badge h3 { font: 900 21px/1.05 var(--display); text-transform: uppercase; margin: 0; letter-spacing: .02em; }
.badge .when { font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #5a5233; margin: 4px 0 0; }
.bar { background: #2a261722; border-radius: 2px; height: 18px; }
.bar i { background: repeating-linear-gradient(90deg, #4f5a33 0 8px, #5d6a3c 8px 10px); border-radius: 2px; }
.bar span { font: 700 11px/18px var(--mono); color: #1e1c10; mix-blend-mode: normal; }
.badge dt { color: #4f5a33; } .badge dd { font: 800 18px var(--display); }
.stamps span { border-radius: 2px; background: transparent; border: 2px solid #8a2b1c; color: #8a2b1c; font: 700 10.5px var(--mono); letter-spacing: .1em; transform: rotate(-2deg); }
.stamps .stamp-gold { border-color: #7a5418; color: #7a5418; background: #f0c46a55; } .stamps .stamp-red { border-color: #8a2b1c; color: #fff; background: #8a2b1c; } .stamps .stamp-teal { border-color: #2c4f6b; color: #2c4f6b; } .stamps .stamp-month { border-color: #4f5a33; color: #4f5a33; } .stamps .stamp-none { border: 1px dashed #5a5233; color: #5a5233; transform: none; }
.open-sr { display: block; margin-top: 12px; font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8a2b1c; }
.board-fine { color: #c2b98f; }
.fest-notes .poster { background: #2b301d; color: #ece4c8; border: 1px solid #4a4f33; border-left: 5px solid #d9a441; border-radius: 3px; transform: none !important; box-shadow: none; }
.fest-notes .poster h3 { font: 800 24px/1 var(--display); text-transform: uppercase; color: #f0c46a; }
/* service record sheet (dialog) */
.sr { padding: 30px; background: #d8cba0; color: #2a2617; }
dialog.detail[data-skin=community] { background: #d8cba0; }
.sr-k { font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8a2b1c; margin: 0 0 8px; }
.sr h2 { font: 800 clamp(34px, 5vw, 58px)/.95 var(--stencil) !important; text-transform: uppercase; margin: 0 0 8px !important; }
.sr-sub { font: 14px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #4f5a33; margin: 0 0 24px; }
.sr-line { margin: 10px 0 26px; }
.sr-track { position: relative; height: 28px; background: #2a26171f; border: 1px solid #2a261755; }
.sr-track > i:not(.sr-fill) { position: absolute; top: 0; bottom: 0; width: 1px; background: #2a261744; }
.sr-fill { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, #4f5a33 0 8px, #5d6a3c 8px 10px); }
.mk { position: absolute; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #d9a441; border: 2px solid #2a2617; }
.mk-red { background: #8a2b1c; } .mk-teal { background: #2c4f6b; } .mk-gold { background: #f0c46a; }
.sr-ends { display: flex; justify-content: space-between; gap: 10px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #5a5233; margin-top: 6px; }
.sr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.sr-grid div { background: #2a2617; color: #ece4c8; padding: 12px; border-radius: 3px; }
.sr-grid b { display: block; font: 800 30px/1 var(--stencil); color: #f0c46a; } .sr-grid span { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sr h3 { font: 700 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; border-bottom: 2px solid #2a2617; padding-bottom: 6px; }
.sr-tl { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sr-tl li { display: flex; justify-content: space-between; gap: 14px; align-items: center; border-bottom: 1px dashed #2a261744; padding: 6px 0; }
.sr-tl .d { font: 13px var(--mono); }
.sr-tl [class^=stamp-] { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 2px solid #8a2b1c; color: #8a2b1c; padding: 3px 7px; }
.sr-note { font: 13px var(--serif); color: #5a5233; margin-top: 18px; }
@media (max-width: 680px) { .sr-grid { grid-template-columns: 1fr 1fr; } .sr-ends span:nth-child(2) { display: none; } }

/* ================= Heroes: DEROS splash, Dispatch desk, RPG fan ================= */
.splash { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.splash-text .balloon { margin-bottom: 26px; }
.cover-fan { position: relative; height: clamp(360px, 42vw, 560px); }
.cover-fan img { position: absolute; top: 50%; left: 50%; width: 46%; border: 3px solid #1a1408; box-shadow: 8px 8px 0 #1a1408; transform: translate(-50%, -50%) translateX(calc((var(--i) - 2.5) * 20%)) rotate(calc((var(--i) - 2.5) * 6deg)); transition: transform .35s cubic-bezier(.2,.7,.2,1); z-index: var(--i); }
.cover-fan:hover img { transform: translate(-50%, -50%) translateX(calc((var(--i) - 2.5) * 30%)) rotate(calc((var(--i) - 2.5) * 8deg)); }
.cover-fan img:hover { transform: translate(-50%, -58%) translateX(calc((var(--i) - 2.5) * 30%)) rotate(0) scale(1.06) !important; z-index: 9; }
.burst { position: absolute; right: 2%; top: 4%; z-index: 10; width: 130px; height: 130px; display: grid; place-content: center; text-align: center; font: 400 17px/1 var(--comic); letter-spacing: .04em; color: #1a1408; background: #ffe14a; clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 85% 52%, 100% 68%, 79% 72%, 82% 94%, 61% 84%, 50% 100%, 39% 84%, 18% 94%, 21% 72%, 0 68%, 15% 52%, 0 36%, 20% 30%, 18% 8%, 39% 18%); transform: rotate(10deg); animation: wobble 3s ease-in-out infinite alternate; }
.burst b { display: block; font-size: 36px; color: #e2231a; }
@keyframes wobble { to { transform: rotate(-4deg) scale(1.06); } }
.shop-hero h1 { margin-bottom: 18px; }
@media (max-width: 900px) { .splash { grid-template-columns: 1fr; } .cover-fan { height: 340px; } }

.desk-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(60px, 8vw, 110px) 0 30px; }
.desk-hero-art { position: absolute; inset: -10% 0 0; z-index: -2; transform: translateY(var(--py, 0)); }
.desk-hero-art img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.5) contrast(1.05) brightness(.8); }
.desk-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #2d2a21f5 0, #2d2a21dd 50%, #2d2a2199), linear-gradient(0deg, #2d2a21, transparent 45%); }
.desk-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.desk-stats { font: 14px var(--mono); color: #cfc2a0; } .desk-stats b { color: #f3e5b8; font-size: 18px; } .desk-stats a { color: #e2c88a; }
.latest { display: grid; gap: 8px; background: #f4ead0; color: #241e12; text-decoration: none; padding: 16px 16px 18px; border-radius: 3px; box-shadow: 0 20px 44px #000b; transform: rotate(1.2deg); transition: transform .25s; }
.latest:hover { transform: rotate(0) translateY(-4px); color: #241e12; }
.latest img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.latest-k { font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #a33a24; }
.latest b { font: 700 24px/1.15 var(--serif); } .latest-x { font: 15px/1.5 var(--serif); color: #5a4f39; }
.latest-go { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8f2416; }
@media (max-width: 900px) { .desk-hero-grid { grid-template-columns: 1fr; } .latest { transform: none; } }

.rpg-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.book-fan { position: relative; height: clamp(380px, 40vw, 540px); }
.book-fan a { position: absolute; top: 50%; left: 50%; width: 42%; transform: translate(-50%, -50%) translateX(calc((var(--i) - 1.5) * 38%)) rotate(calc((var(--i) - 1.5) * 7deg)); transition: transform .35s cubic-bezier(.2,.7,.2,1); z-index: var(--i); }
.book-fan img { width: 100%; border-radius: 3px 8px 8px 3px; box-shadow: 14px 18px 36px #000c; }
.book-fan a:hover { transform: translate(-50%, -56%) translateX(calc((var(--i) - 1.5) * 38%)) rotate(0) scale(1.06); z-index: 9; }
.d8 { position: absolute; right: 0; bottom: 0; width: 110px; z-index: 10; animation: roll 9s ease-in-out infinite; filter: drop-shadow(0 10px 18px #000a); }
.d8 svg { width: 100%; } .d8 polygon { fill: #8f2416; stroke: #f0c46a; stroke-width: 2; } .d8 polyline, .d8 line { fill: none; stroke: #f0c46a88; stroke-width: 1.5; }
.d8 text { fill: #fff3d0; font: 800 26px var(--stencil); text-anchor: middle; }
@keyframes roll { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(12deg) translateY(-12px); } }
@media (max-width: 900px) { .rpg-hero-grid { grid-template-columns: 1fr; } .book-fan { height: 330px; } }
/* ---------- DEROS: Take a peek reader ---------- */
.peek { background: #1a1408; color: #fff3d6; background-image: radial-gradient(#2f2610 1.3px, transparent 1.6px); background-size: 14px 14px; scroll-margin-top: 70px; }
.peek .h2 { color: #ffe14a !important; text-shadow: 4px 4px 0 #e2231a !important; }
.peek .lede { color: #f4e3bc; }
.reader { position: relative; outline-offset: 8px; }
.reader-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 1060px; margin: 0 auto; }
.reader-stage.single { grid-template-columns: minmax(0, 520px); justify-content: center; }
.reader-page { all: unset; cursor: zoom-in; display: block; }
.reader-page img { width: 100%; height: auto; border: 3px solid #000; box-shadow: 0 18px 40px #000c; background: #fff; }
.reader-prev, .reader-next { position: absolute; top: 45%; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #1a1408; background: #ffe14a; color: #1a1408; font: 900 34px/1 var(--sans); cursor: pointer; box-shadow: 4px 4px 0 #000; z-index: 2; }
.reader-prev { left: 0; } .reader-next { right: 0; }
.reader-prev:disabled, .reader-next:disabled { opacity: .3; cursor: default; }
.reader-foot { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.reader-pos { font: 400 20px var(--comic); letter-spacing: .06em; color: #ffe14a; }
.reader-dots { display: flex; gap: 6px; } .reader-dots button { width: 22px; height: 8px; border: 0; border-radius: 4px; background: #fff3d633; cursor: pointer; padding: 0; } .reader-dots button[aria-current=true] { background: #ffe14a; }
.reader-end { text-align: center; padding: 60px 0; } .reader-end .balloon { color: #1a1408; } .reader-end .acts { justify-content: center; margin-top: 34px; }
.reader-full { width: 100%; height: auto; display: block; }
dialog.detail[data-skin=deros] { width: min(900px, 100% - 24px); background: #1a1408; }
@media (max-width: 640px) { .reader-prev, .reader-next { width: 44px; height: 44px; font-size: 26px; top: 40%; } }
/* contrast fixes */
body[data-skin=deros] .peek .lede { color: #f4e3bc; }
body[data-skin=deros] .site-head .play-btn { background: #e2231a; color: #fff; border-color: #1a1408; box-shadow: 0 4px 0 #1a1408; }
#radio .radio-links a { color: #f6e7c4; } #radio .radio-links a.hot { color: #2a1b08; }
.desk-hero .masthead-title { font-size: clamp(38px, 5vw, 66px); }
/* ---------- soldier dossier (from Robert's personnel-profile cards) ---------- */
.dossier { background: #f3e7cc; color: #33281a; padding: clamp(20px, 3vw, 34px); border: 1px solid #33281a; margin: 14px; }
.dossier header { border-bottom: 1px solid #33281a; padding-bottom: 10px; margin-bottom: 18px; }
.dos-k { font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.dossier h2 { font: 800 clamp(30px, 4vw, 46px)/1 var(--sans) !important; text-transform: uppercase; margin: 6px 0 0 !important; letter-spacing: .01em; }
.dos-top { display: grid; grid-template-columns: minmax(160px, 300px) 1fr; gap: 28px; }
.dos-top img { width: 100%; border: 1px solid #33281a; }
.dos-nick { font: 800 28px var(--sans); text-transform: uppercase; margin: 0; } .dos-role { font-size: 19px; margin: 4px 0 14px; }
.dossier dl { display: grid; gap: 10px; margin: 0; } .dossier dt { font: 800 13px var(--sans); text-transform: uppercase; letter-spacing: .04em; } .dossier dd { margin: 2px 0 0; }
.dos-unit { display: grid; gap: 2px; font-size: 14px; margin: 14px 0; padding-bottom: 14px; border-bottom: 2px solid #33281a; }
.dossier h3 { font: 800 14px var(--sans) !important; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px !important; border: 0 !important; padding: 0 !important; }
.dos-profile p { margin: 0 0 16px; }
.dos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; } .dos-grid p { margin: 0; }
.dos-foot { border-top: 1px solid #33281a; margin: 22px 0 0; padding-top: 10px; font-size: 13px; }
@media (max-width: 680px) { .dos-top, .dos-grid { grid-template-columns: 1fr; } .dos-top img { max-width: 260px; } }
/* ---------- universal hero size: every section hero = the homepage hero (one screen between header and radio) ---------- */
:root { --hero-h: clamp(560px, calc(100svh - 64px - var(--radio-h)), 900px); }
.hero-frame { min-height: var(--hero-h); box-sizing: border-box; display: grid; align-content: center; padding-top: clamp(40px, 6vw, 80px) !important; padding-bottom: clamp(40px, 6vw, 80px) !important; }
.hero.hero-frame { align-content: end; } .hero.hero-frame .wrap { padding: 0; }
.afvn-hero.hero-frame .dial { margin-top: 28px; }
.muster-hero.hero-frame, .art-hero { align-content: space-between; }
/* article hero: the dispatch's own image, masthead on top, title at the bottom */
.art-hero .desk-hero-art img { filter: sepia(.35) contrast(1.05) brightness(.7); }
.art-hero::before { background: linear-gradient(0deg, #2d2a21 0, #2d2a21d9 35%, #2d2a2166 75%, #2d2a21cc) !important; }
.art-hero-top .masthead-title { font: 400 clamp(22px, 2.6vw, 32px)/1.1 var(--type); margin: 0; } .art-hero-top .masthead-title a { color: #e2533f; text-decoration: none; }
.art-hero-top .masthead-sub { font-size: 13px; margin: 6px 0 12px; }
.art-hero-title .kicker { color: #f0a58f; }
.art-hero-title h1 { font: 700 clamp(40px, 6vw, 84px)/1.02 var(--serif); color: #f6eedb; margin: 0 0 16px; max-width: 20ch; text-shadow: 0 4px 30px #000a; }
.art-hero-title .routing-line { color: #e2d3ad; border-top-color: #f6eedb44; max-width: 900px; }
.sheet .sheet-hero { padding-top: clamp(22px, 4vw, 48px); }
:root { --hero-h: clamp(560px, calc(100svh - 64px), 920px); }
.hero-frame { height: var(--hero-h); min-height: 0; overflow: hidden; }
@media (max-width: 900px) {
  .hero-frame { height: auto; min-height: var(--hero-h); }
  .desk-hero .latest { display: none; }
  .cover-fan { height: 220px; margin-top: 4px; } .cover-fan img { width: 34%; }
  .burst { width: 96px; height: 96px; font-size: 13px; } .burst b { font-size: 26px; }
  .book-fan { height: 220px; } .book-fan a { width: 30%; } .d8 { width: 70px; }
  .shop-hero h1 { font-size: clamp(64px, 18vw, 120px); }
}
@media (max-width: 900px) {
  .rpg-hero .note { display: none; } .rpg-hero .lede { font-size: 17px; margin-bottom: 18px; } .rpg-hero .h2 { font-size: 40px; }
  .book-fan { height: 170px; } .cover-fan { height: 170px; }
  .shop-hero .balloon { font-size: 17px; padding: 12px 16px; } .shop-hero .lede { font-size: 16px; margin: 0 0 16px; } .shop-hero h1 { margin-bottom: 10px; }
}
.dos-locked { position: relative; }
.redacted p { display: grid; gap: 7px; margin: 4px 0 0; } .redacted i { display: block; height: 14px; background: #241c10; border-radius: 1px; }
.redacted i:nth-child(2) { width: 82%; } .redacted i:nth-child(3) { width: 55%; }
.dos-lock-note { margin-top: 22px; display: grid; gap: 12px; justify-items: start; border: 2px dashed #8a2b1c; padding: 16px 18px; background: #f8eed8; }
.dos-lock-note p { margin: 0; }
.dos-stamp { font: 700 13px var(--mono); letter-spacing: .28em; text-transform: uppercase; color: #8a2b1c; border: 3px double #8a2b1c; padding: 6px 10px 4px; transform: rotate(-4deg); }
.muster-hero.hero-frame { align-content: end; }

/* ================= Hero v3: Dispatch desk + folder, RPG game table (full-strength images, no dimming) ================= */
.desk-scene { position: relative; background:
  linear-gradient(90deg, #00000033, transparent 30%, transparent 70%, #00000033),
  repeating-linear-gradient(90deg, #4a3220 0 3px, #553a26 3px 9px, #4d3522 9px 14px, #5a3e28 14px 22px),
  #4f3622; padding-top: 36px !important; padding-bottom: 36px !important; }
.desk-scene::before { display: none !important; }
.desk-scene-grid { display: grid; grid-template-columns: minmax(340px, 0.85fr) 1.15fr; gap: 34px; height: 100%; align-items: stretch; }
.folder-panel { position: relative; background: linear-gradient(180deg, #ecd9a3, #dcc38a); color: #241e12; border-radius: 0 12px 10px 10px; padding: 46px clamp(22px, 3vw, 38px) 28px; box-shadow: 0 30px 60px #000b, inset 0 0 60px #b9984f55; display: flex; flex-direction: column; justify-content: center; margin-top: 18px; }
.folder-tab { position: absolute; top: -26px; left: 0; height: 30px; padding: 7px 18px; background: #dcc38a; border-radius: 10px 10px 0 0; font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #5a4f39; }
.folder-tab a { color: #8f2416; text-decoration: none; }
.folder-panel .masthead-title { color: #241e12; font: 400 clamp(34px, 3.6vw, 56px)/1.02 var(--type); margin: 0 0 10px; }
.folder-panel .masthead-sub { color: #8f2416; font-size: 15px; }
.folder-panel .deck { font: italic 16px/1.5 var(--serif); color: #4a3f2a; }
.folder-panel .desk-stats { color: #4a3f2a; } .folder-panel .desk-stats b { color: #241e12; } .folder-panel .desk-stats a { color: #8f2416; }
.folder-panel .archive-tools { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.folder-panel .archive-tools label { color: #5a4f39; }
.folder-panel .archive-tools input, .folder-panel .archive-tools select { background: #fff8e2; border-color: #8a7a55; }
.desk-surface { position: relative; min-height: 420px; }
.desk-photo { position: absolute; width: 46%; background: #fbf6ea; padding: 9px 9px 34px; box-shadow: 0 16px 34px #000c; text-decoration: none; color: #241e12; transition: transform .3s cubic-bezier(.2,.7,.2,1), z-index 0s; }
.desk-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.desk-photo span { position: absolute; left: 10px; right: 10px; bottom: 7px; font: 400 14px/1.15 var(--type); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-photo::before { content: ""; position: absolute; top: -10px; left: 38%; width: 70px; height: 22px; background: #f3ecd2cc; transform: rotate(-4deg); box-shadow: 0 1px 2px #0003; }
.desk-photo:hover, .desk-photo:focus-visible { transform: rotate(0) scale(1.07) !important; z-index: 9; }
.desk-photo.p0 { top: 2%; left: 4%; transform: rotate(-5deg); z-index: 3; }
.desk-photo.p1 { top: 0; right: 0; transform: rotate(4deg); z-index: 2; }
.desk-photo.p2 { top: 36%; left: 26%; width: 50%; transform: rotate(-1.5deg); z-index: 5; }
.desk-photo.p3 { bottom: 0; left: 0; transform: rotate(3deg); z-index: 4; }
.desk-photo.p4 { bottom: 2%; right: 2%; transform: rotate(-4deg); z-index: 4; }
.desk-pencil { position: absolute; right: 6%; top: 44%; width: 46%; height: 12px; background: linear-gradient(90deg, #e8c33a 0 88%, #f0b4a0 88% 94%, #555 94%); border-radius: 2px 6px 6px 2px; transform: rotate(-28deg); box-shadow: 0 6px 10px #0008; z-index: 1; }
.desk-stamp { position: absolute; left: 2%; top: 46%; z-index: 1; font: 700 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #c0392b; border: 3px double #c0392b; padding: 8px 10px 6px; transform: rotate(-12deg); opacity: .8; }
/* article: the article's photo clipped beside the folder */
.art-scene .folder-panel h1 { font: 700 clamp(32px, 3.8vw, 58px)/1.05 var(--serif); margin: 0 0 14px; }
.art-scene .folder-panel .kicker { color: #a33a24; }
.art-scene .folder-panel .routing-line { color: #5a4f39; border-top-color: #241e1233; margin-bottom: 14px; }
.clipped { position: relative; margin: 30px 0 0; align-self: center; background: #fbf6ea; padding: 12px 12px 14px; box-shadow: 0 26px 60px #000c; transform: rotate(1.5deg); }
.clipped img { width: 100%; max-height: calc(var(--hero-h) - 150px); object-fit: cover; display: block; }
.clipped figcaption { font: 400 14px/1.3 var(--type); color: #4a3f2a; margin-top: 10px; }
.clip { position: absolute; top: -22px; left: 46px; width: 26px; height: 64px; border: 4px solid #9aa1a8; border-radius: 13px; border-bottom-color: transparent; z-index: 2; box-shadow: 0 2px 3px #0005; }
@media (max-width: 960px) {
  .desk-scene-grid { grid-template-columns: 1fr; } .desk-surface { min-height: 300px; } .desk-photo { width: 44%; } .desk-photo.p3, .desk-photo.p4 { display: none; } .desk-photo.p2 { top: 30%; left: 28%; }
  .clipped { transform: none; margin-top: 20px; } .clipped img { max-height: 320px; }
}
/* RPG: game table on green felt */
.felt { background: radial-gradient(ellipse at 70% 40%, #2f5a3a 0, #1f4029 45%, #142a1c 100%) !important; }
.felt::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .5; pointer-events: none; }
.rpg-hero { position: relative; }
.game-table { position: relative; height: calc(var(--hero-h) - 120px); min-height: 380px; }
.tb { position: absolute; width: 38%; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.tb img { width: 100%; border-radius: 3px 8px 8px 3px; box-shadow: 18px 22px 40px #000c; display: block; }
.tb0 { left: 0; top: 4%; transform: rotate(-7deg); z-index: 2; } .tb1 { left: 30%; top: 0; transform: rotate(2deg); z-index: 3; }
.tb2 { right: 0; top: 6%; transform: rotate(8deg); z-index: 2; } .tb3 { left: 18%; bottom: 0; width: 34%; transform: rotate(-3deg); z-index: 4; }
.tb:hover, .tb:focus-visible { transform: rotate(0) translateY(-10px) scale(1.04); z-index: 9; }
.sheet-card { position: absolute; right: 4%; bottom: 6%; width: 32%; z-index: 5; background: #f4ead0; color: #241e12; padding: 14px 16px; transform: rotate(5deg); box-shadow: 0 16px 30px #000b; display: grid; gap: 6px; font: 12px/1.3 var(--mono); }
.sheet-card b { font: 800 18px var(--stencil); text-transform: uppercase; border-bottom: 2px solid #241e12; padding-bottom: 4px; }
.die { position: absolute; width: 74px; z-index: 6; filter: drop-shadow(0 10px 14px #000a); }
.die svg { width: 100%; } .die polygon { fill: #8f2416; stroke: #f0c46a; stroke-width: 2; } .die polyline, .die line { fill: none; stroke: #f0c46a88; stroke-width: 1.5; } .die text { fill: #fff3d0; font: 800 26px var(--stencil); text-anchor: middle; }
.die0 { left: 54%; bottom: 4%; transform: rotate(-14deg); animation: roll 7s ease-in-out infinite; } .die1 { left: 64%; bottom: 14%; width: 60px; transform: rotate(20deg); } .die1 polygon { fill: #1f3a5a; }
.die2 { left: 4%; bottom: 8%; width: 66px; transform: rotate(8deg); animation: roll 9s ease-in-out infinite reverse; }
@media (max-width: 900px) { .game-table { height: 300px; min-height: 0; } .sheet-card { display: none; } .die { width: 48px; } }
/* RPG table v2: the four books as a clean 2x2 display */
.game-table .tb { width: 41%; }
.game-table .tb0 { left: 4%; top: 0; bottom: auto; right: auto; transform: rotate(-4deg); z-index: 2; }
.game-table .tb1 { right: 4%; left: auto; top: 3%; bottom: auto; transform: rotate(3deg); z-index: 2; }
.game-table .tb2 { left: 8%; bottom: 0; top: auto; right: auto; transform: rotate(2.5deg); z-index: 3; }
.game-table .tb3 { right: 8%; left: auto; bottom: 2%; top: auto; width: 41%; transform: rotate(-3deg); z-index: 3; }
.game-table .die0 { left: 46%; top: 44%; bottom: auto; z-index: 6; width: 82px; } .game-table .die1 { left: 50%; top: 62%; bottom: auto; width: 60px; z-index: 6; }
.game-table { height: calc(var(--hero-h) - 90px); }
@media (max-width: 900px) { .game-table { height: 420px; } .game-table .tb { width: 40%; } .game-table .die0 { width: 52px; } .game-table .die1 { width: 40px; } }
/* dossier: personal file collapsed by default */
.dos-locked { border: 2px solid #33281a; margin-top: 16px; }
.dos-locked > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 16px; background: #33281a; color: #f3e7cc; font: 800 14px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.dos-locked > summary::-webkit-details-marker { display: none; }
.dos-sum-r { font: 700 12px var(--mono); letter-spacing: .14em; color: #f0a58f; }
.dos-locked[open] .dos-sum-r { font-size: 0; } .dos-locked[open] .dos-sum-r::after { content: "Close ▴"; font-size: 12px; }
.dos-locked > .dos-grid, .dos-locked > .dos-lock-note { margin: 16px; }
.dos-locked[open] > .dos-grid { animation: pop .25s ease; }
/* RPG table v3: both rows fit; dice on open felt; one row on phones */
.game-table .tb { width: 35%; }
.game-table .tb0 { left: 8%; top: 1%; } .game-table .tb1 { right: 8%; top: 4%; }
.game-table .tb2 { left: 12%; bottom: 1%; } .game-table .tb3 { right: 12%; bottom: 3%; width: 35%; }
.game-table .die0 { left: 45%; top: 40%; width: 78px; } .game-table .die1 { left: 0; top: auto; bottom: 8%; width: 58px; }
@media (max-width: 900px) {
  .game-table { height: 190px; }
  .game-table .tb { width: 23%; top: 0 !important; bottom: auto !important; right: auto !important; transform: rotate(0); }
  .game-table .tb0 { left: 0; } .game-table .tb1 { left: 25.6%; } .game-table .tb2 { left: 51.2%; } .game-table .tb3 { left: 76.8%; width: 23%; }
  .game-table .die { display: none; }
  .rpg-hero-grid { gap: 20px; }
}
/* Cover fans (DEROS + RPG): the stack keeps breathing open and shut; hover spreads it and lifts a cover */
@property --sp { syntax: "<percentage>"; inherits: true; initial-value: 20%; }
@property --tilt { syntax: "<angle>"; inherits: true; initial-value: 6deg; }
.cover-fan { --mid: 2.5; animation: fan 4.5s ease-in-out infinite alternate; }
.cover-fan img { transform: translate(-50%, -50%) translateX(calc((var(--i) - var(--mid)) * var(--sp))) rotate(calc((var(--i) - var(--mid)) * var(--tilt))); }
.cover-fan:hover { animation-play-state: paused; }
.cover-fan:hover img { transform: translate(-50%, -50%) translateX(calc((var(--i) - var(--mid)) * 30%)) rotate(calc((var(--i) - var(--mid)) * 8deg)); }
.cover-fan img:hover { transform: translate(-50%, -58%) translateX(calc((var(--i) - var(--mid)) * 30%)) rotate(0) scale(1.06) !important; }
@keyframes fan { 0% { --sp: 8%; --tilt: 2deg; } 100% { --sp: 26%; --tilt: 8deg; } }
.book-fan4 { --mid: 1.5; } .book-fan4 img { width: 50%; }
.rpg-burst { background: #e9b04a; } .rpg-burst b { color: #7a1c12; }
@media (max-width: 900px) { .book-fan4 { height: 380px; } .book-fan4 img { width: 48%; } }
@media (max-width: 600px) { .book-fan4 { height: 260px; } .book-fan4 img { width: 40%; } }
@media (prefers-reduced-motion: reduce) { .cover-fan { animation: none; } }
/* ===== Dispatch archive hero v4: big stamp title + moving photo stack (same motion as the DEROS / RPG fans) ===== */
.dispatch-hero .splash { align-items: center; }
.dh-k { font: 700 13px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #e2c88a; margin: 0 0 14px; }
.dh-title { margin: 0; font: 400 clamp(72px, 11vw, 168px)/.86 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #f3e5b8; text-shadow: 6px 6px 0 #1a1208; }
.dh-sub { font: italic 400 clamp(20px, 2vw, 26px)/1.35 var(--serif, Georgia, serif); color: #e8dcbc; max-width: 30ch; margin: 20px 0 28px; }
.dh-latest { margin-top: 22px; font: 14px var(--mono); color: #cfc2a0; } .dh-latest a { color: #f3e5b8; }
.photo-fan { --mid: 2; position: relative; height: clamp(380px, 40vw, 560px); animation: fan 4.5s ease-in-out infinite alternate; }
.photo-fan .pf { position: absolute; top: 50%; left: 50%; width: 52%; padding: 10px 10px 34px; background: #fbf6e8; box-shadow: 0 14px 30px #0008; color: #2a2216; text-decoration: none; z-index: var(--i);
  transform: translate(-50%, -50%) translateX(calc((var(--i) - var(--mid)) * var(--sp))) translateY(calc((var(--i) - var(--mid)) * var(--sp) * .25)) rotate(calc((var(--i) - var(--mid)) * var(--tilt))); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.photo-fan .pf img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.photo-fan .pf span { position: absolute; left: 12px; right: 12px; bottom: 8px; font: 14px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-fan:hover { animation-play-state: paused; }
.photo-fan:hover .pf { transform: translate(-50%, -50%) translateX(calc((var(--i) - var(--mid)) * 34%)) rotate(calc((var(--i) - var(--mid)) * 7deg)); }
.photo-fan .pf:hover { transform: translate(-50%, -60%) translateX(calc((var(--i) - var(--mid)) * 34%)) rotate(0) scale(1.08) !important; z-index: 9; }
.dh-stamp { position: absolute; right: 0; top: 2%; z-index: 10; display: grid; text-align: center; padding: 10px 16px; border: 4px double #b3261e; color: #b3261e; background: #f3e5b8e6; font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; transform: rotate(9deg); animation: wobble 3s ease-in-out infinite alternate; }
.dh-stamp b { font: 400 54px/1 var(--display); letter-spacing: 0; }
.lib-tools { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding: 18px 20px; margin: 0 0 26px; background: #3a3020; border: 1px solid #5a4a30; }
.lib-tools .archive-tools { margin: 0; }
.lib-meta { margin: 0; font: 14px var(--mono); color: #cfc2a0; } .lib-meta b { color: #f3e5b8; } .lib-meta a { color: #e2c88a; }
@media (max-width: 900px) { .photo-fan { height: 320px; } .photo-fan .pf { width: 56%; } .lib-tools { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .photo-fan { height: 250px; } .photo-fan .pf { width: 60%; padding: 6px 6px 22px; } .photo-fan .pf span { font-size: 11px; bottom: 4px; } .dh-stamp b { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { .photo-fan, .dh-stamp { animation: none; } }
.dispatch-hero .btn.ghost { color: #f3e5b8; border-color: #e2c88a; background: transparent; }
.dispatch-hero .btn.ghost:hover { background: #f3e5b81a; }
@media (max-width: 600px) { .dh-stamp { right: auto; left: 0; top: 0; transform: rotate(-8deg); } }
/* ===== Hero backgrounds v4: real surfaces instead of stripes / felt ===== */
/* Dispatch: a typed army form on manila paper — grid, punched holes, red margin rule, faint CONFIDENTIAL stamp */
.dispatch-hero { background:
  radial-gradient(circle at 34px 22%, #2a2216 0 9px, transparent 10px),
  radial-gradient(circle at 34px 50%, #2a2216 0 9px, transparent 10px),
  radial-gradient(circle at 34px 78%, #2a2216 0 9px, transparent 10px),
  linear-gradient(90deg, transparent 70px, #b3261e88 70px 72px, transparent 72px),
  linear-gradient(#8a7a5522 1px, transparent 1px) 0 0 / 100% 32px,
  linear-gradient(90deg, #8a7a5518 1px, transparent 1px) 0 0 / 32px 100%,
  radial-gradient(ellipse at 30% 20%, #f1e2b6, #dcc68f 70%, #c9b07a) !important; color: #2a2216; overflow: hidden; }
.dispatch-hero::before { content: "CONFIDENTIAL"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg); font: 400 clamp(90px, 16vw, 240px)/1 var(--stencil); color: #b3261e10; letter-spacing: .06em; pointer-events: none; white-space: nowrap; }
.dispatch-hero::after { content: "DA FORM 2496 · DISPOSITION FORM · BRAVO CO. 2/22 INF (MECH)"; position: absolute; left: 90px; top: 18px; font: 700 12px var(--mono); letter-spacing: .2em; color: #5a4f3999; }
.dispatch-hero .dh-k { color: #b3261e; }
.dispatch-hero .dh-title { color: #2a2216; text-shadow: 4px 4px 0 #b3261e44; font-family: var(--stencil); }
.dispatch-hero .dh-sub { color: #3d3324; } .dispatch-hero .dh-latest { color: #5a4f39; } .dispatch-hero .dh-latest a { color: #2a2216; }
.dispatch-hero .btn.ghost { color: #2a2216; border-color: #2a2216; } .dispatch-hero .btn.ghost:hover { background: #2a221612; }
.dispatch-hero .pf { box-shadow: 0 10px 24px #3a2a1055, 0 1px 0 #0002; }
.dispatch-hero .splash { position: relative; z-index: 1; padding-left: 40px; }
@media (max-width: 600px) { .dispatch-hero .splash { padding-left: 34px; } .dispatch-hero::after { left: 52px; font-size: 9px; } .dispatch-hero { background-position: -14px 0, -14px 0, -14px 0, -30px 0, 0 0, 0 0, 0 0 !important; } }
/* RPG: a military topographic map — olive contour lines, grid squares, a grid reference */
.rpg-hero.felt { background:
  linear-gradient(#3d4a2a55 1px, transparent 1px) 0 0 / 120px 120px,
  linear-gradient(90deg, #3d4a2a55 1px, transparent 1px) 0 0 / 120px 120px,
  repeating-radial-gradient(ellipse at 78% 38%, transparent 0 22px, #6b5a2e55 22px 23.5px),
  repeating-radial-gradient(ellipse at 18% 88%, transparent 0 26px, #6b5a2e44 26px 27.5px),
  repeating-radial-gradient(circle at 105% 105%, transparent 0 30px, #3f6a7a40 30px 31.5px),
  linear-gradient(160deg, #e6dcb4, #d3c89a 55%, #c4b886) !important; color: #23271a; }
.rpg-hero.felt::after { content: "SERIES L7014 · SHEET 6330 IV · 1:50,000 · GRID ZONE 48P"; position: absolute; right: 24px; bottom: 16px; font: 700 12px var(--mono); letter-spacing: .18em; color: #3d4a2a99; }
.rpg-hero.felt { position: relative; }
.rpg-hero.felt h1, .rpg-hero.felt .h2 { color: #23271a !important; }
.rpg-hero.felt .eyebrow { color: #7a1c12 !important; } .rpg-hero.felt .lede, .rpg-hero.felt .note { color: #2f3322 !important; }
.rpg-hero.felt .btn.ghost { color: #23271a; border-color: #23271a; background: transparent; }
.rpg-hero.felt .cover-fan img { box-shadow: 8px 8px 0 #23271a; }
/* calmer topo map: two hills, wide contour spacing, quiet grid */
.rpg-hero.felt { background:
  linear-gradient(#3d4a2a2a 1px, transparent 1px) 0 0 / 140px 140px,
  linear-gradient(90deg, #3d4a2a2a 1px, transparent 1px) 0 0 / 140px 140px,
  radial-gradient(ellipse 60% 70% at 82% 40%, transparent 0 60%, #e6dcb4 75%),
  repeating-radial-gradient(ellipse 90% 70% at 82% 40%, transparent 0 34px, #7a6a3a33 34px 35.5px),
  linear-gradient(160deg, #ece3c0, #ddd2a6 60%, #cfc293) !important; }
.dispatch-hero .dh-title { text-shadow: 3px 3px 0 #b3261e33; }
.rpg-burst b { font-size: 52px; line-height: .9; }

/* =====================================================================================
   ONE HERO FOR THE WHOLE SITE (.ph) — same height on every section, each in its own dress.
   Text column: kicker · title · one short line · two buttons · facts. Visual on the right.
   ===================================================================================== */
:root { --ph-h: clamp(520px, 64vh, 620px); }
.ph { position: relative; isolation: isolate; overflow: hidden; height: var(--ph-h); display: grid; align-items: center; padding: 0 !important; }
.ph-bg { position: absolute; inset: 0; z-index: -2; }
.ph-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.ph-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ph-shade) 0, var(--ph-shade) 34%, transparent 72%), linear-gradient(0deg, var(--ph-shade-b, #0000) 0, transparent 30%); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; width: 100%; }
.ph-text { max-width: 600px; }
.ph .ph-k { margin: 0 0 14px; font: 700 13px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ph-accent); }
.ph .ph-k a { color: inherit; }
.ph .ph-t { margin: 0 0 18px; font: 800 clamp(46px, 5.6vw, 84px)/.92 var(--ph-font, var(--stencil)); text-transform: uppercase; letter-spacing: .01em; color: var(--ph-ink); transform: none; }
.ph .ph-lede { margin: 0 0 26px; font: 400 clamp(18px, 1.6vw, 21px)/1.5 var(--sans); color: var(--ph-ink-2); max-width: 44ch; }
.ph .acts { margin: 0; }
.ph-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.ph-facts li { font: 700 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 9px 11px; border: 1px solid var(--ph-line); color: var(--ph-ink-2); background: var(--ph-chip, transparent); }
.ph-facts a { color: inherit; }
.ph-visual { position: relative; height: calc(var(--ph-h) - 110px); display: grid; align-items: center; }
.ph-visual .cover-fan { height: 100%; }
.ph .btn.ghost { background: transparent; color: var(--ph-ink); border-color: var(--ph-ink); box-shadow: none; }

/* Home — the title art, cinematic */
.ph-home { --ph-shade: #0e100bf0; --ph-shade-b: #0e100b; --ph-accent: var(--amber-2); --ph-ink: #f3ecd8; --ph-ink-2: #d9d0b8; --ph-line: #f3ecd855; --ph-chip: #0e100b99; }
.ph-home .ph-t span { display: block; } .ph-home .ph-t span + span { color: var(--amber); }
.ph-home .ph-bg img { object-position: 60% 40%; }

/* AFVN — night-time radio, records you unlock */
.ph-afvn { --ph-shade: #120b1df2; --ph-shade-b: #120b1d; --ph-accent: #f3c76c; --ph-ink: #fff2dc; --ph-ink-2: #e3d6ef; --ph-line: #f3c76c66; --ph-chip: #120b1daa; --ph-font: "Shrikhand", var(--display); }
.ph-afvn .ph-t { text-transform: none; letter-spacing: 0; text-shadow: 0 0 30px #f3c76c55; }
.sleeve-fan img { width: 44%; aspect-ratio: 1; object-fit: cover; border: 0; box-shadow: 0 16px 30px #000a; }
.afvn-burst { background: #f3c76c; } .afvn-burst b { color: #5b1f7a; }

/* DEROS — the comic shop (kept), sized to the shared frame */
.ph-deros { --ph-accent: #c4140c; --ph-ink: #1a1408; --ph-ink-2: #3a2e18; --ph-line: #1a1408; --ph-chip: #ffe14a; --ph-font: var(--comic); background: transparent; }
.ph-deros .ph-t { font-size: clamp(80px, 9vw, 140px); line-height: .85; color: #e2231a; transform: rotate(-2deg); text-shadow: 5px 5px 0 #ffe14a, 9px 9px 0 #1a1408; letter-spacing: .03em; font-weight: 400; }
.ph-deros .ph-lede { font-weight: 600; }
.ph-deros .ph-facts li { border-width: 2px; box-shadow: 3px 3px 0 #1a1408; }
.ph-deros .btn.ghost { background: #fff; color: #1a1408; border-color: #1a1408; box-shadow: 5px 5px 0 #1a1408; }

/* Dispatch — the command area, reports on file */
.ph-dispatch { --ph-shade: #1e1d14f2; --ph-shade-b: #1e1d14; --ph-accent: #e2c88a; --ph-ink: #f3e5b8; --ph-ink-2: #e2d7b5; --ph-line: #e2c88a66; --ph-chip: #1e1d14aa; }
.ph-dispatch .ph-t { text-shadow: 0 4px 24px #0008; }
.ph-doc { position: relative; display: grid; gap: 8px; margin-left: auto; width: min(420px, 100%); padding: 16px 16px 18px; background: #f1e4bd; color: #2a2216; text-decoration: none; box-shadow: 0 22px 44px #000a; transform: rotate(1.2deg); transition: transform .25s; }
.ph-doc:hover { transform: rotate(0) translateY(-4px); }
.ph-doc-tab { position: absolute; top: -26px; left: 0; padding: 6px 12px; background: #f1e4bd; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8a2a1a; }
.ph-doc img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.ph-doc-k { font: 13px var(--mono); color: #5a4f39; }
.ph-doc b { font: 700 22px/1.25 var(--serif, Georgia, serif); }
.ph-doc-go { font: 700 14px var(--mono); color: #8a2a1a; letter-spacing: .06em; }
.ph-also { list-style: none; margin: 14px 0 0 auto; padding: 0; width: min(420px, 100%); display: grid; gap: 6px; }
.ph-also a { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 9px 12px; background: #1e1d14d9; border-left: 3px solid #e2c88a; color: #f3e5b8; text-decoration: none; font: 15px/1.3 var(--sans); }
.ph-also a span { font: 12px/1.6 var(--mono); color: #cfc2a0; white-space: nowrap; }
.ph-also a:hover { background: #2d2a1ef2; }
.ph-dispatch .ph-visual { display: block; align-self: center; height: auto; }
/* single report: same frame, the report's own picture behind the title */
.ph-article .ph-t { font-size: clamp(34px, 3.8vw, 58px); line-height: 1.02; text-transform: none; font-family: var(--serif, Georgia, serif); font-weight: 700; }
.ph-article .ph-text { max-width: 720px; }
.ph-article::before { background: linear-gradient(90deg, #1e1d14f5 0, #1e1d14e6 45%, #1e1d1430 85%), linear-gradient(0deg, #1e1d14 0, transparent 30%); }
.lib-bar { background: #2b2a1e; border-bottom: 1px solid #4a4632; padding: 14px 0; }
.lib-bar .archive-tools { margin: 0; }

/* RPG — soldiers round a table: a system for groups or solo */
.ph-rpg { --ph-shade: #15140ef2; --ph-shade-b: #15140e; --ph-accent: #e9b04a; --ph-ink: #f3ecd8; --ph-ink-2: #ddd4bc; --ph-line: #e9b04a66; --ph-chip: #15140eaa; }
.ph-rpg .cover-fan img { box-shadow: 8px 8px 0 #0008; border-color: #0d0c08; }
.rpg-intro { padding-top: 50px; padding-bottom: 0; }

/* Community — the people on the board, live */
.ph-community { --ph-shade: #1d2114f2; --ph-shade-b: #1d2114; --ph-accent: #d9a441; --ph-ink: #f1ead2; --ph-ink-2: #ddd6bb; --ph-line: #d9a44166; --ph-chip: #1d2114aa; }
.ph-live { display: grid; gap: 12px; padding: 18px; background: #1d2114e6; border: 1px solid #4a4f33; border-top: 4px solid #d9a441; box-shadow: 0 20px 40px #0009; }
.ph-live-k { margin: 0; font: 700 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #f0c46a; display: flex; align-items: center; gap: 8px; }
.ph-live-k .dot { width: 10px; height: 10px; border-radius: 50%; background: #e2231a; box-shadow: 0 0 0 0 #e2231a88; animation: livepulse 1.6s infinite; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 10px #e2231a00; } }
.ph-live .fest-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ph-live .fest-stats div { padding: 10px 8px; box-shadow: none; }
.ph-live .fest-stats div:nth-child(n+4) { display: none; }
.ph-live .fest-stats b { font-size: clamp(26px, 2.6vw, 36px); }
.ph-live .fest-stats span { font-size: 13px; }
.ph-live .podium { margin: 0; max-width: none; gap: 8px; }
.ph-community .ph-visual { height: auto; }

/* phones + tablets: text first, the visual underneath at one shared height */
@media (max-width: 900px) {
  .ph { height: auto; min-height: 0; padding: 40px 0 34px !important; }
  .ph-grid { grid-template-columns: 1fr; gap: 26px; }
  .ph-visual { height: 250px; }
  .ph-img::before { background: linear-gradient(0deg, var(--ph-shade) 0, var(--ph-shade) 45%, color-mix(in srgb, var(--ph-shade) 70%, transparent) 100%); }
  .ph .ph-t { font-size: clamp(42px, 11vw, 64px); }
  .ph-deros .ph-t { font-size: clamp(76px, 22vw, 110px); }
  .ph-article .ph-t { font-size: clamp(30px, 8vw, 42px); }
  .ph .ph-lede { font-size: 18px; }
  .ph .acts { display: flex; flex-wrap: wrap; gap: 10px; }
  .ph-doc { margin: 26px 0 0; transform: none; width: 100%; } .ph-also { width: 100%; }
  .ph-dispatch .ph-visual, .ph-community .ph-visual { height: auto; }
  .ph-also li:nth-child(n+3) { display: none; }
  .sleeve-fan img { width: 42%; } .ph-visual .cover-fan img { width: 40%; } .ph-visual .book-fan4 img { width: 42%; }
  .ph-live .podium { display: none; }
}
/* hero fixes: keep the page gutter, fit every visual inside the frame */
.ph-grid { width: auto; }
.ph-visual { overflow: visible; }
.ph-visual .cover-fan img { width: min(44%, calc((var(--ph-h) - 170px) / 1.5)); }
.ph-visual .sleeve-fan img { width: min(44%, calc(var(--ph-h) - 230px)); }
.ph-visual .book-fan4 img { width: min(46%, calc((var(--ph-h) - 170px) / 1.3)); }
.ph-doc img { aspect-ratio: 16/7; }
.ph-doc b { font-size: 20px; }
.ph-also li:nth-child(n+3) { display: none; }
@media (max-width: 900px) {
  .ph { min-height: 600px; align-content: center; }
  .ph-visual { height: 230px; }
  .ph-visual .cover-fan img, .ph-visual .book-fan4 img { width: auto; height: 200px; }
  .ph-visual .sleeve-fan img { width: auto; height: 170px; }
  .ph-doc img, .ph-also { display: none; }
  .ph-article { min-height: 0; }
}
.ph > .wrap.ph-grid { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
@media (max-width: 900px) {
  .ph { min-height: 660px; }
  .ph-facts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 18px; }
  .ph-facts li { white-space: nowrap; }
  .ph-visual { height: 190px; }
  .ph-visual .cover-fan img, .ph-visual .book-fan4 img { height: 175px; }
  .ph-visual .sleeve-fan img { height: 150px; }
  .ph-visual .burst { width: 96px; height: 96px; font-size: 13px; } .ph-visual .burst b { font-size: 26px; }
  .ph-article { min-height: 0; }
}
.ph-text, .ph-visual { min-width: 0; }
@media (max-width: 900px) { .ph-grid { grid-template-columns: minmax(0, 1fr); } }
/* Community hero: frame the soldiers' faces, not their boots */
.ph-community .ph-bg img { object-position: 50% 18%; }
@media (max-width: 900px) { .ph-community .ph-bg img { object-position: 40% 12%; } }

/* ===== Dispatch archive v5: readable report cards, topic chips, month groups ===== */
.library { background: #24231a; }
.lib-tools { position: sticky; top: 64px; z-index: 20; grid-template-columns: 1fr auto; margin: 0 0 10px; background: #2f2d21f5; backdrop-filter: blur(6px); border: 0; border-bottom: 1px solid #4a4632; box-shadow: 0 10px 20px #0005; }
.cat-chips { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cat-chips button { flex: none; font: 700 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 9px 12px; border-radius: 999px; border: 1px solid #6b6248; background: transparent; color: #e2d7b5; cursor: pointer; }
.cat-chips button b { color: #e9b04a; margin-left: 4px; }
.cat-chips button[aria-pressed=true] { background: #e9b04a; border-color: #e9b04a; color: #1e1d14; } .cat-chips button[aria-pressed=true] b { color: #1e1d14; }
.lib-tools .archive-tools label:last-child { display: none; }
.lib-tools .archive-tools { grid-template-columns: 1fr; }
.month-h { display: flex; align-items: baseline; gap: 14px; margin: 46px 0 4px; font: 400 clamp(26px, 3vw, 34px)/1 var(--stencil); text-transform: uppercase; color: #f3e5b8; letter-spacing: .03em; border-bottom: 2px solid #4a4632; padding-bottom: 10px; }
.month-h span { font: 700 13px var(--mono); letter-spacing: .12em; color: #a99c78; }
/* the card: a filed report — clean photo, date line, big readable title, two-line summary */
.files { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; padding: 22px 0 10px; }
.folder { display: flex; flex-direction: column; padding: 0; border-radius: 4px; background: #f4ead0; box-shadow: 0 8px 20px #0006; overflow: hidden; border-top: 5px solid #8f2416; }
.folder:hover { transform: translateY(-4px); rotate: none; box-shadow: 0 16px 30px #000a; }
.folder::before { top: 12px; left: 12px; z-index: 3; height: auto; padding: 5px 9px; border-radius: 2px; background: #1e1d14e6; color: #f3e5b8; font-size: 11px; }
.folder .snap { margin: 0; padding: 0; background: #1e1d14; transform: none; box-shadow: none; }
.folder .snap::after { display: none; }
.folder .snap img { display: block; aspect-ratio: 16/9; object-fit: cover; filter: none; }
.folder .stamp { display: none; }
.folder .meta { margin: 16px 18px 6px; font-size: 12px; color: #7a6a48; }
.folder h2 { margin: 0 18px 8px; font: 700 22px/1.25 var(--serif, Georgia, serif); color: #1e1a10; }
.folder > p:not(.meta):not(.pills) { margin: 0 18px; font: 16px/1.55 var(--serif, Georgia, serif); color: #3a3120; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.folder .pills { margin: 12px 18px 0; }
.folder .open { margin: auto 18px 18px; padding-top: 14px; font-size: 13px; color: #8f2416; }
.folder:hover .open { text-decoration: underline; }
/* first card of the newest month is the lead story */
.months .month:first-child .files > .folder:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-content: start; }
.months .month:first-child .files > .folder:first-child .snap { grid-row: 1 / span 6; }
.months .month:first-child .files > .folder:first-child .snap img { height: 100%; aspect-ratio: auto; min-height: 340px; }
.months .month:first-child .files > .folder:first-child .meta { margin-top: 26px; }
.months .month:first-child .files > .folder:first-child h2 { font-size: clamp(26px, 2.6vw, 36px); }
.months .month:first-child .files > .folder:first-child > p:not(.meta):not(.pills) { -webkit-line-clamp: 6; font-size: 17px; }
.shelf { font-family: var(--stencil); text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid #4a4632; }
@media (max-width: 760px) {
  .lib-tools { top: 56px; grid-template-columns: 1fr; padding: 12px; } .lib-meta { display: none; }
  .months .month:first-child .files > .folder:first-child { display: flex; }
  .months .month:first-child .files > .folder:first-child .snap img { min-height: 0; aspect-ratio: 16/9; }
  .files { grid-template-columns: 1fr; }
}
.months .month:first-child .files > .folder:first-child .snap { position: relative; min-height: 380px; overflow: hidden; }
.months .month:first-child .files > .folder:first-child .snap img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 760px) { .months .month:first-child .files > .folder:first-child .snap { min-height: 0; } .months .month:first-child .files > .folder:first-child .snap img { position: static; } }
/* AFVN: the picture of the squad round the radio fills the right; records you unlock sit under the buttons */
.ph-afvn .ph-bg { left: 36%; }
.ph-afvn .ph-bg img { object-position: 40% 30%; }
.ph-afvn::before { background: linear-gradient(90deg, #120b1d 0, #120b1d 36%, #120b1d00 52%), linear-gradient(0deg, #120b1d 0, transparent 25%); }
.ph-afvn .ph-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.sleeve-row { display: flex; align-items: center; margin-top: 22px; }
.sleeve-row img { width: 58px; height: 58px; object-fit: cover; margin-right: -14px; box-shadow: 0 6px 14px #000a; transform: rotate(calc((var(--i) - 3) * 3deg)); transition: transform .2s, margin .2s; }
.sleeve-row:hover img { margin-right: 4px; transform: none; }
.sleeve-row span { margin-left: 24px; font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #f3c76c; }
@media (max-width: 900px) { .ph-afvn .ph-bg { left: 0; } .ph-afvn::before { background: linear-gradient(0deg, #120b1d 0, #120b1d 55%, #120b1d99 100%); } .sleeve-row img { width: 46px; height: 46px; } }
/* Dispatch hero: the soldier writing home fills the right, like AFVN */
.ph-dispatch:not(.ph-article) .ph-bg { left: 34%; }
.ph-dispatch:not(.ph-article) .ph-bg img { object-position: 30% 30%; }
.ph-dispatch:not(.ph-article)::before { background: linear-gradient(90deg, #1e1d14 0, #1e1d14 34%, #1e1d1400 50%), linear-gradient(0deg, #1e1d14 0, transparent 22%); }
.ph-latest { display: grid; gap: 4px; max-width: 480px; margin-top: 22px; padding: 12px 16px; background: #f1e4bd; color: #2a2216; text-decoration: none; border-left: 5px solid #8f2416; box-shadow: 0 10px 24px #0007; }
.ph-latest span { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8f2416; }
.ph-latest b { font: 700 19px/1.3 var(--serif, Georgia, serif); }
.ph-latest i { font: normal 700 13px var(--mono); color: #5a4f39; }
.ph-latest:hover { background: #fff3d2; }
@media (max-width: 900px) {
  .ph-afvn .ph-grid { grid-template-columns: minmax(0, 1fr); }
  .ph-dispatch:not(.ph-article) .ph-bg { left: 0; }
  .ph-dispatch:not(.ph-article)::before { background: linear-gradient(0deg, #1e1d14 0, #1e1d14 55%, #1e1d1499 100%); }
}

/* ===== Landing: the two in-game rewards, each dressed as the reward itself ===== */
.rewards { display: grid; gap: 34px; margin-top: 30px; }
.reward { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 10px; overflow: hidden; }
.reward-deros .reward-vis { order: 2; }
.reward-k { margin: 0 0 10px; font: 700 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.reward h3 { margin: 0 0 18px; font-size: clamp(32px, 3.6vw, 50px); line-height: 1; }
.reward-how { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.reward-how li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.5; }
.reward-how li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; }
.reward .acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.reward-more { display: inline-block; margin-top: 18px; font: 700 14px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.crate-cap { margin: 14px 0 0; text-align: center; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
/* music: a crate of AFVN records, night-time radio colours */
.reward-afvn { background: radial-gradient(ellipse at 20% 0, #3b1f5c, #160d24 70%); color: #f3e9ff; border: 1px solid #3d2b55; box-shadow: 0 30px 60px #0008; }
.reward-afvn .reward-k, .reward-afvn .reward-how li::before { color: #f3c76c; }
.reward-afvn h3 { font-family: "Shrikhand", var(--display); color: #fff2dc; text-transform: none; }
.reward-afvn .reward-how b { color: #f3c76c; }
.reward-afvn .reward-more { color: #f3c76c; }
.reward-afvn .btn.ghost { background: transparent; color: #fff2dc; border-color: #f3c76c; box-shadow: none; cursor: pointer; }
.crate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; background: linear-gradient(#6b4a2a, #4a3119); border-radius: 6px; box-shadow: inset 0 0 0 4px #3a2412, 0 18px 30px #0009; }
.sleeve { position: relative; margin: 0; transition: transform .2s; }
.sleeve:hover { transform: translateY(-6px) rotate(-2deg); }
.sleeve img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 6px 12px #000a; }
.sleeve figcaption { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 4px; font: 700 9px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; border-radius: 2px; }
.sleeve figcaption.lock { background: #120b1de6; color: #f3c76c; }
.sleeve figcaption.free { background: #f3c76c; color: #120b1d; }
.sleeve:has(.lock) img { filter: saturate(.55) brightness(.75); }
/* comics: the DEROS rack, comic-shop colours */
.reward-deros { background-color: #fff3d6; background-image: radial-gradient(#e7c98a 1.2px, transparent 1.3px); background-size: 14px 14px; color: #1a1408; border: 4px solid #1a1408; box-shadow: 10px 10px 0 #1a1408; }
.reward-deros .reward-k { color: #c4140c; }
.reward-deros h3 { font-family: var(--comic); font-weight: 400; letter-spacing: .03em; color: #e2231a; text-transform: uppercase; text-shadow: 3px 3px 0 #ffe14a, 5px 5px 0 #1a1408; }
.reward-deros .reward-how li::before { color: #e2231a; }
.reward-deros .reward-more { color: #c4140c; }
.reward-deros .btn { background: #e2231a; color: #fff; border: 2px solid #1a1408; box-shadow: 5px 5px 0 #1a1408; font-family: var(--comic); font-weight: 400; letter-spacing: .06em; }
.reward-deros .btn.ghost { background: #fff; color: #1a1408; }
.r-rack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; background: #ffe14a; border: 3px solid #1a1408; box-shadow: 6px 6px 0 #1a1408; }
.r-issue { margin: 0; transition: transform .2s; } .r-issue:hover { transform: translateY(-6px) rotate(1.5deg); }
.r-issue img { display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; border: 2px solid #1a1408; }
.r-issue figcaption { margin-top: 6px; text-align: center; font: 400 15px var(--comic); letter-spacing: .04em; color: #1a1408; }
@media (max-width: 860px) {
  .reward { grid-template-columns: 1fr; } .reward-deros .reward-vis { order: 0; }
  .crate { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; } .sleeve figcaption { font-size: 8px; }
  .r-rack { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
  .reward-how li { font-size: 16px; }
}
/* AFVN running order: no inner scroller; click to open the whole list */
.cue-list { max-height: none; overflow: visible; }
.cue-box { margin-top: 18px; }
.cue-box > summary { list-style: none; cursor: pointer; display: inline-flex; padding: 10px 14px; border: 1px solid #f3c76c88; border-radius: 6px; font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #f3c76c; }
.cue-box > summary::-webkit-details-marker { display: none; }
.cue-box .cb-close, .cue-box[open] .cb-open { display: none; } .cue-box[open] .cb-close { display: inline; }
.cue-box[open] .cue-list { animation: pop .25s ease; }
/* RPG hero: the squad playing P.A.T.H. at a table fills the right; the four manuals sit over the left edge of it */
.ph-rpg .ph-bg { left: 30%; } .ph-rpg .ph-bg img { object-position: 50% 45%; }
.ph-rpg::before { background: linear-gradient(90deg, #15140e 0, #15140e 30%, #15140e00 48%), linear-gradient(0deg, #15140e 0, transparent 20%); }
.ph-rpg .ph-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.ph-rpg .ph-visual { justify-self: start; width: 70%; }
@media (max-width: 900px) { .ph-rpg .ph-bg { left: 0; } .ph-rpg::before { background: linear-gradient(0deg, #15140e 0, #15140e 55%, #15140e99 100%); } .ph-rpg .ph-grid { grid-template-columns: minmax(0, 1fr); } .ph-rpg .ph-visual { width: 100%; } }
.ph-rpg .ph-bg { left: 34%; } .ph-rpg .ph-bg img { object-position: 45% 50%; }
.ph-rpg::before { background: linear-gradient(90deg, #15140e 0, #15140e 34%, #15140e00 50%), linear-gradient(0deg, #15140e 0, transparent 18%); }
.book-row a { display: block; } .book-row img { width: 54px; height: 76px; aspect-ratio: auto; margin-right: -10px; }
.book-row span { color: #e9b04a; }
@media (max-width: 900px) {
  .ph-rpg .ph-bg { left: 0; } .ph-rpg .ph-bg img { object-position: 60% 30%; }
  .ph-rpg::before { background: linear-gradient(0deg, #15140e 0, #15140ef0 60%, #15140eaa 100%); }
}

/* ===== What's in the tour: six big picture cards ===== */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.feat { position: relative; display: flex; flex-direction: column; background: #1a1c14; border: 1px solid #33362a; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 34px #0007; transition: transform .25s, border-color .25s; }
.feat:hover { transform: translateY(-5px); border-color: #e9b04a88; }
.feat img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 1s ease; }
.feat:hover img { transform: scale(1.05); }
.feat-b { position: relative; padding: 22px 24px 26px; }
.feat-n { position: absolute; right: 18px; top: -38px; font: 800 64px/1 var(--stencil); color: #e9b04a; text-shadow: 0 4px 16px #000c; }
.feat-tag { margin: 0 0 8px; font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #e9b04a; }
.feat h3 { margin: 0 0 12px; font: 800 clamp(26px, 2.4vw, 32px)/1.05 var(--display); text-transform: uppercase; color: #f3ecd8; }
.feat p:last-child { margin: 0; font-size: 17px; line-height: 1.6; color: #d6ceb6; }
@media (max-width: 1000px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feats { grid-template-columns: 1fr; gap: 18px; } .feat-b { padding: 18px 18px 22px; } .feat-n { font-size: 52px; top: -32px; } }
/* Field Desk: the screen shows in full, its pitch sits underneath */
.slides[aria-label="The Field Desk"] .slide figcaption { position: static; background: #1a1c14; border-top: 3px solid #e9b04a; padding: 18px 24px 22px; }
.slides[aria-label="The Field Desk"] .slide figcaption b { font-size: clamp(24px, 2.6vw, 34px); color: #f3ecd8; }
.slides[aria-label="The Field Desk"] .slide figcaption span { font-size: 18px; line-height: 1.5; color: #d6ceb6; }
.desk-points { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0 30px; padding: 0; counter-reset: dp; }
.desk-points li { counter-increment: dp; position: relative; padding: 16px 16px 16px 58px; background: #1a1c14; border: 1px solid #33362a; border-radius: 8px; font-size: 16px; line-height: 1.4; color: #d6ceb6; }
.desk-points li::before { content: counter(dp, decimal-leading-zero); position: absolute; left: 14px; top: 12px; font: 800 30px/1 var(--stencil); color: #e9b04a; }
.desk-points b { display: block; font: 800 20px/1.1 var(--display); text-transform: uppercase; color: #f3ecd8; }
@media (max-width: 900px) { .desk-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .desk-points { grid-template-columns: 1fr; } }
/* Landing hero: the watercolour map of Vietnam, helicopter to Saigon, shown almost whole */
.ph-home .ph-bg { left: 26%; } .ph-home .ph-bg img { object-position: 30% 50%; }
.ph-home::before { background: linear-gradient(90deg, #0e100b 0, #0e100b 26%, #0e100b00 46%), linear-gradient(0deg, #0e100b 0, transparent 18%); }
@media (max-width: 900px) { .ph-home .ph-bg { left: 0; } .ph-home::before { background: linear-gradient(0deg, #0e100b 0, #0e100bee 55%, #0e100b99 100%); } }
.ph-home .ph-lede { max-width: 30ch; }
.ph-home .ph-bg { left: 30%; }
.ph-home::before { background: linear-gradient(90deg, #0e100b 0, #0e100b 30%, #0e100b00 46%), linear-gradient(0deg, #0e100b 0, transparent 18%); }
@media (max-width: 900px) { .ph-home .ph-bg { left: 0; } .ph-home::before { background: linear-gradient(0deg, #0e100b 0, #0e100bee 55%, #0e100b99 100%); } .ph-home .ph-lede { max-width: none; } }
/* footer: one readable palette on every section (the DEROS skin made it dark brown on black with red links) */
body .site-foot { --ink: #efe6cf; --dim: #c9c0a6; background: #0c0d09; color: #c9c0a6; }
body .site-foot h2 { color: #efe6cf; text-shadow: none; font-family: var(--display); }
body .site-foot a { color: #c9c0a6; }
body .site-foot a:hover { color: #fff; }
body .site-foot p a, body .site-foot .fine a { color: #e9b04a; }
body[data-skin] .site-foot .btn { background: #e9b04a; color: #15120a; border: 2px solid #e9b04a; box-shadow: 0 6px 0 #8a5f1a; font-family: var(--display); font-weight: 800; letter-spacing: .1em; }
/* Community: a player's personnel file, in the same dossier style as the soldier cards */
.pdos .pdos-id { display: grid; place-content: center; gap: 8px; width: 100%; aspect-ratio: 4/5; background: #33281a; color: #f3e7cc; text-align: center; border: 3px solid #1e1a10; }
.pdos .pdos-id span { font: 800 64px/1 var(--stencil); color: #e9b04a; } .pdos .pdos-id small { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 0 10px; }
.pdos .pdos-h { margin: 22px 0 10px; font: 800 14px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8f2416; border-bottom: 2px solid #33281a; padding-bottom: 6px; }
.pdos .sr-grid div { background: #fff8e2; border: 1px solid #c9b88a; } .pdos .sr-grid b { color: #2a2216; } .pdos .sr-grid span { color: #5a4f39; }
.pdos .sr-line { margin-top: 18px; } .pdos .sr-ends { color: #5a4f39; }
.pdos .sr-tl li { border-color: #c9b88a; } .pdos .sr-tl .d { color: #5a4f39; }
.pdos .sr-note { color: #5a4f39; }
.pdos-comics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; }
.pdos-comics img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border: 2px solid #1e1a10; }
.pdos-comics img.not { filter: grayscale(1) brightness(.55); opacity: .5; }
@media (max-width: 640px) { .pdos-comics { grid-template-columns: repeat(3, 1fr); } }
/* DEROS: twelve covers everywhere */
.cover-fan[aria-label="DEROS issues 1 to 12"] { --mid: 5.5; }
.cover-fan[aria-label="DEROS issues 1 to 12"] img { width: min(40%, calc((var(--ph-h) - 170px) / 1.5)); }
@keyframes fan12 { 0% { --sp: 4%; --tilt: 1deg; } 100% { --sp: 11%; --tilt: 3.5deg; } }
.cover-fan[aria-label="DEROS issues 1 to 12"] { animation-name: fan12; }
.cover-fan[aria-label="DEROS issues 1 to 12"]:hover img { transform: translate(-50%, -50%) translateX(calc((var(--i) - var(--mid)) * 14%)) rotate(calc((var(--i) - var(--mid)) * 4deg)); }
.cover-fan[aria-label="DEROS issues 1 to 12"] img:hover { transform: translate(-50%, -58%) translateX(calc((var(--i) - var(--mid)) * 14%)) rotate(0) scale(1.06) !important; }
.r-rack { grid-template-columns: repeat(4, 1fr); }
.pdos-comics { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 860px) { .r-rack { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .pdos-comics { grid-template-columns: repeat(4, 1fr); } }
.cover-fan .burst { z-index: 30; right: 0; }

/* consent banner (from afvn.fm): Google Analytics only after Accept */
.pv-consent { position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 45; max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 18px;
  background: linear-gradient(180deg, #3a2113, #241309); color: var(--ink); border: 1px solid var(--brass2); border-top: 3px solid var(--brass);
  border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); font: .9rem/1.5 var(--mono); }
.pv-consent p { margin: 0; flex: 1 1 320px; }
.pv-consent-tag { display: block; margin-bottom: 2px; font: 700 .66rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.pv-consent a { color: var(--amber-hot); }
.pv-consent-btns { flex: 0 0 auto; display: flex; gap: 10px; }
.pv-consent button { min-width: 104px; min-height: 44px; padding: .5em 1em; border: 0; border-radius: 3px; background: var(--amber); color: #17130a;
  font: 700 .82rem/1.1 var(--mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 2px 0 #8a6626; }
.pv-consent button:hover { background: var(--amber-hot); }
.pv-consent button.no { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line2); }
.pv-consent button.no:hover { box-shadow: inset 0 0 0 2px var(--amber); color: var(--amber-hot); }
.pv-consent button:focus-visible, .pv-consent a:focus-visible { outline: 3px solid var(--amber-hot); outline-offset: 2px; }
@media (max-width: 640px) {
  .pv-consent { left: 8px; right: 8px; padding: 10px 12px; gap: 8px 10px; flex-wrap: nowrap; font-size: .76rem; line-height: 1.4; }
  .pv-consent p { flex: 1 1 auto; min-width: 0; }
  .pv-consent-btns { flex-direction: column; gap: 6px; }
  .pv-consent button { min-width: 0; min-height: 36px; padding: .4em .8em; font-size: .72rem; }
}
.site-foot .consent-link { background: none; border: 0; padding: 0; font: inherit; color: #e9b04a; cursor: pointer; text-decoration: underline; }
.pv-consent { --amber: #e9b04a; --amber-hot: #ffd27a; --ink: #efe6cf; --line2: #6b6248; --mono: "Courier Prime", ui-monospace, monospace; background: #15170f; color: #efe6cf; border: 1px solid #4a4632; box-shadow: 0 16px 40px #000a; }
.legal .narrow { max-width: 760px; } .legal h2 { margin: 32px 0 10px; font: 800 24px var(--display); text-transform: uppercase; } .legal li { margin: 0 0 10px; } .legal a { color: #e9b04a; }