.articles-page { --paper:#d8d0bd; --paper-deep:#b8ae9a; --archive-ink:#242724; }
.articles-intro { display:flex; flex-direction:column; justify-content:center; min-height:calc(80svh - var(--header-space)); padding:10vw 8vw; }
.articles-intro h1 { font-size:clamp(58px,10vw,160px); margin-bottom:42px; }
.articles-intro h1 em { color:#b8c6ad; font-family:"Playfair Display",serif; font-weight:500; }
.articles-intro > p:not(.eyebrow) { color:var(--muted); font-size:20px; max-width:560px; }
.articles-intro .arrow-link { margin-top:28px; }
.article-archive { background:var(--paper); color:var(--archive-ink); padding:100px 8vw 130px; }
.archive-heading { border-bottom:1px solid rgba(36,39,36,.35); margin-bottom:52px; padding-bottom:42px; }
.archive-heading .eyebrow,.article-card-meta { color:#5e685b; }
.archive-heading h2 { font-size:clamp(45px,6vw,100px); margin-bottom:24px; }
.archive-heading > p:not(.eyebrow) { font-size:19px; max-width:530px; }
.article-grid { display:grid; gap:64px 52px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 auto; max-width:1180px; }
.article-card { background:none; border:0; color:inherit; cursor:pointer; font:inherit; padding:0; text-align:left; }
.article-card img { background:var(--paper-deep); display:block; height:420px; object-fit:cover; transition:transform .2s ease; width:100%; }
.article-card:hover img { transform:translateY(-5px); }
.article-card:focus-visible { outline:3px solid var(--green); outline-offset:7px; }
.article-card-meta { display:block; font:11px "DM Mono",monospace; letter-spacing:.02em; margin-top:16px; text-transform:uppercase; }
.article-card strong { display:block; font-family:"Playfair Display",serif; font-size:clamp(23px,2.2vw,35px); font-weight:500; line-height:1.04; margin-top:8px; }
.article-dialog { background:var(--charcoal); border:1px solid var(--line); color:var(--ink); max-height:calc(100svh - 44px); max-width:min(1400px,calc(100vw - 44px)); padding:0; width:100%; }
.article-dialog::backdrop { background:rgba(4,7,6,.78); backdrop-filter:blur(5px); }
.article-dialog-shell { padding:38px clamp(24px,5vw,80px) 65px; }
.article-dialog-topline { align-items:start; display:flex; justify-content:space-between; }
.article-dialog-topline .eyebrow { margin:0; }
.dialog-close { background:none; border:0; color:var(--ink); cursor:pointer; font:12px "DM Mono",monospace; letter-spacing:.02em; padding:0; text-transform:uppercase; }
.dialog-close span { font-size:22px; line-height:0; margin-left:5px; vertical-align:-2px; }
.article-dialog h2 { font-size:clamp(40px,6vw,92px); margin:28px 0 48px; max-width:800px; }
.article-dialog-pages { align-items:start; display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.article-dialog-pages figure { background:#000; margin:0; }
.article-dialog-pages img { display:block; height:auto; max-height:70svh; object-fit:contain; width:100%; }
.article-dialog-pages figcaption { color:var(--muted); font:11px "DM Mono",monospace; letter-spacing:.02em; padding:12px 0 0; text-transform:uppercase; }
.article-transcript { border-top:1px solid var(--line); margin-top:64px; max-width:760px; padding-top:32px; }
.article-transcript h3 { font-family:"Playfair Display",serif; font-size:clamp(28px,3vw,42px); font-weight:500; line-height:1.1; margin:0 0 14px; }
.article-transcript p { color:var(--muted); margin:0 0 18px; max-width:720px; }
.article-transcript p:last-child { margin-bottom:0; }
.article-transcript .article-byline { color:#b8c6ad; font:11px "DM Mono",monospace; letter-spacing:.02em; margin-bottom:28px; text-transform:uppercase; }
@media (max-width:760px) {
  .articles-intro { min-height:72svh; padding:19vw 6vw 14vw; }
  .articles-intro h1 { font-size:clamp(52px,16vw,88px); }
  .article-archive { padding:75px 6vw 95px; }
  .archive-heading { margin-bottom:40px; padding-bottom:33px; }
  .article-grid { gap:42px 18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-card img { height:260px; }
  .article-card strong { font-size:23px; }
  .article-dialog { max-height:calc(100svh - 20px); max-width:calc(100vw - 20px); }
  .article-dialog-shell { padding:26px 20px 55px; }
  .article-dialog h2 { margin:24px 0 36px; }
  .article-dialog-pages { grid-template-columns:1fr; }
}