:root{
--bg:#08080F; --inner:transparent; --fg:#E9EAF0; --surface:#15172C;
--dim:#A8ACC0; --dim2:#878CA4; --line:rgba(233,234,240,.24);
--panel:#101223;
--prose:#D3D6E4; --placeholder:rgba(233,234,240,.45);
--accent:var(--ultra); --on-accent:var(--paper); --on-ultra:var(--paper); --em:var(--accent);
--lead-bg:var(--ink); --badge-bg:var(--paper);
--ink:#0C0D1C; --paper:#E9EAF0;
--ultra:#2A2BF0; --ultra-lt:#7C7DFF; --citron:#D6F531;
--red:#C4183C; --red-lt:#F0546F; --green:#0E9B5C; --green-lt:#34D98A;
--vermilion:#A84A1C; --vermilion-lt:#E08148;
--gut:clamp(18px,4vw,44px); --nav:44px;
/* Empty plates fall back to the section colour. Set --plate-bg here to use one
colour for every plate instead, e.g. --plate-bg:#15172C; */
}
[data-theme="light"]{
--bg:#FFFFFF; --inner:#E7E8EC; --fg:#12142E; --surface:#FFFFFF;
--dim:#3E4260; --dim2:#5C6180; --line:rgba(18,20,46,.22);
--panel:#F4F5F7;
--prose:#22253C; --placeholder:rgba(18,20,46,.45);
--accent:var(--ultra); --on-accent:#FFFFFF; --on-ultra:var(--paper); --em:var(--accent);
--lead-bg:var(--ultra); --badge-bg:var(--paper);
--red-lt:var(--red);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);transition:background .2s linear,color .2s linear;
font-family:"Newsreader",Palatino,"Times New Roman",serif;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
mark{background:var(--accent);color:var(--on-accent);padding:.08em .16em;
border-radius:1px;font-style:inherit;box-decoration-break:clone;
-webkit-box-decoration-break:clone}
::selection{background:var(--accent);color:var(--on-accent)}
::-moz-selection{background:var(--accent);color:var(--on-accent)}
h1,h2,h3,h4,.ui,.badge,.cat,.lab,.credit,.foot,.idx,.num,.count b,button,input,nav,.wordmark,
.row-meta,.row-title,.a-count,.min,.fn-cat,.fn-min,.role,.contribs a,.readmore,.article-meta,
.list-head,.share,.aside,.people-group
{font-family:"Archivo","Helvetica Neue",Arial,sans-serif}
/* section hues */
.a-technology{--art-bg:var(--ultra);--art-1:var(--citron);--art-2:var(--red);
--hue:var(--ultra);--on-panel:var(--on-ultra)}
.a-culture{--art-bg:var(--green);--art-1:var(--paper);--art-2:var(--paper);
--hue:var(--green);--on-panel:var(--paper)}
.a-profile{--art-bg:var(--red);--art-1:var(--paper);--art-2:var(--ink);
--hue:var(--red);--on-panel:var(--paper)}
.a-opinion{--art-bg:var(--vermilion);--art-1:var(--paper);--art-2:var(--paper);
--hue:var(--vermilion);--on-panel:var(--paper)}
.c-technology{--hue:var(--ultra)}.c-culture{--hue:var(--green)}
.c-profile{--hue:var(--red)}.c-opinion{--hue:var(--vermilion)}
/* sticky nav */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.wordmark{display:flex;align-items:center;gap:.1em;text-decoration:none;
font-weight:800;letter-spacing:-.045em;line-height:.8;
font-size:clamp(3rem,13.5vw,10.5rem);font-stretch:125%}
.wordmark .cut{width:.13em;height:.6em;background:var(--accent);transform:skewX(-16deg);
margin:0 .04em .05em}
.badge-caps{text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.badge{display:inline-block;align-self:flex-start;font-size:.76rem;font-weight:700;
background:var(--ink);color:var(--paper);padding:5px 10px;margin-bottom:16px}
.deck{font-size:clamp(1.04rem,1.5vw,1.26rem);line-height:1.5;margin:0;max-width:46ch;opacity:.92}
.credit{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.8rem;font-weight:500;margin:20px 0 0}
.readmore{display:inline-block;align-self:flex-start;margin-top:18px;font-size:.85rem;font-weight:600;
text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:3px}
.readmore:hover{color:var(--on-panel,var(--accent))}
.cat,.fn-cat,.a-line .cat{color:var(--fg)}
.cat{font-size:.78rem;font-weight:700;text-decoration:none}
.cat:hover{text-decoration:underline}
[data-plate] img{display:block;width:100%;height:100%;object-fit:cover}
.foot{display:flex;justify-content:space-between;gap:12px;font-size:.78rem;font-weight:500;
margin-top:14px;color:var(--dim2)}
/* page head */
.pagehead{margin:0 0 clamp(24px,3vw,38px)}
.ph-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px 28px;flex-wrap:wrap}
.ph-title{position:relative;margin:0;font-weight:800;font-stretch:118%;letter-spacing:-.035em;
font-size:clamp(2.6rem,8.4vw,6.6rem);line-height:.84;padding-bottom:clamp(14px,1.9vw,22px)}
.ph-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(8px,1vw,13px);
background:var(--fg)}
.ph-meta{display:flex;gap:20px;font-size:.8rem;font-weight:600;
padding-bottom:clamp(14px,1.8vw,22px)}
.ph-num{font-weight:700;color:var(--accent)}
/* feature band on section pages */
.feature-band{background:var(--ink);display:grid;grid-template-columns:1fr 1fr;
align-items:center;gap:clamp(20px,3vw,44px);padding:clamp(20px,3vw,44px)}
.feature-art{display:block;background:var(--plate-bg,var(--art-bg));aspect-ratio:4/3}
.feature-text h2{font-size:clamp(1.8rem,3.6vw,3rem);line-height:.98;margin:14px 0;
font-weight:800;font-stretch:110%;letter-spacing:-.026em}
.feature-text h2 a{text-decoration:none}
.feature-text h2 a:hover{text-decoration:underline;text-underline-offset:5px}
.feature-band .badge{margin:0;background:var(--accent);color:var(--on-accent)}
.feature-band{color:var(--paper)}
/* rows */
.list-lab{font-family:"Archivo",sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;
padding-top:clamp(28px,3.4vw,46px);margin-bottom:clamp(11px,1.4vw,16px)}
.rows{padding:0 0 clamp(30px,4vw,52px);counter-reset:rw 1;border-top:1px solid var(--line)}
.rows.scrolls,.a-list.scrolls{max-height:min(66vh,620px);overflow-y:auto;overscroll-behavior:contain;
padding-right:clamp(10px,1.4vw,18px)}
.rows.scrolls{padding-top:clamp(16px,2vw,26px)}
.scrolls::-webkit-scrollbar{width:6px}
.scrolls::-webkit-scrollbar-track{background:var(--line)}
.scrolls::-webkit-scrollbar-thumb{background:var(--accent)}
.scrolls{scrollbar-width:thin;scrollbar-color:var(--accent) var(--line)}
.row-idx{font-family:"Archivo",sans-serif;font-size:.78rem;font-weight:600;color:var(--accent)}
.row-idx::after{content:"\00d7 0" counter(rw)}
.row{counter-increment:rw;display:grid;grid-template-columns:44px 120px 1fr 130px;gap:clamp(14px,2vw,28px);
align-items:start;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.row:hover .row-title{text-decoration:underline;text-decoration-thickness:2px;
text-decoration-color:var(--accent);text-underline-offset:4px}
.row-thumb{display:block;aspect-ratio:4/3;background:var(--plate-bg,var(--art-bg));overflow:hidden}
.row-title{display:block;font-size:1.25rem;font-weight:700;font-stretch:106%;line-height:1.1;
letter-spacing:-.015em;margin-bottom:7px}
.row .deck{display:block;font-size:1rem;color:var(--dim);max-width:56ch}
.row-meta{font-size:.78rem;font-weight:500;color:var(--dim2);text-align:right}
.row-time{display:inline-block;margin-top:7px;opacity:.75}
/* article */
.article-band{padding:clamp(26px,3.6vw,52px) 0 0}
.kicker{margin-bottom:14px}
.article-band h1{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:.94;margin:0 0 18px;
font-weight:800;font-stretch:114%;letter-spacing:-.03em;max-width:20ch}
.article-band .deck{font-size:clamp(1.1rem,1.7vw,1.42rem);max-width:60ch;color:var(--dim)}
.share-btn{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;
border:0;color:inherit;cursor:pointer;font:inherit;letter-spacing:normal;
text-transform:none;transition:color .12s linear}
.share-btn svg{display:block}
.share-btn:hover,.share-btn.copied{color:var(--accent)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:.82rem;
font-weight:500;margin:22px 0;padding:12px 0;border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.article-plate{margin:0;background:var(--plate-bg,var(--art-bg));aspect-ratio:2.4/1;overflow:hidden}
.article-body{max-width:66ch;margin:clamp(28px,3.6vw,48px) 0 0;font-size:1.16rem;
line-height:1.66;color:var(--prose)}
.article-body p{margin:0 0 1.05em}
.article-body h2{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:106%;color:var(--fg);
font-size:1.42rem;letter-spacing:-.015em;margin:1.5em 0 .45em}
.article-body ul{margin:0 0 1.15em;padding:0;list-style:none}
.article-body li{position:relative;padding-left:26px;margin-bottom:.65em;line-height:1.6}
.article-body li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;
background:var(--accent)}
.article-body blockquote{margin:1.5em 0;padding:1em 0;border-top:2px solid var(--fg);
border-bottom:2px solid var(--fg);font-size:1.4rem;line-height:1.35;font-style:italic}
.share{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vw,18px);
margin:clamp(30px,4vw,48px) 0 0;padding:clamp(18px,2.2vw,26px) 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.share-lab{font-family:"Archivo",sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em}
.share-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.share a,.share button{font-family:"Archivo",sans-serif;font-size:.79rem;font-weight:600;
letter-spacing:.02em;text-decoration:none;color:inherit;background:none;cursor:pointer;
border:1.5px solid var(--line);padding:8px 15px;line-height:1;
transition:background .12s linear,color .12s linear,border-color .12s linear}
.share a:hover,.share button:hover{background:var(--accent);color:var(--on-accent);
border-color:var(--accent)}
.author-card{display:flex;gap:clamp(16px,2vw,28px);align-items:flex-start;
padding:clamp(24px,3vw,36px) 0}
.author-card .shot{width:104px;flex:0 0 104px;aspect-ratio:1;font-size:1.5rem}
.lab{display:block;font-size:.76rem;font-weight:600;opacity:.7;margin-bottom:6px}
.author-card h4{font-size:1.2rem;font-weight:700;margin:0 0 8px}
.author-card h4 a{text-decoration:none}
.author-card h4 a:hover{text-decoration:underline}
.author-card p{margin:0;max-width:60ch;font-size:1.02rem;line-height:1.5;color:var(--dim)}
.footnote{padding:clamp(28px,3.4vw,46px) 0 clamp(30px,4vw,50px)}
.post-template .footnote{padding-top:0}
.footnote .lab{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--fg);
opacity:1;margin-bottom:clamp(11px,1.4vw,16px)}
.fn-row:first-of-type{border-top:1px solid var(--line)}
.fn-row{display:grid;grid-template-columns:120px 1fr 90px;gap:16px;align-items:baseline;
padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.fn-row:hover .fn-title{text-decoration:underline;text-decoration-thickness:2px;
text-decoration-color:var(--accent);text-underline-offset:4px}
.fn-cat{font-size:.78rem;font-weight:700}
.fn-title{font-family:"Newsreader",serif;font-size:1.14rem;line-height:1.25}
.fn-min{font-size:.78rem;font-weight:500;text-align:right;color:var(--dim2)}
/* centred story page */
.article-band{text-align:center}
.article-band .kicker{display:flex;justify-content:center}
.article-band h1{margin-left:auto;margin-right:auto;max-width:19ch}
.article-band .deck{margin-left:auto;margin-right:auto;max-width:56ch;text-align:center}
.article-meta{justify-content:center}
.article-col{max-width:none}
.article-body{margin-left:auto;margin-right:auto}
.article-body>p:first-of-type::first-letter{float:left;font-family:"Newsreader",serif;
font-size:4.4em;line-height:.68;padding:.02em .08em 0 0;color:var(--accent)}
.post-template .share,.post-template .author-card,.post-template .footnote{max-width:66ch;
margin-left:auto;margin-right:auto}
/* essay pages: About and Privacy */
.lede{margin:clamp(24px,3.2vw,40px) 0 clamp(26px,3.4vw,44px);max-width:20ch;
font-size:clamp(1.75rem,3.8vw,3rem);line-height:1.16;letter-spacing:-.01em}
.lede em{color:var(--em);font-style:italic}
.glance{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px)}
.glance div{border:1.5px solid var(--line);padding:clamp(15px,1.9vw,21px)}
.glance span{display:block;font-family:"Archivo",sans-serif;font-size:.73rem;font-weight:700;
letter-spacing:.05em;color:var(--accent);margin-bottom:9px}
.glance p{margin:0;font-size:1rem;line-height:1.45;color:var(--dim)}
.factlink{text-decoration:underline;text-underline-offset:3px;
text-decoration-color:var(--line)}
.factlink:hover{color:var(--accent);text-decoration-color:var(--accent)}
.hr{height:1px;background:var(--line);margin-top:clamp(22px,2.6vw,34px)}
.essay{padding:clamp(22px,2.6vw,34px) 0 0;margin-top:clamp(22px,2.6vw,34px);
border-top:1px solid var(--line)}
.essay .num{display:block;font-family:"Archivo",sans-serif;font-size:.73rem;font-weight:700;
letter-spacing:.05em;color:var(--accent);margin-bottom:clamp(8px,1vw,12px)}
.essay h2{margin:0 0 clamp(13px,1.6vw,19px);font-family:"Archivo",sans-serif;font-weight:700;
font-stretch:108%;font-size:clamp(1.5rem,2.7vw,2.25rem);letter-spacing:-.022em;line-height:1.06}
.essay p{margin:0 0 1.05em;font-size:1.12rem;line-height:1.68;color:var(--prose);max-width:68ch}
.essay ul{margin:0;padding:0;list-style:none}
.essay li{position:relative;padding-left:24px;margin-bottom:.75em;font-size:1.12rem;
line-height:1.6;color:var(--prose);max-width:68ch}
.essay li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:9px;
background:var(--accent)}
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(24px,3vw,40px) clamp(18px,2.6vw,32px)}
.person{text-decoration:none;display:block}
.mono{display:flex;align-items:center;justify-content:center;aspect-ratio:1;max-width:136px;
font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112%;letter-spacing:-.02em;
font-size:clamp(1.35rem,2.4vw,1.75rem)}
.m-ultra{background:var(--ultra);color:var(--paper)}
.m-red{background:var(--red);color:var(--paper)}
.m-green{background:var(--green);color:var(--ink)}
.m-burnt{background:var(--vermilion);color:var(--paper)}
.person .who{display:block;margin-top:13px;font-family:"Newsreader",serif;font-size:1.08rem;
line-height:1.25;color:var(--fg)}
.person .role{display:block;margin-top:5px;font-family:"Archivo",sans-serif;font-size:.73rem;
font-weight:600;color:var(--accent)}
.person:hover .who{text-decoration:underline;text-underline-offset:4px}
.essay .aside{margin:clamp(22px,2.6vw,32px) 0 0;font-family:"Newsreader",serif;font-style:italic;
font-size:1.05rem;color:var(--dim2)}
.contact{display:flex;flex-direction:column;max-width:460px;background:var(--art-bg,var(--surface));color:var(--paper);
padding:clamp(24px,2.8vw,34px);margin:clamp(22px,2.6vw,34px) 0 0}
.a-ink{--art-bg:transparent;--art-1:var(--accent);border:2px solid var(--fg);color:var(--fg)}
.contact .lab{color:var(--art-1);opacity:1}
.author-card h4 a:hover{text-decoration-color:var(--fg)}
.contact h3{margin:0 0 14px;font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:800;font-stretch:112%;
letter-spacing:-.026em}
.contact p{margin:0;font-size:1.04rem;line-height:1.6}
.contact-link{align-self:flex-start;margin-top:clamp(22px,2.6vw,30px);
font-size:clamp(.95rem,1.4vw,1.08rem);font-weight:600;text-decoration:none;
border-bottom:3px solid var(--art-1);padding-bottom:4px}
.contact-link:hover{color:var(--art-1)}
/* author page */
.author-grid{display:grid;grid-template-columns:minmax(220px,.36fr) 1fr;gap:clamp(20px,3vw,48px);
padding:clamp(10px,1.4vw,16px) 0 clamp(30px,4vw,52px);align-items:start}
.pcard{position:sticky;top:calc(var(--nav) + 20px)}
.pcard .shot{aspect-ratio:1;max-width:150px;margin-bottom:18px;font-size:clamp(1.6rem,3vw,2.1rem)}
.prole{display:block;font-family:"Archivo",sans-serif;font-size:.76rem;font-weight:600;
color:var(--accent);margin-bottom:12px}
.pcard h1{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;font-stretch:110%;
letter-spacing:-.026em;line-height:1;margin:0 0 12px}
.bio{margin:0;font-size:1.04rem;line-height:1.5;color:var(--dim)}
.a-empty{font-size:1.05rem;line-height:1.6;color:var(--dim);padding-top:18px;max-width:46ch}
.a-count{display:block;text-align:right;font-size:.8rem;font-weight:600;
border-bottom:2px solid var(--fg);
padding-bottom:8px}
.a-row{display:grid;grid-template-columns:1fr 150px;gap:clamp(14px,2vw,28px);align-items:start;
padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.a-row:hover h2{text-decoration:underline;text-decoration-thickness:2px;
text-decoration-color:var(--accent);text-underline-offset:4px}
.a-line{display:flex;gap:14px;font-size:.78rem;font-weight:500;margin-bottom:9px;color:var(--dim2)}
.a-row h2{font-size:1.34rem;font-weight:700;font-stretch:106%;line-height:1.12;margin:0 0 8px;
letter-spacing:-.015em}
.a-row .deck{font-size:1rem;color:var(--dim);max-width:54ch}
.min{display:block;font-size:.78rem;font-weight:500;margin-top:10px;color:var(--dim2)}
.a-art{aspect-ratio:4/3;background:var(--plate-bg,var(--art-bg));overflow:hidden}
[data-theme="light"] .form button:hover{background:var(--fg);color:var(--bg)}
/* footer */
/* lead line reveal, one moment only */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:820px){
:root{--nav:88px}
}
@media (max-width:980px){
.feature-band,.author-grid,.block{grid-template-columns:1fr}
.glance{grid-template-columns:repeat(2,1fr)}
.people-grid{grid-template-columns:repeat(3,1fr)}
.pcard{position:static}
.story .deck,.row .deck{max-width:56ch}
}
@media (max-width:620px){
.glance{grid-template-columns:1fr}
.people-grid{grid-template-columns:repeat(2,1fr)}
.contact{max-width:none}
.row{grid-template-columns:38px 84px 1fr}
.row-meta{grid-column:2/-1;text-align:left}
.a-row,.fn-row{grid-template-columns:1fr}
.a-art{display:none}
.fn-min{text-align:left}
.article-plate{aspect-ratio:4/3}
.share-row a,.share-row button{padding:11px 16px}
.fn-row{padding:15px 0}
.row{padding:16px 0}
}
/* ---- Ghost additions --------------------------------------------------- */
[data-plate]{background-size:cover;background-position:center;background-repeat:no-repeat}
.mono{background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}
.mono[data-initials]::after{content:attr(data-initials);position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-stretch:112%;
letter-spacing:-.02em;line-height:1}
.author-card .mono[data-initials]::after{font-size:1.5rem}
.pcard .mono[data-initials]::after{font-size:clamp(1.6rem,3vw,2.1rem)}
.people-grid .mono[data-initials]::after{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.kg-width-full{width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%)}
.kg-width-wide{width:min(100%,1080px);max-width:none;margin-left:50%;transform:translateX(-50%)}
.article-body img{max-width:100%;height:auto;display:block;margin:1.4em 0}
.article-body figure{margin:1.6em 0}
.article-body figcaption{font-family:"Archivo",sans-serif;font-size:.8rem;color:var(--dim);padding-top:8px}
.article-body a{text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:3px;text-decoration-color:var(--line)}
.article-body a:hover{text-decoration-color:var(--accent)}
.article-body .kg-card{margin:1.8em 0}
.kg-image{width:100%;height:auto}
.pagination{display:flex;justify-content:center;gap:20px;padding:clamp(24px,3vw,40px) 0;
font-family:"Archivo",sans-serif;font-size:.82rem;font-weight:600}
.pagination a:hover{color:var(--accent)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:8px;z-index:99;background:var(--accent);
color:var(--on-accent);padding:8px 14px}
/* story page ends after the author card (Keep reading removed) */
.post-template .article-col{padding-bottom:clamp(30px,4vw,52px)}
/* fonts locked: Ghost injects --gh-font-* after this sheet */
h1,h2,h3,h4,.ui,.badge,.cat,.lab,.credit,.foot,.idx,.num,.count b,button,input,nav,.wordmark,
.row-meta,.row-title,.a-count,.min,.fn-cat,.fn-min,.role,.prole,.contribs a,.readmore,
.article-meta,.list-head,.share,.share-lab,.aside,.people-group,.mono,
.ph-title,.ph-meta,.story-head,.list-lab,.a-line
{font-family:"Archivo","Helvetica Neue",Arial,sans-serif !important}
body,.deck,.lede,.bio,.who,.fn-title,.article-body,.person .who
{font-family:"Newsreader",Palatino,"Times New Roman",serif !important}
/* ---- dark mode: labels, numbering, roles and metadata stay white ------- */
html:not([data-theme="light"]) .idx,
html:not([data-theme="light"]) .row-idx,
html:not([data-theme="light"]) .ph-num,
html:not([data-theme="light"]) .glance span,
html:not([data-theme="light"]) .essay .num,
html:not([data-theme="light"]) .person .role,
html:not([data-theme="light"]) .prole,
html:not([data-theme="light"]) .fn-cat,
html:not([data-theme="light"]) .a-count,
html:not([data-theme="light"]) .min{color:var(--paper)}
/* ---- portraits: grayscale by default, colour on hover ------------------ */
.mono{filter:grayscale(1);transition:filter .2s ease}
.person:hover .mono,
.pcard:hover .shot,
.author-card:hover .shot{filter:grayscale(0)}
/* ---- masthead card: View profile reveal -------------------------------- */
.person{position:relative;overflow:hidden}
.person::after{content:"View profile \2197";position:absolute;left:0;right:0;bottom:0;
padding:9px 10px;background:var(--accent);color:var(--on-accent);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.7rem;font-weight:800;
letter-spacing:.04em;text-transform:uppercase;text-align:left;
transform:translateY(100%);transition:transform .18s ease}
.person:hover::after,.person:focus-visible::after{transform:translateY(0)}
/* ================= masthead: bordered squares ========================== */
.people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(12px,1.6vw,20px)}
.person{display:flex;flex-direction:column;border:1.5px solid var(--line);
background:var(--surface);padding:clamp(10px,1.2vw,14px);overflow:hidden;
transition:border-color .15s ease}
.person:hover{border-color:var(--accent);transform:none}
.person .mono{width:100%;max-width:none;aspect-ratio:1}
.person .who{display:block;padding-top:12px;font-size:1.06rem}
.person .role{display:block;margin-top:4px}
.person::after{content:"View profile \2197";position:static;transform:none;
display:block;margin-top:12px;padding:9px 10px;text-align:center;
background:var(--panel);color:var(--fg);border:1.5px solid var(--line);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.7rem;
font-weight:800;letter-spacing:.04em;text-transform:uppercase;
transition:background .15s ease,color .15s ease,border-color .15s ease}
.person:hover::after{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* ---- author page: bordered profile card ---- */
.pcard{border:1.5px solid var(--line);background:var(--surface);
padding:clamp(16px,2vw,24px)}
.pcard .shot{width:100%;max-width:none;aspect-ratio:1;margin-bottom:18px}
@media (max-width:620px){
.people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---- View profile: hidden until hover --------------------------------- */
.person::after{margin-top:0;max-height:0;padding-top:0;padding-bottom:0;
border-width:0;opacity:0;overflow:hidden;
transition:max-height .18s ease,margin-top .18s ease,padding .18s ease,
opacity .14s ease,background .15s ease,color .15s ease,border-color .15s ease}
.person:hover::after,.person:focus-visible::after{max-height:60px;margin-top:12px;
padding:9px 10px;border-width:1.5px;opacity:1}
/* ---- an empty page heading must not reserve space --------------------- */
.ph-title:empty{display:none}
.ph-title:empty::after{display:none}
.ph-row:empty{display:none}
.pagehead:has(.ph-title:empty){margin:0}
/* ======================================================================
HOMEPAGE: the current issue as a literal index
====================================================================== */
/* ---- utility bar, standing in for a nav ---- */
/* Three zones: pages left, issue metadata centred, utilities right. */
.idx-bar{position:sticky;top:0;z-index:40;background:var(--bg);
border-bottom:1px solid var(--line)}
.idx-bar-in{padding:10px var(--gut);
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:10px clamp(16px,2.4vw,32px);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.82rem;font-weight:700}
.idx-left{justify-self:start}
.idx-issue{justify-self:center;text-align:center}
.idx-right{justify-self:end}
.idx-left,.idx-right,.idx-issue{display:flex;align-items:center;gap:0;
flex-wrap:wrap;margin:0}
.idx-left > *,.idx-right > *,.idx-issue span{padding:0 clamp(10px,1.4vw,16px);
border-left:1px solid var(--line);line-height:1.7}
.idx-left > *:first-child,.idx-right > *:first-child,.idx-issue span:first-child{
border-left:none}
.idx-left > *:first-child{padding-left:0}
.idx-issue span:first-child{padding-left:0;font-weight:700;color:var(--fg)}
.idx-issue span:nth-child(n+2){color:var(--dim)}
.idx-right > *:last-child{padding-right:0}
.idx-left a,.idx-right a,.idx-toggle{color:var(--fg);text-decoration:none;
background:none;border-top:none;border-right:none;border-bottom:none;
margin:0;cursor:pointer;font:inherit;display:inline-flex;align-items:center}
.idx-left a:hover,.idx-right a:hover,.idx-toggle:hover{color:var(--accent)}
.idx-toggle{gap:7px;color:var(--dim)}
.idx-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;
background:transparent;flex:none}
[data-theme="light"] .idx-dot{background:currentColor}
.idx-join{color:var(--accent)}
.idx-join:hover{color:var(--accent);text-decoration:underline;
text-underline-offset:4px;text-decoration-thickness:2px}
@media (max-width:760px){
.idx-bar-in{grid-template-columns:1fr;justify-items:center;row-gap:8px}
.idx-left,.idx-right,.idx-issue{justify-self:center}
.idx-left > *:first-child,.idx-right > *:last-child{padding:0 clamp(10px,1.4vw,16px)}
.idx-issue span:first-child{padding-left:clamp(10px,1.4vw,16px)}
}
/* ---- masthead ---- */
.idx{padding-top:clamp(16px,2vw,26px)}
/* the homepage ends on the index rule, so trim the wrapper's tail */
/* the index closes on its own rule, then the footer hairline */
.idx-head{padding-bottom:clamp(6px,.8vw,11px)}
.idx-head .wordmark{font-size:clamp(3rem,13.5vw,10.5rem)}
.idx-rule{height:3px;background:var(--fg);margin-top:clamp(6px,.8vw,10px)}
/* ---- 01 Profile: full band, art left, copy on ultramarine ---- */
.idx-lead{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(10px,1.3vw,17px)}
.idx-lead-art{display:block;background:#000 var(--plate-bg,none);min-height:clamp(300px,42vw,620px)}
.idx-lead-copy{background:var(--ultra);color:#fff;
padding:clamp(26px,3.4vw,58px);display:flex;flex-direction:column;justify-content:center}
.idx-badge{align-self:flex-start;background:#fff;color:var(--ultra);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.72rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;padding:7px 12px 6px;margin-bottom:clamp(16px,2vw,26px)}
.idx-lead-copy h2{margin:0 0 clamp(14px,1.8vw,22px);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-stretch:112%;
letter-spacing:-.03em;line-height:.96;font-size:clamp(2rem,4.4vw,3.7rem)}
.idx-lead-copy h2 a{color:#fff;text-decoration:none}
.idx-lead-copy h2 a:hover{text-decoration:underline;text-underline-offset:6px;
text-decoration-thickness:3px}
.idx-lead-copy .deck{color:#DDE0F5;max-width:46ch;margin:0 0 clamp(16px,2vw,26px)}
.idx-lead-meta{display:flex;gap:22px;margin:0 0 clamp(14px,1.8vw,22px);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.8rem;font-weight:600;color:#fff}
.idx-read{align-self:flex-start;color:#fff;text-decoration:none;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.86rem;font-weight:700;
box-shadow:inset 0 -2px 0 #fff;padding-bottom:3px}
.idx-read:hover{box-shadow:inset 0 -3px 0 #fff}
/* ---- 02-04: tight, even index rows ---- */
.idx-list{list-style:none;margin:clamp(28px,3.4vw,46px) 0 0;padding:0}
.idx-entry{display:grid;grid-template-columns:minmax(0,1fr);
gap:12px;padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--line)}
.idx-entry:first-child{border-top:2px solid var(--fg)}
.idx-entry:last-child{border-bottom:2px solid var(--fg)}
.idx-sec{display:flex;align-items:baseline;gap:12px}
.idx-num{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.74rem;
font-weight:700;letter-spacing:.16em;color:var(--dim2)}
.idx-name{margin:0;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-weight:800;font-stretch:112%;letter-spacing:-.028em;line-height:1;
font-size:clamp(1.15rem,1.9vw,1.55rem)}
.idx-name a{text-decoration:none;color:var(--fg)}
.idx-name a:hover{color:var(--accent)}
.idx-name i{font-style:normal;color:var(--accent);font-weight:400;
transform:skewX(-18deg);display:inline-block;margin-right:.06em}
.idx-art{display:block;background:var(--plate-bg,var(--art-bg));aspect-ratio:4/3}
.idx-title{margin:0 0 8px;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-weight:800;font-stretch:110%;letter-spacing:-.024em;line-height:1.06;
font-size:clamp(1.3rem,2.1vw,1.75rem)}
.idx-title a{text-decoration:none;color:var(--fg)}
.idx-title a:hover{text-decoration:underline;text-decoration-thickness:2px;
text-decoration-color:var(--accent);text-underline-offset:4px}
.idx-copy .deck{max-width:62ch;margin:0 0 8px;font-size:1rem;line-height:1.5}
.idx-meta{display:flex;gap:18px;flex-wrap:wrap;margin:0;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-size:.76rem;font-weight:600;color:var(--dim2)}
@media (min-width:861px){
.idx-entry{grid-template-columns:170px 210px minmax(0,1fr);
align-items:start;column-gap:clamp(20px,2.4vw,34px);row-gap:0}
.idx-sec{flex-direction:column;align-items:flex-start;gap:6px}
.idx-art{aspect-ratio:4/3;align-self:start}
}
@media (max-width:860px){
.idx-lead{grid-template-columns:1fr}
.idx-lead-art{min-height:0;aspect-ratio:4/3}
.idx-entry{padding:20px 0}
}
/* ======================================================================
ARCHIVE: past issues, set tight like a printed index
====================================================================== */
.arc{max-width:840px;padding-top:clamp(20px,2.4vw,30px);
padding-bottom:clamp(22px,2.8vw,36px)}
.arc-head{padding-bottom:10px}
.arc-title{margin:0;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-weight:900;font-stretch:118%;letter-spacing:-.035em;line-height:.9;
font-size:clamp(1.9rem,4.2vw,2.9rem)}
.arc-dots{height:6px;margin-top:10px;
background-image:radial-gradient(circle,var(--fg) 1.4px,transparent 1.5px);
background-size:11px 6px;background-repeat:repeat-x;background-position:left center}
.arc-body{padding-top:6px}
.arc-issue{border-bottom:1px solid var(--line)}
.arc-issue summary{list-style:none;cursor:pointer;display:flex;align-items:center;
gap:12px;padding:9px 0;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.82rem;font-weight:600}
.arc-issue summary::-webkit-details-marker{display:none}
.arc-issue summary:hover .arc-mark{color:var(--accent)}
.arc-mark{display:inline-flex;align-items:center;gap:5px;
font-weight:900;font-stretch:118%;letter-spacing:-.02em;
font-size:clamp(1.05rem,2vw,1.3rem);line-height:1;color:var(--fg)}
.arc-mark i{width:3px;height:1.05em;background:currentColor;display:inline-block}
.arc-when{color:var(--dim)}
.arc-issue summary::after{content:"+";margin-left:auto;color:var(--dim2);
font-weight:700;font-size:.95rem;line-height:1}
.arc-issue[open] summary::after{content:"\2212"}
.arc-list{list-style:none;margin:0;padding:0 0 10px 0}
.arc-row a{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
padding:3px 0;text-decoration:none;color:var(--fg);line-height:1.45}
.arc-name{font-family:"Newsreader",Palatino,"Times New Roman",serif;font-size:1rem}
.arc-row a:hover .arc-name{text-decoration:underline;text-decoration-thickness:2px;
text-decoration-color:var(--accent);text-underline-offset:3px}
.arc-tail{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-size:.74rem;font-weight:600;color:var(--dim2)}
/* rows that are not links still need the same metrics */
.arc-row{display:block}
/* rows without a link share the anchor's metrics */
.arc-row > .arc-name{display:inline-flex;align-items:baseline}
.arc-row:not(:has(> a)){display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:3px 0}
@supports not selector(:has(*)){
.arc-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.arc-row > a{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;width:100%}
}
.arc-prose{padding:2px 0 12px}
.arc-prose p{margin:0 0 10px;max-width:60ch;font-size:1rem;line-height:1.55;color:var(--dim)}
.arc-prose p:last-child{margin-bottom:0}
.arc-link{color:var(--accent);text-decoration:underline;
text-underline-offset:3px;text-decoration-thickness:2px;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.86rem;font-weight:700}
.arc-empty{margin:14px 0 0;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-size:.86rem;color:var(--dim)}
.arc-empty code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.82em;background:var(--panel);padding:2px 6px}
/* ---- footer: same three zones and hairlines as the bar ---------------- */
.footer-band{border-top:1px solid var(--line)}
.colophon{padding:7px var(--gut);
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:10px clamp(16px,2.4vw,32px);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.8rem;font-weight:700}
.fo-left{justify-self:start;display:flex;align-items:center;gap:8px}
.fo-mid{justify-self:center;display:flex;align-items:center;gap:0;flex-wrap:wrap}
.fo-right{justify-self:end;margin:0;color:var(--dim)}
.fo-mid a{padding:0 clamp(10px,1.4vw,16px);border-left:1px solid var(--line);
line-height:1.7;color:var(--fg);text-decoration:none;display:inline-flex;align-items:center}
.fo-mid a:first-child{border-left:none;padding-left:0}
.fo-mid a:last-child{padding-right:0}
.fo-mid a:hover{color:var(--accent)}
/* social: matched bordered squares. The explicit svg sizing is load bearing,
these icons carry no width/height attributes of their own. */
.fo-left a{width:28px;height:28px;padding:0;flex:none;
display:inline-flex;align-items:center;justify-content:center;
border:1.5px solid var(--line);color:var(--fg);text-decoration:none;
transition:border-color .15s ease,color .15s ease,background .15s ease}
.fo-left a:hover{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.fo-left a svg{display:block;width:14px;height:14px}
.fo-left a[data-icon="x"] svg{width:13px;height:13px}
.fo-left a[data-icon="in"] svg{width:15px;height:15px}
@media (max-width:760px){
.colophon{grid-template-columns:1fr;justify-items:center;row-gap:8px}
.fo-left,.fo-mid,.fo-right{justify-self:center}
.fo-mid a:first-child{padding-left:clamp(10px,1.4vw,16px)}
}
/* ---- short pages: keep the footer at the bottom of the viewport ------- */
/* Without this the footer floats up mid-screen on the archive and error
pages, leaving a large empty field beneath it. */
html{min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
body > main{flex:1 0 auto}
body > .footer-band{flex:0 0 auto;margin-top:auto}
/* the index pages sit on a panel, so give the panel inner padding */
/* ---- definition rows: label and value, with room to breathe ----------- */
.arc-def{border-top:1px solid var(--line)}
.arc-def .arc-row{display:block;border-bottom:1px solid var(--line)}
.arc-def .arc-row > a,
.arc-def .arc-row:not(:has(> a)){display:grid;grid-template-columns:minmax(140px,1fr) 2fr;
align-items:baseline;gap:6px clamp(16px,2.4vw,28px);padding:10px 0;
text-decoration:none;color:var(--fg)}
.arc-def .arc-name{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--dim2)}
.arc-def .arc-tail{font-family:"Newsreader",Palatino,"Times New Roman",serif;
font-size:1.02rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--fg)}
.arc-def .arc-row > a:hover .arc-tail{color:var(--accent)}
.arc-def .arc-row > a:hover .arc-name{color:var(--accent)}
/* masthead reads name-first, so flip the emphasis */
.arc-people .arc-name{font-family:"Newsreader",Palatino,"Times New Roman",serif;
font-size:1.08rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--fg)}
.arc-people .arc-tail{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--dim2)}
.arc-people .arc-row > a:hover .arc-name{text-decoration:underline;
text-decoration-thickness:2px;text-decoration-color:var(--accent);text-underline-offset:3px}
@supports not selector(:has(*)){
.arc-def .arc-row{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;
align-items:baseline;gap:6px clamp(16px,2.4vw,28px);padding:10px 0}
.arc-def .arc-row > a{display:contents}
}
@media (max-width:560px){
.arc-def .arc-row > a,.arc-def .arc-row:not(:has(> a)){grid-template-columns:1fr;gap:2px}
}
/* email links: ultramarine reads at 2.39:1 on the dark panel, so go white */
html:not([data-theme="light"]) .arc-link{color:var(--paper);
text-decoration-color:var(--paper)}
html:not([data-theme="light"]) .arc-link:hover{text-decoration-color:var(--accent)}
/* ======================================================================
WELCOME SUBSCRIBE DIALOG
====================================================================== */
.sub-modal[hidden]{display:none}
.sub-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
justify-content:center;padding:clamp(16px,4vw,40px)}
.sub-backdrop{position:absolute;inset:0;background:rgba(8,8,15,.72)}
.sub-card{position:relative;z-index:1;width:min(560px,100%);
background:var(--bg);border:2px solid var(--fg);
padding:clamp(26px,3.6vw,44px);max-height:90vh;overflow:auto}
.sub-x{position:absolute;top:10px;right:12px;background:none;border:none;cursor:pointer;
font-size:1.5rem;line-height:1;color:var(--dim);padding:4px 6px}
.sub-x:hover{color:var(--accent)}
.sub-eyebrow{margin:0 0 clamp(14px,1.8vw,20px);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:900;font-stretch:118%;
letter-spacing:-.03em;font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1;color:var(--fg)}
.sub-eyebrow i{font-style:normal;color:var(--accent);font-weight:400;
transform:skewX(-18deg);display:inline-block;margin:0 .04em}
.sub-card h2{margin:0 0 clamp(10px,1.2vw,14px);
font-family:"Newsreader",Palatino,"Times New Roman",serif;font-weight:400;
font-size:clamp(1.02rem,1.7vw,1.18rem);line-height:1.5;color:var(--fg)}
.sub-form{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.sub-form input{flex:1 1 200px;min-width:0;background:transparent;color:var(--fg);
border:none;border-bottom:2px solid var(--line);padding:11px 2px;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.95rem}
.sub-form input::placeholder{color:var(--dim2)}
.sub-form input:focus{outline:none;border-bottom-color:var(--accent)}
.sub-form button{background:var(--accent);color:var(--on-accent);border:none;
padding:11px 22px;margin-left:14px;cursor:pointer;white-space:nowrap;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sub-form button:hover{opacity:.9}
.sub-note{margin:10px 0 0;min-height:1.1em;color:var(--dim2);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.76rem}
.sub-note.ok{color:var(--accent);font-weight:700}
html:not([data-theme="light"]) .sub-note.ok{color:var(--paper)}
.sub-skip{display:block;margin:clamp(16px,2vw,22px) 0 0;background:none;border:none;
padding:0;cursor:pointer;color:var(--dim2);text-decoration:underline;
text-underline-offset:3px;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.76rem;font-weight:600}
.sub-skip:hover{color:var(--accent)}
@media (max-width:480px){
.sub-form button{margin:12px 0 0;width:100%}
}
.sub-lead{margin:0 0 clamp(18px,2.2vw,26px);
font-family:"Newsreader",Palatino,"Times New Roman",serif;
font-size:clamp(1.02rem,1.7vw,1.18rem);line-height:1.5;color:var(--fg)}
/* ---- section labels are no longer links: underlined, not interactive --- */
.cat,.fn-cat{text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px;text-decoration-color:currentColor;cursor:default}
.kicker .cat,.a-line .cat{pointer-events:none}
/* ---- dark mode: the lead reads black, not ultramarine ----------------- */
html:not([data-theme="light"]) .idx-lead-copy{background:var(--ink)}
html:not([data-theme="light"]) .idx-lead-art{background-color:var(--ink)}
html:not([data-theme="light"]) .idx-badge{background:var(--paper);color:var(--ink)}
html:not([data-theme="light"]) .idx-lead-copy .deck{color:var(--dim)}
html:not([data-theme="light"]) .idx-lead{border:1px solid var(--line)}
/* the interior bar has no centre content, so it must not reserve height */
.idx-bar-in > .idx-issue:empty{min-height:0}
/* the publication name doubles as the home link in the bar */
.idx-brand{font-weight:800;letter-spacing:-.01em}
/* a value that is itself a link should look like one */
.arc-tail-link{text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px;text-decoration-color:var(--line)}
.arc-row > a:hover .arc-tail-link{text-decoration-color:var(--accent)}
/* ======================================================================
TEXT INTERACTION: hover and selection read as ink, not ultramarine.
Ultramarine is kept for non-text accents (borders, badges, buttons,
icon fills, the wordmark slash) so the brand colour still carries.
====================================================================== */
/* selection: invert against the page rather than tint it */
::selection{background:var(--fg);color:var(--bg)}
/* word-level hover: ink in light, paper in dark, always underlined */
.idx-left a:hover,
.idx-right a:hover,
.idx-toggle:hover,
.idx-join:hover,
.fo-mid a:hover,
.pagination a:hover,
.factlink:hover,
.share-btn:hover,
.share-btn.copied,
.sub-x:hover,
.sub-skip:hover,
.idx-name a:hover,
.arc-issue summary:hover .arc-mark,
.arc-def .arc-row > a:hover .arc-name,
.arc-def .arc-row > a:hover .arc-tail,
.arc-people .arc-row > a:hover .arc-name,
.arc-row > a:hover .arc-name{
color:var(--fg);
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:3px;
text-decoration-color:currentColor}
/* the toggle keeps its dot, so only the label should shift */
.idx-toggle:hover .idx-dot{text-decoration:none}
/* underline colours that were ultramarine follow the text instead */
.article-body a:hover,
.arc-row > a:hover .arc-tail-link,
html:not([data-theme="light"]) .arc-link:hover{text-decoration-color:currentColor}
/* icon squares and the masthead card are surfaces, not words: unchanged */
/* hover underlines that were still ultramarine */
.row:hover .row-title,
.fn-row:hover .fn-title,
.a-row:hover h2,
.idx-title a:hover,
.arc-row a:hover .arc-name,
.arc-people .arc-row > a:hover .arc-name,
.idx-lead-copy h2 a:hover,
.author-card h4 a:hover,
.arc-link:hover{text-decoration-color:currentColor}
.readmore:hover{color:inherit;text-decoration-color:currentColor}
/* nav and footer sit heavier, matching the section-label treatment */
.idx-bar-in,.colophon{font-weight:700}
.idx-brand{font-weight:800}
.idx-issue span:first-child{font-weight:800}
.fo-right{font-weight:700}
/* ======================================================================
INDEX NUMBERING: ultramarine in light, white in dark.
The bracket bars stay ink so the |01| mark keeps its structure.
====================================================================== */
.idx-num,
.arc-mark,
.essay .num,
.arc-issue summary .arc-mark{color:var(--ultra)}
.arc-mark i{background:var(--fg)}
html:not([data-theme="light"]) .idx-num,
html:not([data-theme="light"]) .arc-mark,
html:not([data-theme="light"]) .essay .num,
html:not([data-theme="light"]) .arc-issue summary .arc-mark{color:var(--paper)}
html:not([data-theme="light"]) .arc-mark i{background:var(--paper)}
/* hover keeps the numbers legible rather than flipping them to ink */
.arc-issue summary:hover .arc-mark{color:var(--ultra);text-decoration:none}
html:not([data-theme="light"]) .arc-issue summary:hover .arc-mark{color:var(--paper)}
/* ======================================================================
THE INDEX — 90s print homepage
Accent: #EB1700, the same value in both modes.
Light: 4.51:1 as text on white, 3.83:1 on the paper stock (#F2ECE0).
The stock is L* 93.6 at chroma 6.5: warm enough to read as paper rather
than as a neutral grey, which is what #EBE9E4 did at chroma 2.7.
Dark: 4.43:1 on the dark stock.
White type on the red reads 4.51:1, so the stamp passes AA. Everywhere
else the accent is display-scale only (slash, stamp, drop cap, rules),
never small copy, because it sits under 4.5:1 on the tinted stocks.
====================================================================== */
body.n90{--red:#EB1700;--paperstock:#F2ECE0;--inkstock:#000000;--inkmute:rgba(0,0,0,.60);
background:var(--paperstock);margin:0}
html:not([data-theme="light"]) body.n90{--paperstock:#141419;--inkstock:#EDE7DA;
--inkmute:rgba(237,231,218,.62)}
/* No paper grain anywhere: the stock is flat on every page, in both modes. */
.nn{position:relative;isolation:isolate;background:var(--paperstock);color:var(--inkstock);
max-width:1180px;margin:0 auto;padding-top:0;padding-bottom:clamp(10px,1.2vw,16px);
min-height:100vh}
/* ---- masthead ---- */
.n-masthead{padding-top:clamp(8px,1.1vw,13px)}
.n-toprule{height:6px;background:var(--inkstock)}
.n-eyebrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
padding:8px 0;font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:800;
letter-spacing:.22em;text-transform:uppercase}
.n-eb-l{justify-self:start;display:flex;align-items:center;gap:0}
.n-eb-r{justify-self:end;display:flex;align-items:center}
.n-eyebrow a{color:var(--inkstock);text-decoration:none;padding:0 12px;
border-left:1px solid var(--inkstock);line-height:1.6}
.n-eyebrow a:first-child{border-left:none;padding-left:0}
.n-eyebrow a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* Lights: identical type to the eyebrow links, simply ruled off.
A hairline border and tight optical padding keep it from reading
as a chunky UI button. */
.n-lights{font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:800;
letter-spacing:.22em;text-transform:uppercase;line-height:1;
background:none;color:var(--inkstock);cursor:pointer;
border-width:1px;border-style:solid;border-color:var(--inkstock);
padding:5px 10px 4px;
transition:background .12s linear,color .12s linear}
.n-lights:hover{background:var(--inkstock);color:var(--paperstock)}
.n-wordmark{color:var(--inkstock);justify-content:center;text-align:center;
padding:clamp(8px,1.4vw,16px) 0 clamp(6px,1vw,12px);font-size:clamp(2.8rem,12vw,9rem)}
.n-wordmark .cut{background:var(--red)}
.n-doublerule{height:0;border:none}
/* ---- lead ----
--band-gap is the space on both sides of the issue bar. One token, so
the bar always sits centred between the lead and the columns. */
body.n90{--band-gap:clamp(18px,1.9vw,23px)}
.n-lead{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(18px,2.6vw,38px);
padding:clamp(18px,2.6vw,34px) 0 var(--band-gap)}
/* No border on the lead image either: the story images lost theirs when the
boxes went in, and the lead was the last plate still framed. */
.n-lead-art{position:relative;z-index:1;display:block;min-height:clamp(280px,39vw,520px);
background-size:cover;background-position:center;border:none}
.n-lead-copy{display:flex;flex-direction:column;justify-content:center}
/* Editor's Pick, set as a rubber stamp: outlined rather than filled, with
an inner rule for the frame and enough tilt to read as deliberate. */
.n-stamp{position:relative;align-self:flex-start;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:.68rem;font-weight:900;
letter-spacing:.24em;text-transform:uppercase;color:var(--red);background:none;
border-width:2px;border-style:solid;
border-top-color:var(--red);border-right-color:var(--red);
border-bottom-color:var(--red);border-left-color:var(--red);
padding:7px 13px 6px;transform:rotate(-4.5deg);
margin-bottom:clamp(14px,2vw,20px)}
.n-stamp::after{content:"";position:absolute;inset:3px;pointer-events:none;
border-width:1px;border-style:solid;opacity:.55;
border-top-color:var(--red);border-right-color:var(--red);
border-bottom-color:var(--red);border-left-color:var(--red)}
.n-lead-copy h2{margin:0 0 clamp(12px,1.6vw,18px);font-family:"Archivo",sans-serif;
font-weight:900;font-stretch:118%;letter-spacing:-.035em;line-height:.92;
font-size:clamp(2.15rem,4.5vw,3.65rem)}
.n-lead-copy h2 a{color:var(--inkstock);text-decoration:none}
.n-lead-copy h2 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.n-lead-deck{margin:0 0 14px;font-family:"Newsreader",serif;font-size:1.06rem;line-height:1.55}
.n-drop{float:left;font-family:"Archivo",sans-serif;font-weight:900;font-size:3.1em;
line-height:.78;padding:.04em .1em 0 0;color:var(--red)}
.n-byline{margin:0 0 14px;font-family:"Archivo",sans-serif;font-size:.72rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase}
.n-read{align-self:flex-start;font-family:"Archivo",sans-serif;font-size:.74rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--inkstock);text-decoration:none;
border-bottom:3px solid var(--red);padding-bottom:2px}
.n-read:hover{border-bottom-width:5px}
/* ---- issue band ---- */
.n-band{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;
background:var(--inkstock);color:var(--paperstock);padding:9px 14px;
font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.2em;
text-transform:uppercase}
/* ---- three columns ---- */
.n-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
padding-top:var(--band-gap)}
.n-col{display:flex;flex-direction:column;min-width:0;
padding:0 clamp(14px,2vw,26px);border-left:1px dashed var(--inkstock)}
.n-col:first-child{padding-left:0;border-left:none}
.n-col:last-child{padding-right:0}
.n-kick{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
font-family:"Archivo",sans-serif;font-size:.72rem;font-weight:900;
letter-spacing:.2em;text-transform:uppercase}
.n-folio{font-weight:700;color:var(--inkmute);display:inline-flex;align-items:center}
.n-folio::before{content:"";display:inline-block;width:3px;height:.82em;flex:none;
background:var(--red);transform:skewX(-18deg);margin-right:7px}
.n-rule2{height:5px;border-top:2px solid var(--inkstock);border-bottom:1px solid var(--inkstock);
margin:7px 0 clamp(12px,1.6vw,18px)}
/* No border on the story images: the box around each story already draws
the edge, and a hairline inside a hairline reads as a double frame. */
.n-art{position:relative;z-index:1;display:block;aspect-ratio:4/5;background-size:cover;
background-position:center;border:none;margin-bottom:clamp(10px,1.4vw,16px)}
.n2 .n-art{aspect-ratio:1}
.n3 .n-art{aspect-ratio:3/4}
.n-title{margin:0 0 8px;font-family:"Archivo",sans-serif;font-weight:900;font-stretch:112%;
letter-spacing:-.028em;line-height:1.04;font-size:clamp(1.05rem,1.6vw,1.35rem)}
.n-title a{color:var(--inkstock);text-decoration:none}
.n-title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.n-deck{margin:0 0 10px;font-family:"Newsreader",serif;font-size:.97rem;line-height:1.5;opacity:.86}
.n-meta{margin:auto 0 0;font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;opacity:.62}
/* ---- foot ---- */
.n-endrule{height:0;border:none;margin-top:clamp(14px,1.8vw,22px)}
/* ---- footer: three zones, tight, colophon on the right ---- */
.n-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:8px 18px;padding:7px 0 0;
font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:800;
letter-spacing:.18em;text-transform:uppercase}
.n-foot-l{justify-self:start;display:flex;align-items:center;gap:6px}
.n-foot-m{justify-self:center;display:flex;align-items:center;gap:0;flex-wrap:wrap}
.n-foot-r{justify-self:end;margin:0;display:flex;align-items:baseline;gap:0;
flex-wrap:wrap;text-align:right}
.n-ic{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--inkstock);color:var(--inkstock);text-decoration:none}
.n-ic svg{display:block}
.n-ic[data-icon="x"] svg{width:11px;height:11px}
.n-ic[data-icon="in"] svg{width:13px;height:13px}
.n-ic:hover{background:var(--inkstock);color:var(--paperstock)}
.n-foot-m a{padding:0 11px;border-left:1px solid var(--inkstock);
color:var(--inkstock);text-decoration:none;line-height:1.6}
.n-foot-m a:first-child{border-left:none;padding-left:0}
.n-foot-m a:last-child{padding-right:0}
.n-foot-m a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.n-foot-r{align-items:center}
.n-foot-r span{line-height:1.6}
.n-foot-r span + span::before{content:"";display:inline-block;width:1px;height:.82em;
background:var(--inkstock);opacity:.45;margin:0 11px;vertical-align:-.06em}
/* kept for any future second colophon item */
@media (max-width:860px){
.n-lead{grid-template-columns:1fr}
.n-grid{grid-template-columns:1fr}
.n-col{padding:0;border-left:none;border-top:1px dashed var(--inkstock);
padding-top:18px;margin-top:18px}
.n-col:first-child{border-top:none;margin-top:0;padding-top:0}
.n-eyebrow{grid-template-columns:1fr auto;row-gap:6px}
.n-foot{grid-template-columns:1fr;justify-items:center;row-gap:10px}
.n-foot-l,.n-foot-m,.n-foot-r{justify-self:center}
.n-foot-r{text-align:center;justify-content:center}
}
/* ---- reading serif -----------------------------------------------------
Spectral for decks and body copy: a text face with real literary
character, low enough contrast to avoid the fashion-magazine look and
sturdy enough to hold up against the heavy Archivo display type. */
.n-lead-deck,.n-deck{font-family:"Spectral",Palatino,"Times New Roman",serif}
.n-lead-deck{font-size:1.14rem;line-height:1.62;font-weight:300;letter-spacing:.002em}
.n-deck{font-size:.95rem;line-height:1.58;font-weight:300;letter-spacing:.002em;opacity:.9}
/* ======================================================================
SUBSCRIBE DIALOG — print treatment
Same copy, set as a slip of paper: ruled head, wordmark, Spectral copy,
ink field, red action. Wired to the existing data-sub-* hooks.
====================================================================== */
.sub-modal[hidden]{display:none}
.sub-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;
justify-content:center;padding:clamp(16px,4vw,40px)}
.sub-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.sub-card{position:relative;z-index:1;width:min(560px,100%);max-height:90vh;overflow:auto;
background-color:var(--paperstock);color:var(--inkstock);
border:1px solid var(--inkstock);
box-shadow:10px 10px 0 rgba(0,0,0,.22);
padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,32px) clamp(18px,2.4vw,24px)}
.sub-card > *{position:relative;z-index:1}
.sub-toprule{height:5px;background-color:var(--inkstock)}
.sub-eb{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;
font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:800;
letter-spacing:.22em;text-transform:uppercase}
.sub-x{background:none;border:none;padding:0;cursor:pointer;color:var(--inkmute);
font:inherit;letter-spacing:.18em;text-transform:uppercase}
.sub-x:hover{color:var(--inkstock);text-decoration:underline;
text-decoration-thickness:2px;text-underline-offset:3px}
.sub-doublerule{display:none}
.sub-mark{margin:clamp(14px,2vw,20px) 0 clamp(10px,1.4vw,14px);
font-family:"Archivo",sans-serif;font-weight:900;font-stretch:118%;
letter-spacing:-.035em;line-height:1;font-size:clamp(1.5rem,3.4vw,2.1rem)}
.sub-mark i{display:inline-block;width:.11em;height:.72em;background-color:var(--red);
transform:skewX(-18deg);margin:0 .07em -.02em}
.sub-card h2{margin:0 0 9px;font-family:"Spectral",serif;font-weight:400;
font-size:clamp(1rem,1.8vw,1.1rem);line-height:1.5}
.sub-lead{margin:0 0 clamp(14px,2vw,18px);font-family:"Spectral",serif;font-weight:300;
font-size:clamp(1rem,1.8vw,1.1rem);line-height:1.5;color:var(--inkmute)}
.sub-form{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.sub-form input{flex:1 1 200px;min-width:0;background:transparent;color:var(--inkstock);
border:none;border-bottom:2px solid var(--inkstock);padding:10px 2px;
font-family:"Archivo",sans-serif;font-size:.92rem;letter-spacing:.02em}
.sub-form input::placeholder{color:var(--inkmute)}
.sub-form input:focus{outline:none;border-bottom-color:var(--red)}
.sub-form button{background-color:var(--red);color:#fff;border:none;margin-left:12px;
padding:10px 20px;cursor:pointer;white-space:nowrap;
font-family:"Archivo",sans-serif;font-size:.7rem;font-weight:800;
letter-spacing:.18em;text-transform:uppercase}
.sub-form button:hover{opacity:.9}
.sub-note{margin:9px 0 0;min-height:1.1em;font-family:"Archivo",sans-serif;
font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--inkmute)}
.sub-note.ok{color:var(--inkstock)}
.sub-endrule{height:0;border:none;margin-top:clamp(14px,2vw,18px)}
.sub-skip{display:block;margin:9px 0 0;background:none;border:none;padding:0;cursor:pointer;
color:var(--inkmute);font-family:"Archivo",sans-serif;font-size:.64rem;font-weight:800;
letter-spacing:.18em;text-transform:uppercase}
.sub-skip:hover{color:var(--inkstock);text-decoration:underline;
text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:480px){
.sub-form button{margin:11px 0 0;width:100%}
}
/* ======================================================================
MOBILE — shared by the homepage and the interior pages.
Everything below assumes a 360-430px viewport.
====================================================================== */
@media (max-width:620px){
/* nothing may exceed the viewport */
html,body{overflow-x:hidden}
.nn{box-shadow:none;padding-bottom:14px}
/* masthead strip: links on one line, tagline beneath, lights right */
.n-masthead{padding-top:8px}
.n-toprule{height:4px}
.n-eyebrow{grid-template-columns:1fr auto;gap:3px 10px;
font-size:.6rem;letter-spacing:.14em;padding:7px 0}
.n-eb-l{flex-wrap:wrap}
.n-eyebrow a{padding:0 8px;line-height:1.7}
.n-eyebrow a:first-child{padding-left:0}
/* the tagline is dropped on small screens: the nav needs the room */
.n-lights{font-size:.58rem;padding:4px 8px 3px;letter-spacing:.14em}
/* wordmark must never overflow: no wrap, sized off the viewport */
.n-wordmark{font-size:clamp(1.9rem,11.5vw,3rem);padding:10px 0 8px;
flex-wrap:nowrap;white-space:nowrap}
.n-doublerule{height:7px}
/* lead */
.n-lead{grid-template-columns:1fr;gap:14px;padding:14px 0 12px}
.n-lead-art{min-height:0;aspect-ratio:4/3}
.n-lead-copy h2{font-size:clamp(1.55rem,7.6vw,2.1rem)}
.n-lead-deck{font-size:1rem;line-height:1.55}
.n-drop{font-size:2.6em}
.n-stamp{font-size:.58rem;letter-spacing:.18em;padding:6px 10px 5px;margin-bottom:12px;
transform:rotate(-4deg)}
.n-byline{font-size:.62rem;letter-spacing:.12em}
.n-read{font-size:.66rem;letter-spacing:.12em}
/* issue band: short enough to sit on two lines, not five */
.n-band{font-size:.58rem;letter-spacing:.12em;gap:8px;padding:8px 10px}
/* three columns become one; text ranged left */
.n-grid{grid-template-columns:1fr;padding-top:16px}
.n-col{padding:16px 0 0;border-left:none;border-top:1px dashed var(--inkstock);margin-top:16px}
.n-col:first-child{border-top:none;margin-top:0;padding-top:0}
.n-kick{font-size:.62rem;letter-spacing:.14em}
.n-art,.n2 .n-art,.n3 .n-art{aspect-ratio:4/3}
.n-title{font-size:1.1rem}
.n-deck{font-size:.95rem}
.n-meta{font-size:.62rem;letter-spacing:.1em}
/* footer: one centred stack */
.n-endrule{margin-top:16px}
.n-foot{grid-template-columns:1fr;justify-items:center;row-gap:9px;
font-size:.6rem;letter-spacing:.14em}
.n-foot-l,.n-foot-m,.n-foot-r{justify-self:center}
.n-foot-m{justify-content:center;flex-wrap:wrap}
.n-foot-m a{padding:0 8px}
.n-foot-m a:first-child{padding-left:8px}
/* dialog */
.sub-modal{padding:14px}
.sub-card{padding:14px 16px 16px}
.sub-mark{font-size:1.4rem;margin:12px 0 8px}
.sub-card h2,.sub-lead{font-size:.98rem;line-height:1.45}
.sub-eb{font-size:.6rem;letter-spacing:.16em}
}
@media (max-width:400px){
.n-eyebrow a{padding:0 6px}
.n-wordmark{font-size:clamp(1.7rem,11vw,2.5rem)}
.n-foot-m a{padding:0 6px}
}
/* ---- Subscribe: sits right of Lights, same type, filled to lead ---- */
.n-eb-r{display:flex;align-items:center;gap:10px}
/* matches the Lights control exactly; fills ink on hover.
Scoped to .n-eyebrow a so it outranks the eyebrow link rule, which
otherwise wins on specificity and flattens the padding. */
.n-eyebrow a.n-sub{font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:800;
letter-spacing:.22em;text-transform:uppercase;line-height:1;
color:var(--inkstock);background-color:transparent;text-decoration:none;
border-width:1px;border-style:solid;border-color:var(--inkstock);
padding:5px 10px 4px;
transition:background-color .12s linear,color .12s linear}
.n-eyebrow a.n-sub:hover{background-color:var(--inkstock);color:var(--paperstock);
text-decoration:none}
@media (max-width:620px){
.n-eb-r{gap:7px}
.n-eyebrow a.n-sub{font-size:.58rem;padding:4px 8px 3px;letter-spacing:.14em}
}
/* ======================================================================
MOBILE HEADER
A compact sticky bar replaces the eyebrow and oversized wordmark on
phones: menu, wordmark, subscribe. Pages behind it stay full width.
====================================================================== */
.m-bar{display:none}
@media (max-width:620px){
/* the desktop furniture stands down */
.n-nav,.n-eyebrow,.n-wordmark,.n-toprule,.n-doublerule{display:none}
.n-masthead{padding-top:0}
.m-bar{position:sticky;top:0;z-index:80;
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
margin:0 calc(-1 * var(--gut));padding:9px var(--gut);
background-color:var(--paperstock);color:var(--inkstock);
border-bottom-width:3px;border-bottom-style:solid;border-bottom-color:var(--inkstock)}
/* menu */
.m-menu{position:relative}
.m-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;
width:26px;height:26px}
.m-menu summary::-webkit-details-marker{display:none}
.m-burger{display:block;width:20px;height:2px;background-color:var(--inkstock);
position:relative}
.m-burger::before,.m-burger::after{content:"";position:absolute;left:0;width:20px;height:2px;
background-color:var(--inkstock)}
.m-burger::before{top:-6px}
.m-burger::after{top:6px}
.m-menu[open] .m-burger{background-color:transparent}
.m-menu[open] .m-burger::before{top:0;transform:rotate(45deg)}
.m-menu[open] .m-burger::after{top:0;transform:rotate(-45deg)}
.m-panel{position:absolute;top:calc(100% + 9px);left:calc(-1 * var(--gut));
min-width:62vw;background-color:var(--paperstock);color:var(--inkstock);
border-width:1px;border-style:solid;border-color:var(--inkstock);
padding:4px 0;display:flex;flex-direction:column;
box-shadow:6px 6px 0 rgba(0,0,0,.25)}
.m-panel a,.m-panel button{font-family:"Archivo",sans-serif;font-size:.72rem;font-weight:800;
letter-spacing:.18em;text-transform:uppercase;color:var(--inkstock);
text-decoration:none;background:none;border:none;text-align:left;cursor:pointer;
padding:11px 16px;border-bottom:1px dashed var(--inkstock)}
.m-panel > *:last-child{border-bottom:none}
.m-panel a:active,.m-panel button:active{background-color:var(--inkstock);color:var(--paperstock)}
/* wordmark, sized for a bar */
.m-mark{justify-self:center;font-family:"Archivo",sans-serif;font-weight:900;
font-stretch:118%;letter-spacing:-.03em;font-size:1.02rem;line-height:1;
color:var(--inkstock);text-decoration:none;white-space:nowrap}
.m-mark i{display:inline-block;width:.1em;height:.72em;background-color:var(--red);
transform:skewX(-18deg);margin:0 .07em -.02em}
.m-sub{justify-self:end;font-family:"Archivo",sans-serif;font-size:.6rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;line-height:1;white-space:nowrap;
color:var(--inkstock);background-color:transparent;text-decoration:none;
border-width:1px;border-style:solid;border-color:var(--inkstock);
padding:5px 10px 4px}
.m-sub:active{background-color:var(--inkstock);color:var(--paperstock)}
/* content sits flush beneath the bar */
.nn{padding-top:0}
.n-lead{padding-top:14px}
.a-file,.ip,.sp{padding-top:14px}
}
/* ---- short pages: footer sits at the bottom of the viewport ---- */
.nn{display:flex;flex-direction:column}
.n-body{flex:1 0 auto}
.nn > .n-nav,.nn > .n-endrule,.nn > .n-foot{flex:none}
/* ---- interior nav: superseded by the full-bleed nav below ---- */
/* ======================================================================
90s PRINT — interior pages
Paper stock everywhere (no grey panels), #EB1700 accent, Spectral for
reading copy, Archivo for display and furniture.
====================================================================== */
/* ======================= AUTHOR =======================
Stories carry the page. Everything else is a small side note that can
stay closed. One repeating row format, one rule weight. */
.a-file{padding-top:clamp(16px,2.2vw,26px)}
.af-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
padding-bottom:clamp(8px,1.2vw,12px)}
.af-name{margin:0;font-family:"Archivo",sans-serif;font-weight:900;font-stretch:118%;
letter-spacing:-.04em;line-height:.88;font-size:clamp(2.1rem,6vw,4rem)}
.af-role{font-family:"Archivo",sans-serif;font-size:.7rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--inkmute)}
.af-rule{height:5px;border-top:2px solid var(--inkstock);border-bottom:1px solid var(--inkstock)}
.af-cols{display:grid;grid-template-columns:minmax(220px,300px) 1fr;
gap:clamp(24px,4vw,56px);padding-top:clamp(16px,2.2vw,24px)}
.af-lab{margin:0 0 8px;font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--inkmute)}
.af-stories{list-style:none;margin:0;padding:0;border-top:1px solid var(--inkstock)}
.af-stories li{border-bottom:1px dashed var(--inkstock)}
.af-stories a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;
padding:11px 0;text-decoration:none;color:var(--inkstock)}
.s-n{font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:900;letter-spacing:.16em;
color:var(--red);display:inline-flex;align-items:center;gap:7px}
.s-n::before{content:"";display:inline-block;width:3px;height:.85em;
background:var(--red);transform:skewX(-18deg)}
.s-t{font-family:"Spectral",serif;font-size:1.06rem;line-height:1.35}
.af-stories a:hover .s-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.s-m{font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--inkmute);white-space:nowrap}
.af-side{min-width:0}
.af-plate{position:relative;z-index:1;display:block;width:100%;aspect-ratio:4/5;
background-size:cover;background-position:center;border:none}
.af-drop{margin-top:clamp(12px,1.6vw,16px);border-top:1px solid var(--inkstock)}
.af-drop summary{list-style:none;cursor:pointer;display:flex;align-items:center;
padding:9px 0;font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase}
.af-drop summary::-webkit-details-marker{display:none}
.af-drop summary::after{content:"+";margin-left:auto;color:var(--inkmute)}
.af-drop[open] summary::after{content:"\2212"}
.af-bio{font-family:"Spectral",serif;font-weight:300;font-size:.98rem;line-height:1.6;
margin:0 0 12px}
.af-record{list-style:none;margin:0;padding:0}
.af-record li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
padding:7px 0;border-top:1px dashed var(--inkstock)}
.af-record .k{font-family:"Archivo",sans-serif;font-size:.62rem;font-weight:800;
letter-spacing:.18em;text-transform:uppercase;color:var(--inkmute)}
.af-record .v{font-family:"Spectral",serif;font-size:.95rem;text-align:right}
.af-record .v a{color:var(--inkstock);text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px}
@media (max-width:760px){
.af-cols{grid-template-columns:1fr}
.af-plate{width:min(200px,50%)}
}
/* ======================= SHARED INTERIOR ======================= */
.ip{padding-top:clamp(16px,2.2vw,26px)}
.ip-head{padding-bottom:clamp(7px,1vw,12px)}
.ip-kick{font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:900;
letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.ip-kick::before{content:"";display:inline-block;width:3px;height:.85em;
background:var(--red);transform:skewX(-18deg)}
.ip-title{margin:6px 0 0;font-family:"Archivo",sans-serif;font-weight:900;font-stretch:118%;
letter-spacing:-.04em;line-height:.88;font-size:clamp(2.2rem,7vw,5rem)}
.ip-rule{height:9px;border-top:3px solid var(--inkstock);border-bottom:1px solid var(--inkstock);
margin-top:clamp(4px,.7vw,8px);margin-bottom:clamp(2px,.4vw,4px)}
/* numbered disclosure sections */
.ip-sec{border-bottom:1px dashed var(--inkstock)}
.ip-sec summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
padding:11px 0;font-family:"Archivo",sans-serif;font-size:.78rem;font-weight:800;
letter-spacing:.16em;text-transform:uppercase}
.ip-sec summary::-webkit-details-marker{display:none}
.ip-num{display:inline-flex;align-items:center;gap:7px;color:var(--red);font-weight:900}
.ip-num::before{content:"";display:inline-block;width:3px;height:.85em;
background:var(--red);transform:skewX(-18deg)}
.ip-sec summary::after{content:"+";margin-left:auto;font-weight:800;color:var(--inkmute)}
.ip-sec[open] summary::after{content:"\2212"}
.ip-prose{padding:2px 0 14px}
.ip-prose p{margin:0 0 11px;max-width:62ch;font-family:"Spectral",serif;font-weight:300;
font-size:1.02rem;line-height:1.6}
.ip-prose p:last-child{margin-bottom:0}
.ip-link{color:var(--red);text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px;font-family:"Archivo",sans-serif;font-size:.82rem;font-weight:800}
/* --paperstock is the dark stock in dark mode, so the link vanished into
the background. It needs the ink colour, which inverts to light. */
html:not([data-theme="light"]) .ip-link{color:var(--inkstock);
text-decoration-color:var(--inkstock)}
/* definition rows */
.ip-list{list-style:none;margin:0;padding:0 0 12px}
.ip-row{border-bottom:1px dotted var(--inkstock)}
.ip-row:last-child{border-bottom:none}
.ip-row > a,.ip-row > .ip-cells{display:grid;grid-template-columns:minmax(130px,1fr) 2fr;
gap:6px 20px;align-items:baseline;padding:9px 0;text-decoration:none;color:var(--inkstock)}
.ip-k{font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;color:var(--inkmute)}
.ip-v{font-family:"Spectral",serif;font-weight:400;font-size:1.02rem}
.ip-row > a:hover .ip-v{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ip-people .ip-k{font-family:"Spectral",serif;font-size:1.05rem;font-weight:400;
letter-spacing:0;text-transform:none;color:var(--inkstock)}
.ip-people .ip-v{font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;color:var(--inkmute)}
/* archive issue list */
.ip-issue{border-bottom:1px dashed var(--inkstock)}
.ip-issue summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
padding:11px 0;font-family:"Archivo",sans-serif;font-size:.78rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase}
.ip-issue summary::-webkit-details-marker{display:none}
.ip-issue summary::after{content:"+";margin-left:auto;color:var(--inkmute)}
.ip-issue[open] summary::after{content:"\2212"}
.ip-when{color:var(--inkmute);font-weight:700}
.ip-stories{list-style:none;margin:0;padding:0 0 12px}
.ip-stories li a{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:4px 0;
text-decoration:none;color:var(--inkstock)}
.ip-st-name{font-family:"Spectral",serif;font-size:1rem}
.ip-stories li a:hover .ip-st-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ip-st-tail{font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--inkmute)}
/* ======================= STORY ======================= */
.sp{padding-top:clamp(16px,2.2vw,26px)}
.sp-kick{font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:900;
letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:8px;
justify-content:center}
.sp-kick::before{content:"";display:inline-block;width:3px;height:.85em;
background:var(--red);transform:skewX(-18deg)}
.sp-title{margin:8px auto 0;font-family:"Archivo",sans-serif;font-weight:900;font-stretch:118%;
letter-spacing:-.035em;line-height:.92;font-size:clamp(1.9rem,5vw,3.6rem);max-width:22ch;
text-align:center}
.sp-deck{margin:12px auto 0;font-family:"Spectral",serif;font-weight:300;font-size:1.12rem;
line-height:1.55;max-width:56ch;text-align:center}
.sp-meta{display:flex;gap:0;flex-wrap:wrap;margin:14px 0 0;justify-content:center;
font-family:"Archivo",sans-serif;font-size:.68rem;font-weight:800;
letter-spacing:.18em;text-transform:uppercase}
.sp-meta span{padding:0 11px;border-left:1px solid var(--inkstock);line-height:1.6}
.sp-meta span:first-child{padding-left:0;border-left:none}
.sp-plate{position:relative;z-index:1;display:block;margin-top:clamp(14px,2vw,22px);
aspect-ratio:16/9;background-size:cover;background-position:center;border:none}
.sp-body{max-width:66ch;margin:clamp(18px,2.4vw,28px) auto 0;
font-family:"Spectral",serif;font-weight:300;font-size:1.08rem;line-height:1.68}
.sp-body p{margin:0 0 1.05em}
.sp-body h2{font-family:"Archivo",sans-serif;font-weight:900;letter-spacing:-.02em;
font-size:1.35rem;margin:1.6em 0 .5em;text-transform:none}
.sp-body blockquote{margin:1.4em 0;padding-left:16px;border-left:3px solid var(--red);
font-size:1.2rem;line-height:1.45;font-weight:400}
.sp-drop{float:left;font-family:"Archivo",sans-serif;font-weight:900;font-size:3.1em;
line-height:.78;padding:.04em .1em 0 0;color:var(--red)}
.sp-author{max-width:66ch;margin:clamp(18px,2.4vw,26px) auto 0;
display:grid;grid-template-columns:82px 1fr;gap:16px;align-items:start;
border-top:1px dashed var(--inkstock);padding-top:14px}
.sp-shot{position:relative;z-index:1;aspect-ratio:1;background-size:cover;background-position:center;
border:none}
.sp-author h4{margin:0 0 5px;font-family:"Archivo",sans-serif;font-weight:900;font-size:1.05rem}
.sp-author h4 a{color:var(--inkstock);text-decoration:none}
.sp-author p{margin:0;font-family:"Spectral",serif;font-weight:300;font-size:.97rem;line-height:1.55}
.sp-lab{font-family:"Archivo",sans-serif;font-size:.62rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--inkmute);display:block;margin-bottom:4px}
@media (max-width:860px){
.af-body{grid-template-columns:1fr}
.af-head{grid-template-columns:1fr}
.af-role{padding-bottom:0}
.sp-author{grid-template-columns:64px 1fr}
}
/* ======================================================================
MOBILE — interior-only rules. Shared nav, footer, dialog and homepage
rules live in n90.css so both files get them.
====================================================================== */
@media (max-width:620px){
.af-head{gap:6px 12px}
.af-cols{gap:20px}
.af-plate{width:min(170px,46%)}
.af-stories a{grid-template-columns:auto 1fr;row-gap:2px;padding:10px 0}
.s-m{grid-column:2;justify-self:start}
.af-record li{grid-template-columns:1fr;gap:2px}
.af-record .v{text-align:left}
.af-name{font-size:clamp(1.8rem,9vw,2.6rem)}
.ip-row > a,.ip-row > .ip-cells{grid-template-columns:1fr;gap:2px;padding:10px 0}
.ip-sec summary,.ip-issue summary{font-size:.68rem;letter-spacing:.1em;gap:9px}
.ip-stories li a{gap:2px 10px}
.ip-st-tail{width:100%}
.ip-title{font-size:clamp(1.8rem,9vw,2.6rem)}
.sp-title{max-width:none;font-size:clamp(1.6rem,7.6vw,2.2rem)}
.sp-deck{font-size:1.02rem}
.sp-meta{font-size:.6rem;letter-spacing:.12em}
.sp-meta span{padding:0 8px}
.sp-body{font-size:1.01rem;line-height:1.62}
.sp-plate{aspect-ratio:4/3}
.sp-author{grid-template-columns:56px 1fr;gap:12px}
}
@media (max-width:400px){
.af-plate{width:min(150px,44%)}
.s-t{font-size:1rem}
}
/* ---- share ------------------------------------------------------------
Byline control plus a ruled block below the story, set as bordered
slugs rather than social buttons. */
.sp-share-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;
color:var(--inkstock);font:inherit;letter-spacing:.18em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:6px;line-height:1.6}
.sp-share-btn:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.sp-share-btn svg{display:block}
.sp-share{max-width:66ch;margin:clamp(18px,2.4vw,26px) auto 0;text-align:center;
border-top:1px solid var(--inkstock);border-bottom:1px solid var(--inkstock);
padding:clamp(14px,2vw,18px) 0}
.sp-share-lab{display:block;font-family:"Archivo",sans-serif;font-size:.64rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--inkmute);margin-bottom:11px}
.sp-share-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.sp-share-row a,.sp-share-row button{font-family:"Archivo",sans-serif;font-size:.66rem;
font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--inkstock);text-decoration:none;background:none;cursor:pointer;
border-width:1px;border-style:solid;border-color:var(--inkstock);
padding:7px 13px 6px;line-height:1}
.sp-share-row a:hover,.sp-share-row button:hover{background-color:var(--inkstock);color:var(--paperstock)}
/* ---- mobile: interior pages centre too ---- */
@media (max-width:620px){
.sp-share{max-width:none}
.sp-share-row{gap:7px}
.sp-share-row a,.sp-share-row button{font-size:.62rem;padding:6px 10px 5px;letter-spacing:.12em}
}
/* structural, previously relying on defaults */
.af-main{min-width:0}
@media (max-width:620px){
.m-panel .m-lights{width:100%}
}
/* ======================================================================
PAGE SHELL — one definition for every route. Scoped to body.n90 so it
outranks any page-specific .wrap rule left over from the old design.
====================================================================== */
body.n90 .wrap.nn{
max-width:1180px;margin:0 auto;
background-color:var(--paperstock);
padding-top:0;
padding-left:var(--gut);padding-right:var(--gut);
padding-bottom:clamp(10px,1.2vw,16px)}
@media (max-width:620px){
body.n90 .wrap.nn{padding-left:var(--gut);padding-right:var(--gut)}
}
/* ======================================================================
SHELL EDGES — there are none, on any route. The sheet and the area
around it are the same stock, so the page carries no boundary at all:
no side rules, no tonal step. Nothing here should reintroduce one.
====================================================================== */
body.n90{background-color:var(--paperstock)}
body.n90 .wrap.nn{
min-height:100vh;
display:flex;flex-direction:column;
box-shadow:none;
border:none}
body.n90 .n-body{flex:1 0 auto}
body.n90 .n-endrule,body.n90 .n-foot{flex:none}
/* ---- mobile bar: the wordmark centres on the page, not between zones -- */
@media (max-width:620px){
.m-bar{grid-template-columns:1fr auto 1fr}
.m-menu{justify-self:start}
.m-mark{justify-self:center;font-size:1.12rem;font-weight:900;letter-spacing:-.035em}
.m-sub{justify-self:end;font-size:.55rem;letter-spacing:.1em;padding:4px 7px 3px}
}
/* ---- the shell reaches the bottom of the page --------------------------
No trailing paper below the footer, and the side rules stop exactly at
the page edge rather than floating short of it. */
html,body.n90{height:auto}
body.n90{min-height:100vh;display:flex;flex-direction:column;padding-bottom:0;margin:0}
body.n90 > main{flex:1 0 auto;display:flex;flex-direction:column;min-height:0}
body.n90 .wrap.nn{flex:1 0 auto;padding-bottom:0}
body.n90 .n-foot{padding-bottom:clamp(10px,1.4vw,16px)}
/* ======================================================================
EDITOR CARDS — what the Ghost editor can insert into a story.
====================================================================== */
/* ---- section breaks ----------------------------------------------------
Default (the Divider card, or typing ---) is a short centred rule.
Add class="slash" via an HTML card for the branded // break. */
.sp-body hr{border:none;height:0;margin:clamp(26px,3.4vw,40px) auto;
width:96px;border-top-width:3px;border-top-style:solid;border-top-color:var(--inkstock)}
.sp-body hr.slash{width:auto;height:auto;border-top:none;
margin:clamp(30px,3.8vw,46px) 0;text-align:center;overflow:visible}
.sp-body hr.slash::after{content:"//";display:block;
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:900;
font-size:1.5rem;letter-spacing:-.06em;line-height:1;color:var(--red);
transform:skewX(-18deg)}
/* Divider inside a Koenig wrapper behaves the same */
.sp-body .kg-card hr{margin-top:0;margin-bottom:0}
/* Images and figures */
.sp-body img{display:block;max-width:100%;height:auto;border:none}
.sp-body figure{margin:clamp(20px,2.6vw,30px) 0}
.sp-body figcaption{font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;color:var(--inkmute);
padding-top:8px;text-align:left}
/* Wide and full-width cards break the measure the body is held to */
.sp-body .kg-width-wide{width:min(100%,900px);max-width:none;
margin-left:50%;transform:translateX(-50%)}
.sp-body .kg-width-full{width:calc(100vw - (2 * var(--gut)));max-width:1180px;
margin-left:50%;transform:translateX(-50%)}
/* Bookmark, embed, gallery and button cards */
.sp-body .kg-card{margin:clamp(20px,2.6vw,30px) 0}
.sp-body .kg-bookmark-container{display:block;text-decoration:none;color:var(--inkstock);
border-width:1px;border-style:solid;border-color:var(--inkstock);padding:14px 16px}
.sp-body .kg-bookmark-title{font-family:"Archivo",sans-serif;font-weight:800;font-size:1rem}
.sp-body .kg-bookmark-description{font-family:"Spectral",serif;font-weight:300;
font-size:.95rem;color:var(--inkmute);padding-top:4px}
.sp-body .kg-bookmark-thumbnail img{border:none}
.sp-body .kg-button-card a{display:inline-block;font-family:"Archivo",sans-serif;
font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:#fff;background-color:var(--red);text-decoration:none;padding:11px 20px}
/* Lists and inline marks inside a story */
.sp-body ul,.sp-body ol{padding-left:1.2em;margin:0 0 1.05em}
.sp-body li{margin-bottom:.4em}
.sp-body a{color:var(--inkstock);text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px}
.sp-body a:hover{text-decoration-thickness:2px;text-decoration-color:var(--red)}
.sp-body strong{font-weight:600}
.sp-body mark{background-color:var(--red);color:#fff;padding:0 .18em}
/* Members: the public preview divider Ghost inserts above gated content */
.sp-body .gh-post-upgrade-cta{border-width:1px;border-style:solid;
border-color:var(--inkstock);padding:clamp(18px,2.4vw,26px);text-align:center;
margin:clamp(24px,3vw,34px) 0}
/* ======================================================================
COLUMNS — flush tops, one plate ratio across all three.
====================================================================== */
.n-col{padding-top:0}
.n-art,.n1 .n-art,.n2 .n-art,.n3 .n-art{aspect-ratio:4/3}
.n-title,.n1 .n-title,.n2 .n-title,.n3 .n-title{font-size:clamp(1.05rem,1.6vw,1.35rem)}
.n-deck,.n1 .n-deck,.n2 .n-deck,.n3 .n-deck{max-width:none}
@media (min-width:861px){
.n-col.n1,.n-col.n2,.n-col.n3{padding-top:0}
.n-col.n1 .n-art,.n-col.n2 .n-art,.n-col.n3 .n-art{aspect-ratio:4/3}
.n-col.n1 .n-title,.n-col.n2 .n-title,.n-col.n3 .n-title{font-size:clamp(1.05rem,1.6vw,1.35rem)}
.n-col.n1 .n-deck,.n-col.n3 .n-deck{max-width:none}
}
/* ======================================================================
OPINION VOTE — no plate; the argument and a reader vote instead.
====================================================================== */
.op-col .n-title{font-size:clamp(1.25rem,2.1vw,1.75rem);margin-bottom:10px}
.op-col .n-deck{font-size:1.02rem;margin-bottom:12px}
.op-col .n-meta{margin-top:0}
.op-q{font-family:"Archivo",sans-serif;font-size:.64rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--inkmute);margin:0 0 12px}
/* the vote sits at the foot of the column so its rule lines up with the
bottom of the neighbouring stories */
/* hidden until main.js confirms a vote endpoint is configured, so a blank
setting leaves no empty block behind */
.op-vote{display:none}
.op-vote.is-on{display:block;
border-top-width:1px;border-top-style:solid;border-top-color:var(--inkstock);
padding-top:14px;margin-top:auto}
.op-scale{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.op-end{background:none;border:none;padding:4px 0;cursor:pointer;
font-family:"Archivo",sans-serif;font-size:.74rem;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;color:var(--inkstock);line-height:1;
white-space:nowrap}
.op-end:hover{color:var(--red)}
.op-end-r{text-align:right}
.op-vote[data-voted] .op-end{cursor:default}
.op-vote[data-voted] .op-end:not(.picked){color:var(--inkmute)}
.op-vote[data-voted] .op-end.picked{color:var(--red)}
.op-bar{position:relative;display:block;height:10px;background-color:rgba(0,0,0,.14)}
html:not([data-theme="light"]) .op-bar{background-color:rgba(237,231,218,.18)}
.op-fill{position:absolute;inset:0 auto 0 0;width:0;background-color:var(--red);
transition:width .6s ease .15s}
.op-vote[data-voted] .op-fill{width:var(--pct,50%)}
.op-you{position:absolute;top:-5px;bottom:-5px;left:var(--you,50%);width:2px;
background-color:var(--inkstock);opacity:0;transform:translateX(-1px);
transition:opacity .3s ease .5s,left .6s ease .15s}
.op-vote[data-voted] .op-you{opacity:1}
.op-res{margin:11px 0 0;font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--inkmute);
min-height:1em;opacity:0;transition:opacity .3s ease .5s}
.op-vote[data-voted] .op-res{opacity:1}
/* dark mode: the stamp reads white.
--paperstock is the DARK stock in dark mode, so the light colour here is
--inkstock, which inverts to #EDE7DA. Using paperstock made it invisible. */
html:not([data-theme="light"]) .n-stamp{color:var(--inkstock);
border-top-color:var(--inkstock);border-right-color:var(--inkstock);
border-bottom-color:var(--inkstock);border-left-color:var(--inkstock)}
html:not([data-theme="light"]) .n-stamp::after{opacity:.5;
border-top-color:var(--inkstock);border-right-color:var(--inkstock);
border-bottom-color:var(--inkstock);border-left-color:var(--inkstock)}
/* ======================================================================
FOCUS — the browser default is a blue ring that also fires on mouse
clicks. Keyboard users still get a visible ring, in the house colours.
====================================================================== */
:focus{outline:none}
:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--red);
outline-offset:2px}
body.n90 a:focus-visible,
body.n90 button:focus-visible,
body.n90 summary:focus-visible,
body.n90 input:focus-visible{outline-width:2px;outline-style:solid;
outline-color:var(--red);outline-offset:2px;border-radius:0}
/* the email field already signals focus with its rule, so no double ring */
body.n90 .sub-form input:focus-visible{outline:none}
/* interior nav has no tagline, so the strip is two zones not three */
.n-nav .n-eyebrow{grid-template-columns:1fr auto}
/* no tagline anywhere: the masthead strip is two zones like the interior nav */
.n-masthead .n-eyebrow{grid-template-columns:1fr auto}
/* ======================================================================
SHELL WIDTH — the real fix.
main was a flex container, which made .wrap.nn a flex item. A flex item
with margin:0 auto does not stretch: it shrinks to fit its content and
centres. So every page sized its shell to whatever it contained and
max-width:1180px never applied. main goes back to block layout and the
shell is told explicitly to fill it.
====================================================================== */
body.n90 > main{display:block;flex:1 0 auto;min-height:0}
body.n90 .wrap.nn{width:100%;max-width:1180px;margin-left:auto;margin-right:auto}
/* About and Privacy share the author page's row geometry */
@media (min-width:861px){
.ip-row > a,.ip-row > .ip-cells{grid-template-columns:minmax(220px,300px) 1fr}
.ip-prose p{max-width:76ch}
}
/* ======================================================================
CONTAINER WIDTH
The author page measured 894 CSS px when it was sizing to its content,
and that is the width to keep. Interior pages use 900px. The homepage
stays wider because it carries the oversized wordmark and three columns.
====================================================================== */
body.n90 .wrap.nn{max-width:900px}
body.n90.home-template .wrap.nn{max-width:1180px}
/* ======================================================================
INTERIOR WIDTH, second pass.
At 900px the author page gave the story title only ~233px, so a long
headline broke over three lines. Previously the container grew to fit
the longest title, which is why it never showed. 1040px with a slimmer
portrait rail gives the title ~425px: two lines at worst.
====================================================================== */
body.n90 .wrap.nn{max-width:1040px}
body.n90.home-template .wrap.nn{max-width:1180px}
@media (min-width:861px){
.af-cols{grid-template-columns:minmax(200px,260px) 1fr;gap:clamp(20px,3vw,44px)}
.ip-row > a,.ip-row > .ip-cells{grid-template-columns:minmax(200px,260px) 1fr}
/* the read-time column should never squeeze the headline */
.af-stories a{grid-template-columns:auto minmax(0,1fr) auto}
.s-m{padding-left:10px}
}
/* ======================================================================
MOBILE, second pass
1. The wordmark centres on the bar, not between the burger and
Subscribe. There is ~120px of clearance at 360px wide, so absolute
centring is safe here — unlike the desktop strip, which had none.
2. More air between the stories. The columns were stacking on a 16px
rhythm, which reads as crammed on a phone.
====================================================================== */
@media (max-width:620px){
/* .m-bar is already position:sticky, which establishes the containing
block the absolutely positioned wordmark centres against */
.m-bar{grid-template-columns:auto 1fr auto}
.m-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
justify-self:auto;pointer-events:auto;white-space:nowrap}
.m-menu{position:relative;z-index:2}
.m-sub{position:relative;z-index:2}
/* --- breathing room between stories --- */
.n-grid{padding-top:26px}
.n-col{padding-top:30px;margin-top:30px}
.n-col:first-child{padding-top:0;margin-top:0}
.n-kick{font-size:.64rem;letter-spacing:.16em}
.n-rule2{margin:9px 0 18px}
.n-art,.n2 .n-art,.n3 .n-art{aspect-ratio:4/3;margin-bottom:18px}
.n-title{font-size:1.18rem;line-height:1.12;margin-bottom:12px}
.n-deck{font-size:1rem;line-height:1.62;margin-bottom:14px}
.n-meta{font-size:.64rem;letter-spacing:.12em;padding-top:2px}
/* the lead gets the same treatment */
.n-lead{padding:18px 0 20px;gap:18px}
.n-lead-copy h2{margin-bottom:14px}
.n-lead-deck{line-height:1.62;margin-bottom:16px}
/* and the issue band stops hugging the columns */
.n-band{margin-bottom:4px}
}
/* ======================================================================
MOBILE BAR — burger left, wordmark right. Subscribe moved into the menu,
so the bar carries two items and the wordmark holds the right edge.
No centring needed, so the absolute positioning is dropped.
====================================================================== */
@media (max-width:620px){
.m-bar{grid-template-columns:auto 1fr;gap:12px}
.m-mark{position:static;transform:none;justify-self:start;
left:auto;top:auto;white-space:nowrap}
.m-sub{display:none}
/* Subscribe reads as the action in the menu */
.m-panel a[data-sub-open]{color:var(--red)}
}
/* ======================================================================
BEEHIIV EMBED
The loader injects its own form (an iframe in the v3 embed), so the
theme cannot style what is inside it. What the theme controls is the
slot: width, spacing and a reserved height so the dialog does not jump
while the script loads.
====================================================================== */
.sub-embed{margin:0;min-height:86px}
.sub-embed iframe{display:block;width:100% !important;max-width:100% !important;border:0}
/* the loader sometimes wraps the iframe in a div of its own */
.sub-embed > div{width:100% !important;max-width:100% !important;margin:0 !important}
@media (max-width:620px){
.sub-embed{min-height:104px}
}
/* ======================================================================
AGREED CHANGES
====================================================================== */
/* 1. Container: 1280 everywhere except About and Privacy, which stay 1040 */
body.n90 .wrap.nn{max-width:1280px}
body.n90.page-about .wrap.nn,
body.n90.page-privacy .wrap.nn{max-width:1040px}
/* 2. Dashed rule above the author card, matching the author page rows */
.sp-author{border-top-style:dashed}
/* 4. Story feature image holds 952px, the width it is today */
.sp-plate{max-width:952px;margin-left:auto;margin-right:auto}
/* 5. Mobile wordmark: upright, centred, underlined */
@media (max-width:620px){
.m-bar{grid-template-columns:1fr auto 1fr}
.m-menu{justify-self:start}
.m-mark{justify-self:center;
border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:var(--inkstock);
padding-bottom:3px}
/* the slash was skewed, which made the whole wordmark read as tilted */
.m-mark i{transform:none;width:.12em;margin:0 .1em -.02em}
}
/* the homepage joins the rest at 1280; an earlier 1180 rule outranks the
default because it carries an extra body class, so it is set explicitly */
body.n90.home-template .wrap.nn{max-width:1280px}
/* ======================================================================
ARCHIVE joins About and Privacy at 1040
====================================================================== */
body.n90.page-archive .wrap.nn{max-width:1040px}
/* ======================================================================
SLASH SPACING
The bar sat on equal margins, but the skew leans its top toward INDEX
and its bottom toward THE, so equal spacing does not read as equal.
Weighting the gap to the left pulls the slash closer to the I.
====================================================================== */
.wordmark .cut{margin:0 .015em .05em .085em}
.sub-mark i{margin:0 .02em -.02em .1em}
@media (max-width:620px){
.m-mark i{margin:0 .02em -.02em .12em}
}
/* ======================================================================
STORY COPY — two steps up, and set solid rather than light.
Spectral 300 is a light cut, which read grey on the warm stock; the
weight is what makes it look darker, not the colour, which was already
full ink. The measure widens with the type so line length stays right.
====================================================================== */
.sp-body{font-size:1.24rem;line-height:1.62;font-weight:400;max-width:72ch}
.sp-deck{font-size:1.26rem;font-weight:400}
.sp-body p{margin:0 0 1em}
.sp-body blockquote{font-size:1.36rem}
.sp-share,.sp-author{max-width:72ch}
@media (max-width:620px){
.sp-body{font-size:1.14rem;line-height:1.6;max-width:none}
.sp-deck{font-size:1.12rem}
}
/* the mobile wordmark keeps the house slant; centred and underlined as set */
@media (max-width:620px){
.m-mark i{transform:skewX(-16deg);width:.12em;margin:0 .02em -.02em .12em}
}
/* homepage wordmark: 24 degree slant, margins left exactly as they were */
.wordmark .cut{transform:skewX(-24deg)}
/* ======================================================================
LEAD BADGE — the section name, straight, filled.
Light: red fill, white type. Dark: white fill, black type.
====================================================================== */
.n-stamp{transform:none;background-color:var(--red);color:#FFFFFF;
border-width:0;padding:8px 14px 7px;letter-spacing:.22em}
.n-stamp::after{content:none;display:none}
html:not([data-theme="light"]) .n-stamp{background-color:var(--inkstock);color:var(--paperstock);
border-width:0}
html:not([data-theme="light"]) .n-stamp::after{content:none;display:none}
/* ======================================================================
OPINION COLUMN — no image, so the type carries the column.
Larger headline and deck fill the space the plate would have taken.
====================================================================== */
@media (min-width:861px){
/* headline leads the column; deck one step down from it */
.op-col .n-title{font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.02;
letter-spacing:-.032em;margin-bottom:16px}
.op-col .n-deck{font-size:1.16rem;line-height:1.55;margin-bottom:16px}
.op-col .n-meta{font-size:.7rem}
.op-q{font-size:.68rem}
}
@media (max-width:860px){
.op-col .n-title{font-size:clamp(1.3rem,4.45vw,1.85rem);line-height:1.04}
.op-col .n-deck{font-size:1.08rem}
}
/* ======================================================================
OPINION HEADLINE — specificity fix.
The flush-columns rule is .n-col.n2 .n-title at (0,3,0), which was
beating .op-col .n-title at (0,2,0). Scoping to .n-col.op-col makes
this (0,3,0) as well, and it comes later, so it wins.
====================================================================== */
@media (min-width:861px){
.n-col.op-col .n-title{font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.02;
letter-spacing:-.032em;margin-bottom:16px}
.n-col.op-col .n-deck{font-size:1.16rem;line-height:1.55;margin-bottom:16px}
}
@media (max-width:860px){
.n-col.op-col .n-title{font-size:clamp(1.3rem,4.45vw,1.85rem);line-height:1.04}
.n-col.op-col .n-deck{font-size:1.08rem}
}
/* ======================================================================
COLUMN TYPE, second pass
Technology and Culture come up a step; their decks were the weakest
thing in the row at .95rem. Opinion's deck comes down a step so the
byline is not sitting hard against the vote's dashed rule.
Scoped to .n-col.nX so they beat the flush-columns rule at (0,3,0).
====================================================================== */
@media (min-width:861px){
.n-col.n1 .n-title,.n-col.n3 .n-title{font-size:clamp(1.2rem,1.85vw,1.55rem);
line-height:1.08;margin-bottom:10px}
.n-col.n1 .n-deck,.n-col.n3 .n-deck{font-size:1.08rem;line-height:1.55}
.n-col.n1 .n-meta,.n-col.n3 .n-meta{font-size:.7rem}
/* Opinion deck down one step, and more room above the vote rule */
.n-col.op-col .n-deck{font-size:1.08rem;margin-bottom:18px}
.n-col.op-col .n-meta{margin-bottom:6px}
}
@media (max-width:860px){
.n-col.n1 .n-title,.n-col.n3 .n-title{font-size:1.24rem}
.n-col.n1 .n-deck,.n-col.n3 .n-deck{font-size:1.04rem}
.n-col.op-col .n-deck{font-size:1.02rem}
}
/* ======================================================================
LEAD BAND — option D
Copy column widened to 1.3fr and the headline stepped down one size,
so the feature headline breaks across more words per line.
====================================================================== */
@media (min-width:861px){
.n-lead{grid-template-columns:1.1fr .9fr}
.n-lead-copy h2{font-size:clamp(2.15rem,4.5vw,3.65rem)}
}
/* ======================================================================
COLUMN DECKS — hold to two lines.
Handlebars has no way to split on sentences, so the deck is clamped
visually. A custom excerpt written as one sentence in Ghost will fit
inside this and never be cut.
====================================================================== */
.n-col .n-deck{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden}
@media (max-width:860px){
.n-col .n-deck{-webkit-line-clamp:3}
}
/* ======================================================================
HOMEPAGE CONTAINER — wider, so the lead copy column has more room.
Interior pages stay 1280; About, Privacy and Archive stay 1040.
====================================================================== */
body.n90.home-template .wrap.nn{max-width:1360px}
/* ======================================================================
LEAD HEADLINE — one step down.
At the 1360 shell the previous 3.4rem cap sat too close to the
wordmark above it. The deck is unchanged.
====================================================================== */
@media (min-width:861px){
.n-lead-copy h2{font-size:clamp(2.05rem,4vw,3.3rem)}
}
/* ======================================================================
OPINION HEADLINE — down to 2.05rem.
Sized against the box it now sits in rather than against the empty space
an image would have filled. The lead is 3.3rem and the other two columns
are 1.35rem, so Opinion reads as the middle step of three.
====================================================================== */
@media (min-width:861px){
.n-col.op-col .n-title{font-size:clamp(1.4rem,2.45vw,2.05rem)}
}
/* ======================================================================
PAGE END — coming soon, and more room before the footer
====================================================================== */
.home-template .n-endrule{margin-top:clamp(26px,3.4vw,48px)}
@media (max-width:620px){
}
/* ======================================================================
HOMEPAGE SPACING, final pass
The story rows sat close under the black issue strip, and the gap
between the closer and the footer ran long. Space moved from the
bottom of the page to the top of the grid.
====================================================================== */
@media (min-width:861px){
.home-template .n-grid{padding-top:clamp(38px,4.6vw,62px)}
.home-template .n-endrule{margin-top:clamp(16px,2vw,26px)}
}
@media (max-width:860px){
.home-template .n-grid{padding-top:34px}
.home-template .n-endrule{margin-top:16px}
}
/* ======================================================================
HOMEPAGE RHYTHM
The lead and the grid contribute nothing here; the strip's own margin
carries the space on both sides, so it sits on the centre line between
them. That margin is --band-gap, the single token set with .n-lead.
====================================================================== */
@media (min-width:861px){
.home-template .n-lead{padding-bottom:0}
.home-template .n-band{margin:var(--band-gap) 0}
.home-template .n-grid{padding-top:0}
}
@media (max-width:860px){
.home-template .n-lead{padding-bottom:0}
.home-template .n-band{margin:var(--band-gap) 0}
.home-template .n-grid{padding-top:0}
}
/* ======================================================================
MOBILE BAR — the wordmark returns to the menu icon's side
Three things have to line up for this to read as even. The summary box
was 26px wide around 20px of burger ink, so six dead pixels sat between
the icon and whatever followed it; it is trimmed to the ink and the tap
target is put back with a pseudo-element, which costs no layout. The
grid drops to two columns so the mark starts immediately after the gap
rather than being centred in a spare one. And the mark is set with
line-height:1 and centred on the same row as the icon, so the caps sit
on the burger's middle bar rather than floating above or below it.
No underline, and a step up in size now that it has the room.
====================================================================== */
@media (max-width:620px){
.m-bar{grid-template-columns:auto 1fr;gap:13px;align-items:center}
.m-menu{justify-self:start}
.m-menu summary{position:relative;width:20px;height:26px}
/* the tap target the trimmed box gave up, restored without taking space */
.m-menu summary::before{content:"";position:absolute;
top:-9px;right:-11px;bottom:-9px;left:-11px}
.m-mark{justify-self:start;font-size:1.3rem;line-height:1;
border-bottom:none;padding-bottom:0;
/* line-height:1 leaves more room under the baseline than above the
caps, so a box-centred mark reads 1.5px high against the icon.
The nudge is on the ink, not the box. */
transform:translateY(1px)}
}
/* ======================================================================
FURNITURE OUT OF THE COLUMN
The strip, the wordmark block and the footer now sit outside .wrap.nn,
so each is the full width of the window. Rules that touch the window
edges are direct children of a bar; the contents sit in .n-in, which
carries the gutter and nothing else.
====================================================================== */
.n-in{max-width:1360px;margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}
.n-nav,.n-mast,.n-footshell{background-color:var(--paperstock)}
/* the column no longer holds the furniture, so full height moves up to
the body, which is already a flex column */
body.n90 .wrap.nn{min-height:0;flex:0 1 auto;padding-bottom:0}
body.n90 > main{flex:1 0 auto}
body.n90 .n-body{flex:none}
body.n90:not(.home-template) .wrap.nn{padding-top:clamp(14px,2vw,22px)}
/* .m-bar used to be inside the padded column and pulled itself back out
with a negative margin. It is a child of body now, so that pull would
drag it off screen. */
.m-bar{margin:0}
/* ---- strip: hairline at rest, heavier only once it is pinned ----------
The extra weight is a shadow, not a thicker border. A sticky element
still occupies its space in flow, so growing the border 1px to 3px
would jog the whole page down 2px on every scroll past the top. */
.n-sentinel{height:1px;margin-bottom:-1px}
.n-nav{position:sticky;top:0;z-index:60;padding-top:0;
border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--inkstock);
box-shadow:0 0 0 0 var(--inkstock);transition:box-shadow .12s linear}
.n-nav.is-stuck{box-shadow:0 2px 0 0 var(--inkstock)}
.n-nav .n-eyebrow{border-bottom:none;padding:9px 0}
/* ---- wordmark: 1.25x, closing on a hairline --------------------------- */
.n-wordmark{padding:clamp(10px,1.6vw,18px) 0 clamp(9px,1.3vw,15px);
font-size:clamp(3.5rem,15vw,11.25rem)}
/* The wordmark closes on a double, matching the page titles on About,
Privacy, Archive and the author page. The footer and the nav strip both
close on a hairline: they are furniture rather than titles. */
.n-doublerule{height:9px;
border-top-width:3px;border-top-style:solid;border-top-color:var(--inkstock);
border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--inkstock)}
.n-endrule{height:0;border-top:none;
border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--inkstock)}
.n-endrule{margin-top:clamp(14px,1.8vw,24px)}
.home-template .n-endrule{margin-top:clamp(26px,3.4vw,48px)}
.n-foot{padding:11px 0 clamp(12px,1.6vw,18px)}
body.n90 .n-foot{padding-bottom:clamp(12px,1.6vw,18px)}
@media (max-width:620px){
.n-mast{display:none}
.m-bar{padding-left:var(--gut);padding-right:var(--gut)}
}
/* ======================================================================
SUBSCRIBE DIALOG
Flat sheet on a scrim, hairline head, wordmark leading, site deck under
it. The black rule, the two double rules, the grain and the offset
shadow all go, matching the pages.
====================================================================== */
.sub-backdrop{background:rgba(0,0,0,.72)}
.sub-card{width:min(520px,100%);border:none;
box-shadow:0 26px 64px rgba(0,0,0,.42);
padding:clamp(22px,3vw,30px) clamp(24px,3.4vw,36px) clamp(20px,2.6vw,26px)}
.sub-eb{padding:0 0 10px;font-size:.66rem;letter-spacing:.22em;
border-bottom:1px solid var(--inkstock)}
.sub-eb > span{line-height:1}
/* .sub-x was still position:absolute from the pre-print stylesheet, so the
close control was never in the eyebrow row: it floated at top:10px and
only happened to land near it. */
.sub-x{position:static;line-height:1}
/* .wordmark .cut paints from --accent, which is the blue. The masthead
overrides it through .n-wordmark; the card needs the same. */
.sub-card .cut{background-color:var(--red)}
.sub-card .sub-mark{margin:clamp(20px,2.6vw,26px) 0 clamp(13px,1.7vw,17px);
font-size:clamp(2rem,5.4vw,2.85rem)}
/* The font lock near the top of this file sets Archivo on h1-h4 with
!important, to beat the variables Ghost injects after this sheet. No
specificity outranks that, so the deck is a p, which the lock does not
name, and the dialog takes an aria-label for its accessible name. */
.sub-deck{margin:0 0 clamp(16px,2vw,20px);
font-family:"Spectral",Palatino,"Times New Roman",serif;font-weight:300;
font-size:clamp(1.02rem,1.7vw,1.12rem);line-height:1.62;letter-spacing:.002em;
color:var(--inkstock);max-width:42ch}
.sub-endrule{height:0;border-top:none;
border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--inkstock);
margin-top:clamp(15px,2vw,19px)}
.sub-skip{margin-top:clamp(11px,1.4vw,13px);font-size:.64rem}
/* ======================================================================
ABOUT / PRIVACY — full scale
The nav and footer now run the full width of the window, which left the
section content looking undersized against them. Every step in the
page's own scale moves up together so the relationships hold: section
headers, key labels, values and prose.
====================================================================== */
.ip-sec summary{font-size:1.02rem;letter-spacing:.08em;padding:14px 0}
.ip-k{font-size:.88rem;letter-spacing:.1em}
.ip-v{font-size:1.18rem}
.ip-prose p{font-size:1.14rem;line-height:1.66}
.ip-people .ip-k{font-size:1.14rem}
.ip-people .ip-v{font-size:.78rem}
.ip-link{font-size:.95rem}
/* ======================================================================
PAGE-TITLE RULES — thinned to match the nav and footer
The rules under the About and author page titles were 3px-over-1px and
2px-over-1px doubles, set when the furniture around them was heavy.
With the nav, the masthead and the footer all closing on a hairline,
The double is a deliberate device rather than an oversight, and it is
kept everywhere it was: .ip-rule under the About, Privacy and Archive
titles, .af-rule on the author page, and .n-rule2 under the homepage
column kickers. The hairline is for the page furniture — nav, wordmark,
footer — which is what needed to get quieter.
====================================================================== */
/* ======================================================================
ABOUT / PRIVACY — dividers
Two devices were stacking: a dashed line under every section and a
dotted one under every row. In the Masthead that meant four rules for
three names. The per-row lines go; the rows are short, paired and
aligned on a strong column edge, so they read as a list without them.
====================================================================== */
.ip-row{border-bottom:none}
.ip-row > a,.ip-row > .ip-cells{padding:7px 0}
/* ======================================================================
MASTHEAD HOVER
On a people row .ip-k is the person's name and .ip-v is their role, the
reverse of every other row on the page. The inherited hover therefore
underlined the role rather than the name. It now takes the name, in the
accent, and the role is left alone.
====================================================================== */
.ip-row > a:hover .ip-v{text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px;text-decoration-color:var(--red)}
.ip-people .ip-row > a:hover .ip-v{text-decoration:none}
.ip-people .ip-row > a:hover .ip-k{text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px;text-decoration-color:var(--red)}
/* ======================================================================
CLOSER — tightened
The gap under the columns and the gap before the footer were both set
when the page had a heavier frame. The closer now sits nearer the
stories it follows, and nearer the rule that ends the page.
====================================================================== */
/* The closer used to sit between the story row and the footer, so this
margin only had to clear it. With the closer gone it is the whole gap
from the boxes to the footer rule and needs to carry that on its own. */
.home-template .n-endrule{margin-top:clamp(28px,3.4vw,52px)}
/* ======================================================================
ARCHIVE — brought onto the same scale as About and Privacy
The archive uses .ip-issue for its disclosure rows and .ip-stories for
the titles inside them, so the earlier pass over .ip-sec and .ip-row
never reached it. Issue headers match the section headers, story titles
match the values, and the tails match the people roles.
====================================================================== */
.ip-issue summary{font-size:1.02rem;letter-spacing:.08em;padding:14px 0}
.ip-st-name{font-size:1.18rem}
.ip-st-tail{font-size:.78rem}
.ip-stories li a{padding:6px 0}
.ip-stories{padding:0 0 14px}
/* On a phone the summaries dropped to .68rem, which is now a cliff away
from the desktop size. They move up together. */
@media (max-width:620px){
.ip-sec summary,.ip-issue summary{font-size:.86rem;letter-spacing:.08em;gap:9px}
.ip-st-name{font-size:1.06rem}
.ip-st-tail{font-size:.72rem}
}
/* ======================================================================
STACKED COLUMNS — a box per story
Once the three columns stack, a dashed rule between them was doing the
same job as the double rule under each kicker, and the two together
read as a run of lines rather than as three separate stories. Each
story now sits in its own box, which states the boundary once.
This overrides the separator set in four earlier blocks (860, 620 twice
and the later mobile pass), so it is written last and repeats the
:first-child reset those blocks each carry.
====================================================================== */
@media (max-width:860px){
.n-grid{grid-template-columns:1fr;gap:clamp(12px,3.2vw,18px)}
.n-col,
.n-col:first-child,
.n-col:last-child{
border:1px solid var(--inkstock);
padding:clamp(14px,3.6vw,20px);
margin-top:0}
/* the kicker rule stays: inside the box it separates the section label
from the story, which is a different job from separating stories */
.n-col .n-rule2{margin-top:6px}
}
/* ======================================================================
LEAD — headline up a quarter step, deck nudged with it
The cap moves 3.05rem -> 3.3rem and the fluid term moves with it, so the
mid-range widths scale rather than hitting the cap early. The headline
now sets on four lines instead of three at every width above 880px;
that is the intended shape, not a wrap failure. The deck follows so the
two do not drift apart into headline-plus-caption.
====================================================================== */
/* ======================================================================
LEAD PROPORTIONS
The image and the copy are grid siblings, so the row takes the taller
of the two and the image stretches to it. After the headline went up a
quarter step the copy became the taller item between roughly 861 and
985px, which meant the text was setting the image's proportions rather
than the other way round. 36vw -> 39vw puts the image back in charge at
every width. Above 1333px the 520px cap is reached and nothing changes.
====================================================================== */
/* ======================================================================
STORY COLUMNS — a box per story on desktop too
Same reasoning as the stacked view: one boundary per story instead of a
divider between them plus a rule inside each. Overrides the dashed
vertical divider and the asymmetric first/last padding from the base
grid rules above.
====================================================================== */
@media (min-width:861px){
/* align-items:start so each box ends where its content ends. Grid items
stretch to the tallest sibling by default, which left the Opinion box
with ~194px of empty paper under the vote: the columns carry an image
and it does not, so their heights genuinely differ. Equal-height boxes
can only hide that gap by moving it somewhere else inside the box. */
.n-grid{gap:clamp(14px,1.5vw,22px);align-items:stretch}
.n-col,
.n-col:first-child,
.n-col:last-child{
border:1px solid var(--inkstock);
padding:clamp(15px,1.4vw,20px)}
/* Opinion has no image so its natural height is shorter than the two
image columns. align-self:start stops it stretching to match them,
which would leave a gap above the vote. The image columns use the
default stretch so they always match each other. */
.n-col.op-col{align-self:start}
}
/* The vote used to be pushed to the foot of the column with margin-top:auto
so it lined up with the bylines either side of it. Inside a box that read
as a hole between the byline and the vote's rule, so it now sits a fixed
step below the byline and the box ends where the content does. */
.op-vote.is-on{margin-top:clamp(16px,1.7vw,22px)}
/* The stacked Opinion headline comes down by the same proportion the
desktop one did (about 11%), so the two breakpoints stay in step now
that the column is boxed in both. */
/* The flush-column specificity block at (0,3,0) sets padding-top:0 and
beats the (0,1,0) desktop box rule. Equalise with a scoped override. */
@media (min-width:861px){
.n-col.n1,.n-col.n2,.n-col.n3{padding:clamp(15px,1.4vw,20px)}
}
/* ======================================================================
NO BORDERS ON IMAGES, ANYWHERE
Every plate and every in-article image sits on the paper unframed:
the lead, the story columns, the story page, the author portrait and
anything placed in the body by the editor. Catch-all so a new image
type cannot arrive with a hairline by inheritance.
====================================================================== */
.n-lead-art,.n-art,.sp-plate,.af-plate,.sp-shot,
.sp-body img,.sp-body figure img,.kg-image,
.article-body img{border:none}
/* ======================================================================
AUTHOR CONTACT ROWS
Website, X and Facebook use the same key/value rows as the rest of the
record. The link hover takes the accent underline the masthead names
use, so a link is identifiable before it is clicked. Long URLs are
allowed to break rather than push the row wider than the rail.
====================================================================== */
.af-record .v a{overflow-wrap:anywhere}
.af-record .v a:hover{text-decoration-thickness:2px;text-decoration-color:var(--red)}
/* ======================================================================
AUTHOR LINKS ON A STORY
Two places carry the writer's name: the byline in .sp-meta at the top,
and the .sp-author card at the foot. The card's name had
text-decoration:none, so at rest it did not read as a link at all.
Both now carry a quiet underline at rest and turn the accent on hover
and on keyboard focus, so the affordance does not depend on the mouse.
====================================================================== */
.sp-meta a,
.sp-author h4 a{
color:var(--inkstock);
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
text-decoration-color:currentColor;
transition:color .12s linear,text-decoration-color .12s linear,
text-decoration-thickness .12s linear}
.sp-meta a:hover,
.sp-meta a:focus-visible,
.sp-author h4 a:hover,
.sp-author h4 a:focus-visible{
color:var(--red);
text-decoration-color:var(--red);
text-decoration-thickness:2px}
/* ======================================================================
ARCHIVE — slash mark before each story
A small skewed rectangle in the accent colour, matching the slash in the
wordmark, sits before each story title as a list marker. It uses the
same skewX(-24deg) as .wordmark .cut. inline-block + vertical-align lets
it sit on the text baseline without disrupting the flex alignment.
====================================================================== */
.ip-stories li a::before{
content:"";
display:inline-block;
flex:none;
width:5px;
height:.82em;
background:var(--red);
transform:skewX(-24deg);
vertical-align:baseline;
position:relative;
top:.04em}
/* ======================================================================
BYLINE ON MOBILE — the share button gets its own line
.sp-meta uses border-left as a divider and flex-wrap to fit. When the
Share item wrapped to a second line it kept its left border, which read
as a divider hanging off the start of the row with nothing before it.
Giving it a full-width basis and dropping the border puts it cleanly on
its own line instead.
====================================================================== */
@media (max-width:620px){
.sp-meta{row-gap:9px}
.sp-meta span:last-child{
flex-basis:100%;
padding-left:0;
border-left:none;
justify-content:center;
display:flex}
}
/* ======================================================================
AUTHOR SOCIAL LINKS
Short labels rather than raw URLs. The separator is generated between
links rather than written into the markup, because each link is emitted
by a partial that renders nothing when that platform is unset — so the
theme cannot know in advance which link is last.
====================================================================== */
.af-links{display:flex;flex-wrap:wrap;align-items:baseline;
gap:0 .1em;justify-content:flex-end}
.af-links a{color:var(--inkstock);text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px;
transition:color .12s linear,text-decoration-color .12s linear}
.af-links a:hover,.af-links a:focus-visible{
color:var(--red);text-decoration-color:var(--red);text-decoration-thickness:2px}
.af-links a + a::before{content:"/";display:inline-block;color:var(--red);
font-weight:800;padding:0 .45em;transform:skewX(-18deg);
text-decoration:none}
/* a row with no links left in it collapses rather than showing an empty key */
.af-social-row:not(:has(a)){display:none}
/* ======================================================================
IMAGES AS ![]()
RATHER THAN BACKGROUNDS
The plates used background-image, which cannot carry srcset — every
reader downloaded the largest file regardless of screen. They are now
real ![]()
elements, so the browser picks a size. object-fit reproduces
what background-size:cover was doing, and the wrappers keep their
aspect ratios so nothing shifts while the image loads.
====================================================================== */
.n-lead-art,.n-art{overflow:hidden}
.n-lead-art img,.n-art img,img.sp-plate,img.sp-shot{
display:block;width:100%;height:100%;object-fit:cover;border:none}
img.sp-plate{aspect-ratio:16/9;margin-top:clamp(14px,2vw,22px)}
img.sp-shot{aspect-ratio:1;width:82px;height:82px}
.n-lead-art{display:block}
.n-lead-art img{min-height:clamp(280px,39vw,520px)}
/* ======================================================================
MEMBER GATE
Ghost injects its own upgrade CTA inside {{content}} on gated posts and
its wording is not editable from a theme, so it is hidden and the block
in post.hbs is shown in its place. Set in the house vocabulary: paper,
a hairline, and the accent reserved for the action itself.
====================================================================== */
.gh-post-upgrade-cta,
.gh-post-upgrade-cta-content{display:none !important}
.sp-gate{max-width:72ch;margin:clamp(26px,3.4vw,44px) auto 0;
border:1px solid var(--inkstock);
padding:clamp(26px,3.4vw,42px) clamp(20px,2.4vw,32px);
text-align:center}
.sp-gate-t{margin:0 0 clamp(16px,1.8vw,22px);
font-family:"Archivo",sans-serif;font-weight:900;font-stretch:112%;
letter-spacing:-.02em;line-height:1.1;
font-size:clamp(1.35rem,2.4vw,1.85rem);color:var(--inkstock)}
.sp-gate-btn{display:inline-block;
font-family:"Archivo",sans-serif;font-size:.78rem;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;
background:var(--red);color:#fff;text-decoration:none;
padding:13px 26px 12px;
transition:background .12s linear}
.sp-gate-btn:hover,.sp-gate-btn:focus-visible{background:var(--inkstock)}
.sp-gate-alt{margin:clamp(14px,1.6vw,18px) 0 0;
font-family:"Spectral",serif;font-size:.98rem;font-weight:300;
color:var(--inkmute)}
.sp-gate-alt a{color:var(--inkstock);text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px}
.sp-gate-alt a:hover{color:var(--red);text-decoration-color:var(--red)}
/* second paragraph in the subscribe dialog sits closer to the first */
.sub-deck-2{margin-top:-.35em}
/* ======================================================================
VOTE BAR — anchored to the Agree end
--pct is the agree share and the bar filled from the left, which read
correctly when Agree sat on the left. With Agree moved to the right the
fill has to grow from the right, or the bar shows the agree figure
growing out of the disagree end. The reader marker is mirrored to match.
====================================================================== */
.op-fill{inset:0 0 0 auto}
.op-vote[data-voted] .op-you{left:auto;right:var(--you,50%)}
/* ======================================================================
ISSUE LINE — broken rule
The rule runs the full column width and opens for the text. Replaces the
solid ink band: a filled band sat directly above three boxes whose top
edges are also hairlines, stacking four parallel lines in ~40px.
The rules are flex children, so the band's own `gap` sets the distance
from rule to text — no padding maths on the spans. min-width keeps a
visible stub on either side when the text is long on a narrow screen.
The filled band carried ~18px of its own padding as visual mass. A
hairline has none, so that is added back as vertical padding here,
keeping the rhythm the --band-gap token established.
====================================================================== */
.n-band{
background:none;
color:var(--inkstock);
padding:clamp(6px,.8vw,10px) 0;
gap:clamp(13px,1.5vw,20px);
flex-wrap:nowrap;
justify-content:center;
align-items:center}
.n-band::before,
.n-band::after{
content:"";
flex:1 1 auto;
min-width:20px;
height:1px;
background:var(--inkstock)}
.n-band span{color:var(--inkstock);white-space:nowrap}
/* the dot between issue and date keeps its own smaller gap */
.n-band span:nth-child(2){opacity:.55}
@media (max-width:520px){
/* the two labels alone fill a narrow screen, so the stubs shrink rather
than squeezing the text onto two lines */
.n-band{gap:9px;font-size:.6rem;letter-spacing:.16em}
.n-band::before,.n-band::after{min-width:10px}
}
/* ======================================================================
LEAD — the copy column takes the larger share
The headline was setting at about 20 characters a line, against an
editorial norm of 28 to 42, so it read as a stack of fragments rather
than a sentence.
Widening the column alone does not fix it: the headline size is tied to
the viewport, so a wider column simply gets larger type and the measure
stays where it was. The ratio moves to .85/1.15 AND the fluid term is
held flatter (4vw -> 3.1vw) so the extra width is spent on more
characters instead of bigger letters. The cap is unchanged, so the
headline is no smaller on a wide screen than it was.
====================================================================== */
@media (min-width:861px){
.n-lead{grid-template-columns:.85fr 1.15fr}
.n-lead-copy h2{font-size:clamp(2.05rem,3.1vw,3.3rem)}
}
/* ======================================================================
WORDMARK — optical centring against the rule
The block is centred, so the left and right gaps to the rule below are
equal as boxes. The ink is not: 'T' carries a .02437em left side
bearing and 'X' a .01409em right one, so the space before the T reads
about 1.7x the space after the X.
Shifting by half the difference puts equal INK either side of the rule.
Expressed in em so it holds at every size, including zoomed in, where
the imbalance is what becomes visible.
====================================================================== */
.n-wordmark{transform:translateX(-.00514em)}
/* ======================================================================
SPLIT LEAD
Image and panel as two flush halves with no gutter, so the lead reads
as one object rather than a picture beside some text.
The panel colour is a token because the ink used in light mode is the
same value as the dark-mode page stock (#141419) — used flat it would
disappear against the background on the site's default theme. In dark
mode it lifts to a raised tone so the split still reads.
====================================================================== */
body.n90{--lead-panel:#141419;--on-lead-panel:#F2ECE0}
html:not([data-theme="light"]) body.n90{--lead-panel:#20202A;--on-lead-panel:#EDE7DA}
@media (min-width:861px){
.n-lead{
grid-template-columns:.88fr 1.12fr;
gap:0;
align-items:stretch;
padding-bottom:0}
.n-lead-art{min-height:0;height:100%;align-self:stretch}
.n-lead-art img{
width:100%;height:100%;object-fit:cover;
min-height:clamp(400px,40vw,540px)}
.n-lead-copy{
background:var(--lead-panel);
padding:clamp(30px,3.2vw,50px) clamp(28px,3vw,46px);
justify-content:center;
max-width:none}
/* the fluid term stays moderate so the wider panel buys characters
rather than larger letters — the correction the lead needed earlier */
.n-lead-copy h2{
font-size:clamp(2.3rem,3.2vw,3.4rem);
line-height:.98;
letter-spacing:-.028em;
margin-bottom:clamp(16px,1.9vw,24px)}
/* 60ch is wider than the panel at every breakpoint, so the deck fills
the column instead of stopping short of it */
.n-lead-deck{
max-width:60ch;
font-size:clamp(1.16rem,1.5vw,1.46rem);
line-height:1.5}
.n-byline{margin-top:clamp(14px,1.6vw,20px);font-size:.74rem}
.n-read{font-size:.82rem}
.n-stamp{margin-bottom:clamp(14px,1.7vw,22px)}
/* reversed type on the panel */
.n-lead-copy h2 a{color:var(--on-lead-panel)}
.n-lead-deck{color:var(--on-lead-panel);opacity:.9}
.n-byline{color:var(--on-lead-panel);opacity:.78}
.n-read{color:var(--on-lead-panel);border-bottom-color:var(--red)}
.n-lead-copy h2 a:hover{text-decoration-color:var(--red)}
.n-stamp{background:var(--on-lead-panel);color:#141419;border-color:var(--on-lead-panel)}
}
/* stacked: the panel keeps its fill and sits under the picture */
@media (max-width:860px){
.n-lead{gap:0;padding-bottom:0}
.n-lead-copy{
background:var(--lead-panel);
padding:clamp(22px,5vw,32px)}
.n-lead-copy h2 a,.n-lead-deck,.n-byline,.n-read{color:var(--on-lead-panel)}
.n-read{border-bottom-color:var(--red)}
.n-stamp{background:var(--on-lead-panel);color:#141419;border-color:var(--on-lead-panel)}
}