/* =========================================================
   MESA BAJA
   Photo carries the page. Type stays out of its way.
   ========================================================= */

:root{
  --paper:  #ffffff;
  --paper-2:#f4f6f8;
  --ink:    #14181f;
  --muted:  #5b646f;
  --line:   #e2e5e9;
  --blue:   #16345e;
  --blue-2: #1e4a85;   /* hover lift for the blue button */
  --orange: #dd5409;   /* secondary accent: link + nav hover */
  --orange-2:#b94407;
  --red:    #c4161c;   /* action colour: buttons */
  --red-2:  #a01218;

  --display:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:   "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --navh: 68px;
}

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

/* +1px for the nav's bottom border, so anchored sections are not clipped */
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--navh) + 1px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);          /* sits behind the fixed backdrop */
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

/* Author-level display rules (like the img rule above) beat the browser's
   built-in [hidden] rule, so state it explicitly or hidden elements still show. */
[hidden]{ display:none !important; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--red); color:#fff; padding:12px 18px; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

h1,h2{
  font-family:var(--display);
  font-stretch:92%;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

/* =========================================================
   FIXED BACKDROP
   The photo never moves; panels scroll up over it.
   ========================================================= */
.backdrop{
  position:fixed; inset:0; z-index:0;
  background:#0e1116;
  overflow:hidden;
}
.backdrop img{
  width:100%; height:100%;
  object-fit:cover;
  /* The team photo is portrait in a landscape hero, so it crops hard.
     35% is the lowest-risk vertical anchor: every face stays in frame from a
     short laptop up to a 1080p monitor. Raising it past ~38% cuts heads off
     on short viewports. 45% horizontal keeps the left-hand person in frame
     on phones (X has no effect on desktop — there is no horizontal overflow). */
  object-position:45% 35%;
}
/* flat scrim, so overlaid type stays readable on any photo */
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:rgba(10,13,18,.42);
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  height:var(--navh); display:flex; align-items:center; gap:24px;
}
.brand{
  margin-right:auto; text-decoration:none;
  display:flex; flex-direction:column; gap:3px; line-height:1;
}
.brand-college{
  font-family:var(--body); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.brand-name{
  font-family:var(--display); font-stretch:85%; font-weight:800;
  font-size:20px; letter-spacing:.05em; color:var(--blue);
}
.nav-menu{ display:flex; align-items:center; gap:6px; }
.nav-menu a{
  color:var(--ink); text-decoration:none;
  font-size:15px; font-weight:500;
  padding:10px 14px;
}
.nav-menu a:hover{ color:var(--orange); }
.nav-menu a.is-here{ color:var(--blue); font-weight:600; box-shadow:inset 0 -2px 0 var(--red); }
.nav-cta{
  background:var(--red); color:#fff !important;
  padding:11px 20px !important; font-weight:600;
}
.nav-cta:hover{ background:var(--red-2); }

.nav-toggle{ display:none; background:none; border:1px solid var(--line); padding:9px 10px; cursor:pointer; }
.bars{ display:block; width:18px; }
.bars i{ display:block; height:2px; background:var(--ink); margin:3px 0; transition:.18s; }
.nav-toggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:800px){
  .nav-toggle{ display:block; }
  .nav-menu{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:6px var(--gut) 16px;
    display:none;
  }
  .nav-menu.is-open{ display:flex; }
  .nav-menu a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-cta{ margin-top:12px; text-align:center; border-bottom:none; }
}

/* =========================================================
   HERO — transparent, so the backdrop shows through
   ========================================================= */
.hero{
  position:relative; z-index:1;
  /* fill exactly what is left under the sticky nav, so nothing is cut off */
  min-height:calc(100vh - var(--navh));
  min-height:calc(100svh - var(--navh));
  display:flex; align-items:flex-end;
  padding:0 var(--gut) clamp(48px,8vh,88px);
}
.hero-text{ max-width:var(--wrap); margin-inline:auto; width:100%; }
.hero h1{
  font-size:clamp(52px,9vw,120px);
  font-stretch:82%; font-weight:800;
  letter-spacing:-.025em;
  color:#fff;
}
.hero p{
  margin:14px 0 0;
  font-size:clamp(15px,2vw,19px);
  color:rgba(255,255,255,.82);
  letter-spacing:.02em;
}

/* =========================================================
   PANELS — opaque, they cover the backdrop as you scroll
   ========================================================= */
.panel{
  position:relative; z-index:2;
  background:var(--paper);
  padding-block:clamp(72px,11vw,140px);
}
.panel-alt{ background:var(--paper-2); }

.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(32px,6vw,80px); align-items:center;
}
.split-flip .split-text{ order:2; }

/* Join: text on the left, a stack of two buttons on the right. No photo. */
.split-join{ grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); }
.join-actions{ display:flex; flex-direction:column; gap:14px; }
.join-actions .btn{ margin-top:0; justify-content:center; text-align:center; }

.split-text h2{
  font-size:clamp(32px,5vw,58px);
  color:var(--blue);
  margin-bottom:24px;
}
.split-text p{ margin:0 0 18px; color:var(--muted); max-width:46ch; }
.split-text p:last-of-type{ margin-bottom:0; }

.shot{ margin:0; }
.shot img{
  width:100%; height:100%;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:20px;
}
.shot-empty{
  aspect-ratio:4/3;
  border-radius:20px;
  background:var(--paper-2);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.panel-alt .shot-empty{ background:var(--paper); }
.shot-empty span{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#9aa3ad;
}

/* =========================================================
   BUTTON
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:32px; padding:15px 26px;
  background:var(--red); color:#fff;
  border:1px solid var(--red);   /* keeps filled + outline the same height */
  font-size:16px; font-weight:600; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ background:var(--red-2); border-color:var(--red-2); }

.btn-blue{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-2); border-color:var(--blue-2); }
.btn .arw{ transition:transform .18s ease; }
.btn:hover .arw{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .btn:hover .arw{ transform:none; } }

.small{ margin-top:20px !important; font-size:15px; }
.small a{ color:var(--orange-2); text-decoration:none; border-bottom:1px solid rgba(221,84,9,.4); }
.small a:hover{ border-bottom-color:var(--orange); }

/* =========================================================
   SUBPAGES (sponsors)
   No fixed photo backdrop, so the page paints on paper.
   ========================================================= */
.subpage{ background:var(--paper); }
.page{ min-height:calc(100vh - var(--navh) - 190px); }

.page-head{ margin-bottom:clamp(28px,4vw,48px); }
.page-title{ font-size:clamp(34px,5vw,58px); color:var(--blue); }
.page-lead{ margin:18px 0 0; color:var(--muted); max-width:54ch; }

/* ---- sponsor wall ---- */
.sponsor-tier-title{
  font-family:var(--display); font-stretch:92%; font-weight:700;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 18px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.sponsor-wall{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:rgba(255,255,255,.10);
  border:1px solid var(--ink);
}
 /* Dark tiles: both sponsors ship reversed logos (Onshape is white,
    OSH Cut uses light grey), so this is the background each mark was
    drawn for. No recolouring of anyone's logo. */
.sponsor{ background:var(--ink); }
.sponsor a{
  display:flex; align-items:center; justify-content:center;
  min-height:170px; padding:32px 28px;
  text-decoration:none;
  transition:background .15s ease;
}
.sponsor a:hover{ background:#1d232c; }

/* Normalise to a common height rather than a cap, so logos of different
   native sizes carry equal visual weight. Width follows the aspect ratio,
   so nothing is stretched. */
.sponsor img{
  height:38px; width:auto;
  max-width:100%;
  object-fit:contain;
}
/* Shown only if the logo file is missing (see main.js). */
.sponsor-name{
  font-family:var(--display); font-stretch:92%; font-weight:700;
  font-size:24px; color:#fff; letter-spacing:.01em;
}

.page-figure{ margin:0 0 clamp(32px,4vw,52px); }
.page-figure img{
  width:100%; max-height:420px; aspect-ratio:21/9;
  object-fit:cover; border-radius:20px;
}

.prose{ max-width:62ch; }
.prose h2{
  font-size:clamp(24px,3vw,32px); color:var(--blue);
  margin:clamp(28px,4vw,44px) 0 14px;
}
.prose h2:first-child{ margin-top:0; }
.prose p{ margin:0 0 16px; color:var(--muted); }

.two-up{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,56px);
  margin-top:8px;
}
.two-up-col h3{
  font-family:var(--display); font-stretch:92%; font-weight:700;
  font-size:21px; margin:0 0 8px; color:var(--ink);
}
.two-up-col > p{ margin:0 0 18px; color:var(--muted); font-size:15px; }

.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative; padding:0 0 14px 20px;
  color:var(--muted); font-size:15.5px; line-height:1.55;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:11px;
  width:9px; height:1px; background:var(--red);
}
.ticks b{ color:var(--ink); font-weight:600; }

/* Rows, not cards — an odd number of subteams never leaves an orphan cell. */
.subteams{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
.subteams li{
  display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(12px,4vw,48px);
  padding:22px 0; border-bottom:1px solid var(--line);
}
.subteams h3{
  font-family:var(--display); font-stretch:92%; font-weight:700;
  font-size:19px; margin:0; color:var(--blue);
}
.subteams p{ margin:0; font-size:15.5px; color:var(--muted); }

@media (max-width:700px){
  .subteams li{ grid-template-columns:1fr; gap:6px; }
}

@media (max-width:800px){
  .two-up{ grid-template-columns:1fr; }
  .page-figure img{ aspect-ratio:16/9; }
}

.page-note{
  margin:clamp(32px,4vw,48px) 0 0;
  padding-top:24px; border-top:1px solid var(--line);
  color:var(--muted);
}
.page-note a{ color:var(--blue); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(22,52,94,.35); }
.page-note a:hover{ border-bottom-color:var(--blue); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  position:relative; z-index:2;
  background:var(--ink); color:#fff;
}
.foot-inner{
  display:flex; flex-wrap:wrap; gap:16px 32px;
  justify-content:space-between; align-items:center;
  padding-block:36px;
}
.foot-name{
  margin:0; font-family:var(--display); font-stretch:85%; font-weight:800;
  font-size:20px; letter-spacing:.05em;
}
.foot-college{
  margin:4px 0 0; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
/* College logo. Sized and given room to breathe, not stretched to fit.
   The whole slot collapses if the file is not there (see main.js). */
.foot-logo-slot{ display:flex; align-items:center; }
.foot-logo{
  height:42px; width:auto; max-width:220px;
  object-fit:contain;
  opacity:.92;
}

.foot-links{ display:flex; flex-wrap:wrap; gap:8px 26px; }
.foot-links a{ color:rgba(255,255,255,.72); text-decoration:none; font-size:15px; }
.foot-links a:hover{ color:#fff; }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:800px){
  body{ font-size:17px; }
  .split,
  .split-join{ grid-template-columns:1fr; gap:32px; }
  .split-flip .split-text{ order:0; }   /* text always first when stacked */
  .split-text p{ max-width:none; }
  .join-actions{ gap:12px; }
}