.project-hero {
      position: relative;
      display: grid;
      min-height: clamp(620px, 100svh, 980px);
      align-items: end;
      padding: clamp(136px, 14vw, 190px) var(--page-x) clamp(44px, 6vw, 84px);
      overflow: hidden;
      color: var(--surface);
    }

    .project-hero::after {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, color-mix(in oklch, black, transparent 44%), transparent 34%, color-mix(in oklch, black, transparent 16%)),
        linear-gradient(90deg, color-mix(in oklch, black, transparent 16%), transparent 62%);
      content: "";
    }

    .project-hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.82) contrast(0.96);
      transform: scale(1.04);
    }

    .motion-ready .project-hero img {
      animation: hero-drift 12s var(--ease-golden) forwards;
    }

    .project-hero-copy {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
      gap: clamp(28px, 6vw, 96px);
      align-items: end;
      width: 100%;
    }

    .kicker {
      margin: 0 0 24px;
      color: currentColor;
      font-family: var(--font-mono);
      font-size: var(--text-label);
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .project-hero h1 {
      max-width: 980px;
      margin: 0;
      font-size: var(--text-hero);
      font-weight: 300;
      line-height: 0.88;
      text-wrap: balance;
    }

    .project-hero p:not(.kicker) {
      margin: 0;
      color: color-mix(in oklch, var(--surface), transparent 14%);
      font-size: var(--text-body);
      line-height: 1.75;
      text-wrap: pretty;
    }

    .intro-strip {
      display: grid;
      grid-template-columns: minmax(230px, 0.52fr) minmax(0, 1.48fr);
      gap: clamp(34px, 7vw, 116px);
      padding: var(--section-y) var(--page-x);
      border-bottom: 1px solid var(--border);
    }

    .project-meta {
      display: grid;
      align-content: start;
      border-top: 1px solid var(--border);
    }

    .meta-row {
      display: grid;
      gap: 8px;
      padding: 18px 0;
      border-bottom: 1px solid var(--border);
    }

    .meta-row span {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: var(--text-label);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .meta-row b {
      font-size: var(--text-sm);
      font-weight: 300;
    }

    .project-text {
      display: grid;
      gap: clamp(20px, 2.6vw, 34px);
      max-width: 860px;
    }

    .project-text h2 {
      margin: 0;
      font-size: var(--text-lg);
      font-weight: 300;
      line-height: 1;
      text-wrap: balance;
    }

    .project-text p {
      margin: 0;
      color: var(--muted);
      font-size: var(--text-body);
      line-height: 1.85;
      text-wrap: pretty;
    }

    .image-band {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: clamp(18px, 3vw, 48px);
      padding: 0 var(--page-x) var(--section-y);
      border-bottom: 1px solid var(--border);
    }

    .image-band figure {
      margin: 0;
      overflow: hidden;
      background: color-mix(in oklch, var(--border), white 40%);
    }

    .image-band figure:first-child {
      grid-column: span 8;
      aspect-ratio: 16 / 10;
    }

    .image-band figure:last-child {
      grid-column: span 4;
      align-self: end;
      aspect-ratio: 4 / 5;
    }

    .image-band img,
    .wide-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.88) contrast(0.98);
      transform: scale(1.02);
      transition: transform 1000ms var(--ease-golden), filter 1000ms var(--ease-golden);
    }

    .image-band figure:hover img,
    .wide-image:hover img {
      transform: scale(1.08);
      filter: saturate(0.96) contrast(1.05);
    }

    /* Premium glass-hover */
    .image-band:has(figure:hover) figure:not(:hover) {
      opacity: 0.4;
      filter: blur(4px) saturate(0.8);
      transform: scale(0.98);
      transition: all var(--motion-base) var(--ease-golden);
    }

    .story-section {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(260px, 0.58fr);
      gap: clamp(34px, 7vw, 116px);
      align-items: start;
      padding: var(--section-y) var(--page-x);
      border-bottom: 1px solid var(--border);
    }

    .wide-image {
      min-height: clamp(420px, 72svh, 820px);
      overflow: hidden;
    }

    .wide-image img {
      height: 100%;
    }

    .spec-section {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
      gap: clamp(34px, 7vw, 116px);
      padding: var(--section-y) var(--page-x);
      border-bottom: 1px solid var(--border);
    }

    .spec-section h2 {
      margin: 0;
      max-width: 760px;
      font-size: var(--text-lg);
      font-weight: 300;
      line-height: 0.98;
      text-wrap: balance;
    }

    .download-link {
      justify-self: start;
      align-self: end;
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid currentColor;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: var(--text-label);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      transition: transform var(--motion-fast) var(--ease-cinematic), color var(--motion-fast) var(--ease-soft);
    }

    .download-link::after {
      content: "->";
      transition: transform var(--motion-base) var(--ease-cinematic);
    }

    .download-link:hover,
    .download-link:focus-visible {
      transform: translateY(-2px);
      color: var(--wine);
    }

    .download-link:hover::after,
    .download-link:focus-visible::after {
      transform: translateX(6px);
    }

    .project-gallery {
      display: grid;
      gap: clamp(28px, 4vw, 58px);
      padding: clamp(72px, 10vw, 132px) var(--page-x);
      border-bottom: 1px solid var(--border);
      background: color-mix(in oklch, var(--bg), var(--surface) 34%);
    }

    .gallery-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: end;
    }

    .gallery-title {
      display: grid;
      gap: 14px;
      max-width: 760px;
    }

    .gallery-title h2 {
      margin: 0;
      font-size: var(--text-lg);
      font-weight: 300;
      line-height: 1;
      text-wrap: balance;
    }

    .gallery-title p {
      max-width: 58ch;
      margin: 0;
      color: var(--muted);
      font-size: var(--text-body);
      line-height: 1.75;
      text-wrap: pretty;
    }

    .gallery-controls {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .gallery-button {
      width: 46px;
      height: 46px;
      display: inline-grid;
      place-items: center;
      border: 1px solid currentColor;
      border-radius: 50%;
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      font: inherit;
      transition:
        background-color var(--motion-fast) var(--ease-soft),
        color var(--motion-fast) var(--ease-soft),
        transform var(--motion-fast) var(--ease-cinematic);
    }

    .gallery-button:hover,
    .gallery-button:focus-visible {
      background: var(--accent);
      color: var(--surface);
      transform: translateY(-2px);
    }

    .gallery-counter {
      min-width: 72px;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: var(--text-label);
      letter-spacing: 0.16em;
      text-align: right;
    }

    .gallery-track {
      display: flex;
      gap: clamp(16px, 2.4vw, 34px);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      padding-bottom: 14px;
      scroll-padding-inline: var(--page-x);
      scroll-snap-type: x mandatory;
      scrollbar-color: var(--accent) transparent;
    }

    .gallery-track::-webkit-scrollbar {
      height: 4px;
    }

    .gallery-track::-webkit-scrollbar-track {
      background: color-mix(in oklch, var(--border), transparent 46%);
    }

    .gallery-track::-webkit-scrollbar-thumb {
      background: var(--accent);
    }

    .gallery-slide {
      flex: 0 0 min(78vw, 1120px);
      scroll-snap-align: start;
    }

    .gallery-slide figure {
      display: grid;
      gap: 14px;
      margin: 0;
    }

    .gallery-slide .gallery-media {
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: color-mix(in oklch, var(--border), white 34%);
    }

    .gallery-slide.is-portrait {
      flex-basis: min(56vw, 760px);
    }

    .gallery-slide.is-portrait .gallery-media {
      aspect-ratio: 4 / 5;
    }

    .gallery-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.9) contrast(0.98);
      transform: scale(1.01);
      transition: transform 900ms var(--ease-cinematic), filter 900ms var(--ease-cinematic);
    }

    .gallery-slide:hover img,
    .gallery-slide:focus-within img,
    .gallery-slide.is-active img {
      filter: saturate(0.98) contrast(1.03);
      transform: scale(1.045);
    }

    .gallery-slide figcaption {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: var(--text-label);
      letter-spacing: 0.14em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .gallery-thumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .gallery-thumb {
      width: clamp(68px, 8vw, 112px);
      aspect-ratio: 4 / 3;
      padding: 0;
      border: 1px solid transparent;
      background: transparent;
      cursor: pointer;
      opacity: 0.58;
      transition:
        border-color var(--motion-fast) var(--ease-soft),
        opacity var(--motion-fast) var(--ease-soft),
        transform var(--motion-fast) var(--ease-cinematic);
    }

    .gallery-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(0.82);
    }

    .gallery-thumb:hover,
    .gallery-thumb:focus-visible,
    .gallery-thumb.is-active {
      border-color: var(--accent);
      opacity: 1;
      transform: translateY(-2px);
    }

    .project-nav {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: stretch;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

    .project-nav-item {
      position: relative;
      min-height: clamp(240px, 31vw, 430px);
      display: grid;
      align-content: end;
      gap: 10px;
      overflow: hidden;
      padding: clamp(26px, 4vw, 58px);
      color: var(--surface);
      isolation: isolate;
    }

    .project-nav-item::after {
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(180deg, transparent 18%, color-mix(in oklch, black, transparent 22%)),
        linear-gradient(90deg, color-mix(in oklch, black, transparent 34%), transparent 72%);
      content: "";
    }

    .project-nav-item img {
      position: absolute;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.78) contrast(0.95);
      transform: scale(1.02);
      transition: transform 900ms var(--ease-cinematic), filter 900ms var(--ease-cinematic);
    }

    .project-nav-item:hover img,
    .project-nav-item:focus-visible img {
      filter: saturate(0.94) contrast(1.02);
      transform: scale(1.07);
    }

    .project-nav-label {
      font-family: var(--font-mono);
      font-size: var(--text-label);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .project-nav-name {
      max-width: 12ch;
      font-size: var(--text-md);
      font-weight: 300;
      line-height: 1;
      text-wrap: balance;
    }

    .project-nav-index {
      min-width: clamp(148px, 16vw, 240px);
      display: grid;
      place-items: center;
      padding: 24px;
      border-inline: 1px solid var(--border);
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: var(--text-label);
      letter-spacing: 0.16em;
      text-align: center;
      text-transform: uppercase;
      transition: background-color var(--motion-fast) var(--ease-soft), color var(--motion-fast) var(--ease-soft);
    }

    .project-nav-index:hover,
    .project-nav-index:focus-visible {
      background: var(--accent);
      color: var(--surface);
    }

    @media (max-width: 1180px) {
      .project-hero-copy,
      .intro-strip,
      .story-section,
      .spec-section {
        grid-template-columns: 1fr;
      }

      .image-band figure:first-child,
      .image-band figure:last-child {
        grid-column: span 6;
      }
    }

    @media (max-width: 820px) {
      .topbar {
        grid-template-columns: 1fr auto;
        min-height: 76px;
      }

      .desktop-nav,
      .nav-action {
        display: none;
      }

      .menu-toggle {
        display: inline-flex;
      }

      .project-hero {
        min-height: 100svh;
        padding-top: 136px;
      }

      .image-band {
        grid-template-columns: 1fr;
      }

      .image-band figure:first-child,
      .image-band figure:last-child {
        grid-column: auto;
      }

      .gallery-head,
      .project-nav {
        grid-template-columns: 1fr;
      }

      .gallery-controls {
        justify-content: space-between;
      }

      .gallery-slide,
      .gallery-slide.is-portrait {
        flex-basis: 86vw;
      }

      .project-nav-index {
        min-height: 76px;
        border-block: 1px solid var(--border);
        border-inline: 0;
      }

      .footer {
        grid-template-columns: 1fr;
      }
    }