/* The Free Desk — thesoftdownload.com
   Palette: oat ground, deep ink, signal orange. Type: Archivo / Source Serif 4 / JetBrains Mono. */

:root{
  --ground:#DCD4C7;
  --paper:#EFE9DF;
  --paper-2:#F7F3EC;
  --ink:#22252B;
  --ink-2:#1A1C21;
  --accent:#E2733B;
  --muted:#6B6459;
  --rule:rgba(34,37,43,.16);
  --rule-soft:rgba(34,37,43,.10);
  --rule-dark:rgba(239,233,223,.18);
  --sans:"Archivo",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(18px,4vw,56px);
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--ground);color:var(--ink);overflow-x:clip;
  font-family:var(--serif);font-size:20px;line-height:1.65;
  font-optical-sizing:auto;text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin:0}
p{margin:0 0 1.1em}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--gutter)}
.wrap-tight{max-width:1120px;margin:0 auto;padding-inline:var(--gutter)}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--accent);color:var(--ink);padding:10px 16px;font-family:var(--mono)}

/* ---------- masthead + dropdown nav ---------- */
.masthead{background:var(--ink);color:var(--paper);overflow-x:clip}
.masthead a{color:var(--paper)}
.masthead-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px 20px}
.wordmark{display:flex;align-items:baseline;gap:14px;text-decoration:none}
.wordmark b{font-family:var(--sans);font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em}
.wordmark span{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--accent)}
.masthead-note{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(239,233,223,.6);text-align:right;max-width:34ch}

.nav-toggle{position:absolute;left:-9999px}
.nav-open-btn{display:none}
.nav{border-top:1px solid var(--rule-dark);position:relative}
.nav-list{list-style:none;margin:0;padding-block:0;padding-inline:var(--gutter);display:flex;flex-wrap:wrap;gap:0}
.nav-list>li{position:static}
.nav-list>li>a{
  display:block;padding:17px 22px 17px 0;margin-right:22px;
  font-family:var(--mono);font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:rgba(239,233,223,.78);border-bottom:2px solid transparent;
}
.nav-list>li>a:hover,.nav-list>li>a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--accent)}
.has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:9px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
/* hover bridge: no dead gap between item and panel */
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
/* full-width panel anchored to the nav strip — never overflows the viewport */
.nav-sub{
  list-style:none;margin:0;padding:18px 0 20px;position:absolute;z-index:40;top:100%;left:var(--gutter);right:var(--gutter);
  background:var(--ink-2);border:1px solid var(--rule-dark);border-top:3px solid var(--accent);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease;
  box-shadow:0 18px 40px rgba(20,22,26,.45);
}
.has-sub:hover>.nav-sub,.has-sub:focus-within>.nav-sub{opacity:1;visibility:visible;transform:none}
.nav-sub::before{content:attr(data-cat);grid-column:1/-1;display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);padding:0 22px 12px}
.nav-sub a{display:block;padding:9px 22px;font-family:var(--serif);font-size:18px;line-height:1.35;
  text-decoration:none;color:rgba(239,233,223,.86)}
.nav-sub a:hover{background:rgba(226,115,59,.16);color:var(--paper)}
.nav-sub .sub-all{grid-column:1/-1;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-top:8px;padding-top:12px;border-top:1px solid var(--rule-dark)}

/* ---------- generic bands ---------- */
.band{padding:clamp(46px,6vw,86px) 0}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink a{color:var(--paper)}
.band-deep{background:var(--ink-2);color:var(--paper)}
.band-paper{background:var(--paper)}
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 32px;
  border-bottom:2px solid currentColor;padding-bottom:16px;margin-bottom:clamp(26px,3vw,40px)}
.band-ink .band-head,.band-deep .band-head{border-bottom-color:var(--rule-dark)}
.band-head h2{font-size:clamp(30px,3.4vw,46px)}
.band-intro{font-size:clamp(19px,1.6vw,23px);line-height:1.55;max-width:72ch;color:var(--muted);margin:0 0 clamp(24px,3vw,38px)}
.band-ink .band-intro,.band-deep .band-intro{color:rgba(239,233,223,.75)}

/* ---------- hero / start here ---------- */
.hero{background:var(--ink);color:var(--paper);border-top:1px solid var(--rule-dark)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px);align-items:center;
  padding-block:clamp(40px,5vw,74px) clamp(44px,5vw,78px)}
.hero h1{font-size:clamp(42px,6.1vw,88px);margin:18px 0 22px;max-width:17ch}
.hero-dek{font-size:clamp(20px,1.75vw,26px);line-height:1.48;color:rgba(239,233,223,.84);max-width:56ch;margin:0 0 26px}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chips li{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;padding:9px 14px;border:1px solid rgba(239,233,223,.34)}
.chips li:first-child{border-color:var(--accent);color:var(--accent)}
.hero-fig{margin:0;position:relative}
.hero-fig img{width:100%;height:clamp(260px,34vw,480px);object-fit:cover;filter:saturate(.72) contrast(1.05)}
.hero-fig figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(239,233,223,.55);margin-top:10px}

/* ---------- the licence decoder ---------- */
.decoder-picks{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(22px,3vw,32px);padding:0;list-style:none}
.pick{font-family:var(--mono);font-size:14px;letter-spacing:.06em;padding:14px 22px;background:transparent;
  color:rgba(239,233,223,.88);border:1px solid rgba(239,233,223,.3);cursor:pointer;text-decoration:none;display:inline-block}
.pick:hover{border-color:var(--accent);color:var(--paper)}
.pick[aria-selected="true"],.pick.is-on{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}
.lic{border:1px solid var(--rule-dark);border-left:4px solid var(--accent);background:rgba(239,233,223,.045);
  padding:clamp(24px,3vw,38px)}
.lic + .lic{margin-top:18px}
.lic-name{font-family:var(--sans);font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;margin:0 0 10px}
.lic-sum{font-size:clamp(21px,1.8vw,27px);line-height:1.42;margin:0 0 28px;max-width:66ch}
.lic-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,38px)}
.lic-cols h4{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.18em;color:var(--accent);margin:0 0 10px}
.lic-cols p{font-size:18px;line-height:1.6;color:rgba(239,233,223,.86);margin:0}
.lic-cols>div:last-child h4{color:var(--accent)}
.lic-cols>div:last-child{border-left:3px solid var(--accent);padding-left:18px;margin-left:-4px}
.lic-family{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--rule-dark);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:rgba(239,233,223,.6)}
.js-on .lic{display:none}
.js-on .lic.is-shown{display:block}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:17.5px;font-family:var(--serif)}
th{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-align:left}
.datatable th,.versus th{padding:14px 16px;border-bottom:2px solid currentColor}
.datatable td,.versus td{padding:15px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable tbody tr:nth-child(even){background:rgba(34,37,43,.04)}
.band-ink .datatable td,.band-deep .datatable td{border-bottom-color:var(--rule-dark)}
.band-ink .datatable tbody tr:nth-child(even),.band-deep .datatable tbody tr:nth-child(even){background:rgba(239,233,223,.05)}
.yes{color:var(--accent);font-weight:700}
.no{color:var(--muted)}
.band-ink .no,.band-deep .no{color:rgba(239,233,223,.55)}
.table-note{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--muted);margin:18px 0 0}
.band-ink .table-note,.band-deep .table-note{color:rgba(239,233,223,.5)}
.versus caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);padding-bottom:12px}
.versus td:first-child{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;width:16%;color:var(--muted)}

/* permission-led grouping */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px}
.perm{background:rgba(239,233,223,.05);border:1px solid var(--rule-dark);padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px}
.perm h3{font-size:24px}
.perm .kicker{color:var(--accent)}
.perm ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:17.5px}
.perm li{display:grid;grid-template-columns:1.5em 1fr;gap:6px;line-height:1.45}
.perm li b{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:500}

/* ---------- trade table ---------- */
.trade{display:grid;grid-template-columns:minmax(120px,.5fr) 1fr 1fr;border:1px solid var(--rule-dark)}
.trade>*{padding:22px 24px;border-bottom:1px solid var(--rule-dark)}
.trade .th{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.trade .th-free{color:var(--accent)}
.trade .rowlab{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(239,233,223,.6)}
.trade .cell{font-size:18.5px;line-height:1.55}
.trade .cell-paid{color:rgba(239,233,223,.78)}
.trade>*:not(:nth-child(3n)){border-right:1px solid var(--rule-dark)}
.trade-bottom{font-size:clamp(20px,1.8vw,25px);line-height:1.5;max-width:66ch;border-left:4px solid var(--accent);
  padding-left:22px;margin:30px 0 0}

/* ---------- category shelf ---------- */
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.shelf-card{background:var(--paper-2);border:1px solid var(--rule);padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px}
.shelf-no{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent)}
.shelf-card h3{font-size:26px}
.shelf-for{font-size:18.5px;line-height:1.5;margin:0}
.shelf-look{font-size:17px;line-height:1.55;margin:auto 0 0;padding-top:14px;border-top:1px solid var(--rule);color:var(--muted)}
.shelf-look b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:6px;font-weight:500}
.shelf-icon{width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:1.6}

/* ---------- checklist ---------- */
.checklist{list-style:none;margin:0;padding:0;counter-reset:none;border-top:1px solid var(--rule-dark)}
.checklist li{border-bottom:1px solid var(--rule-dark)}
.checklist input{position:absolute;left:-9999px}
.checklist label{display:grid;grid-template-columns:34px 62px 1fr;gap:20px;align-items:start;padding:22px 4px;cursor:pointer}
.checklist .box{width:30px;height:30px;border:1px solid rgba(239,233,223,.5);display:grid;place-items:center;
  font-family:var(--mono);font-size:17px;color:transparent;margin-top:3px}
.checklist input:checked + label .box{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.checklist input:focus-visible + label .box{outline:3px solid var(--accent);outline-offset:2px}
.checklist .n{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--accent);padding-top:6px}
.checklist .q{font-family:var(--sans);font-weight:700;font-size:clamp(20px,1.9vw,25px);letter-spacing:-.02em;display:block;margin-bottom:6px}
.checklist .why{font-size:18px;line-height:1.55;color:rgba(239,233,223,.74);display:block;max-width:78ch}
.checklist input:checked + label .q{color:rgba(239,233,223,.55);text-decoration:line-through;text-decoration-color:var(--accent)}
.check-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding-top:26px}
.check-foot p{margin:0;font-size:19px;color:rgba(239,233,223,.75);max-width:60ch}
.progress{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.btn-reset{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;background:none;
  border:1px solid var(--accent);color:var(--accent);padding:13px 22px;cursor:pointer}
.btn-reset:hover{background:var(--accent);color:var(--ink)}

/* ---------- article index cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;list-style:none;margin:0;padding:0}
.card{display:flex;flex-direction:column;height:100%;background:var(--paper-2);border:1px solid var(--rule);text-decoration:none;color:inherit}
.card:hover{border-color:var(--ink);color:inherit}
.card:hover .card-title{color:var(--accent)}
.card-img{aspect-ratio:16/10;width:100%;object-fit:cover;filter:saturate(.75) contrast(1.04)}
.card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent)}
.card-title{font-family:var(--sans);font-weight:700;font-size:24px;line-height:1.14;letter-spacing:-.025em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.28em}
.card-dek{font-size:18px;line-height:1.5;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* CSS-only "more" */
.more-toggle{position:absolute;left:-9999px}
.more-rest{display:none}
.more-toggle:checked ~ .more-rest{display:grid}
.more-label{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--ink);padding:14px 24px;cursor:pointer}
.more-label:hover{background:var(--ink);color:var(--paper)}
.more-toggle:checked ~ .more-label{display:none}

/* ---------- supporters ---------- */
.sponsor-featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.sponsor-roll{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.sponsor{display:flex;flex-direction:column;gap:12px;background:var(--ink-2);border:1px solid var(--rule-dark);
  padding:20px 20px 18px;text-decoration:none;color:rgba(239,233,223,.8);min-height:150px}
.sponsor:hover{border-color:var(--accent);color:var(--paper)}
.sponsor img{width:100%;height:56px;object-fit:contain;background:#15171B;padding:8px}
.sponsor-blurb{font-size:16.5px;line-height:1.45;min-height:1.45em}
.sponsor-roll .sponsor{min-height:110px;padding:14px 14px 12px}
.sponsor-roll .sponsor img{height:40px}
.sponsor-roll .sponsor-blurb{display:none}
.support-note{font-family:var(--mono);font-size:12.5px;line-height:1.75;letter-spacing:.04em;color:var(--muted);margin:22px 0 0;max-width:80ch}
.band-ink .support-note,.band-deep .support-note{color:rgba(239,233,223,.5)}

/* ---------- footer ---------- */
.foot{background:var(--ink-2);color:rgba(239,233,223,.72);padding:clamp(38px,4vw,58px) 0 clamp(34px,4vw,52px)}
.foot a{color:rgba(239,233,223,.78)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr);gap:clamp(26px,4vw,60px)}
.foot-word{font-family:var(--sans);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--paper);margin:0 0 14px}
.foot-line{font-size:18.5px;line-height:1.6;max-width:52ch;margin:0}
.foot-fine{font-family:var(--mono);font-size:12px;letter-spacing:.08em;line-height:1.8;text-transform:uppercase;
  color:rgba(239,233,223,.45);margin:14px 0 0}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
.foot-cols h3{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-cols a{font-size:17px;line-height:1.35;text-decoration:none}
.foot-cols a:hover{color:var(--accent)}

/* ---------- section / category pages ---------- */
.page-head{background:var(--ink);color:var(--paper);padding:clamp(40px,5vw,72px) 0 clamp(34px,4vw,56px)}
.page-head h1{font-size:clamp(38px,5.4vw,78px);margin:16px 0 20px}
.page-head .dek{font-size:clamp(20px,1.7vw,25px);line-height:1.5;color:rgba(239,233,223,.82);max-width:58ch;margin:0}
.page-head-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(26px,4vw,56px);align-items:end}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,233,223,.55);margin:0}
.crumbs a{color:rgba(239,233,223,.55);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;gap:clamp(18px,3vw,40px);align-items:start;
  padding:26px 0;text-decoration:none;color:inherit}
.cat-list a:hover .cat-title{color:var(--accent)}
.cat-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-top:7px}
.cat-title{font-family:var(--sans);font-weight:700;font-size:clamp(25px,2.6vw,35px);line-height:1.1;letter-spacing:-.03em;margin:0 0 8px}
.cat-dek{font-size:19px;line-height:1.5;color:var(--muted);margin:0;max-width:60ch}
.cat-meta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:8px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.hub-card{background:var(--paper-2);border:1px solid var(--rule);padding:28px 26px;display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;min-height:230px}
.hub-card:hover{border-color:var(--ink)}
.hub-card h2{font-size:28px}
.hub-card p{margin:0;font-size:18px;line-height:1.5;color:var(--muted)}
.hub-card .cat-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}

/* ---------- article ---------- */
.article-hero{background:var(--ink);color:var(--paper)}
.article-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;align-items:stretch}
.article-hero-text{padding:clamp(36px,4.6vw,72px) clamp(26px,3.4vw,58px) clamp(36px,4.6vw,64px) var(--gutter)}
.article-hero h1{font-size:clamp(36px,4.6vw,70px);margin:18px 0 20px;max-width:22ch}
.article-hero .dek{font-size:clamp(20px,1.7vw,26px);line-height:1.45;color:rgba(239,233,223,.84);max-width:44ch;margin:0 0 22px}
.byline{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(239,233,223,.6);margin:0}
.byline b{color:var(--accent);font-weight:500}
.article-hero-fig{margin:0;position:relative;min-height:320px}
.article-hero-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.06)}

.sec-index{background:var(--ink-2);color:var(--paper);border-top:1px solid var(--rule-dark)}
.sec-index ol{list-style:none;margin:0;padding:20px 0;display:flex;flex-wrap:wrap;gap:10px 32px;counter-reset:s}
.sec-index li{counter-increment:s;font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.sec-index a{color:rgba(239,233,223,.7);text-decoration:none}
.sec-index a:hover{color:var(--accent)}
.sec-index a::before{content:"0" counter(s) " · ";color:var(--accent)}

/* asymmetric off-centre reading column with breakout margin */
.article-body{
  max-width:1400px;margin:0 auto;
  padding-inline:var(--gutter);
  padding-block:clamp(34px,4vw,64px);
  padding-left:clamp(18px,7vw,150px);
}
.article-body > *{max-width:var(--measure)}
.article-body > .breakout{max-width:min(100%,1150px)}
.article-body > .pullquote{max-width:calc(var(--measure) + 190px)}
.a-sec{margin:clamp(30px,3.4vw,54px) 0 0}
.a-sec > h2{font-size:clamp(27px,2.6vw,38px);margin:0 0 4px;padding-top:16px;border-top:2px solid var(--ink)}
.a-sec > h2 .sn{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;color:var(--accent);
  font-weight:500;letter-spacing:.2em;margin-bottom:10px}
.a-sec p,.article-body > p{font-size:21px;line-height:1.72}
.article-body p{margin:0 0 1.05em}
.a-sec p:first-of-type{margin-top:18px}
.lead{font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1.5;font-weight:600;margin:0 0 1em}
.dropcap::first-letter{
  float:left;font-family:var(--sans);font-weight:800;font-size:4.6em;line-height:.78;
  padding:.06em .1em 0 0;color:var(--accent);
}
.article-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.article-body a:hover{color:var(--accent)}
.hr-rule{border:0;border-top:1px solid var(--rule);margin:clamp(26px,3vw,44px) 0}

/* article components */
.pullquote{margin:clamp(28px,3vw,44px) 0;padding:0 0 0 26px;border-left:6px solid var(--accent)}
.pullquote p{font-family:var(--sans);font-weight:700;font-size:clamp(24px,2.6vw,36px);line-height:1.18;
  letter-spacing:-.03em;margin:0}
.blockquote{margin:clamp(24px,3vw,38px) 0;padding:24px 28px;background:var(--paper-2);border:1px solid var(--rule)}
.blockquote p{font-size:21px;line-height:1.6;margin:0 0 12px}
.blockquote cite{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-style:normal}
.callout{margin:clamp(26px,3vw,42px) 0;background:var(--ink);color:var(--paper);padding:26px 30px;border-left:6px solid var(--accent)}
.callout::before{content:"KEY TAKEAWAY";display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent);margin-bottom:12px}
.callout p{font-size:21px;line-height:1.55;margin:0}
.note{background:var(--paper-2);border:1px dashed rgba(34,37,43,.4);padding:18px 22px;font-size:18px;line-height:1.6;
  color:var(--muted);margin:clamp(22px,2.6vw,34px) 0}
.note::before{content:"NOTE · ";font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent)}

/* key facts panel — full-bleed band between sections */
.keyfacts{background:var(--ink);color:var(--paper);padding:clamp(26px,3vw,40px) clamp(24px,3vw,40px);
  margin:clamp(30px,3.6vw,52px) 0;border-top:3px solid var(--accent)}
.keyfacts h3{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--accent);margin:0 0 20px}
.keyfacts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px 34px;margin:0}
.keyfacts div{border-top:1px solid var(--rule-dark);padding-top:12px}
.keyfacts dt{font-family:var(--sans);font-weight:700;font-size:19px;letter-spacing:-.01em;margin-bottom:4px}
.keyfacts dd{margin:0;font-size:17.5px;line-height:1.5;color:rgba(239,233,223,.78)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:clamp(26px,3vw,40px) 0}
.statblock{background:var(--paper-2);border:1px solid var(--rule);border-top:3px solid var(--accent);padding:22px 20px}
.stat-num{display:block;font-family:var(--sans);font-weight:800;font-size:clamp(38px,4vw,58px);line-height:1;letter-spacing:-.04em}
.stat-label{display:block;font-size:17px;line-height:1.4;color:var(--muted);margin-top:10px}

.timeline{list-style:none;margin:clamp(26px,3vw,42px) 0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:22px;
  padding:16px 0 16px 0;border-top:1px solid var(--rule);position:relative}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.t-when{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--accent);line-height:1.4}
.t-what{font-size:19px;line-height:1.5}

.chart{margin:clamp(26px,3vw,42px) 0;background:var(--paper-2);border:1px solid var(--rule);padding:22px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-family:var(--mono);font-size:12.5px;line-height:1.7;letter-spacing:.04em;color:var(--muted);margin-top:16px}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar-alt{fill:var(--ink)}
.chart .c-label,.chart .c-val{font-family:"JetBrains Mono",monospace;font-size:11px;fill:var(--ink)}
.chart .c-val{fill:var(--muted)}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .c-dot{fill:var(--ink)}

.article-figure{margin:clamp(26px,3vw,44px) 0}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption,.gallery figcaption{font-family:var(--mono);font-size:12.5px;line-height:1.7;letter-spacing:.04em;
  color:var(--muted);margin-top:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:clamp(26px,3vw,42px) 0}
.gallery figure{margin:0}
.map-figure{margin:clamp(26px,3vw,42px) 0}
.map-figure .map-slot{aspect-ratio:16/9;background:var(--paper-2);border:1px dashed rgba(34,37,43,.4)}
.map-figure figcaption{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:12px}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:clamp(26px,3vw,42px) 0}
.profile-card{background:var(--paper-2);border:1px solid var(--rule);padding:22px 22px 20px}
.profile-card h3{font-size:22px;margin:0 0 4px}
.profile-card .p-role{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.profile-card p{font-size:17.5px;line-height:1.55;margin:0 0 10px;color:var(--muted)}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:14px}
.profile-card.no-photo{border-left:4px solid var(--accent)}
.profile-card .p-links a{font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.profile-card .p-attr{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin:0}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:clamp(24px,3vw,38px) 0}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--paper-2);border:1px solid var(--rule);
  padding:18px 20px;text-decoration:none;color:inherit}
.org-card:hover{border-color:var(--accent)}
.org-card .org-logo{width:38px;height:38px;object-fit:contain;margin-bottom:6px}
.org-card .org-name{font-family:var(--sans);font-weight:700;font-size:18.5px;letter-spacing:-.01em;line-height:1.2}
.org-card .org-host{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.entity-ref{font-family:var(--mono);font-size:.86em;letter-spacing:.02em;white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:20px 0 0}
.further-grid a{background:var(--paper-2);border:1px solid var(--rule);padding:18px 20px;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.02em}
.further-grid a:hover{border-color:var(--accent);color:var(--accent)}
.related{background:var(--paper);border-top:1px solid var(--rule)}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.related-links a{display:block;background:var(--paper-2);border:1px solid var(--rule);padding:20px 22px;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:20px;line-height:1.18;letter-spacing:-.02em}
.related-links a:hover{border-color:var(--accent);color:var(--accent)}
.related-links a span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);
  font-weight:500;margin-bottom:8px}

/* prose / simple pages */
.prose{max-width:74ch;padding-inline:var(--gutter);margin:0 auto}
.prose h2{font-size:clamp(26px,2.4vw,34px);margin:clamp(30px,3vw,46px) 0 14px}
.prose p,.prose li{font-size:20.5px;line-height:1.7}
.prose ul{padding-left:1.1em}
.error-band{text-align:left;padding:clamp(60px,9vw,140px) 0}
.error-band h1{font-size:clamp(48px,8vw,110px)}
.error-code{font-family:var(--mono);font-size:13px;letter-spacing:.24em;color:var(--accent);margin:0 0 18px}

/* styleguide */
.sg-spec{border-top:1px solid var(--rule);padding:clamp(26px,3vw,42px) 0}
.sg-spec > h2{font-size:clamp(24px,2.2vw,32px);margin-bottom:6px}
.sg-spec > .eyebrow{margin-bottom:22px}
.sg-narrow{max-width:420px;border:1px dashed rgba(34,37,43,.35);padding:14px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-grid,.article-hero-grid,.page-head-grid,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .article-hero-text{padding-inline:var(--gutter)}
  .article-hero-fig{min-height:240px;height:clamp(220px,42vw,340px)}
  .article-body{padding-left:var(--gutter)}
  .lic-cols{grid-template-columns:minmax(0,1fr)}
  .lic-cols>div:last-child{border-left:3px solid var(--accent);padding-left:18px;margin-left:0}
  .trade{grid-template-columns:minmax(0,1fr)}
  .trade>*{border-right:0 !important}
  .trade .th{display:none}
  .trade .cell::before{content:attr(data-side);display:block;font-family:var(--mono);font-size:11px;
    letter-spacing:.18em;color:var(--accent);margin-bottom:8px}
  .cat-list a{grid-template-columns:minmax(0,1fr);gap:8px}
  .cat-kicker,.cat-meta{padding-top:0}
}
@media (max-width:760px){
  body{font-size:19px}
  .masthead-note{display:none}
  .nav-open-btn{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent);border:1px solid var(--accent);padding:11px 16px;cursor:pointer}
  .nav-list{display:none;flex-direction:column;padding-bottom:14px}
  .nav-toggle:checked ~ .nav .nav-list{display:flex}
  .nav-list>li>a{padding:15px 0;margin-right:0;border-bottom:1px solid var(--rule-dark)}
  .has-sub::after{display:none}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;min-width:0;box-shadow:none;
    grid-template-columns:minmax(0,1fr);left:auto;right:auto;
    border:0;border-left:3px solid var(--accent);padding:10px 0 14px;margin:0 0 6px;background:transparent;
    max-height:0;overflow:hidden;transition:max-height .2s ease}
  .has-sub:hover>.nav-sub,.has-sub:focus-within>.nav-sub{max-height:600px}
  .nav-sub::before{padding-left:16px}
  .nav-sub a{padding:8px 16px;font-size:17px}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
  .masthead-top{flex-wrap:wrap;gap:12px}
  .wordmark{flex-direction:column;gap:3px;align-items:flex-start}
  .wordmark b{white-space:nowrap}
  .checklist label{grid-template-columns:30px minmax(0,1fr);gap:8px 14px}
  .checklist .n{grid-column:2;grid-row:1;padding-top:6px}
  .checklist label>span:last-child{grid-column:1/-1;grid-row:2}
  .dropcap::first-letter{font-size:3.4em}
  .keyfacts dl{grid-template-columns:minmax(0,1fr)}
}
/* mobile nav sub: allow tap-open via details-free :target-less approach handled by checkbox above */
@media (max-width:760px){
  .nav-sub{max-height:none;overflow:visible}
}
@media print{
  .masthead,.nav,.foot,.sec-index,.sponsor-featured,.sponsor-roll{display:none}
  body{background:#fff}
}

/* flagship card — spans the feed, image beside the text */
.card-lead{grid-column:1/-1}
.card-lead .card{flex-direction:row;align-items:stretch;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card-lead .card:hover{border-color:var(--accent)}
.card-lead .card-img{width:52%;aspect-ratio:auto;min-height:340px;flex:none}
.card-lead .card-body{padding:clamp(26px,3vw,46px);justify-content:center;gap:14px}
.card-lead .card-kicker{font-size:12px;letter-spacing:.2em}
.card-lead .card-title{font-size:clamp(30px,3.4vw,50px);line-height:1.04;-webkit-line-clamp:3;min-height:0;letter-spacing:-.035em}
.card-lead .card-dek{font-size:clamp(19px,1.6vw,23px);line-height:1.5;color:rgba(239,233,223,.8);-webkit-line-clamp:4}
.card-lead .card-meta{margin:8px 0 0;border-top-color:var(--rule-dark);color:rgba(239,233,223,.6)}
.card-lead .card:hover .card-title{color:var(--accent)}
@media (max-width:860px){
  .card-lead .card{flex-direction:column}
  .card-lead .card-img{width:100%;aspect-ratio:16/10;min-height:0}
}

/* ---------- louder decoder ---------- */
[data-decoder]{border-top:6px solid var(--accent);position:relative;padding-block:clamp(52px,7vw,104px)}
[data-decoder] .band-head{display:block;border-bottom:0;padding-bottom:0;margin-bottom:14px}
[data-decoder] .decoder-flag{font-size:14px;letter-spacing:.28em;margin-bottom:16px}
[data-decoder] .band-head h2{font-size:clamp(42px,6.4vw,96px);line-height:.94;letter-spacing:-.04em;margin-bottom:14px}
[data-decoder] .band-head .eyebrow{font-size:14px;letter-spacing:.16em}
.decoder-lede{font-size:clamp(20px,1.8vw,26px);line-height:1.5;color:rgba(239,233,223,.8);max-width:64ch;
  margin:22px 0 clamp(28px,3.4vw,44px);padding-top:24px;border-top:1px solid var(--rule-dark)}
.decoder-picks{gap:12px}
[data-decoder] .pick{font-size:16px;padding:18px 28px;border-width:2px;letter-spacing:.04em}
[data-decoder] .pick[aria-selected="true"],[data-decoder] .pick.is-on{box-shadow:0 0 0 4px rgba(226,115,59,.22)}
[data-decoder] .lic{border:2px solid var(--accent);border-left-width:10px;background:rgba(226,115,59,.06);
  padding:clamp(28px,3.6vw,52px)}
[data-decoder] .lic-name{font-size:clamp(26px,2.6vw,38px);color:var(--accent)}
[data-decoder] .lic-sum{font-size:clamp(23px,2.3vw,34px);line-height:1.32;font-weight:600;margin-bottom:34px;max-width:60ch}
[data-decoder] .lic-cols{gap:clamp(22px,3vw,44px)}
[data-decoder] .lic-cols h4{font-size:13px;letter-spacing:.22em;text-transform:uppercase;padding-bottom:10px;border-bottom:2px solid var(--accent);margin-bottom:14px}
[data-decoder] .lic-cols p{font-size:19px}
[data-decoder] .lic-cols>div:last-child{background:rgba(226,115,59,.1);padding:0 0 0 20px;margin-left:0;border-left-width:5px}
[data-decoder] .lic-family{font-size:13.5px;letter-spacing:.08em;color:var(--accent)}
@media (max-width:760px){
  [data-decoder] .lic{border-left-width:6px;padding:22px 18px}
  [data-decoder] .pick{padding:15px 20px;font-size:15px}
}

/* ---------- quieter category shelf ---------- */
.shelf{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:1px solid var(--rule)}
.shelf-card{background:transparent;border:0;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
  padding:22px 22px 22px 0;gap:9px}
.shelf-card:last-child{border-right:0}
.shelf-card:not(:first-child){padding-left:22px}
.shelf-icon{width:22px;height:22px;stroke:var(--muted);stroke-width:1.4;opacity:.85}
.shelf-no{font-size:10px;letter-spacing:.18em;color:var(--muted)}
.shelf-card h3{font-size:20px;letter-spacing:-.015em}
.shelf-for{font-size:16.5px;line-height:1.45;color:var(--ink)}
.shelf-look{font-size:15.5px;line-height:1.5;padding-top:10px;border-top:1px solid var(--rule-soft)}
.shelf-look b{font-size:10px;letter-spacing:.14em;color:var(--muted);margin-bottom:5px}
@media (max-width:760px){
  .shelf-card{border-right:0;padding-inline:0 !important}
}


/* 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}

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

/* op-no-plate-4up: operator: remove the extra background, and the bottom row has to be four items
   per row. The mark carried a #15171B plate against a #1A1C21 tile — a box a shade darker than
   the tile it sits on. Fill only; geometry and inset stay. .sponsor-roll auto-fit minmax(180px,1fr)
   was fitting six across -> four above 900px. */
.sponsor img{background:transparent}
@media (min-width:900px){
  .sponsor-roll{grid-template-columns:repeat(4,1fr)}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   2073px at 390, 10% of the whole page. Two columns bring it to
   1199px (42% shorter). Checked before writing: no new overflow, smallest mark still
   128px wide, longest blurb 3 lines, tile heights 154-172px.
   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. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-featured, .sponsor-roll), 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){
  .sponsor-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-featured > * *{min-width:0!important;max-width:100%}
    .sponsor-featured img,.sponsor-featured svg{max-width:100%;height:auto}
  .sponsor-roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-roll > * *{min-width:0!important;max-width:100%}
    .sponsor-roll img,.sponsor-roll svg{max-width:100%;height:auto}
  .sponsor-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-featured (5 tiles), .sponsor-roll (7 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-featured:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-featured 5 rows at 1440, .sponsor-roll 5 rows at 900). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
  .sponsor-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article-body > figure.article-figure.breakout > img,
  div.article-hero-grid > figure.article-hero-fig > img,
  div.hero-grid.wrap > figure.hero-fig > img,
  li > a.card > img.card-img,
  li.card-lead > a.card > img.card-img){height:auto}
/* op-img-dims:end */