@font-face{font-family:"DM Serif Display";src:url("assets/dm-serif.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Literata";src:url("assets/literata.ttf") format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/ibm-plex-mono.ttf") format("truetype");font-weight:400 600;font-display:swap}

:root{
  --bg:#F8F6F0; --surface:#FFFEF9; --ink:#191919; --muted:#5C5648;
  --accent:#C0391B; --accent-ink:#FFF6EE; --accent-soft:#F6E3D9;
  --rule:#191919; --hair:#D8D2C4; --band:#191919; --band-ink:#F8F6F0;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Literata",Georgia,serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:32px}
img{display:block;max-width:100%}
button,input,select{font:inherit}
:focus{outline:2px solid var(--accent);outline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-open:focus-visible,.btn-primary:focus-visible{outline-offset:3px;box-shadow:0 0 0 5px var(--accent-soft)}
.btn-close:focus-visible,.btn-nav:focus-visible,.saved-toggle:focus-visible{outline-offset:3px;box-shadow:inset 0 0 0 1px var(--accent)}
#search:focus,#filter:focus{outline-offset:0;box-shadow:0 0 0 3px var(--accent-soft)}
.card .btn-open:focus-visible{outline-color:var(--accent)}
.topic-row:focus-visible{outline-offset:-2px;outline-color:#E8876B}
.mainnav a:focus-visible,.foot-nav a:focus-visible{outline-offset:-2px}
.text-link:focus-visible{outline-offset:4px}

/* skip link */
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:12px 18px;font-family:"IBM Plex Mono",monospace;font-size:13px;text-decoration:none;transition:top .2s var(--ease)}
.skip-link:focus{top:12px}

/* topbar */
.topbar{border-bottom:1px solid var(--rule);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.topbar-in{display:flex;justify-content:space-between;gap:16px;padding-block:9px}
#city-clock{font-variant-numeric:tabular-nums}

/* masthead */
.masthead{text-align:center;padding-block:44px 0}
.mast-kicker{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.wordmark{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(52px,9.5vw,132px);line-height:.95;letter-spacing:-.02em;margin:0}
.wordmark em{font-style:italic;color:var(--accent)}
.mast-dek{max-width:62ch;margin:20px auto 0;font-size:18px;line-height:1.6;color:var(--muted)}
.mainnav{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 8px;border-top:3px double var(--rule);border-bottom:1px solid var(--rule);margin-top:32px}
.mainnav a{color:var(--ink);text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:14px 16px;min-height:44px;display:inline-flex;align-items:center;transition:color .18s var(--ease),background .18s var(--ease)}
.mainnav a:active{transform:scale(.97)}

/* ticker */
.ticker{border-bottom:1px solid var(--rule);overflow:hidden;padding-block:10px;background:var(--surface)}
.ticker-track{display:inline-flex;gap:28px;white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;will-change:transform;animation:ticker 36s linear infinite}
.tick-sep{color:var(--accent)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:end;padding-block:36px 8px}
.control-field{display:flex;flex-direction:column;gap:8px}
.control-field label,.field-label{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.search-field{flex:1 1 280px}
#search,#filter{font-family:"Literata",Georgia,serif;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:0;padding:12px 14px;min-height:48px;width:100%;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
#search::placeholder{color:#8A8474}
#filter{cursor:pointer}
.saved-toggle{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 18px;background:var(--surface);border:1px solid var(--rule);border-radius:0;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.06em;color:var(--ink);transition:background .18s var(--ease),color .18s var(--ease),transform .15s var(--ease)}
.saved-toggle[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.bookmark-glyph{color:var(--accent);font-size:15px}
.saved-toggle[aria-pressed="true"] .bookmark-glyph{color:var(--accent-soft)}
.saved-n{opacity:.75}
.result-count{margin:0 0 12px auto;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* story index */
.stories-section{padding-block:28px 96px}
.section-head{position:relative;border-top:3px solid var(--rule);padding-top:22px;margin-bottom:30px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px}
.section-head h2{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(32px,4.5vw,52px);line-height:1.05;letter-spacing:-.01em;margin:0}
.section-note{margin:0;color:var(--muted);font-size:15.5px}
.side-note{position:absolute;right:0;top:110px;writing-mode:vertical-rl;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.card{border-top:1px solid var(--rule);padding-block:26px 30px;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*70ms)}
.card:nth-child(odd){border-right:1px solid var(--hair);padding-right:48px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card-top{display:flex;align-items:center;gap:12px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card-num{font-size:34px;line-height:1;color:var(--ink);letter-spacing:0}
.card-cat{color:var(--accent);font-weight:600}
.card-cat-btn{background:none;border:0;padding:10px 4px;margin:-10px -4px;min-height:44px;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;transition:color .18s var(--ease)}
.card-saved{margin-left:auto;color:var(--accent);font-size:15px}
.card-fig{margin:18px 0 0;overflow:hidden;background:var(--hair)}
.card-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .25s var(--ease)}
.card-title{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.12;letter-spacing:-.01em;margin:18px 0 10px}
.card-summary{margin:0;color:#3E3A32;font-size:16.5px;line-height:1.6}
.card-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.btn-open{margin-top:18px;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 20px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:0;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:background .18s var(--ease),color .18s var(--ease),transform .15s var(--ease)}
.btn-open:active{transform:scale(.97)}
.btn-open .arr{color:var(--accent-soft)}
.featured{grid-column:1 / -1;display:grid;grid-template-columns:3fr 2fr;gap:0 48px;border-right:0 !important;padding-right:0 !important}
.featured .card-fig{margin-top:20px}
.featured .card-fig img{aspect-ratio:16/8.2}
.featured .card-title{font-size:clamp(38px,4.6vw,58px)}
.featured .card-summary{font-size:18px}
.featured .card-num{font-size:64px}

/* empty state */
.empty-state{border:1.5px dashed var(--rule);padding:56px 32px;text-align:center;background:var(--surface)}
.empty-state h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:30px;margin:8px 0 10px}
.empty-state p{max-width:52ch;margin:0 auto;color:var(--muted)}
.empty-num{font-family:"DM Serif Display",serif;font-size:72px;line-height:1;color:var(--accent);margin:0}
.btn-primary{margin-top:22px;display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:0;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:background .18s var(--ease),transform .15s var(--ease)}
.btn-primary:active{transform:scale(.97)}

/* topics band */
.topics-band{background:var(--band);color:var(--band-ink);padding-block:72px 80px}
.band-kicker{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#E8876B;margin:0 0 12px}
.band-kicker.dark{color:var(--accent)}
.topics-band h2{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(32px,4.5vw,52px);line-height:1.05;margin:0 0 28px}
.topic-row{display:flex;align-items:baseline;gap:20px;width:100%;text-align:left;background:none;border:0;border-top:1px solid #454036;color:var(--band-ink);padding:20px 8px;min-height:44px;cursor:pointer;font-family:"DM Serif Display",Georgia,serif;transition:background .18s var(--ease),color .18s var(--ease),padding-left .18s var(--ease)}
.topic-row:last-child{border-bottom:1px solid #454036}
.topic-row:active{transform:scale(.99)}
.topic-name{font-size:clamp(24px,3vw,36px);line-height:1.1}
.topic-count{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#B9B2A2}
.topic-arrow{font-family:"IBM Plex Mono",monospace;color:#E8876B}

/* about */
.about{padding-block:88px 96px}
.about-grid{display:grid;grid-template-columns:1.1fr 1.6fr .9fr;gap:40px;align-items:start}
.about h2{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.08;margin:0}
.about-body p{margin:0 0 18px;font-size:17px;line-height:1.7;color:#2C2924;max-width:62ch}
.dropcap{float:left;font-family:"DM Serif Display",serif;font-size:64px;line-height:.85;padding:6px 10px 0 0;color:var(--accent)}
.text-link{display:inline-flex;align-items:center;min-height:44px;padding-block:10px;color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.06em;text-decoration:none;border-bottom:1.5px solid var(--accent);transition:color .18s var(--ease)}
.text-link:active{transform:scale(.98)}
.about-facts{margin:0;border-top:2px solid var(--rule)}
.about-facts div{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid var(--hair)}
.about-facts dt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.about-facts dd{margin:0;font-size:15px;text-align:right}

/* footer */
.footer{border-top:3px double var(--rule);padding-block:48px 56px;background:var(--surface)}
.footer-in{display:flex;flex-direction:column;gap:14px}
.foot-mark{font-family:"DM Serif Display",serif;font-size:30px;margin:0}
.foot-note{margin:0;max-width:70ch;color:var(--muted);font-size:14.5px;line-height:1.6}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 8px}
.foot-nav a{color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;transition:color .18s var(--ease)}
.foot-nav a:active{transform:scale(.97)}
.foot-small{margin:0;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}

/* detail */
.detail-overlay{position:fixed;inset:0;z-index:100}
.detail-scrim{position:absolute;inset:0;background:rgba(20,18,14,.62)}
.detail{position:absolute;inset:0 0 0 auto;width:min(860px,100%);background:var(--bg);overflow-y:auto;overscroll-behavior:contain;box-shadow:-24px 0 60px rgba(0,0,0,.28);animation:slidein .28s var(--ease)}
@keyframes slidein{from{transform:translateX(48px);opacity:.4}to{transform:none;opacity:1}}
.detail-progress{position:sticky;top:0;height:4px;background:var(--hair);z-index:3}
.detail-progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
.detail-fig{margin:0;background:var(--hair)}
.detail-fig img{width:100%;aspect-ratio:16/8;object-fit:cover}
.detail-fig figcaption{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--muted);padding:10px 40px;border-bottom:1px solid var(--hair);background:var(--surface)}
.detail-body-wrap{padding:28px 40px 64px;max-width:760px}
.detail-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.detail-meta{margin:0;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.btn-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:0;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;transition:background .18s var(--ease),color .18s var(--ease),transform .15s var(--ease)}
.btn-close:active{transform:scale(.97)}
.esc-hint{border:1px solid currentColor;padding:1px 5px;font-size:10px}
.detail-title{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(36px,4.6vw,54px);line-height:1.06;letter-spacing:-.015em;margin:18px 0 12px}
.detail-byline{margin:0;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.detail-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:26px 0 6px;padding-block:18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--hair)}
.btn-save{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 20px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:0;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.07em;text-transform:uppercase;transition:background .18s var(--ease),color .18s var(--ease),transform .15s var(--ease)}
.btn-save[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-save:active{transform:scale(.97)}
.save-note{margin:0;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.detail-text{margin-top:26px;font-size:18.5px;line-height:1.78;color:#211E1A}
.detail-text p{margin:0 0 22px}
.detail-text p:first-of-type::first-letter{font-family:"DM Serif Display",serif;font-size:56px;line-height:.85;float:left;padding:5px 10px 0 0;color:var(--accent)}
.detail-end{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;color:var(--muted);margin:36px 0 8px}
.detail-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px}
.btn-nav{min-height:48px;padding:12px 18px;background:var(--surface);border:1px solid var(--rule);border-radius:0;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.06em;transition:background .18s var(--ease),color .18s var(--ease),transform .15s var(--ease)}
.btn-nav:active{transform:scale(.97)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:120;background:var(--ink);color:var(--bg);font-family:"IBM Plex Mono",monospace;font-size:13px;padding:13px 20px;margin:0;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);max-width:min(480px,90vw);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* hover — fine pointers only */
@media (hover:hover) and (pointer:fine){
  .mainnav a:hover{background:var(--ink);color:var(--bg)}
  .saved-toggle:hover{border-color:var(--accent);color:var(--accent)}
  .saved-toggle[aria-pressed="true"]:hover{color:var(--bg);background:#333}
  #search:hover,#filter:hover{border-color:var(--accent)}
  .card:hover .card-fig img{transform:scale(1.03)}
  .card-cat-btn:hover{color:var(--ink);text-decoration:underline}
  .btn-open:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .btn-primary:hover{background:var(--ink);border-color:var(--ink)}
  .topic-row:hover{background:#242119;padding-left:20px}
  .text-link:hover{color:var(--ink)}
  .foot-nav a:hover{color:var(--accent)}
  .btn-close:hover{background:var(--ink);color:var(--bg)}
  .btn-save:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .btn-nav:hover{background:var(--ink);color:var(--bg)}
}

/* responsive */
@media (max-width:820px){
  .wrap{padding-inline:20px}
  .story-grid{grid-template-columns:1fr}
  .card:nth-child(odd){border-right:0;padding-right:0}
  .featured{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:28px}
  .side-note{display:none}
  .topbar-mid{display:none}
  .detail-body-wrap{padding:22px 20px 56px}
  .detail-fig figcaption{padding-inline:20px}
  .masthead{padding-top:32px}
  .controls{padding-top:28px}
  .result-count{margin-left:0;width:100%}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .ticker-track{animation:none}
}