/* ============================================================
   Curiosities (curiosity.html): "Front page".
   A Swiss-style magazine front: cool grey paper, huge black type,
   one hot orange. The featured post is the headline, Twitch gets
   a black "On air" band, the rest of the posts are a numbered index.
   Single committed look; does not follow the light/dark toggle.
   ============================================================ */
:root{
  color-scheme:light;
  --paper:#e6e7e2; --paper-2:#f2f2ef; --ink:#121314; --mute:#626568; --orange:#ff4f00; --orange-ink:#d93f00;
  --band:#121314; --band-2:#26272a; --band-mute:#a3a5a8;
  --font:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,3.2vw,36px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:17px/1.55 var(--font)}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
img{max-width:100%}

/* top bar */
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:10px var(--gutter);border-bottom:1.5px solid var(--ink);font:700 14px/1 var(--font)}
.bar-l{display:flex;align-items:baseline;gap:16px}
.bar .home{color:var(--mute);text-decoration:none;font-weight:500}
.bar .home:hover{color:var(--ink)}
.bar .brand{font:900 22px/1 var(--font);letter-spacing:-.03em;text-decoration:none}
.bar nav{display:flex;gap:18px}
.bar nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.bar nav a:first-child{color:var(--orange-ink)}
.bar nav a:hover{color:var(--orange-ink)}
.issue{font-variant-numeric:tabular-nums}

/* lead story */
.lead{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:30px var(--gutter);padding:34px var(--gutter) 38px;align-items:center;scroll-margin-top:10px}
.lead.noimg{grid-template-columns:minmax(0,1fr)}
.lead-text{min-width:0}
.kicker{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px 14px;font:800 15px/1 var(--font);color:var(--orange-ink);font-variant-numeric:tabular-nums}
.lead h1{margin:0;font:900 clamp(48px,8.4vw,108px)/.86 var(--font);letter-spacing:-.055em;text-wrap:balance;overflow-wrap:anywhere}
.lead h1.long{font-size:clamp(40px,6.2vw,80px);line-height:.9}
.lead-body{margin-top:20px;font-size:19px;max-width:44ch}
.lead-body p{margin:0 0 12px}
.lead-body a{color:var(--orange-ink);font-weight:700}
.lead-tags{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px 12px}
.lead-img{margin:0;min-width:0}
.lead-img img{width:100%;aspect-ratio:1;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05)}
.lead-links{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:16px}
.lead-links:empty{display:none}
.hash{all:unset;cursor:pointer;color:var(--mute);font-size:15px}
.hash:hover{color:var(--orange-ink)}
.hash:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.lead-body .hash{color:var(--orange-ink);font-size:inherit}

/* link cards inside a post */
.lc{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;background:var(--paper-2);padding:12px;text-decoration:none;border:1.5px solid transparent}
.lc:hover{border-color:var(--ink)}
.lc img{width:96px;height:96px;object-fit:cover;filter:grayscale(1)}
.lc:hover img{filter:none}
.lc .site{font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink)}
.lc b{display:block;margin:4px 0;font:800 18px/1.15 var(--font);letter-spacing:-.01em}
.lc > div{min-width:0}
.lc span{font-size:14px;color:var(--mute);display:block;overflow-wrap:anywhere}
.lc.noimg{grid-template-columns:minmax(0,1fr)}
.lpic img{width:100%;display:block}
.lvid iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* On air band */
.band{background:var(--band);color:var(--paper);padding:26px var(--gutter) 32px;scroll-margin-top:10px}
.band-t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px;margin-bottom:16px}
.band-t h2{margin:0;font:800 14px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.band-t span{color:var(--band-mute);font-size:14px}
.band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:28px}
.ch{border-top:1.5px solid #3a3b3e;padding-top:14px;display:grid;gap:14px;align-content:start}
.ch-name{display:block;font:900 clamp(32px,4.2vw,46px)/.9 var(--font);letter-spacing:-.04em;overflow-wrap:anywhere}
.ch p{margin:10px 0 12px;color:var(--band-mute);font-size:15px}
.ch a{font:800 14px/1 var(--font);color:var(--orange);text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.ch a:hover{color:#fff}
.player{aspect-ratio:16/9;background:var(--band-2)}
.player iframe{width:100%;height:100%;border:0;display:block}

/* index + right now */
.lower{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:40px;padding:30px var(--gutter) 40px}
.index{min-width:0;scroll-margin-top:10px}
.index-t{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:12px}
.lower h2{margin:0;font:800 14px/1 var(--font);letter-spacing:.12em;text-transform:uppercase}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filters button{font:700 13px/1 var(--font);padding:9px 12px;border:1.5px solid var(--ink);background:none;color:var(--ink);cursor:pointer;border-radius:999px;min-height:36px}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.entries{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
.entries li{border-top:1.5px solid var(--ink)}
.entries button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:13px 0}
.entries button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.entries .no{font:800 14px/1.6 var(--font);color:var(--orange-ink);font-variant-numeric:tabular-nums}
.entries b{display:block;font:800 22px/1.1 var(--font);letter-spacing:-.02em}
.entries small{display:block;margin-top:4px;color:var(--mute);font-size:13px}
.entries button:hover b{color:var(--orange-ink)}
.entries li.on b{color:var(--orange-ink)}
.entries .empty{grid-column:1/-1;padding:14px 0;color:var(--mute)}
.now > div > a,.now > div > div{display:grid;gap:2px;padding:10px 0;border-top:1.5px solid var(--ink);text-decoration:none}
.now small{color:var(--orange-ink);font-weight:700;font-size:13px}
.now b{font:800 18px/1.15 var(--font)}
.now a:hover b{color:var(--orange-ink)}
.now h2{margin-bottom:12px}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:18px var(--gutter) 30px;border-top:1.5px solid var(--ink);font-size:14px;color:var(--mute)}
.foot a{text-decoration:none;font-weight:700;color:var(--ink)}
.foot a:hover{color:var(--orange-ink)}

@media (max-width:860px){
  .lead{grid-template-columns:minmax(0,1fr);align-items:start}
  .lead-img{order:-1;max-width:420px}
  .lower{grid-template-columns:minmax(0,1fr)}
  .entries{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .bar .issue{display:none}
  .lead-body{font-size:17px}
  .lc{grid-template-columns:72px minmax(0,1fr)}
  .lc img{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}