/* METHOD, "The Playbook Cards" (homepage section styles; from the method-3 prototype)
   ------------------------------------------------------------------
   The Method strip as three oversized paper shot cards dealt onto an
   ink desk. Each card is an index card with a job: a huge cobalt
   numeral, a storyboard panel with a drawn motif that explains the
   rule, the rule as the card header over a cobalt double rule, and the
   line typed onto faint cobalt ruled lines.

   Layout is mobile-first: below 1000px the cards are a swipeable
   scroll-snap deck (the next card's edge always shows). From 1000px up
   they become a composed, overlapping, rotated spread; a card
   straightens and lifts on hover / keyboard focus, pushes its
   neighbours aside, and stays on top once touched (method.js).

   Progressive enhancement: everything below renders the FINAL state.
   Pre-motion states live only under .method3--armed, which method.js
   adds when motion is allowed. All motion is transform / opacity /
   clip-path (plus the individual translate / rotate / scale props).

   Language-agnostic: no generated text; the same rules serve the
   English section (index.html) and the Finnish one
   (fi/index.html). Labels that can run long in
   Finnish (the hook marker, the captions) never depend on the length
   of an English word.
   ------------------------------------------------------------------ */

.method3 {
  --m3-desk: var(--ink, #14110c);
  --m3-paper: var(--paper, #f0ece3);
  --m3-ink: var(--ink, #14110c);
  --m3-ink-soft: var(--ink-soft, #3a342b);
  --m3-muted: var(--muted, #6a6358);
  --m3-cobalt: var(--cobalt, #2b34ff);
  --m3-cobalt-l: var(--cobalt-light, #7a83ff);
  --m3-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --m3-lift: cubic-bezier(0.3, 1.35, 0.5, 1);      /* a hand picks it up: tiny overshoot */
  --m3-rule: rgba(43, 52, 255, 0.2);                /* index-card ruling, cobalt at 20% */
  --m3-lh: 25px;                                    /* ruled line pitch = copy line-height */

  position: relative;
  isolation: isolate;
  overflow: hidden;                                 /* fallback */
  overflow: clip;                                   /* full-bleed deck never scrolls the page */
  background: var(--m3-desk);
  color: var(--m3-paper);
  padding: 76px 0 72px;
}
/* a low, warm lamp pool on the desk (paper at 6%, never a colour glow) */
.method3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 66%, rgba(240, 236, 227, 0.065), rgba(240, 236, 227, 0) 72%);
}
.method3 ::selection { background: var(--m3-cobalt); color: var(--m3-paper); }

/* desk grain: the gap-3 opaque noise, hard-light at low opacity */
.method3__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.07;
  mix-blend-mode: hard-light;
}

.method3__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}

/* ================= head ================= */
.method3__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 18px;
}
.method3__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--muted-2, #9a9488);
}
.method3__label-mark {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  background: var(--m3-cobalt);
}
.method3__label-sep { color: var(--m3-cobalt-l); }
.method3__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(2.7rem, 12.4vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--m3-paper);
  font-feature-settings: "kern" 1;
}
.method3__title-hi { color: var(--m3-cobalt-l); white-space: nowrap; }
.method3__hint {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--muted-2, #9a9488);
  white-space: nowrap;
}
.method3__hint-mark {
  width: 22px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 2px;
  rotate: -8deg;
}

/* ================= the deck (default: swipeable, below 1000px) ================= */
.method3__deck {
  list-style: none;
  display: flex;
  gap: 14px;
  margin: 30px calc(-1 * var(--gutter, 24px)) 0;
  padding: 26px var(--gutter, 24px) 36px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter, 24px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.method3__deck::-webkit-scrollbar { display: none; }
.method3__slot {
  display: flex;
  flex: 0 0 min(calc(100vw - 2 * var(--gutter, 24px) - 40px), 380px);
  min-width: 0;
  scroll-snap-align: start;
}

/* ================= the card ================= */
.method3__card {
  --m3-r: 0deg;
  --m3-x: 0px;
  --m3-y: 0px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 20px 20px 16px;
  border-radius: 6px;
  color: var(--m3-ink);
  background: linear-gradient(160deg, #f8f5ef 0%, #f0ece3 46%, #e7e1d5 100%);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.3),
    0 28px 48px -16px rgba(0, 0, 0, 0.7);
  container-type: inline-size;
  translate: calc(var(--m3-x) + var(--m3-push, 0px)) var(--m3-y);
  rotate: var(--m3-r);
  transition:
    translate 0.7s var(--m3-lift),
    rotate 0.7s var(--m3-lift),
    scale 0.7s var(--m3-lift);
  -webkit-tap-highlight-color: transparent;
}
/* paper tooth */
.method3__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* the deeper shadow of a lifted card (opacity only) */
.method3__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 60px 90px -24px rgba(0, 0, 0, 0.85), 0 18px 30px -12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s var(--m3-ease);
  pointer-events: none;
}
.method3__card:focus { outline: none; }
.method3__card:focus-visible {
  outline: 2px solid var(--m3-cobalt-l);
  outline-offset: 6px;
  border-radius: 6px;
}

/* top row: numeral + tags */
.method3__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.method3__num {
  display: block;
  margin: -0.02em 0 0 -0.045em;                 /* optical: sit the 0 on the card edge */
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 7.5rem;                            /* fallback without container units */
  font-size: 47cqi;
  line-height: 0.74;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--m3-cobalt);
  /* printed, not rendered: a sparse speckle where the ink didn't take */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -50 38.5'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -50 38.5'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-size: 180px 180px;
  mask-size: 180px 180px;
}
.method3__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--m3-muted);
  white-space: nowrap;
}
.method3__tag {
  padding: 5px 7px 4px;
  border: 1px solid var(--m3-ink);
  border-radius: 2px;
  color: var(--m3-ink);
}

/* storyboard panel: the drawing box of a shot card */
.method3__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;                                /* fallback */
  height: 43cqi;
  margin-top: 16px;
  margin-top: 5.5cqi;
  padding: 0 5cqi;
  border: 1px solid rgba(20, 17, 12, 0.24);
  border-radius: 2px;
  background: rgba(20, 17, 12, 0.035);
}
/* crop marks at the panel corners */
.method3__panel::before,
.method3__panel::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: var(--m3-ink);
  border-style: solid;
  pointer-events: none;
}
.method3__panel::before { top: -5px; left: -5px; border-width: 1.5px 0 0 1.5px; }
.method3__panel::after { right: -5px; bottom: -5px; border-width: 0 1.5px 1.5px 0; }

/* shared mono caption inside the drawings */
.method3__cap,
.method3__tc,
.method3__brace {
  font-family: var(--font-mono);
  font-size: max(0.56rem, 2.75cqi);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--m3-muted);
}
.method3__cap b { font-weight: 500; color: var(--m3-ink); }

/* ---------- 01 native: 9:16 > a 16:9 letterboxed into the feed ---------- */
.method3__panel--native { gap: 5cqi; }
.method3__fmt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqi;
}
.method3__frame {
  position: relative;
  height: 28cqi;
  aspect-ratio: 9 / 16;
  border-radius: 2px;
}
.method3__frame--native {
  overflow: hidden;
  background: var(--m3-cobalt);
}
.method3__who { display: block; fill: var(--m3-paper); }
.method3__frame--native .method3__who {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 94%;
  translate: -50% 0;
}
.method3__frame--feed {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--m3-ink);
}
.method3__bars {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(20, 17, 12, 0.3) 0 1px, transparent 1px 5px);
}
.method3__wide {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--m3-ink);
  outline: 1.5px solid var(--m3-ink);
}
.method3__who--small { width: 100%; height: 100%; }
.method3__gt {
  width: 4.4cqi;
  height: auto;
  margin-bottom: 5cqi;                          /* optical: centre on the frames, not the captions */
  fill: none;
  stroke: var(--m3-cobalt);
  stroke-width: 3.4;
  stroke-linecap: square;
}

/* ---------- 02 hook: a timeline, 0:00 - 0:01 is the hook ---------- */
.method3__panel--hook { padding: 0 6cqi; }
.method3__tl {
  position: relative;
  width: 100%;
  padding-top: 8.8cqi;
}
/* the range marker: a bracket exactly one second wide, its label above
   it and free to run past the bracket (any language, no clipping) */
.method3__brace {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(100% / 6);
  height: 7cqi;
  color: var(--m3-cobalt);
  font-size: max(0.52rem, 2.5cqi);
  letter-spacing: 0.14em;
}
.method3__brace::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.4cqi;
  min-height: 6px;
  border: 1.5px solid var(--m3-cobalt);
  border-bottom: 0;
}
.method3__strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 14cqi;
  margin-top: 1.4cqi;
}
.method3__cell {
  position: relative;
  border: 1.5px solid var(--m3-ink);
  border-left-width: 0;
}
.method3__cell:first-child { border-left-width: 1.5px; }
/* the audience that stays: every second after the hook fades */
.method3__cell:nth-child(2) { opacity: 0.72; }
.method3__cell:nth-child(3) { opacity: 0.5; }
.method3__cell:nth-child(4) { opacity: 0.34; }
.method3__cell:nth-child(5) { opacity: 0.22; }
.method3__cell:nth-child(6) { opacity: 0.13; }
.method3__cell--hook { border-color: var(--m3-cobalt); }
.method3__cell-fill {
  position: absolute;
  inset: 0;
  background: var(--m3-cobalt);
}
/* playhead: the line rides the right edge of a box one second wide,
   so translateX(-100%) is 0:00 and none is 0:01 */
.method3__head-wrap {
  position: absolute;
  z-index: 2;
  top: -2.4cqi;
  bottom: -3.2cqi;
  left: 0;
  width: calc(100% / 6);
  pointer-events: none;
}
.method3__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 2px;
  background: var(--m3-ink);
}
.method3__playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.8cqi;
  height: 2.8cqi;
  min-width: 9px;
  min-height: 9px;
  background: var(--m3-ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  translate: -50% 0;
}
.method3__ruler {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-top: 5.2cqi;
  position: relative;
}
/* ticks: a major tick per second, three minors between */
.method3__ruler::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.6cqi;
  background:
    repeating-linear-gradient(90deg, var(--m3-ink) 0 1.5px, transparent 1.5px calc(100% / 6)) left top / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(20, 17, 12, 0.45) 0 1px, transparent 1px calc(100% / 24)) left bottom / 100% 45% no-repeat;
}
.method3__tc { translate: -0.2em 0; }
.method3__tc--on { color: var(--m3-ink); }
.method3__tc--hit { color: var(--m3-cobalt); }

/* ---------- 03 sound-off: a flat waveform over burned-in captions ---------- */
.method3__panel--mute {
  flex-direction: column;
  gap: 4.2cqi;
  padding: 0 6cqi;
}
.method3__wave {
  display: flex;
  align-items: center;
  gap: 3.4cqi;
  width: 100%;
}
.method3__spk {
  flex: 0 0 auto;
  width: 7cqi;
  height: 7cqi;
  fill: none;
  stroke: var(--m3-ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.method3__spk-x { stroke: var(--m3-cobalt); stroke-linecap: square; stroke-width: 2.2; }
.method3__wave-bars {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 11cqi;
}
.method3__wave-bars::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(20, 17, 12, 0.35);
}
.method3__wave-bars i {
  position: relative;
  display: block;
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--m3-ink);
  transform: scaleY(0.08);                      /* final state: flat */
}
.method3__subs {
  margin: 0;
  max-width: 100%;
  padding: 1.7cqi 2.8cqi 1.9cqi;
  border-radius: 3px;
  background: var(--m3-ink);
  color: var(--m3-paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 86%;
  font-size: max(0.9rem, 5.3cqi);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}
.method3__subs-l { display: block; }
.method3__w {
  display: inline-block;
  padding: 0 0.09em;                            /* room for the highlight, cancelled by the margin: no reflow */
  margin: 0 -0.09em;
  border-radius: 0.12em;
}
.method3__w--key,
.method3__w.is-hot {
  background: var(--m3-cobalt);
  box-shadow: 0 0 0 0.06em var(--m3-cobalt);
}

/* ---------- the rule as the card header, the line on ruled lines ---------- */
.method3__card-title {
  position: relative;
  margin: 18px 0 0;
  margin-top: 6cqi;
  padding-bottom: 3.4cqi;
  border-bottom: 2px solid var(--m3-cobalt);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 82%;
  font-size: 1.8rem;                            /* fallback without container units */
  font-size: 9.3cqi;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--m3-ink);
}
/* the second, thinner rule of the double: an index card's header line */
.method3__card-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--m3-cobalt);
}
.method3__copy {
  flex: 1 1 auto;
  margin: 8px 0 0;
  min-height: calc(var(--m3-lh) * 3);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: var(--m3-lh);
  letter-spacing: -0.005em;
  color: var(--m3-ink-soft);
  text-wrap: pretty;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--m3-lh) - 1px), var(--m3-rule) calc(var(--m3-lh) - 1px) var(--m3-lh));
}

/* ---------- deck: a slight hand-dealt tilt; the card in front is square ---------- */
.method3__card--1 { --m3-r: -1.3deg; }
.method3__card--2 { --m3-r: 1.1deg; }
.method3__card--3 { --m3-r: -0.9deg; }
.method3__card.is-current { --m3-r: 0deg; }

/* ---------- deck controls (JS only, below 1000px) ---------- */
.method3__ctrl {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: -8px;
}
.method3--js .method3__ctrl { display: flex; }
.method3__count,
.method3__swipe {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--muted-2, #9a9488);
  font-variant-numeric: tabular-nums;
}
.method3__count b { font-weight: 500; color: var(--m3-paper); }
.method3__swipe { transition: opacity 0.4s var(--m3-ease); }
.method3--end .method3__swipe { opacity: 0.35; }
.method3__dots { display: flex; }
.method3__dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.method3__dot span {
  display: block;
  width: 22px;
  height: 3px;
  background: rgba(240, 236, 227, 0.28);
  transform-origin: 50% 50%;
  transition: background-color 0.3s var(--m3-ease), transform 0.4s var(--m3-ease);
}
.method3__dot[aria-current="true"] span {
  background: var(--m3-cobalt-l);
  transform: scaleX(1.45);
}
.method3__dot:focus-visible { outline: 2px solid var(--m3-cobalt-l); outline-offset: -4px; border-radius: 4px; }
.method3__swipe-arrow { display: inline-block; color: var(--m3-cobalt-l); }

/* ================= tablet: a roomier deck ================= */
@media (min-width: 640px) {
  .method3 { padding: clamp(88px, 10vw, 120px) 0 clamp(80px, 9vw, 110px); }
  .method3__title { font-size: clamp(3.2rem, 7.4vw, 5rem); }
  .method3__slot { flex-basis: 380px; }
  .method3__card { padding: 24px 24px 18px; }
  .method3 { --m3-lh: 26px; }
  .method3__copy { font-size: 0.88rem; }
}

/* ================= desktop: the composed spread ================= */
@media (min-width: 1000px) {
  .method3 { padding: clamp(96px, 9vw, 128px) 0 clamp(120px, 11vw, 168px); }
  .method3__head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label hint" "title title";
    align-items: center;
    column-gap: 40px;
  }
  .method3__label { grid-area: label; }
  .method3__title { grid-area: title; font-size: clamp(3.4rem, 6.1vw, 5.4rem); }
  .method3__hint { grid-area: hint; }

  .method3__deck {
    --m3-ov: clamp(4px, 0.5vw, 8px);            /* how far each card reaches past its column */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: clamp(40px, 4.4vw, 60px) 0 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  /* each slot carries the stacking order and the "in hand" drift, so the
     card's own translate/rotate stay free for the rest pose and the lift */
  .method3__slot {
    position: relative;
    display: block;
    min-width: 0;
    z-index: var(--m3-z, 1);
    translate: calc(var(--m3-px, 0) * 9px) calc(var(--m3-py, 0) * 7px);
    transition: translate 0.45s var(--m3-ease);
  }
  .method3__slot:nth-child(1) { --m3-z: 1; }
  .method3__slot:nth-child(2) { --m3-z: 3; }
  .method3__slot:nth-child(3) { --m3-z: 2; }
  /* the last card you touched stays on top of the pile */
  .method3__slot.is-top { z-index: 4; }
  .method3__slot:has(.method3__card:is(.is-held, :focus-visible)) { z-index: 5; }
  .method3__card {
    width: calc(100% + 2 * var(--m3-ov));
    height: 100%;
    margin-left: calc(-1 * var(--m3-ov));
    /* the side padding is wider than the widest overlap of a neighbour,
       so no line of text ever sits under another card, whichever is on top */
    padding: clamp(22px, 2.1vw, 28px) clamp(24px, 2.4vw, 32px) clamp(18px, 1.8vw, 24px);
  }
  /* the spread: a hand-laid composition, the middle card on top */
  .method3__card--1 { --m3-r: -2.8deg; --m3-x: -10px; --m3-y: 30px; }
  .method3__card--2 { --m3-r: 1.4deg;  --m3-x: 0px;   --m3-y: -10px; }
  .method3__card--3 { --m3-r: 2.6deg;  --m3-x: 10px;  --m3-y: 44px; }
  .method3__card--1.is-current { --m3-r: -2.8deg; }
  .method3__card--2.is-current { --m3-r: 1.4deg; }
  .method3__card--3.is-current { --m3-r: 2.6deg; }

  /* pick up: straighten and lift off the desk */
  .method3__card:focus-visible,
  .method3__card.is-held {
    rotate: 0deg;
    scale: 1.035;
    translate: var(--m3-x) calc(var(--m3-y) - 30px);
  }
  .method3__card:focus-visible::after,
  .method3__card.is-held::after { opacity: 1; }

  /* the neighbours make room */
  .method3__deck:has(.method3__card--1:is(.is-held, :focus-visible)) .method3__card--2 { --m3-push: 22px; }
  .method3__deck:has(.method3__card--1:is(.is-held, :focus-visible)) .method3__card--3 { --m3-push: 26px; }
  .method3__deck:has(.method3__card--2:is(.is-held, :focus-visible)) .method3__card--1 { --m3-push: -24px; }
  .method3__deck:has(.method3__card--2:is(.is-held, :focus-visible)) .method3__card--3 { --m3-push: 24px; }
  .method3__deck:has(.method3__card--3:is(.is-held, :focus-visible)) .method3__card--2 { --m3-push: -22px; }
  .method3__deck:has(.method3__card--3:is(.is-held, :focus-visible)) .method3__card--1 { --m3-push: -26px; }

  .method3--js .method3__ctrl { display: none; }
}
/* CSS-only pick up for mouse users when the script hasn't run. Hover
   lives on the slot, which never moves, plus a strip under it where the
   lower edge of a lifted card used to be: the card can't rise out from
   under the pointer and drop straight back (hover flicker). */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .method3__hint { display: flex; }
  .method3:not(.method3--js) .method3__slot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 64px;
  }
  .method3:not(.method3--js) .method3__slot:hover { z-index: 5; }
  .method3:not(.method3--js) .method3__slot:hover .method3__card {
    rotate: 0deg;
    scale: 1.035;
    translate: var(--m3-x) calc(var(--m3-y) - 30px);
  }
  .method3:not(.method3--js) .method3__slot:hover .method3__card::after { opacity: 1; }
}

/* ===================================================================
   MOTION (only once method.js arms the section; never under reduced
   motion). One-shot deal + draw when the deck enters, loops only while
   the section is on screen (.method3--live).
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* head */
  .method3--armed .method3__label,
  .method3--armed .method3__title,
  .method3--armed .method3__hint {
    opacity: 0;
    transform: translate3d(0, 0.4em, 0);
    transition: opacity 0.7s var(--m3-ease), transform 1s var(--m3-ease);
  }
  .method3--armed .method3__label,
  .method3--armed .method3__hint { transform: translate3d(0, 12px, 0); }
  .method3--armed .method3__head.is-in .method3__label,
  .method3--armed .method3__head.is-in .method3__title,
  .method3--armed .method3__head.is-in .method3__hint { opacity: 1; transform: none; }
  .method3--armed .method3__head.is-in .method3__title { transition-delay: 0.08s; }
  .method3--armed .method3__head.is-in .method3__hint { transition-delay: 0.3s; }

  /* deal: the deck arrives as a pile in the middle and fans out */
  .method3--armed .method3__card {
    --m3-d: 0s;
    opacity: 0;
    transform: translate3d(var(--m3-fx, 48px), var(--m3-fy, 0px), 0) rotate(var(--m3-fr, 3deg));
    transition:
      translate 0.7s var(--m3-lift),
      rotate 0.7s var(--m3-lift),
      scale 0.7s var(--m3-lift),
      opacity 0.14s linear var(--m3-d),
      transform 1.15s var(--m3-ease) var(--m3-d);
  }
  .method3--armed .method3__card--2 { --m3-d: 0.09s; }
  .method3--armed .method3__card--3 { --m3-d: 0.18s; }
  .method3--armed .method3__deck.is-in .method3__card { opacity: 1; transform: none; }

  /* draw: each motif plays once the card has landed */
  /* 01: the native frame fills from the floor; the 16:9 is squeezed into the feed */
  .method3--armed .method3__frame--native {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.8s var(--m3-ease) calc(var(--m3-d) + 0.6s);
  }
  .method3--armed .method3__frame--native .method3__who {
    translate: -50% 35%;
    transition: translate 1s var(--m3-ease) calc(var(--m3-d) + 0.75s);
  }
  .method3--armed .method3__wide {
    transform: scale(2.1);
    opacity: 0;
    transition: transform 1.1s var(--m3-ease) calc(var(--m3-d) + 0.85s), opacity 0.3s linear calc(var(--m3-d) + 0.75s);
  }
  .method3--armed .method3__bars {
    opacity: 0;
    transition: opacity 0.5s linear calc(var(--m3-d) + 1.5s);
  }
  .method3--armed .method3__gt {
    opacity: 0;
    transform: translate3d(-6px, 0, 0);
    transition: opacity 0.4s linear calc(var(--m3-d) + 1.1s), transform 0.6s var(--m3-ease) calc(var(--m3-d) + 1.1s);
  }
  .method3--armed .method3__deck.is-in .method3__frame--native { clip-path: inset(0 0 0 0); }
  .method3--armed .method3__deck.is-in .method3__frame--native .method3__who { translate: -50% 0; }
  .method3--armed .method3__deck.is-in .method3__wide { transform: none; opacity: 1; }
  .method3--armed .method3__deck.is-in .method3__bars,
  .method3--armed .method3__deck.is-in .method3__gt { opacity: 1; transform: none; }
  /* picking the card up replays the squeeze */
  .method3--armed .method3__deck.is-in .method3__card--1:is(.is-held, :focus-visible) .method3__wide {
    animation: method3Squeeze 1.1s var(--m3-ease);
  }
  .method3--armed .method3__deck.is-in .method3__card--1:is(.is-held, :focus-visible) .method3__bars {
    animation: method3Bars 1.1s linear;
  }

  /* 02: the playhead crosses the hook in exactly one real second, holds, resets */
  .method3--armed .method3__brace {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition: opacity 0.4s linear calc(var(--m3-d) + 0.7s), transform 0.6s var(--m3-ease) calc(var(--m3-d) + 0.7s);
  }
  .method3--armed .method3__deck.is-in .method3__brace { opacity: 1; transform: none; }
  .method3--armed .method3__deck.is-in .method3__head-wrap {
    animation: method3Play 3s linear calc(var(--m3-d) + 0.9s) infinite backwards;
  }
  .method3--armed .method3__deck.is-in .method3__cell-fill {
    animation: method3Fill 3s linear calc(var(--m3-d) + 0.9s) infinite backwards;
  }
  .method3--armed .method3__deck.is-in .method3__tc--hit {
    animation: method3Hit 3s linear calc(var(--m3-d) + 0.9s) infinite backwards;
  }

  /* 03: the waveform collapses flat, left to right; captions are driven by JS */
  .method3--armed .method3__wave-bars i {
    transform: scaleY(var(--h, 0.5));
    transition: transform 0.55s var(--m3-ease) calc(var(--m3-d) + 0.7s + var(--i, 0) * 22ms);
  }
  .method3--armed .method3__deck.is-in .method3__wave-bars i { transform: scaleY(0.08); }
  .method3--armed .method3__spk-x {
    opacity: 0;
    transition: opacity 0.25s linear calc(var(--m3-d) + 1.25s);
  }
  .method3--armed .method3__deck.is-in .method3__spk-x { opacity: 1; }
  .method3--captions .method3__w { opacity: 0; transition: opacity 0.12s linear; }
  .method3--captions .method3__w--key:not(.is-hot) { background: none; box-shadow: none; }
  .method3--captions .method3__w.is-shown { opacity: 1; }
  .method3--captions .method3__w.is-hot { animation: method3Pop 0.28s var(--m3-ease); }

  /* loops rest while the section is off screen */
  .method3--armed:not(.method3--live) .method3__head-wrap,
  .method3--armed:not(.method3--live) .method3__cell-fill,
  .method3--armed:not(.method3--live) .method3__tc--hit { animation-play-state: paused; }

  .method3__swipe-arrow { animation: method3Nudge 2.4s var(--m3-ease) infinite; }
  .method3:not(.method3--live) .method3__swipe-arrow { animation-play-state: paused; }
  .method3--end .method3__swipe-arrow { animation: none; }

  /* deck: cards slide in from the right, one after another */
  @media (max-width: 999px) {
    .method3--armed .method3__card { --m3-fx: 56px; --m3-fy: 0px; --m3-fr: 2.5deg; }
  }
  /* spread: from a pile in the middle of the desk */
  @media (min-width: 1000px) {
    .method3--armed .method3__card--1 { --m3-fx: 96%;  --m3-fy: 110px; --m3-fr: 7deg; }
    .method3--armed .method3__card--2 { --m3-fx: 0%;   --m3-fy: 150px; --m3-fr: -3deg; }
    .method3--armed .method3__card--3 { --m3-fx: -96%; --m3-fy: 120px; --m3-fr: -8deg; }
  }
}

@keyframes method3Play {
  0%     { transform: translate3d(-100%, 0, 0); opacity: 1; }
  33.33% { transform: translate3d(0, 0, 0); opacity: 1; }      /* 1.0s: 0:01 */
  84%    { transform: translate3d(0, 0, 0); opacity: 1; }
  90%    { transform: translate3d(0, 0, 0); opacity: 0; }
  91%    { transform: translate3d(-100%, 0, 0); opacity: 0; }
  97%    { transform: translate3d(-100%, 0, 0); opacity: 1; }
  100%   { transform: translate3d(-100%, 0, 0); opacity: 1; }
}
@keyframes method3Fill {
  0%     { clip-path: inset(0 100% 0 0); opacity: 1; }
  33.33% { clip-path: inset(0 0 0 0); opacity: 1; }
  84%    { clip-path: inset(0 0 0 0); opacity: 1; }
  90%    { clip-path: inset(0 0 0 0); opacity: 0; }
  91%    { clip-path: inset(0 100% 0 0); opacity: 0; }
  92%    { clip-path: inset(0 100% 0 0); opacity: 1; }
  100%   { clip-path: inset(0 100% 0 0); opacity: 1; }
}
@keyframes method3Hit {
  0%, 32%   { color: var(--m3-muted); }
  33.33%    { color: var(--m3-cobalt); }
  88%       { color: var(--m3-cobalt); }
  92%, 100% { color: var(--m3-muted); }
}
@keyframes method3Squeeze {
  0%   { transform: scale(1); }
  30%  { transform: scale(2.1); }
  100% { transform: scale(1); }
}
@keyframes method3Bars {
  0%, 25% { opacity: 1; }
  30%     { opacity: 0; }
  70%     { opacity: 0; }
  100%    { opacity: 1; }
}
@keyframes method3Pop {
  0%   { transform: scale(0.82); }
  100% { transform: none; }
}
@keyframes method3Nudge {
  0%, 60%, 100% { transform: none; }
  75%           { transform: translate3d(5px, 0, 0); }
}

/* reduced motion: the finished spread, instantly responsive to hover/focus */
@media (prefers-reduced-motion: reduce) {
  .method3__slot,
  .method3__card,
  .method3__card::after,
  .method3__dot span { transition: none; }
  .method3__deck { scroll-behavior: auto; }
}