/* ==========================================================================
   BITS at UW — stylesheet
   Official palette: Primary Blue, Light Teal, Husky Gold, White, Deep Navy.
   Dark sections (nav, hero, events, contact, join, footer) run on the navy
   background with a primary-blue-to-navy gradient for the hero and join
   bands; light sections (about, signup, team) stay white with a pale teal
   tint for secondary backgrounds.
   ========================================================================== */

:root {
  --primary: #1F7DFF;  /* brand primary blue */
  --teal:    #96D0E6;  /* brand accent #1 — light teal */
  --gold:    #B7A57A;  /* brand accent #2 — Husky Gold */
  --paper:   #FFFFFF;  /* brand neutral — white */
  --ink:     #050A1F;  /* brand background — deep navy; also default dark/text color */
  --deep:    #145DC2;  /* darker primary, for link hover + focus rings on light backgrounds */
  --grey:    #4B5563;
  --wash:    #EEF6FC;  /* pale teal tint for light section backgrounds */
  --rule:    #D7E6EF;  /* pale teal-grey border */
  --soft:    rgba(255,255,255,.72); /* muted body text on dark sections */

  --spectrum: linear-gradient(135deg, var(--primary) 0%, var(--ink) 100%);

  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --wrap: 1120px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.04; margin: 0; letter-spacing: -.02em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.nav :focus-visible,
.section-dark :focus-visible,
.footer :focus-visible { outline-color: var(--gold); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem;
}
.skip:focus { left: 0; }

/* ── Navigation ───────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.nav-inner {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem;
}

.nav-mark { margin-right: auto; display: block; }
.nav-mark img { height: 2rem; width: auto; }

.nav-links { display: flex; align-items: center; gap: 1.75rem; }

.nav-links a {
  color: var(--paper);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--gold); }

.nav-cta {
  background: var(--gold); color: var(--ink) !important;
  padding: .5rem 1rem !important; border-bottom: none !important;
}
.nav-cta:hover { background: var(--paper); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 2.5rem; height: 2.5rem; padding: .5rem;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; background: var(--paper); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); padding: .5rem var(--gutter) 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding-block: .85rem; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav-cta { margin-top: .85rem; text-align: center; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* Shortened: no wave graphic, no separate mission band — the mission
   statement lives inside the hero itself, under a thin divider. */

.hero {
  position: relative;
  background: var(--spectrum);
  color: var(--paper);
  padding-block: clamp(2.5rem, 5.5vw, 4rem);
}

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

.hero-logo {
  width: clamp(140px, 15vw, 190px);
  margin-bottom: clamp(1.1rem, 2.3vw, 1.5rem);
}

.hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 3.25rem);
  max-width: 22ch;
  color: var(--paper);
}

.hero-sub {
  margin-top: 1.1rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  color: var(--soft);
  max-width: 58ch;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.hero .btn-solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero .btn-solid:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hero .btn-ghost { color: var(--paper); border-color: var(--paper); }
.hero .btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  padding: .8rem 1.5rem;
  border: 2px solid var(--ink);
  transition: background-color .15s ease, color .15s ease;
}

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--paper); color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.section-dark .btn-solid { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.section-dark .btn-solid:hover { background: var(--paper); border-color: var(--paper); }

/* ── Generic sections ─────────────────────────────────────────────────── */

.section { padding-block: clamp(3.5rem, 9vw, 6rem); }

.section-dark { background: var(--ink); color: var(--paper); }
.section-dark a { color: var(--paper); }

.section-title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: 1.75rem;
  padding-left: 1.75rem;
  position: relative;
}

/* square connector, echoing the plug in the logo */
.section-title::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: .7rem; height: .7rem;
  background: var(--primary);
}
.section-dark .section-title::before { background: var(--gold); }

.lede { max-width: var(--measure); font-size: 1.0625rem; }
.section-dark .lede, .section-dark p { color: var(--soft); }

.sub-title { font-size: 1.3rem; margin-bottom: .6rem; }

/* ── Pillars ──────────────────────────────────────────────────────────── */

.pillars {
  list-style: none; margin: clamp(2.25rem, 5vw, 3.25rem) 0 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pillar { background: var(--paper); padding: 1.75rem 1.5rem 1.5rem; }
.pillar h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.pillar p { color: var(--grey); margin: 0; font-size: .9875rem; }

/* ── Events ───────────────────────────────────────────────────────────── */

.event-schedule {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--gold); margin-bottom: .75rem;
}

.event-note { font-size: 1.0625rem; margin-bottom: 0; max-width: 52ch; }

.event-instagram { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.event-list {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: clamp(2rem, 5vw, 2.75rem);
  border-top: 1px solid rgba(255,255,255,.14);
}

/* ── Email signup ─────────────────────────────────────────────────────── */

.section-signup { background: var(--wash); border-bottom: 1px solid var(--rule); }

.signup-btn { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ── Team ─────────────────────────────────────────────────────────────── */

.team {
  list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0;
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.member { border-top: 2px solid var(--ink); padding-top: 1.1rem; }

/* Each initials tile shows a different slice of the primary-to-navy gradient */
.member-mark {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: var(--spectrum);
  background-size: 500% 500%;
  color: var(--paper);
  margin-bottom: .9rem;
}
.member:nth-child(1) .member-mark { background-position: 0% 100%; }
.member:nth-child(2) .member-mark { background-position: 20% 80%; }
.member:nth-child(3) .member-mark { background-position: 40% 60%; }
.member:nth-child(4) .member-mark { background-position: 60% 40%; }
.member:nth-child(5) .member-mark { background-position: 80% 20%; }
.member:nth-child(6) .member-mark { background-position: 100% 0%; }

.member h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.member-role { color: var(--grey); font-size: .9375rem; margin-bottom: .45rem; }
.member a { font-size: .9375rem; text-decoration-color: var(--primary); text-underline-offset: 3px; }
.member a:hover { color: var(--deep); }

/* ── Instagram ────────────────────────────────────────────────────────── */

.insta-embed {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  min-height: 200px; /* keeps layout stable while the widget script loads */
}

/* ── Join ─────────────────────────────────────────────────────────────── */

.join {
  background: var(--spectrum);
  color: var(--paper);
  padding-block: clamp(3.5rem, 9vw, 5.5rem);
}

.join h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 1rem; color: var(--paper); }
.join p { color: var(--soft); max-width: 50ch; }

.join-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.75rem; }

.join-links a {
  font-family: var(--display); font-weight: 500; font-size: 1.05rem;
  text-decoration: none; padding-bottom: .25rem;
  border-bottom: 2px solid var(--paper);
  color: var(--paper);
}
.join-links a:hover { background: var(--paper); color: var(--ink); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer { background: var(--ink); color: var(--paper); padding-block: 2.75rem; }

.footer-inner { display: flex; flex-wrap: wrap; gap: 1.75rem 3rem; align-items: center; }

.footer-logo { width: 110px; }

.footer-meta p { margin: 0 0 .2rem; font-size: .9375rem; color: var(--soft); }
.footer-fine { color: rgba(255,255,255,.45) !important; margin-top: .6rem !important; }