/* ============================================================================
   Método: four steps, stacked while you scroll.
   By day an engraving in ink on the paper (the dark is saved for the night);
   by night a technical plate on deep teal. Right: an isometric stack drawn in
   fine line (hatching for tone, no flat fills). Left: the four steps, a
   runner dot riding the spine.
   ========================================================================== */

/* Day: the section is .ch--paper (see the partial). Ink lines at graded
   strengths, hatching for tone, --leaf for a layer's own marks; the accent
   belongs only to the plate being placed (.is-lead, written by JS). */
.method {
  --m-plate: var(--sc-surface);                                   /* a raised sheet, lighter than the paper */
  --m-side: color-mix(in oklab, var(--sc-canvas) 88%, var(--sc-ink));
  --m-hole: color-mix(in oklab, var(--sc-ink) 52%, var(--sc-canvas));
  --m-edge: color-mix(in oklab, var(--sc-ink) 76%, transparent);
  --m-line: color-mix(in oklab, var(--sc-ink) 66%, transparent);
  --m-line2: color-mix(in oklab, var(--sc-ink) 36%, transparent);
  --m-hatch: color-mix(in oklab, var(--sc-ink) 27%, transparent);
  --m-ghost: color-mix(in oklab, var(--sc-ink) 34%, transparent);
  --m-faint: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --m-grid: color-mix(in oklab, var(--sc-ink) 17%, transparent);
  --m-acc: var(--accent-deep);        /* accent as a line or a small mark (5.2:1 on the paper) */
  --m-acc-fill: var(--sc-accent);     /* accent as a fill: the runner, the bar */
  --m-mark: var(--leaf);              /* a layer's own marks while another is being placed */
  --m-mark-fill: color-mix(in oklab, var(--leaf) 55%, var(--m-plate));   /* a tint, so a finished bar never outweighs the lines */
  --m-sig: var(--signal);             /* "corre solo" (4.4:1 on the paper) */
  --m-dim-t: 0.7;   /* a step still ahead: title (5.5:1) */
  --m-dim-p: 0.88;  /* a step still ahead: line (4.7:1) */
}
.method__plate.is-lead { --m-mark: var(--m-acc); --m-mark-fill: var(--m-acc-fill); }

/* Night: the plate on deep teal, painted exactly as .ch--inv paints it. */
:root[data-theme="night"] .method {
  --ground: var(--ground-inv); --sc-ink: var(--ink-inv); --sc-ink-soft: var(--ink-inv-soft);
  --rule: color-mix(in oklab, var(--ink-inv) 14%, transparent);
  --rule-strong: color-mix(in oklab, var(--ink-inv) 30%, transparent);
  --hatch: color-mix(in oklab, var(--ink-inv) 9%, transparent);

  --m-plate: color-mix(in oklab, var(--ground-inv) 90%, var(--sc-ink));
  --m-side: color-mix(in oklab, var(--ground-inv) 70%, black);
  --m-hole: color-mix(in oklab, var(--ground-inv) 55%, black);
  --m-edge: color-mix(in oklab, var(--sc-ink) 70%, transparent);
  --m-line: color-mix(in oklab, var(--sc-ink) 70%, transparent);
  --m-line2: color-mix(in oklab, var(--sc-ink) 38%, transparent);
  --m-hatch: color-mix(in oklab, var(--sc-ink) 30%, transparent);
  --m-ghost: color-mix(in oklab, var(--sc-ink) 34%, transparent);
  --m-faint: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --m-grid: color-mix(in oklab, var(--sc-ink) 17%, transparent);
  --m-acc: var(--sc-accent);
  --m-acc-fill: var(--sc-accent);
  --m-mark: var(--sc-accent);
  --m-mark-fill: var(--sc-accent);
  --m-sig: var(--signal);
  --m-dim-t: 0.6;
  --m-dim-p: 0.8;
}

.method__stage { background: var(--ground); }

.method__grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3.25rem);
  padding: calc(var(--chrome-h) + clamp(1.25rem, 6vh, 3.75rem)) var(--content-r) clamp(1.5rem, 5vh, 2.75rem) var(--content-l);
}

/* ------------------------------------------------------------ the copy -- */
.method__copy { display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 2; }
.method__h { max-width: 13.2ch; text-wrap: wrap; }
.method__h em { white-space: nowrap; }   /* weight and colour come from the shared .ch__h em */
:root[data-theme="night"] .method__h { font-weight: 370; }

.method__list { position: relative; margin-top: clamp(1.5rem, 4.6vh, 2.75rem); padding-left: 2.1rem; }
.method__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.85rem, 2.5vh, 1.45rem); }
.method__step { position: relative; }

/* spine, its filled part, and the runner dot (positions written by JS) */
.method__track { position: absolute; left: 0.375rem; top: var(--m-t0, 0.8rem); height: var(--m-th, 80%); width: 1px; background: var(--rule-strong); }
.method__track-fill {
  position: absolute; inset: 0; background: var(--m-acc);
  transform-origin: 50% 0; transform: scaleY(0);
}
.method__runner {
  position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%;
  box-sizing: border-box;
  /* the rail's own active dot: gold, a deep-gold rim on the paper */
  background: var(--m-acc-fill); border: 1px solid var(--m-acc);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 22%, transparent), 0 2px 5px -1px hsl(var(--sc-shadow-color) / 0.6);
  will-change: transform;
}
.method.is-run .method__runner { background: var(--m-sig); border-color: var(--m-sig); box-shadow: 0 0 0 4px color-mix(in oklab, var(--m-sig) 22%, transparent), 0 2px 5px -1px hsl(var(--sc-shadow-color) / 0.6); }
.method.is-run .method__track-fill { background: var(--m-sig); }

.method__node {
  /* centred on the first line of the title (line-height 1.14) */
  font-size: clamp(1.18rem, 0.85rem + 0.72vw, 1.55rem);
  position: absolute; left: -2.1rem; top: calc(0.57em - 0.375rem);
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  border: 1px solid var(--rule-strong); background: var(--ground);
  box-sizing: border-box;
  transition: background-color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.method__node svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ground); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 200ms var(--ease-out); }
.method__step.is-done .method__node { background: var(--sc-ink-soft); border-color: var(--sc-ink-soft); }
.method__step.is-done .method__node svg { opacity: 1; }
.method.is-run .method__step.is-done .method__node { background: var(--m-sig); border-color: var(--m-sig); }
/* on the paper the runner's halo is faint where it parks: the active node takes the deep-gold rim */
:root[data-theme="day"] .method__step.is-active .method__node { border-color: var(--m-acc); }

.method__step-h {
  font-size: clamp(1.18rem, 0.85rem + 0.72vw, 1.55rem);
  line-height: 1.14; letter-spacing: -0.012em;
}
.method__jump {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
  min-height: 24px;
  border-radius: var(--sc-r-sm);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  transition: text-decoration-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .method__jump:hover { text-decoration-color: var(--rule-strong); }
}
.method__jump:active { transform: translateY(1px); }
.method__step-p { margin-top: 0.4rem; font-size: 0.98rem; line-height: 1.5; color: var(--sc-ink-soft); max-width: 37ch; }

/* a step still ahead reads quieter; the active one reads in full ink */
.method__step-h, .method__step-p { transition: opacity 280ms var(--ease-out), color 280ms var(--ease-out); }
.method__step:not(.is-active):not(.is-done) .method__step-h { opacity: var(--m-dim-t); }
.method__step:not(.is-active):not(.is-done) .method__step-p { opacity: var(--m-dim-p); }
.method__step.is-active .method__step-p { color: var(--sc-ink); }
.method__step.is-preview .method__jump { text-decoration-color: var(--m-acc); }

/* the closing note: a file icon and one sentence, framed like an instrument label */
.method__note {
  margin-top: auto; align-self: flex-start;
  display: flex; gap: 0.85rem; align-items: flex-start;
  max-width: 22.5rem; padding: 0.95rem 1.1rem;
  font-size: 0.95rem; line-height: 1.5; color: var(--sc-ink);
  will-change: opacity, transform;
}
.js .method__note { opacity: 0; }   /* JS reveals it at the end of the act */
@media (min-width: 861px) and (min-height: 980px) {
  .method__note { margin-top: clamp(2.5rem, 7vh, 4.5rem); }
}
.method__note-ico { flex: none; width: 1.45rem; height: 1.45rem; margin-top: 0.05rem; fill: none; stroke: var(--m-acc); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ----------------------------------------------------------- the figure -- */
.method__fig {
  position: relative; margin: 0; min-height: 0; min-width: 0;
  /* the figure reaches up to just under the chrome; the copy keeps its air */
  margin-top: calc(-1 * clamp(1.25rem, 6vh, 3.75rem) + 0.75rem);
}
/* a blueprint dot grid, fading out toward the edges */
.method__fig::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--m-grid) 0.9px, transparent 1.3px);
  background-size: 22px 22px; background-position: center;
  -webkit-mask: radial-gradient(62% 58% at 50% 50%, #000 40%, transparent 100%);
          mask: radial-gradient(62% 58% at 50% 50%, #000 40%, transparent 100%);
}
.method__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.method__tags { position: absolute; inset: 0; pointer-events: none; }
.method__tag {
  position: absolute; left: 0; top: 0;
  max-width: 10.5rem;
  font: 450 0.8rem/1.4 var(--sc-font-mono); letter-spacing: 0.01em;
  color: var(--sc-ink-soft);
  translate: 0 -0.7em;
  opacity: 0; will-change: transform, opacity;
  transition: color 240ms var(--ease-out);
}
.method__tag.is-active { color: var(--sc-ink); }
.method__tag-l { display: block; white-space: nowrap; }
/* 06:00: a plain label while it is scheduled; a running chip (signal dot,
   1px frame) once the stack runs. The text keeps the accent for contrast. */
.method__tag--time {
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  padding: 0.16em 0.5em 0.16em 0; border: 1px solid transparent; border-radius: var(--sc-r-sm);
  translate: 0 calc(-0.86em - 1px);
  transition: color 240ms var(--ease-out), border-color 360ms var(--ease-out), padding 420ms var(--ease-out);
}
.method__tag--time::before {
  content: ""; position: absolute; left: 0.55em; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--m-sig); opacity: 0; transform: scale(0.4);
  transition: opacity 300ms var(--ease-out) 120ms, transform 300ms var(--ease-out) 120ms;
}
.method__tag--time.is-active, .method.is-run .method__tag--time { color: var(--m-acc); }
.method.is-run .method__tag--time {
  padding-left: calc(0.55em + 6px + 0.45em);
  border-color: color-mix(in oklab, var(--m-sig) 60%, transparent);
}
.method.is-run .method__tag--time::before { opacity: 1; transform: none; }

/* --------------------------------------------------------------- SVG ink -- */
.method__svg * { vector-effect: none; }
.method-pl { fill: none; stroke: var(--m-hatch); stroke-width: 1; }
.method-pd { fill: var(--m-hatch); }

.method-ghost path { fill: none; stroke: var(--m-ghost); stroke-width: 1; stroke-dasharray: 4 4; }
.method-top { fill: var(--m-plate); }
.method-side { fill: var(--m-side); }
.method-hv-fill { fill: url(#method-hv); }
.method-hv2-fill { fill: url(#method-hv2); }
.method-edge { fill: none; stroke: var(--m-edge); stroke-width: 1.15; stroke-linejoin: round; }
.method-acc { fill: none; stroke: var(--m-acc); stroke-width: 1.6; stroke-linejoin: round; opacity: 0; }
.method-sig { fill: none; stroke: var(--m-sig); stroke-width: 1.7; stroke-linejoin: round; opacity: 0; }
.method-anchor { fill: var(--m-plate); stroke: var(--m-line); stroke-width: 1; }

.method-rim { fill: none; stroke: var(--m-line2); stroke-width: 1; }
.method-ln { fill: none; stroke: var(--m-line); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.method-ln2 { fill: none; stroke: var(--m-line2); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.method-top-fill { fill: var(--m-plate); }
.method-hd-fill { fill: url(#method-hd); }
.method-st-fill { fill: url(#method-st); }
.method-bul { fill: var(--m-line2); }
.method-ic { fill: none; stroke: var(--m-line); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.method-dotf { fill: var(--m-line); stroke: none; }
.method-caret { fill: var(--m-mark); }
.method-port { fill: var(--m-line2); transition: fill 240ms var(--ease-out); }
.method-port.is-on { fill: var(--m-sig); }
.method-pkt { fill: var(--m-mark); opacity: 0; }
.method-finger { fill: url(#method-hd); }
.method-slot { fill: var(--m-hole); stroke: var(--m-line2); stroke-width: 1; }

.method-check { fill: none; stroke: var(--m-mark); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.method-bar { fill: var(--m-mark-fill); }

.method-knurl { fill: none; stroke: var(--m-line2); stroke-width: 6; }
.method-ticks { fill: none; stroke: var(--m-line); stroke-width: 4; }
.method-hr { stroke-width: 1.5; }
.method-sched { fill: none; stroke: var(--m-mark); stroke-width: 2.4; stroke-linecap: round; }
.method-sched-mark { fill: var(--m-mark); }
.method-hand path { fill: none; stroke: var(--sc-ink); stroke-linecap: round; }
.method-hand--h path { stroke-width: 3.4; }
.method-hand--m path { stroke-width: 2.1; }
.method-hand--s path { stroke: var(--m-sig); stroke-width: 1.2; }
.method-cap { fill: var(--sc-ink); }
.method-led { fill: var(--m-faint); transition: fill 240ms var(--ease-out); }
/* the run: lamps come on bottom to top (JS writes .is-lit) and stay on */
.method-led.is-lit { fill: var(--m-sig); }
.method-finger { transition: fill 260ms var(--ease-out); }
.method-finger.is-lit { fill: color-mix(in oklab, var(--m-sig) 78%, transparent); }
.method-rep { transition: stroke 260ms var(--ease-out); }
.method-rep.is-lit { stroke: var(--m-sig); stroke-width: 1.2; }
/* the signal that climbs the running stack: a dot (the runner's twin) with a fading tail */
.method-pulse { fill: none; stroke: url(#method-tail); stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.method-tail-a { stop-color: var(--m-sig); }
.method-tail-b { stop-color: var(--m-sig); stop-opacity: 0; }
.method-pulse-head { opacity: 0; }
.method-pulse-dot { fill: var(--m-sig); stroke: var(--ground); stroke-width: 1.2; }
.method-pulse-ring { fill: none; stroke: var(--m-sig); stroke-width: 1; opacity: 0.55; }

/* a layer's own marks take the accent while it is the one being placed */
.method-caret, .method-pkt, .method-bar, .method-sched-mark { transition: fill 280ms var(--ease-out); }
.method-check, .method-sched { transition: stroke 280ms var(--ease-out); }

.method-cast { fill: url(#method-hd); opacity: 0; }
.method__plate.is-covered { cursor: pointer; }
.method__bp, .method__floor, .method__leaders, .method__pulse { pointer-events: none; }
.method-floor { fill: none; stroke: var(--m-faint); stroke-width: 1; }
.method-floor-shadow { fill: url(#method-hd); }

.method-lead { fill: none; stroke: var(--m-line2); stroke-width: 1; }
.method-lead-dot { fill: var(--sc-ink-soft); }
.method__leader.is-active .method-lead { stroke: var(--m-acc); }
.method__leader.is-active .method-lead-dot { fill: var(--m-acc); }
.method.is-run .method-lead-dot { fill: var(--m-sig); }
.method.is-run .method__leader.is-active .method-lead-dot { fill: var(--m-acc); }

.method-plumb { fill: none; stroke: var(--m-ghost); stroke-width: 1; stroke-dasharray: 2 6; }
.method-reg { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.method-gauge { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.method-gauge-ptr { fill: var(--m-acc); }
.method.is-run .method-gauge-ptr { fill: var(--m-sig); }

.method__plate, .method__leader, .method__floor, .method-gauge-ptr { will-change: transform; }

/* ------------------------------------------------------------ tablet+ -- */
@media (max-width: 1100px) {
  .method__grid { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
  .method__tag { font-size: 0.72rem; max-width: 8.5rem; }
}

/* ----------------------------------- short desktop windows (720 to 820) -- */
@media (min-width: 861px) and (max-height: 820px) {
  .method__grid { padding-top: calc(var(--chrome-h) + 2vh); padding-bottom: 1.1rem; }
  .method__fig { margin-top: calc(-2vh + 0.5rem); }
  .method__h { font-size: min(var(--t-h2), 6.3vh); }
  .method__list { margin-top: 3.2vh; }
  .method__steps { gap: 1.7vh; }
  .method__step-h, .method__node { font-size: min(clamp(1.18rem, 0.85rem + 0.72vw, 1.55rem), 3.3vh); }
  .method__step-p { margin-top: 0.25rem; font-size: 0.9rem; line-height: 1.42; }
  .method__note { padding: 0.7rem 0.9rem; font-size: 0.86rem; line-height: 1.42; }
}

/* ------------------------------------------- phone: one step at a time -- */
@media (max-width: 860px) {
  .method__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: calc(var(--chrome-h) + 0.75rem) var(--content-r) 1.25rem var(--content-l);
  }
  .method__copy { display: contents; }
  .method__h { grid-row: 1; font-size: clamp(2rem, 1.3rem + 3.4vw, 2.7rem); max-width: 13ch; }
  .method__fig { grid-row: 2; margin: 0.5rem 0 0.75rem; }
  .method__tags, .method__leaders, .method-gauge, .method-gauge-ptr, .method-reg { display: none; }
  .method__list, .method__note { grid-row: 3; grid-column: 1; }
  .method__list { margin-top: 0; padding-left: 1.6rem; transition: opacity 260ms var(--ease-out); }
  .method__track { display: none; }
  .method__steps { display: grid; }
  .method__step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 260ms var(--ease-out), visibility 0s linear 260ms; }
  .method__step.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
  .method__node { left: -1.6rem; background: var(--m-acc-fill); border-color: var(--m-acc); }
  .method__step-p { font-size: 0.95rem; }
  .method.is-run .method__list { opacity: 0; }
  .method__note { margin-top: 0; max-width: none; font-size: 0.9rem; }
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .method__runner, .method__plate, .method__leader, .method__floor, .method__tag { will-change: auto; }
  .method-ghost path + path { display: none; }
  .method__tag--time, .method__tag--time::before { transition: none; }
  .method__jump:active { transform: none; }
}