:root {
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type: clamp(min, preferred, max). vi = % of viewport inline size — scales with phone width more predictably than vw alone. */
  --font-hero-title: clamp(0.875rem, 0.65rem + 0.6vi, 1.25rem);
  --font-hero-lede: clamp(1.125rem, 0.78rem + 2.65vi, 1.75rem);
  --font-card-title: clamp(1rem, 0.62rem + 1.9vi, 1.5rem);
  --font-card-desc: clamp(0.9375rem, 0.52rem + 1.55vi, 1.25rem);
  --font-footer-link: clamp(0.875rem, 0.78rem + 0.85vi, 1rem);

  /* Swatch: mint, blue-grey, steel, ink, lime */
  --palette-mint: #daeadb;
  --palette-slate: #9bb4bc;
  --palette-steel: #7091a6;
  --palette-ink: #5565a6;
  --palette-lime: #bde598;

  /* Abstract mesh (accent palette) — soft blobs over --rail */
  --mesh-indigo: #402e7a;
  --mesh-teal: #3f9383;
  --mesh-sage: #8ebf84;
  --mesh-blush: #ffd9f6;
  --mesh-orchid: #964d9e;

  /* Page shell — near-black (cool neutral), light type for contrast */
  --rail: #0a0a0c;
  --rail-muted: color-mix(in srgb, var(--palette-mint) 72%, transparent);
  --text: #f4f4f5;
  --accent: var(--palette-lime);
  --hero-muted: color-mix(in srgb, var(--palette-slate) 82%, white);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --page-gutter: 24px;
  /* Same inset as hero top → headline; used again for lede → first project */
  --hero-edge: clamp(1.5rem, 5vw, 4rem);
  /* Leadership + Collaboration: symmetric vertical section padding */
  --section-story-pad-block: 80px;

  /* Custom cursor (MapleStory glove set) */
  --cursor-remote: url("assets/cursors/aero_arrow.cur"), auto;
  /* Note: .ani cursors don't animate in CSS in modern browsers */
  --cursor-remote-pointer: url("assets/cursors/aero_arrow.cur"), pointer;
  --cursor-remote-move: url("assets/cursors/aero_move.cur"), move;
}

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

html {
  scroll-behavior: smooth;
  min-height: 100%;
  background-color: var(--rail);
}

/* Soft mesh (fixed to viewport); sits above --rail, below page content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  height: 100vh;
  width: 100%;
  background-image:
    radial-gradient(
      ellipse 100% 85% at 0% 0%,
      color-mix(in srgb, var(--mesh-indigo) 50%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 80% 70% at 100% 8%,
      color-mix(in srgb, var(--mesh-orchid) 42%, transparent) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse 90% 80% at 92% 88%,
      color-mix(in srgb, var(--mesh-teal) 36%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 75% 65% at 0% 100%,
      color-mix(in srgb, var(--mesh-sage) 30%, transparent) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 60% at 38% 42%,
      color-mix(in srgb, var(--mesh-blush) 18%, transparent) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 110% 55% at 50% 118%,
      color-mix(in srgb, var(--mesh-indigo) 26%, transparent) 0%,
      transparent 60%
    );
  background-repeat: no-repeat;
  background-size:
    140% 120%,
    130% 110%,
    125% 115%,
    135% 125%,
    100% 100%,
    150% 90%;
  background-position:
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    35% 40%,
    50% 100%;
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  position: relative;
  isolation: isolate;
  z-index: 0;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  cursor: var(--cursor-remote);
}

/* Keep the remote cursor even on interactive elements */
a,
button,
summary,
label,
input,
textarea,
select {
  cursor: var(--cursor-remote-pointer);
}

/* Use move glove for draggable content (if any) */
[draggable="true"] {
  cursor: var(--cursor-remote-move);
}

/* Animated MapleStory link cursor (web-friendly) */
.has-animated-link-cursor,
.has-animated-link-cursor body,
.has-animated-link-cursor * {
  cursor: none;
}

#ms-link-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  background-image: url("assets/cursors/animated/aero_link/sprite.png");
  background-repeat: no-repeat;
  background-size: 128px 64px; /* 2 frames * 64px */
  image-rendering: pixelated;
  animation: none;
  background-position: 0 0;
}

#ms-link-cursor.is-hover-interactive:not(.is-pressing):not(.is-static) {
  animation: ms-link-cursor-frames 420ms steps(2) infinite;
}

#ms-link-cursor.is-static {
  animation: none;
  background-position: 0 0;
}

/* Second column: finger pressing (hold while primary button down) */
#ms-link-cursor.is-pressing {
  animation: none;
  background-position: -64px 0;
}

#ms-link-cursor.is-static.is-pressing {
  animation: none;
  background-position: -64px 0;
}

@keyframes ms-link-cursor-frames {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -128px 0;
  }
}

body > * {
  position: relative;
  z-index: 1;
}

/* Project pages: per-page mesh variations (override the fixed body::before) */
.theme--systems {
  --mesh-indigo: #273b8f;
  --mesh-teal: #2ea39a;
  --mesh-sage: #8cd6a0;
  --mesh-blush: #ffe1c8;
  --mesh-orchid: #7e3db5;
  --project-glow-a: var(--palette-lime);
  --project-glow-b: var(--mesh-teal);
  --project-glow-c: var(--mesh-orchid);
  /* Grid systems copy → scaling video → Training: keep vertical rhythm, less than default vision gaps */
  --systems-doc-media-stack-gap: clamp(1rem, 2.75vw, 1.85rem);
}

/* Systems case study: full-bleed art, no chrome fill, no upscale past native pixels */
.theme--systems .project-media {
  aspect-ratio: auto;
  height: auto;
  overflow: visible;
  background: transparent;
}

.theme--systems .project-media img,
.theme--systems .project-media video {
  display: block;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}

.theme--systems .project-media img {
  width: auto;
  max-width: 100%;
}

.theme--systems .project-media video {
  width: 100%;
  max-width: 100%;
}

/* Last gallery hero on systems page: fill the media frame (overrides intrinsic-width img rules above) */
.theme--systems .project-media--fill {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.theme--systems .project-media--fill img {
  width: 100%;
  height: 100%;
  max-width: none;
  margin-inline: 0;
  object-fit: cover;
  object-position: center;
}

@supports (image-rendering: high-quality) {
  .theme--systems .project-media img {
    image-rendering: high-quality;
  }
}

body.theme--systems.project-page .project-vision > .project-launch + .project-media,
body.theme--systems.project-page .project-vision > .project-media + .project-media {
  margin-top: var(--systems-doc-media-stack-gap);
}

.theme--pairing {
  --mesh-indigo: #173b73;
  --mesh-teal: #25a098;
  --mesh-sage: #9de07a;
  --mesh-blush: #ffd6ef;
  --mesh-orchid: #b84ab1;
  --project-glow-a: var(--mesh-teal);
  --project-glow-b: var(--palette-lime);
  --project-glow-c: var(--mesh-orchid);
}

.theme--landing {
  --mesh-indigo: #3a2a6a;
  --mesh-teal: #2f7f9d;
  --mesh-sage: #86c5a6;
  --mesh-blush: #ffe2f2;
  --mesh-orchid: #6a4bb8;
  --project-glow-a: var(--mesh-orchid);
  --project-glow-b: var(--mesh-teal);
  --project-glow-c: var(--palette-mint);
}

.theme--xbox-discord {
  --mesh-indigo: #243880;
  --mesh-teal: #1f8f4a;
  --mesh-sage: #7ec96e;
  --mesh-blush: #e8dcff;
  --mesh-orchid: #5c4ad1;
  --project-glow-a: var(--mesh-teal);
  --project-glow-b: var(--mesh-orchid);
  --project-glow-c: var(--palette-lime);
}

/* Xbox & Discord hero: keep white headline; size uses default .project-title scaling. */
body.theme--xbox-discord .project-top .project-title {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Xbox & Discord: full-white copy (kickers, body, lists, pillars). */
body.theme--xbox-discord.project-page {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

body.theme--xbox-discord.project-page .project-role__label,
body.theme--xbox-discord.project-page .project-role__value,
body.theme--xbox-discord.project-page .project-role__list,
body.theme--xbox-discord.project-page .project-vision__intro,
body.theme--xbox-discord.project-page .project-vision__pillars,
body.theme--xbox-discord.project-page .project-vision__pillars li p,
body.theme--xbox-discord.project-page .project-vision__pillar-name,
body.theme--xbox-discord.project-page .project-launch__body > p,
body.theme--xbox-discord.project-page .project-launch__col p,
body.theme--xbox-discord.project-page .project-launch__list,
body.theme--xbox-discord.project-page .project-impact__body > p {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

body.theme--xbox-discord.project-page .project-impact__inner > .project-problem__title + .project-impact__body {
  margin-top: calc(var(--project-headline-gap) + 1rem);
}

/* Problem & opportunity: restore default palette (muted kicker, softer body copy). */
body.theme--xbox-discord.project-page .project-problem__inner > .project-role__label {
  color: var(--hero-muted);
  -webkit-text-fill-color: var(--hero-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0;
  min-height: 50vh;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
}

@supports (min-height: 50dvh) {
  .hero {
    min-height: 50dvh;
  }
}

.hero__inner {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  padding-top: var(--hero-edge);
  padding-bottom: 0;
}

.hero > .hero__inner:first-child {
  padding-top: calc(var(--hero-edge) + 80px);
  text-align: center;
}

.hero__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  max-width: 100%;
  gap: clamp(0.85rem, 2.2vw, 1.35rem);
}

/* Hero copy (shared with Leadership, Collaboration & About intro) */
.hero__title,
.hero__lede,
.leadership__title,
.collaboration__title,
.about__title {
  margin: 0;
  padding: 0;
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--font-hero-lede);
  letter-spacing: -0.03em;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 78%, var(--palette-steel));
}

/* Home hero only: +100px text box width */
.hero__title,
.hero__lede {
  max-width: 930px;
}

.leadership__title,
.collaboration__title {
  margin-bottom: clamp(1.5rem, 4vw, 2.125rem);
}

@media (max-width: 719px) {
  .hero__title,
  .hero__lede,
  .leadership__title,
  .collaboration__title,
  .about__title {
    font-size: calc(var(--font-hero-lede) - 0.25rem);
  }

  .leadership__desc,
  .collaboration__quote {
    font-size: calc(var(--font-card-desc) - 0.25rem + 2px);
  }
}

/* Home project cards: single column, centered, max 1280px per tile */
.projects {
  width: 100%;
  flex: 0 0 auto;
  padding-top: var(--hero-edge);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.projects__strip {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: var(--page-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.projects__strip .project-card {
  width: 100%;
  max-width: min(100%, 1280px);
  margin-inline: auto;
}

.leadership,
.collaboration,
.about {
  width: 100%;
  flex: 0 0 auto;
  padding-block: var(--section-story-pad-block);
  border-top: 1px solid var(--border-subtle);
}

.leadership__inner,
.collaboration__inner,
.about__inner {
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  max-width: 52rem;
  text-align: center;
}

.collaboration__inner {
  max-width: 72rem;
}

.about__experience {
  margin: clamp(2rem, 5vw, 2.75rem) auto 0;
  padding: 0 12px;
  max-width: calc(36rem + 200px);
  text-align: left;
  display: flex;
  flex-direction: column;
  /* No row gap — spacing matches above/below each divider via symmetric row padding */
  gap: 0;
}

.about__experience-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  align-items: baseline;
  /* Same space from text ↔ divider before and divider ↔ text after */
  padding-block: 36px;
  padding-inline: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.about__experience-row:first-of-type {
  border-top: 1px solid var(--border-subtle);
}

.about__experience dt,
.about__experience dd {
  margin: 0;
}

.about__experience dt {
  font-size: var(--font-card-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.about__experience dd.about__experience-dates {
  font-size: var(--font-card-title);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--palette-slate) 78%, var(--text));
  white-space: nowrap;
  justify-self: end;
  text-align: right;
}

.about__experience dd.about__experience-subtitle {
  grid-column: 1 / -1;
  margin: 0;
  max-width: none;
  font-size: calc(var(--font-card-desc) - 0.05rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  color: color-mix(in srgb, var(--hero-muted) 92%, var(--text));
  white-space: normal;
}

.leadership__grid,
.collaboration__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .leadership__grid,
  .collaboration__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
    text-align: left;
  }
}

.collaboration__grid {
  row-gap: 80px;
  column-gap: 32px;
}

.leadership__item,
.collaboration__item {
  margin: 0;
}

.leadership__metric,
.collaboration__metric {
  margin: 0 0 0.35rem;
  font-size: clamp(1.75rem, 1rem + 2.5vi, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: color-mix(in srgb, var(--text) 88%, var(--mesh-orchid));
}

.leadership__subhead,
.collaboration__subhead {
  margin: 0 0 0.65rem;
  font-size: var(--font-card-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}

.leadership__desc,
.collaboration__desc {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 85%, var(--palette-steel));
}

.collaboration__byline {
  margin: 0 0 clamp(0.65rem, 2vw, 0.85rem);
  text-align: inherit;
}

.collaboration__name {
  margin: 0 0 0.2rem;
  font-size: var(--font-card-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.collaboration__role {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--palette-slate) 72%, var(--text));
}

.collaboration__quote {
  margin: 0;
  padding: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 88%, var(--palette-steel));
}

.collaboration__highlight {
  margin: 0;
  padding: 0.12em 0.18em 0.08em;
  background: linear-gradient(
    to bottom,
    transparent 22%,
    color-mix(in srgb, #fde047 58%, transparent) 22%,
    color-mix(in srgb, #fcd34d 42%, transparent) 100%
  );
  border-radius: 0.2em;
  color: inherit;
  font: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.collaboration__quote p {
  margin: 0 0 0.9rem;
}

.collaboration__quote p:last-child {
  margin-bottom: 0;
}

.project-card {
  position: relative;
  width: 100%;
  display: block;
  --card-glow-a: var(--palette-lime);
  --card-glow-b: var(--mesh-teal);
  --card-glow-c: var(--mesh-orchid);
  border-radius: 1rem;
  border: 1px solid var(--border-subtle);
  background: transparent;
  overflow: visible;
  transform-origin: center center;
  box-shadow: none;
  transition: transform 0.28s ease, border-color 0.2s ease, box-shadow 360ms ease;
}

/* `[hidden]` alone is overridden by `display: block` above in some engines */
.project-card[hidden] {
  display: none !important;
}

.project-card--systems {
  --card-glow-a: var(--palette-lime);
  --card-glow-b: var(--mesh-teal);
  --card-glow-c: var(--mesh-orchid);
}

.project-card--pairing {
  --card-glow-a: var(--mesh-teal);
  --card-glow-b: var(--palette-lime);
  --card-glow-c: var(--mesh-orchid);
}

.project-card--landing {
  --card-glow-a: var(--mesh-orchid);
  --card-glow-b: var(--mesh-teal);
  --card-glow-c: var(--palette-mint);
}

.project-card--xbox-discord {
  --card-glow-a: var(--mesh-teal);
  --card-glow-b: var(--mesh-orchid);
  --card-glow-c: var(--palette-lime);
}

.project-card:hover,
.project-card:focus-within {
  border-color: var(--border-strong);
  transform: scale(1.02);
  box-shadow:
    0 22px 80px color-mix(in srgb, var(--card-glow-a) 28%, transparent),
    0 44px 160px color-mix(in srgb, var(--card-glow-b) 20%, transparent),
    0 18px 220px color-mix(in srgb, var(--card-glow-c) 18%, transparent);
}

.project-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .project-card {
    transition: border-color 0.2s ease;
  }

  .project-card:hover,
  .project-card:focus-within {
    transform: none;
  }
}

.project-card__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--palette-ink) 88%, #0a1420);
}

.project-card__img,
.project-card__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
  /* Bottom-left origin: black at corner, fading toward top-right */
  background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.62) 28%,
    rgba(0, 0, 0, 0.24) 58%,
    transparent 84%
  );
}

/* Hover-only copy on fine pointers; always show on touch */
.project-card__body {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 1.1rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 1;
  transform: none;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .project-card__body {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.28s ease, transform 0.28s ease;
  }

  .project-card:hover .project-card__body,
  .project-card:focus-within .project-card__body {
    opacity: 1;
    transform: translateY(0);
  }

  .project-card:hover .project-card__media::after,
  .project-card:focus-within .project-card__media::after {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .project-card__body {
      transition: opacity 0.18s ease;
      transform: none;
    }

    .project-card:hover .project-card__body,
    .project-card:focus-within .project-card__body {
      transform: none;
    }

    .project-card__media::after {
      transition: none;
    }

    .project-card {
      transition: border-color 0.2s ease;
    }
  }
}

/* Touch / coarse pointer: keep scrim under always-visible copy */
@media not all and (hover: hover) and (pointer: fine) {
  .project-card__media::after {
    opacity: 1;
  }
}

.project-card__title {
  margin: 0;
  font-size: var(--font-card-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--palette-mint);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--palette-ink) 55%, transparent);
}

.project-card__desc {
  margin: 0;
  max-width: 52ch;
  font-size: var(--font-card-desc);
  line-height: 1.45;
  color: color-mix(in srgb, var(--palette-mint) 88%, var(--palette-slate));
  text-shadow: 0 1px 2px color-mix(in srgb, var(--palette-ink) 40%, transparent);
}

.hero__footer {
  padding-top: 0.25rem;
  text-align: center;
  width: 100%;
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 2.2vw, 1.25rem);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
}

.links a {
  color: var(--text);
  font-size: var(--font-footer-link);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--palette-slate) 65%, transparent);
  padding-bottom: 2px;
}

.links a:hover,
.links a:focus-visible {
  border-color: var(--accent);
  color: var(--palette-mint);
  background: color-mix(in srgb, var(--palette-ink) 45%, transparent);
  outline: none;
}

/* Make project cards behave as links (used on home page) */
a.project-card {
  text-decoration: none;
  color: inherit;
}

/* Project detail pages */
.project-page {
  min-height: 100vh;
  /* Kicker → headline spacing (+8px under prior tightened value) */
  --project-kicker-gap: calc(max(0px, calc(clamp(0.8rem, 1.75vw, 1rem) - 40px)) + 8px);
  --project-headline-gap: max(0px, calc(clamp(5rem, 14vw, 7rem) - 80px));
  --project-vision-media-launch-tight: max(0px, calc(clamp(5rem, 14vw, 7rem) - 60px));
  /* Headlines under Vision / Feature launch / Impact / Problem (matches .project-problem__title) */
  --project-section-title-size: clamp(1.05rem, 0.82rem + 1.05vi, 1.35rem);
}

.project-wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  padding-top: calc(var(--hero-edge) + 48px);
  padding-bottom: calc(var(--hero-edge) + 48px);
}

/* Looping video lead: first gallery sits under shell padding only */
.project-wrap > .project-gallery:first-child {
  margin-top: 0;
}

.project-wrap > .project-gallery:first-child + .project-top {
  margin-top: var(--project-vision-media-launch-tight);
}

.project-top {
  display: flex;
  flex-direction: column;
  gap: calc(max(0px, calc(0.85rem - 40px)) + 8px);
  text-align: left;
}

.project-gallery {
  width: 100%;
}

.project-title {
  margin: 0;
  font-size: clamp(1.65rem, 1.1rem + 2.5vi, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text);
}

.project-desc {
  margin: 0;
  font-size: var(--font-card-desc);
  line-height: 1.55;
  color: #fff;
}

.project-body {
  margin-top: clamp(5rem, 14vw, 7rem);
  max-width: 42rem;
}

.project-body p {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-body p + p {
  margin-top: 1rem;
}

.project-role {
  margin-top: max(0px, calc(clamp(5rem, 14vw, 7rem) - 40px));
  max-width: min(100%, 65rem);
}

.project-role__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 768px) {
  .project-role__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
  }
}

.project-role__block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.project-role__label {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.35rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hero-muted);
}

.project-role__value {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.15rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--text);
}

.project-role__list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-role__list li {
  padding-left: 0.35rem;
}

.project-role__list li + li {
  margin-top: 0.35rem;
}

.project-problem {
  --problem-stack: clamp(5rem, 14vw, 7rem);
  margin-top: var(--problem-stack);
  max-width: none;
}

.project-problem__inner {
  max-width: min(100%, 58rem);
}

.project-problem__inner > .project-role__label {
  margin: 0 0 var(--project-kicker-gap);
}

.project-problem__title {
  margin: 0;
  font-size: calc(var(--project-section-title-size) + 4px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Case study: keep section headlines pure white (matches Feature launch titles). */
body.theme--xbox-discord .project-problem__title {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.project-problem__content {
  margin-top: max(0px, calc(var(--problem-stack) - 80px));
}

.project-problem__content + .project-problem__title,
.project-problem__body + .project-problem__title {
  margin-top: calc(var(--project-headline-gap) + 40px);
}

.project-problem__body {
  margin-top: max(0px, calc(var(--problem-stack) - 80px));
}

.project-problem__body > p {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-problem__body > p + p {
  margin-top: 1rem;
}

.project-problem__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}

@media (min-width: 768px) {
  .project-problem__columns {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 8vw, 5rem);
    align-items: start;
  }
}

.project-problem__col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.project-problem__col p {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-problem > .project-problem__inner + .project-media {
  margin-top: var(--problem-stack);
}

.project-problem__list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-problem__list li {
  padding-left: 0.35rem;
}

.project-problem__list li + li {
  margin-top: 0.35rem;
}

.project-vision {
  margin-top: var(--project-vision-media-launch-tight);
  max-width: none;
}

.project-vision__inner {
  max-width: min(100%, 58rem);
}

.project-vision__inner > .project-role__label {
  margin: 0 0 var(--project-kicker-gap);
}

.project-vision__inner > .project-problem__title + .project-vision__intro {
  margin-top: var(--project-headline-gap);
}

.project-vision > .project-vision__inner + .project-media {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-vision > .project-vision__inner + .project-launch {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-vision__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-page .project-vision__gallery .project-media {
  filter: none;
}

@media (min-width: 720px) {
  .project-vision__gallery--pair {
    grid-template-columns: 1fr 1fr;
  }
}

.project-vision__gallery--pair .project-media {
  aspect-ratio: auto;
}

.project-vision__gallery--pair .project-media img {
  height: auto;
  object-fit: contain;
}

.project-vision > .project-vision__inner + .project-vision__gallery {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-vision > .project-vision__gallery + .project-media {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-vision > .project-vision__gallery + .project-launch {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-vision > .project-vision__gallery + .project-launch.project-launch--tight-top {
  margin-top: var(--project-vision-media-launch-tight);
}

.project-vision > .project-launch + .project-launch {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-vision > .project-media + .project-media {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-vision > .project-launch + .project-media {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-vision > .project-media + .project-launch {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-vision > .project-media:first-of-type + .project-launch,
.project-vision > .project-media + .project-launch[aria-labelledby="project-launch-heading-2"],
.project-vision > .project-media + .project-launch[aria-labelledby="project-launch-heading-3"] {
  margin-top: var(--project-vision-media-launch-tight);
}

.project-vision > .project-launch + .project-launch {
  margin-top: clamp(5rem, 14vw, 7rem);
}

.project-impact {
  max-width: none;
}

.project-impact__inner {
  max-width: min(100%, 58rem);
}

.project-impact__inner > .project-impact__headline-row + .project-impact__body {
  margin-top: var(--project-headline-gap);
}

.project-impact__headline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 2.2vw, 1.25rem);
}

.project-impact__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: calc(var(--font-card-desc) - 0.2rem);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  color: color-mix(in srgb, var(--rail) 22%, #0f160c);
  background: color-mix(in srgb, var(--palette-lime) 92%, #fff);
  border: 1px solid color-mix(in srgb, var(--palette-lime) 55%, rgba(255, 255, 255, 0.35));
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.project-impact__cta:hover {
  background: color-mix(in srgb, var(--palette-lime) 100%, #fff);
  border-color: color-mix(in srgb, var(--palette-lime) 70%, #fff);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 10px 28px color-mix(in srgb, var(--palette-lime) 35%, transparent);
}

.project-impact__cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--palette-lime) 85%, #fff);
  outline-offset: 3px;
}

.project-impact__body > p {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-impact__body > p + p {
  margin-top: 1rem;
}

.project-impact__list {
  margin: 1rem 0 0;
  padding-left: 1.15rem;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-impact__list li {
  padding-left: 0.35rem;
}

.project-impact__list li + li {
  margin-top: 0.35rem;
}

.project-vision__intro {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-vision__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2rem);
  margin: calc(max(0px, calc(clamp(1rem, 2.5vw, 1.35rem) - 40px)) + 8px) 0 0;
  padding-left: 1.5rem;
  list-style: decimal;
  list-style-position: outside;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

@media (min-width: 640px) {
  .project-vision__pillars {
    grid-template-columns: 1fr 1fr;
  }
}

.project-vision__pillars li {
  padding-left: 0.35rem;
  min-width: 0;
}

.project-vision__pillar-name {
  margin: 0 0 0.4rem;
  font-size: calc(var(--font-card-desc) - 0.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}

.project-vision__pillars li p {
  margin: 0;
  line-height: 1.6;
}

.project-launch__inner {
  max-width: min(100%, 58rem);
}

.project-launch__inner > .project-role__label {
  margin: 0 0 var(--project-kicker-gap);
}

.project-launch__inner > .project-problem__title + .project-launch__body {
  margin-top: var(--project-headline-gap);
}

.project-launch__inner > .project-problem__title + .project-problem__title {
  margin-top: calc(var(--project-headline-gap) + 24px);
}

.project-launch__body > p {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-launch__body > p + p {
  margin-top: 1rem;
}

.project-launch__body > p + .project-launch__list {
  margin-top: 0.45rem;
}

.project-launch__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}

@media (min-width: 768px) {
  .project-launch__columns {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 8vw, 5rem);
    align-items: start;
  }
}

.project-launch__col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.project-launch__col p {
  margin: 0;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-launch__list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: calc(var(--font-card-desc) - 0.25rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

.project-launch__list li {
  padding-left: 0.35rem;
}

.project-launch__list li + li {
  margin-top: 0.35rem;
}

.project-gallery {
  margin-top: 100px;
  display: grid;
  gap: 1.25rem;
}

.project-wrap > .project-gallery + .project-impact {
  margin-top: var(--project-vision-media-launch-tight);
}

.project-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 1rem;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  background: color-mix(in srgb, var(--palette-ink) 88%, #0a1420);
}

.project-media--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.project-media__play {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.project-media__play::before {
  content: "";
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: color-mix(in srgb, #000 55%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.project-media__play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 18px solid rgba(255, 255, 255, 0.92);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.project-media--link:hover .project-media__play::before {
  background: color-mix(in srgb, #000 40%, transparent);
  border-color: rgba(255, 255, 255, 0.3);
}

.project-page .project-media {
  /* Radial-ish glow underneath, using the original palette */
  filter:
    drop-shadow(
      0 34px 90px color-mix(in srgb, var(--project-glow-a, var(--palette-lime)) 56%, transparent)
    )
    drop-shadow(
      0 56px 170px color-mix(in srgb, var(--project-glow-b, var(--mesh-teal)) 38%, transparent)
    )
    drop-shadow(
      0 24px 240px color-mix(in srgb, var(--project-glow-c, var(--mesh-orchid)) 26%, transparent)
    );
}

.project-media video,
.project-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}