/* Railside Robotics site styles
   One stylesheet for every page. Shared pieces come first, then page sections, then the footer.
   Breakpoints used throughout: 940px (desktop nav vs. mobile menu), 850px and 680px (layouts stack).
   After editing this file, bump the ?v= number in every page's <link> so browsers load the new copy. */

/* ---------- Global ---------- */

:root {
  --bg: #101311;
  --panel: #191c19;
  --line: #41453d;
  --gold: #f6c441;
  --white: #f7f7f1;
  --dim: #bdc0b7;
  --gutter: clamp(22px, 5vw, 84px); /* side margin shared by most sections */
}
* { box-sizing: border-box; }
/* clip, not hidden: stops sideways scrolling without breaking position: sticky or scroll anchoring */
html { width: 100%; max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; overflow-x: clip; margin: 0; background: var(--bg); color: var(--white); font: 16px/1.55 Barlow, Arial, sans-serif; }
main { width: 100%; min-width: 0; }
a { color: inherit; }
p { max-width: 690px; }
h1, h2, h3 { font-family: 'Barlow Condensed', Impact, sans-serif; line-height: .97; margin: 0; letter-spacing: .01em; }
h1 { font-size: clamp(66px, 8vw, 132px); font-weight: 900; }
h2 { font-size: clamp(36px, 4.2vw, 66px); font-weight: 800; }
h3 { font-size: clamp(21px, 2.2vw, 32px); font-weight: 800; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 em { font-style: normal; color: var(--gold); }
.eyebrow { color: var(--gold); font-weight: 800; font-size: 12px; letter-spacing: .19em; text-transform: uppercase; margin-bottom: 16px; }

/* ---------- Buttons ---------- */

.btn { display: inline-flex; gap: 36px; align-items: center; justify-content: space-between; padding: 13px 20px; border: 1px solid var(--gold); text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-decoration: none; color: var(--gold); transition: .2s; }
.btn:hover { background: var(--gold); color: #121510; }
.btn.solid { background: var(--gold); color: #111; }
.btn.solid:hover { background: #ffe089; }

/* ---------- Header and navigation ----------
   The header markup is copied into every page. Desktop (941px and up) shows the links in a row with
   hover dropdowns; 940px and below shows the Menu button and a stacked list (script.js toggles .open). */

.header { position: relative; z-index: 100; height: 76px; background: #0b0e0c; border-bottom: 1px solid #494b43; }
.nav-wrap { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 36px; width: 100%; height: 100%; margin: auto; padding: 0 clamp(24px, 4.2vw, 72px); }
.logo { flex: 0 0 auto; display: flex; align-items: center; }
.logo img { display: block; width: clamp(154px, 13.7vw, 190px); height: auto; max-height: 56px; object-fit: contain; object-position: left center; }
.menu-toggle { display: none; background: none; color: white; border: 1px solid var(--line); padding: 10px 14px; }

.links { flex: 1; min-width: 0; height: 100%; display: flex; align-items: stretch; justify-content: flex-end; gap: clamp(20px, 2.6vw, 45px); }
/* Top-level links (Home, Our Sponsors, Contact Us) */
.links > .nav-link { position: relative; display: flex; align-items: center; height: 100%; padding: 0; color: #f3f2ec; font-size: 14px; font-weight: 600; letter-spacing: .005em; text-decoration: none; white-space: nowrap; }
.links .nav-link:hover, .links .nav-link.active { color: var(--gold); }
/* Gold underline under the current page's tab */
.links > .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--gold); }

/* Dropdown groups (About Us, Railside Rumble). The heading is a button; each group's first link is "Overview". */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-head { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; }
.nav-group-head > .nav-trigger { display: inline-flex; align-items: center; gap: 10px; height: 100%; padding: 0; border: 0; background: none; color: #f3f2ec; font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.nav-group-head > .nav-trigger:hover, .nav-group.active-group .nav-trigger, .nav-group.open .nav-trigger { color: var(--gold); }
.nav-trigger svg { flex-shrink: 0; transition: transform .18s ease; }
.nav-group.open .nav-trigger svg { transform: rotate(180deg); }

.dropdown { display: none; position: absolute; z-index: 120; top: calc(100% - 1px); left: 0; min-width: 210px; margin: 0; padding: 5px 0; background: #171b18; border: 1px solid #41463e; box-shadow: 0 16px 28px rgba(0, 0, 0, .34); }
.dropdown .nav-link { display: block; padding: 12px 19px; color: #f1f0e9; font-size: 13px; font-weight: 550; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.dropdown .nav-link:hover, .dropdown .nav-link.active { background: #262c24; color: var(--gold); }

@media (min-width: 941px) {
  /* Menus open on hover or keyboard focus; script.js adds .open so the arrow and aria-expanded match */
  .nav-group:hover .dropdown, .nav-group:focus-within .dropdown, .nav-group.open .dropdown { display: block; }
  .nav-group:hover > .nav-group-head > .nav-trigger svg,
  .nav-group:focus-within > .nav-group-head > .nav-trigger svg { transform: rotate(180deg); }
  /* The active group gets the gold underline, except while its menu is open */
  .nav-group.active-group > .nav-group-head > .nav-trigger { box-shadow: inset 0 -3px 0 var(--gold); }
  .nav-group.active-group:is(:hover, :focus-within, .open) .nav-group-head > .nav-trigger { box-shadow: none; }
}
@media (max-width: 1050px) {
  /* Leftover from an older layout. Between 941px and 1050px the padding lifts the tab underline
     18px off the bottom of the header. Kept as is so the site looks the same. */
  .links { flex-wrap: wrap; padding-bottom: 18px; }
}
@media (min-width: 941px) and (max-width: 1120px) {
  .nav-wrap { padding-inline: 26px; gap: 24px; }
  .links { gap: 16px; }
  .links > .nav-link { font-size: 12.5px; }
}
@media (max-width: 940px) {
  .header { height: auto; min-height: 72px; }
  .nav-wrap { min-height: 72px; flex-wrap: wrap; gap: 0; }
  .menu-toggle { display: block; margin-left: auto; cursor: pointer; }
  .links { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; width: 100%; height: auto; gap: 0; padding: 12px 0 18px; border-top: 1px solid #363d35; }
  .links.open { display: flex; }
  .links > .nav-link { height: auto; padding: 13px 8px; }
  .links > .nav-link.active::after { display: none; }
  .nav-group { display: block; }
  .nav-group-head { height: auto; justify-content: space-between; }
  .nav-group-head > .nav-trigger { width: 100%; height: auto; justify-content: space-between; padding: 13px 8px; text-align: left; }
  /* Submenus open only on tap */
  .nav-group.open .dropdown { display: block; }
  .dropdown { position: static; margin: 0 0 8px 10px; box-shadow: none; border: 0; border-left: 2px solid var(--line); }
}

/* ---------- Page heroes ----------
   .hero is the split hero (text on the left, photo on the right) used on most pages.
   .home-hero fills the first screen; .inner-hero is the shorter version on inner pages. */

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; width: 100%; min-width: 0; border-bottom: 1px solid var(--line); }
.hero > * { min-width: 0; min-height: 0; }
.home-hero { min-height: calc(100svh - 76px); }
.inner-hero { min-height: clamp(370px, 51svh, 540px); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: start; padding: clamp(36px, 5vw, 82px) var(--gutter); background: linear-gradient(90deg, #101311, #171a17); }
.inner-hero .hero-copy { padding-block: clamp(45px, 5vw, 78px); }
.hero-copy h1 { max-width: 100%; overflow-wrap: normal; font-size: clamp(55px, 7.4vw, 118px); }
.inner-hero .hero-copy h1 { font-size: clamp(54px, 6.3vw, 96px); line-height: 1; }
.inner-hero h3 { color: var(--gold); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.07; margin-top: 20px; }
.hero-copy p { font-size: 18px; line-height: 1.57; color: #e1e2d9; margin: 23px 0; }
.inner-hero .hero-copy p { font-size: 16px; }

/* ---------- Photo slots ----------
   A .photo-slot holds a page photo. Without a photo it shows its label text as a placeholder.
   Add .has-photo and an <img> inside, and the image fills the slot without changing its size
   (the .has-photo rules are further down, after the page sections, so they win over page padding). */

.photo-slot { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; height: 100%; max-width: 100%; min-height: 260px; padding: 24px; background: linear-gradient(135deg, #232823, #1b211c); border: 1px solid #45493f; color: #a4aa9c; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-align: center; }
.hero > .photo-slot { align-self: stretch; width: 100%; height: 100%; min-height: 0; border: 0; border-left: 1px solid var(--line); }

/* ---------- Shared sections ---------- */

.section { width: 100%; min-width: 0; margin: 0; padding: clamp(56px, 6vw, 94px) var(--gutter); border-bottom: 1px solid var(--line); }
.section h2 { margin-bottom: 27px; }
.section > h2 { line-height: 1.04; margin: 0 0 28px; }
.split-section { display: grid; grid-template-columns: 110px 1fr; gap: 30px; width: 100%; padding: 67px 7vw; border-bottom: 1px solid var(--line); }
.split-section p { max-width: 900px; }
.icon-large { font-size: 75px; color: var(--gold); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.two-col > * { min-width: 0; }
.dark-bottom { background: #151815; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* ---------- Home ---------- */

/* Four pillars under the hero (Build, Compete, Learn, Impact) */
.four-icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: 100%; padding: 0 var(--gutter); background: #141815; border-bottom: 1px solid var(--line); }
.four-icons > div { min-width: 0; padding: 32px 18px; text-align: center; border: 0; }
.line-icon { color: var(--gold); font-size: 30px; line-height: 1.1; }
.four-icons .line-icon { display: flex; align-items: center; justify-content: center; height: 36px; min-height: 36px; margin: 0 0 12px; }
.icon-svg { display: block; margin: auto; }
.line-icon .icon-svg { stroke: currentColor; overflow: visible; }
.four-icons .icon-svg { flex: none; width: 32px; height: 32px; }
.four-icons h3 { font-size: 22px; }
.four-icons p { margin: 3px auto 0; color: var(--dim); font-size: 13px; }

/* "Who we are" band: photo on the left, text on the right */
.home-visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-height: 560px; border-bottom: 1px solid var(--line); }
.home-visual > * { min-width: 0; }
.home-visual > .photo-slot { border: 0; border-right: 1px solid var(--line); }
.home-visual-copy { display: flex; flex-direction: column; align-items: start; justify-content: center; padding: 70px var(--gutter); background: #191d19; }
.home-visual-copy p { color: #cfd1ca; }

/* ---------- Our Team ---------- */

/* Executive Board and Committee Leads share these rules, so every card gets the same width,
   portrait size and text area. Cards are 5 across, then 3, 2 and 1 as the screen narrows. */
.people-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.person { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); }
.person .photo-slot { flex: none; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; padding: 16px; border: 0; border-bottom: 1px solid var(--line); letter-spacing: .09em; overflow-wrap: anywhere; }
.person .photo-slot span:last-child { max-width: 100%; line-height: 1.45; }
/* The title always reserves two lines so one-line and two-line titles give the same card height */
.person h3 { font-size: clamp(20px, 1.6vw, 25px); line-height: 1.12; min-height: 2.24em; margin: 16px 16px 4px; overflow-wrap: break-word; }
.person p { margin: 0 16px 18px; color: var(--dim); font-size: 14px; line-height: 1.5; }
.person .person-name { display: block; color: var(--white); font-size: 16px; font-weight: 600; line-height: 1.4; }
.person p a { display: inline-block; margin-top: 3px; color: var(--dim); font-size: 13px; line-height: 1.4; text-underline-offset: 3px; }
.person p a:hover, .person p a:focus-visible { color: var(--gold); }

/* ---------- Committees ----------
   Heading on its own row, then the photo (about 40%) beside the description with their tops aligned.
   .committee-head uses display: contents so its heading and photo sit directly in the section grid. */

.committee-layout { display: grid; min-width: 0; }
.committee-layout > * { min-width: 0; }
.section.committee-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(32px, 4vw, 64px); row-gap: 0; align-items: start; padding-block: clamp(44px, 4.5vw, 64px); }
.committee-layout .committee-head { display: contents; }
.committee-layout .committee-head h2 { grid-column: 1 / -1; margin: 0 0 24px; }
.committee-head .photo-slot.has-photo { grid-column: 1; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5; margin-top: 0; }
.committee-layout .committee-copy { grid-column: 2; }
.committee-copy p { margin-top: 0; color: #d4d5cf; line-height: 1.7; }

/* ---------- Meet the Bots ---------- */

.robot-card { display: grid; grid-template-columns: 1.3fr 1fr; gap: 35px; padding: 18px; border: 1px solid var(--line); }
.robot-card > .photo-slot { min-height: 460px; }
.robot-card > div:last-child { padding: 30px; }
.robot-card h2 { margin-bottom: 22px; }

/* ---------- Railside Rumble overview (rumble.html) ---------- */

/* Upcoming event card, then a grid of past events */
.event-feature { display: grid; grid-template-columns: 1.2fr 1fr; margin: 30px 0 50px; border: 1px solid var(--gold); }
.event-feature > .photo-slot { min-height: 330px; }
.event-feature > div:last-child { padding: 40px; }
.event-feature h2 { margin-bottom: 20px; }
.past-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.past-grid article { padding: 14px; border: 1px solid var(--line); }
.past-grid .photo-slot { height: 280px; }
.past-grid h3 { margin: 20px 0 10px; }
.past-grid .btn { margin: 10px 0; }

/* ---------- Event pages (fall-2026, fall-2025, spring-2025) ----------
   Every event page starts with the same .ev-intro block: title, logo, a grid of facts, and a button.
   Sections below it use .rx-sec / .rx-wrap so they share the intro's side margins.
   To add a new event, copy the newest event page and change its text and links. */

.season-heading { width: 100%; padding: 90px 6vw 60px; background: #151815; border-bottom: 1px solid var(--line); }
.event-page .ev-intro { padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(40px, 5vw, 60px); }
.event-page .ev-intro h1 { font-size: clamp(40px, 4.8vw, 72px); line-height: .95; }
.event-page .ev-intro p { color: #e1e2d9; margin: 14px 0 0; }
.event-page .ev-intro .ev-subtitle { margin-top: 16px; color: var(--white); font-family: 'Barlow Condensed', Impact, sans-serif; font-size: clamp(21px, 2.2vw, 28px); font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.ev-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 40px; align-items: center; max-width: 1100px; }
.ev-logo { display: block; justify-self: center; width: 100%; max-width: 300px; height: auto; max-height: 110px; object-fit: contain; }
.ev-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; max-width: 1100px; margin: 34px 0 30px; }
.ev-facts > div { min-width: 0; padding: 14px 0 18px; border-top: 1px solid var(--line); }
.ev-facts dt { color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ev-facts dd { margin: 6px 0 0; font-size: 17px; font-weight: 600; }

/* Shared section pieces below the intro */
.event-page .rx-sec { padding-top: clamp(48px, 5vw, 72px); }
.event-page .rx-last { padding-bottom: clamp(48px, 5vw, 72px); }
.event-page .rx-wrap { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
.event-page .rx-wrap p { max-width: none; margin: 0 0 12px; color: #e1e2d9; }
.event-page .rx-wrap a { color: var(--gold); text-underline-offset: 3px; }
.event-page .rx-wrap a:hover { color: #ffe089; }
.event-page .rx-wrap .btn.solid, .event-page .rx-wrap .btn.solid:hover { color: #111; text-decoration: none; }
.event-page .rx-h { margin: 0 0 18px; font-size: clamp(30px, 2.9vw, 40px); line-height: 1; text-transform: uppercase; }
.event-page .rx-s { margin: 0 0 10px; font-family: Barlow, Arial, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.event-page .rx-wrap .rx-note { color: var(--dim); font-size: 15px; }

/* Official event listing row at the bottom of every event page */
.event-page .rx-archive { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.event-page .rx-wrap.rx-archive p { margin: 0; max-width: 620px; }

/* Big gold figures (fees on Fall 2026, event stats on Spring 2025) */
.event-page .up-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.event-page .up-stats > div { display: flex; flex-direction: column; padding: 2px 0 2px 24px; border-left: 1px solid var(--line); }
.event-page .up-stats dt { color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.event-page .up-stats dd { margin: 0; color: var(--dim); font-size: 15px; }
.event-page .up-stats .up-big { margin: auto 0 6px; padding-top: 10px; color: var(--gold); font-family: 'Barlow Condensed', Impact, sans-serif; font-size: clamp(44px, 4.4vw, 64px); font-weight: 800; line-height: 1; }

/* Upcoming event (Fall 2026): text-only sections, each opened by a thin divider */
.event-page .up-sec { padding-top: clamp(40px, 4vw, 56px); }
.event-page .up-sec .rx-wrap { padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.event-page #admission .rx-wrap { padding-top: 0; border-top: 0; } /* first section sits right under the intro's own border */
.event-page .up-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 64px; align-items: start; }
.event-page .up-split > div > :last-child { margin-bottom: 0; }
#admission .up-stats { align-self: center; }
#admission .up-details .rx-s { margin-bottom: 6px; }
#admission .up-details p { margin-bottom: 18px; }
#admission .up-details > p:last-of-type { margin-bottom: 0; }

/* Competition day schedule: 6 across, 3 across below 1180px, a list on phones */
.event-page .up-times { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.event-page .up-times li { padding-top: 14px; border-top: 2px solid var(--gold); }
.event-page .up-times time { display: block; margin-bottom: 6px; color: var(--gold); font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; }
.event-page .up-times span { color: var(--white); font-size: 15px; line-height: 1.45; }

/* Prizes */
.event-page .rx-wrap .up-prize-intro { margin: -4px 0 22px; }
.event-page .up-prizes { margin: 0; padding: 0; list-style: none; }
.event-page .up-prizes > div, .event-page .up-prizes > li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 50px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--white); font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.event-page .up-prizes > :first-child { border-top: 1px solid var(--line); }
.event-page .up-prizes dd { margin: 0; color: var(--dim); font-family: Barlow, Arial, sans-serif; font-size: 16px; font-weight: 500; text-transform: none; }
.event-page .up-prizes b { color: var(--gold); font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 24px; font-weight: 800; line-height: 1; }
.event-page #prizes .rx-note { margin: 14px 0 0; }

/* Past events (Fall 2025, Spring 2025): highlights video, photo mosaic, recap */
.event-page .rx-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 48px; align-items: start; }
.event-page .rx-video { position: relative; grid-column: 1 / 10; margin: 0; aspect-ratio: 16 / 9; background: #000; }
.event-page .rx-video video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.event-page .rx-feature-text { grid-column: 10 / 13; }
.event-page .rx-feature-text .rx-h { margin-bottom: 12px; }
/* Mosaic: one large photo, two stacked, one tall. Row height comes from the stacked 4:3 tiles. */
.event-page .rx-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.event-page .rx-mosaic figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #0b0e0c; }
.event-page .rx-mosaic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.event-page .m-big { grid-column: 1 / 7; grid-row: 1 / 3; }
.event-page .m-a { grid-column: 7 / 10; grid-row: 1; aspect-ratio: 4 / 3; }
.event-page .m-b { grid-column: 7 / 10; grid-row: 2; aspect-ratio: 4 / 3; }
.event-page .m-tall { grid-column: 10 / 13; grid-row: 1 / 3; }
/* Recap sits close to the photos above it */
.event-page .rx-recap-sec { padding-top: clamp(28px, 3vw, 40px); }
.event-page .rx-recap .rx-h { margin: 0 0 10px; font-size: clamp(26px, 2.4vw, 32px); }
.event-page .rx-recap p { max-width: 880px; margin: 0 0 8px; }
.event-page .rx-recap .up-stats { max-width: 880px; margin: 18px 0 16px; }

/* ---------- Our Sponsors ---------- */

.sponsors-light { padding: 70px 6vw; background: #f0f0e9; color: #171a17; }
/* The page title is an h1 for screen readers but keeps the look of a section heading (h2) */
.sponsors-light h1 { margin-bottom: 20px; font-size: clamp(36px, 4.2vw, 66px); font-weight: 800; }
/* Two current sponsors in two equal columns; logos are never cropped */
.sponsor-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; max-width: 760px; margin-top: 40px; }
.sponsor-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 150px; padding: 24px; background: white; border: 1px solid #c7c9bf; text-align: center; }
.sponsor-tile strong { max-width: 310px; font-size: 17px; }
.sponsor-tile .sponsor-logo { display: block; width: 100%; max-width: 220px; height: 84px; object-fit: contain; }

/* ---------- Contact ---------- */

/* One two-column section (intro | details) that fills the space between header and footer */
body:has(.contact-page) { display: flex; flex-direction: column; min-height: 100svh; }
.contact-page { flex: 1; display: flex; background: #151815; }
.ct-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; width: calc(100% - 2 * var(--gutter)); margin-inline: auto; padding: clamp(56px, 7vw, 104px) 0; }
.ct-intro h1 { font-size: clamp(54px, 6.3vw, 96px); line-height: 1; }
.ct-intro .ct-sub { margin: 16px 0 0; color: var(--gold); font-family: 'Barlow Condensed', Impact, sans-serif; font-size: clamp(21px, 2.2vw, 28px); font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.ct-intro p:last-child { max-width: 560px; margin: 18px 0 0; color: #e1e2d9; font-size: 18px; line-height: 1.57; }
.ct-details { margin: 0; }
.ct-details > div { padding: 18px 0 22px; border-top: 1px solid var(--line); }
.ct-details > div:last-child { border-bottom: 1px solid var(--line); }
.ct-details dt { color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ct-details dd { margin: 8px 0 0; font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; line-height: 1.4; }
.ct-details a { color: var(--gold); text-underline-offset: 4px; overflow-wrap: anywhere; }
.ct-details a:hover { color: #ffe089; }

/* ---------- Photo slots with a photo ----------
   Kept after the page sections on purpose: these need to override page rules like the team cards' padding. */

.photo-slot.has-photo { position: relative; overflow: hidden; padding: 0; background: #0b0e0c; }
.photo-slot.has-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Footer ----------
   Copied into every page. Railside logo and social icons on the left, Purdue logo and email on the right.
   The 26px padding and tight inner gaps keep the footer compact; check its height if you change them. */

.footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 25px; width: 100%; min-width: 0; padding: 26px 5vw; background: #080a09; border-top: 1px solid var(--line); }
.footer img { width: 140px; height: auto; max-height: 50px; object-fit: contain; }
.footer a { font-size: 13px; text-decoration: none; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.footer-brand > a:first-child { display: block; line-height: 0; }
.footer .footer-brand img { display: block; width: 168px; max-height: 60px; }
.footer-social { display: flex; align-items: center; gap: 12px; }
.footer .footer-social-link { display: flex; color: var(--white); transition: color .2s; }
.footer .footer-social-link:hover, .footer .footer-social-link:focus-visible { color: var(--gold); }
/* Social icons draw the SVG files as masks so they take the text color (white, gold on hover).
   The artwork fills about 70% of its square, so the mask is scaled up; the box is wider than tall
   so the wide YouTube and Discord marks are not clipped. */
.footer-icon { display: block; width: 34px; height: 26px; background: currentColor; -webkit-mask: var(--icon) center / auto 136% no-repeat; mask: var(--icon) center / auto 136% no-repeat; }
.footer-icon-youtube { --icon: url("assets/Shared%20Assets/Footer/youtube-icon.svg"); }
.footer-icon-discord { --icon: url("assets/Shared%20Assets/Footer/discord-icon.svg"); }
.footer-icon-instagram { --icon: url("assets/Shared%20Assets/Footer/instagram-icon.svg"); }
.footer-icon-linkedin { --icon: url("assets/Shared%20Assets/Footer/linkedin-icon.svg"); }
.footer-end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.footer .footer-end a { font-size: 15px; line-height: 1.3; }
.footer .footer-purdue { display: block; width: auto; height: 44px; max-height: none; object-fit: contain; }

/* ---------- Responsive ----------
   Largest breakpoint first. Header and navigation breakpoints live with the navigation rules above. */

@media (min-width: 941px) {
  .event-page .ev-intro { min-height: 720px; }
}
@media (min-width: 1180px) {
  .section.committee-layout { grid-template-columns: minmax(0, 400px) minmax(0, 660px); justify-content: start; }
}
@media (max-width: 1180px) {
  .event-page .up-times { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 1100px) {
  .hero-copy h1 { font-size: clamp(54px, 7vw, 90px); }
  .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .inner-hero { min-height: 0; }
  .ev-intro-grid { grid-template-columns: 1fr; gap: 0; }
  .ev-logo { order: -1; justify-self: start; max-width: 220px; margin: 0 0 8px -12px; }
  .ev-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-page .up-split { grid-template-columns: minmax(0, 1fr); }
  .event-page .rx-feature { grid-template-columns: minmax(0, 1fr); }
  .event-page .rx-video, .event-page .rx-feature-text { grid-column: 1 / -1; }
}
@media (max-width: 850px) {
  /* Split layouts stack: hero photos move under the text */
  .hero, .home-visual, .two-col { grid-template-columns: 1fr; }
  .hero-copy { min-height: 360px; }
  .hero > .photo-slot, .home-visual > .photo-slot { min-height: 350px; border-left: 0; border-right: 0; border-top: 1px solid var(--line); }
  .four-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 18px; }
  .four-icons > div { padding: 20px 8px; }
  .four-icons > div:last-child { padding: 32px 18px; } /* the last tile has always kept its desktop padding here; kept so the page looks the same */
  .section.committee-layout { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .committee-head .photo-slot.has-photo, .committee-layout .committee-copy { grid-column: 1; }
  .committee-head .photo-slot.has-photo { max-width: 380px; }
  .ct-wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 740px) {
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* Mosaic becomes two columns with the big and tall photos on their own rows */
  .event-page .rx-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .event-page .m-big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .event-page .m-a, .event-page .m-b { grid-column: auto; grid-row: auto; }
  .event-page .m-tall { grid-column: 1 / -1; grid-row: auto; justify-self: center; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; }
}
@media (max-width: 680px) {
  h1 { font-size: 69px; }
  .home-hero { min-height: 0; } /* the home hero still fills the screen down to 681px */
  .robot-card, .event-feature { grid-template-columns: 1fr; }
  .hero-copy { padding: 48px 24px; }
  .inner-hero .hero-copy { padding-block: 52px; }
  .past-grid { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: start; }
  .ev-facts { grid-template-columns: 1fr; margin: 26px 0 24px; }
  .ev-facts > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 11px 0; }
  .ev-facts dd { margin: 0; font-size: 16px; }
  /* Footer: one centered column with smaller logos */
  .footer { flex-direction: column; flex-wrap: wrap; align-items: center; gap: 18px; padding-block: 24px; }
  .footer-brand, .footer-end { align-items: center; }
  .footer-brand { gap: 10px; }
  .footer .footer-brand img { width: 140px; }
  .footer-social { gap: 10px; }
  .footer-icon { width: 30px; height: 22px; }
  .footer-end { gap: 6px; }
  .footer .footer-purdue { height: 32px; }
  .footer .footer-end a { font-size: 14px; }
}
@media (max-width: 600px) {
  .sponsor-logos { grid-template-columns: minmax(0, 1fr); }
  .event-page .up-stats > div { padding-left: 14px; }
  .event-page .up-stats > div:first-child { padding-left: 0; border-left: 0; }
  .event-page .up-stats dt { font-size: 11px; letter-spacing: .06em; }
  .event-page .up-times { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .event-page .up-times li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
  .event-page .up-times li:first-child { border-top-color: var(--gold); }
  .event-page .up-times time { margin: 0; font-size: 18px; }
}
@media (max-width: 520px) {
  .hero-copy h1, .inner-hero .hero-copy h1 { font-size: clamp(52px, 13vw, 74px); }
}
@media (max-width: 480px) {
  .four-icons h3 { font-size: 19px; }
  .four-icons p { font-size: 12px; }
}
@media (max-width: 420px) {
  .people-grid { grid-template-columns: minmax(0, 1fr); }
  .person h3 { min-height: 0; }
}