/* =====================================================================
   VIRADU — shared stylesheet  ·  "Eco desert" (light)
   Off-white ground, warm off-black ink, amber primary with green + teal
   accents. One palette drives the whole site; lines, card tints, scrims
   and the deep accent are derived with color-mix.

   Roles:
     --accent     amber  -> spine, dots, hero <em>, links, numerals
     --accent-2   green  -> pull-quote / epigraph rule, ambient wash
     --glow       teal   -> selection, dot halo
   ===================================================================== */

:root{
  --bg:#fbf8f3;
  --text:#332b29;
  --text-dim:#6f6760;
  --text-faint:#a89f95;
  --accent:#eeae56;
  --accent-2:#9fd79a;
  --glow:#9fdddc;

  /* derived */
  --bg-2:color-mix(in srgb, var(--text) 5%, var(--bg));
  --bg-3:color-mix(in srgb, var(--text) 3.5%, var(--bg));
  --accent-deep:color-mix(in srgb, var(--accent) 80%, #000);
  --line:color-mix(in srgb, var(--text) 11%, transparent);
  --line-strong:color-mix(in srgb, var(--text) 20%, transparent);

  /* hero text reads light over the clear artwork */
  --hero-ink:#f7f2e9;
  --hero-dim:#efe9dd;

  --display:"Fraunces",Georgia,serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 600px at 84% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    radial-gradient(800px 700px at 6% 12%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 62%);
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:color-mix(in srgb, var(--glow) 45%, transparent);color:var(--text);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px);}
.mono{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);}

/* ---------- Masthead ---------- */
header.site{
  position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 55%, transparent) 70%, transparent);
  border-bottom:1px solid var(--line);
}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;}
.logo{display:flex;align-items:baseline;gap:12px;}
.logo .name{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:.04em;}
.logo .name b{color:var(--accent-deep);font-weight:600;}
.logo .tag{display:none;}
nav.site-nav{display:flex;gap:30px;align-items:center;}
nav.site-nav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);transition:color .25s ease;}
nav.site-nav a:hover{color:var(--text);}
nav.site-nav a.live{color:var(--text);}
nav.site-nav a.live::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:8px;vertical-align:middle;
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 75%, transparent);
}
@media(max-width:760px){nav.site-nav{gap:18px;} nav.site-nav a:not(.live){display:none;}}

/* ---------- Hero (image is clear — no fade overlay) ---------- */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line);}
.hero-media{position:absolute;inset:0;z-index:-1;background:#241d1a;}
.hero-media img{
  width:100%;height:100%;object-fit:contain;object-position:center top;
}
.hero-inner{padding-bottom:clamp(48px,7vw,92px);padding-top:64px;}
.hero .eyebrow{margin:0 0 26px;display:flex;align-items:center;gap:16px;color:var(--hero-dim);text-shadow:0 1px 8px rgba(15,11,8,0.55);}
.hero .eyebrow .rule{height:1px;width:54px;background:rgba(247,242,233,0.55);}
.hero h1{
  font-family:var(--display);font-weight:500;font-size:clamp(2.5rem,6.1vw,5.1rem);
  line-height:1.02;letter-spacing:-0.015em;margin:0;max-width:17ch;
  color:var(--hero-ink);text-shadow:0 2px 22px rgba(15,11,8,0.55),0 1px 3px rgba(15,11,8,0.45);
}
.hero h1 em{font-style:italic;color:var(--accent);font-weight:500;}
.hero .standfirst{margin:30px 0 0;max-width:54ch;font-size:1.16rem;color:var(--hero-dim);line-height:1.6;text-shadow:0 1px 12px rgba(15,11,8,0.55);}
.hero .enter{
  position:absolute;bottom:clamp(28px,4vw,52px);left:0;right:0;margin:0 auto;width:max-content;
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text);
  padding:13px 22px;border:1px solid var(--accent);border-radius:100px;
  background:var(--accent);
  transition:background .3s ease,border-color .3s ease,gap .3s ease;
}
.hero .enter:hover{background:var(--accent-deep);border-color:var(--accent-deep);gap:18px;}
.hero .enter .arrow{color:var(--text);}

.reveal-line{overflow:hidden;display:block;}
.reveal-line > span{display:block;transform:translateY(110%);}
.lift{opacity:0;transform:translateY(18px);}
.ready .reveal-line > span{transform:translateY(0);transition:transform 1s cubic-bezier(.16,.84,.34,1);}
.ready .reveal-line:nth-child(2) > span{transition-delay:.08s;}
.ready .hero .eyebrow{opacity:0;animation:fadeUp .9s ease .15s forwards;}
.ready .hero .standfirst{opacity:0;animation:fadeUp 1s ease .5s forwards;}
.ready .hero .enter{opacity:0;animation:fadeUp 1s ease .68s forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Feed / spine ---------- */
.feed-head{padding:clamp(58px,8vw,104px) 0 8px;}
.feed-head .kicker{margin:0 0 18px;}
.feed-head h2{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;margin:0;letter-spacing:-0.01em;max-width:24ch;}
.feed-head p{color:var(--text-dim);max-width:52ch;margin:16px 0 0;}

.feed{position:relative;padding:48px 0 24px;}
.spine{position:absolute;left:11px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--line-strong) 6%,var(--line-strong) 94%,transparent);}
.spine .progress{
  position:absolute;left:0;top:0;width:100%;height:var(--p,0%);
  background:linear-gradient(to bottom,var(--accent-deep),var(--accent));
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 50%, transparent);transition:height .15s linear;
}
.nodes{display:flex;flex-direction:column;gap:clamp(56px,8vw,108px);padding-left:64px;}
.node{position:relative;}
.node .dot{position:absolute;left:-64px;top:8px;width:24px;height:24px;margin-left:-11px;display:grid;place-items:center;}
.node .dot::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--text-faint);transition:all .5s cubic-bezier(.16,.84,.34,1);}
.node.lit .dot::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--glow) 32%, transparent),0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);}
.node .connector{position:absolute;left:-52px;top:19px;width:40px;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .6s ease .1s;}
.node.lit .connector{transform:scaleX(1);}

.node-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;}
.node.flip .node-grid{direction:rtl;}
.node.flip .node-grid > *{direction:ltr;}

.node .figure{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line-strong);aspect-ratio:16/10;background:var(--bg-2);}
.node .figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,.84,.34,1),filter .6s ease;}
.node:hover .figure img{transform:scale(1.045);}
.node .figure .frame{position:absolute;inset:0;pointer-events:none;border:1px solid transparent;transition:border-color .4s ease;}
.node:hover .figure .frame{border-color:color-mix(in srgb, var(--accent) 50%, transparent);}

.node .body .kicker{margin:0 0 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.node .body .kicker .seq{color:var(--accent-deep);}
.node .body .kicker .dotsep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);}
.node h3{font-family:var(--display);font-weight:500;font-size:clamp(1.55rem,2.9vw,2.3rem);line-height:1.08;letter-spacing:-0.01em;margin:0;}
.node h3 a{background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 2px;background-repeat:no-repeat;background-position:0 96%;transition:background-size .4s ease;}
.node:hover h3 a{background-size:100% 2px;}
.node .dek{color:color-mix(in srgb, var(--text) 82%, var(--bg));margin:18px 0 0;font-size:1.07rem;line-height:1.6;max-width:46ch;}
.node .readon{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);transition:color .3s ease,gap .3s ease;}
.node:hover .readon{color:var(--accent-deep);gap:14px;}

.node.theory .node-grid{display:block;}
.node.theory .body{max-width:none;}
.node.theory .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start;}
.node.theory blockquote{margin:0;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.32;color:var(--text);border-left:2px solid var(--accent-2);padding-left:26px;}
.node.theory blockquote cite{display:block;margin-top:18px;font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);}

@media(max-width:900px){
  .node-grid,.node.flip .node-grid{grid-template-columns:1fr;direction:ltr;}
  .node.flip .node-grid > *{direction:ltr;}
  .node .figure{order:-1;}
  .node.theory .layout{grid-template-columns:1fr;}
  .nodes{padding-left:42px;}
  .node .dot{left:-42px;}
  .node .connector{display:none;}
  .spine{left:9px;}
}

/* ---------- Recent strip ---------- */
.recent{border-top:1px solid var(--line);margin-top:clamp(64px,9vw,120px);padding:clamp(50px,7vw,84px) 0;}
.recent .kicker{margin:0 0 30px;}
.recent ul{list-style:none;margin:0;padding:0;}
.recent li{border-top:1px solid var(--line);}
.recent li:last-child{border-bottom:1px solid var(--line);}
.recent a{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:baseline;padding:22px 6px;transition:padding-left .35s ease,background .35s ease;}
.recent a:hover{padding-left:22px;background:linear-gradient(to right,color-mix(in srgb, var(--accent) 12%, transparent),transparent 70%);}
.recent .idx{font-family:var(--mono);font-size:.74rem;color:var(--accent-deep);letter-spacing:.14em;}
.recent .ttl{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;line-height:1.2;}
.recent .when{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;}
@media(max-width:680px){.recent a{grid-template-columns:auto 1fr;} .recent .when{grid-column:2;}}

/* ---------- About the author ---------- */
.about{border-top:1px solid var(--line);padding:clamp(58px,8vw,100px) 0;}
.about-grid{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start;}
.about .kicker{margin:0 0 20px;}
.about-name{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-0.01em;margin:0;color:var(--text);}
.about-name .aka{display:block;margin-top:14px;font-family:var(--mono);font-size:.74rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);}
.about-bio{margin:0;font-size:1.18rem;line-height:1.62;color:color-mix(in srgb,var(--text) 84%,var(--bg));border-left:2px solid var(--accent-2);padding-left:28px;max-width:56ch;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:26px;}.about-bio{padding-left:22px;}}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line);background:var(--bg-3);}
.foot{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:clamp(52px,7vw,80px) 0 36px;}
.foot .lede{font-family:var(--display);font-size:1.45rem;font-weight:400;font-style:italic;color:color-mix(in srgb, var(--text) 72%, var(--bg));max-width:30ch;line-height:1.4;margin:0;}
.foot .cols{display:flex;gap:56px;flex-wrap:wrap;}
.foot h5{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin:0 0 16px;font-weight:500;}
.foot a.fl{display:block;color:var(--text-dim);padding:5px 0;transition:color .25s ease;}
.foot a.fl:hover{color:var(--text);}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0 40px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;color:var(--text-faint);text-transform:uppercase;}
.foot-base a{color:var(--text-dim);} .foot-base a:hover{color:var(--accent-deep);}
@media(max-width:760px){.foot{grid-template-columns:1fr;}}


/* =====================================================================
   ARTICLE / POST LAYER
   ===================================================================== */
.reading-bar{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(to right,var(--accent-deep),var(--accent));
  box-shadow:0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:width .12s linear;pointer-events:none;
}

.article-head{padding:clamp(54px,8vw,104px) 0 0;}
.backlink{display:inline-flex;align-items:center;gap:9px;margin:0 0 clamp(28px,5vw,44px);font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);transition:color .3s ease,gap .3s ease;}
.backlink:hover{color:var(--accent-deep);gap:14px;}
.backlink .arrow{color:var(--accent-deep);}

.article-head .kicker{margin:0 0 22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.article-head .kicker .cat{color:var(--accent-deep);}
.article-head .kicker .dotsep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);}

.article-head h1{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,5vw,4rem);line-height:1.04;letter-spacing:-0.018em;margin:0;max-width:20ch;color:var(--text);}
.article-head h1 em{font-style:italic;color:var(--accent);font-weight:500;}

.article-head .standfirst{margin:clamp(22px,3vw,30px) 0 0;max-width:58ch;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.42;color:color-mix(in srgb, var(--text) 75%, var(--bg));}

.byline{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:clamp(30px,4vw,40px) 0 0;padding:18px 0 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);}
.byline .who{color:var(--text);}
.byline .dotsep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);}

.epigraph{margin:clamp(38px,5vw,56px) 0 0;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.34;color:var(--text);border-left:2px solid var(--accent-2);padding-left:26px;max-width:40ch;}
.epigraph cite{display:block;margin-top:16px;font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);}

.lead{position:relative;margin:clamp(40px,6vw,64px) 0 0;border-radius:4px;overflow:hidden;border:1px solid var(--line-strong);aspect-ratio:16/9;background:var(--bg-2);}
.lead img{width:100%;height:100%;object-fit:cover;}
.lead figcaption,.figcap{margin:14px 2px 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);}

.prose{max-width:68ch;margin:clamp(48px,7vw,80px) auto 0;font-size:1.12rem;line-height:1.72;color:color-mix(in srgb, var(--text) 88%, var(--bg));}
.prose > p{margin:0 0 1.45em;}
.prose > p:last-child{margin-bottom:0;}
.prose > p.lead-para::first-letter{font-family:var(--display);font-weight:500;font-style:normal;float:left;font-size:3.6em;line-height:.82;padding:.06em .12em 0 0;color:var(--accent-deep);}

.prose h2{font-family:var(--display);font-weight:500;color:var(--text);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.16;letter-spacing:-0.01em;margin:clamp(40px,5vw,60px) 0 .55em;}
.prose h3{font-family:var(--display);font-weight:500;color:var(--text);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.22;margin:2em 0 .5em;}
.prose a:not(.readon){color:var(--text);background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px;transition:color .3s ease,background-size .3s ease;}
.prose a:not(.readon):hover{color:var(--accent-deep);}

.prose blockquote{margin:clamp(36px,5vw,52px) 0;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.34;color:var(--text);border-left:2px solid var(--accent-2);padding-left:28px;}
.prose blockquote cite{display:block;margin-top:16px;font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);}

.prose ul,.prose ol{margin:0 0 1.45em;padding-left:1.4em;}
.prose li{margin:0 0 .5em;}
.prose li::marker{color:var(--accent-deep);}
.prose strong{color:var(--text);font-weight:600;}
.prose em{color:var(--text);}
.prose code{font-family:var(--mono);font-size:.86em;background:color-mix(in srgb, var(--text) 6%, transparent);border:1px solid var(--line);padding:.12em .4em;border-radius:3px;color:var(--accent-deep);}

.prose hr,.rule-dot{border:0;height:1px;background:var(--line-strong);margin:clamp(44px,6vw,68px) 0;position:relative;overflow:visible;}
.prose hr::after,.rule-dot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg),0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);}

.prose figure{margin:clamp(36px,5vw,52px) 0;}
.prose figure img{width:100%;border-radius:4px;border:1px solid var(--line-strong);}
.prose figcaption{margin:14px 2px 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);}

.endmark{max-width:68ch;margin:clamp(40px,5vw,56px) auto 0;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint);}
.endmark::before{content:"";flex:0 0 28px;height:1px;background:var(--line-strong);}
.endmark .glyph{color:var(--accent);}

.thread{border-top:1px solid var(--line);margin-top:clamp(64px,9vw,110px);padding:clamp(50px,7vw,80px) 0 0;}
.thread .kicker{margin:0 0 30px;}
.thread-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px);}
.thread-card{display:block;border:1px solid var(--line-strong);border-radius:4px;padding:clamp(22px,3vw,30px);background:var(--bg-2);transition:border-color .35s ease,transform .35s ease,background .35s ease;}
.thread-card:hover{border-color:color-mix(in srgb, var(--accent) 50%, transparent);transform:translateY(-3px);background:color-mix(in srgb, var(--accent) 8%, var(--bg));}
.thread-card .kicker{margin:0 0 14px;display:flex;gap:12px;align-items:center;}
.thread-card .kicker .cat{color:var(--accent-deep);}
.thread-card .kicker .dotsep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);}
.thread-card h4{font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.14;letter-spacing:-0.01em;margin:0;}
.thread-card p{color:var(--text-dim);margin:12px 0 0;font-size:.98rem;line-height:1.55;}
@media(max-width:680px){.thread-grid{grid-template-columns:1fr;}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .reveal-line > span{transform:none;}
  .lift{opacity:1;transform:none;}
  .hero-media img{transform:none;}
  .node .connector{transform:scaleX(1);}
  .node .dot::before{background:var(--accent);border-color:var(--accent);}
}