/* Alder spread art: isometric step illustrations with a phased draw-in.
   Companions: partials/_spread-art-{1..4}.tpl.php, js/alder-spreads.js.
   Load AFTER css/alder.css (it overrides .al-spread__panel padding).

   Still first. Every piece is drawn complete in its final state. The script
   adds .is-armed (only when motion is allowed) to hide the animated parts,
   then .is-playing to bring them in over about 5.4 s in four phases:
   phase 1 at 0 s, phase 2 at 1.3 s, phase 3 at 2.7 s, phase 4 at 4.1 s.
   Without JS, or under prefers-reduced-motion, nothing is ever hidden.
   Brief: playbook/progress-second-theme.md (Maren, 2026-10-14) */

@property --al-ph {
  syntax: '<angle>';
  inherits: false;
  initial-value: -12deg;
}

/* Panel host: the spread panel without its centring padding. No panel
   colour of its own since 2026-10-14 (Eric): the band's wash shows through. */
.al-spread__panel--art {
  display: block;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
}
.al-spread__panel--art svg[data-wf] { display: none; }
/* No aspect-ratio (Safari 14.0): the panel would shrink to the figure's
   caption bar. Padding holds the 4:3 box and the figure fills it. */
@supports not (aspect-ratio: 1) {
  .al-spread__panel--art { height: 0; padding-top: 75%; }
  .al-spread__panel--art > .al-art { position: absolute; top: 0; left: 0; }
}

.al-art {
  /* Label halo colour: the figure has no panel of its own (Eric, 2026-10-14),
     so the halo matches the middle of the band's wash. */
  --al-art-bg: var(--al-spread-to, #F7EFDF);
  --al-art-fs: 12px;
  --al-art-ease: cubic-bezier(.2, 0, 0, 1);
  --al-p2: 1.3s;
  --al-p3: 2.7s;
  --al-p4: 4.1s;
  container-type: inline-size;
  container-name: al-art;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px 14px 10px;
}
.al-art__stage { position: relative; flex: 1 1 auto; min-height: 0; }
.al-art__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}

/* Label size in SVG user units, stepped so the rendered size stays
   between 12 and 15 px from a 350 px phone panel to a 1280 px desktop one. */
.al-art__svg { --al-art-fs: 24px; }
@container al-art (min-width: 381px) { .al-art__svg { --al-art-fs: 22px; } }
@container al-art (min-width: 431px) { .al-art__svg { --al-art-fs: 18.5px; } }
@container al-art (min-width: 491px) { .al-art__svg { --al-art-fs: 16px; } }
@container al-art (min-width: 561px) { .al-art__svg { --al-art-fs: 14px; } }
@container al-art (min-width: 641px) { .al-art__svg { --al-art-fs: 12px; } }
@container al-art (min-width: 741px) { .al-art__svg { --al-art-fs: 10.5px; } }
@container al-art (min-width: 861px) { .al-art__svg { --al-art-fs: 9px; } }

/* Strokes: the wire art's hand, 1.4 px at every size */
.al-art .f, .al-art .o, .al-art .ln, .al-art .rd, .al-art .rv,
.al-art .ck, .al-art .ckw, .al-art .ok, .al-art .a-ring {
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.al-art .f  { stroke: var(--wf-ink, rgba(14, 42, 27, .62)); stroke-width: 1.4px; }
.al-art .o  { stroke: var(--wf-ink, rgba(14, 42, 27, .62)); stroke-width: 1.4px; fill: none; }
.al-art .n  { stroke: none; }
.al-art .ln { stroke: rgba(14, 42, 27, .42); stroke-width: 1.2px; fill: none; }
.al-art .rd { stroke: #D5C6AB; stroke-width: 3px; fill: none; }
.al-art .rv { stroke: #A8DEB5; stroke-width: 3px; fill: none; }
.al-art .ck { stroke: #3D8850; stroke-width: 2.2px; fill: none; }
.al-art .ckw { stroke: #FAFAF8; stroke-width: 1.6px; fill: none; }
.al-art .ok { stroke: #3D8850; stroke-width: 2px; fill: none; }
.al-art .sh { fill: rgba(14, 42, 27, .09); stroke: none; }

/* Planar fills: three tints of the sand panel, moss and deep, sage, brand */
.al-art .c-l  { fill: #FFFCF6; }
.al-art .c-m  { fill: #EBE1D0; }
.al-art .c-d  { fill: #D5C6AB; }
.al-art .c-ml { fill: #1F7537; }
.al-art .c-mm { fill: #1C6B3C; }
.al-art .c-md { fill: #123C27; }
.al-art .c-sl { fill: #D6F0DD; }
.al-art .c-sm { fill: #A8DEB5; }
.al-art .c-sd { fill: #6CC888; }
.al-art .c-b  { fill: #3D8850; }

/* Labels: Inter, upright. Each label is two <text> nodes: a halo copy
   underneath (.lb-h, stroke only) and the clean text on top. WebKit paints
   paint-order per glyph, so a single stroked text eroded its own letters.
   The halo stays thin (.24em, about 4px each side at 34px): a wide one
   wiped out the lines, dots, and shapes the label sits beside. */
.al-art .lb {
  font-family: var(--al-sans, "Inter", system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--al-art-fs);
  letter-spacing: -.01em;
  fill: var(--al-ink, #0E2A1B);
  stroke: none;
}
/* A custom property is not checked when parsed, so a color-mix line would
   replace the plain line above and leave the halo invalid on browsers without
   color-mix (Safari <16.2, Chrome <111). Only those that have it get the mix. */
@supports (color: color-mix(in srgb, red, blue)) {
  .al-art { --al-art-bg: color-mix(in srgb, var(--al-spread-from, #EEF6F0), var(--al-spread-to, #F7EFDF)); }
}
.al-art .lb-h {
  fill: none;
  stroke: var(--al-art-bg);
  stroke-width: .24em;
  stroke-linejoin: round;
}
.al-art .lb-q { font-weight: 500; fill: var(--al-muted, #5B6E66); }
.al-art .lb-h.lb-q { fill: none; }
/* The typed question sits on open ground with no art behind it, and at the
   phone label size its halo erased the "Your question" line above. */
.al-art .lb-h.tq { stroke: none; }
.al-art .tq { font-weight: 500; }
.al-art .cr { opacity: 0; font-weight: 400; }

/* Transient pieces exist only during the animation (ring, token) */
.al-art .t { opacity: 0; }
.al-art .a-ring { fill: none; stroke: #3D8850; stroke-width: 2px; transform-box: fill-box; transform-origin: center; }

/* Laptop lid: a rotation about the hinge in isometric space. The first
   transform is the open lid for browsers without CSS trig; the second
   replaces it where sin() and cos() parse. */
.al-art .lid {
  transform: matrix(.866, .5, -.18, 1.082, var(--hx), var(--hy));
  transform: matrix(.866, .5, calc(.866 * sin(var(--al-ph))), calc(cos(var(--al-ph)) - .5 * sin(var(--al-ph))), var(--hx), var(--hy));
}

/* Armed: hide what the phases will bring in */
.al-art.is-armed .a { opacity: 0; }
.al-art.is-armed .lid { --al-ph: 72deg; }

/* Keyframes */
@keyframes al-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes al-drop {
  0% { opacity: 0; transform: translateY(-84px); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes al-ring {
  0% { opacity: 0; transform: scale(.25); }
  20% { opacity: .95; }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes al-lid { from { --al-ph: 72deg; } to { --al-ph: -12deg; } }
@keyframes al-type {
  from { clip-path: inset(-30% 100% -30% -4%); }
  to { clip-path: inset(-30% -4% -30% -4%); }
}
@keyframes al-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes al-card {
  0% { opacity: 0; transform: translateY(-96px); animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
  28% { opacity: 1; transform: translateY(-98px); animation-timing-function: linear; }
  56% { opacity: 1; transform: translateY(-66px); animation-timing-function: cubic-bezier(.55, 0, .15, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes al-fly {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)); animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
  18% { opacity: 1; transform: translate(var(--dx), calc(var(--dy) - 34px)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  60% { opacity: 1; transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45 - 70px)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes al-tok {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  25% { opacity: 1; }
  85% { opacity: 1; transform: translate(0, -8px); }
  100% { opacity: 0; transform: none; }
}

/* Step 01: card appears, slides into the reader, pin drops, plan matched */
.al-art--1.is-playing .a-l1   { animation: al-in .5s var(--al-art-ease) .55s both; }
.al-art--1.is-playing .a-card { animation: al-card 2.4s linear 0s both; }
.al-art--1.is-playing .a-pin  { animation: al-drop .55s cubic-bezier(.5, 0, .9, .6) var(--al-p3) both; }
.al-art--1.is-playing .a-pinsh { animation: al-in .3s linear calc(var(--al-p3) + .45s) both; }
.al-art--1.is-playing .a-ring { animation: al-ring .9s cubic-bezier(0, 0, .2, 1) calc(var(--al-p3) + .5s) both; }
.al-art--1.is-playing .a-l3   { animation: al-in .4s var(--al-art-ease) calc(var(--al-p3) + .6s) both; }
.al-art--1.is-playing .a-chk,
.al-art--1.is-playing .a-dot  { animation: al-in .35s var(--al-art-ease) var(--al-p4) both; }
.al-art--1.is-playing .a-l4   { animation: al-in .45s var(--al-art-ease) calc(var(--al-p4) + .15s) both; }

/* Step 02: lid opens, call connects, room assembles, label */
.al-art--2.is-playing .lid     { animation: al-lid 1.1s var(--al-art-ease) .1s both; }
.al-art--2.is-playing .a-call  { animation: al-in .5s var(--al-art-ease) var(--al-p2) both; }
.al-art--2.is-playing .a-l2    { animation: al-in .4s var(--al-art-ease) calc(var(--al-p2) + .2s) both; }
.al-art--2.is-playing .a-floor { animation: al-rise .6s var(--al-art-ease) var(--al-p3) both; }
.al-art--2.is-playing .a-wb    { animation: al-rise .6s var(--al-art-ease) calc(var(--al-p3) + .15s) both; }
.al-art--2.is-playing .a-wa    { animation: al-rise .6s var(--al-art-ease) calc(var(--al-p3) + .25s) both; }
.al-art--2.is-playing .a-furn  { animation: al-rise .5s var(--al-art-ease) calc(var(--al-p3) + .55s) both; }
.al-art--2.is-playing .a-l3    { animation: al-in .4s var(--al-art-ease) calc(var(--al-p3) + .7s) both; }
.al-art--2.is-playing .a-l4    { animation: al-in .5s var(--al-art-ease) var(--al-p4) both; }

/* Step 03: typed question, checked against the records, three rows, pick one */
.al-art--3.is-playing .a-l1   { animation: al-in .4s var(--al-art-ease) 0s both; }
.al-art--3.is-playing .tq     { animation: al-in .2s linear .2s both, al-type 1.1s steps(24, end) .25s both; }
.al-art--3.is-playing .cr     { animation: al-blink .7s step-end 0s 5; }
.al-art--3.is-playing .a-box  { animation: al-rise .55s var(--al-art-ease) var(--al-p2) both; }
.al-art--3.is-playing .a-l2   { animation: al-in .4s var(--al-art-ease) calc(var(--al-p2) + .25s) both; }
.al-art--3.is-playing .a-tok  { animation: al-tok .9s cubic-bezier(.4, 0, .2, 1) calc(var(--al-p2) + .3s) both; }
.al-art--3.is-playing .a-r1   { animation: al-rise .5s var(--al-art-ease) var(--al-p3) both; }
.al-art--3.is-playing .a-r2   { animation: al-rise .5s var(--al-art-ease) calc(var(--al-p3) + .2s) both; }
.al-art--3.is-playing .a-r3   { animation: al-rise .5s var(--al-art-ease) calc(var(--al-p3) + .4s) both; }
.al-art--3.is-playing .a-l3   { animation: al-in .4s var(--al-art-ease) calc(var(--al-p3) + .6s) both; }
.al-art--3.is-playing .a-pick { animation: al-in .4s var(--al-art-ease) var(--al-p4) both; }
.al-art--3.is-playing .a-l4   { animation: al-in .4s var(--al-art-ease) calc(var(--al-p4) + .1s) both; }

/* Step 04: message field, envelope flies, inbox, lock */
.al-art--4.is-playing .a-field { animation: al-rise .55s var(--al-art-ease) 0s both; }
.al-art--4.is-playing .a-l1    { animation: al-in .4s var(--al-art-ease) .4s both; }
.al-art--4.is-playing .a-env   { animation: al-fly 1.3s linear var(--al-p2) both; }
.al-art--4.is-playing .a-l2    { animation: al-in .4s var(--al-art-ease) calc(var(--al-p2) + .4s) both; }
.al-art--4.is-playing .a-l3dot { animation: al-in .3s var(--al-art-ease) calc(var(--al-p3) + .05s) both; }
.al-art--4.is-playing .a-l3    { animation: al-in .4s var(--al-art-ease) calc(var(--al-p3) + .1s) both; }
.al-art--4.is-playing .a-lock  { animation: al-rise .5s var(--al-art-ease) var(--al-p4) both; }
.al-art--4.is-playing .a-l4    { animation: al-in .4s var(--al-art-ease) calc(var(--al-p4) + .2s) both; }

/* Reduced motion: the still, always, whatever classes are present */
@media (prefers-reduced-motion: reduce) {
  .al-art .a, .al-art.is-armed .a, .al-art .tq, .al-art .lid {
    opacity: 1 !important;
    animation: none !important;
    clip-path: none !important;
  }
  .al-art .a { transform: none !important; }
  .al-art .lid { --al-ph: -12deg !important; }
  .al-art .t, .al-art .cr { opacity: 0 !important; animation: none !important; }
}

/* Step indicator and Replay */
.al-art__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  min-height: 44px;
}
.al-art__steps { display: flex; align-items: center; gap: 10px; min-width: 0; }
.al-art__dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex: none; }
.al-art__dots li {
  width: 8px; height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid rgba(14, 42, 27, .35);
  background: transparent;
  transition: background-color .25s, border-color .25s;
}
.al-art__dots li.is-done { background: var(--al-moss, #1C6B3C); border-color: var(--al-moss, #1C6B3C); }
.al-art__dots li.is-on { background: var(--al-ink, #0E2A1B); border-color: var(--al-ink, #0E2A1B); }
.al-art__phase {
  margin: 0;
  font: 500 13px/1.3 var(--al-sans, "Inter", system-ui, sans-serif);
  color: var(--al-ink, #0E2A1B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Narrow panels: let the phase label take two lines instead of an ellipsis */
@container al-art (max-width: 560px) {
  .al-art__phase {
    white-space: normal;
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
.al-art__replay {
  display: none;
  align-items: center;
  gap: 7px;
  flex: none;
  min-height: 44px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--al-line, rgba(14, 42, 27, .16));
  border-radius: 999px;
  background: transparent;
  color: var(--al-ink, #0E2A1B);
  font: 600 13px/1 var(--al-sans, "Inter", system-ui, sans-serif);
  cursor: pointer;
}
html.al-js .al-art__replay { display: inline-flex; }
.al-art.is-rm .al-art__replay { display: none; }
.al-art__replay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .al-art__replay:hover { border-color: var(--al-ink, #0E2A1B); background: rgba(14, 42, 27, .04); }
}
.al-art__replay:active { background: rgba(14, 42, 27, .08); }
.al-art__replay:focus-visible { outline: 2px solid var(--al-brand, #3D8850); outline-offset: 3px; }

/* ------------------------------------------------------------------ */
/* Moss band badge: a shaded isometric license card (partials/_badge-art.tpl.php).
   Same family as the hero plate: sand plate faces, ink wires, one dark
   element (the stamp, --al-pill). Complete as drawn; the script adds
   .is-armed (card low, stamp held high, seal unprinted) and .is-playing
   (card settles, stamp drops once and lifts, seal pops), 1.07 s total,
   transform and opacity only, once. Under prefers-reduced-motion the
   final state shows at once. Maren, 2026-10-14. */
.al-badge { display: block; width: 100%; }
.al-badge__svg { display: block; width: 100%; height: auto; overflow: visible; }
.al-badge .w, .al-badge .ln, .al-badge .pf, .al-badge .ck, .al-badge .rg {
  fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.al-badge .w  { stroke: rgba(14, 42, 27, .55); stroke-width: 1.2px; }
.al-badge .ln { stroke: rgba(14, 42, 27, .34); stroke-width: 1.4px; }
.al-badge .pf { stroke: #FAFAF8; stroke-width: 1.4px; }
.al-badge .ck { stroke: #FAFAF8; stroke-width: 2.6px; }
.al-badge .rg { stroke: rgba(250, 250, 248, .55); stroke-width: 1px; }
.al-badge .sh { fill: rgba(14, 42, 27, .32); stroke: none; }
.al-badge .c-l { fill: #FFFCF6; }
.al-badge .c-m { fill: #EBE1D0; }
.al-badge .c-d { fill: #D5C6AB; }
.al-badge .c-b { fill: var(--al-brand, #3D8850); }
.al-badge .c-sm { fill: #A8DEB5; }
.al-badge .c-sd { fill: #6CC888; }
.al-badge .c-hd { fill: #3D8850; }
.al-badge .c-pt { fill: #1F5A33; }
.al-badge .c-pl { fill: var(--al-pill, #14532D); }
.al-badge .c-pr { fill: #0E2A1B; }

/* Rest state: the stamp hovers 50 units above its seal */
.al-badge .b-card, .al-badge .b-stamp, .al-badge .b-seal, .al-badge .b-stsh { transform-box: fill-box; transform-origin: center; }
.al-badge .b-stamp { transform: translateY(-50px); }
.al-badge .b-stsh { opacity: .2; }

.al-badge.is-armed .b-card  { opacity: 0; transform: translateY(16px); }
.al-badge.is-armed .b-seal  { opacity: 0; transform: scale(.35); }
.al-badge.is-armed .b-stamp { opacity: 0; transform: translateY(-104px); }
.al-badge.is-armed .b-stsh  { opacity: 0; }

.al-badge.is-playing .b-card  { animation: al-badge-card .45s cubic-bezier(.2, 0, 0, 1) both; }
.al-badge.is-playing .b-stamp { animation: al-badge-stamp .85s .22s both; }
.al-badge.is-playing .b-stsh  { animation: al-badge-stsh .85s .22s both; }
.al-badge.is-playing .b-seal  { animation: al-badge-seal .32s .58s cubic-bezier(.2, 0, 0, 1) both; }

@keyframes al-badge-card { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes al-badge-stamp {
  0%   { opacity: 0; transform: translateY(-104px); animation-timing-function: linear; }
  16%  { opacity: 1; transform: translateY(-66px); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  45%  { transform: translateY(0); animation-timing-function: linear; }
  58%  { transform: translateY(0); animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
  100% { opacity: 1; transform: translateY(-50px); }
}
@keyframes al-badge-stsh {
  0%   { opacity: 0; }
  16%  { opacity: .08; }
  45%  { opacity: .55; }
  58%  { opacity: .55; }
  100% { opacity: .2; }
}
@keyframes al-badge-seal {
  0%   { opacity: 0; transform: scale(.35); }
  55%  { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .al-badge .b-card, .al-badge .b-seal, .al-badge .b-stamp, .al-badge .b-stsh { animation: none !important; opacity: 1; transform: none; }
  .al-badge .b-stamp { transform: translateY(-50px); }
  .al-badge .b-stsh { opacity: .2; }
}

/* ------------------------------------------------------------------ */
/* Carousel: the four spreads in one panel (Eric, 2026-10-14). The panel
   carries the --al-spread-from/to wash (alder.css tokens) and the raise
   shadow. With JS (html.al-js) the slides share one grid cell and move
   with transform only, 400 ms; inactive slides get inert + aria-hidden
   from the script, never display:none. Without JS they stack as before
   and the controls stay hidden. Auto-advance every 10 s is Eric's explicit
   exception: the active dot's fill bar IS the timer (its animationend
   advances the slide), so pausing the bar pauses the carousel. */
.al-car {
  position: relative;
  border-radius: var(--al-r, 16px);
  background: var(--al-spread-to, #F7EFDF);
  background: linear-gradient(180deg, var(--al-spread-from, #EEF6F0) 0%, var(--al-spread-to, #F7EFDF) 100%);
  box-shadow: var(--al-raise, 0 1px 0 rgba(0, 0, 0, .06), 0 8px 16px -10px rgba(14, 42, 27, .45));
  padding: 14px 14px 6px;
}
.al-car__view { overflow: hidden; border-radius: 8px; }
.al-car__track { touch-action: pan-y; outline: none; }
.al-car__track:focus-visible { outline: 2px solid var(--al-brand, #3D8850); outline-offset: 4px; border-radius: 8px; }
.al-car .al-spread { gap: 12px; }
.al-car .al-spread__h { font-size: clamp(1.5rem, 2.8vw, 2.5rem); }
.al-car .al-spread__note { margin-top: 10px; }
.al-js .al-car__track { display: grid; }
.al-js .al-car__slide {
  grid-area: 1 / 1;
  margin-top: 0;
  min-width: 0;
  transform: translateX(calc(var(--al-o, 0) * 100% + var(--al-dx, 0px)));
  transition: transform .4s cubic-bezier(.2, 0, 0, 1);
}
.al-js .al-car__slide.is-jump, .al-js .al-car.is-drag .al-car__slide { transition: none; }
.al-car.is-drag { user-select: none; -webkit-user-select: none; }

/* Bar (apple.com's phone carousel as the reference, Eric 2026-10-14): a
   centred row of small round dots, the active one stretched into a pill
   that fills over the 10 s, and one round pause/play button at the right.
   No prev/next: arrows on the focused track, swipe, and the dots move. */
.al-car__bar { display: none; position: relative; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; }
.al-js .al-car__bar { display: flex; }
.al-car__dots { display: flex; justify-content: center; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; min-width: 0; }
.al-car__dot {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent;
  cursor: pointer;
  transition: width .25s linear;
}
/* apple.com dot bar proportions (playbook/alder-mobile-reference-audit.md):
   8px dot, 32px active pill, width .25s linear; the 44px hit box stays. */
.al-car__dot[aria-current="true"] { width: 48px; }
.al-car__pip {
  display: block; position: relative; overflow: hidden;
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(14, 42, 27, .22);
  transition: width .25s linear, background-color .3s;
}
.al-car__dot[aria-current="true"] .al-car__pip { width: 32px; background: rgba(14, 42, 27, .14); }
.al-car__fill { position: absolute; inset: 0; background: var(--al-brand, #3D8850); transform: scaleX(0); transform-origin: left center; }
/* Pause/play is a shared .al-round (alder.css) in the row-arrow colourway
   (.al-rownav .al-round): ink on sage with the raise shadow. Only placement
   and the icon swap live here. */
.al-car__play {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border-color: transparent; background: var(--al-sage, #A8DEB5); color: var(--al-ink, #0E2A1B);
  box-shadow: var(--al-raise, 0 1px 0 rgba(0, 0, 0, .06), 0 8px 16px -10px rgba(14, 42, 27, .45));
  cursor: pointer;
}
.al-car__play svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.al-car__play .al-car__ic-play { fill: currentColor; stroke-width: 1.5; display: none; }
.al-car.is-manual .al-car__play .al-car__ic-pause { display: none; }
.al-car.is-manual .al-car__play .al-car__ic-play { display: block; }
.al-car__play:active { background: #BCE6C8; }
/* The play state rides on a custom property so the pause rules win over the
   animation shorthand below whatever their specificity. */
.al-car { --al-car-play: running; }
.al-car.is-live .al-car__dot[aria-current="true"] .al-car__fill { animation: al-car-fill 10s linear forwards; animation-play-state: var(--al-car-play); }
.al-car.is-manual .al-car__dot[aria-current="true"] .al-car__fill { animation: none; transform: scaleX(1); }
.al-car.is-paused, .al-car:focus-within { --al-car-play: paused; }
@media (hover: hover) {
  .al-car:hover { --al-car-play: paused; }
  .al-car__play:hover { border-color: transparent; background: #BCE6C8; }
  .al-car__dot:hover .al-car__pip { background: rgba(14, 42, 27, .4); }
  .al-car__dot[aria-current="true"]:hover .al-car__pip { background: rgba(14, 42, 27, .14); }
}
.al-car__play:focus-visible, .al-car__dot:focus-visible { outline: 2px solid var(--al-brand, #3D8850); outline-offset: 2px; }
@keyframes al-car-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Inside the carousel the figure keeps its phase label; its own step dots
   would sit a few lines above the carousel dots, so they go. */
.al-car .al-art__dots { display: none; }
@media (min-width: 921px) {
  .al-car { padding: 36px 44px 16px; }
  .al-car .al-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
  .al-car__bar { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-js .al-car__slide, .al-car__dot, .al-car__pip { transition: none; }
  /* No auto-advance: the fill (the timer) is static and full. */
  .al-car.is-live .al-car__dot[aria-current="true"] .al-car__fill { animation: none; transform: scaleX(1); }
  /* Nothing advances on its own (alder-spreads.js checks the same query),
     so a pause button would control nothing. It is absolutely placed, so
     the dots do not move. */
  .al-car__play { display: none; }
}

/* Phone: a slide well under 480px (Eric's phone shots, 2026-10-14).
   Figure box 150px with the phase label overlaid, 26px title, the links as
   ONE scrolling row of chips (snap, no scrollbar, draggable, bleeds to the
   panel edge so the next chip peeks), note clamped to two lines, controls
   8px under the note. The panel's inline padding (24px, Felix's phone
   gutter) moves onto the slide so the chip row can run edge to edge.
   Desktop untouched. */
@media (max-width: 920px) {
  /* Bleed the carousel out of .al-wrap so the slide's own gutter padding
     puts its text at the page gutter (section titles sit there too) and
     the chip row runs edge to edge like the needs row. */
  .al-car { padding: 20px 0 16px; margin-inline: calc(-1 * var(--al-gutter, 20px)); }
  .al-car .al-spread { gap: 12px; padding-inline: var(--al-gutter, 20px); }
  .al-car .al-spread__panel { aspect-ratio: auto; height: 150px; }
  @supports not (aspect-ratio: 1) { .al-car .al-spread__panel--art { padding-top: 0; } }
  .al-car .al-art { padding: 0; }
  .al-car .al-art__stage { position: absolute; inset: 0; }
  .al-car .al-art__svg { --al-art-fs: 34px; }
  /* At 34px the typed question (baselines 26 apart) sat on the "Your
     question" line's descenders; drop it a few units. */
  .al-car .al-art--3 .tq { translate: 0 8px; }
  /* One label per figure on phone: the figcaption phase line doubled the
     words already drawn inside the art. Visibility, not display, so the
     text stays in the DOM. Desktop keeps both. */
  .al-car .al-art__bar { position: absolute; left: 0; bottom: 0; min-height: 0; margin: 0; pointer-events: none; visibility: hidden; }
  .al-car .al-spread__text { padding: 0; }
  .al-car .al-spread__no { margin-bottom: 12px; }
  /* 24px (the phone h2 size): three of the four titles hold one line at
     390; the longest breaks evenly over two (balance). */
  .al-car .al-spread__h { font-size: 24px; line-height: 1.1; max-width: none; text-wrap: balance; }
  .al-car .al-rows {
    display: flex; flex-wrap: nowrap; gap: 8px;
    margin: 12px calc(-1 * var(--al-gutter, 20px)) 0; padding: 2px var(--al-gutter, 20px) 8px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--al-gutter, 20px);
    scrollbar-width: none; -ms-overflow-style: none;
    touch-action: pan-x pan-y; /* pan-y too: a thumb landing on the row must still scroll the page */
    cursor: grab;
  }
  .al-car .al-rows::-webkit-scrollbar { display: none; }
  .al-car .al-rows.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
  .al-car .al-rows li { flex: none; scroll-snap-align: start; }
  .al-car .al-rows a {
    min-height: 40px; padding: 0 14px; white-space: nowrap;
    border: 1px solid var(--al-line, rgba(14, 42, 27, .16)); border-radius: 999px;
    background: #fff; box-shadow: var(--al-raise, 0 1px 0 rgba(0, 0, 0, .06), 0 8px 16px -10px rgba(14, 42, 27, .45));
    font-size: 14px; justify-content: flex-start; gap: 6px;
  }
  .al-car .al-rows.is-drag a { pointer-events: none; }
  .al-car .al-rows .al-ico { display: none; }
  .al-car .al-spread__note {
    margin-top: 12px; font-size: 13px; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .al-car__bar { margin: 8px var(--al-gutter, 20px) 0; }
}