:root {
      color-scheme: dark;
      --bg: #030604;
      --bg-soft: #071009;
      --panel: rgb(7 16 9 / 82%);
      --panel-strong: rgb(3 8 5 / 92%);
      --acid: #8cff43;
      --acid-bright: #a6ff72;
      --acid-deep: #315d1d;
      --text: #dce7da;
      --muted: #a7b5a7;
      --line: rgb(140 255 67 / 24%);
      --line-strong: rgb(140 255 67 / 52%);
      --header-h: 72px;
      --container: 1240px;
      --gutter: clamp(16px, 4vw, 40px);
      --section-space: clamp(72px, 8vw, 118px);
      --ease: cubic-bezier(.2, .75, .2, 1);
      --layer-background: -2;
      --layer-decoration: 0;
      --layer-content: 10;
      --layer-header: 100;
      --layer-intro: 1000;
      --cursor-x: 50vw;
      --cursor-y: 50vh;
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--header-h) + 22px);
      background: var(--bg);
    }
    body {
      margin: 0;
      min-width: 280px;
      overflow-x: hidden;
      background: var(--bg);
      color: var(--text);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body.intro-open,
    body.menu-open,
    body.lightbox-open { overflow: hidden; }
    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
    }
    body::before {
      z-index: 99;
      opacity: .032;
      background-image:
        repeating-radial-gradient(circle at 22% 34%, #fff 0 1px, transparent 1px 4px),
        repeating-radial-gradient(circle at 74% 68%, var(--acid) 0 1px, transparent 1px 5px);
      background-size: 5px 5px, 7px 7px;
      mix-blend-mode: soft-light;
    }
    body::after {
      z-index: 9;
      background: radial-gradient(360px circle at var(--cursor-x) var(--cursor-y), rgb(140 255 67 / 6%), transparent 68%);
      opacity: 0;
      transition: opacity .35s ease;
    }
    .ambient-dust {
      position: fixed;
      inset: 0;
      z-index: 9;
      overflow: hidden;
      opacity: .2;
      pointer-events: none;
    }
    .ambient-dust span {
      position: absolute;
      left: var(--dust-x);
      bottom: -20px;
      width: var(--dust-size);
      height: var(--dust-size);
      border-radius: 50%;
      background: rgb(220 255 200 / 40%);
      filter: blur(.4px);
      animation: dust-rise var(--dust-speed) linear infinite;
      animation-delay: var(--dust-delay);
    }
    .ambient-dust span:nth-child(1) { --dust-x: 8%; --dust-size: 2px; --dust-speed: 18s; --dust-delay: -7s; --dust-drift: 24px; }
    .ambient-dust span:nth-child(2) { --dust-x: 19%; --dust-size: 3px; --dust-speed: 24s; --dust-delay: -16s; --dust-drift: -18px; }
    .ambient-dust span:nth-child(3) { --dust-x: 31%; --dust-size: 2px; --dust-speed: 21s; --dust-delay: -3s; --dust-drift: 14px; }
    .ambient-dust span:nth-child(4) { --dust-x: 44%; --dust-size: 1px; --dust-speed: 16s; --dust-delay: -12s; --dust-drift: -22px; }
    .ambient-dust span:nth-child(5) { --dust-x: 56%; --dust-size: 2px; --dust-speed: 26s; --dust-delay: -20s; --dust-drift: 30px; }
    .ambient-dust span:nth-child(6) { --dust-x: 67%; --dust-size: 3px; --dust-speed: 22s; --dust-delay: -9s; --dust-drift: -16px; }
    .ambient-dust span:nth-child(7) { --dust-x: 78%; --dust-size: 1px; --dust-speed: 19s; --dust-delay: -14s; --dust-drift: 20px; }
    .ambient-dust span:nth-child(8) { --dust-x: 91%; --dust-size: 2px; --dust-speed: 25s; --dust-delay: -5s; --dust-drift: -28px; }
    ::selection { background: var(--acid); color: #020402; }
    a, button { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; }
    button, input, textarea { font: inherit; }
    img, video { display: block; max-width: 100%; }

    .wrap {
      width: min(var(--container), calc(100% - (var(--gutter) * 2)));
      margin-inline: auto;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    :focus-visible {
      outline: 2px solid var(--acid-bright);
      outline-offset: 4px;
    }

    .skip-link {
      position: fixed;
      left: 14px;
      top: 14px;
      z-index: calc(var(--layer-intro) + 10);
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 0 16px;
      background: var(--acid);
      color: #020402;
      font-weight: 900;
      text-decoration: none;
      transform: translateY(-180%);
      transition: transform .2s ease;
    }
    .skip-link:focus { transform: translateY(0); }

    /* Intro stays above every page layer and can always be skipped. */
    .intro {
      position: fixed;
      inset: 0;
      z-index: var(--layer-intro);
      height: 100vh;
      height: 100svh;
      overflow: hidden;
      background: #010201;
      opacity: 1;
      visibility: visible;
      transition: opacity .85s var(--ease), visibility .85s step-end, filter .85s var(--ease);
    }
    .intro::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: radial-gradient(circle at 50% 48%, rgb(140 255 67 / 12%), rgb(1 2 1 / 72%) 72%);
      opacity: 0;
      pointer-events: none;
      transition: opacity .8s var(--ease);
    }
    .intro.is-leaving {
      opacity: 0;
      visibility: hidden;
      filter: blur(5px);
      pointer-events: none;
    }
    .intro.is-leaving::after { opacity: 1; }
    .intro__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1);
      transition: transform 1.1s var(--ease), filter .85s var(--ease);
    }
    .intro.is-leaving .intro__video { transform: scale(1.075); filter: contrast(1.08) brightness(.72); }
    .intro__shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgb(0 0 0 / 10%), transparent 60%, rgb(0 0 0 / 34%));
      pointer-events: none;
    }
    .intro__skip {
      position: absolute;
      right: max(18px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom));
      z-index: 2;
      min-width: 44px;
      min-height: 44px;
      border: 1px solid rgb(166 255 114 / 70%);
      padding: 0 16px;
      background: rgb(3 8 5 / 76%);
      color: var(--acid-bright);
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
    }

    /* One stable navigation layer for the whole page. */
    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: var(--layer-header);
      height: var(--header-h);
      background: linear-gradient(to bottom, rgb(2 5 3 / 92%), rgb(2 5 3 / 76%));
      border-bottom: 1px solid transparent;
      transition: background .25s ease, border-color .25s ease, opacity .3s ease;
    }
    body.intro-open .site-header { opacity: 0; pointer-events: none; }
    .site-header.is-scrolled {
      background: rgb(2 5 3 / 96%);
      border-bottom-color: var(--line);
    }
    .nav {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .logo {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      color: var(--acid);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: clamp(.83rem, 1.1vw, 1rem);
      font-weight: 950;
      letter-spacing: -.02em;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      text-shadow: 1px 1px 0 #4d9128, 0 7px 18px rgb(0 0 0 / 58%);
    }
    .nav__links {
      display: flex;
      align-items: center;
      gap: clamp(12px, 2vw, 28px);
    }
    .nav__links a {
      position: relative;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 0 4px;
      color: var(--text);
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-decoration: none;
      text-transform: uppercase;
      transition: color .2s ease, transform .2s ease;
    }
    .nav__links a::after {
      content: "";
      position: absolute;
      right: 4px;
      bottom: 7px;
      left: 4px;
      height: 2px;
      background: var(--acid);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .25s var(--ease);
    }
    .nav__links a:hover,
    .nav__links a:focus-visible,
    .nav__links a[aria-current="page"] { color: var(--acid-bright); }
    .nav__links a:hover::after,
    .nav__links a:focus-visible::after,
    .nav__links a[aria-current="page"]::after {
      transform: scaleX(1);
      transform-origin: left;
    }
    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid var(--line-strong);
      background: rgb(3 8 5 / 72%);
      color: var(--acid);
      cursor: pointer;
    }
    .menu-toggle__icon,
    .menu-toggle__icon::before,
    .menu-toggle__icon::after {
      display: block;
      width: 19px;
      height: 2px;
      background: currentColor;
      transition: transform .2s ease, opacity .2s ease;
    }
    .menu-toggle__icon { position: relative; }
    .menu-toggle__icon::before,
    .menu-toggle__icon::after {
      content: "";
      position: absolute;
      left: 0;
    }
    .menu-toggle__icon::before { top: -6px; }
    .menu-toggle__icon::after { top: 6px; }
    .menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
    .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

    /* Layer order: background < decoration < content < header/menu. */
    .hero,
    .section,
    footer {
      position: relative;
      isolation: isolate;
    }
    .hero {
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      align-items: end;
      overflow: hidden;
      padding: calc(var(--header-h) + clamp(50px, 8vh, 90px)) 0 clamp(34px, 6vh, 68px);
      background: var(--bg);
    }
    .hero__wall,
    .hero__veil {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .hero__wall { z-index: var(--layer-background); overflow: hidden; }
    .hero__wall img {
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: center;
      filter: brightness(.56) contrast(1.06) saturate(.82);
      transform: scale(1.01);
      transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
    }
    .hero__veil {
      z-index: var(--layer-decoration);
      background:
        linear-gradient(to bottom, rgb(1 3 2 / 42%), transparent 30%, transparent 64%, rgb(1 3 2 / 82%)),
        radial-gradient(circle at 50% 44%, rgb(140 255 67 / 12%), transparent 38%);
    }
    .hero__content {
      position: relative;
      z-index: var(--layer-content);
      display: grid;
      gap: clamp(18px, 3vw, 34px);
      opacity: 1;
      transform: translateY(0);
      transition: opacity .9s var(--ease) .12s, transform 1s var(--ease) .12s;
    }
    body.intro-open .hero__content { opacity: 0; transform: translateY(30px); }
    body.intro-open .hero__wall img { transform: scale(1.075); filter: brightness(.4) contrast(1.08) saturate(.76); }
    .hero__kicker,
    .eyebrow {
      margin: 0;
      color: var(--acid);
      font-size: clamp(.7rem, .9vw, .8rem);
      font-weight: 900;
      letter-spacing: .14em;
      line-height: 1.3;
      text-transform: uppercase;
    }
    .hero__wordmark {
      width: max-content;
      max-width: 100%;
      color: var(--acid-bright);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: clamp(2rem, 10vw, 8.7rem);
      font-weight: 950;
      letter-spacing: -.07em;
      line-height: .82;
      white-space: nowrap;
      transform: skewX(-5deg);
      -webkit-text-stroke: 1px rgb(0 0 0 / 24%);
      text-shadow:
        1px 1px 0 #7fe33d,
        2px 2px 0 #66ba31,
        3px 3px 0 #4d8c25,
        4px 4px 0 #345f19,
        9px 14px 24px rgb(0 0 0 / 62%);
    }
    .hero__bottom {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: end;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }
    .hero__bottom p {
      max-width: 56ch;
      margin: 0;
      color: var(--muted);
      font-size: clamp(1rem, 1.2vw, 1.1rem);
    }
    .hero__jump {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--acid);
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-decoration: none;
      text-transform: uppercase;
    }
    .hero__jump::after { content: "↓"; font-size: 1rem; }

    .section {
      overflow: hidden;
      padding-block: var(--section-space);
      border-top: 1px solid rgb(140 255 67 / 10%);
      background: var(--bg-soft);
      --texture: url("assets/walls/optimized/wall-03.webp");
    }
    .section::before,
    .section::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .section::before {
      z-index: var(--layer-background);
      background-image: linear-gradient(rgb(3 8 5 / 78%), rgb(3 8 5 / 84%)), var(--texture);
      background-position: center calc(50% + var(--parallax-y, 0px));
      background-size: cover;
      transform: scale(1.055);
      will-change: background-position;
    }
    .section::after {
      z-index: var(--layer-decoration);
      background: linear-gradient(to bottom, rgb(0 0 0 / 12%), transparent 22%, transparent 78%, rgb(0 0 0 / 18%));
    }
    .section > .wrap { position: relative; z-index: var(--layer-content); }
    .manifesto { --texture: url("assets/walls/optimized/wall-01.webp"); }
    #about { --texture: url("assets/walls/optimized/wall-02.webp"); }
    #timeline { --texture: url("assets/walls/optimized/wall-01.webp"); }
    #projects { --texture: url("assets/walls/optimized/wall-03.webp"); }
    #crew { --texture: url("assets/walls/optimized/wall-01.webp"); }
    #contact { --texture: url("assets/walls/optimized/wall-02.webp"); }

    .manifesto__grid,
    .section__head {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
      gap: clamp(32px, 7vw, 96px);
      align-items: end;
    }
    .section__head { margin-bottom: clamp(38px, 6vw, 72px); }
    .manifesto h2,
    .section__head h2,
    .cta h2 {
      margin: 12px 0 0;
      color: var(--acid-bright);
      font-family: "Arial Black", Impact, sans-serif;
      font-weight: 950;
      letter-spacing: -.055em;
      line-height: .88;
      text-transform: uppercase;
      text-wrap: balance;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      -webkit-text-stroke: 1px rgb(0 0 0 / 16%);
    }
    .manifesto h2 {
      max-width: 9ch;
      font-size: clamp(3.2rem, 7.2vw, 7rem);
      transform: skewX(-5deg);
      text-shadow:
        1px 1px 0 #7fe33d,
        2px 2px 0 #66ba31,
        3px 3px 0 #4d8c25,
        4px 4px 0 #345f19,
        10px 14px 24px rgb(0 0 0 / 58%);
    }
    .manifesto h2 span { display: block; }
    .section__head h2 {
      max-width: 12ch;
      font-size: clamp(2.8rem, 5.8vw, 5.6rem);
      transform: skewX(-3deg);
      text-shadow:
        1px 1px 0 #72cd38,
        2px 2px 0 #559b29,
        3px 3px 0 #38661c,
        8px 12px 20px rgb(0 0 0 / 54%);
    }
    .manifesto__text,
    .section__head > p,
    .about-card p,
    .era p,
    .project__description,
    .cta__text {
      color: var(--muted);
      font-size: clamp(1rem, 1.15vw, 1.075rem);
      line-height: 1.62;
    }
    .manifesto__text,
    .section__head > p {
      margin: 0;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }
    .manifesto__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 28px;
    }

    .btn {
      position: relative;
      min-width: 44px;
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid var(--acid);
      padding: 10px 20px;
      background: rgb(4 10 6 / 68%);
      color: var(--acid-bright);
      box-shadow: 4px 4px 0 rgb(49 93 29 / 74%);
      font-size: .76rem;
      font-weight: 950;
      letter-spacing: .1em;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
      cursor: pointer;
      transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .btn::after { content: "↗"; font-size: 1rem; }
    .btn:hover,
    .btn:focus-visible {
      background: var(--acid);
      color: #020402;
      box-shadow: 2px 2px 0 var(--acid-deep);
      transform: translate(2px, 2px);
    }
    .btn:active { transform: translate(4px, 4px); box-shadow: none; }

    .about-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .about-card,
    .era,
    .project {
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgb(5 13 7 / 88%), rgb(2 7 4 / 76%));
      box-shadow: 0 18px 40px rgb(0 0 0 / 20%);
    }
    .about-card {
      display: grid;
      align-content: space-between;
      gap: 28px;
      padding: clamp(24px, 4vw, 46px);
    }
    .about-card__big {
      max-width: 13ch;
      color: var(--acid-bright);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: clamp(2rem, 4.2vw, 4rem);
      font-weight: 950;
      letter-spacing: -.05em;
      line-height: .92;
      text-transform: uppercase;
      text-wrap: balance;
      text-shadow: 1px 1px 0 #69bc34, 2px 2px 0 #477f24, 8px 12px 20px rgb(0 0 0 / 48%);
    }
    .about-card p { max-width: 52ch; margin: 0; }
    .services { display: grid; margin-top: 20px; border-top: 1px solid var(--line); }
    .services span {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-bottom: 1px solid var(--line);
      color: var(--text);
      font-size: .85rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .services span::after { content: "+"; color: var(--acid); }

    .timeline {
      position: relative;
      display: grid;
      gap: clamp(22px, 3vw, 34px);
      padding-left: 48px;
      --timeline-progress: 0;
    }
    .timeline::before,
    .timeline::after {
      content: "";
      position: absolute;
      top: 0;
      left: 7px;
      width: 2px;
      height: 100%;
      transform-origin: top;
    }
    .timeline::before { background: rgb(140 255 67 / 14%); }
    .timeline::after {
      background: linear-gradient(to bottom, var(--acid-bright), var(--acid));
      box-shadow: 0 0 16px rgb(140 255 67 / 44%);
      transform: scaleY(var(--timeline-progress));
    }
    .era {
      position: relative;
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(130px, .24fr) minmax(0, 1fr);
      gap: clamp(20px, 3vw, 30px);
      padding: clamp(20px, 3vw, 30px);
    }
    .era::before {
      content: "";
      position: absolute;
      top: 38px;
      left: -48px;
      width: 15px;
      height: 15px;
      border: 3px solid var(--bg);
      border-radius: 50%;
      background: var(--bg);
      box-shadow: 0 0 0 2px var(--acid-deep);
      transition: background .3s ease, box-shadow .3s ease, transform .3s var(--ease);
    }
    .era.is-active::before {
      background: var(--acid);
      box-shadow: 0 0 0 2px var(--acid), 0 0 24px rgb(140 255 67 / 64%);
      transform: scale(1.15);
    }
    .era__intro { display: contents; }
    .era__intro > div:last-child { grid-column: 2; align-self: end; }
    .era__year {
      position: sticky;
      top: calc(var(--header-h) + 22px);
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: start;
      color: var(--acid-bright);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: clamp(2.8rem, 5.2vw, 5rem);
      font-weight: 950;
      letter-spacing: -.07em;
      line-height: .82;
      text-shadow: 1px 1px 0 #65b532, 2px 2px 0 #3d7020, 6px 8px 14px rgb(0 0 0 / 42%);
      transform: skewX(-4deg);
      opacity: .56;
      filter: saturate(.56);
      transition: opacity .3s ease, filter .3s ease, transform .3s var(--ease);
    }
    .era.is-active .era__year { opacity: 1; filter: none; transform: skewX(-4deg) translateX(4px); }
    .era h3 {
      margin: 0 0 8px;
      color: var(--text);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: clamp(1.3rem, 2vw, 1.8rem);
      letter-spacing: -.02em;
      line-height: 1.08;
      text-transform: uppercase;
    }
    .era p { margin: 0; }
    .era__gallery {
      grid-column: 2;
      display: flex;
      justify-content: center;
      gap: 10px;
      height: clamp(290px, 34vw, 420px);
    }
    .era__photo {
      position: relative;
      --ratio: .5625;
      min-width: 0;
      height: 100%;
      flex: 0 1 auto;
      aspect-ratio: var(--ratio);
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #020402;
      transform: rotate(-.35deg);
      transition: transform .35s var(--ease), border-color .3s ease;
    }
    .era__photo--portrait-3-4 { --ratio: .75; }
    .era__photo--landscape { --ratio: 1.778; }
    .era__photo:nth-child(2) { transform: translateY(5px) rotate(.5deg); }
    .era__photo:nth-child(3) { transform: translateY(-3px) rotate(-.25deg); }
    .era__photo:hover { z-index: 2; border-color: var(--line-strong); transform: rotate(0) translateY(-3px); }
    .era__photo::after {
      content: attr(data-shot);
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: end;
      padding: 12px;
      background: linear-gradient(to top, rgb(1 4 2 / 72%), transparent 38%);
      color: var(--acid-bright);
      font-size: .65rem;
      font-weight: 900;
      letter-spacing: .11em;
      text-transform: uppercase;
      pointer-events: none;
    }
    .era__photo img {
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: contain;
    }

    .project__visual span {
      position: absolute;
      left: 14px;
      bottom: 12px;
      z-index: 2;
      color: var(--acid);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .projects {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
      gap: 18px;
    }
    .project {
      min-width: 0;
      overflow: hidden;
    }
    .project--large { grid-row: span 2; }
    .project__visual {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: linear-gradient(to top, rgb(2 6 3 / 78%), transparent 62%), url("assets/walls/optimized/wall-01.webp") center / cover;
    }
    .project__visual::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to top, rgb(1 4 2 / 82%), transparent 58%);
      pointer-events: none;
    }
    .project__visual img {
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
    }
    .project--crew .project__visual img { object-position: center 48%; }
    .project--utility .project__visual img { object-position: center 46%; }
    .project--finish .project__visual img { object-position: center 28%; }
    .project--large { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
    .project--large .project__visual { aspect-ratio: auto; min-height: 0; }
    .project:nth-child(2) .project__visual { background-image: linear-gradient(to top, rgb(2 6 3 / 78%), transparent 62%), url("assets/walls/optimized/wall-02.webp"); }
    .project:nth-child(3) .project__visual { background-image: linear-gradient(to top, rgb(2 6 3 / 78%), transparent 62%), url("assets/walls/optimized/wall-03.webp"); }
    .project__meta {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: start;
      padding: clamp(20px, 3vw, 28px);
    }
    .project small {
      color: var(--acid);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .project h3 {
      margin: 8px 0 10px;
      color: var(--text);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: clamp(1.35rem, 2.4vw, 2rem);
      letter-spacing: -.04em;
      line-height: 1;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .project__description { max-width: 46ch; margin: 0; }
    .project__num {
      color: var(--acid);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: 1rem;
      line-height: 1;
    }


    .crew-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-flow: dense;
      gap: 18px;
    }
    .crew-card {
      position: relative;
      min-width: 0;
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgb(5 13 7 / 92%), rgb(2 7 4 / 82%));
      box-shadow: 0 18px 40px rgb(0 0 0 / 22%);
    }
    .crew-card--wide { grid-column: span 2; }
    .crew-card::before {
      content: attr(data-index);
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 3;
      min-width: 34px;
      min-height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgb(166 255 114 / 62%);
      background: rgb(2 6 3 / 82%);
      color: var(--acid-bright);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: .72rem;
      line-height: 1;
      box-shadow: 3px 3px 0 rgb(49 93 29 / 58%);
      transform: rotate(2deg);
    }
    .crew-card__media {
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      background: #050906;
    }
    .crew-card--wide .crew-card__media { aspect-ratio: 16 / 9; }
    .crew-card--next .crew-card__media {
      aspect-ratio: 3 / 4;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        linear-gradient(145deg, rgb(2 7 4 / 48%), rgb(2 6 3 / 86%)),
        url("assets/walls/optimized/wall-03.webp") center / cover;
    }
    .crew-card--next .crew-card__media::after {
      background:
        linear-gradient(to top, rgb(1 4 2 / 72%), transparent 58%),
        repeating-linear-gradient(90deg, transparent 0 38px, rgb(140 255 67 / 7%) 38px 39px);
    }
    .crew-card__coming-soon {
      position: relative;
      z-index: 2;
      display: grid;
      justify-items: center;
      gap: 16px;
      color: var(--acid-bright);
      text-align: center;
      text-transform: uppercase;
    }
    .crew-card__coming-soon::before {
      content: "+";
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line-strong);
      color: var(--acid);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: 2.3rem;
      line-height: 1;
      box-shadow: 5px 5px 0 rgb(49 93 29 / 48%);
      transform: rotate(2deg);
    }
    .crew-card__coming-soon strong {
      max-width: 10ch;
      font-family: "Arial Black", Impact, sans-serif;
      font-size: clamp(1.65rem, 3vw, 2.7rem);
      letter-spacing: -.05em;
      line-height: .94;
    }
    .crew-card__coming-soon span {
      color: var(--acid);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .14em;
    }
    .crew-card__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top, rgb(1 4 2 / 58%), transparent 44%),
        linear-gradient(115deg, rgb(140 255 67 / 8%), transparent 38%);
      pointer-events: none;
    }
    .crew-card img {
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
    }
    .crew-card--sofa img { object-position: center 34%; }
    .crew-card--guitar img { object-position: center 44%; }
    .crew-card--foam img { object-position: center 34%; }
    .crew-card--van img { object-position: center 45%; }
    .crew-card--friends img { object-position: center 38%; }
    .crew-card--mirror img { object-position: center 25%; }
    .crew-card figcaption {
      display: grid;
      gap: 8px;
      padding: clamp(18px, 2.4vw, 26px);
      border-top: 1px solid var(--line);
    }
    .crew-card__tag {
      color: var(--acid);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .11em;
      line-height: 1.3;
      text-transform: uppercase;
    }
    .crew-card h3 {
      margin: 0;
      color: var(--text);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: clamp(1.2rem, 2vw, 1.7rem);
      letter-spacing: -.035em;
      line-height: 1.02;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .crew-card p {
      margin: 0;
      color: var(--muted);
      font-size: clamp(.96rem, 1.05vw, 1.02rem);
      line-height: 1.58;
    }

    .cta { text-align: center; }
    .cta .wrap { display: grid; justify-items: center; }
    .cta h2 {
      max-width: 9ch;
      font-size: clamp(3.5rem, 8vw, 7.8rem);
      transform: skewX(-5deg);
      text-shadow:
        1px 1px 0 #7fe33d,
        2px 2px 0 #66ba31,
        3px 3px 0 #4d8c25,
        4px 4px 0 #345f19,
        10px 14px 24px rgb(0 0 0 / 58%);
    }
    .cta__headline-button {
      min-height: 44px;
      border: 0;
      padding: .05em .08em;
      background: transparent;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      line-height: inherit;
      text-transform: inherit;
      cursor: pointer;
    }
    .cta__headline-button:hover { color: #c0ff9c; }
    .cta__text { max-width: 58ch; margin: 24px auto 28px; }
    .cta__feedback {
      min-height: 1.6em;
      margin: 16px 0 0;
      color: var(--acid-bright);
      font-size: .84rem;
      font-weight: 800;
    }

    footer {
      z-index: var(--layer-content);
      border-top: 1px solid var(--line);
      padding: clamp(28px, 4vw, 44px) 0 calc(clamp(28px, 4vw, 44px) + env(safe-area-inset-bottom));
      background: #020402;
      color: var(--muted);
    }
    .footer__inner {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
      gap: 24px;
      align-items: end;
    }
    .footer__brand {
      display: grid;
      gap: 4px;
    }
    .footer__brand strong {
      color: var(--acid);
      font-family: "Arial Black", Impact, sans-serif;
      letter-spacing: -.02em;
      white-space: nowrap;
    }
    .footer__note { max-width: 42ch; margin: 0; }
    .footer__contact {
      display: grid;
      justify-items: end;
      gap: 4px;
      font-style: normal;
      text-align: right;
    }
    .footer__link {
      min-height: 44px;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--acid-bright);
      font-weight: 900;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 5px;
      cursor: pointer;
    }

    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .65s var(--ease), transform .65s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: none; }
    .delay-1 { transition-delay: .08s; }
    .delay-2 { transition-delay: .16s; }

    .era.reveal .era__photo img,
    .project.reveal .project__visual img,
    .crew-card.reveal .crew-card__media img {
      clip-path: inset(0 100% 0 0);
    }
    .era.reveal.is-visible .era__photo img,
    .project.reveal.is-visible .project__visual img,
    .crew-card.reveal.is-visible .crew-card__media img {
      animation: media-unmask .9s var(--ease) both;
    }
    .era.reveal.is-visible .era__photo:nth-child(2) img { animation-delay: .12s; }
    .era.reveal.is-visible .era__photo:nth-child(3) img { animation-delay: .24s; }

    .photo-trigger { cursor: zoom-in; }
    .photo-trigger::before {
      content: "Смотреть ↗";
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 4;
      border: 1px solid rgb(166 255 114 / 58%);
      padding: 6px 9px;
      background: rgb(2 6 3 / 82%);
      color: var(--acid-bright);
      font-size: .62rem;
      font-weight: 900;
      letter-spacing: .09em;
      line-height: 1.2;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(-5px);
      transition: opacity .22s ease, transform .22s var(--ease);
      pointer-events: none;
    }
    .photo-trigger:hover::before,
    .photo-trigger:focus-visible::before { opacity: 1; transform: none; }

    .interactive-card {
      position: relative;
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      --shine-x: 50%;
      --shine-y: 50%;
      transform-style: preserve-3d;
      transition: transform .16s ease-out, border-color .25s ease, box-shadow .25s ease;
      will-change: transform;
    }
    .reveal.is-visible.interactive-card {
      transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    }
    .interactive-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 4;
      background: radial-gradient(340px circle at var(--shine-x) var(--shine-y), rgb(166 255 114 / 10%), transparent 62%);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
    }
    .interactive-card:hover {
      border-color: var(--line-strong);
      box-shadow: 0 24px 54px rgb(0 0 0 / 34%), 0 0 0 1px rgb(140 255 67 / 9%);
    }
    .interactive-card:hover::after { opacity: 1; }

    .lightbox {
      width: 100vw;
      max-width: none;
      height: 100vh;
      height: 100dvh;
      max-height: none;
      margin: 0;
      border: 0;
      padding: 0;
      overflow: hidden;
      background: rgb(1 3 2 / 96%);
      color: var(--text);
    }
    .lightbox::backdrop { background: rgb(0 0 0 / 92%); backdrop-filter: blur(8px); }
    .lightbox__inner {
      position: relative;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 14px;
      padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }
    .lightbox__top,
    .lightbox__caption {
      width: min(1100px, calc(100% - 120px));
      margin-inline: auto;
    }
    .lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .lightbox__counter {
      color: var(--acid);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .lightbox__close,
    .lightbox__nav {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line-strong);
      background: rgb(3 8 5 / 86%);
      color: var(--acid-bright);
      cursor: pointer;
    }
    .lightbox__close { font-size: 1.45rem; }
    .lightbox__stage {
      min-width: 0;
      min-height: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding-inline: 70px;
    }
    .lightbox__image {
      width: auto;
      height: auto;
      max-width: min(1280px, 100%);
      max-height: 100%;
      object-fit: contain;
      border: 1px solid rgb(140 255 67 / 18%);
      background: #010201;
      box-shadow: 0 22px 60px rgb(0 0 0 / 48%);
      animation: lightbox-enter .36s var(--ease) both;
    }
    .lightbox__nav {
      position: absolute;
      top: 50%;
      z-index: 2;
      border-radius: 50%;
      font-size: 1.25rem;
      transform: translateY(-50%);
    }
    .lightbox__prev { left: max(18px, env(safe-area-inset-left)); }
    .lightbox__next { right: max(18px, env(safe-area-inset-right)); }
    .lightbox__caption {
      min-height: 48px;
      border-top: 1px solid var(--line);
      padding-top: 12px;
    }
    .lightbox__title {
      margin: 0;
      color: var(--acid-bright);
      font-family: "Arial Black", Impact, sans-serif;
      font-size: clamp(1rem, 2vw, 1.35rem);
      line-height: 1.1;
      text-transform: uppercase;
    }
    .lightbox__description { margin: 5px 0 0; color: var(--muted); font-size: .92rem; }

    @keyframes media-unmask {
      0% { clip-path: inset(0 100% 0 0); }
      100% { clip-path: inset(0); }
    }
    @keyframes lightbox-enter {
      from { opacity: 0; transform: scale(.975); }
      to { opacity: 1; transform: none; }
    }
    @keyframes dust-rise {
      0% { opacity: 0; transform: translate3d(0, 0, 0); }
      18% { opacity: .55; }
      82% { opacity: .2; }
      100% { opacity: 0; transform: translate3d(var(--dust-drift), -105vh, 0); }
    }

    @media (hover: hover) and (pointer: fine) {
      body::after { opacity: 1; }
      .nav__links a:hover { transform: translateY(-1px); }
      .hero__jump:hover { color: var(--acid-bright); }
      .era__photo img,
      .project__visual img,
      .crew-card img { transition: transform .5s var(--ease), filter .3s ease; }
      .era__photo:hover img,
      .project:hover .project__visual img,
      .crew-card:hover img { filter: brightness(1.06); transform: scale(1.025); }
      .crew-card:hover::before { transform: rotate(-2deg) translate(-1px, 1px); }
      .footer__link:hover { color: #c0ff9c; }
    }

    @media (max-width: 980px) {
      .manifesto__grid,
      .section__head { grid-template-columns: 1fr; align-items: start; gap: 24px; }
      .manifesto__text,
      .section__head > p { max-width: 650px; }
      .projects { grid-template-columns: 1fr 1fr; }
      .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .project--large { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
      .project--large .project__visual { aspect-ratio: 16 / 8; min-height: 0; }
      .footer__inner { grid-template-columns: 1fr 1fr; }
      .footer__contact { grid-column: 1 / -1; justify-items: start; text-align: left; }
    }

    @media (max-width: 760px) {
      :root { --header-h: 64px; --section-space: clamp(62px, 16vw, 86px); }
      .menu-toggle { display: grid; }
      .nav__links {
        position: fixed;
        top: calc(var(--header-h) + 8px);
        right: var(--gutter);
        left: var(--gutter);
        z-index: calc(var(--layer-header) + 1);
        display: grid;
        gap: 0;
        max-height: calc(100svh - var(--header-h) - 24px);
        overflow-y: auto;
        border: 1px solid var(--line-strong);
        padding: 8px 16px;
        background: rgb(2 6 3 / 98%);
        box-shadow: 0 18px 44px rgb(0 0 0 / 48%);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
      }
      .nav__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition-delay: 0s;
      }
      .nav__links a {
        width: 100%;
        padding: 8px 2px;
        border-bottom: 1px solid var(--line);
      }
      .nav__links a:last-child { border-bottom: 0; }
      .nav__links a::after { display: none; }

      .hero { padding-bottom: 28px; }
      .hero__wordmark { font-size: clamp(2rem, 10vw, 4.75rem); }
      .hero__bottom { grid-template-columns: 1fr; gap: 12px; }
      .hero__jump { width: max-content; }
      .manifesto h2 { font-size: clamp(2.9rem, 14vw, 4.8rem); }
      .section__head h2 { font-size: clamp(2.55rem, 12vw, 4.1rem); }
      .manifesto__actions { display: grid; }
      .btn { width: 100%; }
      .about-grid,
      .projects,
      .crew-grid { grid-template-columns: 1fr; }
      .timeline { padding-left: 34px; }
      .era { display: block; padding: 20px; }
      .era::before { top: 28px; left: -34px; }
      .era__intro { display: grid; grid-template-columns: 1fr; gap: 14px; }
      .era__intro > div:last-child { grid-column: auto; }
      .era__year { position: static; grid-row: auto; }
      .era__gallery {
        grid-column: auto;
        justify-content: start;
        height: 360px;
        margin-top: 20px;
        margin-right: -20px;
        padding-right: 20px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-color: var(--acid-deep) transparent;
      }
      .era__photo {
        flex: 0 0 min(68vw, 280px);
        scroll-snap-align: start;
      }
      .era__photo--landscape { flex-basis: min(86vw, 430px); }
      .project--large,
      .crew-card--wide { grid-column: auto; }
      .project--large { display: block; }
      .project--large .project__visual,
      .project__visual { aspect-ratio: 4 / 3; }
      .project__meta { padding: 20px; }
      .crew-card__media,
      .crew-card--wide .crew-card__media { aspect-ratio: 4 / 3; }
      .crew-card--sofa .crew-card__media,
      .crew-card--guitar .crew-card__media,
      .crew-card--foam .crew-card__media,
      .crew-card--mirror .crew-card__media { aspect-ratio: 3 / 4; }
      .cta h2 { font-size: clamp(3rem, 15vw, 5.6rem); }
      .footer__inner { grid-template-columns: 1fr; gap: 18px; align-items: start; }
      .footer__contact { grid-column: auto; }
      .lightbox__top,
      .lightbox__caption { width: 100%; }
      .lightbox__stage { padding-inline: 0; }
      .lightbox__image { max-width: 100%; max-height: 100%; }
      .lightbox__nav { top: auto; bottom: 88px; width: 42px; height: 42px; }
      .lightbox__prev { left: 18px; }
      .lightbox__next { right: 18px; }
      .lightbox__caption { padding-right: 100px; }
    }

    @media (max-width: 390px) {
      .logo { font-size: .76rem; }
      .hero__wordmark { font-size: 9.7vw; }
      .project__meta { grid-template-columns: 1fr auto; gap: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
      .hero__wall img { transform: none; }
      body::after { display: none; }
      .ambient-dust { display: none; }
      .section::before { background-position: center; transform: scale(1.02); }
      .era.reveal .era__photo img,
      .project.reveal .project__visual img,
      .crew-card.reveal .crew-card__media img { clip-path: none; }
      .reveal.is-visible.interactive-card { transform: none; }
    }