/* ============================================================
   EPIC Journal — shared stylesheet
   One source of truth for the blog index + all article pages.
   Tokens, fonts and chrome mirror the main site (index.html).
   ============================================================ */

:root{
  /* Light context */
  --paper:#FBF9F4; --stone:#EDE8DD; --sand:#E3DBCB;
  --ink:#1C221B; --ash:#6C6A61; --ash-dim:#999488;
  --gold:#A9823F;
  --line:rgba(28,34,27,0.12); --line-strong:rgba(28,34,27,0.20); --line-gold:rgba(169,130,63,0.36);
  --hair:rgba(28,34,27,0.07);
  /* Dark context (forest bands) */
  --forest:#16271D; --forest-2:#1F3528; --bone:#F2EEE4;
  --gold-light:#D2B472; --line-d:rgba(242,238,228,0.10); --line-gold-d:rgba(210,180,114,0.30);
  /* Type */
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'Space Mono',monospace;
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --maxw:1180px; --measure:66ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 3rem}
.mono{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.2em; font-size:0.6rem; color:var(--ash-dim)}

.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:12px; z-index:2000; background:var(--forest); color:var(--bone); padding:10px 14px}

/* ---------- NAV (mirrors site nav, pinned to its solid state) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 3rem; background:rgba(250,248,243,0.9);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line); transition:padding .5s var(--ease-expo);
}
.nav-logo img{height:30px; width:auto}
.nav-links{display:flex; gap:2rem; list-style:none; margin:0; padding:0}
.nav-links a{font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ash); transition:color .3s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--gold)}
.nav-links a.active{color:var(--ink)}
.nav-cta{font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--paper); background:var(--gold); padding:0.7rem 1.6rem; transition:background .4s var(--ease-expo)}
.nav-cta:hover{background:#8F6C32}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px}
.nav-toggle span{display:block; width:24px; height:1.5px; background:var(--ink); margin:5px 0; transition:all .3s}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(250,248,243,0.98); padding:2rem 3rem; gap:1.5rem; border-bottom:1px solid var(--line)}
}

/* ---------- MASTHEAD (index) ---------- */
.masthead{padding:11rem 0 3.5rem; border-bottom:1px solid var(--hair)}
.eyebrow{display:flex; align-items:center; gap:0.9rem; margin-bottom:1.6rem}
.eyebrow .tick{width:28px; height:1px; background:var(--gold)}
.masthead h1{font-family:var(--font-display); font-weight:300; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.02; letter-spacing:-0.02em; color:var(--ink); margin:0 0 1.1rem; max-width:15ch}
.masthead h1 em{font-style:italic; color:var(--gold)}
.masthead .dek{font-size:1.05rem; color:var(--ash); max-width:52ch; margin:0; font-weight:300}
.search-row{margin-top:2.2rem}
.search{width:100%; max-width:440px; background:transparent; border:none; border-bottom:1px solid var(--line-strong); padding:0.8rem 0.1rem; font-family:var(--font-body); font-size:1rem; color:var(--ink); transition:border-color .3s}
.search::placeholder{font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ash-dim)}
.search:focus{outline:none; border-bottom-color:var(--gold)}

/* ---------- STREAM: lead + grid ---------- */
.stream{padding:3.5rem 0 1rem}
.slate{display:flex; flex-wrap:wrap; gap:0.6rem 0.9rem; align-items:center; margin-bottom:1.1rem}
.slate .mono{color:var(--ash)}
.slate .dot{width:3px; height:3px; border-radius:50%; background:var(--gold); flex:none}
.read{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.16em; font-size:0.62rem; color:var(--ink); display:inline-flex; align-items:center; gap:0.6rem}
.read .arw{transition:transform .3s var(--ease-expo)}

.lead{display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; padding-bottom:3.4rem; margin-bottom:3.4rem; border-bottom:1px solid var(--hair)}
.lead .media{overflow:hidden; aspect-ratio:16/11; background:var(--stone)}
.lead .media img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-expo)}
.lead:hover .media img{transform:scale(1.04)}
.lead h2{font-family:var(--font-display); font-weight:300; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.08; letter-spacing:-0.01em; color:var(--ink); margin:0 0 1rem}
.lead p{color:var(--ash); font-size:1.02rem; margin:0 0 1.4rem; max-width:46ch; font-weight:300}
.lead:hover .read .arw{transform:translateX(6px)}

.grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem 2.6rem; padding-bottom:2rem}
.card{display:flex; flex-direction:column}
.card .media{overflow:hidden; aspect-ratio:3/2; background:var(--stone); margin-bottom:1.3rem}
.card .media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-expo)}
.card:hover .media img{transform:scale(1.05)}
.card h3{font-family:var(--font-display); font-weight:300; font-size:1.4rem; line-height:1.16; letter-spacing:-0.01em; color:var(--ink); margin:0 0 0.6rem}
.card p{color:var(--ash); font-size:0.92rem; margin:0 0 1rem; font-weight:300}
.card:hover .read .arw{transform:translateX(6px)}
.no-results{grid-column:1/-1; padding:2.5rem 0; display:none}

/* ---------- ARTICLE ---------- */
.article-head{max-width:820px; margin:0 auto; padding:9.5rem 3rem 0; text-align:center}
.backlink{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.18em; font-size:0.6rem; color:var(--ash); display:inline-flex; gap:0.5rem; margin-bottom:2.4rem; transition:color .3s}
.backlink:hover{color:var(--gold)}
.a-slate{display:flex; flex-wrap:wrap; gap:0.6rem 0.9rem; justify-content:center; align-items:center; margin-bottom:1.6rem}
.a-slate .mono{color:var(--ash)}
.a-slate .dot{width:3px; height:3px; border-radius:50%; background:var(--gold)}
.article-head h1{font-family:var(--font-display); font-weight:300; color:var(--ink); font-size:clamp(2.1rem,5.2vw,3.6rem); line-height:1.05; letter-spacing:-0.02em; margin:0 0 1.4rem}
.article-head h1 em{font-style:italic; color:var(--gold)}
.standfirst{font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(1.15rem,2.3vw,1.5rem); line-height:1.4; color:var(--ash); max-width:42ch; margin:0 auto}

.hero-fig{max-width:1000px; margin:3rem auto 0; padding:0 3rem}
.hero-fig img{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--stone)}
.hero-fig figcaption{font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ash-dim); margin-top:0.8rem; text-align:center}

.article-body{max-width:var(--measure); margin:0 auto; padding:3.4rem 3rem 1rem; font-size:1.13rem; line-height:1.8}
.article-body p{margin:0 0 1.5rem; color:#2A312A}
.article-body p:first-of-type::first-letter{font-family:var(--font-display); font-weight:400; float:left; font-size:4.4em; line-height:0.82; padding:0.06em 0.12em 0 0; color:var(--forest)}
.article-body strong{font-weight:500; color:var(--ink)}
.article-body h2{font-family:var(--font-display); font-weight:300; font-size:clamp(1.5rem,3vw,2rem); line-height:1.16; color:var(--ink); letter-spacing:-0.01em; margin:2.8rem 0 1rem}
.article-body h2 .kick{display:block; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.2em; font-size:0.6rem; color:var(--gold); margin-bottom:0.7rem}
.article-body ul{margin:0 0 1.5rem; padding:0; list-style:none}
.article-body li{position:relative; padding-left:1.6rem; margin-bottom:0.7rem; color:#2A312A}
.article-body li::before{content:""; position:absolute; left:0; top:0.75em; width:9px; height:1px; background:var(--gold)}
.article-body li strong{color:var(--ink)}
.pull{font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.3; color:var(--forest); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:2rem 0; margin:2.6rem 0; text-align:center}
blockquote{margin:2rem 0; padding:0.4rem 0 0.4rem 1.6rem; border-left:2px solid var(--line-gold); font-family:var(--font-display); font-style:italic; font-weight:300; font-size:1.3rem; line-height:1.4; color:var(--forest)}
blockquote .attr{display:block; margin-top:0.9rem; font-family:var(--font-mono); font-style:normal; text-transform:uppercase; letter-spacing:0.14em; font-size:0.6rem; color:var(--ash)}

.article-foot{max-width:var(--measure); margin:0 auto; padding:0.5rem 3rem 0}
.tags{display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.5rem 0 2rem}
.tag{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em; font-size:0.6rem; color:var(--ash); border:1px solid var(--line); padding:0.4rem 0.8rem}
.share{display:flex; align-items:center; gap:0.9rem; padding:1.5rem 0 0.5rem; border-top:1px solid var(--hair)}
.share a{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em; font-size:0.6rem; color:var(--ink); border:1px solid var(--line); padding:0.55rem 0.9rem; transition:all .3s}
.share a:hover{background:var(--forest); color:var(--bone); border-color:var(--forest)}

/* ---------- CTA band (forest) ---------- */
.cta-band{background:var(--forest); color:var(--bone); margin-top:4rem; padding:5rem 0; text-align:center; border-top:1px solid var(--line-gold-d)}
.cta-band .eyebrow{display:block; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.24em; font-size:0.6rem; color:var(--gold-light); margin-bottom:1.2rem}
.cta-band h2{font-family:var(--font-display); font-weight:300; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.12; color:var(--bone); margin:0 auto 1.8rem; max-width:20ch}
.cta-band h2 em{font-style:italic; color:var(--gold-light)}
.btn-gold{display:inline-block; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.25em; text-transform:uppercase; padding:1.1rem 2.5rem; background:var(--gold); color:var(--paper); transition:background .4s var(--ease-expo)}
.btn-gold:hover{background:#8F6C32}

/* ---------- FOOTER (mirrors site footer) ---------- */
.footer{background:var(--forest); padding:6rem 3rem 3rem; color:var(--bone); border-top:1px solid var(--line-gold-d)}
.footer-inner{max-width:var(--maxw); margin:0 auto}
.footer-top{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:5rem}
.footer-brand{font-family:var(--font-display); font-weight:340; font-size:1.8rem; margin-bottom:1rem; color:var(--bone)}
.footer-tagline{font-size:0.85rem; line-height:1.7; color:rgba(242,238,228,0.6); max-width:28ch}
.footer-heading{font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-light); margin-bottom:1.5rem}
.footer-link{display:block; font-size:0.82rem; color:rgba(242,238,228,0.62); padding:0.35rem 0; transition:color .3s}
.footer-link:hover{color:var(--bone)}
.footer-tools{position:relative; display:inline-block}
.footer-tools .tools-toggle{cursor:pointer; display:inline-flex; align-items:center; gap:4px}
.footer-tools .tools-menu{display:none; position:absolute; bottom:130%; left:0; background:#0F1611; border:1px solid var(--line-d); padding:0.5rem; min-width:220px; z-index:100}
.footer-tools .tools-menu a{display:block; font-size:0.8rem; color:rgba(242,238,228,0.7); padding:0.4rem 0.6rem}
.footer-tools .tools-menu a:hover{color:var(--bone)}
.footer-tools.open .tools-menu{display:block}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--line-d)}
.footer-legal{font-family:var(--font-mono); font-size:0.54rem; letter-spacing:0.08em; color:rgba(242,238,228,0.4)}
.footer-legal a{color:rgba(242,238,228,0.6)}
.footer-legal a:hover{color:var(--bone)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width:820px){
  .wrap{padding:0 1.5rem}
  .masthead{padding:8.5rem 0 2.5rem}
  .lead{grid-template-columns:1fr; gap:1.6rem} .lead .media{order:-1}
  .grid{grid-template-columns:1fr; gap:3rem}
  .article-head{padding:8rem 1.5rem 0}
  .hero-fig,.article-body,.article-foot{padding-left:1.5rem; padding-right:1.5rem}
  .footer{padding:4rem 1.5rem 2.5rem}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column; gap:1rem; text-align:center}
}
@media (max-width:560px){ .footer-top{grid-template-columns:1fr} }

/* ---------- Motion ---------- */
.fade{opacity:0; transform:translateY(14px); animation:rise .8s var(--ease-expo) forwards}
.fade.d1{animation-delay:.06s} .fade.d2{animation-delay:.13s} .fade.d3{animation-delay:.2s} .fade.d4{animation-delay:.27s}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .fade{opacity:1; transform:none}
}

/* Inline body images (from the block editor's Image block) */
.article-body figure.body-fig{margin:1.9rem 0}
.article-body figure.body-fig img{width:100%;border-radius:12px}
.article-body figure.body-fig figcaption{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim);margin-top:.6rem;text-align:center}
.article-body img{max-width:100%;height:auto}