/* UCSB Department of Recreation — replica styling.
   Their site is white, set in Nunito Sans, with UCSB navy rgb(0,54,96) for the top bar and
   navigation, link blue rgb(0,90,163), and UCSB gold for calls to action. */

:root{
  --navy:  #003660;
  --navy-d:#002544;
  --gold:  #febc11;
  --link:  #005aa3;
  --ink:   #111517;
  --text:  #3d4952;
  --muted: #6b7680;
  --line:  #e3e7eb;
  --wash:  #f4f6f8;
}
*{ box-sizing:border-box }
body{ margin:0; background:#fff; color:var(--text); font:16px/1.6 "Nunito Sans", ui-sans-serif, system-ui, sans-serif }
a{ color:var(--link) }
h1,h2,h3{ color:var(--ink); font-weight:800; line-height:1.2 }
h1{ font-size:40px; margin:0 0 14px }
h2{ font-size:27px; margin:34px 0 10px }
h3{ font-size:20px; margin:22px 0 6px }

.preview-note{ background:#111820; color:#e8eef5; font-size:13px; line-height:1.5; padding:10px 16px; text-align:center }
.preview-note b{ color:var(--gold) }
.preview-note a{ color:#fff }

.topbar{ background:var(--navy); color:#fff; font-size:13px }
.topbar .in{ max-width:1200px; margin:0 auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; min-height:36px }
.topbar .register{ background:var(--gold); color:var(--navy-d); font-weight:700; text-decoration:none; padding:9px 18px; text-transform:uppercase; font-size:12.5px; letter-spacing:.04em }

header.site{ border-bottom:1px solid var(--line) }
header.site .in{ max-width:1200px; margin:0 auto; padding:18px 16px 0 }
.wordmark{ display:block; color:var(--navy); text-decoration:none; font-size:26px; line-height:1.1; margin-bottom:14px }
.wordmark small{ display:block; font-size:14px; letter-spacing:.06em; margin-bottom:3px }
nav.site{ display:flex; gap:22px; flex-wrap:wrap; border-top:1px solid var(--line); padding:10px 0 }
nav.site a{ color:var(--navy); text-decoration:none; font-size:15px; padding:4px 0; border-bottom:2px solid transparent }
nav.site a.here{ border-bottom-color:var(--navy) }
nav.strip{ max-width:1200px; margin:0 auto; padding:8px 16px; display:flex; gap:6px; flex-wrap:wrap; background:var(--wash) }
nav.strip a{ font-size:13.5px; text-decoration:none; color:var(--navy); padding:4px 10px; border-radius:999px }
nav.strip a.on{ background:var(--navy); color:#fff }

.hero{ height:300px; background:#5ea8d6 url("https://recreation.ucsb.edu/sites/default/files/2022-10/W22_Swimming-19%201_0.png") center 60%/cover }
main{ max-width:1200px; margin:0 auto; padding:22px 16px 40px }
.crumb{ font-size:13px; color:var(--muted); margin:0 0 18px }

.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:16px 0 }
.facts div{ background:var(--wash); border-top:4px solid var(--navy); padding:12px 14px; font-size:14.5px }
.facts b{ display:block; color:var(--ink); font-size:18px; margin-bottom:2px }

.cal-head{ display:flex; align-items:center; gap:10px; margin-top:30px }
.cal-head h2{ margin:0 }
.live{ background:var(--gold); color:var(--navy-d); font-size:11px; font-weight:800; letter-spacing:.05em; border-radius:3px; padding:2px 8px; text-transform:uppercase }
.sub{ color:var(--muted); margin:6px 0 10px }
.frame{ border:1px solid var(--line); height:660px }
.frame iframe{ width:100%; height:100%; border:0; display:block }
.cal-foot{ font-size:13.5px; color:var(--muted); margin:6px 0 0 }

.finding{ background:#fff8e1; border-left:5px solid var(--gold); padding:12px 16px; margin:18px 0; font-size:14.5px }
.finding ul{ margin:6px 0 0; padding-left:20px }
.est{ background:#fff1c2; padding:0 3px }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:10px }
.card{ border:1px solid var(--line); padding:14px 16px }
.card h3{ margin-top:0; font-size:18px }
.btn{ display:inline-block; background:var(--navy); color:#fff; text-decoration:none; padding:10px 18px; font-weight:700; font-size:14px }
.btn.gold{ background:var(--gold); color:var(--navy-d) }

footer.site{ background:var(--navy); color:#d8e3ee; font-size:14px }
footer.site .in{ max-width:1200px; margin:0 auto; padding:28px 16px; display:flex; gap:48px; flex-wrap:wrap }
footer.site b{ display:block; color:#fff; margin-bottom:6px }
footer.site a{ color:#fff }
footer.site .fine{ max-width:1200px; margin:0 auto; padding:0 16px 22px; font-size:12px; color:#a8bdd1 }

@media (max-width:760px){
  h1{ font-size:30px }
  .hero{ height:180px }
  .frame{ height:600px }
  nav.site{ gap:14px }
}