:root {
      --white: #e8e8e3;
      --dim: rgba(232,232,227,.48);
      --hair: rgba(255,255,255,.12);
      --black: #020302;
      --reel: #242521;
      --step: 38deg;
    }
    * { box-sizing: border-box; }
    html { background: var(--black); scroll-behavior: smooth; }
    body {
      margin: 0;
      overflow-x: hidden;
      color: var(--white);
      background: var(--black);
      font-family: Arial, Helvetica, sans-serif;
    }
    button { color: inherit; font: inherit; }

    .topbar {
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      right: 0;
      height: 68px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 28px;
      font-size: 13px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #fff;
      background: transparent;
      border-bottom: 0;
    }
    .topbar.is-scrolled { background: transparent; border-bottom: 0; }
    .identity { display: flex; gap: 9px; align-items: center; font-size:13px; font-weight:550; letter-spacing:.12em; }
    .identity::before { content: ""; width:6px; height:6px; border-radius:50%; background:#e8e8e3; }
    .tabs { display: flex; align-items: center; gap: 22px; }
    .tabs button {
      position:relative;
      padding: 10px 13px;
      border: 0;
      cursor: pointer;
      background: transparent;
      font-size: 13px;
      letter-spacing: .16em;
      opacity: .5;
      transition:opacity .25s ease;
    }
    .tabs button::after { content:""; position:absolute; left:13px; right:100%; bottom:4px; height:1px; background:currentColor; transition:right .3s ease; }
    .tabs button:hover,.tabs button.active { opacity: 1; }
    .tabs button:focus { outline:none; }
    .tabs button.active::after { right:13px; }
    .prototype-note { justify-self: end; opacity: .42; font-size:13px; }

    /* Home: the supplied video keeps its native 2420:1200 ratio at full width. */
    .home {
      position: relative;
      min-height: max(100svh, 49.5867768595vw);
      overflow: hidden;
      isolation: isolate;
      background: var(--black);
    }
    .home-media {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      aspect-ratio: 2420 / 1200;
      transform: translateY(calc(-50% - 40px));
      overflow: hidden;
      background: var(--black);
    }
    .home-media video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .home-title {
      position: absolute;
      left: max(4vw, calc((100% - 1500px) / 2));
      bottom: clamp(28px, 7svh, 64px);
      width: min(92vw, 1500px);
      height: clamp(70px, 15.8vw, 190px);
      pointer-events: none;
    }
    .home-wordmark {
      position: absolute;
      z-index: 2;
      inset: 0;
      margin: 0;
      overflow: hidden;
      mix-blend-mode: screen;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 4px), transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 4px), transparent 100%);
    }
    .home-wordmark img {
      position: absolute;
      left: 0;
      top: 46.7%;
      width: 100%;
      max-width: none;
      transform: translateY(-46.7%);
      filter: contrast(3.2) saturate(1.08);
    }
    .sound-toggle {
      position: absolute;
      z-index: 3;
      right: 28px;
      top: max(38px, calc(142px + 24.7933884298vw - max(50svh, 24.7933884298vw)));
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(255,255,255,.42);
      border-radius: 50%;
      background: rgba(0,0,0,.3);
      color: #fff;
      cursor: pointer;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .sound-toggle:hover {
      border-color: rgba(255,255,255,.78);
      background: rgba(0,0,0,.5);
      transform: scale(1.04);
    }
    .sound-toggle:focus-visible {
      outline: 1px solid #fff;
      outline-offset: 4px;
    }
    .sound-toggle svg { width: 17px; height: 17px; }
    .sound-toggle .sound-wave,
    .sound-toggle .sound-slash { transition: opacity .18s ease; }
    .sound-toggle .sound-slash { opacity: 0; }
    .sound-toggle.is-muted .sound-wave { opacity: 0; }
    .sound-toggle.is-muted .sound-slash { opacity: 1; }
    /* About: a full-screen introduction between the hero and selected work. */
    .about {
      position: relative;
      contain: layout paint;
      min-height: 100svh;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
      gap: clamp(42px, 7vw, 118px);
      align-items: center;
      padding: 12vh 7vw 9vh;
      background: #0c0d0c;
      border-top: 1px solid rgba(255,255,255,.05);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .about-copy {
      position: relative;
      z-index: 2;
      max-width: 760px;
      margin-bottom: 11vh;
    }
    .about-title {
      margin: 0;
      font-size: clamp(54px, 7.5vw, 122px);
      font-weight: 500;
      line-height: .9;
      letter-spacing: -.045em;
    }
    .about-title span { display:block; }
    .about-role {
      margin: clamp(30px, 5vh, 62px) 0 0;
      font-size: 11px;
      line-height: 1.8;
      letter-spacing: .18em;
      color: rgba(255,255,255,.64);
    }
    .about-summary {
      max-width: 580px;
      margin: 18px 0 0;
      font-size: clamp(14px, 1.25vw, 18px);
      line-height: 1.78;
      color: rgba(255,255,255,.72);
    }
    .about-summary p { margin: 0 0 12px; }
    .about-summary strong { color: rgba(255,255,255,.94); font-weight: 600; }
    .about-media {
      position: relative;
      width: min(28vw, 400px);
      aspect-ratio: 562 / 720;
      justify-self: end;
      overflow: hidden;
      background: #454642;
      margin-bottom: 11vh;
    }
    .about-media img { display:block; width:100%; height:100%; object-fit:cover; }
    .about-details {
      position: absolute;
      z-index: 3;
      left: 7vw;
      right: 7vw;
      bottom: 3.5vh;
    }
    .experience-heading {
      margin: 0 0 13px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .18em;
      color: rgba(255,255,255,.88);
    }
    .experience-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(16px, 2.5vw, 42px);
    }
    .about-detail {
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.52);
    }
    .experience-meta {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      font-size: 15px;
      line-height:1.4;
      letter-spacing:.1em;
      color:rgba(255,255,255,.42);
    }
    .experience-meta time { white-space:nowrap; color:rgba(255,255,255,.72); }
    .experience-title {
      margin: 9px 0 6px;
      font-size: 17px;
      font-weight: 500;
      letter-spacing:.03em;
      color:rgba(255,255,255,.9);
    }
    .experience-copy {
      max-width:330px;
      margin:0;
      font-size:15px;
      line-height:1.6;
      letter-spacing:.04em;
      color:rgba(255,255,255,.48);
    }
    .about-copy,
    .about-media,
    .about-detail {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1);
    }
    .about-media { transform: translateY(34px) scale(.975); transition-delay: .08s; }
    .about-detail:nth-child(1) { transition-delay: .12s; }
    .about-detail:nth-child(2) { transition-delay: .19s; }
    .about-detail:nth-child(3) { transition-delay: .26s; }
    .about.is-visible .about-copy,
    .about.is-visible .about-detail { opacity:1; transform:translateY(0); }
    .about.is-visible .about-media { opacity:1; transform:translateY(0) scale(1); }

    /* Product reel — interaction study reconstructed from the recording. */
    .product {
      position: relative;
      height: 375svh;
      min-height: 0;
      overflow: clip;
      isolation: isolate;
      background: #020302;
    }
    .product-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
    .product::after {
      display: none;
    }
    .product-stage::after {
      content: "";
      position: absolute;
      z-index: 20;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 38% 50%, transparent 0 32%, rgba(0,0,0,.28) 63%, rgba(0,0,0,.76) 100%),
        linear-gradient(90deg, rgba(0,0,0,.1), transparent 42%, rgba(0,0,0,.22));
    }

    .projection {
      position: absolute;
      z-index: 1;
      left: 5vw;
      top: 13vh;
      width: 44vw;
      height: 75vh;
      overflow: hidden;
      border-radius: 6% 2% 7% 3% / 8% 3% 7% 4%;
      background: var(--black);
      box-shadow: none;
    }
    .projection::before {
      content: none;
    }
    .projection-visual {
      display: none;
    }
    .projection.turning .projection-visual {
      opacity: .14;
      filter: grayscale(1) contrast(.75) brightness(.45) blur(5px);
      transform: scale(1.08);
    }
    .projection.scene-0 .projection-visual {
      background:
        linear-gradient(112deg, transparent 49%, rgba(255,255,255,.14) 50% 50.4%, transparent 51%),
        repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.045) 48px 49px),
        radial-gradient(circle at 34% 40%, #565853, #1b1d1b 56%, #090a09 100%);
    }
    .projection.scene-1 .projection-visual {
      background:
        linear-gradient(165deg, transparent 0 34%, rgba(255,255,255,.15) 35% 36%, transparent 37%),
        linear-gradient(20deg, #41423f 0 27%, #151615 28% 56%, #393a37 57% 70%, #0b0c0b 71%);
    }
    .projection.scene-2 .projection-visual {
      background:
        radial-gradient(ellipse at 58% 42%, rgba(255,255,255,.17) 0 9%, transparent 10%),
        repeating-linear-gradient(100deg, transparent 0 34px, rgba(255,255,255,.08) 35px 37px),
        linear-gradient(125deg, #30322f, #0d0e0d 65%);
    }
    .projection.scene-3 .projection-visual {
      background:
        linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.12) 19% 20%, transparent 21% 73%, rgba(255,255,255,.09) 74% 75%, transparent 76%),
        radial-gradient(ellipse at 50% 100%, #4a4c47, #121312 62%, #070807);
    }
    .projection.scene-4 .projection-visual {
      background:
        linear-gradient(155deg, transparent 0 46%, rgba(255,255,255,.12) 47% 48%, transparent 49%),
        radial-gradient(circle at 72% 33%, #62635d 0 6%, transparent 7%),
        linear-gradient(110deg, #30312f, #0b0c0b 70%);
    }
    .projection.scene-5 .projection-visual {
      background:
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.05) 23px 24px),
        linear-gradient(145deg, #464743, #101110 58%, #060706);
    }

    .screen-copy {
      position: absolute;
      z-index: 5;
      left: 9%;
      top: 50%;
      width: 78%;
      transform: translateY(-50%);
      text-align: center;
    }
    .screen-kicker {
      margin-bottom: 18px;
      font-size: 11px;
      letter-spacing: .14em;
      color: rgba(255,255,255,.62);
      transition: opacity .24s ease, filter .3s ease, transform .35s ease;
    }
    .screen-title {
      min-height: 1.9em;
      margin: 0;
      font-size: clamp(34px, 4.4vw, 72px);
      font-weight: 650;
      line-height: .98;
      letter-spacing: .008em;
    }
    .title-char {
      display: inline-block;
      min-width: .12em;
      transition:
        opacity .32s ease,
        filter .44s ease,
        transform .55s cubic-bezier(.2,.8,.2,1);
      transition-delay: calc(var(--order) * 11ms);
    }
    .title-word { display: inline-block; white-space: nowrap; }
    .screen-description {
      max-width: 310px;
      margin: 20px auto 0;
      font-size: 16px;
      line-height: 1.9;
      letter-spacing: .035em;
      color: rgba(255,255,255,.45);
      transition: opacity .3s ease, filter .35s ease, transform .4s ease;
    }
    .screen-copy.is-leaving .screen-kicker,
    .screen-copy.is-leaving .screen-description,
    .screen-copy.is-entering .screen-kicker,
    .screen-copy.is-entering .screen-description {
      opacity: 0;
      filter: blur(5px);
      transform: translateY(7px);
    }
    .screen-copy.is-leaving .title-char {
      opacity: 0;
      filter: blur(9px);
      transform: translateX(calc(var(--drift) * 20px)) scale(.96);
    }
    .screen-copy.is-entering .title-char {
      opacity: 0;
      filter: blur(10px);
      transform: translateX(calc(var(--drift) * -15px)) scale(1.035);
    }

    .reel-zone {
      position: absolute;
      z-index: 10;
      inset: 0 0 0 50%;
      cursor: default;
      touch-action: pan-y;
      user-select: none;
      outline: none;
    }
    .reel-rotor {
      position: absolute;
      inset: 0;
      transform-origin: 110% 50%;
      will-change: transform;
    }
    .reel-disc {
      position: absolute;
      left: 0;
      top: 50%;
      width: 220%;
      aspect-ratio: 1;
      transform: translateY(-50%);
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.055);
      background:
        radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(0,0,0,.2) 26.2% 27%, transparent 27.2%),
        repeating-conic-gradient(from 4deg, rgba(255,255,255,.012) 0 12deg, rgba(0,0,0,.025) 12deg 25deg),
        radial-gradient(circle at 40% 36%, #353630, #22231f 47%, #151612 74%, #080908 100%);
      box-shadow: -28px 0 72px rgba(0,0,0,.72), inset 0 0 120px rgba(0,0,0,.82);
    }
    .reel-disc::before {
      content: "";
      position: absolute;
      inset: 8%;
      border: 1px dashed rgba(0,0,0,.38);
      border-radius: 50%;
    }
    .reel-disc::after {
      content: "PRODUCT — PRODUCT — PRODUCT — PRODUCT — PRODUCT";
      position: absolute;
      left: 15%;
      top: 49%;
      width: 70%;
      color: rgba(0,0,0,.28);
      font-family: monospace;
      font-size: 10px;
      letter-spacing: .32em;
      text-align: center;
      transform: rotate(86deg);
    }
    .reel-layer {
      position: absolute;
      inset: 0;
      transform-origin: 110% 50%;
      transform: rotate(var(--angle));
      pointer-events: none;
    }
    .reel-card {
      position: absolute;
      left: 9%;
      top: 50%;
      width: clamp(142px, 18vw, 260px);
      height: clamp(98px, 16vh, 152px);
      transform: translateY(-50%);
      padding: 8px 8px 25px;
      pointer-events: auto;
      cursor: pointer;
      text-align: left;
      border: 0;
      border-radius: 10px;
      background: #050605;
      box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.025);
      transition: filter .3s ease;
    }
    .reel-window {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 5px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.15), transparent 46%),
        linear-gradient(120deg, #5a5b56, #252724);
      box-shadow: inset 0 0 22px rgba(0,0,0,.72);
    }
    .reel-window::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .24;
      background: repeating-linear-gradient(90deg, transparent 0 21px, rgba(255,255,255,.09) 22px 23px);
    }
    .reel-card[data-index="0"] .reel-window {
      --reel-image: url("assets/web/work-introduction-v1.webp");
      background-position: center 18%; background-size: cover; background-repeat: no-repeat;
    }
    .reel-card[data-index="0"] .reel-window::before { display: none; }
    .reel-card[data-index="1"] .reel-window {
      background-position: center; background-size: cover; background-repeat: no-repeat;
    }
    .product.is-media-visible .reel-card .reel-window { background-image: var(--reel-image, none); }
    .reel-card[data-index="1"] .reel-window::before { display: none; }
    .reel-card[data-index="2"] .reel-window { background: repeating-linear-gradient(105deg,#373936 0 20px,#5a5c57 21px 26px,#20221f 27px 44px); }
    .reel-card[data-index="3"] .reel-window { background: radial-gradient(circle at 60% 45%,#777973,#333532 33%,#111210 72%); }
    .reel-card[data-index="4"] .reel-window { background: linear-gradient(155deg,#242522 0 42%,#676963 43% 62%,#191a18 63%); }
    .reel-card[data-index="5"] .reel-window { background: repeating-linear-gradient(90deg,#4c4e49 0 10px,#262825 11px 28px); }
    .reel-label {
      position: absolute;
      left: 9px;
      right: 9px;
      bottom: 8px;
      display: flex;
      justify-content: space-between;
      font-family: monospace;
      font-size: 7px;
      letter-spacing: .08em;
      color: rgba(255,255,255,.48);
    }
    .reel-card:not(.selected) { filter: brightness(.72); }
    .reel-card.selected { filter: brightness(1.05); }

    @media (min-width: 1280px) {
      .reel-card {
        width: clamp(320px, 28vw, 520px);
        height: auto;
        aspect-ratio: 1.34;
        padding: 18px 18px 60px;
        border-radius: 22px;
        box-shadow: 0 18px 44px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.025);
      }
      .reel-window { border-radius: 12px; }
      .reel-label {
        left: 20px;
        right: 20px;
        bottom: 18px;
        font-size: clamp(11px, .825vw, 18px);
      }
    }

    @media (min-width: 1280px) {
      .reel-disc { width: 190%; }
      .reel-zone { left: 46%; }
      .screen-copy { left: 7%; width: 82%; text-align: center; }
      .screen-description { margin-left: auto; margin-right: auto; max-width: 390px; }
    }

    .reel-notch {
      position: absolute;
      left: 2%;
      top: 50%;
      width: 34px;
      height: 13px;
      border-radius: 3px;
      background: #070807;
      box-shadow: inset 0 0 4px #000;
      transform: translateY(-50%);
    }
    .notch-layer {
      position: absolute;
      inset: 0;
      transform-origin: 110% 50%;
      transform: rotate(var(--angle));
    }

    .turn-hint {
      position: absolute;
      z-index: 30;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      text-align: center;
      pointer-events: none;
      color: rgba(255,255,255,.48);
      font-size: 7px;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .turn-icon {
      position: relative;
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto 7px;
      border: 1px dashed currentColor;
      border-radius: 50%;
    }
    .turn-icon::before, .turn-icon::after {
      content: "";
      position: absolute;
      width: 7px;
      height: 7px;
      border: 1px solid currentColor;
      border-radius: 50%;
    }
    .turn-icon::before { left: 5px; top: 7px; }
    .turn-icon::after { right: 5px; bottom: 7px; }
    .turn-hint.auto-pending .turn-icon { animation: auto-hint 2s ease-in-out infinite; }
    @keyframes auto-hint { 50% { opacity:.42; transform:rotate(12deg) scale(.94); } }
    .scroll-on {
      position: absolute;
      z-index: 30;
      right: 25px;
      bottom: 20px;
      font-size: 8px;
      letter-spacing: .13em;
      color: rgba(255,255,255,.38);
      text-transform: uppercase;
    }

    /* Design scroll: editorial composition without a decorative background grid. */
    .design-scroll { position: relative; height: 310svh; background: #050605; }
    .design-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
    .design-track { display: flex; width: max-content; height: 100%; will-change: transform; }
    .design-panel {
      position: relative;
      flex: 0 0 100vw;
      width: 100vw;
      height: 100%;
      overflow: hidden;
      border-right: 1px solid rgba(255,255,255,.18);
      background: #070807;
    }
    .design-title { position: absolute; z-index: 3; left: 3vw; top: 8vh; margin: 0; font-size: clamp(64px,10vw,150px); font-weight: 300; line-height:.8; letter-spacing: -.075em; }
    .design-pill { position: absolute; z-index:3; left: 0; top: 25vh; width: 27vw; padding: 19px 5vw; border-radius: 0 999px 999px 0; background: #e5e5df; color: #090a09; font-weight: 700; letter-spacing: .14em; }
    .design-caption { position: absolute; z-index:3; left: 4vw; top: 43vh; width: 20vw; color: rgba(255,255,255,.65); font-family: Georgia,serif; font-style: italic; line-height: 1.5; text-align: right; }
    .design-note { position:absolute; z-index:3; left:53vw; top:11vh; width:20vw; margin:0; color:rgba(255,255,255,.68); font-family:Georgia,serif; font-size:clamp(13px,1.25vw,20px); font-style:italic; line-height:1.35; }
    .arch, .oval, .tower {
      position: absolute;
      overflow: hidden;
      border: 0;
      background:
        linear-gradient(145deg,rgba(255,255,255,.13),transparent 38%),
        linear-gradient(125deg,#555650,#262724 55%,#121311);
      box-shadow: inset 0 0 44px rgba(0,0,0,.42);
    }
    .arch::before, .oval::before, .tower::before { content:""; position:absolute; inset:0; opacity:.22; background:repeating-linear-gradient(105deg,transparent 0 42px,rgba(255,255,255,.08) 43px 44px); }
    .arch::after, .oval::after, .tower::after { content: "IMAGE PLACEHOLDER"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width:100%; text-align:center; font-size: 7px; letter-spacing: .16em; color: rgba(255,255,255,.42); }
    .arch { left: 28vw; top: 19vh; width: 23vw; height: 65vh; border-radius: 50% 50% 2px 2px / 28% 28% 2px 2px; }
    .oval { left: 54vw; top: 39vh; width: 21vw; height: 25vh; border-radius: 50%; }
    .tower { right: 0; top: 6vh; width: 23vw; height: 94vh; clip-path: polygon(50% 0,72% 6%,91% 20%,100% 35%,100% 100%,0 100%,0 35%,9% 20%,28% 6%); }
    .design-panel:first-child .tower { right:3vw; top:18vh; width:21vw; height:66vh; clip-path:none; }
    .panel-rectangles { background:#070807; }
    .rect-media { position:absolute; overflow:hidden; border:0; background:linear-gradient(145deg,#5d5e58,#292a27 58%,#151614); box-shadow:inset 0 0 38px rgba(0,0,0,.4); }
    .rect-media::before { content:""; position:absolute; inset:0; opacity:.17; background:repeating-linear-gradient(105deg,transparent 0 40px,rgba(255,255,255,.08) 41px 42px); }
    .rect-media::after { content:"IMAGE PLACEHOLDER"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; text-align:center; color:rgba(255,255,255,.4); font-size:7px; letter-spacing:.16em; }
    .rect-a { left:5vw; top:10vh; width:25vw; height:29vh; }
    .rect-b { left:34vw; top:8vh; width:17vw; height:43vh; }
    .rect-c { left:56vw; top:17vh; width:37vw; height:24vh; }
    .rect-d { left:10vw; top:50vh; width:30vw; height:34vh; }
    .rect-e { left:45vw; top:58vh; width:20vw; height:29vh; }
    .rect-f { left:70vw; top:48vh; width:24vw; height:40vh; }
    .design-panel:nth-child(3) .arch { left:27vw; top:28vh; width:28vw; height:47vh; border-radius:50%; }
    .design-panel:nth-child(3) .oval { left:58vw; top:48vh; width:17vw; height:21vh; }

    /* Lab is one continuous dark paper canvas, not a field of floating cards. */
    .lab { min-height: 100svh; padding:9vh 0 5vh; background:#050605; }
    .lab-canvas { position:relative; width:100vw; height:84vh; min-height:620px; margin:0 auto; overflow:hidden; background:transparent; box-shadow:none; }
    .canvas-title { position:absolute; z-index:5; left:5%; top:5%; margin:0; color:rgba(255,255,255,.82); font-family:Georgia,serif; font-size:clamp(28px,3.4vw,52px); font-style:italic; font-weight:400; letter-spacing:-.04em; }
    .canvas-timeline { position:absolute; z-index:5; left:7%; right:7%; top:18%; height:38px; border-top:1px solid rgba(255,255,255,.38); color:rgba(255,255,255,.52); font-family:Georgia,serif; font-size:10px; font-style:italic; }
    .canvas-timeline span { position:absolute; top:-25px; width:24%; }
    .canvas-timeline span::after { content:""; position:absolute; left:0; top:24px; width:1px; height:10px; background:rgba(255,255,255,.38); }
    .canvas-timeline span:nth-child(1) { left:0; }
    .canvas-timeline span:nth-child(2) { left:44%; }
    .canvas-timeline span:nth-child(3) { right:0; text-align:right; }
    .canvas-timeline span:nth-child(3)::after { left:auto; right:0; }
    .scrap { position:absolute; z-index:4; padding:5px; border:1px solid rgba(255,255,255,.16); cursor:pointer; background:#292a27; color:#fff; box-shadow:0 13px 28px rgba(0,0,0,.48); transform:rotate(var(--r)); transition:transform .25s ease,filter .25s ease; }
    .scrap:hover { z-index:12; filter:brightness(1.16); transform:rotate(0) translateY(-7px); }
    .scrap span { display:grid; place-items:center; width:100%; height:100%; background:linear-gradient(145deg,#666762,#2f302d); color:rgba(255,255,255,.42); font-size:7px; letter-spacing:.15em; }
    .scrap.main { left:14%; top:24%; width:56%; height:52%; --r:-.5deg; padding:7px; }
    .scrap.a { left:2%; top:35%; width:13%; height:22%; --r:-2deg; }
    .scrap.b { left:6%; top:56%; width:14%; height:19%; --r:1.5deg; }
    .scrap.c { left:68%; top:23%; width:15%; height:24%; --r:1deg; }
    .scrap.d { left:76%; top:41%; width:21%; height:23%; --r:-1deg; }
    .scrap.e { left:67%; top:58%; width:14%; height:27%; --r:1.5deg; }
    .scrap.f { left:84%; top:24%; width:13%; height:18%; --r:2deg; }
    .canvas-note { position:absolute; z-index:5; left:18%; bottom:5%; width:52%; margin:0; color:rgba(255,255,255,.58); font-family:Georgia,serif; font-size:clamp(12px,1.25vw,18px); font-style:italic; line-height:1.5; }
    .canvas-stamp { position:absolute; z-index:5; right:4%; bottom:4%; padding:12px 18px; border:2px solid rgba(255,255,255,.28); color:rgba(255,255,255,.4); font-family:monospace; font-size:10px; letter-spacing:.18em; transform:rotate(-3deg); }
    .menu-mark { justify-self:end; margin-right:clamp(18px, 3vw, 48px); display:grid; place-items:center; width:30px; height:30px; color:#fff; font-size:20px; opacity:.72; transition:opacity .2s, transform .2s; }
    .menu-mark:hover { opacity:1; transform:rotate(8deg); }
    .contact-section { position:relative; min-height:78svh; overflow:hidden; background:#111410; }
    .contact-section::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,12,10,.84) 0%,rgba(10,12,10,.65) 35%,rgba(10,12,10,.18) 65%,rgba(10,12,10,.08) 100%); }
    .contact-section.is-media-visible::before { background:linear-gradient(90deg,rgba(10,12,10,.84) 0%,rgba(10,12,10,.65) 35%,rgba(10,12,10,.18) 65%,rgba(10,12,10,.08) 100%), url("assets/web/contact-background-v1.webp") center / cover no-repeat; }
    .contact-copy { position:relative; z-index:1; padding:clamp(110px,14vw,190px) max(7vw,40px) 90px; }
    .contact-copy h2 { margin:0 0 28px; font-size:clamp(40px,6vw,72px); font-weight:300; letter-spacing:.04em; }
    .contact-list { display:grid; gap:8px; margin:0 0 30px; padding:0; list-style:none; }
    .copy-link { display:flex; gap:24px; align-items:baseline; padding:7px 0; border:0; background:none; color:rgba(255,255,255,.82); cursor:pointer; text-align:left; }
    .copy-link span { width:42px; color:rgba(255,255,255,.45); font-size:13px; }
    .copy-link strong { font-size:16px; font-weight:400; letter-spacing:.04em; }
    .copy-icon { width:18px; height:18px; flex-shrink:0; align-self:center; margin-left:-10px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.65; transition:opacity .2s; }
    .copy-link:hover .copy-icon, .copy-link:focus-visible .copy-icon { opacity:1; }
    .copy-link:focus-visible { outline:1px solid currentColor; outline-offset:5px; border-radius:2px; }
    .qr { width:112px; height:112px; object-fit:cover; opacity:.9; }
    .year { position:absolute; right:7vw; bottom:38px; color:rgba(255,255,255,.42); font-size:12px; letter-spacing:.16em; }
    .footer { height: 42svh; display: grid; place-items: center; border-top: 1px solid var(--hair); background:#020302; font-size: clamp(42px,8vw,110px); letter-spacing:-.06em; }

    body.modal-open { overflow: hidden; }
    .work-modal {
      position: fixed;
      z-index: 1000;
      inset: 0;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: clamp(32px, 5vw, 88px);
      align-items: center;
      padding: clamp(56px, 7vh, 88px) clamp(32px, 5vw, 88px);
      background: #020302;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .28s ease, visibility .28s ease;
    }
    .work-modal[hidden] { display: none; }
    .work-modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .work-modal-close {
      position: absolute;
      z-index: 2;
      top: 24px;
      right: 28px;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 50%;
      background: transparent;
      color: #fff;
      cursor: pointer;
      transition: border-color .2s ease, transform .2s ease;
    }
    .work-modal-close:hover { border-color: rgba(255,255,255,.8); transform: rotate(5deg); }
    .work-modal-close:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
    .work-modal-close svg { width: 18px; height: 18px; }
    .work-modal-media {
      position: relative;
      width: 100%;
      height: min(78vh, 760px);
      min-height: 420px;
      overflow: hidden;
      background: #090909;
    }
    .work-modal-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 18%;
    }
    .work-modal-copy {
      min-width: 0;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      padding: clamp(40px, 10vh, 110px) 0 4px;
    }
    .work-modal-kicker {
      margin: 0 0 22px;
      font-size: 11px;
      letter-spacing: .18em;
      color: rgba(255,255,255,.48);
    }
    .work-modal-title {
      max-width: 760px;
      margin: 0;
      font-size: clamp(42px, 5.4vw, 84px);
      font-weight: 500;
      line-height: .98;
      letter-spacing: -.045em;
      color: #f0f0eb;
    }
    .work-modal-description {
      max-width: 610px;
      margin: 28px 0 0;
      font-size: clamp(14px, 1.2vw, 18px);
      line-height: 1.75;
      color: rgba(255,255,255,.58);
    }
    .work-modal-description + .work-modal-description { margin-top: 16px; }
    .work-modal-facts {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      margin-top: auto;
    }
    .work-modal-fact {
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.16);
    }
    .work-modal-fact b {
      display: block;
      margin-bottom: 10px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,.88);
    }
    .work-modal-fact span {
      display: block;
      font-size: 12px;
      line-height: 1.6;
      color: rgba(255,255,255,.45);
    }

    .projects-modal {
      position: fixed;
      z-index: 1000;
      inset: 0;
      overflow: hidden;
      background: #020302;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .28s ease, visibility .28s ease;
    }
    .projects-modal[hidden] { display:none; }
    .projects-modal.is-open { opacity:1; visibility:visible; pointer-events:auto; }
    .projects-modal-scroll { width:100%; height:100%; overflow-y:auto; scrollbar-color:rgba(255,255,255,.32) #020302; scrollbar-width:thin; }
    .projects-modal-shell { width:min(1280px,calc(100% - 72px)); min-height:100%; margin:0 auto; padding:clamp(82px,10vh,124px) 0 90px; }
    .projects-modal-header { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.16); }
    .projects-modal-kicker { margin:0 0 14px; color:rgba(255,255,255,.42); font-size:10px; letter-spacing:.2em; }
    .projects-modal-title { margin:0; color:rgba(255,255,255,.94); font-size:clamp(40px,6vw,76px); font-weight:500; letter-spacing:-.06em; line-height:.95; }
    .projects-modal-body { display:grid; grid-template-columns:minmax(0,1fr); padding-top:42px; }
    .projects-modal-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-content:start; }
    .projects-card { position:relative; display:flex; flex-direction:column; min-height:238px; padding:12px; border:1px solid rgba(255,255,255,.14); background:#090a09; color:inherit; text-align:left; cursor:pointer; transition:border-color .22s ease, transform .22s ease, background .22s ease; }
    .projects-card:hover,.projects-card:focus-visible,.projects-card.is-active { border-color:rgba(255,255,255,.68); background:#111310; transform:translateY(-3px); }
    .projects-card:focus-visible { outline:1px solid #fff; outline-offset:4px; }
    .projects-card-media { position:relative; display:block; width:100%; aspect-ratio:1.5; overflow:hidden; background:linear-gradient(145deg,#4a4c47,#151715); }
    .projects-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.42)); }
    .projects-card[data-index="1"] .projects-card-media { background:#fff url("assets/project-one-reel-cover.png") center / cover no-repeat; }
    .projects-card[data-index="2"] .projects-card-media { background:repeating-linear-gradient(105deg,#373936 0 20px,#5a5c57 21px 26px,#20221f 27px 44px); }
    .projects-card[data-index="3"] .projects-card-media { background:radial-gradient(circle at 60% 45%,#777973,#333532 33%,#111210 72%); }
    .projects-card[data-index="4"] .projects-card-media { background:linear-gradient(155deg,#242522 0 42%,#676963 43% 62%,#191a18 63%); }
    .projects-card[data-index="5"] .projects-card-media { background:repeating-linear-gradient(90deg,#4c4e49 0 10px,#262825 11px 28px); }
    .projects-card-top,.projects-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; color:rgba(255,255,255,.42); font-family:monospace; font-size:9px; letter-spacing:.1em; }
    .projects-card-top { margin-bottom:10px; }
    .projects-card-bottom { margin-top:auto; padding-top:14px; }
    .projects-card-title { margin:13px 0 0; color:rgba(255,255,255,.9); font-size:18px; font-weight:500; }
    @media (max-width: 760px) { .projects-modal-shell { width:calc(100% - 42px); padding-top:76px; } .projects-modal-header { display:block; } .projects-modal-body { grid-template-columns:1fr; } }
    @media (max-width: 520px) { .projects-modal-list { grid-template-columns:1fr; } .projects-card { min-height:220px; } }

    .project-modal {
      position: fixed;
      z-index: 1000;
      inset: 0;
      background: #020302;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .28s ease, visibility .28s ease;
    }
    .project-modal[hidden] { display: none; }
    .project-modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .project-modal-scroll {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      scrollbar-color: rgba(255,255,255,.32) #020302;
      scrollbar-width: thin;
    }
    .project-modal-scroll::-webkit-scrollbar { width: 9px; }
    .project-modal-scroll::-webkit-scrollbar-track { background: #020302; }
    .project-modal-scroll::-webkit-scrollbar-thumb { border: 3px solid #020302; border-radius: 999px; background: rgba(255,255,255,.28); }
    .project-modal-layout {
      display: grid;
      grid-template-columns: minmax(76px, .16fr) minmax(0, 1.84fr);
      gap: clamp(28px, 4vw, 64px);
      width: min(1180px, calc(100% - 64px));
      min-height: 100%;
      margin: 0 auto;
      padding: clamp(86px, 10vh, 118px) 0 100px;
    }
    .project-modal-aside {
      position: sticky;
      top: clamp(86px, 10vh, 118px);
      align-self: start;
      min-width: 0;
    }
    .project-modal-media {
      position: relative;
      display: grid;
      width: 100%;
      height: auto;
      aspect-ratio: 21 / 9;
      min-height: 0;
      margin-bottom: 34px;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(145deg, rgba(255,255,255,.1), transparent 42%),
        linear-gradient(130deg, #343633, #171816 58%, #0b0c0b);
    }
    .project-modal-media::before {
      position: absolute;
      inset: 0;
      content: "";
      opacity: .18;
      background: repeating-linear-gradient(105deg, transparent 0 62px, rgba(255,255,255,.1) 63px 64px);
    }
    .project-modal-media.has-image {
      width: 100%;
      height: auto;
      min-height: 0;
      aspect-ratio: 21 / 9;
      background: #0b0c0b;
    }
    .project-modal-media.has-image::before { display: none; }
    .project-modal-media-link {
      display: none;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
    .project-modal-media.has-image .project-modal-media-link { display: block; }
    .project-modal-image {
      display: none;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .project-modal-media.has-image .project-modal-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .project-modal-media.has-image .project-modal-placeholder { display: none; }
    .project-modal-media.has-image b { display: none; }
    .project-modal-placeholder {
      position: relative;
      z-index: 1;
      color: rgba(255,255,255,.48);
      font-size: 9px;
      letter-spacing: .22em;
    }
    .project-modal-media b {
      position: absolute;
      z-index: 1;
      right: 18px;
      bottom: 16px;
      color: rgba(255,255,255,.34);
      font-family: monospace;
      font-size: 9px;
      font-weight: 400;
      letter-spacing: .14em;
    }
    .project-modal-toc {
      margin-top: 26px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.18);
    }
    .project-modal-toc-title {
      margin: 0 0 15px;
      color: rgba(255,255,255,.38);
      font-size: 9px;
      letter-spacing: .2em;
    }
    .project-modal-toc ol {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .project-modal-toc a {
      display: block;
      color: rgba(255,255,255,.5);
      font-size: 11px;
      line-height: 1.4;
      text-decoration: none;
      transition: color .2s ease, transform .2s ease;
    }
    .project-modal-toc a:hover,
    .project-modal-toc a:focus-visible,
    .project-modal-toc a.is-active { color: rgba(255,255,255,.92); transform: translateX(3px); }
    .project-modal-toc a:focus-visible { outline: 1px solid rgba(255,255,255,.5); outline-offset: 4px; }
    .project-modal-main { min-width: 0; }
    .project-modal-header {
      padding: 0 0 54px;
      border-bottom: 1px solid rgba(255,255,255,.18);
    }
    .project-modal-kicker,
    .project-modal-title,
    .project-modal-lead { display:none; }
    .project-modal-kicker {
      margin: 0 0 20px;
      color: rgba(255,255,255,.44);
      font-size: 10px;
      letter-spacing: .2em;
    }
    .project-modal-title {
      max-width: 680px;
      margin: 0;
      color: #f1f1ec;
      font-size: clamp(46px, 6vw, 82px);
      font-weight: 500;
      line-height: .98;
      letter-spacing: -.05em;
    }
    .project-modal-lead {
      max-width: 620px;
      margin: 28px 0 0;
      color: rgba(255,255,255,.58);
      font-size: clamp(14px, 1.25vw, 18px);
      line-height: 1.85;
    }
    .project-modal-meta {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      margin-top: 48px;
      border-top: 1px solid rgba(255,255,255,.18);
      border-left: 1px solid rgba(255,255,255,.18);
    }
    .project-modal-meta-item {
      min-height: 92px;
      padding: 15px 17px;
      border-right: 1px solid rgba(255,255,255,.18);
      border-bottom: 1px solid rgba(255,255,255,.18);
    }
    .project-modal-meta-item span {
      display: block;
      color: rgba(255,255,255,.34);
      font-size: 8px;
      letter-spacing: .16em;
    }
    .project-modal-meta-item b {
      display: block;
      margin-top: 16px;
      color: rgba(255,255,255,.84);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.45;
    }
    .project-modal-sections { padding-top: 8px; }
    .project-modal-section {
      padding: 52px 0 56px;
      border-bottom: 1px solid rgba(255,255,255,.16);
      scroll-margin-top: 34px;
    }
    .project-modal-section-label {
      display: grid;
      grid-template-columns: minmax(0,1fr);
    }
    .project-modal-section h3 {
      margin: 0;
      color: rgba(255,255,255,.92);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.2;
    }
    .project-modal-section-content {
      margin: 22px 0 0;
    }
    .project-modal-section-content > p {
      max-width: 650px;
      margin: 0;
      color: rgba(255,255,255,.52);
      font-size: 14px;
      line-height: 1.9;
    }
    .project-modal-section-content > p + p { margin-top: 16px; }
    .project-modal-points {
      display: grid;
      gap: 0;
      max-width: 650px;
      margin: 2px 0 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(255,255,255,.14);
    }
    .project-modal-points li {
      position: relative;
      padding: 17px 0 17px 24px;
      border-bottom: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.56);
      font-size: 13px;
      line-height: 1.75;
    }
    .project-modal-points li::before {
      position: absolute;
      top: 25px;
      left: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,.68);
      content: "";
    }
    .project-modal-architecture {
      display: grid;
      gap: 18px;
      margin-top: 30px;
    }
    .project-modal-architecture-card {
      padding: 22px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.025);
    }
    .project-modal-flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:28px 0 8px; }
    .project-modal-flow-step { position:relative; min-height:128px; padding:16px 13px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.015)); }
    .project-modal-flow-step:not(:last-child)::after { content:'→'; position:absolute; z-index:2; right:-17px; top:50%; color:rgba(255,255,255,.46); font-size:18px; transform:translateY(-50%); }
    .project-modal-flow-step span { display:none; }
    .project-modal-flow-step strong { display:block; color:rgba(255,255,255,.9); font-size:16px; font-weight:500; line-height:1.35; }
    .project-modal-flow-step small { display:block; margin-top:8px; color:rgba(255,255,255,.46); font-size:14px; line-height:1.5; }
    @media (max-width: 760px) { .project-modal-flow { grid-template-columns:1fr; gap:8px; } .project-modal-flow-step:not(:last-child)::after { content:'↓'; right:auto; top:auto; bottom:-17px; left:50%; transform:translateX(-50%); } }
    .project-modal-architecture-head {
      display: flex;
      gap: 18px;
      align-items: flex-start;
      justify-content: space-between;
    }
    .project-modal-architecture-number,
    .project-modal-architecture-status {
      display: none;
      color: rgba(255,255,255,.35);
      font-family: monospace;
      font-size: 9px;
      letter-spacing: .12em;
    }
    .project-modal-architecture-card h4 {
      margin: 8px 0 0;
      color: rgba(255,255,255,.9);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.35;
    }
    .project-modal-architecture-card > p {
      margin: 15px 0 0;
      color: rgba(255,255,255,.5);
      font-size: 14px;
      line-height: 1.75;
    }
    .project-modal-architecture-steps {
      display: grid;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .project-modal-architecture-steps li {
      display: grid;
      grid-template-columns: minmax(0,1fr);
      gap: 0;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .project-modal-architecture-steps span {
      display: none;
      color: rgba(255,255,255,.28);
      font-family: monospace;
      font-size: 9px;
    }
    .project-modal-architecture-steps strong {
      display: block;
      color: rgba(255,255,255,.78);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.45;
    }
    .project-modal-architecture-steps small {
      display: block;
      margin-top: 4px;
      color: rgba(255,255,255,.4);
      font-size: 14px;
      line-height: 1.6;
    }
    .project-modal-case-media-list {
      display: grid;
      gap: 34px;
      margin-top: 28px;
    }
    .project-modal-case-media {
      margin: 0;
    }
    .project-modal-case-media.is-link { cursor: pointer; }
    .project-modal-case-media.is-link .project-modal-case-media-frame,
    .project-modal-case-media.is-link figcaption {
      transition: border-color .2s ease, color .2s ease, opacity .2s ease;
    }
    .project-modal-case-media.is-link:hover .project-modal-case-media-frame,
    .project-modal-case-media.is-link:focus-visible .project-modal-case-media-frame {
      border-color: rgba(255,255,255,.52);
    }
    .project-modal-case-media.is-link:focus-visible { outline: 1px solid rgba(255,255,255,.7); outline-offset: 8px; }
    .project-modal-case-media-frame {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.15);
      background: #0c0d0c;
    }
    .project-modal-case-media img,
    .project-modal-case-media video {
      display: block;
      width: 100%;
      height: auto;
    }
    .project-modal-case-media video {
      aspect-ratio: 1920 / 500;
      object-fit: contain;
    }
    .project-modal-case-media figcaption {
      display: grid;
      grid-template-columns: 32px minmax(0,1fr);
      gap: 14px;
      margin-top: 14px;
    }
    .project-modal-case-media.is-link figcaption { grid-template-columns: minmax(0,1fr); }
    .project-modal-case-media.is-link figcaption strong::after { content: "  ↗"; color: rgba(255,255,255,.42); }
    .project-modal-case-media figcaption > span {
      color: rgba(255,255,255,.3);
      font-family: monospace;
      font-size: 9px;
    }
    .project-modal-case-media figcaption strong {
      display: block;
      color: rgba(255,255,255,.78);
      font-size: 12px;
      font-weight: 500;
    }
    .project-modal-case-media figcaption small {
      display: block;
      margin-top: 5px;
      color: rgba(255,255,255,.4);
      font-size: 10px;
      line-height: 1.65;
    }
    .project-modal-video-toggle {
      position: absolute;
      right: 12px;
      bottom: 12px;
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.42);
      border-radius: 50%;
      background: rgba(2,3,2,.72);
      color: rgba(255,255,255,.88);
      backdrop-filter: blur(8px);
      transition: border-color .2s ease, background .2s ease;
    }
    .project-modal-video-toggle:hover,
    .project-modal-video-toggle:focus-visible { border-color: rgba(255,255,255,.84); background: rgba(2,3,2,.9); }
    .project-modal-video-toggle:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
    .project-modal-video-toggle svg { width: 15px; height: 15px; }
    .project-modal-video-toggle .icon-play { display: none; }
    .project-modal-video-toggle.is-paused .icon-pause { display: none; }
    .project-modal-video-toggle.is-paused .icon-play { display: block; }

    .toast { position: fixed; z-index: 300; left: 50%; bottom: 28px; transform: translate(-50%,12px); padding: 11px 15px; border: 1px solid var(--hair); border-radius:999px; background:rgba(4,5,4,.88); opacity:0; pointer-events:none; font-size:9px; letter-spacing:.08em; transition:.25s; backdrop-filter:blur(10px); }
    .toast.show { opacity:1; transform:translate(-50%,0); }

    @media (max-width: 560px) {
      .topbar { top:0; left:0; right:0; height:58px; display:flex; justify-content:center; padding:0 8px; }
      .identity,.prototype-note { display:none; }
      .sound-toggle { right:16px; width:36px; height:36px; }
      .projection { left:5vw; top:12vh; width:67vw; height:52vh; }
      .screen-copy { left:7%; width:76%; }
      .screen-title { font-size:38px; }
      .screen-description { max-width:220px; }
      .reel-zone { inset:38% 0 0 28%; }
      .reel-card { width:38vw; height:112px; }
      .turn-hint { left:40%; }
      .scroll-on { display:none; }
      .about {
        min-height: 100svh;
        display:block;
        padding: 12vh 7vw 8vh;
      }
      .about-copy { max-width:88vw; margin-bottom:0; }
      .about-title { font-size:clamp(50px,15vw,70px); }
      .about-role { margin-top:24px; font-size:9px; }
      .about-summary { width:80vw; margin-top:12px; font-size:15px; }
      .about-media { position:relative; right:auto; top:auto; width:58vw; margin:48px 0 0 auto; }
      .about-details {
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        width:100%;
        margin-top:48px;
      }
      .experience-list { display:block; }
      .experience-heading { margin-bottom:8px; font-size:11px; }
      .about-detail { margin-top:18px; padding-top:10px; }
      .experience-meta { font-size:14px; }
      .experience-title { font-size:15px; }
      .experience-copy { max-width:88vw; font-size:14px; }
      .design-pill { width:48vw; }
      .design-caption { top:44vh; width:24vw; font-size:12px; }
      .design-note { left:56vw; width:37vw; top:15vh; font-size:11px; }
      .arch { left:25vw; width:38vw; }
      .oval { left:59vw; width:31vw; }
      .tower { display:none; }
      .design-panel:first-child .tower { display:block; right:-12vw; top:28vh; width:31vw; height:52vh; }
      .rect-a { left:5vw; top:12vh; width:41vw; height:25vh; }
      .rect-b { left:52vw; top:9vh; width:35vw; height:34vh; }
      .rect-c { left:18vw; top:42vh; width:62vw; height:21vh; }
      .rect-d { left:4vw; top:68vh; width:34vw; height:25vh; }
      .rect-e { left:44vw; top:67vh; width:24vw; height:28vh; }
      .rect-f { left:73vw; top:65vh; width:25vw; height:31vh; }
      .lab { padding:7vh 0 0; }
      .lab-canvas { width:100vw; height:93vh; min-height:680px; }
      .canvas-title { left:6%; top:4%; }
      .canvas-timeline { top:14%; }
      .scrap.main { left:11%; top:25%; width:72%; height:39%; }
      .scrap.a { left:1%; top:34%; width:25%; height:17%; }
      .scrap.b { left:7%; top:53%; width:27%; height:14%; }
      .scrap.c { left:68%; top:23%; width:28%; height:18%; }
      .scrap.d { left:64%; top:46%; width:34%; height:17%; }
      .scrap.e { left:58%; top:61%; width:28%; height:18%; }
      .scrap.f { display:none; }
      .canvas-note { left:8%; bottom:8%; width:78%; }
    }
    @media (max-width: 640px) {
      .work-modal {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(250px, 42vh) 1fr;
        gap: 28px;
        padding: 76px 24px 30px;
        overflow-y: auto;
      }
      .work-modal-close { top: 18px; right: 18px; width: 42px; height: 42px; }
      .work-modal-media { height: 42vh; min-height: 250px; }
      .work-modal-media img { object-position: center 18%; }
      .work-modal-copy { align-self: auto; padding: 0; }
      .work-modal-kicker { margin-bottom: 14px; }
      .work-modal-title { font-size: clamp(38px, 13vw, 58px); }
      .work-modal-description { margin-top: 18px; }
      .work-modal-facts { margin-top: 34px; gap: 18px; }
      .project-modal-layout {
        grid-template-columns: 1fr;
        gap: 0;
        width: calc(100% - 48px);
        padding: 76px 0 72px;
      }
      .project-modal-aside { position: static; }
      .project-modal-media { width: 100%; height: 58vh; min-height: 360px; margin-bottom: 28px; }
      .project-modal-media.has-image { width: 100%; height: 168px; min-height: 168px; }
      .project-modal-toc { margin-bottom: 18px; }
      .project-modal-header { padding: 44px 0 42px; }
      .project-modal-title { font-size: clamp(42px, 15vw, 66px); }
      .project-modal-meta { margin-top: 36px; }
      .project-modal-section { padding: 42px 0 46px; }
      .project-modal-section-content { margin-left: 0; }
      .project-modal-architecture-card { padding: 18px; }
      .project-modal-case-media video { aspect-ratio: 16 / 6; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      .title-char,.projection-visual,.screen-kicker,.screen-description { transition-duration:.01ms !important; }
      .about-copy,.about-media,.about-detail { transition-duration:.01ms !important; }
    }

    .identity { color:inherit; text-decoration:none; }
    button:focus-visible, a:focus-visible { outline:1px solid #e8e8e3; outline-offset:5px; }
    .tabs button:focus-visible { outline:1px solid #e8e8e3; }
    .toast { max-width:calc(100vw - 32px); font-size:13px; text-align:center; z-index:400; }
    .scrap { overflow:hidden; }
    .scrap img { display:block; width:100%; height:100%; object-fit:cover; }
    .scrap span { position:absolute; bottom:0; left:0; height:auto; padding:10px 6px; background:linear-gradient(transparent,rgba(0,0,0,.85)); font-size:10px; color:#fff; }
    .study-dialog { width:min(1100px,92vw); max-height:90svh; padding:56px 20px 20px; border:1px solid #3a3b37; background:#10110f; color:var(--white); }
    .study-dialog::backdrop { background:rgba(0,0,0,.88); backdrop-filter:blur(8px); }
    .study-dialog > img { display:block; max-width:100%; max-height:65svh; margin:auto; object-fit:contain; }
    .study-close { position:absolute; right:20px; top:16px; border:0; background:none; cursor:pointer; }
    .study-close span { margin-left:12px; font-size:24px; }
    .study-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:16px; }
    .study-dialog h2 { font-size:15px; font-weight:400; }
    .study-dialog a { color:inherit; font-size:13px; white-space:nowrap; }
    .arch::after, .oval::after, .tower::after, .rect-media::after { content:'VISUAL STUDY'; }
    @media (max-width:560px) {
      .tabs { gap:4px; width:100%; justify-content:space-evenly; }
      .tabs button { padding:12px 9px; font-size:12px; letter-spacing:.08em; }
      .menu-mark { display:none; }
      .topbar { background:rgba(2,3,2,.82); backdrop-filter:blur(12px); }
      .contact-copy { padding-left:7vw; padding-right:7vw; }
      .copy-link { gap:16px; }
      .study-dialog footer { gap:10px; }
    }

/* Local feedback controls live above the portfolio, without changing its layout. */
.debug-trigger, .debug-inline { border:1px solid #55584f; background:#181b16; color:#e8e8e3; padding:11px 15px; font:12px Arial,sans-serif; border-radius:7px; cursor:pointer; }
.debug-trigger { position:fixed; right:18px; bottom:18px; z-index:500; box-shadow:0 4px 20px #0006; }
.debug-trigger:hover, .debug-inline:hover { background:#30362a; border-color:#a2b394; }
.debug-trigger:disabled { opacity:.6; cursor:wait; }
.debug-panel { width:min(440px,calc(100vw - 32px)); padding:30px; border:1px solid #44493d; border-radius:12px; background:#141710; color:#e8e8e3; box-shadow:0 20px 100px #0009; }
.debug-panel::backdrop { background:#0009; }
.debug-panel h2 { margin:0 0 22px; font-size:21px; font-weight:500; }
.debug-status { font-size:15px; color:#c9d9b5; }
.debug-detail { font-size:13px; color:#a5ac9d; line-height:1.8; }
.debug-close { position:absolute; top:12px; right:16px; background:none; border:0; font-size:26px; cursor:pointer; }
.debug-download { margin-top:14px; background:none; color:inherit; border:1px solid #515748; border-radius:5px; padding:9px 12px; cursor:pointer; }
.study-dialog footer { flex-wrap:wrap; }
@media(max-width:560px) { .debug-trigger { right:12px; bottom:12px; padding:10px 12px; } }

/* Selected design work, extracted from Wangdi's portfolio. */
.design-exhibition { height:320svh; background:#050505; }
.design-exhibition .design-panel { background:#050505; border:0; color:#e7e1d7; }
.design-exhibition figure { margin:0; min-width:0; }
.design-exhibition button { color:inherit; font:inherit; }
.design-zoom { display:block; border:0; padding:0; width:100%; background:none; cursor:zoom-in; }
.design-zoom img { display:block; width:100%; height:100%; object-fit:cover; }
.design-exhibition figcaption { color:#99968e; font-size:11px; line-height:1.65; }
.exhibit-eyebrow { font-size:10px; letter-spacing:.18em; color:#96938b; margin:0 0 28px; }
.design-intro-copy { position:absolute; top:19%; left:5%; width:24%; }
.exhibit-title { font-family:"Baskerville","Times New Roman",serif; font-size:clamp(75px,10vw,150px); font-style:italic; font-weight:400; letter-spacing:-.065em; line-height:1; margin:0 0 28px; }
.exhibit-lead { font-family:"Songti SC","STSong",serif; font-size:clamp(18px,2vw,27px); line-height:1.5; margin:0 0 22px; }
.exhibit-description { color:#a6a29a; font-size:13px; line-height:1.9; max-width:24em; margin:0; }
.exhibit-index { border-top:1px solid #ffffff26; display:flex; align-items:center; justify-content:space-between; margin-top:40px; padding-top:15px; font-size:10px; color:#918d85; }
.exhibit-index button,.design-panel-footer button { width:36px; height:36px; border:1px solid #ffffff30; border-radius:50%; font-size:18px; font-weight:300; background:none; cursor:pointer; transition:background .2s,color .2s; }
.exhibit-index button:hover,.design-panel-footer button:hover { background:#e4dccb; color:#111; }
.design-feature-art { position:absolute; left:35%; right:5%; top:16%; }
.design-feature-art .design-zoom { height:55svh; max-height:680px; }
.design-feature-art figcaption { display:flex; justify-content:space-between; gap:20px; padding-top:14px; }
.design-feature-art figcaption strong { color:#ded8ce; font-weight:400; }
.design-detail-art { position:absolute; left:31%; bottom:6%; width:12%; padding:8px!important; background:#050505; }
.design-detail-art .design-zoom { height:23svh; }
.design-detail-art figcaption { padding:8px 0 0; font-size:9px; }
.design-bottom-note { position:absolute; left:5%; bottom:7%; margin:0; font-size:10px; color:#79766f; }
.exhibit-heading { position:absolute; top:12%; left:5%; right:5%; display:flex; justify-content:space-between; align-items:end; gap:40px; }
.exhibit-heading .exhibit-eyebrow { margin-bottom:18px; }
.exhibit-heading h2,.design-ui-copy h2 { font-family:"Songti SC","STSong",serif; font-weight:400; font-size:clamp(28px,3.5vw,48px); margin:0; line-height:1.4; }
.exhibit-heading > p { max-width:31em; width:35%; font-size:12px; color:#a6a29a; line-height:1.9; margin:0; }
.design-poster-gallery { position:absolute; top:31%; bottom:13%; left:12%; right:12%; display:flex; align-items:start; justify-content:center; gap:5vw; }
.design-poster-gallery figure { height:100%; }
.design-poster-gallery .design-zoom { height:100%; width:auto; }
.design-poster-gallery img { height:100%; width:auto; max-width:27vw; object-fit:contain; }
.design-poster-gallery figure:nth-child(2) { transform:translateY(18px); }
.design-poster-gallery figcaption { margin-top:12px; font-size:10px; }
.design-panel-footer { position:absolute; bottom:3.5%; left:5%; right:5%; display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.1em; color:#918d85; }
.design-panel-footer > div { display:flex; gap:10px; }
.design-ui-copy { position:absolute; top:21%; left:5%; width:24%; }
.design-ui-copy h2 { margin-bottom:28px; }
.design-ui-copy .exhibit-eyebrow { letter-spacing:.12em; }
.design-ui-detail { border-top:1px solid #ffffff25; margin-top:36px; padding-top:20px; }
.design-ui-detail h3 { font-size:13px; font-weight:500; margin:0 0 12px; }
.design-ui-detail p { font-size:12px; color:#96928b; line-height:1.9; margin:0; }
.design-phone-gallery { position:absolute; left:35%; right:5%; top:21%; bottom:17%; display:flex; gap:3vw; justify-content:center; }
.design-phone-gallery figure { width:30%; height:100%; }
.design-phone-gallery .design-zoom { height:100%; }
.design-phone-gallery img { object-fit:contain; border-radius:8px; }
.design-phone-gallery figure:nth-child(2) { transform:translateY(25px); }
.design-phone-gallery figcaption { text-align:center; margin-top:14px; font-size:10px; }
.design-lightbox { max-width:94vw; max-height:94svh; background:#0a0a0a; border:1px solid #ffffff30; padding:42px 20px 16px; color:#ddd; }
.design-lightbox::backdrop { background:#000e; }
.design-lightbox > button { position:absolute; top:12px; right:15px; border:0; background:none; color:inherit; cursor:pointer; }
.design-lightbox img { max-width:88vw; max-height:78svh; display:block; object-fit:contain; }
.design-lightbox p { font-size:12px; color:#aaa; margin:12px 0 0; }
.design-exhibition :focus-visible { outline:2px solid #eee4d3; outline-offset:5px; }
@media(max-width:800px){
 .design-exhibition { height:auto; }
 .design-exhibition .design-stage { position:relative; height:auto; overflow:visible; }
 .design-exhibition .design-track { display:block; width:100%; height:auto; transform:none!important; }
 .design-exhibition .design-panel { width:100%; min-height:100svh; height:auto; padding:86px 24px 65px; overflow:visible; border-bottom:1px solid #ffffff20; }
 .design-intro-copy,.design-ui-copy { position:static; width:auto; }
 .exhibit-eyebrow { margin-bottom:22px; font-size:9px; }
 .exhibit-title { font-size:90px; margin-bottom:22px; }
 .exhibit-lead { font-size:24px; }
 .exhibit-description { max-width:32em; }
 .exhibit-index { margin-top:26px; }
 .design-feature-art { position:static; margin-top:35px!important; }
 .design-feature-art .design-zoom { height:auto; }
 .design-feature-art img { height:auto; aspect-ratio:16/10; }
 .design-feature-art figcaption { display:block; padding-top:12px; }
 .design-feature-art figcaption span { display:block; margin-top:4px; }
 .design-detail-art { position:relative; left:auto; bottom:auto; width:42%; margin:30px 0 0 auto!important; padding:0!important; }
 .design-detail-art .design-zoom { height:auto; }
 .design-detail-art img { height:auto; }
 .design-bottom-note { bottom:25px; left:24px; max-width:45%; line-height:1.8; }
 .exhibit-heading { position:static; display:block; }
 .exhibit-heading h2 { font-size:35px; }
 .exhibit-heading > p { width:auto; margin-top:22px; }
 .design-poster-gallery { position:static; margin:35px 0 35px; gap:12px; align-items:start; }
 .design-poster-gallery figure { width:33.33%; height:auto; }
 .design-poster-gallery .design-zoom { width:100%; height:250px; }
 .design-poster-gallery img { width:100%; max-width:none; height:100%; object-fit:cover; object-position:top; }
 .design-poster-gallery figure:nth-child(2) { transform:translateY(20px); }
 .design-poster-gallery figcaption { font-size:9px; }
 .design-panel-footer { left:24px; right:24px; bottom:20px; }
 .design-ui-copy h2 { font-size:35px; }
 .design-phone-gallery { position:static; margin:36px 0 40px; gap:12px; }
 .design-phone-gallery figure { width:33.33%; height:auto; }
 .design-phone-gallery .design-zoom { height:auto; }
 .design-phone-gallery img { height:auto; border-radius:4px; }
 .design-phone-gallery figcaption { font-size:9px; }
}
@media(prefers-reduced-motion:reduce){ .exhibit-index button,.design-panel-footer button { transition:none; } }
/* A continuous, content-sized scroll: UI projects first, no full-screen slide boundaries. */
.design-scrollwork { background:#050505; height:600svh; }
.design-scrollwork .design-track { display:flex; gap:76px; align-items:center; padding:92px 64px 50px; box-sizing:border-box; background:#050505; }
.design-scrollwork article { flex:0 0 auto; color:#e7e1d7; }
.scroll-intro { width:280px; align-self:center; padding-right:20px; }
.scroll-label { color:#929089; font-size:10px; letter-spacing:.1em; line-height:1.8; margin:0 0 24px; }
.scroll-main-title { font:500 clamp(62px,7vw,95px)/1.2 "Songti SC","STSong",serif; margin:0 0 28px; letter-spacing:.01em; }
.scroll-lead { font:400 23px/1.6 "Songti SC","STSong",serif; margin:0 0 22px; }
.scroll-description { font-size:13px; line-height:1.95; color:#a6a29a; margin:0; max-width:24em; }
.scroll-guide { font-size:11px; color:#827e76; margin-top:42px; }
.design-chapter { display:flex; align-items:center; gap:34px; padding-right:48px; }
.scroll-copy { width:235px; flex:0 0 auto; }
.scroll-copy h3 { font:400 33px/1.4 "Songti SC","STSong",serif; margin:0 0 24px; color:#e7e1d7; }
.chapter-gala > .scroll-copy h3,.chapter-xeva > .scroll-copy h3 { font-family:"Baskerville","Times New Roman",serif; font-size:45px; }
.scroll-phone-pair { display:flex; gap:24px; align-items:center; }
.design-scrollwork figure { margin:0; flex:0 0 auto; }
.scroll-phone-pair figure,.scroll-phone-single { width:clamp(150px,14vw,215px); }
.scroll-phone-pair .design-zoom,.scroll-phone-single .design-zoom { height:clamp(300px,54svh,520px); }
.scroll-phone-pair img,.scroll-phone-single img { object-fit:contain; border-radius:7px; }
.scroll-phone-pair figure:nth-child(2) { padding-top:28px; }
.design-scrollwork figcaption { font-size:10px; line-height:1.7; margin-top:14px; color:#96928a; }
.scroll-design-detail { width:330px; padding-left:18px; }
.scroll-design-detail .scroll-copy { width:auto; }
.scroll-design-detail h3 { font-size:24px; }
.scroll-design-detail .scroll-description { font-size:12px; }
.scroll-components { margin-top:28px!important; }
.scroll-components .design-zoom { height:230px; }
.scroll-components img { object-fit:contain; }
.scroll-posters { display:flex; gap:28px; align-items:center; }
.scroll-posters figure { width:clamp(151px,25.7svh,248px); }
.scroll-posters figure:first-child { width:clamp(188px,31.9svh,308px); }
.scroll-posters .design-zoom { width:100%; height:clamp(330px,56svh,540px); }
.scroll-posters img { width:100%; height:100%; object-fit:contain; }
.scroll-posters figure:nth-child(2) { padding-top:38px; }
.scroll-wide-art { width:clamp(570px,65vw,920px); }
.scroll-wide-art .design-zoom { height:clamp(330px,56svh,540px); }
.scroll-wide-art img { object-fit:cover; }
.scroll-light-study { width:200px; }
.scroll-light-study .design-zoom { height:290px; }
.design-scrollwork :focus-visible { outline:2px solid #eee4d3; outline-offset:5px; }
@media(max-width:800px){
 .design-scrollwork { height:auto; }
 .design-scrollwork .design-stage { position:relative; height:auto; overflow:visible; }
 .design-scrollwork .design-track { display:block; width:100%; height:auto; padding:80px 24px 50px; transform:none!important; }
 .scroll-intro { width:auto; padding:0 0 45px; }
 .scroll-main-title { font-size:64px; }
 .scroll-guide { margin-top:22px; }
 .design-chapter { display:block; padding:40px 0; border-top:1px solid #ffffff20; }
 .scroll-copy { width:auto; margin-bottom:28px; }
 .scroll-copy h3 { font-size:29px; }
 .scroll-description { max-width:36em; }
 .scroll-phone-pair { gap:22px; justify-content:center; }
 .scroll-phone-pair figure { width:calc(50% - 11px); max-width:215px; }
 .scroll-phone-pair .design-zoom { height:auto; }
 .scroll-phone-pair img { height:auto; max-height:470px; }
 .scroll-design-detail { width:auto; padding:30px 0 0; }
 .scroll-components .design-zoom { height:auto; }
 .scroll-components img { height:auto; max-height:380px; }
 .scroll-phone-single { width:210px; margin:28px auto 0!important; }
 .scroll-phone-single .design-zoom { height:auto; }
 .scroll-phone-single img { height:auto; }
 .scroll-posters { gap:12px; justify-content:center; }
 .scroll-posters figure,.scroll-posters figure:first-child { width:calc(33.33% - 8px); }
 .scroll-posters .design-zoom { width:100%; height:250px; }
 .scroll-posters img { width:100%; object-fit:cover; object-position:top; }
 .scroll-wide-art { width:100%; }
 .scroll-wide-art .design-zoom { height:auto; }
 .scroll-wide-art img { height:auto; }
 .scroll-light-study { width:45%; margin:28px 0 0 auto!important; }
 .scroll-light-study .design-zoom { height:auto; }
 .scroll-light-study img { height:auto; }
}