/* ============================================================
   AADE — TEXAS A&M STUDENT SECTION
   Design system + styles. Hand-written CSS, no build step.

   CONCEPT: The page is a wellbore. Scrolling is drilling.
   Sections are sited at measured depths; the right-hand rail
   is a depth gauge; the Sponsors section is the horizontal
   lateral, exactly how a modern shale well is drilled.

   PALETTE: white paper and Texas A&M maroon, carrying the
   institutional weight of the university. Maroon does all of
   the accent work; there is deliberately no third colour.
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */
:root {
  /* Ground */
  --paper:      #ffffff;
  --stone:      #f4f3f1;   /* alternating band. Cool-neutral, not cream. */
  --stone-deep: #ebe9e6;

  /* Brand */
  --maroon:      #500000;   /* official Texas A&M maroon */
  --maroon-deep: #380000;
  --maroon-lift: #6b1119;   /* hover / gradient lift only */

  /* Ink */
  --ink:    #1b1719;   /* body text, warm near-black */
  --muted:  #6b6560;   /* secondary text */
  --faint:  #97918b;   /* tertiary, captions */
  --rule:   #dad6d2;   /* hairlines */

  /* Type */
  --display: 'Source Serif 4', 'Times New Roman', Georgia, serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --wordmark:'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* Scale */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.55rem);
  --step-2:  clamp(1.85rem, 1.5rem + 1.5vw, 3rem);
  --step-3:  clamp(2.4rem, 1.9rem + 2.6vw, 4.2rem);
  --step-4:  clamp(2.7rem, 1.9rem + 4.4vw, 6.2rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --rail:   clamp(0px, 6vw, 92px);
  --section-y: clamp(5rem, 11vh, 9rem);

  --maxw: 1240px;
  --radius: 3px;            /* near-square. Institutional, not app-like. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 1px 2px rgba(27,23,25,0.04), 0 8px 24px rgba(27,23,25,0.06);
  --shadow-lift: 0 2px 4px rgba(27,23,25,0.06), 0 16px 40px rgba(27,23,25,0.10);
}

/* Inverted context: applied to the full-bleed maroon bands.
   Children that use the tokens adapt automatically. */
.invert {
  --ink:   #ffffff;
  --muted: rgba(255,255,255,0.80);
  --faint: rgba(255,255,255,0.60);
  --rule:  rgba(255,255,255,0.24);
  --paper: transparent;
  color: #fff;
  background: var(--maroon);
}

/* ---------- 2. RESET / BASE ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 3px;
  border-radius: 2px;
}
.invert :focus-visible { outline-color: #fff; }

::selection { background: var(--maroon); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--maroon); color: #fff; padding: 0.75rem 1.25rem;
  font-family: var(--mono); font-size: var(--step--1); font-weight: 600;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

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

section { position: relative; }
.section-pad { padding-block: var(--section-y); }

/* Eyebrow encodes the drilling phase, not decoration. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--maroon);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.invert .eyebrow { color: rgba(255,255,255,0.85); }
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.6;
}

.section-title { font-size: var(--step-2); margin-bottom: 1.1rem; }
.lede {
  color: var(--muted);
  max-width: 60ch;
  font-size: var(--step-1);
  line-height: 1.55;
  margin: 0;
}

/* ---------- 4. DEPTH GAUGE RAIL --------------------------- */
/* The signature element. Reads like a surveyor's instrument. */
.gauge {
  position: fixed;
  top: 0; right: 0;
  width: var(--rail);
  height: 100vh;
  z-index: 40;
  pointer-events: none;
  display: none;
  border-left: 1px solid var(--rule);
  background: var(--paper);
}
@media (min-width: 1024px) { .gauge { display: block; } }

.gauge-readout {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--maroon);
  white-space: nowrap;
}

.gauge-ticks { position: absolute; inset: 0; }
.gauge-tick {
  position: absolute;
  right: 0;
  width: 9px; height: 1px;
  background: var(--rule);
}
.gauge-tick.major { width: 18px; background: #bdb7b1; }

.gauge-bit {
  position: absolute;
  right: calc(var(--rail) / 2);
  width: 8px; height: 8px;
  margin-right: -4px;
  background: var(--maroon);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(80, 0, 0, 0.12);
  transition: top 0.08s linear;
}

/* ---------- 5. HEADER / NAV ------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 0.9rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.header.scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 12px rgba(27,23,25,0.05);
}
@media (min-width: 1024px) { .header { padding-right: calc(var(--rail) + 1rem); } }

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }

/* Wordmark rebuilt in type rather than using the low-res screenshot.
   Mirrors the official lockup: condensed gothic "AADE", the maroon
   rule that hooks under it, and the section line beneath.
   TODO: swap for the official vector when the chapter supplies it. */
.brand-mark { display: block; line-height: 1; }
.brand-aade {
  display: block;
  font-family: var(--wordmark);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.brand-aade::first-letter { color: var(--maroon); }
.brand-rule {
  display: block;
  height: 2px; width: 100%;
  background: var(--maroon);
  margin: 3px 0;
}
.brand-sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.nav { display: none; gap: 0.15rem; align-items: center; }
@media (min-width: 980px) { .nav { display: flex; } }

.nav a {
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  transition: color 0.25s;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.25rem;
  height: 1px;
  background: var(--maroon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: var(--maroon); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}

.btn-primary, .btn-amber {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}
.btn-primary:hover, .btn-amber:hover {
  background: var(--maroon-lift);
  border-color: var(--maroon-lift);
  box-shadow: 0 4px 16px rgba(80,0,0,0.22);
}

.btn-ghost {
  border-color: var(--maroon);
  color: var(--maroon);
  background: transparent;
}
.btn-ghost:hover { background: var(--maroon); color: #fff; }

/* On maroon bands the buttons invert */
.invert .btn-primary, .invert .btn-amber {
  background: #fff; color: var(--maroon); border-color: #fff;
}
.invert .btn-primary:hover, .invert .btn-amber:hover {
  background: var(--stone); border-color: var(--stone); box-shadow: none;
}
.invert .btn-ghost { border-color: rgba(255,255,255,0.55); color: #fff; }
.invert .btn-ghost:hover { background: #fff; color: var(--maroon); border-color: #fff; }

/* Mobile menu */
.menu-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
@media (min-width: 980px) { .menu-btn { display: none; } }

/* Header CTA. At phone widths "Become a member" is ~176px wide but
   only ~111px is left beside the wordmark and the menu button, so the
   hamburger was pushed off the right edge. Swap to a short label and
   tighten the spacing instead of letting the header overflow. */
.cta-compact { display: none; }
@media (max-width: 560px) {
  .header { gap: 0.55rem; padding-inline: 1rem; }
  .header .cta-full { display: none; }
  .header .cta-compact { display: inline; }
  .header-cta { padding: 0.62rem 1.05rem; font-size: 0.8rem; }
  .brand-sub { font-size: 0.47rem; letter-spacing: 0.09em; }
  .brand-aade { font-size: 1.5rem; }
  .menu-btn { width: 38px; height: 38px; flex: none; }
}

.drawer {
  position: fixed; inset: 0;
  z-index: 60;
  background: var(--maroon);
  display: grid;
  place-content: center;
  gap: 0.25rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer a {
  font-family: var(--display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  text-align: center;
  padding: 0.35rem 2rem;
  transition: opacity 0.2s;
}
.drawer a:hover { opacity: 0.65; }
.drawer-close {
  position: absolute; top: 1rem; right: var(--gutter);
  width: 44px; height: 44px;
  background: none; border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius); color: #fff; cursor: pointer;
  font-size: 1.5rem; line-height: 1;
}

/* ---------- 6. HERO --------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}

#bit-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
#bit-canvas.ready { opacity: 1; }

/* Phone opacity. The bit passes behind the tail of the headline and
   the first line of body copy. 0.32 read as washed out and 0.55 was
   still light, so this sits at 0.78 — a deliberate call that a solid
   bit is worth the busier overlap, since the only word affected is
   the end of "making."

   Owned here rather than in JS: layoutBit() runs before the .ready
   class is applied, so an inline opacity written there pinned the
   canvas at 0 and the bit never faded in at all. */
@media (max-width: 759px) {
  #bit-canvas.ready { opacity: 0.78; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 7.5rem 3rem;
}

.hero h1 {
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
  max-width: 15ch;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: block;
  transform: translateY(105%);
  animation: rise 1.05s var(--ease) forwards;
}
.hero h1 .line:nth-child(2) > span { animation-delay: 0.09s; }
@keyframes rise { to { transform: translateY(0); } }

.hero h1 em {
  font-style: italic;
  color: var(--maroon);
}

.hero-sub {
  max-width: 52ch;
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.55;
  margin: 0 0 2.25rem;
  opacity: 0;
  animation: fade 0.9s var(--ease) 0.5s forwards;
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  opacity: 0;
  animation: fade 0.9s var(--ease) 0.68s forwards;
}
@keyframes fade { to { opacity: 1; } }

/* Chapter figures as a driller's parameter readout */
.params {
  position: relative;
  margin-top: auto;
  z-index: 2;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}
@media (min-width: 760px) { .params-grid { grid-template-columns: repeat(3, 1fr); } }

.param {
  padding: 1.25rem 1.25rem 1.25rem 0;
  border-right: 1px solid var(--rule);
}
.param:last-child { border-right: 0; }
@media (max-width: 759px) {
  .param:nth-child(2n) { border-right: 0; }
  .param:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
.param dt {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.35rem;
}
.param dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--maroon);
  line-height: 1;
}
.param dd span { font-size: 0.8rem; color: var(--faint); margin-left: 0.2rem; font-family: var(--body); }

/* ---------- 7. STRATA DIVIDER ----------------------------- */
/* Formation bands mark the boundary between depths. */
.strata { height: 3px; display: flex; }
.strata i { flex: 1; }
.strata i:nth-child(1) { background: var(--maroon); flex: 3; }
.strata i:nth-child(2) { background: var(--stone-deep); flex: 5; }
.strata i:nth-child(3) { background: var(--maroon-deep); flex: 1; }
.strata i:nth-child(4) { background: var(--rule); flex: 4; }
.strata i:nth-child(5) { background: var(--maroon); flex: 2; }

/* ---------- 8. CARD --------------------------------------- */
/* Class name kept from the dark build so markup does not change. */
.glass {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.glass:hover {
  border-color: #c3bdb7;
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}
.invert .glass {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.24);
}
.invert .glass:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.45);
  box-shadow: none;
}

/* ---------- 9. ABOUT -------------------------------------- */
.about { background: var(--paper); }
.about-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.05fr 0.95fr; } }

.about-body { color: var(--muted); margin-top: 1.25rem; }

.about-figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--rule);
}
.about-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.about-figure figcaption {
  padding: 0.9rem 1.1rem;
  background: var(--stone);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  margin-top: 2.25rem;
}
/* .stat-row / .stat are currently unused — the About stats were
   removed — but kept as a component in case stats return. */
.stat { padding: 1.4rem 1rem 0 0; }
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 600;
  color: var(--maroon);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.stat span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- 10. PROGRAMS / EVENTS ------------------------- */
.programs { background: var(--stone); }
.program-list { display: grid; gap: 1.25rem; margin-top: 3rem; }

.program {
  display: grid;
  overflow: hidden;
  align-items: stretch;
}
@media (min-width: 800px) {
  .program { grid-template-columns: 0.9fr 1.1fr; }
  .program:nth-child(even) .program-media { order: 2; }
}

.program-media { position: relative; overflow: hidden; min-height: 250px; background: var(--stone-deep); }
.program-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.program:hover .program-media img { transform: scale(1.04); }

.program-body {
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  display: flex; flex-direction: column; justify-content: center;
}
.program-tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--maroon);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 0.28rem 0.75rem;
  margin-bottom: 1.1rem;
}
.program-body h3 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.program-body p { color: var(--muted); margin: 0; }

/* ---------- 11. TEAM -------------------------------------- */
.team { background: var(--paper); }
.team-group { margin-top: 3rem; }
.team-group h3 {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.75rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 1rem;
}

/* On a phone, auto-fill with a 178px minimum only ever fits ONE
   column, so every headshot filled the screen and the board became
   an endless scroll. Force two up instead; desktop is untouched. */
@media (max-width: 700px) {
  /* NOTE: .team-grid-faculty is redefined further down (section 12c),
     so its mobile override lives there instead — at equal specificity
     the later rule wins and an override placed here is ignored. */
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .officer { padding: 0.7rem; }
  .officer h4 { font-size: 0.92rem; line-height: 1.25; }
  .officer p  { font-size: 0.58rem; letter-spacing: 0.03em; }
  .officer-photo { margin-bottom: 0.7rem; }
  .monogram { font-size: 1.5rem; }
}

.officer { padding: 1rem; text-align: left; }
.officer-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--stone);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
}
.officer-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder monogram: deliberate, not a broken-image box */
.monogram {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  color: #bdb7b1;
}
.officer[data-placeholder="true"] .officer-photo {
  background-image: repeating-linear-gradient(45deg, rgba(27,23,25,0.022) 0 8px, transparent 8px 16px);
}

.officer h4 { font-size: 1.08rem; font-weight: 600; margin-bottom: 0.25rem; }
.officer p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--maroon);
  line-height: 1.45;
}

.photo-note {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
}

/* ---------- 12. JOIN (maroon band) ------------------------ */
.join { background: var(--maroon); }
.join-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .join-grid { grid-template-columns: 1fr 1fr; align-items: center; } }

.join-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.85rem; }
.join-list li { display: flex; gap: 0.85rem; align-items: flex-start; color: var(--muted); }
.join-list svg { flex: none; margin-top: 0.3rem; color: #fff; opacity: 0.9; }

.join-card { padding: clamp(1.6rem, 4vw, 2.5rem); }
.join-card h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.price {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  font-weight: 600;
  line-height: 1;
  margin: 1.25rem 0 0.25rem;
}
.price small {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-top: 0.7rem;
}

/* ---------- 12b. GROUPME QR ------------------------------- */
/* Sits low in the hero so a student in the room can scan it
   without scrolling. Quiet: it must not fight the headline. */
.groupme {
  position: relative;
  z-index: 3;
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin: 0 auto 1.75rem;
}
.groupme-inner {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem 0.85rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
a.groupme-inner:hover { border-color: var(--maroon); box-shadow: var(--shadow-lift); }

.groupme-code {
  flex: none;
  width: 84px; height: 84px;
  border-radius: 8px;          /* soft corners, per the brief */
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
}
.groupme-qr { width: 100%; height: 100%; object-fit: contain; }

.groupme-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 0.3rem;
}
.groupme-copy p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 34ch;
  line-height: 1.5;
}
@media (max-width: 620px) {
  .groupme-inner { gap: 0.85rem; padding: 0.7rem 1rem 0.7rem 0.7rem; }
  .groupme-code { width: 66px; height: 66px; }
  .groupme-copy p { font-size: 0.8rem; }
}

/* ---------- 12c. TEAM PHOTO + FACULTY --------------------- */
.team-photo {
  margin: 2.75rem 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.team-photo img { width: 100%; height: auto; display: block; }
.team-photo figcaption {
  padding: 0.85rem 1.1rem;
  background: var(--stone);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* Faculty sponsor gets one card, not a full row of them */
.team-grid-faculty { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.team-grid-faculty .officer { max-width: 260px; }

/* Must come AFTER the rule above, not with the other team mobile
   rules, or source order cancels it out. Keeps the faculty card the
   same width as the board cards beside it on a phone. */
@media (max-width: 700px) {
  .team-grid-faculty { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .team-grid-faculty .officer { max-width: none; }
}

/* ---------- 13. CALENDAR (the lateral) -------------------- */
.calendar { background: var(--stone); }
.cal {
  display: grid;
  margin-top: 3rem;
  overflow: hidden;
  background: var(--paper);
}
@media (min-width: 860px) { .cal { grid-template-columns: 290px 1fr; } }
.cal:hover { transform: none; box-shadow: var(--shadow); border-color: var(--rule); }

/* Left rail: the selected day */
.cal-side {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--stone);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .cal-side { border-bottom: 0; border-right: 1px solid var(--rule); }
}
.cal-side-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 0.6rem;
}
.cal-side-date {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}
.cal-empty {
  margin: 0;
  color: var(--faint);
  font-size: 0.92rem;
}
.cal-count {
  margin: 0 0 0.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.cal-list li {
  display: grid;
  gap: 0.15rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--maroon);
}
.cal-time {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--maroon);
}
.cal-name { font-weight: 600; font-size: 0.95rem; }
.cal-where { font-size: 0.82rem; color: var(--faint); }

/* Right: the month grid */
.cal-main { padding: clamp(1.25rem, 3vw, 1.85rem); }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cal-head h3 { font-size: var(--step-1); font-weight: 600; }
.cal-nav { display: flex; align-items: center; gap: 0.35rem; }
.cal-nav button {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.cal-nav button:hover { border-color: var(--maroon); color: var(--maroon); }
#cal-today { padding-inline: 0.85rem; }

.cal-dow, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-dow {
  margin-bottom: 6px;
}
.cal-dow span {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 0.4rem;
}

.cal-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  font-family: var(--body);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.cal-blank { cursor: default; }
button.cal-cell:hover { background: var(--stone-deep); }
.cal-cell.is-today { font-weight: 700; color: var(--maroon); }
.cal-cell.is-today::after {
  content: "";
  position: absolute;
  bottom: 14%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--maroon);
}
.cal-cell.is-selected {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
  font-weight: 600;
}
.cal-cell.is-selected::after { background: #fff; }
/* Days carrying events get a marker so the grid is scannable */
.cal-cell.has-events { border-color: var(--rule); font-weight: 600; }

/* ---------- 13b. SPONSORS (retained, currently unused) ---- */
.sponsors { background: var(--stone); }

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: 1.6rem;
  margin-block: 3rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: slide 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.sponsor-mark {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s;
}
.sponsor-mark:hover { color: var(--maroon); }

/* Placeholder state while the sponsor list is empty */
.marquee-empty { -webkit-mask-image: none; mask-image: none; }
.marquee-empty .marquee-track {
  animation: none;
  width: 100%;
  justify-content: center;
}
.sponsor-placeholder {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.tier-grid { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }

.tier { padding: 1.9rem; display: flex; flex-direction: column; }
.tier[data-tier="Platinum"] { border-color: var(--maroon); border-width: 1px; }
.tier h3 { font-size: var(--step-1); margin-bottom: 1.1rem; }
.tier .amount {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--maroon);
  margin-bottom: 1.1rem;
  display: block;
}
.tier ul { list-style: none; padding: 0; margin: 0 0 1.9rem; display: grid; gap: 0.7rem; }
.tier li {
  color: var(--muted);
  font-size: 0.94rem;
  padding-left: 1.15rem;
  position: relative;
  line-height: 1.5;
}
.tier li::before {
  content: "";
  position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 1px;
  background: var(--maroon);
}
.tier .btn { margin-top: auto; }

/* ---------- 14. RESOURCES --------------------------------- */
.resources { background: var(--paper); }
.res-grid { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 700px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }

.res {
  padding: clamp(1.75rem, 3.5vw, 2.4rem);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.res h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.res p { color: var(--muted); margin: 0; font-size: 1rem; line-height: 1.6; }

.res-link { text-decoration: none; color: inherit; cursor: pointer; }
.res-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--maroon);
}
.res-cta svg { transition: transform 0.3s var(--ease); }
.res-link:hover .res-cta svg { transform: translate(2px, -2px); }

/* ---------- 14b. MERCH ------------------------------------ */
/* Deliberately the quietest section on the page: one line and
   one action. It should not compete with Join or Sponsorship. */
.merch { background: var(--stone); }
.merch-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  align-items: flex-end;
  justify-content: space-between;
}
.merch-inner .section-title { margin-bottom: 0.6rem; }
.merch-action { flex: none; }
.merch-soon {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 0.8rem 1.4rem;
}

/* ---------- 15. CONTACT (maroon band) + FOOTER ------------ */
.contact { background: var(--maroon); }
.contact-cards { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 700px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }

.contact-card { padding: 1.9rem; }
.contact-card .role {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.6rem;
}
.contact-card h3 { font-size: var(--step-1); margin-bottom: 0.8rem; }
.contact-card a {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  padding-bottom: 2px;
  word-break: break-all;
  transition: border-color 0.25s;
}
.contact-card a:hover { border-color: #fff; }

/* Social cards sit under the two officer contacts */
.social-card { padding: 1.9rem; text-decoration: none; display: block; color: inherit; }
.social-card .role { display: flex; align-items: center; gap: 0.5rem; }
.social-card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; word-break: break-word; }
.social-card .social-bio {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}
.social-card .social-soon {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.social-card .social-go {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.social-card .social-go svg { transition: transform 0.3s var(--ease); }
.social-card:hover .social-go svg { transform: translate(2px, -2px); }

.footer {
  padding-block: 2.75rem 2.25rem;
  background: var(--maroon-deep);
  color: rgba(255,255,255,0.72);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
}
.footer p { margin: 0; font-size: 0.82rem; line-height: 1.7; }
.footer strong { color: #fff; font-weight: 600; }
.footer-meta { text-align: right; }
.footer-td {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.footer-credit {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.42);
  margin-top: 0.4rem !important;
  line-height: 1.8;
}
.footer-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  padding-bottom: 1px;
  transition: color 0.25s, border-color 0.25s;
}
.footer-credit a:hover {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.6);
}

/* ---------- 16. SCROLL REVEAL ----------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }

/* ---------- 17. REDUCED MOTION ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
  .hero-sub, .hero-cta { opacity: 1; }
  .marquee-track { animation: none; }
}

/* ---------- 18. PRINT ------------------------------------- */
@media print {
  .gauge, .header, #bit-canvas, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
  .join, .contact { background: #fff !important; color: #000 !important; }
}