:root { --bg:#f7f6f3; --ink:#151412; --ink-2:#5a574f; --ink-3:#9c9890; --rule:#dedad3; --rule-strong:#c0bcb4; --red:#c0281e; --font:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif; --gutter:48px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.6 var(--font); -webkit-font-smoothing:antialiased; }
.skip-link { position:absolute; left:12px; top:-48px; z-index:2; background:var(--ink); color:#fff; padding:8px 12px; text-decoration:none; }
.skip-link:focus { top:12px; }
.container { max-width:760px; margin:0 auto; padding:0 var(--gutter); }
.site-nav { position:sticky; top:0; z-index:1; background:var(--bg); background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
.nav-inner { max-width:1200px; height:56px; margin:0 auto; padding:0 var(--gutter); display:flex; justify-content:space-between; align-items:center; }
.nav-logo, .nav-back { position:relative; isolation:isolate; color:var(--ink); text-decoration:none; transition:color 180ms ease-out; }
.nav-logo { display:inline-flex; align-items:center; justify-content:center; min-width:56px; height:36px; font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.nav-logo::before { content:""; position:absolute; inset:0 -12px 0 0; z-index:-1; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform 420ms cubic-bezier(.16,1,.3,1); }
.nav-logo:hover { color:#fff; }
.nav-logo:hover::before { transform:scaleX(1); }
.nav-back { display:inline-flex; align-items:center; min-height:30px; padding:0 10px; gap:6px; color:var(--ink-2); font-size:11px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; }
.nav-back::before { content:""; position:absolute; inset:0 -4px 0 0; z-index:-1; background:var(--red); transform:scaleY(0); transform-origin:bottom center; transition:transform 360ms cubic-bezier(.16,1,.3,1); }
.nav-back:hover { color:#fff; }
.nav-back:hover::before { transform:scaleY(1); }
.nav-back-arrow, .art-next-arrow { display:inline-block; transition:transform 150ms cubic-bezier(.23,1,.32,1); }
.nav-back:hover .nav-back-arrow { transform:translateX(-3px); }
.red-rule { height:3px; background:var(--red); }
article { padding:64px 0 96px; }
.art-eyebrow { margin:0 0 20px; color:var(--red); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.art-title { max-width:13ch; margin:0 0 24px; font-size:clamp(30px,4vw,44px); font-weight:300; line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
.art-meta { display:flex; flex-wrap:wrap; gap:10px 24px; margin:0 0 44px; padding-bottom:28px; border-bottom:1px solid var(--rule-strong); }
.art-meta-item { color:var(--ink-3); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.art-meta-item strong { color:var(--ink-2); font-weight:500; }
.art-body { max-width:65ch; color:var(--ink); font-size:17px; font-weight:300; line-height:1.8; }
.art-body p { margin:0; }
.art-body p + p { margin-top:22px; }
.art-body strong { font-weight:500; }
.pull { margin:40px 0; padding-left:24px; border-left:2px solid var(--red); font-size:22px; font-weight:300; line-height:1.5; }
.art-next { margin-top:64px; padding-top:32px; border-top:1px solid var(--rule); }
.art-next-label { margin-bottom:10px; color:var(--ink-3); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.art-next-link { display:inline-flex; align-items:center; gap:12px; color:var(--ink); font-size:22px; font-weight:300; line-height:1.25; text-decoration:none; transition:color 150ms ease; }
.art-next-link:hover { color:var(--red); }
.art-next-link:hover .art-next-arrow { transform:translateX(4px); }
.site-footer { border-top:1px solid var(--rule); background:var(--ink); }
.footer-inner { max-width:1200px; height:52px; margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; color:rgba(255,255,255,.45); font-size:11px; letter-spacing:.06em; }
.footer-logo { color:rgba(255,255,255,.55); font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.article-intro > * { animation:enter .65s cubic-bezier(.23,1,.32,1) both; }
.article-intro > :nth-child(2) { animation-delay:.08s; }
.article-intro > :nth-child(3) { animation-delay:.16s; }
.article-intro > :nth-child(4) { animation-delay:.24s; }
@keyframes enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
a:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
@media (max-width:600px) { :root { --gutter:20px; } .nav-inner { height:auto; min-height:56px; gap:16px; } article { padding:48px 0 64px; } .art-meta { margin-bottom:32px; } .pull { padding-left:18px; font-size:20px; } .art-next { margin-top:48px; } .art-next-link { font-size:20px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }