/* ==========================================================================
   whatiskashmir.com — design system
   Register: documentary editorial. Ink on paper. Red used as evidence, not decoration.
   Brand red #EB1F26 extracted from the site's own 2019 artwork (Cover.png / NYT ad).
   ========================================================================== */

/* ---- self-hosted faces: zero third-party requests on page load ----------------
   Newsreader and Inter are both SIL Open Font License 1.1. Licence texts ship alongside
   the fonts at /assets/fonts/OFL-*.txt. Self-hosted deliberately: a reader inside
   Indian-administered Kashmir should not have to reach a third-party host to read this site,
   and a CDN is one more thing that can be blocked. ------------------------------ */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/newsreader.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 750;font-display:swap;
  src:url("/assets/fonts/inter.woff2") format("woff2")}

/* ---- metric fallback: kills the webfont swap CLS (measured ~0.115 without) ---- */
@font-face{font-family:"Newsreader-fallback";src:local("Georgia"),local("Times New Roman"),local("serif");
  size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Inter-fallback";src:local("Helvetica Neue"),local("Arial"),local("sans-serif");
  size-adjust:100%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

:root{
  --serif:"Newsreader","Newsreader-fallback",Georgia,"Times New Roman",serif;
  --sans:"Inter","Inter-fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* light — paper */
  --paper:#FBFAF8;
  --paper-2:#F3F0EA;
  --paper-3:#EAE5DD;
  --ink:#16120F;
  --ink-2:#4A443D;
  --ink-3:#736C63;
  --rule:#DDD7CE;
  --rule-2:#C8C1B6;
  --red:#EB1F26;        /* brand red — LARGE display/graphic only (4.23:1 on paper) */
  --red-btn:#B21016;    /* solid buttons — white label 7.05:1, surface 6.76:1 (measured) */
  --red-btn-h:#8C0B10;  /* hover: darker = pressed. white 9.68:1, surface 9.28:1 */
  --btn-ring:transparent;
  --red-ink:#AE1017;    /* text/link red — 6.98:1 on paper (measured) */
  --red-wash:#FBEDEC;
  --ok:#1F6B4A;         /* the ONLY non-red semantic colour — success. 4.9:1 on paper */
  --border-ui:#8A8278;  /* form/control borders — 3.63:1 on paper, 3.33:1 on panel (WCAG 1.4.11) */
  --graphite:#33373D;
  --shadow:0 1px 2px rgba(22,18,15,.05),0 8px 24px -12px rgba(22,18,15,.12);

  --measure:68ch;
  --wide:1180px;
  --gut:clamp(1.15rem,4vw,2.5rem);

  /* type scale */
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1.0625rem;
  --t-lg:1.25rem; --t-xl:1.5rem; --t-2xl:2rem; --t-3xl:2.6rem; --t-4xl:3.4rem;

  color-scheme:light dark;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131211; --paper-2:#1B1917; --paper-3:#242120;
    --ink:#F3F0EB; --ink-2:#B9B2A9; --ink-3:#8B847A;
    --rule:#2E2B27; --rule-2:#3E3A35;
    --red:#FF5F65; --red-btn:#C8151B; --red-btn-h:#BC1218; --btn-ring:#EF3F47;
    --red-ink:#EF3F47; --red-wash:#2A1416;
    --border-ui:#736C63; --ok:#4FBE8B;
    --graphite:#C3C8CF;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#131211; --paper-2:#1B1917; --paper-3:#242120;
  --ink:#F3F0EB; --ink-2:#B9B2A9; --ink-3:#8B847A;
  --rule:#2E2B27; --rule-2:#3E3A35;
  --red:#FF5F65; --red-btn:#C8151B; --red-btn-h:#BC1218; --btn-ring:#EF3F47;
  --red-ink:#EF3F47; --red-wash:#2A1416;
  --border-ui:#736C63; --ok:#4FBE8B;
  --graphite:#C3C8CF;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:var(--t-md);line-height:1.62;
  font-synthesis-weight:none;font-synthesis-style:auto;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}

/* ---------- skip link + focus ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:.7rem 1rem;font-family:var(--sans);font-size:var(--t-sm);text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:2px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut)}
.col{width:100%;max-width:var(--measure);margin-inline:auto}
.col--wide{max-width:min(92ch,100%)}
section{scroll-margin-top:5.5rem}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 92%,transparent);
  border-bottom:1px solid var(--rule)}
@supports (backdrop-filter:blur(8px)){.mast{backdrop-filter:saturate(1.4) blur(10px)}}
.mast__in{display:flex;align-items:center;gap:1rem;min-height:58px}
.mast__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;margin-right:auto;
  font-family:var(--sans);font-weight:700;letter-spacing:-.02em;font-size:var(--t-base)}
.mast__brand b{color:var(--red-ink)}
.mast__rule{width:22px;height:3px;background:var(--red);flex:0 0 22px;border-radius:2px}
.mast__brand{gap:.55rem}

.nav{display:flex;gap:.15rem;align-items:center}
.nav a{font-family:var(--sans);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);
  text-decoration:none;padding:.45rem .6rem;border-radius:4px;white-space:nowrap;line-height:1.2}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
.nav a[aria-current="page"]{color:var(--red-ink);font-weight:650}
.nav a.nav__cta{font-family:var(--sans);font-size:.875rem;font-weight:700;letter-spacing:.005em;
  background:var(--red-btn);color:#fff;text-decoration:none;padding:.56rem 1rem;border-radius:5px;
  white-space:nowrap;margin-left:.5rem;line-height:1.2;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.nav a.nav__cta:hover,.nav a.nav__cta:focus-visible{background:var(--red-btn-h);color:#fff;
  box-shadow:0 0 0 2px var(--btn-ring)}

.burger{display:none;background:none;border:1px solid var(--border-ui);border-radius:5px;
  width:44px;height:44px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;padding:0}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor}
.burger span::before{top:-5px}.burger span::after{top:5px}

/* real drawer — not a stub */
.drawer{position:fixed;inset:58px 0 0;background:var(--paper);z-index:59;overflow-y:auto;
  padding:1.25rem var(--gut) 3rem;display:grid;gap:.1rem;align-content:start}
.drawer[hidden]{display:none!important}
.drawer a{font-family:var(--sans);font-size:1.0625rem;font-weight:500;color:var(--ink);text-decoration:none;
  padding:.8rem .25rem;border-bottom:1px solid var(--rule)}
.drawer a[aria-current="page"]{color:var(--red-ink)}
.drawer__grp{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);padding:1.25rem .25rem .4rem}
body.is-locked{overflow:hidden}

@media (max-width:1000px){
  .nav{display:none}
  .burger{display:flex}
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.021em;line-height:1.13;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,var(--t-4xl))}
h2{font-size:clamp(1.55rem,1.1rem + 1.7vw,var(--t-2xl));line-height:1.18}
h3{font-size:clamp(1.2rem,1.02rem + .7vw,var(--t-lg));line-height:1.25}
h4{font-size:var(--t-md);letter-spacing:-.01em}
p{margin:0 0 1.05em}
a{color:var(--red-ink);text-decoration-line:underline;text-decoration-thickness:1px;
  text-underline-offset:.16em;text-decoration-color:color-mix(in srgb,var(--red-ink) 35%,transparent)}
a:hover{text-decoration-color:var(--red-ink)}
strong,b{font-weight:650}
em{font-style:italic}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
::selection{background:var(--red);color:#fff}

.prose>*+h2{margin-top:2.6rem}
.prose>*+h3{margin-top:2rem}
.prose h2+p,.prose h3+p{margin-top:.7rem}
.prose li{margin-bottom:.45em}
.prose ul,.prose ol{padding-left:1.35em;margin:0 0 1.2em}
.prose blockquote{margin:1.8rem 0;padding-left:1.15rem;border-left:2.5px solid var(--red);
  font-size:1.1em;line-height:1.5;color:var(--ink)}
.prose blockquote p:last-child{margin-bottom:0}
.prose blockquote cite{display:block;margin-top:.65rem;font-family:var(--sans);font-size:var(--t-sm);
  font-style:normal;color:var(--ink-3)}

/* eyebrow / kicker */
.kicker{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:var(--red-ink);margin:0 0 .85rem;display:flex;align-items:center;gap:.55rem}
.kicker::before{content:"";width:1.6rem;height:2px;background:var(--red);flex:0 0 auto}
.lede{font-size:clamp(1.12rem,1rem + .55vw,1.35rem);line-height:1.5;color:var(--ink-2)}
.meta{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3)}

/* ---------- hero ---------- */
.hero{padding:clamp(2.75rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule)}
.hero h1{margin-bottom:1.1rem}
.hero .lede{max-width:62ch}
.hero__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.btn{font-family:var(--sans);font-size:var(--t-base);font-weight:600;text-decoration:none;
  padding:.72rem 1.15rem;border-radius:5px;display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid transparent;cursor:pointer;line-height:1.2}
.btn--primary{background:var(--red-btn);color:#fff}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--red-btn-h);color:#fff;
  box-shadow:0 0 0 2px var(--btn-ring)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--border-ui)}
.btn--ghost:hover{border-color:var(--ink-2);background:var(--paper-2)}

/* ---------- the big number ---------- */
/* Explicit column counts that DIVIDE the item count. auto-fit produced 2 dead cells in
   .figs and 2 more in .foot__g at 768 — an empty track reads as a missing thing. */
.figs{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:7px;
  overflow:hidden;grid-template-columns:1fr}
@media (min-width:620px){
  .figs--n2,.figs--n4{grid-template-columns:1fr 1fr}
  .figs--n3{grid-template-columns:1fr}
}
@media (min-width:900px){
  .figs--n3{grid-template-columns:repeat(3,1fr)}
  .figs--n5,.figs--n6{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1060px){ .figs--n4{grid-template-columns:repeat(4,1fr)} }

/* A hero figure spans its whole row, so the REMAINING cells are what the column count must
   divide. figs--rest<N> counts those, not the total. Getting this wrong put a visibly empty
   cell on the home page's first screen at every width from 620px up. */
/* rest0 / rest1: a hero with nothing (or one thing) after it — one column, nothing to divide */
.figs--rest0,.figs--rest1,.figs--rest2,.figs--rest3,.figs--rest4{grid-template-columns:1fr}
@media (min-width:620px){ .figs--rest2,.figs--rest4{grid-template-columns:1fr 1fr} }
@media (min-width:700px){ .figs--rest3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1060px){ .figs--rest4{grid-template-columns:repeat(4,1fr)} }
.fig{background:var(--paper);padding:1.35rem 1.25rem}
.fig__n{font-family:var(--sans);font-size:clamp(1.85rem,1.3rem + 1.7vw,2.5rem);font-weight:750;
  letter-spacing:-.035em;line-height:1;color:var(--red-ink);font-variant-numeric:tabular-nums}
.fig__l{font-size:var(--t-md);line-height:1.45;margin-top:.65rem;color:var(--ink)}
/* The source line is part of the number, not a footnote about it. It was 12px in the
   lightest ink on the page — the brief promised the opposite, so it now sits at 13px in
   secondary ink above a hairline that ties it to the figure. */
.fig__s{font-family:var(--sans);font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);
  margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--rule)}
.fig__s a{color:var(--red-ink)}

/* one figure per page may carry display scale — the single most important number */
.fig--hero{padding:1.9rem 1.6rem}
.fig--hero .fig__n{font-size:clamp(3.2rem,2.2rem + 4.4vw,5.5rem);letter-spacing:-.045em;line-height:.92}
.fig--hero .fig__l{font-size:clamp(1.06rem,1rem + .4vw,1.28rem);line-height:1.4;max-width:34ch}
@media (min-width:620px){ .figs--hero .fig--hero{grid-column:1/-1} }

/* ---------- source / citation ---------- */
.src{font-family:var(--sans);font-size:var(--t-xs);line-height:1.45;color:var(--ink-3);
  border-left:2px solid var(--rule-2);padding-left:.7rem;margin:.75rem 0 0}
.src b{color:var(--ink-2);font-weight:600}
sup.ref{font-family:var(--sans);font-size:.68em;font-weight:700;vertical-align:super;line-height:0}
sup.ref a{color:var(--red-ink);text-decoration:none;padding:0 .1em}
sup.ref a:hover{text-decoration:underline}

.notes{margin-top:3.5rem;padding-top:1.5rem;border-top:2px solid var(--ink)}
.notes h2{font-family:var(--sans);font-size:var(--t-base);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:1.1rem}
.notes ol{font-family:var(--sans);font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);
  padding-left:1.5rem;margin:0}
.notes li{margin-bottom:.7em}
.notes li:target{background:var(--red-wash);outline:2px solid var(--red);border-radius:3px}

/* ---------- panels & cards ---------- */
.panel{background:var(--paper-2);border:1px solid var(--rule);border-radius:7px;padding:1.4rem 1.35rem}
.panel--red{background:var(--red-wash);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.panel h3{margin-bottom:.6rem}
.panel>:last-child{margin-bottom:0}

.cards{display:grid;gap:1rem;grid-template-columns:1fr}
/* Only put a count into 2 columns if 2 divides it. A 3-card row at 640–999px was leaving one
   dead cell at iPad portrait — the priority viewport for this site. */
@media (min-width:640px){
  .cards--n2,.cards--n4,.cards--n6,.cards--n8,.cards--n10,.cards--n12{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .cards--n3,.cards--n6,.cards--n9,.cards--n12{grid-template-columns:repeat(3,1fr)}
  .cards--n5,.cards--n7,.cards--n11{grid-template-columns:1fr 1fr}
}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:7px;padding:1.25rem;
  display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit}
a.card:hover{border-color:var(--red);box-shadow:var(--shadow)}
.card__k{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--red-ink)}
.card h3{font-size:var(--t-md);letter-spacing:-.012em}
.card p{font-size:var(--t-base);color:var(--ink-2);margin:0;line-height:1.5}
.card__more{font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:var(--red-ink);margin-top:auto;padding-top:.4rem}

/* ---------- the traced map, used once, at scale ----------
   Traced from the site's own 2019 logo (which drew this outline in barbed wire). It carries no
   internal boundaries, no district markers and no Line of Control, because this project holds
   the outline only — drawing district positions from memory onto it would be inventing data,
   which is the one thing this site refuses to do. So it is what it is: the shape. */
/* Full-width band. FINALCUT authorised exactly one full-bleed moment; a 100vw square line
   drawing would be 1440px tall at desktop, so the BAND bleeds and the drawing sits in it at a
   readable size, with the caption alongside rather than centred beneath. */
.jkband{width:100vw;margin-left:calc(50% - 50vw);background:var(--paper-2);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(2rem,5vw,3.5rem) 0}
.jkband__in{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut)}
.jkmap{margin:0;color:var(--ink);display:grid;justify-items:center;gap:1.4rem;align-items:center}
@media (min-width:900px){
  .jkmap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);
    justify-items:stretch}
  .jkmap figcaption{text-align:left;max-width:38ch;font-size:var(--t-base)}
}
.jkmap svg{width:100%;max-width:min(560px,80vw);height:auto;opacity:.94;justify-self:center}
.jkmap figcaption{font-family:var(--sans);font-size:var(--t-sm);line-height:1.55;color:var(--ink-3);
  max-width:44ch;text-align:center}

/* ---------- the file index: each entry announced by its own figure ----------
   Replaces an 11-card grid. 11 is prime, so no column count divides it; and eleven
   visually identical cards asserted that the eleven files are of equal magnitude, which
   they are not. NOTE, precisely: the figures are set at ONE size — the differentiation is in
   the content of the numbers, not in type scale. An earlier version of this comment claimed
   visual magnitude scaling that the CSS does not implement.
   Numbered ordinals were removed for a subject-specific reason: 01–11 beside
   "Killings", "Torture", "Sexual violence" reads as a severity ranking. */
.flist{list-style:none;padding:0;margin:1.6rem 0 0;border-top:1px solid var(--rule)}
.flist>li{border-bottom:1px solid var(--rule)}
.flist a{display:grid;grid-template-columns:1fr;gap:.3rem;padding:1.3rem .2rem;
  text-decoration:none;color:inherit}
.flist a:hover{background:var(--paper-2)}
.flist a:hover .flist__t{color:var(--red-ink)}
.flist__n{font-family:var(--sans);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem);font-weight:750;
  letter-spacing:-.035em;line-height:1;color:var(--red-ink);font-variant-numeric:tabular-nums}
.flist__nl{font-family:var(--sans);font-size:var(--t-xs);line-height:1.35;color:var(--ink-3);
  margin-top:.3rem;max-width:24ch}
.flist__t{font-size:var(--t-lg);font-weight:600;letter-spacing:-.018em;line-height:1.2}
.flist__x{font-size:var(--t-base);color:var(--ink-2);line-height:1.5;margin:.15rem 0 0;max-width:62ch}
@media (min-width:720px){
  .flist a{grid-template-columns:minmax(8.5rem,10.5rem) 1fr;gap:0 2rem;align-items:start;
    padding:1.5rem .2rem}
  .flist__fig{text-align:right}
  .flist__nl{max-width:none}
}

/* ---------- the two counts table ---------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0;
  border:1px solid var(--rule);border-radius:7px}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:var(--t-base)}
caption{text-align:left;font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3);
  padding:0 0 .6rem;caption-side:top}
th,td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.075em;
  color:var(--ink-3);background:var(--paper-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody th{font-weight:600;color:var(--ink)}
.t-civil{color:var(--red-ink);font-weight:650}
.t-state{color:var(--graphite);font-weight:650}

/* The two-count comparison is one of the three places this design spends boldness. The totals
   were rendering at 15px in plain ink — identical to every other cell — so the table read as
   a table rather than as the argument it is. */
table.counts td.n b,table.counts th.n b{font-size:clamp(1.3rem,1.05rem + .8vw,1.75rem);
  font-weight:750;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
table.counts tbody tr:first-child td.n b{color:var(--red-ink)}
table.counts tbody tr:nth-child(2) td.n b{color:var(--graphite)}
table.counts td,table.counts th{padding-block:.95rem}
table.counts tbody tr:first-child{background:color-mix(in srgb,var(--red-wash) 60%,transparent)}

/* ---------- timeline ---------- */
.tl{position:relative;margin:2rem 0 0;padding:0;list-style:none}
.tl::before{content:"";position:absolute;left:5.5rem;top:.4rem;bottom:.4rem;width:2px;background:var(--rule);}
.tl__i{position:relative;display:grid;grid-template-columns:5.5rem 1fr;gap:0 1.6rem;padding-bottom:1.9rem}
.tl__y{font-family:var(--sans);font-size:var(--t-sm);font-weight:750;color:var(--ink);text-align:right;
  padding-top:.1rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tl__b{position:relative}
.tl__b::before{content:"";position:absolute;left:calc(-1.6rem - 5px);top:.42rem;width:9px;height:9px;
  border-radius:50%;background:var(--paper);border:2px solid var(--rule-2)}
.tl__i--key .tl__b::before{background:var(--red);border-color:var(--red);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 16%,transparent)}
.tl__i--key .tl__y{color:var(--red-ink)}
.tl__h{font-weight:650;font-size:var(--t-md);letter-spacing:-.012em;margin:0 0 .3rem;line-height:1.28}
.tl__t{font-size:var(--t-base);color:var(--ink-2);margin:0;line-height:1.52}
.tl__d{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);margin-bottom:.3rem;font-weight:600}
@media (max-width:600px){
  .tl::before{left:4px}
  .tl__i{grid-template-columns:1fr;gap:0;padding-left:1.6rem}
  .tl__y{text-align:left;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.09em;
    color:var(--red-ink);margin-bottom:.2rem}
  .tl__b::before{left:calc(-1.6rem + 0px)}
}

/* ---------- library / bibliography ---------- */
.bib{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:0}
.bib>li{padding:1.15rem 0;border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:1fr;gap:.4rem}
.bib>li:first-child{border-top:1px solid var(--rule)}
.bib__t{font-weight:650;font-size:var(--t-md);letter-spacing:-.012em;line-height:1.3}
.bib__t em{font-style:italic}
.bib__a{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2)}
.bib__n{font-size:var(--t-base);color:var(--ink-2);line-height:1.5;margin:.15rem 0 0}
.bib__tag{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3)}

/* ---------- link directory ---------- */
.dir{display:grid;gap:.6rem;grid-template-columns:1fr;margin:1.3rem 0 0}
@media (min-width:700px){ .dir{grid-template-columns:1fr 1fr} }
.dir a{display:grid;gap:.28rem;padding:.85rem 1rem;border:1px solid var(--rule);border-radius:6px;
  text-decoration:none;color:inherit;background:var(--paper)}
.dir a:hover{border-color:var(--red);background:var(--paper-2)}
.dir__n{font-family:var(--sans);font-size:var(--t-base);font-weight:650;color:var(--ink)}
.dir__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.45;font-family:var(--sans)}
.dir__u{font-family:var(--sans);font-size:var(--t-xs);color:var(--red-ink);word-break:break-all}
.badge{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;padding:.12rem .4rem;border-radius:3px;
  background:var(--paper-3);color:var(--ink-2);letter-spacing:.03em;display:inline-block}
.badge--t1{background:var(--red);color:#fff}
.badge--off{background:var(--paper-3);color:var(--ink-3)}

/* ---------- content warning ---------- */
.cw{border:1px solid color-mix(in srgb,var(--red) 40%,transparent);background:var(--red-wash);
  border-radius:7px;padding:1.1rem 1.2rem;margin:1.6rem 0;font-family:var(--sans);font-size:var(--t-base);
  line-height:1.5;display:flex;gap:.85rem;align-items:flex-start}
.cw svg{flex:0 0 20px;margin-top:.15rem;color:var(--red-ink)}
.cw b{display:block;margin-bottom:.2rem;color:var(--ink)}
.cw p{margin:0;color:var(--ink-2)}

/* ---------- forms ---------- */
.form{display:grid;gap:1.15rem;margin-top:1.8rem}
.fld{display:grid;gap:.4rem}
.fld>label{font-family:var(--sans);font-size:var(--t-sm);font-weight:650;color:var(--ink)}
.fld__h{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);line-height:1.45}
input[type=text],input[type=email],input[type=url],select,textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--border-ui);border-radius:5px;padding:.65rem .75rem;width:100%;line-height:1.45}
textarea{min-height:13rem;resize:vertical;font-family:var(--serif);font-size:var(--t-md);line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--red);outline:2px solid color-mix(in srgb,var(--red) 25%,transparent);outline-offset:0}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.fld--err input,.fld--err textarea,.fld--err select{border-color:var(--red)}
.err{font-family:var(--sans);font-size:var(--t-sm);color:var(--red-ink);font-weight:600}
.types{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}
@media (min-width:560px){ .types{grid-template-columns:repeat(4,1fr)} }
.type{position:relative}
.type input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.type span{display:block;font-family:var(--sans);font-size:var(--t-base);font-weight:600;text-align:center;
  padding:.72rem .5rem;border:1.5px solid var(--border-ui);border-radius:6px;color:var(--ink-2);cursor:pointer}
.type input:checked+span{border-color:var(--red);background:var(--red-wash);color:var(--red-ink)}
.type input:focus-visible+span{outline:2.5px solid var(--red);outline-offset:2px}
.drop{border:1.5px dashed var(--border-ui);border-radius:7px;padding:1.5rem 1rem;text-align:center;
  font-family:var(--sans);font-size:var(--t-base);color:var(--ink-3);cursor:pointer;background:var(--paper)}
.drop.is-over{border-color:var(--red);background:var(--red-wash);color:var(--red-ink)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.filelist{list-style:none;padding:0;margin:.7rem 0 0;display:grid;gap:.35rem;font-family:var(--sans);font-size:var(--t-sm)}
.filelist li{display:flex;gap:.6rem;align-items:center;padding:.45rem .6rem;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:5px}
.filelist button{margin-left:auto;background:none;border:0;color:var(--red-ink);cursor:pointer;
  font-family:var(--sans);font-weight:650;font-size:var(--t-sm);padding:.15rem .3rem}
.cnt{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);text-align:right}
.cnt.is-over{color:var(--red-ink);font-weight:650}
.chk{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;
  font-family:var(--sans);font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}
.chk input{width:17px;height:17px;margin:.15rem 0 0;accent-color:var(--red)}
.note{font-family:var(--sans);font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:.9rem 1rem}

/* live status region — never fail silently */
.status{font-family:var(--sans);font-size:var(--t-base);border-radius:6px;padding:.85rem 1rem;line-height:1.5}
/* Success and failure must never be told apart by colour alone, and must never be told
   apart by NOTHING — these two rules were byte-identical, which made a submission that
   failed look exactly like one that succeeded. */
.status--ok{background:var(--paper-2);border:1px solid var(--ok);color:var(--ink);
  border-left:4px solid var(--ok)}
.status--ok::before{content:"\2713\00a0\00a0";font-weight:700;color:var(--ok)}
.status--err{background:var(--red-wash);border:1px solid var(--red-ink);color:var(--ink);
  border-left:4px solid var(--red-ink)}
.status--err::before{content:"\26A0\00a0\00a0";font-weight:700;color:var(--red-ink)}
.status--busy{background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-2)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--border-ui);border-top-color:var(--red);
  border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:.45rem}
@keyframes spin{to{transform:rotate(360deg)}}
button[disabled],.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);margin-top:clamp(3.5rem,8vw,6rem);
  padding:2.75rem 0 2.5rem;background:var(--paper-2);font-family:var(--sans)}
.foot__g{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:560px){ .foot__g{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .foot__g{grid-template-columns:repeat(4,1fr)} }
.foot h4{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);margin-bottom:.8rem}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.foot a{font-size:var(--t-sm);color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--red-ink);text-decoration:underline}
.foot__b{margin-top:2.25rem;padding-top:1.35rem;border-top:1px solid var(--rule);
  font-size:var(--t-xs);color:var(--ink-3);line-height:1.6;display:grid;gap:.5rem}

/* theme toggle */
.tt{background:none;border:1px solid var(--border-ui);border-radius:5px;width:44px;height:44px;cursor:pointer;
  color:var(--ink-2);display:grid;place-items:center;flex:0 0 44px;padding:0}
.tt:hover{color:var(--ink);border-color:var(--ink-2)}
.tt svg{width:15px;height:15px}

/* utility */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack>*+*{margin-top:1.1rem}
.stack-lg>*+*{margin-top:clamp(2.25rem,5vw,3.5rem)}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pageheader{padding:clamp(2.25rem,5vw,3.5rem) 0 clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--rule)}
main{padding-bottom:1rem}
.sec{padding:clamp(2.5rem,6vw,4rem) 0}
.sec+.sec{padding-top:0}
.crumb{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);margin-bottom:1rem}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--red-ink);text-decoration:underline}

@media print{
  .mast,.foot,.drawer,.burger,.tt,.nav a.nav__cta{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000}
  .col{max-width:none}
}

/* long numeric values (ranges like 8,000–10,000) step down so they never clip */
.fig__n--long{font-size:clamp(1.4rem,1.05rem + 1.1vw,1.85rem);letter-spacing:-.028em}

/* a phrase this site published, got wrong, and corrected — shown struck through so it can never
   be mistaken for a live claim, and exempted from the retracted-claims gate by class name */
.was{text-decoration:line-through;text-decoration-thickness:1px;color:var(--ink-3)}

/* footer visit counter — first-party, aggregate only */
.visits{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;align-items:baseline;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--rule)}
.visits>span{font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap}
.visits b{font-size:var(--t-base);font-weight:750;color:var(--red-ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-right:.28rem}
.visits__n{flex:1 1 100%;white-space:normal;line-height:1.5}

/* the big counter block on /support/ */
.vstat{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:7px;
  overflow:hidden;grid-template-columns:1fr 1fr;margin:1.6rem 0}
@media (min-width:760px){.vstat{grid-template-columns:repeat(4,1fr)}}
.vstat>div{background:var(--paper);padding:1.15rem 1.1rem}
.vstat__n{font-family:var(--sans);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);font-weight:750;
  letter-spacing:-.035em;line-height:1;color:var(--red-ink);font-variant-numeric:tabular-nums}
.vstat__l{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);margin-top:.5rem;line-height:1.4}
.vstat__s{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);margin-top:.3rem}

/* ==========================================================================
   CHARTS — hand-written inline SVG, no library, no third-party request.
   Series colours were VALIDATED with the dataviz validator, not eyeballed:
     light  #AE1017 / #0F6E9C  → 0 fails · CVD ΔE 19.5 · normal-vision ΔE 28.7
     dark   #EF3F47 / #3E9FD1  → 0 fails · CVD ΔE 20.2 · normal-vision ΔE 31.8
   Both clear the lightness band, the 0.10 chroma floor, ΔE≥8 CVD, ΔE≥15
   normal-vision and 3:1 against their own surface. The dark steps are selected
   for the dark plane, not flipped from the light ones.
   ========================================================================== */
:root{ --s1:#AE1017; --s2:#0F6E9C; --s-mute:#B5AEA2; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --s1:#EF3F47; --s2:#3E9FD1; --s-mute:#5A544C; }
}
:root[data-theme="dark"]{ --s1:#EF3F47; --s2:#3E9FD1; --s-mute:#5A544C; }

.ch{margin:2rem 0;padding:1.4rem 1.35rem 1.25rem;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:8px}
.ch--wide{}
.ch svg{width:100%;height:auto;display:block;overflow:visible}
.ch figcaption{margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--rule)}
.ch__cap{display:block;font-family:var(--serif);font-size:var(--t-md);line-height:1.55;
  color:var(--ink);max-width:66ch}
.ch__src{display:block;font-family:var(--sans);font-size:var(--t-sm);line-height:1.5;
  color:var(--ink-2);margin-top:.65rem;max-width:72ch}

/* marks: thin, rounded data-end at the baseline, no borders */
.ch__b{transition:opacity .12s ease}
.ch__b--s1{fill:var(--s1)}
.ch__b--s2{fill:var(--s2)}
.ch__b--mute{fill:var(--s-mute)}
.ch__bg{cursor:default}
.ch__bg:hover .ch__b{opacity:.78}

/* chrome: solid hairlines, one shade off the surface. never dashed. */
.ch__grid{stroke:var(--rule);stroke-width:1}
.ch__axis{stroke:var(--rule-2);stroke-width:1}

/* every piece of text wears an ink token — never the series colour */
.ch__tick,.ch__cat,.ch__val,.ch__legt{font-family:var(--sans)}
.ch__tick{font-size:11px;fill:var(--ink-3)}
.ch__cat{font-size:12px;fill:var(--ink-2);font-weight:500}
.ch__cat--r{font-size:11.5px}
.ch__val{font-size:12px;fill:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.ch__val--l{text-anchor:start}
.ch__legt{font-size:11.5px;fill:var(--ink-2)}
.ch__sw{stroke:none}

/* the blackout unit chart */
.ch__cal .ch__cell rect{fill:var(--s1);opacity:.9}
.ch__cal{max-width:640px;margin-inline:auto}

@media (max-width:620px){
  .ch{padding:1.05rem .9rem 1rem}
  .ch__cap{font-size:var(--t-base)}
}
@media print{ .ch{background:#fff;break-inside:avoid} }

/* ==========================================================================
   /2019/ — reconstruction of the New York Times advertisement.
   Deliberately NOT theme-aware: it is a facsimile of a printed artifact, so it
   keeps the original's own dark palette in both themes, framed as an exhibit.
   Every photographic slot is a labelled plate. No photograph is reproduced.
   ========================================================================== */
.ad{margin:0}
.ad__meta{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:var(--t-sm);
  margin:0 0 1.6rem}
.ad__meta th{width:11rem;text-align:left;color:var(--ink-3);font-weight:600;padding:.5rem .8rem .5rem 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.ad__meta td{padding:.5rem 0;border-bottom:1px solid var(--rule);color:var(--ink)}

.ad__sheet{--adink:#0d0d0f;--adred:#c8102e;--adyel:#e8e83c;--adpaper:#f2f0eb;
  background:var(--adink);color:#fff;font-family:var(--sans);border-radius:6px;overflow:hidden;
  border:1px solid var(--rule-2);box-shadow:var(--shadow);max-width:760px;margin-inline:auto;
  container-type:inline-size}
.ad__strip{background:#000;color:#cfcfcf;font-size:11px;letter-spacing:.16em;padding:.55rem .9rem;
  font-weight:600}

/* plates: what stood there, who owns it, and that it is not reproduced */
.ad__plate{background:repeating-linear-gradient(135deg,#2a2d31 0 8px,#22252a 8px 16px);
  border:1px solid #3a3e44;display:flex;flex-direction:column;justify-content:center;gap:.3rem;
  padding:.85rem .9rem;min-height:96px}
.ad__pl-what{font-size:12px;font-weight:700;color:#e6e6e6;line-height:1.3}
.ad__pl-who{font-size:10.5px;color:#9aa0a8;line-height:1.4}
.ad__pl-not{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--adred);
  font-weight:800}
.ad__plate--hero{min-height:210px}
.ad__plate--inset{min-height:96px}
.ad__plate--side{min-height:104px}

.ad__top{display:grid;grid-template-columns:1fr;gap:6px;padding:6px}
@container (min-width:520px){ .ad__top{grid-template-columns:1.35fr 1fr} }
.ad__insets{display:grid;gap:6px}

.ad__mast{display:flex;align-items:flex-end;gap:.7rem;padding:1rem .9rem .2rem;flex-wrap:wrap}
.ad__word{font-size:clamp(2rem,7cqi,3.3rem);font-weight:800;letter-spacing:-.02em;line-height:.9}
.ad__hash{font-size:clamp(.7rem,1.8cqi,.95rem);font-weight:800;color:var(--adyel);line-height:1.05;
  letter-spacing:.04em}
.ad__head{font-size:clamp(1.5rem,5.6cqi,2.85rem);font-weight:800;letter-spacing:-.02em;
  padding:.1rem .9rem 0;line-height:1.02}
.ad__sub{font-size:clamp(.85rem,2.7cqi,1.35rem);font-weight:700;padding:.25rem .9rem 1rem;
  letter-spacing:-.01em;line-height:1.15}

.ad__three{display:grid;grid-template-columns:1fr;gap:1px;background:#26292e}
@container (min-width:520px){ .ad__three{grid-template-columns:repeat(3,1fr)} }
.ad__three>div{padding:1rem .85rem;font-size:clamp(.66rem,1.9cqi,.86rem);font-weight:800;
  text-align:center;line-height:1.32;letter-spacing:.02em}
.ad__three>div:nth-child(1){background:#16323a}
.ad__three>div:nth-child(2){background:#1d4a44}
.ad__three>div:nth-child(3){background:#3a2118}

.ad__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#8f0c22;
  background-image:none}
@container (min-width:520px){ .ad__stats{grid-template-columns:1.1fr 1fr 1fr 1fr} }
.ad__stats>div{background:var(--adred);padding:1rem .85rem;text-align:center}
.ad__stats-t{font-size:clamp(1.1rem,3.4cqi,1.7rem);font-weight:800;line-height:1.02;
  display:flex;align-items:center;justify-content:center;text-align:left}
.ad__sl{display:block;font-size:clamp(.62rem,1.7cqi,.8rem);font-weight:800;letter-spacing:.06em}
.ad__sv{display:block;font-size:clamp(1.1rem,3.4cqi,1.7rem);font-weight:800;margin-top:.2rem;
  letter-spacing:-.01em}
.ad__sn{display:block;font-size:clamp(.56rem,1.5cqi,.72rem);opacity:.85;margin-top:.1rem}

.ad__body{display:grid;grid-template-columns:1fr;gap:6px;padding:6px;background:#000}
@container (min-width:640px){ .ad__body{grid-template-columns:1.55fr 1fr} }
.ad__copy{padding:.9rem .85rem}
.ad__h3{font-size:clamp(1.15rem,3.6cqi,1.85rem);font-weight:800;color:var(--adyel);
  line-height:1.05;margin:0 0 .8rem;letter-spacing:-.015em}
.ad__h3 span{font-size:.62em;color:#a8c07a;display:inline-block;margin-bottom:.15rem}
.ad__copy p{font-size:clamp(.7rem,1.85cqi,.83rem);line-height:1.5;color:#dcdcdc;margin:0 0 .7rem}
.ad__side{display:grid;gap:6px;align-content:start}

.ad__foot{background:#000;padding:.8rem .9rem;display:grid;gap:.25rem}
.ad__foot span{font-size:10px;color:#8a8a8a}
.ad__foot span:first-child{color:var(--adyel)}

.ad figcaption{margin-top:1.3rem;padding-top:1rem;border-top:2px solid var(--ink);max-width:760px;
  margin-inline:auto}

/* "Reported by" rail — independent journalism, kept out of the body prose so that a news
   article is never in the same style as an OHCHR paragraph number. Text only: a logo or
   favicon would be a third-party asset request and a gate-4 release blocker. */
.rep{margin:2.75rem 0 0;padding:1.35rem 1.4rem;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:8px;border-left:3px solid var(--graphite)}
.rep__h{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);margin:0 0 .4rem}
.rep__n{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;
  margin:0 0 .9rem;max-width:54ch}
.rep__l{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.rep__l li{display:grid;gap:.15rem}
.rep__l a{font-family:var(--sans);font-size:var(--t-base);font-weight:600;line-height:1.4;
  color:var(--ink);text-decoration-color:color-mix(in srgb,var(--ink-3) 45%,transparent)}
.rep__l a:hover{color:var(--red-ink);text-decoration-color:var(--red-ink)}
.rep__m{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3)}

/* ==========================================================================
   LICENSED IMAGERY — every image is public domain or Creative Commons,
   self-hosted, with author + licence rendered visibly beside it. CC BY and
   CC BY-SA require attribution, so the credit is part of the component.
   No photograph of a dead or injured person ships on this site.
   ========================================================================== */
.im{margin:2rem 0;padding:0}
.im img{width:100%;height:auto;display:block;border-radius:6px;background:var(--paper-2)}
.im figcaption{margin-top:.85rem;display:grid;gap:.45rem}
.im__tag{justify-self:start;font-family:var(--sans);font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--red-btn);
  padding:.16rem .45rem;border-radius:3px}
.im__cap{font-family:var(--serif);font-size:var(--t-md);line-height:1.55;color:var(--ink);
  max-width:64ch}
.im__cr{font-family:var(--sans);font-size:var(--t-xs);line-height:1.5;color:var(--ink-3)}
.im__cr a{color:var(--ink-3);text-decoration-color:color-mix(in srgb,var(--ink-3) 40%,transparent)}
.im__cr a:hover{color:var(--red-ink)}
.im--wide img{max-width:none}
/* full-bleed: breaks the reading column, runs to the viewport edges */
.im--bleed{width:100vw;margin-left:calc(50% - 50vw)}
.im--bleed img{border-radius:0;max-height:min(74vh,620px);object-fit:cover;object-position:center}
.im--bleed figcaption{width:100%;max-width:var(--wide);margin:.85rem auto 0;
  padding-inline:var(--gut)}
@media print{ .im--bleed{width:auto;margin-left:0} }

/* a row of images used as a visual anchor on long chronological pages */
.imrow{display:grid;gap:1.1rem;grid-template-columns:1fr;margin:1.5rem 0 0}
@media (min-width:820px){ .imrow{grid-template-columns:repeat(3,1fr)} }
.imrow .im{margin:0}
.imrow .im img{aspect-ratio:4/3;object-fit:cover}
.imrow .im__cap{font-size:var(--t-base);line-height:1.5}

/* ---- Original artwork (the Principal's own work) --------------------------
   Deliberately NOT .im--bleed: that crops with object-fit:cover, and this
   artwork carries text in all four corners that a crop would amputate. The
   piece is shown whole inside a full-bleed dark band instead, capped in WIDTH
   so its natural 3:2 height stays sane on a large monitor.

   The download deterrents are here rather than in JS so they survive JS being
   off: pointer-events:none takes the <img> out of hit-testing entirely and
   .art__frame::after lays a transparent box over it, so a right-click or a
   long-press has no image to save. See art() in build/images.py. */
.art{margin:0;padding:0}
.art__frame{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  background:#0a0c0f;display:flex;justify-content:center;overflow:hidden;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.art__img{display:block;width:100%;max-width:1500px;height:auto;
  -webkit-user-drag:none;user-drag:none;pointer-events:none}
.art__frame::after{content:"";position:absolute;inset:0;z-index:2;
  -webkit-touch-callout:none}
.art figcaption{width:100%;max-width:var(--wide);margin:1rem auto 0;
  padding-inline:var(--gut);display:grid;gap:.45rem}
.art figcaption .im__cap{max-width:78ch}
@media print{
  .art__frame{width:auto;margin-left:0;background:none}
  .art__frame::after{display:none}
}