/* Revolutions Mountain Bike Club — site styles
   Brand colours sampled from the team jersey logo (RR SOLDIER LOGO R5.pdf):
   navy #1A3576, deep red #8B1014, goggle cyan #00ADEF */
:root{
  --paper:#F8F8F6; --card:#FFFFFF; --navy:#1A3576; --slate:#5A6275;
  --sky:#1E6FB8; --red:#8B1014; --line:#E3E2DD; --ink:#16203A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--sky)}

/* header */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 28px;background:var(--card);border-bottom:1px solid var(--line)}
.nav .mark img{width:min(250px,52vw);height:auto}
.nav nav{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.nav nav a{color:var(--slate);text-decoration:none;font-weight:600}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--navy)}

/* hero */
.hero{position:relative;min-height:min(70vh,560px);display:grid;align-items:end}
.hero .slides{position:absolute;inset:0}
.hero .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease-in-out}
.hero .slides img.on{opacity:1}
@media (prefers-reduced-motion: reduce){.hero .slides img{transition:none}}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,22,52,.20) 0%,rgba(12,22,52,.54) 48%,rgba(12,22,52,.92) 100%)}
.hero .copy{position:relative;padding:90px 28px 46px;max-width:900px;color:#fff}
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#A9D2F2;margin:0 0 14px}
h1{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(38px,6.6vw,74px);line-height:1.02;
  letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance}
h1 em{font-style:italic;font-weight:600;color:#BFE0FA}
.hero .lede{font-size:clamp(17px,2.1vw,21px);line-height:1.55;max-width:48ch;color:#EDF2F7;margin:0 0 26px}

/* buttons */
.btnrow{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 26px;border-radius:999px;font-weight:700;font-size:16px;
  background:var(--red);color:#fff;text-decoration:none}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.btn.navy{background:var(--navy);color:#fff}
.btn.light{background:#fff;color:var(--navy)}

/* layout helpers */
.wrap{max-width:1120px;margin:0 auto;padding-inline:28px}
section.pad{padding-block:clamp(34px,5vw,64px)}
h2{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(28px,4.2vw,44px);line-height:1.05;
  letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance;color:var(--navy)}
h3{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(20px,2.6vw,26px);margin:0 0 10px;color:var(--navy)}
p{max-width:66ch;text-wrap:pretty}
h2 + p,h3 + p,.galtitle + p{text-wrap:balance}
.muted{color:var(--slate)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.facts li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.facts b{display:block;font-family:Fraunces,Georgia,serif;font-size:19px;color:var(--navy);margin-bottom:6px}
.facts span{font-size:15px;color:var(--slate)}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,52px);align-items:center}
.split .shot{border-radius:20px;overflow:hidden;aspect-ratio:4/5}
.split .shot img{width:100%;height:100%;object-fit:cover}

.band{background:var(--navy);color:#fff;text-align:center;padding:clamp(34px,5vw,64px) 28px}
.band p{font-family:Fraunces,Georgia,serif;font-weight:600;font-style:italic;
  font-size:clamp(24px,4.2vw,42px);line-height:1.1;margin:0 auto;max-width:24ch}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.grid figure,.grid a{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:1/1;display:block}
.grid figure.wide,.grid a.wide{aspect-ratio:2/1;grid-column:span 2}
.grid img{width:100%;height:100%;object-fit:cover}

.cta{background:var(--navy);color:#fff;border-radius:22px;padding:clamp(28px,4.4vw,52px);display:grid;gap:16px;justify-items:start}
.cta h2{color:#fff;margin:0}
.cta p{margin:0;color:#C9D9E8}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
a.card:hover,a.card:focus-visible{transform:translateY(-3px);border-color:#C9D3E6;box-shadow:0 14px 30px rgba(22,32,58,.12)}
.card h3{margin:0}
.card .more{font-weight:700;color:var(--sky)}
a.card:hover .more{text-decoration:underline}
@media (prefers-reduced-motion:reduce){ .card{transition:none} a.card:hover{transform:none} }
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card .body{padding:18px;display:grid;gap:8px}
.card .when{font-size:14px;color:var(--red);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.card a{font-weight:700;text-decoration:none}

.qa{display:grid;gap:18px}
.qa details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.qa summary{font-weight:700;cursor:pointer;color:var(--navy)}
.qa p{margin:10px 0 0}

.foot{border-top:1px solid var(--line);padding:26px 28px 44px;color:var(--slate);font-size:14px;line-height:1.7;background:var(--card)}
.foot strong{display:block;color:var(--navy);margin-bottom:6px}
.foot .social{display:flex;gap:16px;margin-top:12px}

@media (max-width:760px){ .split{grid-template-columns:1fr} .split .shot{aspect-ratio:3/2}
  .grid figure.wide{grid-column:span 1;aspect-ratio:1/1} }

/* one-card lists (What to bring) */
.facts ul.plain{margin:8px 0 0;padding-left:20px}
.facts ul.plain li{background:none;border:0;border-radius:0;padding:4px 0;font-size:16px;color:var(--slate);display:list-item}
/* keep riders' faces in frame on cropped card images */
.card img.face{object-position:center 28%}
.grid img{object-position:center 30%}
.onecard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;max-width:70ch}
.onecard b{display:block;font-family:Fraunces,Georgia,serif;font-size:19px;color:var(--navy);margin-bottom:6px}

/* even rows: four across on desktop, two on phones */
.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .grid{grid-template-columns:1fr} }

/* hero: keep riders' faces in the frame when the photo is cropped */
.hero .slides img{object-position:center 22%}

/* race pages */
.racehero{min-height:min(48vh,400px)}
.details{display:grid;gap:0;margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:70ch}
.details > div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:18px 22px;border-top:1px solid var(--line)}
.details > div:first-child{border-top:0}
.details dt{font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.06em;font-size:13px;margin:0}
.details dd{margin:0;color:var(--ink)}
@media (max-width:560px){ .details > div{grid-template-columns:1fr;gap:4px} }

/* race page: show the whole photo, never crop it */
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--red);margin:0 0 8px}
.racetitle{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(32px,5vw,54px);line-height:1.02;
  letter-spacing:-.02em;color:var(--navy);margin:0 0 22px}
.racepage{max-width:700px}
.textpage{max-width:760px}
.textpage .onecard,.textpage .cta{max-width:100%}
.racepage .details{max-width:100%}
.racephoto{margin:26px 0 0;border-radius:18px;overflow:hidden;background:var(--card);max-width:100%;display:flex;justify-content:center}
.racephoto img{width:auto;max-width:100%;max-height:560px;height:auto;display:block}
.racenav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-top:32px}
.racenav a{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;
  text-decoration:none;color:var(--navy);font-weight:700}
.racenav a span{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-bottom:4px}
.racenav a.prev{justify-self:start}
.racenav a.next{text-align:right;justify-self:end}
.racenav a.allraces{background:var(--navy);color:#fff;border:0;border-radius:999px;padding:15px 26px;justify-self:center;white-space:nowrap}
@media (max-width:700px){
  .racenav{grid-template-columns:1fr;justify-items:stretch}
  .racenav a{text-align:center}
  .racenav a.prev,.racenav a.next,.racenav a.allraces{justify-self:stretch;text-align:center}
  .racenav a.allraces{order:3}
}

/* video embeds */
.video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;max-width:960px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- race photo gallery + lightbox ---- */
.galtitle{margin:0 0 18px}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gallery a{display:block;border-radius:12px;overflow:hidden;background:var(--card);aspect-ratio:4/3;
  border:1px solid var(--line)}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;
  transition:transform .35s ease}
.gallery a:hover img,.gallery a:focus-visible img{transform:scale(1.05)}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} }

.lightbox{position:fixed;inset:0;background:rgba(10,14,26,.95);z-index:100;padding:26px;
  display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none!important}
.lightbox img{max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;cursor:pointer;
  border-radius:999px;font-size:30px;line-height:1;width:54px;height:54px;display:grid;place-items:center;
  transition:background .2s}
.lightbox button:hover{background:rgba(255,255,255,.28)}
.lbx{top:20px;right:20px;font-size:26px}
.lbp{left:20px;top:50%;transform:translateY(-50%)}
.lbn{right:20px;top:50%;transform:translateY(-50%)}
.lbc{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#c9d3e4;font-size:13px;
  letter-spacing:.1em;font-weight:700}
@media (max-width:560px){
  .lightbox{padding:12px}
  .lightbox button{width:44px;height:44px;font-size:24px}
  .lbp{left:6px} .lbn{right:6px} .lbx{top:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){ .gallery img{transition:none} }