/* ============================================================
   CARDS — candidates (sections lab, group CD)
   New parts live under .deck-*; kit card variants are .card--*.
   The kit's .card stays the interaction: one link per card, C02
   image zoom + arrow chip (C06 "frame tightens" where a site chose
   it). Tokens only; every other value is a knob on its component.
   ============================================================ */

/* ---- shared: the section head ----
   <div class="deck-head">
     <div> .eyebrow · h2 </div>   (or the h2 alone)
     .lead  or  a.link
   </div>
   The heading takes the wider column; a lead or a route link sits at
   its foot on the right. */
.deck-head {
  display: grid; grid-template-columns: minmax(0, 3.75fr) minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-8); align-items: end; margin-bottom: var(--sp-8);
}
.deck-head h2 { max-width: 24ch; text-wrap: balance; }
.deck-head > .lead { justify-self: end; max-width: 42ch; text-wrap: pretty; }
.deck-head > .link { justify-self: end; }

/* ---- shared: a card row that becomes a native swipe row at ≤900px,
   the next card peeking. It bleeds to the viewport edges and keeps the
   gutter as its scroll padding. Set --deck-peek per row. ---- */
.deck-swipe { --deck-peek: 58%; }

/* ============================================================
   CD01 · live-fragment feature cards
   <div class="deck-live__row deck-swipe" data-reveal-group>
     <a class="card card--live reveal" href="…">
       <div class="deck-live__stage" data-state="b" aria-hidden="true">
         <div class="deck-frag">
           p.deck-frag__bar · span.deck-frag__prog · p.deck-frag__top (b + .deck-state.deck-chip)
           · ul.deck-frag__rows > li.deck-frag__row (span · span · .deck-roll | .deck-state)
         </div>
       </div>
       <div class="deck-live__text"> .card__meta · h3.card__title · p.deck-live__p · .card__go </div>
     </a> × 3
   </div>
   The stage is the card's image: a code-drawn UI fragment on --surface,
   cropped by the stage's lower edge like I05's screen. data-state="a" is
   the moment before, "b" after; markup ships "b", so without JS or under
   reduced motion the card shows the finished state. .deck-state holds two
   labels in one cell and crossfades; .deck-roll rolls a figure. */
.deck-live__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); }
.card--live { background: none; border: 0; border-radius: 0; overflow: visible; }
.deck-live__stage {
  --frag-shadow: 0 30px 60px -32px rgba(0, 0, 0, .55);
  --frag-lift: -10px;
  --frag-step: 200ms;           /* stagger between rows inside a fragment */
  position: relative; aspect-ratio: var(--ratio-inline); overflow: clip;
  border: 1px solid var(--hairline); border-radius: var(--img-radius);
  background: var(--bg-2);
  transition: border-color .3s var(--ease-out);
}
.deck-frag {
  position: absolute; left: 8%; right: 8%; top: 12%;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--img-radius-sm);
  box-shadow: var(--frag-shadow);
  font-size: calc(var(--fs-small) * .93); line-height: 1.4; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  transition: transform .8s var(--ease-out);
}
.deck-frag p { max-width: none; color: inherit; }
.deck-frag__bar {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font-family: var(--font-label, inherit); font-size: .82em; letter-spacing: .08em; color: var(--fg-dim);
}
.deck-frag__prog { display: block; height: 2px; margin: var(--sp-1) 0 var(--sp-2); background: var(--hairline); overflow: clip; }
.deck-frag__prog::after {
  content: ""; display: block; height: 100%; background: var(--fg-dim);
  transform-origin: left; transition: transform 1s var(--ease-out);
}
[data-state="a"] .deck-frag__prog::after { transform: scaleX(0); }
.deck-frag__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.deck-frag__top > b { color: var(--fg); font-weight: 600; font-size: 1.1em; white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
.deck-frag__sub { margin-top: 2px; font-size: .9em; }
.deck-frag__rows { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.deck-frag__row {
  position: relative; display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto;
  gap: var(--sp-2); align-items: center; padding: 6px 0; border-top: 1px solid var(--hairline);
}
.deck-frag__row > span { min-width: 0; white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
.deck-frag__row > :last-child { justify-self: end; color: var(--fg); }
/* the flagged row: the section's one small brand state */
.deck-frag__row--flag::before {
  content: ""; position: absolute; left: calc(var(--sp-3) * -1 - 1px); top: 5px; bottom: 5px; width: 2px;
  background: var(--brand); opacity: 0;
  transition: opacity .4s var(--ease-out) calc(var(--i, 0) * var(--frag-step) + 250ms);
}
[data-state="b"] .deck-frag__row--flag::before { opacity: 1; }
.deck-frag__row--flag > :last-child { color: var(--fg); font-weight: 600; }

.deck-state { display: inline-grid; align-items: center; }
.deck-state > * {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  transition: opacity .35s var(--ease-out) calc(var(--i, 0) * var(--frag-step) + 250ms);
}
[data-state="a"] .deck-state__b, [data-state="b"] .deck-state__a { opacity: 0; }
.deck-state .ico { width: 1.15em; height: 1.15em; stroke-width: 2; }
.deck-frag__note { color: var(--fg-dim); font-size: .9em; }
.deck-chip {
  padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--fg) 24%, transparent); border-radius: 999px;
  font-size: .86em; line-height: 1.35; color: var(--fg-muted);
  transition: background-color .4s var(--ease-out) .5s, color .4s var(--ease-out) .5s, border-color .4s var(--ease-out) .5s;
}
.deck-chip > * { transition-delay: .5s; }
[data-state="b"] .deck-chip--done { background: var(--fg); border-color: var(--fg); color: var(--bg); }
[data-state="b"] .deck-chip--flag { border-color: var(--brand); color: var(--fg); }

.deck-roll { display: inline-block; height: 1.4em; overflow: clip; vertical-align: top; }
.deck-roll__s {
  display: flex; flex-direction: column;
  transition: transform .7s var(--ease-out) calc(var(--i, 0) * var(--frag-step) + 250ms);
}
.deck-roll__s > span { height: 1.4em; line-height: 1.4em; text-align: right; }
[data-state="b"] .deck-roll__s { transform: translateY(-1.4em); }
/* JS snaps a stage back to "before" without replaying the transitions */
.deck-live__stage.is-reset *, .deck-live__stage.is-reset *::before, .deck-live__stage.is-reset *::after { transition: none; }

.deck-live__text { position: relative; padding: var(--sp-4) 52px 0 0; }
.card--live .card__meta { margin: 0; }
.card--live .card__title { margin: var(--sp-2) 0 0; padding: 0; font-size: calc(var(--fs-h3) * 1.1); line-height: 1.25; text-wrap: balance; }
.deck-live__p { margin-top: var(--sp-2); text-wrap: pretty; }
.card--live .card__go { top: var(--sp-4); right: 0; bottom: auto; }
.card--live:focus-visible .deck-frag { transform: translateY(var(--frag-lift)); }
@media (hover: hover) {
  .card--live:hover .deck-frag { transform: translateY(var(--frag-lift)); }
  .card--live:hover .deck-live__stage { border-color: color-mix(in srgb, var(--fg) 26%, transparent); }
}

/* ============================================================
   CD02 · stepped lead row
   <div class="wrap deck-steps__grid">
     <div class="deck-steps__head"> .eyebrow · h2 </div>
     <div class="deck-steps__aside"> p · a.link </div>
     <a class="card card--step card--step-1 reveal">
       <div class="deck-steps__media"> .photo(.parallax on the lead only) </div>
       <div class="deck-steps__text"> p.deck-steps__n · h3.card__title · p.deck-steps__p · .card__go </div>
     </a> … --step-2, --step-3
   </div>
   Three columns in falling widths (--steps-cols). Each card spans the
   media and text rows as a subgrid: the 3:2 photos sit on one bottom
   edge, so their tops step down, and the titles share one line. The
   paragraph sits in the space above the small cards. The zoom is the
   `scale` property, so it composes with the lead's drift transform. */
.deck-steps__grid {
  --steps-cols: minmax(0, 6fr) minmax(0, 3.6fr) minmax(0, 2.4fr);
  display: grid; grid-template-columns: var(--steps-cols); column-gap: var(--sp-5);
}
.deck-steps__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--sp-8); }
.deck-steps__head h2 { max-width: 16ch; text-wrap: balance; }
.deck-steps__aside { grid-column: 2 / 4; grid-row: 2; align-self: start; position: relative; z-index: 1; max-width: 44ch; }
.deck-steps__aside p { text-wrap: pretty; }
.deck-steps__aside .link { margin-top: var(--sp-3); }
.card--step {
  grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; row-gap: 0;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.card--step-1 { grid-column: 1; }
.card--step-2 { grid-column: 2; }
.card--step-3 { grid-column: 3; }
.deck-steps__media { align-self: end; }
.deck-steps__media .photo img { transition: scale 1s var(--ease-out); }
.card--step:focus-visible .deck-steps__media .photo img { scale: 1.05; }
.deck-steps__text { position: relative; margin-top: var(--sp-4); padding: var(--sp-4) 48px 0 0; border-top: 1px solid var(--hairline); }
.deck-steps__n {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.card--step .card__title { margin: var(--sp-2) 0 0; padding: 0; line-height: 1.25; text-wrap: balance; hyphens: auto; }
.card--step-1 .card__title { font-size: calc(var(--fs-h2) * .6); line-height: 1.1; letter-spacing: var(--ls-head, var(--ls-display)); }
.card--step-3 .card__title { font-size: calc(var(--fs-h3) * .92); }
.deck-steps__p { margin-top: var(--sp-2); text-wrap: pretty; }
.card--step-1 .deck-steps__p { font-size: var(--fs-lead); max-width: 40ch; }
.card--step-3 .deck-steps__p { font-size: var(--fs-small); }
.card--step .card__go { top: var(--sp-4); right: 0; bottom: auto; }
@media (hover: hover) {
  .card--step:hover .deck-steps__media .photo img { scale: 1.05; }
}

/* ============================================================
   CD03 · outcome-led case cards
   <div class="deck-out__row deck-swipe" data-reveal-group>
     <a class="card card--out reveal">
       p.card__meta · p.deck-out__fig > .odometer · p.deck-out__k · .card__media > img
       · div.deck-out__foot ( h3.card__title · .card__go )
     </a> × 3
   </div>
   No card boxes: hairlines divide the columns. Each card is a subgrid
   over five shared rows, so the sector lines, figures, measures, photos
   and titles align across the row whatever wraps. The kit's C02 hover
   (and C06, if chosen) acts on .card__media unchanged. */
.deck-out__row {
  --out-fig: calc(var(--fs-display) * 1.45);
  --out-pad: var(--sp-5);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto);
}
.card--out {
  grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0;
  padding: 0 var(--out-pad); background: none; border: 0; border-radius: 0; overflow: visible;
  border-left: 1px solid var(--hairline);
}
.card--out:first-child { padding-left: 0; border-left: 0; }
.card--out:last-child { padding-right: 0; }
.card--out .card__meta { margin: 0; }
.deck-out__fig {
  margin-top: var(--sp-6); max-width: none; white-space: nowrap;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--out-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--head-1, var(--fg)); font-variant-numeric: tabular-nums;
}
.deck-out__k { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.45; max-width: 28ch; }
.card--out .card__media { margin-top: var(--sp-6); border: 1px solid var(--hairline); border-radius: var(--img-radius); }
.deck-out__foot { position: relative; padding: var(--sp-4) 48px var(--sp-1) 0; }
.card--out .card__title { margin: 0; padding: 0; font-size: var(--fs-h3); line-height: 1.3; text-wrap: balance; }
.card--out .card__go { right: 0; top: var(--sp-4); bottom: auto; }

/* ============================================================
   CD04 · one result, four causes
   <div class="deck-proof__grid">
     <div class="deck-proof__result"> p.deck-proof__client · p.deck-proof__fig > .odometer
       · p.deck-proof__k · p.deck-proof__p · a.link </div>
     <ol class="deck-proof__causes"> li.deck-proof__cause.reveal ( p.deck-proof__n · h3 · p ) × 4 </ol>
   </div>
   Three columns: the result in the middle across both rows, the four
   causes flanking it two by two. The list is a subgrid over the whole
   grid, so the DOM keeps the result first and the list whole. A short
   hairline ties each cause to the result. */
.deck-proof__grid {
  --proof-fig: calc(var(--fs-display) * 1.5);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto; gap: var(--sp-4);
}
.deck-proof__result {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--sp-6) var(--sp-5);
}
.deck-proof__client {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.deck-proof__fig {
  margin-top: var(--sp-4); max-width: none; white-space: nowrap;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--proof-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--head-1, var(--fg)); font-variant-numeric: tabular-nums;
}
.deck-proof__k { margin-top: var(--sp-3); color: var(--fg); font-weight: 600; max-width: 24ch; text-wrap: balance; }
.deck-proof__p { margin-top: var(--sp-4); max-width: 34ch; text-wrap: balance; }
.deck-proof__result .link { margin-top: var(--sp-5); }
.deck-proof__causes {
  grid-column: 1 / -1; grid-row: 1 / span 2;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  list-style: none; margin: 0; padding: 0;
}
.deck-proof__cause {
  position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--bg-3); border: 1px solid var(--hairline); border-radius: var(--radius-card);
}
.deck-proof__cause:nth-child(1) { grid-column: 1; grid-row: 1; }
.deck-proof__cause:nth-child(2) { grid-column: 3; grid-row: 1; }
.deck-proof__cause:nth-child(3) { grid-column: 1; grid-row: 2; }
.deck-proof__cause:nth-child(4) { grid-column: 3; grid-row: 2; }
.deck-proof__cause::after {
  content: ""; position: absolute; top: 50%; width: var(--sp-6); height: 1px; background: var(--hairline);
}
.deck-proof__cause:nth-child(odd)::after { left: 100%; }
.deck-proof__cause:nth-child(even)::after { right: 100%; }
.deck-proof__n { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.deck-proof__cause h3 { margin-top: var(--sp-4); text-wrap: balance; }
.deck-proof__cause p:last-child { margin-top: var(--sp-2); text-wrap: pretty; }

/* ============================================================
   CD05 · three doors, each with a fact
   <div class="deck-doors__row deck-swipe" data-reveal-group>
     <a class="card card--door reveal">
       .card__media > img (3:4)
       <div class="deck-doors__text"> p.card__meta · h3.card__title · p.deck-doors__p
         · p.deck-doors__fact ( b · span ) · .card__go </div>
     </a> × 3
   </div>
   No surface: the photo is the card, with the image corner. The fact
   footer sits on the card's foot, so the three facts share a line. */
.deck-doors__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.card--door { background: none; border: 0; border-radius: 0; overflow: visible; }
.card--door .card__media { aspect-ratio: var(--ratio-people); border: 1px solid var(--hairline); border-radius: var(--img-radius); }
.card--door :is(.card__media, .deck-doors__text) { transition: opacity .4s var(--ease-out); }
.deck-doors__text { position: relative; flex: 1; display: flex; flex-direction: column; padding-top: var(--sp-5); }
.card--door .card__meta { margin: 0; }
.card--door .card__title {
  margin: var(--sp-2) 0 0; padding: 0;
  font-size: calc(var(--fs-h2) * .5); line-height: 1.15; letter-spacing: var(--ls-head, var(--ls-display));
  text-wrap: balance; hyphens: auto;
}
.deck-doors__p { margin: var(--sp-3) 0 var(--sp-5); text-wrap: pretty; }
.deck-doors__fact {
  margin-top: auto; padding: var(--sp-4) 52px 0 0; max-width: none;
  display: flex; align-items: baseline; gap: var(--sp-2);
  border-top: 1px solid var(--hairline); color: var(--fg-muted); font-size: var(--fs-small);
}
.deck-doors__fact b {
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: var(--fw-head, 700);
  font-size: calc(var(--fs-h3) * 1.4); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums;
}
.card--door .card__go { right: 0; bottom: 0; }
@media (hover: hover) {
  .deck-doors__row:has(.card--door:hover) .card--door:not(:hover) :is(.card__media, .deck-doors__text) { opacity: .45; }
}

/* ============================================================
   CD06 · typed resource cards
   <div class="deck-docs__row deck-swipe" data-reveal-group>
     <a class="card card--doc reveal">
       <div class="deck-docs__cover"> svg.deck-docs__art </div>
       <div class="deck-docs__body"> p.card__meta · h3.card__title · p.deck-docs__p
         · p.deck-docs__foot ( span.deck-docs__format · span.deck-docs__verb + .arrow ) </div>
     </a> × 3
   </div>
   Text cards on the kit's card surface. The cover is a drawing of the
   format (a paged guide, a player, a ticked list), monochrome through
   currentColor; .is-ink strokes and .is-dot fills take the text colour.
   The action is the type's own verb; the kit's .card rule cycles its arrow. */
.deck-docs__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.card--doc { transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out); }
.deck-docs__cover {
  position: relative; display: grid; place-items: center; overflow: clip;
  aspect-ratio: var(--ratio-teaser); background: var(--bg-2); border-bottom: 1px solid var(--hairline);
  color: color-mix(in srgb, var(--fg) 34%, transparent);
}
.deck-docs__art {
  width: 64%; height: auto; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .8s var(--ease-out);
}
.deck-docs__art * { vector-effect: non-scaling-stroke; }
.deck-docs__art .deck-docs__sheet { fill: var(--surface); }
.deck-docs__art .is-ink { stroke: var(--fg); }
.deck-docs__art .is-dot { fill: var(--fg); stroke: none; }
.deck-docs__body { flex: 1; display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.card--doc .card__meta { margin: 0; }
.card--doc .card__title { margin: var(--sp-2) 0 0; padding: 0; font-size: calc(var(--fs-h3) * 1.05); line-height: 1.3; text-wrap: balance; hyphens: auto; }
.deck-docs__p { margin: var(--sp-2) 0 var(--sp-5); text-wrap: pretty; }
.deck-docs__foot {
  margin-top: auto; padding-top: var(--sp-4); max-width: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  border-top: 1px solid var(--hairline);
}
.deck-docs__format { font-size: var(--fs-small); color: var(--fg-dim); }
.deck-docs__verb { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; font-weight: 600; color: var(--fg); }
.card--doc:focus-visible { background: var(--surface); }
@media (hover: hover) {
  .card--doc:hover { border-color: color-mix(in srgb, var(--fg) 28%, transparent); background: var(--surface); }
  .card--doc:hover .deck-docs__art { transform: translateY(-4px); }
}

/* ============================================================
   CD07 · the fork: two-up choice
   <div class="deck-fork__head"> h2 · .lead </div>
   <div class="deck-fork__pair">
     <div class="deck-fork__side reveal"><a class="card card--fork">
       .photo.parallax · div.deck-fork__body ( .card__meta · h3.card__title
       · ul.deck-fork__list · span.deck-fork__go + .arrow )
     </a></div>
     <p class="deck-fork__or" aria-hidden="true"><span>oder</span></p>
     <div class="deck-fork__side reveal">…</div>
   </div>
   One hairline runs down from the question into the gap between the two
   sides; "oder" sits on it where it splits. The reveal sits on a wrapper,
   because a finished reveal animation holds opacity and the hover dim
   needs the card's own. The zoom is `scale`, composing with the drift. */
.deck-fork__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.deck-fork__head h2 { max-width: 25ch; text-wrap: balance; }
.deck-fork__head .lead { margin-top: var(--sp-4); max-width: 50ch; text-wrap: balance; }
.deck-fork__pair {
  --fork-gap: var(--sp-8);
  --fork-rise: var(--sp-7);    /* how far the line reaches up toward the lead */
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--fork-gap); margin-top: calc(var(--fork-rise) + var(--sp-6));
}
.deck-fork__pair::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--fork-rise) * -1); bottom: 0; width: 1px;
  background: var(--hairline);
}
.deck-fork__or {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); z-index: 1; margin: 0;
  padding: var(--sp-1) var(--sp-2); background: var(--bg);
  font-family: var(--font-label, inherit); font-size: var(--fs-small); color: var(--fg-dim); letter-spacing: .04em;
}
.deck-fork__side { display: flex; }
.card--fork { flex: 1; background: none; border: 0; border-radius: 0; overflow: visible; transition: opacity .4s var(--ease-out); }
.card--fork .photo img { transition: scale 1s var(--ease-out); }
.deck-fork__body { flex: 1; display: flex; flex-direction: column; padding-top: var(--sp-5); }
.card--fork .card__meta { margin: 0; }
.card--fork .card__title {
  margin: var(--sp-2) 0 0; padding: 0; max-width: 22ch;
  font-size: calc(var(--fs-h2) * .5); line-height: 1.15; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.deck-fork__list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; color: var(--fg-muted); }
.deck-fork__list li { padding: var(--sp-2) 0; border-top: 1px solid var(--hairline); }
.deck-fork__go {
  display: inline-flex; align-items: center; gap: var(--sp-1); align-self: flex-start;
  margin-top: auto; padding-top: var(--sp-5); font-weight: 600;
}
.card--fork:focus-visible .photo img { scale: 1.05; }
@media (hover: hover) {
  .card--fork:hover .photo img { scale: 1.05; }
  .deck-fork__pair:has(.card--fork:hover) .card--fork:not(:hover) { opacity: .45; }
}

/* ============================================================
   CD08 · hairline promise table
   <div class="wrap deck-table__grid">
     <div class="deck-table__head"> .eyebrow · h2 · .lead </div>
     <ol class="deck-table__list" data-reveal-group>
       <li class="reveal"> span.deck-table__n · h3 · p </li> × 6
     </ol>
   </div>
   Hairlines only: a rule over every block and one between the columns.
   The index hangs in its own column so the titles share an axis. JS adds
   .is-armed (not under reduced motion) and .is-in once the table is in
   view; the rules then draw in, staggered by the reveal index. */
.deck-table__grid { display: grid; grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr); gap: var(--sp-8); align-items: start; }
.deck-table__head h2 { text-wrap: balance; }
.deck-table__head .lead { margin-top: var(--sp-5); max-width: 36ch; text-wrap: pretty; }
.deck-table__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deck-table__list > li {
  position: relative; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-content: start;
  padding: var(--sp-5) var(--sp-6) var(--sp-7) 0;
}
.deck-table__list > li:nth-child(even) { padding: var(--sp-5) 0 var(--sp-7) var(--sp-6); }
.deck-table__list > li::before,
.deck-table__list > li::after { content: ""; position: absolute; left: 0; top: 0; background: var(--hairline); }
.deck-table__list > li::before { right: 0; height: 1px; transform-origin: left; }
.deck-table__list > li::after { bottom: 0; width: 1px; transform-origin: top; }
.deck-table__list > li:nth-child(odd)::after { content: none; }
.deck-table__n {
  grid-row: 1 / span 2; padding-top: .45em;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.deck-table__list h3 { text-wrap: balance; }
.deck-table__list p { grid-column: 2; margin-top: var(--sp-2); text-wrap: pretty; }
.deck-table__list.is-armed:not(.is-in) > li::before { transform: scaleX(0); }
.deck-table__list.is-armed:not(.is-in) > li::after { transform: scaleY(0); }
.deck-table__list.is-armed.is-in > li::before,
.deck-table__list.is-armed.is-in > li::after {
  transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

/* ============================================================
   reduced motion: every state still changes; nothing moves
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .deck-frag, .deck-frag__prog::after, .deck-state > *, .deck-chip, .deck-chip > *, .deck-roll__s,
  .deck-frag__row--flag::before, .deck-live__stage,
  .deck-steps__media .photo img, .card--door :is(.card__media, .deck-doors__text),
  .card--doc, .deck-docs__art, .card--fork, .card--fork .photo img { transition: none; }
  .card--live:hover .deck-frag, .card--live:focus-visible .deck-frag,
  .card--doc:hover .deck-docs__art { transform: none; }
  .card--step:hover .deck-steps__media .photo img, .card--step:focus-visible .deck-steps__media .photo img,
  .card--fork:hover .photo img, .card--fork:focus-visible .photo img { scale: none; }
  .deck-table__list > li::before, .deck-table__list > li::after { transition: none; transform: none; }
}

/* ============================================================
   ≤1100px — CD02's paragraph moves up beside the heading
   ============================================================ */
@media (max-width: 1100px) {
  .deck-steps__head { grid-column: 1; margin-bottom: var(--sp-7); }
  .deck-steps__aside { grid-column: 2 / 4; grid-row: 1; align-self: end; margin-bottom: var(--sp-7); }
  .deck-proof__grid { --proof-fig: calc(var(--fs-display) * 1.3); }
}

/* ============================================================
   ≤900px — tablets
   ============================================================ */
@media (max-width: 900px) {
  .deck-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-7); }
  .deck-head > .lead, .deck-head > .link { justify-self: start; }

  .deck-swipe {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--deck-peek);
    gap: var(--sp-4); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .deck-swipe::-webkit-scrollbar { display: none; }
  .deck-swipe > * { scroll-snap-align: start; }

  /* CD01 */
  .deck-live__row { gap: var(--sp-4); }

  /* CD02: the lead across, the two others side by side */
  .deck-steps__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--sp-7); }
  .deck-steps__head { grid-column: 1 / -1; grid-row: auto; margin-bottom: 0; }
  .deck-steps__aside { grid-column: 1 / -1; grid-row: auto; margin: calc(var(--sp-7) * -1 + var(--sp-4)) 0 0; }
  .card--step { grid-row: auto; display: flex; flex-direction: column; }
  .card--step-1 { grid-column: 1 / -1; }
  .card--step-2 { grid-column: 1; }
  .card--step-3 { grid-column: 2; }
  .card--step-3 .card__title { font-size: var(--fs-h3); }
  .card--step-3 .deck-steps__p { font-size: var(--fs-body); }

  /* CD03: the swipe row keeps its five shared rows */
  .deck-out__row { --deck-peek: 62%; --out-fig: calc(var(--fs-display) * 1.2); column-gap: 0; }
  .card--out:last-child { padding-right: var(--out-pad); }

  /* CD04: the result first, the causes two by two */
  .deck-proof__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .deck-proof__result { grid-column: 1 / -1; grid-row: auto; align-items: flex-start; text-align: left; padding: 0 0 var(--sp-5); }
  .deck-proof__causes { grid-column: 1 / -1; grid-row: auto; grid-template-columns: subgrid; grid-template-rows: none; row-gap: var(--sp-4); }
  .deck-proof__cause:nth-child(n) { grid-column: auto; grid-row: auto; }
  .deck-proof__cause::after { content: none; }

  /* CD05 · CD06 */
  .deck-doors__row { --deck-peek: 64%; }
  .deck-docs__row { --deck-peek: 64%; }

  /* CD07 */
  .deck-fork__pair { --fork-gap: var(--sp-6); }

  /* CD08: the heading over the table */
  .deck-table__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
}

/* ============================================================
   ≤640px — phones
   ============================================================ */
@media (max-width: 640px) {
  .deck-swipe { --deck-peek: 84%; }
  .deck-head h2 { max-width: none; }

  /* CD01 */
  .deck-live__row { --deck-peek: 86%; }

  /* CD02: only the lead keeps its photo; the others step down to text */
  .deck-steps__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }
  .deck-steps__aside { margin-top: calc(var(--sp-6) * -1 + var(--sp-3)); }
  .card--step-1, .card--step-2, .card--step-3 { grid-column: 1; }
  .card--step:not(.card--step-1) .deck-steps__media { display: none; }
  .card--step:not(.card--step-1) .deck-steps__text { margin-top: 0; }
  .card--step-1 .card__title { font-size: calc(var(--fs-h2) * .85); }
  .card--step-1 .deck-steps__p { font-size: var(--fs-body); }

  /* CD03 */
  .deck-out__row { --deck-peek: 80%; }

  /* CD04 */
  .deck-proof__grid { grid-template-columns: minmax(0, 1fr); }
  .deck-proof__grid { --proof-fig: calc(var(--fs-display) * 1.6); }
  .deck-proof__cause { padding: var(--sp-4) var(--sp-4) var(--sp-5); }

  /* CD05 · CD06 */
  .deck-doors__row { --deck-peek: 80%; }
  .deck-docs__row { --deck-peek: 84%; }
  .card--door .card__title { font-size: calc(var(--fs-h3) * 1.15); }

  /* CD07: the sides stack; "oder" sits on a rule between them */
  .deck-fork__head { align-items: flex-start; text-align: left; }
  .deck-fork__pair { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-7); }
  .deck-fork__pair::before { content: none; }
  .deck-fork__or {
    position: static; transform: none; padding: var(--sp-5) 0; background: none;
    display: flex; align-items: center; gap: var(--sp-3);
  }
  .deck-fork__or::before, .deck-fork__or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
  .card--fork .card__title { font-size: calc(var(--fs-h3) * 1.2); }

  /* CD08: one column, the index still hanging */
  .deck-table__list { grid-template-columns: minmax(0, 1fr); }
  .deck-table__list > li, .deck-table__list > li:nth-child(even) { padding: var(--sp-4) 0 var(--sp-5); grid-template-columns: 2.6em minmax(0, 1fr); }
  .deck-table__list > li::after { content: none; }
}


/* ---- 2026-09-11 · BDG page view ---- */
/* Keeps "Go-live" in one piece in running text (cards.js, CD09–CD11). */
.deck-nw { white-space: nowrap; }

/* ============================================================
   CD09 · sibling cards, drawn covers
   <div class="deck-rel__row deck-swipe">
     <a class="card card--rel">                        (a sibling)
       <div class="deck-rel__cover"> svg.deck-rel__art </div>
       <div class="deck-rel__body"> p.card__meta · h3.card__title · p.deck-rel__p
         · p.deck-rel__foot > span.deck-rel__verb + .arrow </div>
     </a>
     <div class="card card--rel card--rel-here" aria-current="page"> …
       p.deck-rel__foot > span.deck-rel__here ( span.deck-rel__pin · text ) </div>
     (wissen) <div class="card card--rel card--rel-group"> … h3 · ul.deck-rel__links > li > a.link </div>
   </div>
   The covers draw in CD06's hand: monochrome, currentColor, .is-ink and
   .is-dot in the text colour, .is-dash for a proposal. The current page
   keeps its place as an open dashed frame with no surface and no hover;
   its pin is the section's one small brand state.
   ============================================================ */
.deck-rel {
  --deck-rel-art: color-mix(in srgb, var(--fg) 34%, transparent);
  --deck-rel-here: color-mix(in srgb, var(--fg) 30%, transparent);
}
@media (min-width: 901px) {
  .deck-rel__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
}
.card--rel { transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out); }
.deck-rel__cover {
  display: grid; place-items: center; overflow: clip;
  aspect-ratio: var(--ratio-teaser); background: var(--bg-2); border-bottom: 1px solid var(--hairline);
  color: var(--deck-rel-art);
}
.deck-rel__art {
  width: 64%; height: auto; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .8s var(--ease-out);
}
.deck-rel__art * { vector-effect: non-scaling-stroke; }
.deck-rel__art .deck-rel__sheet { fill: var(--surface); }
.deck-rel__art .is-ink { stroke: var(--fg); }
.deck-rel__art .is-dot { fill: var(--fg); stroke: none; }
.deck-rel__art .is-dash { stroke-dasharray: 4 4; }
.deck-rel__body { flex: 1; display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.card--rel .card__meta { margin: 0; font-variant-numeric: tabular-nums; }
.card--rel .card__title {
  margin: var(--sp-2) 0 0; padding: 0; font-size: calc(var(--fs-h2) * .46); line-height: 1.12;
  letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.deck-rel__p { margin: var(--sp-3) 0 var(--sp-5); text-wrap: pretty; }
.deck-rel__foot {
  margin-top: auto; padding-top: var(--sp-4); max-width: none;
  display: flex; align-items: center; border-top: 1px solid var(--hairline);
}
.deck-rel__verb { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; color: var(--fg); }
.card--rel-here { background: none; border: 1px dashed var(--deck-rel-here); }
.card--rel-here .deck-rel__cover { background: none; border-bottom: 1px dashed var(--deck-rel-here); }
.card--rel-here .deck-rel__foot { border-top-style: dashed; border-top-color: var(--deck-rel-here); }
.deck-rel__here { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--fg); }
.deck-rel__pin { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.deck-rel__links { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.deck-rel__links li { border-top: 1px solid var(--hairline); }
.deck-rel__links .link { display: flex; justify-content: space-between; padding-block: var(--sp-2); }
.card--rel:is(a):focus-visible { background: var(--surface); }
@media (hover: hover) {
  .card--rel:is(a):hover { border-color: color-mix(in srgb, var(--fg) 28%, transparent); background: var(--surface); }
  .card--rel:is(a):hover .deck-rel__art { transform: translateY(-4px); }
}
@media (max-width: 900px) { .deck-rel__row { --deck-peek: 64%; } }
/* phones and tablets: the row is a plain stack (display block), so the cards need their own gap (the user, 2026-09-14) */
@media (max-width: 900px) { .deck-rel__row > * + * { margin-top: var(--sp-4); } }
@media (max-width: 640px) {
  .deck-rel__row { --deck-peek: 84%; }
  .card--rel .card__title { font-size: calc(var(--fs-h2) * .72); }
  .deck-rel__body { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .card--rel, .deck-rel__art { transition: none; }
  .card--rel:is(a):hover .deck-rel__art { transform: none; }
}


/* ============================================================
   CD10 · stations on one line
   <ol class="deck-line__stops deck-line__stops--one">
     <li class="deck-line__stop" [data-here="true"]>
       span.deck-line__dot · p.deck-line__idx | p.deck-line__here
       · h3.deck-line__name ( a.deck-line__go + .arrow  — or plain text for the current page )
       · p.deck-line__p
     </li> × 3
   </ol>
   (wissen) <div class="deck-line__routes"><div class="deck-line__route">
     div.deck-line__label ( h3 · p ) · ol.deck-line__stops > li.deck-line__stop ( dot · p.deck-line__name > a )
   </div> × 3</div>
   Three equal columns with no gap: every stop draws its own segment from
   its dot to the next column, where the next dot sits, so the line runs
   unbroken from the first station to the last. The link's ::after covers
   the stop. Phones: the same segments, turned vertical.
   ============================================================ */
.deck-line {
  --deck-line-dot: 13px;
  --deck-line-rule: color-mix(in srgb, var(--fg) 34%, transparent);
  --deck-line-name: calc(var(--fs-h2) * .5);
}
.deck-line__stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deck-line__stop { position: relative; padding: calc(var(--deck-line-dot) + var(--sp-5)) var(--sp-7) 0 0; }
.deck-line__stop:not(:last-child)::before {
  content: ""; position: absolute; top: calc(var(--deck-line-dot) / 2 - .5px); left: var(--deck-line-dot); right: 0;
  height: 1px; background: var(--deck-line-rule);
}
.deck-line__dot {
  position: absolute; left: 0; top: 0; width: var(--deck-line-dot); height: var(--deck-line-dot); border-radius: 50%;
  border: 1.5px solid var(--fg); transition: background-color .3s var(--ease-out);
}
.deck-line__stop[data-here="true"] .deck-line__dot { background: var(--brand); border-color: var(--brand); outline: 1px solid var(--brand); outline-offset: 4px; }
.deck-line__idx, .deck-line__here {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.deck-line__here { color: var(--fg); font-weight: 600; }
.deck-line__name { margin-top: var(--sp-2); font-size: var(--deck-line-name); line-height: 1.12; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance; }
.deck-line__go { display: inline; color: var(--fg); text-decoration: none; }
.deck-line__go::after { content: ""; position: absolute; inset: 0; }
.deck-line__go .arrow { width: .62em; height: .62em; margin-left: .25em; vertical-align: -.02em; }
.deck-line__go:focus-visible { outline: 0; }
.deck-line__go:focus-visible::after { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 4px; }
.deck-line__go:focus-visible .arrow::before { transform: translateX(170%); }
.deck-line__go:focus-visible .arrow::after { transform: none; }
.deck-line__stop:has(.deck-line__go:focus-visible) .deck-line__dot { background: var(--fg); }
.deck-line__p { margin-top: var(--sp-3); max-width: 36ch; text-wrap: pretty; }
@media (hover: hover) {
  .deck-line__stop:has(.deck-line__go:hover) .deck-line__dot { background: var(--fg); }
  .deck-line__go:hover .arrow::before { transform: translateX(170%); }
  .deck-line__go:hover .arrow::after { transform: none; }
}
/* wissen: one line per group */
.deck-line__routes { border-bottom: 1px solid var(--hairline); }
.deck-line__route {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-5) var(--sp-7);
  padding-block: var(--sp-6); border-top: 1px solid var(--hairline);
}
.deck-line__label h3 { font-size: calc(var(--fs-h2) * .46); line-height: 1.12; letter-spacing: var(--ls-head, var(--ls-display)); }
.deck-line__label p { margin-top: var(--sp-2); }
.deck-line__route .deck-line__stops { align-self: start; margin-top: var(--sp-2); }
.deck-line__route .deck-line__stop { padding-top: calc(var(--deck-line-dot) + var(--sp-3)); }
.deck-line__route .deck-line__name {
  margin-top: 0; max-width: none; color: var(--fg);
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em;
}
@media (max-width: 900px) {
  .deck-line__stop { padding-right: var(--sp-5); }
  .deck-line { --deck-line-name: calc(var(--fs-h2) * .6); }
  .deck-line__route { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .deck-line { --deck-line-name: calc(var(--fs-h2) * .72); }
  .deck-line__stops { grid-template-columns: minmax(0, 1fr); }
  .deck-line__stop, .deck-line__route .deck-line__stop { padding: 0 0 var(--sp-6) calc(var(--deck-line-dot) + var(--sp-4)); }
  .deck-line__route .deck-line__stop { padding-bottom: var(--sp-4); }
  .deck-line__stop:not(:last-child)::before { top: var(--deck-line-dot); left: calc(var(--deck-line-dot) / 2 - .5px); right: auto; bottom: 0; width: 1px; height: auto; }
  .deck-line__stop .deck-line__idx, .deck-line__stop .deck-line__here { margin-top: -2px; }
  .deck-line__route .deck-line__name { margin-top: -5px; }
}
@media (prefers-reduced-motion: reduce) { .deck-line__dot { transition: none; } }


/* ============================================================
   CD11 · the family, listed beside the question
   <div class="wrap deck-fam__grid">
     <div class="deck-fam__head"> div ( .eyebrow · h2 ) · p.lead </div>
     <ol class="deck-fam__list">
       <li><a class="deck-fam__row"> span.deck-fam__n · span.deck-fam__main ( h3.deck-fam__name · span.deck-fam__p )
         · span.deck-fam__chip > .arrow </a></li>
       <li><div class="deck-fam__row" aria-current="page"> … span.deck-fam__here </div></li>
       (wissen) <li><div class="deck-fam__row deck-fam__row--group"> … ul.deck-fam__links > li > a.link </div></li>
     </ol></div>
   The current row stays in its place, unlinked; a short brand rule hangs
   in the gutter beside its index (the one small brand state).
   ============================================================ */
.deck-fam {
  --deck-fam-name: calc(var(--fs-h2) * .5);
}
.deck-fam__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
.deck-fam__head h2 { text-wrap: balance; }
.deck-fam__head .lead { margin-top: var(--sp-5); max-width: 36ch; text-wrap: pretty; }
.deck-fam__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.deck-fam__row {
  position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-4); align-items: center; padding-block: var(--sp-5);
  border-top: 1px solid var(--hairline); color: var(--fg); text-decoration: none;
}
.deck-fam__row:is(a):focus-visible { outline-offset: 4px; }
.deck-fam__n {
  align-self: start; padding-top: .8em;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.deck-fam__main { display: grid; gap: var(--sp-1); }
.deck-fam__name { font-size: var(--deck-fam-name); line-height: 1.12; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance; transition: transform .5s var(--ease-out); }
.deck-fam__p { color: var(--fg-muted); max-width: 48ch; text-wrap: pretty; }
.deck-fam__chip {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 24%, transparent);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s;
}
.deck-fam__row[aria-current="page"]::before {
  content: ""; position: absolute; left: calc(var(--sp-2) * -1); top: var(--sp-5); bottom: var(--sp-5); width: 2px; background: var(--brand);
}
.deck-fam__row[aria-current="page"] .deck-fam__n { color: var(--fg); }
.deck-fam__here { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.deck-fam__row--group { grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.deck-fam__links { list-style: none; margin: 0; padding: 0; }
.deck-fam__links .link { padding-block: 3px; }
.deck-fam__row:is(a):focus-visible .deck-fam__chip { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.deck-fam__row:is(a):focus-visible .arrow::before { transform: translateX(170%); }
.deck-fam__row:is(a):focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  .deck-fam__row:is(a):hover .deck-fam__name { transform: translateX(var(--sp-2)); }
  .deck-fam__row:is(a):hover .deck-fam__chip { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .deck-fam__row:is(a):hover .arrow::before { transform: translateX(170%); }
  .deck-fam__row:is(a):hover .arrow::after { transform: none; }
}
@media (max-width: 1100px) { .deck-fam__grid { gap: var(--sp-7); } }
@media (max-width: 900px) {
  .deck-fam__grid { grid-template-columns: minmax(0, 1fr); }
  .deck-fam { --deck-fam-name: calc(var(--fs-h2) * .62); }
}
@media (max-width: 640px) {
  .deck-fam { --deck-fam-name: calc(var(--fs-h2) * .75); }
  .deck-fam__row { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--sp-4); }
  .deck-fam__n { display: none; }
  .deck-fam__row[aria-current="page"]::before { top: var(--sp-4); bottom: var(--sp-4); }
  .deck-fam__row--group { grid-template-columns: minmax(0, 1fr); }
  .deck-fam__links { margin-top: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
  .deck-fam__name, .deck-fam__chip { transition: none; }
  .deck-fam__row:is(a):hover .deck-fam__name { transform: none; }
}