/* Forged Over Time home page motion (approved preview, 2026-10-12).
   Default = still, fully readable layout (no script, or Reduce Motion on).
   motion.js adds .m-on to <html> only when motion is allowed.
   The forge video plays on its own at normal speed, looping (Michael, 2026-10-12). */
html,body{overflow-x:clip}

/* reading progress */
.m-progress{display:none}
.m-on .m-progress{display:block;position:fixed;left:0;right:0;top:0;height:3px;z-index:30;pointer-events:none}
.m-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#E8833A,var(--gold));transform-origin:0 50%;transform:scaleX(var(--read,0))}

/* 1. hero: forge video that blends into the page */
.m-stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;display:grid;align-items:center;min-height:min(88svh,820px);padding-block:24px 40px}
.m-on .m-hero{height:220vh}
.m-on .m-stage{position:sticky;top:0;height:100svh;min-height:0;padding-block:0}
.m-grid{max-width:var(--max);width:100%;margin:0 auto;padding:0 24px;display:grid}
.m-copy{position:relative;z-index:2;display:grid;gap:22px;min-width:0;max-width:600px}
.m-copy h1{margin:0;font-size:clamp(42px,5.4vw,80px);line-height:1;font-weight:600;letter-spacing:-.04em;text-wrap:balance}
.m-copy h1 .acc{font-size:1.1em}
.m-copy .lead{margin:0;max-width:44ch;font-size:clamp(17px,1.6vw,20px);color:var(--ink);opacity:.88}
.m-copy .actions{display:flex;flex-wrap:wrap;gap:12px}
.m-frame{position:absolute;z-index:1;margin:0;right:0;top:50%;transform:translateY(-46%);width:min(80vw,1560px);aspect-ratio:16/9;pointer-events:none}
.m-frame video,.m-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.m-frame video{display:none}
.m-on .m-frame video{display:block}
.m-on .m-frame img{display:none}
.m-frame::after{content:"";position:absolute;inset:-1px;background:
  linear-gradient(90deg,var(--bg) 0,rgba(14,15,17,.85) 14%,rgba(14,15,17,0) 46%),
  linear-gradient(270deg,var(--bg) 0,rgba(14,15,17,0) 14%),
  linear-gradient(180deg,var(--bg) 0,rgba(14,15,17,0) 24%),
  linear-gradient(0deg,var(--bg) 0,rgba(14,15,17,0) 26%)}
.m-on .m-line{display:inline-block;transform:translateY(calc((1 - var(--in,1))*28px));opacity:calc(.35 + var(--in,1)*.65)}
.m-on .m-later{opacity:var(--late,1);transform:translateY(calc((1 - var(--late,1))*16px))}
@media (max-width:860px){
  .m-stage{align-items:start}
  .m-on .m-stage{padding-top:24px}
  .m-grid{gap:4px}
  .m-copy{max-width:none;gap:18px}
  .m-frame{position:relative;top:auto;right:auto;transform:none;width:100vw;margin-left:-24px;aspect-ratio:4/3}
  .m-frame video,.m-frame img{object-fit:cover}
  .m-frame::after{background:
    linear-gradient(180deg,var(--bg) 0,rgba(14,15,17,0) 22%),
    linear-gradient(0deg,var(--bg) 0,rgba(14,15,17,0) 26%),
    linear-gradient(90deg,var(--bg) 0,rgba(14,15,17,0) 10%),
    linear-gradient(270deg,var(--bg) 0,rgba(14,15,17,0) 10%)}
}

/* 2. key line, word by word */
.m-key{padding:14vh 0 10vh;display:grid;gap:22px}
.m-key blockquote{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(34px,5.2vw,72px);line-height:1.08;letter-spacing:-.01em;max-width:20ch;text-wrap:balance}
.m-on .m-key .w{opacity:var(--o,.22);transition:opacity .2s linear}
.m-key .src{margin:0;color:var(--soft);font-size:15px}
.m-key .src a{color:var(--ink)}

/* 3. two series, one path */
.m-ch-stage{display:grid;align-items:center;padding:56px 0}
.m-on .m-chapters{height:240vh}
.m-on .m-ch-stage{position:sticky;top:0;height:100svh;padding:0}
.m-ch-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.m-ch-text{display:grid;gap:48px}
.m-on .m-ch-text{position:relative;display:block;min-height:320px}
.m-ch{display:grid;gap:14px;align-content:center}
.m-on .m-ch{position:absolute;inset:0;transition:opacity .45s ease,transform .45s ease}
.m-ch h2{margin:0;font-size:clamp(34px,4.6vw,60px);letter-spacing:-.035em;line-height:1.02;font-weight:600;text-wrap:balance}
.m-ch p{margin:0;color:var(--soft);max-width:42ch}
.m-ch .stat{font-family:"Instrument Serif",Georgia,serif;font-size:22px;color:var(--ink)}
.m-ch .stat a{color:inherit}
.m-on .m-ch[data-off]{opacity:0;transform:translateY(24px);pointer-events:none}
.m-path{width:100%;height:auto;max-width:520px;justify-self:end}
.m-path .track{stroke:var(--line)}
.m-path .ink{stroke:var(--gold)}
.m-on .m-path .ink{stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len)*(1 - var(--p,0)))}
.m-path text{fill:var(--soft);font-family:"Geist",sans-serif;font-size:13px;letter-spacing:.1em}
.m-path .node{fill:var(--bg);stroke:var(--gold);stroke-width:2}
@media (max-width:860px){
  .m-ch-grid{grid-template-columns:1fr;gap:20px}
  .m-path{justify-self:start;max-width:360px;order:-1}
  .m-on .m-ch-text{min-height:300px}
}

/* 4. stacked episode cards */
.m-stack{padding:12vh 0 4vh}
.m-stack-head{display:grid;gap:10px;margin-bottom:36px}
.m-stack-head h2{margin:0;font-size:clamp(32px,4vw,52px);letter-spacing:-.035em;font-weight:600;line-height:1.04}
.m-cards{display:grid;gap:22px}
.m-card{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:30px clamp(22px,4vw,44px);display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:start;text-decoration:none;transition:border-color .2s}
.m-card:hover{border-color:var(--gold)}
.m-on .m-card{position:sticky;top:calc(24px + var(--i)*18px);box-shadow:0 -18px 40px rgba(0,0,0,.35)}
.m-i0{--i:0}.m-i1{--i:1}.m-i2{--i:2}.m-i3{--i:3}
.m-card .num{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:clamp(54px,7vw,88px);line-height:.9;color:var(--gold);grid-row:span 4}
.m-card h3{margin:0;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;font-weight:600;line-height:1.15}
.m-card p{margin:0;color:var(--soft);max-width:60ch}
.m-card .eyebrow{color:var(--gold)}
.m-card .meta{font-size:14px;opacity:.85}
@media (max-width:560px){.m-card{grid-template-columns:1fr}.m-card .num{grid-row:auto}}

/* belt and braces: Reduce Motion always wins */
@media (prefers-reduced-motion:reduce){
  .m-progress{display:none!important}
}