/* ==========================================================================
   bara — radical broadsheet
   Newsprint, ink and agitprop red. No third-party requests: the fonts are
   self-hosted, there is no analytics, and nothing here phones home.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------- */
@font-face{font-family:Archivo;src:url(fonts/archivo-latin.woff2)format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-ext.woff2)format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-latin.woff2)format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-latin-ext.woff2)format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-latin-italic.woff2)format("woff2");
  font-weight:200 800;font-style:italic;font-display:swap}

/* --- tokens --------------------------------------------------------------- */
:root{
  --paper:#F2EFE7; --paper-2:#EAE6DC; --paper-3:#E0DBCE;
  --ink:#16130F; --ink-2:#4A443B; --ink-3:#7C7466;
  --red:#D2201B; --red-deep:#9E1512; --gold:#E0A32E; --ultramarine:#22439B;
  --rule:#16130F1F; --rule-strong:#16130F42;
  --card:#FBF9F4; --shadow:0 1px 0 #16130F14;

  /* Archivo and Newsreader are latin-only; Tamil falls through to the
     system stack, which costs no extra request. */
  --f-display:Archivo,"Noto Sans Tamil","Tamil MN","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-text:Newsreader,"Noto Serif Tamil","Tamil MN",Georgia,"Times New Roman",serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* 1.25 modular scale, clamped for fluid type */
  --t-xs:.6875rem; --t-sm:.8125rem; --t-base:1rem;
  --t-lg:clamp(1.05rem,.98rem + .35vw,1.25rem);
  --t-xl:clamp(1.3rem,1.15rem + .7vw,1.7rem);
  --t-2xl:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --t-3xl:clamp(2.1rem,1.6rem + 2.4vw,3.5rem);
  --t-4xl:clamp(2.6rem,1.7rem + 4.4vw,5.5rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;
  --wrap:78rem; --gutter:clamp(1rem,3.5vw,2.75rem);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:#100E0C; --paper-2:#191612; --paper-3:#231F1A;
    --ink:#F0EBE1; --ink-2:#B3AA9C; --ink-3:#8A8072;
    --red:#FF4A3D; --red-deep:#D2201B; --gold:#F0BE55; --ultramarine:#7C9BFF;
    --rule:#F0EBE126; --rule-strong:#F0EBE145;
    --card:#191612; --shadow:none;
  }
}
:root[data-theme=dark]{
  --paper:#100E0C; --paper-2:#191612; --paper-3:#231F1A;
  --ink:#F0EBE1; --ink-2:#B3AA9C; --ink-3:#8A8072;
  --red:#FF4A3D; --red-deep:#D2201B; --gold:#F0BE55; --ultramarine:#7C9BFF;
  --rule:#F0EBE126; --rule-strong:#F0EBE145;
  --card:#191612; --shadow:none;
}

/* --- base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-text);font-size:var(--t-base);line-height:1.55;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* faint newsprint tooth */
  background-image:radial-gradient(var(--rule) .5px,transparent .5px);
  background-size:3px 3px;
}
img{max-width:100%;display:block}
figure{margin:0}   /* browsers default to 1em 40px — it silently insets every image */
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:2px}
::selection{background:var(--red);color:var(--paper)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
/* min-width:auto on flex/grid children is what makes narrow screens scroll
   sideways: the child refuses to shrink below its longest word. */
.hero>*,.side__item>*,.brief a>*,.wire__items,.card,.footer__grid>*,.panels>*{min-width:0}
html,body{overflow-x:hidden}
.rule{border:0;border-top:1px solid var(--rule-strong);margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The river's filters set .hidden on cards, but [hidden] is only a user-agent
   rule: any author `display` beats it, and .card sets display:flex. Without
   this the counter filtered and the cards did not move. */
[hidden]{display:none!important}

/* --- shared type ---------------------------------------------------------- */
.kicker{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  font-stretch:104%;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:0;
}
.meta{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.03em;
  color:var(--ink-3);text-transform:uppercase;
}
.hed{
  font-family:var(--f-display);font-weight:750;font-stretch:92%;
  line-height:1.04;letter-spacing:-.021em;margin:0;text-wrap:balance;
}
/* Tamil stacks vowel signs above and below the line: a display leading tuned
   for latin caps clips them. Same for the tighter letterspacing. */
:lang(ta) .hed,:lang(ta) .brief__hed{line-height:1.42;letter-spacing:0}
:lang(ta) .excerpt,:lang(ta) .card__excerpt,:lang(ta) .side__excerpt,
:lang(ta) .brief__excerpt{line-height:1.75}
:lang(ta) .lead__hed{line-height:1.34}
.dek{font-family:var(--f-text);font-style:italic;color:var(--ink-2);margin:0}
.excerpt{color:var(--ink-2);margin:0}

/* ==========================================================================
   masthead
   ========================================================================== */
.masthead{border-bottom:3px solid var(--ink);background:var(--paper)}
.masthead__bar{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding-block:var(--sp-2);border-bottom:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
}
.masthead__bar time{color:var(--ink-2)}
.masthead__bar .spacer{flex:1}

.wordmark{display:flex;align-items:baseline;gap:var(--sp-6);padding-block:var(--sp-5) var(--sp-3)}
.wordmark__logo{
  flex:none;margin-right:.34em;   /* room for the ember */
  font-family:var(--f-display);
  /* min() against the viewport: 'rumah panjang' is 13 characters where
     'bara' was 4, and the token's own floor overflowed a phone. */
  font-size:min(var(--t-4xl), 9.5vw);font-weight:900;
  font-stretch:118%;letter-spacing:-.045em;line-height:.82;
  color:var(--ink);text-transform:lowercase;position:relative;
}
/* the ember: a red dot burning under the wordmark */
.wordmark__logo::after{
  content:"";position:absolute;right:-.30em;bottom:.13em;
  width:.17em;height:.17em;border-radius:50%;background:var(--red);
}
.wordmark__tag{
  font-family:var(--f-display);font-size:var(--t-sm);font-weight:600;
  font-stretch:88%;letter-spacing:.02em;color:var(--ink-2);
  /* no max-width: a 26ch cap wrapped a 41-character tagline in half.
     It sits beside the logo on desktop and under it on mobile, and has
     room for one line in both. Tamil is longer and may still wrap. */
  line-height:1.3;padding-bottom:.5em;
}
.nav{display:flex;flex-wrap:wrap;gap:var(--sp-5);padding-bottom:var(--sp-3)}
.nav a{
  font-family:var(--f-display);font-size:var(--t-sm);font-weight:700;
  font-stretch:96%;letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:2px;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--red);color:var(--red)}

.btn{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  background:none;border:1px solid var(--rule-strong);border-radius:2px;
  padding:.32em .6em;cursor:pointer;line-height:1.2;
}
.btn:hover{border-color:var(--red);color:var(--red)}

.contact__lead{
  font-family:var(--f-display);font-stretch:92%;font-weight:600;
  font-size:var(--t-xl);line-height:1.3;max-width:36ch;margin:0 0 var(--sp-4);
}
.contact__mail{
  font-family:var(--f-mono);font-size:var(--t-lg);
  border-bottom:2px solid var(--red);word-break:break-all;
}
.contact__body{max-width:58ch;margin-top:var(--sp-5);color:var(--ink-2)}
.statusbox{padding-block:var(--sp-6);border-top:1px solid var(--rule-strong)}
.statusbox h3{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 var(--sp-3);
}
.statusbox ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-5)}
.statusbox li{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-2)}
.endlinks{
  display:flex;flex-wrap:wrap;gap:var(--sp-6);
  padding-block:var(--sp-6);border-top:1px solid var(--rule-strong);
}

/* --- principles ----------------------------------------------------------- */
.principles__head{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 var(--sp-4);
}
.principles{
  list-style:none;counter-reset:p;margin:0 0 var(--sp-6);padding:0;
  display:grid;gap:var(--sp-4);
}
.principles li{
  counter-increment:p;position:relative;padding-left:1.9em;
  font-family:var(--f-display);font-stretch:92%;font-weight:600;
  font-size:var(--t-lg);line-height:1.34;letter-spacing:-.006em;
  color:var(--ink);max-width:42ch;text-wrap:balance;
}
.principles li::before{
  content:counter(p);position:absolute;left:0;top:0;
  font-family:var(--f-display);font-size:1em;font-weight:900;
  color:var(--red);
}
@media (min-width:900px){.principles{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}}

/* --- unreviewed-translation banner --------------------------------------- */
.unreviewed{
  background:var(--gold);color:#1A1206;
  border-bottom:1px solid rgba(0,0,0,.28);
  font-family:var(--f-text);font-size:var(--t-sm);line-height:1.45;
}
.unreviewed .wrap{padding-block:.7em;display:flex;gap:.6em;align-items:baseline}
.unreviewed strong{font-family:var(--f-display);font-weight:750}

/* --- language switch (masthead) ------------------------------------------ */
.langsw{display:inline-flex;align-items:center;gap:.3em}
.langsw__label{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;margin-right:.3em;
}
.langsw__opt{
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  padding:.24em .62em;border:1px solid var(--rule-strong);border-radius:999px;
  color:var(--ink-2);text-decoration:none;line-height:1.5;white-space:nowrap;
}
.langsw__opt:hover{border-color:var(--red);color:var(--red)}
.langsw__opt[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.langsw__opt .n{font-size:.85em;opacity:.6;margin-left:.4em}
@media (max-width:640px){
  .langsw__label{display:none}
  .langsw__opt .n{display:none}
}

/* --- wire ----------------------------------------------------------------- */
.wire{
  background:var(--ink);color:var(--paper);
  font-family:var(--f-display);font-size:var(--t-sm);font-stretch:88%;
  overflow:hidden;
}
.wire__inner{display:flex;align-items:center;gap:var(--sp-4);padding-block:.55rem}
.wire__label{
  flex:none;background:var(--red);color:#fff;font-weight:800;
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  padding:.28em .55em;
}
.wire__items{display:flex;gap:var(--sp-4);white-space:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.wire__items::-webkit-scrollbar{display:none}
.wire__items a{color:var(--paper);opacity:.9;font-weight:500}
.wire__items a:hover{color:var(--gold);opacity:1}
.wire__items span{color:var(--red);opacity:.85}

/* ==========================================================================
   hero
   ========================================================================== */
.hero{display:grid;grid-template-columns:1.62fr 1fr;gap:0;
  border-bottom:3px double var(--rule-strong)}
.hero__lead{padding:var(--sp-6) var(--sp-6) var(--sp-6) 0;border-right:1px solid var(--rule)}
.hero__side{padding:var(--sp-6) 0 var(--sp-6) var(--sp-6);display:flex;flex-direction:column}

.lead__figure{position:relative;margin-bottom:var(--sp-4);background:var(--paper-3)}
.lead__figure img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.94) contrast(1.03)}
/* Between 2xl and 3xl: the 3xl lead pushed the excerpt and the read-on
   link below the fold and clipped the headline itself. */
.lead__hed{font-size:clamp(1.7rem,1.3rem + 1.7vw,2.65rem);
  font-stretch:88%;font-weight:800;margin-block:var(--sp-3) var(--sp-3)}
.lead a:hover .lead__hed{color:var(--red)}
.lead__dek{font-size:var(--t-lg);margin-bottom:var(--sp-3);line-height:1.4}
.lead__excerpt{font-size:var(--t-lg);line-height:1.52;max-width:60ch}

/* --- the excerpt-boundary mark: the visible edge of what we show ---------- */
.cut{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  letter-spacing:.04em;white-space:nowrap;
}
.cut::before{content:"";width:1.6em;border-top:1px dashed var(--rule-strong)}

.readon{
  display:inline-flex;align-items:center;gap:.45em;margin-top:var(--sp-4);
  font-family:var(--f-display);font-weight:750;font-stretch:96%;
  font-size:var(--t-sm);letter-spacing:.045em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--red);padding-bottom:2px;
  transition:gap .16s ease,color .16s ease;
}
.readon .arrow{color:var(--red);transition:transform .16s ease}
a:hover .readon,.readon:hover{color:var(--red)}
a:hover .readon .arrow{transform:translateX(3px)}

/* --- source chip ---------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:750;
  font-stretch:100%;letter-spacing:.1em;text-transform:uppercase;
}
.chip__dot{width:.5em;height:.5em;border-radius:50%;background:var(--src,var(--red));flex:none}
.chip__name{color:var(--ink)}
.chip__lang{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;
  color:var(--ink-3);border:1px solid var(--rule-strong);
  border-radius:2px;padding:0 .3em;line-height:1.5;
}

/* --- side stories --------------------------------------------------------- */
.side__item{display:grid;grid-template-columns:1fr 88px;gap:var(--sp-4);
  padding-block:var(--sp-4);border-top:1px solid var(--rule)}
.side__item:first-of-type{border-top:0;padding-top:0}
.side__item img{width:88px;height:88px;object-fit:cover;background:var(--paper-3)}
.side__hed{font-size:var(--t-lg);font-stretch:90%;font-weight:750;margin-block:var(--sp-2) var(--sp-2)}
.side__item:hover .side__hed{color:var(--red)}
.side__excerpt{font-size:var(--t-sm);color:var(--ink-2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* --- briefs --------------------------------------------------------------- */
.briefs{margin-top:auto;padding-top:var(--sp-5);border-top:2px solid var(--ink)}
.briefs__head{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 var(--sp-3);
}
.briefs ul{list-style:none;margin:0;padding:0}
.brief{border-top:1px solid var(--rule)}
.brief:first-child{border-top:0}
.brief a{display:grid;grid-template-columns:auto 1fr;gap:0 .55em;
  align-items:baseline;padding-block:var(--sp-3)}
.brief__dot{width:.42em;height:.42em;border-radius:50%;margin-top:.5em;grid-row:1}
.brief__hed{
  font-family:var(--f-display);font-weight:650;font-stretch:92%;
  font-size:var(--t-base);line-height:1.22;letter-spacing:-.012em;
}
.brief__excerpt{
  grid-column:2;font-family:var(--f-text);font-size:var(--t-sm);
  color:var(--ink-2);line-height:1.45;margin-top:.35em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.brief__meta{
  grid-column:2;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;margin-top:.35em;
}
.brief a:hover .brief__hed{color:var(--red)}

/* ==========================================================================
   river
   ========================================================================== */
.section-head{
  display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;
  padding-block:var(--sp-6) var(--sp-4);
}
.section-head h2{
  font-family:var(--f-display);font-size:var(--t-2xl);font-weight:900;
  font-stretch:112%;letter-spacing:-.02em;text-transform:uppercase;margin:0;
}
.section-head .count{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-3)}

.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
  padding-bottom:var(--sp-5);border-bottom:1px solid var(--rule-strong)}
.filters__label{
  font-family:var(--f-mono);font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);margin-right:var(--sp-2);
}
.filter{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--rule-strong);border-radius:99px;
  padding:.35em .8em;cursor:pointer;color:var(--ink-2);line-height:1.3;
  display:inline-flex;align-items:center;gap:.4em;transition:.14s ease;
}
.filter:hover{border-color:var(--ink);color:var(--ink)}
.filter[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter[aria-pressed=true] .chip__dot{background:var(--paper)}
.filter .n{font-family:var(--f-mono);font-size:9px;opacity:.6}
.filter--all{letter-spacing:.12em}

.river{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 var(--sp-6);
}
.card{
  display:flex;flex-direction:column;
  padding-block:var(--sp-5);border-top:1px solid var(--rule);
  position:relative;
}
/* vertical column rules, like set type */
.river .card::after{
  content:"";position:absolute;top:0;bottom:0;right:calc(var(--sp-6)/-2);
  border-right:1px solid var(--rule);
}
.river .card:nth-child(3n)::after{display:none}

.card__figure{margin-bottom:var(--sp-3);background:var(--paper-3);overflow:hidden}
.card__figure img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);filter:saturate(.94)}
.card:hover .card__figure img{transform:scale(1.035)}
.card__num{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  margin-bottom:var(--sp-2);
}
.card__hed{font-size:var(--t-xl);margin-block:var(--sp-2);font-stretch:90%}
.card:hover .card__hed{color:var(--red)}
.card__excerpt{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);margin-bottom:var(--sp-3)}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding-top:var(--sp-2)}
.card__readon{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:750;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;gap:.35em;align-items:center;
}
.card:hover .card__readon{color:var(--red)}
.card__readon .arrow{transition:transform .16s ease}
.card:hover .card__readon .arrow{transform:translateX(3px)}

.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.tag{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--rule-strong);
}
.tag:hover{color:var(--red);border-bottom-color:var(--red)}

.empty{
  grid-column:1/-1;padding:var(--sp-8) 0;text-align:center;color:var(--ink-3);
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:600;
}
.more{display:flex;justify-content:center;padding-block:var(--sp-7)}
.more button{
  font-family:var(--f-display);font-size:var(--t-sm);font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:0;border-radius:2px;
  padding:.85em 2.2em;cursor:pointer;
}
.more button:hover{background:var(--red)}

/* ==========================================================================
   panels — sources, ethic
   ========================================================================== */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);
  padding-block:var(--sp-7);border-top:3px double var(--rule-strong)}
.panel h3{
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:800;
  font-stretch:104%;letter-spacing:-.01em;text-transform:uppercase;
  margin:0 0 var(--sp-4);padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--ink);
}
.srclist{list-style:none;margin:0;padding:0}
.srclist li{padding-block:var(--sp-3);border-bottom:1px solid var(--rule);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.srclist a{font-family:var(--f-display);font-weight:700;font-stretch:94%;font-size:var(--t-base)}
.srclist a:hover{color:var(--red)}
.srclist .sub{font-family:var(--f-text);font-style:italic;color:var(--ink-3);
  font-size:var(--t-sm);display:block;font-weight:400}
.status{font-family:var(--f-mono);font-size:var(--t-xs);white-space:nowrap;color:var(--ink-3)}
.status--live{color:var(--red)}
.status--stale{color:var(--ink-3)}
.status--dark{color:var(--ink-3);opacity:.75}

.creed{font-size:var(--t-lg);line-height:1.55}
.creed p{margin:0 0 var(--sp-4)}
.creed strong{font-family:var(--f-display);font-weight:800;font-stretch:98%;
  font-size:.92em;letter-spacing:-.005em}
.creed em{color:var(--ink)}

/* ==========================================================================
   footer
   ========================================================================== */
.footer{border-top:3px solid var(--ink);margin-top:var(--sp-7);padding-block:var(--sp-6) var(--sp-8)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-6)}
.footer__founder{margin-top:var(--sp-3);color:var(--ink-2)}
.footer__mail{
  font-family:var(--f-mono);font-size:var(--t-sm);
  border-bottom:1px solid var(--rule-strong);word-break:break-all;
}
.footer h4{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 var(--sp-3);
}
.footer p{margin:0 0 var(--sp-3);font-size:var(--t-sm);color:var(--ink-2);max-width:46ch}
.footer ul{list-style:none;margin:0;padding:0;font-size:var(--t-sm)}
.footer li{margin-bottom:var(--sp-2)}
.footer a:hover{color:var(--red)}
.colophon{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  padding-top:var(--sp-5);margin-top:var(--sp-5);border-top:1px solid var(--rule)}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:1000px){
  .river{grid-template-columns:repeat(2,1fr)}
  .river .card:nth-child(3n)::after{display:block}
  .river .card:nth-child(2n)::after{display:none}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero__lead{padding:var(--sp-5) 0;border-right:0;border-bottom:1px solid var(--rule-strong)}
  .hero__side{padding:var(--sp-5) 0}
  .panels,.footer__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .masthead__bar .note{display:none}
  .masthead__bar{gap:var(--sp-3)}
}
@media (max-width:560px){
  .river{grid-template-columns:1fr}
  .river .card::after{display:none}
  .wordmark{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
  .side__item{grid-template-columns:1fr 72px}
  .side__item img{width:72px;height:72px}
  .lead__figure img{aspect-ratio:4/3}
  .wire__label{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .wire,.filters,.more,.masthead__bar{display:none}
  body{background:#fff;color:#000}
}