/* ==========================================================================
   Mathis Seidl — Portfolio
   Design tokens
   ========================================================================== */
:root {
  --bg: #ffffff;
  --bg-alt: #f7f4ee;
  --bg-alt-2: #eef0e9;
  --ink: #16191c;
  --ink-soft: #454b52;
  --muted: #6b7178;
  --border: #e3e0d8;
  --accent: #2c5f4f;
  --accent-ink: #ffffff;
  --accent-soft: #e7efe9;
  --chip-bg: #eef2ee;
  --chip-ink: #33413a;
  --shadow: 0 1px 2px rgba(20, 20, 15, 0.04), 0 8px 24px rgba(20, 20, 15, 0.06);
  --shadow-hover: 0 4px 10px rgba(20, 20, 15, 0.06), 0 16px 32px rgba(20, 20, 15, 0.10);
  --radius: 14px;
  --radius-sm: 8px;
  --header-h: 96px;
  --max-w: 1180px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Space Grotesk", var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

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

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 0.5em; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }
@media (max-width: 640px) {
  .section { padding: 64px 0; }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* Section titles: one black title per section, no tagline underneath. */
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--ink);
  margin: 0;
}
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }

/* Sub-heading inside a section (Internships / Projects) */
.subhead {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-head);
  font-size: 1.58rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 22px;
}
.subhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.subhead-spaced { margin-top: 56px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.tag {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-ink);
  white-space: nowrap;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.68rem;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.main-nav ul { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 1.34rem;
  padding: 8px 2px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active {
  color: var(--ink);
  text-decoration: none;
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1040px) {
  .main-nav ul { gap: 20px; }
  .main-nav a { font-size: 1.12rem; }
  .brand { font-size: 1.4rem; }
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .main-nav.open { max-height: 460px; }
  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
  }
  .main-nav a { display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding: 72px 0 96px;
}
.hero .container {
  display: grid;
  grid-template-columns: minmax(220px, 380px) 1fr;
  gap: 96px;
  align-items: center;
}
.hero-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-alt-2);
  box-shadow: var(--shadow);
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hero-text .kicker { color: var(--muted); font-weight: 500; font-size: 1.25rem; margin-bottom: 4px; }
.hero-text h1 {
  font-size: clamp(2.4rem, 5.6vw, 3.6rem);
  font-weight: 700;
}
.hero-text .lede {
  font-size: clamp(1.3rem, 2.3vw, 1.55rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-bottom: 32px;
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .hero-portrait { max-width: 260px; margin: 0 auto; }
  .hero-text .lede { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   Logo strip
   ========================================================================== */
.logo-strip { padding: 44px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 140px;
  width: max-content;
  animation: marquee-right 26s linear infinite;
}
.marquee-track a { display: block; flex-shrink: 0; opacity: 0.8; transition: opacity 0.15s ease; }
.marquee-track a:hover { opacity: 1; }
.marquee-track img { height: 52px; width: auto; object-fit: contain; }
.marquee-track img.logo-ebsb { height: 147px; }
.marquee-track img.logo-bu { height: 78px; }
.marquee-track img.logo-siemens { height: 62px; }
.marquee-track img.logo-amazon { height: 47px; transform: translateY(9px); }

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: start;
}
.about-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.about-photos img {
  border-radius: var(--radius);
  object-fit: cover;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow);
}
.about-text p { margin: 0 0 1.1em; color: var(--ink-soft); font-size: 1.02rem; }
.about-text strong { color: var(--ink); }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photos { max-width: 420px; margin: 0 auto; }
}

/* ==========================================================================
   Education timeline (bottom of About)
   Horizontal 2019 -> May 2027. Segment widths are declared as --w in the
   markup and the same scale is used to place the live "today" light.
   ========================================================================== */
/* "My Journey" supplies the gap above the bar. One body line is ~26px
   (1.02rem x 1.6), so these are half a line and a full line. */
.subhead-journey { margin-top: 56px; }
/* 48 = the subhead's own 22px bottom margin (they collapse) + one line */
.subhead-journey + .timeline-wrap { margin-top: 48px; }

.timeline-wrap {
  margin-top: 68px;
  padding-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}
@media (max-width: 860px) {
  .timeline-wrap { margin-top: 48px; }
}

.edu-timeline {
  --tl-h: 8px;
  position: relative;
  min-width: 1000px;
  /* the right padding reserves room for the graduation caption, which sits
     past the end of the bar; every row inherits it so they stay aligned */
  padding: 0 132px 0 12px;
}

/* --- above the line: end captions + internship pins --- */
.tl-top { position: relative; height: 108px; z-index: 6; }

.tl-endcap {
  position: absolute;
  bottom: 7px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--muted);
}
.tl-endcap small {
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--muted);
}
.tl-endcap-start {
  left: 0;
  letter-spacing: 0.12em;
}
.tl-endcap-end {
  left: 100%;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 16px;
  width: 116px;
  color: var(--accent);
  z-index: 8;
}
.tl-endcap-end small { color: var(--accent); opacity: 0.75; }

.tl-pin {
  position: absolute;
  left: var(--x);
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tl-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}
/* Every pin is the same box: a fixed logo slot over one line of text, so the
   three cards match no matter how differently shaped the logos are. */
.tl-pin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 96px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.tl-pin-logo {
  display: grid;
  place-items: center;
  width: 66px;
  height: 34px;
}
.tl-pin-logo img {
  width: auto;
  height: auto;
  max-width: 62px;
  max-height: 28px;
  object-fit: contain;
}
/* the EBSB file carries a wide white margin; crop it back to the mark so the
   square logo carries the same weight as the two wordmarks */
.tl-crop-ebsb { position: relative; overflow: hidden; }
.tl-crop-ebsb img {
  position: absolute;
  width: 47.22px;
  max-width: none;
  max-height: none;
  left: 8.21px;
  top: -4.72px;
}
.tl-pin-card small { font-size: 0.66rem; color: var(--muted); }
.tl-pin-stem {
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, var(--border), var(--accent));
}

/* --- the bar --- */
.tl-bar {
  position: relative;
  height: var(--tl-h);
  border-radius: 999px;
  background: #e6e3da;
}

/* hollow end markers */
.tl-cap {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--muted);
  z-index: 7;
}
.tl-cap-start { left: 0; transform: translate(-50%, -50%); }
.tl-cap-end { left: 100%; transform: translate(-50%, -50%); border-color: var(--accent); }

.tl-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--today);
  border-radius: 999px;
  /* flat, not a gradient: a left-to-right ramp made the early years look
     washed out and the recent ones nearly black */
  background: #43836d;
  overflow: hidden;
  z-index: 3;
}
.tl-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
  animation: tl-shimmer 3.8s ease-in-out infinite;
}
@keyframes tl-shimmer {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(340%); }
}

/* segment tints sit on top of the fill so high school reads lighter */
.tl-segs {
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  z-index: 4;
}
.tl-seg { flex: 0 0 var(--w); }
/* high school carries no tint — the label and the school bracket below it
   already set it apart, and a white wash made it read as unfinished */
/* summers read warm, so the gap between Spring and Fall is obvious */
.tl-seg.seg-summer { background: rgba(255, 190, 84, 0.6); }

/* semester dividers — short grey ticks crossing the line */
.tl-ticks { position: absolute; inset: 0; z-index: 5; }
.tl-ticks span {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: var(--x);
  width: 1px;
  margin-left: -0.5px;
  background: #a7aca5;
}
/* --- the live "today" light --- */
.tl-now {
  position: absolute;
  left: var(--today);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}
.tl-now-glow {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffffff 0 24%, #ffd76a 34%, #ff8a5c 58%, #b06ad8 78%, rgba(176,106,216,0) 82%);
  /* halo kept tight so it does not wash out the ticks sitting beside it */
  box-shadow:
    0 0 0 2.5px rgba(255, 255, 255, 0.9),
    0 0 8px 2px rgba(255, 170, 90, 0.8),
    0 0 16px 5px rgba(120, 190, 255, 0.4),
    0 0 24px 8px rgba(176, 106, 216, 0.2);
  animation: tl-pulse 2.6s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}
.tl-now-label {
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b3541e;
  white-space: nowrap;
}

/* --- academic years under the bar --- */
.tl-years { display: flex; margin-top: 29px; }
.tl-year {
  position: relative;
  flex: 0 0 var(--w);
  /* without this a flex item cannot shrink below its longest word, so the
     narrow Summer cells widen and push every later label out of line with
     its band once the bar is at its 1000px minimum */
  min-width: 0;
  padding: 0 10px;
  text-align: center;
}
.tl-year + .tl-year::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--border);
}
.tl-year strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.84rem;
  line-height: 1.25;
  color: var(--ink);
}
.tl-year small { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
/* summers sit between the academic years, so their cells carry no year name */
.tl-year-gap { padding: 0 2px; }
.tl-year-gap small { margin-top: 1px; font-size: 0.66rem; }

/* --- school brackets under the years --- */
.tl-schools { display: flex; margin-top: 20px; }
.tl-school {
  position: relative;
  flex: 0 0 var(--w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 13px 12px 0;
  border-top: 1px solid var(--border);
}
.tl-school::before,
.tl-school::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 9px;
  background: var(--muted);
}
.tl-school::before { left: 0; }
.tl-school::after { right: 0; }
/* the summer between high school and BU belongs to neither bracket */
.tl-school-gap { border-top: none; }
.tl-school-gap::before, .tl-school-gap::after { display: none; }

/* both logo slots are the same height, so the school names below them sit on
   the same line whatever shape the logo is */
.tl-school-logo { display: grid; place-items: center; height: 28px; }
.tl-school-logo img { max-width: 74px; max-height: 24px; object-fit: contain; }
.tl-school-logo.tl-monogram img { max-width: 28px; max-height: 28px; }
.tl-school-text strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--ink);
}
.tl-school-text small { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tl-fill::after, .tl-now-glow { animation: none; }
}

/* ==========================================================================
   Projects grid
   ========================================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .projects-grid { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt-2); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-date {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card-body p { color: var(--muted); font-size: 0.94rem; margin: 0; flex: 1; }
.card-body .tag-list { margin-top: 16px; }
.card-link {
  margin-top: 18px;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-link.disabled { color: var(--muted); }

/* Internship cards: same frame as every other card, only the kicker differs. */
.card-featured {
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.card-featured:hover { box-shadow: var(--shadow-hover); }
.card-featured .card-kicker {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 6px;
  white-space: nowrap;
  flex: none;
}

/* ==========================================================================
   Certifications
   ========================================================================== */
/* full container width, so the pair lines up with the Mouratoglou banner */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 820px) { .certs-grid { grid-template-columns: 1fr; } }

.cert-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cert-card img { width: 140px; height: 140px; object-fit: contain; flex-shrink: 0; }
/* the NVIDIA asset is a whole certificate rather than a badge, so it needs
   more room than the AWS mark to stay readable */
.cert-nvidia img { width: 168px; height: 168px; }
.cert-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.cert-card h3 { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.cert-status {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ==========================================================================
   Athletics
   ========================================================================== */
#athletics .section-head { margin-bottom: 28px; }

.academy-banner {
  position: relative;
  margin: 0 0 44px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.academy-banner img {
  width: 100%;
  aspect-ratio: 16 / 5.2;
  object-fit: cover;
  object-position: center 58%;
}
.academy-banner figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 48px 28px 20px;
  background: linear-gradient(180deg, rgba(10, 14, 12, 0), rgba(10, 14, 12, 0.8));
  color: #fff;
}
.academy-banner figcaption strong { font-family: var(--font-head); font-size: 1.15rem; }
.academy-banner figcaption span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 640px) {
  .academy-banner img { aspect-ratio: 16 / 9; }
  .academy-banner figcaption { padding: 40px 18px 16px; }
}

.athletics-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.athletics-video .video-frame { max-width: none; margin: 0; }
.stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.stat-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--chip-bg);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
}
.stat-line strong { font-size: 1.1rem; color: var(--accent); }
.stat-line span { color: var(--muted); font-weight: 500; font-size: 0.88rem; }

.utr-card {
  margin: 58px 0 0;
  max-width: 227px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.utr-card img { width: 100%; }

.video-frame {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 860px) {
  .athletics-grid { grid-template-columns: 1fr; }
  .athletics-video { order: -1; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-section { background: var(--bg); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } }

.contact-lede {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 16px;
}
.contact-pitch p { color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 1.1em; }
.contact-pitch strong { color: var(--ink); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.contact-cards { display: grid; gap: 12px; }
.contact-cards li { list-style: none; }
.contact-cards a,
.contact-static {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.contact-cards a:hover {
  text-decoration: none;
  transform: translateY(-2px);
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.contact-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.contact-icon svg { width: 21px; height: 21px; }
.contact-meta { display: flex; flex-direction: column; min-width: 0; }
.contact-meta small {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-meta strong { font-size: 0.98rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.contact-arrow {
  margin-left: auto;
  color: var(--muted);
  font-size: 1.05rem;
  transition: transform 0.15s ease, color 0.15s ease;
}
.contact-cards a:hover .contact-arrow { color: var(--accent); transform: translateX(3px); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: #b7bbb4; padding: 26px 0; }
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.86rem;
}
.site-footer a { color: #eceee9; }

/* ==========================================================================
   Project detail pages
   ========================================================================== */
.project-hero {
  padding: 56px 0 40px;
  text-align: center;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.project-hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.project-hero .meta { color: var(--muted); font-size: 1rem; }

.project-body { padding: 56px 0 96px; }
.project-body .container { max-width: 860px; }

.project-cover {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 48px;
}
.project-cover img { width: 100%; }

.project-section { margin-bottom: 48px; }
.project-section .eyebrow { margin-bottom: 6px; }
.project-section h2 { font-size: 1.5rem; margin-bottom: 16px; }
.project-section p { color: var(--ink-soft); margin: 0 0 1.1em; font-size: 1.03rem; }
.project-section p:last-child { margin-bottom: 0; }

.project-figure { margin: 24px 0; }
.project-figure img { border-radius: var(--radius-sm); box-shadow: var(--shadow); width: 100%; }
.project-figure figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 8px; text-align: center; }

.figure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
@media (max-width: 640px) { .figure-row { grid-template-columns: 1fr; } }
.figure-row img { border-radius: var(--radius-sm); box-shadow: var(--shadow); width: 100%; height: 100%; object-fit: cover; }

.resource-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }

.project-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-top: 8px;
}

.video-frame-native {
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin: 16px 0;
}
.video-frame-native video { display: block; width: 100%; height: auto; }
.video-frame-native.portrait { max-width: 380px; margin-left: auto; margin-right: auto; }

.placeholder-note {
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  color: var(--muted);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}