/* Landing page sections (from the approved reference) */
/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--abyss);isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:-2}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;transform:scale(1.04);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2.5%,-1.5%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(11,34,51,.86) 0%,rgba(11,34,51,.55) 46%,rgba(11,34,51,.05) 78%),
  linear-gradient(0deg,rgba(11,34,51,.7) 0%,rgba(11,34,51,0) 45%)}
.hero .wrap{padding-block:clamp(72px,11vw,150px) clamp(120px,14vw,190px)}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.hero__text{display:flex;flex-direction:column;gap:22px;min-width:0}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero .label{color:var(--spray)}
.hero h1{font:800 clamp(28px,4.2vw,64px)/1.08 var(--f-head);text-transform:uppercase;letter-spacing:.005em;max-width:26ch}
.hero h1 .w{display:inline-block}
.hero p.lede{max-width:34ch;font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--bone);margin:0}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.js .hero h1 .w{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.js .hero .label,.js .hero .lede,.js .hero .ctas{animation:fade .8s .6s ease-out both}
@keyframes rise{from{transform:translateY(.45em);opacity:.0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:700px){.hero::before{background:linear-gradient(0deg,rgba(11,34,51,.88) 0%,rgba(11,34,51,.62) 60%,rgba(11,34,51,.45) 100%)}.hero-photo img{object-position:70% 50%}}

/* moving waterline */
.waterline{position:absolute;left:0;right:0;bottom:-1px;height:90px;pointer-events:none}
.waterline svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.waterline .back{fill:var(--crest);opacity:.9;animation:swell 14s linear infinite}
.waterline .front{fill:var(--bone);animation:swell 9s linear infinite reverse}
@keyframes swell{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Story: who we are ---------- */
.story{padding-block:40px 88px}
.story .grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.story .copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.story h2{font:800 clamp(40px,5.2vw,72px)/.92 var(--f-head);text-transform:uppercase;color:var(--abyss)}
.story p.blurb{margin:0;font-size:clamp(18px,1.5vw,20px);line-height:1.62;max-width:60ch;color:var(--ink)}
.story p.blurb b{font-weight:600;color:var(--abyss)}
.route{background:var(--paper);border:1px solid var(--rope);border-radius:4px;padding:28px 28px 20px}
.route h3{font:600 14px/20px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--drift);margin-bottom:18px}
.route .track{position:relative}
.route ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}
.route .track::before{content:"";position:absolute;left:11px;top:12px;bottom:36px;border-left:2px dashed var(--crest)}
.route li{position:relative;padding-left:44px;display:flex;flex-direction:column;gap:2px}
.route li::before{content:"";position:absolute;left:4px;top:5px;width:12px;height:12px;border-radius:999px;background:var(--paper);border:3px solid var(--crest)}
.route li:first-child::before{background:var(--abyss);border-color:var(--abyss)}
.route li:last-child::before{background:var(--crest)}
.route b{font:600 clamp(22px,2.1vw,26px)/1.1 var(--f-head);color:var(--abyss)}
.route small{font-size:16px;line-height:1.45;color:var(--drift)}
.route .boat{position:absolute;left:3px;top:4px;width:18px;height:18px;border-radius:999px;background:var(--flare);box-shadow:0 0 0 4px rgba(184,72,31,.18);animation:sail 9s ease-in-out infinite;z-index:1}
@keyframes sail{0%{top:4px}45%{top:calc(100% - 22px)}55%{top:calc(100% - 22px)}100%{top:4px}}
.route .foot-note{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--rope);font-size:15px;color:var(--drift)}
@media (max-width:900px){.story .grid{grid-template-columns:1fr}}

/* ---------- Numbers ---------- */
.numbers{padding-block:8px 72px}
.numbers .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stat{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:1px solid var(--rope)}
.stat b{font:800 clamp(52px,6vw,80px)/.9 var(--f-head);color:var(--abyss);font-variant-numeric:tabular-nums}
.stat b sup{font-size:.45em;vertical-align:top;position:relative;top:.2em;color:var(--crest)}
.stat span{font-size:16px;line-height:1.4;color:var(--drift);max-width:22ch}
@media (max-width:760px){.numbers .grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}

/* ---------- Out there: photo drift ---------- */
.outthere{padding-block:8px 80px}
.outthere .intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.outthere .intro p{margin:0;max-width:44ch;color:var(--drift)}
.reel{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel-track{display:flex;gap:12px;width:max-content;animation:reel 70s linear infinite}
.reel:hover .reel-track,.reel:focus-within .reel-track{animation-play-state:paused}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reel figure{margin:0;position:relative;height:clamp(260px,32vw,400px);border-radius:2px;overflow:hidden;flex:none}
.reel figure img{height:100%;width:auto;transition:transform .6s ease}
.reel figure:hover img{transform:scale(1.04)}
.reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;font:600 14px/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(11,34,51,.8),rgba(11,34,51,0))}

/* ---------- Next on the water ---------- */
.next{background:var(--abyss);color:var(--bone);padding-block:80px}
.next .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.next .photo{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:3/2;max-width:100%}
.next .photo img{width:100%;height:100%;object-fit:cover}
/* A poster (portrait flyer, usually) carries real info to its edges, unlike the photo
   fallback - never crop it. Letterbox it whole inside the same frame instead. */
.next .photo--poster{background:var(--ink);border:1px solid rgba(255,255,255,.12)}
.next .photo--poster img{object-fit:contain;padding:12px}
.next .label{color:var(--spray)}
.next h2{color:#fff;font-size:clamp(40px,5vw,64px);line-height:.95;text-transform:uppercase;margin-top:8px}
.next .where{margin:12px 0 0;color:var(--spray);font-size:18px}
.clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:28px 0 8px;max-width:440px}
.clock div{background:#13324A;border-radius:2px;padding:14px 8px 10px;text-align:center}
.clock b{display:block;font:700 clamp(36px,4vw,48px)/1 var(--f-head);color:#fff;font-variant-numeric:tabular-nums}
.clock span{font:600 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--spray)}
.sample{font-size:14px;color:var(--spray);margin:0 0 24px}
.next .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.next .ctas a.link{color:var(--spray);font-weight:600;font-size:16px}
.also{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.also a{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;padding:14px 18px;border:1px solid #234560;border-radius:4px;text-decoration:none;color:var(--bone);transition:border-color .2s,background .2s}
.also a:hover{border-color:var(--spray);background:#102C42;color:var(--bone)}
.also .d{width:64px;height:64px;background:var(--crest);border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font:700 24px/1 var(--f-head)}
.also .d small{font:600 11px/1 var(--f-body);letter-spacing:.1em;margin-top:4px;color:#fff}
.also h3{font-size:24px;line-height:1.1;color:#fff}
.also p{margin:2px 0 0;font-size:15px;color:var(--spray)}
.also .arrow{color:var(--spray)}
@media (max-width:860px){.next .grid{grid-template-columns:1fr}.also{grid-template-columns:1fr}}

/* ---------- Catches ---------- */
.catches{padding-block:88px}
.catches .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:end}
.catches .copy{grid-column:1/6;align-self:center;display:flex;flex-direction:column;gap:18px;padding-right:12px;min-width:0}
.chasing{font:700 clamp(40px,5.4vw,72px)/.95 var(--f-head);text-transform:uppercase;color:var(--abyss)}
.chasing .swap{display:block;color:var(--crest);min-height:1em;position:relative}
.chasing .swap span{display:inline-block;transition:opacity .35s,transform .35s}
.chasing .swap span.out{opacity:0;transform:translateY(-.25em)}
.catches .copy p{margin:0;max-width:40ch}
.catches .ph1{grid-column:6/9} .catches .ph2{grid-column:9/13;margin-bottom:56px}
.catches .ph1.nm-full{grid-column:6/13;max-width:360px}
.catches .ph2.nm-hide{display:none}
.catches figure{margin:0;display:flex;flex-direction:column;gap:8px}
.catches figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;transition:opacity .35s}
.catches figure.out img{opacity:0}
.catches figcaption{font-size:15px;color:var(--drift);transition:opacity .35s}
.catches figure.out figcaption{opacity:0}
.species{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.species li{padding:6px 10px;background:var(--sand);border-radius:2px;font:600 13px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--drift);transition:background .3s,color .3s}
.species li.on{background:var(--crest-deep);color:#fff}
@media (max-width:900px){
  .catches .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catches .copy{grid-column:1/-1;padding-right:0}
  .catches .ph1{grid-column:1/2}.catches .ph2{grid-column:2/3;margin-bottom:0}
  .catches .ph1.nm-full{grid-column:1/3;max-width:none}
}

/* ---------- Hero sponsors: right half of the hero, bordered tier groups (as before),
   but logos WRAP within each group instead of forcing one per row. Half the hero's width
   gives each tier box enough room to fit several logos per line, which is what actually
   keeps the height under control as sponsors are added — not the row direction. */
.hero-sponsors{display:flex;flex-direction:column;gap:12px;min-width:0}
/* On wide screens the 1200px content column leaves the full-bleed hero photo with a lot
   of bare space past its right edge — push the sponsor boxes into that, closer to the
   real edge of the browser, without moving the headline column. Only above the 2-column
   breakpoint, so it doesn't push content off-screen once the hero stacks to one column. */
@media (min-width:961px){.hero-sponsors{transform:translateX(clamp(0px,6vw,120px))}}
.hero-sponsors__label{display:block;font:600 12px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--spray)}
.hero-sponsors__group{border:2px solid;border-radius:4px;padding:14px 14px 12px}
.hero-sponsors__group-label{display:block;font:800 15px/1.4 var(--f-body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.hero-sponsors__group--gold{border-color:#B8860B}
.hero-sponsors__group--gold > .hero-sponsors__group-label{color:#E0B33E}
.hero-sponsors__group--silver{border-color:#9099A2}
.hero-sponsors__group--silver > .hero-sponsors__group-label{color:#C2C9D0}
.hero-sponsors__group--bronze{border-color:#A05A2C}
.hero-sponsors__group--bronze > .hero-sponsors__group-label{color:#D08A5C}
.hero-sponsors__group--supporter{border-color:rgba(255,255,255,.25)}
.hero-sponsors__group--supporter > .hero-sponsors__group-label{color:var(--spray)}
.hero-sponsors__tiles{display:flex;flex-wrap:wrap;gap:10px}
.hero-sponsors__tile{display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:2px;padding:6px}
.hero-sponsors__tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hero-sponsors__tile--gold{width:120px;height:92px}
.hero-sponsors__tile--silver{width:96px;height:74px}
.hero-sponsors__tile--bronze{width:78px;height:60px}
.hero-sponsors__tile--supporter{width:64px;height:50px}
.hero-sponsors__more{display:block;margin-top:2px;font:600 13px var(--f-body);color:var(--bone);text-decoration:none;opacity:.85}
.hero-sponsors__more:hover{opacity:1;text-decoration:underline}
@media (max-width:700px){.hero-sponsors{display:none}}

/* ---------- Charity: a quiet mention, deliberately not styled like the sponsor cards —
   this is a cause the club chooses to back, not a paid sponsor. ---------- */
.charity{padding-block:56px;background:var(--sand)}
.charity .wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.charity__logo{flex:none;width:180px}
.charity__logo img{width:100%;height:auto;display:block}
.charity__copy{flex:1;min-width:260px;display:flex;flex-direction:column;gap:10px}
.charity__copy h2{font:800 clamp(26px,3vw,34px)/1.1 var(--f-head);text-transform:uppercase;color:var(--abyss);margin:0}
.charity__copy p{margin:0;color:var(--drift);max-width:56ch}
.charity__copy .btn{align-self:flex-start;margin-top:4px}
.charity__drive{font-size:15px;color:var(--ink)!important}
.charity__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.charity__ctas .btn{align-self:auto;margin-top:0}
@media (max-width:700px){.charity .wrap{flex-direction:column;text-align:center}.charity__copy{align-items:center}.charity__copy p{max-width:40ch}.charity__ctas{justify-content:center}}

/* ---------- Chant ---------- */
.chant{position:relative;color:#fff;overflow:hidden;isolation:isolate;padding-block:clamp(88px,10vw,140px)}
.chant>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;object-position:50% 70%}
.chant::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,34,51,.6),rgba(11,34,51,.88))}
.chant .wrap{display:flex;justify-content:center}
.join{display:flex;flex-direction:column;align-items:center;gap:18px;padding:40px;max-width:560px;margin-inline:auto;background:rgba(11,34,51,.72);border:1px solid #2A4B64;border-radius:4px;backdrop-filter:blur(4px);text-align:center}
.join h2{font-size:clamp(32px,3.4vw,44px);color:#fff}
.join p{margin:0;color:var(--bone)}
.join ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:16px;color:var(--spray);text-align:left}
.join li{display:flex;gap:10px;align-items:baseline}
.join li::before{content:"";flex:none;width:8px;height:8px;border-radius:999px;background:var(--crest);transform:translateY(-1px)}
.join .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.join .ctas a.link{color:var(--spray);font-weight:600;font-size:16px}

/* reveal: elements are visible at rest; only animate if JS marks them as below the fold */
.js .pending{opacity:0;transform:translateY(18px)}
.reveal{transition:opacity .7s ease,transform .7s ease}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reel{overflow-x:auto;mask-image:none}
  .js .pending{opacity:1;transform:none}
  .route .boat{display:none}
}

/* global heading colour would otherwise override inherited white on dark bands */
.hero h1,.next h2,.also h3,.join h2{color:#fff}
.chasing{color:var(--abyss)}