/* Urbanist is bundled locally so the first paint does not depend on
   fonts.googleapis.com, which can be slow or unreachable on some networks. */
@font-face {
  font-family: "Urbanist";
  src: url("assets/fonts/urbanist-300.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("assets/fonts/urbanist-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("assets/fonts/urbanist-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("assets/fonts/urbanist-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("assets/fonts/urbanist-300-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("assets/fonts/urbanist-400-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* VV Design System tokens — sourced from VV-Design-System-Agent-Runtime/src/styles/tokens.css. */
  --vv-color-black-111111-100: #111111;
  --vv-color-black-141414-100: #141414;
  --vv-color-black-1f1f1f-100: #1f1f1f;
  --vv-color-white-100: #ffffff;
  --vv-color-white-90: rgb(255 255 255 / 90%);
  --vv-color-white-60: rgb(255 255 255 / 60%);
  --vv-color-white-50: rgb(255 255 255 / 50%);
  --vv-color-white-30: rgb(255 255 255 / 30%);
  --vv-color-white-20: rgb(255 255 255 / 20%);
  --vv-color-white-10: rgb(255 255 255 / 10%);
  --vv-color-white-8: rgb(255 255 255 / 8%);
  --vv-color-white-3: rgb(255 255 255 / 3%);
  --vv-color-bg-app: var(--vv-color-black-111111-100);
  --vv-color-bg-page: var(--vv-color-black-141414-100);
  --vv-color-text-primary: var(--vv-color-white-100);
  --vv-color-text-secondary: var(--vv-color-white-90);
  --vv-color-text-tertiary: var(--vv-color-white-50);
  --vv-color-border-subtle: var(--vv-color-white-10);
  --vv-color-border-strong: var(--vv-color-white-20);
  --vv-radius-sm: 4px;
  --vv-radius-md: 6px;
  --vv-radius-lg: 8px;
  --vv-space-8: 8px;
  --vv-space-16: 16px;
  --vv-space-20: 20px;
  --vv-space-24: 24px;
  --vv-space-32: 32px;
  --black: #000;
  --ink: #09090b;
  --body: #272727;
  --muted: #6d6d6d;
  --hero-gray: #878787;
  --panel: rgba(247, 247, 247, 0.6);
  --blue: #0080ff;
  --pink: #cc85c0;
  --red: #d62727;
  --purple-fade: rgba(91, 95, 199, 0.4);
  --section-fade: rgba(49, 49, 49, 0.4);
  --page-x: 80px;
  --wide: 1172px;
  --content: 906px;
  --project-ratio: 566 / 376;
  --glass-fill: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.82);
  --glass-shadow: 0 18px 54px rgba(0, 0, 0, 0.12);
  --glass-blur: 16px;
  --hairline: rgba(0, 0, 0, 0.1);
  --soft-fill: #f7f7f5;
  --falling-gray: rgba(34, 34, 34, 0.24);
  --falling-bg: #fff;
  --pixel-size: clamp(10px, 1.05vw, 15px);
  --pixel-dot: clamp(1.4px, 0.18vw, 2.3px);
  /* Typography hierarchy: VV's 400 / 500 / 700 weight scale, with a CJK reading stack. */
  --font-cjk: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-sans: Urbanist, var(--font-cjk);
  --font-ui: Urbanist, var(--font-cjk);
  --font-display: Urbanist, var(--font-cjk);
  --font-hero: Urbanist, var(--font-cjk);
  --font-label: Urbanist, var(--font-cjk);
  --text-display: clamp(44px, 5.4vw, 64px);
  --text-display-home: clamp(38px, 4.9vw, 64px);
  --text-title: clamp(40px, 5vw, 64px);
  --text-section: 28px;
  --text-subsection: 24px;
  --text-lead: 22px;
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 13px;
  --text-caption: 12px;
  --leading-tight: 1.08;
  --leading-display: 1.12;
  --leading-title: 1.18;
  --leading-section: 1.32;
  --leading-lead: 1.55;
  --leading-body: 1.8;
  --leading-small: 1.45;
  --leading-label: 1.38;
  --weight-display: 400;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
}

* {
  box-sizing: border-box;
}

html {
  background: #fff;
  color: var(--black);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  /* Reserve the native scrollbar gutter symmetrically so fixed page padding
     remains visually balanced on browsers with classic scrollbars. */
  scrollbar-gutter: stable both-edges;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Visible first-paint fallback while the React bundle and route assets load. */
.home-loading {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  gap: 12px;
  align-content: center;
  background: var(--vv-color-bg-app);
  color: var(--vv-color-white-90);
  font-family: var(--font-ui);
  pointer-events: none;
}

.home-loading__brand {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.home-loading__pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--vv-color-white-60);
  animation: home-loading-pulse 1.2s ease-in-out infinite;
}

@keyframes home-loading-pulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50% { opacity: .9; transform: scale(1.15); }
}

html:has(body[data-page="home"]),
body[data-page="home"] { overflow-x: clip; background: var(--vv-color-bg-app); }

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

body {
  margin: 0;
  min-width: 320px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: #fff;
  background: #000;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  height: 64px;
  padding: 8px var(--page-x);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.2);
  transition:
    width 560ms cubic-bezier(.22, 1, .36, 1),
    left 560ms cubic-bezier(.22, 1, .36, 1),
    right 560ms cubic-bezier(.22, 1, .36, 1),
    top 560ms cubic-bezier(.22, 1, .36, 1),
    transform 560ms cubic-bezier(.22, 1, .36, 1),
    height 560ms cubic-bezier(.22, 1, .36, 1),
    padding 560ms cubic-bezier(.22, 1, .36, 1),
    border-radius 560ms cubic-bezier(.22, 1, .36, 1),
    background-color 360ms ease,
    box-shadow 360ms ease;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 82px;
  height: 48px;
  padding: 0 4px;
  color: var(--ink);
  font-size: var(--text-lead);
  line-height: 1;
}
.brand--avatar { width: auto; min-width: 0; gap: 10px; padding: 0; white-space: nowrap; }
.brand--avatar > span:first-child {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 0;
}
.brand-label { display: inline-block; white-space: nowrap; }
.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;
}

.nav-links {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

/* Keep the primary tabs anchored to the same viewport center on every route.
   The surrounding grid is still used for the brand and language controls, but
   the tab group must not re-centre itself when labels or active states change. */
.site-nav > .nav-links {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.nav-links a {
  padding: 6px 4px;
  color: #000;
  font-size: var(--text-body);
  line-height: var(--leading-small);
  border-bottom: 1px solid transparent;
  transition:
    border-color 160ms ease,
    opacity 160ms ease,
    background-color 420ms cubic-bezier(.22, 1, .36, 1),
    color 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.nav-links a:hover {
  opacity: 0.45;
}

.nav-links a[aria-current="page"] {
  border-color: currentColor;
  animation: nav-tab-enter 420ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes nav-tab-enter {
  from { opacity: .35; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

.language-switch {
  position: absolute;
  top: 50%;
  right: var(--page-x);
  justify-self: auto;
  display: inline-flex;
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: rgba(247, 247, 245, 0.8);
  transform: translateY(-50%);
}

.language-switch button {
  min-width: 84px;
  padding-inline: 14px;
  min-height: 30px;
  padding: 0 10px;
  color: var(--muted);
  font: var(--weight-medium) var(--text-caption) / 1 var(--font-ui);
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.language-switch button[aria-pressed="true"] {
  color: #000;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* Match the display-mode tab: same compact glass shell, control size, and
   selected-state treatment while preserving the language control's position. */
.language-switch {
  gap: 4px;
  padding: 4px;
  border-color: rgb(254 254 254 / 10%);
  background: rgb(254 254 254 / 6%);
  box-shadow: 0 12px 30px rgb(0 0 0 / 16%);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.language-switch button {
  min-width: 48px;
  min-height: 32px;
  color: rgb(254 254 254 / 52%);
  font-weight: 500;
  transition: background-color 180ms ease, color 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.language-switch button:hover,
.language-switch button:focus-visible {
  color: rgb(254 254 254 / 90%);
  background: rgb(254 254 254 / 8%);
  transform: translateY(-1px);
}
.language-switch button[aria-pressed="true"] {
  color: rgb(254 254 254 / 96%);
  background: rgb(254 254 254 / 12%);
  box-shadow: none;
}

/* Segmented language control: one shared selection surface glides between
   the two circular options instead of flashing two independent backgrounds. */
.language-switch[data-language] {
  position: absolute;
  isolation: isolate;
  overflow: hidden;
}
.language-switch[data-language]::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 0;
  width: 48px;
  border-radius: 999px;
  background: rgb(254 254 254 / 16%);
  content: "";
  transform: translateX(0);
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.language-switch[data-language="en"]::before { transform: translateX(52px); }
.language-switch[data-language] button {
  position: relative;
  z-index: 1;
  background: transparent !important;
  transition: color 220ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.language-switch[data-language] button[aria-pressed="true"] { color: rgb(254 254 254 / 96%); }

/* The language segments are intentionally independent circles, without an
   enclosing pill or frame. */
.language-switch[data-language] {
  gap: 4px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.language-switch[data-language]::before { display: none; }
.language-switch[data-language] button,
.language-switch[data-language] button[aria-pressed="true"] {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  background: transparent !important;
}
.language-switch[data-language] button:hover,
.language-switch[data-language] button:focus-visible,
.language-switch[data-language] button[aria-pressed="true"] {
  background: rgb(254 254 254 / 14%) !important;
}

.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 64px);
  padding: clamp(48px, 8vh, 96px) var(--page-x);
  background: #fff;
  isolation: isolate;
  perspective: 1100px;
}

/* A quiet closing panel gives the homepage a deliberate ending after the
   project rail, echoing the portfolio's dark, atmospheric visual language. */
.home-footer {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 160px;
  padding: 32px var(--page-x);
  overflow: hidden;
  color: var(--vv-color-text-primary);
  /* Let the page atmosphere continue through the footer without a separate
     panel competing with the contact content. */
  background: transparent;
}
.home-footer__intro,
.home-footer__contact { position: relative; z-index: 1; }
.home-footer__intro { display: none; }
.home-footer__intro h2 {
  margin: 0;
  color: var(--vv-color-text-primary);
  font: 500 var(--text-title) / 1.1 var(--font-ui);
  letter-spacing: -.04em;
}
.home-footer__contact {
  display: grid;
  grid-template-columns: minmax(250px, 1.2fr) repeat(3, minmax(150px, 1fr));
  gap: 32px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  align-items: end;
}
.home-footer__contact > * { display: grid; align-content: end; gap: 10px; min-width: 0; color: var(--vv-color-white-50); text-decoration: none; }
.home-footer__identity { row-gap: 4px; }
.home-footer__contact a:hover { color: var(--vv-color-text-primary); }
.home-footer__identity strong { color: var(--vv-color-text-primary); font-size: 24px; font-weight: 500; }
.home-footer__contact small { color: var(--vv-color-white-30); font: 500 11px / 1 var(--font-ui); letter-spacing: .08em; }
.home-footer__contact span { font: 400 14px / 1.4 var(--font-ui); }
@media (max-width: 760px) {
  .home-footer { min-height: 160px; padding: 28px 16px; }
  .home-footer__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .home-footer__identity { grid-column: 1 / -1; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-showcase--grid .project-rail__track .project-card {
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1), box-shadow 360ms cubic-bezier(.22, 1, .36, 1);
  }
  .project-showcase--grid .project-rail__track .project-card:hover {
    transform: translateY(calc(var(--project-grid-gutter, 12px) * -1)) !important;
    box-shadow: 0 24px 48px rgb(0 0 0 / 28%);
  }
}

.home-hero > .discipline,
.home-hero > h1 {
  position: relative;
  z-index: 2;
}

.falling-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--falling-bg);
  opacity: 1;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 5%, #000 96%, transparent 100%),
    radial-gradient(ellipse at 38% 48%, transparent 0 22%, rgba(0, 0, 0, 0.42) 44%, #000 100%);
  mask-composite: intersect;
}

.falling-pattern::before {
  position: absolute;
  inset: -16%;
  content: "";
  background:
    radial-gradient(ellipse at 18% 24%, rgba(0, 0, 0, 0.3) 0 8%, transparent 23%),
    radial-gradient(ellipse at 72% 18%, rgba(0, 0, 0, 0.24) 0 9%, transparent 25%),
    radial-gradient(ellipse at 46% 58%, rgba(0, 0, 0, 0.28) 0 10%, transparent 27%),
    radial-gradient(ellipse at 82% 72%, rgba(0, 0, 0, 0.25) 0 8%, transparent 25%),
    radial-gradient(ellipse at 16% 82%, rgba(0, 0, 0, 0.18) 0 8%, transparent 25%);
  filter: url("#ethereal-shadow") blur(4px);
  opacity: 0.86;
  transform: scale(1.05);
  animation: ethereal-drift 32s linear infinite;
}

.falling-pattern.is-react-shadow::before,
.falling-pattern.is-react-shadow::after {
  opacity: 0;
}

#hero-shadow-root,
.hero-shadow {
  position: absolute;
  inset: 0;
}

.hero-shadow {
  overflow: hidden;
}

.hero-shadow__svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.falling-pattern::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.08) 0 0.8px, transparent 1.1px),
    linear-gradient(135deg, rgba(0, 0, 0, 0.024), transparent 36%, rgba(0, 0, 0, 0.014));
  background-size: 8px 8px, 100% 100%;
  opacity: 0.28;
  mix-blend-mode: multiply;
}

.discipline {
  margin: 0 0 clamp(32px, 7vh, 76px);
  color: rgba(0, 0, 0, 0.58);
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: var(--leading-label);
}

.home-hero h1 {
  position: relative;
  width: max-content;
  max-width: none;
  margin: 0;
  color: rgba(0, 0, 0, 0.56);
  font-size: clamp(40px, 6.8vw, 96px);
  font-weight: var(--weight-display);
  line-height: 0.96;
  letter-spacing: 0;
  white-space: nowrap;
  transform-style: preserve-3d;
  will-change: transform;
  isolation: isolate;
}

.home-hero__sentence {
  display: block;
  padding: 0 18vw 0 0;
}

.hero-word {
  position: relative;
  z-index: 2;
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-letter {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 54%;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-word--accent {
  position: relative;
  color: #030303;
}

.home-gsap-shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform-style: preserve-3d;
}

.home-gsap-decor {
  position: absolute;
  display: block;
  z-index: 3;
  opacity: 1;
  will-change: transform;
}

.home-gsap-decor__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-gsap-decor.is-empty .home-gsap-decor__img {
  display: none;
}

.home-gsap-decor.is-empty {
  display: none;
}

/* Empty slots only show their drop-zone box in the authoring tool, so the
   live site never renders an empty placeholder. */
.home-hero.is-decor-edit .home-gsap-decor.is-empty {
  display: block;
  border: 1.5px dashed rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
}

/* Baked from the authoring tool (decor-layout.json). */
.home-gsap-decor--1 {
  left: clamp(280px, 46vw, 700px);
  top: -2.2em;
  width: clamp(120px, 14vw, 220px);
  aspect-ratio: 295 / 263;
  height: auto;
}

.home-gsap-decor--1 .home-gsap-decor__img {
  border-radius: 8px;
}

.home-gsap-decor--3 {
  left: clamp(450px, 70vw, 1040px);
  top: 0.82em;
  width: clamp(180px, 26vw, 420px);
  aspect-ratio: 586 / 359;
  height: auto;
}

/* Default editable position for the new slot (adjust via ?edit-decor). */
.home-gsap-decor--5 {
  left: 700px;
  top: -120px;
  width: 220px;
  height: 220px;
}

/* ---- Decoration authoring mode (?edit-decor) ---- */
.home-hero.is-decor-edit {
  overflow-x: auto;
  overflow-y: hidden;
}

.home-hero.is-decor-edit .home-gsap-shapes {
  pointer-events: none;
}

.home-hero.is-decor-edit .home-gsap-decor {
  pointer-events: auto;
  cursor: grab;
  outline: 1px solid rgba(0, 0, 0, 0.28);
  outline-offset: 2px;
  touch-action: none;
}

.home-hero.is-decor-edit .home-gsap-decor:active {
  cursor: grabbing;
}

.home-hero.is-decor-edit .home-gsap-decor.is-empty {
  background: rgba(0, 0, 0, 0.04);
}

.home-hero.is-decor-edit .home-gsap-decor.is-drop {
  outline: 2px dashed rgba(0, 0, 0, 0.6);
}

.home-gsap-decor__resize {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  background: #fff;
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.decor-edit-toolbar {
  position: fixed;
  top: 76px;
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(0, 0, 0, 0.78);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.decor-edit-toolbar__hint {
  max-width: 220px;
  color: rgba(0, 0, 0, 0.6);
}

.decor-edit-toolbar button {
  padding: 5px 10px;
  font: inherit;
  color: #fff;
  background: #10120f;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.decor-edit-toolbar button:last-child {
  color: rgba(0, 0, 0, 0.78);
  background: rgba(0, 0, 0, 0.06);
}

.hero-proof {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(32px, 6vh, 64px);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 5vh, 48px);
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: rgba(0, 0, 0, 0.74);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  transform: translateX(-50%);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 220ms ease;
}

.hero-scroll:hover {
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11);
  transform: translateX(-50%) translateY(4px);
}

.hero-scroll svg {
  width: 21px;
  height: 21px;
}

.hero-scroll path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(10px);
}

.home-hero strong {
  font-weight: 650;
}

.letter-swap {
  display: inline-flex;
  align-items: baseline;
  overflow: hidden;
  vertical-align: baseline;
  line-height: 1;
}

.swap-letter {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  line-height: 1.08;
  white-space: pre;
}

.swap-letter > span {
  position: relative;
  display: inline-block;
  padding-bottom: 0.08em;
}

.swap-letter > span + span {
  position: absolute;
  left: 0;
}

.blue {
  color: #030303;
}

.pink {
  color: #030303;
}

.red {
  color: #030303;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px 40px;
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto 112px;
  align-items: start;
}

/* Desktop project rail: vertical scroll advances the work horizontally. */
.project-showcase {
  position: relative;
  width: 100vw;
  margin: -180px 0 112px;
  overflow: clip;
}

.project-showcase__toolbar {
  position: fixed;
  /* The control belongs to the viewing mode, not to a moving card or pinned
     section. Keep it at one viewport coordinate while layouts and scroll
     state change. */
  top: 96px;
  left: var(--page-x);
  z-index: 25;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgb(254 254 254 / 10%);
  border-radius: 999px;
  background: rgb(254 254 254 / 6%);
  box-shadow: 0 12px 30px rgb(0 0 0 / 16%);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 360ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.project-showcase__toolbar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.project-showcase__layout-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  color: rgb(254 254 254 / 52%);
  background: transparent;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.project-showcase__layout-button:hover,
.project-showcase__layout-button:focus-visible {
  color: rgb(254 254 254 / 90%);
  background: rgb(254 254 254 / 8%);
  transform: translateY(-1px);
}

.project-showcase__layout-button[aria-pressed="true"] {
  color: rgb(254 254 254 / 96%);
  background: rgb(254 254 254 / 12%);
}

.project-showcase__layout-glyph--grid {
  display: grid;
}

.project-showcase__layout-glyph--grid img {
  display: block;
  width: 20px;
  height: 20px;
  color: currentColor;
  filter: invert(1);
  opacity: .72;
  transition: opacity 180ms ease;
}

.project-showcase__layout-button[aria-pressed="true"] .project-showcase__layout-glyph--grid img,
.project-showcase__layout-button:hover .project-showcase__layout-glyph--grid img,
.project-showcase__layout-button:focus-visible .project-showcase__layout-glyph--grid img {
  opacity: 1;
}

.project-showcase__layout-glyph--rail {
  display: grid;
}

.project-showcase__layout-glyph--rail img {
  display: block;
  width: 20px;
  height: 20px;
  color: currentColor;
  filter: invert(1);
  opacity: .72;
  transition: opacity 180ms ease;
}

.project-showcase__layout-button[aria-pressed="true"] .project-showcase__layout-glyph--rail img,
.project-showcase__layout-button:hover .project-showcase__layout-glyph--rail img,
.project-showcase__layout-button:focus-visible .project-showcase__layout-glyph--rail img {
  opacity: 1;
}

/* Grid mode keeps the same card language while trading the pinned rail for a
   calmer overview. The toolbar remains available so the choice is reversible. */
.project-showcase--grid {
  width: 100vw;
  margin: -100px 0 144px;
  overflow: visible;
}

.project-showcase--grid .project-rail__viewport {
  height: auto;
  display: block;
  overflow: visible;
  perspective: none;
}

.project-showcase--grid .project-rail__motion {
  width: 100%;
  opacity: 1 !important;
  transform: none !important;
}

.project-showcase--grid .project-rail__track.work-grid {
  display: block;
  width: calc(100% - 2 * var(--page-x));
  max-width: none;
  margin: 0 auto;
  padding: clamp(88px, 10vh, 132px) 0 0;
  transform: none !important;
}

.project-showcase--grid .project-grid-row {
  display: grid;
  grid-template-columns: minmax(0, 1075fr) minmax(0, 701fr);
  gap: var(--project-grid-gutter, 12px);
  margin-bottom: var(--project-grid-gutter, 12px);
}

.project-showcase--grid .project-grid-row--2 {
  grid-template-columns: minmax(0, 701fr) minmax(0, 1075fr);
}

/* Grid gutters follow the responsive layout scale; the horizontal rail keeps
   its own spacing and is intentionally unaffected. */
.project-showcase--grid { --project-grid-gutter: 12px; }
@media (min-width: 1200px) {
  .project-showcase--grid { --project-grid-gutter: 16px; }
}
@media (min-width: 1601px) {
  .project-showcase--grid { --project-grid-gutter: 24px; }
}

.project-showcase--grid .project-rail__track .project-card {
  display: block;
  flex: none;
  width: auto;
  /* Figma reference: 1824px usable width (1920 - 48px × 2) maps to
     1000px card height. This keeps the opening pair equal-height while
     scaling the whole composition with the viewport. */
  height: clamp(420px, calc(54.824vw - 52.63px), 1000px);
  padding: 24px;
  overflow: hidden;
  border-radius: 32px;
  background: #000000;
  opacity: 1 !important;
  transform: none !important;
}

.project-showcase--grid .project-rail__track .project-card#delta {
  background: #000000;
}

.project-showcase--grid .project-rail__track .project-card__visual {
  position: relative;
  display: block;
  height: 100%;
  transform: none !important;
}

.project-showcase--grid .project-rail__track .project-card__media {
  position: absolute;
  inset: 0 0 104px;
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 32px;
  background: #000000;
}

.project-showcase--grid .project-rail__track .project-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 0;
}

.project-showcase--grid .project-rail__track .project-card__media--da-thumbnail {
  place-items: center;
}

.project-showcase--grid .project-rail__track .project-card__body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: repeat(3, auto);
  gap: 6px 14px;
  min-height: 0;
  height: 80px;
  align-content: end;
  align-items: end;
  align-self: end;
  box-sizing: border-box;
  padding: 8px 0 0;
  border-radius: 0;
  background: transparent;
}

.project-showcase--grid .project-card__number {
  grid-row: 1 / 3;
  color: var(--vv-color-white-50);
}

.project-showcase--grid .project-card__meta {
  grid-column: 2 / -1;
  color: var(--vv-color-white-50);
}

.project-showcase--grid .project-card__title {
  grid-column: 2;
  max-width: none;
  color: var(--vv-color-text-primary);
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.15;
}

.project-showcase--grid .project-card__status { color: var(--vv-color-white-50); }
.project-showcase--grid .project-rail__caption { display: none; }

/* The design-system cover is already a composed visual; keep it at rest on hover. */
body[data-page="home"] .project-card#system:hover .project-card__media img,
body[data-page="home"] .project-card#system:focus-visible .project-card__media img {
  transform: none !important;
  transition: none;
}

/* Research projects use a quieter editorial index after the main showcase. */
.research-projects {
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto 160px;
  padding-top: 48px;
}

.research-projects__nav {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 84px;
  padding: 4px;
  border: 1px solid rgb(254 254 254 / 10%);
  border-radius: 12px;
  background: rgb(254 254 254 / 5%);
  box-shadow: 0 16px 36px rgb(0 0 0 / 16%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.research-projects__nav a {
  padding: 10px 18px;
  border-radius: 8px;
  color: var(--vv-color-white-50);
  font: 500 14px / 1 var(--font-ui);
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.research-projects__nav a:hover,
.research-projects__nav a:focus-visible { color: var(--vv-color-text-primary); background: rgb(254 254 254 / 8%); transform: translateY(-1px); }
.research-projects__nav a.is-active { color: var(--vv-color-text-primary); background: rgb(254 254 254 / 12%); }

.research-projects__intro { max-width: 820px; margin-bottom: 56px; }
.research-projects__eyebrow { margin: 0 0 18px; color: var(--vv-color-white-50); font: 500 12px / 1 var(--font-ui); letter-spacing: .12em; }
.research-projects__intro h2 { margin: 0; color: var(--vv-color-text-primary); font: 300 24px / 1.15 var(--font-ui); letter-spacing: -.035em; }

.research-projects__list { display: grid; gap: 32px; }
.research-project { position: relative; display: grid; grid-template-columns: minmax(260px, .72fr) 1fr auto; gap: clamp(24px, 4vw, 64px); align-items: center; padding: 0 0 32px; color: inherit; text-decoration: none; border-bottom: 1px solid rgb(254 254 254 / 10%); }
.research-project__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: rgb(254 254 254 / 6%); }
.research-project__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms cubic-bezier(.22, 1, .36, 1), filter 650ms ease; }
.research-project--tasksense .research-project__media { aspect-ratio: 3.47 / 1; background: #fefefe; }
.research-project--tasksense .research-project__media,
.research-project--tasksense .research-project__media img { background-color: #fefefe; }
.research-project--tasksense .research-project__media img { object-fit: contain; }
.research-project:hover .research-project__media img { transform: scale(1.035); filter: brightness(1.08); }
.research-project__details { display: grid; gap: 14px; min-width: 0; }
.research-project__badge { width: fit-content; padding: 9px 13px; border-radius: 999px; color: var(--vv-color-text-primary); background: rgb(254 254 254 / 10%); font: 500 13px / 1 var(--font-ui); }
.research-project__details strong { max-width: 760px; color: var(--vv-color-text-primary); font: 500 24px / 1.12 var(--font-ui); letter-spacing: -.035em; }
.research-project__authors,
.research-project__summary,
.research-project__keywords,
.research-project__links { color: var(--vv-color-white-50); font: 400 14px / 1.45 var(--font-cjk); }
.research-project__summary { max-width: 720px; color: var(--vv-color-white-60); }
.research-project__keywords { color: var(--vv-color-white-30); font-size: 13px; }
.research-project__links { display: flex; flex-wrap: wrap; gap: 16px; color: var(--vv-color-white-60); font-family: var(--font-ui); font-size: 12px; letter-spacing: .02em; }
.research-project__arrow { align-self: start; color: var(--vv-color-white-50); font: 400 28px / 1 var(--font-ui); transition: color 180ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1); }
.research-project:hover .research-project__arrow { color: var(--vv-color-text-primary); transform: translate(4px, -4px); }

.project-rail__viewport {
  width: 100%;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  perspective: 1200px;
}

.project-rail__motion {
  width: max-content;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.project-rail__track.work-grid {
  display: flex;
  gap: clamp(16px, 1.2vw, 24px);
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0 max(var(--page-x), 23.2vw) 28px;
  transform-style: preserve-3d;
}

.project-rail__track .project-card {
  flex: 0 0 clamp(420px, 53.6vw, 1100px);
  content-visibility: visible;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: transform 880ms cubic-bezier(.16, 1, .3, 1), opacity 760ms ease;
}
.project-rail__track .project-card__visual {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: transform 880ms cubic-bezier(.16, 1, .3, 1), opacity 760ms ease;
}
.project-card__shade {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  background: rgb(20 20 20 / 50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 880ms cubic-bezier(.16, 1, .3, 1);
}

.project-card--disabled {
  cursor: not-allowed;
}

.project-card__disabled-hint {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  color: var(--vv-color-text-primary);
  font: 500 13px / 1 var(--font-cjk);
  white-space: nowrap;
  border: 1px solid var(--vv-color-white-10);
  border-radius: 999px;
  background: rgb(20 20 20 / 78%);
  box-shadow: 0 10px 24px rgb(0 0 0 / 26%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 4px));
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.project-card__disabled-hint svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.project-card--disabled:hover .project-card__disabled-hint,
.project-card--disabled:focus-visible .project-card__disabled-hint {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Keep the secondary destinations available by URL while simplifying the
   primary top bar to the core portfolio routes. */
.site-nav .nav-links a[href*="archives"],
.site-nav .nav-links a[href*="about"],
.site-nav .nav-links a[href="#archives"] {
  display: none;
}

.project-rail__track .project-card__media {
  border-radius: 32px;
  background: #000000;
  box-shadow: 0 22px 52px rgb(0 0 0 / 24%);
  aspect-ratio: 16 / 9;
}
.project-rail__track .project-card__media::before { display: none; }
.project-rail__track .project-card__body { display: none; }
.project-rail__caption {
  position: absolute;
  right: 0;
  bottom: clamp(64px, 7vh, 80px);
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px minmax(0, min(62vw, 720px));
  gap: 18px;
  width: fit-content;
  margin: 0 auto;
  color: var(--vv-color-text-primary);
  text-align: left;
  pointer-events: none;
  opacity: var(--project-caption-progress, 0);
  transform: translateY(calc((1 - var(--project-caption-progress, 0)) * 16px));
  transition: opacity 180ms linear, transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.project-rail__caption > div { display: grid; gap: 8px; min-width: 0; }
@keyframes project-caption-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.project-rail__caption-number {
  padding-top: 4px;
  color: var(--vv-color-white-60);
  font: 500 13px / 1 var(--font-ui);
  letter-spacing: .08em;
}
.project-rail__caption-meta,
.project-rail__caption-status {
  margin: 0;
  color: var(--vv-color-white-60);
  font: 400 14px / 1.35 var(--font-cjk);
}
.project-rail__caption h2 {
  margin: 0;
  color: var(--vv-color-text-primary);
  font: 500 clamp(24px, 2.2vw, 36px) / 1.08 var(--font-ui);
  letter-spacing: -.035em;
  white-space: nowrap;
  text-wrap: nowrap;
}
.project-rail__caption-status { color: var(--vv-color-white-40); }

.motion-ready .project-showcase .project-card.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Project information stays beneath the thumbnail; never appears as hover copy. */
.project-card__glass {
  display: none;
}

/* Home: restrained VV-token dark mode, with hierarchy carried by grayscale and weight. */
body[data-page="home"] {
  color: var(--vv-color-text-primary);
  background: var(--vv-color-bg-app);
}
/* The page background lives on body so the fixed particle canvas remains visible
   through the Hero and horizontal project rail. */
body[data-page="home"] main,
body[data-page="home"] .project-showcase,
body[data-page="home"] .project-rail__viewport { background: transparent; }

.chromatic-waves {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  overflow: clip;
  opacity: 1;
  mix-blend-mode: normal;
}

.chromatic-waves::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
  background: #222222;
  /* Keep the atmospheric image visible beneath the card-area transition;
     the progress value now tops out at a restrained 50% overlay. */
  opacity: calc(var(--work-background-progress, 0) * 0.7);
  transition: opacity 120ms linear;
}

.chromatic-waves canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100%;
  z-index: 1;
}

/* Keep the fallback image as the only painted background on touch/mobile
   viewports. This is deliberately CSS-enforced as well as JS-enforced so a
   stale WebGL surface cannot survive a viewport change on iOS Safari. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .chromatic-waves canvas { display: none !important; }
}

.chromatic-waves__image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  width: auto;
  height: 100dvh;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
body[data-page="home"] #home-root > :not(.chromatic-waves):not(.site-nav) { position: relative; z-index: 1; }

body[data-page="home"] .site-nav {
  position: fixed !important;
  top: 0 !important;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  transform: none !important;
  border-bottom-color: transparent;
  background: rgb(17 17 17 / 50%);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
body[data-page="home"] #home-root { padding-top: 64px; }

body[data-page="home"] .brand,
body[data-page="home"] .nav-links a {
  color: var(--vv-color-text-secondary);
}

body[data-page="home"] .nav-links { gap: 8px; }
body[data-page="home"] .nav-links a {
  /* Keep the hero and condensed navigation on the same tab geometry. */
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  color: rgb(254 254 254 / 60%);
  font-weight: 400;
  transition: background-color 420ms cubic-bezier(.22, 1, .36, 1), color 420ms cubic-bezier(.22, 1, .36, 1), transform 420ms cubic-bezier(.22, 1, .36, 1);
}
body[data-page="home"] .nav-links a:hover { background: rgb(254 254 254 / 8%); color: rgb(254 254 254 / 90%); opacity: 1; }
body[data-page="home"] .nav-links a:active { background: rgb(254 254 254 / 5%); }
body[data-page="home"] .nav-links a[aria-current="page"] { background: rgb(254 254 254 / 5%); color: rgb(254 254 254 / 90%); font-weight: 600; }

/* Condense the global bar into a centered menu pill once work enters view. */
body[data-page="home"] .site-nav--work {
  right: auto;
  left: 50%;
  top: 12px !important;
  width: 124px;
  height: 48px;
  padding: 4px 8px;
  display: flex;
  gap: 8px;
  border: 1px solid rgb(254 254 254 / 10%);
  border-radius: 999px;
  transform: translateX(-50%) !important;
  transition: width 560ms cubic-bezier(.22, 1, .36, 1), background-color 360ms ease, box-shadow 360ms ease;
}
body[data-page="home"] .site-nav--work:hover,
body[data-page="home"] .site-nav--work:focus-within {
  width: min(520px, calc(100vw - 32px));
  box-shadow: 0 16px 42px rgb(0 0 0 / 24%);
}
body[data-page="home"] .site-nav--work .brand { flex: none; width: 40px; height: 40px; }
body[data-page="home"] .site-nav--work .brand--avatar { gap: 0; }
body[data-page="home"] .site-nav--work .brand--avatar > span:first-child { width: 40px; height: 40px; }
body[data-page="home"] .site-nav--work .brand-label { display: none; }
body[data-page="home"] .site-nav__menu-label {
  display: inline-flex;
  align-items: center;
  color: rgb(254 254 254 / 78%);
  font-size: var(--text-body);
  white-space: nowrap;
}
body[data-page="home"] .site-nav:not(.site-nav--work) .site-nav__menu-label { display: none; }
body[data-page="home"] .site-nav--work .nav-links {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 220ms ease 80ms;
}
body[data-page="home"] .site-nav--work:hover .nav-links,
body[data-page="home"] .site-nav--work:focus-within .nav-links { opacity: 1; pointer-events: auto; }
body[data-page="home"] .site-nav--work .nav-links a { flex: none; padding: 8px 12px; }
body[data-page="home"] .site-nav--work .language-switch {
  position: static;
  flex: none;
  width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: width 480ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease;
}
body[data-page="home"] .site-nav--work:hover .language-switch,
body[data-page="home"] .site-nav--work:focus-within .language-switch { width: 92px; opacity: 1; pointer-events: auto; }

/* The compact work pill never exposes the language control; language remains
   available only in the full-width hero navigation. */
body[data-page="home"] .site-nav--work .language-switch,
body[data-page="home"] .site-nav--work:hover .language-switch,
body[data-page="home"] .site-nav--work:focus-within .language-switch {
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}

body[data-page="home"] .language-switch {
  right: var(--page-x);
  border-color: rgb(254 254 254 / 10%);
  background: rgb(254 254 254 / 6%);
  box-shadow: 0 12px 30px rgb(0 0 0 / 16%);
}

body[data-page="home"] .language-switch button { color: rgb(254 254 254 / 52%); }
body[data-page="home"] .language-switch button[aria-pressed="true"] {
  color: rgb(254 254 254 / 96%);
  background: rgb(254 254 254 / 12%);
  box-shadow: none;
}
body[data-page="home"] .home-hero { background: var(--vv-color-bg-page); }
body[data-page="home"] .falling-pattern {
  background: var(--vv-color-bg-page);
  opacity: 0.22;
  filter: grayscale(1) invert(1);
}

body[data-page="home"] .home-gsap-decor {
  opacity: 0.22;
  filter: grayscale(1) contrast(0.8);
}

body[data-page="home"] .discipline {
  color: var(--vv-color-text-tertiary);
  font-weight: var(--weight-body);
}

body[data-page="home"] .home-hero h1 { color: var(--vv-color-text-tertiary); }
body[data-page="home"] .home-hero .hero-word--accent,
body[data-page="home"] .home-hero .blue,
body[data-page="home"] .home-hero .pink,
body[data-page="home"] .home-hero .red {
  color: var(--vv-color-text-primary);
  font-weight: var(--weight-medium);
}

body[data-page="home"] .hero-proof span,
body[data-page="home"] .hero-scroll { color: var(--vv-color-white-60); }

body[data-page="home"] .work-manifest { border-top-color: var(--vv-color-border-subtle); }
body[data-page="home"] .work-manifest__rows a {
  border-bottom-color: var(--vv-color-border-subtle);
}
body[data-page="home"] .work-manifest strong,
body[data-page="home"] .project-card__title { color: var(--vv-color-text-primary); }
body[data-page="home"] .work-manifest span,
body[data-page="home"] .work-manifest em,
body[data-page="home"] .project-card__number,
body[data-page="home"] .project-card__status,
body[data-page="home"] .eyebrow { color: var(--vv-color-text-tertiary); }
body[data-page="home"] .project-card__meta { color: var(--vv-color-white-60); }

body[data-page="home"] .project-card { color: var(--vv-color-text-primary); }
.project-showcase--grid .project-card__media,
.project-showcase--grid .project-card__media--contain,
.project-showcase--grid .project-card__media--prompt,
.project-showcase--grid .project-card__media--discovery,
.project-showcase--grid .project-card__media--system,
.project-showcase--grid .project-card__media--delta {
  background: #000000;
  box-shadow: 0 22px 52px rgb(0 0 0 / 24%);
  border-radius: 24px;
}

.project-showcase--grid .project-card__media::before { display: none; }
.project-showcase--grid .project-card:hover .project-card__media img {
  filter: none;
  transform: none;
}
body[data-page="home"] .project-card__body {
  min-height: 80px;
  padding-top: var(--vv-space-16);
  border-bottom: 0;
}

.archive-grid-section {
  width: min(1440px, calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: clamp(72px, 10vw, 144px) 0 96px;
}
.archive-grid__eyebrow { margin: 0 0 14px; color: var(--vv-color-white-40); font: 500 12px/1 var(--font-ui); letter-spacing: .12em; }
.archive-grid__intro h1 { margin: 0 0 56px; color: var(--vv-color-text-primary); font: 300 clamp(48px, 8vw, 112px)/.95 var(--font-ui); letter-spacing: -.06em; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 28px; }
.archive-card { display: grid; gap: 10px; color: var(--vv-color-text-primary); }
.archive-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: rgb(254 254 254 / 5%); }
.archive-card--disabled { cursor: not-allowed; }
.archive-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.archive-card:hover .archive-card__media img { transform: scale(1.035); }
.archive-card__meta { color: var(--vv-color-white-50); font: 400 14px/1.4 var(--font-cjk); }
.archive-card strong { font: 500 clamp(24px, 2.4vw, 38px)/1.08 var(--font-ui); letter-spacing: -.04em; }

/* Home introduction: a fixed personal anchor with a scrolling set of traits. */
.who-am-i {
  position: relative;
  isolation: isolate;
  width: min(1440px, calc(100% - 2 * var(--page-x)));
  min-height: calc(100svh - 64px);
  margin: 0 auto;
}

.who-am-i__single {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 64px);
  padding: clamp(56px, 9vh, 128px) 0;
}

.who-am-i__eyebrow,
.who-trait__index {
  margin: 0;
  color: var(--vv-color-text-tertiary);
  font: var(--weight-medium) var(--text-label) / var(--leading-label) var(--font-ui);
  letter-spacing: .08em;
}

.who-am-i__identity { display: none; }
.who-am-i__identity p { margin: 0; }
.who-am-i__sentence { display: block; }

.who-am-i h1 {
  position: absolute;
  top: 42.1296%;
  left: 8.8542%;
  width: 82.2917%;
  margin: 0;
  color: var(--vv-color-text-primary);
  text-align: center;
  font: 300 80px / 1 var(--font-ui);
  letter-spacing: 0;
  white-space: nowrap;
}
.who-am-i h1 strong { font-weight: 700; }
.who-am-i__prompt { font-weight: 200; opacity: .7; }
.hero-morph { position: relative; display: inline-grid; min-width: 6.2ch; vertical-align: baseline; }
.hero-morph__term { grid-area: 1 / 1; text-align: right; will-change: transform, filter, opacity; }

.who-am-i__caption { position: absolute; top: calc(100% + 24px); right: 0; display: grid; margin: 0; color: rgb(255 255 255 / 80%); font: 400 clamp(15px, 1.67vw, 32px) / 1.22 var(--font-cjk); text-align: right; }
.who-am-i__caption > span { display: grid; grid-area: 1 / 1; margin: 0; opacity: 0; white-space: nowrap; }
.who-am-i__scroll-note { position: absolute; top: calc(42.1296% + clamp(72px, 8.8542vw, 170px) + 184px); left: 50%; width: max-content; max-width: calc(100% - 2 * var(--page-x)); margin: 0; color: var(--vv-color-white-60); font: 500 clamp(14px, 1.67vw, 32px) / 1.22 var(--font-cjk); opacity: 0; transform: translateX(-50%); }

.who-am-i__sentence {
  display: flex;
  flex-wrap: wrap;
  gap: .18em .24em;
  align-items: baseline;
  margin-top: clamp(18px, 2vw, 34px);
}

.who-morph {
  position: relative;
  min-width: 0;
  margin-left: 12px;
}

.who-morph__defs { position: absolute; width: 0; height: 0; pointer-events: none; }
.who-morph__index { margin: 0 0 clamp(30px, 5vw, 72px); color: var(--vv-color-text-tertiary); font: var(--weight-medium) var(--text-label) / var(--leading-label) var(--font-ui); letter-spacing: .08em; }
.who-morph__index,
.who-morph__caption { position: relative; display: grid; }
.who-morph__index-item,
.who-morph__caption-item { grid-area: 1 / 1; opacity: 0; }
.who-morph__index-item.is-initial,
.who-morph__caption-item.is-initial,
.who-morph__term.is-initial { opacity: 1; }
.who-morph__word { position: relative; display: grid; place-items: center start; min-height: 1em; overflow: visible; }
.who-morph__term { grid-area: 1 / 1; opacity: 0; color: var(--vv-color-text-primary); font: 700 clamp(64px, 8.5vw, 148px) / .8 var(--font-hero); letter-spacing: -.065em; white-space: nowrap; will-change: transform, filter, opacity; }
.who-morph__term--next { opacity: 0; color: var(--vv-color-text-primary); }
.who-morph__caption { margin: clamp(12px, 1.5vw, 20px) 0 0; color: var(--vv-color-white-60); font: var(--weight-body) var(--text-lead) / 1.6 var(--font-cjk); }

.who-am-i__work-link {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  width: fit-content;
  margin-top: clamp(42px, 6vw, 84px);
  padding-bottom: 8px;
  color: var(--vv-color-text-primary);
  font: var(--weight-medium) var(--text-lead) / 1 var(--font-ui);
  border-bottom: 1px solid var(--vv-color-border-strong);
}

.who-am-i__work-link span { color: #ff9aaa; }

.work-manifest {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto 56px;
  padding-top: clamp(48px, 8vh, 80px);
  border-top: 1px solid var(--hairline);
}

.work-manifest__rows {
  display: grid;
}

.work-manifest__rows a {
  display: grid;
  grid-template-columns: 64px 1fr minmax(180px, 0.55fr);
  gap: 28px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-manifest__rows a:hover {
  opacity: 0.54;
  transform: translateX(8px);
}

.work-manifest span,
.project-card__number {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
}

.work-manifest strong {
  color: #000;
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.work-manifest em {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-style: normal;
  line-height: var(--leading-small);
  text-align: right;
}

.project-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  color: #000;
  /* content-visibility can leave an opaque placeholder layer on iOS when a
     transformed/animated card enters the viewport. The cards are lightweight
     thumbnails, so let the browser paint them normally. */
  content-visibility: visible;
}

.project-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--project-ratio);
  overflow: hidden;
  border-radius: 4px;
  background: #f3f3f3;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  isolation: isolate;
  transform: translateZ(0);
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 480ms ease;
  will-change: transform;
}

.project-card__media--contain img {
  display: block;
  margin-top: auto;
  object-fit: contain;
  object-position: center bottom;
  padding: 0;
}

.project-card__media--contain {
  background: transparent;
}

.project-card__media::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.52), transparent 24%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 44%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 380ms ease;
}

.project-card:hover .project-card__media img {
  transform: scale(1.032) translateY(-2px);
  filter: saturate(1.05) contrast(1.01);
}

.project-card:hover .project-card__media::before {
  opacity: 1;
}

/* Figma project thumbnails: retain the actual product UI, crop away the cover copy. */
.project-card__media--prompt { background: linear-gradient(180deg, #141414 42%, #1e3c8f 78%, #4376ff); }
.project-card__media--discovery { background: linear-gradient(145deg, #f7f3ff, #ddd1ff 52%, #7470d7); }
.project-card__media--system { background: linear-gradient(145deg, #111 0%, #343434 58%, #d6d6d6); }
.project-card__media--delta { background: linear-gradient(145deg, #eff6ff, #d2e9ff 45%, #6ca8ff); }
.project-card__media--prompt img,
.project-card__media--discovery img,
.project-card__media--system img,
.project-card__media--delta img {
  object-fit: cover;
  object-position: right center;
  transform: scale(1.52);
  transform-origin: right center;
}

.project-card:hover .project-card__media--prompt img,
.project-card:hover .project-card__media--discovery img,
.project-card:hover .project-card__media--system img,
.project-card:hover .project-card__media--delta img { transform: scale(1.56); }

/* User-supplied project covers already include the full mockup composition. */
.project-card__media--provided-thumbnail img,
.project-card:hover .project-card__media--provided-thumbnail img {
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* The supplied timeline cover is intentionally oversized so the monitor feels
   closer and its stand exits the bottom edge of the thumbnail. */
body[data-page="home"] .project-card__media--prompt.project-card__media--provided-thumbnail img,
body[data-page="home"] .project-card:hover .project-card__media--prompt.project-card__media--provided-thumbnail img {
  object-fit: contain;
  object-position: center;
  transform: none;
  transform-origin: center;
}

/* Normalize the timeline export's perceived size in the horizontal rail; its
   source canvas contains more outer surround than the neighboring cover. */
body[data-page="home"] .project-rail__track:not(.work-grid) .project-card__media--prompt.project-card__media--provided-thumbnail img,
body[data-page="home"] .project-rail__track:not(.work-grid) .project-card:hover .project-card__media--prompt.project-card__media--provided-thumbnail img {
  transform: scale(1.12);
}

/* Keep the supplied homepage mockup proportional while extending its visual
   footprint 20 px downward within the existing thumbnail crop. */
body[data-page="home"] .project-card__media--discovery.project-card__media--provided-thumbnail img,
body[data-page="home"] .project-card:hover .project-card__media--discovery.project-card__media--provided-thumbnail img {
  object-fit: contain;
  object-position: center;
  transform: none;
  transform-origin: center;
}

/* The user-provided VV UI cover shares the card's 16:9 ratio, so retain the
   full documentation composition instead of enlarging its crop. */
body[data-page="home"] .project-card__media--system-cover img,
body[data-page="home"] .project-card:hover .project-card__media--system-cover img {
  object-fit: contain;
  object-position: center;
  transform: none;
  transform-origin: center;
}

/* DA thumbnail: the Figma group export owns the monitor; only the source GIF
   is overlaid in its measured screen rectangle. */
.project-card__media--da-thumbnail {
  display: grid;
  place-items: center;
}

.da-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3530 / 2505;
}

.da-thumbnail > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: none;
}

.da-thumbnail__screen {
  position: absolute;
  /* Measured against the native 3530 × 2505 export: the video fills the
     monitor's inner screen, not the outer bezel. */
  left: 11.50%;
  /* Visual check against the monitor bezel: the frame sits slightly high
     enough to avoid a low-looking screen while keeping the full GIF visible. */
  top: 5.90%;
  width: 76.32%;
  height: 57.76%;
  overflow: hidden;
  border-radius: 0;
}

.da-thumbnail__screen > .da-thumbnail__motion {
  width: 100%;
  height: 100%;
  max-width: none;
  /* The MP4 is already framed to the monitor screen.  `cover` enlarged it
     and cropped the frame at the edges (most noticeably along the top), so
     map the complete source frame onto the measured screen bounds instead. */
  object-fit: fill;
  object-position: center;
  display: block;
  transform: none;
}

.project-card:hover .da-thumbnail > img { transform: none; }

.project-showcase--grid .project-card#delta .project-card__media--delta {
  background: #000000;
}

.project-card__glass {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 18px 20px;
  color: rgba(0, 0, 0, 0.86);
  font-family: var(--font-ui);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.28);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.28);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-card__glass-kicker {
  color: rgba(0, 0, 0, 0.58);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.project-card__glass-text {
  color: rgba(0, 0, 0, 0.88);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-small);
}

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

.project-card__body {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 4px 20px;
  min-height: 88px;
  padding-top: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.project-card__meta,
.project-card__status {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.project-card__meta {
  grid-column: 2 / -1;
}

.project-card__number {
  grid-row: 1 / 3;
  padding-top: 2px;
}

.project-card__title {
  display: block;
  grid-column: 2;
  max-width: 240px;
  color: #000;
  font-size: min(var(--text-subsection), 18px);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.project-card__status {
  justify-self: end;
  padding-top: 8px;
  white-space: nowrap;
}

.about-page {
  padding-bottom: 96px;
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: clamp(36px, 7vw, 96px);
  align-items: start;
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: 80px 0 108px;
}

.about-hero h1 {
  max-width: 980px;
  margin: 0;
  color: #000;
  font-size: clamp(72px, 12vw, 168px);
  font-weight: var(--weight-display);
  line-height: 0.86;
  letter-spacing: 0;
}

.about-role {
  margin: 28px 0 0;
  color: #000;
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.about-hero h2 {
  max-width: 980px;
  margin: 48px 0 0;
  color: var(--hero-gray);
  font-size: var(--text-title);
  font-weight: var(--weight-display);
  line-height: var(--leading-title);
  letter-spacing: 0;
  text-wrap: balance;
}

.about-intro {
  max-width: 640px;
  margin: 42px 0 0 auto;
  color: var(--body);
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: var(--leading-lead);
  text-wrap: pretty;
}

.about-portrait {
  position: sticky;
  top: 96px;
  margin: 12px 0 0;
}

.about-portrait img,
.about-portrait__placeholder {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.about-portrait img {
  object-fit: cover;
}

.about-portrait__placeholder {
  place-items: center;
  color: rgba(0, 0, 0, 0.66);
  font-family: var(--font-ui);
  font-size: clamp(42px, 8vw, 76px);
  font-weight: var(--weight-semibold);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.04)),
    #ecefea;
}

.about-ledger,
.about-section {
  width: min(var(--content), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
}

.about-ledger {
  display: grid;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.ledger-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ledger-row:last-child {
  border-bottom: 0;
}

.ledger-row p,
.experience-item span,
.principle-grid span {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.ledger-row h2,
.about-section h2 {
  margin: 0;
  color: #000;
  font-family: var(--font-sans);
  font-size: var(--text-section);
  font-weight: var(--weight-body);
  line-height: var(--leading-section);
}

.about-section {
  padding-top: 132px;
}

.about-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 100px;
}

.experience-list {
  display: grid;
  gap: 0;
}

.experience-item {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 34px;
  padding: 0 0 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.experience-item:last-child {
  margin-bottom: 0;
}

.experience-item h3,
.principle-grid h3 {
  margin: 0;
  color: #000;
  font-family: var(--font-sans);
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.experience-item p,
.principle-grid p {
  margin: 8px 0 0;
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.principle-band {
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.principle-grid article {
  min-height: 260px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.principle-grid h3 {
  margin-top: 54px;
}

.about-contact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  padding-top: 132px;
}

.about-contact .eyebrow {
  grid-column: 1 / -1;
}

.about-contact h2 {
  max-width: 560px;
  color: var(--hero-gray);
  font-size: var(--text-title);
  font-weight: var(--weight-display);
  line-height: var(--leading-title);
}

.about-contact a {
  color: #000;
  font-family: var(--font-sans);
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
  border-bottom: 1px solid currentColor;
}

.contact-links {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
  transition-delay: var(--delay, 0ms);
}

.motion-ready .reveal.is-visible,
.reveal {
  opacity: 1;
  transform: translateY(0);
}

.case-page {
  font-family: var(--font-sans);
}

.case-hero {
  display: grid;
  grid-template-columns: 1fr 180px;
  column-gap: 132px;
  min-height: 262px;
  padding: 48px var(--page-x) 56px;
  background: #fff;
}

.case-title h1 {
  margin: 0;
  color: #000;
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: 0;
}

.case-title p {
  margin: 25px 0 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--leading-small);
}

.case-title span {
  display: inline-flex;
  margin-top: 16px;
  padding: 4px 8px;
  color: var(--muted);
  background: #f7f7f7;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
}

.case-meta {
  display: grid;
  gap: 16px;
  align-content: start;
  padding-top: 8px;
}

.case-meta p {
  margin: 0 0 2px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
}

.case-meta strong {
  display: block;
  color: #000;
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-small);
}

.full-bleed-media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #e9e9e9;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.full-bleed-media img {
  width: 100%;
  height: 757px;
  object-fit: cover;
}

.case-context {
  width: min(var(--content), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: 96px 0 16px;
}

.case-context h2 {
  max-width: 900px;
  margin: 0;
  color: #000;
  font-size: var(--text-section);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.case-context__grid,
.case-note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.case-context__grid article,
.case-note-grid article {
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.case-context__grid span,
.case-note-grid span {
  display: block;
  margin-bottom: 10px;
  color: #000;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.case-context__grid p,
.case-note-grid p {
  margin: 0;
  color: var(--body);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.chapter-heading {
  width: min(1066px, calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: 154px 0 84px;
  text-align: center;
}

.chapter-heading h2 {
  margin: 0;
  color: var(--section-fade);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
}

.chapter-heading h2 span {
  font-size: var(--text-lead);
  line-height: var(--leading-label);
}

.chapter-heading p {
  margin: 10px 0 0;
  color: var(--purple-fade);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-small);
}

.split-brief,
.case-section,
.feature-section,
.statement {
  width: min(var(--content), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
}

.split-brief {
  display: grid;
  grid-template-columns: 471px 1fr;
  gap: 10px;
  align-items: start;
  padding-bottom: 40px;
}

.brief-copy article {
  padding: 0 0 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.brief-copy article:last-child {
  border-bottom: 0;
}

.split-brief figure {
  margin: 163px 0 0;
  overflow: hidden;
  border-radius: 10px;
}

.brief-copy {
  display: grid;
  gap: 28px;
}

.brief-copy article h3,
.section-copy h3,
.statement h3 {
  margin: 0;
  color: #000;
  font-family: var(--font-sans);
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.brief-copy article p,
.section-copy p,
.callout {
  margin: 10px 0 0;
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

.case-section,
.feature-section {
  padding-top: 40px;
}

.section-copy {
  margin-bottom: 40px;
}

.section-copy .case-note-grid {
  margin-top: 28px;
}

.eyebrow {
  margin: 0 0 4px !important;
  color: var(--section-fade) !important;
  font-family: var(--font-label) !important;
  font-size: var(--text-label) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--leading-label) !important;
  text-transform: uppercase;
}

.media-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 445px;
  margin: 0;
  padding: 40px;
  overflow: hidden;
  border-radius: 40px;
  background: var(--panel);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.04),
    0 24px 80px rgba(0, 0, 0, 0.035);
}

.media-panel.compact {
  min-height: 436px;
}

.media-panel.short {
  min-height: 306px;
}

.media-panel.tall {
  min-height: 640px;
}

.media-panel img {
  width: 100%;
  height: auto;
}

.statement {
  width: min(1066px, calc(100% - 2 * var(--page-x)));
  padding: 88px 80px;
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.statement h3 {
  max-width: 906px;
  font-size: var(--text-section);
  line-height: var(--leading-section);
  text-wrap: balance;
}

.callout {
  max-width: 906px;
  margin: 40px auto 0;
  padding-left: 34px;
  border-left: 2px solid rgba(91, 95, 199, 0.3);
}

.feature-section {
  padding-top: 40px;
}

.final-section {
  padding-bottom: 40px;
}

.lesson-section {
  padding-top: 80px;
  padding-bottom: 100px;
  border-top: 1px solid var(--hairline);
}

.two-col-title {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.two-col-title .eyebrow {
  grid-column: 1 / -1;
}

.dual-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.media-panel.phone {
  min-height: 705px;
  padding: 40px 24px;
}

.play-page {
  padding-bottom: 112px;
}

.play-hero {
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: 80px 0 56px;
}

.play-hero h1 {
  max-width: 900px;
  margin: 0;
  color: var(--hero-gray);
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: 0;
  text-wrap: balance;
}

.experiment-grid {
  display: grid;
  gap: 88px;
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
}

.experiment-card {
  display: grid;
  gap: 22px;
  color: #000;
}

.experiment-card__media {
  position: relative;
  min-height: clamp(560px, 68vw, 760px);
  overflow: hidden;
  border-radius: 4px;
  background: #f4eee4;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
    0 24px 80px rgba(0, 0, 0, 0.05);
  isolation: isolate;
}

.experiment-card__media--ascii {
  min-height: clamp(500px, 56vw, 640px);
  background: #fff;
}

.experiment-card__media--ascii::after {
  background:
    radial-gradient(circle at 72% 18%, rgba(15, 23, 42, 0.035), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(15, 23, 42, 0.035));
  mix-blend-mode: multiply;
}

.seed-bloom,
.seed-bloom canvas,
.ascii-whale,
.ascii-whale canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.seed-bloom,
.ascii-whale {
  position: absolute;
  inset: 0;
}

.experiment-card__media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 22% 14%, rgba(255, 244, 210, 0.42), transparent 26%),
    linear-gradient(180deg, transparent 50%, rgba(42, 28, 18, 0.18));
  mix-blend-mode: soft-light;
}

.experiment-card__glass {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-width: 520px;
  padding: 20px 22px;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.88);
  font-family: var(--font-ui);
  border: 0;
  border-radius: 18px;
  background: transparent;
  isolation: isolate;
}

.liquid-glass-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.experiment-card__glass::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)),
    rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(12px) url("#liquid-glass-card") saturate(1.45);
  -webkit-backdrop-filter: blur(12px) saturate(1.45);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 2px 3px 0 -2px rgba(255, 255, 255, 0.92),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.72),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.48),
    inset -0.3px -1px 4px rgba(0, 0, 0, 0.12),
    inset -1.5px 2.5px 0 -2px rgba(0, 0, 0, 0.18),
    inset 0 3px 4px -2px rgba(0, 0, 0, 0.16),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.08),
    0 1px 5px rgba(0, 0, 0, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.1);
  transition:
    background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
    transform 400ms cubic-bezier(1, 0, 0.4, 1);
}

.experiment-card__glass::after {
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.72), transparent 28%),
    radial-gradient(circle at 86% 96%, rgba(0, 0, 0, 0.12), transparent 34%);
  mix-blend-mode: soft-light;
}

.experiment-card__glass > * {
  position: relative;
  z-index: 1;
}

.experiment-card__glass--light {
  color: rgba(0, 0, 0, 0.9);
}

.experiment-card__glass--light::before {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56)),
    rgba(255, 255, 255, 0.5);
}

.experiment-card__glass span {
  color: rgba(0, 0, 0, 0.54);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.experiment-card__glass strong {
  font-size: var(--text-section);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.experiment-card__glass p {
  max-width: 440px;
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.experiment-card__body {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 4px 20px;
  align-items: start;
  min-height: 88px;
  padding-top: 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.experiment-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.experiment-card__body h2 {
  margin: 4px 0 0;
  color: #000;
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.experiment-reset {
  min-height: 38px;
  padding: 0 16px;
  color: rgba(0, 0, 0, 0.76);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 180ms ease;
}

.experiment-reset:hover {
  border-color: rgba(0, 0, 0, 0.24);
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

@keyframes ethereal-drift {
  0% {
    transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(0deg);
  }
  50% {
    transform: translate3d(3%, 2%, 0) scale(1.08) rotate(1.5deg);
  }
  100% {
    transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(0deg);
  }
}

@media (max-width: 760px) {
  /* Mobile uses one calm card presentation; the desktop mode switch is not
     useful at this width and should never compete with the hero or cards. */
  .project-showcase__toolbar { display: none !important; }

  .project-showcase {
    width: min(var(--wide), calc(100% - 2 * var(--page-x)));
    margin: 0 auto 112px;
    padding-top: 64px;
    overflow: visible;
  }

  .project-rail__viewport {
    height: auto;
    overflow: visible;
    display: block;
    perspective: none;
  }

  .project-rail__motion { width: 100%; }

  .project-rail__track.work-grid {
    display: grid;
    width: 100%;
    gap: 24px;
    margin: 0;
    padding: 0;
  }

  .project-rail__track .project-card {
    flex-basis: auto;
    transform: none !important;
    opacity: 1 !important;
  }

  .project-rail__track .project-card__body { display: grid; }
  .project-rail__caption { display: none; }

  .project-showcase--grid {
    width: min(var(--wide), calc(100% - 2 * var(--page-x)));
    margin: 0 auto 112px;
  }

  .project-showcase--grid .project-rail__track.work-grid {
    padding-top: 72px;
  }

  .project-showcase--grid .project-grid-row,
  .project-showcase--grid .project-grid-row--2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .project-showcase--grid .project-rail__track .project-card {
    grid-column: auto;
    height: 420px;
    padding: 16px;
    border-radius: 16px;
  }

  .project-rail__track .project-card__media,
  .project-showcase--grid .project-rail__track .project-card__media {
    border-radius: 16px;
  }

  .project-showcase--grid .project-rail__track .project-card__body {
    grid-template-rows: repeat(3, auto);
    padding: 18px 0 0;
  }

  .project-card__title {
    font-size: 18px;
    line-height: 1.35;
  }

  .research-projects { margin-bottom: 96px; padding-top: 24px; }
  .research-projects__nav { margin-bottom: 56px; }
  .research-projects__intro { margin-bottom: 36px; }
  .research-project { grid-template-columns: 1fr; gap: 18px; padding-bottom: 24px; }
  .research-project__media { aspect-ratio: 16 / 10; }
  .research-project__details { gap: 10px; }
  .research-project__details strong { font-size: 24px; }
  .research-project__arrow { position: absolute; top: 12px; right: 4px; }
}

@media (max-width: 1020px) {
  .who-am-i h1 { white-space: normal; }
  .hero-morph { display: block; margin-top: 16px; }
}

@media (max-width: 900px) {
  :root {
    --page-x: 24px;
    --text-display: clamp(40px, 10vw, 58px);
    --text-display-home: clamp(38px, 10vw, 58px);
    --text-title: clamp(38px, 9vw, 52px);
    --text-lead: 19px;
  }

  .site-nav {
    grid-template-columns: 1fr auto 1fr;
    height: 64px;
    min-height: 64px;
  }

  .nav-links {
    gap: 8px;
    justify-content: flex-start;
  }

  .nav-links a {
    font-size: var(--text-small);
  }

  .home-hero {
    min-height: calc(100svh - 64px);
    padding-block: 56px;
  }

  .home-hero h1 {
    font-size: clamp(36px, 9vw, 62px);
  }

  .home-gsap-decor--1 {
    left: clamp(230px, 52vw, 430px);
    top: -2em;
    width: clamp(104px, 18vw, 146px);
  }

  .home-gsap-decor--3 {
    left: clamp(360px, 68vw, 560px);
    top: 0.24em;
    width: clamp(150px, 28vw, 220px);
  }

  .falling-pattern {
    display: none;
  }

  .discipline {
    margin-bottom: 40px;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

.project-showcase {
    width: min(var(--wide), calc(100% - 2 * var(--page-x)));
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
  }

  .project-rail__track.work-grid {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .project-rail__viewport {
    height: auto;
    overflow: visible;
    display: block;
  }

  .project-rail__motion { width: 100%; }

  .project-rail__track .project-card {
    flex-basis: auto;
  }

  .work-manifest {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .work-manifest__rows a {
    grid-template-columns: 44px 1fr;
    gap: 18px;
  }

  .work-manifest em {
    grid-column: 2;
    text-align: left;
  }

  .project-card {
    min-height: auto;
  }

  .play-hero {
    padding-top: 64px;
  }

  .experiment-card__media {
    min-height: 600px;
  }

  .experiment-card__media--ascii {
    min-height: 520px;
  }

  .case-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .language-switch {
    grid-column: 2;
  }

  .about-hero {
    grid-template-columns: 1fr;
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .about-portrait {
    position: relative;
    top: auto;
    width: min(100%, 320px);
    order: -1;
  }

  .about-intro {
    max-width: none;
    margin-top: 32px;
  }

  .ledger-row,
  .about-split,
  .about-contact,
  .case-context__grid,
  .case-note-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-section {
    padding-top: 92px;
  }

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

  .principle-grid article {
    min-height: auto;
  }

  .principle-grid h3 {
    margin-top: 34px;
  }

  .full-bleed-media img {
    height: auto;
    min-height: 360px;
  }

  .chapter-heading {
    padding: 96px 0 56px;
  }

  .split-brief {
    grid-template-columns: 1fr;
  }

  .split-brief figure {
    margin-top: 0;
  }

  .media-panel {
    min-height: auto !important;
    padding: 24px;
    border-radius: 28px;
  }

  .statement {
    width: min(var(--content), calc(100% - 2 * var(--page-x)));
    padding: 64px 0;
  }

  .dual-panels,
  .two-col-title {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  :root {
    --text-display: clamp(34px, 12vw, 46px);
    --text-display-home: clamp(34px, 12vw, 46px);
    --text-title: clamp(34px, 11vw, 44px);
    --text-section: 24px;
    --text-lead: 18px;
  }

  .site-nav {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 6px;
    padding-block: 12px;
  }

  .brand {
    height: auto;
  }

  .language-switch {
    grid-column: 1;
    justify-self: start;
    order: 3;
  }

  .home-hero {
    min-height: calc(100svh - 92px);
  }

  .home-hero h1 {
    font-size: clamp(31px, 9.5vw, 44px);
  }

  .home-gsap-shapes {
    opacity: 0.82;
  }

  .home-gsap-decor--1 {
    left: 56vw;
    top: -1.9em;
    width: 92px;
  }

  .home-gsap-decor--3 {
    left: 70vw;
    top: 0.8em;
    width: 128px;
  }

  .hero-proof {
    margin-top: 28px;
    padding-bottom: 48px;
  }

  .experience-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-contact a {
    font-size: var(--text-lead);
  }

  .contact-links {
    justify-items: start;
  }

  .project-card__body {
    grid-template-columns: 38px 1fr;
    min-height: auto;
  }

  .project-card__status {
    grid-column: 2;
    justify-self: start;
    padding: 0 0 18px;
  }

  .project-card__glass {
    opacity: 1;
    transform: none;
  }

  .experiment-card__media {
    min-height: 560px;
  }

  .experiment-card__media--ascii {
    min-height: 480px;
  }

  .experiment-card__glass {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 16px;
  }

  .experiment-card__body {
    grid-template-columns: 38px 1fr;
    min-height: auto;
  }

  .experiment-reset {
    grid-column: 2;
    justify-self: start;
    margin-bottom: 18px;
  }
}

/* Compact mobile top bar: keep identity and primary routes on one line. */
@media (max-width: 760px) {
  /* Mobile type ramp: keep supporting text readable (12px floor) while
     preserving a clear display / title / body hierarchy. */
  :root {
    --page-x: 16px;
    --text-display: clamp(32px, 10vw, 46px);
    --text-display-home: clamp(32px, 10vw, 46px);
    --text-title: 24px;
    --text-section: 22px;
    --text-subsection: 20px;
    --text-lead: 18px;
    --text-body: 14px;
    --text-small: 12px;
    --text-label: 12px;
    --text-caption: 12px;
  }

  .site-nav {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0;
    padding-block: 8px;
  }
  .site-nav .nav-links {
    left: auto;
    right: 16px;
    transform: translateY(-50%);
    justify-content: flex-end;
    gap: 4px;
  }
  .site-nav .nav-links a { padding-inline: 10px; }
  .site-nav .language-switch { display: none; }

  .who-am-i h1 {
    text-align: left;
  }
  .who-am-i .hero-morph {
    display: grid;
    width: 100%;
    min-width: 0;
    text-align: left;
    justify-items: start;
  }
  .who-am-i .hero-morph__term {
    justify-self: start;
    text-align: left;
    transform-origin: left center;
  }
  .who-am-i .who-am-i__caption {
    right: auto;
    left: 0;
    text-align: left;
  }
  .who-am-i .who-am-i__caption > span {
    text-align: left;
  }

  .who-am-i h1,
  .who-morph__term {
    font-size: clamp(42px, 14vw, 64px);
  }

  .who-am-i__caption {
    font-size: clamp(12px, 3.8vw, 16px);
  }

  .who-am-i__scroll-note {
    font-size: clamp(12px, 3.8vw, 16px);
  }

  .project-card__title {
    font-size: 18px;
    line-height: 1.35;
  }
}

@media (max-width: 760px) {
  .who-am-i {
    display: block;
    width: min(100%, calc(100% - 2 * var(--page-x)));
    min-height: 0;
  }

  .who-am-i__single {
    position: relative;
    top: auto;
    min-height: 74svh;
    padding: 72px 0 56px;
    border-right: 0;
    border-bottom: 1px solid var(--vv-color-border-subtle);
  }

  .who-am-i h1 { font-size: clamp(74px, 24vw, 120px); }

  .who-am-i__sentence { gap: .2em; }
  .who-morph { margin-left: 0; }

  .who-am-i h1,
  .who-morph__term { font-size: clamp(42px, 14vw, 64px); }
  .who-am-i h1 { white-space: normal; line-height: .96; }
  .hero-morph { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .home-hero h1 {
    width: min(100%, 980px);
    white-space: normal;
    text-wrap: balance;
  }

  .home-gsap-shapes {
    display: none;
  }

  .project-card__media img,
  .project-card__glass,
  .project-card__media::before,
  .falling-pattern::before,
  .falling-pattern::after {
    animation: none !important;
    transition: none;
  }
}

/* Prompt timeline case study — rebuilt as HTML rather than a flattened Figma export. */
.case-page { background: #f6f6f4; color: #111; }
.case-page .site-nav { z-index: 10; }
.site-nav--inverse { color: #fff; }
.site-nav--inverse .brand, .site-nav--inverse .nav-links a { color: inherit; }
.case-nav-back { color: inherit; font: 500 var(--text-label)/1 var(--font-ui); }
.case-shell { width: min(1280px, calc(100% - 2 * var(--page-x))); margin-inline: auto; }
.timeline-hero { position: relative; overflow: hidden; padding: 160px 0 88px; color: #fff; background: linear-gradient(180deg, #121212 39%, #182858 73%, #4376ff 100%); }
.timeline-hero::after { position: absolute; inset: auto -10% -30% 30%; height: 65%; content: ""; background: radial-gradient(ellipse, rgba(27, 86, 255, .54), transparent 68%); filter: blur(24px); pointer-events: none; }
.timeline-hero__intro { position: relative; z-index: 1; max-width: 1280px; }
.case-kicker { margin: 0 0 22px; color: rgba(255,255,255,.55); font: 600 11px/1.2 var(--font-ui); letter-spacing: .13em; }
.timeline-hero h1 { max-width: 760px; margin: 0; font-family: var(--font-display); font-size: clamp(48px, 6.2vw, 88px); font-weight: 500; letter-spacing: -.065em; line-height: .98; background: linear-gradient(105deg, #3c89ff 4%, #00fff8 78%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.timeline-hero__lede { max-width: 470px; margin: 28px 0 54px; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.7; }
.timeline-product { position: relative; z-index: 1; display: grid; grid-template-columns: 68px 280px minmax(400px, 1fr) 230px; grid-template-rows: 48px 1fr 180px; height: min(660px, 52vw); min-height: 480px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: #161616; box-shadow: 0 50px 90px rgba(0,0,0,.42); transform: perspective(1800px) rotateX(3deg); transform-origin: center top; }
.product-topbar { grid-column: 1/-1; display: flex; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid #292929; color: rgba(255,255,255,.65); font: 11px var(--font-ui); }
.timeline-product--image { display: block; height: auto; min-height: 0; margin: 0; aspect-ratio: 1012 / 925; background: transparent; }.timeline-product--image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-topbar strong { color: #fff; font-size: 13px; letter-spacing: .08em; }.product-topbar__state { margin-left: auto; padding: 6px 12px; border-radius: 100px; background: #2b2b2b; color: #fff; }.product-topbar i { width: 22px; height: 22px; border-radius: 50%; background: #303030; }
.product-tools { grid-row: 2/-1; display: grid; align-content: start; justify-items: center; gap: 19px; padding-top: 22px; border-right: 1px solid #292929; color: #777; font: 16px/1 var(--font-ui); }.product-tools .is-active { color: #ff9a1e; }
.product-prompt { padding: 22px 16px; border-right: 1px solid #292929; color: #aaa; font: 11px/1.3 var(--font-ui); }.product-prompt p { margin: 0 0 24px; color: #fff; font-weight: 600; }.product-prompt label { display: block; margin-bottom: 8px; }.product-input, .product-select { box-sizing: border-box; width: 100%; padding: 11px; border: 1px solid #373737; border-radius: 6px; background: #202020; color: #bdbdbd; line-height: 1.55; }.product-select { margin-top: 12px; color: #777; }.product-select b { float: right; color: #ddd; }.product-prompt button { width: 100%; margin-top: 16px; padding: 11px; border: 0; border-radius: 7px; background: #f69a22; color: #171717; font: 600 11px var(--font-ui); }
.product-stage { position: relative; overflow: hidden; min-width: 0; background: #101010; }.stage-grid { position: absolute; inset: 10% -15% -20%; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 25px 25px; transform: perspective(380px) rotateX(61deg); transform-origin: top; }.product-stage img { position: absolute; z-index: 1; right: 19%; bottom: -15%; width: 43%; mix-blend-mode: lighten; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }.stage-label, .stage-controls { position: absolute; z-index: 2; font: 10px var(--font-ui); color: rgba(255,255,255,.64); }.stage-label { top: 16px; right: 16px; }.stage-controls { bottom: 16px; left: 16px; padding: 7px 10px; border-radius: 6px; background: rgba(18,18,18,.8); }.stage-controls b { color: #fff; }
.product-assets { padding: 16px 12px; border-left: 1px solid #292929; color: #fff; background: #181818; }.assets-title { display: flex; justify-content: space-between; padding: 3px 4px 16px; border-bottom: 1px solid #292929; font: 600 12px var(--font-ui); }.assets-title span { color: #777; }.asset-row { display: flex; gap: 9px; align-items: center; margin-top: 13px; padding: 8px; border: 1px solid transparent; border-radius: 7px; }.asset-row:first-of-type { border-color: rgba(255,160,51,.5); background: #202020; }.asset-row > div { width: 42px; height: 42px; border-radius: 4px; background: linear-gradient(135deg, #6c5441, #2c2421); }.asset-row:nth-of-type(3) > div { background: linear-gradient(135deg, #6e81a5, #273041); }.asset-row p { margin: 0; font: 10px/1.5 var(--font-ui); }.asset-row small { color: #777; }
.product-timeline { grid-column: 2 / 4; position: relative; overflow: hidden; padding: 13px 18px; border-top: 1px solid #292929; background: #171717; }.timeline-ruler { display: flex; justify-content: space-between; color: #777; font: 9px var(--font-ui); }.timeline-track { position: relative; display: flex; gap: 7px; height: 49px; margin-top: 11px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }.timeline-track--sub { height: 34px; margin-top: 2px; }.playhead { position: absolute; z-index: 3; top: -2px; bottom: -7px; left: 36%; width: 1px; background: #ff9a1e; }.clip { display: block; box-sizing: border-box; min-width: 18%; padding: 7px; border-radius: 4px; color: rgba(255,255,255,.76); font: 9px var(--font-ui); }.clip--blue { background: #365b68; }.clip--green { background: #445c4c; }.clip--purple { background: #4e445f; }.clip--orange { background: #624633; }.clip--muted { min-width: 34%; background: #2c2c2c; }.clip.is-short { min-width: 22%; }
.case-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 115px 0; }.case-summary span { color: #777; font: 600 11px var(--font-ui); letter-spacing: .1em; }.case-summary h2 { margin: 18px 0; font-size: 21px; font-weight: 500; }.case-summary p { max-width: 310px; margin: 0; color: #6e6e6e; font-size: 15px; line-height: 1.65; }
.case-section { padding: 130px 0; }.case-section--split { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; border-top: 1px solid #dcdcd8; }.case-section--split .case-kicker, .timeline-workflow .case-kicker { color: #777; }.case-section h2 { max-width: 760px; margin: 0; font-size: clamp(38px, 5vw, 66px); font-weight: 400; letter-spacing: -.055em; line-height: 1.02; }.case-copy { max-width: 560px; margin: 35px 0 0; color: #626262; font-size: 18px; line-height: 1.8; }
.timeline-anatomy { color: #fff; background: #151515; }.timeline-anatomy .case-kicker { color: rgba(255,255,255,.48); }.anatomy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 70px; background: #353535; }.anatomy-grid article { min-height: 250px; padding: 30px; background: #151515; }.anatomy-grid b { color: #4e83ff; font: 500 13px var(--font-ui); }.anatomy-grid h3 { margin: 65px 0 12px; font-size: 24px; font-weight: 400; }.anatomy-grid p { max-width: 230px; margin: 0; color: #aaa; font-size: 14px; line-height: 1.6; }
.timeline-workflow { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; }.workflow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 68px; }.workflow-steps article { min-height: 150px; padding: 22px; border-top: 1px solid #222; }.workflow-steps span { color: #777; font: 11px var(--font-ui); }.workflow-steps h3 { margin: 30px 0 8px; font-size: 20px; font-weight: 500; }.workflow-steps p { margin: 0; color: #777; font-size: 14px; line-height: 1.55; }.workflow-steps i { color: #777; font-style: normal; }.case-outro { padding: 115px 0; color: #fff; background: #121212; }.case-outro a { color: #fff; font-size: clamp(44px, 7vw, 94px); font-weight: 400; letter-spacing: -.06em; }.case-outro a span { color: #4376ff; }
@media (max-width: 760px) { .case-nav-back { display: none; }.timeline-hero { padding-top: 120px; }.timeline-product { grid-template-columns: 42px 1fr; grid-template-rows: 42px 300px 172px; min-height: 0; height: auto; transform: none; }.product-topbar { padding: 0 10px; }.product-topbar span:not(.product-topbar__state), .product-topbar i { display: none; }.product-prompt, .product-assets { display: none; }.product-stage { grid-column: 2; }.product-timeline { grid-column: 2; padding: 10px; }.timeline-track { gap: 3px; }.clip { padding: 5px 3px; font-size: 7px; }.case-summary, .case-section--split, .timeline-workflow { grid-template-columns: 1fr; gap: 35px; padding-block: 76px; }.case-summary { gap: 42px; }.anatomy-grid { grid-template-columns: 1fr; margin-top: 42px; }.anatomy-grid article { min-height: 180px; }.anatomy-grid h3 { margin-top: 32px; }.workflow-steps { grid-template-columns: 1fr; margin-top: 42px; }.workflow-steps i { transform: rotate(90deg); justify-self: center; } }

/* Final portfolio/card overrides. */
.project-card__glass { display: none; }
.project-card__status { display: none; }
.project-card__body { grid-template-columns: 44px 1fr; }
.case-page--timeline .site-nav { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: rgba(255,255,255,.12); }
.timeline-hero h1 { max-width: 1040px; }
.product-stage img { mix-blend-mode: multiply; filter: contrast(1.08) brightness(1.15) drop-shadow(0 20px 30px rgba(0,0,0,.5)); }

/* Figma artboard renderer: every section preserves the original 1920×1080 composition. */
.figma-case-page { margin: 0; background: #141414; font-family: var(--font-ui); }.figma-case { overflow: hidden; }.figma-artboard { position: relative; container-type: inline-size; width: min(1920px, 100vw); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; }.figma-stage { position: absolute; inset: 0; }.figma-stage h1, .figma-stage h2, .figma-stage h3, .figma-stage h4, .figma-stage p { margin: 0; }.figma-stage--cover { color: #fff; background: linear-gradient(180deg, #141414 51.759%, #1e3c8f 81.25%, #4376ff 100%); }.cover-ui { position: absolute; left: 37.9%; top: -1.57%; width: 82.81%; max-width: none; }.cover-title { position: absolute; left: 5%; top: 40.93%; width: 34.12%; }.cover-title h1 { font-size: 3.333cqw; font-weight: 600; line-height: 1.28; letter-spacing: -.05em; background: linear-gradient(100deg, #4376ff 13%, #00fffb 85%); -webkit-background-clip: text; color: transparent; }.cover-title p { margin: 1.8cqw 0 0 .22cqw; color: rgba(255,255,255,.5); font-size: .833cqw; }.cover-summary { position: absolute; top: 65.37%; width: 18.75%; }.cover-summary b { color: rgba(255,255,255,.38); font-size: .573cqw; letter-spacing: .08em; }.cover-summary h2 { margin-top: 1.04cqw; font-size: .938cqw; font-weight: 500; }.cover-summary p { margin-top: 1.25cqw; color: rgba(255,255,255,.62); font-size: .833cqw; line-height: 1.45; }.cover-summary--context { left: 5%; }.cover-summary--approach { left: 26.15%; }.cover-summary--outcome { left: 47.29%; }.cover-rule { position: absolute; top: 81.67%; width: 1px; height: 15.37%; background: rgba(255,255,255,.18); }.cover-rule--1 { left: 19.17%; }.cover-rule--2 { left: 40.31%; }.cover-rule--3 { left: 61.46%; }
.figma-stage--problem, .figma-stage--research { color: #fff; background: #141414; }.slide-kicker { position: absolute; top: 8.89%; left: 5%; color: #455dae; font-size: .729cqw; font-weight: 600; letter-spacing: .04em; }.slide-index { position: absolute; top: 8.89%; right: 5%; color: rgba(255,255,255,.45); font-size: .729cqw; font-weight: 500; }.slide-number { position: absolute; top: 1.67%; right: 4.17%; color: rgba(255,255,255,.04); font-size: 8.854cqw; font-weight: 700; line-height: 1; }.figma-stage--problem h2, .figma-stage--research h2 { position: absolute; top: 12.96%; left: 5%; color: #fff; font-size: 2.5cqw; font-weight: 500; letter-spacing: -.035em; }.slide-subtitle { position: absolute; top: 19.63%; left: 5.21%; color: rgba(255,255,255,.42); font-size: .833cqw; }.problem-ui { position: absolute; left: 28.13%; top: 31.67%; width: 51.56%; height: 52.5%; overflow: hidden; }.problem-ui img { width: 100%; height: 110.28%; object-fit: cover; object-position: top; transform: translateY(-10.27%); }.problem-line { position: absolute; left: 42.97%; width: 35.99%; height: 1px; background: rgba(255,255,255,.25); }.problem-line--1 { top: 49.91%; }.problem-line--2 { top: 69.63%; }.problem-callout { position: absolute; left: 81.35%; width: 11.88%; color: #fff; font: 400 .938cqw/1.56 "Noto Sans SC", sans-serif; }.problem-callout--1 { top: 48.7%; }.problem-callout--2 { top: 67.96%; }.problem-pills { position: absolute; top: 32.96%; left: 5.21%; display: grid; gap: .625cqw; justify-items: start; }.problem-pills p { margin-bottom: .15cqw; color: rgba(255,255,255,.6); font-size: 1.042cqw; }.problem-pills span { position: relative; display: block; box-sizing:border-box; height:2.917cqw; padding:.77cqw 1.25cqw; border-radius:999px; background:#314fa1; color:#fff; font-size:1.042cqw; line-height:1; }.problem-pills span img { position:absolute; left:3.82%; top:85.55%; width:.833cqw; height:.686cqw; transform:rotate(30deg); transform-origin:center; }.problem-pills span:nth-of-type(2) { margin-left: 1.5cqw; }.problem-pills span:nth-of-type(3) { margin-left: 3.4cqw; }.problem-pills span:nth-of-type(4) { margin-left: 1.15cqw; }.problem-pills span:nth-of-type(5) { margin-left: 2.2cqw; }.problem-pills span:nth-of-type(6) { margin-left: .8cqw; }
.figma-stage--research .slide-kicker { top: 7.59%; color: #4376ff; }.figma-stage--research .slide-index { top: 7.59%; }.figma-stage--research .slide-number { top: .74%; }.figma-stage--research h2 { top: 12.22%; }.figma-stage--research .slide-subtitle { top: 18.7%; color: rgba(255,255,255,.4); }.research-pill { position: absolute; top: 31.02%; height: 1.35cqw; padding: .18cqw 2.5cqw; border-radius: 999px; background: linear-gradient(90deg,#455dae,rgba(69,93,174,0)); color:#fff; font-size:.521cqw; font-weight:600; letter-spacing:.06em; line-height:1.35cqw; }.research-pill--product { left:6.35%; }.research-pill--user { left:50.52%; }.research-heading { position:absolute; top:30.65%; color:rgba(255,255,255,.7); font-size:1.25cqw; font-weight:500; }.research-heading--product { left:13.85%; }.research-heading--user { left:56.77%; }.research-item { position:absolute; width:15.63%; color:rgba(255,255,255,.42); font-size:.729cqw; line-height:1.55; }.research-item b { color:rgba(255,255,255,.6); font-size:.573cqw; }.research-item h4 { margin: .2cqw 0 1.15cqw 1.9cqw; color:#fff; font-size:1.56cqw; font-weight:500; line-height:1.35; }.research-item p { margin:0 0 .55cqw 1.9cqw; }.research-good { color:rgba(106,140,255,.95); }.research-item--1 { left:6.67%; top:40.83%; }.research-item--2 { left:29.74%; top:40.83%; }.research-visual { position:absolute; overflow:hidden; opacity:.3; }.research-visual--1 { left:11.56%; top:60.46%; width:18.23%; height:20.18%; }.research-visual--2 { left:29.74%; top:59.72%; width:16.61%; height:21.57%; opacity:.5; }.research-visual img { width:100%; height:100%; object-fit:cover; }.research-user-copy { position:absolute; left:50.52%; top:48.24%; width:37%; color:rgba(255,255,255,.62); font-size:.729cqw; line-height:1.6; }.research-user-copy p { margin-bottom:2.6cqw; }.research-user-copy b { display:block; color:#6a8cff; font-size:.729cqw; }.research-user-copy small { display:block; margin: .7cqw 0 0 2.5cqw; color:rgba(255,255,255,.46); font-size:.677cqw; }
@media (max-width: 760px) { .figma-artboard { min-width: 720px; margin-left: 0; transform-origin: left top; } .figma-case { overflow-x: auto; } }

/* Figma case studies: one native 1920 × 1080 canvas per source frame.
   Static frames remain a single Figma export so vector geometry cannot drift. */
.figma-case--slides { width: 100%; overflow: hidden; }
.figma-case--slides.is-deck {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  padding: 78px 64px 54px;
  background: #090909;
}
.figma-case--slides.is-deck.is-entering { opacity: 0; }
.figma-case--slides.is-deck .figma-artboard {
  display: none;
  /* Anchor each frame to the viewport, not the padded deck. The deck's
     horizontal padding previously shifted the containing block left, so a
     hash entry could render the active frame against the left edge. */
  position: fixed;
  z-index: 1;
  top: 50vh;
  left: 50vw;
  width: min(1280px, calc(100vw - 128px));
  max-height: calc(100vh - 132px);
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 24px 90px rgb(0 0 0 / 48%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.94);
  transform-origin: center;
  transition: transform 720ms cubic-bezier(.22, 1, .36, 1), opacity 480ms ease;
  will-change: transform, opacity;
}
.figma-case--slides.is-deck .figma-artboard[data-deck-visible] {
  display: block;
}
.figma-case--slides.is-deck .figma-artboard.is-active {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  /* The focused page in the 67/68-page case-study deck is deliberately
     emphasized around its center, rather than only scaling homepage cards. */
  transform: translate(-50%, -50%) scale(1.1);
}
.figma-case--slides.is-deck .figma-artboard.is-prev,
.figma-case--slides.is-deck .figma-artboard.is-next {
  z-index: 2;
  opacity: .5;
  cursor: pointer;
  filter: saturate(.86);
}
.figma-case--slides.is-deck .figma-artboard.is-prev { transform: translate(calc(-50% - 70vw), -50%) scale(.88); }
.figma-case--slides.is-deck .figma-artboard.is-next { transform: translate(calc(-50% + 70vw), -50%) scale(.88); }
.figma-case--slides.is-deck .figma-artboard.is-active > img:first-child { border-radius: inherit; }
.case-deck-controls {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  color: rgb(254 254 254 / 80%);
  font-family: var(--font-ui);
}
.case-deck__home {
  position: absolute;
  top: 22px;
  left: 28px;
  pointer-events: auto;
  padding: 8px 14px;
  border-radius: 999px;
  color: rgb(254 254 254 / 72%);
  background: rgb(254 254 254 / 8%);
  font-size: 13px;
}
.case-deck__edit {
  position: absolute;
  top: 22px;
  right: 28px;
  pointer-events: auto;
  padding: 9px 14px;
  border: 1px solid rgb(254 254 254 / 14%);
  border-radius: 999px;
  color: rgb(254 254 254 / 78%);
  background: rgb(254 254 254 / 8%);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.case-deck__edit:hover { color: #fff; background: rgb(254 254 254 / 14%); }
.deck-editor {
  position: fixed;
  top: 70px;
  right: 22px;
  z-index: 80;
  display: flex;
  width: min(360px, calc(100vw - 28px));
  max-height: calc(100vh - 92px);
  flex-direction: column;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  color: rgb(255 255 255 / 88%);
  background: rgb(20 20 20 / 96%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
  backdrop-filter: blur(18px);
}
.deck-editor__header, .deck-editor__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deck-editor__header strong { font-size: 15px; }
.deck-editor__header button, .deck-editor__actions button, .deck-editor__remove {
  border: 0;
  border-radius: 999px;
  color: rgb(255 255 255 / 76%);
  background: rgb(255 255 255 / 10%);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.deck-editor__header button { padding: 6px 10px; }
.deck-editor__hint { margin: 10px 0; color: rgb(255 255 255 / 48%); font-size: 11px; line-height: 1.5; }
.deck-editor__list { display: flex; min-height: 0; margin: 0 -4px 12px; padding: 0 4px; flex-direction: column; gap: 6px; overflow: auto; list-style: none; }
.deck-editor__item { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 9px; min-height: 46px; padding: 5px; border: 1px solid transparent; border-radius: 10px; background: rgb(255 255 255 / 5%); cursor: grab; }
.deck-editor__item:hover, .deck-editor__item.is-drag-over { border-color: rgb(72 222 255 / 70%); background: rgb(72 222 255 / 10%); }
.deck-editor__item.is-dragging { opacity: .45; }
.deck-editor__item img { display: block; width: 68px; height: 38px; border-radius: 6px; object-fit: cover; background: #111; }
.deck-editor__meta { overflow: hidden; color: rgb(255 255 255 / 76%); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.deck-editor__remove { padding: 6px 8px; color: rgb(255 170 170 / 90%); background: rgb(255 100 100 / 10%); }
.deck-editor__actions { justify-content: flex-start; }
.deck-editor__actions button { padding: 8px 12px; }
.deck-editor__actions .deck-editor__save { color: #071014; background: #68e8ff; }
.deck-editor__status { min-height: 16px; margin: 9px 0 0; color: rgb(104 232 255 / 80%); font-size: 11px; }
body:has(.deck-editor) .case-deck__edit { color: #071014; background: #68e8ff; }
.case-deck__pager {
  position: absolute;
  right: 28px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.case-deck__button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  color: rgb(254 254 254 / 80%);
  background: rgb(254 254 254 / 8%);
  cursor: pointer;
}
.case-deck__button:hover { background: rgb(254 254 254 / 14%); }
.case-deck__pager span {
  min-width: 58px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgb(254 254 254 / 56%);
}
.case-project-nav {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 152px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: auto;
}
.case-project-nav__item {
  position: relative;
  width: 32px;
  flex: 0 0 32px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 480ms cubic-bezier(.22, 1, .36, 1), flex-basis 480ms cubic-bezier(.22, 1, .36, 1);
}
.case-project-nav.has-active .case-project-nav__item.is-active {
  width: 64px;
  flex-basis: 64px;
}
.case-project-nav.has-active .case-project-nav__item:not(.is-active) {
  width: calc((100% - 88px) / 3);
  flex-basis: calc((100% - 88px) / 3);
}
.case-project-nav__item span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgb(254 254 254 / 60%);
  transition: background-color 220ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.case-project-nav__item:hover span,
.case-project-nav__item:focus-visible span,
.case-project-nav__item.is-active span { background: rgb(254 254 254 / 90%); }
.case-project-nav__item.is-active span { transform: none; }
.case-project-nav__item::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 2;
  width: max-content;
  max-width: 280px;
  padding: 7px 10px;
  border-radius: 7px;
  color: rgb(254 254 254 / 90%);
  background: rgb(20 20 20 / 94%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
  content: attr(data-tooltip);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.case-project-nav__item:hover::after,
.case-project-nav__item:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Project pages share the same top bar as the home page. */
.figma-case-page .site-nav--case {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  color: rgb(254 254 254 / 88%);
  border-bottom-color: rgb(254 254 254 / 5%);
  background: rgb(12 12 12 / 50%);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.figma-case-page .site-nav--case .brand,
.figma-case-page .site-nav--case .nav-links a { color: rgb(254 254 254 / 88%); }
.figma-case-page .site-nav--case .brand {
  width: auto;
  min-width: 0;
  gap: 10px;
  padding: 0;
  white-space: nowrap;
  font: 400 var(--text-lead) / 1 var(--font-ui);
}
.figma-case-page .site-nav--case .nav-links { gap: 8px; }
.figma-case-page .site-nav--case .nav-links a {
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  color: rgb(254 254 254 / 60%);
  font-weight: 400;
  transition: background-color 160ms ease, color 160ms ease;
}
.figma-case-page .site-nav--case .nav-links a:hover { background: rgb(254 254 254 / 8%); color: rgb(254 254 254 / 90%); }
.figma-case-page .site-nav--case .nav-links a[aria-current="page"] { border: 0; background: rgb(254 254 254 / 5%); color: rgb(254 254 254 / 90%); font-weight: 600; }
.figma-case-page .site-nav--case .language-switch {
  border-color: var(--vv-color-border-subtle);
  background: rgb(254 254 254 / 5%);
}
.figma-case-page .site-nav--case .language-switch button { color: var(--vv-color-text-tertiary); }
.figma-case-page .site-nav--case .language-switch button[aria-pressed="true"] {
  color: var(--vv-color-text-primary);
  background: transparent;
  box-shadow: none;
}

/* Keep the circular language control consistent on collection/research pages,
   whose legacy case-nav rules otherwise restore the old enclosing pill. */
.figma-case-page .site-nav--case .language-switch[data-language] {
  gap: 4px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.figma-case-page .site-nav--case .language-switch[data-language]::before { display: none; }
.figma-case-page .site-nav--case .language-switch[data-language] button,
.figma-case-page .site-nav--case .language-switch[data-language] button[aria-pressed="true"] {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  background: transparent !important;
}
.figma-case-page .site-nav--case .language-switch[data-language] button:hover,
.figma-case-page .site-nav--case .language-switch[data-language] button:focus-visible,
.figma-case-page .site-nav--case .language-switch[data-language] button[aria-pressed="true"] {
  background: rgb(254 254 254 / 14%) !important;
}

/* Language options use the exact same tab geometry and state colors as the
   primary navigation. Each option is an independent nav-style tab. */
.language-switch[data-language],
.figma-case-page .site-nav--case .language-switch[data-language] {
  gap: 8px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.language-switch[data-language]::before,
.figma-case-page .site-nav--case .language-switch[data-language]::before { display: none; }
.language-switch[data-language] button,
.language-switch[data-language] button[aria-pressed="true"],
.figma-case-page .site-nav--case .language-switch[data-language] button,
.figma-case-page .site-nav--case .language-switch[data-language] button[aria-pressed="true"] {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgb(254 254 254 / 60%);
  background: transparent !important;
  box-shadow: none;
  font-weight: 400;
  transition: background-color 420ms cubic-bezier(.22, 1, .36, 1), color 420ms cubic-bezier(.22, 1, .36, 1), transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.language-switch[data-language] button:hover,
.language-switch[data-language] button:focus-visible,
.figma-case-page .site-nav--case .language-switch[data-language] button:hover,
.figma-case-page .site-nav--case .language-switch[data-language] button:focus-visible {
  color: rgb(254 254 254 / 90%);
  background: rgb(254 254 254 / 8%) !important;
}
.language-switch[data-language] button[aria-pressed="true"],
.figma-case-page .site-nav--case .language-switch[data-language] button[aria-pressed="true"] {
  color: rgb(254 254 254 / 90%);
  background: rgb(254 254 254 / 5%) !important;
  font-weight: 600;
}
.figma-case-page .case-deck__home { display: none; }
.project-brand-avatar {
  display: inline-flex;
  width: 48px;
  height: 48px;
  overflow: hidden;
  flex: 0 0 48px;
  border-radius: 0;
}
.project-brand-avatar > span,
.project-brand-avatar svg,
.project-brand-avatar canvas { display: block; width: 48px !important; height: 48px !important; }
.figma-case-page .figma-case--slides.is-deck { padding-top: 78px; }
@media (max-width: 760px) {
  .figma-case--slides.is-deck { padding: 68px 14px 72px; }
  .figma-case--slides.is-deck .figma-artboard { top: 68px; width: 100%; min-width: 0; border-radius: 12px; }
  .figma-case--slides.is-deck .figma-artboard.is-prev,
  .figma-case--slides.is-deck .figma-artboard.is-next { display: none; }
  .case-deck__home { top: 14px; left: 14px; }
  .case-deck__pager { right: 14px; bottom: 14px; }
  .figma-case-page .figma-case--slides.is-deck { padding-top: 68px; }
}
@media (max-width: 760px) {
  .figma-case--slides.is-deck {
    position: relative;
    inset: auto;
    min-height: 0;
    padding: 80px 0 0;
    overflow: visible;
  }
  .figma-case--slides.is-deck .figma-artboard,
  .figma-case--slides.is-deck .figma-artboard[data-deck-visible] {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: min(1920px, 100vw);
    min-width: 0;
    max-height: none;
    margin: 0 auto 24px;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    filter: none;
  }
  .project-rail__caption { display: none; }
  .project-rail__caption h2 { white-space: normal; text-wrap: balance; }
  .figma-case--slides.is-deck .figma-artboard.is-prev,
  .figma-case--slides.is-deck .figma-artboard.is-next { cursor: default; }
  .case-deck__pager { display: none; }
  .case-project-nav { display: none; }
}
.figma-artboard--export { background: #141414; }
.figma-artboard--export > img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Dynamic Figma media stays isolated from the static 1920 × 1080 export.
   Slide 16 coordinates: x 751, y 324, w 1073, h 546. Figma uses an IMAGE
   fill in FILL mode, which maps to an HTML cover crop rather than stretching. */
.figma-artboard--timeline-gif > img:first-child { position: relative; z-index: 0; }
.figma-artboard--timeline-gif > .figma-artboard__media { position: absolute; z-index: 2; left: 39.1146%; top: 31%; display: block; width: 55.8854%; height: 50.5556%; max-width: none; object-fit: cover; object-position: center; }
.figma-artboard--tool-discovery-gifs > img:first-child { position: relative; z-index: 0; }
.figma-artboard--tool-discovery-gifs > .figma-artboard__media { position: absolute; z-index: 2; display: block; max-width: none; object-fit: cover; object-position: center; }
.figma-artboard--tool-discovery-gifs > .figma-artboard__media--left { left: 5%; top: 30%; width: 40.2083%; height: 41.1111%; }
.figma-artboard--tool-discovery-gifs > .figma-artboard__media--right { left: 50.625%; top: 30.0926%; width: 40.0521%; height: 40.9259%; }
.figma-artboard--timeline-media > img:first-child { position: relative; z-index: 0; }
.figma-artboard--timeline-media > .figma-artboard__media { position: absolute; z-index: 2; display: block; max-width: none; object-fit: cover; object-position: center; }
.figma-artboard--timeline-media--48 > .figma-artboard__media { left: 19.2805%; top: 30.1155%; width: 60.8976%; height: 61.5267%; }
.figma-artboard--timeline-media--57 > .figma-artboard__media { left: 26.2083%; top: 40.55%; width: 47.1756%; height: 48.055%; }
.figma-artboard--timeline-media--58 > .figma-artboard__media { left: 31.68%; top: 25.635%; width: 62.0968%; height: 63.2543%; }
.figma-artboard--timeline-media--62 > .figma-artboard__media { left: 5%; top: 33.7037%; width: 31.25%; height: 103.2407%; }
.figma-artboard--timeline-media--64 > .figma-artboard__media { left: 30.1042%; top: 40.5556%; width: 39.8438%; height: 40%; }
.figma-artboard--timeline-media--65 > .figma-artboard__media { left: 32.3438%; top: 40.463%; width: 35.3125%; height: 40.0926%; }
.figma-artboard--timeline-media--60 > .figma-artboard__media { left: 73.4896%; top: 17.2222%; width: 19.0625%; height: 73.8889%; border-radius: 2.9167cqw; }
.figma-artboard--timeline-media--68 > .figma-artboard__media { top: 19.4444%; width: 22.6563%; height: 68.1481%; object-position: center bottom; clip-path: inset(0 0 6.088% 0); }
.figma-artboard--timeline-media--68 > .figma-artboard__media--music { left: 29.9479%; }
.figma-artboard--timeline-media--68 > .figma-artboard__media--image { left: 52.1875%; }
.figma-artboard--timeline-media--68 > .figma-artboard__media--location { left: 74.4271%; }
.figma-stage--model { color:#fff; background:#141414; }.model-background { position:absolute; top:-.09%; left:21.85%; width:56.3%; height:100.1%; object-fit:cover; transform:rotate(-90deg); opacity:.6; }.figma-stage--model .slide-kicker { top:8.89%; }.figma-stage--model .slide-index { top:8.89%; }.figma-stage--model .slide-number { top:1.67%; }.figma-stage--model h2 { position:absolute; top:12.96%; left:5%; font-size:2.5cqw; font-weight:500; letter-spacing:-.035em; }.figma-stage--model .slide-subtitle { top:19.63%; }.model-flow { position:absolute; display:flex; align-items:center; justify-content:space-between; left:5%; top:39.81%; width:89.48%; }.model-flow article { box-sizing:border-box; width:13.54%; height:10.42cqw; padding:1.15cqw 1.04cqw; border:1px solid #7df6fd; border-radius:.94cqw; }.model-flow article i { display:block; width:2.19cqw; height:1.77cqw; border-radius:999px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.68); text-align:center; font:500 .625cqw/1.77cqw Inter,sans-serif; font-style:normal; }.model-flow article b { display:block; margin-top:1.2cqw; color:rgba(255,255,255,.38); font-size:.625cqw; }.model-flow article h3 { margin:.85cqw 0 0; font:600 1.042cqw/1.55 "Noto Sans SC",sans-serif; }.model-flow article.is-focus { background:rgba(67,118,255,.25); box-shadow:0 0 2.3cqw rgba(125,246,253,.28); }.model-flow article.is-focus i { background:rgba(67,118,255,.6); color:#fff; }.model-flow > img { width:5.79%; height:7.07cqw; object-fit:contain; transform:scaleY(-1); }.model-conclusion { position:absolute; top:66.67%; left:50%; width:85%; transform:translateX(-50%); color:#fff; text-align:center; font:500 1.667cqw/1.45 "Noto Sans SC",sans-serif; }
.problem-pills span { margin-left:0 !important; }
.problem-pills span img { left:.1115cqw; top:2.495cqw; width:.8333cqw; height:.6862cqw; }
.model-background { top:-.09%; left:50%; width:56.3%; height:200.18%; object-fit:cover; transform:translateX(-50%) rotate(-90deg); transform-origin:center; }

/* Project 3 is a fully composed cover image. Never apply the rail's generic
   image zoom or any parent hover transform to this card. */
body[data-page="home"] .project-card#system .project-card__media,
body[data-page="home"] .project-card#system .project-card__media img,
body[data-page="home"] .project-card#system:hover .project-card__media,
body[data-page="home"] .project-card#system:hover .project-card__media img,
body[data-page="home"] .project-card#system:focus-visible .project-card__media,
body[data-page="home"] .project-card#system:focus-visible .project-card__media img {
  transform: none !important;
}

body[data-page="home"] .project-card#system .project-card__media img {
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: center !important;
  transition: none !important;
}

/* Keep the shared top bar stable while route content moves like a restrained
   horizontal slide. Supported browsers use the cross-document View
   Transitions API; other browsers still get the same content-entry motion. */
@view-transition { navigation: auto; }
.site-nav { view-transition-name: portfolio-nav; }
body[data-page="home"] main,
.figma-case { view-transition-name: portfolio-content; }
::view-transition-old(portfolio-nav),
::view-transition-new(portfolio-nav) { animation: none; }
::view-transition-old(portfolio-content) {
  animation: portfolio-slide-out 420ms cubic-bezier(.22, 1, .36, 1) both;
}
::view-transition-new(portfolio-content) {
  animation: portfolio-slide-in 420ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes portfolio-slide-out {
  to { opacity: 0; transform: translateX(-3.5%); }
}
@keyframes portfolio-slide-in {
  from { opacity: 0; transform: translateX(3.5%); }
}
html.is-language-switching main,
html.is-language-switching .figma-case,
html.is-language-switching .site-nav .nav-links,
html.is-language-switching .site-nav .language-switch {
  animation: portfolio-language-swap 420ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes portfolio-language-swap {
  50% { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(portfolio-content),
  ::view-transition-new(portfolio-content),
  html.is-language-switching main,
  html.is-language-switching .figma-case,
  html.is-language-switching .site-nav .nav-links,
  html.is-language-switching .site-nav .language-switch { animation: none; }
}