/* ==========================================================================
   TIDE / TIDE — surf school & ocean club
   A self-contained world. No shared tokens, no shared reset, no imported CSS.

   Palette is fixed by the brief and is not negotiable:
     ocean blue  #2778B8      foam         #F7FBF7
     marine navy #12324A      coral        #FF826E
     sun yellow  #FFD45A      sea glass    #A9DAD1

   Shape language: nothing is a plain rectangle. Sections are cut by wave
   dividers, lesson cards are surfboard silhouettes, data is set in ruled
   tide-chart rows. Motion vocabulary is swell — slow, weighted, easing.
   ========================================================================== */

:root {
  --td-blue: #2778B8;
  --td-foam: #F7FBF7;
  --td-navy: #12324A;
  --td-coral: #FF826E;
  --td-sun: #FFD45A;
  --td-glass: #A9DAD1;

  /* derived, still inside this world's palette */
  --td-deep: #0C2334;
  --td-blue-dk: #1B5A8C;
  --td-glass-dk: #7FC2B7;
  --td-coral-dk: #E4594A;
  --td-line: rgba(18, 50, 74, 0.16);
  --td-line-strong: rgba(18, 50, 74, 0.42);

  /* type: bold rounded display, friendly sans body, handwritten annotations.
     Gabarito is the rounded display this token always asked for; Caveat is the
     marker-hand annotation face. Both are loaded by the page, and the system
     names behind them keep the page readable if the fetch never arrives. */
  --td-display: "Gabarito", ui-rounded, "SF Pro Rounded",
    "Hiragino Maru Gothic ProN", "Segoe UI Variable Display", "Trebuchet MS",
    system-ui, sans-serif;
  --td-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --td-hand: "Caveat", "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;

  --td-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --td-max: 1240px;
  --td-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --td-ease-swell: cubic-bezier(0.16, 0.84, 0.24, 1);

  /* WATER TIMING. A swell is not a UI transition. These periods are long,
     deliberately incommensurate (no two share a common small multiple) so the
     sea never visibly loops, and every one is eased with a water curve. */
  --td-swell-back: 19s;
  --td-swell-mid: 27s;
  --td-swell-crest: 23s;
  --td-swell-foam: 11s;
  --td-swell-spray: 8.5s;
  --td-swell-drift: 41s;
  --td-swell-sheen: 34s;

  /* Live swell intensity 0..1, written by world.js from scroll velocity.
     The whole sea is driven off this one number, so the slider genuinely
     moves water rather than nudging a label. */
  --td-swell: 0;

  /* Hand-painted tooth. Two octaves of fractalNoise at a low base frequency:
     the coarse octave is the brush grain, the fine one the paper fibre. Kept
     as a token so every painted surface in the world shares one tooth. */
  --td-grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='tdGrain' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.62' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23tdGrain)'/%3E%3C/svg%3E");
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--td-foam);
  color: var(--td-navy);
  font-family: var(--td-body);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
  line-height: 1.62;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--td-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--td-coral-dk); text-decoration-color: color-mix(in srgb, var(--td-coral-dk) 45%, transparent); text-underline-offset: 0.22em; }
a:hover { color: var(--td-navy); }

:focus-visible {
  outline: 3px solid var(--td-coral-dk);
  outline-offset: 3px;
  border-radius: 2px;
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.td-skip {
  position: absolute;
  left: 0.75rem; top: -4rem;
  z-index: 90;
  padding: 0.7rem 1.1rem;
  background: var(--td-navy);
  color: var(--td-foam);
  border-radius: 0.55rem;
  font-weight: 700;
  transition: top 0.18s var(--td-ease);
}
.td-skip:focus { top: 0.75rem; }

.td-wrap { width: min(100% - var(--td-gutter) * 2, var(--td-max)); margin-inline: auto; }

.td-eyebrow {
  font-family: var(--td-hand);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  color: var(--td-coral-dk);
  letter-spacing: 0.02em;
}
.td-eyebrow--blue { color: var(--td-blue); }

.td-lede { max-width: 46ch; color: var(--td-blue-dk); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); }

.td-rule {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--td-line-strong) 0 12px, transparent 12px 22px);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Buttons — pill-shaped, weight-forward, with a pressed-in "duck dive" feel
   -------------------------------------------------------------------------- */

.td-btn {
  --btn-bg: var(--td-coral);
  --btn-ink: var(--td-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--td-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--td-coral-dk);
  transition: transform 0.16s var(--td-ease), box-shadow 0.16s var(--td-ease), background 0.16s var(--td-ease);
}
.td-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--td-coral-dk); color: var(--td-ink, var(--td-deep)); }
.td-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--td-coral-dk); }
.td-btn--ghost { --btn-bg: transparent; --btn-ink: var(--td-navy); box-shadow: inset 0 0 0 2px var(--td-navy); }
.td-btn--ghost:hover { --btn-bg: var(--td-navy); --btn-ink: var(--td-foam); }
.td-btn--small { padding: 0.55rem 1.05rem; font-size: 0.85rem; box-shadow: 0 3px 0 0 var(--td-coral-dk); }
.td-btn--sun { --btn-bg: var(--td-sun); box-shadow: 0 4px 0 0 #C9A233; }
.td-btn--sun:hover { box-shadow: 0 6px 0 0 #C9A233; }
.td-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------------
   Masthead — a foam board lashed across the top of the page
   -------------------------------------------------------------------------- */

.td-top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--td-foam) 88%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 2px solid var(--td-line);
}
.td-top__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
}
.td-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--td-navy);
  font-family: var(--td-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.td-brand__mark { width: 2.1rem; height: 2.1rem; flex: none; }
.td-brand em { font-style: normal; color: var(--td-blue); }

.td-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }
.td-nav a {
  position: relative;
  color: var(--td-navy);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.94rem;
  padding-block: 0.2rem;
}
.td-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.1rem;
  height: 3px;
  border-radius: 2px;
  background: var(--td-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--td-ease);
}
.td-nav a:hover::after, .td-nav a[aria-current="true"]::after { transform: scaleX(1); }
.td-nav a[aria-current="true"] { color: var(--td-blue); }

.td-top__cta { flex: none; }

.td-burger {
  display: none;
  margin-left: auto;
  width: 2.9rem; height: 2.9rem;
  border: 2px solid var(--td-navy);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.td-burger span, .td-burger span::before, .td-burger span::after {
  display: block;
  width: 1.1rem; height: 2px;
  background: var(--td-navy);
  border-radius: 2px;
}
.td-burger span::before, .td-burger span::after { content: ""; position: absolute; }
.td-burger span::before { transform: translateY(-6px); }
.td-burger span::after { transform: translateY(6px); }
.td-burger { position: relative; }
.td-burger[aria-expanded="true"] span { background: transparent; }
.td-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.td-burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero — a stylised wave across the whole viewport, built from layered SVG
   -------------------------------------------------------------------------- */

.td-hero {
  position: relative;
  min-height: min(100svh, 780px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--td-sun) 62%, var(--td-foam)) 0%, transparent 58%),
    linear-gradient(180deg, var(--td-glass) 0%, color-mix(in srgb, var(--td-glass) 40%, var(--td-foam)) 46%, var(--td-foam) 100%);
  padding-bottom: clamp(3rem, 9vw, 6.5rem);
}

.td-sun {
  position: absolute;
  top: clamp(1.5rem, 7vw, 4.5rem);
  right: clamp(1rem, 9vw, 7rem);
  width: clamp(5rem, 13vw, 9.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #FFF0B8 0%, var(--td-sun) 58%, #E9B63E 100%);
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--td-sun) 22%, transparent);
}

/* Painted tooth over the whole hero, not over one element.

   The blend mode is the whole game here: this ground is pale foam and glass,
   and `overlay` is base-preserving on a light ground — it leaves near-white
   pixels near-white and only bites in the shadows, which a sky gradient barely
   has. `multiply` actually deposits the noise. The tooth comes from two
   octaves of fractalNoise at a low base frequency so it reads as paper or dry
   brush rather than as digital sensor noise. */
.td-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: var(--td-grain-url);
  background-size: 220px 220px;
}

/* The hero grain is the scene's paper. Sections that carry a full-bleed fill
   get the same tooth so the page reads as one painted object end to end. */
.td-section::before,
.td-foot::before,
.td-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: multiply;
  background-image: var(--td-grain-url);
  background-size: 200px 200px;
}
.td-section > *, .td-foot > * { position: relative; z-index: 1; }

.td-hero__in { position: relative; z-index: 3; }

.td-hero h1 {
  font-size: clamp(2.9rem, 1.4rem + 7.4vw, 7.4rem);
  max-width: 15ch;
  margin-block: 0.35em 0.4em;
  color: var(--td-navy);
}
.td-hero h1 em { font-style: normal; color: var(--td-blue); display: block; }
.td-hero__sub { max-width: 42ch; color: var(--td-navy); font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.35rem); }
.td-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.8rem; }

.td-note {
  font-family: var(--td-hand);
  color: var(--td-coral-dk);
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.4rem);
  line-height: 1.25;
}
.td-note--hero {
  position: relative;
  display: inline-block;
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  padding-bottom: 0.9rem;
  transform: rotate(-2.5deg);
  transform-origin: left center;
}
.td-note--hero::after {
  content: "";
  position: absolute;
  left: 0.2rem; bottom: 0.1rem;
  width: min(15rem, 60%);
  height: 1.1rem;
  border-bottom: 3px solid var(--td-coral);
  border-radius: 0 0 70% 30%;
  transform: rotate(-1.5deg);
}

/* the swell meter: makes the signature interaction legible */
.td-swell {
  position: relative;
  z-index: 5;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.7rem 1.2rem 0.8rem;
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--td-foam) 72%, transparent);
  border: 2px solid var(--td-navy);
}
.td-swell__label {
  font-family: var(--td-hand);
  font-size: 1rem;
  color: var(--td-navy);
  white-space: nowrap;
}
.td-swell__val {
  font-family: var(--td-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--td-blue);
  justify-self: end;
}
.td-swell__bar {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--td-navy) 14%, transparent);
  overflow: hidden;
}
.td-swell__bar i {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--td-glass) 0%, var(--td-blue) 58%, var(--td-coral) 100%);
  transform-origin: left;
  transition: width 0.09s linear;
}

/* --------------------------------------------------------------------------
   The sea itself.

   Four bands, each on its own long, eased, mutually incommensurate period, so
   the water never repeats a cycle and never reads as a loop. world.js redraws
   each band's `d` from scroll velocity; CSS supplies the slow ambient life on
   top (vertical ride, lateral drift, foam run, spray lift, moving sheen).
   --td-swell is the live 0..1 intensity and is applied here as real geometry,
   so the meter moves water rather than only moving a readout.
   -------------------------------------------------------------------------- */

.td-sea {
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(16rem, 46vh, 30rem);
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  /* the whole body of water slides very slowly sideways, as swell does */
  animation: td-swell-drift var(--td-swell-drift) linear infinite;
}
.td-sea svg { width: 100%; height: 100%; }
.td-sea svg > g { transform-box: view-box; transform-origin: 0 420px; }

/* Each band rides up on its own period and rises further as the swell builds.
   --td-swell multiplies straight into the translate, so fast scrolling
   visibly lifts the water in screen pixels as well as in path geometry. */
.td-sea__band--back {
  animation: td-swell-back var(--td-swell-back) var(--td-ease-swell) infinite alternate;
  transform: translateY(calc(var(--td-swell) * -16px));
}
.td-sea__band--mid {
  animation: td-swell-mid var(--td-swell-mid) var(--td-ease-swell) infinite alternate;
  transform: translateY(calc(var(--td-swell) * -34px));
}
.td-sea__band--crest {
  animation: td-swell-crest var(--td-swell-crest) var(--td-ease-swell) infinite alternate;
  transform: translateY(calc(var(--td-swell) * -62px));
}

.td-sea__back { fill: var(--td-glass); opacity: 0.9; }
.td-sea__mid { fill: var(--td-blue); }
.td-sea__crest { fill: var(--td-navy); }
.td-sea__backfoam {
  fill: none;
  stroke: var(--td-foam);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: calc(0.34 + var(--td-swell) * 0.4);
}

/* the breaking lip. dash-offset runs the foam along the crest, and the stroke
   thickens with the swell so a big wave is visibly a bigger wave. */
.td-sea__foam {
  fill: none;
  stroke: var(--td-foam);
  stroke-linecap: round;
  stroke-dasharray: 74 46;
  stroke-width: calc(6 + var(--td-swell) * 15);
  opacity: calc(0.66 + var(--td-swell) * 0.34);
  animation: td-foam-run var(--td-swell-foam) linear infinite;
}

/* spray thrown off the lip: three families on different periods so the
   droplets never march in step */
.td-spray__d {
  fill: var(--td-foam);
  /* Blurred, not a hard ellipse: unblurred foam ellipses over navy read as
     grey lozenges sitting on the water rather than as spray off a lip. */
  filter: url(#td-spray-soft);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: calc(0.22 + var(--td-swell) * 0.4);
}
.td-spray__d--a { animation: td-spray-a var(--td-swell-spray) ease-in-out infinite alternate; }
.td-spray__d--b { animation: td-spray-b 13.5s ease-in-out infinite alternate; }
.td-spray__d--c { animation: td-spray-c 17s ease-in-out infinite alternate; }

/* Low light lying on the surface. `soft-light` and `overlay` are both
   base-preserving on this ground — pale foam bands and sun, almost no shadow
   to bite into — and this layer measured 0.19 sd of deposited texture while
   animating on an infinite cycle, which is nothing. `normal` at a low opacity
   actually lays the light down, and it lifts the foam rather than crushing it,
   which is what light on water should do to foam. */
.td-swell-sheen {
  position: absolute;
  /* above .td-sea (z-index 2) so the light actually lands on the water; the
     hero copy at z-index 3 comes later in the DOM and still paints on top */
  z-index: 2;
  inset: 8% -30% 6% -30%;
  background: linear-gradient(90deg, transparent 0%,
    color-mix(in srgb, var(--td-foam) 15%, transparent) 38%,
    color-mix(in srgb, var(--td-foam) 24%, transparent) 50%,
    color-mix(in srgb, var(--td-foam) 15%, transparent) 62%, transparent 100%);
  mix-blend-mode: normal;
  pointer-events: none;
  animation: td-sheen-run var(--td-swell-sheen) var(--td-ease-swell) infinite alternate;
}

/* --------------------------------------------------------------------------
   Wave dividers between sections — asymmetric, cut with foam on one lip
   -------------------------------------------------------------------------- */

.td-cut {
  display: block;
  width: 100%;
  height: clamp(2.6rem, 6vw, 5.5rem);
  margin-bottom: -1px;
}
.td-cut--down { transform: rotate(180deg); }
.td-cut--blue .td-cut__fill { fill: var(--td-blue); }
.td-cut--navy .td-cut__fill { fill: var(--td-navy); }
.td-cut--glass .td-cut__fill { fill: var(--td-glass); }
.td-cut--coral .td-cut__fill { fill: var(--td-coral); }
.td-cut--foam .td-cut__fill { fill: var(--td-foam); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.td-section { padding-block: clamp(3.2rem, 8vw, 6.5rem); position: relative; }
.td-section--tint { background: color-mix(in srgb, var(--td-glass) 20%, var(--td-foam)); }
.td-section--navy { background: var(--td-navy); color: var(--td-foam); }
.td-section--navy .td-lede { color: var(--td-glass); }
.td-section--navy .td-eyebrow { color: var(--td-sun); }
.td-section--navy a { color: var(--td-sun); }

.td-head { display: grid; gap: 0.9rem; margin-bottom: clamp(2rem, 5vw, 3.4rem); max-width: 62ch; }
.td-head h2 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); }
.td-section--navy .td-head h2 { color: var(--td-foam); }

/* --------------------------------------------------------------------------
   Lessons — cards cut into surfboard silhouettes that bob on the swell
   -------------------------------------------------------------------------- */

.td-boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

.td-board {
  --bob: 0s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.6rem, 3vw, 2.2rem);
  background: var(--td-foam);
  border: 2px solid var(--td-navy);
  /* board silhouette: pinched nose, pulled-in tail */
  border-radius: 48% 48% 40% 40% / 5.5rem 5.5rem 3rem 3rem;
  box-shadow: 0 6px 0 0 color-mix(in srgb, var(--td-navy) 16%, transparent);
  transform-origin: 50% 120%;
  animation: td-bob 6.5s var(--td-ease-swell) infinite;
  animation-delay: var(--bob);
  transition: box-shadow 0.22s var(--td-ease), border-color 0.22s var(--td-ease);
}
.td-board:hover, .td-board:focus-within {
  box-shadow: 0 10px 0 0 color-mix(in srgb, var(--td-coral) 40%, transparent);
  border-color: var(--td-blue);
}
.td-board:nth-child(2n) { border-radius: 46% 46% 30% 30% / 4.4rem 4.4rem 3.6rem 3.6rem; }
.td-board:nth-child(3n) { border-radius: 50% 50% 44% 44% / 6.2rem 6.2rem 2.6rem 2.6rem; }

@keyframes td-bob {
  0%, 100% { transform: translateY(0) rotate(-0.7deg); }
  50% { transform: translateY(-13px) rotate(0.8deg); }
}

.td-board__tag {
  align-self: center;
  font-family: var(--td-hand);
  font-size: 1.02rem;
  color: var(--td-coral-dk);
}
.td-board h3 {
  text-align: center;
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem);
  color: var(--td-navy);
}
.td-board p { text-align: center; color: var(--td-blue-dk); font-size: 0.98rem; }
.td-board__spec {
  margin-top: 0.4rem;
  display: grid;
  gap: 0.28rem;
  font-size: 0.86rem;
  color: var(--td-navy);
  border-top: 2px dotted var(--td-line-strong);
  padding-top: 0.7rem;
}
.td-board__spec div { display: flex; justify-content: space-between; gap: 0.6rem; }
.td-board__spec b { font-weight: 750; }
.td-board__price {
  margin-top: 0.5rem;
  align-self: center;
  padding: 0.35rem 1.05rem;
  border-radius: 999px;
  background: var(--td-sun);
  color: var(--td-deep);
  font-family: var(--td-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Wetsuit rack — ruled spec rows, like a hire sheet
   -------------------------------------------------------------------------- */

.td-rack {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 760px) { .td-rack { grid-template-columns: 1fr; } }

.td-suit { width: 100%; height: auto; filter: drop-shadow(0 10px 0 color-mix(in srgb, var(--td-navy) 12%, transparent)); }
.td-suit__body { fill: var(--td-navy); }
.td-suit__panel { fill: var(--td-blue); }
.td-suit__seam { fill: none; stroke: var(--td-coral); stroke-width: 5; stroke-linecap: round; }
.td-suit__hook { fill: none; stroke: var(--td-line-strong); stroke-width: 3; }

.td-rows { display: grid; border-top: 3px solid var(--td-navy); }
.td-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem 1.2rem;
  align-items: baseline;
  padding: 0.85rem 0.2rem;
  border-bottom: 2px dotted var(--td-line-strong);
}
.td-rows dt, .td-rows .k { font-weight: 750; color: var(--td-navy); }
.td-rows .v { font-variant-numeric: tabular-nums; color: var(--td-blue); font-weight: 700; }
.td-rows .note { grid-column: 1 / -1; color: var(--td-blue-dk); font-size: 0.9rem; }

.td-sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.td-sizes span {
  font-family: var(--td-display);
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.35rem 0.9rem;
  border-radius: 2rem;
  border: 2px solid var(--td-navy);
  color: var(--td-navy);
}
.td-sizes span[data-out="true"] { opacity: 0.38; text-decoration: line-through; border-style: dashed; }

/* --------------------------------------------------------------------------
   Tide chart — a wide horizontal strip you drag sideways
   -------------------------------------------------------------------------- */

.td-tide { position: relative; }
.td-tide__hint { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; color: var(--td-glass); font-size: 0.94rem; }
.td-tide__hint::before { content: "\2194"; font-size: 1.3rem; color: var(--td-sun); }

.td-tide__rail {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--td-glass-dk) transparent;
  border: 2px solid color-mix(in srgb, var(--td-foam) 45%, transparent);
  border-radius: 1.1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--td-navy) 88%, black) 0%, var(--td-deep) 100%);
  padding: 1rem 0 1.2rem;
  cursor: grab;
}
.td-tide__rail:active { cursor: grabbing; }
.td-tide__rail svg { flex: none; }

.td-tide__foot { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 0.9rem; font-size: 0.86rem; color: var(--td-glass); }
.td-tide__foot b { color: var(--td-sun); font-weight: 800; }
.td-tide__foot span { display: inline-flex; align-items: center; gap: 0.4rem; }
.td-tide__foot i { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
.td-key-high i { background: var(--td-coral); }
.td-key-low i { background: var(--td-glass); }

/* --------------------------------------------------------------------------
   Forecast — drag the marker, the beach illustration answers
   -------------------------------------------------------------------------- */

.td-forecast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 820px) { .td-forecast { grid-template-columns: 1fr; } }

.td-beach { position: relative; border-radius: 1.4rem; overflow: hidden; border: 3px solid var(--td-navy); background: var(--td-glass); }
.td-beach svg { width: 100%; height: auto; }
.td-beach__sky { fill: var(--td-glass); }
.td-beach__sea { fill: var(--td-blue); }
.td-beach__seaDeep { fill: var(--td-navy); }
.td-beach__sand { fill: var(--td-sun); }
.td-beach__cloud { fill: var(--td-foam); opacity: 0.92; transition: opacity 0.35s var(--td-ease); }
.td-beach__sun { fill: var(--td-sun); transition: transform 0.45s var(--td-ease-swell), opacity 0.35s var(--td-ease); transform-origin: 78% 18%; }
.td-beach__flag { fill: var(--td-coral); }
.td-beach__board { fill: var(--td-foam); stroke: var(--td-navy); stroke-width: 3; }
.td-beach__wave { fill: none; stroke: var(--td-foam); stroke-width: 7; stroke-linecap: round; transition: opacity 0.3s var(--td-ease); }
.td-beach[data-cloud="heavy"] .td-beach__cloud { opacity: 1; }

.td-track { margin-top: 1.6rem; }
.td-track__line {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--td-navy) 14%, transparent);
  border: 2px solid var(--td-navy);
}
.td-track__fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: inherit; background: var(--td-blue); }
.td-track__mark {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 2.6rem; height: 2.6rem;
  margin: -1.3rem 0 0 -1.3rem;
  border-radius: 50%;
  border: 3px solid var(--td-navy);
  background: var(--td-coral);
  cursor: grab;
  touch-action: none;
  box-shadow: 0 3px 0 0 var(--td-navy);
}
.td-track__mark:active { cursor: grabbing; }
.td-track__mark::after {
  content: "";
  position: absolute; inset: 34%;
  border-radius: 50%;
  background: var(--td-deep);
}
.td-track__ticks { display: flex; justify-content: space-between; margin-top: 0.7rem; font-size: 0.82rem; font-weight: 700; color: var(--td-blue-dk); }
.td-track__ticks span { flex: 1; text-align: center; }

.td-readout { display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.td-readout__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--td-line);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--td-foam) 70%, transparent);
}
.td-readout__k { font-family: var(--td-hand); font-size: 1.02rem; color: var(--td-navy); }
.td-readout__bar { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--td-navy) 13%, transparent); overflow: hidden; }
.td-readout__bar i { display: block; height: 100%; border-radius: inherit; background: var(--td-blue); transition: width 0.32s var(--td-ease-swell); }
.td-readout__v { font-family: var(--td-display); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--td-blue); min-width: 4.5ch; text-align: right; }
.td-verdict { margin-top: 1.2rem; font-family: var(--td-hand); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); color: var(--td-coral-dk); }

/* --------------------------------------------------------------------------
   Club — event rows, no cards
   -------------------------------------------------------------------------- */

.td-events { display: grid; border-top: 3px solid color-mix(in srgb, var(--td-foam) 55%, transparent); }
.td-event {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr) auto;
  gap: 0.6rem 1.4rem;
  align-items: center;
  padding: 1.1rem 0.2rem;
  border-bottom: 2px dotted color-mix(in srgb, var(--td-foam) 32%, transparent);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.24s var(--td-ease), background 0.24s var(--td-ease);
}
.td-event:hover, .td-event:focus-visible { padding-left: 0.9rem; background: color-mix(in srgb, var(--td-glass) 16%, transparent); }
.td-event__when {
  font-family: var(--td-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--td-sun);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.td-event__what { font-family: var(--td-display); font-weight: 750; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem); }
.td-event__meta { grid-column: 2 / -1; color: var(--td-glass); font-size: 0.92rem; }
.td-event__free {
  font-family: var(--td-hand);
  font-size: 1rem;
  color: var(--td-foam);
  border: 2px solid color-mix(in srgb, var(--td-foam) 45%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.8rem;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .td-event { grid-template-columns: 5rem minmax(0, 1fr); }
  .td-event__free { grid-column: 2; justify-self: start; }
  .td-event__meta { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Wax the board — the unique detail
   -------------------------------------------------------------------------- */

.td-wax { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.2rem); align-items: center; }
@media (max-width: 820px) { .td-wax { grid-template-columns: 1fr; } }

.td-wax__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.td-wax__board {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 7 / 16;
  border-radius: 50% 50% 44% 44% / 8% 8% 6% 6%;
  background: linear-gradient(178deg, var(--td-foam) 0%, #EEF6F6 100%);
  border: 3px solid var(--td-navy);
  box-shadow: 0 10px 0 0 color-mix(in srgb, var(--td-navy) 14%, transparent);
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
}
.td-wax__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.td-wax__stringer {
  position: absolute; inset-block: 6% 8%; left: 50%;
  width: 4px; margin-left: -2px;
  background: color-mix(in srgb, var(--td-navy) 28%, transparent);
  border-radius: 4px;
}
.td-wax__plug {
  position: absolute; bottom: 6%; left: 50%;
  width: 1rem; height: 1rem; margin-left: -0.5rem;
  border-radius: 50%;
  background: var(--td-coral);
  border: 2px solid var(--td-navy);
}
.td-wax__hint {
  position: absolute;
  bottom: 0.4rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--td-hand);
  font-size: 1.02rem;
  color: var(--td-deep);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s var(--td-ease);
}
.td-wax__stage[data-waxed="true"] .td-wax__hint { opacity: 0; }
.td-wax__meter { width: min(100%, 20rem); margin-top: 1rem; display: grid; gap: 0.4rem; }
.td-wax__bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--td-navy) 13%, transparent); overflow: hidden; }
.td-wax__bar i { display: block; height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--td-glass) 0%, var(--td-blue) 70%, var(--td-sun) 100%); }
.td-wax__pct { font-family: var(--td-display); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--td-blue); }

.td-wax__panel {
  position: relative;
  padding: clamp(1.3rem, 3vw, 2rem);
  border-radius: 1.2rem;
  border: 3px dashed var(--td-line-strong);
  background: color-mix(in srgb, var(--td-foam) 80%, transparent);
}
.td-wax__lesson { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--td-ease), transform 0.5s var(--td-ease-swell); }
.td-wax__stage[data-waxed="true"] + .td-wax__panel .td-wax__lesson,
.td-wax__panel[data-open="true"] .td-wax__lesson { opacity: 1; transform: none; }
.td-wax__panel h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); color: var(--td-navy); margin-bottom: 0.5rem; }
.td-wax__lesson dl { display: grid; gap: 0.55rem; margin: 1.1rem 0 0; }
.td-wax__lesson dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.8rem; font-size: 0.96rem; }
.td-wax__lesson dt { font-weight: 750; color: var(--td-navy); }
.td-wax__lesson dd { margin: 0; color: var(--td-blue-dk); }
.td-wax__pick { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.4rem; }
.td-wax__pick button {
  font-family: var(--td-display); font-weight: 800; font-size: 0.9rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--td-navy);
  background: transparent;
  color: var(--td-navy);
  cursor: pointer;
  transition: background 0.2s var(--td-ease), color 0.2s var(--td-ease);
}
.td-wax__pick button[aria-pressed="true"] { background: var(--td-navy); color: var(--td-sun); }
.td-wax__pick button:hover { background: var(--td-glass); }
.td-wax__pick button[aria-pressed="true"]:hover { background: var(--td-navy); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.td-foot { background: var(--td-deep); color: var(--td-glass); padding-block: clamp(2.6rem, 6vw, 4.5rem) 2rem; }
.td-foot__word {
  font-family: var(--td-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 1rem + 14vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--td-blue);
  margin-bottom: 1.6rem;
  overflow-wrap: anywhere;
}
.td-foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.6rem; padding-top: 1.6rem; border-top: 2px solid color-mix(in srgb, var(--td-glass) 32%, transparent); }
.td-foot h3 { font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--td-sun); margin-bottom: 0.5rem; }
.td-foot ul { display: grid; gap: 0.3rem; font-size: 0.95rem; }
.td-foot a { color: var(--td-glass); text-decoration: none; }
.td-foot a:hover { color: var(--td-sun); text-decoration: underline; }
.td-foot__base { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.82rem; color: color-mix(in srgb, var(--td-glass) 70%, transparent); }

/* --------------------------------------------------------------------------
   Wet cursor trail
   -------------------------------------------------------------------------- */

.td-trail {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--td-ease);
}
.td-trail[data-on="true"] { opacity: 1; }
.td-trail canvas { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .td-burger { display: grid; }
  .td-top__cta { display: none; }
  .td-nav {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 2px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--td-gutter) 1.1rem;
    background: var(--td-foam);
    border-bottom: 2px solid var(--td-line);
    box-shadow: 0 14px 24px -18px var(--td-navy);
  }
  .td-nav[hidden] { display: none; }
  .td-nav a { padding: 0.8rem 0; border-bottom: 2px dotted var(--td-line); }
  .td-nav a::after { display: none; }
  .td-nav .td-btn { margin-top: 1rem; justify-content: center; }
  .td-note--hero { display: block; }
}

@media (max-width: 420px) {
  .td-swell { width: 100%; }
  .td-wax__lesson dl > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --------------------------------------------------------------------------
   Water timing.

   These are the only long clocks in the stylesheet and they are deliberately
   incommensurate: 41, 34, 27, 23, 19, 17, 13.5, 11 and 8.5 seconds share no
   common small multiple, so back swell, mid swell, crest, lateral drift,
   sheen and all three spray families fall out of phase against each other and
   the sea does not visibly loop. Every one is eased with a water curve, never
   a UI curve — a wave does not snap.
   -------------------------------------------------------------------------- */

/* the whole body of water working slowly sideways */
@keyframes td-swell-drift {
  0%   { transform: translate3d(-1.1%, 0, 0) scaleX(1.015); }
  50%  { transform: translate3d(1.1%, 0, 0) scaleX(1.015); }
  100% { transform: translate3d(-1.1%, 0, 0) scaleX(1.015); }
}

/* far swell: the smallest ride, the longest wavelength */
@keyframes td-swell-back {
  0%   { transform: translate3d(0, calc(var(--td-swell) * -16px), 0) scaleY(1); }
  38%  { transform: translate3d(6px, calc(var(--td-swell) * -16px - 9px), 0) scaleY(1.035); }
  71%  { transform: translate3d(-4px, calc(var(--td-swell) * -16px + 5px), 0) scaleY(0.988); }
  100% { transform: translate3d(0, calc(var(--td-swell) * -16px), 0) scaleY(1.018); }
}

/* middle water: rides further, pulls back harder between crests */
@keyframes td-swell-mid {
  0%   { transform: translate3d(0, calc(var(--td-swell) * -34px), 0) scaleY(1); }
  44%  { transform: translate3d(-9px, calc(var(--td-swell) * -34px - 17px), 0) scaleY(1.055); }
  78%  { transform: translate3d(5px, calc(var(--td-swell) * -34px + 9px), 0) scaleY(0.968); }
  100% { transform: translate3d(0, calc(var(--td-swell) * -34px - 3px), 0) scaleY(1.028); }
}

/* the crest: the biggest ride, and the one that arrives hardest */
@keyframes td-swell-crest {
  0%   { transform: translate3d(0, calc(var(--td-swell) * -62px), 0) scaleY(1); }
  41%  { transform: translate3d(-13px, calc(var(--td-swell) * -62px - 30px), 0) scaleY(1.085); }
  73%  { transform: translate3d(7px, calc(var(--td-swell) * -62px + 15px), 0) scaleY(0.938); }
  100% { transform: translate3d(0, calc(var(--td-swell) * -62px - 6px), 0) scaleY(1.045); }
}

/* foam running along the lip — a linear clock against eased ones */
@keyframes td-foam-run {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -240; }
}

/* three spray families, three phases, none of them marching together */
@keyframes td-spray-a {
  0%   { transform: translate3d(-14px, 5px, 0) scale(0.94, 0.86); }
  55%  { transform: translate3d(11px, -12px, 0) scale(1.1, 1.06); }
  100% { transform: translate3d(24px, 3px, 0) scale(0.98, 0.92); }
}
@keyframes td-spray-b {
  0%   { transform: translate3d(9px, 6px, 0) scale(0.9, 0.82); }
  62%  { transform: translate3d(-13px, -15px, 0) scale(1.16, 1.1); }
  100% { transform: translate3d(-22px, 2px, 0) scale(1.02, 0.94); }
}
@keyframes td-spray-c {
  0%   { transform: translate3d(-6px, 7px, 0) scale(0.96, 0.88); }
  48%  { transform: translate3d(16px, -9px, 0) scale(1.06, 1.02); }
  100% { transform: translate3d(-19px, 4px, 0) scale(0.92, 0.9); }
}

/* low sun sliding across the surface */
@keyframes td-sheen-run {
  0%   { transform: translate3d(-14%, 0, 0) scaleX(1); opacity: 0.35; }
  100% { transform: translate3d(14%, 6%, 0) scaleX(1.1); opacity: 0.75; }
}

/* --------------------------------------------------------------------------
   Reduced motion — the sea goes STILL, it does not go away.

   A frozen hero that drops the water is a broken hero: the sea is the subject,
   not decoration. So every moving part of the sea is cancelled to `animation:
   none` and pinned to a chosen still frame by hand — the crest caught at the
   top of its ride, foam already drawn along the lip, spray sitting on the
   wave instead of blown off it. What stops is the motion, not the picture.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .td-board { animation: none; transform: none; }
  .td-trail { display: none; }
  .td-wax__panel { border-style: solid; }

  /* --- the sea, held still and still fully drawn --- */
  .td-sea,
  .td-sea__band--back,
  .td-sea__band--mid,
  .td-sea__band--crest,
  .td-sea__foam,
  .td-spray__d,
  .td-swell-sheen {
    animation: none !important;
  }

  /* the crest is caught standing up, mid and back swell sit behind it */
  .td-sea__band--back {
    transform: translate3d(4px, calc(var(--td-swell) * -16px - 5px), 0) scaleY(1.022) !important;
  }
  .td-sea__band--mid {
    transform: translate3d(-5px, calc(var(--td-swell) * -34px - 9px), 0) scaleY(1.034) !important;
  }
  .td-sea__band--crest {
    transform: translate3d(-7px, calc(var(--td-swell) * -62px - 17px), 0) scaleY(1.05) !important;
  }

  /* foam is drawn solid along the lip rather than running along it */
  .td-sea__foam { stroke-dasharray: none; }
  .td-sea__backfoam { opacity: 0.55; }

  /* spray rests on the surface instead of flying off it */
  .td-spray__d { opacity: 0.62; }
  .td-spray__d--a { transform: translate3d(8px, -3px, 0) scale(1.04, 1) !important; }
  .td-spray__d--b { transform: translate3d(-6px, 1px, 0) scale(1.02, 0.96) !important; }
  .td-spray__d--c { transform: translate3d(3px, -1px, 0) scale(1.06, 1.02) !important; }

  /* light still lies on the water; it just no longer travels */
  .td-swell-sheen { transform: translate3d(0, 3%, 0) scaleX(1.05) !important; opacity: 0.5; }
}