/* Layout: protest-poster newsprint — paper ground, black ink, one red accent for "the enemy" and the chain */
:root{
  --paper:#f3efe6;
  --card:#fbf9f4;
  --ink:#1b1a17;
  --mute:#6a655b;
  --red:#b3261e;
  --rule:#d8d1c2;
  --quote:#ece6d8;
  --ok:#2e7d4f;
  --display:"Marcellus", Georgia, serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65}
.wrap{max-width:62rem;margin:0 auto;padding-inline:20px;padding-block:0 4rem}
a{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.topbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;padding-top:calc(.75rem + env(safe-area-inset-top,0px));background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:5}
.topbar .home{white-space:nowrap;font-family:var(--display);font-size:1.2rem;text-decoration:none;color:var(--paper)}
.topbar .home:hover{color:#f0b3ad}
.topbar .where{color:#c9c2b3;font-size:.95rem;margin-left:auto;text-align:right;text-decoration:none}
.ce-send{margin-top:1.5rem;background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:1.4rem 1.5rem}
.ce-send h2{font-size:1.5rem}
.btn{font:inherit;font-size:1rem;padding:.55rem 1rem;border-radius:6px;border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.btn:disabled{opacity:.6;cursor:default}

header.hero{padding-block:3.5rem 2.5rem;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2rem;align-items:center}
.hero-text{display:grid;gap:1rem}
.hero figure{margin:0}
.hero figure img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 1px 0 var(--rule),6px 6px 0 var(--ink)}
figcaption{font-size:.82rem;color:var(--mute);margin-top:.55rem;line-height:1.4}
@media (max-width:760px){header.hero{grid-template-columns:1fr;padding-block:2.5rem 2rem}}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,7.5vw,4.4rem);line-height:1.0;margin:0;text-wrap:balance}
h1 em{color:var(--red);font-style:normal}
.lede{font-size:1.15rem;color:var(--mute);margin:0}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.1;margin:0 0 .75rem;text-wrap:balance}
h3{font-family:var(--display);font-weight:400;font-size:1.35rem;margin:1.75rem 0 .5rem}
p{margin:0 0 1rem;max-width:44rem}
section{padding-block:2.5rem;border-top:2px solid var(--ink)}

/* the chain */
ol.chain{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.chain li{position:relative}
.chain a{display:block;height:100%;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:.7rem 1rem;text-align:center;margin-inline:.6rem}
.chain a:hover{background:var(--ink);color:var(--paper)}
.chain b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;line-height:1.2}
.chain small{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--mute)}
.chain a:hover small{color:#c9c2b3}
.chain li+li::before{content:"";position:absolute;left:-.7rem;top:50%;width:1.4rem;height:.9rem;margin-top:-.45rem;border:2px solid var(--red);border-radius:999px}
@media (max-width:760px){ol.chain{grid-template-columns:1fr;gap:1rem}.chain li+li::before{left:50%;top:-.95rem;width:.9rem;height:1.4rem;margin:0 0 0 -.45rem}}
.dir{font-family:var(--mono);font-size:.78rem;color:var(--mute);margin:.6rem 0 0;display:flex;justify-content:space-between;max-width:none}

.num{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 .25rem}
.concept{background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--red);padding:.85rem 1.1rem;border-radius:0 6px 6px 0;margin:1rem 0;max-width:46rem}
.concept p{margin:0}
.stat{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.25rem;align-items:center;background:var(--ink);color:var(--paper);border-radius:6px;padding:1.1rem 1.3rem;margin:1.25rem 0;max-width:46rem}
.stat .big{font-family:var(--display);font-size:clamp(2.4rem,7vw,3.4rem);line-height:1;color:#f0b3ad;grid-row:span 2}
.stat p{margin:0;max-width:none}
.stat .src{font-size:.8rem;color:#c9c2b3}
.stat .src a{color:#f0b3ad}
@media (max-width:600px){.stat{grid-template-columns:1fr}.stat .big{grid-row:auto}}
.src-card{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:1rem 1.15rem;margin:1rem 0;max-width:46rem}
.src-card h4{margin:0 0 .15rem;font-size:1rem}
.src-card .meta{font-family:var(--mono);font-size:.74rem;color:var(--mute);margin:0 0 .6rem}
blockquote{margin:.4rem 0 .6rem;padding:.6rem .9rem;background:var(--quote);border-left:3px solid var(--ink);font-family:var(--display);font-size:1.2rem;line-height:1.35}
.src-card p{margin:.35rem 0 0;font-size:.95rem}
.src-card a.go{font-size:.9rem}
.clip{display:flex;gap:.75rem;align-items:center;background:var(--card);border:1px dashed var(--ink);border-radius:6px;padding:.7rem 1rem;margin:1rem 0;max-width:46rem;text-decoration:none;color:var(--ink)}
.clip:hover{background:var(--quote)}
.clip .play{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:.9rem}
.clip span{font-size:.95rem;line-height:1.4}
.warn{background:#f6e1dd;border:1px solid #e3b6ae;border-radius:6px;padding:.85rem 1.1rem;margin:1rem 0;max-width:46rem}
.warn p{margin:0}
figure.ph{margin:1.25rem 0;max-width:40rem}
figure.ph img{display:block;width:100%;height:auto;border-radius:4px}
.bridge{font-family:var(--display);font-size:1.25rem;line-height:1.35;margin:2rem 0 0;padding-top:1rem;border-top:1px dashed var(--rule);max-width:44rem}
.bridge::before{content:"Next link → ";font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:.25rem}

label.task{display:block;font-weight:700;margin:1.4rem 0 .4rem;max-width:46rem}
textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:6px;width:100%;max-width:46rem;min-height:6.5rem;resize:vertical;font-size:1rem;line-height:1.6;padding:.8rem .9rem;display:block}
textarea::placeholder{color:var(--mute);opacity:.75}
.meter{font-family:var(--mono);font-size:.76rem;color:var(--mute);margin-top:.35rem}
.meter .ok{color:var(--ok)}

.bank{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:.4rem 2rem;margin-top:1rem}
.bank div{padding:.55rem 0;border-bottom:1px dashed var(--rule)}
.bank b{font-size:1.02rem}
.bank i{font-family:var(--mono);font-style:normal;font-size:.72rem;color:var(--mute);margin-left:.4rem}
.bank p{margin:.1rem 0 0;color:var(--mute);font-size:.95rem}
.bank q{display:block;color:var(--ink);font-style:italic;font-size:.93rem;quotes:none}
.bank div.used b{color:var(--red)}
footer.site{border-top:2px solid var(--ink);padding-top:1.5rem;font-size:.85rem;color:var(--mute)}
footer.site ul{padding-left:1.1rem}
footer.site li{margin-bottom:.3rem}
/* sub-page navigation */
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:2.5rem 0 0;padding-top:1.25rem;border-top:2px solid var(--ink)}
.pager a{text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:.55rem 1.1rem;font-weight:700}
.pager a:hover{background:var(--ink);color:var(--paper)}
.pager .next{margin-left:auto}
.chain a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.chain a[aria-current="page"] small{color:#c9c2b3}
ol.chain.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:760px){ol.chain.five{grid-template-columns:1fr}}
.story{background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:1.1rem 1.3rem;margin:1.25rem 0;max-width:46rem}
.story h4{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0 0 .5rem}
.story p{margin:0 0 .75rem}
.story p:last-child{margin:0}
.headline{font-family:Georgia,serif;font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em;border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:.4rem 0;margin:.5rem 0 .9rem;text-align:center}
.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0;max-width:52rem}
.compare div{background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--mute);border-radius:6px;padding:.8rem .9rem}
.compare div.hot{border-top-color:var(--red)}
.compare b{display:block;font-family:var(--display);font-weight:400;font-size:1.15rem;margin-bottom:.25rem}
.compare p{margin:0;font-size:.95rem}
@media (max-width:760px){.compare{grid-template-columns:1fr}}

.wrap > ol.chain{margin-bottom:2.5rem}
/* picture cards on the main page */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:1.25rem 0 0}
.cards a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.cards a:hover{box-shadow:5px 5px 0 var(--ink)}
.cards img{display:block;width:100%;height:150px;object-fit:cover;border-bottom:2px solid var(--ink)}
.cards small{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--red);margin:.7rem .9rem 0}
.cards b{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.2;margin:.15rem .9rem 0}
.cards span{font-size:.92rem;color:var(--mute);margin:.3rem .9rem .9rem}
.cards a.end{background:var(--ink);color:var(--paper);justify-content:center}
.cards a.end span{color:#c9c2b3}
/* closing collage */
.collage{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.collage a{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;border:2px solid var(--ink)}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.collage span{position:absolute;left:.4rem;bottom:.4rem;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.75rem;padding:.1rem .4rem;border-radius:3px}
.hero figure img{max-height:34rem;object-fit:contain;background:var(--card)}