:root{
  --ink:#0B0E13;
  --ink-2:#12161D;
  --ink-3:#1A2029;
  --paper:#F1ECE0;
  --paper-2:#E8E1D2;
  --scan:#5FD6E3;
  --stamp:#C6432B;
  --gold:#C9A227;
  --graphite:#8B93A0;
  --graphite-ink:#565C66;
  --graphite-paper:#6E6656;
  --line-dark: rgba(95,214,227,0.22);
  --line-paper: rgba(20,20,20,0.12);
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--ink); color:var(--paper); font-family:var(--sans); line-height:1.6; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:860px; margin:0 auto; padding:0 24px;}
::selection{background:var(--scan); color:var(--ink);}

.eyebrow{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--scan); display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--scan); display:inline-block;}

.btn{font-family:var(--mono); font-size:0.85rem; letter-spacing:0.03em; padding:14px 26px; display:inline-flex; align-items:center; gap:10px; border:1px solid currentColor; transition:all .25s ease; white-space:nowrap;}
.btn-primary{background:var(--stamp); border-color:var(--stamp); color:var(--paper);}
.btn-primary:hover{background:transparent; color:var(--stamp);}
.btn-ghost{color:var(--scan);}
.btn-ghost:hover{background:var(--scan); color:var(--ink);}

header{position:sticky; top:0; z-index:50; background:rgba(11,14,19,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-dark);}
header .wrap{max-width:1120px; display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px;}
.mark{display:flex; align-items:center; gap:12px;}
.mark svg{width:34px; height:34px;}
.mark-text{font-family:var(--mono); font-size:0.95rem; letter-spacing:0.02em;}
.mark-text b{color:var(--scan); font-weight:500;}
.back-link{font-family:var(--mono); font-size:0.78rem; color:var(--graphite); display:flex; align-items:center; gap:8px;}
.back-link:hover{color:var(--scan);}

.article-hero{padding:56px 0 0;}
.article-hero .cat{margin-bottom:18px;}
.article-hero h1{font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.15; margin-bottom:22px;}
.byline{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-family:var(--mono); font-size:0.78rem; color:var(--graphite); margin-bottom:8px;}
.byline a{color:var(--scan); border-bottom:1px solid transparent;}
.byline a:hover{border-color:var(--scan);}
.byline .dot{opacity:0.4;}
.specialty{font-family:var(--mono); font-size:0.72rem; color:var(--gold); letter-spacing:0.03em; margin-bottom:30px;}
.article-figure{margin:0 0 44px; border:1px solid var(--line-dark);}
.article-figure img{width:100%; display:block;}

.article-body{padding-bottom:60px;}
.article-body p.lede{font-family:var(--serif); font-size:1.2rem; color:var(--paper); line-height:1.6; margin-bottom:38px; text-align:justify; text-justify:inter-word;}
.article-body h2{font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.7rem); margin:42px 0 16px; line-height:1.3;}
.article-body p{color:var(--graphite); font-size:1rem; margin-bottom:18px; max-width:68ch; text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto;}
.article-body p a{color:var(--scan); border-bottom:1px solid var(--line-dark);}
.article-body p a:hover{border-color:var(--scan);}
.article-body p em{font-style:italic; font-weight:600; color:var(--paper);}
.article-body blockquote{
  margin:30px 0; padding:4px 0 4px 24px; border-left:2px solid var(--scan);
  font-family:var(--serif); font-style:italic; font-weight:600; color:var(--paper);
  font-size:1.1rem; max-width:62ch;
}

.cta-block{background:var(--ink-3); border:1px solid var(--line-dark); border-radius:4px; padding:34px 30px; margin-top:48px;}
.cta-block p{color:var(--paper); font-size:1.05rem; margin-bottom:20px; max-width:none;}
.cta-block .btn-row{display:flex; gap:14px; flex-wrap:wrap;}

.author-box{border-top:1px solid var(--line-dark); margin-top:60px; padding-top:40px; display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;}
.author-box .eyebrow{margin-bottom:14px;}
.author-box p{color:var(--graphite); font-size:0.94rem; max-width:62ch; margin-bottom:16px;}
.author-box .links{display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:0.78rem;}
.author-box .links a{color:var(--scan); border-bottom:1px solid transparent;}
.author-box .links a:hover{border-color:var(--scan);}

footer{border-top:1px solid var(--line-dark); padding:44px 0; margin-top:40px;}
footer .wrap{max-width:1120px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
footer p{font-family:var(--mono); font-size:0.75rem; color:var(--graphite-ink);}
footer .socials{display:flex; gap:22px; flex-wrap:wrap;}
footer .socials a{font-family:var(--mono); font-size:0.75rem; color:var(--graphite); border-bottom:1px solid transparent;}
footer .socials a:hover{color:var(--scan); border-color:var(--scan);}

a:focus-visible, button:focus-visible{outline:2px solid var(--scan); outline-offset:3px;}

@media (max-width:600px){
  .article-hero{padding-top:40px;}
  .author-box{flex-direction:column;}
}