/* ---------- Fonts ---------- */
@font-face {
  font-family: "Scale VF";
  src: url("../assets/fonts/Scale-VF.otf") format("opentype");
  font-weight: 200 900;
  font-stretch: 50% 175%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Scale VF";
  src: url("../assets/fonts/Scale-VF-Italic.otf") format("opentype");
  font-weight: 200 900;
  font-stretch: 50% 175%;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #0a0a0b;
  --bg-elev: #131315;
  --bg-elev-2: #1b1b1e;
  --fg: #f4f3ef;
  --muted: #96948c;
  --muted-2: #605f5a;
  --accent: #1edcf2;
  --accent-cool: #6fb7c9;
  --border: rgba(244, 243, 239, 0.1);
  --border-strong: rgba(244, 243, 239, 0.18);
  --font-display: "Scale VF", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Inconsolata", "SF Mono", "Courier New", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1440px;

  /* Liquid glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.3);
  --glass-blur: 22px;
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 16px 48px rgba(0, 0, 0, 0.28);
}

/* ---------- Ambient liquid background ---------- */
.liquid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.liquid-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.28;
  will-change: transform;
}

.liquid-bg .blob-1 {
  width: 46vw;
  height: 46vw;
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  animation: drift1 26s ease-in-out infinite alternate;
}

.liquid-bg .blob-2 {
  width: 38vw;
  height: 38vw;
  bottom: -14%;
  right: -6%;
  background: radial-gradient(circle, var(--accent-cool), transparent 70%);
  animation: drift2 32s ease-in-out infinite alternate;
}

.liquid-bg .blob-3 {
  width: 30vw;
  height: 30vw;
  top: 38%;
  left: 55%;
  background: radial-gradient(circle, var(--accent), transparent 72%);
  opacity: 0.16;
  animation: drift3 22s ease-in-out infinite alternate;
}

@keyframes drift1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(6vw, 8vh) scale(1.12); }
}

@keyframes drift2 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-7vw, -6vh) scale(1.08); }
}

@keyframes drift3 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-4vw, 5vh) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-bg .blob {
    animation: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

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

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

::selection {
  background: var(--accent);
  color: #0a0a0b;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
  transition: top 0.3s var(--ease);
}

.site-header .wrap {
  pointer-events: auto;
  width: auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(16, 16, 18, 0.6);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), padding 0.3s var(--ease);
}

.site-header.scrolled {
  top: 12px;
}

.site-header.scrolled .wrap {
  background: rgba(16, 16, 18, 0.75);
  padding: 11px 24px;
}

.brand {
  display: flex;
  align-items: center;
  position: relative;
}

.brand img {
  height: 26px;
  width: auto;
  display: block;
  transition: opacity 0.25s var(--ease);
}

.brand img.alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.brand:hover img.base {
  opacity: 0;
}

.brand:hover img.alt {
  opacity: 1;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding: 4px 0;
  transition: color 0.25s var(--ease);
}

.main-nav a:hover {
  color: var(--accent);
}

.main-nav a.active {
  color: var(--fg);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.main-nav a:hover::after {
  width: 100%;
}

.nav-item {
  position: relative;
}

.nav-dropdown {
  /* Sits flush against the nav item (zero gap) so the mouse never leaves a
     hoverable descendant while moving from the link down to the panel below —
     any real gap here breaks the CSS :hover chain before the panel is reached. */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-dropdown-inner {
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(16, 16, 18, 0.92);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(8px);
  transition: transform 0.25s var(--ease);
}

.nav-item:hover .nav-dropdown-inner {
  transform: translateY(0);
}

.nav-dropdown a {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.nav-dropdown a::after {
  display: none;
}

.nav-dropdown a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}

.socials {
  display: flex;
  align-items: center;
  gap: 18px;
}

.socials a {
  color: var(--muted);
  transition: color 0.25s var(--ease);
}

.socials a:hover {
  color: var(--accent);
}

.socials svg {
  width: 17px;
  height: 17px;
  display: block;
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--fg);
  width: 32px;
  height: 24px;
  position: relative;
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--fg);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.menu-toggle span:nth-child(1) {
  top: 2px;
}
.menu-toggle span:nth-child(2) {
  top: 11px;
}
.menu-toggle span:nth-child(3) {
  top: 20px;
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 90px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(30, 220, 242, 0.08), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(30, 220, 242, 0.05), transparent 40%);
  pointer-events: none;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(10, 10, 11, 0.82) 20%, rgba(10, 10, 11, 0.3) 42%, transparent 62%);
}

.hero .wrap {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 9vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  opacity: 0;
  animation: rise 0.9s var(--ease) 0.1s forwards;
}

.hero-subhead {
  margin: 20px 0;
  opacity: 0;
  animation: rise 0.9s var(--ease) 0.22s forwards;
}

.hero-subhead p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.15;
  color: var(--accent);
  margin: 0;
}

.hero p.lede {
  font-family: var(--font-mono);
  max-width: 560px;
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 20px;
  opacity: 0;
  animation: rise 0.9s var(--ease) 0.34s forwards;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: rise 0.9s var(--ease) 0.46s forwards;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn span {
  /* letter-spacing adds a trailing gap after the last character too, which
     visually pushes centered text left — this cancels that gap out */
  margin-right: -0.1em;
  /* All-caps text has no descenders, but the line box still reserves
     descender space below the baseline — that reserved space (not the
     ink) is what align-items:center actually centers, so the visible
     letters sit noticeably above true center. Nudge down to compensate. */
  transform: translateY(2px);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.35), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.btn:hover::after {
  opacity: 1;
}

.btn-primary {
  background: linear-gradient(160deg, #a5f5fc, var(--accent) 55%, #0fa8b8);
  color: #06181a;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(30, 220, 242, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-primary:hover {
  box-shadow: 0 10px 30px rgba(30, 220, 242, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-ghost {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--fg);
}

.btn-ghost:hover {
  border-color: var(--glass-border-strong);
  color: var(--accent);
  background: var(--glass-bg-strong);
}

.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 32px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--muted-2), transparent);
  animation: cue 1.8s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50% { transform: scaleY(0.55); opacity: 1; }
}

/* ---------- Section shell ---------- */
section {
  padding: 120px 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.section-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 46px);
  margin: 0;
  letter-spacing: -0.01em;
}

.section-head p {
  font-family: var(--font-mono);
  color: var(--muted);
  max-width: 420px;
  margin: 0;
}

.section-head p.one-line {
  max-width: none;
  white-space: nowrap;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Work grid ---------- */
#work {
  background: linear-gradient(var(--bg), var(--bg-elev) 40%, var(--bg));
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.work-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.work-card:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.1);
}

.work-card .media {
  position: absolute;
  inset: 0;
}

.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.5s var(--ease), filter 0.5s var(--ease);
  filter: saturate(0.9) brightness(0.82);
}

.work-card img.alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.work-card:hover img.base {
  opacity: 0;
}

.work-card:hover img.alt {
  opacity: 1;
}

.work-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 11, 0.88) 100%);
  pointer-events: none;
}

.work-card .title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
}

.work-card .role {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

/* ---------- About ---------- */
#about {
  padding-bottom: 48px;
}

#about .section-head {
  margin-bottom: 24px;
}

.about-copy {
  margin: 0 0 56px;
}

.about-copy p {
  font-family: var(--font-display);
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 20px;
}

.about-copy p strong {
  color: var(--fg);
  font-weight: 600;
}

.timeline-horizontal {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  scrollbar-width: none;
}

.timeline-horizontal::-webkit-scrollbar {
  display: none;
}

.timeline-stop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 200px;
  text-align: center;
}

/* Built from per-stop segments instead of one absolutely-positioned bar —
   .timeline-horizontal scrolls horizontally on narrow screens, and a bar
   sized to its visible (clipped) width would stop partway through the
   scrollable content instead of spanning all the way to the last stop. */
.timeline-stop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  height: 2px;
  background: var(--glass-border-strong);
  z-index: 0;
}

.timeline-stop:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -24px;
  width: 24px;
  top: 40px;
  height: 2px;
  background: var(--glass-border-strong);
  z-index: 0;
}

.timeline-icons {
  display: flex;
  margin-bottom: 20px;
}

.timeline-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
  border: 2px solid var(--glass-border-strong);
  box-shadow: var(--glass-shadow);
}

.timeline-icon + .timeline-icon {
  margin-left: -18px;
}

.timeline-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.timeline-icon--pll img {
  transform: translateY(2%);
}

.timeline-icon--syracuse img {
  transform: scale(1.12);
}

.timeline-icon--tufts img {
  transform: scale(1.15);
}

.timeline-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-org-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-org-row .org {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 1px;
}

.timeline-org-row .role {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 12px;
}

.timeline-org-row .role + .role {
  margin-top: 3px;
}

/* ---------- Contact ---------- */
#contact {
  padding-top: 48px;
  padding-bottom: 48px;
}

.contact-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.contact-close .signature {
  width: 100%;
  max-width: 260px;
  height: auto;
  opacity: 0.92;
}

.contact-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.contact-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--muted);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}

.contact-icons svg {
  width: 20px;
  height: 20px;
}

.contact-icons a:hover {
  border-color: var(--glass-border-strong);
  color: var(--accent);
  background: var(--glass-bg-strong);
  transform: translateY(-3px);
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 24px 0 32px;
  border-top: 1px solid var(--border);
}

.site-footer--with-tabs {
  padding-bottom: 90px;
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.back-to-top {
  color: var(--muted);
  transition: color 0.25s var(--ease);
}

.back-to-top:hover {
  color: var(--accent);
}

/* ---------- Project detail page ---------- */
.project-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 130px 0 40px;
  background: var(--bg);
}

.project-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  mask-image: linear-gradient(180deg, black 0%, black 40%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 40%, transparent 92%);
}

.project-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.project-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.project-hero .breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.project-hero .breadcrumb a:hover {
  color: var(--accent);
}

.project-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 84px);
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.project-description {
  font-family: var(--font-mono);
  width: 100%;
  color: rgba(244, 243, 239, 0.82);
  font-size: 17px;
}

.hero-fade {
  height: 140px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
  pointer-events: none;
}

.project-meta-wrap {
  position: relative;
  margin-top: -120px;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 0 0 36px;
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.project-meta div {
  min-width: 140px;
  text-align: center;
}

.project-meta .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}

.project-meta .value {
  font-family: var(--font-mono);
  font-size: 15px;
}

.gallery-section {
  padding: 0 0 64px;
  scroll-margin-top: 100px;
}

.gallery-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}

.gallery-blurb {
  font-family: var(--font-display);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: -12px 0 24px;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}

.project-gallery + .project-gallery {
  margin-top: 16px;
}

.project-gallery img {
  border-radius: 12px;
  border: 1px solid var(--border);
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s var(--ease);
}

.project-gallery img:hover {
  transform: scale(1.02);
}

.more-work {
  border-top: 1px solid var(--border);
  padding: 48px 0 100px;
}

.more-work .gallery-heading {
  border-top: none;
  padding-top: 0;
}

.more-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------- Section tabs (sticky sub-nav) ---------- */
.section-tabs-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(16, 16, 18, 0.8);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid var(--glass-border);
}

.section-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  overflow-x: auto;
  padding: 16px 0;
  scrollbar-width: none;
}

.section-tabs::-webkit-scrollbar {
  display: none;
}

.section-tabs a {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.section-tabs a:hover {
  color: var(--fg);
}

.section-tabs a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- Lightbox ---------- */
body.lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 7, 0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease);
  padding: 60px;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-frame {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox-img {
  max-width: 100%;
  max-height: calc(100svh - 120px);
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.97);
  transition: transform 0.3s var(--ease);
}

.lightbox.open .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: var(--fg);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.lightbox-close:hover {
  border-color: var(--glass-border-strong);
  color: var(--accent);
  transform: scale(1.06);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: var(--fg);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.lightbox-nav:hover {
  border-color: var(--glass-border-strong);
  color: var(--accent);
  transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
  left: 24px;
}

.lightbox-next {
  right: 24px;
}

.lightbox-count {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
}

@media (max-width: 760px) {
  .lightbox {
    padding: 24px;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .timeline-stop {
    min-width: 160px;
  }

  .timeline-icon {
    width: 60px;
    height: 60px;
  }

  .timeline-stop::before,
  .timeline-stop:not(:last-child)::after {
    top: 30px;
  }

  .work-grid,
  .more-work-grid {
    grid-template-columns: 1fr;
  }

  .project-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .main-nav,
  .socials {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  body.nav-open .main-nav {
    display: flex;
    position: fixed;
    inset: 0;
    top: 64px;
    background: rgba(16, 16, 18, 0.7);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 32px;
    gap: 28px;
    z-index: 90;
  }

  body.nav-open .main-nav a {
    font-size: 22px;
  }

  body.nav-open .nav-item {
    width: 100%;
  }

  body.nav-open .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-top: 0;
    transform: none;
  }

  body.nav-open .nav-dropdown-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin-top: 14px;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    transform: none;
  }

  body.nav-open .nav-dropdown a {
    font-size: 16px;
    color: var(--muted);
    padding: 0;
  }

  section {
    padding: 80px 0;
  }

  .wrap {
    padding: 0 22px;
  }

  .section-head p.one-line {
    white-space: normal;
  }

  /* The left-to-right fade only works once the hero has enough width for
     text to sit clear of the image on the left. On a narrow viewport
     everything stacks over the busy collage instead, so it needs a much
     stronger, more uniform scrim to stay readable. */
  .hero-media::after {
    background: rgba(10, 10, 11, 0.9);
  }

  /* Same idea for project pages — the title/description sit directly over
     the cover photo on mobile (no room for the image to breathe off to the
     side like on desktop), so darken it further to keep text readable. */
  .project-hero-media::after {
    background: rgba(0, 0, 0, 0.75);
  }

  .hero {
    min-height: 80svh;
  }

  .hero .wrap {
    text-align: center;
  }

  .hero p.lede {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  /* Fit every stop within the viewport instead of scrolling — shrink the
     icons, tighten the gaps, and size text down so labels like "Premier
     Lacrosse League" wrap cleanly in a narrow column instead of being
     clipped or requiring a horizontal swipe to reach. */
  .timeline-horizontal {
    overflow-x: visible;
    gap: 8px;
  }

  .timeline-stop {
    min-width: 0;
  }

  .timeline-icons {
    margin-bottom: 12px;
  }

  .timeline-icon {
    width: 40px;
    height: 40px;
  }

  .timeline-icon + .timeline-icon {
    margin-left: -10px;
  }

  .timeline-stop::before,
  .timeline-stop:not(:last-child)::after {
    top: 20px;
  }

  .timeline-stop:not(:last-child)::after {
    right: -8px;
    width: 8px;
  }

  .timeline-org-row .org {
    font-size: 11px;
  }

  .timeline-org-row .role {
    font-size: 9px;
  }
}