/* ============================================================
   TEAM SEA MAJOR
   Imagery led. The photography and footage carry the page; type stays
   light and wide and gets out of the way.

   Built from the three reference sites:
   - Odisea:      full bleed hero, floating glass panel, pill buttons with
                  circular arrows, the small vertical index down the left
   - Ocean Crest: aerial water, a dotted path traced across it, roman and
                  italic mixed inside a single headline
   - tot-nautic:  imagery does the work, one warm metallic accent

   Edit the tokens below to restyle every page at once.
   ============================================================ */
:root {
  /* ---- Ground. Sampled from the crew's own aerial photograph. ---- */
  --deep: #08222B;
  --sea: #0F4152;
  --sea-soft: #14536A;

  /* ---- Text ---- */
  --mist: #E9EFF1;
  --mist-dim: rgba(233, 239, 241, 0.62);
  --mist-faint: rgba(233, 239, 241, 0.28);

  /* ---- Accent. Terracotta, since 29 August 2026. ----

          Why it changed. The previous accent was a 40 per cent tint of the logo
          blue. Its contrast was fine; its hue was the problem. Measured against
          the --sea navy the page is built on, that blue sat 21 degrees away, so
          it agreed with the background instead of cutting through it. The brass
          before it sat 155 degrees away, which is what made it work. Terracotta
          sits 176 degrees away, near enough opposite.

          WHY THERE ARE TWO ACCENTS, and why neither is redundant. Terracotta
          cannot do both jobs with one value. #CF541C measures 2.60 against --sea
          and 3.88 against --deep, so it fails as text anywhere on this page,
          including the big numbers on the stats band where you might assume
          large type buys you a pass. It is excellent as a fill with something
          dark on top. So the accent splits by role, not by shade:

            --accent       solid blocks of colour, with --on-accent over them
            --accent-text  anything read as a glyph or drawn as a line

          The dividing question, when a new usage does not obviously fit: does
          the eye resolve it as a shape filled with colour, or as a mark made of
          colour? Borders and 1px strokes are marks, not fills, which is why they
          take --accent-text even though nobody reads them as text: a terracotta
          hairline on the navy panels measures under 3:1.

          Contrast, measured rather than assumed:
            --accent-text on --deep 7.50:1, on --sea 5.03:1. Passes for small text.
                          On --sea-soft it is 3.86:1, so large text and lines only
                          there, which was equally true of the brass (3.77) and
                          the blue (3.93). That ground has always been the weak one.
            --on-accent on --accent 4.77:1. Passes for normal text, and it is the
                          reason --accent is never used for type itself. ---- */
  --accent:       #CF541C;   /* fills */
  --accent-lift:  #E46F3A;   /* hover on those fills */
  --on-accent:    #0D0401;   /* text and icons sitting on --accent, 4.77:1 */
  --accent-text:  #ED9B76;   /* glyphs, borders, strokes: 5.03 on --sea, 7.50 on --deep */
  --accent-text-lift: #F3BCA3; /* hover on accent-coloured text. No consumer yet:
                                  nothing on the site currently hovers accent text.
                                  It is here so the next link that does has a value
                                  to reach for rather than inventing one. */

  /* ---- Donate. The branch's green, since 28 August 2026. ----
          Cam's call and a good one. It is now the only green in the chrome, so
          the one button that matters cannot be mistaken for the rest of the
          accents, which is exactly what the brass used to do by being the only
          warm thing. Filled green with --on-donate ink measures 7.34:1.

          This deliberately reverses the rule written below in the cause block,
          which said the branch colour was never to be used as a call to action.
          It is worth the branch confirming they are happy, because it makes
          their brand green a UI control. ---- */
  --donate: #88BD23;
  --donate-lift: #9BD12C;   /* hover, 9.07:1 on --deep */
  --on-donate: #08222B;

  /* ---- Cause colour. Used where we talk about the charity, and, since
          28 August, as the Donate button too. Read the --donate note above
          before changing that back: it was the opposite rule until then.

          These are the real thing as of 26 August, now that Cam has permission
          to use the branch's logo. They were first sampled off the logo file
          and then confirmed against the official list Cam supplied the same
          day, which is: 88BD23, 00A174, 000000, FFFFFF, 1FA864. The sampled
          and supplied values matched exactly.

          --cause      88BD23, the primary green off the SAMARITANS block
          --cause-deep 00A174, the teal off the Central London block
          --cause-mid  1FA864, the third green on the list, held for the
                       donation page when that arrives
          Black and white are already the site's --deep and --mist, so they
          are not repeated here.

          The placeholder here until now was #4FB286, a sea green picked to
          recede. The real green does not recede. It is a yellow green carrying
          7.3:1 on the deep ground, the same optical weight as the accent blue.
          That is fine while it stays on eyebrows and figures, and it is the
          reason not to spread it wider without looking at the page first.

          Contrast, measured rather than guessed:
            --cause      on --deep 7.34:1, on --sea 4.93:1. Passes for small text on both.
            --cause-deep on --deep 4.98:1, on --sea 3.35:1. Fails for small text
                         on --sea, so it is used as a rule and a fill only,
                         never for body or label text. ---- */
  --cause: #88BD23;
  --cause-deep: #00A174;
  --cause-mid: #1FA864;

  --glass: rgba(8, 34, 43, 0.42);
  --glass-edge: rgba(233, 239, 241, 0.16);

  /* One family now, sans throughout. The serif came out on 23 August: it read
     as editorial where this needs to read as tidy and organised, and the
     sponsorship pages are the ones being read by companies. --font-display is
     kept as a name so the 23 rules that use it still work, but it is no longer
     a different family, only a different voice. */
  --font-display: 'Jost', system-ui, sans-serif;
  --font-body: 'Jost', system-ui, sans-serif;

  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 30px;
  --sp-lg: 60px;
  --sp-xl: 104px;

  /* The lockup's height. The socials are positioned off it, so it is a token
     rather than a magic number in three places. */
  --wordmark-h: 56px;

  --edge: 34px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--deep);
  color: var(--mist);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.68;
}

img, video { max-width: 100%; display: block; }
a { color: var(--mist); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--edge); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* ============ TYPE ============ */
.label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.4px;
  margin: 0 0 var(--sp-sm);
  line-height: 1.04;
}

h1 { font-size: clamp(40px, 6.4vw, 88px); }
h2 { font-size: clamp(30px, 3.6vw, 46px); }
h3 { font-family: var(--font-body); font-weight: 500; font-size: 17px; letter-spacing: 0; line-height: 1.3; }

h1 i, h2 i { font-style: italic; }

p { margin: 0 0 var(--sp-sm); }

.lede { font-size: 19px; max-width: 30em; font-weight: 300; }
.body-text { color: var(--mist-dim); max-width: 34em; }
.eyebrow { color: var(--accent-text); margin: 0 0 var(--sp-sm); }
.eyebrow-cause { color: var(--cause); }

/* ============ FULL WIDTH TEXT BLOCKS
   Added 2 September 2026, at Cam's request. Three sections have no photograph
   beside them, so the 34em cap on .body-text left more than half the row empty:
   the content area is 1180 minus two 34px edges, which is 1112px, and 34em is
   about 544px.

   This lifts the cap on the children of .text-wide and does nothing else.

   A two column version was built first and Cam rejected it on sight: it looked
   odd on blocks this short. Do not reintroduce it. The measure does run long
   here, roughly 140 characters at full width, which is the known trade and a
   deliberate one.

   .body-text itself is left alone. It is used 26 times and the narrow measure
   is right wherever text sits beside an image.
   ============ */
.text-wide > * { max-width: none; }

/* ============ PILL BUTTONS
   The circular arrow is straight from Odisea. ============ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 20px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--mist-faint);
  color: var(--mist);
  background: rgba(8, 34, 43, 0.25);
  backdrop-filter: blur(6px);
  transition: background-color 200ms ease, border-color 200ms ease;
}

.pill:hover { background: rgba(8, 34, 43, 0.55); border-color: var(--mist-dim); }

.pill .arrow {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--mist); color: var(--deep);
  font-size: 12px; line-height: 1;
}

.pill-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pill-solid:hover { background: var(--accent-lift); border-color: var(--accent-lift); }
.pill-solid .arrow { background: var(--on-accent); color: var(--accent-text); }

/* Focus rings on the filled pills, added 29 August 2026 after tabbing the
   sponsor page and finding the ring invisible on the two buttons that matter
   most. The global ring is --accent-text, which is right against the page but
   wrong on a fill: measured, it is 1.02:1 on the Samaritans green of Donate and
   1.93:1 on the terracotta of the other solid pills, against the 3:1 a focus
   indicator needs. Both are fixed by pushing the ring off the fill and onto the
   ground behind it, where it measures 7.50 on --deep and 5.03 on --sea, rather
   than by inventing a second ring colour. */
.pill-solid:focus-visible { outline-offset: 3px; }

/* Green is Donate and only Donate. The four other solid pills, See the packages
   twice, Get in touch and Back to the start, stay on the accent. Make those
   green too and the green stops meaning anything. */
.pill-solid.donate-link { background: var(--donate); border-color: var(--donate); color: var(--on-donate); }
.pill-solid.donate-link:hover { background: var(--donate-lift); border-color: var(--donate-lift); }
.pill-solid.donate-link .arrow { background: var(--on-donate); color: var(--donate); }

/* ============ TOP BAR
   Sits over the imagery with no background band of its own. ============ */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 6;
  display: flex; align-items: center; gap: var(--sp-md);
  padding: 26px var(--edge);
}

/* THE SOCIALS SIT UNDER THE WORDS, 29 August. Third position in three days, and
   this is the one that satisfies both requests, so here is the reasoning.

   Stacked under the whole lockup the bar was 134px, which Cam called too thick.
   Beside it, 108px, but the crew wanted them under the words. Both are possible
   at once because the lockup is not a uniform block: the icon is a full height
   circle, while the words occupy only the middle band of it. In the source file
   the words run from 25 to 75 per cent of the height, which leaves a clear strip
   underneath them, inside the lockup's own footprint.

   So the icons are taken out of the flow and dropped into that strip: aligned
   left with the start of the words, aligned bottom with the base of the icon. The
   bar stays 108px because nothing was added to its height.

   The 1.164 is derived, not eyeballed. The file is 2212 x 648 and the words begin
   at x=755, so they start at 34.1 per cent of the width. The lockup is sized by
   height, and its width is height x 3.4136, so the offset from the left edge is
   height x 3.4136 x 0.341 = height x 1.164. Getting this wrong by using the
   height alone puts the icons on top of the circle, which is exactly what
   happened first time.

   Below 600px the icons are hidden anyway, which is just as well: at a 40px
   lockup the strip is too shallow for them. */
.brand { position: relative; flex: 0 0 auto; }

.brand .socials {
  position: absolute;
  left: calc(var(--wordmark-h) * 1.164);
  /* -8px, not 0. At 0 the icons tucked right under the words and read as part
     of the lockup. Dropping them clear of its baseline separates the two. They
     are out of flow, so this does not change the height of the bar. */
  bottom: -8px;
  gap: 11px;
}
.brand .socials svg { width: 13px; height: 13px; }

/* ---- The wordmark ----
   Amber's horizontal lockup, since 28 August. Worth knowing the history, because
   this reversed once: the logo was tried here on 13 August and pulled the same
   day, on Cam's call that the type was neater in the bar. What changed is that
   the logo did too. That was a shrunk badge beside nothing; this is a finished
   lockup with its own typography, so the bar carries the real mark rather than
   an approximation of it. ---- */
.wordmark {
  display: flex; align-items: center;
  text-decoration: none;
  /* Load bearing, and the same trap the hero mark row sprang. The bar is a flex
     row, so once the icons moved onto this line the link became a shrinkable
     item competing with them for width. At 375px that squashed the lockup from
     136px to 81px while its height stayed at 40, which reads as a stretched
     logo rather than a small one. It does not flex. */
  flex: 0 0 auto;
}

/* THE WORDMARK IS NOW ARTWORK, 28 August.
   The top left was a badge plus "Team Sea Major" set in Jost with 5px of
   tracking, standing in for a real lockup. Amber's finished horizontal logo
   replaces both, so the header now carries the actual mark, her typography and
   the 2028 line. It also quietly closes the Gotham problem: the wordmark is a
   PNG rather than a font on a server, which is exactly the shape the licence
   holder asked for.

   Sized by height, not width. The lockup is 2212 x 648, and its "SEA MAJOR"
   line is about 19 per cent of that height, so 56px overall puts that line at
   roughly the 19px the Jost wordmark used to sit at. Do not shrink this below
   about 44px: the two text lines stop reading before the icon does. */
.wordmark-logo { height: var(--wordmark-h); width: auto; flex: 0 0 auto; display: block; }

/* ---- Social icons ----
   Inline SVG, filled with currentColor. No icon font, no sprite sheet and no
   third party request, so they still draw with the folder opened off a desktop
   with no connection. Each link carries an aria-label because the glyph alone
   is not a name. ---- */
.socials { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.socials a {
  display: block; color: var(--mist-dim);
  transition: color 200ms ease;
}
.socials a:hover { color: var(--mist); }
.socials svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.socials-footer { margin: var(--sp-xs) 0 var(--sp-sm); }
.socials-footer svg { width: 19px; height: 19px; }

.top-nav { margin-left: auto; display: flex; gap: 26px; }
.top-nav a { color: var(--mist-dim); text-decoration: none; }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--mist); }

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle-bar {
  display: block; width: 22px; height: 1.5px; margin: 0 auto;
  background: var(--mist); transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============ STAGE, the full bleed media block ============ */
.stage { position: relative; overflow: hidden; }
.stage-tall { height: 88vh; min-height: 560px; }
.stage-short { height: 56vh; min-height: 380px; }

.stage-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* A vignette rather than a heavy scrim, so the footage stays visible. */
.stage::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,34,43,.62) 0%, rgba(8,34,43,0) 26%, rgba(8,34,43,0) 54%, rgba(8,34,43,.74) 100%),
    radial-gradient(120% 90% at 50% 40%, rgba(8,34,43,0) 38%, rgba(8,34,43,.52) 100%);
}

/* The top padding clears the bar, which sits over the media rather than in
   the flow. Without it the headline collides with the nav. */
.stage-in {
  position: relative; z-index: 4; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 104px var(--edge) var(--sp-lg) 150px;
  max-width: var(--max); margin: 0 auto;
}

.stage-right { align-items: flex-end; text-align: right; }
.stage-in h1 { max-width: 15em; }

/* ---- Scrim behind the hero text ----
   Load bearing, not decoration. The footage runs from a dark coastline to a
   frame that is almost entirely white foam, and on the bright frames the
   subhead and the countdown label disappear completely. The vertical index and
   the race logo both carried a scrim for exactly this reason; now that the
   headline block is the only thing in the hero, it needs one too.

   It sits on the stage rather than inside .stage-in, because .stage-in is
   capped at --max and centred: a scrim inside it stops short of the viewport
   edge on a wide screen and leaves a visible vertical seam.

   z-index 3 puts it above the vignette at 2 and below the type at 4. ---- */
.stage-scrim-right::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(270deg, rgba(8,34,43,.66) 0%, rgba(8,34,43,.40) 30%, rgba(8,34,43,0) 64%);
}

/* The same job for a hero whose type is left aligned. The shop sits over the
   splash photograph, which is almost entirely white foam, and "Wear it, fund
   the crossing" was close to unreadable on it. A vertical scrim rather than a
   sideways one, because the headline runs across the full width. */
.stage-scrim::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,34,43,.58) 0%, rgba(8,34,43,.30) 55%, rgba(8,34,43,.62) 100%);
}


/* ---- The one orienting line under the headline. The campaign name alone does
   not tell a stranger what this is, and both proposed taglines were rejected,
   so this states the race and the route as plain fact. ---- */
.hero-sub { color: var(--mist-dim); margin: 0 0 var(--sp-md); }

/* ---- Countdown to 12 December 2028 ----
   Rendered in whole days, not a ticking clock. At roughly 850 days out a
   seconds counter reads as a gimmick; days reads as a fact and gets more
   urgent on its own. The number is written by script.js, so the markup ships
   a blank rather than a wrong number if the script never runs. ---- */
.countdown { display: flex; flex-direction: column; gap: 2px; }
.stage-right .countdown { align-items: flex-end; }
.count-n {
  display: block;               /* min-height does nothing on an inline span */
  font-family: var(--font-display);
  font-size: clamp(46px, 5.6vw, 76px);
  line-height: 1.1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  min-height: 1.1em;            /* holds the space before the script fills it */
}
.count-l { color: var(--mist-dim); }

/* ---- The pair photo slot ----
   A marked empty frame rather than a stock image, so nobody mistakes a
   placeholder for a decision. Same aspect ratio as the real photo will be. ---- */
.pair-photo {
  aspect-ratio: 16 / 9;
  display: grid; place-content: center; gap: 6px; text-align: center;
  background: rgba(15, 65, 82, 0.28);
  border: 1px dashed var(--mist-faint);
  border-radius: 4px;
  color: var(--mist-dim);
}
.pair-photo p { margin: 0; }
/* height: auto is load bearing. The width and height attributes on the img are
   presentational hints that map to an explicit CSS height, and an explicit
   height stops aspect-ratio computing, so without this the frame renders at the
   file's pixel height instead of 16:9. Same trap as .crew-photo. */
.pair-photo-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }

/* Buttons that sit side by side under a block of text. */
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* A bigger, brighter Donate, for the one place on a page where it is the
   point rather than an option. */
.pill-lg { padding: 13px 13px 13px 26px; font-size: 12px; }
.pill-lg .arrow { width: 28px; height: 28px; }

/* ============ SPLIT, text one side and imagery the other
   Added 12 August. The complaint on The why and The crew was dead space to the
   right of the text, which is what the floating panel layout produces on a wide
   screen. Cam's steer was to keep the text column exactly the width it already
   is and put imagery in the room beside it, so the measure is pinned at the
   same 34em the body copy already used and the picture takes what is left.

   The media column stretches rather than centres, so the image fills the
   height of the text rather than leaving a new gap above and below it. ============ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 34em) minmax(0, 1fr);
  gap: var(--sp-lg);
  align-items: stretch;
}
.split-media { align-self: stretch; }
.split-media img {
  width: 100%; height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 4px;
}
/* The placeholder frame stands in for an image here, so it fills the column
   the same way a real photograph would rather than keeping its own 16:9. */
.split-media .pair-photo { height: 100%; aspect-ratio: auto; min-height: 340px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-md); }
  .split-media img { height: auto; aspect-ratio: 16 / 10; min-height: 0; }   /* text first on a phone, always */
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 5; color: var(--mist-dim); text-align: center;
}
.scroll-cue span { display: block; margin-bottom: 6px; }

/* ============ SECTIONS ============ */
/* SECTION RHYTHM TIGHTENED, 29 August 2026.

   Harry's note, made three times over on The why, The race and The crew: every
   section carried a blank header and footer roughly half a screen deep, so
   reading a page meant scrolling past a lot of nothing. His words were to halve
   it. These are the two knobs that control it for the whole site, so this is one
   edit rather than per page overrides, which is how the old build drifted.

   104 and 60 become 64 and 40. Not literally half, because at 52 the big
   headlines started to crowd the section above, but close, and the two values
   stay distinct: .section-tight is still visibly tighter than .section, which
   several pages rely on.

   Deliberately NOT touched: .stats-bar, the light blue band at the top of the
   sponsor pages. Harry called its spacing perfect and it is a different class,
   so this change leaves it alone. */
.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }
.section-sea { background: var(--sea); }
.section-head { margin-bottom: var(--sp-md); }

/* ============ ROUTE, the dotted track across water ============ */
.track { margin-top: auto; }
.track svg { display: block; width: 100%; height: auto; }
/* Decorative only since 12 August. The noteheads used to be clickable, each
   scrolling down to its own beat; the beats have gone, so the pointer cursor
   and the hover fill have gone too. Nothing here invites a click any more. */
/* Each note is a group now: head, stem, and a dot or a flag where the value
   needs one. See the long note in race.html for why. The group keeps the
   .track-node class because the reveal stagger and the boat both count on
   there being exactly ten of them, in order. */
.track-node .nh    { fill: var(--mist); stroke: none; }
.track-node .nh-open { fill: none; stroke: var(--mist); stroke-width: 2.6; }
.track-node .nstem { stroke: var(--mist); stroke-width: 1.8; fill: none; }
.track-node .ndot  { fill: var(--mist); stroke: none; }
.track-node .nflag { fill: var(--mist); stroke: none; }

/* ---- Scroll reveal, the cheap way.
   Odisea's "every scroll unveils the story" feeling, done with a stroke
   dashoffset and staggered opacity. No library, no extra bytes, and the whole
   thing degrades to a static stave if the JavaScript never runs, because the
   hiding is applied by script rather than sitting in the stylesheet. ---- */
/* ---- The boat that rows the line ----
   Added 12 August. The stave is now an illustration rather than a diagram: a
   boat travels the length of it, La Gomera to Antigua, arriving as the route
   finishes. The route line it used to arrive alongside was removed on 29 August,
   so the boat is now the only thing that moves along the stave.

   It runs left to right because music does. The official race map further down
   the page runs right to left because west is on the left. Both are correct on
   their own terms, and Cam chose the musical reading for this one.

   Translation is in user units, which for an SVG child is what a CSS px
   resolves to. It stops short of 1178 so it does not sit on the closing double
   bar. Default position is the Antigua end, so with JavaScript off the boat has
   simply already arrived rather than sitting stranded at the start.

   Nothing positions the boat from here any more. It rides an <animateMotion>
   path defined in race.html, which steps through every notehead, and its
   resting position is a transform attribute on the group. CSS drove it once
   and the two competing class rules tied on specificity, which parked it at
   La Gomera permanently. Motion belongs to the motion path. ---- */

/* The button that plays the crossing with a C major behind it. Hidden in the
   markup and unhidden by script.js only where Web Audio and SMIL both exist,
   so it never appears as a control that does nothing. */
.stave-play {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: var(--sp-sm);
  padding: 7px 15px 7px 12px;
  background: rgba(8, 34, 43, 0.4);
  border: 1px solid var(--mist-faint);
  border-radius: 999px;
  color: var(--mist-dim);
  font: inherit;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
.stave-play:hover { color: var(--mist); border-color: var(--mist-dim); }
.stave-play[hidden] { display: none; }
.stave-play-icon { color: var(--accent-text); font-size: 9px; line-height: 1; }
.stave-play-text { font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase; }

.track.will-reveal .track-node { opacity: 0; }

.track.is-revealed .track-node {
  opacity: 1;
  transition: opacity 520ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .track.will-reveal .track-node { opacity: 1; }
}
.ends { display: flex; justify-content: space-between; margin-top: 12px; color: var(--mist-dim); }

/* ============ OFFICIAL RACE MAP
   The Atlantic Campaigns map is drawn in their navy on a transparent ground,
   so on this site's dark blue it would be close to invisible. Rather than
   recolour an official race asset, it sits on a light panel and stays exactly
   as supplied. Reads as a chart, which is what it is. ============ */
.map-panel {
  background: var(--mist);
  border-radius: 4px;
  padding: var(--sp-md) var(--sp-lg);
  max-width: 46em;
}
.race-map { width: 100%; height: auto; }

@media (max-width: 600px) {
  .map-panel { padding: var(--sp-sm); }
}

/* ============ FIGURES ============ */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-md); }
.figure-n { font-family: var(--font-display); font-size: 52px; line-height: 1; display: block; }
.figure-n.cause { color: var(--cause); }
.figure-l { color: var(--mist-dim); display: block; margin-top: var(--sp-xs); }

/* ============ BOAT ============ */
.boat-svg { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: var(--sp-md); }
.b-hull { fill: none; stroke: var(--mist); stroke-opacity: .8; stroke-width: 1.5; }
.b-line { fill: none; stroke: var(--mist); stroke-opacity: .45; stroke-width: 1.1; }
.b-faint { fill: none; stroke: var(--mist); stroke-opacity: .22; stroke-width: 1; }
.b-flag { fill: var(--accent-text); }
.b-water { fill: none; stroke: var(--sea-soft); stroke-width: 1.2; stroke-opacity: .8; }

.hotspot { cursor: pointer; }
.hotspot-ring { fill: var(--deep); stroke: var(--mist); stroke-width: 1.3; transition: fill 200ms ease, stroke 200ms ease; }
.hotspot-num { font-family: var(--font-body); font-size: 11px; fill: var(--mist); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.hotspot:hover .hotspot-ring, .hotspot.is-active .hotspot-ring { fill: var(--accent); stroke: var(--accent); }
.hotspot:hover .hotspot-num, .hotspot.is-active .hotspot-num { fill: var(--on-accent); }

/* ============================================================
   SPONSORSHIP PACKAGES
   Added 12 August.

   <details> rather than a scripted accordion: it opens with JavaScript off,
   it is keyboard operable without any work, and find in page can still reach
   the text inside a closed one.
   ============================================================ */
.pkg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-xs); }

.pkg {
  border: 1px solid var(--glass-edge);
  border-radius: 4px;
  background: rgba(15, 65, 82, 0.34);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.pkg:hover { background: rgba(15, 65, 82, 0.62); }
/* Lit from the boat drawing below, and vice versa. */
.pkg.is-active { border-color: var(--accent-text); background: rgba(15, 65, 82, 0.7); }

.pkg summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
  list-style: none;
}
.pkg summary::-webkit-details-marker { display: none; }
.pkg summary::after {
  content: '+'; margin-left: auto; color: var(--accent-text);
  font-size: 18px; line-height: 1; flex: 0 0 auto;
}
.pkg details[open] summary::after { content: '\2013'; }
.pkg summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }

.pkg-name { font-family: var(--font-display); font-size: 23px; line-height: 1; }
.pkg-amount { color: var(--accent-text); white-space: nowrap; }
.pkg-special .pkg-name { font-style: italic; }

/* The top tier is a different proposition from the rest, not just a bigger
   number: it is the whole boat and the boat carries the sponsor's name. It
   opens by default and is marked out so it does not read as one of seven. */
.pkg-hero { border-color: var(--accent-text); background: rgba(15, 65, 82, 0.55); }
.pkg-hero .pkg-name { font-size: 30px; }
.pkg-hero .pkg-amount { font-size: 13px; }
.pkg-pitch {
  margin: 0; padding: 0 var(--sp-md) var(--sp-sm);
  color: var(--mist); font-size: 15.5px; max-width: 40em;
}
.pkg-benefits strong { color: var(--mist); font-weight: 400; }

/* ============ PLACEMENT KEY
   The fix for the real problem with the first version of the boat diagram:
   everything was behind a hover, so on first look the drawing said nothing at
   all. Every placement is now numbered on the boat and named here, always
   visible. Hover still lights the pair, but it adds to what is already there
   rather than being the only way in. ============ */
.placement-key {
  list-style: none; margin: var(--sp-md) 0 var(--sp-sm); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--sp-xs) var(--sp-md);
}
.pkey {
  display: grid; grid-template-columns: 26px 1fr; gap: 2px var(--sp-xs);
  padding: 7px 9px; border-radius: 3px;
  border: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.pkey.is-active { background: rgba(15, 65, 82, 0.7); border-color: var(--accent-text); }
.pkey-n {
  grid-row: span 2; align-self: start;
  font-family: var(--font-display); font-size: 19px; color: var(--accent-text);
  line-height: 1.2;
}
.pkey-name { font-size: 15px; }
.pkey-where { color: var(--mist-dim); font-size: 13.5px; line-height: 1.45; }
.pkey-tag {
  font-style: normal; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent);
  padding: 2px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
}

/* ============ SHOP, SECOND PASS
   Cam's steer: the merchandise is the thing that should stand out, and the
   disclaimer should be small and discreet rather than a section of its own.
   So the tiles lead the page and the notice is one quiet line at the foot.
   It stays on the page though, because a buyer who thinks merch is a donation
   has been misled. ============ */
.shop-banner {
  display: inline-block;
  color: var(--accent-text);
  border: 1px solid var(--accent-text);
  border-radius: 999px;
  padding: 7px 16px;
  margin: 0 0 var(--sp-md);
}
.shop-disclaimer { max-width: 44em; margin-top: var(--sp-lg); opacity: .62; }

/* ============================================================
   THE STATS BAR
   Four race reach figures, directly under the hero on all three sponsorship
   pages. Cam's placement, and the right one: on the old Overview they sat in a
   section a sponsor had to scroll to and might not reach. Here they are the
   first thing under the headline on whichever of the three pages you land on.

   Four rather than nine, chosen for spread rather than size: press, broadcast,
   social and owned. The full set is in the Insights Report.
   ============================================================ */
.stats-bar {
  background: var(--sea);
  border-bottom: 1px solid var(--glass-edge);
  padding: var(--sp-md) 0;
}
.stats-bar-in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-md);
}
.stats-bar .figure-n { font-size: clamp(30px, 3.2vw, 44px); color: var(--accent-text); }
.stats-bar .figure-l { max-width: 13em; }
.stats-bar-note { margin: var(--sp-md) 0 0; opacity: .6; max-width: 60em; }

@media (max-width: 820px) {
  .stats-bar-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   THE SPONSOR BOARD
   Tiers as boards of slots, with the unfilled ones reading "your logo here".
   Nothing is sold yet, and the empty slots are doing the selling: a visitor
   sees the shape of the thing and where they would sit in it. It also means
   this page needs no rewrite when the first sponsor signs.
   ============================================================ */
.board { margin-bottom: var(--sp-lg); }
.board-head { display: flex; align-items: baseline; gap: var(--sp-sm); flex-wrap: wrap; margin-bottom: var(--sp-sm); }
.board-name { font-family: var(--font-display); font-size: 26px; margin: 0; }
.board-note { color: var(--accent-text); margin: 0; }

.slot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-sm); }
.slot-grid-one { grid-template-columns: minmax(0, 1fr); }
.slot-grid-small { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.slot {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center; text-align: center;
  padding: var(--sp-sm);
  border: 1px dashed var(--mist-faint);
  border-radius: 4px;
  background: rgba(15, 65, 82, 0.22);
  color: var(--mist-faint);
}
/* The top tier is one slot and a different proposition, so it reads as an
   invitation rather than as a gap. */
.slot-lead {
  aspect-ratio: auto; min-height: 150px;
  border-style: solid; border-color: var(--accent-text);
  background: rgba(207, 84, 28, 0.10);   /* --accent at 10%, a wash not a fill */
  color: var(--accent-text);
}
.slot-lead .label { font-size: 13px; letter-spacing: 3px; }
/* A filled slot: a real logo on a quiet ground. */
a.slot.is-taken { border-style: solid; border-color: var(--glass-edge); text-decoration: none; }
a.slot.is-taken:hover { border-color: var(--mist-dim); background: rgba(15, 65, 82, 0.5); }
.slot img { max-width: 78%; max-height: 70%; object-fit: contain; }

@media (max-width: 820px) {
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-grid-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   IN KIND CREDITS
   Not an ask any more, a thank you. One line on what each person actually did
   and a link out to them, which is the return they get for the work.
   ============================================================ */
.credit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); }
.credit {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--sp-md);
  padding: var(--sp-md);
  background: rgba(15, 65, 82, 0.3);
  border: 1px solid var(--glass-edge);
  border-radius: 4px;
  align-items: center;
}
.credit-mark {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--mist-faint);
  border-radius: 4px;
  color: var(--mist-faint);
  padding: var(--sp-xs);
}
.credit-mark img { max-width: 84%; max-height: 76%; object-fit: contain; }
.credit-role { color: var(--accent-text); margin: 0 0 4px; }
.credit-name { font-family: var(--font-display); font-size: 25px; margin: 0 0 var(--sp-xs); }
.credit-what { color: var(--mist-dim); font-size: 15px; margin: 0 0 var(--sp-sm); max-width: 44em; }
.credit-what:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .credit { grid-template-columns: 1fr; gap: var(--sp-sm); }
  .credit-mark { aspect-ratio: 16 / 7; }
}

/* ============================================================
   THE TWO CABIN DOORS
   There are two of them and each needs a clear example, so only one is drawn
   at a time and you switch between them. The tabs are real buttons, and the
   cabins on the profile drawing are clickable shortcuts to the same thing.
   ============================================================ */
.door-tabs { display: flex; gap: var(--sp-xs); flex-wrap: wrap; margin-bottom: var(--sp-md); }
.door-tab {
  padding: 9px 17px;
  background: rgba(8, 34, 43, 0.4);
  border: 1px solid var(--mist-faint);
  border-radius: 999px;
  color: var(--mist-dim);
  font: inherit; font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.door-tab:hover { color: var(--mist); }
.door-tab[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.door-figure { margin: 0; }
.door-figure[hidden] { display: none; }
.door-figure figcaption { color: var(--mist-dim); text-align: center; margin-top: var(--sp-sm); }
/* The cabins on the profile are a shortcut to the door drawings, so say so. */
.hotspot-door { cursor: pointer; }

/* ============ THE CABIN DOOR, AND WHAT IS NOT FOR SALE
   Added 12 August, third pass, after Cam sent a photograph of a real cabin
   door. The World's Toughest Row panel sits in the middle of the hatch on
   every boat in the fleet. It is the race's and it is fixed, so it is drawn in
   a different treatment from everything else and labelled reserved: nobody
   should ever be able to mistake it for something we can sell.
   ============ */
.placement-reserved {
  fill: rgba(233, 239, 241, 0.05);
  stroke: var(--mist-faint);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}
.reserved-text {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  fill: var(--mist-dim);
}
.door-reserved { text-anchor: middle; font-size: 13px; }

.drawing-title { color: var(--accent-text); display: block; margin: 0 0 var(--sp-sm); }

.door-svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }

/* Symphony's placement is the entire livery band, so it lights differently
   from the patches inside it: an outline rather than a solid fill, otherwise
   it simply covers every other placement. */
.placement-band { fill: rgba(233, 239, 241, 0.05); }
.placement-band.is-active { fill: var(--accent); fill-opacity: .28; stroke: var(--accent-text); stroke-width: 1.5; }

.pkg-benefits {
  margin: 0; padding: 0 var(--sp-md) var(--sp-md) calc(var(--sp-md) + 16px);
  color: var(--mist-dim); font-size: 14.5px;
}
.pkg-benefits li { margin-bottom: 5px; }

/* Placements on the hull, lit in step with their package. Invisible until
   pointed at, so the drawing stays a drawing. */
.placement { fill: rgba(233, 239, 241, 0.07); transition: fill 200ms ease; }
.placement.is-active { fill: var(--accent); fill-opacity: .85; }


/* ============ SUB NAVIGATION
   The sponsorship section is three pages now, so it needs its own bar. Sits
   under the hero rather than in the header, because it belongs to one branch
   of the site and not to the whole thing. ============ */
.subnav-wrap { border-bottom: 1px solid var(--glass-edge); background: rgba(15, 65, 82, 0.22); }
.subnav { display: flex; gap: var(--sp-md); padding-top: 15px; padding-bottom: 15px; flex-wrap: wrap; }
.subnav a { color: var(--mist-dim); text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent; }
.subnav a:hover { color: var(--mist); }
.subnav a[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent-text); }


/* ============ CREW ============ */
.crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-lg); }
/* object-position is INERT while the portraits are exactly 4:5. Both files are
   1200x1500, which is the ratio this box asks for, so object-fit: cover has
   nothing to crop and shows the whole frame. Changing the 30% below will appear
   to do nothing. If a face is badly placed, re-crop the file from the original
   in Drive photo-originals, which is what was done to harry.jpg on 2 September.
   The declaration stays as a safety net for the day a non 4:5 file is dropped
   in here. */
.crew-photo {
  width: 100%; height: auto;      /* height: auto is load bearing, see note in README */
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%;
  border-radius: 4px; background: var(--sea); margin-bottom: var(--sp-sm);
}
.crew-name { font-family: var(--font-display); font-size: 30px; margin: 0; }
.crew-role { color: var(--accent-text); margin: 4px 0 var(--sp-xs); }

/* ============ CREW STATS
   The prose bios are gone, at Cam's request, replaced by a card of quick
   answers. Every value ships as an em dash: Cam and Harry are filling these in
   between them, and a dash reads unmistakably as "not answered yet" where an
   invented answer would quietly become fact.

   The height row is doing real work. The site has carried three contradictory
   heights across three places since July, and putting both men's numbers side
   by side finally forces that to resolve.
   ============ */
.crew-stats { margin: 0; padding: 0; display: grid; gap: 0; }
.crew-stats > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm);
  padding: 9px 0;
  border-bottom: 1px solid var(--glass-edge);
}
.crew-stats > div:last-child { border-bottom: 0; }
.crew-stats dt {
  color: var(--mist-dim); font-size: 13px;
  letter-spacing: .3px;
}
.crew-stats dd {
  margin: 0; text-align: right;
  font-family: var(--font-display); font-size: 19px; line-height: 1.2;
  color: var(--mist);
}
/* Unanswered rows stay visibly unanswered. */
.crew-stats dd[data-fill] { color: var(--mist-faint); }

/* A couple of the answers are a sentence rather than a word. They keep the
   display face but step down a size so a film quote does not tower over the
   one word answers above it. */
.crew-stats dd.stat-long { font-size: 15.5px; line-height: 1.35; max-width: 20em; }

/* The qualifier under a value, for the ones that need a footnote to be funny. */
.stat-note {
  display: block; margin-top: 3px;
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.4;
  letter-spacing: .2px; color: var(--mist-dim);
}

/* The label column must not squash the answers on a narrow screen. */
@media (max-width: 600px) {
  .crew-stats > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .crew-stats dd { text-align: left; }
}

/* ============ FOOTER ============ */
.site-footer { border-top: 1px solid var(--glass-edge); padding: var(--sp-lg) 0; }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: space-between; }
.footer-inner p { margin: 0 0 6px; font-size: 14px; color: var(--mist-dim); }
.footer-nav { display: flex; flex-direction: column; gap: 5px; }
.footer-nav a { color: var(--mist-dim); text-decoration: none; font-size: 14px; }
.footer-nav a:hover { color: var(--mist); }
.small-print { font-size: 12.5px; opacity: .8; }

/* ============ MOBILE ============ */
@media (max-width: 820px) {
  .stage-in { padding-left: var(--edge); }        /* the hero needs the room more than the index */

  /* The hero goes left aligned at this width, so a right to left scrim is on
     the wrong side of the type and the headline sits over bare foam. Swap it
     for a vertical one that covers the whole frame. Phones get the poster
     image rather than the video, and the poster is one of the brightest
     frames in the clip, so this matters more on mobile than on desktop. */
  .stage-scrim-right::before {
    background: linear-gradient(180deg, rgba(8,34,43,.50) 0%, rgba(8,34,43,.38) 45%, rgba(8,34,43,.72) 100%);
  }
  .stage-tall { height: auto; min-height: 0; }
  .stage-tall .stage-in { padding-top: 130px; padding-bottom: var(--sp-lg); }
  .stage-right { align-items: flex-start; text-align: left; }
  .scroll-cue { display: none; }
}

@media (max-width: 600px) {
  :root { --edge: 20px; }

  .nav-toggle { display: flex; }
  .top { padding: 18px var(--edge); gap: var(--sp-xs); }
  .top .pill-solid { margin-left: auto; }

  /* This bar has run out of room twice. In August 2026 the text wordmark grew
     to "Team Sea Major" and pushed the menu button off the right edge, where the
     stage's overflow clipped it, leaving no way to open the menu on a phone.
     That was solved with tracking. The lockup replaced the text on 28 August and
     it happened again, so read the note below before adding anything here. */
  /* The social icons come out of the bar below 600px. With the lockup beside
     them the bar wanted 401px of content on a 390px screen, and since neither
     the lockup nor the menu button can give, something had to leave. The icons
     are the right thing to drop: they are in the footer of every page, and the
     bar keeps the logo, Donate and the menu. */
  .brand .socials { display: none; }

  .top-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 0 var(--edge) var(--sp-sm);
    background: rgba(8, 34, 43, 0.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--glass-edge);
    z-index: 20;
  }
  .top-nav.is-open { display: flex; }
  .top-nav a { padding: 15px 0; border-bottom: 1px solid var(--glass-edge); font-size: 13px; }
  .top-nav a:last-child { border-bottom: 0; }

  h1 { font-size: 38px; }
  .figure-n { font-size: 42px; }
  .track svg { min-height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}

/* A div while there is nothing to buy. Becomes <a class="product shop-link">
   once SHOP_URL in script.js points at a real storefront. */
.product {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 1px solid var(--glass-edge);
  border-radius: 4px;
  background: rgba(15, 65, 82, 0.28);
  overflow: hidden;
  transition: background-color 200ms ease, border-color 200ms ease;
}
a.product:hover { background: rgba(15, 65, 82, 0.6); border-color: var(--mist-faint); }

.product-media {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: rgba(8, 34, 43, 0.5);
  border-bottom: 1px solid var(--glass-edge);
  color: var(--mist-faint);
  text-align: center;
  padding: var(--sp-sm);
}

.product-body { padding: var(--sp-sm); }
.product-name { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin: 0 0 4px; color: var(--mist); }
.product-note { font-size: 13.5px; line-height: 1.55; color: var(--mist-dim); margin: 0 0 var(--sp-xs); }
.product-price { color: var(--accent-text); }

@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-xs); }
  .product-name { font-size: 18px; }
}

/* ============================================================
   RACE CREDIT, World's Toughest Row
   Required by the race terms, not a design choice.

   Atlantic Campaigns, "Initial Welcome" and "Race Report and Assets":
     - "The official race logos must be present on all marketing and PR
        materials including the front page of your website."
     - "When mentioning the race, please make sure you hyperlink the wording
        'World's Toughest Row' with our website."

   Primary Logo variant 3, the white version, is used because the site ground
   is dark and variant 1's navy block would disappear into it. The file is the
   official asset, unaltered: not recoloured, stretched, rotated or effected.

   The padding on .race-logo-link is deliberate clear space. Page 2 of the
   Logo Guidelines specifies an exact clear space rule that could not be read
   from the PDF, so this is set generously rather than guessed at precisely.
   Worth checking against the guidelines before launch.
   ============================================================ */
.race-logo {
  width: 300px;
  max-width: 100%;
  height: auto;          /* stops the width/height attributes fighting this */
  display: block;
}

.race-logo-link {
  display: inline-block;
  padding: var(--sp-sm);  /* clear space */
  border-radius: 3px;
  transition: background-color 200ms ease;
}
.race-logo-link:hover { background: rgba(233, 239, 241, 0.06); }

/* Footer instance, smaller, on every page */
.footer-race {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--glass-edge);
}
.footer-race .race-logo { width: 190px; }
.footer-race p { margin: 0; }
.footer-race-words { flex: 1 1 20em; }

/* ---- Atlantic Campaigns, the race organiser ----
   T&C 9.2 requires the Race Organiser's logo as well as the official race
   logo. Added 12 August, when the asset finally arrived in Drive.

   Sized by eye rather than by matching width: the AC mark is roughly 2.1:1
   where the race logo is 6.7:1, so equal widths would make this one three
   times the height. This lands the two at a similar optical weight. The file
   is the official white-on-transparent web asset, unaltered. ---- */
.race-logo-ac { width: 88px; }
.footer-race .race-logo-ac { width: 76px; }

@media (max-width: 600px) {
  .race-logo { width: 240px; }
  .footer-race .race-logo { width: 170px; }
  .race-logo-ac, .footer-race .race-logo-ac { width: 68px; }
}

/* ============================================================
   CENTRAL LONDON SAMARITANS
   Added 26 August, when Cam confirmed the branch has given permission to use
   their logo. The file is their asset, unaltered: not recoloured, stretched,
   rotated, cropped or effected, and it keeps its own aspect ratio everywhere.

   It is a two colour block with white type reversed out, so unlike the race
   marks it does not need a scrim to survive on moving footage. It does need
   clear space, which is what the padding on .cause-logo-link is for. Set
   generously rather than guessed at, the same call that was made for the race
   logo. Worth checking against the Samaritans brand guidelines before launch,
   which we do not have a copy of yet.

   Sized against the race logo by height, not width. The race wordmark is
   roughly 6.7:1 and this is 2.6:1, so matching widths would make this one two
   and a half times the taller. Matched exactly on height it lands at about
   77px wide and "Central London" stops being readable, so it runs a little
   taller than the race mark on purpose. That is a legibility call, not a
   ranking of the two.
   ============================================================ */
.cause-logo {
  width: 200px;
  max-width: 100%;
  height: auto;          /* stops the width/height attributes fighting this */
  display: block;
}

.cause-logo-link {
  display: inline-block;
  padding: var(--sp-sm);  /* clear space */
  border-radius: 3px;
  transition: background-color 200ms ease;
}
.cause-logo-link:hover { background: rgba(233, 239, 241, 0.06); }

/* In the body of a page, where we are talking about the branch. Sits on its
   own line under the copy, in its own whitespace, so it reads as whose money
   this is rather than as decoration.

   It had a rule above it in the branch's teal for about ten minutes. On the
   page that read as a stray underline sitting over a logo that already has a
   teal bar of its own, so it came off again. The block is strong enough to
   hold its own space without help. */
.cause-mark {
  display: inline-block;
  margin: var(--sp-md) 0 var(--sp-sm);
}
.cause-mark .cause-logo { width: 190px; }

@media (max-width: 600px) {
  .cause-mark .cause-logo { width: 158px; }
}

/* Race logo in the hero, above the fold on the front page. Bottom left, clear
   of the vertical index at mid left and the scroll cue at bottom centre.

   Two marks since 26 August, the race we are entering and the branch we are
   rowing for, which is the pairing Cam asked for. They sit in one lockup with
   a hairline between them so neither looks like it belongs to the other. */
.hero-race {
  position: absolute; left: var(--edge); bottom: 22px; z-index: 5;
  /* Scrim is load bearing. The race logo is white and the footage moves, so on
     a bright foam frame it would otherwise disappear entirely. Same reason the
     vertical index above carries one. It runs further right and fades less
     than it used to, because there are now two marks sitting on it. */
  /* Restretched 28 August: three marks sit on this now, not two, so the density
     has to hold further right or the white race logo disappears on a bright foam
     frame, which is the whole reason the scrim exists. */
  background: linear-gradient(100deg, rgba(8,34,43,.72) 0%, rgba(8,34,43,.60) 52%, rgba(8,34,43,.38) 82%, rgba(8,34,43,.10) 100%);
  border-radius: 3px;
}
.hero-race .race-logo { width: 200px; }

.hero-marks { display: flex; align-items: center; gap: 2px; }

/* Load bearing, and it cost an hour on 28 August. The row is absolutely
   positioned, so its width is shrink to fit. Adding our own lockup, whose file
   is 2212px wide, pushed the preferred width past what was available, the box
   clamped to the containing block, and then every mark shrank. With
   img { max-width: 100% } above, all three collapsed to zero width and only the
   hairlines were left drawing. Marks in this row do not flex. */
.hero-marks img { flex: 0 0 auto; }

/* OUR OWN MARK IN THE HERO ROW, 28 August.
   Same shape as .race-logo and .cause-logo above, including the height: auto,
   which this file has now needed three times. Without it the width and height
   attributes on the img win and the lockup renders 648px tall. */
.team-logo {
  width: 200px;
  max-width: 100%;
  height: auto;          /* stops the width/height attributes fighting this */
  display: block;
}

.team-logo-link {
  display: inline-block;
  padding: var(--sp-sm);  /* clear space, as the other two marks get */
  border-radius: 3px;
  transition: background-color 200ms ease;
}
.team-logo-link:hover { background: rgba(233, 239, 241, 0.06); }

.hero-marks .cause-logo { width: 116px; }

/* Three marks now, ours first: us, the race, the cause. Widths are set so the
   three read at a similar optical height rather than a similar width, because
   the three lockups have very different proportions. The race logo is 6.7 to 1,
   ours is 3.4 to 1 and the branch's is 2.6 to 1. */
.hero-marks .team-logo { width: 140px; }

/* Hairline between the two marks. Neutral on purpose: a divider in either
   brand's colour would read as belonging to that brand. */
.mark-rule {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin: 12px 0;
  background: var(--mist-faint);
}

@media (max-width: 900px) {
  .hero-race { bottom: 14px; }
  .hero-race .race-logo { width: 150px; }
  .hero-marks .cause-logo { width: 92px; }
  .hero-marks .team-logo { width: 110px; }
}

/* At 375px three marks plus their clear space are far wider than the screen.
   The clear space gives first, but with a third mark in the row the logos have
   to come down too. Measured at 375px: the row comes out 286px wide with its
   right edge at 306px, and the page does not scroll sideways. Adding a fourth
   mark here means rethinking the row, not shaving these numbers again. */
@media (max-width: 480px) {
  .hero-marks .team-logo-link,
  .hero-marks .race-logo-link,
  .hero-marks .cause-logo-link { padding: 5px; }
  .hero-race .race-logo { width: 104px; }
  .hero-marks .cause-logo { width: 64px; }
  .hero-marks .team-logo { width: 78px; }
  .mark-rule { margin: 6px 0; }
}

/* The rowing boat on the stave. Its oars and marks used to carry the accent as
   a literal hex in race.html, which meant the palette lived in two places and
   the 28 August swap had to be done twice. Strokes and small marks, so they are
   --accent-text, same as the noteheads above. */
.boat-oars { stroke: var(--accent-text); }
.boat-mark { fill: var(--accent-text); }
.product-media { padding: 0; }

/* ============================================================
   ARRIVAL
   Home page only. The logo holds the screen, a boat rows across the water
   beneath it, and the logo leaves with it.

   COMPOSITION NOTE. The first cut stacked the boat directly under the logo and
   moved them together. It read as a boat hanging in mid air, because the water
   is at the foot of the screen and the pair were floating halfway up it. The
   boat now runs along the waterline where it belongs, and the logo starts its
   exit as the boat passes under it, which reads as the boat taking it.

   TIMING, deliberately short. An intro that outstays its welcome is the
   fastest way to lose somebody arriving from a shared link. 2.6 seconds, and
   a click skips it.
       0.10 - 0.70   logo fades up
       0.55 - 2.35   boat crosses, left to right
       1.45 - 2.25   logo leaves to the right, as the boat reaches it
       2.20 - 2.60   overlay fades and stops taking clicks

   The last keyframe sets visibility and pointer-events, so this genuinely
   clears rather than leaving an invisible sheet over the site. That matters:
   it is in the markup rather than script built, so it must clear itself even
   when script.js never runs.
   ============================================================ */
.arrival {
  position: fixed; inset: 0; z-index: 200;
  /* White, because this is the logo as it was actually designed: navy and blue
     on white. Landing on white and then having it lift to reveal the dark site
     is a sharper arrival than fading dark into dark. */
  background: #FFFFFF;
  display: grid; place-items: center;
  overflow: hidden;
  animation: arrival-clear 400ms ease 2200ms forwards;
}

@keyframes arrival-clear {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.arrival-tow {
  display: grid; place-items: center;
  animation: arrival-tow 800ms cubic-bezier(.55, 0, .85, .25) 1450ms forwards;
  will-change: transform;
}
@keyframes arrival-tow { to { transform: translateX(125vw); } }

.arrival-logo {
  width: min(64vw, 540px); height: auto;
  opacity: 0;
  animation: arrival-fade 600ms ease 100ms forwards;
}
@keyframes arrival-fade { to { opacity: 1; } }

/* On the water, not floating in the middle of the screen. Sits just above the
   crest of the first wave. */
.arrival-boat {
  position: absolute; left: 0;
  /* The sea is 16vh tall and its first crest sits at half that, so the boat
     rides at 8vh. Set higher than this and it visibly hovers. */
  bottom: clamp(46px, 8vh, 78px);
  width: clamp(74px, 9vw, 118px); height: auto;
  transform: translateX(-24vw);
  animation: arrival-row 1800ms linear 550ms forwards;
  will-change: transform;
}
@keyframes arrival-row { to { transform: translateX(122vw); } }

.arrival-sea {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: clamp(90px, 16vh, 150px);
  fill: #4A7DF5;                 /* the logo blue, not the site palette */
  opacity: .16;
}

/* Reduced motion: script.js removes the overlay outright, but if that file
   never runs this zeroes the delay so the sequence clears at once rather than
   holding a dark screen for two seconds. */
@media (prefers-reduced-motion: reduce) {
  .arrival { animation-delay: 0ms; }
}

/* ============================================================
   THE REAL RANGE, 20 August
   Twelve products from Cam's merchandise sheet. The source images are small,
   about 150 to 210px each, so tiles are sized to sit near native resolution
   rather than stretching them. Bigger files later mean bigger tiles.
   ============================================================ */
.product-grid.product-grid-range { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }

/* The product shots have white backgrounds, so they sit on a pale panel
   instead of being cut out, which at this resolution would leave ragged
   edges. It also reads like a shop. */
.product-media-light {
  background: #EDF2F4;
  border-bottom: 1px solid var(--glass-edge);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  padding: var(--sp-sm);
}
.product-media-light img { width: auto; height: auto; max-width: 100%; max-height: 100%; }

.product-grid-range .product-name { font-size: 19px; margin: 0 0 3px; }
.product-grid-range .product-note { font-size: 12.5px; margin: 0 0 5px; }
.product-grid-range .product-price { color: var(--accent-text); }

@media (max-width: 900px) { .product-grid.product-grid-range { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .product-grid.product-grid-range { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The badge in the bar, a fraction bigger at Cam's request. */
/* Below 600px the header shares the row with the menu button, so the lockup
   comes down to 40px. That is the floor: at 375px it is 136px wide, which still
   leaves the button its margin. */
@media (max-width: 600px) { .wordmark-logo { --wordmark-h: 40px; } }

/* The photo slot on a credit card can carry a second line telling whoever
   fills it where the file goes. */
.credit-mark .small-print { display: block; margin-top: 4px; opacity: .7; }
.credit-mark img { border-radius: 3px; }

/* The hidden attribute only sets display:none at the user agent level, so any
   author rule that sets display wins over it. .pill is inline-flex, which meant
   a pill marked hidden still showed. It was doing that on Amber's card and
   pointing at "#", which is exactly the dead link the attribute was there to
   prevent. */
.pill[hidden], [hidden] { display: none !important; }

/* A filled credit slot loses the dashed placeholder treatment. Amber's
   headshot is 290px square, so it is centred at native size rather than
   stretched to fill a wider box. */
/* A filled credit slot drops the dashed placeholder treatment entirely. The
   max-height:none and display:block matter: the placeholder version is a
   centred grid with the image capped at 76% of a 4:3 box, and inheriting that
   squashed Amber's near square headshot to 190x139. */
.credit-mark-filled {
  border: 0; padding: 0; background: none;
  aspect-ratio: auto; display: block;
}
.credit-mark-filled img {
  width: 100%; max-width: 190px;
  height: auto; max-height: none;
  border-radius: 4px;
}

/* ============================================================
   ALL SANS. 23 August 2026, replacing the serif.

   SECOND PASS, same day. The first attempt was bold uppercase at
   0.33em everywhere and Cam was right that it looked janky. Three
   things were wrong with it.

   Tracking has to come down as size goes up. 0.33em is a good
   number on a 10px label and a bad one on a 46px headline, where
   it stops reading as a word and starts reading as ten separate
   letters. So tracking now scales with size: 0.1em on h1, 0.13em
   on h2, and the wide track is kept for the small labels where it
   belongs.

   Bold was too much. Uppercase, tracked and bold all at once is
   three kinds of emphasis on the same words. Medium carries it,
   and headlines can be bigger as a result, which is what actually
   makes them feel deliberate.

   The two part headline now runs medium into light rather than
   bold into regular. Same idea, quieter.
   ============================================================ */
/* THIRD PASS, 23 August. Everything was still a size too big and reading as
   loud rather than as considered. The whole scale steps down: the headline is
   the size a headline needs to be rather than the size the space allows, and
   the gap between a heading and the text under it is what does the work now,
   not the point size. */
body { font-weight: 400; font-size: 16px; line-height: 1.66; }
.lede { font-weight: 400; font-size: 18px; }

h1, h2 {
  font-weight: 500;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(21px, 2.9vw, 40px);
  letter-spacing: 0.1em;
  line-height: 1.14;
}
h2 {
  font-size: clamp(16px, 1.8vw, 24px);
  letter-spacing: 0.14em;
  line-height: 1.2;
}
h1 i, h2 i { font-style: normal; font-weight: 300; }
h3 { font-weight: 500; letter-spacing: 0.03em; }

/* Jost has a large x height, so everything the serif used to set comes down
   and loses a little weight. Figures at 700 read as chunky rather than as
   numbers. */
.figure-n     { font-weight: 500; letter-spacing: -0.015em; font-size: 36px; }
.stats-bar .figure-n     { font-size: clamp(24px, 2.3vw, 31px); }
.pkg-name     { font-weight: 500; font-size: 17px; letter-spacing: 0.01em; }
.board-name   { font-weight: 500; font-size: 18px; letter-spacing: 0.02em; }
.credit-name  { font-weight: 500; font-size: 18px; letter-spacing: 0.01em; }
.crew-name    { font-weight: 500; font-size: 20px; letter-spacing: 0.02em; }
.product-name { font-weight: 500; font-size: 16.5px; }
.product-grid-range .product-name { font-size: 15px; }

/* The wordmark. Earmarked for a Gotham artwork file later, set as outlines
   rather than as a font, so no webfont licence is needed. */
/* The .wordmark type overrides that used to sit here went with the text on
   28 August. The bar is artwork now, so there is nothing to set. */

/* The wide track stays where it earns its keep: small, short, uppercase. */
.label { letter-spacing: 0.17em; }
.stats-bar .figure-l { letter-spacing: 0.13em; }

/* ============================================================
   HERO TEXT, BOTTOM LEFT. 23 August 2026.

   Cam's observation, and a good one: the race photography is
   almost all composed with dead space in the bottom left, so that
   is where the type belongs. On The why it also leaves the lone
   boat alone in the frame, which is the point of that picture.

   NO BOX. The first version put the type on a blurred panel and
   it covered the photograph, which is the best thing on the page.
   The bottom of every hero is already darkened by the vignette on
   .stage, so the type only needs a shadow behind it to hold up
   over a bright frame. A short accent rule above the eyebrow does
   the job the panel edge was doing. It was brass until 28 August.
   ============================================================ */
.stage-in {
  justify-content: flex-end; align-items: flex-start; text-align: left;
  padding-left: var(--edge);   /* the old 150px indent was for the right aligned hero */
}
.stage-in.stage-right {
  justify-content: center; align-items: flex-end; text-align: right;
  padding-left: 150px;
}

.stage-band { max-width: 100%; }
.stage-band .eyebrow { margin-bottom: 12px; position: relative; padding-top: 16px; }
.stage-band .eyebrow::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 42px; height: 2px; background: var(--accent-text);
}
.stage-band h1 { margin: 0; }
.stage-band .eyebrow, .stage-band h1 { text-shadow: 0 1px 18px rgba(8, 34, 43, 0.75); }

/* The top bar sits over the media. Dark at the two ends where the wordmark and
   the nav are, clear across the middle where there is nothing to read, so the
   photograph is not banded across the top. */
.top::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,34,43,.68) 0%, rgba(8,34,43,.36) 24%, rgba(8,34,43,0) 44%,
                           rgba(8,34,43,0) 52%, rgba(8,34,43,.46) 74%, rgba(8,34,43,.80) 100%);
}
/* Insurance for the bar over a bright frame, without darkening the picture.
   The wordmark used to be a span of text and took a text-shadow. It is an image
   now, so it takes the same protection as a drop-shadow on the artwork. */
.top-nav a { text-shadow: 0 1px 12px rgba(8, 34, 43, 0.7); }
.wordmark-logo { filter: drop-shadow(0 1px 10px rgba(8, 34, 43, 0.55)); }

/* Crew stats, made uniform. 23 August, Cam's note that the mixed line counts
   and sizes were bothering him. One value size instead of two, one row height
   so the two cards line up row for row, and notes always on their own line in
   the same style. The 5'11" on Hinge stays: it is the best line on the page. */
/* 62px is the tallest row's content, Cam's two line film quote, so every row
   clears it and the two columns stay level with each other all the way down.
   Drop this below the tallest row and the columns drift apart again. */
.crew-stats > div { min-height: 62px; align-items: center; }
.crew-stats dd { font-size: 15px; line-height: 1.4; max-width: 22em; font-weight: 400; }
.crew-stats dd.stat-long { font-size: 15px; line-height: 1.4; max-width: 22em; }
.crew-stats dt { font-size: 13px; }

/* The race rules footnote on the packages page, and the drawings after the
   explanatory column beside them came out on 23 August. */
.pkg-fn { color: var(--accent-text); font-size: .8em; }
.pkg-footnote { margin-top: var(--sp-sm); max-width: 44em; }
.door-single { display: block; }
.door-single .door-figure { margin-left: auto; margin-right: auto; }

/* The shop's holding note, in place of the mailing list button. */
.shop-pending { color: var(--mist-dim); max-width: 34em; margin-top: var(--sp-md); }

/* ---- The panel the numbered key opens ---- */
.pkey { cursor: pointer; }
.pkey:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.pkey-detail {
  margin: var(--sp-sm) 0 var(--sp-md);
  padding: var(--sp-md);
  background: rgba(15, 65, 82, 0.42);
  border: 1px solid var(--glass-edge);
  border-left: 2px solid var(--accent-text);
  border-radius: 3px;
  min-height: 96px;
}
.pkey-detail-prompt { color: var(--mist-dim); margin: 0; font-size: 15px; }
.pkey-detail-head { font-weight: 500; font-size: 20px; margin: 0 0 var(--sp-xs); }
.pkey-detail-amount { color: var(--accent-text); margin-left: 6px; }
.pkey-detail-pitch { color: var(--mist-dim); margin: 0 0 var(--sp-xs); max-width: 46em; }
.pkey-detail .pkg-benefits { margin-bottom: 0; }

/* The stave lives inside the hero on the race page, and .stage-in packs its
   children to the left, so the stave has to be told to span the width again or
   its svg collapses to nothing.

   This now only really serves the stacked case, below 860px. Above that the hero
   is a row and .stage-in-split .track overrides both of these declarations: see
   the note up there for why stretching is wrong in a row. The rule stays because
   the narrow layout still needs it. */
.stage-in > .track { align-self: stretch; width: 100%; }

/* The hero headline holds to the left half so it never runs into the subject of
   the photograph. On The why that is the whole point: the lone boat sits in the
   right of the frame and the type stays out of its way. */
.stage-in h1 { max-width: 12em; }

/* ---- The two aerials: full frame, positioned rather than cropped ----
   23 August, second attempt. The first one cropped the right hand side off
   these photographs to move the boat away from the type, and Cam was right on
   both counts: it threw away resolution, and cropping the ocean is the one
   thing you cannot do to a picture whose subject is how much ocean there is.

   The whole frame is used now, at native resolution. Because the hero is much
   wider than the photograph, it is the top and bottom that get cropped, not
   the sides, so the vertical position is the control. Pushed almost to the
   bottom of the image, the boat sits in the upper third of the hero and the
   type has the bottom left to itself. Nothing is cut off the sides. */
/* Retuned 29 August with the photograph. 92% pushed the visible band to the
   bottom of the old images, where their subject was. The lone boat shot is
   cropped with the boat vertically centred instead, so this can sit at 50% and
   stay right whatever the viewport height does to a 74vh stage. */
.stage-media-high { object-position: 50% 50%; }

/* THE RACE HERO, 29 August. Two changes that go together.

   The stave moved to the top and the title to the bottom, matching every other
   page. .stage-in packs its children to the bottom, which is right when the title
   is the only thing in there, so this hero gets space-between instead.

   And the full frame wash is gone. It made the stave legible by dulling the whole
   Antigua photograph, and the crew want that photograph vibrant. So the dark
   ground is now only where it is actually needed, behind the stave itself. The
   title at the bottom left needs no help: it sits on dark foliage, and the
   vignette on .stage already carries 74 per cent at the bottom edge.

   A panel was tried and rejected behind the hero type in August, for good reason.
   This is not that: it is a band behind a drawing, not a box behind a headline,
   and without it the mist stave lines vanish into the pale hills. */
/* The stave sits beside the title, not above it. The 520px floor that the stacked
   version needed is gone with it: side by side, the tallest column is the stave at
   about 170px, so a plain 56vh holds everything and this hero matches Shop and
   Sponsor us exactly, which is what the crew asked for.

   The stave gets smaller by being given less width, not by being scaled: the svg
   is width:100% of its column with height:auto, so 58 per cent of the wrap makes
   it a little over half its old size. */
.stage-in-split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-lg);
}
.stage-in-split .stage-band { flex: 0 1 34%; }
.stage-in-split .track {
  flex: 0 1 58%;
  margin-top: 0;
  /* Both of these undo .stage-in > .track further down the file, which stretches
     the stave to fill the hero. That was right when the stave was the full width
     of a stacked hero. In a row it makes the panel 284px tall around 148px of
     content, so the dark band covered far more of the photograph than it needed
     to. */
  align-self: flex-end;
  width: auto;
  /* Tightened twice on 31 August, both times on the crew's note that it was still
     thick. Started at 14px top and 10px bottom. */
  padding: 10px 16px 7px;
}

/* The button centres under the stave rather than hanging off the left, and the
   gaps above it and above the two place names both come down. Between the padding
   and these two the panel loses about 40px of height without touching the stave
   itself, which is the part that has to stay readable. */
.stage-in-split .ends { margin-top: 4px; }
.stage-in-split .stave-play { margin-top: 5px; }
.stage-in-split .track > .stave-play {
  /* display:flex plus fit-content, not inline-flex. The button is inline-level by
     default, and auto margins do not centre an inline box: it has to be
     block-level and shrink-wrapped first. */
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Stacked again on a narrow screen, title first. Two columns at 58 and 34 per cent
   of a phone is unreadable in both of them. */
@media (max-width: 860px) {
  /* column-reverse, not column. The markup order is title then stave, which is
     right for the row. Stacked plainly, that puts the title at the top of the
     hero where the Antigua sky is brightest and the terracotta eyebrow washes
     out. Reversed, the title lands at the bottom over the dark foliage, which is
     both legible and where every other page puts its title. */
  .stage-in-split {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .stage-in-split .stage-band,
  .stage-in-split .track { flex: 0 0 auto; width: 100%; }
  .stage-race { min-height: 520px; }
}

.stage-in-split .track {
  background: rgba(8, 34, 43, 0.56);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 5px;
  padding: 14px 20px 10px;
}


/* A Donate button with nowhere to go yet. It keeps its shape, because the
   layout is being reviewed, but it stops behaving like a live link. */
.donate-link[aria-disabled="true"] { cursor: default; opacity: .82; }