/* ============================================================
   Method — section 05 (mobile, <900px, unfolds like paper)
   Ported from refer/method-unfold-mobile.html. Classes renamed to
   the .mf__ prefix (was bare .c/.c--r/.c--wide) for clarity and to
   avoid a single-letter class on a page this size. Reuses the
   shared .rail/.rail__bar/.rail__fill primitives from site.css.
   ============================================================ */

@property --p{ syntax:'<number>'; inherits:false; initial-value:0; }

/* Owner request Aug 2026: no mobile version for now — a full-screen
   gate (site.css's #mobile-gate) blocks everything below 900px with a
   "desktop only, for now" message instead. This mobile-only fold is
   unreachable either way, so it's forced off unconditionally rather
   than left conditionally on below 900px; #m's own independent gate
   (method.css, display:none below 900px, block at 900px+) is untouched
   and unaffected by this either way. Rest of this file is inert dead
   weight now, not deleted — trivial to re-enable by reverting this one
   rule if mobile support gets built later. */
#mf{ display:none; }

.mf{ position:relative; height:460vh; }
.mf__stick{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--sp-6) var(--sp-5);
}

.mf__head{ position:absolute; top:var(--sp-7); left:var(--pad-inline); right:var(--pad-inline); }
.mf__head h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,7vw,40px); line-height:1.02; }
.mf__head p{ margin-top:var(--sp-2); font-size:var(--fs-t3); color:var(--text-muted); max-width:34ch; }

/* Perspective scaled to a ~155px card, not the desktop track's 990px
   one — at the desktop's 5200px perspective the foreshortening on a
   card this small would be under two pixels and read as a wipe, not a
   fold. Perspective has to scale with the thing being folded. */
.mf__sheet{
  width:100%; max-width:420px; margin-inline:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  perspective:1400px; perspective-origin:50% 30%;
}
.mf__card{
  position:relative; padding:var(--sp-4);
  transform-origin:50% 0;
  will-change:transform,opacity;
}
/* Two gates, because one is not enough: backface-visibility culls
   anything rotated past 90deg; the opacity ramp covers the crossing
   frame either side of it, where a sub-pixel edge can still catch light. */
.js .mf__card,.js .mf__card::before{ backface-visibility:hidden; }
.js .mf__card{ opacity:calc(var(--p) * 7); }
.mf__card--r{ transform-origin:0 50%; }     /* 02 hinges on its LEFT edge */
.mf__card--wide{ grid-column:1/-1; }         /* 05 spans                   */

.mf__card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:color-mix(in oklab,
    var(--surface) calc(var(--p) * 100%),
    var(--border));
  border-radius:var(--r-md);
  /* --shadow, not a flat rgba pair: same theme-aware fix as the Work
     cards/Stack tiles — a black shadow at any alpha is invisible against
     dark theme's near-black field. */
  box-shadow:0 1px 2px var(--shadow), 0 10px 26px var(--shadow);
}
.mf__n{ font-size:var(--fs-t4); letter-spacing:var(--ls-caps); color:var(--text-muted); }
/* Anton's floor is 24px; at 19px in a 155px-wide card this isn't a
   display line, per system_2.md's own rule — set in Inter 500 instead. */
.mf__name{ font-family:var(--font-text); font-weight:500; font-size:19px; line-height:1.05; margin:var(--sp-2) 0 var(--sp-3); }
.mf__def{ font-size:var(--fs-t3); line-height:1.4; }
.mf__cost{ display:block; margin-top:var(--sp-3); color:var(--text-muted); font-size:12px; line-height:1.35; }

.js .mf__card,.js .mf__card .mf__name{
  color:color-mix(in oklab, var(--text) calc(var(--p) * 100%), var(--border));
}
@supports not (color: color-mix(in oklab,#000,#fff)){
  .js .mf__card,.js .mf__card .mf__name{ color:var(--text); }
}

@media (prefers-reduced-motion:reduce){
  .mf{ height:auto; }
  .mf__stick{ position:static; height:auto; overflow:visible; padding-block:var(--sp-7); }
  .mf__head{ position:static; margin-bottom:var(--sp-6); }
  .mf .rail{ display:none; }
  .mf__card{ transform:none !important; --p:1; opacity:1; }
}