/* ==========================================================================
   horsesthink.com — "Field of View"
   Palette (five members, each with a job):
     --ground  bone      page ground
     --ink     near-black type, rules, dark bands
     --accent  rust      numerals, kickers, corner marks, flags   (saturated)
     --second  forest    section grounds, panels, quotes           (saturated)
     --quiet   dust      credits and fine print only
   The two saturated members sit ~150 degrees apart in hue.
   Type: Piazzolla (display + captions), Karla (text + labels).
   Drawn system: the field-of-view protractor — arcs, tick rules, hatched
   wedges, corner brackets. All inline SVG, stroke:currentColor.
   ========================================================================== */

:root{
  --ground:#EFEAE0;
  --ground-2:#E7E0D2;      /* derived tint of ground, for band weight */
  --ground-3:#DCD5C5;
  --ink:#17191A;
  --ink-soft:#3B382F;
  --ink-mid:#4A463C;
  --accent:#C0391A;
  --accent-deep:#93290F;
  --second:#1E5A4C;
  --second-deep:#153E34;
  --quiet:#6E6656;
  --quiet-strong:#645C4C;   /* fine print sitting on the mat tint */
  --flag:#E8B83F;          /* used on forest only, for "contested" marks */
  --rule:rgba(23,25,26,.9);
  --hair:rgba(23,25,26,.20);
  --measure:66ch;
  --pad:clamp(18px,4vw,48px);
  --serif:"Piazzolla",Georgia,serif;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.06}
h2,h3,h4{font-weight:600;letter-spacing:-.015em}
p{margin:0 0 1.1em}
ul,ol{margin:0}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.wrap--wide{max-width:1400px;margin:0 auto;padding-inline:var(--pad)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- labels, kickers, rules ---------------------------------------------- */
.kicker{
  font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:8px;
}
.kicker--quiet{color:var(--quiet)}
.label{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.tickrule{display:block;color:var(--accent);margin:16px 0 0;max-width:240px;height:12px}
.ico{display:block;width:22px;height:22px;flex:none;color:currentColor}
.ico--sm{width:17px;height:17px}
.ico--lg{width:30px;height:30px}

/* ---- header -------------------------------------------------------------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--ground)}
.masthead__top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  max-width:1240px;margin:0 auto;padding:22px var(--pad) 18px;
}
.wordmark{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.wordmark__t{font:800 clamp(28px,3.4vw,36px)/1 var(--serif);letter-spacing:-.035em}
.wordmark__t em{font-style:normal;color:var(--accent)}
.wordmark__mark{display:block;width:clamp(28px,3vw,34px);height:auto;flex:none;color:var(--accent)}
.wordmark:hover{text-decoration:none}
.wordmark:hover .wordmark__t{color:var(--accent-deep)}
.sitefoot .wordmark__t{color:var(--ground)}
.sitefoot .wordmark__mark{color:var(--flag)}
.masthead__strap{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);text-align:right}

.navindex{border-top:1px solid var(--rule)}
.navindex__grid{
  padding-inline:clamp(20px,3.2vw,56px);
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
}
.navcol{padding:20px 22px 26px;border-right:1px solid var(--hair);min-width:0}
.navcol:last-child{border-right:0}
.navcol[aria-current="true"]{background:var(--ground-2)}
.navcol__no{font:700 10px/1 var(--sans);letter-spacing:.14em;color:var(--accent)}
.navcol__head{display:flex;align-items:center;gap:7px;margin-top:7px;color:var(--ink)}
.navcol__head span{font:600 16px/1.15 var(--serif);letter-spacing:-.01em}
.navcol__sub{list-style:none;padding:0;margin:11px 0 0;display:flex;flex-direction:column;gap:5px}
.navcol__sub a{font:400 13px/1.35 var(--sans);color:var(--ink-mid)}
.navcol__sub a[aria-current="page"]{color:var(--accent)}
.navsheet{display:none}
.navmore{
  padding:11px clamp(20px,3.2vw,56px) 15px;
  display:flex;gap:22px;align-items:center;border-top:1px solid var(--hair);
  font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)
}
.navmore a{color:var(--ink)}

/* ---- bands --------------------------------------------------------------- */
.band{border-bottom:1px solid var(--rule)}
.band__in{max-width:1240px;margin:0 auto;padding:clamp(40px,6vw,76px) var(--pad)}
.band--tint{background:var(--ground-2)}
.band--forest{background:var(--second);color:var(--ground);border-bottom:0}
.band--forest .kicker{color:var(--flag)}
.band--forest a{color:var(--ground)}
.band--ink{background:var(--ink);color:var(--ground);border-bottom:0}

/* lead */
.lead-hero{position:relative;border-bottom:1px solid var(--rule);background:var(--ground-3)}
.lead-hero__img{position:relative;height:clamp(320px,54vw,660px)}
.lead-hero__img img{width:100%;height:100%;object-fit:cover}
.lead-hero__bracket{position:absolute;color:var(--ground);opacity:.9}
.lead-hero__bracket--tl{top:22px;left:22px}
.lead-hero__bracket--br{bottom:22px;right:22px}
.lead-hero__plate{
  background:var(--ground);padding:clamp(24px,3vw,40px) clamp(20px,3vw,44px) 28px;
  max-width:860px;
}
.lead-hero__plate h1{font-size:clamp(30px,5.2vw,60px);margin-top:14px}
.lead-hero__plate p{margin:18px 0 0;font:400 italic clamp(17px,2vw,21px)/1.45 var(--serif);color:var(--ink-mid);max-width:56ch}
.lead-hero__more{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media(min-width:900px){
  .lead-hero__plate{position:absolute;left:0;bottom:0;margin:0}
}
.figcredit-strip{
  max-width:1240px;margin:0 auto;padding:12px var(--pad) 14px;display:flex;
  justify-content:space-between;gap:24px;align-items:baseline;flex-wrap:wrap;
}
.figcredit-strip p{margin:0;font:400 13px/1.5 var(--sans);color:var(--ink-mid);max-width:70ch}
.figcredit-strip .credit{white-space:nowrap;color:var(--quiet-strong)}

/* quiet single-line band */
.deck-line{font:400 italic clamp(21px,3vw,34px)/1.34 var(--serif);letter-spacing:-.01em;max-width:26em;margin:0}

/* diagram split */
.split{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);background:var(--ground-2);border-bottom:1px solid var(--rule)}
.split__rule{background:var(--rule)}
.split__side{padding:clamp(28px,4vw,56px) var(--pad)}
.split__side h2{font-size:clamp(24px,3vw,34px);max-width:22ch}
.split__side p{font-size:17px;max-width:52ch;color:var(--ink-soft)}
.diagram{width:100%;height:auto;color:var(--ink);margin-top:22px}
@media(max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split__rule{height:1px}
}

/* dense run of sections */
.run{display:flex;flex-direction:column}
.run__row{
  display:grid;grid-template-columns:46px minmax(0,270px) minmax(0,1fr) 26px;
  gap:22px;align-items:baseline;padding:16px 0;border-top:1px solid var(--hair);
}
.run__row:last-child{border-bottom:1px solid var(--hair)}
.run__no{font:700 11px/1.6 var(--sans);letter-spacing:.14em;color:var(--accent)}
.run__title{display:flex;align-items:center;gap:10px;font:600 21px/1.15 var(--serif)}
.run__blurb{font:400 15px/1.45 var(--sans);color:var(--ink-mid)}
.run__go{font:400 18px/1 var(--sans);color:var(--accent);text-align:right}
.run__row:hover .run__title{color:var(--accent-deep)}
@media(max-width:760px){
  .run__row{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .run__blurb{grid-column:2}
  .run__go{display:none}
}

/* selection cards (staggered triptych) */
.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.triptych>*:nth-child(2){margin-top:44px}
.triptych>*:nth-child(3){margin-top:88px}
@media(max-width:860px){
  .triptych{grid-template-columns:minmax(0,1fr)}
  .triptych>*:nth-child(2),.triptych>*:nth-child(3){margin-top:0}
}
.pick{display:flex;flex-direction:column;height:100%}
.pick__figure{margin:0}
.pick h3{font-size:clamp(20px,2.3vw,25px);margin-top:14px}
.pick__dek{font:400 15px/1.5 var(--sans);color:var(--ink-mid);margin:8px 0 0}
.pick__meta{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px}

/* forest feature */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:stretch;background:var(--second);color:var(--ground);border-bottom:1px solid var(--second-deep)}
.feature .kicker{color:var(--flag)}
.feature a{color:var(--ground)}
.feature a:hover{color:#fff}
.feature__text{padding:clamp(32px,5vw,70px) var(--pad);display:flex;flex-direction:column;gap:26px;justify-content:space-between}
.feature__img{position:relative;min-height:320px;background:var(--second-deep)}
.feature__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick__figure img{width:100%;height:auto}
.feature__cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:84px 26px 22px;font:600 16px/1.45 var(--serif);color:var(--ground);background:linear-gradient(to top,rgb(21,62,52) 0%,rgba(21,62,52,.94) 34%,rgba(21,62,52,.6) 68%,rgba(21,62,52,0) 100%)}
.feature__cap .credit{margin-top:9px;color:rgba(239,234,224,.72)}
.feature blockquote{margin:16px 0 0;font:400 italic clamp(20px,2.6vw,30px)/1.34 var(--serif);letter-spacing:-.01em}
.feature__text h2{margin:16px 0 0;font:600 clamp(23px,3vw,32px)/1.18 var(--serif);letter-spacing:-.02em;max-width:24ch}
.feature__body{margin:18px 0 0;font-size:16.5px;line-height:1.6;color:rgba(239,234,224,.86);max-width:58ch}
.feature__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.feature__list li{border-top:1px solid rgba(239,234,224,.35)}
.feature__list li:last-child{border-bottom:1px solid rgba(239,234,224,.35)}
.feature__list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;font:600 19px/1.25 var(--serif)}
.feature__list span{font:400 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--flag)}
@media(max-width:900px){.feature{grid-template-columns:minmax(0,1fr)}}

/* ---- figures: four treatments, one drawing system ----------------------- */
.article-figure{margin:0}
.article-figure img{width:100%;height:auto}
.article-figure figcaption{
  font:600 17px/1.4 var(--serif);color:var(--ink);padding-top:14px;max-width:58ch;
}
.credit{display:block;font:400 12.5px/1.45 var(--sans);letter-spacing:.02em;color:var(--quiet-strong);margin-top:8px}
figcaption .credit{margin-top:7px}

/* F1 · mat: photograph sits on a mat, rust corner brackets */
.figure--mat{background:var(--ground-3);padding:16px;position:relative;clear:both}
.figure--mat figcaption{padding:14px 2px 2px}
.figure--mat::before,.figure--mat::after{
  content:"";position:absolute;width:26px;height:26px;border:1.5px solid var(--accent);
}
.figure--mat::before{top:0;left:0;border-right:0;border-bottom:0}
.figure--mat::after{top:0;right:0;border-left:0;border-bottom:0}


/* F2 · hairline box + rule above caption */
.figure--box{clear:both}
.figure--box img{box-shadow:0 0 0 1px var(--rule)}
.figure--box figcaption{border-top:1px solid var(--rule);margin-top:16px;padding-top:14px}

/* F3 · inset: small, sits in the column with prose beside it */
.figure--inset{width:min(300px,42%);float:left;margin:6px 30px 22px 0}
.figure--inset img{box-shadow:0 0 0 1px var(--hair)}
.figure--inset figcaption{font-size:15px;padding-top:12px}
@media(max-width:700px){.figure--inset{float:none;width:100%;margin:0 0 24px}}

/* F4 · bleed: breaks the measure, caption offset into a column */
.figure--bleed{margin:44px 0;background:var(--ground-2);clear:both}
.figure--bleed img{width:100%;max-height:66vh;object-fit:cover}
.figure--bleed figcaption{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:28px;
  padding:18px clamp(18px,3vw,32px) 22px;max-width:none;align-items:start;
}
.figure--bleed figcaption .credit{margin:0;text-align:right}
@media(max-width:700px){
  .figure--bleed figcaption{grid-template-columns:minmax(0,1fr)}
  .figure--bleed figcaption .credit{text-align:left}
}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:30px 0}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;box-shadow:0 0 0 1px var(--hair)}
.gallery figcaption{font:600 15px/1.4 var(--serif);padding-top:10px}

/* map frame (never drawn here; injected downstream) */
.map-figure{margin:30px 0;background:var(--ground-2);padding:16px}
.map-figure .map-slot{aspect-ratio:16/9;background:var(--ground-3);box-shadow:0 0 0 1px var(--hair)}
.map-figure figcaption{font:600 16px/1.4 var(--serif);padding-top:12px}

/* ---- article ------------------------------------------------------------- */
.arthead{border-bottom:1px solid var(--rule)}
.arthead__in{max-width:1240px;margin:0 auto;padding:clamp(18px,2.4vw,30px) var(--pad) clamp(14px,1.8vw,22px)}
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.crumbs a{color:var(--accent)}
.crumbs .sep{color:var(--hair)}
.artitle{font-size:clamp(29px,4.6vw,50px);line-height:1.02;margin-top:11px;max-width:26ch}
.artdek{margin:10px 0 0;font:400 italic clamp(17px,1.9vw,21px)/1.4 var(--serif);color:var(--ink-mid);max-width:56ch}
.artmeta{margin-top:14px;display:flex;gap:8px 20px;flex-wrap:wrap;align-items:baseline;font:500 11.5px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mid)}
.artmeta span{display:flex;gap:7px;align-items:baseline}
.artmeta span+span::before{content:"";width:1px;height:9px;background:var(--hair);margin-right:13px}
.artmeta b{font-weight:700;color:var(--accent);letter-spacing:.13em}

.article{max-width:1240px;margin:0 auto;padding:clamp(30px,4vw,54px) var(--pad) 0}
.article-body{max-width:var(--measure);font-size:19px;line-height:1.7;counter-reset:sec}
.article-body>p.opener::first-letter{float:left;font:800 66px/.76 var(--serif);color:var(--accent);padding:8px 13px 0 0}
.article-body>h2{counter-increment:sec;position:relative}
.article-body>h2::before{
  content:counter(sec,decimal-leading-zero);display:block;margin-bottom:10px;
  font:700 11px/1 var(--sans);letter-spacing:.18em;color:var(--accent);
}
.rest{clear:both;margin:30px 0 34px;color:var(--accent);opacity:.85}
.rest svg{display:block;width:120px;height:8px}
.contents{margin:0 0 8px;border-top:1px solid var(--rule);border-bottom:1px solid var(--hair);padding:16px 0 18px}
.contents__k{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.contents ol{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:8px 32px;counter-reset:toc}
.contents li{counter-increment:toc;display:flex;gap:10px;align-items:baseline}
.contents li::before{content:counter(toc,decimal-leading-zero);font:700 10px/1.7 var(--sans);letter-spacing:.12em;color:var(--quiet);flex:none}
.contents a{font:600 17px/1.35 var(--serif)}
.contents a:hover{color:var(--accent-deep)}
.article-body>p{margin:0 0 1.25em;color:var(--ink-soft)}
.article-body>p:first-of-type{font-size:20px;color:var(--ink)}
.article-body h2{font-size:clamp(23px,2.7vw,30px);margin:2em 0 .7em;clear:both}
.article-body h2:first-child{margin-top:0}
.article-body a{color:var(--accent-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.article-body a:hover{background:var(--ground-2)}
.article-body::after{content:"";display:block;clear:both}
.lead{font:400 clamp(19px,2.2vw,22px)/1.55 var(--sans);color:var(--ink)}

.pullquote{clear:both;margin:34px 0;padding:6px 0 6px 26px;border-left:3px solid var(--accent);max-width:34em}
.pullquote p{margin:0;font:400 italic clamp(21px,2.5vw,26px)/1.4 var(--serif);letter-spacing:-.01em}
.blockquote{margin:30px 0;padding:22px 26px;background:var(--ground-2)}
.blockquote p{margin:0;font:400 19px/1.55 var(--serif)}
.blockquote cite{display:block;margin-top:12px;font:500 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);font-style:normal}
.callout{margin:32px 0;background:var(--second);color:var(--ground);padding:26px 28px}
.callout .kicker{color:var(--flag);margin-bottom:12px}
.callout p{margin:0;font:400 17px/1.6 var(--sans)}
.note{clear:both;font:400 15px/1.6 var(--sans);color:var(--ink-mid);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:14px 0;margin:26px 0}

/* notes-for-design material: the observed / inferred apparatus */
.apparatus{margin:40px 0;border-top:2px solid var(--ink);clear:both}
.apparatus__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:12px 0 0}
.apparatus__head h2{font:600 22px/1.2 var(--serif);margin:0}
.apparatus__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:0 34px}
.apparatus__item{padding:16px 0;border-top:1px solid var(--hair)}
.apparatus__item .apparatus__key{font:700 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.apparatus__item p{margin:7px 0 0;font:400 16px/1.5 var(--sans);color:var(--ink-soft)}
.apparatus__item p b{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));margin:32px 0;border-top:1px solid var(--hair)}
.statblock{padding:22px 20px;border-left:1px solid var(--hair)}
.statblock:first-child{border-left:0}
.stat-num{display:block;font:800 clamp(30px,4vw,44px)/1 var(--serif);color:var(--accent);letter-spacing:-.02em}
.stat-label{display:block;margin-top:10px;font:400 14px/1.45 var(--sans);color:var(--ink-mid)}

.datatable,.versus{width:100%;border-collapse:collapse;margin:30px 0;font-family:var(--sans)}
.datatable th,.versus th{text-align:left;font:700 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);padding:0 16px 10px 0;border-bottom:1px solid var(--rule)}
.datatable td,.versus td{padding:13px 16px 13px 0;border-bottom:1px solid var(--hair);font-size:16px;vertical-align:top;color:var(--ink-soft)}
.datatable td:first-child,.versus td:first-child{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink)}
.versus td+td{border-left:1px solid var(--hair);padding-left:16px}

.timeline{list-style:none;padding:0;margin:30px 0}
.timeline li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:24px;padding:15px 0;border-top:1px solid var(--hair)}
.timeline li:last-child{border-bottom:1px solid var(--hair)}
.t-when{font:700 12px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.t-what{font:400 16px/1.55 var(--sans);color:var(--ink-soft)}
@media(max-width:640px){.timeline li{grid-template-columns:minmax(0,1fr);gap:4px}}

.chart{margin:30px 0}
.chart svg{width:100%;height:auto;color:var(--ink)}
.chart figcaption{font:600 15px/1.45 var(--serif);padding-top:12px;border-top:1px solid var(--hair);margin-top:12px}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;margin:30px 0}
.profile-card{background:var(--ground-2);padding:22px;display:flex;flex-direction:column}
.profile-card .p-photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin-bottom:16px}
.profile-card h3{font-size:21px}
.p-role{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:8px 0 10px}
.profile-card p{font-size:15px;color:var(--ink-soft)}
.p-links{margin-top:auto;padding-top:10px;font-size:14px}
.p-attr{font:400 12.5px/1.45 var(--sans);color:var(--quiet-strong)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin:26px 0}
.org-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--ground-2);min-width:0}
.org-logo{height:34px;width:auto;max-width:120px;object-fit:contain;aspect-ratio:auto}
.org-name{font:600 17px/1.2 var(--serif);display:block}
.org-host{font:400 12px/1.4 var(--sans);color:var(--quiet);display:block}
.entity-ref{color:var(--accent-deep);text-decoration:underline;white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin:30px 0}
.further-grid a{border-top:1px solid var(--hair);border-left:1px solid var(--hair);padding:20px;font:600 19px/1.25 var(--serif);display:flex;align-items:center;gap:10px;min-height:96px}
.related-links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 34px}
.related-links li{border-top:1px solid var(--hair)}
.related-links a{display:block;padding:15px 0;font:600 19px/1.3 var(--serif)}
.related-links .rl-sec{display:flex;align-items:center;gap:7px;font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* category + archive lists */
.cat-list{list-style:none;padding:0;margin:0}
.cat-list li{border-top:1px solid var(--hair)}
.cat-list li:last-child{border-bottom:1px solid var(--hair)}
.cat-list a{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,140px);gap:26px;align-items:center;padding:18px 0}
.cat-list img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.cat-list h3{font-size:23px}
.cat-list p{margin:6px 0 0;font:400 15px/1.5 var(--sans);color:var(--ink-mid);max-width:62ch}
.cat-list .cl-len{font:500 11.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);text-align:right}
@media(max-width:820px){
  .cat-list a{grid-template-columns:minmax(0,110px) minmax(0,1fr);row-gap:8px}
  .cat-list .cl-text{grid-column:2}
  .cat-list .cl-len{grid-column:2;text-align:left}
}
.register{width:100%;border-collapse:collapse}
.register th{text-align:left;font:700 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);padding:0 20px 12px 0;border-bottom:1px solid var(--rule)}
.register td{padding:15px 20px 15px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.register .r-title{font:600 20px/1.25 var(--serif)}
.register .r-sec{font:400 13px/1.4 var(--sans);color:var(--ink-mid);display:flex;align-items:center;gap:8px}
.register .r-brief{font:400 15px/1.5 var(--sans);color:var(--ink-soft);max-width:60ch}
@media(max-width:760px){
  .register thead{display:none}
  .register tr{display:block;border-bottom:1px solid var(--hair);padding:14px 0}
  .register td{display:block;border:0;padding:0 0 6px}
}

/* ---- supporters strip (footer furniture) -------------------------------- */
.supporters{background:var(--ink);color:var(--ground);padding:clamp(30px,4vw,48px) 0 clamp(26px,3vw,40px)}
.supporters__in{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.supporters .kicker{color:var(--flag)}
.supporters h2{font:600 22px/1.2 var(--serif);margin:12px 0 6px;color:var(--ground)}
.supporters__note{font:400 14px/1.55 var(--sans);color:rgba(239,234,224,.62);max-width:62ch;margin:0 0 26px}
.supporters__run{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));border-top:1px solid rgba(239,234,224,.22);border-right:1px solid rgba(239,234,224,.22)}
.sponsor{
  padding:18px 20px 20px;min-width:0;
  display:flex;flex-direction:column;gap:8px;
  border-left:1px solid rgba(239,234,224,.22);border-bottom:1px solid rgba(239,234,224,.22);
}
.sponsor-name{font:600 19px/1.25 var(--serif);color:var(--ground);word-break:break-word}
.sponsor-blurb{font:400 13.5px/1.5 var(--sans);color:rgba(239,234,224,.66);min-height:2.9em}
.sponsor:hover .sponsor-name{color:var(--flag)}
.sponsor.feat{background:#1f2220}
.sponsor.feat .sponsor-name{font-size:21px;border-top:2px solid var(--flag);padding-top:12px}


/* ---- footer -------------------------------------------------------------- */
.sitefoot{background:var(--ink);color:var(--ground);border-top:1px solid rgba(239,234,224,.18)}
.sitefoot__in{max-width:1240px;margin:0 auto;padding:clamp(30px,4vw,46px) var(--pad) 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:30px}
.sitefoot h3{font:600 14px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--flag);margin-bottom:12px}
.sitefoot ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:7px;font-size:15px}
.sitefoot a{color:rgba(239,234,224,.86)}
.sitefoot p{font-size:14px;color:rgba(239,234,224,.6);margin:0 0 .8em}
.sitefoot__bar{border-top:1px solid rgba(239,234,224,.18);padding:16px var(--pad) 22px;max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font:400 12.5px/1.5 var(--sans);color:rgba(239,234,224,.68)}
.guardrail{font:400 clamp(17px,2.2vw,22px)/1.5 var(--serif);color:var(--ink-mid);max-width:44em;margin:0}

/* ---- narrow screens: the index sheet ------------------------------------ */
@media(max-width:1000px){
  .navindex__grid{display:none}
  .navmore{display:none}
  .navsheet{display:block;border-top:1px solid var(--rule)}
  .navsheet>summary{
    list-style:none;cursor:pointer;max-width:1240px;margin:0 auto;
    padding:14px var(--pad);display:flex;align-items:center;justify-content:space-between;
    font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  }
  .navsheet>summary::-webkit-details-marker{display:none}
  .navsheet>summary::after{content:"+";font:400 20px/1 var(--sans);color:var(--accent)}
  .navsheet[open]>summary::after{content:"–"}
  .navsheet__body{background:var(--ground-2);border-top:1px solid var(--hair)}
  .navsheet__body .navsheet__grid{
    max-width:1240px;margin:0 auto;padding:8px var(--pad) 24px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0 26px;
  }
  .navsheet__col{padding:16px 0;border-top:1px solid var(--hair)}
}
@media(min-width:1001px){.navsheet{display:none}}

@media(max-width:760px){
  body{font-size:16px}
  .masthead__strap{display:none}
  .article-body{font-size:17.5px}
  .article-body>p:first-of-type{font-size:18.5px}
  .feature__text{gap:20px}
  .datatable,.versus{table-layout:fixed}
  .datatable th,.versus th,.datatable td,.versus td{padding-right:10px;overflow-wrap:anywhere;hyphens:auto}
  .versus td+td{padding-left:10px}
  .artmeta{gap:6px 16px}
  .artmeta span+span::before{display:none}
}

/* styleguide-only degradations */
.profile-card.no-photo{border-top:3px solid var(--accent)}
.org-card.no-logo{border-left:3px solid var(--accent)}
.org-card span{min-width:0}
.chart.donut svg,.chart.line svg,.chart.bar svg{max-width:100%}
code{font-family:var(--sans);font-size:.92em;background:var(--ground-3);padding:1px 5px}

/* desktop: the reading column sits centred under the full-width figures,
   so the page is not one left-hugging stack */
@media(min-width:900px){
  :root{--measure:72ch}
  .arthead__in{max-width:calc(900px + 2*var(--pad));margin-inline:auto}
  .article-body,.article>.apparatus,.article>.note,.article>.band,.article>.readnext{max-width:664px;margin-inline:auto}
  .article-body>.figure--bleed{margin-inline:-44px;width:calc(100% + 88px)}
}

/* end-of-entry read-next cards */
.readnext{clear:both;margin-top:58px;border-top:2px solid var(--ink);padding:20px 0 8px}
.readnext__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.readnext__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));gap:22px;margin-top:22px;align-items:start}
.rn{display:flex;flex-direction:column}
.rn img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;box-shadow:0 0 0 1px var(--hair)}
.rn__sec{display:flex;align-items:center;gap:7px;margin-top:13px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.rn h3{font:600 19px/1.2 var(--serif);margin-top:9px;letter-spacing:-.015em}
.rn p{margin:7px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-mid)}
.rn:hover{text-decoration:none}
.rn:hover h3{color:var(--accent-deep)}
.rn:hover img{box-shadow:0 0 0 1px var(--accent)}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}


/* op-footer-compact: the footer printed 7 rows for 7 link(s) in
   1 list(s) — 795px at 390, 9% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 795 -> 642px (19% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(7px,2.08vw,30px)!important;row-gap:7px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1403px at 390, 17% of the whole page. Two columns bring it to
   900px (36% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 132-174px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.supporters__run), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .supporters__run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .supporters__run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .supporters__run > * *{min-width:0!important;max-width:100%}
    .supporters__run img,.supporters__run svg{max-width:100%;height:auto}
  .supporters__run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}