/**
 * The Season: the ninety days as one compact, animated slider.
 *
 * This started as four full-screen scenes that pinned as you scrolled. It told the story
 * well and cost roughly six screens of scrolling to get through, which is too much page
 * for one section of a sales page and pushed the price below a horizon almost nobody would
 * reach. It is one card now, about a third of a screen tall, and the reader moves through
 * the four milestones by tapping rather than by scrolling past them.
 *
 * What survives from the scrolled version, because it was the good part: the water is
 * drawn rather than photographed, each milestone plays its own short animation when it
 * becomes current, and the words never move or fade while you are reading them.
 *
 * Two mechanics worth knowing before editing:
 *
 *   1. The stage is sized in PIXELS and its waterline is a PERCENTAGE of that, not vh.
 *      The scrolled version had to do viewport arithmetic and floor it so the boat did not
 *      end up behind the header on short screens. A fixed-height stage has no such
 *      problem, and it turned the boat's position into one line of CSS instead of a
 *      resize handler.
 *   2. The boat sits on the water via `translateY(-85.4%)`, where 85.4% is the hull line
 *      inside its own drawing (y=222 of a 260 viewBox). A percentage translate resolves
 *      against the element's OWN height, so this holds at every stage size with no
 *      measurement in JavaScript at all.
 */

/* ═══ The card ═════════════════════════════════════════════════════════════ */

.season__deck {
  margin-top: var(--space-6);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

/* ═══ The stage ════════════════════════════════════════════════════════════ */

.season__stage {
  position: relative;
  height: clamp(232px, 30vh, 320px);
  overflow: hidden;
  /* The waterline, as a share of the stage rather than of the viewport. */
  --surf: 46%;
}

.sc__sky {
  position: absolute; inset: 0 0 auto 0; height: var(--surf);
  background:
    radial-gradient(48% 90% at 80% 6%, rgba(255, 243, 216, 0.9), transparent 70%),
    linear-gradient(180deg, #f6fcff 0%, #e6f3fd 62%, #d6ebfa 100%);
}
.sc__sea {
  position: absolute; inset: var(--surf) 0 0 0;
  background: linear-gradient(180deg, #a9dcf4 0%, #6fbde4 38%, #3f97cc 78%, #2f80b2 100%);
}

/* Light through the surface. Feathered on both axes: a hard-edged parallelogram reads as
   a graphic rather than as light. */
.sc__shafts { position: absolute; left: 0; right: 0; top: var(--surf); bottom: 0; overflow: hidden; pointer-events: none; }
.sc__shafts i {
  position: absolute; top: -8%; height: 120%; width: var(--w, 80px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 74%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
  transform: skewX(-9deg);
  animation: shaft var(--dur, 17s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
@keyframes shaft { from { opacity: 0.3; transform: skewX(-9deg) translateX(-12px); }
                   to   { opacity: 0.7; transform: skewX(-9deg) translateX(12px); } }

/* Bubbles rise to the SURFACE and stop there. Given the whole stage to travel through
   they carried on into the sky, which is the one thing water does not do. */
.sc__bubbles { position: absolute; left: 0; right: 0; top: var(--surf); bottom: 0; overflow: hidden; pointer-events: none; }
.sc__bubbles i {
  position: absolute; bottom: -14px;
  width: var(--r, 5px); height: var(--r, 5px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.3);
  animation: rise var(--dur, 11s) linear infinite;
  animation-delay: var(--d, 0s);
}
/* --travel is a plain length rather than a percentage of anything: a percentage translate
   resolves against the ELEMENT's own size, and a bubble is five pixels across. It only has
   to exceed the depth of the water, because the layer clips at the surface, and the surface
   is exactly where a bubble should stop. */
@keyframes rise {
  0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
  14%  { opacity: 0.85; }
  100% { transform: translate(-7px, calc(var(--travel, 200px) * -1)) scale(1.1); opacity: 0; }
}

/* Two offset swell strips straddling the surface, drifting at different speeds so they
   never visibly repeat against each other.

   `max-width: none` is load bearing. home.css sets a page-wide `svg { max-width: 100% }`,
   correct for content images and wrong here: it clamped this 200%-wide strip back to
   100%, so the drift translated it clean off the right-hand 42% of the water and left a
   straight edge where the waves should be. */
.sc__waves { position: absolute; left: 0; right: 0; top: calc(var(--surf) - 11px); height: 24px; overflow: hidden; pointer-events: none; z-index: 4; }
.sc__waves svg { position: absolute; left: 0; width: 200%; max-width: none; height: 100%; }
.sc__waves .wa { fill: rgba(255, 255, 255, 0.78); animation: drift-a 17s linear infinite; }
.sc__waves .wb { fill: rgba(63, 151, 204, 0.3); animation: drift-b 24s linear infinite; top: 6px; }
@keyframes drift-a { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes drift-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ═══ The boat ═════════════════════════════════════════════════════════════ */

.season__boat {
  position: absolute; left: 6%; top: var(--surf); z-index: 5;
  width: clamp(96px, 15%, 150px);
  /* The hull line is at y=222 of a 260-tall viewBox. A percentage translate resolves
     against the element's own height, so this sits the boat ON the water at any stage
     size without a single measurement in JavaScript. */
  transform: translateY(-85.4%);
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(20, 60, 95, 0.26));
}
.season__boat svg { width: 100%; height: auto; }

/* `translate` and `rotate` are separate longhands and are applied BEFORE `transform`, so
   the boat can rock without touching the -85.4% that sits it on the water. */
.season__boat {
  animation: boat-bob 6.5s ease-in-out infinite alternate;
  /* `left` is the one position channel the bob does not own, so it is what carries the
     Captain toward the shoal once he knows where it is. Three per cent, over a second:
     enough to register as the boat working the water, not enough to notice as movement. */
  transition: left 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
[data-step='3'] .season__boat, [data-step='4'] .season__boat { left: 9%; }
@keyframes boat-bob {
  from { translate: 0 -3px; rotate: -1.1deg; }
  to   { translate: 0 3px;  rotate: 1.1deg; }
}

/* The poses cross-fade instead of cutting. `display: none` made the Captain vanish and
   reappear in a different attitude, which is exactly the seam this section had to lose. */
.season__boat [data-pose] { opacity: 0; transition: opacity 0.4s ease; }
[data-step='1'] .season__boat #pose-baits,
[data-step='2'] .season__boat #pose-fight,
[data-step='3'] .season__boat #pose-fight,
[data-step='4'] .season__boat #pose-wave { opacity: 1; }

/* ═══ The world ════════════════════════════════════════════════════════════
   Two kinds of thing live on this stage.

   PERSISTENT: the water, the boat, the three rigs and the shoal. They are here at every
   milestone and they change STATE, by transition, as the season moves. This is the whole
   difference between four slides and one season: nothing that is part of the world is
   ever removed and rebuilt, so the eye follows the same boat and the same fish from the
   first cast to the last day.

   CHAPTER-SCOPED: the lock pill and the day-90 panel, which genuinely belong to one
   moment. Those are `.prop--N` and they cross-fade rather than cut. */

.prop {
  position: absolute; z-index: 3; opacity: 0; pointer-events: none;
  transition: opacity 0.45s var(--sc-ease, cubic-bezier(0.33, 1, 0.68, 1));
}
[data-step='1'] .prop--1,
[data-step='4'] .prop--4 { opacity: 1; }

/* --pp has to be registered or it cannot be animated: an unregistered custom property is
   a string, and a string does not interpolate. This is what makes a bait SINK rather than
   appear at full depth on the very first frame, and what lets a line be reeled back in
   as a movement rather than a disappearance. */
@property --pp { syntax: '<number>'; inherits: true; initial-value: 1; }

/* ── The three rigs. One set, four states ────────────────────────────────── */

.rig {
  position: absolute; z-index: 3; top: var(--surf);
  --pp: 1;
  opacity: 1;
  transition: --pp 0.85s cubic-bezier(0.33, 1, 0.68, 1),
              opacity 0.55s ease;
}
.rig__line {
  position: absolute; left: 0; top: 0; width: 1.5px;
  height: calc(var(--depth, 56px) * var(--pp));
  translate: -50% 0;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(11, 42, 67, 0.45), rgba(11, 42, 67, 0.1));
  /* A line in moving water is never dead straight. */
  animation: line-sway 5.5s ease-in-out infinite alternate;
  animation-delay: var(--sway, 0s);
}
@keyframes line-sway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }

.rig__lure {
  position: absolute; left: 0; top: calc(var(--depth, 56px) * var(--pp));
  width: 12px; height: 12px; translate: -50% 0;
  border-radius: 50% 50% 50% 4px; rotate: 45deg;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}
.rig__tag {
  position: absolute; left: 0; top: calc(var(--depth, 56px) * var(--pp) + 22px);
  translate: -50% 0; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(20, 70, 110, 0.16);
  background: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 0.66rem; font-weight: 700; color: #0b2a43;
  box-shadow: 0 3px 9px rgba(20, 60, 95, 0.14);
  transition: opacity 0.4s ease;
}
.rig--a { left: 33%; --depth: 34px; }
.rig--b { left: 55%; --depth: 58px; --sway: -1.8s; }
.rig--c { left: 77%; --depth: 46px; --sway: -3.4s; }
.rig--a .rig__lure { background: #e0742f; }
.rig--b .rig__lure { background: #7a5ad6; }
.rig--c .rig__lure { background: #2aa39a; }

/* Two tags on the winning rig, because CSS cannot rewrite text: the angle's name until it
   wins, its title afterwards. They occupy the same spot and cross-fade. */
.rig__tag--win {
  opacity: 0;
  border-color: rgba(217, 155, 43, 0.5);
  background: #fff6e4; color: #7c5a12;
}
[data-step='2'] .rig--a .rig__tag,
[data-step='3'] .rig--a .rig__tag { opacity: 0; }
[data-step='2'] .rig--a .rig__tag--win,
[data-step='3'] .rig--a .rig__tag--win { opacity: 1; }

/* Chapter 1: three baits sink in, one after another, and the controls lock. */
[data-step='1'] .rig { animation: cast 0.9s cubic-bezier(0.33, 1, 0.68, 1) backwards; }
[data-step='1'] .rig--b { animation-delay: 0.18s; }
[data-step='1'] .rig--c { animation-delay: 0.36s; }
[data-step='1'] .sc__lock { animation: stampIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: 1.3s; }
@keyframes cast { from { --pp: 0; } to { --pp: 1; } }
@keyframes stampIn { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }

/* Chapters 2 and 3: the two quiet lines come up and stay up. Transitioned, not animated,
   so arriving at chapter 3 from either direction leaves them where chapter 2 put them
   instead of replaying the retrieval. */
[data-step='2'] .rig--b, [data-step='2'] .rig--c,
[data-step='3'] .rig--b, [data-step='3'] .rig--c,
[data-step='4'] .rig--b, [data-step='4'] .rig--c { --pp: 0; opacity: 0; }
/* Chapter 4: the season is over, so the last line comes up too. */
[data-step='4'] .rig--a { --pp: 0; opacity: 0; }

/* A worked bait is under tension: a tighter, quicker tremor than the idle sway. */
[data-step='2'] .rig--a .rig__line,
[data-step='3'] .rig--a .rig__line { animation: line-tense 1.3s ease-in-out infinite alternate; }
@keyframes line-tense { from { rotate: -0.5deg; } to { rotate: 0.9deg; } }

/* ── The shoal ───────────────────────────────────────────────────────────── */
/* One shoal, permanently in the water. Every fish carries four positions as custom
   properties and the current step picks one; because `translate` is transitioned, the
   change between chapters is the fish SWIMMING there. */

.fish {
  /* Behind the rigs, on purpose. The bait's name tag is an opaque pill hanging directly
     under the lure, which is exactly where a gathering shoal wants to be; at the same
     depth in the stack a fish swam across the words. One layer down, it passes behind
     them instead, which is also what a fish would do. */
  position: absolute; z-index: 2;
  width: 22px; color: #1d5f86;
  pointer-events: none;
  translate: var(--fx, 0) var(--fy, 0);
  transform: scaleX(var(--fsx, 1));
  opacity: var(--fo, 0);
  transition: translate 1.15s cubic-bezier(0.33, 1, 0.68, 1),
              transform 0.5s ease,
              opacity 0.6s ease;
  transition-delay: calc(var(--i, 0) * 0.035s);
}
.fish svg { width: 100%; height: auto; }
/* The fade lives in the colour, NOT in `opacity`, which the step machinery owns. */
.fish--pale { color: rgba(74, 143, 181, 0.72); }
/* Idle life, on the inner svg so it cannot collide with the position or the facing. */
.fish svg { animation: fish-idle var(--bob, 4s) ease-in-out infinite alternate; animation-delay: var(--bd, 0s); }
@keyframes fish-idle { from { transform: translateY(-2px) rotate(-2deg); }
                       to   { transform: translateY(2px)  rotate(2deg); } }

[data-step='1'] .fish { --fx: var(--x1); --fy: var(--y1); --fo: var(--o1); --fsx: var(--s1); }
[data-step='2'] .fish { --fx: var(--x2); --fy: var(--y2); --fo: var(--o2); --fsx: var(--s2); }
[data-step='3'] .fish { --fx: var(--x3); --fy: var(--y3); --fo: var(--o3); --fsx: var(--s3); }
[data-step='4'] .fish { --fx: var(--x4); --fy: var(--y4); --fo: var(--o4); --fsx: var(--s4); }

/* ── The rest of the world ───────────────────────────────────────────────── */

/* In the sky, top right. It used to sit centred at surf+78px, which is exactly where
   rig B's tag lands, so the two printed on top of each other at every width. Above the
   surface is the one band nothing else uses, and the boat holds the far left of it. */
.sc__lock {
  right: 4%; top: 12px; left: auto; translate: 0 0;
  padding: 6px 13px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: rgba(11, 42, 67, 0.5);
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}

/* The rings only mean something once a bait is working, so they are silent in chapter 1
   and stop again when the lines come up. */
.sc__ring {
  position: absolute; z-index: 3;
  left: 33%; top: var(--surf);
  width: 48px; height: 20px; translate: -50% -50%;
  border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 50%;
  opacity: 0;
}
[data-step='2'] .sc__ring,
[data-step='3'] .sc__ring { animation: ripple 1.9s ease-out infinite; }
[data-step='3'] .sc__ring { animation-duration: 1.6s; }
/* `!important` earns its place: the step rules above use the `animation` shorthand,
   which resets delay to zero, and they out-specify this one. */
.sc__ring--2 { animation-delay: 0.95s !important; }
@keyframes ripple { 0% { scale: 0.5; opacity: 0.85; } 100% { scale: 2.1; opacity: 0; } }

/* Day 90. It surfaces from under the water rather than fading in on top of it, so the
   report reads as the thing the season brought up. */
.sc__result {
  left: 50%; top: calc(var(--surf) + 14px); translate: -50% 0;
  width: min(92%, 470px);
  padding: 12px 16px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(20, 60, 95, 0.2);
}
[data-step='4'] .sc__result { animation: surface 0.85s cubic-bezier(0.33, 1, 0.68, 1) backwards; animation-delay: 0.35s; }
@keyframes surface { from { opacity: 0; transform: translateY(54px) scale(0.97); }
                     to   { opacity: 1; transform: none; } }
.sc__result-k {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #0b2a43;
}
.sc__result-k span {
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: none; color: #7d8b98;
}
.sc__result-figs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px;
  margin-top: 9px;
}
.sc__result-figs dt {
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.02em; color: #6b7c8a;
  line-height: 1.25;
}
.sc__result-figs dd {
  margin-top: 2px;
  font-size: 0.95rem; font-weight: 800; color: #0b2a43; line-height: 1.1;
}
.sc__result-figs dd[data-good='true'] { color: #0f7a52; }
.sc__result-foot {
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid rgba(20, 70, 110, 0.1);
  font-size: 0.62rem; font-weight: 600; color: #52616e;
}

/* Held while `replay()` swaps data-step off and back on. See the comment on replay()
   in season.js: without it every chapter change flinches through an unstyled frame. */
.season__deck.is-replaying *,
.season__deck.is-replaying { transition: none !important; }

/* ═══ The slider ═══════════════════════════════════════════════════════════ */

.season__slides { overflow: hidden; }
.season__track {
  display: flex; align-items: stretch;
  transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.sl {
  flex: 0 0 100%; min-width: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
}
/* Every slide stays in the DOM so the track can slide between them, which means the three
   that are not current have to leave the reading order as well as the view. `inert` would
   be the one-word version of this and is not yet old enough to rely on alone. */
.sl[aria-hidden='true'] { visibility: hidden; }

.sl__when {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #a8761a;
}
.sl h3 {
  margin-top: var(--space-2);
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; line-height: 1.15;
  color: var(--ink);
}
.sl h3 { text-wrap: balance; }

/* ═══ The bar ══════════════════════════════════════════════════════════════ */

.season__bar {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-4);
}
/* Four numbered chapters on one rail. A row of equal pills reads as a control you
   operate; a numbered rail with a line running through it reads as a place you are in,
   which is the whole point of the section. */
.season__steps { position: relative; display: flex; flex: 1; min-width: 0; }
.season__rail {
  position: absolute; left: 12.5%; right: 12.5%; top: 13px; height: 2px;
  background: var(--edge); border-radius: 2px; pointer-events: none;
}
.season__rail i {
  display: block; height: 100%; width: var(--fill, 0%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brass), #f2cf8a);
  transition: width 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}
[data-step='1'] .season__rail { --fill: 0%; }
[data-step='2'] .season__rail { --fill: 33.34%; }
[data-step='3'] .season__rail { --fill: 66.67%; }
[data-step='4'] .season__rail { --fill: 100%; }

.season__steps button {
  position: relative; z-index: 1;
  flex: 1; min-width: 0; padding: 0 4px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 0; background: transparent; cursor: pointer;
}
.season__dot {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--edge); background: var(--card);
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 0.76rem; font-weight: 800; color: var(--ink-subtle);
  transition: background 0.35s, color 0.35s, border-color 0.35s, scale 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.season__lab {
  max-width: 100%;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 0.72rem; font-weight: 700; color: var(--ink-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.3s;
}
.season__steps button:hover .season__dot { border-color: var(--ink-subtle); }
.season__steps button:hover .season__lab { color: var(--ink); }
/* Every chapter already reached keeps its rail colour, so the row reads as progress
   through a season rather than as one selected item among four. */
[data-step='2'] #st-1 .season__dot,
[data-step='3'] #st-1 .season__dot, [data-step='3'] #st-2 .season__dot,
[data-step='4'] #st-1 .season__dot, [data-step='4'] #st-2 .season__dot, [data-step='4'] #st-3 .season__dot {
  border-color: var(--brass); color: #a8761a;
}
.season__steps button[aria-selected='true'] .season__dot {
  background: var(--ink); border-color: var(--ink); color: var(--card);
  scale: 1.08;
}
.season__steps button[aria-selected='true'] .season__lab { color: var(--ink); }
.season__nav {
  display: grid; place-items: center; flex: none;
  margin-top: 1px;
  width: 28px; height: 28px;
  border: 1px solid var(--edge); border-radius: 50%;
  background: transparent; color: var(--ink-muted); cursor: pointer;
}
.season__nav:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-subtle); }
.season__nav:disabled { opacity: 0.35; cursor: default; }
.season__nav svg { width: 15px; height: 15px; }

/* A hairline that fills across the current step's dwell, so the reader can see the slider
   is about to move before it moves. It is removed entirely the moment anyone touches a
   control: a bar still counting down after you have taken over reads as the page ignoring
   you. */
.season__timer { height: 2px; background: var(--edge-soft); }
.season__timer i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brass), #f2cf8a);
}
.season__deck[data-auto='on'] .season__timer i { animation: tick 7s linear infinite; }
.season__deck[data-auto='off'] .season__timer { display: none; }
@keyframes tick { from { width: 0; } to { width: 100%; } }

/* ═══ Narrow ═══════════════════════════════════════════════════════════════
   Declared AFTER the rules it overrides, on purpose. A media query adds no specificity,
   so a plain rule written later in the file beats it. */

@media (max-width: 719px) {
  .season__stage { height: 200px; --surf: 44%; }
  .sc__bubbles i { --travel: 130px; }
  .season__boat { width: 84px; left: 4%; }
  [data-step='3'] .season__boat, [data-step='4'] .season__boat { left: 7%; }
  .rig--a { left: 26%; --depth: 22px; }
  .rig--b { left: 52%; --depth: 38px; }
  .rig--c { left: 78%; --depth: 30px; }
  .rig__tag { font-size: 0.58rem; padding: 2px 7px; }
  .sc__ring { left: 26%; }
  .sc__lock { top: 9px; font-size: 0.58rem; padding: 5px 10px; }
  /* The phone stage is 200px tall and only 112px of that is water, so this panel has to
     earn every pixel. Two by two rather than four across (four columns leave "Under your
     Waterline" on three lines each), the closing line dropped, and pushed down clear of
     the hull: the boat hangs about 13px below the waterline and at surf+8 the panel was
     sitting on it and running 28px out of the bottom of the stage. */
  .sc__result { width: 94%; padding: 6px 10px; top: calc(var(--surf) + 16px); }
  .sc__result-figs { grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 6px; }
  .sc__result-figs dd { font-size: 0.8rem; }
  .sc__result-foot { display: none; }
  .fish { width: 16px; }
  .sl { padding: var(--space-4) var(--space-4) var(--space-3); }
  .season__dot { width: 24px; height: 24px; font-size: 0.68rem; }
  .season__lab { font-size: 0.62rem; }
  .season__rail { top: 11px; }
}

/* ═══ Reduced motion ═══════════════════════════════════════════════════════ */
/* The slider still works; it stops moving on its own and stops animating between states.
   Nothing removed here is load bearing for the argument. */

@media (prefers-reduced-motion: reduce) {
  .sc__shafts i, .sc__bubbles i, .sc__waves .wa, .sc__waves .wb,
  .season__timer i, .season__boat, .rig__line, .fish svg { animation: none; }
  .season__track, .season__rail i, .season__dot, .rig, .rig__tag, .fish,
  .season__boat { transition: none; }
  .prop, .sc__lock, .sc__result, .sc__ring { animation: none !important; }
  .season__boat { translate: 0 0; rotate: 0deg; }
  .sc__ring { opacity: 0.45; }
}