/* ==========================================================================
   Design pass — 15 October (v4 brief)
   Loaded after every other stylesheet: sand outlines on sand buttons, the
   shared banner framework, and subtle motion. Type, including the capitals
   in the navigation, lives in typography.css (16 October brief).
   Every colour comes from tokens.css.
   ========================================================================== */

/* ---------- sand buttons carry a sand outline ---------- */
.sj-btn-primary { border-color: var(--sj-sand); }
.sj-btn-primary:hover { border-color: var(--sj-teal); }

/* ---------- banner framework (the homepage's) ----------
   eyebrow -> H1 -> standfirst -> optional supporting line -> actions, with
   the photograph in a rounded 4:5 frame beside it. */
.sj-hero__back { margin: 0; }
.sj-hero__body {
  max-width: 36rem;
  margin: 0;
  color: var(--sj-text-on-teal);
}
.sj-hero .sj-hero__copy .editorial-heading-1 { max-width: 15em; }
.sj-hero__media .sj-media-still { height: 100%; aspect-ratio: auto; }

/* ==========================================================================
   Motion — subtle, and none at all for anyone who asks for reduced motion
   ========================================================================== */
@keyframes sj-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sj-settle {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* banner: copy rises in line by line, the photograph settles */
  .sj-hero__copy > * { animation: sj-rise .8s cubic-bezier(.16, 1, .3, 1) both; }
  .sj-hero__copy > :nth-child(2) { animation-delay: .07s; }
  .sj-hero__copy > :nth-child(3) { animation-delay: .14s; }
  .sj-hero__copy > :nth-child(4) { animation-delay: .21s; }
  .sj-hero__copy > :nth-child(n+5) { animation-delay: .28s; }
  .sj-hero__media > * { animation: sj-settle 1.2s cubic-bezier(.16, 1, .3, 1) .1s both; }

  /* content below the first screen eases up as it arrives (script.js marks
     it; without the script nothing is hidden) */
  .js .sj-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--sj-delay, 0s);
  }
  .js .sj-reveal.is-visible { opacity: 1; transform: none; }

  /* cards lift a touch under the pointer */
  .grid > .sj-card,
  .sj-post-card__link,
  .sj-route,
  .sj-opp,
  .sj-proof-stacked__quotes > blockquote {
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), border-color .2s ease;
  }
  .grid > .sj-card:hover,
  .sj-post-card__link:hover,
  .sj-route:hover,
  .sj-opp:hover,
  .sj-proof-stacked__quotes > blockquote:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -18px rgb(40 91 96 / .45);
  }

  /* photographs drift in slightly under the pointer */
  .sj-photo__frame img,
  .sj-split .sj-photo__frame img { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
  .sj-photo:hover .sj-photo__frame img { transform: scale(1.03); }

  /* buttons answer the pointer */
  .sj-btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1); }
  .sj-btn:hover { transform: translateY(-1px); }
  .sj-btn:active { transform: translateY(0); }
  .sj-btn svg { transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
  .sj-btn:hover svg { transform: translateX(3px); }

  /* links underline in rather than snapping */
  .sj-a { transition: text-decoration-color .2s ease, color .2s ease; }
}

/* ---------- embedded episodes (Media) ----------
   A still and a play button until pressed; then the player in its place. */
.sj-yt-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sj-ink);
}
.sj-yt,
.sj-yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sj-yt { display: block; }
.sj-yt img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.sj-yt__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 2px solid var(--sj-sand);
  background: var(--sj-bg-cta);
  color: var(--sj-teal);
  box-shadow: 0 10px 28px -12px rgb(48 59 60 / .7);
}
.sj-yt__play svg { width: 26px; height: 26px; margin-left: 3px; }
.sj-yt:focus-visible { outline-offset: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .sj-yt img { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
  .sj-yt__play { transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .2s ease; }
  .sj-yt:hover img { transform: scale(1.03); }
  .sj-yt:hover .sj-yt__play { transform: scale(1.08); }
}

/* ---------- content is always left-aligned (v5) ----------
   Centring was removed from the markup; these cover the pieces styled in CSS. */
.sj-success { text-align: left; }
.sj-success-mark { margin: 0 0 1rem; }
@media (max-width: 767px) {
  footer .flex-col.items-center { align-items: flex-start; }
}

/* ---------- homepage film (19 October) ----------
   Straight after the banner; nothing downloads until someone presses play.
   The band shares the next section's ground, so it keeps only its top padding. */
.sj-film { padding-bottom: 0; }
.sj-film__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sj-ink);
}
.sj-film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

.sj-film__frame { position: relative; }
.sj-film__play { padding: 0; cursor: pointer; }
.sj-film__play[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sj-film__play { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
  .sj-film__play:hover { transform: scale(1.08); }
}

/* a list dot sits on the middle of its first line of text */
.sj-dot { margin-top: calc(.8em - 3px); }

/* ==========================================================================
   Homepage sections (191026 v2)
   ========================================================================== */

/* "There's more to her": a Sand card overlaps the foot of the photograph */
.sj-more { position: relative; }
/* the card hangs 32px below the photograph; beside the copy the section makes
   room for it, so the gap to the next section matches the others */
@media (min-width: 900px) {
  .sj-section:has(.sj-split .sj-more) { padding-bottom: calc(var(--sj-section-y) + var(--sj-space-4)); }
}
.sj-more__card {
  position: absolute;
  left: var(--sj-space-4);
  bottom: calc(-1 * var(--sj-space-4));
  max-width: min(17rem, 80%);
  margin: 0;
  padding: var(--sj-space-3);
  border-radius: var(--sj-radius);
  background: var(--sj-bg-cta);
  color: var(--sj-text-on-cta);
  font-family: var(--sj-font-heading);
  font-size: var(--sj-h3);
  font-weight: 600;
  line-height: var(--sj-lh-h3);
  letter-spacing: var(--sj-track-h3);
}

/* a heading beside its introduction */
.sj-head-split { display: grid; gap: var(--sj-gap-heading); margin-bottom: var(--sj-gap-content); }
.sj-head-split > * { margin: 0; }
@media (min-width: 768px) {
  .sj-head-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--sj-space-6); }
}

.sj-ratio-2x1 { aspect-ratio: 2 / 1; }
.sj-ratio-3x5 { aspect-ratio: 3 / 5; }
@media (max-width: 767px) {
  .sj-ratio-2x1 { aspect-ratio: 3 / 2; }
}

/* a short list beside an action */
.sj-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sj-space-3);
  margin-top: var(--sj-space-4);
}

/* names set as a row: formats, brands, shows */
.sj-formats,
.sj-namelist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sj-space-1) var(--sj-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sj-text-link);
}
.sj-formats { font-size: var(--sj-secondary); font-weight: 600; line-height: var(--sj-lh-label); }
.sj-namelist { font-size: var(--sj-quote); font-weight: 600; line-height: var(--sj-lh-sub); }

/* two portrait photographs, the second set lower */
.sj-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sj-space-3); align-items: start; }
.sj-pair > :last-child { margin-top: var(--sj-space-8); }

/* a partner's words under the section, as a testimonial card */
.sj-partner-quote { margin-top: var(--sj-space-10); }
@media (max-width: 767px) {
  .sj-partner-quote { margin-top: var(--sj-space-8); }
}

@media (max-width: 767px) {
  .sj-band__roles { gap: var(--sj-space-1) var(--sj-space-3); }
}

/* ==========================================================================
   Speaking (191026 Speaking Updates)
   ========================================================================== */

/* two columns, top-aligned: a heading beside its paragraphs */
.sj-two-col { display: grid; gap: var(--sj-gap-heading); }
.sj-two-col > * > :first-child { margin-top: 0; }
@media (min-width: 768px) {
  .sj-two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sj-space-8); align-items: start; }
}

/* keynote portfolio: one horizontal card per keynote, photograph first */
.sj-keynote-rows { display: grid; gap: var(--sj-grid-gap); }
.sj-keynote-row { display: grid; overflow: hidden; border-radius: var(--sj-radius); background: var(--sj-bg-surface); }
.sj-keynote-row__media { position: relative; aspect-ratio: 3 / 2; }
.sj-keynote-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.sj-keynote-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sj-card-gap); padding: var(--sj-card-pad); }
.sj-keynote-row__body > * { margin: 0; }
.sj-keynote-row__body .sj-a { margin-top: var(--sj-space-1); }
@media (min-width: 768px) {
  .sj-keynote-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .sj-keynote-row__media { aspect-ratio: auto; min-height: 18rem; }
  .sj-keynote-row__body { justify-content: center; }
}

/* a line beside an action, under the portfolio */
.sj-aside-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sj-space-2) var(--sj-space-4); margin-top: var(--sj-space-4); }
.sj-aside-row > div > * { margin: 0; }

/* the TEDx talk as a Deep teal card; pressing it loads the player in place */
.sj-tedx { aspect-ratio: 16 / 10; background: var(--sj-bg-authority); }
.sj-tedx .sj-tedx__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sj-space-2);
  padding: var(--sj-space-4);
  color: var(--sj-white);
  text-decoration: none;
}
.sj-tedx__event { font-family: var(--sj-font-heading); font-size: var(--sj-sub); font-weight: 600; line-height: var(--sj-lh-sub); color: var(--sj-sand); }
.sj-tedx__title { font-family: var(--sj-font-heading); font-size: var(--sj-h3); font-weight: 600; line-height: var(--sj-lh-h3); letter-spacing: var(--sj-track-h3); }
.sj-tedx__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--sj-control-min-height);
  margin-top: var(--sj-space-1);
  padding: .75rem 1.25rem;
  border-radius: var(--sj-radius);
  background: var(--sj-white);
  color: var(--sj-ink);
  font-size: var(--sj-button);
  font-weight: 600;
  line-height: var(--sj-lh-ui);
}
.sj-tedx__btn svg { width: 18px; height: 18px; }
.sj-tedx .sj-tedx__card:hover .sj-tedx__btn { background: var(--sj-sand); }
.sj-tedx .sj-yt:focus-visible { outline-color: var(--sj-white); }
@media (max-width: 479px) {
  .sj-tedx .sj-tedx__card { padding: var(--sj-space-2); gap: var(--sj-space-1); }
}

/* engagement options: photograph on top of each card */
.sj-format { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--sj-radius); background: var(--sj-bg-surface); }
.sj-format .sj-photo__frame { border-radius: 0; }
.sj-format .sj-photo__frame img { border-radius: 0; }
.sj-format__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--sj-card-gap); padding: var(--sj-card-pad); }
.sj-format__body > * { margin: 0; }
.sj-format__body .sj-a { margin-top: auto; padding-top: var(--sj-space-1); }

/* ==========================================================================
   Workshops (191026 Workshop Updates)
   ========================================================================== */
/* a short "who it's for" line, and the In sport / In leadership labels */
.sj-for { margin: 0; font-size: var(--sj-secondary); font-weight: 600; line-height: var(--sj-lh-caption); color: var(--sj-text-link); }
/* a banner link that jumps down the page */
.sj-hero .sj-btn-on-teal.sj-btn-down::after { content: "↓" / ""; }

/* ==========================================================================
   Testimonials (201026 SJ Website Updates)
   A Blush card: the label where there is one, the words in the heading face
   without quotation marks, then a plain attribution on one or two lines.
   Ink on Blush 9.55:1, Deep teal on Blush 6.30:1.
   ========================================================================== */
.sj-testimonial {
  display: grid;
  gap: var(--sj-space-3);
  align-content: start;
  padding: var(--sj-space-4);
  border-radius: var(--sj-radius);
  background: var(--sj-bg-testimonial);
  color: var(--sj-text-body);
}
@media (min-width: 768px) { .sj-testimonial { padding: var(--sj-space-6); } }
.sj-testimonial > *,
.sj-testimonial blockquote { margin: 0; }
.sj-testimonial blockquote > p:first-child {
  margin: 0;
  font-family: var(--sj-font-heading);
  font-size: var(--sj-testimonial);
  font-weight: 500;
  line-height: var(--sj-lh-h3);
  letter-spacing: var(--sj-track-h3);
  text-indent: 0;
  color: var(--sj-text-heading);
}
.sj-testimonial blockquote footer { margin-top: var(--sj-space-3); gap: .25rem; }
.sj-testimonial blockquote footer > p {
  font-size: var(--sj-secondary);
  font-weight: 400;
  line-height: var(--sj-lh-caption);
  color: var(--sj-text-body);
}

/* the mock-up's quotation mark, top right of every testimonial card */
.sj-testimonial { position: relative; }
.sj-testimonial::before {
  content: "“" / "";
  position: absolute;
  top: calc(var(--sj-space-4) - .25rem);
  right: var(--sj-space-4);
  font-family: var(--sj-font-heading);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sj-teal);
}
.sj-testimonial > :first-child { padding-right: 3rem; }
@media (min-width: 768px) {
  .sj-testimonial::before { top: calc(var(--sj-space-6) - .25rem); right: var(--sj-space-6); }
}

/* more than one quote in a card: they scroll and snap on their own; the
   script adds the dots, the count and the arrows. Nothing moves by itself. */
.sj-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--sj-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sj-slider__track::-webkit-scrollbar { display: none; }
.sj-slider__track:focus-visible { outline: 2px solid var(--sj-teal); outline-offset: 4px; }
.sj-slider__slide { scroll-snap-align: start; }
.sj-slider__controls { display: flex; align-items: center; gap: var(--sj-space-2); }
.sj-slider__controls[hidden] { display: none; }
.sj-slider__dots { display: flex; gap: var(--sj-space-2); margin-right: auto; }
.sj-slider__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgb(48 59 60 / .25); }
.sj-slider__dots span.is-current { background: var(--sj-teal); }
.sj-slider__count {
  margin: 0 var(--sj-space-1) 0 0;
  font-size: var(--sj-secondary);
  font-variant-numeric: tabular-nums;
  color: var(--sj-text-body);
}
.sj-slider__btn {
  display: grid;
  place-items: center;
  width: var(--sj-control-min-height);
  height: var(--sj-control-min-height);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sj-white);
  color: var(--sj-teal);
  cursor: pointer;
}
.sj-slider__btn:hover { background: var(--sj-teal); color: var(--sj-white); }
.sj-slider__btn:focus-visible { outline: 2px solid var(--sj-teal); outline-offset: 2px; }
.sj-slider__btn svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .sj-slider__track { scroll-behavior: smooth; }
  .sj-slider__btn { transition: background-color .2s ease, color .2s ease; }
}

/* a button whose label ends in an arrow (homepage CTA, Partnerships banner) */
.sj-btn-arrow::after { content: "→" / ""; margin-left: var(--sj-space-3); }

/* a text link with an arrow, as on the banners (homepage Workshops and Swimming clinics) */
.sj-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sj-space-3);
  font-size: var(--sj-button);
  font-weight: 600;
  line-height: var(--sj-lh-ui);
  color: var(--sj-text-link);
  text-decoration: none;
}
.sj-link-arrow::after { content: "→" / ""; }
.sj-link-arrow:hover { color: var(--sj-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Clinics (201026v2 SJ Website Updates)
   ========================================================================== */
/* what swimmers can explore: three short topics beside a photograph */
.sj-topics { display: grid; gap: var(--sj-space-3); padding-top: var(--sj-space-1); }
.sj-topics > div { display: grid; gap: var(--sj-space-1); }
.sj-topics > div > * { margin: 0; }

/* who clinics are for: three Seafoam cards */
.sj-audiences { display: grid; gap: var(--sj-grid-gap); margin: 0; padding: 0; list-style: none; }
.sj-audiences li {
  padding: var(--sj-card-pad);
  border-radius: var(--sj-radius);
  background: var(--sj-bg-surface);
  font-family: var(--sj-font-heading);
  font-size: var(--sj-h3);
  font-weight: 500;
  line-height: var(--sj-lh-h3);
  letter-spacing: var(--sj-track-h3);
  color: var(--sj-text-heading);
}
@media (min-width: 768px) {
  .sj-audiences { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sj-audiences li { min-height: 10rem; }
}

/* a pointer to the workshops under the last section */
.sj-crosslink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sj-space-2) var(--sj-space-4);
  margin-top: var(--sj-space-10);
}
.sj-crosslink > p { max-width: 60ch; margin: 0; }

/* ==========================================================================
   Partnerships (201026v3 SJ Website Updates)
   ========================================================================== */
.sj-ratio-8x9 { aspect-ratio: 8 / 9; }
.sj-ratio-16x15 { aspect-ratio: 16 / 15; }
.sj-ratio-5x7 { aspect-ratio: 5 / 7; }

/* partnerships in practice: alternating rows, then two side by side */
.sj-cases { display: grid; gap: var(--sj-space-10); }
/* the brand names sit at section-heading size, as drawn */
.sj-case h3,
.sj-case-card h3 { font-size: var(--sj-h2); line-height: var(--sj-lh-h2); letter-spacing: var(--sj-track-head); }
.sj-case__facts { margin: 0; font-size: var(--sj-secondary); font-weight: 500; line-height: var(--sj-lh-caption); color: var(--sj-text-link); }
.sj-case-pair { display: grid; gap: var(--sj-space-8); }
@media (min-width: 768px) { .sj-case-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sj-space-6); } }
.sj-case-card { display: grid; gap: var(--sj-space-2); align-content: start; }
.sj-case-card > * { margin: 0; }
.sj-case-card > .sj-photo { margin-bottom: var(--sj-space-2); }

/* ways to work together: three Seafoam cards and a note */
.sj-ways { display: grid; gap: var(--sj-grid-gap); }
@media (min-width: 768px) { .sj-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sj-ways article {
  display: grid;
  gap: var(--sj-card-gap);
  align-content: start;
  padding: var(--sj-card-pad);
  border-radius: var(--sj-radius);
  background: var(--sj-bg-surface);
}
.sj-ways h3 { margin: 0; color: var(--sj-text-heading); }
.sj-ways ul { display: grid; gap: var(--sj-space-2); margin: 0; padding: 0; list-style: none; }
.sj-ways li { font-size: var(--sj-body); line-height: var(--sj-lh-body); color: var(--sj-text-body); }
.sj-ways__note { margin: var(--sj-space-4) 0 0; font-size: var(--sj-secondary); line-height: var(--sj-lh-caption); color: var(--sj-text-body); }

/* ==========================================================================
   201026v4 SJ Website Updates
   ========================================================================== */
/* testimonial cards come in from both sides, and the words run on to the
   card's right edge, left aligned; the heading over a card comes in with it */
.sj-testimonial { width: 100%; max-width: 56rem; margin-inline: auto; }
.sj-testimonial blockquote p { max-width: none; }
.sj-quote-head { max-width: 56rem; margin-inline: auto; }

/* Media: on screen, two features then two series, the words under each */
.sj-screen { display: grid; gap: var(--sj-space-8) var(--sj-space-6); }
@media (min-width: 768px) { .sj-screen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sj-screen__item { display: grid; gap: var(--sj-space-3); align-content: start; }
.sj-screen__body { display: grid; gap: var(--sj-space-1); }
.sj-screen__body > * { margin: 0; }
.sj-screen .sj-yt-wrap,
.sj-screen .sj-media-still { overflow: hidden; border-radius: var(--sj-radius); }
.sj-screen .sj-media-still,
.sj-media-still--portrait { background: var(--sj-bg-surface); border-bottom: 0; }
.sj-media-still--portrait { aspect-ratio: 4 / 5; border-radius: var(--sj-radius); }
.sj-media-still__sub { font-size: var(--sj-secondary); line-height: var(--sj-lh-caption); color: var(--sj-text-body); }
.sj-link-arrow.sj-link-out::after { content: "↗" / ""; }

/* ==========================================================================
   201026v5–v7 SJ Website Updates
   ========================================================================== */
/* header: the name with OAM · OLY beneath it */
.sj-brand__name { gap: .25rem; }
.sj-brand__name .sj-postnom { line-height: 1; }

/* banner extras: the post-nominals under a name, a button that points down,
   a secondary link without an arrow */
.sj-hero__postnom {
  margin: var(--sj-space-1) 0 0;
  font-size: var(--sj-label);
  font-weight: 600;
  letter-spacing: var(--sj-track-label);
  text-transform: uppercase;
  color: var(--sj-text-link);
}
.sj-btn-arrow-down::after { content: "↓" / ""; margin-left: var(--sj-space-3); }
.sj-hero .sj-btn-on-teal.sj-btn-noarrow::after { content: none; }
.sj-link-arrow.sj-link-down::after { content: "↓" / ""; }
.sj-ratio-3x4 { aspect-ratio: 3 / 4; }
.sj-ratio-2x3 { aspect-ratio: 2 / 3; }

/* About: along the way */
.sj-along { display: grid; gap: var(--sj-gap-content); }
@media (min-width: 900px) { .sj-along { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sj-space-8); } }
.sj-along__intro > * { margin: 0; }
.sj-along__list { display: grid; gap: var(--sj-space-6) var(--sj-space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .sj-along__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sj-along__list li { display: grid; gap: var(--sj-space-1); align-content: start; }
.sj-along__list li > * { margin: 0; }
.sj-along__year { font-size: var(--sj-secondary); font-weight: 600; line-height: var(--sj-lh-caption); color: var(--sj-text-link); }
.sj-along__list li > p:last-child { font-size: var(--sj-secondary); line-height: var(--sj-lh-body); color: var(--sj-text-body); }

/* About: causes close to her heart */
.sj-causes { display: grid; gap: var(--sj-space-3); margin: 0; padding: 0; list-style: none; }
.sj-causes li > * { margin: 0; }
.sj-causes__name {
  font-family: var(--sj-font-heading);
  font-size: var(--sj-h3);
  font-weight: 500;
  line-height: var(--sj-lh-h3);
  letter-spacing: var(--sj-track-h3);
  color: var(--sj-text-heading);
}
.sj-causes__what { font-size: var(--sj-secondary); line-height: var(--sj-lh-caption); color: var(--sj-text-link); }

/* About: where you'll find her now */
.sj-find { display: grid; gap: var(--sj-space-8) var(--sj-space-6); }
@media (min-width: 768px) { .sj-find { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sj-find article { display: grid; gap: var(--sj-space-2); align-content: start; }
.sj-find article > * { margin: 0; }
.sj-find article > p:not(:last-child) { font-size: var(--sj-body); line-height: var(--sj-lh-body); color: var(--sj-text-body); }

/* About: the film beside its words, played from a "Watch the film" pill */
.sj-film-split .sj-film__frame { border-radius: var(--sj-radius); }
.sj-film__play--pill {
  position: absolute;
  left: var(--sj-space-2);
  bottom: var(--sj-space-2);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border: 0;
  border-radius: var(--sj-radius-pill);
  background: var(--sj-white);
  color: var(--sj-teal);
  font-size: var(--sj-button);
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 10px 28px -12px rgb(48 59 60 / .5);
}
.sj-film__play--pill svg { width: 18px; height: 18px; }
.sj-film__play--pill:focus-visible { outline: 2px solid var(--sj-white); outline-offset: 2px; }

/* Story: the chapters */
.sj-chapter-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sj-space-2) var(--sj-space-4); margin-bottom: var(--sj-space-8); }
.sj-chapter-nav p {
  margin: 0;
  font-size: var(--sj-label);
  font-weight: 600;
  letter-spacing: var(--sj-track-label);
  text-transform: uppercase;
  color: var(--sj-text-link);
}
.sj-chapter-nav ul { display: flex; flex-wrap: wrap; gap: var(--sj-space-1) var(--sj-space-4); margin: 0; padding: 0; list-style: none; }
.sj-chapter-nav a { font-size: var(--sj-secondary); font-weight: 500; color: var(--sj-text-link); text-decoration: none; }
.sj-chapter-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sj-chapter { display: grid; gap: var(--sj-gap-heading); }
@media (min-width: 900px) { .sj-chapter { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sj-space-8); } }
.sj-chapter__head > * { margin: 0; }

/* Story: the finding, in brief (opens in place) */
.sj-finding { border-radius: var(--sj-radius); background: var(--sj-bg-surface); }
.sj-finding summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sj-space-2);
  padding: var(--sj-space-3) var(--sj-card-pad);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--sj-text-link);
}
.sj-finding summary::-webkit-details-marker { display: none; }
.sj-finding summary::after { content: "+" / ""; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.sj-finding[open] summary::after { content: "−" / ""; }
.sj-finding summary:focus-visible { outline: 2px solid var(--sj-teal); outline-offset: 2px; border-radius: var(--sj-radius); }
.sj-finding__body { display: grid; gap: var(--sj-gap-para); padding: 0 var(--sj-card-pad) var(--sj-card-pad); }
.sj-finding__body p { margin: 0; font-size: var(--sj-body); line-height: var(--sj-lh-body); color: var(--sj-text-body); }

/* Story: pull quotes in a Blush card */
.sj-pullquote {
  display: grid;
  gap: var(--sj-space-3);
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--sj-space-4);
  border-radius: var(--sj-radius);
  background: var(--sj-bg-testimonial);
}
@media (min-width: 768px) { .sj-pullquote { padding: var(--sj-space-6); } }
.sj-pullquote > *,
.sj-pullquote blockquote { margin: 0; }
.sj-pullquote__label { font-size: var(--sj-secondary); font-weight: 500; line-height: var(--sj-lh-caption); color: var(--sj-text-link); }
.sj-pullquote blockquote p {
  margin: 0;
  max-width: none;
  font-family: var(--sj-font-heading);
  font-size: var(--sj-h2);
  font-weight: 500;
  line-height: var(--sj-lh-h2);
  letter-spacing: var(--sj-track-head);
  color: var(--sj-text-heading);
}
.sj-pullquote figcaption { display: grid; gap: .25rem; }
.sj-pullquote__name { font-size: var(--sj-body); font-weight: 500; color: var(--sj-text-link); }
.sj-pullquote__detail { font-size: var(--sj-secondary); line-height: var(--sj-lh-caption); color: var(--sj-text-body); }

/* Story: from the story to the stage */
.sj-story-keynotes { display: grid; gap: var(--sj-space-8) var(--sj-space-6); }
@media (min-width: 900px) { .sj-story-keynotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sj-story-keynotes article { display: grid; gap: var(--sj-space-2); align-content: start; }
.sj-story-keynotes article > * { margin: 0; }
.sj-story-keynotes article > p:not(:last-child) { font-size: var(--sj-body); line-height: var(--sj-lh-body); color: var(--sj-text-body); }

/* ==========================================================================
   Design consistency (21 October brief): cards in a grid
   The grids of cards set in the markup take the shared gap. The Partnerships
   causes grid keeps its 32px gap: a narrower gap would widen its three
   photographs. Those cards take the shared padding and inner spacing.
   ========================================================================== */
main .grid:has(> :is(.sj-card, .sj-format)) { gap: var(--sj-grid-gap); }
main .grid > .rounded-2xl > .p-6 { padding: var(--sj-card-pad); }
/* and the same spacing inside each card as the other cards */
main .grid > .sj-card.flex { gap: var(--sj-card-gap); }
main .grid > .sj-card.space-y-3 > :not(:last-child),
main .grid > .rounded-2xl > .p-6.space-y-3 > :not(:last-child) { margin-block-end: var(--sj-card-gap); }

/* ==========================================================================
   22.10.26 SJ updates
   ========================================================================== */
/* the strip under every banner is set in capitals, tracked like the other
   capitals on the site */
.sj-band__lead,
.sj-band__roles { text-transform: uppercase; letter-spacing: var(--sj-track-nav); }

/* enquiry-type cards: the radio inside is visually hidden, so the card itself
   shows keyboard focus */
.sj-type-card:has(input:focus-visible) {
  outline: var(--sj-focus-width) solid var(--sj-control-border);
  outline-offset: var(--sj-focus-offset);
}

/* the film's rounded frame clips anything outside it, so its focus outline
   is drawn inside the video */
.sj-film__frame video:focus-visible { outline-offset: calc(-1 * var(--sj-focus-width) - 2px); }

/* Background updates for content blocks (22.10.26): a nominated block sits in
   a contained pale seafoam panel on the white page. The panel is the block's
   own container, so the content keeps the site's content width and alignment
   while the panel reaches into the gutter; on narrower screens it keeps clear
   of the screen edge. */
.container.sj-panel {
  max-width: min(var(--sj-content-max), calc(100% - 2 * var(--sj-panel-inset)));
  padding-block: var(--sj-section-y);
  border-radius: var(--sj-radius);
  background: var(--sj-seafoam);
}

/* Standardise content block image sizes (22.10.26): a single photograph
   beside copy takes the homepage Swimming Clinics frame, square in the
   five-part column, on either side and whatever the length of the copy. Each
   photograph's object-position keeps its subject in frame. */
.sj-split > .sj-photo .sj-photo__frame { aspect-ratio: 1 / 1; }

/* ==========================================================================
   231026 SJ Website Updates
   ========================================================================== */

/* Mobile banners: the photograph first, flush under the header, then the
   words, with the usual section spacing before the band */
@media (max-width: 1023px) {
  .sj-hero__media { order: 1; }
  .sj-hero__copy { order: 2; }
  .sj-hero:has(.sj-hero__media) { padding-top: 0; padding-bottom: var(--sj-section-y); }
}

/* The band's roles can link to their pages: White on Deep teal, with a light
   underline that firms up on hover */
.sj-band a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.sj-band a:hover { text-decoration-color: currentColor; }
.sj-band a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* Speaking: on mobile the words introduce the talk, so they come first */
@media (max-width: 899px) {
  .sj-talk-split > .sj-talk { order: 2; }
}

/* Workshops: the "In sport" and "In leadership" labels in capitals */
.sj-for--caps { text-transform: uppercase; letter-spacing: var(--sj-track-nav); }

/* Partnerships: a vertical clip beside its case, as tall as the square
   photographs beside the other cases */
.sj-reel { display: flex; justify-content: center; margin: 0; }
.sj-reel .sj-reel__frame { aspect-ratio: 9 / 16; width: clamp(220px, 56.25%, 100%); border-radius: var(--sj-radius); }

/* Story: the 2019 coverage as clippings on a wall, each a little askew,
   above the 2019-2021 chapter text */
.sj-clippings { margin: 0 0 var(--sj-space-8); }
.sj-clippings__wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sj-space-3) var(--sj-space-2);
  max-width: 48rem; /* three over two */
  margin: 0 auto;
  padding: var(--sj-space-1) 0;
  list-style: none;
}
.sj-clippings__wall li {
  padding: 6px;
  border-radius: 4px;
  background: var(--sj-white);
  box-shadow: 0 0 0 1px rgb(48 59 60 / .08), 0 18px 36px -22px rgb(48 59 60 / .6);
  transform: rotate(var(--sj-tilt, 0deg));
}
.sj-clippings__wall li:nth-child(1) { --sj-tilt: -2deg; }
.sj-clippings__wall li:nth-child(2) { --sj-tilt: 1.5deg; }
.sj-clippings__wall li:nth-child(3) { --sj-tilt: -1deg; }
.sj-clippings__wall li:nth-child(4) { --sj-tilt: 2deg; }
.sj-clippings__wall li:nth-child(5) { --sj-tilt: -1.5deg; }
.sj-clippings__wall img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(140px, 16vw, 200px);
  object-fit: contain;
}
@media (max-width: 599px) {
  .sj-clippings__wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sj-space-2) var(--sj-space-1); }
  .sj-clippings__wall img { width: 100%; height: auto; }
  .sj-clippings__wall li:last-child { grid-column: 1 / -1; justify-self: center; width: 70%; }
}
.sj-clippings figcaption {
  margin-top: var(--sj-space-2);
  font-size: var(--sj-secondary);
  line-height: var(--sj-lh-caption);
  color: var(--sj-text-body);
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .sj-clippings__wall li { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
  .sj-clippings__wall li:hover { transform: rotate(0deg) scale(1.04); position: relative; z-index: 1; }
}

/* ==========================================================================
   Blog (24.10.26): the wedding post and its card
   ========================================================================== */

/* the newest post leads the blog page across the full width, its photograph
   beside the title */
@media (min-width: 768px) { .sj-posts__feature { grid-column: 1 / -1; } }
.sj-post-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.sj-post-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .sj-post-card--feature .sj-post-card__link { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  /* the photograph fills the card's height rather than setting it */
  .sj-post-card--feature .sj-post-card__media { aspect-ratio: auto; min-height: 28rem; }
  .sj-post-card--feature .sj-post-card__media img { position: absolute; inset: 0; }
  .sj-post-card--feature .sj-post-card__body { justify-content: center; gap: var(--sj-space-3); padding: var(--sj-space-8); }
  .sj-post-card--feature .sj-post-card__title { font-size: var(--sj-h2); line-height: var(--sj-lh-h2); }
  .sj-post-card--feature .sj-post-card__more { margin-top: var(--sj-space-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .sj-post-card__media img { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
  .sj-post-card__link:hover .sj-post-card__media img { transform: scale(1.03); }
}

/* a post: the opening paragraph leads, and photographs sit in the reading
   column with the site's rounded frame */
.sj-article__body > p:first-child {
  font-size: var(--sj-intro);
  line-height: var(--sj-lh-body);
  color: var(--sj-text-heading);
}
.sj-article__figure { margin: var(--sj-space-6) 0; }

/* ==========================================================================
   24.10.26: no lines under links anywhere on the site. Links keep their
   colour and weight, change colour on hover, and keep the focus outline for
   keyboard users. In the desktop menu the current page is shown in bold
   (it was also underlined with a short sand bar).
   ========================================================================== */
a, a *, a:hover, a:hover *, .sj-hero .sj-btn-on-teal:hover { text-decoration: none !important; }
header .container > nav a > span { display: none; }
/* without underlines, a link inside running text is told apart by weight as
   well as colour */
main p a:not(.sj-btn), main li p a:not(.sj-btn) { font-weight: 600; }
label a { font-weight: 700; }