/* COCOFUEL — Journal. Shares the main site's warm-dark + gold system. */
:root{
  --char:#0F0B07; --char-2:#17110B; --char-3:#0A0704; --char-line:#241a10;
  --white:#F4F2EC; --white-dim:rgba(244,242,236,.68); --white-fnt:rgba(244,242,236,.44);
  --cream:#ECE3D0; --cream-ink:#241A10; --cream-dim:#6E5C46; --cream-line:rgba(36,26,16,.16);
  --gold:#F5A623; --gold-hi:#FFCB52; --gold-deep:#DD7A16; --gold-cream:#B4680C;
  --gold-line:rgba(245,166,35,.26); --gold-line2:rgba(245,166,35,.14);
  --grad-gold:linear-gradient(100deg,var(--gold-hi) 0%,var(--gold) 44%,var(--gold-deep) 118%);
  --maxw:760px; --gut:clamp(20px,5vw,64px);
  --f-display:"Archivo","Archivo Expanded",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--char);-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--char);color:var(--white);line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.display{font-family:var(--f-display);font-stretch:expanded;font-weight:800}
.gold-grad{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:.8ch}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--gold)}

/* nav */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gut);background:rgba(15,11,7,.78);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gold-line2)}
.brand{display:flex;align-items:center;gap:.6ch;font-family:var(--f-display);font-stretch:expanded;
  font-weight:900;font-style:italic;font-size:1.15rem}
.brand .bolt{width:18px;height:22px}
.brand .fuel{color:var(--gold)}
.nav .back{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--white-dim);
  padding:.6em 1.1em;border:1px solid var(--gold-line);border-radius:2px;transition:color .2s,border-color .2s}
.nav .back:hover{color:var(--gold);border-color:var(--gold)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---- blog index ---- */
.idx-hero{padding:clamp(60px,10vw,120px) 0 clamp(30px,5vw,54px);
  background:radial-gradient(140% 90% at 82% 12%,rgba(255,184,92,.13) 0%,transparent 52%),var(--char)}
.idx-hero .eyebrow{margin-bottom:1.3rem}
.idx-hero h1{font-family:var(--f-display);font-stretch:expanded;font-weight:800;font-style:italic;
  font-size:clamp(2.4rem,7vw,4.4rem);line-height:.95;letter-spacing:-.03em;margin-bottom:1rem}
.idx-hero p{color:var(--white-dim);max-width:48ch;font-size:1.05rem}
.posts{display:grid;gap:1px;background:var(--char-line);border:1px solid var(--char-line);
  max-width:var(--maxw);margin:clamp(30px,5vw,56px) auto clamp(60px,9vw,110px)}
.post-card{background:var(--char);padding:clamp(26px,3.4vw,40px);display:block;transition:background .35s}
.post-card:hover{background:var(--char-2)}
.post-card .cat{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);display:flex;justify-content:space-between;gap:12px;margin-bottom:1rem}
.post-card .cat .rt{color:var(--white-fnt)}
.post-card h2{font-family:var(--f-display);font-stretch:expanded;font-weight:700;font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1.05;letter-spacing:-.02em;margin-bottom:.7rem}
.post-card p{color:var(--white-dim);font-size:1rem;max-width:60ch}
.post-card .more{display:inline-block;margin-top:1.1rem;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* ---- article ---- */
.art-hero{padding:clamp(56px,9vw,110px) 0 clamp(20px,4vw,40px);
  background:radial-gradient(140% 90% at 80% 8%,rgba(255,184,92,.12) 0%,transparent 54%),var(--char)}
.art-hero .eyebrow{margin-bottom:1.2rem}
.art-hero h1{font-family:var(--f-display);font-stretch:expanded;font-weight:800;font-size:clamp(2rem,5.4vw,3.3rem);
  line-height:1.02;letter-spacing:-.025em;margin-bottom:1.2rem;max-width:20ch}
.art-hero .meta{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white-fnt);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.art-hero .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.article{padding:clamp(28px,5vw,52px) 0 clamp(60px,9vw,110px);font-size:1.08rem}
.article p{margin:0 0 1.3rem;color:var(--white-dim)}
.article h2{font-family:var(--f-display);font-stretch:expanded;font-weight:700;font-size:clamp(1.4rem,3vw,1.9rem);
  letter-spacing:-.02em;color:var(--white);margin:2.6rem 0 1rem;line-height:1.1}
.article h3{font-family:var(--f-display);font-stretch:expanded;font-weight:600;font-size:1.15rem;
  color:var(--white);margin:1.8rem 0 .6rem;letter-spacing:-.01em}
.article strong,.article b{color:var(--white);font-weight:600}
.article a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-line)}
.article ul{margin:0 0 1.3rem 1.1rem;color:var(--white-dim)}
.article li{margin:0 0 .55rem}
.article li::marker{color:var(--gold)}
.article hr{border:0;height:1px;background:var(--gold-line);margin:2.4rem 0}
.article blockquote{margin:2rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:2px solid var(--gold);
  font-family:var(--f-display);font-stretch:expanded;font-weight:500;font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.3;color:var(--white)}
.article .lede{font-size:clamp(1.15rem,2.4vw,1.35rem);line-height:1.55;color:var(--white);margin-bottom:1.8rem}
.callout{background:var(--char-2);border:1px solid var(--gold-line2);border-radius:6px;
  padding:clamp(20px,2.6vw,28px);margin:2rem 0}
.callout .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.7rem}
.callout p:last-child{margin-bottom:0}
.data{font-family:var(--f-mono)}
.refs{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--gold-line);
  font-family:var(--f-mono);font-size:.78rem;color:var(--white-fnt);line-height:1.7}
.refs b{color:var(--white-dim);font-weight:500}
.art-cta{margin-top:2.6rem;padding:clamp(24px,3vw,34px);border:1px solid var(--gold-line);border-radius:6px;
  background:radial-gradient(120% 120% at 100% 0%,rgba(245,166,35,.08),transparent 60%)}
.art-cta h3{font-family:var(--f-display);font-stretch:expanded;font-weight:700;font-size:1.3rem;margin-bottom:.5rem;color:var(--white)}
.art-cta p{color:var(--white-dim);margin-bottom:1.1rem}
.art-cta a{display:inline-flex;align-items:center;gap:.6ch;font-family:var(--f-mono);font-weight:500;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.12em;background:var(--grad-gold);color:#140b00;padding:.9em 1.5em;border-radius:2px}
.more-reading{margin:clamp(30px,5vw,50px) auto 0}
.more-reading .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.more-reading a{display:block;padding:1rem 0;border-top:1px solid var(--gold-line2);color:var(--white);
  font-family:var(--f-display);font-stretch:expanded;font-weight:600;font-size:1.05rem;transition:color .2s}
.more-reading a:hover{color:var(--gold)}

/* footer */
.foot{border-top:1px solid var(--gold-line2);padding:clamp(40px,6vw,64px) 0;background:var(--char-3)}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot .wm{font-family:var(--f-display);font-stretch:expanded;font-weight:900;font-style:italic;font-size:1.5rem}
.foot .wm .fuel{color:var(--gold)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--white-dim)}
.foot nav a:hover{color:var(--gold)}
.foot .legal{width:100%;font-family:var(--f-mono);font-size:.64rem;color:var(--white-fnt);letter-spacing:.05em;margin-top:.4rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}