/* ============================================================
   NEVER LUCK — Journal article layout
   Extends styles.css tokens. Long-form reading on near-black.
   ============================================================ */

.post-nav{ background:transparent }
.post-nav .back{ display:flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone) }
.post-nav .back .arr{ transition:transform .35s var(--ease) }
.post-nav .back:hover .arr{ transform:translateX(-4px) }

/* ---- progress bar ---- */
.progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--blood); z-index:7200 }

/* ---- article shell ---- */
.article{ padding-top:clamp(120px,18vh,200px) }
.measure{ max-width:760px; margin-inline:auto; padding-inline:var(--pad) }
.measure--wide{ max-width:1080px }

/* ---- header ---- */
.article__kick{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:26px }
.article__kick .cat{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--blood) }
.article__kick .sep{ width:5px; height:5px; border-radius:50%; background:var(--smoke) }
.article__kick .date,.article__kick .rt{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke) }
.article__title{ font-family:var(--font-display); text-transform:uppercase; line-height:.9;
  font-size:clamp(40px,6.4vw,94px); letter-spacing:.004em }
.article__title em{ font-style:normal; color:var(--blood) }
.article__dek{ font-size:clamp(18px,1.7vw,23px); line-height:1.5; color:var(--bone-2); margin-top:26px; max-width:62ch }
.article__by{ display:flex; align-items:center; gap:14px; margin-top:34px; padding-top:24px; border-top:1px solid var(--hair) }
.article__by .mono{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--smoke) }
.article__by .who{ color:var(--bone) }

/* ---- feature plate ---- */
.feature{ position:relative; margin:clamp(40px,7vh,72px) 0; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--ink-3); background:var(--ink-2) }
.feature__img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(.28) contrast(1.05) brightness(.96) }
.feature__duo{ position:absolute; inset:0; mix-blend-mode:multiply; background:linear-gradient(135deg,var(--blood-deep),transparent 62%); opacity:.5 }
.feature__cap{ position:absolute; left:0; right:0; bottom:0; padding:18px 22px; z-index:2;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-2);
  background:linear-gradient(0deg, rgba(10,10,11,.8), transparent) }

/* ---- prose ---- */
.prose{ font-size:clamp(17px,1.25vw,19px); line-height:1.72; color:var(--bone-2) }
.prose > * + *{ margin-top:1.5em }
.prose p{ max-width:68ch }
.prose strong{ color:var(--bone); font-weight:600 }
.prose em{ color:var(--bone) }
.prose a{ color:var(--bone); text-decoration:underline; text-decoration-color:var(--blood); text-underline-offset:3px; text-decoration-thickness:2px; transition:color .2s }
.prose a:hover{ color:var(--blood) }
.prose h2{ font-family:var(--font-display); text-transform:uppercase; line-height:.96; color:var(--bone);
  font-size:clamp(26px,3.4vw,44px); letter-spacing:.005em; margin-top:1.8em }
.prose h3{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--bone);
  font-size:clamp(15px,1.4vw,18px); margin-top:1.8em }
.prose ul,.prose ol{ padding-left:0; list-style:none; max-width:66ch }
.prose li{ position:relative; padding-left:34px; margin-top:.85em }
.prose ul li::before{ content:""; position:absolute; left:8px; top:.62em; width:8px; height:2px; background:var(--blood) }
.prose ol{ counter-reset:n }
.prose ol li{ counter-increment:n }
.prose ol li::before{ content:counter(n,decimal-leading-zero); position:absolute; left:0; top:0;
  font-family:var(--font-mono); font-size:13px; color:var(--blood) }
.prose hr{ border:none; border-top:1px solid var(--hair); margin:2.4em 0 }
/* drop cap on first paragraph */
.prose > p.lead::first-letter{ font-family:var(--font-display); float:left; font-size:4.6em; line-height:.74;
  padding:.04em .12em 0 0; color:var(--blood) }
.prose .lead{ color:var(--bone); font-size:1.06em }

/* pull quote */
.pullquote{ margin:1.8em 0; padding:0; border:0; max-width:none }
.pullquote blockquote{ font-family:var(--font-display); text-transform:uppercase; line-height:.98;
  font-size:clamp(28px,4vw,56px); color:var(--bone); letter-spacing:.004em; max-width:18ch }
.pullquote blockquote em{ color:var(--blood); font-style:normal }
.pullquote cite{ display:block; margin-top:18px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--smoke); font-style:normal }

/* stat callout strip inside prose */
.callouts{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:2em 0; padding:28px 0;
  border-block:1px solid var(--hair) }
.callouts .c .n{ font-family:var(--font-display); font-size:clamp(34px,4vw,56px); line-height:.9 }
.callouts .c .n .u{ color:var(--blood) }
.callouts .c .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--smoke); margin-top:10px }

/* ---- end CTA ---- */
.article__end{ margin-top:clamp(60px,10vh,110px); padding:clamp(40px,6vw,64px); border:1px solid var(--hair);
  border-radius:3px; background:radial-gradient(80% 100% at 100% 0, rgba(228,21,27,.1), transparent 60%), var(--ink-1) }
.article__end h3{ font-family:var(--font-display); font-size:clamp(28px,4vw,52px); text-transform:uppercase; line-height:.92 }
.article__end h3 em{ font-style:normal; color:var(--blood) }
.article__end p{ color:var(--bone-2); margin:14px 0 26px; max-width:48ch }
.article__sig{ margin-top:clamp(46px,7vh,80px); font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--smoke); display:flex; align-items:center; gap:10px }
.article__sig .dot{ width:6px; height:6px; border-radius:50%; background:var(--blood) }

/* ---- related ---- */
.related{ margin-top:clamp(70px,12vh,140px); border-top:1px solid var(--hair); padding-top:46px }
.related h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--smoke); margin-bottom:30px }
.related__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); border:1px solid var(--hair) }
.relcard{ background:var(--ink); padding:30px clamp(20px,2vw,32px); min-height:230px; display:flex; flex-direction:column; transition:background .4s var(--ease) }
.relcard:hover{ background:var(--ink-1) }
.relcard .rmeta{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke) }
.relcard h5{ font-family:var(--font-display); font-size:clamp(24px,2.4vw,34px); text-transform:uppercase; line-height:.96; margin-top:auto }
.relcard .read{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blood); margin-top:18px }

@media (max-width:680px){
  .callouts{ grid-template-columns:1fr; gap:22px; }
  .related__grid{ grid-template-columns:1fr }
}

/* ============================================================
   THE MANIFESTO — full creed page
   ============================================================ */
.mani{ padding-top:clamp(120px,18vh,200px); overflow:hidden }
.mani__head{ position:relative; padding-bottom:clamp(40px,8vh,90px); border-bottom:1px solid var(--hair) }
.mani__eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,4vh,40px) }
.mani__eyebrow .line{ height:1px; width:60px; background:var(--hair) }
.mani__open{ font-family:var(--font-display); text-transform:uppercase; line-height:.86;
  font-size:clamp(56px,12vw,180px); letter-spacing:.004em }
.mani__open .blood{ color:var(--blood) }
.mani__open .outline{ }

/* the creed body — large statements, not small prose */
.creed{ max-width:1180px; margin-inline:auto; padding:clamp(60px,12vh,140px) 0 }
.movement{ margin:0 0 clamp(54px,9vh,116px); max-width:none }
.movement:last-child{ margin-bottom:0 }
.movement[data-w="full"]{ max-width:none }
.stmt{ font-family:var(--font-display); text-transform:uppercase; line-height:.98;
  font-size:clamp(30px,4.5vw,64px); letter-spacing:.004em; color:var(--bone); max-width:18em }
.stmt .blood{ color:var(--blood) }
.stmt .ghost{ color:transparent; -webkit-text-stroke:1.4px var(--bone-2) }
@supports not (-webkit-text-stroke:1px #000){ .stmt .ghost{ color:var(--ink-3) } }
.gloss{ font-family:var(--font-body); text-transform:none; font-size:clamp(16px,1.4vw,20px);
  line-height:1.62; color:var(--bone-2); max-width:52ch; margin-top:24px; letter-spacing:0 }
.gloss strong{ color:var(--bone); font-weight:600 }
.gloss em{ color:var(--blood); font-style:normal }

.movement .rule{ width:64px; height:2px; background:var(--blood); margin-bottom:30px }

/* the tenet payoff line */
.creed__tenets{ max-width:1180px; margin:0 auto; padding:clamp(40px,7vh,80px) 0; border-block:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:14px 28px }
.creed__tenets span{ font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--smoke) }
.creed__tenets span b{ color:var(--bone); font-weight:400 }
.creed__tenets span .x{ color:var(--blood) }

/* closer */
.mani__close{ text-align:center; padding:clamp(80px,16vh,200px) var(--pad) clamp(40px,8vh,90px) }
.mani__close .big{ font-family:var(--font-display); text-transform:uppercase; line-height:.84;
  font-size:clamp(44px,11.5vw,190px); letter-spacing:.004em }
.mani__close .big em{ font-style:normal; color:var(--blood) }
.mani__close .sig{ margin-top:clamp(30px,5vh,50px); font-family:var(--font-mono); font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--smoke) }