/* =========================================================
   Magazine template — editorial design adapted from Quiet Quarterly
   ========================================================= */

:root{
  --bg:#f1ece1; --bg-raised:#e9e2d2; --bg-inset:#ede7d8;
  --ink:#141414; --ink-soft:#3c3a34; --ink-mute:#6b6658;
  --rule:#1a1a1a; --rule-soft:#c8bfa8;
  --accent:#cf3a1a; --accent-ink:#fff;
  --chip-bg:#1a1a1a; --chip-ink:#f1ece1;
  --serif:"Fraunces","Georgia",serif;
  --italic:"Instrument Serif","Fraunces",serif;
  --sans:"Inter",-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
[data-theme="dark"]{--bg:#0e0e0e;--bg-raised:#171717;--bg-inset:#1a1a1a;--ink:#f0ede5;--ink-soft:#c7c2b5;--ink-mute:#8a8578;--rule:#f0ede5;--rule-soft:#2a2a2a;--accent:#ff5a3a;--accent-ink:#0e0e0e;--chip-bg:#f0ede5;--chip-ink:#0e0e0e}
[data-theme="contrast"]{--bg:#fff;--bg-raised:#f4f4f4;--bg-inset:#fafafa;--ink:#000;--ink-soft:#1c1c1c;--ink-mute:#6b6b6b;--rule:#000;--rule-soft:#d4d4d4;--accent:#0a4eff;--accent-ink:#fff;--chip-bg:#000;--chip-ink:#fff}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01";
}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ========= Masthead ========= */
.masthead{border-bottom:1px solid var(--rule);background:var(--bg);position:sticky;top:0;z-index:40;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.masthead__inner{max-width:1400px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:16px;font-weight:500;letter-spacing:-0.01em;color:var(--ink)}
.wordmark__glyph{width:26px;height:26px;border:1.5px solid var(--ink);border-radius:50%;position:relative}
.wordmark__glyph::before,.wordmark__glyph::after{content:"";position:absolute;inset:4px;border:1.5px solid var(--ink);border-radius:50%;opacity:.5}
.wordmark__glyph::after{inset:8px;opacity:.25}
.wordmark small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-top:2px}
.nav{display:flex;gap:26px;font-family:var(--sans);font-size:13px}
.nav a{color:var(--ink-soft);padding-bottom:3px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink)}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--rule);background:transparent;cursor:pointer;color:var(--ink);transition:all .15s}
.iconbtn:hover{background:var(--ink);color:var(--bg)}
.iconbtn svg{width:15px;height:15px}

/* ========= Hero ========= */
.hero{max-width:1400px;margin:0 auto;padding:56px 28px 44px;border-bottom:1px solid var(--rule)}
.hero__meta{display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:24px;flex-wrap:wrap;align-items:center}
.chip{background:var(--chip-bg);color:var(--chip-ink);padding:5px 10px 4px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.hero__title{
  font-family:var(--serif);font-weight:360;font-variation-settings:"SOFT" 40;
  font-size:clamp(48px,9vw,148px);line-height:.92;letter-spacing:-0.04em;
  margin:0 0 28px;max-width:14ch;text-wrap:balance;
}
.hero__title em{font-family:var(--italic);font-style:italic;color:var(--accent);font-weight:400}
.hero__deck{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ink-soft);max-width:52ch;font-weight:380;margin:0 0 36px}
.hero__stats{display:flex;gap:40px;padding-top:22px;border-top:1px solid var(--rule-soft);flex-wrap:wrap}
.hstat{display:flex;flex-direction:column;gap:4px}
.hstat__num{font-family:var(--serif);font-size:34px;font-weight:400;letter-spacing:-0.02em;line-height:1}
.hstat__num sup{font-size:.45em;color:var(--accent);vertical-align:top}
.hstat__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}

/* ========= Featured ========= */
.featured{max-width:1400px;margin:0 auto;padding:56px 28px;display:grid;grid-template-columns:1.5fr 1fr;gap:48px;border-bottom:1px solid var(--rule)}
@media(max-width:900px){.featured{grid-template-columns:1fr}}
.feat__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.feat__kicker::before{content:"";width:22px;height:1px;background:var(--accent)}
.feat__card{display:block;cursor:pointer}
.feat__card:hover .feat__title{color:var(--accent)}
.feat__title{font-family:var(--serif);font-weight:420;font-size:clamp(32px,3.6vw,52px);line-height:1.02;letter-spacing:-0.025em;margin:0 0 18px;text-wrap:balance;transition:color .15s}
.feat__title em{font-family:var(--italic);font-style:italic;color:var(--accent);font-weight:400}
.feat__dek{font-size:19px;line-height:1.5;color:var(--ink-soft);margin:0 0 20px;max-width:56ch}
.feat__meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);display:flex;gap:18px}
.feat__visual{aspect-ratio:4/5;background:var(--bg-inset);border:1px solid var(--rule);position:relative;overflow:hidden}
.feat__visual svg{width:100%;height:100%}

/* ========= Sections ========= */
.section{max-width:1400px;margin:0 auto;padding:56px 28px;border-bottom:1px solid var(--rule)}
.section__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.section__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.section__kicker::before{content:"";width:22px;height:1px;background:var(--accent)}
.section__title{font-family:var(--serif);font-weight:420;font-size:clamp(30px,3.4vw,44px);line-height:1.04;letter-spacing:-0.02em;margin:0;text-wrap:balance;max-width:16ch}
.section__title em{font-family:var(--italic);font-style:italic;color:var(--accent)}

/* ========= Grid ========= */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.card{display:block;padding:28px 24px 32px;border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);transition:background .15s}
.card:nth-child(3n){border-right:none}
.card:hover{background:var(--bg-raised)}
.card:hover .card__title{color:var(--accent)}
.card__type{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;padding:3px 8px 2px;border:1px solid var(--accent);border-radius:999px}
.card__title{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.15;letter-spacing:-0.015em;margin:0 0 10px;text-wrap:balance;transition:color .15s}
.card__dek{font-size:15px;line-height:1.45;color:var(--ink-soft);margin:0 0 16px}
.card__meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);display:flex;gap:14px}
.card__meta b{color:var(--ink);font-weight:500}

/* ========= Newsletter ========= */
.news{background:var(--ink);color:var(--bg);margin-top:0}
.news__inner{max-width:1400px;margin:0 auto;padding:72px 28px;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end}
@media(max-width:800px){.news__inner{grid-template-columns:1fr}}
.news__title{font-family:var(--serif);font-weight:360;font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-0.025em;margin:0 0 18px}
.news__title em{font-family:var(--italic);font-style:italic;color:var(--accent)}
.news__dek{font-size:17px;line-height:1.5;opacity:.8;margin:0;max-width:48ch}
.news__form{display:flex;gap:8px;flex-wrap:wrap}
.news__form input{flex:1;min-width:220px;background:transparent;border:none;border-bottom:1px solid var(--bg);color:var(--bg);padding:14px 4px;font-family:var(--sans);font-size:16px;outline:none}
.news__form input::placeholder{color:var(--ink-mute);opacity:.7}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:500;padding:12px 18px;border-radius:999px;border:none;cursor:pointer;transition:all .15s}
.btn:hover{background:var(--accent);color:var(--accent-ink)}

/* ========= Footer ========= */
.footer{border-top:1px solid var(--rule);padding:48px 28px 40px;max-width:1400px;margin:0 auto;font-family:var(--sans);font-size:13px;color:var(--ink-mute);display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.footer a{color:var(--ink-soft);margin-right:20px}

/* ========= Article page ========= */
.progress-bar{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0;z-index:100;transition:width .1s}

.article-hero{max-width:1400px;margin:0 auto;padding:56px 28px 44px;border-bottom:1px solid var(--rule)}
.article-hero__inner{max-width:780px}
.article-hero__meta{display:flex;gap:16px;align-items:center;margin-bottom:22px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.article-hero__title{font-family:var(--serif);font-weight:380;font-variation-settings:"SOFT" 40;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-0.035em;margin:0 0 20px;text-wrap:balance}
.article-hero__deck{font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--ink-soft);margin:0 0 24px;max-width:60ch}
.article-hero__stats{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);display:flex;gap:12px}

.article-layout{max-width:1400px;margin:0 auto;padding:48px 28px;display:grid;grid-template-columns:200px 1fr;gap:56px}
@media(max-width:1000px){.article-layout{grid-template-columns:1fr}.toc{display:none}}

/* TOC */
.toc{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto}
.toc__title{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px}
.toc__link{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-mute);padding:6px 0;border-left:2px solid var(--rule-soft);padding-left:12px;transition:all .15s}
.toc__link:hover{color:var(--ink)}
.toc__link.active{color:var(--accent);border-left-color:var(--accent)}

/* Article body prose */
.article-body{max-width:680px;font-size:18px;line-height:1.7}
.article-body h2{font-family:var(--serif);font-weight:480;font-size:clamp(26px,2.5vw,34px);line-height:1.1;letter-spacing:-0.02em;margin:56px 0 20px;padding-top:32px;border-top:1px solid var(--rule-soft)}
.article-body h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;margin:40px 0 14px}
.article-body p{margin:0 0 22px}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:24px}
.article-body li{margin-bottom:8px}
.article-body blockquote{margin:32px 0;padding:20px 24px;background:var(--bg-raised);border-left:3px solid var(--accent);font-style:italic}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article-body strong{font-weight:600;color:var(--ink)}
.article-body code{font-family:var(--mono);font-size:.85em;background:var(--bg-raised);padding:2px 6px;border-radius:3px}
.article-body pre{background:var(--bg-inset);border:1px solid var(--rule-soft);padding:20px;overflow-x:auto;font-family:var(--mono);font-size:14px;line-height:1.5;margin:0 0 22px;border-radius:4px}
.article-body img{max-width:100%;height:auto;border:1px solid var(--rule-soft);margin:24px 0}
.article-body table{width:100%;border-collapse:collapse;font-size:15px;margin:24px 0}
.article-body th,.article-body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule-soft)}
.article-body th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}

/* FAQ */
.faq-section{max-width:780px;margin:64px auto 0;padding:48px 28px;border-top:1px solid var(--rule)}
.faq-section__title{font-family:var(--serif);font-weight:420;font-size:28px;letter-spacing:-0.015em;margin:0 0 28px}
.faq-item{border-bottom:1px solid var(--rule-soft);padding:18px 0}
.faq-item__q{font-family:var(--sans);font-size:16px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item__q::-webkit-details-marker{display:none}
.faq-item__q::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--ink-mute);transition:transform .2s}
.faq-item[open] .faq-item__q::after{content:"\2212"}
.faq-item__a{padding-top:12px;font-size:16px;line-height:1.6;color:var(--ink-soft)}

/* ========= Mobile ========= */
@media(max-width:600px){
  .masthead__inner{padding:12px 16px}
  .nav{display:none}
  .hero{padding:36px 16px 32px}
  .featured{padding:36px 16px}
  .section{padding:36px 16px}
  .news__inner{padding:48px 16px}
  .footer{padding:32px 16px}
  .article-hero{padding:36px 16px 32px}
  .article-layout{padding:32px 16px}
}