/* ───────────────────────────────────────────────────────────────────
   payas.kulhari // writing — reading page styles
   shared by every article + the writing index
─────────────────────────────────────────────────────────────────── */

:root{
  --bg:#0a0a0a;
  --bg-1:#111111;
  --bg-2:#161616;
  --line:#1f1f1f;
  --line-2:#2a2a2a;
  --fg:#fafaf7;
  --fg-dim:#9a9a93;
  --fg-mute:#5a5a55;
  --accent:#ffffff;
  --warn:#e6b450;
  --good:#7cff6b;
  --read:#e8e4d8;          /* body type — slightly warmer than --fg */
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --sans:'Geist', ui-sans-serif, system-ui, sans-serif;
  --serif:'Newsreader', 'Source Serif Pro', ui-serif, Georgia, serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--warn);color:#0a0a0a}

/* film grain + scanlines, matching the home page */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,0.04) 0,rgba(255,255,255,0.04) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:98;
  background:radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.04), transparent 60%);
}
body.pk-film .grain{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:97;opacity:0.55;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px;
}

.wrap{max-width:1280px;margin:0 auto;padding:0 32px}

/* ─── TOP BAR ───────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,10,10,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 32px;max-width:1280px;margin:0 auto;font-size:11px;letter-spacing:0.02em}
.topbar-left{display:flex;align-items:center;gap:24px;color:var(--fg-dim)}
.topbar-left .logo{color:var(--fg);font-weight:500}
.topbar-left .logo .dot{display:inline-block;width:7px;height:7px;background:var(--good);border-radius:50%;margin-right:8px;box-shadow:0 0 8px var(--good);vertical-align:1px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.topbar-nav{display:flex;gap:18px;color:var(--fg-dim)}
.topbar-nav a{position:relative;padding:4px 0;transition:color .15s}
.topbar-nav a:hover{color:var(--fg)}
.topbar-nav a.on{color:var(--fg)}
.topbar-nav a::before{content:"[ ";opacity:0;transition:opacity .15s}
.topbar-nav a::after{content:" ]";opacity:0;transition:opacity .15s}
.topbar-nav a:hover::before,.topbar-nav a:hover::after,.topbar-nav a.on::before,.topbar-nav a.on::after{opacity:1}
.topbar-right{display:flex;gap:14px;color:var(--fg-mute);font-size:10px}

/* ─── READING PROGRESS BAR ─────────────────────────────────────── */
.progress{position:fixed;top:44px;left:0;right:0;height:1px;background:transparent;z-index:60}
.progress .fill{height:100%;background:var(--warn);width:0%;transition:width .08s linear}

/* ─── ARTICLE HEADER ──────────────────────────────────────────── */
.art-head{padding:80px 0 56px;border-bottom:1px solid var(--line);position:relative}
.art-crumb{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--fg-mute);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:48px}
.art-crumb a{color:var(--fg-mute);transition:color .15s}
.art-crumb a:hover{color:var(--fg)}
.art-crumb .sep{color:var(--line-2)}
.art-crumb .type{color:var(--warn)}
.art-crumb .num{color:var(--fg-dim)}

.art-grid{display:grid;grid-template-columns:140px minmax(0,1fr);gap:40px;align-items:start}
.art-no{font-family:var(--sans);font-weight:300;letter-spacing:-0.04em;color:var(--fg);display:flex;flex-direction:column;align-items:flex-start;line-height:0.9}
.art-no .seg{font-size:64px}
.art-no .slash{color:var(--fg-mute);font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:400;margin:6px 0;padding:0 2px;border-top:1px solid var(--line);align-self:stretch}
.art-meta-side{margin-top:14px;display:flex;flex-direction:column;gap:8px;font-size:10px;letter-spacing:0.12em;color:var(--fg-mute);text-transform:uppercase}
.art-meta-side .row{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:6px}
.art-meta-side .row b{color:var(--fg-dim);font-weight:400}

.art-title{font-family:var(--sans);font-weight:300;font-size:72px;line-height:1;letter-spacing:-0.035em;color:var(--fg);max-width:900px;text-wrap:balance;margin-bottom:32px}
.art-title em{font-style:italic;color:var(--fg-dim)}
.art-dek{font-family:var(--sans);font-size:22px;line-height:1.4;font-weight:300;color:var(--fg-dim);max-width:720px;letter-spacing:-0.01em;margin-bottom:40px;text-wrap:pretty}
.art-byline{display:flex;flex-wrap:wrap;gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;font-size:11px;color:var(--fg-dim);letter-spacing:0.06em}
.art-byline .b{display:flex;gap:8px;align-items:center}
.art-byline .k{color:var(--fg-mute);text-transform:uppercase;letter-spacing:0.12em;font-size:10px}
.art-byline .v{color:var(--fg)}

/* ─── ARTICLE BODY ────────────────────────────────────────────── */
.art-body-wrap{padding:64px 0 96px;border-bottom:1px solid var(--line);position:relative}
.art-body-grid{display:grid;grid-template-columns:140px minmax(0,720px) 1fr;gap:40px;align-items:start}
.art-rail{position:sticky;top:88px;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute);display:flex;flex-direction:column;gap:6px}
.art-rail a{padding:6px 0;color:var(--fg-mute);border-left:1px solid var(--line);padding-left:12px;margin-left:-13px;transition:color .15s,border-color .15s}
.art-rail a:hover,.art-rail a.on{color:var(--fg);border-color:var(--warn)}
.art-rail .label{color:var(--fg-mute);margin-bottom:6px;opacity:0.6}

.art-body{font-family:var(--sans);color:var(--read);font-weight:300;font-size:19px;line-height:1.65;letter-spacing:-0.005em;max-width:680px}
.art-body > * + *{margin-top:1.25em}
.art-body p{text-wrap:pretty}
.art-body p em{font-style:italic;color:var(--fg-dim)}
.art-body p strong{color:var(--fg);font-weight:500;background:var(--bg-2);padding:1px 6px;border:1px solid var(--line-2);font-family:var(--mono);font-size:15px;letter-spacing:0;font-weight:400}
.art-body p code, .art-body code{font-family:var(--mono);font-size:16px;color:var(--warn);background:var(--bg-2);padding:1px 6px;border:1px solid var(--line-2)}
.art-body a:not(.no-u){color:var(--fg);border-bottom:1px solid var(--warn);transition:background .15s}
.art-body a:not(.no-u):hover{background:var(--warn);color:#0a0a0a}

/* drop cap on first paragraph */
.art-body .lead::first-letter{
  font-family:var(--sans);font-weight:300;float:left;font-size:84px;line-height:0.85;
  padding:8px 14px 0 0;color:var(--fg);
}

/* H2 — numbered section heads */
.art-body h2{
  font-family:var(--sans);font-weight:300;font-size:34px;line-height:1.1;letter-spacing:-0.03em;
  color:var(--fg);margin-top:2.2em;margin-bottom:0.6em;display:grid;grid-template-columns:80px 1fr;gap:24px;align-items:baseline;
  scroll-margin-top:80px;
}
.art-body h2 em{font-style:italic;color:var(--fg-dim)}
.art-body h2 .h-num{font-family:var(--mono);font-size:11px;color:var(--fg-mute);letter-spacing:0.18em;font-weight:400;text-transform:uppercase;padding-top:14px;border-top:1px solid var(--line)}
.art-body h3{font-family:var(--sans);font-weight:500;font-size:18px;color:var(--fg);margin-top:1.6em;margin-bottom:0.4em;text-transform:uppercase;letter-spacing:0.04em}

/* lists */
.art-body ul, .art-body ol{padding-left:0;list-style:none}
.art-body li{padding-left:28px;position:relative;margin-top:0.6em;text-wrap:pretty}
.art-body ul li::before{content:"—";position:absolute;left:0;color:var(--warn);font-family:var(--mono);font-weight:500}
.art-body ol{counter-reset:n}
.art-body ol li{counter-increment:n;padding-left:42px}
.art-body ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:5px;color:var(--warn);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.05em}

/* pull quote — breaks the column */
.art-body .pull{
  font-family:var(--sans);font-weight:300;font-style:italic;font-size:34px;line-height:1.15;letter-spacing:-0.025em;
  color:var(--fg);max-width:900px;margin:2em -120px;padding:36px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-wrap:balance;
}
.art-body .pull cite{display:block;margin-top:16px;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--fg-mute);letter-spacing:0.12em;text-transform:uppercase}

/* callout — terminal-style aside */
.art-body .callout{
  font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--fg-dim);
  background:#070707;border:1px solid var(--line-2);border-left:2px solid var(--warn);
  padding:18px 22px;margin:2em 0;max-width:680px;
}
.art-body .callout b{color:var(--warn);font-weight:500;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.1em;font-size:11px;display:block;margin-bottom:8px}
.art-body .callout em{font-style:normal;color:var(--fg)}

/* code block */
.art-body pre{
  font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--fg);
  background:#070707;border:1px solid var(--line-2);padding:18px 22px;overflow-x:auto;
  margin:1.5em 0;max-width:680px;
}
.art-body pre .c{color:var(--fg-mute)}
.art-body pre .k{color:var(--warn)}
.art-body pre .s{color:var(--good)}

/* figure / placeholder image */
.art-body figure{margin:2em -120px;border:1px solid var(--line-2);background:var(--bg-2);padding:0;max-width:900px}
.art-body figure .placeholder{
  aspect-ratio:16/9;background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 8px, transparent 8px, transparent 16px),
    var(--bg-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--fg-mute);letter-spacing:0.12em;text-transform:uppercase;
}
.art-body figcaption{font-family:var(--mono);font-size:11px;color:var(--fg-mute);padding:12px 18px;border-top:1px solid var(--line-2);letter-spacing:0.04em;text-transform:uppercase;display:flex;justify-content:space-between}

/* footnote refs */
.art-body sup.fn{font-family:var(--mono);font-size:10px;color:var(--warn);padding:0 2px;cursor:pointer;border-bottom:1px dotted var(--warn);font-weight:500;vertical-align:super;line-height:0}
.art-body sup.fn:hover{background:var(--warn);color:#0a0a0a;border-bottom-color:var(--warn)}

/* end-of-article mark */
.art-end{display:flex;align-items:center;gap:14px;margin-top:3em;font-family:var(--mono);font-size:11px;color:var(--fg-mute);letter-spacing:0.18em;text-transform:uppercase}
.art-end::before{content:"";flex:0 0 12px;height:12px;border:1px solid var(--warn);background:var(--warn);display:inline-block}
.art-end::after{content:"";flex:1;height:1px;background:var(--line)}

/* ─── FOOTNOTES BLOCK ─────────────────────────────────────────── */
.fn-block{padding:48px 0;border-bottom:1px solid var(--line)}
.fn-block-head{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;color:var(--fg-mute);text-transform:uppercase;margin-bottom:24px;display:flex;gap:14px;align-items:center}
.fn-block-head::after{content:"";flex:1;height:1px;background:var(--line)}
.fn-list{display:grid;grid-template-columns:140px minmax(0,720px) 1fr;gap:40px;align-items:start}
.fn-list ol{list-style:none;counter-reset:fn;font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--fg-dim);grid-column:2}
.fn-list ol li{counter-increment:fn;padding-left:36px;position:relative;margin-bottom:14px}
.fn-list ol li::before{content:counter(fn,decimal-leading-zero);position:absolute;left:0;top:1px;color:var(--warn);font-weight:500;letter-spacing:0.05em}

/* ─── ARTICLE TAGS ────────────────────────────────────────────── */
.tags{padding:40px 0;border-bottom:1px solid var(--line);display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.tags .tag-label{font-family:var(--mono);font-size:10px;color:var(--fg-mute);letter-spacing:0.18em;text-transform:uppercase;padding-top:6px}
.tags .tag-row{display:flex;flex-wrap:wrap;gap:6px}
.tags .tag-row span{font-family:var(--mono);font-size:12px;padding:6px 12px;border:1px solid var(--line-2);color:var(--fg-dim);background:var(--bg-1);transition:all .15s}
.tags .tag-row span:hover{color:var(--fg);border-color:var(--fg-dim)}

/* ─── PREV / NEXT ─────────────────────────────────────────────── */
.pn-nav{padding:64px 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line);margin:0 32px;max-width:calc(1280px - 0px);margin-left:auto;margin-right:auto;width:calc(100% - 64px)}
.pn-cell{background:var(--bg);padding:32px 28px;display:flex;flex-direction:column;gap:10px;min-height:140px;transition:background .15s;cursor:pointer;position:relative}
.pn-cell:hover{background:var(--bg-1)}
.pn-cell.disabled{pointer-events:none;opacity:0.35}
.pn-cell .dir{font-family:var(--mono);font-size:10px;color:var(--fg-mute);letter-spacing:0.18em;text-transform:uppercase;display:flex;justify-content:space-between}
.pn-cell .dir .arr{color:var(--fg-dim);transition:color .15s,transform .15s}
.pn-cell:hover .dir .arr{color:var(--warn);transform:translateX(4px)}
.pn-cell.prev:hover .dir .arr{transform:translateX(-4px)}
.pn-cell .ttl{font-family:var(--sans);font-weight:300;font-size:24px;line-height:1.15;letter-spacing:-0.02em;color:var(--fg);margin-top:auto;text-wrap:balance}
.pn-cell .ttl em{font-style:italic;color:var(--fg-dim)}
.pn-cell .stub{font-family:var(--mono);font-size:11px;color:var(--fg-mute);letter-spacing:0.06em}
.pn-cell.next{text-align:right}
.pn-cell.next .ttl{align-self:flex-end}

/* ─── BACK TO INDEX ───────────────────────────────────────────── */
.back-strip{padding:32px 0;text-align:center;border-bottom:1px solid var(--line)}
.back-strip a{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--fg-mute);text-transform:uppercase;display:inline-flex;gap:10px;align-items:center;padding:8px 16px;border:1px solid var(--line-2);transition:all .15s}
.back-strip a:hover{color:var(--bg);background:var(--warn);border-color:var(--warn)}

/* ─── INDEX PAGE specific ─────────────────────────────────────── */
.idx-hero{padding:80px 0 56px;border-bottom:1px solid var(--line)}
.idx-pre{font-size:11px;color:var(--fg-mute);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:28px;display:flex;align-items:center;gap:12px}
.idx-pre .bar{width:32px;height:1px;background:var(--fg-mute)}
.idx-title{font-family:var(--sans);font-weight:300;font-size:96px;line-height:0.95;letter-spacing:-0.04em;color:var(--fg);margin-bottom:24px;max-width:1100px;text-wrap:balance}
.idx-title em{font-style:italic;color:var(--fg-dim)}
.idx-sub{font-family:var(--mono);font-size:14px;color:var(--fg-dim);max-width:560px;line-height:1.65;margin-bottom:40px}
.idx-stats{display:flex;gap:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.idx-stats .item{display:flex;flex-direction:column;gap:4px}
.idx-stats .item .k{font-size:10px;color:var(--fg-mute);letter-spacing:0.1em;text-transform:uppercase}
.idx-stats .item .v{font-size:18px;color:var(--fg);font-weight:500;font-family:var(--mono)}

.idx-section{padding:64px 0}
.idx-section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px;border-bottom:1px solid var(--line);padding-bottom:18px}
.idx-section-head h3{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--fg-mute);text-transform:uppercase;font-weight:400}
.idx-section-head .count{font-family:var(--mono);font-size:11px;color:var(--fg-mute)}

.idx-list{display:grid;grid-template-columns:1fr;gap:0}
.idx-row{display:grid;grid-template-columns:80px 70px 1fr 220px 80px 100px;gap:24px;padding:28px 0;border-bottom:1px solid var(--line);align-items:center;cursor:pointer;transition:background .15s,padding .25s;position:relative;color:inherit}
.idx-row:hover{background:var(--bg-1);padding-left:16px;padding-right:16px}
.idx-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--warn);transition:width .25s}
.idx-row:hover::before{width:3px}
.idx-row .idx{font-size:11px;color:var(--fg-mute);letter-spacing:0.1em}
.idx-row .type{font-size:10px;letter-spacing:0.12em;color:var(--warn);text-transform:uppercase}
.idx-row .ttl{font-family:var(--sans);font-size:24px;font-weight:400;letter-spacing:-0.02em;color:var(--fg);line-height:1.15;transition:color .15s}
.idx-row:hover .ttl{color:var(--warn)}
.idx-row .ttl small{display:block;font-family:var(--mono);font-size:12px;color:var(--fg-dim);margin-top:6px;font-weight:400;letter-spacing:0;line-height:1.45}
.idx-row .dek{font-size:11px;color:var(--fg-dim);line-height:1.55}
.idx-row .read{font-size:11px;color:var(--fg-mute);letter-spacing:0.06em}
.idx-row .date{font-size:11px;color:var(--fg-dim);text-align:right;letter-spacing:0.06em}

/* FOOTER */
footer{padding:32px;border-top:1px solid var(--line);font-size:10px;color:var(--fg-mute);letter-spacing:0.08em;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono)}

/* responsive */
@media (max-width:960px){
  .art-grid,.art-body-grid,.fn-list{grid-template-columns:1fr;gap:24px}
  .art-rail{display:none}
  .art-title{font-size:48px}
  .idx-title{font-size:52px}
  .art-body .pull,.art-body figure{margin-left:0;margin-right:0}
  .pn-nav{grid-template-columns:1fr;width:auto;margin:0 16px}
  .idx-row{grid-template-columns:1fr;gap:8px}
}