/* ==========================================================================
   MudRatz Inc. site stylesheet  |  DARK THEME
   Rebuilt 2026-07-29.

   The brand is navy and gold, which is a dark palette wearing a light shirt.
   Going properly dark lets the gold act as a real accent instead of a
   highlighter, and the four photographs we have carry far more weight against
   a dark ground than they did on white.

     ink grounds  #070E16 base, #0C1725 raised, #122335 cards
     navy         #0E2A4A family for feature bands
     gold         #FFD700 accent, used sparingly
     text         #E7EDF4 primary, #97A8BA muted

   CASCADE RULE, DO NOT BREAK IT AGAIN:
   context link colours must always be written as `a:not(.btn)`. Writing
   `.on-navy a{color:gold}` outranks `.btn` and silently renders gold text on
   gold buttons. That shipped once. There is a regression check for it in
   scripts/check-contrast.mjs.
   ========================================================================== */

:root{
  --base:#070E16;
  --raised:#0C1725;
  --card:#122335;
  --card-hi:#16293D;

  --navy:#0E2A4A;
  --navy-deep:#081A2E;
  --navy-soft:#1B3E67;

  --gold:#FFD700;
  --gold-bright:#FFE352;
  --gold-dim:#C9A400;

  --text:#E7EDF4;
  --muted:#97A8BA;
  /* --faint was #6B7C8E, which only reached 3.7:1 on card backgrounds and
     failed WCAG AA for the stats labels, form hints and footer small print.
     #8195A9 clears 4.5:1 against every surface used here. */
  --faint:#8195A9;

  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  /* Vertical rhythm scale. Sections and blocks pick from this rather than
     inventing one-off values, which is what made the first build feel cramped
     in some places and loose in others. */
  --s1:8px;
  --s2:14px;
  --s3:22px;
  --s4:34px;
  --s5:48px;
  --s6:72px;
  --s7:104px;

  --radius:16px;
  --radius-lg:28px;
  --shadow:0 20px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--base)}
body{
  margin:0;
  font-family:Poppins,Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  background:var(--base);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--gold);color:#08111b}

h1,h2,h3,h4,.bebas{
  font-family:"Bebas Neue",Arial,Helvetica,sans-serif;
  font-weight:400;letter-spacing:.02em;line-height:1.06;
  margin:0 0 .5em;color:#fff;
}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.15rem}
p{margin:0 0 1.15em}
a{color:var(--gold)}
a:hover{color:var(--gold-bright)}
strong{font-weight:600;color:#fff}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.lead{font-size:1.14rem;line-height:1.72;color:var(--muted)}

.eyebrow{
  font-family:"Bebas Neue",sans-serif;
  letter-spacing:.3em;font-size:.88rem;color:var(--gold);
  text-transform:uppercase;margin:0 0 var(--s2);
}
.eyebrow.on-light{color:var(--gold)}
.rule{width:56px;height:4px;background:var(--gold);border:0;margin:var(--s3) auto var(--s4);border-radius:2px}
.rule.left{margin-left:0}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:#08111b;
  padding:12px 20px;z-index:999;font-weight:700;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* buttons --------------------------------------------------------------- */
.btn{
  display:inline-block;background:var(--gold);color:#08111b;
  font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:16px 40px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  line-height:1.2;text-align:center;
}
.btn:hover{background:var(--gold-bright);color:#08111b;transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,215,0,.22)}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}
.btn-outline:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff;box-shadow:none}
.btn-navy{background:var(--navy-soft);color:#fff}
.btn-navy:hover{background:#255083;color:#fff}
.btn-sm{padding:11px 26px;font-size:.82rem}
/* Mid-page calls to action were too quiet and sat off to one side. This is the
   loud, centred treatment used for every in-page CTA. */
.btn-lg{
  padding:21px 56px;font-size:1.06rem;letter-spacing:.08em;
  box-shadow:0 10px 30px rgba(255,215,0,.16);
}
/* A long label (an email address was the offender) plus 56px of padding each
   side pushed a button to 413px and blew out a 390px viewport. Buttons must
   never be wider than their container. */
.btn{max-width:100%;overflow-wrap:anywhere}
@media (max-width:640px){
  .btn-lg{padding:18px 28px;font-size:.98rem;letter-spacing:.05em}
  .btn{padding-inline:26px}
}
.btn-lg:hover{box-shadow:0 14px 38px rgba(255,215,0,.3)}

/* Any button sitting inside a card or a step is centred rather than
   left-hugging, which is what made them read as afterthoughts.
   BUG FIXED 2026-08-20: these two selectors used to be glued to the
   `.btn .ch` rule below, so instead of centring they inherited
   `display:inline-block;margin-left:2px`. Because `.card p > .btn` outranks
   `.card .btn`, that silently un-centred every button sitting in a paragraph
   inside a card. It showed up as the Venmo button hugging the left edge on
   mobile while the PayPal one (inside a form) stayed centred. Keep the
   chevron rule on its own line. */
.card > .btn,
.card p > .btn,
.card .btn,
.panel .btn{display:block;width:max-content;max-width:100%;margin-inline:auto}
/* The little chevron inside a button, not a button itself. */
.btn .ch{display:inline-block;transition:transform .2s ease;margin-left:2px}
.tablist{justify-content:center}
.formfoot{justify-content:center;text-align:center}
/* Support page: donor photo band inside the boat tab. */
.photoband{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 var(--s5)}
.photoband img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line)}
@media (max-width:700px){.photoband{grid-template-columns:1fr}}
.btn:hover .ch{transform:translateX(4px)}
.steps .btn,
.cta-row{display:block;margin-inline:auto;width:max-content;max-width:100%}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;width:auto}

/* header ---------------------------------------------------------------- */
.site-header{
  padding:16px 0;border-bottom:1px solid var(--line);
  background:rgba(7,14,22,.88);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.brand img{width:74px;height:auto}
/* 60px left the gold rat as mush and the mark too quiet. 74px is the smallest
   size at which the detail survives. The keyline and shadow are baked into the
   image, so no CSS filter is involved. */
@media (max-width:640px){ .brand img{width:62px} }
.brand span{font-family:"Bebas Neue",sans-serif;font-size:2rem;color:#fff;letter-spacing:.02em;line-height:1}
.site-nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.site-nav a:not(.btn){
  font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;
}
.site-nav a:not(.btn):hover,.site-nav a:not(.btn)[aria-current="page"]{color:#fff}
.site-nav .btn{font-size:.78rem;padding:10px 22px}
.navtoggle{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;
  padding:9px 13px;cursor:pointer;font-size:1.1rem;color:#fff;line-height:1;
}

@media (max-width:960px){
  .navtoggle{display:block}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--raised);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 24px 22px;box-shadow:var(--shadow);
  }
  .site-nav.open{display:flex}
  .site-nav a:not(.btn){padding:13px 0;border-bottom:1px solid var(--line);font-size:.9rem}
  .site-nav .btn{margin-top:14px}
}

/* hero ------------------------------------------------------------------ */
.hero{
  position:relative;color:#fff;text-align:center;padding:104px 0 112px;
  background:radial-gradient(120% 100% at 50% 0%,var(--navy-soft) 0%,var(--navy-deep) 55%,var(--base) 100%);
  overflow:hidden;border-bottom:1px solid var(--line);
}
.hero h1{color:#fff;margin-inline:auto}
.hero h1 .accent{color:var(--gold)}
.hero .lead{max-width:62ch;margin-inline:auto;color:rgba(231,237,244,.78)}
/* Homepage-only note under the hero lead, carrying the complement-not-compete
   line. Left-border treatment borrowed from the concept 4 mockup; kept out of
   .lead so it can wrap independently at a narrower measure. */
.hero-note{
  max-width:46ch;margin:18px auto 0;text-align:left;padding-left:16px;
  border-left:2px solid var(--gold);font-size:.94rem;line-height:1.55;
  color:rgba(231,237,244,.82);
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2rem}
/* Photos are the brightest thing on a dark page, so they can run much
   stronger here than they could over white. */
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;filter:saturate(1.05) contrast(1.05);
}
/* The scrim only exists to hold text off a photo. Without :has() scoping it
   also painted over the text on the photo-less heroes (news, about, contact,
   faq, donate, privacy, 404) and dimmed every headline to grey. */
.hero:has(> .hero-photo)::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,rgba(7,14,22,.55) 0%,rgba(7,14,22,.35) 45%,rgba(7,14,22,.95) 100%);
}
/* Belt and braces: every hero child except the photo sits above the scrim,
   so this cannot regress even if :has() is unavailable. */
.hero>*:not(.hero-photo){position:relative;z-index:2}
.hero-inner{position:relative;z-index:2}
.hero.compact{padding:76px 0 82px}
.hero.compact h1{font-size:clamp(2.2rem,5vw,3.8rem)}

/* stats strip ----------------------------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line-strong);border-radius:var(--radius);
  overflow:hidden;margin:-46px auto 0;position:relative;z-index:3;max-width:1000px;
  box-shadow:var(--shadow);
}
.stats div{background:var(--card);padding:var(--s3) 18px;text-align:center}
.stats strong{display:block;font-family:"Bebas Neue",sans-serif;font-size:1.8rem;color:var(--gold);line-height:1.1}
.stats span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* sections -------------------------------------------------------------- */
section{padding:var(--s7) 0}
section.tight{padding:var(--s6) 0}
.wash{background:var(--raised)}
.on-navy{
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.on-navy a:not(.btn){color:var(--gold)}

/* 501(c)(3) proof line, used on the homepage support band. */
.proof-line{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.proof-line img{max-width:170px;opacity:.92}
.proof-line span:not([class]){
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);line-height:1.9;text-align:left;
}

/* cards ----------------------------------------------------------------- */
.grid{display:grid;gap:var(--s3)}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s4);
}
.card h3{color:#fff}
.card form{display:flex;justify-content:center}
/* Scoped to UNCLASSED paragraphs on purpose. As a bare `.card p` this rule is
   specificity 0,2,0 and silently overrode every single-class colour inside a
   card: .coach-tag rendered muted grey on a gold pill (1.74:1), and
   .coach-then/.coach-now lost their intended tones. Same family of bug as the
   gold-on-gold buttons. Do not remove the :not([class]). */
.card p:not([class]){color:var(--muted)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card a:not(.btn){color:var(--gold)}
.card-navy{background:var(--card-hi);border-color:var(--line-strong)}
.card-navy h3{color:var(--gold)}
.card-navy p:not([class]),.card-navy li{color:var(--muted)}
.card-navy a:not(.btn){color:var(--gold)}

/* team tiles ------------------------------------------------------------ */
.tiles{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:330px;
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:#fff;background:var(--card);
  border:1px solid var(--line);
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;opacity:.85}
.tile:hover img{transform:scale(1.06);opacity:1}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,14,22,.96) 0%,rgba(7,14,22,.55) 48%,rgba(7,14,22,.12) 100%);
}
.tile-body{position:relative;z-index:1;padding:26px}
.tile-body h3{color:#fff;margin-bottom:.2em;font-size:2.1rem}
.tile-body p{color:rgba(231,237,244,.8);font-size:.92rem;margin:0}
.tile-body .go{
  display:inline-block;margin-top:14px;color:var(--gold);font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}

/* split media ----------------------------------------------------------- */
.split{display:grid;gap:44px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center}
.split img{border-radius:var(--radius);width:100%;object-fit:cover;border:1px solid var(--line)}

/* spec + wanted lists --------------------------------------------------- */
.specs,.wanted{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.wanted{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.specs li,.wanted li{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;padding:18px 22px;
}
.specs strong,.wanted strong{
  display:block;font-family:"Bebas Neue",sans-serif;font-size:1.3rem;
  color:#fff;letter-spacing:.02em;
}
.specs small,.wanted small{color:var(--muted);font-size:.89rem;line-height:1.55;display:block}

/* numbered steps -------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:0;margin:0;list-style:none}
.steps li{position:relative;padding-top:64px;text-align:center}
.steps li::before{left:50%;transform:translateX(-50%)}
.steps li::before{
  counter-increment:step;content:counter(step);position:absolute;top:0;
  width:46px;height:46px;border-radius:50%;background:var(--gold);color:#08111b;
  font-family:"Bebas Neue",sans-serif;font-size:1.55rem;
  display:flex;align-items:center;justify-content:center;
}
.steps h3{color:#fff;margin-bottom:.3em}
.steps p{color:var(--muted);font-size:.95rem;margin:0}

/* news posts ------------------------------------------------------------ */
.posts{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
.post .tag{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--gold);background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.3);
  display:inline-block;padding:4px 11px;border-radius:999px;margin-bottom:14px;align-self:flex-start;
}
.post h3{color:#fff;font-size:1.5rem}
.post p,.post ul{font-size:.95rem;color:var(--muted)}
.post ul{padding-left:1.1em;margin:0 0 1em}
.post p:last-child,.post ul:last-child{margin-bottom:0}


/* two doors (homepage) --------------------------------------------------- */
.doors-section{padding:0}
.doors{
  display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  margin-top:-56px;position:relative;z-index:3;
}
.door{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:340px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-strong);text-decoration:none;color:#fff;
  background:var(--card);box-shadow:var(--shadow);
}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;transition:transform .5s ease,opacity .3s ease}
.door:hover img,.door:focus-visible img{transform:scale(1.05);opacity:.55}
.door::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,14,22,.97) 0%,rgba(7,14,22,.7) 50%,rgba(7,14,22,.35) 100%);
}
.door-body{position:relative;z-index:1;padding:var(--s4);display:block}
.door-tag{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold);margin-bottom:10px;
}
.door-title{
  display:block;font-family:"Bebas Neue",sans-serif;font-size:clamp(2.2rem,4vw,3rem);
  line-height:1;color:#fff;letter-spacing:.02em;margin-bottom:.35em;
}
.door-text{display:block;color:rgba(231,237,244,.82);font-size:.98rem;line-height:1.6}
.door-go{
  display:inline-block;margin-top:18px;color:var(--gold);font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
.door-go .ch{display:inline-block;transition:transform .25s ease}
.door:hover .door-go .ch,.door:focus-visible .door-go .ch{transform:translateX(5px)}
@media (max-width:640px){ .doors{margin-top:-34px} .door{min-height:280px} .door-body{padding:24px} }

/* tabs ------------------------------------------------------------------- */
.tablist{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);padding-bottom:var(--s2);
}
.tab{
  font-family:"Bebas Neue",sans-serif;font-size:1.35rem;letter-spacing:.06em;
  background:transparent;border:1px solid var(--line-strong);color:var(--muted);
  padding:9px 26px;border-radius:999px;cursor:pointer;line-height:1.2;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.tab:hover{color:#fff;border-color:var(--gold)}
.tab.is-active{background:var(--gold);border-color:var(--gold);color:#08111b}
.tabpanel[hidden]{display:none}

.team-head{display:grid;gap:var(--s4);grid-template-columns:minmax(0,400px) 1fr;align-items:center}
.team-head img{border-radius:var(--radius);width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border:1px solid var(--line)}
@media (max-width:700px){ .team-head{grid-template-columns:1fr} }

.minihead{
  font-family:"Bebas Neue",sans-serif;font-size:1.4rem;letter-spacing:.06em;
  color:var(--gold);margin:0 0 var(--s2);
}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.ticks li{position:relative;padding-left:28px;color:var(--muted)}
.ticks li::before{
  content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--gold);
}
.team-cta{
  margin-top:var(--s5);padding:var(--s4);
  background:linear-gradient(160deg,var(--card-hi) 0%,var(--card) 100%);
  border:1px solid var(--line-strong);border-top:3px solid var(--gold);
  border-radius:var(--radius);text-align:center;
}
.team-cta .minihead{font-size:1.7rem}
.team-cta p{margin:var(--s1) auto var(--s3);max-width:52ch}
.team-cta .btn{display:block;width:max-content;max-width:100%;margin-inline:auto}
.team-note{margin:var(--s3) 0 0;color:var(--faint);font-size:.9rem;text-align:center}
.clubnote{
  max-width:56ch;margin:var(--s5) auto 0;text-align:center;
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--raised);color:var(--muted);font-size:.98rem;
}
.clubnote strong{color:#fff}
.paypal-slot{margin-top:var(--s3);min-height:48px;display:flex;justify-content:center}

/* membership pay buttons ------------------------------------------------
   Two side-by-side buttons inside a centred .steps li. They wrap to stacked
   on a narrow card rather than shrinking the labels. */
.payrow{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:var(--s3) 0 0}
.paynote{margin:14px 0 0;color:var(--muted);font-size:.85rem;line-height:1.55}
/* A caption sitting directly under a centred button. Left-aligned it reads as
   an orphan hanging off the button. */
.givenote{margin:12px 0 0;color:var(--muted);font-size:.88rem;line-height:1.5;text-align:center}

/* Fee table on Sail With Us ---------------------------------------------
   A price list, so it is a list and not a <table>: two columns on desktop
   that stack to label-over-amount on a phone, which keeps the number next to
   the thing it is the price of instead of stranding it in a far column. */
.feecard{
  max-width:760px;margin:38px auto 0;background:var(--card);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--s4)
}
.feecard h3{color:var(--gold);margin:0 0 var(--s3);text-align:center}
.feelist{list-style:none;padding:0;margin:0}
.feelist li{
  display:flex;gap:18px;align-items:baseline;justify-content:space-between;
  padding:16px 0;border-top:1px solid var(--line)
}
.feelist li:first-child{border-top:0;padding-top:0}
.fee-what{display:block;color:#fff;font-weight:600;font-size:1rem;line-height:1.35}
.fee-what small{
  display:block;margin-top:5px;color:var(--muted);
  font-weight:400;font-size:.86rem;line-height:1.55
}
.fee-amt{
  flex:0 0 auto;font-family:"Bebas Neue",Arial,sans-serif;font-weight:400;
  letter-spacing:.04em;font-size:1.55rem;color:var(--gold);white-space:nowrap
}
.fee-late .fee-amt{font-size:1.15rem}
.feetotal{
  margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--line);
  color:var(--muted);font-size:.92rem;line-height:1.7
}
.feetotal strong{color:#fff;white-space:nowrap}
/* The alumni membership panel on the support page. Reads as a letter rather
   than a card, so the measure is narrow and the type is a notch larger. */
/* Same width as any other .panel. It used to carry max-width:720px, which made
   it visibly narrower than the giving grid above it and the Donor Trust panel
   below, so the column edge jumped twice down the page. The narrow measure the
   prose needs is handled on the paragraphs, not by shrinking the whole box. */
.legacy{margin:38px 0 0;text-align:center}
.legacy h3{color:var(--gold);margin:0 0 var(--s3);font-size:clamp(1.5rem,3.2vw,2rem)}
.legacy .eyebrow{margin-bottom:10px}
.legacy p:not([class]){color:var(--muted);font-size:1.02rem;line-height:1.75;margin:0 auto var(--s3);max-width:60ch}
/* PayPal's button fills whatever box it is given, and this one is now full
   panel width, so cap the slot or the Subscribe button stretches to the edges. */
.legacy .paypal-slot{margin:var(--s4) auto 0;max-width:320px}

/* Three-across steps need more room than the two-across default. */
.steps-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:1080px;margin-inline:auto}
@media (max-width:560px){
  .feelist li{flex-direction:column;gap:6px;align-items:flex-start}
  .fee-amt{font-size:1.35rem}
}

/* coach cards ----------------------------------------------------------- */
/* Ken Legler's card carries a memoriam tag and a gold edge so it reads as a
   tribute without breaking out of the grid. */
.coach-memoriam{
  background:linear-gradient(160deg,rgba(255,215,0,.09) 0%,var(--card-hi) 55%);
  border:1px solid rgba(255,215,0,.42);
  border-top:4px solid var(--gold);
  box-shadow:0 0 0 1px rgba(255,215,0,.10), 0 16px 40px rgba(0,0,0,.4);
}
.coach-memoriam h3{color:var(--gold)}
/* Filled gold pill, not just gold text. It should be impossible to skim past. */
.coach-tag{
  display:inline-block;font-family:"Bebas Neue",sans-serif;
  letter-spacing:.18em;font-size:.78rem;text-transform:uppercase;
  background:var(--gold);color:#08111b;font-weight:700;
  padding:5px 14px;border-radius:999px;margin:0 0 var(--s3);
}

/* coach cards ----------------------------------------------------------- */
.coach{border-top:3px solid var(--gold)}
.coach h3{color:#fff;margin-bottom:var(--s1)}
.coach-then{color:var(--faint);font-size:.9rem;margin:0 0 var(--s2)}
.coach-now{color:var(--muted);margin:0}

/* coach roster ---------------------------------------------------------- */
.roster{
  margin-top:var(--s5);padding:var(--s5) var(--s4);
  background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);
  text-align:center;
}
.roster h3{color:#fff;margin-bottom:var(--s1)}
.roster > p{color:var(--muted);max-width:56ch;margin:0 auto var(--s4)}
.roster-list{
  list-style:none;padding:0;margin:0 auto;max-width:820px;
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:center;
}
.roster-list li:not([class]){
  color:var(--text);font-weight:500;font-size:.98rem;
  padding:6px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);
}
.roster-note{
  margin:var(--s4) auto 0;max-width:62ch;color:var(--faint);font-size:.88rem;line-height:1.7;
}

/* sliders ---------------------------------------------------------------- */
.slider-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:var(--s3);flex-wrap:wrap}
.slider-dots{display:flex;gap:7px;flex-wrap:wrap}
.slider-hint{color:var(--faint);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;margin:0}
.chip{
  font-family:"Bebas Neue",sans-serif;font-size:1rem;letter-spacing:.08em;
  background:transparent;border:1px solid var(--line-strong);color:var(--muted);
  padding:5px 13px;border-radius:999px;cursor:pointer;line-height:1.3;
}
.chip:hover{color:#fff;border-color:var(--gold)}
.chip.is-active{background:var(--gold);border-color:var(--gold);color:#08111b}
.slider-nav{display:flex;gap:8px;flex:none}
.sldbtn{
  width:42px;height:42px;border-radius:50%;background:var(--card);
  border:1px solid var(--line-strong);color:#fff;cursor:pointer;font-size:1rem;line-height:1;
}
.sldbtn:hover:not(:disabled){background:var(--gold);color:#08111b;border-color:var(--gold)}
.sldbtn:disabled{opacity:.35;cursor:default}
.slider-rail{
  list-style:none;padding:4px 0 var(--s3);margin:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,344px);gap:var(--s3);
  align-items:start;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.slider-rail::-webkit-scrollbar{height:8px}
.slider-rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
.slider-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.slide{scroll-snap-align:start}
.tl-card,.fleet-card{
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--radius);padding:var(--s4);
}
.tl-year,.fleet-year{
  display:block;font-family:"Bebas Neue",sans-serif;font-size:1.6rem;
  color:var(--gold);letter-spacing:.1em;line-height:1;margin-bottom:.4em;
}
.tl-card h3,.fleet-card h3{color:#fff;font-size:1.45rem;margin-bottom:.4em}
.tl-card p,.fleet-card p{color:var(--muted);font-size:.94rem;margin:0}
.fleet-card{border-top-color:var(--navy-soft)}

/* instagram grid --------------------------------------------------------- */
.ig-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.ig-item{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:12px;border:1px solid var(--line);background:var(--card);
}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease,opacity .3s ease;opacity:.92}
.ig-item:hover img{transform:scale(1.06);opacity:1}
.ig-badge{
  position:absolute;top:9px;right:9px;z-index:2;
  background:rgba(7,14,22,.78);color:#fff;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
}
.ig-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:5px;padding:14px;
  background:linear-gradient(to top,rgba(7,14,22,.94) 0%,rgba(7,14,22,.55) 42%,rgba(7,14,22,0) 78%);
  opacity:0;transition:opacity .25s ease;
}
.ig-item:hover .ig-overlay,.ig-item:focus-visible .ig-overlay{opacity:1}
.ig-cap{color:#fff;font-size:.78rem;line-height:1.4;display:block}
.ig-when{color:var(--gold);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.ig-meta{color:var(--faint);font-size:.85rem;margin:0}
/* Touch devices have no hover, so the caption would never be reachable.
   Show it permanently at reduced strength instead. */
@media (hover:none){
  .ig-overlay{opacity:1;background:linear-gradient(to top,rgba(7,14,22,.92) 0%,rgba(7,14,22,.25) 55%,rgba(7,14,22,0) 80%)}
  .ig-cap{display:none}
}

/* panel ----------------------------------------------------------------- */
.panel{
  background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:var(--radius);padding:var(--s5);
}
.panel ul{padding-left:1.1em;margin:0 0 1.2em;color:var(--muted)}
.panel li{margin-bottom:.7em}
.panel .fineprint{font-size:.85rem;color:var(--faint);line-height:1.6;border-top:1px solid var(--line);padding-top:18px;margin-bottom:0}

/* TBD marker ------------------------------------------------------------
   Deliberately quiet. Visible enough to catch in a read-through, not so loud
   that the page looks like a construction site. Find them all with
   `npm run tbd`. */
.tbd{color:var(--faint);font-style:italic;border-bottom:1px dotted var(--faint);overflow-wrap:anywhere}
.tbd::before{content:"TBD: ";font-style:normal;font-size:.78em;letter-spacing:.06em;opacity:.8}

/* forms ----------------------------------------------------------------- */
.formcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow)}
.fields{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-weight:600;font-size:.88rem;color:#fff}
label .req{color:var(--gold)}
.hint{font-size:.78rem;color:var(--faint);font-weight:400;line-height:1.5}
input,select,textarea{
  font-family:inherit;font-size:.95rem;color:var(--text);padding:12px 14px;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--raised);width:100%;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
select option{background:var(--raised);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,215,0,.15)}
textarea{min-height:120px;resize:vertical}
.checkline{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--muted);line-height:1.6}
.checkline input{width:auto;flex:none;margin-top:4px;accent-color:var(--gold)}
.formfoot{
  margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  align-items:center;text-align:center;
}
.formnote{font-size:.85rem;color:var(--faint);margin:0}
.formmsg{margin-top:18px;padding:16px 18px;border-radius:10px;font-size:.92rem;display:none}
.formmsg.ok{display:block;background:rgba(46,160,90,.14);border:1px solid rgba(46,160,90,.5);color:#7CD9A3}
.formmsg.err{display:block;background:rgba(200,60,50,.14);border:1px solid rgba(200,60,50,.5);color:#F29A93}
fieldset{border:0;padding:0;margin:0 0 8px}
legend{font-family:"Bebas Neue",sans-serif;font-size:1.35rem;color:var(--gold);letter-spacing:.02em;padding:0;margin-bottom:4px}
.fs-sep{border:0;border-top:1px solid var(--line);margin:30px 0 26px}

/* give amounts ---------------------------------------------------------- */
.amounts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 26px;padding:0;list-style:none}
.amounts li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center}
.amounts b{display:block;font-family:"Bebas Neue",sans-serif;font-size:2.1rem;color:var(--gold);line-height:1}
.amounts span{font-size:.84rem;color:var(--muted);line-height:1.45;display:block;margin-top:6px}

/* faq ------------------------------------------------------------------- */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 26px;margin-bottom:10px}
details[open]{border-color:var(--line-strong);background:var(--card-hi)}
summary{cursor:pointer;font-weight:600;color:#fff;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;color:var(--gold);line-height:1;font-weight:400}
details[open] summary::after{content:"\2013"}
details p,details ul{margin:14px 0 0;color:var(--muted);font-size:.95rem}
details p:last-child,details ul:last-child{margin-bottom:0}

/* feature band ---------------------------------------------------------- */
.band{
  background:linear-gradient(150deg,var(--navy-soft) 0%,var(--navy-deep) 70%);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);padding:52px 44px;
}
.band h2{color:#fff}
.band p,.band li{color:rgba(231,237,244,.8)}
.band ul{padding-left:1.1em}
.band li{margin-bottom:.55em}
.band a:not(.btn){color:var(--gold)}

/* prose ----------------------------------------------------------------- */
.prose{color:var(--muted)}
.prose h2{margin-top:2.2em;color:#fff}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.6em;color:#fff}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.5em}
.prose strong{color:var(--text)}

/* footer ---------------------------------------------------------------- */
.site-footer{background:#04090F;border-top:1px solid var(--line);color:var(--muted);padding:var(--s6) 0 var(--s4);font-size:.9rem}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.foot-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:var(--s5)}
.foot-grid h4{font-family:"Bebas Neue",sans-serif;color:#fff;font-size:1.2rem;letter-spacing:.08em;margin-bottom:14px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:9px}
/* Footer social icons -----------------------------------------------------
   Hairline circles, muted until hover. Deliberately restrained: the footer is
   not where the page should get loud, and three gold discs would have competed
   with the donate CTA above it. The icons are inline SVG using currentColor,
   so colour, hover and focus are one rule each and there is no icon font and
   no third-party request to slow the page down. */
.foot-social{
  list-style:none;padding:0;margin:0 0 var(--s4);
  display:flex;justify-content:center;gap:14px
}
.foot-social a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--muted);
  transition:color .22s ease,border-color .22s ease,background .22s ease,transform .22s ease
}
.foot-social svg{width:19px;height:19px;display:block}
.foot-social a:hover,.foot-social a:focus-visible{
  color:var(--gold);border-color:var(--gold);
  background:rgba(255,215,0,.07);transform:translateY(-2px)
}
@media (prefers-reduced-motion:reduce){
  .foot-social a{transition:color .22s ease,border-color .22s ease}
  .foot-social a:hover,.foot-social a:focus-visible{transform:none}
}

.foot-bottom{border-top:1px solid var(--line);padding-top:24px;text-align:center;font-size:.82rem;line-height:1.8;color:var(--faint)}

@media (max-width:640px){
  section{padding:var(--s6) 0}
  section.tight{padding:var(--s5) 0}
  .hero{padding:74px 0 84px}
  .formcard,.panel{padding:var(--s4) 22px}
  .card{padding:var(--s3)}
  .tablist{margin-bottom:var(--s4)}
  .stats{margin-top:-30px}
  .split{gap:28px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* ========================================================================
   Scroll reveal ("rise and fade in"), ported from the concept 4 mockup /
   signature-site-interactions skill. .rv elements rise and fade in when
   they enter the viewport; ui.js adds .in via one shared IntersectionObserver
   and never removes it, so reveals fire once. The reduced-motion block above
   already kills the transition globally, so elements just appear instantly
   for anyone who asked for less motion, rather than staying invisible.
   ========================================================================== */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}
.rv.d2{transition-delay:.24s}
.rv.d3{transition-delay:.36s}

/* photo reel (homepage). Ships with our own shots baked in; instagram.js
   swaps in the live @ratzracing feed, drifts it sideways, and wires the
   arrows. Dates (or the handle) sit under each shot. Reduced motion gets a
   static, horizontally scrollable strip with working arrows. */
.reel{position:relative;margin-top:38px}
.reel-view{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reel-view::-webkit-scrollbar{display:none}
.reel-track{display:flex;gap:16px;width:max-content;padding:0 20px}
.reelcard{flex:none;display:block}
.reelcard img{height:260px;width:auto;display:block;border-radius:14px;border:1px solid var(--line);transition:transform .4s ease,border-color .4s ease}
.reelcard:hover img{transform:translateY(-4px);border-color:var(--gold-dim)}
.reeldate{display:block;margin-top:9px;font-family:"Bebas Neue",sans-serif;font-size:.82rem;letter-spacing:.22em;color:var(--gold-dim);text-transform:uppercase}
/* The newest posts, pinned above the drifting reel ------------------------
   A fixed grid rather than part of the scroll, so the latest three (two on a
   phone) are always on screen. Square-cropped so the row stays even whatever
   aspect ratio Instagram hands back; the drifting reel below keeps its natural
   heights. instagram.js decides which posts land here. */
.reel-pinned{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.pincard{display:block}
.pincard img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:14px;
  border:1px solid var(--line);transition:transform .4s ease,border-color .4s ease
}
.pincard:hover img{transform:translateY(-4px);border-color:var(--gold-dim)}
.reel-pinned + .reel{margin-top:22px}
@media (max-width:699px){
  .reel-pinned{grid-template-columns:repeat(2,1fr);gap:12px}
}

.reelbtn{position:absolute;top:110px;z-index:3;width:48px;height:48px;border-radius:50%;
background:rgba(7,14,22,.85);border:1px solid var(--gold-dim);color:var(--gold);font-size:1.25rem;
cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;backdrop-filter:blur(4px)}
.reelbtn:hover{background:var(--gold);color:#08111b;border-color:var(--gold)}
.reelbtn.prev{left:12px}
.reelbtn.next{right:12px}
@media (max-width:700px){.reelcard img{height:190px}.reelbtn{top:78px;width:42px;height:42px}}

/* ==========================================================================
   Homepage: concept 4 v2 production styles (2026-08-18).
   Split hero, gold results bar, lanes, interactive log book, coach wall.
   All selectors are classed; bare element descendants that set colour are
   scoped :not([class]) per the cascade rule at the top of this file.
   ========================================================================== */

/* header gets out of the way scrolling down, returns scrolling up (ui.js) */
.site-header{transition:transform .35s ease}
.site-header.hd-hide{transform:translateY(-100%)}

/* ink-in headlines: ghosted until revealed */
h1.ink,h2.ink{color:rgba(231,237,244,.16);transition:color 1.2s ease .15s}
h1.ink.in,h2.ink.in{color:#fff}
@media (prefers-reduced-motion:reduce){h1.ink,h2.ink{color:#fff;transition:none}}

/* ----------------------------------------------------------- split hero */
.hero-split .hero-actions{justify-content:flex-start;flex-wrap:nowrap}
.hero-split .hero-actions .btn{padding:16px 26px;white-space:nowrap}
@media (max-width:520px){
  .hero-split .hero-actions{gap:10px}
  .hero-split .hero-actions .btn{padding:13px 16px;font-size:.74rem}
}
.hero-split{padding:calc(var(--s6)) 0 var(--s6);overflow:hidden}
.hs-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.hero-split h1{font-size:clamp(3rem,6.6vw,5.6rem);line-height:.95;text-transform:uppercase;font-family:"Bebas Neue",sans-serif;margin-bottom:14px}
.hs-outline{display:block;color:transparent;-webkit-text-stroke:2px var(--gold)}
@supports not (-webkit-text-stroke:2px #FFD700){.hs-outline{color:var(--gold)}}
.hs-visual{position:relative;margin:12px 0 26px}
.hs-frame{position:relative}
.hs-photo{width:100%;height:100%;min-height:380px;object-fit:cover;
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);
  filter:brightness(.9);transform:scale(1.06);transition:transform 1.6s ease}
.rv.in .hs-photo,.hs-visual.in .hs-photo{transform:scale(1)}
.hs-coords{position:absolute;right:18px;bottom:-12px;z-index:2;background:var(--base);
  padding:2px 14px;font-family:"Bebas Neue",sans-serif;letter-spacing:.3em;
  font-size:.74rem;color:var(--gold-dim);border:1px solid var(--line)}
.hs-compass{position:absolute;left:-38px;top:-30px;width:104px;opacity:.45;z-index:2;animation:hs-spin 60s linear infinite}
@keyframes hs-spin{to{transform:rotate(360deg)}}
.hs-chip{margin-top:26px;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 10px 10px 0;
  padding:14px 20px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.hs-chip b:not([class]){font-family:"Bebas Neue",sans-serif;font-size:1.25rem;letter-spacing:.08em;color:var(--gold);white-space:nowrap}
.hs-chip span:not([class]){font-size:.88rem;color:var(--muted);flex:1;min-width:220px}
@media (prefers-reduced-motion:reduce){.hs-photo{transform:none}.hs-compass{animation:none}}

/* ------------------------------------------------------- gold results bar */
.goldbar{background:var(--gold);padding:20px 0}
.gb-row{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:20px;align-items:center}
.gb-cell{display:flex;align-items:baseline;gap:12px;min-width:0}
.gb-cell strong:not([class]){font-family:"Bebas Neue",sans-serif;font-size:2.2rem;line-height:1;color:#0A1220;min-width:2.2ch;font-variant-numeric:tabular-nums}
.gb-cell span:not([class]){font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0A1220;max-width:18ch;line-height:1.35}

/* ------------------------------------------------------------------ lanes */
.lanes{display:grid;grid-template-columns:1fr 1fr;min-height:min(78svh,760px)}
.lane{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:52px;text-decoration:none}
.lane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .7s ease,filter .7s ease;filter:brightness(.6)}
/* Keep the subjects in frame: the Opti line reads from the left,
   the offshore crew's faces sit in the upper half. */
.lane:first-child img{object-position:left center}
.lane.altside img{object-position:center 20%}
.lane:hover img,.lane:focus-visible img{transform:scale(1.05);filter:brightness(.72)}
.lane::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 32%,rgba(7,14,22,.96))}
.lane-tag{position:absolute;top:20px;left:52px;font-family:"Bebas Neue",sans-serif;letter-spacing:.22em;
  font-size:.76rem;background:var(--base);color:var(--gold-dim);padding:9px 16px;border:1px solid var(--line);text-transform:uppercase}
.lane-body{display:block;transform:translateY(12px);transition:transform .5s ease}
.lane:hover .lane-body{transform:none}
.lane-title{display:block;font-family:"Bebas Neue",sans-serif;font-size:clamp(2.1rem,3.4vw,3.2rem);line-height:1.02;text-transform:uppercase;color:#fff;margin-bottom:6px}
.lane-sub{display:block;font-style:italic;font-weight:300;font-size:1rem;color:var(--gold-bright);margin-bottom:10px}
.lane-text{display:block;color:#C4D1DF;max-width:46ch;margin-bottom:20px}
.lane-go{display:block;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.84rem;color:var(--gold)}
.lane-go .ch{display:inline-block;transition:transform .25s ease}
.lane:hover .lane-go .ch{transform:translateX(6px)}
.lane.altside{border-left:2px solid var(--gold)}

/* --------------------------------------------------- interactive log book
   Styled as a real log book: cut index tabs along the top edge, a two-page
   spread underneath (photo plate on the left, ruled entry on the right), a
   progress rule and page counter along the bottom. Pages cross-cut rather
   than cross-fade: the outgoing page is gone before the incoming one starts,
   so text never ghosts over text.
   ----------------------------------------------------------------------- */
.logbook{background:var(--raised);padding:var(--s7) 0;border-top:1px solid var(--line)}
.lb-sub{color:var(--muted);max-width:60ch}
.lbook{margin-top:var(--s5)}

/* index tabs */
.lb-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 2px}
.lb-tabs::-webkit-scrollbar{display:none}
.lb-tab{
  flex:none;background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:10px 10px 0 0;padding:12px 20px 11px;cursor:pointer;
  font-family:"Bebas Neue",sans-serif;font-size:1.15rem;letter-spacing:.14em;
  color:var(--muted);transition:color .25s,background .25s,transform .25s;
  position:relative;top:2px;
}
.lb-tab:hover{color:#fff;background:var(--card-hi)}
.lb-tab.on{
  background:var(--navy);color:var(--gold);top:0;
  border-color:var(--gold-dim);box-shadow:0 -3px 0 0 var(--gold) inset;
}

/* the spread */
.lb-book{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  border:1px solid var(--gold-dim);border-radius:0 var(--radius-lg) var(--radius) var(--radius);
  padding:clamp(20px,3vw,34px);box-shadow:var(--shadow);
}
.lb-stage{position:relative;min-height:470px}
.lb-page{
  position:absolute;inset:0;display:grid;grid-template-columns:1.5fr 1fr;
  gap:clamp(20px,3vw,44px);align-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s;
}
.lb-page.on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s ease .28s,transform .5s ease .28s,visibility 0s;
}
.lb-photo{overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--base)}
.lb-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transform:scale(1.06);transition:transform 1.4s ease}
.lb-page.on .lb-photo img{transform:scale(1)}
.lb-entry{position:relative;padding-left:clamp(18px,2vw,26px)}
/* the binding rule and faint ruled lines of a log page */
.lb-entry::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--gold-dim);opacity:.6}
.lb-stamp{
  display:inline-block;font-family:"Bebas Neue",sans-serif;font-size:clamp(2.6rem,5vw,4rem);
  line-height:.9;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1.5px var(--gold);
  margin-bottom:6px;
}
@supports not (-webkit-text-stroke:1.5px #FFD700){.lb-stamp{color:var(--gold)}}
.lb-head{
  font-family:"Bebas Neue",sans-serif;font-size:clamp(1.5rem,2.4vw,2.1rem);
  letter-spacing:.03em;text-transform:uppercase;color:#fff;margin:0 0 var(--s2);
}
.lb-body{color:#C4D4E4;margin:0;font-size:1rem;line-height:1.72;max-width:42ch}
.lb-body a{color:var(--gold)}

/* footer rule: arrows, progress, counter */
.lb-foot{display:flex;align-items:center;gap:16px;margin-top:clamp(18px,2.5vw,28px);padding-top:18px;border-top:1px solid var(--line)}
.lb-arrow{
  flex:none;width:42px;height:42px;border-radius:50%;background:transparent;
  border:1px solid var(--gold-dim);color:var(--gold);font-size:1.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;
}
.lb-arrow:hover{background:var(--gold);color:#08111b}
.lb-bar{flex:1;height:2px;background:rgba(255,255,255,.14);position:relative;overflow:hidden;border-radius:1px}
.lb-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.lb-count{flex:none;font-family:"Bebas Neue",sans-serif;letter-spacing:.18em;font-size:.9rem;color:var(--muted);min-width:6ch;text-align:right}

/* --------------------------------------------------------- coach wall */
.coachwall{background:var(--navy);padding:var(--s7) 0;overflow:hidden;border-top:1px solid var(--line)}
.cw-sub{color:#AFC2D6;max-width:60ch}
.cw-top{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,60px);align-items:center}
.cw-mag{margin:0}
.cw-mag img{width:100%;max-width:330px;display:block;border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(-2deg);transition:transform .5s ease}
.cw-mag a:hover img{transform:rotate(0deg) translateY(-6px)}
.cw-mag figcaption{margin-top:16px;font-size:.85rem;color:#9FB2C4;max-width:330px}
.cw-mag figcaption a{color:var(--gold)}
.namestrip{margin-top:var(--s5);white-space:nowrap;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:18px 0}
.ns-track{display:inline-block}
.ns-track.is-rolling{animation:ns-slide 40s linear infinite}
.namestrip:hover .ns-track.is-rolling{animation-play-state:paused}
.ns-track span:not([class]){font-family:"Bebas Neue",sans-serif;font-size:2.1rem;letter-spacing:.06em;color:#fff;margin:0 28px}
.ns-track i:not([class]){font-style:normal;color:var(--gold);font-size:1.3rem;vertical-align:middle;margin:0 6px}
@keyframes ns-slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ns-track.is-rolling{animation:none}}
.credgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--s5)}
.cred{background:rgba(6,17,32,.6);border:1px solid rgba(255,255,255,.12);padding:24px 26px;border-radius:var(--radius);
  transition:transform .3s ease,border-color .3s ease}
.cred:hover{transform:translateY(-6px);border-color:var(--gold-dim)}
.cred b:not([class]){font-family:"Bebas Neue",sans-serif;font-size:1.35rem;letter-spacing:.06em;color:var(--gold);display:block;margin-bottom:6px;font-weight:400}
.cred span:not([class]){font-size:.9rem;color:#B6C7D8}


/* big fold: the all-coaches dropdown on the homepage coach wall */
.fold{background:rgba(6,17,32,.6);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:22px 28px}
.fold[open]{background:rgba(6,17,32,.75)}
.fold > summary{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:1.5rem;letter-spacing:.08em;text-transform:uppercase}
.fold .roster{margin-top:var(--s5)}

/* ------------------------------------------------------------- responsive */
@media (max-width:960px){
  .hs-grid{grid-template-columns:1fr;gap:26px}
  .hero-split{padding-top:var(--s5)}
  .hs-visual{margin-top:8px}
  .hs-photo{min-height:300px;clip-path:none}
  .hs-compass{display:none}
  .gb-row{grid-template-columns:1fr 1fr;row-gap:16px}
  .gb-cell{flex-wrap:wrap;gap:8px}
  .gb-cell strong:not([class]){font-size:1.8rem}
  .gb-cell span:not([class]){max-width:none}
  .lanes{grid-template-columns:1fr}
  .lane{padding:34px 24px;min-height:64svh}
  .lane-tag{left:24px}
  .lane.altside{border-left:0;border-top:2px solid var(--gold)}
  .lane-body{transform:none}
  .lb-stage{min-height:0}
  .lb-page{position:relative;inset:auto;display:none;grid-template-columns:1fr;gap:20px}
  .lb-page.on{display:grid}
  .lb-tab{padding:10px 16px;font-size:1rem}
  .lb-entry{padding-left:16px}
  .cw-top{grid-template-columns:1fr}
  .cw-mag img{max-width:250px;margin-inline:auto}
  .cw-mag figcaption{margin-inline:auto;text-align:center}
  .credgrid{grid-template-columns:1fr}
}