/* VAIRALITY — house styles. Dark-first; long-form reads on paper. */
:root{
  --ink:#111111; --ink-2:#1C1C1C; --line-d:#34332F;
  --paper:#F4F1EA; --paper-2:#E9E5DC; --line-p:#D3CEC3;
  --text-p:#1E1D1B; --muted-p:#4A4843; --muted-d:#CFCAC0;
  --green:#1FA36B; --green-ink:#167A50; --violet:#6B4EFF; --violet-d:#7E66FF;
  --serif:'Fraunces',Georgia,serif; --body:'Newsreader',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:18px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.center{text-align:center}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--green);color:var(--ink);padding:8px 12px}
.green{color:var(--green)!important}

/* ---------- wordmark ---------- */
.wordmark{font-family:var(--serif);font-weight:900;letter-spacing:-.035em;font-variation-settings:'opsz' 144;line-height:.9;white-space:nowrap}
.wm-a{color:var(--green)} .wm-i{color:var(--violet-d)}
.paper .wm-i,.footer .wm-i{color:var(--violet-d)}

/* ---------- top bar & masthead ---------- */
.topbar{border-bottom:1px solid var(--line-d);font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.topbar-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:11px;padding-bottom:11px}
.topbar a{color:var(--green);text-decoration:none}
.masthead{background:var(--ink)}
.masthead-link{text-decoration:none;color:var(--paper);display:block}
.masthead-big .wrap{text-align:center;padding-top:30px}
.masthead-big .wordmark{font-size:clamp(58px,12.5vw,168px)}
.masthead-tag{margin:12px 0 0;font:12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d)}
.masthead-small .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-top:16px;padding-bottom:16px}
.masthead-small .wordmark{font-size:40px}
.masthead-small{border-bottom:1px solid var(--line-d)}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;padding:13px 0;color:var(--paper)}
.nav a:hover{color:var(--green)}
.masthead-big .nav{margin-top:24px;border-top:2px solid var(--paper);border-bottom:1px solid var(--line-d)}

/* ---------- shared type ---------- */
.hl{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(40px,6vw,84px);line-height:.95;letter-spacing:-.03em;font-variation-settings:'opsz' 144}
.hl a{text-decoration:none}
.dek{margin:16px 0 0;font-size:clamp(19px,2vw,23px);line-height:1.4;color:var(--muted-d);max-width:640px}
.center .dek{margin-left:auto;margin-right:auto}
.kicker,.kicker-plain{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font:600 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--paper)}
.kicker-dot{width:10px;height:10px;background:var(--green);flex:none}
.byline{margin:20px 0 0;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:2px solid transparent;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;background:none;color:inherit}
.btn-solid{background:var(--paper);color:var(--ink)}
.btn-line{border-color:var(--paper);color:var(--paper)}
.btn-line-light{border-color:var(--paper);color:var(--paper)}
.btn-green{background:var(--green);color:var(--ink)}
.btn-sm{min-height:36px;padding:0 12px;font-size:11px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- visuals ---------- */
.duo{position:relative;overflow:hidden;background:var(--green)}
.duo-violet{background:var(--violet)}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.95);mix-blend-mode:multiply}
.artbox{background:var(--ink);overflow:hidden}
.growth-art{display:block;width:100%;height:100%}

/* ---------- homepage ---------- */
.lead{padding:56px 0}
.lead-grid{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.lead-copy{flex:1 1 460px;min-width:0}
.lead-copy .hl{font-style:italic;font-weight:800}
.lead-cover{flex:1 1 340px;max-width:470px;aspect-ratio:3/4;background:#0B0B0B;border:1px solid var(--line-d);box-shadow:18px 18px 0 var(--green);display:flex;flex-direction:column;padding:22px;text-decoration:none;color:var(--paper)}
.cover-mark .wordmark{font-size:clamp(40px,5vw,56px)}
.cover-rule{height:1px;background:var(--paper);margin:12px 0 0}
.cover-art{flex:1;min-height:0;display:block;margin:10px -22px}
.cover-hl{font:italic 800 clamp(26px,3vw,36px)/1 var(--serif);letter-spacing:-.02em}
.band{background:var(--ink-2);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);padding:52px 0}
.band-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:22px}
.band-head.dark{border-bottom:2px solid var(--paper);padding-bottom:12px}
.band-title{margin:0;font:900 clamp(32px,4.5vw,56px)/1 var(--serif);letter-spacing:-.03em}
.band-link,.band-note{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);padding:12px 0}
.band-link{color:var(--paper)}
.rank{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}
.rank a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:16px 0;border-bottom:1px solid var(--line-d);text-decoration:none}
.rank a:hover .rank-hl{color:var(--green)}
.rank-n{width:56px;font:900 36px/1 var(--serif);letter-spacing:-.03em}
.rank-t{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:4px}
.rank-hl{font:700 22px/1.2 var(--serif)}
.rank-sec{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}
.rank-art{width:160px;height:40px}
.latest{padding:56px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:40px 28px}
.card a{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.card-visual{aspect-ratio:4/3}
.card-kicker{margin:4px 0 0;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.card-hl{margin:0;font:800 26px/1.05 var(--serif);letter-spacing:-.02em}
.card a:hover .card-hl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.card-dek{margin:0;font-size:17px;line-height:1.45;color:var(--muted-d)}
.newsletter{background:var(--paper);color:var(--ink)}
.news-in{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;padding-top:52px;padding-bottom:52px}
.newsletter .band-title.light{color:var(--ink)}
.news-copy{flex:1 1 380px}.news-copy p{margin:10px 0 0;color:var(--muted-p)}
.news-form{flex:1 1 380px;display:flex;flex-direction:column;gap:8px}
.news-form label{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.news-row{display:flex;flex-wrap:wrap;gap:10px}
.news-row input[type=email]{flex:1 1 220px;min-height:48px;padding:0 14px;border:2px solid var(--ink);background:#fff;font:17px var(--body);color:var(--ink)}
.news-ok{margin:4px 0 0;font:600 13px var(--mono);color:var(--green-ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.empty{padding:120px 0}
.section-head{padding:56px 0 8px}
.pager{display:flex;gap:12px;margin-top:40px}

/* ---------- article heroes ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink)}
.hero-opener{min-height:min(88vh,860px);display:flex;align-items:flex-end}
.hero-opener .hero-bg{position:absolute;inset:0}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 45%,rgba(10,10,10,0) 75%)}
.hero-copy{position:relative;padding-top:120px;padding-bottom:56px;width:100%}
.hero-opener .hl{font-size:clamp(44px,7vw,104px);max-width:980px;font-style:italic;font-weight:800}
.hero-bigstat{padding:72px 0}
.hero-art-faint{position:absolute;inset:0;opacity:.35}
.bigstat-grid{position:relative;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end}
.bigstat-num{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px;container-type:inline-size}
/* The number sizes itself to its column so it never breaks across lines. */
.stat-value{font:900 72px/.84 var(--serif);font-size:min(240px,calc(100cqi / (var(--chars) * .68)));letter-spacing:-.05em;color:var(--green);font-variation-settings:'opsz' 144;white-space:nowrap}
.stat-label{font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.bigstat-copy{flex:1 1 420px}
.bigstat-copy .hl{font-size:clamp(36px,4.5vw,64px)}
.hero-split{display:flex;flex-wrap:wrap;background:var(--paper);color:var(--ink)}
.split-visual{flex:1 1 480px;min-height:420px}
.split-visual>div{height:100%;min-height:420px}
.split-copy{flex:1 1 480px;padding:64px 48px;display:flex;flex-direction:column;justify-content:center}
.hero-split .kicker{color:var(--ink)}
.hero-split .dek{color:var(--muted-p)} .hero-split .byline{color:var(--muted-p)}
.hero-list{padding:80px 0 64px}
.hero-art-side{position:absolute;right:0;top:0;bottom:0;width:55%;opacity:.8}
.list-head{position:relative}
.list-count{display:block;font:900 clamp(110px,16vw,220px)/.8 var(--serif);letter-spacing:-.05em;color:var(--green);margin-bottom:18px}
.list-head .hl,.list-head .dek{max-width:760px}
.hero-brief .brief-band{height:180px}
.hero-brief .wrap{padding-top:48px;padding-bottom:40px}
.hero-brief .hl{font-size:clamp(36px,5vw,62px)}
.hero-essay{padding-top:72px}
.hero-essay .hl{font-size:clamp(42px,6.5vw,92px)}
.essay-band{margin-top:48px;height:clamp(260px,40vw,520px)}
.essay-band>div{height:100%}

/* ---------- article body on paper ---------- */
.paper{background:var(--paper);color:var(--text-p)}
.body{padding-top:48px;padding-bottom:64px;font-size:20px;line-height:1.6}
.body p{margin:0 0 22px}
.body h2{margin:44px 0 16px;font:800 30px/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.body a{color:var(--ink);text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px}
.dropcap::first-letter{float:left;font:900 86px/.78 var(--serif);color:var(--green-ink);padding:8px 12px 0 0}
.pull{margin:40px 0;padding:22px 0;border-top:3px solid var(--violet);border-bottom:3px solid var(--violet);font:italic 600 clamp(26px,3vw,34px)/1.2 var(--serif);color:var(--ink)}
.item{display:flex;gap:20px;padding:24px 0;border-top:1px solid var(--line-p)}
.item-n{font:900 46px/.9 var(--serif);color:var(--green-ink);letter-spacing:-.03em;flex:none;width:64px}
.item h3{margin:0 0 8px;font:800 25px/1.15 var(--serif);color:var(--ink)}
.item p{margin:0}
.credit{margin:0 0 28px;font:11px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted-p)}
.credit a{color:var(--muted-p)}
.sources{margin-top:48px;padding-top:20px;border-top:2px solid var(--ink);font-size:15px;line-height:1.5}
.sources h2{margin:0 0 12px;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.sources ol{margin:0 0 14px;padding-left:20px}
.sources li{margin:0 0 6px}
.sources span{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-p)}
.sources p{color:var(--muted-p);margin:0}
.plain h2{font-size:26px}
.more{padding:56px 0;background:var(--ink)}
.more .band-title{margin-bottom:28px}

/* ---------- growth line: reading progress as a rising chart ---------- */
.growth-line{position:fixed;left:18px;top:120px;bottom:40px;width:2px;background:rgba(244,241,234,.14);z-index:20;pointer-events:none}
.gl-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--green)}
.gl-dot{position:absolute;left:-4px;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--violet-d);transform:translateY(50%)}
@media (max-width:1100px){
  .growth-line{left:0;right:0;top:0;bottom:auto;width:auto;height:3px}
  .gl-fill{top:0;bottom:0;right:auto;width:0;height:auto}
  .gl-dot{display:none}
}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line-d)}
.footer-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;padding-top:40px;padding-bottom:48px}
.footer-mark{text-decoration:none;color:var(--paper)}.footer-mark .wordmark{font-size:32px}
.footer-nav{display:flex;flex-wrap:wrap;gap:0 24px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.footer-nav a{text-decoration:none;padding:12px 0}
.footer-small{width:100%;margin:0;font:11px var(--mono);letter-spacing:.08em;color:var(--muted-d)}

/* ---------- preview + desk ---------- */
.preview-bar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--violet);color:#fff;padding:10px 24px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.preview-btns{display:flex;gap:10px}
.preview-btns .btn{min-height:40px}
.desk{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;gap:20px}
.desk-wide{justify-content:flex-start;align-items:stretch;max-width:1240px;margin:0 auto}
.desk-card{width:100%;max-width:520px;background:var(--ink-2);border:1px solid var(--line-d);padding:32px;display:flex;flex-direction:column;gap:14px;align-self:center}
.desk-card h1{margin:0;font:900 34px/1.05 var(--serif);letter-spacing:-.02em}
.desk-card p{margin:0;color:var(--muted-d)}
.desk-card label{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.desk-card input{min-height:48px;padding:0 14px;border:2px solid var(--paper);background:var(--ink);color:var(--paper);font:17px var(--body)}
.desk-card form{margin:0}
.desk-mark .wordmark{font-size:30px}
.desk-top{display:flex;justify-content:space-between;align-items:center;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.desk-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.desk-stat{font:12px var(--mono);color:var(--muted-d)}
.flash{margin:0;padding:12px 16px;background:var(--green);color:var(--ink);font:600 13px var(--mono)}
.err{color:#FF8A75!important}
.desk-table{width:100%;border-collapse:collapse;font-size:16px}
.desk-table th{text-align:left;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);border-bottom:1px solid var(--line-d);padding:8px}
.desk-table td{border-bottom:1px solid var(--line-d);padding:10px 8px;vertical-align:top}
.desk-table a{text-decoration:none;font-weight:600}
.desk-table small{color:var(--muted-d);font-family:var(--mono);font-size:11px}
.acts{display:flex;flex-wrap:wrap;gap:6px}
.inline{display:inline;margin:0}
.pill{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line-d)}
.pill-published{background:var(--green);color:var(--ink);border-color:var(--green)}
.pill-draft{border-color:var(--violet-d);color:var(--violet-d)}
.desk-h2{margin:24px 0 0;font:900 26px var(--serif)}
.desk-log{list-style:none;margin:0;padding:0;font:13px/1.5 var(--mono);color:var(--muted-d)}
.desk-log li{padding:6px 0;border-bottom:1px solid var(--line-d)}
.lv-error{color:#FF8A75}.lv-warn{color:#FFC93C}
@media (max-width:720px){
  .desk-table thead{display:none}
  .desk-table tr{display:block;border-bottom:1px solid var(--line-d);padding:8px 0}
  .desk-table td{display:block;border:0;padding:4px 0}
  .split-copy{padding:40px 24px}
  .hero-art-side{width:100%;opacity:.3}
  .rank-art{display:none}
  .topbar-in>span{display:none}
  .split-visual,.split-visual>div{min-height:280px}
  .hero-opener{min-height:78vh}
  body{font-size:17px}
  .body{font-size:18px}
}

/* =========================== PHASE 2 =========================== */
.nav .nav-index{color:var(--green)}

/* ---------- the Vairality Index ---------- */
.vindex{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}
.vi-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:16px 0;border-bottom:1px solid var(--line-d)}
.vi-rank{width:56px;font:900 36px/1 var(--serif);letter-spacing:-.03em}
.vi-name{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px}
.vi-co{font:800 24px/1.15 var(--serif);letter-spacing:-.01em}
.vi-link{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);text-decoration:none;padding:4px 0}
.vi-link:hover{color:var(--green)}
.vi-count{display:flex;align-items:baseline;gap:8px;width:190px}
.vi-num{font:900 30px/1 var(--serif)}
.vi-unit{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d)}
.vi-chg{width:90px;font:600 14px var(--mono);text-align:right}
.vi-up,.vi-new{color:var(--green)} .vi-down{color:#FF8A75} .vi-flat{color:var(--muted-d)}
.vi-spark{width:160px;height:40px}
.spark{display:block}
.index-hero{padding:56px 0 24px}
.index-body{padding:8px 0 64px}
.method{margin-top:48px;max-width:760px;color:var(--muted-d);font-size:17px}
.method h2{margin:0 0 10px;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.method p{margin:0 0 12px}
.method-sources{font:12px/1.6 var(--mono)}

/* ---------- ad slots (framed, labeled, never full-bleed) ---------- */
.adslot{border:1px solid var(--line-d);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.adslot-article{margin:36px 0;border-color:var(--line-p)}
.adslot-label{margin:0;font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d)}
.adslot-article .adslot-label{color:var(--muted-p)}
.adslot-sponsor a{display:flex;flex-direction:column;gap:8px;text-decoration:none;padding:6px 0}
.sponsor-name{font:900 26px/1.05 var(--serif)}
.sponsor-line{font-size:17px;line-height:1.45;color:var(--muted-d)}
.adslot-article .sponsor-line{color:var(--muted-p)}
.sponsor-cta{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.adslot-article .sponsor-cta{color:var(--green-ink)}

/* ---------- issues archive ---------- */
.issue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:40px 28px}
.issue-tile{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.issue-tile:hover .mini-cover{box-shadow:12px 12px 0 var(--green)}
.it-meta{font:11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d)}
.mini-cover{aspect-ratio:3/4;background:#0B0B0B;border:1px solid var(--line-d);display:flex;flex-direction:column;padding:14px;transition:box-shadow .2s;box-shadow:8px 8px 0 var(--green)}
.mc-top{display:flex;justify-content:space-between;font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.mc-mark .wordmark{font-size:clamp(30px,3.2vw,40px)}
.mc-mark{margin-top:6px}
.mc-rule{height:1px;background:var(--paper);margin-top:8px}
.mc-art{flex:1;min-height:0;display:block;margin:6px -14px}
.mc-hl{font:italic 800 20px/1.02 var(--serif);letter-spacing:-.02em}

/* ---------- the flip edition ---------- */
.issue-head{padding:40px 0 8px}
.issue-head .band-title{max-width:900px}
.stage{padding:32px 16px 56px;background:radial-gradient(ellipse at center,#232320 0%,var(--ink) 70%)}
.book-wrap{max-width:1520px;margin:0 auto}
.book{margin:0 auto;visibility:hidden}
.book.is-ready{visibility:visible}
.book-ctl{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:24px}
.book-ctl .btn:disabled{opacity:.35;cursor:default}
.book-count{min-width:170px;text-align:center;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}
.book-hint{text-align:center;margin:12px 0 0;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8A867D}

/* pages scale their type with their own width */
.pg{overflow:hidden;container-type:inline-size}
.pg-in{position:relative;height:100%;display:flex;flex-direction:column;padding:7cqw 7cqw 5cqw}
.pg-dark{background:#0E0E0E;color:var(--paper)}
.pg-paper{background:var(--paper);color:var(--text-p)}
.pg-run{display:flex;justify-content:space-between;gap:2cqw;padding-bottom:2cqw;border-bottom:.4cqw solid var(--ink);font:600 2.1cqw var(--mono);letter-spacing:.14em;text-transform:uppercase}
.pg-run-d{border-color:var(--paper)}
.pg-folio{margin-top:auto;display:flex;justify-content:space-between;padding-top:3cqw;font:2cqw var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-p)}
.pg-folio-d{color:#9C978D}

/* cover */
.cv-top,.cv-sub{display:flex;justify-content:space-between;font:600 2.2cqw var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d)}
.cv-mark .wordmark{font-size:17cqw}
.cv-mark{margin-top:1.5cqw}
.cv-rule{height:.35cqw;background:var(--paper);margin:2.5cqw 0 1.5cqw}
.cv-art{flex:1;min-height:0;display:block;margin:2cqw -7cqw}
.cv-kicker{font:600 2.3cqw var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.cv-hl{margin-top:1.5cqw;font:italic 800 9cqw/.95 var(--serif);letter-spacing:-.025em}
.cv-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3cqw;margin-top:4cqw;padding-top:2.5cqw;border-top:.2cqw solid rgba(244,241,234,.4)}
.cv-lines span{font:700 2.9cqw/1.15 var(--serif)}
.cv-lines em{display:block;font:600 1.8cqw var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);margin-bottom:1cqw}

/* contents */
.ct-title{margin:5cqw 0 3cqw;font:900 15cqw/.85 var(--serif);letter-spacing:-.04em;color:var(--ink)}
.ct-list{list-style:none;margin:0;padding:0}
.ct-list li{display:flex;gap:4cqw;padding:2.6cqw 0;border-bottom:.2cqw solid var(--line-p)}
.ct-n{font:900 6cqw/.9 var(--serif);width:9cqw;flex:none;color:var(--ink)}
.ct-t{font:2.9cqw/1.35 var(--body);color:var(--muted-p)}
.ct-t b{display:block;font:700 3.5cqw/1.15 var(--serif);color:var(--ink);margin-bottom:.6cqw}

/* index page in the book */
.ix-title{margin:5cqw 0 3cqw;font:900 13cqw/.85 var(--serif);letter-spacing:-.04em}
.ix-list{list-style:none;margin:0;padding:0}
.ix-list li{display:flex;align-items:baseline;gap:3cqw;padding:2.4cqw 0;border-bottom:.2cqw solid #34332F}
.ix-n{font:900 6cqw/.9 var(--serif);width:7cqw}
.ix-co{flex:1;font:800 4.4cqw/1.1 var(--serif)}
.ix-c{font:2.4cqw var(--mono);color:var(--muted-d)}
.ix-more{margin-top:3cqw;font:600 2.2cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green);text-decoration:none}
.ix-note{font:4cqw/1.4 var(--body);color:var(--muted-d)}

/* story opener page */
.pg-open .pg-in{padding:0}
.op-visual{position:absolute;inset:0;opacity:.85}
.op-visual>div{height:100%}
.pg-open .pg-in::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.95) 0%,rgba(10,10,10,.6) 40%,rgba(10,10,10,0) 70%)}
.op-stat,.op-kicker,.op-hl,.pg-open .pg-folio{position:relative;z-index:1;margin-left:7cqw;margin-right:7cqw}
.op-stat{margin-top:auto;font:900 20cqw/.85 var(--serif);letter-spacing:-.05em;color:var(--green);white-space:nowrap}
.op-kicker{margin-top:auto;font:600 2.4cqw var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.op-stat+.op-kicker{margin-top:3cqw}
.op-hl{margin-top:2cqw;font:900 9.5cqw/.95 var(--serif);letter-spacing:-.03em}
.pg-open .pg-folio{margin-top:5cqw;margin-bottom:5cqw}

/* story text page */
.tx-dek{margin-top:5cqw;font:italic 4.4cqw/1.3 var(--body);color:var(--ink)}
.tx-body{display:flex;flex-direction:column;gap:2.4cqw;margin-top:4cqw;font:3.25cqw/1.55 var(--body);color:var(--text-p)}
.tx-drop::first-letter{float:left;font:900 11cqw/.8 var(--serif);color:var(--green-ink);padding:1cqw 1.6cqw 0 0}
.tx-more{margin-top:4cqw;align-self:flex-start;font:600 2.4cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:.4cqw solid var(--green);padding:1cqw 0}

/* back cover */
.pg-back .pg-in{justify-content:center;gap:4cqw}
.bk-mark .wordmark{font-size:13cqw}
.bk-hl{font:900 9cqw/.95 var(--serif);letter-spacing:-.03em}
.bk-p{font:4cqw/1.4 var(--body);color:var(--muted-d)}
.bk-btn{align-self:flex-start;background:var(--green);color:var(--ink);padding:3cqw 5cqw;font:600 2.6cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.bk-foot{position:absolute;bottom:5cqw;left:7cqw;font:2cqw var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9C978D}

/* ---------- desk panels ---------- */
.desk-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.desk-panel{border:1px solid var(--line-d);padding:18px;background:var(--ink-2)}
.desk-panel h2{margin:0 0 8px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.desk-panel p{margin:0 0 8px;color:var(--muted-d);font-size:16px}
.desk-panel a{color:var(--paper)}

@media (max-width:720px){
  .vi-count{width:auto}
  .vi-spark{display:none}
  .vi-chg{width:auto;text-align:left}
  .vi-rank{width:44px;font-size:28px}
}
.book-ctl .btn{white-space:nowrap}
@media (max-width:480px){.book-ctl{gap:8px}.book-ctl .btn{padding:0 14px}.book-count{min-width:0;flex:1}}