@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* =============================================================
   EWB CORNELL - "FIELD REPORT" DESIGN SYSTEM
   Light editorial default, warm-charcoal dark toggle.
   Work Sans + JetBrains Mono. Clay accent. OKLCH tokens.
============================================================= */

/* =============================================================
   TOKENS
============================================================= */
:root, [data-theme="light"] {
  /* Surfaces - built on the logo white #F9F9F9 */
  --bg:             #F9F9F9;
  --bg-alt:         #EEF2FA;
  --surface:        #FFFFFF;
  --surface-hover:  #F3F6FC;

  /* Ink - deep brand-navy, not pure black */
  --ink:            #14253B;
  --muted:          #4B607A;
  --dim:            #8492A8;

  /* Lines - #C9CFE7 is the brand "duller blue" */
  --border:         #E2E7F1;
  --border-strong:  #C9CFE7;

  /* Accent - brand logo blue #1D73C6 */
  --accent:         #1D73C6;   /* fills, marks */
  --accent-ink:     #1A66B0;   /* blue as text on light (AA, close to brand) */
  --accent-solid:   #1D73C6;   /* button background */
  --accent-hover:   #155C96;   /* button hover */
  --accent-soft:    #E7F0FD;   /* light blue wash */
  --accent-soft-bd: #C9CFE7;

  /* Shadows (subtle, cool-tinted, low blur) */
  --shadow-sm: 0 1px 2px rgba(20,35,60,0.06);
  --shadow-md: 0 4px 14px rgba(20,35,60,0.08);
  --shadow-lg: 0 14px 36px rgba(20,35,60,0.12);

  /* Status */
  --ok:     #1f7a52;
  --info:   #1D73C6;

  color-scheme: light;
}

[data-theme="dark"] {
  /* Cool, matte, deep brand-navy (flat, no glow) */
  --bg:             #0E1726;
  --bg-alt:         #13202F;
  --surface:        #182840;
  --surface-hover:  #1E3050;

  --ink:            #EAF1FB;
  --muted:          #A0B2CA;
  --dim:            #62748E;

  --border:         #263650;
  --border-strong:  #36486A;

  /* Brand mid blue #5390DE and light blue #ADD0FE carry the dark theme */
  --accent:         #5390DE;
  --accent-ink:     #ADD0FE;
  --accent-solid:   #1D73C6;
  --accent-hover:   #5390DE;
  --accent-soft:    #14263F;
  --accent-soft-bd: #2C4166;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 44px rgba(0,0,0,0.6);

  --ok:     #4ec78f;
  --info:   #5390DE;

  color-scheme: dark;
}

:root {
  /* Backward-compat aliases (inner pages use these inline) */
  --primary: var(--accent-ink);
  --secondary: var(--accent);
  --green: var(--accent-ink);
  --green-dark: var(--accent-hover);
  --green-light: var(--accent);
  --orange: var(--accent-ink);
  --orange-dark: var(--accent-hover);
  --blue: var(--accent-ink);
  --blue-dark: var(--accent-solid);
  --teal: var(--accent-ink);
  --teal-dark: var(--accent-hover);
  --white: #ffffff;
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-dim: var(--dim);
  --bg-subtle: var(--bg-alt);
  --border-hover: var(--border-strong);
  --glow-green: var(--shadow-md);
  --glow-blue: var(--shadow-md);
  --glow-orange: var(--shadow-md);
  --success: var(--ok);
  --warning: oklch(62% 0.14 70);
  --danger: oklch(55% 0.2 27);

  /* Type scale (fixed rem, product register) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  clamp(2.4rem, 5vw, 3.5rem);

  --radius:    6px;
  --radius-lg: 10px;
  --nav-h:     84px;
  --maxw:      1120px;

  --font: 'Work Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* z-index scale */
  --z-sticky: 20;
  --z-backdrop: 40;
  --z-menu: 45;
  --z-nav: 46;   /* nav bar sits above the open drawer so the close button stays reachable */
  --z-modal: 50;
  --z-lightbox: 60;
}

/* =============================================================
   RESET & BASE
============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.25s ease, color 0.25s ease;
}

img, svg { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* =============================================================
   UTILITIES
============================================================= */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.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;
}

.mono { font-family: var(--mono); }

/* Monospace kicker - the one named brand label device */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.kicker::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--accent-ink);
}

.section-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 14px;
}

.section-title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.65;
}

/* fade-up retired: content is always visible (EWB = no scroll animation) */
.fade-up { opacity: 1 !important; transform: none !important; }

/* =============================================================
   BUTTONS
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out), transform 0.12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-outline:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .btn-ghost:hover   { background: var(--surface-hover); border-color: var(--border-strong); }
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent-solid); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--border-strong); }
.btn-ghost   { background: var(--surface); color: var(--ink); border: 1.5px solid var(--border); }
.btn-sm { padding: 9px 16px; font-size: var(--fs-xs); }

/* On dark CTA / accent-soft blocks */
.on-accent .btn-outline { color: var(--ink); border-color: var(--border-strong); }

/* =============================================================
   NAVIGATION
============================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  /* backdrop-filter is deliberately NOT transitioned. Animating a 14px blur
     re-composites a full-width blurred layer every frame for 300ms, and it
     fires the instant .scrolled toggles — i.e. the moment you start scrolling,
     which is where the stutter at the top of the page came from. The blur now
     snaps on while the background fades over the same 300ms, which hides the
     switch. */
  transition: background 0.3s ease, border-color 0.3s ease !important;
}
.nav.scrolled {
  /* Was a translucent bar over a 14px backdrop-filter. On phones the page
     content ghosted straight through it while scrolling - and it still did at
     97% opacity, because the artefact is the backdrop-filter compositing, not
     the alpha. An opaque bar hides the blur anyway, so the filter is gone and
     the background is solid. */
  background: var(--bg);
  border-bottom-color: var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: var(--fs-base);
  letter-spacing: -0.01em; color: var(--ink); flex-shrink: 0;
}
.nav-logo-mark {
  width: 30px; height: 30px;
  background: var(--accent-solid); color: #fff;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 500;
  flex-shrink: 0;
}

.nav-right { display: flex; align-items: center; gap: 6px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative;
  padding: 8px 12px;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--muted);
  border-radius: 5px;
  transition: color 0.18s ease !important;
}
.nav-links a::after {
  content: ''; position: absolute;
  left: 12px; right: 12px; bottom: 4px; height: 1.5px;
  background: var(--accent-ink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s var(--ease-out) !important;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ink); }

.nav-cta {
  background: var(--accent-solid) !important; color: #fff !important;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600;
  transition: background 0.18s ease !important;
}
.nav-cta::after { display: none !important; }
@media (hover: hover) { .nav-cta:hover { background: var(--accent-hover) !important; } }


/* Hamburger */
.hamburger {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 44px; height: 44px; padding: 0; margin-right: -10px;
  z-index: 1; flex-shrink: 0; background: none; border: 0; cursor: pointer;
  /* Kill the translucent grey box iOS/Android paint over the button on tap. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* background-color is in the transition on purpose: on pages where the
   unscrolled bar draws white bars over a dark hero, the open state flips them
   to ink. Without it the colour snaps at frame 0 while the bars are still
   rotating, which reads as a glitch. */
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s ease, background-color 0.3s ease !important; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* The X overlays the drawer, so it must use the drawer's ink colour even on
   pages where the unscrolled bar draws white bars over a dark hero. */
.nav .hamburger.open span { background: var(--ink) !important; }

/* Mobile menu */
/* The drawer slides on transform, not on `right`. Animating `right` relayouts
   and repaints a full-height panel every frame, which is what made the open
   stutter on phones; transform is composited and stays on the GPU. */
.mobile-menu {
  position: fixed; top: 0; right: 0;
  width: min(340px, 100%); height: 100dvh;
  background: var(--surface); z-index: var(--z-menu);
  padding: 92px 32px 40px;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  /* 100% parks the panel's left edge exactly on the viewport edge, which lets
     the 36px shadow blur bleed back into view as a grey seam. Clear it. */
  transform: translate3d(calc(100% + 48px), 0, 0);
  transition: transform 0.35s var(--ease-out) !important;
  will-change: transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu.open { transform: translate3d(0, 0, 0); }
.mobile-menu a {
  padding: 14px 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
/* Hover-only: on a touchscreen :hover sticks after the tap, so the link stayed
   nudged and re-coloured while the drawer closed. */
@media (hover: hover) {
  .mobile-menu a { transition: padding-left 0.18s ease, color 0.18s ease !important; }
  .mobile-menu a:hover { padding-left: 6px; color: var(--accent-ink); }
  .mobile-menu .mobile-cta:hover { padding-left: 24px; background: var(--accent-hover); }
}
.mobile-menu .mobile-cta {
  margin-top: 22px; background: var(--accent-solid); color: #fff !important;
  padding: 14px 24px; border-radius: var(--radius); text-align: center; border-bottom: none;
}
/* No backdrop-filter: blurring a fullscreen layer while fading it is the most
   expensive thing on the page on mobile GPUs, and 2px was barely visible. The
   flat scrim is carried slightly darker to keep the same separation. */
.mobile-backdrop {
  position: fixed; inset: 0; background: oklch(20% 0.02 258 / 0.5);
  z-index: var(--z-backdrop); opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease !important;
}
.mobile-backdrop.open { opacity: 1; pointer-events: all; }

/* =============================================================
   FIELD PHOTO SLOT  (wire-in real images later)
   Usage:
     <figure class="field-photo">
       <div class="ph" style="aspect-ratio:4/3"></div>   <!-- replace with <img> -->
       <figcaption><span class="mono">FIG. 01</span> Caption text</figcaption>
     </figure>
============================================================= */
.field-photo { display: block; }
.field-photo img,
.field-photo .ph {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}
.field-photo img { object-fit: cover; }
.field-photo .ph {
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--dim);
}
.field-photo .ph i { font-size: 28px; opacity: 0.55; }
.field-photo .ph .ph-label { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.14em; }
.field-photo figcaption {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--dim);
  margin-top: 10px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.field-photo figcaption .mono { color: var(--accent-ink); margin-right: 6px; }

/* =============================================================
   SECTION WRAPPERS
============================================================= */
.section { padding: 92px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { margin-bottom: 52px; max-width: var(--maxw); }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head.center .section-subtitle { margin-inline: auto; }

.rule { height: 1px; background: var(--border); border: 0; }

/* =============================================================
   HERO  (light, editorial)
============================================================= */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + 72px) 0 60px;
  background: var(--bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.hero-kicker { margin-bottom: 24px; }
.hero h1 {
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero-sub {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =============================================================
   IMPACT FIGURES  (report-style, not the hero-metric template)
============================================================= */
.impact {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.impact-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.impact-fig {
  padding: 30px 28px;
  border-right: 1px solid var(--border);
}
.impact-fig:last-child { border-right: none; }
.impact-fig .num {
  font-family: var(--mono);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.impact-fig .lbl {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: 8px;
}

/* =============================================================
   MISSION
============================================================= */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mission-lead {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 20px;
}
.mission-body p { color: var(--muted); line-height: 1.7; margin-bottom: 14px; max-width: 60ch; }

/* =============================================================
   PROJECT INDEX  (featured + ruled list)
============================================================= */
.project-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
.project-featured .meta-line {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 14px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.project-featured h3 {
  font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 12px; line-height: 1.15;
}
.project-featured p { color: var(--muted); line-height: 1.65; margin-bottom: 22px; max-width: 50ch; }

.project-list { border-top: 1px solid var(--border); }
.project-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border);
  transition: background 0.18s ease !important;
}
@media (hover: hover) { .project-row:hover { background: var(--bg-alt); } }
.project-row .thumb {
  width: 88px; height: 64px; border-radius: var(--radius);
  background: var(--bg-alt); border: 1px solid var(--border);
  overflow: hidden; flex-shrink: 0;
}
.project-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-row .pname { font-size: var(--fs-md); font-weight: 600; color: var(--ink); margin-bottom: 3px; letter-spacing: -0.01em; }
.project-row .pdesc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.project-row .pmeta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--dim);
  letter-spacing: 0.04em; text-align: right; white-space: nowrap;
}
.project-row .pstatus { color: var(--accent-ink); }
.project-row .arrow { color: var(--dim); transition: transform 0.18s var(--ease-out), color 0.18s ease !important; }
@media (hover: hover) { .project-row:hover .arrow { transform: translateX(3px); color: var(--accent-ink); } }

/* =============================================================
   TEAMS  (ruled roster, not a card grid)
============================================================= */
.team-list { border-top: 1px solid var(--border); }
.team-row {
  display: grid;
  grid-template-columns: 28px 1fr 120px auto;
  gap: 22px;
  align-items: center;
  padding: 24px 4px;
  border-bottom: 1px solid var(--border);
  transition: background 0.18s ease !important;
}
@media (hover: hover) { .team-row:hover { background: var(--bg-alt); } }
.team-row .ticon { color: var(--accent-ink); display: flex; align-items: center; }
.team-row .ticon svg { width: 22px; height: 22px; }
.team-row .tname { font-size: var(--fs-md); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.team-row .tdesc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-top: 2px; }
.team-row .tcount { font-family: var(--mono); font-size: var(--fs-xs); color: var(--dim); letter-spacing: 0.04em; }
.team-row .tlink {
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.team-row .tlink svg { transition: transform 0.18s var(--ease-out) !important; }
@media (hover: hover) { .team-row:hover .tlink svg { transform: translateX(3px); } }

/* =============================================================
   CTA BAND  (accent-soft wash, stays in-theme)
============================================================= */
.cta-band { padding: 88px 0; background: var(--accent-soft); border-top: 1px solid var(--accent-soft-bd); border-bottom: 1px solid var(--accent-soft-bd); }
.cta-band .section-title { color: var(--ink); max-width: 18ch; }
.cta-band .section-subtitle { color: var(--muted); max-width: 52ch; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* =============================================================
   NEWSLETTER
============================================================= */
.newsletter { padding: 80px 0; }
.newsletter-box {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 44px 48px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.newsletter-text h2 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.newsletter-text p { color: var(--muted); font-size: var(--fs-sm); }
.newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.newsletter-form label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.newsletter-field { display: flex; gap: 10px; }
.newsletter-input {
  flex: 1; padding: 12px 16px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: var(--bg); color: var(--ink); font-size: var(--fs-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.newsletter-input:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.newsletter-input::placeholder { color: var(--dim); }

/* =============================================================
   FOOTER
============================================================= */
.footer { background: var(--surface); color: var(--muted); padding: 72px 0 30px; border-top: 1px solid var(--border); }
[data-theme="dark"] .footer { background: #0B1422; color: #9fb1c9; border-top-color: rgba(255,255,255,0.08); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 52px; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-base); color: var(--ink); margin-bottom: 18px; }
[data-theme="dark"] .footer-logo { color: #fff; }
.footer-brand p { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 22px; color: var(--muted); max-width: 30ch; }
.social-links { display: flex; gap: 10px; }
.social-link {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--bg-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}
[data-theme="dark"] .social-link { background: rgba(255,255,255,0.06); border-color: transparent; color: #cdd8e6; }
.social-link:hover { background: var(--accent-solid); color: #fff; border-color: var(--accent-solid); }
.footer-col h4 { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: var(--fs-sm); color: var(--muted); transition: color 0.18s ease !important; }
.footer-col a:hover { color: var(--accent-ink); }
[data-theme="dark"] .footer-col a:hover { color: #fff; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: var(--fs-sm); color: var(--muted); }
.footer-contact-item .footer-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; color: var(--accent-ink); }
.footer-contact-item a { color: var(--muted); }
.footer-contact-item a:hover { color: var(--accent-ink); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--dim); letter-spacing: 0.02em;
}
[data-theme="dark"] .footer-bottom { border-top-color: rgba(255,255,255,0.1); }
.footer-bottom a { color: var(--dim); }
.footer-bottom a:hover { color: var(--accent-ink); }
.footer-bottom-links { display: flex; gap: 20px; }

/* =============================================================
   PAGE HERO (inner pages) - light editorial header
============================================================= */
.page-hero {
  position: relative;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--nav-h) + 56px) 0 56px;
}
.page-hero .container { position: relative; z-index: 1; }
.back-link, .page-hero-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  color: var(--muted); margin-bottom: 22px;
  transition: color 0.18s ease !important;
}
.back-link:hover, .page-hero-back:hover { color: var(--accent-ink); }
.page-hero-tag {
  display: inline-block; font-family: var(--mono);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 14px;
}
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 600; color: var(--ink); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 14px; }
.page-hero h1 em, .page-hero h1 span { color: var(--accent-ink); font-style: normal; }
.page-hero-sub { font-size: var(--fs-md); color: var(--muted); max-width: 58ch; line-height: 1.65; }
.page-hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 38px; }
.page-hero-stat strong { display: block; font-family: var(--mono); font-size: var(--fs-xl); font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.page-hero-stat span { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; margin-top: 6px; display: block; }

/* =============================================================
   GENERIC CARD / GRID HELPERS (inner pages)
============================================================= */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }

/* =============================================================
   MEMBERS (team pages)
============================================================= */
.members-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.member-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 18px 20px; text-align: center; cursor: default;
  transition: border-color 0.18s ease, transform 0.18s var(--ease-out) !important;
}
/* Cards only look interactive when script.js has actually bound the pop-up
   (MEMBER_MODAL_ENABLED). While it is off, they are plain cards. */
.member-card.is-clickable { cursor: pointer; }
@media (hover: hover) {
  .member-card.is-clickable:hover { border-color: var(--border-strong); transform: translateY(-3px); }
}
.member-avatar {
  /* Sized to hold a real headshot, not just initials. Keep it square so a
     photo dropped in via <img> fills the circle without distortion. Scales
     with the column up to a cap, so the headshot stays readable on a wide
     grid without outgrowing the lead cards above it. */
  width: min(100%, 150px); aspect-ratio: 1 / 1; height: auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1.6rem; font-weight: 500; color: #fff;
  margin: 0 auto 16px; background: var(--accent-solid);
  overflow: hidden; flex-shrink: 0;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-card:nth-child(4n+2) .member-avatar { background: oklch(48% 0.09 245); }
.member-card:nth-child(4n+3) .member-avatar { background: oklch(46% 0.1 150); }
.member-card:nth-child(4n+4) .member-avatar { background: oklch(45% 0.08 290); }
.member-name { font-size: var(--fs-base); font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.35; }
.member-role { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; color: var(--accent-ink); margin-bottom: 6px; letter-spacing: 0.02em; }
.member-major { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
/* Injected by script.js at the bottom of any roster card whose profile has a
   LinkedIn URL. The card itself is a button that opens the pop-up, so this sits
   on top of it as its own link and stops the click from bubbling. */
.member-linkedin-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  padding: 4px 10px; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 600;
  color: #0a66c2; background: oklch(55% 0.15 250 / 0.08); border: 1px solid oklch(55% 0.15 250 / 0.18);
  transition: background 0.18s ease, border-color 0.18s ease !important;
}
@media (hover: hover) {
  .member-linkedin-badge:hover { background: oklch(55% 0.15 250 / 0.16); border-color: oklch(55% 0.15 250 / 0.4); }
}
.member-linkedin-badge:focus-visible { outline: 2px solid #0a66c2; outline-offset: 2px; }
/* Board and lead cards centre their contents, so the badge centres too. */
/* Cards become column flex containers purely so the badge can be pinned to the
   bottom with margin-top:auto - otherwise it floats at a different height on
   every card, since names and roles wrap to different numbers of lines. The
   :has() rules keep a gap above the badge on whichever card is tallest, where
   the auto margin collapses to nothing. */
.member-card, .exec-card { display: flex; flex-direction: column; }
.member-card > .member-linkedin-badge,
.exec-card   > .member-linkedin-badge { margin-top: auto; align-self: center; }
.member-card:has(> .member-linkedin-badge) .member-major { margin-bottom: 12px; }
.exec-card:has(> .member-linkedin-badge) .exec-id { margin-bottom: 12px; }

/* =============================================================
   TEAM OVERVIEW (team pages)
============================================================= */
.team-overview { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.team-overview-desc { font-size: var(--fs-md); color: var(--muted); line-height: 1.7; margin-bottom: 22px; }
.team-overview-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.team-overview-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.team-overview-row:last-child { border-bottom: none; }
.team-overview-row .label { color: var(--muted); }
.team-overview-row .value { font-weight: 700; color: var(--ink); font-family: var(--mono); font-size: var(--fs-xs); }
.team-subnav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 30px; border-top: 1px solid var(--border); margin-top: 46px; }

/* legacy homepage team/stat card classes (kept harmless if referenced) */
.teams-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* =============================================================
   PROJECTS GRID (projects.html)
============================================================= */
.project-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.18s ease, transform 0.18s var(--ease-out) !important; }
@media (hover: hover) { .project-card:hover { border-color: var(--border-strong); transform: translateY(-4px); } }
.project-card-visual { height: 180px; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; }
.project-card-visual svg { display: block; max-width: 100%; max-height: 100%; }
.project-card-visual img { width: 100%; height: 100%; object-fit: cover; }
.project-card-visual.logo-thumb { background: #ffffff; }
.project-card-visual.logo-thumb img { object-fit: contain; padding: 20px; }
.project-card-body { padding: 22px; }
.project-card-tag { display: inline-block; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; margin-bottom: 10px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-soft-bd); }
.tag-international, .tag-domestic, .tag-software, .tag-digital, .tag-business, .tag-active { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft-bd); }
.tag-completed { background: color-mix(in oklab, var(--ok) 14%, transparent); color: var(--ok); border-color: color-mix(in oklab, var(--ok) 30%, transparent); }
.project-card-body h3 { font-size: var(--fs-md); font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.project-card-body p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* =============================================================
   ABOUT - values + timeline
============================================================= */
.values-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.value-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; display: flex; gap: 18px; align-items: flex-start; transition: border-color 0.18s ease !important; }
@media (hover: hover) { .value-card:hover { border-color: var(--border-strong); } }
.value-icon { width: 42px; height: 42px; flex-shrink: 0; background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--accent-ink); }
.value-card h3 { font-size: var(--fs-base); font-weight: 600; margin-bottom: 8px; }
.value-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 0; width: 1px; background: var(--border-strong); }
.timeline-item { position: relative; margin-bottom: 34px; }
.timeline-dot { position: absolute; left: -26px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-solid); border: 2px solid var(--bg); }
.timeline-year { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; color: var(--accent-ink); letter-spacing: 0.04em; margin-bottom: 4px; }
.timeline-item h3 { font-size: var(--fs-base); font-weight: 600; margin-bottom: 6px; }
.timeline-item p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* =============================================================
   APPLY
============================================================= */
.apply-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.apply-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 22px; position: relative; }
.apply-step-num { width: 38px; height: 38px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); color: var(--accent-ink); font-family: var(--mono); font-size: 0.95rem; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.apply-step h3 { font-size: var(--fs-base); font-weight: 600; margin-bottom: 8px; }
.apply-step p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.apply-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 44px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.form-group label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.form-input, .form-select, .form-textarea {
  padding: 11px 14px; border-radius: var(--radius); border: 1.5px solid var(--border);
  background: var(--bg); color: var(--ink); font-size: var(--fs-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--dim); }
.form-textarea { resize: vertical; min-height: 110px; }
.form-select { appearance: none; cursor: pointer; }

/* =============================================================
   SPONSORS
============================================================= */
.sponsor-tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 38px; margin-bottom: 26px; }
.sponsor-tier-header { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.sponsor-tier-badge { font-family: var(--mono); padding: 5px 12px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.tier-gold { background: oklch(72% 0.14 75 / 0.14); color: oklch(50% 0.12 70); border: 1px solid oklch(72% 0.14 75 / 0.3); }
.tier-silver { background: oklch(70% 0.01 258 / 0.16); color: var(--muted); border: 1px solid var(--border-strong); }
.tier-bronze { background: oklch(58% 0.1 50 / 0.14); color: var(--accent-ink); border: 1px solid var(--accent-soft-bd); }
.tier-partner { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-soft-bd); }
.sponsor-logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 16px; }
.sponsor-logo-slot { height: 76px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--dim); transition: border-color 0.18s ease !important; }
.sponsor-logo-slot:hover { border-color: var(--border-strong); color: var(--muted); }

/* =============================================================
   GALLERY
============================================================= */
.gallery-grid { columns: 3; column-gap: 16px; }
.gallery-item { break-inside: avoid; margin-bottom: 16px; border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; background: var(--surface); border: 1px solid var(--border); }
.gallery-item img { width: 100%; display: block; transition: transform 0.4s var(--ease-out) !important; }
@media (hover: hover) { .gallery-item:hover img { transform: scale(1.03); } }
.gallery-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(20% 0.02 258 / 0.6), transparent 60%); opacity: 0; transition: opacity 0.25s ease !important; display: flex; align-items: flex-end; padding: 16px; }
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-caption { color: #fff; font-size: var(--fs-sm); font-weight: 600; }
.gallery-placeholder { width: 100%; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--dim); font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.06em; }
.gallery-placeholder-icon { font-size: 1.8rem; opacity: 0.5; }
.lightbox { position: fixed; inset: 0; background: oklch(15% 0.01 258 / 0.94); z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease !important; }
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-lg); }
.lightbox-close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 1.6rem; background: oklch(100% 0 0 / 0.1); border-radius: var(--radius); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 768px) { .gallery-grid { columns: 2; } }
@media (max-width: 480px) { .gallery-grid { columns: 1; } }

/* =============================================================
   PROJECT DETAIL PAGES
============================================================= */
.project-detail-hero { position: relative; background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: calc(var(--nav-h) + 56px) 0 56px; }
.project-detail-hero .container { position: relative; z-index: 1; }
.project-status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 4px; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.project-status-badge.active { background: color-mix(in oklab, var(--ok) 14%, transparent); color: var(--ok); }
.project-status-badge.completed { background: var(--accent-soft); color: var(--accent-ink); }
.project-status-badge.dev { background: oklch(55% 0.1 290 / 0.14); color: oklch(50% 0.12 290); }
.project-detail-hero h1 { font-size: clamp(1.9rem,4.5vw,3rem); font-weight: 600; color: var(--ink); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 14px; }
.project-detail-hero h1 em { font-style: normal; color: var(--accent-ink); }
.project-detail-hero p { font-size: var(--fs-md); color: var(--muted); max-width: 58ch; line-height: 1.65; margin-bottom: 26px; }
.project-quick-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 34px; }
.project-quick-stat strong { display: block; font-family: var(--mono); font-size: var(--fs-xl); font-weight: 500; color: var(--ink); line-height: 1; }
.project-quick-stat span { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; display: block; }
.project-content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 44px; align-items: start; }
.project-main h2 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 14px; letter-spacing: -0.02em; }
.project-main h3 { font-size: var(--fs-md); font-weight: 600; margin-bottom: 10px; margin-top: 30px; }
.project-main p { color: var(--muted); line-height: 1.75; margin-bottom: 16px; max-width: 64ch; }
.project-main ul { margin: 0 0 16px 0; }
.project-main ul li { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; padding: 8px 0 8px 22px; position: relative; border-bottom: 1px solid var(--border); }
.project-main ul li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-solid); }
.project-sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 22px; }
.project-sidebar-card h4 { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 16px; }
.project-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.project-info-row:last-child { border-bottom: none; }
.project-info-row .label { color: var(--muted); }
.project-info-row .value { font-weight: 600; color: var(--ink); font-family: var(--mono); font-size: var(--fs-xs); }
.project-img-placeholder { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); background: var(--bg-alt); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--dim); font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.06em; margin-bottom: 14px; }
.timeline-progress { margin: 22px 0; }
.timeline-step { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--border); }
.timeline-step:last-child { border-bottom: none; }
.timeline-step-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.step-done { background: var(--accent-solid); }
.step-active { background: var(--ok); }
.step-future { background: var(--border-strong); }
.timeline-step-content h4 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 4px; }
.timeline-step-content p { font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.timeline-step-date { font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent-ink); margin-bottom: 4px; letter-spacing: 0.04em; }

/* =============================================================
   MEMBER MODAL
============================================================= */
.modal-overlay { --modal-pad: 24px; position: fixed; inset: 0; background: oklch(18% 0.02 258 / 0.55); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--modal-pad); opacity: 0; pointer-events: none; transition: opacity 0.25s ease !important; backdrop-filter: blur(3px); }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border-strong); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); position: relative; transform: scale(0.96) translateY(12px); transition: transform 0.3s var(--ease-out) !important; }
.modal-overlay.open .modal-card { transform: scale(1) translateY(0); }
.modal-header { padding: 30px 30px 22px; display: flex; gap: 18px; align-items: flex-start; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.modal-photo { width: 112px; height: 112px; border-radius: 50%; background: var(--accent-solid); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 1.3rem; font-weight: 500; color: #fff; overflow: hidden; }
.modal-photo img { width: 100%; height: 100%; object-fit: cover; }
.modal-info { flex: 1; min-width: 0; }
/* Clear the absolutely-positioned close button so a long name never runs
   underneath it - it widens to 44px on touch targets. */
.modal-info h2 { font-size: var(--fs-md); font-weight: 700; color: var(--ink); margin-bottom: 3px; padding-right: 34px; }
.modal-role { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; color: var(--accent-ink); margin-bottom: 10px; letter-spacing: 0.02em; }
.modal-linkedin { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: #0a66c2; background: oklch(55% 0.15 250 / 0.08); padding: 4px 12px; border-radius: var(--radius); border: 1px solid oklch(55% 0.15 250 / 0.2); }
.modal-body { padding: 22px 30px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.modal-field label { display: block; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.modal-field p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.modal-about { grid-column: 1 / -1; }
.modal-footer { padding: 14px 30px 22px; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.modal-footer a { color: var(--accent-ink); font-weight: 600; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; z-index: 3; transition: border-color 0.18s ease !important; }
.modal-close:hover { border-color: var(--border-strong); color: var(--ink); }

/* =============================================================
   SCROLLBAR
============================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--bg-alt); }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg-alt); }

/* =============================================================
   TYPEWRITER (retained for compat; unused on homepage)
============================================================= */
.typewriter-text { color: var(--accent-ink); font-weight: 600; }
.typewriter-cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent-ink); margin-left: 2px; vertical-align: text-bottom; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .mission-grid { grid-template-columns: 1fr; gap: 36px; }
  .project-featured { grid-template-columns: 1fr; gap: 28px; }
  .impact-row { grid-template-columns: repeat(2, 1fr); }
  .impact-fig:nth-child(2) { border-right: none; }
  .impact-fig:nth-child(1), .impact-fig:nth-child(2) { border-bottom: 1px solid var(--border); }
  .members-grid { grid-template-columns: repeat(3,1fr); }
  .apply-steps { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .team-overview { grid-template-columns: 1fr; }
  .newsletter-box { grid-template-columns: 1fr; gap: 28px; padding: 40px 36px; }
  .project-content-grid { grid-template-columns: 1fr; }
  .project-sidebar-card { position: static; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .nav-links, .nav-right .nav-cta { display: none; }
  .hamburger { display: flex; }

  .section { padding: 64px 0; }
  .hero { padding-top: calc(var(--nav-h) + 48px); }

  .impact-row { grid-template-columns: 1fr; }
  .impact-fig { border-right: none; border-bottom: 1px solid var(--border); }
  .impact-fig:last-child { border-bottom: none; }

  .apply-steps, .grid-2, .grid-3, .grid-4, .values-grid { grid-template-columns: 1fr; }
  /* Roster stays two-up on phones: one column turns 49 members into an
     endless scroll and wastes most of the width. */
  .members-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .member-card { padding: 20px 12px 16px; }
  .member-avatar { width: min(100%, 116px); height: auto; font-size: 1.25rem; margin-bottom: 12px; }

  .project-row { grid-template-columns: 64px 1fr; gap: 16px; }
  .project-row .thumb { width: 64px; height: 48px; }
  .project-row .pmeta { display: none; }

  .team-row { grid-template-columns: 24px 1fr; gap: 14px; row-gap: 4px; }
  .team-row .tcount { grid-column: 2; }
  .team-row .tlink { grid-column: 2; justify-self: start; }

  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .newsletter-field { flex-direction: column; }
  .team-subnav { flex-direction: column; align-items: flex-start; }
  .apply-form { padding: 28px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 18px; }
  .page-hero, .project-detail-hero { padding: calc(var(--nav-h) + 36px) 0 44px; }
}

/* =============================================================
   REDUCED MOTION
============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =============================================================
   BRAND LOGO (nav + footer), adapts to every header mode
============================================================= */
.nav-logo { gap: 0; }
.nav-logo-img { height: 62px; width: auto; display: block; }
/* Dark theme: render the blue logo white for contrast */
[data-theme="dark"] .nav-logo-img { filter: brightness(0) saturate(100%) invert(1); }
/* Footer is a fixed dark panel in both themes: always white */
.footer-logo-img { height: 72px; width: auto; display: block; }
/* Light footer = blue logo; dark footer = white logo */
[data-theme="dark"] .footer-logo-img { filter: brightness(0) saturate(100%) invert(1); }
@media (max-width: 768px) { .nav-logo-img { height: 46px; } .footer-logo-img { height: 56px; } }

/* Back link on its own line, clearly separated from the kicker and title */
.page-hero-back, .back-link {
  display: flex; width: max-content; max-width: 100%;
  align-items: center; gap: 6px; margin-bottom: 20px;
}


/* =============================================================
   SCROLL LOCK COMPENSATION
   lockScroll() in script.js sets --sbw to the scrollbar width and adds
   .scroll-locked to <html> before hiding body overflow. Everything that is
   laid out against the viewport must reserve that width, or the page jumps
   sideways when a modal or the mobile menu opens.
============================================================= */
html.scroll-locked body,
html.scroll-locked .nav,
html.scroll-locked .lightbox { padding-right: var(--sbw, 0px); }

/* The overlay carries its own padding, so the scrollbar width has to be ADDED
   to it. Overwriting it outright shifted the still-visible card sideways the
   moment the lock was released, which read as a jerk just before it faded. */
html.scroll-locked .modal-overlay { padding-right: calc(var(--modal-pad) + var(--sbw, 0px)); }

/* Applies to the drawer in both states: `right` is now a static offset (the
   slide is a transform), so setting it only on .open would relayout the panel
   mid-animation. */
html.scroll-locked .mobile-menu { right: var(--sbw, 0px); }
html.scroll-locked .rail { right: calc(24px + var(--sbw, 0px)); }

/* =============================================================
   NAV FIT (7 links since Members was added, Aug 2026)
   Keep every label on one line, and tighten the link padding in the narrow
   band just above the hamburger breakpoint so the bar stays single-row
   instead of wrapping "Apply Now".
============================================================= */
.nav-links a, .nav-cta { white-space: nowrap; }

@media (min-width: 769px) and (max-width: 950px) {
  .nav-links { gap: 0; }
  .nav-links a { padding-left: 7px; padding-right: 7px; }
  .nav-links a::after { left: 7px; right: 7px; }
  .nav-logo-img { height: 46px; }
}

/* Cornell EEO statement in the footer bottom bar. */
.footer-eeo { display: block; margin-top: 10px; font-size: var(--fs-xs); color: var(--dim); line-height: 1.6; }
.footer-eeo a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-eeo a:hover { color: var(--accent-ink); }

/* =============================================================
   TOUCH TARGETS
   Text links and icon buttons sit well under the ~44px comfortable
   tap size on phones. Grow the hit area without moving the type.
============================================================= */
@media (max-width: 768px) {
  /* The drawer covers most of the width, so the logo would straddle its edge.
     Fade it out while the menu is open and leave just the close button. */
  .nav-logo { transition: opacity .25s var(--ease-out) !important; }
  .menu-open .nav-logo { opacity: 0; pointer-events: none; }

  /* The bar keeps z-index 46 (above the scrim at 40 and the drawer at 45) so
     the close button stays reachable — but that means anything it paints lands
     on top of both. Scrolled, its opaque background drew a full-width band
     across the top: undimmed over the page on the left, a slightly different
     white from the drawer on the right, so the drawer looked like it started
     partway down the screen. Stop the bar painting while the menu is open and
     let the scrim and the drawer run to the top edge behind it. */
  .menu-open .nav,
  .menu-open .nav.scrolled {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Sits at z-index 1000, so it floats over the scrim as a stray blue stub. */
  .scroll-progress { transition: width .08s linear, opacity .2s ease !important; }
  .menu-open .scroll-progress { opacity: 0; }

  /* keep display:flex/width:max-content so it stays on its own line */
  .page-hero-back { min-height: 44px; }
  .footer-col ul a { display: inline-block; padding: 7px 0; }
  .footer-contact-item a { display: inline-block; padding: 8px 0; }
  .roster-group-h a { display: inline-flex; align-items: center; min-height: 40px; }
  .lightbox-close { width: 44px; height: 44px; font-size: 1.9rem; }
  .modal-close { width: 44px; height: 44px; }
  .modal-info h2 { padding-right: 48px; }
  .fchip { min-height: 40px; display: inline-flex; align-items: center; }
  .gc-loc + br { display: none; }
}