/* MARGINALIA — site stylesheet Warm ink / oxblood / bottle-green + aged-paper cream + brass. Review-desk editorial. */ :root{ --ink:#22262B; --ink-2:#171A1E; --paper:#EFE9DC; --paper-2:#F7F2E7; --rule:#D6CBB4; --rule-strong:#22262B; --oxblood:#6E3232; --brass:#A98F55; --green:#20302A; --muted:#55503F; --faint:#6B655A; --acc-reading:#8A6D3B; --acc-genre:#6B4A2A; --acc-classics:#4A2A2A; --acc-culture:#20302A; --acc-recs:#8C6A3B; --serif:'Newsreader',Georgia,serif; --sans:'Archivo',system-ui,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.65} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} a:hover{color:var(--oxblood)} p{margin:0 0 1.3em;text-wrap:pretty} h1,h2,h3{margin:0;font-weight:500;text-wrap:balance} .wrap{max-width:1400px;margin:0 auto;padding-inline:clamp(18px,4vw,56px)} .kicker{font:600 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--oxblood)} .kicker.brass{color:var(--brass)} .rule-top{border-top:2px solid var(--rule-strong)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- masthead ---------- */ .masthead{background:var(--ink);color:var(--paper)} .masthead-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:20px;padding-block:24px} .masthead .side{font:500 12px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(239,233,220,.6)} .masthead .side.right{text-align:right} .wordmark{font:500 clamp(30px,4.2vw,46px)/1 var(--serif);letter-spacing:.14em;color:var(--paper);text-align:center;white-space:nowrap} .wordmark:hover{color:var(--brass)} /* ---------- nav ---------- */ .sitenav{background:var(--paper);border-bottom:2px solid var(--ink);position:relative;z-index:50} .nav-row{display:flex;align-items:stretch;justify-content:center} .nav-list{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap} .nav-list>li{position:relative;border-left:1px solid var(--rule)} .nav-list>li:last-child{border-right:1px solid var(--rule)} .nav-list>li>a{display:block;padding:15px 26px;font:600 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap} .nav-list>li>a:hover{background:var(--ink);color:var(--paper)} .nav-list>li>a[aria-current="true"]{background:var(--ink);color:var(--paper)} /* dropdowns — CSS only, hover-safe (no dead gap: panel starts flush at item bottom) */ .has-sub>a::after{content:"";display:inline-block;margin-left:8px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)} .nav-sub{list-style:none;margin:0;padding:10px 0;position:absolute;top:100%;left:-1px;min-width:300px;background:var(--paper-2);border:1px solid var(--ink);border-top:2px solid var(--brass);box-shadow:0 14px 30px rgba(23,26,30,.18);display:none} .nav-sub:empty{display:none!important} .nav-sub li a{display:block;padding:10px 20px;font:500 16.5px/1.35 var(--serif)} .nav-sub li a:hover{background:var(--paper);color:var(--oxblood)} .nav-sub .sub-all a{font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood);padding-top:12px} .has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{display:block} .nav-toggle,.burger{display:none} /* ---------- front page ---------- */ .front{display:grid;grid-template-columns:1fr 1.4fr 1fr;padding-block:52px 0} .front-col{min-width:0;padding:0 36px;display:flex;flex-direction:column;gap:24px} .front-col.left{border-right:1px solid var(--rule);padding-left:0} .front-col.right{border-left:1px solid var(--rule);padding-right:0} .col-head{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--oxblood);border-bottom:2px solid var(--oxblood);padding-bottom:10px} .brief-item{border-bottom:1px solid var(--rule);padding-bottom:22px} .brief-item:last-of-type{border-bottom:0;padding-bottom:0} .house-rule{margin-top:auto;background:var(--ink);color:var(--paper);padding:24px 26px} .house-rule p{font:500 21px/1.45 var(--serif);font-style:italic;margin:0;color:var(--paper)} .brief-item a{font:500 23px/1.28 var(--serif);display:block} .brief-item .b-meta{font-size:15px;font-style:italic;color:var(--faint);margin-top:7px} .lead-essay{text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center} .lead-essay h1{font:500 clamp(34px,3.4vw,48px)/1.12 var(--serif);max-width:17em} .lead-essay .dek{font-size:20px;line-height:1.55;font-style:italic;color:var(--muted);max-width:30em;margin:0} .lead-essay figure{margin:6px 0 0;width:100%} .lead-essay img{width:100%;height:340px;object-fit:cover} .lead-essay figcaption{font-size:14.5px;font-style:italic;color:var(--faint);text-align:left;padding-top:8px;border-bottom:1px solid var(--rule);padding-bottom:10px} .lead-essay .go{font:600 13px/1 var(--sans);letter-spacing:.16em;color:var(--oxblood)} .index-item{display:flex;gap:14px;align-items:baseline} .index-item .no{font:500 19px/1 var(--serif);color:var(--brass);min-width:26px} .index-item a{font:500 20px/1.3 var(--serif)} .index-item .in-what{display:block;font-size:15px;font-style:italic;color:var(--faint);margin-top:2px} .tipsheet{margin-top:auto;border:1px solid var(--ink);background:var(--paper-2);padding:22px 24px} .tipsheet p{font-size:16px;font-style:italic;margin:0 0 14px} .tipsheet .ts-row{border-bottom:1px solid var(--ink);display:flex;justify-content:space-between;gap:12px;padding-bottom:6px;font:500 13px/1.4 var(--sans);letter-spacing:.1em;color:var(--faint);text-transform:uppercase} .tipsheet .ts-row b{color:var(--ink);font-weight:700;white-space:nowrap} .tipsheet .ts-note{font-size:13px;font-style:italic;color:var(--faint);margin:10px 0 0} /* ---------- section bands ---------- */ .band{margin-top:64px} .band-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-top:2px solid var(--ink);padding-top:14px;margin-bottom:28px} .band-head h2{font:500 29px/1 var(--serif);letter-spacing:.06em;text-transform:uppercase} .band-head .bh-sub{font-size:16px;font-style:italic;color:var(--faint)} .band-head .bh-link{font:600 12.5px/1 var(--sans);letter-spacing:.18em;color:var(--oxblood);white-space:nowrap} /* filed cards — even height */ .filed-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--rule)} .filed-card{border-right:1px solid var(--rule);padding:0 26px 20px;display:flex;flex-direction:column;min-width:0} .filed-card img{width:100%;aspect-ratio:16/10;object-fit:cover} .filed-card .tag{font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood);margin:16px 0 10px} .filed-card h3{font:500 22.5px/1.3 var(--serif);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3 * 1.3em)} .filed-card h3 a:hover{color:var(--oxblood)} .filed-card .dek{font-size:15.5px;line-height:1.5;color:var(--muted);margin:10px 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .filed-card .meta{margin-top:auto;font:500 13px/1 var(--sans);letter-spacing:.08em;color:var(--faint);text-transform:uppercase;border-top:1px solid var(--rule);padding-top:12px} /* CSS-only expander */ .more-state{display:none} .more-row{display:none} .more-state:checked ~ .filed-grid .more-row{display:flex} .more-label{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font:600 12.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood);border:1px solid var(--oxblood);padding:12px 22px;cursor:pointer} .more-label:hover{background:var(--oxblood);color:var(--paper)} .more-state:checked ~ .more-label .when-closed{display:none} .more-state:not(:checked) ~ .more-label .when-open{display:none} /* genre band (bottle green) */ .genre-band{background:var(--green);color:var(--paper);padding:56px 0 60px;margin-top:64px} .genre-band .band-head{border-top-color:rgba(239,233,220,.4)} .genre-band .bh-sub{color:rgba(239,233,220,.65)} .genre-band .bh-link{color:var(--brass)} .genre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(239,233,220,.22);border:1px solid rgba(239,233,220,.22)} .genre-card{background:var(--green);padding:28px 28px 24px;display:flex;flex-direction:column;gap:11px;min-width:0} .genre-card .g-top{display:flex;justify-content:space-between;align-items:baseline;font:600 11px/1 var(--sans);letter-spacing:.18em;color:rgba(239,233,220,.55);text-transform:uppercase} .genre-card .g-top .no{font:500 15px/1 var(--serif);color:var(--brass);letter-spacing:.04em} .genre-card h3{font:500 29px/1.15 var(--serif)} .genre-card h3 a:hover{color:var(--brass)} .genre-card .g-dek{font-size:16px;line-height:1.5;color:rgba(239,233,220,.75);margin:0;flex:1} .genre-card .g-start{border-top:1px solid rgba(239,233,220,.25);padding-top:12px;font-size:15.5px;color:rgba(239,233,220,.9)} .genre-card .g-start .sw{font:600 10.5px/1 var(--sans);letter-spacing:.16em;color:var(--brass)} /* ---------- underwriting / sponsors ---------- */ .uw{margin-top:64px} .uw-head{display:flex;align-items:baseline;gap:18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin-bottom:26px} .uw-head .kicker{color:var(--faint)} .uw-head .uw-title{font:500 21px/1.2 var(--serif);font-style:italic;color:var(--muted)} .sponsor-row{display:grid;gap:22px} .sponsor-row.cols-4{grid-template-columns:repeat(4,1fr)} .sponsor-row.cols-3{grid-template-columns:repeat(3,1fr)} .sponsor{display:flex;flex-direction:column;gap:10px;min-width:0} .sponsor>img{width:100%;aspect-ratio:8/3;object-fit:cover;background:var(--ink-2);border:1px solid var(--brass);padding:0} .sponsor:hover>img{border-color:var(--oxblood)} .sponsor-blurb{font-size:15px;font-style:italic;color:var(--faint);line-height:1.5;min-height:1.5em} .sponsor-blurb:empty::before{content:"— line reserved —";opacity:.45} /* ---------- footer ---------- */ .footer{background:var(--ink);color:rgba(239,233,220,.72);margin-top:72px;padding:44px 0 36px} .footer .f-grid{display:grid;grid-template-columns:1.2fr 2fr;gap:40px;align-items:start} .footer .f-mark{font:500 26px/1 var(--serif);letter-spacing:.14em;color:var(--paper)} .footer .f-tag{font-size:15px;font-style:italic;margin-top:10px;color:rgba(239,233,220,.55)} .f-cols{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:flex-end} .f-cols a{font:500 12px/2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(239,233,220,.72)} .f-cols a:hover{color:var(--brass)} .f-disc{border-top:1px solid rgba(239,233,220,.2);margin-top:28px;padding-top:16px;font-size:14.5px;font-style:italic;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} .f-disc .f-small{font:500 11px/1.8 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,233,220,.45)} .footer a:hover{color:var(--brass)} /* ---------- article ---------- */ .art-open{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:clamp(24px,4vw,56px);padding-block:56px 0;align-items:start} .art-side{border-top:2px solid var(--ink);padding-top:16px} .art-side .kicker{margin-bottom:12px;display:block} .art-side p,.art-side div{font:500 18px/1.5 var(--serif);margin:0 0 4px} .art-side .toc{display:flex;flex-direction:column;gap:8px;font:500 17px/1.4 var(--serif)} .art-side .toc a:hover{color:var(--oxblood)} .art-side + .art-head{padding-top:0} .art-head{text-align:center} .art-head h1{font:500 clamp(34px,3.6vw,52px)/1.12 var(--serif);margin:0 0 18px} .art-head .dek{font-size:21px;line-height:1.55;font-style:italic;color:var(--muted);max-width:30em;margin:0 auto} .art-head .byline{margin:22px 0 0;font:600 12.5px/1.8 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood)} .art-hero{max-width:1120px;margin:44px auto 0;padding-inline:clamp(18px,4vw,56px)} .art-hero figure{margin:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0} .art-hero img{width:100%;max-height:460px;object-fit:cover} .art-hero figcaption{font-size:15px;font-style:italic;color:var(--faint);padding-top:10px} /* body rows: prose + margin rail */ .art-body{max-width:1120px;margin:0 auto;padding:48px clamp(18px,4vw,56px) 0} .art-row{display:grid;grid-template-columns:minmax(0,70ch) minmax(220px,300px);gap:clamp(28px,4vw,72px);align-items:start} .art-row.full{grid-template-columns:minmax(0,1fr)} .art-prose{font-size:20.5px;line-height:1.78;min-width:0} .art-prose h2{font:500 31px/1.25 var(--serif);margin:44px 0 16px;scroll-margin-top:24px} .art-prose h2:first-child{margin-top:0} .art-prose h2 .sec-no{font:500 15px/1 var(--sans);letter-spacing:.2em;color:var(--oxblood);display:block;margin-bottom:8px} .art-prose em{font-style:italic} .art-prose a{text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px} .art-prose a:hover{color:var(--oxblood)} .opener::first-letter{font-size:3.4em;line-height:.82;float:left;padding:6px 12px 0 0;color:var(--oxblood);font-weight:500} .lead{font-size:23px;line-height:1.6;font-style:italic;color:var(--muted)} .margin-rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:24px} .margin-card{border:1px solid var(--rule);background:var(--paper-2);padding:16px 18px} .margin-card .mc-kind{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:8px} .margin-card .mc-name{font:600 17px/1.3 var(--serif);display:block;margin-bottom:4px} .margin-card .mc-what{font-size:14.5px;line-height:1.5;color:var(--muted)} /* inline aside band (short-post degradation) */ .aside-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:36px 0} .aside-band .margin-card{height:100%} /* palette components */ .pullquote{margin:44px 0;padding:26px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);text-align:center} .pullquote p{font:500 29px/1.4 var(--serif);font-style:italic;margin:0} .blockquote{margin:40px 0;padding-left:28px;border-left:3px solid var(--brass)} .blockquote p{font:500 24px/1.5 var(--serif);font-style:italic;margin:0 0 10px} .blockquote cite{font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-style:normal} .callout{border:2px solid var(--ink);background:var(--paper-2);padding:24px 28px;margin:40px 0;position:relative} .callout::before{content:"From the desk";font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--oxblood);display:block;margin-bottom:10px} .callout p{font-size:19px;line-height:1.6;margin:0} .note{font-size:16.5px;line-height:1.6;color:var(--muted);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin:32px 0} .note::before{content:"N.B. — ";font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--brass)} .statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:40px 0} .statblock{background:var(--paper-2);padding:20px 22px;display:flex;flex-direction:column;gap:6px} .stat-num{font:500 38px/1 var(--serif);color:var(--oxblood)} .stat-label{font:500 13.5px/1.45 var(--sans);color:var(--faint)} table.versus,table.datatable{width:100%;border-collapse:collapse;margin:40px 0;font-size:17px} table.versus caption,table.datatable caption{caption-side:top;text-align:left;font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood);padding-bottom:12px} .versus th,.datatable th{font:600 12.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-align:left;border-bottom:2px solid var(--ink);padding:10px 14px 10px 0} .versus td,.datatable td{border-bottom:1px solid var(--rule);padding:12px 14px 12px 0;vertical-align:top;line-height:1.5} .versus td:first-child{font-weight:600;font-family:var(--sans);font-size:14px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;width:22%} .datatable td:first-child{font-weight:500} .timeline{list-style:none;margin:40px 0;padding:0;border-left:2px solid var(--brass)} .timeline li{position:relative;padding:0 0 26px 28px} .timeline li:last-child{padding-bottom:4px} .timeline li::before{content:"";position:absolute;left:-6px;top:8px;width:10px;height:10px;background:var(--paper);border:2px solid var(--oxblood);border-radius:50%} .t-when{display:block;font:600 13px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--oxblood);margin-bottom:4px} .t-what{font-size:18px;line-height:1.55} .chart{margin:44px 0} .chart svg{width:100%;height:auto;display:block} .chart figcaption{font-size:15px;font-style:italic;color:var(--faint);padding-top:10px;border-top:1px solid var(--rule);margin-top:12px} .article-figure{margin:40px 0} .article-figure img{width:100%;object-fit:cover} .article-figure figcaption{font-size:15px;font-style:italic;color:var(--faint);padding-top:10px;border-top:1px solid var(--rule);margin-top:10px} .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:40px 0} .gallery figure{margin:0} .gallery img{width:100%;aspect-ratio:4/3;object-fit:cover} .gallery figcaption{font-size:14px;font-style:italic;color:var(--faint);padding-top:8px} .map-figure{margin:40px 0;border:1px solid var(--rule);background:var(--paper-2);padding:14px} .map-slot{min-height:300px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--rule);color:var(--faint);font:500 13px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase} .map-slot:empty::before{content:none} .map-figure figcaption{font-size:15px;font-style:italic;color:var(--faint);padding-top:10px} .profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:40px 0} .profile-card{border:1px solid var(--rule);background:var(--paper-2);padding:22px 24px;min-width:0} .profile-card .p-photo{width:76px;height:76px;object-fit:cover;border-radius:50%;margin-bottom:14px} .profile-card.no-photo .p-initial{width:76px;height:76px;border-radius:50%;background:var(--ink);color:var(--brass);display:flex;align-items:center;justify-content:center;font:500 30px/1 var(--serif);margin-bottom:14px} .profile-card h3{font:600 20px/1.25 var(--serif)} .profile-card .p-role{font:600 12px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--oxblood);margin:4px 0 10px} .profile-card p{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0} .profile-card .p-links{margin-top:12px} .profile-card .p-links a{font:600 13px/1 var(--sans);letter-spacing:.08em;color:var(--oxblood);border-bottom:1px solid var(--brass)} .p-attr{font-size:12.5px;color:var(--faint)} .org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:40px 0} .org-card{border:1px solid var(--rule);background:var(--paper-2);padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-width:0} .org-card:hover{border-color:var(--oxblood)} .org-card .org-logo{width:44px;height:44px;object-fit:contain;background:var(--ink-2);padding:6px;margin-bottom:8px} .org-card.no-logo .org-glyph{width:44px;height:44px;background:var(--ink);color:var(--brass);display:flex;align-items:center;justify-content:center;font:500 20px/1 var(--serif);margin-bottom:8px} .org-name{font:600 17px/1.3 var(--serif)} .org-host{font:500 12.5px/1.4 var(--sans);letter-spacing:.06em;color:var(--faint)} .entity-ref{border-bottom:1px solid var(--brass);font-weight:500} .entity-ref:hover{color:var(--oxblood)} .further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:24px 0 0} .further-grid a{border:1px solid var(--rule);background:var(--paper-2);padding:18px 20px;display:flex;flex-direction:column;gap:6px} .further-grid a:hover{border-color:var(--oxblood)} .further-grid .fg-tag{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood)} .further-grid .fg-title{font:500 19px/1.35 var(--serif)} /* related + end matter */ .art-end{max-width:1120px;margin:40px auto 0;padding-inline:clamp(18px,4vw,56px)} .art-end .rel{border-top:2px solid var(--ink);padding-top:22px;max-width:70ch} .art-end h2{font:600 12.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--oxblood);margin-bottom:16px} .related-links{list-style:none;margin:0;padding:0} .related-links li{border-bottom:1px solid var(--rule)} .related-links a{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:14px 0;font:500 21px/1.35 var(--serif)} .related-links .rl-tag{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap} .art-nextprev{display:flex;justify-content:space-between;gap:32px;border-top:2px solid var(--ink);margin-top:44px;padding-top:22px} .art-nextprev a{display:flex;flex-direction:column;gap:6px;max-width:46%} .art-nextprev .np-k{font:600 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--oxblood)} .art-nextprev .np-t{font:500 21px/1.3 var(--serif)} .art-nextprev a:last-child{text-align:right;margin-left:auto} /* ---------- article opener variants ---------- */ .art-open-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:56px 8px} .art-open-split .kicker{display:block;margin-bottom:16px} .art-open-split h1{font:500 clamp(36px,3.8vw,56px)/1.1 var(--serif);margin:0 0 18px} .art-open-split .dek{font-size:21px;line-height:1.55;font-style:italic;color:var(--muted);margin:0} .art-open-split .byline{margin-top:24px;font:600 12.5px/1.8 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood)} .art-open-split figure{margin:0;border:1px solid var(--rule);background:var(--paper-2);padding:12px} .art-open-split img{width:100%;height:380px;object-fit:cover} .art-open-split figcaption{font-size:14.5px;font-style:italic;color:var(--faint);padding-top:10px} .toc-row{display:flex;flex-wrap:wrap;gap:10px 28px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin-top:28px;font:500 16px/1.4 var(--serif)} .toc-row a:hover{color:var(--oxblood)} .toc-row .kicker{align-self:center} .art-bleed{margin:0} .art-bleed img{width:100%;height:clamp(260px,38vw,440px);object-fit:cover;display:block} .art-bleed-head{border-bottom:2px solid var(--ink);padding:40px 0 36px} .art-bleed-head .kicker{display:block;margin-bottom:14px} .art-bleed-head h1{font:500 clamp(36px,4vw,58px)/1.08 var(--serif);max-width:20em} .art-bleed-head .dek{font-size:21px;line-height:1.55;font-style:italic;color:var(--muted);max-width:34em;margin:16px 0 0} .art-bleed-head .byline{margin-top:20px;font:600 12.5px/1.8 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood)} .art-bleed-head .b-cap{font-size:14.5px;font-style:italic;color:var(--faint);margin:12px 0 0} .art-open-quiet{max-width:740px;margin:0 auto;text-align:center;padding:60px clamp(18px,4vw,56px) 0} .art-open-quiet .kicker{display:block;margin-bottom:16px} .art-open-quiet h1{font:500 clamp(34px,3.6vw,48px)/1.12 var(--serif);margin:0 0 16px} .art-open-quiet .dek{font-size:21px;line-height:1.55;font-style:italic;color:var(--muted);margin:0} .art-open-quiet .byline{margin-top:22px;font:600 12.5px/1.8 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood)} .art-hero-quiet{max-width:740px;margin:36px auto 0;padding-inline:clamp(18px,4vw,56px)} .art-hero-quiet figure{margin:0;border:1px solid var(--rule);background:var(--paper-2);padding:10px} .art-hero-quiet img{width:100%;height:300px;object-fit:cover} .art-hero-quiet figcaption{font-size:14.5px;font-style:italic;color:var(--faint);padding-top:9px} .art-body.quiet{max-width:740px} /* ---------- category pages ---------- */ .cat-hero{border-bottom:2px solid var(--ink);padding-block:56px 40px;text-align:center} .cat-hero .kicker{display:block;margin-bottom:14px} .cat-hero h1{font:500 clamp(40px,4.6vw,62px)/1.05 var(--serif);letter-spacing:.02em} .cat-hero .dek{font-size:20px;font-style:italic;color:var(--muted);max-width:36em;margin:16px auto 0} .cat-list{list-style:none;margin:0;padding:0;max-width:1120px;margin-inline:auto} .cat-list li{border-bottom:1px solid var(--rule)} .cat-list li:last-child{border-bottom:0} .cat-list a{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:36px;align-items:center;padding:30px 0} .cat-list .cl-no{font:500 15px/1 var(--serif);color:var(--brass);display:block;margin-bottom:8px} .cat-list h3{font:500 30px/1.2 var(--serif)} .cat-list .cl-dek{font-size:17px;line-height:1.55;color:var(--muted);margin:8px 0 0} .cat-list .cl-meta{font:500 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:12px} .cat-list img{width:220px;aspect-ratio:16/10;object-fit:cover} .cat-list a:hover h3{color:var(--oxblood)} .hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:44px} .hub-card{background:var(--paper);padding:32px 30px;display:flex;flex-direction:column;gap:10px} .hub-card .no{font:500 17px/1 var(--serif);color:var(--brass)} .hub-card h2{font:500 30px/1.15 var(--serif)} .hub-card p{font-size:16.5px;color:var(--muted);margin:0;flex:1} .hub-card .hc-count{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--oxblood)} .hub-card a:hover h2,.hub-card h2 a:hover{color:var(--oxblood)} /* ---------- simple pages ---------- */ .page-col{max-width:76ch;margin:0 auto;padding:56px clamp(18px,4vw,56px) 0;font-size:20px;line-height:1.75} .page-col h1{font:500 clamp(36px,4vw,54px)/1.1 var(--serif);margin-bottom:18px} .page-col .dek{font-size:21px;font-style:italic;color:var(--muted);margin-bottom:34px} .contact-list{list-style:none;margin:36px 0;padding:0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)} .contact-list li{display:flex;gap:20px;align-items:flex-start;border-bottom:1px solid var(--rule);padding:22px 0} .contact-list svg{flex:none;width:26px;height:26px;color:var(--oxblood);margin-top:4px} .contact-list b{display:block;font:600 19px/1.3 var(--serif);margin-bottom:4px} .contact-list span{font-size:16.5px;color:var(--muted)} .err-wrap{text-align:center;padding-block:96px 40px} .err-wrap .err-no{font:500 120px/1 var(--serif);color:var(--brass)} .err-wrap h1{font:500 40px/1.1 var(--serif);margin:12px 0 10px} .err-wrap p{font-size:19px;font-style:italic;color:var(--muted)} .err-wrap .go{display:inline-block;margin-top:18px;font:600 12.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood);border:1px solid var(--oxblood);padding:14px 26px} .err-wrap .go:hover{background:var(--oxblood);color:var(--paper)} /* ---------- styleguide ---------- */ .sg-section{border-top:2px solid var(--ink);margin-top:56px;padding-top:18px} .sg-section>h2{font:600 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--oxblood);margin-bottom:28px} .sg-note{font-size:15px;font-style:italic;color:var(--faint)} /* ---------- responsive ---------- */ @media (max-width:1120px){ .front{grid-template-columns:1fr 1fr} .front-col.right{grid-column:1/-1;border-left:0;border-top:1px solid var(--rule);padding:32px 0 0;margin-top:32px} .filed-grid{grid-template-columns:repeat(2,1fr)} .filed-card{padding-top:0;margin-bottom:28px} .genre-grid{grid-template-columns:repeat(2,1fr)} .sponsor-row.cols-4{grid-template-columns:repeat(2,1fr)} .art-open{grid-template-columns:1fr;gap:28px} .art-open-split{grid-template-columns:1fr;gap:28px;align-items:start} .art-open-split img{height:300px} .art-side{max-width:560px;margin:0 auto;width:100%;text-align:center} .art-row{grid-template-columns:minmax(0,1fr)} .margin-rail{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:8px 0 32px} } @media (max-width:760px){ body{font-size:18px} .masthead-inner{grid-template-columns:1fr;gap:8px;text-align:center;padding-block:20px} .masthead .side,.masthead .side.right{text-align:center} /* mobile nav */ .nav-row{justify-content:space-between;align-items:center;padding-block:10px} .burger{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--sans);letter-spacing:.18em;cursor:pointer;padding:8px 0} .burger svg{width:22px;height:22px} .nav-list{display:none;flex-direction:column;width:100%;border-top:1px solid var(--rule)} .nav-toggle:checked ~ .nav-list{display:flex} .nav-list>li{border-left:0;border-bottom:1px solid var(--rule)} .nav-list>li:last-child{border-right:0;border-bottom:0} .nav-list>li>a{padding:15px 4px} .nav-sub{position:static;display:none;border:0;border-left:2px solid var(--brass);box-shadow:none;background:transparent;padding:0 0 12px 14px;min-width:0} .has-sub:hover .nav-sub{display:none} .has-sub:focus-within .nav-sub,.nav-toggle:checked ~ .nav-list .has-sub:focus-within .nav-sub{display:block} .front{grid-template-columns:1fr;padding-top:36px} .front-col{padding:0;border:0!important} .front-col.left{order:2;border-top:1px solid var(--rule)!important;padding-top:28px;margin-top:28px} .front-col.mid{order:1} .front-col.right{order:3;margin-top:28px;padding-top:28px} .lead-essay img{height:240px} .filed-grid{grid-template-columns:1fr;border-left:0} .filed-card{border-right:0;padding-inline:0} .genre-grid{grid-template-columns:1fr} .sponsor-row.cols-4,.sponsor-row.cols-3{grid-template-columns:1fr 1fr} .footer .f-grid{grid-template-columns:1fr} .f-cols{justify-content:flex-start} .cat-list a{grid-template-columns:1fr;gap:16px} .cat-list img{width:100%} .art-prose{font-size:19px} table.datatable,table.versus{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .art-nextprev{flex-direction:column} .art-nextprev a{max-width:100%;text-align:left!important} .band-head{flex-wrap:wrap} .pullquote p{font-size:24px} .statrow{grid-template-columns:1fr 1fr} } @media (max-width:430px){ .sponsor-row.cols-4,.sponsor-row.cols-3,.statrow{grid-template-columns:1fr} .wordmark{letter-spacing:.1em} } /* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry. It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px in the SAME ROW. The operator's rule is that the dark ground is unified whatever the logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */ [class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent} /* sponsor logo chip fix — vary wraps in