/* ============================================================
   FOKUS 2040: a foresight & ethics methods journal
   Art direction: "the chart the headband writes"
   millimetre chart paper · graphite trace · the headband's own
   green / amber / red status light as the only colour code
   ============================================================ */

:root{
  --paper:#F6F7F5;
  --paper2:#ECEEEA;
  --card:#FFFFFF;
  --ink:#141414;
  --ink2:#3D4146;
  --grey:#62676C;
  --rule:rgba(20,20,20,.2);
  --hair:rgba(20,20,20,.09);
  --grid:rgba(214,72,96,.07);
  --grid-major:rgba(214,72,96,.15);
  --pink:#D64860;

  --ok:#15803D;
  --ok-soft:rgba(21,128,61,.1);
  --amber:#B45309;
  --amber-soft:rgba(217,119,6,.13);
  --red:#C62828;
  --red-soft:rgba(198,40,40,.08);
  --slate:#35556F;
  --slate-soft:rgba(53,85,111,.1);

  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(214,72,96,.18)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:3px;z-index:99;font-family:var(--mono);font-size:13px}
.skip:focus{left:8px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(246,247,245,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
}
.topbar .wrap{display:flex;align-items:center;gap:12px;height:44px}
.topbar .vol{font-weight:600;white-space:nowrap}
.topbar nav{display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{color:var(--ink2);text-decoration:none;padding:4px 7px;border-radius:3px;white-space:nowrap;font-size:10.5px;
  transition:background-color 150ms ease,color 150ms ease}
.topbar nav a b{color:var(--pink);font-weight:600;margin-right:3px}
@media (hover:hover) and (pointer:fine){
  .topbar nav a:hover{background:var(--ink);color:var(--paper)}
}
.topbar .pill{padding:5px 11px;flex-shrink:0}
@media (max-width:1620px){.topbar .vol{display:none}}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pink);
  transform:scaleX(0);transform-origin:left center;will-change:transform}

/* ---------- hero: the attention map ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ink)}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding:76px 0 64px}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:22px}
.kicker .dot{color:var(--red)}
h1{
  font-family:var(--sans);font-weight:800;font-size:clamp(44px,5.8vw,80px);
  line-height:.96;letter-spacing:-.035em;margin-bottom:26px;
}
h1 em{font-style:normal;font-weight:300;letter-spacing:-.03em}
h1 .ox{position:relative}
.hero .deck{max-width:640px;font-size:18.5px;line-height:1.58;color:var(--ink2)}
.hero .deck b{color:var(--ink)}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.pill{
  font-family:var(--mono);font-size:12px;padding:6px 12px;border:1px solid var(--ink);
  border-radius:3px;background:var(--card);color:var(--ink2);white-space:nowrap;
}
.pill b{color:var(--ink);font-weight:600}
.pill.red{border-color:var(--red);color:var(--red)}
.pill.red b{color:var(--red)}
.hero .strap{margin-top:32px;padding-top:18px;border-top:1px dashed var(--rule);
  font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.02em;display:flex;gap:10px 26px;flex-wrap:wrap}
.hero .strap span b{color:var(--red);font-weight:600}

.amap{background:var(--card);border:1px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:16px 18px 12px}
.amap-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--hair);padding-bottom:10px}
.amap-head .live{color:var(--red);font-weight:600}
.amap-head .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:1px;animation:blink 2.4s steps(2,jump-none) infinite}
.board{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--grey);border:1px dashed var(--rule);padding:4px 0;margin:14px 0 12px}
.seats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 12px;padding:0 4px}
.seat{position:relative;aspect-ratio:1.5;border:1px solid var(--rule);border-radius:3px;display:grid;place-items:center}
.seat i{position:relative;width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.seat.a i{background:#D97706;box-shadow:0 0 0 3px var(--amber-soft)}
.seat.r i{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.seat.flip i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#D97706;opacity:0;animation:flip 9s var(--ease-out) infinite}
.seat.flip.late i::after{animation-delay:-4s;animation-duration:11s}
.seat.flip.red i::after{background:var(--red);animation-duration:13s;animation-delay:-7s}
.eeg-strip{display:block;width:100%;height:56px;margin-top:14px;border-top:1px solid var(--hair)}
.eeg-strip path{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round;
  stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 2.6s var(--ease-out) .3s forwards}
.amap-legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--ink2);margin-top:8px}
.amap-legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0}
.amap-legend .lg::before{background:var(--ok)}
.amap-legend .la::before{background:#D97706}
.amap-legend .lr::before{background:var(--red)}
.amap figcaption{font-family:var(--mono);font-size:10.5px;color:var(--grey);margin-top:10px;padding-top:8px;border-top:1px dashed var(--hair)}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes blink{50%{opacity:.25}}
@keyframes flip{0%,58%{opacity:0}64%,86%{opacity:1}92%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .eeg-strip path{stroke-dashoffset:0;animation:none}
  .amap-head .live::before,.seat.flip i::after{animation:none}
}

/* ---------- chapter chrome ---------- */
.chapter{position:relative;padding:84px 0 76px;border-bottom:1px solid var(--ink)}
.chapter.alt{background:rgba(236,238,234,.82)}
.ch-head{margin-bottom:44px;max-width:880px}
.ch-head .no{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink);
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.ch-head .no::after{content:"";flex:1;height:1px;background:var(--ink)}
.ch-head .no .m-tag{order:2;margin-left:auto;border:1px solid var(--ink);color:var(--ink);padding:2px 8px;border-radius:3px;font-size:10.5px;letter-spacing:.08em}
.ch-head .no .m-tag.warn{border-color:var(--red);color:var(--red)}
.ch-head .no .m-tag.multi{border-color:var(--slate);color:var(--slate)}
h2{font-family:var(--sans);font-weight:750;font-size:clamp(30px,4.2vw,50px);line-height:1.04;letter-spacing:-.028em;margin-bottom:16px}
.ch-head .deck{font-size:18px;color:var(--ink2);max-width:820px}
h3{font-family:var(--sans);font-weight:700;font-size:21px;letter-spacing:-.012em;margin:34px 0 12px}
h4{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:26px 0 10px}
p{margin-bottom:14px}
.lead{font-size:18.5px}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:1.5px;text-underline-offset:3px;word-break:break-word;
  transition:text-decoration-color 150ms ease}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration-color:var(--ink)}}

@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .amap{max-width:560px}
}
@media(max-width:760px){
  .wrap{padding:0 18px}
  .hero-inner{padding:56px 0 48px}
  .seats{gap:8px}
  .amap{box-shadow:4px 4px 0 var(--ink)}
}
@media print{
  .topbar,.filterbar,.fbtn{display:none}
  body{background:#fff}
  .amap{box-shadow:none}
}