/* The Blood Brothers — Unofficial Fan Archive · "Loud Quiet Loud" */

:root{
  --outer:#0B0B0D;
  --panel:#101012;
  --note-panel:#16161A;
  --paper:#F2F0E8;
  --hair:#2A2A30;
  --box:#3A3A42;
  --acid:#E8DC2E;
  --magenta:#D4247E;
  --dek:#C9C7BE;
  --body:#D8D6CC;
  --muted:#8E8E96;
  --label:#7A7A80;
  --dash:#5C5C64;
  --on-acid-quiet:#3A3510;
  --shell:1180px;
  --pad:44px;
  --display:"Archivo","Archivo Expanded",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--outer);
  color:var(--paper);
  font-family:var(--display);
  font-size:19px;
  line-height:1.5;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--acid);text-decoration:none}
a:hover{color:var(--magenta)}
::selection{background:var(--magenta);color:var(--acid)}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--display);text-transform:uppercase;font-weight:900;margin:0}
p{margin:0}

/* ---------- shell ---------- */
.shell{
  max-width:var(--shell);
  margin:0 auto;
  background:var(--panel);
  border:1px solid var(--hair);
}
.band{padding:var(--pad);border-bottom:1px solid var(--hair)}
.band:last-child{border-bottom:0}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta)}
.cap{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.rule{border-top:1px solid var(--hair);padding-top:26px}
.wrap-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- masthead ---------- */
.masthead{background:var(--acid);color:var(--panel)}
.masthead-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding:22px var(--pad);
}
.wordmark{
  font-size:clamp(32px,6vw,44px);line-height:.85;font-weight:900;
  font-stretch:62%;letter-spacing:-.025em;color:var(--panel);text-transform:uppercase;
}
.wordmark a{color:inherit}
.wordmark a:hover{color:inherit;opacity:.75}
.mast-tag{
  font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
}
.mast-tag.two-line{font-size:11px;letter-spacing:.2em;text-align:right;line-height:1.5}

/* nav — full-bleed strip, CSS-only dropdowns */
.nav{border-top:2px solid var(--panel)}
.nav ul{list-style:none;margin:0;padding:0}
.nav-top{display:flex;flex-wrap:wrap}
.nav-top>li{flex:1 1 auto;min-width:0;position:relative;border-right:2px solid var(--panel)}
.nav-top>li:last-child{border-right:0}
.nav-top>li>a{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:13px 18px;color:var(--panel);white-space:nowrap;
}
.nav-top>li>a:hover,.nav-top>li:focus-within>a{background:var(--panel);color:var(--acid)}
.nav-top>li>a[aria-current]{font-weight:700;box-shadow:inset 0 -3px 0 var(--magenta)}
.has-sub>a::after{content:" ↓";font-size:10px;opacity:.6}

.nav-sub{
  position:absolute;top:100%;left:0;z-index:40;min-width:290px;
  background:var(--panel);border:2px solid var(--acid);border-top:0;
  padding:8px 0;visibility:hidden;opacity:0;transition:opacity .12s ease;
}
.has-sub:hover>.nav-sub,.has-sub:focus-within>.nav-sub{visibility:visible;opacity:1}
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.nav-sub li a{
  display:block;padding:10px 18px;font-size:16px;font-weight:800;font-stretch:80%;
  text-transform:uppercase;line-height:1.15;color:var(--paper);
}
.nav-sub li a:hover{background:var(--magenta);color:var(--paper)}
.nav-sub .sub-head{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--magenta);padding:6px 18px 8px;
}
.nav-toggle,.nav-label{display:none}

/* interior masthead nav (inline row) */
.nav-inline{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0;padding:0}
.nav-inline a{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--panel);
}
.nav-inline a:hover{color:#5C0B36}
.nav-inline a[aria-current]{font-weight:700;border-bottom:2px solid var(--magenta)}

/* ---------- hero ---------- */
.hero h1{
  font-size:clamp(72px,13vw,150px);line-height:.78;font-stretch:62%;
  letter-spacing:-.045em;color:var(--paper);margin-bottom:26px;
}
.hero .quiet{display:block;color:var(--label);font-stretch:110%;font-size:clamp(40px,7vw,78px);letter-spacing:-.01em}
.hero .loud2{display:block;color:var(--magenta)}
.dek{font-size:24px;line-height:1.4;color:var(--dek);max-width:32em}

/* ---------- plates ---------- */
.plate{
  display:flex;align-items:center;text-transform:uppercase;font-weight:900;
  font-stretch:62%;line-height:.88;letter-spacing:-.02em;
  padding:16px 18px;min-height:88px;font-size:26px;
}
.plate.outline{border:2px solid var(--acid);padding:14px 16px}
.plate .plate-no{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  display:block;margin-bottom:8px;opacity:.85;
}
.plate-body{display:block}
.plate-sm{font-size:24px;min-height:86px}
.plate-lg{font-size:30px;line-height:.86;width:100%;padding:18px}

/* ---------- record wall ---------- */
.wall{display:flex;flex-direction:column;gap:10px}
.wall-row{border:0;--tint:#E8DC2E}
.wall-row summary{
  display:grid;grid-template-columns:74px 300px minmax(0,1fr) 92px;gap:20px;
  align-items:center;cursor:pointer;list-style:none;
  padding:6px 8px 6px 0;transition:background .15s ease;
}
.wall-row summary::-webkit-details-marker{display:none}
.wall-row summary:hover,.wall-row[open] summary{background:linear-gradient(90deg,color-mix(in oklab,var(--tint) 14%,transparent),transparent 78%)}
.wall-row summary:hover .plate{outline:2px solid var(--magenta);outline-offset:2px}
.rank{
  font-family:var(--display);font-size:56px;line-height:.8;font-weight:900;font-stretch:62%;
  color:transparent;-webkit-text-stroke:1.5px var(--box);text-align:right;
}
.wall-row summary:hover .rank,.wall-row[open] .rank{-webkit-text-stroke-color:var(--tint);color:transparent}
.wall-row[open] .rank{-webkit-text-stroke-width:2px}
.meter{display:flex;gap:3px;height:88px;align-items:flex-end}
.meter span{flex:1}
.score{
  font-size:44px;font-weight:900;font-stretch:65%;line-height:1;text-align:right;
  font-family:var(--display);
}
.wall-note{
  background:var(--note-panel);border-left:4px solid var(--tint);
  padding:24px 26px;margin:8px 0 0 74px;
  display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;
}
.wall-note .meta{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);display:block;margin-bottom:10px}
.wall-note p{font-size:19px;line-height:1.5;color:var(--dek);max-width:44em;margin-bottom:14px}
.wall-note .more{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.wn-spec{margin:0;display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);align-self:start}
.wn-spec>div{background:var(--note-panel);padding:11px 14px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.wn-spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.wn-spec dd{margin:0;font-size:16px;font-weight:800;font-stretch:82%;text-transform:uppercase;color:var(--paper);text-align:right;line-height:1.15}

/* wall as a literal wall of plates */
.wall.as-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.wall.as-grid .wall-row{border:1px solid var(--hair);padding:14px}
.wall.as-grid summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"rank score" "plate plate" "meter meter";
  gap:12px;align-items:center;padding:0;background:none;
}
.wall.as-grid .rank{grid-area:rank;text-align:left;font-size:34px;-webkit-text-stroke-width:1.5px}
.wall.as-grid .score{grid-area:score;text-align:right;font-size:34px}
.wall.as-grid .plate{grid-area:plate;min-height:130px;font-size:30px}
.wall.as-grid .meter{grid-area:meter;height:54px}
.wall.as-grid .wall-note{margin:12px 0 0;grid-template-columns:minmax(0,1fr);gap:16px;padding:18px}
.wall.as-grid .wall-note p{font-size:17px}
.view-toggle{display:flex;margin-left:auto;border-left:1px solid var(--hair)}
.view-toggle button{border-right:0;border-left:1px solid var(--hair)}
@media (max-width:1000px){
  .wall.as-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .wall-note{grid-template-columns:minmax(0,1fr);gap:18px;margin-left:0}
  .wall.as-grid{grid-template-columns:minmax(0,1fr)}
}

/* sort tabs */
.tabs{display:flex;flex-wrap:wrap;border:1px solid var(--hair);margin-bottom:22px}
.tabs button{
  padding:14px 30px;border:0;border-right:1px solid var(--hair);cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--label);
}
.tabs button[aria-pressed="true"]{background:var(--magenta);color:var(--paper);font-weight:700}
.tabs .hint{
  margin-left:auto;padding:14px 24px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label);
}

/* ---------- two voices ---------- */
.voices{display:flex;gap:4px;height:150px;align-items:flex-end}
.voices span{flex:1}
.legend{
  display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--label);padding-top:12px;
}
.legend b{font-weight:400}
.sw-a{color:var(--magenta)}
.sw-b{color:var(--acid)}
.sw-c{color:var(--paper)}
.trade{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:22px}
.trade-cell{border:1px solid var(--hair);padding:16px;display:flex;flex-direction:column;gap:10px}
.trade-cell .t-lab{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.trade-bar{height:10px;background:var(--hair)}
.trade-bar i{display:block;height:100%;background:var(--magenta)}
.trade-cell .t-val{font-family:var(--mono);font-size:12px;color:var(--label)}

/* ---------- numbered steps ---------- */
.steps{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.step{background:var(--panel);padding:18px 20px;display:flex;gap:18px;align-items:flex-start}
.step .n{font-family:var(--mono);font-size:21px;font-weight:700;color:var(--magenta);line-height:1}
.step h3{font-size:20px;font-weight:800;font-stretch:80%;color:var(--paper);line-height:1.1;margin-bottom:4px}
.step p{font-size:17px;line-height:1.45;color:var(--muted)}

/* ---------- feed / cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--hair);
  color:var(--paper);height:100%;
}
.card:hover{border-color:var(--magenta)}
.card .thumb{aspect-ratio:16/10;overflow:hidden;background:#000}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card-in{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{
  font-size:22px;line-height:1.05;font-weight:800;font-stretch:78%;color:var(--paper);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.1em;
}
.card:hover h3{color:var(--acid)}
.card p{font-size:16px;line-height:1.45;color:var(--muted);flex:1}
.card .meta{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);margin-top:auto}

/* CSS-only expander */
.more-toggle{position:absolute;opacity:0;pointer-events:none}
.more-extra{display:none}
.more-toggle:checked~.more-extra{display:grid}
.more-label{
  display:inline-block;margin-top:16px;cursor:pointer;font-family:var(--mono);font-size:12px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--box);color:var(--paper);padding:12px 20px;
}
.more-label:hover{border-color:var(--acid);color:var(--acid)}
.more-toggle:checked~.more-label{display:none}

/* buttons */
.btn{
  display:inline-block;font-family:var(--mono);font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:13px 22px;cursor:pointer;
}
.btn.primary{background:var(--acid);color:var(--panel);border:1px solid var(--acid)}
.btn.primary:hover{background:var(--magenta);border-color:var(--magenta);color:var(--paper)}
.btn.ghost{background:transparent;border:1px solid var(--box);color:var(--paper)}
.btn.ghost:hover{border-color:var(--acid);color:var(--acid)}
.arrow{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* ---------- sponsors ---------- */
.supporters{display:flex;flex-direction:column;gap:18px}
.sponsor-grid{display:grid;gap:12px}
.sponsor-grid.featured{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sponsor-grid.roll{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.sponsor{
  display:flex;flex-direction:column;gap:10px;background:#0C0C0F;
  border:1px dashed var(--box);padding:18px;min-height:112px;justify-content:center;
}
.sponsor:hover{border-style:solid;border-color:var(--acid)}
.sponsor img{width:100%;max-height:44px;object-fit:contain;object-position:left center;contrast(1.1);opacity:.92}
.sponsor:hover img{filter:none;opacity:1}
.sponsor-blurb{font-size:15px;line-height:1.4;color:var(--dash)}
.sponsor-blurb:empty{display:none}
.featured .sponsor{min-height:150px;border-style:solid;border-color:var(--hair)}
.featured .sponsor img{max-height:56px}

/* ---------- footer ---------- */
.foot{background:var(--acid);color:var(--panel);padding:36px var(--pad)}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end}
.foot .wordmark{font-size:32px}
.foot-tag{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
.disclaimer{max-width:44em;font-size:15px;line-height:1.5;color:var(--on-acid-quiet)}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;padding-top:20px;border-top:2px solid rgba(16,16,18,.35)}
.foot-nav a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--panel)}
.foot-nav a:hover{color:#5C0B36}
.foot-partners{background:#0C0C0F;color:var(--paper);padding:34px var(--pad);border-bottom:1px solid var(--hair)}

/* ---------- article ---------- */
.read-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--acid);z-index:80}
.art-top{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);background:var(--panel)}
.art-bleed{
  position:absolute;top:0;right:0;width:58%;height:100%;object-fit:cover;
  opacity:.4;filter:grayscale(1) contrast(1.3);
  mask-image:linear-gradient(90deg,transparent,#000 60%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);
}
.art-top-in{position:relative;z-index:1;padding:40px var(--pad) 30px;display:grid;gap:16px;max-width:26em}
.art-tag{
  position:absolute;right:var(--pad);top:24px;z-index:1;font-family:var(--display);
  font-size:clamp(80px,12vw,150px);line-height:.8;font-weight:900;font-stretch:62%;
  color:transparent;-webkit-text-stroke:2px var(--box);pointer-events:none;
}
.art-top h1{
  font-size:clamp(42px,7.2vw,84px);line-height:.82;font-stretch:62%;
  letter-spacing:-.035em;color:var(--paper);margin:0;
}
.art-top .dek{font-size:21px;max-width:30em}
.art-strip{
  position:relative;z-index:1;background:var(--magenta);color:#101012;
  display:flex;align-items:baseline;column-gap:22px;row-gap:2px;flex-wrap:wrap;padding:10px var(--pad);
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.art-strip span::before{content:"· ";opacity:.55}
.dyn-band{display:flex;gap:3px;height:96px;align-items:flex-end;margin:40px 0}
.dyn-band i{flex:1;background:var(--acid)}
.dyn-band i[data-drop]{background:var(--hair)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.art-body{padding:44px;border-right:1px solid var(--hair);padding-inline:44px}
.art-grid.solo{grid-template-columns:minmax(0,1fr)}
.art-grid.solo .art-body{border-right:0}
.art-body>*{max-width:36em}
.art-body>.full{max-width:none}
.art-body p{font-size:22px;line-height:1.6;color:var(--body);margin:0 0 26px}
.art-body h2{
  font-size:30px;font-stretch:70%;color:var(--acid);border-top:1px solid var(--hair);
  padding-top:26px;margin:38px 0 20px;max-width:none;
}
.art-body h2 .sec-no{
  font-family:var(--display);font-size:34px;line-height:1;font-weight:900;font-stretch:62%;
  color:transparent;-webkit-text-stroke:1.5px var(--magenta);
  display:inline-block;margin-right:16px;vertical-align:baseline;letter-spacing:0;
}
.art-body h3{font-size:22px;font-stretch:80%;color:var(--paper);margin:30px 0 14px}
.art-body em{font-style:italic;color:var(--paper)}
.art-body p.dc::first-letter{
  float:left;font-size:64px;line-height:1;font-weight:900;font-stretch:62%;
  background:var(--magenta);color:var(--acid);padding:12px 16px;margin:8px 16px 4px 0;
}
.art-aside{padding:44px 32px;display:flex;flex-direction:column;gap:30px;align-self:start}
.aside-h{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--acid);color:#101012;display:inline-block;padding:5px 10px;font-weight:700;
}

/* ---------- palette components ---------- */
.lead{font-size:24px !important;line-height:1.45 !important;color:var(--dek) !important}
.pullquote{margin:40px 0;background:var(--magenta);padding:28px var(--pad);max-width:none !important}
.pullquote p{
  font-size:34px !important;line-height:1.02;font-weight:900;font-stretch:66%;
  text-transform:uppercase;color:#101012 !important;margin:0 !important;max-width:24em;
}
.blockquote{margin:30px 0;border-left:4px solid var(--acid);padding:6px 0 6px 22px}
.blockquote p{font-size:21px !important;color:var(--paper) !important;margin:0 0 10px !important}
.blockquote cite{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-style:normal}
.callout{background:var(--note-panel);border-left:4px solid var(--magenta);padding:24px 26px;margin:30px 0}
.callout p{font-size:20px !important;line-height:1.5;color:var(--paper) !important;margin:0 !important}
.note{
  font-size:17px !important;line-height:1.5;color:var(--muted) !important;
  border:1px dashed var(--box);padding:16px 18px;margin:26px 0 !important;
}

.versus,.datatable{width:100%;border-collapse:collapse;margin:30px 0;font-size:17px}
.versus caption,.datatable caption{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--magenta);text-align:left;padding-bottom:12px;
}
.versus th,.versus td,.datatable th,.datatable td{
  border:1px solid var(--hair);padding:12px 14px;text-align:left;vertical-align:top;color:var(--dek);
}
.versus th,.datatable th{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:#15151A;
}
.versus tbody th{background:var(--acid);color:var(--panel);font-weight:700}
.datatable tbody tr:hover td{background:#15151A}
.table-scroll{overflow-x:auto;margin:30px 0}
.table-scroll table{margin:0}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:28px 0}
.statblock{border:1px solid var(--hair);padding:16px;display:flex;flex-direction:column;gap:6px;background:#0E0E11}
.stat-num{font-size:40px;line-height:.9;font-weight:900;font-stretch:65%;color:var(--acid);font-family:var(--display)}
.stat-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);line-height:1.35}
.art-aside .statrow{grid-template-columns:1fr;margin:0}

.timeline{list-style:none;margin:30px 0;padding:0;display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.timeline li{background:var(--panel);display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:14px 16px}
.t-when{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta);line-height:1.35}
.t-what{font-size:17px;line-height:1.45;color:var(--dek)}

.chart{margin:30px 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption,.article-figure figcaption,.map-figure figcaption,.gallery figcaption{
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--label);
  line-height:1.45;padding-top:12px;
}
.chart text{font-family:var(--mono);font-size:11px;fill:var(--label)}
.chart .c-val{fill:var(--paper)}

.article-figure{margin:30px 0}
.article-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:30px 0}
.gallery figure{margin:0}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.map-figure{margin:30px 0}
.map-slot{aspect-ratio:16/9;border:1px dashed var(--box);background:#0C0C0F}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:28px 0}
.profile-card{border:1px solid var(--hair);padding:18px;display:flex;flex-direction:column;gap:8px;background:#0E0E11}
.profile-card h3{font-size:20px;font-stretch:80%;color:var(--paper);margin:0}
.p-role{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta)}
.profile-card p{font-size:16px !important;line-height:1.45;color:var(--muted) !important;margin:0 !important}
.p-photo{width:100%;aspect-ratio:1/1;object-fit:cover}
.profile-card.no-photo .p-photo{display:none}
.p-links{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.p-attr{font-family:var(--mono);font-size:12px;color:var(--dash)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:28px 0}
.org-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--hair);padding:16px;background:#0C0C0F}
.org-card:hover{border-color:var(--acid)}
.org-logo{max-height:34px;object-fit:contain;object-position:left}
.org-card.no-logo .org-logo{display:none}
.org-name{font-size:19px;font-weight:800;font-stretch:80%;text-transform:uppercase;color:var(--paper);line-height:1.1}
.org-host{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--label)}
.entity-ref{border-bottom:1px solid var(--magenta)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:26px 0}
.further-grid a{
  border:1px solid var(--hair);padding:16px;font-size:19px;font-weight:800;font-stretch:78%;
  text-transform:uppercase;line-height:1.1;color:var(--paper);
}
.further-grid a:hover{border-color:var(--acid);color:var(--acid)}
.related{border-top:1px solid var(--hair);margin-top:40px;padding-top:26px}
.related h2{border:0;padding:0;margin:0 0 16px}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.related-links:empty,.related:has(.related-links:empty){display:none}
.related-links li{background:var(--panel)}
.related-links a{
  display:block;padding:16px 18px;font-size:21px;font-weight:900;font-stretch:72%;
  text-transform:uppercase;line-height:1.05;color:var(--acid);
}
.related-links a:hover{background:var(--magenta);color:var(--paper)}

/* stepper */
.stepper{margin:30px 0;max-width:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.chips button{
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.06em;
  padding:10px 15px;cursor:pointer;border:1px solid var(--box);background:transparent;color:var(--muted);
}
.chips button[aria-pressed="true"]{background:var(--acid);border-color:var(--acid);color:var(--panel)}
.step-panel{border-left:4px solid var(--magenta);background:var(--note-panel);padding:24px 26px;min-height:170px;display:flex;flex-direction:column;gap:10px}
.step-panel .sp-kick{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta)}
.step-panel h3{font-size:32px;font-stretch:70%;color:var(--paper);margin:0;line-height:1}
.step-panel p{font-size:19px !important;line-height:1.55;color:var(--dek) !important;margin:0 !important}
.step-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.step-count{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-left:auto}

/* category / index pages */
.page-head{padding:44px var(--pad) 30px;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:end}
.page-head h1{font-size:clamp(48px,7vw,80px);line-height:.82;font-stretch:62%;letter-spacing:-.035em;color:var(--paper)}
.page-head h1 .alt{color:var(--magenta)}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.cat-list li{background:var(--panel)}
.cat-list a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px var(--pad);color:var(--paper)}
.cat-list a:hover{background:#15151A}
.cat-list .c-no{font-family:var(--mono);font-size:14px;color:var(--magenta)}
.cat-list h2{font-size:30px;font-stretch:72%;line-height:1;color:var(--paper);margin-bottom:8px}
.cat-list a:hover h2{color:var(--acid)}
.cat-list p{font-size:17px;line-height:1.45;color:var(--muted);max-width:44em}
.cat-list .c-go{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--acid)}

/* ---------- hero (signature) ---------- */
.hero2{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);background:var(--panel)}
.hero2-bleed{
  position:absolute;top:0;right:0;width:62%;height:100%;object-fit:cover;
  opacity:.42;filter:grayscale(1) contrast(1.35);
  mask-image:linear-gradient(90deg,transparent,#000 55%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);
  pointer-events:none;
}
.hero2>*:not(.hero2-bleed){position:relative;z-index:1}
.h-loud{
  display:block;padding-inline:var(--pad);
  font-size:clamp(96px,26vw,232px);line-height:.72;font-weight:900;font-stretch:62%;
  letter-spacing:-.05em;text-transform:uppercase;text-indent:-.055em;
}
.h-title{margin:0;padding:44px 0 0}
.h-title .h-paper{padding-top:20px}
.h-quiet{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--magenta);color:#101012;padding:9px var(--pad);margin-top:14px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
}
.h-quiet .r{letter-spacing:.16em;font-weight:400}
.h-pad{padding:44px var(--pad) 0}
.h-acid{color:var(--acid)}
.h-paper{color:var(--paper)}
.h-gap{height:14px}
.drop-strip{
  background:var(--magenta);color:#101012;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;padding:9px var(--pad);
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
}
.drop-strip .r{letter-spacing:.16em;font-weight:400}
.h-meter{display:flex;gap:3px;height:76px;align-items:flex-end;margin-top:18px}
.h-meter span{flex:1;background:var(--acid)}
.h-meter span[data-drop]{background:var(--hair);animation:drop-breathe 3.6s ease-in-out infinite}
.h-meter span[data-drop="2"]{animation-delay:1.1s}
@keyframes drop-breathe{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.h-meter span[data-drop]{animation:none}}
.hero2-foot{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:44px;
  align-items:end;padding:34px var(--pad) 44px;
}
.hero2-foot .dek{font-size:25px;max-width:34em}
.hero2-stat{display:flex;flex-direction:column;gap:8px;border-left:3px solid var(--acid);padding-left:18px}
.hero2-stat b{font-size:64px;line-height:.86;font-weight:900;font-stretch:65%;color:var(--acid);font-family:var(--display)}
.hero2-cta{display:flex;gap:12px;flex-wrap:wrap;padding-top:22px}
@media (max-width:760px){
  .hero2-bleed{width:100%;opacity:.24}
  .h-meter{height:52px}
  .h-title{padding-top:26px}
  .h-quiet{letter-spacing:.24em;font-size:11px}
  .hero2-foot{grid-template-columns:minmax(0,1fr);gap:26px;padding:26px var(--pad) 34px}
  .hero2-foot .dek{font-size:20px}
  .drop-strip{letter-spacing:.24em;font-size:11px}
}

.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
.split2.align-center{align-items:center}

/* section index rows */
.idx-stack{display:grid;gap:1px;background:var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.idx-row{
  background:var(--panel);display:grid;grid-template-columns:260px minmax(0,1fr) 220px;
  gap:26px;align-items:center;padding:22px var(--pad);color:var(--paper);
}
.idx-row:hover{background:#15151A}
.idx-row:hover .plate{outline:2px solid var(--magenta);outline-offset:2px}
.idx-meta{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);display:block;margin-bottom:8px}
.idx-note{font-size:18px;line-height:1.45;color:var(--dek);max-width:40em}
.idx-score{display:flex;align-items:center;gap:14px;justify-content:flex-end}
.meter-10{display:flex;gap:2px;height:34px;align-items:flex-end;width:120px}
.meter-10 span{flex:1}
.idx-row .score{font-size:38px;width:52px}
@media (max-width:900px){
  .idx-row{grid-template-columns:minmax(0,1fr);gap:16px}
  .idx-score{justify-content:flex-start}
}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.hub-card{border:1px solid var(--hair);padding:24px;display:flex;flex-direction:column;gap:12px;background:#0E0E11}
.hub-card h2{font-size:30px;font-stretch:70%;color:var(--acid)}
.hub-card p{font-size:17px;color:var(--muted)}
.hub-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hub-card ul a{font-size:18px;font-weight:800;font-stretch:80%;text-transform:uppercase;line-height:1.1}

/* simple prose page */
.prose{padding:44px;max-width:38em}
.prose p{font-size:21px;line-height:1.6;color:var(--body);margin:0 0 24px}
.prose h2{font-size:30px;font-stretch:70%;color:var(--acid);margin:36px 0 16px}
.prose ul{padding-left:22px;margin:0 0 24px}
.prose li{font-size:20px;line-height:1.55;color:var(--body);margin-bottom:10px}
.form-grid{display:grid;gap:14px;max-width:34em;margin:8px 0 0}
.form-grid label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);display:grid;gap:8px}
.form-grid input,.form-grid textarea{
  background:#0C0C0F;border:1px solid var(--box);color:var(--paper);
  font-family:var(--display);font-size:18px;padding:12px 14px;
}
.form-grid input:focus,.form-grid textarea:focus{border-color:var(--acid);outline:none}

/* styleguide */
.sg-band{padding:44px;border-bottom:1px solid var(--hair)}
.sg-band>h2{font-size:34px;font-stretch:68%;color:var(--acid);margin-bottom:8px}
.sg-note{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:26px}
.sg-band .art-body{padding:0;border:0}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.swatch{border:1px solid var(--hair)}
.swatch i{display:block;height:70px}
.swatch span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:8px 10px;color:var(--label)}

.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .art-body{border-right:0}
  .art-aside{border-top:1px solid var(--hair);padding:34px var(--pad)}
  .art-aside .statrow{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
@media (max-width:900px){
  :root{--pad:24px}
  .wall-row summary{grid-template-columns:minmax(0,1fr) 76px;grid-template-areas:"plate score" "meter meter";gap:12px}
  .wall-row summary .plate{grid-area:plate}
  .wall-row summary .meter{grid-area:meter;height:56px}
  .wall-row summary .score{grid-area:score}
  .art-head,.page-head{grid-template-columns:minmax(0,1fr);gap:20px}
  .trade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-list a{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .cat-list .c-go{display:none}
}
@media (max-width:760px){
  body{font-size:18px}
  .nav-label{
    display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;padding:13px 24px;border-top:2px solid var(--panel);cursor:pointer;color:var(--panel);
  }
  .nav-top{display:none}
  .nav-toggle:checked~.nav-top{display:block}
  .nav-top>li{border-right:0;border-top:1px solid rgba(16,16,18,.3)}
  .nav-sub{
    position:static;visibility:visible;opacity:1;min-width:0;border:0;
    border-top:1px solid var(--hair);background:#0C0C0F;padding:4px 0 10px;
  }
  .has-sub::after{display:none}
  .hero .dek,.dek{font-size:20px}
  .art-body{padding:30px 24px}
  .art-body p{font-size:20px}
  .art-body p.dc::first-letter{font-size:52px;padding:9px 12px}
  .art-tag{font-size:64px;top:14px;-webkit-text-stroke-width:1.5px}
  .art-top-in{padding:26px var(--pad) 22px}
  .art-body h2 .sec-no{font-size:26px;margin-right:12px}
  .dyn-band{height:64px;margin:30px 0}
  .pullquote{padding:22px var(--pad)}
  .pullquote p{font-size:26px !important}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:6px}
  .split2{grid-template-columns:minmax(0,1fr);gap:28px}
  .voices{height:110px}
  .plate{font-size:22px;min-height:76px}
  .score{font-size:34px}
  .foot,.foot-partners{padding:28px 24px}
  .versus,.datatable{font-size:15px}
  .versus th,.versus td,.datatable th,.datatable td{padding:9px 10px}
  .versus th,.datatable th{font-size:11px;letter-spacing:.05em}
  .table-scroll{-webkit-overflow-scrolling:touch}
  .table-scroll table{min-width:0}
}
@media (max-width:420px){
  .trade{grid-template-columns:minmax(0,1fr)}
  .statrow{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .plate{font-size:19px}
}

@media print{
  body{background:#fff}
  .nav,.tabs,.chips,.step-foot{display:none}
}


/* 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-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{object-fit:contain!important}
/* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.sponsor-blurb.sponsor-blurb{color:rgb(122,122,133)!important;opacity:1!important}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-grid.roll .sponsor.sponsor img{height:38px!important}

/* op-no-panel-clamp2: operator: limit the blurbs to two rows, remove the extra background. The
   panel here is the TILE, not the mark — Design fills .sponsor with #0C0C0F on a #0B0B0D page, so
   each tile read as a faint box. Fill removed (the dashed border still bounds the tile); copy
   clamped and floored at two lines so the row stays even. display needs !important to beat
   sp-blurb-unhide. */
.sponsor-grid .sponsor{background:transparent}
.sponsor-grid .sponsor .sponsor-blurb{
  display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;min-height:3em;
}


/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1730px at 390, 16% of the whole page. Two columns bring it to
   853px (51% shorter). Checked before writing: no new overflow, smallest mark still
   123px wide, longest blurb 2 lines, tile heights 131-150px.
   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.
   Only the tier(s) that were one-per-row are touched (.sponsor-grid.featured, .sponsor-grid.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-grid.featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsor-grid.featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid.featured > * *{min-width:0!important;max-width:100%}
    .sponsor-grid.featured img,.sponsor-grid.featured svg{max-width:100%;height:auto}
  .sponsor-grid.roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsor-grid.roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid.roll > * *{min-width:0!important;max-width:100%}
    .sponsor-grid.roll img,.sponsor-grid.roll svg{max-width:100%;height:auto}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.thumb > img,
  article.art-body > figure.article-figure.full > img,
  main.shell > header.art-top > img.art-bleed,
  main.shell > section.hero2 > img.hero2-bleed,
  section.band > div.align-center.rule.split2 > img){height:auto}
/* op-img-dims:end */