/* ============================================================
   Method — section 05 (desktop, >=900px horizontal pinned track)
   Ported from refer/method-track_5.html. --ghost happens to equal
   --border in both themes in the source file, so reused directly
   rather than adding a redundant token. --ease-out was defined but
   never actually referenced anywhere in the source CSS — dropped.

   Mobile (<900px) gets the fold mechanic (method-fold.css/js)
   instead of this file's own flat-list fallback — see EXCEPTIONS.md.
   ============================================================ */

#m{ display:none; }
@media (min-width:900px){ #m{ display:block; } }

/* Owner request: heading sits in its own column, vertically centred —
   but travels WITH the cards at the same rate, not pinned in place.
   It's a flex child of .m__track itself (first, before the cards),
   so method-track.js's one transform on the track carries both
   without any JS changes. */
.m{ position:relative; --m-head-w:clamp(340px, 30vw, 460px); } /* height set in JS */
.m__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }

/* Oversized word drifting behind everything, slower than the track —
   gives the horizontal motion something to be measured against. */
.m__ghost{
  position:absolute; left:0; top:50%;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(120px,22vw,300px); line-height:.8;
  letter-spacing:-.02em; color:var(--border);
  white-space:nowrap; pointer-events:none; user-select:none;
  transform:translate3d(0,-50%,0); will-change:transform; z-index:0;
}

/* A flex column like every .m__card, just wider and first in line —
   travels with the track's own transform instead of staying pinned.
   border-right matches how every card already borders itself, so it
   reads as one more column in the row, not a separate fixed panel. */
.m__head{
  flex:0 0 auto; width:var(--m-head-w); height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding-inline:var(--sp-7);
  border-right:1px solid var(--border);
}
.m__display{ font-family:var(--font-display); font-weight:400; font-size:clamp(32px, 4.2vw, 52px); line-height:1.05; margin:0; }
.m__sub{ max-width:32ch; margin:var(--sp-4) 0 0; font-size:var(--fs-t2); color:var(--text-muted); }

/* stretch, not flex-start — every column is the same height, so the
   divider rules run the full stage and the cards read as one row. */
.m__track{
  position:absolute; top:0; left:0; right:0; height:100%;
  display:flex; align-items:stretch;
  padding:var(--sp-7) var(--sp-5) var(--method-track-pad-bottom) var(--pad-inline);
  will-change:transform; z-index:1;
}

.m__card{
  position:relative; flex:0 0 auto;
  /* Half the viewport each, so two cards share the screen and a third
     is just breaking in at the edge. Width drives everything downstream
     — track length, section height, scroll rate are derived from it. */
  width:50vw; min-width:300px;
  padding:0 var(--sp-7) 0 var(--sp-7);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:center;
  will-change:transform;
}
.m__card:last-child{ border-right:1px solid var(--border); }

/* The step number takes the slot a screenshot would occupy.
   Owner request: same card treatment as Work/Stack01/Stack02/Method-
   mobile — no border, --r-md rounding, a matching --shadow (this one
   had none before, reading flat/undefined next to the others once they
   all picked up a lift). */
.m__panel{
  display:flex; align-items:flex-end;
  height:clamp(190px,40vh,440px);
  background:var(--surface); border-radius:var(--r-md);
  box-shadow:0 20px 36px -22px var(--shadow);
  padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-5);
}
.m__n{ font-family:var(--font-display); font-weight:400; font-size:clamp(64px,8vw,136px); line-height:.8; color:var(--text); }

.m__name{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,2.9vw,42px); line-height:1.1; margin:0 0 var(--sp-4); }
.m__text{ margin:0; font-size:var(--fs-t2); color:var(--text-muted); max-width:40ch; }

.m__rail{
  position:absolute; left:0; right:0; bottom:var(--sp-7); z-index:2;
  padding-inline:var(--pad-inline); display:flex; align-items:center; gap:var(--sp-4);
}
.m__bar{ flex:1; height:1px; background:var(--border); position:relative; }
.m__fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--text); will-change:width; }
.m__step{ font-size:var(--fs-t4); letter-spacing:var(--ls-caps); color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* FALLBACK — reduced motion only (narrow screens get the fold mechanic
   instead, so this never needs to trigger below 900px). Plain vertical
   list: the steps are the content, sideways travel is an enhancement. */
.m.is-flat{ height:auto !important; }
.m.is-flat .m__sticky{ position:static; height:auto; overflow:visible; padding-block:var(--sp-9); }
.m.is-flat .m__ghost,.m.is-flat .m__rail{ display:none; }
.m.is-flat .m__head{
  position:static; width:auto; height:auto; padding:0; margin-bottom:var(--sp-7);
  border-right:0; background:none;
}
.m.is-flat .m__track{ position:static; display:block; padding:0; transform:none !important; }
.m.is-flat .m__card{ display:block; width:auto; min-width:0; margin:0 0 var(--sp-7) !important; border-left:1px solid var(--border); border-right:0; padding-right:0; }
.m.is-flat .m__panel{ height:110px; }

@media (prefers-reduced-motion:reduce){
  .m{ height:auto !important; }
  .m__sticky{ position:static; height:auto; overflow:visible; padding-block:var(--sp-9); }
  .m__ghost,.m__rail{ display:none; }
  .m__head{
    position:static; width:auto; height:auto; padding:0; margin-bottom:var(--sp-7);
    border-right:0; background:none;
  }
  .m__track{ position:static; display:block; padding:0; transform:none !important; }
  .m__card{ width:auto; min-width:0; margin:0 0 var(--sp-7) !important; border-right:0; }
}