@font-face{font-family:Work Sans;src:url('./assets/work-sans.ttf') format('truetype');font-display:swap}
@font-face{font-family:DM Serif Display;src:url('./assets/dm-serif.ttf') format('truetype');font-display:swap}
@font-face{font-family:Oswald;src:url('./assets/oswald.ttf') format('truetype');font-display:swap}
@font-face{font-family:IBM Plex Mono;src:url('./assets/ibm-plex-mono.ttf') format('truetype');font-display:swap}

:root{--paper:#f2f3ee;--ink:#202722;--muted:#637067;--line:#bfc8be;--accent:#c43a28;--soft:#e7ebe4;--subtext:#515e54;--sans:'Work Sans',Arial,sans-serif;--serif:'DM Serif Display',Georgia,serif;--condensed:'Oswald',Impact,sans-serif;--mono:'IBM Plex Mono',monospace}
@media(prefers-color-scheme:dark){:root{--paper:#202722;--ink:#edf1e9;--muted:#bac5b9;--line:#647166;--accent:#ff876c;--soft:#2d3930;--subtext:#c6d0c5}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:var(--paper)}
.site-shell{max-width:1440px;margin:0 auto;padding:0 54px}
.topline{min-height:35px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.topline-divider{padding:0 10px;color:var(--accent)}
.brand-row{height:145px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}
.wordmark{text-decoration:none;font:700 clamp(104px,12.2vw,176px)/.9 var(--condensed);letter-spacing:-.072em;text-transform:uppercase;transform:scaleX(1.02);transform-origin:left center}
.wordmark-stop,.footer-wordmark span,.detail-toolbar-brand span{color:var(--accent)}
.brand-aside{margin:15px 4px 0 0;padding-left:18px;border-left:2px solid var(--accent);font:600 13px/1.35 var(--sans);text-align:left}
.main-nav{height:43px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:35px;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.055em}
.main-nav a{text-decoration:none;white-space:nowrap}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--accent)}
#nav-saved-count{display:inline-grid;place-items:center;margin-left:6px;width:17px;height:17px;background:var(--accent);color:var(--paper);font:600 10px var(--mono)}
.nav-note{margin-left:auto;font:italic 17px var(--serif);text-transform:none;letter-spacing:0;color:var(--accent)}
.intro{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.55fr);column-gap:38px;align-items:end;padding:42px 0 48px;border-bottom:1px solid var(--ink)}
.intro-kicker{grid-column:1/-1;margin:0 0 17px;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.085em;color:var(--accent)}
.intro h1{margin:0;font:400 clamp(70px,7.3vw,105px)/.93 var(--serif);letter-spacing:-.047em}
.intro h1 em{display:inline-block;padding-bottom:.06em;font-weight:400;line-height:1.1;color:var(--accent)}
.intro-deck{max-width:310px;margin:0 12px 9px auto;font-size:18px;line-height:1.52;letter-spacing:-.025em}
.browse{padding-top:27px}
.section-title-row{display:flex;align-items:start;justify-content:space-between;margin-bottom:30px}
.section-title-row h2{margin:0;font:400 clamp(36px,3.5vw,50px)/1.05 var(--serif);letter-spacing:-.025em}
.result-count{margin:9px 0 0;color:var(--muted);font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.025em}
.issue-mark{margin-top:-8px;font:600 53px/.9 var(--condensed);letter-spacing:-.04em;color:var(--line)}
.issue-mark span{color:var(--accent)}
.browse-tools{display:grid;grid-template-columns:minmax(0,1fr) 190px auto;align-items:end;gap:14px;padding:0 0 23px;border-bottom:1px solid var(--ink)}
.field label{display:block;margin-bottom:9px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.075em}
.input-wrap{position:relative}
.field input,.field select{appearance:none;display:block;width:100%;height:47px;padding:0 15px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font-size:14px;outline:none}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.field input::placeholder{color:var(--muted);opacity:1}
.search-field input{padding-right:43px}
.search-glyph{position:absolute;right:14px;top:7px;pointer-events:none;font:30px var(--sans);line-height:1;color:var(--ink)}
.filter-field{position:relative}
.filter-field:after{content:'⌄';position:absolute;right:14px;bottom:10px;pointer-events:none;font-size:21px;line-height:1}
.saved-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-width:157px;height:47px;padding:0 13px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap}
.saved-toggle:hover,.saved-toggle[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.saved-toggle:active,.save-button:active,.empty-state button:active{transform:translateY(1px)}
.bookmark-glyph{font-size:24px;line-height:0;transform:rotate(90deg)}
.saved-count{display:grid;place-items:center;width:18px;height:18px;background:var(--accent);color:var(--paper);font:600 10px var(--mono)}
.image-disclosure{margin:12px 0 -10px;text-align:right;color:var(--muted);font:500 10px var(--mono)}
.story-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:24px;row-gap:54px;padding:25px 0 80px}
.story{min-width:0;grid-column:span 2}
.story-open{display:flex;flex-direction:column;width:100%;height:100%;padding:0;text-align:left;border:0;background:none;color:inherit}
.story-photo{display:block;width:100%;height:auto;aspect-ratio:1.38;overflow:hidden;background:var(--soft)}
.story-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;filter:saturate(.78)}
.story-open:hover .story-photo img{transform:scale(1.045);filter:saturate(1)}
.story-content{display:flex;flex-direction:column;flex:1;width:100%;padding-top:15px}
.story-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.story-meta span:last-child{color:var(--muted);white-space:nowrap}
.story-title{display:block;max-width:540px;font:400 clamp(27px,2.55vw,38px)/1.1 var(--serif);letter-spacing:-.018em}
.story-summary{display:block;max-width:440px;margin-top:10px;font-size:13px;line-height:1.52;color:var(--subtext)}
.story-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.035em}
.read-arrow{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border:1px solid var(--ink);font:18px var(--sans);transition:background .2s,color .2s}
.story-open:hover .read-arrow{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.story-lead{grid-column:1/-1;margin-bottom:18px}
.story-lead .story-open{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);min-height:470px}
.story-lead .story-photo{height:100%;aspect-ratio:auto}
.story-lead .story-content{padding:24px 0 12px 34px}
.story-lead .story-meta{margin-bottom:40px}
.story-lead .story-title{font-size:clamp(45px,4.6vw,72px);line-height:1.01;letter-spacing:-.037em}
.story-lead .story-summary{font-size:16px;line-height:1.5;margin-top:23px}
.story-lead .story-bottom{padding-top:26px}
.story-wide{grid-column:span 4}
.story-tail{grid-column:span 3}
.story-wide .story-open{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.story-wide .story-photo{height:100%;aspect-ratio:auto;min-height:270px}
.story-wide .story-content{padding-top:0}
.story-wide .story-title{font-size:clamp(34px,3.1vw,45px)}
.loading-state{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;padding:26px 0 80px}
.loading-state div{height:370px;background:var(--soft);animation:pulse 1.3s ease-in-out infinite alternate}
.loading-state div:nth-child(2){height:100px;align-self:start}
.loading-state div:nth-child(3){grid-column:1/-1;height:180px}
@keyframes pulse{to{opacity:.48}}
.empty-state{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px 80px}
.empty-asterisk{font:74px/.8 var(--serif);color:var(--accent)}
.empty-state h3{margin:20px 0 8px;font:400 clamp(33px,4vw,52px)/1.1 var(--serif)}
.empty-state p{margin:0 0 27px;font-size:15px;color:var(--muted)}
.empty-state button{display:flex;gap:23px;align-items:center;padding:12px 17px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:13px;font-weight:600}
.empty-state button:hover{background:var(--accent);border-color:var(--accent)}
.about{display:grid;grid-template-columns:130px minmax(0,1fr);gap:22px;border-top:1px solid var(--ink);padding:42px 0 82px}
.about-symbol{font:130px/.7 var(--serif);color:var(--accent)}
.about h2{margin:0 0 12px;font:400 clamp(37px,4.5vw,60px)/1 var(--serif)}
.about p{max-width:690px;margin:0;font-size:17px;line-height:1.6;color:var(--subtext)}
.site-footer{min-height:113px;display:flex;align-items:center;gap:30px;border-top:1px solid var(--ink);font-size:11px}
.footer-wordmark{font:600 42px/.9 var(--condensed);letter-spacing:-.065em;text-transform:uppercase;text-decoration:none}
.site-footer p{margin:0}
.site-footer .photo-note{margin-left:auto;color:var(--muted)}

.detail-dialog{width:min(100%,1440px);max-width:none;height:100dvh;max-height:none;margin:0 auto;padding:0;border:0;background:var(--paper);color:var(--ink);overflow:auto}
.detail-dialog::backdrop{background:rgba(19,27,22,.76)}
.detail-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;height:69px;padding:0 54px;border-bottom:1px solid var(--ink);background:var(--paper)}
.detail-close{display:flex;align-items:center;gap:10px;padding:10px 0;border:0;background:transparent;color:var(--ink);font-size:21px}
.detail-close span{font:600 12px var(--sans);text-transform:uppercase;letter-spacing:.045em}
.detail-close:hover{color:var(--accent)}
.detail-toolbar-brand{font:600 36px/.9 var(--condensed);letter-spacing:-.065em;text-transform:uppercase}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.55fr);gap:72px;max-width:1332px;margin:0 auto;padding:58px 54px 90px}
.article-main{min-width:0}
.article-category{margin:0 0 21px;color:var(--accent);font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.07em}
.article-category span{padding:0 9px;color:var(--line)}
.article-main h2{max-width:850px;margin:0;font:400 clamp(52px,6vw,91px)/.98 var(--serif);letter-spacing:-.04em}
.article-standfirst{max-width:700px;margin:27px 0 0;font:400 clamp(20px,2vw,27px)/1.4 var(--serif);color:var(--subtext)}
.article-byline{display:flex;flex-wrap:wrap;gap:9px 26px;margin:30px 0 39px;padding:14px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.02em}
.article-byline span:last-child{color:var(--muted)}
.article-body{max-width:680px}
.article-body p{margin:0 0 24px;font-size:17px;line-height:1.82;letter-spacing:-.006em}
.article-body p:first-child:first-letter{float:left;margin:4px 9px 0 0;font:400 74px/.83 var(--serif);color:var(--accent)}
.article-end{display:flex;align-items:center;gap:14px;margin-top:35px;color:var(--muted);font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.09em}
.article-end span:first-child{color:var(--accent);font:35px var(--serif)}
.article-side{align-self:start;position:sticky;top:99px}
.article-side figure{margin:0}
.article-side img{width:100%;height:420px;object-fit:cover;filter:saturate(.8)}
.article-side figcaption,.article-mobile-photo span{display:block;margin-top:8px;color:var(--muted);font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.02em}
.save-button{display:flex;align-items:center;justify-content:center;gap:9px;width:220px;height:52px;margin:0 0 37px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:600 13px var(--sans)}
.save-button:hover,.save-button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.save-symbol{font-size:20px;line-height:1;color:var(--accent)}
.article-mobile-photo{display:none}

@media(max-width:1100px){
  .site-shell{padding:0 32px}
  .brand-row{height:145px}
  .wordmark{font-size:clamp(95px,14vw,145px)}
  .intro{grid-template-columns:1fr 280px}
  .intro h1{font-size:clamp(64px,7.5vw,90px)}
  .story-lead .story-open{min-height:400px}
  .story-lead .story-title{font-size:clamp(44px,5.5vw,62px)}
  .story-list{gap:42px 20px}
  .article-layout{gap:40px;padding-right:32px;padding-left:32px}
  .detail-toolbar{padding:0 32px}
}
@media(max-width:767px){
  .site-shell{padding:0 18px}
  .topline{min-height:31px;font-size:9px}
  .topline span:first-child{max-width:215px}
  .topline span:last-child{display:none}
  .brand-row{height:104px}
  .wordmark{font-size:clamp(80px,21vw,120px);letter-spacing:-.075em}
  .brand-aside{display:none}
  .main-nav{height:46px;gap:22px;font-size:10px}
  .nav-note{display:none}
  .intro{display:block;padding:48px 0 43px}
  .intro-kicker{margin-bottom:17px;font-size:10px}
  .intro h1{font-size:clamp(56px,13.8vw,88px);line-height:.99}
  .intro-deck{max-width:340px;margin:23px 0 0;font-size:16px;line-height:1.48}
  .browse{padding-top:24px}
  .section-title-row{margin-bottom:24px}
  .section-title-row h2{font-size:39px}
  .issue-mark{font-size:41px}
  .browse-tools{grid-template-columns:minmax(0,1fr) auto;gap:11px 10px;padding-bottom:18px}
  .search-field{grid-column:1/-1}
  .field input,.field select,.saved-toggle{height:44px}
  .filter-field select{padding-right:27px;font-size:12px}
  .saved-toggle{min-width:0;padding:0 10px;font-size:11px}
  .story-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 14px;padding:19px 0 59px}
  .story,.story-tail{grid-column:span 1}
  .story-lead{grid-column:1/-1;margin-bottom:5px}
  .story-lead .story-open{display:flex;min-height:0}
  .story-lead .story-photo{height:auto;aspect-ratio:1.18}
  .story-lead .story-content{padding:17px 0 0}
  .story-lead .story-meta{margin-bottom:15px}
  .story-lead .story-title{font-size:clamp(42px,10.3vw,58px);line-height:1.05}
  .story-lead .story-summary{font-size:15px;margin-top:12px}
  .story-lead .story-bottom{padding-top:17px}
  .story-photo{aspect-ratio:1.1}
  .story-content{padding-top:12px}
  .story-meta{display:block;margin-bottom:9px;font-size:9px}
  .story-meta span:last-child{display:none}
  .story-title{font-size:clamp(22px,6vw,30px);line-height:1.13}
  .story-summary{display:none}
  .story-bottom{font-size:9px;padding-top:12px}
  .read-arrow{width:26px;height:26px;flex-basis:26px}
  .story-wide{grid-column:1/-1}
  .story-wide .story-open{display:flex;gap:0}
  .story-wide .story-photo{height:auto;aspect-ratio:1.5}
  .story-wide .story-content{padding-top:12px}
  .story-wide .story-title{font-size:34px}
  .story-wide .story-summary{display:block;font-size:13px}
  .about{grid-template-columns:47px 1fr;gap:9px;padding:32px 0 54px}
  .about-symbol{font-size:68px}
  .about h2{font-size:36px}
  .about p{font-size:14px;line-height:1.55}
  .site-footer{min-height:100px;flex-wrap:wrap;gap:0 14px;padding:22px 0}
  .footer-wordmark{font-size:34px}
  .site-footer .photo-note{width:100%;margin:8px 0 0}
  .detail-toolbar{height:60px;padding:0 18px}
  .detail-toolbar-brand{font-size:31px}
  .article-layout{display:block;padding:31px 18px 70px}
  .article-category{font-size:10px;margin-bottom:18px}
  .article-main h2{font-size:clamp(44px,12vw,69px);line-height:1.02}
  .article-standfirst{font-size:21px;margin-top:19px}
  .article-byline{margin:22px 0 24px;font-size:10px}
  .article-mobile-photo{display:block;margin-bottom:28px}
  .article-mobile-photo img{width:100%;height:auto;aspect-ratio:1.26;object-fit:cover;filter:saturate(.8)}
  .article-body p{font-size:16px;line-height:1.75;margin-bottom:21px}
  .article-side{position:static;margin-top:30px}
  .article-side figure{display:none}
  .save-button{width:100%;margin:0 0 25px}
}
@media(max-width:410px){
  .wordmark{font-size:21vw}
  .main-nav{gap:16px}
  .intro h1{font-size:13.6vw}
  .saved-toggle .bookmark-glyph{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-photo img{transition:none}.read-arrow{transition:none}.loading-state div{animation:none}}