/* ==========================================================
   THE DAILY DRIVEL — house style
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,600;0,800;1,600&display=swap');

:root{
  --ink:#17130f;
  --news:#f3ece0;          /* newsprint */
  --news2:#e9dfcd;
  --red:#b51829;           /* quieter than a red-top. Understatement. */
  --red2:#a30f1f;
  --blue:#15427a;
  --yellow:#ffd400;
  --rule:#c9bba3;
  --muted:#6a5c4a;
  --shadow:0 14px 34px rgba(23,19,15,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--news);
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.014) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 80% -5%,rgba(210,23,42,.06),transparent 55%);
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:17px;
  line-height:1.55;
  overflow-x:clip;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
img{max-width:100%}

.wrap{max-width:1220px;margin:0 auto;padding:0 18px}

/* ---------- type ---------- */
.hl,h1,h2,h3,.kicker,.nav a,.btn,.masthead-title,.tag{font-family:Anton,Impact,'Haettenschweiler',sans-serif;font-weight:400;letter-spacing:.01em}
h1,h2,h3{line-height:.94;margin:0 0 .35em;text-transform:uppercase}
.deck,.byline,.nav,.btn,.label,.ui{font-family:Archivo,'Helvetica Neue',Arial,sans-serif}
.label{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red2)}
.byline{font-size:.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
p{margin:0 0 .9em}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:#fff;border-bottom:6px solid var(--red)}
.masthead-top{display:flex;align-items:center;gap:18px;padding:14px 0 10px;flex-wrap:wrap}
.masthead-title{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.8;letter-spacing:-.02em;margin:0}
.masthead-title .the{color:var(--red);}
.masthead-flag{background:var(--red);color:#fff;padding:6px 12px;font-family:Archivo,sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-2deg)}
.masthead-meta{margin-left:auto;text-align:right;font-family:Archivo,sans-serif;font-size:.76rem;line-height:1.5;color:#d8cbb8;text-transform:uppercase;letter-spacing:.06em}
.masthead-tools{display:flex;gap:8px;margin-top:8px;justify-content:flex-end;flex-wrap:wrap}

.nav{background:var(--news2);border-bottom:3px double var(--ink);position:sticky;top:0;z-index:30}
.nav-inner{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav-inner::-webkit-scrollbar{display:none}
.nav a{padding:11px 14px;font-size:.95rem;text-decoration:none;white-space:nowrap;text-transform:uppercase;border-right:1px solid var(--rule)}
.nav a:hover{background:var(--ink);color:#fff}
.nav a[aria-current="page"]{background:var(--red);color:#fff}

/* ---------- ticker ---------- */
.ticker{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;border-bottom:3px solid var(--ink)}
.ticker-track{display:inline-block;padding:9px 0;font-family:Archivo,sans-serif;font-weight:800;font-size:.86rem;letter-spacing:.04em;animation:roll 90s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker .sep{color:var(--yellow);margin:0 16px}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:0;cursor:pointer;font-size:.95rem;text-transform:uppercase;padding:12px 16px;background:var(--ink);color:#fff;text-decoration:none;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);background:var(--red)}
.btn.red{background:var(--red)}
.btn.red:hover{background:var(--ink);box-shadow:4px 4px 0 var(--red)}
.btn.small{padding:8px 12px;font-size:.82rem}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.tool{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;padding:7px 11px;font-family:Archivo,sans-serif;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.tool:hover{background:var(--red);border-color:var(--red)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---------- layout ---------- */
.page{padding:26px 0 60px}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:26px}
.cols>*,.cols-2>*,.cols-3>*,.stack>*{min-width:0}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.stack{display:grid;gap:18px}
.rule{border:0;border-top:3px double var(--ink);margin:26px 0}

/* ---------- stories ---------- */
.splash{border:4px solid var(--ink);background:#fffdf7;padding:24px;box-shadow:var(--shadow);position:relative}
.splash .label{display:inline-block;background:var(--red);color:#fff;padding:4px 9px;letter-spacing:.16em}
.splash h1{font-size:clamp(2.6rem,6.4vw,5rem);margin:12px 0 10px}
.splash .deck{font-size:1.15rem;font-weight:600;color:#3d3227;margin-bottom:12px}
.splash .art{font-size:clamp(4rem,12vw,8rem);line-height:1;text-align:center;filter:drop-shadow(0 10px 6px rgba(0,0,0,.12))}
.starburst{position:absolute;right:-14px;top:-18px;background:var(--yellow);border:3px solid var(--ink);padding:10px 12px;font-family:Anton,sans-serif;font-size:.9rem;text-transform:uppercase;transform:rotate(7deg);max-width:150px;text-align:center;line-height:1.05}

.story{border-top:3px solid var(--ink);padding-top:12px}
.story h2{font-size:1.75rem;margin-bottom:6px}
.story h3{font-size:1.3rem}
.story p{font-size:.98rem;color:#3d3227}
.story .quote{border-left:4px solid var(--red);padding-left:12px;font-style:italic;color:#4a3c2e}

.box{border:3px solid var(--ink);background:#fffdf7;padding:18px}
.box.tint{background:#fff7e0}
.box.dark{background:var(--ink);color:#f3ece0;border-color:var(--ink)}
.box.dark p{color:#d8cbb8}
.box.red{background:var(--red);color:#fff;border-color:var(--ink)}
.box h3{font-size:1.3rem}
.box h2{font-size:1.9rem}

.mini{display:grid;gap:10px}
.mini li{list-style:none;border-bottom:1px dotted var(--rule);padding-bottom:8px;font-size:.95rem}
.mini li:last-child{border:0}

/* ---------- odds and ends ---------- */
.gauge{background:var(--news2);border:2px solid var(--ink);height:22px;overflow:hidden}
.gauge i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--red) 0 8px,var(--red2) 8px 16px);width:50%;transition:width .5s ease}
.big-num{font-family:Anton,sans-serif;font-size:3.4rem;line-height:1}

.table{width:100%;border-collapse:collapse;font-family:Archivo,sans-serif;font-size:.9rem}
.table th{background:var(--ink);color:#fff;text-align:left;padding:8px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.table td{padding:8px;border-bottom:1px solid var(--rule)}
.table tr:nth-child(even) td{background:rgba(0,0,0,.03)}

.field{display:flex;gap:8px;flex-wrap:wrap}
.field input,.field select,.field textarea{flex:1;min-width:140px;font:inherit;font-family:Archivo,sans-serif;padding:11px 12px;border:2px solid var(--ink);background:#fffdf7}
.field textarea{width:100%;min-height:90px;resize:vertical}

.ads{columns:3;column-gap:20px}
.ad{break-inside:avoid;border-bottom:1px dotted var(--rule);padding:12px 0;font-size:.92rem}
.ad b{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;display:block;font-size:1.05rem}
.ad .price{font-family:Archivo,sans-serif;font-weight:800;color:var(--red2);font-size:.85rem}

.letter{border:2px solid var(--ink);background:#fffdf7;padding:16px;break-inside:avoid}
.letter p{font-size:.97rem}
.letter .sig{font-family:Archivo,sans-serif;font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--red2)}
.letter .ed{border-top:1px dotted var(--rule);margin-top:10px;padding-top:8px;font-size:.88rem;color:var(--muted)}

.sign-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sign{background:#fffdf7;border:2px solid var(--ink);padding:8px 2px;text-align:center;cursor:pointer;font-family:Archivo,sans-serif;font-weight:700;font-size:.68rem}
.sign b{display:block;font-size:1.35rem;font-weight:400}
.sign[aria-pressed="true"]{background:var(--ink);color:#fff}

.pill{display:inline-block;background:var(--ink);color:#fff;font-family:Archivo,sans-serif;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px}
.pill.green{background:#1c6b46}
.pill.yellow{background:var(--yellow);color:var(--ink)}

/* ---------- poo report ---------- */
.board{background:var(--ink);border:5px solid var(--yellow);padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hole{position:relative;aspect-ratio:1.3;background:#372a1c;overflow:hidden;display:grid;place-items:end center;padding-bottom:6px;border:0;cursor:pointer;touch-action:manipulation}
.hole:hover{background:#463523;transform:none;box-shadow:none}
.bowl{font-size:clamp(2rem,5vw,3.2rem);position:relative;z-index:2;pointer-events:none}
.item{position:absolute;left:50%;bottom:38%;z-index:1;pointer-events:none;font-size:clamp(1.9rem,4.4vw,3rem);transform:translate(-50%,110%) scale(.3);opacity:0;transition:transform .16s ease,opacity .12s ease}
.item.up{transform:translate(-50%,0) scale(1);opacity:1}
.item.golden{filter:drop-shadow(0 0 9px var(--yellow)) sepia(1) saturate(5) brightness(1.2)}
.hole.hit{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px) rotate(-2deg)}75%{transform:translateX(4px) rotate(2deg)}}
.float{position:absolute;top:6%;left:50%;transform:translateX(-50%);font-family:Anton,sans-serif;font-size:1.5rem;color:var(--yellow);z-index:3;pointer-events:none;animation:up .8s ease forwards}
.float.neg{color:#ff8fab}
@keyframes up{to{transform:translate(-50%,-38px);opacity:0}}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat{border:2px solid var(--ink);text-align:center;padding:8px 4px;background:#fffdf7}
.stat span{display:block;font-family:Archivo,sans-serif;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat strong{font-family:Anton,sans-serif;font-weight:400;font-size:1.9rem}
.quiz-opt{display:block;width:100%;text-align:left;background:#fffdf7;border:2px solid var(--ink);padding:13px 14px;margin-bottom:8px;font:inherit;font-family:Archivo,sans-serif;font-weight:600;cursor:pointer}
.quiz-opt:hover{background:var(--yellow)}
.pips{display:flex;gap:5px;margin-bottom:12px}
.pips i{width:30px;height:6px;background:var(--rule)}
.pips i.on{background:var(--red)}
.pass{border:3px solid var(--ink);background:#fffdf7;box-shadow:var(--shadow)}
.pass-top{background:var(--ink);color:#fff;padding:9px 14px;display:flex;justify-content:space-between;font-family:Archivo,sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.14em}
.pass-top span.p{background:var(--yellow);color:var(--ink);padding:2px 8px}
.pass-body{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px;align-items:center}
.pass-photo{width:74px;height:88px;border:2px dashed var(--red);display:grid;place-items:center;font-size:2.6rem;background:var(--news2)}
.pass-name{font-family:Anton,sans-serif;font-size:1.3rem;text-transform:uppercase;line-height:1.05}
.pass-meta{font-family:Archivo,sans-serif;font-size:.8rem;color:var(--muted);margin-top:6px;line-height:1.5}
.barcode{height:22px;margin:0 14px 12px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px,var(--ink) 9px 10px,transparent 10px 13px)}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#d8cbb8;padding:46px 0 70px;border-top:6px solid var(--red);text-align:center}
.footer h2{color:#fff;font-size:2rem}
.credit{max-width:620px;margin:26px auto;border:2px solid rgba(255,255,255,.25);padding:22px;position:relative;background:rgba(255,255,255,.05)}
.credit .medal{position:absolute;top:-20px;right:-10px;font-size:2.4rem;transform:rotate(12deg)}
.credit .who{font-family:Anton,sans-serif;font-size:clamp(2.2rem,6vw,3.4rem);color:#fff;line-height:1;text-transform:uppercase}
.credit .role{font-family:Archivo,sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.small-print{font-size:.76rem;opacity:.6;max-width:720px;margin:22px auto 0}

/* ---------- floaty bits ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,150px);background:var(--ink);color:#fff;border:2px solid var(--yellow);padding:12px 20px;font-family:Archivo,sans-serif;font-weight:800;z-index:80;transition:transform .3s ease;max-width:calc(100vw - 80px);text-align:center}
.toast.show{transform:translate(-50%,0)}
.toot{position:fixed;left:16px;bottom:16px;z-index:70;width:60px;height:60px;border-radius:50%;border:3px solid #fff;background:var(--red);color:#fff;font-size:1.7rem;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.toot small{position:absolute;top:-6px;right:-6px;background:var(--ink);border:2px solid #fff;font-family:Archivo,sans-serif;font-size:.68rem;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.toot.puff{animation:puff .35s ease}
@keyframes puff{40%{transform:scale(1.25,.8)}70%{transform:scale(.92,1.1)}}
.drop{position:fixed;top:-12vh;z-index:90;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(125vh) rotate(720deg)}}
.swap{animation:swap .4s ease}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#paper.press-out{animation:pressOut .9s ease forwards}
#paper.press-in{animation:pressIn .5s ease}
@keyframes pressOut{60%{transform:translateY(-8px) rotate(-1deg)}100%{transform:translateY(120vh) rotate(4deg);opacity:0}}
@keyframes pressIn{from{transform:translateY(-60px);opacity:0}to{transform:none;opacity:1}}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .cols,.cols-3,.cols-2{grid-template-columns:1fr}
  .ads{columns:2}
  .sign-grid{grid-template-columns:repeat(4,1fr)}
  .masthead-meta{margin-left:0;text-align:left;width:100%}
  .masthead-tools{justify-content:flex-start}
}
@media(max-width:560px){
  .ads{columns:1}
  .board{gap:8px;padding:9px}
  .starburst{right:-6px;top:-14px;font-size:.76rem;max-width:118px}
}
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation-duration:400s!important}
  .drop,#paper.press-out,#paper.press-in{animation-duration:.01s}
  html{scroll-behavior:auto}
}


/* ---------- photographs ----------
   Everything is forced to black and white with a slight print
   contrast, so any phone snap looks like it was printed on
   newsprint at 4am by a machine that is nearly broken. */
.photo{border:3px solid var(--ink);background:var(--news2);margin:0 0 14px}
.photo figure{margin:0}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  filter:grayscale(1) contrast(1.18) brightness(1.03);mix-blend-mode:multiply}
.photo figcaption{border-top:2px solid var(--ink);padding:8px 10px;font-family:Archivo,sans-serif;
  font-size:.8rem;line-height:1.45;color:#3d3227;background:#fffdf7}
.photo figcaption b{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em}

/* Shown until a real image file exists. Deliberately plain. */
.photo-missing{aspect-ratio:3/2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:18px;background:
  repeating-linear-gradient(45deg,#e3d7c3 0 10px,#e9dfcd 10px 20px)}
.photo-missing .pm-icon{font-size:1.8rem;opacity:.5}
.photo-missing .pm-file{font-family:Archivo,sans-serif;font-weight:800;font-size:.82rem;
  background:var(--ink);color:#fff;padding:3px 8px}
.photo-missing .pm-brief{font-family:Archivo,sans-serif;font-size:.78rem;color:#5b4a36;max-width:32ch;line-height:1.45}

.splash .photo{margin:14px 0 16px}

.photo-missing .pm-topic{font-family:Archivo,sans-serif;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8a7862}
.photo-apology{display:block;margin-top:6px;padding-top:6px;border-top:1px dotted var(--rule);
  font-style:italic;color:#6a5c4a}

/* ---------- crossword ---------- */
.xwrap{margin:16px 0;max-width:100%}
.xgrid{display:grid;gap:0;border:3px solid var(--ink);background:var(--ink);
  width:100%;max-width:min(100%,520px);margin:0 auto}
.xcell{position:relative;background:#fffdf7;border:1px solid var(--ink);aspect-ratio:1;min-width:0}
.xcell.blocked{background:var(--ink)}
.xnum{position:absolute;top:1px;left:2px;font-family:Archivo,sans-serif;font-size:.56rem;font-weight:800;color:#8a7862;pointer-events:none}
.xcell input{width:100%;height:100%;border:0;background:transparent;text-align:center;
  font-family:Anton,sans-serif;font-size:1.05rem;text-transform:uppercase;color:var(--ink);padding:0}
.xcell input:focus{background:var(--yellow);outline:none}
.xcell input.right{color:#1c6b46}
.xcell input.wrong{color:var(--red);background:#ffe9ec}
.clues{margin:6px 0 0;padding-left:22px;font-size:.9rem;line-height:1.5}
.clues li{margin-bottom:6px}
@media(max-width:560px){.xcell input{font-size:.75rem}.xnum{font-size:.45rem}}

.wrap{max-width:1220px;margin:0 auto;padding:0 18px;width:100%}
.table{table-layout:fixed;word-wrap:break-word}
.splash,.box,.letter{overflow-wrap:anywhere}

/* ---------- extra games ---------- */
.gc-opts{display:grid;gap:6px;margin-bottom:10px}
.gc-opt{background:#fffdf7;border:2px solid var(--ink);text-align:left;padding:10px 12px;
  font:inherit;font-family:Archivo,sans-serif;font-size:.86rem;cursor:pointer;line-height:1.4}
.gc-opt:hover{background:var(--yellow);transform:none;box-shadow:none}
.gc-opt.right{background:#d8f0e2;border-color:#1c6b46}
.gc-opt.wrong{background:#ffe0e5;border-color:var(--red)}

.mk-bar{height:8px;background:var(--news2);border:2px solid var(--ink);margin:10px 0 8px}
.mk-bar i{display:block;height:100%;width:100%;background:var(--red);transition:width .1s linear}
.mk-grid{display:grid;gap:2px;margin-bottom:10px}
.mk-cell{aspect-ratio:1;border:1px solid var(--rule);background:#fffdf7;cursor:pointer;padding:0;
  font-size:clamp(.7rem,2.4vw,1.2rem);display:grid;place-items:center;min-width:0}
.mk-cell:hover{background:var(--yellow);transform:none;box-shadow:none}
.mk-cell.mk-wrong{background:#ffe0e5}

.bd-grid{display:grid;gap:2px;border:3px solid var(--ink);background:var(--ink);margin:12px 0;
  max-width:420px}
.bd-cell{aspect-ratio:1;background:#e9dfcd;display:grid;place-items:center;
  font-size:clamp(1rem,3.4vw,1.6rem);min-width:0}
.bd-kerb{background:#cfe6d8}
.bd-house{background:#f6e6c8}
.bd-you{background:var(--yellow)}
.bd-pad{display:grid;grid-template-columns:repeat(3,46px);gap:4px;justify-content:center;margin:8px 0}
.bd-pad button{padding:8px 0}
.bd-pad [data-mv="up"]{grid-column:2}
.bd-pad [data-mv="left"]{grid-column:1}
.bd-pad [data-mv="right"]{grid-column:3}
.bd-pad [data-mv="down"]{grid-column:2}

/* ==========================================================
   PRESS BARON — three-column layout
   Left column is pinned: the counter and the button never
   scroll away. Middle and right scroll independently.
   ========================================================== */
body.baron-mode .footer{display:none}
body.baron-mode #paper{padding:0}

.baron{
  display:grid;
  grid-template-columns:300px minmax(0,1fr) 320px;
  height:calc(100vh - 150px);
  min-height:520px;
  border-top:3px solid var(--ink);
  background:var(--news);
}
.baron>section{overflow-y:auto;overflow-x:hidden;min-width:0}
.baron>section::-webkit-scrollbar{width:10px}
.baron>section::-webkit-scrollbar-thumb{background:var(--rule)}

/* ---- LEFT ---- */
.baron-left{background:var(--ink);color:#f3ece0;border-right:4px solid var(--red);
  display:flex;flex-direction:column;position:relative}
.bl-inner{padding:18px 16px 24px;text-align:center;margin:auto 0}
.bl-era{font-family:Archivo,sans-serif;font-size:.64rem;font-weight:800;letter-spacing:.16em;
  color:var(--yellow);margin-bottom:10px;min-height:1em}
.bl-count{font-family:Anton,sans-serif;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;color:#fff;
  word-break:break-word}
.bl-sub{font-family:Archivo,sans-serif;font-size:.82rem;color:#c9b7a5;margin-bottom:14px}
.bl-paper{width:clamp(130px,72%,190px);aspect-ratio:1;margin:0 auto;border-radius:50%;
  border:4px solid var(--yellow);
  background:radial-gradient(circle at 35% 30%,#54402c,#2b1d12);
  display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .07s ease}
.bl-paper:hover{transform:scale(1.03);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.bl-paper:active{transform:scale(.94)}
.bl-art{font-size:clamp(3.4rem,8vw,5rem);filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.bl-verb{font-family:Anton,sans-serif;font-size:.95rem;letter-spacing:.06em;color:var(--yellow);
  margin-top:12px;text-transform:uppercase}
.bl-flavour{font-size:.8rem;color:#c9b7a5;font-style:italic;min-height:3.4em;margin:12px 4px 0;line-height:1.45}
.bl-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px;text-align:left}
.bl-stats div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:6px 8px}
.bl-stats span{display:block;font-family:Archivo,sans-serif;font-size:.6rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#9d8d7b}
.bl-stats b{font-family:Anton,sans-serif;font-weight:400;font-size:1.05rem;color:#fff}
.bl-foot{display:flex;gap:6px;margin-top:14px;justify-content:center}
.bl-foot .btn{background:transparent;color:#c9b7a5;border-color:rgba(255,255,255,.3)}
.bl-foot .btn:hover{background:var(--red);color:#fff;border-color:var(--red)}

.baron-float{position:absolute;transform:translate(-50%,0);font-family:Anton,sans-serif;
  font-size:1.1rem;color:var(--yellow);pointer-events:none;z-index:5;
  animation:bfloat 1.1s ease forwards;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.baron-float.crit{font-size:1.5rem;color:#fff}
@keyframes bfloat{to{transform:translate(-50%,-70px);opacity:0}}

.buffs{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:10px;min-height:1.4rem}
.buff{background:var(--yellow);color:var(--ink);font-family:Archivo,sans-serif;font-weight:800;
  font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px}

/* ---- MIDDLE ---- */
.baron-mid{background:var(--news);padding:0 0 30px}
.bm-wire{position:sticky;top:0;z-index:4;background:var(--ink);color:#f3ece0;
  border-bottom:3px solid var(--yellow);padding:12px 18px;text-align:center}
.bm-wire p{margin:0;font-family:Archivo,sans-serif;font-size:.9rem;font-weight:600;line-height:1.45}
.bm-panel{border-bottom:2px solid var(--rule);padding:18px}
.bm-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.bm-head h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:0}
.bm-head h3{font-size:1.2rem;margin:0}
.archive{background:#e8f8f0;border:2px solid var(--green);padding:12px;margin:12px 0}
.archive p{margin:8px 0 0;font-size:.92rem;line-height:1.5;color:#1f4a38}
.era-track{display:flex;gap:4px;margin:14px 0 8px}
.era-track i{flex:1;height:8px;background:var(--rule)}
.era-track i.done{background:var(--brown2)}
.era-track i.now{background:var(--red)}

.up-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.up{display:grid;gap:3px;text-align:left;background:#fffdf7;border:2px solid var(--ink);
  padding:9px 10px;cursor:pointer;font:inherit}
.up:hover{background:var(--yellow);transform:none;box-shadow:none}
.up.poor{opacity:.5;cursor:not-allowed}
.up.got{background:#e6f2ea;border-color:#1c6b46;cursor:default;opacity:1}
.up b{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:.9rem;line-height:1.15}
.up span{font-size:.78rem;color:#5b4a36;line-height:1.4}
.up i{font-style:normal;font-family:Archivo,sans-serif;font-weight:800;font-size:.74rem;color:var(--red2)}

.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.ach{border:2px solid var(--rule);padding:7px;background:#fffdf7;opacity:.45}
.ach.got{opacity:1;border-color:var(--ink);background:#fff7e0}
.ach b{display:block;font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:.8rem}
.ach span{font-size:.7rem;color:#5b4a36;line-height:1.3}

/* ---- RIGHT ---- */
.baron-right{background:var(--news2);border-left:3px solid var(--ink);
  position:relative;z-index:6;isolation:isolate}
.baron-mid{position:relative;z-index:1;isolation:isolate}
.store-head{position:sticky;top:0;z-index:4;background:var(--ink);color:#fff;padding:12px 14px 10px}
.store-head h3{margin:0 0 8px;font-size:1.1rem;letter-spacing:.1em;text-align:center}
.bulk{display:flex;gap:3px}
.bulk button{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-family:Archivo,sans-serif;font-weight:800;font-size:.72rem;padding:5px 0;cursor:pointer}
.bulk button:hover{background:var(--red);transform:none;box-shadow:none}
.bulk button.on{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

.shop{display:block}
.shop-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  width:100%;text-align:left;background:#fffdf7;border:0;border-bottom:2px solid var(--rule);
  padding:10px 12px;cursor:pointer;font:inherit}
.shop-row:hover{background:var(--yellow);transform:none;box-shadow:none}
.shop-row.poor{opacity:.55;cursor:not-allowed;background:#f0e7d8}
.shop-row.locked{pointer-events:none;opacity:.4}
.sr-icon{font-size:1.7rem;line-height:1}
.sr-body{display:grid;gap:1px;min-width:0}
.sr-name{font-family:Anton,sans-serif;font-size:.98rem;text-transform:uppercase;letter-spacing:.02em}
.sr-desc{font-size:.72rem;color:#5b4a36;line-height:1.35}
.sr-cost{font-family:Archivo,sans-serif;font-size:.74rem;font-weight:800;color:var(--red2)}
.sr-own{font-family:Anton,sans-serif;font-size:1.5rem;color:var(--brown2)}

/* golden edition */
.golden{position:fixed;z-index:75;width:74px;height:74px;border-radius:50%;border:3px solid var(--ink);
  background:radial-gradient(circle at 35% 30%,#fff3b0,var(--yellow));cursor:pointer;
  display:grid;place-items:center;font-size:1.9rem;padding:0;
  box-shadow:0 0 0 6px rgba(255,212,0,.35),0 10px 26px rgba(0,0,0,.28);
  animation:goldBob 1.6s ease-in-out infinite}
.golden span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--ink);color:var(--yellow);font-family:Archivo,sans-serif;font-weight:800;
  font-size:.58rem;letter-spacing:.1em;padding:2px 7px}
@keyframes goldBob{0%,100%{margin-top:0}50%{margin-top:-12px}}

/* ---- responsive: stack, with the left panel stuck to the top ---- */
@media(max-width:980px){
  .baron{grid-template-columns:1fr;height:auto;min-height:0}
  .baron>section{overflow:visible}
  .baron-left{position:sticky;top:0;z-index:20;border-right:0;border-bottom:4px solid var(--red)}
  .bl-inner{padding:12px 14px 16px;margin:0}
  .bl-paper{width:110px}
  .bl-art{font-size:2.6rem}
  .bl-flavour{display:none}
  .bl-stats{grid-template-columns:repeat(4,1fr)}
  .baron-right{border-left:0;border-top:3px solid var(--ink)}
}
@media(prefers-reduced-motion:reduce){.golden{animation:none}.baron-float{animation-duration:.01s}}

/* ==========================================================
   PRESS BARON — atmosphere, frames, editions
   ========================================================== */

/* ---- the sky behind the button, one class per era ---- */
.baron-left{position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#3a2a1b 0%,#17130f 68%)}
.bl-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bl-inner{position:relative;z-index:2}
.sky-bit{position:absolute;top:105%;opacity:.22;animation:skyRise linear forwards;
  filter:grayscale(.3)}
@keyframes skyRise{
  0%{transform:translateY(0) rotate(0);opacity:0}
  12%{opacity:.26}
  88%{opacity:.26}
  100%{transform:translateY(-115vh) rotate(220deg);opacity:0}
}
.baron-left::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 34%,transparent 42%,rgba(0,0,0,.55) 100%)}

.era-shout    {background:radial-gradient(circle at 50% 32%,#4a3720,#17130f 70%)}
.era-print    {background:radial-gradient(circle at 50% 32%,#3c3326,#14110d 70%)}
.era-coffee   {background:radial-gradient(circle at 50% 32%,#4a3320,#191009 70%)}
.era-penny    {background:radial-gradient(circle at 50% 32%,#4a2820,#18100c 70%)}
.era-wire     {background:radial-gradient(circle at 50% 32%,#2d3a4a,#0e1219 70%)}
.era-broadcast{background:radial-gradient(circle at 50% 32%,#3a3520,#15130b 70%)}
.era-screen   {background:radial-gradient(circle at 50% 32%,#20323a,#0b1114 70%)}
.era-feed     {background:radial-gradient(circle at 50% 32%,#1f3348,#0a0f16 70%)}
.era-algo     {background:radial-gradient(circle at 50% 32%,#16323a,#060f12 70%)}
.era-neural   {background:radial-gradient(circle at 50% 32%,#33204a,#0d0718 70%)}
.era-last     {background:radial-gradient(circle at 50% 32%,#2a2320,#0b0908 70%)}
.era-orbit    {background:radial-gradient(circle at 50% 32%,#1b2440,#050712 70%)}
.era-contact  {background:radial-gradient(circle at 50% 32%,#133a30,#030f0c 70%)}
.era-galactic {background:radial-gradient(circle at 50% 32%,#241640,#060418 70%)}
.era-temporal {background:radial-gradient(circle at 50% 32%,#40331a,#120d04 70%)}
.era-parallel {background:radial-gradient(circle at 50% 32%,#3a1c40,#100518 70%)}
.era-omni     {background:radial-gradient(circle at 50% 32%,#123a44,#020f13 70%)}
.era-final    {background:radial-gradient(circle at 50% 32%,#241f1c,#000 72%)}

/* the disc itself picks up the era tint */
.bl-paper{position:relative;z-index:2;background:radial-gradient(circle at 35% 30%,#5b452e,#241a10)}
.era-wire .bl-paper,.era-screen .bl-paper,.era-feed .bl-paper{background:radial-gradient(circle at 35% 30%,#2f4a5c,#11202b)}
.era-neural .bl-paper,.era-galactic .bl-paper,.era-parallel .bl-paper{background:radial-gradient(circle at 35% 30%,#4a3068,#1a1030)}
.era-contact .bl-paper{background:radial-gradient(circle at 35% 30%,#1f6450,#07261d)}
.era-orbit .bl-paper,.era-omni .bl-paper{background:radial-gradient(circle at 35% 30%,#2b3a68,#0b1230)}

/* flavour line: fixed slot, so changing text cannot move the layout */
.bl-flavour{height:3.6em;overflow:hidden;display:flex;align-items:center;justify-content:center;
  margin:12px 4px 0}
.bl-flavour p{margin:0;font-size:.78rem;color:#c9b7a5;font-style:italic;line-height:1.4}

/* ---- tabbed frames ---- */
.bm-tabs{position:sticky;top:44px;z-index:3;display:flex;gap:2px;background:var(--news2);
  border-bottom:3px double var(--ink);overflow-x:auto;scrollbar-width:none}
.bm-tabs::-webkit-scrollbar{display:none}
.bm-tabs button{flex:1 0 auto;background:transparent;border:0;border-right:1px solid var(--rule);
  font-family:Anton,sans-serif;font-size:.88rem;text-transform:uppercase;letter-spacing:.03em;
  padding:10px 14px;cursor:pointer;white-space:nowrap;color:var(--ink)}
.bm-tabs button:hover{background:var(--yellow);transform:none;box-shadow:none}
.bm-tabs button.on{background:var(--red);color:#fff}
.bm-tabs i{font-style:normal;background:var(--ink);color:var(--yellow);border-radius:999px;
  font-family:Archivo,sans-serif;font-size:.62rem;padding:1px 6px;margin-left:4px}
.bm-tabs button.on i{background:#fff;color:var(--red)}
.bm-frame[hidden]{display:none}

/* ---- legacy tiers ---- */
.tier-list{display:grid;gap:6px}
.tier{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  border:2px solid var(--rule);background:#fffdf7;padding:10px;opacity:.5}
.tier.got{opacity:1;border-color:var(--ink);background:#fff7e0}
.tier-at{font-family:Anton,sans-serif;font-size:1.6rem;color:var(--brown2);min-width:34px;text-align:center}
.tier.got .tier-at{color:var(--red)}
.tier-body{display:grid;gap:2px;min-width:0}
.tier-body b{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:.95rem}
.tier-body i{font-style:normal;font-family:Archivo,sans-serif;font-weight:800;font-size:.76rem;color:var(--red2)}
.tier-body em{font-style:italic;font-size:.8rem;color:#5b4a36;line-height:1.4}

/* ---- golden edition collection ---- */
.gold-list{display:grid;gap:8px}
.gold-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
  border:2px solid var(--ink);background:#fffdf7;padding:10px}
.gold-card.locked{opacity:.45;border-style:dashed}
.gold-body{display:grid;gap:2px;min-width:0}
.gold-body b{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:.95rem}
.gold-body i{font-style:normal;font-size:.82rem;color:#5b4a36}
.gold-body em{font-style:normal;font-family:Archivo,sans-serif;font-size:.72rem;font-weight:700;color:var(--red2)}
.gold-chip{width:52px;height:52px;min-width:52px;flex:0 0 52px;display:grid;place-items:center;
  font-size:1.5rem;border:2px solid var(--ink);background:#fff7e0;pointer-events:none;
  overflow:hidden;animation:none!important;clip-path:none!important;position:static}
.gold-chip.gold-round{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,var(--yellow))}
.gold-chip.gold-stamp{background:repeating-linear-gradient(45deg,#ff5a6a 0 6px,#e03047 6px 12px)}
.gold-chip.gold-note{background:linear-gradient(160deg,#9fe3b8,#3fae74)}
.gold-chip.gold-cloud{background:linear-gradient(180deg,#eef3f7,#b9c8d6)}
.gold-chip.gold-envelope{background:linear-gradient(160deg,#efdcc0,#c8a878)}
.gold-chip.gold-star{background:conic-gradient(from 0deg,#ffd400,#ff8fab,#7fd1ae,#ffd400)}
.gold-chip.gold-black{border-radius:50%;background:radial-gradient(circle at 40% 35%,#4a4a55,#0b0b10);color:#fff}

/* ---- the floating editions: one shape each ---- */
.golden{position:fixed;z-index:75;width:74px;height:74px;cursor:pointer;padding:0;
  display:grid;place-items:center;font-size:1.9rem;border:3px solid var(--ink);
  animation:goldBob 1.6s ease-in-out infinite}
.golden span{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--ink);color:var(--yellow);font-family:Archivo,sans-serif;font-weight:800;
  font-size:.56rem;letter-spacing:.08em;padding:2px 7px}

.golden.gold-round{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,var(--yellow));
  box-shadow:0 0 0 6px rgba(255,212,0,.35),0 10px 26px rgba(0,0,0,.3)}
.golden.gold-stamp{border-radius:4px;background:repeating-linear-gradient(45deg,#ff5a6a 0 8px,#e03047 8px 16px);
  box-shadow:0 0 0 5px rgba(224,48,71,.3),0 10px 26px rgba(0,0,0,.3);
  animation:goldSpin 2.4s linear infinite}
.golden.gold-note{border-radius:3px;width:104px;height:56px;
  background:linear-gradient(160deg,#9fe3b8,#3fae74);
  box-shadow:0 0 0 5px rgba(63,174,116,.3),0 10px 26px rgba(0,0,0,.3)}
.golden.gold-cloud{border-radius:50% 50% 46% 46%/60% 60% 40% 40%;width:92px;height:64px;
  background:linear-gradient(180deg,#eef3f7,#b9c8d6);
  box-shadow:0 0 0 5px rgba(185,200,214,.35),0 10px 26px rgba(0,0,0,.25);
  animation:goldDrift 3.4s ease-in-out infinite}
.golden.gold-envelope{border-radius:3px;width:96px;height:62px;
  background:linear-gradient(160deg,#efdcc0,#c8a878);
  box-shadow:0 0 0 5px rgba(200,168,120,.35),0 10px 26px rgba(0,0,0,.3)}
.golden.gold-envelope::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 48%,rgba(0,0,0,.18) 50%,transparent 52%)}
.golden.gold-star{width:86px;height:86px;border:0;background:conic-gradient(from 0deg,#ffd400,#ff8fab,#7fd1ae,#ffd400);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 0 12px rgba(255,212,0,.8));animation:goldSpin 5s linear infinite}
.golden.gold-star span{bottom:-8px}
.golden.gold-black{border-radius:50%;background:radial-gradient(circle at 40% 35%,#4a4a55,#0b0b10);
  border-color:#000;box-shadow:0 0 0 6px rgba(0,0,0,.4),0 0 22px rgba(120,0,40,.6);
  animation:goldPulse 1.2s ease-in-out infinite}
.golden.gold-black span{background:#7a0c22;color:#fff}

@keyframes goldBob{0%,100%{margin-top:0}50%{margin-top:-12px}}
@keyframes goldSpin{to{transform:rotate(360deg)}}
@keyframes goldDrift{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
@keyframes goldPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}

/* ---- trophy filter ---- */
.troph-filter{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.troph-filter button{background:#fffdf7;border:2px solid var(--ink);font-family:Archivo,sans-serif;
  font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:5px 9px;cursor:pointer}
.troph-filter button:hover{background:var(--yellow);transform:none;box-shadow:none}
.troph-filter button.on{background:var(--ink);color:#fff}

@media(max-width:980px){
  .bm-tabs{top:0}
  .gold-note,.gold-cloud,.gold-envelope{width:76px;height:50px}
}
@media(prefers-reduced-motion:reduce){
  .sky-bit,.golden,.gold-stamp,.gold-star,.gold-cloud,.gold-black{animation:none}
}

/* ---------- custom artwork slots (all optional) ---------- */
.masthead-title.has-art{background-repeat:no-repeat;background-position:left center;
  background-size:contain;color:transparent;min-width:280px;min-height:64px}
.bl-art.has-art{background-repeat:no-repeat;background-position:center;background-size:contain;
  width:64%;height:64%;display:block}
.golden.has-art{background-repeat:no-repeat;background-position:center;background-size:contain;
  background-color:transparent;border:0;box-shadow:none;clip-path:none;font-size:0}
.golden.has-art span{font-size:.56rem}
.gold-chip.has-art{background-repeat:no-repeat;background-position:center;background-size:contain}
body{background-repeat:repeat,no-repeat,no-repeat}

/* ---------- upgrade tab badge states ---------- */
.bm-tabs i{display:none}
.bm-tabs i.ready,.bm-tabs i.waiting{display:inline-block}
.bm-tabs i.ready{background:var(--yellow);color:var(--ink);animation:tabPulse 1.4s ease-in-out infinite}
.bm-tabs i.waiting{background:rgba(0,0,0,.25);color:#fff}
.bm-tabs button.on i.ready{background:#fff;color:var(--red);animation:none}
.bm-tabs button.on i.waiting{background:rgba(255,255,255,.35);color:#fff}
@keyframes tabPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.75}}

/* ---------- upgrade cards ---------- */
.up em{font-style:italic;font-size:.72rem;color:#7a6a56;display:block;margin-top:2px}
.up.ready{border-color:var(--red);box-shadow:inset 0 0 0 2px rgba(181,24,41,.14)}
.up.locked{opacity:.45;border-style:dashed;cursor:default;background:var(--news2)}
.up.locked:hover{background:var(--news2)}
.up-grid.hist .up.got{cursor:default}
.up-grid.hist .up.got i{color:#1c6b46}
.up-grid.locked-list{opacity:.9}


/* ==========================================================
   AUTOCLICKER SAFETY
   ----------------------------------------------------------
   A fast autoclicker fires mousedown/mouseup pairs while the
   pointer is moving. If any text is selectable under the cursor
   the browser starts a text drag-selection, and once it is in
   that state it stops delivering normal mouse events to the page
   until you reload. That is the "page ignores my mouse" fault.

   Killing selection and native dragging across the game removes
   the failure mode entirely. Every clicker game does this.
   ========================================================== */
.baron, .baron *{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
}
.baron img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.bl-paper, .shop-row, .up, .bm-tabs button, .bulk button, .golden{
  touch-action:manipulation;
}
/* nothing decorative may ever swallow a click */
.toast, .drop, .baron-float, .sky-bit, .bl-sky{pointer-events:none!important}
.btn.armed,.bl-foot .btn.armed{background:var(--yellow)!important;color:var(--ink)!important;
  border-color:var(--yellow)!important;animation:tabPulse .8s ease-in-out infinite}

/* ---------- The Desk: the front page ----------
   Laid out like an actual newspaper front: masthead rule, kicker,
   headline, byline, body set in columns, and a figures strip along
   the bottom. No placeholder boxes — a picture appears only when
   there is a real picture to show. */
.bm-panel.front{background:var(--news2);padding:14px}
.fp{border:3px solid var(--ink);background:#fffdf7;box-shadow:var(--shadow)}

.fp-masthead{display:flex;align-items:center;gap:10px;justify-content:space-between;
  border-bottom:3px double var(--ink);padding:8px 14px;background:#fff}
.fp-name{font-family:Anton,sans-serif;font-size:clamp(1rem,2.6vw,1.5rem);letter-spacing:-.01em;
  text-align:center;flex:1}
.fp-left,.fp-right{font-family:Archivo,sans-serif;font-size:.6rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex:0 0 auto}

.fp-body{padding:16px 18px 6px}
.fp-kicker{font-family:Archivo,sans-serif;font-size:.64rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red2);margin-bottom:6px}
.fp-body h2{font-size:clamp(1.4rem,3.6vw,2.3rem);line-height:.96;margin:0 0 8px;
  border-bottom:2px solid var(--ink);padding-bottom:10px}
.fp-byline{font-family:Archivo,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}

.fp-figure{margin:0 0 12px;border:2px solid var(--ink)}
.fp-figure img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;
  filter:grayscale(1) contrast(1.15)}
.fp-figure figcaption{border-top:2px solid var(--ink);padding:6px 9px;background:#fff;
  font-family:Archivo,sans-serif;font-size:.7rem;color:var(--muted)}

/* body text set in newspaper columns */
.fp-cols{columns:2;column-gap:22px;column-rule:1px solid var(--rule)}
.fp-cols p{font-size:.9rem;line-height:1.55;margin:0 0 10px;break-inside:avoid}
.fp-cols p:first-child::first-letter{font-family:Anton,sans-serif;font-size:2.6rem;
  float:left;line-height:.8;padding:2px 6px 0 0}
.fp-cols .quote{border-left:4px solid var(--red);padding-left:10px;font-style:italic;font-size:.85rem}

.fp-strip{display:flex;flex-wrap:wrap;gap:0;border-top:3px double var(--ink);background:#fff}
.fp-strip span{flex:1 1 120px;text-align:center;padding:8px 6px;border-right:1px solid var(--rule);
  font-family:Archivo,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.fp-strip span:last-child{border-right:0}
.fp-strip b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:1.15rem;
  color:var(--ink);letter-spacing:0;text-transform:none}

@media(max-width:820px){
  .fp-cols{columns:1}
  .fp-cols p:first-child::first-letter{font-size:2rem}
}

/* ---------- goals ---------- */
.bm-split{padding:0;gap:0;border:0}
.bm-split>.bm-panel{border-bottom:2px solid var(--rule)}
.goals{display:grid;gap:10px}
.goal span{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:.8rem}
.goal-bar{height:12px;background:var(--news2);border:2px solid var(--ink);margin:4px 0 2px}
.goal-bar i{display:block;height:100%;background:repeating-linear-gradient(45deg,
  var(--red) 0 7px,var(--red2) 7px 14px);transition:width .4s ease}
.goal em{font-style:normal;font-family:Archivo,sans-serif;font-size:.7rem;color:var(--muted)}

/* ---------- Barry ---------- */
.barry{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.barry-face{width:62px;height:62px;border:3px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;font-size:2rem;background:#fff7e0;flex:0 0 62px;
  animation:barryBob 4s ease-in-out infinite}
.barry p{margin:0;font-style:italic;font-size:.9rem;line-height:1.5;color:#4a3c2e}
@keyframes barryBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}

/* ---------- staff list ---------- */
.staff{display:grid;gap:3px}
.staff-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:5px 8px;background:#fffdf7;border:1px solid var(--rule)}
.staff-icon{font-size:1.1rem}
.staff-name{font-family:Archivo,sans-serif;font-size:.82rem;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staff-n{font-family:Anton,sans-serif;font-size:1rem;color:var(--brown2)}
.staff-share{font-family:Archivo,sans-serif;font-size:.7rem;font-weight:800;color:var(--red2);
  min-width:38px;text-align:right}
.lock-bar{height:6px;background:var(--news2);border:1px solid var(--ink);margin:4px 0 2px}
.lock-bar i{display:block;height:100%;background:var(--brown2)}

/* ---------- save state + backup dialog ---------- */
.bl-saved{font-family:Archivo,sans-serif;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:#9d8d7b;margin-top:14px}
.bl-warn{margin-top:10px;background:var(--red);color:#fff;font-family:Archivo,sans-serif;
  font-size:.7rem;line-height:1.4;padding:8px;border:2px solid #fff}
.bl-warn[hidden]{display:none}

.backup-wrap{position:fixed;inset:0;z-index:200;background:rgba(15,11,8,.75);
  display:grid;place-items:center;padding:18px;overflow:auto}
.backup{background:var(--news);border:4px solid var(--ink);box-shadow:var(--shadow);
  max-width:640px;width:100%;padding:22px;max-height:92vh;overflow:auto}
.backup h3{font-size:1.3rem;margin:0 0 8px}
.backup p{font-size:.9rem;line-height:1.5}
.backup textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.72rem;
  border:2px solid var(--ink);background:#fffdf7;padding:8px;resize:vertical;word-break:break-all}
.backup .rule{margin:18px 0}
.backup,.backup *{user-select:text!important}