/* la-g.org — "Plate" Palette roles: ground / ink / accent / secondary / ash ground #100D0A bitumen black, the page ink #EFE7D9 bone, all reading text accent #D6412A safelight red — saturated, hue ~10 secondary #1E7C88 bath teal — saturated, hue ~189 (179 apart from accent) ash #8B8378 quiet metadata grey */ :root{ --ground:#100D0A; --ground-2:#1B1713; --ground-3:#15110E; --ink:#EFE7D9; --ink-2:#C9BFB1; --accent:#D6412A; --link:#E2543C; /* accent-family text ink, 5.18:1 on --ground */ --link-mat:#A32B16; /* accent-family text ink, 5.81:1 on --mat */ --teal-text:#3E9AA6; /* secondary-family text ink, 5.9:1 on --ground */ --teal-mat:#14606A; /* secondary-family text ink, 5.97:1 on --mat */ --secondary:#1E7C88; --ash:#8B8378; --rule:#2A241E; --rule-2:#4A423A; --mat:#EFE7D9; --mat-ink:#100D0A; --mat-rule:#C4BBAC; --mat-ash:#6B6358; --display:"Faustina",Georgia,serif; --text:"Space Grotesk","Helvetica Neue",Arial,sans-serif; --mono:"DM Mono",ui-monospace,monospace; --pad:clamp(18px,4vw,48px); --measure:68ch; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--text);font-size:17px;line-height:1.6; text-wrap:pretty;overflow-x:hidden; } img{max-width:100%;display:block} a{color:var(--link);text-decoration:none} a:hover{color:var(--ink)} h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.05;margin:0;letter-spacing:-0.015em} p{margin:0 0 1.15em} .wrap{padding-inline:var(--pad)} .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--link)} .kicker--teal{color:var(--teal-text)} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)} .band--mat .eyebrow,.supporters .eyebrow,.spec .eyebrow,.fig-mat .eyebrow{color:var(--mat-ash)} .band--mat .kicker,.supporters .kicker{color:var(--link-mat)} .chip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;background:var(--link-mat);color:var(--ink);padding:6px 10px;display:inline-block} .chip--quiet{background:var(--ground);color:var(--ink)} .icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .icon--lg{width:34px;height:34px;stroke-width:1.4} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── header ─────────────────────────────────────────── */ .utility{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center; padding:10px var(--pad);border-bottom:1px solid var(--rule);font-family:var(--mono); font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)} .utility a{color:var(--ash)} .utility nav{display:flex;gap:20px} .masthead{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px);gap:clamp(20px,4vw,56px); align-items:end;padding:clamp(24px,4vw,40px) var(--pad) 26px} .masthead__id{display:flex;gap:clamp(14px,2vw,28px);align-items:flex-start} .masthead__mark{width:clamp(52px,7vw,76px);height:auto;color:var(--accent);flex:none;margin-top:6px; stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} .masthead h1,.masthead .wordmark{font-family:var(--display);font-weight:700; font-size:clamp(34px,5.4vw,72px);line-height:.94;letter-spacing:-.025em;color:var(--ink);margin:0} .masthead .wordmark em{font-style:normal;color:var(--accent)} .masthead h1.wordmark{font-size:clamp(26px,3.7vw,52px);text-wrap:balance} .masthead__strap{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2); border-left:2px solid var(--secondary);padding-left:18px} .masthead--inner{align-items:center;padding-block:20px} .masthead--inner .wordmark{font-size:clamp(22px,2.6vw,28px);line-height:1.05} .masthead--inner .wordmark em{display:inline} /* the whole index, printed — no hover, no dropdown */ .index{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--ground)} .index__head{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;align-items:baseline; padding:12px var(--pad);border-bottom:1px solid var(--rule)} .index__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:24px 18px;padding:20px var(--pad) 24px} @media (min-width:1160px){.index__grid{grid-template-columns:repeat(9,minmax(0,1fr))}} .index__col{padding:14px 18px 15px 0;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:6px} .index__sec{display:flex;flex-direction:column;gap:5px;color:var(--ink);font-family:var(--display); font-size:15.5px;line-height:1.15;margin-bottom:9px} .index__sec .icon{width:28px;height:28px;color:var(--accent);stroke-width:1.5;margin-bottom:3px} .index__sec .no{font-family:var(--mono);font-size:9.5px;color:var(--ash);letter-spacing:.16em} .index__sec .t{display:block} .index__sec:hover .icon{color:var(--ink)} .index__sec:hover{color:var(--accent)} .index__count{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-top:auto} .index__all{display:none} /* ── bands ──────────────────────────────────────────── */ .band{border-bottom:1px solid var(--rule)} .band--pad{padding:clamp(40px,6vw,72px) var(--pad)} .band--mat{background:var(--mat);color:var(--mat-ink)} .band--mat a,.fig-mat a,.spec a,.register a{color:var(--link-mat)} .band--teal{background:#0E3A41;color:var(--ink)} .band--teal a{color:var(--ink)} .band__head{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:baseline; border-bottom:2px solid currentColor;padding-bottom:12px;margin-bottom:26px} .band__head h2{font-size:clamp(24px,3vw,32px)} /* opener */ .opener{position:relative;min-height:min(78vh,660px);display:flex;align-items:flex-end;overflow:hidden} .opener img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .opener__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,13,10,.94) 0%,rgba(16,13,10,.62) 46%,rgba(16,13,10,.05) 78%)} .opener__body{position:relative;padding:clamp(28px,5vw,56px) var(--pad);max-width:640px} .opener h2{font-size:clamp(30px,4.4vw,52px);line-height:1.03;margin:14px 0 16px} .opener p{margin:0 0 18px;font-size:clamp(16px,1.6vw,18px);color:#D8CFC1} .opener__chip{position:absolute;right:var(--pad);top:clamp(20px,3vw,40px)} .corner{stroke:var(--accent);stroke-width:2;fill:none} .opener__body>.corner{display:block;margin-bottom:14px} /* three-column deck */ .deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);gap:clamp(24px,4vw,56px)} .deck h2{font-size:clamp(24px,3.2vw,34px);font-weight:500;line-height:1.1} .deck__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,3vw,36px); font-size:16px;line-height:1.65;color:var(--ink-2)} .deck__cols p{margin:0} /* register (dense typographic table) */ .register{width:100%;border-collapse:collapse;font-size:15px} .register th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; text-align:left;color:var(--mat-ash);font-weight:400;padding:0 20px 10px 0;border-bottom:1px solid var(--mat-rule)} .register td{padding:16px 20px 16px 0;border-bottom:1px solid var(--mat-rule);vertical-align:top;line-height:1.5} .register td:first-child{font-family:var(--display);font-size:26px;color:var(--accent);line-height:1;width:58px;padding-right:0} .register td.name{font-family:var(--display);font-size:20px;line-height:1.15;color:var(--mat-ink)} .register td.flag{font-family:var(--mono);font-size:13px;color:var(--teal-mat);white-space:nowrap} .register td.flag--none{color:var(--link-mat)} /* the statement band: one line at size, and the consequences that follow from it */ .statement{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr);gap:clamp(26px,5vw,64px);align-items:start} .statement .eyebrow{color:#9FC6CC;display:block;margin-bottom:16px} .statement p{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(25px,3.5vw,42px);line-height:1.16;max-width:24em;letter-spacing:-.01em} .statement .statement__after{font-family:var(--text);font-weight:400;font-size:clamp(15px,1.6vw,17px); line-height:1.55;max-width:34em;margin-top:18px;color:#CFE0E2;letter-spacing:0} .statement .statement__link{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; margin-top:20px;max-width:none;font-weight:400;line-height:1.4} .statement .statement__link a{border-bottom:2px solid rgba(239,231,217,.42);padding-bottom:2px} .statement .statement__link a:hover{border-bottom-color:var(--ink)} .consequence{margin:0;border-top:2px solid rgba(239,231,217,.75)} .consequence>div{padding:14px 0;border-bottom:1px solid rgba(239,231,217,.24)} .consequence>div:last-child{border-bottom:0} .consequence dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:#9FC6CC;margin:0 0 3px} .consequence dd{margin:0;margin-inline-start:0;font-family:var(--display);font-size:clamp(17px,1.9vw,21px); line-height:1.3;color:var(--ink)} .spot{width:100%;max-width:210px;height:auto;stroke:currentColor;fill:none;stroke-width:2; justify-self:center;background:var(--mat);padding:16px 14px;box-sizing:border-box} /* section hub */ .hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule)} .hub a{background:var(--ground);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;color:var(--ink)} .hub a:hover{background:var(--ground-2)} .hub__top{display:flex;align-items:center;gap:10px;color:var(--link)} .hub__top .no{font-family:var(--mono);font-size:11px;letter-spacing:.08em} .hub h3{font-size:23px;margin-top:2px} .hub p{margin:0;font-size:14.5px;color:var(--ash);line-height:1.5} .hub .count{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)} /* two-up features */ .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,48px)} .feature{display:flex;flex-direction:column;color:var(--ink)} .feature .fig-mat{margin:0 0 16px} .feature h3{font-size:clamp(22px,2.4vw,28px);line-height:1.12;margin-bottom:8px} .feature p{color:var(--ash);font-size:15.5px;margin:0} .feature .eyebrow{margin-bottom:10px;display:block} /* ── figures — one drawing system, four treatments ──── */ figure{margin:0} figcaption{font-family:var(--display);font-size:19px;line-height:1.38} .credit{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--ash);margin-top:9px;line-height:1.4} .band--mat .credit,.fig-mat .credit{color:var(--mat-ash)} /* 1 · full-bleed plate */ .fig-bleed{position:relative;border-bottom:1px solid var(--rule)} .fig-bleed>.ph{position:relative} .fig-bleed img{width:100%;height:clamp(260px,46vw,560px);object-fit:cover} .fig-bleed .chip{position:absolute;right:var(--pad);top:20px} .fig-bleed figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px); gap:clamp(20px,4vw,48px);padding:20px var(--pad) 32px;align-items:start} .fig-bleed figcaption .rule{width:56px;height:2px;background:var(--accent);margin-bottom:10px} .fig-bleed figcaption .side{font-family:var(--text);font-size:15px;line-height:1.6;color:var(--ink-2)} /* 2 · mat */ .fig-mat{background:var(--mat);color:var(--mat-ink);padding:16px} .fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover} .fig-mat figcaption{padding-top:14px;color:var(--mat-ink)} /* 3 · offset caption with corner mark */ .fig-offset{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,1fr);gap:clamp(18px,3vw,32px); align-items:start;margin:34px 0} .fig-offset .ph{position:relative} .fig-offset img{width:100%;aspect-ratio:16/10;object-fit:cover} .fig-offset .cnr{position:absolute;left:-11px;top:-11px;width:24px;height:24px} .fig-offset figcaption{border-top:2px solid var(--secondary);padding-top:12px;font-size:17px} /* 4 · narrow inset, caption alongside, held off the measure */ .fig-inset{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start; width:min(100%,540px);margin:30px 0 30px auto;background:var(--ground-2);padding:14px; border-left:2px solid var(--secondary)} .fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover} .fig-inset figcaption{font-size:16px;line-height:1.35} .fig-inset .credit{font-size:10.5px;margin-top:8px} @media (max-width:560px){.fig-inset{grid-template-columns:minmax(0,1fr)}} /* gallery */ .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .gallery figure{background:var(--ground-2);padding:10px} .gallery img{aspect-ratio:3/2;object-fit:cover;width:100%} .gallery figcaption{font-size:15px;line-height:1.35;padding-top:9px} /* ── article ────────────────────────────────────────── */ .crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:11px var(--pad); border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--ash)} .crumb a{color:var(--ash)} .crumb .icon{width:15px;height:15px;color:var(--accent)} .head-art{padding:clamp(30px,5vw,60px) var(--pad) clamp(22px,3vw,36px); display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:clamp(22px,4vw,60px);align-items:end} .head-art h1{font-size:clamp(32px,5vw,62px);line-height:1;max-width:20em} .head-art .lead{margin:0;font-size:clamp(16px,1.7vw,19px);line-height:1.5;color:var(--ink-2); border-left:2px solid var(--accent);padding-left:18px;font-family:var(--text)} .head-art .kicker{display:flex;align-items:center;gap:8px;margin-bottom:14px} .article{padding:clamp(28px,4vw,52px) var(--pad) 0;display:grid; grid-template-columns:minmax(0,1fr) minmax(0,var(--measure)) minmax(0,1fr);gap:0 clamp(20px,3vw,40px)} .article>*{grid-column:2} .article .full{grid-column:1/-1} .article h2{font-size:clamp(23px,2.6vw,30px);margin:clamp(28px,4vw,44px) 0 14px; padding-top:14px;border-top:1px solid var(--rule)} .article p{font-size:18.5px;line-height:1.68;color:#E4DBCC} .article p.lead{font-size:21px;line-height:1.5;color:var(--ink);font-family:var(--text);margin-bottom:1.4em} .article a{border-bottom:1px solid rgba(226,84,60,.48)} .article a:hover{border-bottom-color:var(--ink)} .article .drop::first-letter{font-family:var(--display);font-size:4.1em;line-height:.82;float:left; margin:.06em .1em 0 0;color:var(--accent);font-weight:600} .article::after{content:"";display:block;clear:both;grid-column:2} .pullquote{margin:clamp(26px,4vw,40px) 0;padding:0 0 0 26px;border-left:3px solid var(--accent)} .pullquote p{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.5vw,29px); line-height:1.25;color:var(--ink);margin:0} .blockquote{margin:28px 0;padding:0 0 0 26px;border-left:1px solid var(--rule-2)} .blockquote p{font-family:var(--display);font-size:21px;line-height:1.4;margin:0 0 .5em} .blockquote cite{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--ash);font-style:normal} .callout{background:var(--ground-2);border-top:3px solid var(--secondary);padding:20px 22px;margin:30px 0} .callout p{margin:0;font-size:17px;color:var(--ink)} .note{font-size:15.5px;color:var(--ash);border-left:2px solid var(--rule-2);padding-left:16px} /* notes-for-design panels: the two non-prose instruments */ .spec{background:var(--mat);color:var(--mat-ink);padding:clamp(20px,3vw,30px);margin:clamp(30px,4vw,44px) 0} .spec__head{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;justify-content:space-between; border-bottom:2px solid var(--mat-ink);padding-bottom:10px;margin-bottom:4px} .spec__head h3{font-size:clamp(20px,2.2vw,25px)} .spec__head .eyebrow{color:var(--mat-ash)} .spec dl{margin:0} .spec dt{font-family:var(--display);font-size:19px;line-height:1.2;padding-top:14px;color:var(--mat-ink)} .spec dd{margin:4px 0 0;padding-bottom:14px;border-bottom:1px solid var(--mat-rule); font-size:15.5px;line-height:1.55;color:#3C362E} .spec dd:last-of-type{border-bottom:0;padding-bottom:2px} .timeline{list-style:none;margin:0;padding:0;counter-reset:t} .timeline li{counter-increment:t;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px; padding:13px 0;border-bottom:1px solid var(--mat-rule)} .timeline li:last-child{border-bottom:0} .timeline li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:12px; color:var(--link-mat);padding-top:5px} .timeline .t-when{font-family:var(--display);font-size:18.5px;line-height:1.2;display:block} .timeline .t-what{font-size:15.5px;line-height:1.55;color:#3C362E;display:block;margin-top:3px;grid-column:2} .spec .timeline .t-when{color:var(--mat-ink)} /* tables */ .datatable,.versus{width:100%;border-collapse:collapse;font-size:15.5px;margin:26px 0} .datatable caption,.versus caption{font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--ash);text-align:left;padding-bottom:10px} .datatable th,.versus th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--ash);font-weight:400;text-align:left;padding:0 16px 9px 0;border-bottom:1px solid var(--rule-2)} .datatable td,.versus td{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5} .versus tbody th{font-family:var(--display);font-size:18px;letter-spacing:0;text-transform:none; color:var(--ink);border-bottom:1px solid var(--rule);padding:13px 16px 13px 0} .statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);margin:28px 0} .statblock{background:var(--ground-2);padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px} .stat-num{font-family:var(--display);font-size:38px;line-height:.95;color:var(--accent)} .stat-label{font-size:14px;line-height:1.4;color:var(--ash)} .chart{margin:28px 0} .chart svg{width:100%;height:auto;overflow:visible} .chart .bar-rect{fill:var(--secondary)} .chart .bar-label,.chart .axis{font-family:var(--mono);font-size:11px;fill:var(--ash)} .chart figcaption{font-size:16px;padding-top:12px} /* related / further */ .further-grid,.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(18px,3vw,32px);list-style:none;margin:0;padding:0} .further-grid a,.related-links a{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--rule); padding-top:16px;color:var(--ink);height:100%} .further-grid a:hover,.related-links a:hover{border-top-color:var(--accent)} .rl-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--link); display:flex;align-items:center;gap:7px} .rl-title{font-family:var(--display);font-size:22px;line-height:1.15} .rl-dek{font-size:14.5px;color:var(--ash);line-height:1.5;margin-top:auto} .entity-ref{white-space:nowrap} /* category / archive lists */ .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:64px minmax(0,1.05fr) minmax(0,1.25fr) 150px; gap:clamp(14px,2vw,30px);align-items:center;padding:18px 0;color:var(--ink)} .cat-list a:hover{background:var(--ground-2)} .cat-list .no{font-family:var(--mono);font-size:12.5px;color:var(--link)} .cat-list .t{font-family:var(--display);font-size:clamp(21px,2.2vw,27px);line-height:1.14} .cat-list .d{font-size:14.5px;line-height:1.5;color:var(--ash)} .cat-list img{width:150px;aspect-ratio:3/2;object-fit:cover} .sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:340px; border-bottom:1px solid var(--rule)} .sec-head__body{padding:clamp(28px,4vw,56px) var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:26px} .sec-head__no{font-family:var(--display);font-size:clamp(64px,9vw,116px);line-height:.8;color:var(--accent)} .sec-head h1{font-size:clamp(32px,5vw,58px);margin:18px 0 16px} .sec-head p{margin:0;max-width:30em;font-size:clamp(16px,1.7vw,18px);color:var(--ink-2)} .sec-head__img{position:relative} .sec-head__img img{width:100%;height:100%;min-height:260px;object-fit:cover} .sec-head__img .chip{position:absolute;left:0;bottom:0} .sec-nav{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px} .sec-nav a{color:var(--ink);border-bottom:1px solid var(--rule-2);padding-bottom:2px} .sec-nav a:hover{border-bottom-color:var(--accent)} /* ── supporters ─────────────────────────────────────── */ .supporters{background:var(--mat);color:var(--mat-ink);border-top:3px solid var(--accent);padding:clamp(26px,4vw,38px) var(--pad)} .supporters a{color:var(--link-mat)} .supporters__head{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;align-items:baseline;margin-bottom:20px} .supporters h2{font-family:var(--display);font-size:22px;font-weight:600} .sponsor-tier{margin-bottom:18px} .sponsor-tier__label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--mat-ash);padding-bottom:9px;border-bottom:1px solid var(--mat-rule);margin-bottom:14px} /* constant tile width; the leftover space is distributed between columns so the block reaches both edges without any slot ever growing */ .sponsor-row{display:grid;grid-template-columns:repeat(auto-fill,248px);justify-content:space-between; gap:12px;align-items:start} /* constant tile width; the logo box is one fixed size in every slot, name as type beneath it */ .sponsor{width:248px;background:#0C0A08;border:1px solid var(--mat-rule);padding:12px; display:flex;flex-direction:column;gap:9px;color:var(--ink)} .sponsor:hover{border-color:var(--rule-2)} .sponsor-mark{display:flex;align-items:center;justify-content:center;height:52px} .sponsor-name{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid var(--rule);padding-top:8px} .sponsor-blurb{font-size:13.5px;line-height:1.45;color:var(--ash);width:100%} .sponsor:hover{border-color:var(--mat-ink)} .sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain} .sponsor.feat{border-color:var(--mat-ink)} .sponsor-row--dense{gap:8px} /* ── footer ─────────────────────────────────────────── */ .site-foot{background:#080605;color:var(--ink);border-top:3px solid var(--accent); padding:clamp(26px,4vw,42px) var(--pad) clamp(30px,4vw,48px); display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,3vw,40px);align-items:start} .site-foot .wordmark{font-family:var(--display);font-size:clamp(24px,2.6vw,30px);line-height:1.1;color:var(--ink)} .site-foot p{font-size:14px;color:var(--ash);margin:0;max-width:34ch} .site-foot a{color:var(--link)} .site-foot a:hover{color:var(--ink)} .site-foot ul li{border-top:1px solid var(--rule);padding-top:7px} .site-foot__id{display:flex;gap:14px;align-items:flex-start} .site-foot__id svg{width:40px;height:40px;flex:none;color:var(--accent);stroke:currentColor;stroke-width:3;fill:none} .site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px} /* ── responsive ─────────────────────────────────────── */ @media (max-width:1000px){ .article{grid-template-columns:minmax(0,1fr);} .article>*{grid-column:1} .article .full{grid-column:1} .article::after{grid-column:1} .head-art,.masthead,.deck,.fig-bleed figcaption{grid-template-columns:minmax(0,1fr)} .statement{grid-template-columns:minmax(0,1fr);gap:30px} .fig-offset{grid-template-columns:minmax(0,1fr)} .sec-head{grid-template-columns:minmax(0,1fr)} .cat-list a{grid-template-columns:44px minmax(0,1fr) 110px;row-gap:6px} .cat-list .d{grid-column:2/4;font-size:14px} .cat-list img{width:110px} .head-art .lead,.masthead__strap{border-left:0;border-top:2px solid var(--accent);padding:14px 0 0} .masthead__strap{border-top-color:var(--secondary)} } @media (max-width:760px){ body{font-size:16px} .index__grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:18px 14px;padding-bottom:14px} .index__sec{font-size:13.5px;margin-bottom:0} .index__sec .icon{width:24px;height:24px} .index__all{display:block;padding:12px var(--pad) 16px} .fig-inset{float:none;width:100%;margin:22px 0} .article p{font-size:17.5px} .cat-list img{display:none} .cat-list a{grid-template-columns:40px minmax(0,1fr)} .cat-list .d{grid-column:2/3} } /* ── components used by the styleguide + long-list expander ── */ .article-figure{margin:26px 0;background:var(--ground-2);padding:14px;border-top:2px solid var(--accent)} .article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover} .article-figure figcaption{padding-top:12px} .profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:24px 0} .profile-card{background:var(--ground-2);padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--secondary)} .profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:6px} .profile-card h3{font-size:21px;line-height:1.15} .profile-card .p-role{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin:0} .profile-card p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0} .profile-card .p-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;margin-top:auto} .profile-card .p-attr{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)} .profile-card.no-photo{border-top-color:var(--accent)} .org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:24px 0} .org-card{display:flex;flex-direction:column;gap:6px;background:var(--ground-2);border:1px solid var(--rule);padding:14px 16px;color:var(--ink)} .org-card:hover{border-color:var(--accent)} .org-card .org-logo{max-height:30px;width:auto;object-fit:contain;margin-bottom:4px} .org-card .org-name{font-family:var(--display);font-size:18px;line-height:1.2} .org-card .org-host{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ash)} .collapse{margin:22px 0} .collapse>summary{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--link);cursor:pointer;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .collapse ul{list-style:none;margin:0;padding:0} .collapse li{border-bottom:1px solid var(--rule);padding:11px 0;font-size:16px} .sg-sec{padding:clamp(26px,4vw,44px) var(--pad);border-bottom:1px solid var(--rule)} .sg-sec>h2{font-size:26px;padding-bottom:10px;border-bottom:2px solid var(--accent);margin-bottom:22px} .sg-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin:0 0 14px} .sg-col{max-width:var(--measure)} /* ── tables on narrow screens ── */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .article .tscroll{grid-column:2} @media (max-width:1000px){.article .tscroll{grid-column:1}} @media (max-width:760px){.tscroll{margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}} @media (max-width:760px){ .register thead{display:none} .register,.register tbody,.register tr,.register td{display:block;width:100%} .register tr{border-bottom:1px solid var(--mat-rule);padding:14px 0 6px;position:relative} .register td{border:0;padding:0 0 8px} .register td:first-child{position:absolute;right:0;top:12px;font-size:22px;width:auto} .register td.name{font-size:21px;padding-bottom:10px} .register td[data-l]:not(.name)::before{content:attr(data-l);display:block;font-family:var(--mono); font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mat-ash);margin-bottom:2px} .datatable,.versus{min-width:480px} } /* below 560 the block goes one tile per row; the tile stays a constant width at every viewport, stepped so it stays close to the container edges */ @media (max-width:560px){ .sponsor-row,.sponsor-row--dense{grid-template-columns:repeat(auto-fill,400px);justify-content:center;gap:8px} .sponsor{width:400px} } @media (max-width:460px){ .sponsor-row,.sponsor-row--dense{grid-template-columns:repeat(auto-fill,296px)} .sponsor{width:296px} } @media (max-width:340px){ .sponsor-row,.sponsor-row--dense{grid-template-columns:repeat(auto-fill,248px)} .sponsor{width:248px} } /* inline two-column bands collapse on phones */ @media (max-width:760px){ .band[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important} } /* ── article: hard data and rhythm ─────────────────── */ .num{font-family:var(--mono);font-size:.93em;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap} .figures{margin:clamp(30px,4vw,44px) 0} .figures__cap{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;align-items:baseline; border-bottom:2px solid var(--rule-2);padding-bottom:9px;margin-bottom:0} .figures__cap .eyebrow{color:var(--ash)} .figures .statrow{margin:0} .statblock{gap:8px} .stat-num{font-family:var(--display);font-size:clamp(30px,3.6vw,42px);line-height:.95;color:var(--accent); font-variant-numeric:tabular-nums} .stat-num--sm{font-family:var(--mono);font-size:clamp(15px,1.7vw,18px);line-height:1.25;letter-spacing:-.01em;color:var(--link)} .article .figures,.article .versus,.article .datatable{grid-column:2} .article>.versus,.article>.datatable{width:100%} .versus tbody th{font-weight:600} @media (max-width:1000px){.article .figures,.article .versus,.article .datatable{grid-column:1}} /* ── touch targets: metadata links get real height on phones ── */ @media (max-width:760px){ .utility{gap:2px 18px;padding-block:4px} .utility a,.crumb a,.site-foot ul a{display:inline-block;padding-block:11px} .utility nav{gap:18px} .crumb{gap:4px 8px;padding-block:4px} .sec-nav{gap:2px 20px} .sec-nav a{padding-block:10px} .index__sec{padding-block:6px} .index__col{padding-block:8px} .site-foot ul{gap:0} .site-foot ul li{padding-top:0} .figures .statrow{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))} } /* 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} /* sp-domain-override: per-domain, from work/css_override.css */ /* la-g — the supporter tiles after the first render as a horizontal row (mark | name | blurb) with the names truncated to "GirlC…", "Twink…", "Facia…". ⚠️ This is OUR doing, not Design's. Design shipped copy on the first tile only and styled that one to stack; finalize's copy-extension then cloned name+blurb spans into the remaining slots, where they land in a flex ROW and fight the mark for width. Tile one still looks right, which is the tell. Fix: make every tile stack the way the designed one does. Design's grid, tile size, colours and ordering are untouched — only the direction of the flow inside a tile. */ [data-partner]{ flex-direction:column!important; align-items:flex-start!important; justify-content:flex-start!important; gap:8px!important; } /* The mark: cap it and CENTRE it. Left-aligned at full tile width, a wide wordmark (BOTTOM GAMES) rendered enormous while a compact one (Facials4K) looked lost — the tile stacks, so the image was free to take the whole column. Bounding the height makes every mark read at a comparable size; centring only the IMG leaves the name and blurb ranged left as designed. */ [data-partner] img{ max-width:88%!important; max-height:52px!important; width:auto!important; height:auto!important; object-fit:contain!important; display:block!important; margin-left:auto!important; margin-right:auto!important; } @media (max-width:760px){ [data-partner] img{ max-height:44px!important; } } [data-partner] .sponsor-name,[data-partner] .sponsor-blurb{ width:100%!important; max-width:100%!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; flex:0 0 auto!important; } /* ⚠️ auto margins do NOT centre a flex item on the cross axis when the container sets align-items:flex-start — which the stacking rule above does, deliberately, so the name and blurb stay ranged left. align-self on the image is the property that actually applies. */ [data-partner] img{ align-self:center!important; } /* THE ACTUAL CAUSE, found by walking the DOM instead of guessing: img display:block align-self:center width 147 <- already centred span.sponsor-mark display:flex align-items:center width 167 <- but only 167px wide… a.sponsor display:flex align-items:flex-start width 296 <- …and parked at the left The mark was centred inside a box that was itself left-aligned, which is why three rules aimed at the all did nothing. The fix belongs on the WRAPPER: let it take the tile's full width and centre its contents. Wide wordmarks looked fine throughout because they filled the wrapper. */ [data-partner] .sponsor-mark{ width:100%!important; align-self:stretch!important; justify-content:center!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-row .feat.sponsor.feat.sponsor img{height:38px!important} .sponsor-row.sponsor-row--dense .sponsor.sponsor img{height:38px!important} /* op-feat-even: ASGMax's line is short enough to fit one row in a 248px tile while its four neighbours wrap to two, so that one tile came out a line shorter than the rest of the row. Reserving two lines of copy in every principal tile makes the row even at all three tile widths Design defines (248 / 296 / 400) instead of depending on how long each sentence is. */ .sponsor-row .sponsor.feat .sponsor-blurb{min-height:3em} /* op-footer-compact: the footer printed 9 rows for 9 link(s) in 2 list(s) — 767px at 390, 8% 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 767 -> 498px (35% 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(8px,2.78vw,40px)!important;row-gap:4px!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 — 11 tiles, 1395px at 390, 15% of the whole page. Two columns bring it to 920px (34% shorter). Checked before writing: no new overflow, smallest mark still 111px wide, longest blurb 3 lines, tile heights 115-147px. 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. 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-row, .sponsor-row.sponsor-row--dense), 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-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important} .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important} .sponsor-row > * *{min-width:0!important;max-width:100%} .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto} .sponsor-row.sponsor-row--dense{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important} .sponsor-row.sponsor-row--dense > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important} .sponsor-row.sponsor-row--dense > * *{min-width:0!important;max-width:100%} .sponsor-row.sponsor-row--dense img,.sponsor-row.sponsor-row--dense svg{max-width:100%;height:auto} } /* op-odd-tier-lead: .sponsor-row (5 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-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important} } /* op-article-width: the article column was capped at 643px (78 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(0,1fr) minmax(0,var(--measure)) minmax(0,1fr)" (declared in .article) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */ @media (min-width:1024px){ article.article{grid-template-columns:minmax(0,1fr) min(838px, calc(100% - 80px)) minmax(0,1fr)!important} } @media (min-width:1600px){ article.article{grid-template-columns:minmax(0,1fr) min(clamp(838px, 58.194vw, 1006px), calc(100% - 80px)) minmax(0,1fr)!important} article.article > :is(p.drop, p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important} } /* op-article-width:end */ /* op-hover-pad */ .cat-list a{padding-left:clamp(12px,3.5vw,22px)!important} /* op-hover-pad:end */ /* op-heading-levels */ h2:where(.rt-h3){font-family: var(--display); font-weight: 600; line-height: 1.05; margin: 0px; letter-spacing: -0.015em;} .hub h2:where(.rt-h3){font-size: 23px; margin-top: 2px;} /* op-heading-levels:end */ /* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */ :where(article.article > figure.fig-inset > img, article.article > figure.fig-mat > img, article.feature > figure.fig-mat > img, body > section.band.opener > img, div.sec-head > div.sec-head__img > img, figure.fig-bleed > div.ph > img, figure.fig-offset > div.ph > img, li > a > img, section.band.band--pad > figure.fig-mat > img){height:auto} /* op-img-dims:end */ @media (min-width:660px) and (max-width:839px){.sponsor-row:has(> [data-partner]){grid-template-columns:repeat(2,minmax(0,248px))!important;justify-content:center!important;column-gap:var(--sp-gap,18px)!important}}@media (min-width:880px) and (max-width:1119px){.sponsor-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,218px),1fr))!important;justify-content:stretch!important;column-gap:var(--sp-gap,14px)!important}.sponsor-row:has(> [data-partner]) > [data-partner]{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}@media (min-width:1180px) and (max-width:1399px){.sponsor-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,218px),1fr))!important;justify-content:stretch!important;column-gap:var(--sp-gap,14px)!important}.sponsor-row:has(> [data-partner]) > [data-partner]{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}@media (min-width:1460px) and (max-width:1659px){.sponsor-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,218px),1fr))!important;justify-content:stretch!important;column-gap:var(--sp-gap,14px)!important}.sponsor-row:has(> [data-partner]) > [data-partner]{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}@media (min-width:1800px){.sponsor-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,218px),1fr))!important;justify-content:stretch!important;column-gap:var(--sp-gap,14px)!important}.sponsor-row:has(> [data-partner]) > [data-partner]{width:auto!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}