/* Lenis' tiny runtime stylesheet is kept local so the first paint no longer
   waits for a second, third-party stylesheet request. */
html.lenis,
html.lenis body{
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped{
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal]{
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe{
  pointer-events: none;
}

.lenis.lenis-autoToggle{
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

:root{
  --dark: #0a0a0a;
  --light: #ffffff;
  --home-surface: #d0cbc2;
  --home-surface-rgb: 208 203 194;
  --panel: #121212;
  --cyan: #00ff66;
  --line: rgba(255, 255, 255, 0.18);
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --font-display: "Archivo Black", "Inter", sans-serif;
  --font-hero-display: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-hero-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --font-hero-meta: "SF Mono", "SFMono-Regular", "IBM Plex Mono", "PingFang SC", monospace;
  --font-reference-ui: "Inter", "Noto Sans SC", sans-serif;

  --drawer-right: clamp(72px, 7.6vw, 124px);
  --drawer-width: clamp(430px, 36vw, 610px);
  --drawer-height: min(68vh, 640px);
}

*{
  box-sizing: border-box;
}

html{
  background: var(--dark);
  color: var(--light);
  color-scheme: dark;
  scroll-behavior: auto;
  scrollbar-width: none;
}

body{
  margin: 0;
  min-width: 320px;
  font-family: var(--font-mono);
  background: var(--dark);
  cursor: none;
  overflow-x: hidden;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

a,
button{
  color: inherit;
  font: inherit;
  cursor: none;
}

button{
  background: none;
  border: 0;
  padding: 0;
}

:focus-visible{
  outline: 1px solid rgba(255, 255, 255, 0.72);
  outline-offset: 4px;
}

.skip-link{
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 10001;
  transform: translateY(-160%);
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.92);
  color: var(--light);
  text-decoration: none;
  transition: transform 180ms ease;
}

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

.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;
}

body.has-native-cursor,
body.has-native-cursor *{
  cursor: auto !important;
}

body.has-native-cursor .liquid-cursor{
  display: none !important;
}

.preloader{
  --preloader-mark-gap: clamp(0.28rem, 0.42vw, 0.46rem);
  --preloader-copy-gap: clamp(0.22rem, 0.34vw, 0.36rem);
  --preloader-cross-extra: clamp(0.72rem, 1.05vw, 1.05rem);
  --preloader-black: #020202;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  color: var(--light);
  background: var(--preloader-black);
  pointer-events: auto;
  transition:
    opacity 180ms ease,
    visibility 0ms linear 180ms,
    background-color 1ms linear;
}

.preloader::before,
.preloader::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.preloader::before{
  opacity: 0.18;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.045) 0,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px,
      transparent 34px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.026) 0,
      rgba(255, 255, 255, 0.026) 1px,
      transparent 1px,
      transparent 42px
    );
  mask-image:
    radial-gradient(
      circle at 50% 54%,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.42) 43%,
      transparent 76%
    );
  transition: opacity 260ms ease;
}

.preloader::after{
  opacity: 0.22;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.12), transparent 1px),
    radial-gradient(circle at 76% 68%, rgba(255, 255, 255, 0.09), transparent 1px),
    radial-gradient(circle at 44% 32%, rgba(255, 255, 255, 0.07), transparent 1px);
  background-size: 54px 54px, 73px 73px, 97px 97px;
  mix-blend-mode: screen;
  transition: opacity 220ms ease;
}

.preloader.is-opening{
  background: transparent;
}

.preloader.is-opening::before,
.preloader.is-opening::after,
.preloader.is-done::before,
.preloader.is-done::after{
  opacity: 0;
}

.preloader__field{
  position: absolute;
  inset: clamp(1.1rem, 2.35vw, 2rem);
  z-index: 4;
  pointer-events: none;
  opacity: 0.28;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.065), transparent) 50% 50% / 100% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.045), transparent) 50% 50% / 1px 100% no-repeat;
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader.is-locked .preloader__field{
  opacity: 0.36;
}

.preloader.is-opening .preloader__field{
  opacity: 0;
  transform: scaleX(1.018);
}

.preloader__panel{
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 42%),
    var(--preloader-black);
  will-change: transform;
  transition:
    transform 560ms cubic-bezier(0.82, 0, 0.18, 1);
}

.preloader__panel--top{
  top: 0;
  transition-delay: 0ms;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.preloader__panel--bottom{
  bottom: 0;
  transition-delay: 22ms;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.022), transparent 44%),
    var(--preloader-black);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.preloader.is-opening .preloader__panel--top{
  transform: translate3d(0, -102%, 0);
}

.preloader.is-opening .preloader__panel--bottom{
  transform: translate3d(0, 102%, 0);
}

.preloader__scanline{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  width: 0;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: width, opacity;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.18) 9%,
      rgba(255, 255, 255, 0.58) 36%,
      rgba(255, 255, 255, 0.96) 50%,
      rgba(255, 255, 255, 0.58) 64%,
      rgba(255, 255, 255, 0.18) 91%,
      transparent
    );
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.28),
    0 0 1px rgba(255, 255, 255, 0.86);
}

.preloader.is-scanning .preloader__scanline,
.preloader.is-matveyan-scan .preloader__scanline{
  width: 100vw;
  opacity: 1;
  transition:
    width 220ms cubic-bezier(0.78, 0, 0.22, 1),
    opacity 60ms ease-out;
}

.preloader.is-opening .preloader__scanline,
.preloader.is-scanning.is-opening .preloader__scanline{
  width: 84vw;
  opacity: 0;
  transition:
    width 180ms cubic-bezier(0.78, 0, 0.22, 1),
    opacity 100ms ease-out;
}

.preloader__cursor{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: 7px;
  height: 7px;
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.72);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.2);
  transition:
    opacity 90ms ease,
    transform 220ms cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader.is-locked .preloader__cursor{
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(1);
}

.preloader.is-scanning .preloader__cursor,
.preloader.is-opening .preloader__cursor{
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.6);
}

.preloader__gate{
  position: absolute;
  left: 0;
  right: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.preloader__gate--top{
  top: 0;
  bottom: 50%;
}

.preloader__gate--bottom{
  top: 50%;
  bottom: 0;
}

.preloader__mark{
  position: absolute;
  left: 50%;
  bottom: var(--preloader-mark-gap);
  display: flex;
  justify-content: center;
  gap: 0.035em;
  font-family:
    "Archivo Black",
    "Arial Black",
    "Inter",
    sans-serif;
  font-size: clamp(4.4rem, 7.7vw, 7.85rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 0.84;
  letter-spacing: -0.055em;
  color: rgba(255, 255, 255, 0.88);
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
  transition:
    color 180ms ease,
    transform 280ms cubic-bezier(0.74, 0, 0.26, 1);
}

.preloader.is-locked .preloader__mark{
  color: rgba(255, 255, 255, 0.96);
}

.preloader.is-converging .preloader__mark{
  transform:
    translate3d(
      -50%,
      calc(
        100% +
        var(--preloader-mark-gap) +
        var(--preloader-cross-extra)
      ),
      0
    );
}

.preloader__letter{
  display: inline-block;
}

.preloader__copy{
  position: absolute;
  left: 50%;
  top: var(--preloader-copy-gap);
  width: max-content;
  text-align: center;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
  transition:
    transform 240ms cubic-bezier(0.74, 0, 0.26, 1) 22ms;
}

.preloader.is-converging .preloader__copy{
  transform:
    translate3d(
      -50%,
      calc(
        -100% -
        var(--preloader-copy-gap) -
        var(--preloader-cross-extra)
      ),
      0
    );
}

.preloader__name{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.31em;
  color: rgba(255, 255, 255, 0.78);
}

.preloader__role{
  margin: 0.28rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.51rem;
  font-weight: 400;
  letter-spacing: 0.145em;
  color: rgba(255, 255, 255, 0.42);
}

.preloader__gate{
  opacity: 0;
  transition: opacity 160ms ease-out;
}

html.fonts-ready .preloader__gate{
  opacity: 1;
}

.preloader__footer{
  position: absolute;
  left: clamp(1.15rem, 2.8vw, 3rem);
  right: clamp(1.15rem, 2.8vw, 3rem);
  bottom: clamp(1.15rem, 2.8vw, 3rem);
  z-index: 6;
  transition:
    transform 190ms cubic-bezier(0.76, 0, 0.24, 1),
    opacity 150ms ease-out;
}

.preloader__meta{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 0.72rem;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.48);
}

.preloader__meta span:first-child{
  padding-bottom: 0.42em;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.preloader__percent{
  min-width: 5ch;
  text-align: right;
  font-family: var(--font-mono);
  font-size: clamp(2.35rem, 5.2vw, 5.65rem);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.12);
  transition:
    color 150ms ease,
    opacity 150ms ease,
    transform 190ms cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader.is-locked .preloader__percent{
  color: rgba(255, 255, 255, 1);
  transform: translate3d(0, -2px, 0);
}

.preloader__bar{
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.11);
}

.preloader__bar span{
  display: block;
  width: 0%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.94),
      rgba(255, 255, 255, 0.42)
    );
  transform-origin: center;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.18);
}

.preloader.is-scanning .preloader__gate,
.preloader.is-opening .preloader__gate{
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.preloader.is-scanning .preloader__footer,
.preloader.is-opening .preloader__footer{
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

.preloader.is-scanning .preloader__bar span,
.preloader.is-opening .preloader__bar span{
  opacity: 0;
  transition: opacity 120ms ease;
}

.preloader.is-done{
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.preloader.is-done .preloader__panel,
.preloader.is-done .preloader__field,
.preloader.is-done .preloader__cursor,
.preloader.is-done .preloader__gate,
.preloader.is-done .preloader__footer{
  opacity: 0;
}

.preloader.is-done .preloader__scanline{
  width: 0 !important;
  opacity: 0 !important;
}

.preloader{
  --preloader-black: #0c0c0c;
  --loader-center-y: 49.8vh;
  --loader-line-width: clamp(184px, 13.4vw, 262px);
  background: var(--preloader-black);
}

.preloader::before,
.preloader::after,
.preloader__field,
.preloader__cursor,
.preloader__scanline,
.preloader__copy,
.preloader__meta span:first-child{
  display: none !important;
}

.preloader__panel{
  background: var(--preloader-black);
  box-shadow: none;
}

.preloader__panel--bottom{
  background: var(--preloader-black);
}

.preloader__gate{
  overflow: visible;
}

.preloader__gate--top{
  top: calc(var(--loader-center-y) - 25px);
  bottom: auto;
  height: 38px;
}

.preloader__gate--bottom{
  display: none;
}

.preloader__mark{
  left: 50%;
  top: 0;
  bottom: auto;
  gap: 0.095em;
  min-width: 48px;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.48vw, 1.38rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.94);
  opacity: var(--preloader-text-opacity, 1);
  transform: translate3d(-50%, 0, 0) scaleX(0.9);
  transition:
    transform 260ms cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader__letter{
  display: inline-block;
  transform: skewY(-6deg);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.34),
    0 12px 28px rgba(255, 255, 255, 0.06);
}

.preloader__letter--s{
  margin-right: 0;
}

.preloader__letter--f{
  margin-left: 0;
  transform: skewY(-6deg);
}

.preloader.is-converging .preloader__mark{
  transform: translate3d(-50%, 0, 0) scaleX(0.9);
}

.preloader.is-scanning .preloader__mark,
.preloader.is-opening .preloader__mark{
  opacity: 0;
  transform: translate3d(-50%, -5px, 0);
}

.preloader__footer{
  left: 50%;
  right: auto;
  top: var(--loader-center-y);
  bottom: auto;
  z-index: 7;
  display: flex;
  flex-direction: column-reverse;
  width: var(--loader-line-width);
  transform: translate3d(-50%, 25px, 0);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader__meta{
  display: block;
  margin: 17px 0 0;
  text-align: center;
}

.preloader__percent{
  display: block;
  min-width: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.78vw, 0.82rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.17em;
  color: rgba(255, 255, 255, 0.84);
  opacity: var(--preloader-text-opacity, 1);
  transition:
    color 150ms ease,
    transform 190ms cubic-bezier(0.76, 0, 0.24, 1);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.32),
    0 14px 30px rgba(255, 255, 255, 0.045);
}

.preloader__bar{
  width: 100%;
  height: 1px;
  overflow: visible;
  opacity: var(--preloader-text-opacity, 1);
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.24) 58%,
      rgba(255, 255, 255, 0.055) 100%
    );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.006),
    0 10px 30px rgba(255, 255, 255, 0.035);
}

.preloader__bar span{
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0.98) 52%,
      rgba(255, 255, 255, 0.72)
    );
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.12),
    0 0 1px rgba(255, 255, 255, 0.76);
}

.preloader.is-locked .preloader__percent{
  color: rgba(255, 255, 255, 0.96);
  transform: none;
}

.preloader.is-converging .preloader__footer{
  opacity: 1;
  transform: translate3d(-50%, 25px, 0);
}

.preloader.is-scanning .preloader__footer,
.preloader.is-opening .preloader__footer{
  opacity: 0;
  transform: translate3d(-50%, 24px, 0);
}

.preloader.is-scanning .preloader__gate,
.preloader.is-opening .preloader__gate{
  opacity: 1;
}

.preloader.is-pixeling .preloader__mark{
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(-50%, -6px, 0);
  transition:
    opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.preloader.is-pixeling .preloader__footer{
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(-50%, 24px, 0);
  transition:
    opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.preloader.is-pixeling .preloader__bar span{
  opacity: 0;
  transition: opacity 120ms ease;
}

@media (max-width: 820px) {
  .preloader__mark{
    font-size: clamp(1.15rem, 7vw, 1.65rem);
  }

  .preloader__footer{
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(220px, 52vw);
  }

  .preloader__meta{
    margin-top: 16px;
  }

  .preloader__meta span:first-child{
    display: none !important;
  }

  .preloader__percent{
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__panel,
  .preloader__field,
  .preloader__scanline,
  .preloader__cursor,
  .preloader__mark,
  .preloader__copy,
  .preloader__name,
  .preloader__role,
  .preloader__footer,
  .preloader__gate{
    transition-duration: 1ms !important;
  }

}

/* Portfolio 2026 — dedicated showreel page link */
.mode-switch.hud-label.portfolio-reel-link{
  position: relative;
  color: var(--home-ui, rgba(255, 249, 238, 0.78));
  text-decoration: none;
  pointer-events: auto;
  cursor: none;
}

.mode-switch.hud-label.portfolio-reel-link::after{
  position: absolute;
  right: 0;
  bottom: -0.48rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0.18);
  transform-origin: left;
  opacity: 0.48;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}

.mode-switch.hud-label.portfolio-reel-link:hover,
.mode-switch.hud-label.portfolio-reel-link:focus-visible{
  border: 0;
  color: var(--home-ui, rgba(255, 249, 238, 0.96));
  background: none;
  outline: none;
}

.mode-switch.hud-label.portfolio-reel-link:hover::after,
.mode-switch.hud-label.portfolio-reel-link:focus-visible::after{
  transform: scaleX(1);
  opacity: 0.9;
}

.mode-switch.hud-label.portfolio-reel-link:hover > span:first-child,
.mode-switch.hud-label.portfolio-reel-link:focus-visible > span:first-child{
  color: var(--home-ui, rgba(255, 249, 238, 0.96));
  opacity: 1;
}

.mode-switch.hud-label.portfolio-reel-link.is-launching{
  pointer-events: none;
}

.mode-switch.hud-label.portfolio-reel-link.is-launching::after{
  opacity: 1;
  transform: scaleX(1);
  transition-duration: 180ms;
}

.mode-switch.hud-label.portfolio-reel-link.is-launching > span:first-child{
  color: var(--home-ui, rgba(255, 249, 238, 0.96));
  opacity: 0.72;
  transform: translate3d(0, -1px, 0);
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mode-switch.hud-label.portfolio-reel-link:focus-visible{
  outline: 1px solid color-mix(in srgb, currentColor 58%, transparent);
  outline-offset: 0.55rem;
}

.has-native-cursor .portfolio-reel-link{
  cursor: pointer !important;
}

@media (max-width: 820px) {
  .hud--top .mode-switch.hud-label.portfolio-reel-link{
    display: inline-flex;
    margin-right: 0.75rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .portfolio-reel-link::after{
    transition: none !important;
  }
}

/* 20260713: restrained editorial hierarchy for the home hero. */
.hero__title-wrap.hero-editorial{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  align-items: stretch;
  column-gap: 4.5rem;
  row-gap: 1.75rem;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 7.5rem 0 7.25rem;
  transform: translate3d(0, 0, 0);
}

.hero-editorial__meta-row{
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(22, 20, 17, 0.16);
}

.hero-editorial .hero__meta,
.hero-editorial__edition{
  margin: 0;
  color: var(--home-ui-muted);
  font-family: var(--font-hero-meta);
  font-size: 0.67rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-editorial__edition{
  justify-self: end;
  text-align: right;
}

.hero-editorial .hero__title{
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  color: var(--home-title-color);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  transform: none;
  transform-origin: left center;
}

.hero-editorial__name{
  display: block;
  color: inherit;
  font-family: var(--font-hero-display);
  font-size: clamp(7.75rem, calc(2rem + 9.2vw), 9.4rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0;
  white-space: nowrap;
}

.hero-editorial__role-row{
  display: grid;
  grid-template-columns: auto clamp(2.25rem, 2.8vw, 2.75rem);
  align-items: center;
  gap: clamp(0.75rem, 1.05vw, 0.95rem);
  width: max-content;
  max-width: 100%;
  min-height: clamp(4.5rem, 6.9vw, 5.5rem);
  overflow: visible;
}

.hero-editorial__rule{
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(22, 20, 17, 0.42);
}

.hero-editorial .hero__title-line.hero-gooey{
  justify-self: start;
  width: 5.25em;
  max-width: none;
  height: 1.08em;
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: var(--font-hero-display);
  font-size: clamp(3.55rem, calc(0.3rem + 5.9vw), 5.125rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  transform: none;
}

.hero-editorial .hero__intro{
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: stretch;
  display: block;
  width: 100%;
  margin: 0 0 2.25rem;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(22, 20, 17, 0.22);
  color: var(--home-ui);
  font-family: var(--font-hero-ui);
  letter-spacing: 0;
}

.hero-editorial .hero__intro p{
  margin: 0;
}

.hero-editorial__lead{
  max-width: 22rem;
  font-size: 1.08rem;
  font-weight: 560;
  line-height: 1.55;
}

.hero-editorial__clients{
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.8rem;
  margin-top: 2rem !important;
  color: var(--home-ui-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.hero-editorial__clients span,
.hero-editorial__clients strong{
  font-weight: 600;
}

.hero-editorial__clients strong{
  color: var(--home-ui);
}

.hero__title-wrap.hero-editorial > .hero-scroll-cue{
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  flex-direction: row;
  min-width: 2.25rem;
  min-height: 2.25rem;
  margin: 0;
}

.hero-editorial .hero-scroll-cue__text{
  display: none;
}

.hero-editorial .hero-scroll-cue__arrow{
  font-size: 1rem;
}

.hero-marquee{
  bottom: 3.25rem;
  min-height: 2.2rem;
  border-top: 1px solid rgba(22, 20, 17, 0.13);
  border-bottom: 0;
  opacity: calc(0.52 - var(--hero-marquee-fade, 0) * 0.52);
  transform: translate3d(0, calc(var(--hero-marquee-fade, 0) * 20px), 0);
  -webkit-mask-image: none;
  mask-image: none;
}

.hero-marquee span{
  padding: 0 1.25rem;
  color: var(--home-ui-muted);
  font-family: var(--font-hero-meta);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.is-entry-scrub-active .hero__title-wrap.hero-editorial{
  opacity: 1;
  filter: none;
  transform: translate3d(0, calc(var(--hero-copy-exit) * -100vh), 0);
}

body.is-entry-scrub-active .hero-marquee,
body.is-entry-scrub-active:not(.is-sequence-scrub-started) .hero-marquee{
  opacity: calc(0.52 - var(--hero-copy-exit) * 0.52);
  filter: none;
  transform: translate3d(0, calc(var(--hero-copy-exit) * -100vh), 0);
}

body:not(.is-hero-ready) .hero-editorial__meta-row,
body:not(.is-hero-ready) .hero-editorial__name,
body:not(.is-hero-ready) .hero-editorial__role-row,
body:not(.is-hero-ready) .hero-editorial .hero__intro,
body:not(.is-hero-ready) .hero-editorial > .hero-scroll-cue{
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 18px, 0);
}

body:not(.is-hero-ready) .hero-editorial .hero__title-line.hero-gooey{
  opacity: 1;
  translate: 0 0;
  filter: none;
  transform: none;
}

body.is-hero-entering .hero-editorial__meta-row{
  animation: heroEditorialMetaIn 680ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}

body.is-hero-entering .hero-editorial__name{
  animation: heroEditorialNameIn 760ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

body.is-hero-entering .hero-editorial__role-row{
  animation: heroEditorialSecondaryIn 760ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}

body.is-hero-entering .hero-editorial .hero__title-line.hero-gooey{
  animation: none !important;
  opacity: 1;
  translate: 0 0;
  filter: none;
  transform: none;
}

body.is-hero-entering .hero-editorial .hero__intro{
  animation: heroEditorialSecondaryIn 700ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

body.is-hero-entering .hero-editorial > .hero-scroll-cue{
  animation: heroEditorialSecondaryIn 640ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both;
}

@keyframes heroEditorialMetaIn {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, -8px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroEditorialNameIn {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroEditorialSecondaryIn {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1100px) {
  .hero__title-wrap.hero-editorial{
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    column-gap: 2.5rem;
  }
}

@media (max-width: 900px) {
  .hero-editorial__name{
    font-size: 7.75rem;
  }

  .hero-editorial .hero__title-line.hero-gooey{
    font-size: 3.55rem;
  }
}

@media (max-width: 820px) {
  .hero{
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  }

  .hero__title-wrap.hero-editorial{
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 1rem;
    min-height: calc(100svh - 2rem);
    padding: 5.75rem 0 8.25rem;
  }

  .hero-editorial__meta-row{
    grid-column: 1;
    grid-row: 1;
  }

  .hero-editorial__edition{
    display: none;
  }

  .hero-editorial .hero__title{
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    gap: 0.55rem;
  }

  .hero-editorial__name{
    font-size: clamp(5.5rem, 13.2vw, 6.75rem);
  }

  .hero-editorial__role-row{
    grid-template-columns: auto clamp(1.75rem, 5vw, 2.5rem);
    gap: clamp(0.5rem, 2.5vw, 0.7rem);
    width: max-content;
    max-width: 100%;
    min-height: 3.5rem;
  }

  .hero-editorial .hero__title-line.hero-gooey{
    width: 5.25em;
    font-size: clamp(2.65rem, 6.3vw, 3.25rem);
  }

  .hero-editorial .hero__intro{
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    width: min(100%, 22rem);
    margin: 0;
  }

  .hero-editorial__lead{
    font-size: 0.98rem;
  }

  .hero-editorial__clients{
    margin-top: 1.25rem !important;
  }

  .hero__title-wrap.hero-editorial > .hero-scroll-cue{
    grid-column: 1;
    grid-row: 4;
    margin-bottom: 3.5rem;
  }

  .hero-marquee,
  body.is-entry-scrub-active .hero-marquee,
  body.is-entry-scrub-active:not(.is-sequence-scrub-started) .hero-marquee{
    bottom: 4.35rem;
    min-height: 1.8rem;
  }

  .hero-marquee span{
    font-size: 0.58rem;
  }

  .hud--bottom{
    display: none;
  }
}

@media (max-width: 480px) {
  .hero__title-wrap.hero-editorial{
    padding-top: 5.25rem;
    padding-bottom: 7.5rem;
  }

  .hero-editorial__name{
    font-size: 5.5rem;
  }

  .hero-editorial__lead{
    max-width: 18rem;
    font-size: 0.92rem;
  }

  .hero-editorial__clients{
    grid-template-columns: 4rem 1fr;
    gap: 0.6rem;
    font-size: 0.66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-hero-entering .hero-editorial__meta-row,
  body.is-hero-entering .hero-editorial__name,
  body.is-hero-entering .hero-editorial__role-row,
  body.is-hero-entering .hero-editorial .hero__intro,
  body.is-hero-entering .hero-editorial > .hero-scroll-cue{
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

.liquid-cursor{
  --cursor-size: 28px;
  --cursor-alpha: 1;
  --cursor-scale-x: 1;
  --cursor-scale-y: 1;
  --cursor-rotate: 0deg;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: var(--cursor-size);
  height: var(--cursor-size);
  pointer-events: none;
  border-radius: 999px;
  opacity: var(--cursor-alpha);

  transform:
    translate3d(-120px, -120px, 0)
    translate(-50%, -50%)
    rotate(var(--cursor-rotate))
    scale(var(--cursor-scale-x), var(--cursor-scale-y));

  transform-origin: center;
  transition:
    width 220ms cubic-bezier(0.16, 1, 0.3, 1),
    height 220ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 160ms ease;
  will-change: transform, width, height, opacity;
}

.liquid-cursor__edge{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  border: 1.15px solid rgba(0, 0, 0, 0.74);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.liquid-cursor__label{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #eee9df;
  font-family: var(--font-hero-meta);
  font-size: 0.48rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 150ms ease, color 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── States ── */
.liquid-cursor.is-hidden{
  opacity: 0;
}

.liquid-cursor.is-hover{
  --cursor-size: 34px;
  --cursor-alpha: 1;
}

.liquid-cursor.is-title{
  --cursor-size: 38px;
  --cursor-alpha: 1;
}

.liquid-cursor.is-hero-surface{
  --cursor-alpha: 1;
}

.liquid-cursor.is-hero-surface .liquid-cursor__edge{
  border-color: rgba(0, 0, 0, 0.76);
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.liquid-cursor.is-screen-surface .liquid-cursor__edge{
  border-color: rgba(255, 255, 255, 0.82);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.liquid-cursor.is-screen-surface.is-hover .liquid-cursor__edge,
.liquid-cursor.is-screen-surface.is-title .liquid-cursor__edge,
.liquid-cursor.is-screen-surface.is-label .liquid-cursor__edge{
  border-color: rgba(255, 255, 255, 0.88);
}

.liquid-cursor.is-screen-surface.is-screen-portfolio .liquid-cursor__edge{
  border-color: rgba(0, 0, 0, 0.78);
}

.liquid-cursor.is-screen-surface.is-screen-portfolio.is-hover .liquid-cursor__edge,
.liquid-cursor.is-screen-surface.is-screen-portfolio.is-title .liquid-cursor__edge,
.liquid-cursor.is-screen-surface.is-screen-portfolio.is-label .liquid-cursor__edge{
  border-color: rgba(0, 0, 0, 0.88);
}

body.is-screen-light .liquid-cursor.is-screen-surface.is-screen-portfolio .liquid-cursor__edge{
  border-color: rgba(255, 255, 255, 0.82);
}

body.is-screen-light .liquid-cursor.is-screen-surface.is-screen-portfolio.is-hover .liquid-cursor__edge,
body.is-screen-light .liquid-cursor.is-screen-surface.is-screen-portfolio.is-title .liquid-cursor__edge,
body.is-screen-light .liquid-cursor.is-screen-surface.is-screen-portfolio.is-label .liquid-cursor__edge{
  border-color: rgba(255, 255, 255, 0.9);
}

.liquid-cursor.is-label{
  --cursor-size: 48px;
  --cursor-alpha: 1;
}

.liquid-cursor.is-label .liquid-cursor__edge{
  border-color: #eee9df;
  background: rgba(238, 233, 223, 0.94);
  box-shadow: 0 0.4rem 1.2rem rgba(14, 13, 11, 0.16);
}

.liquid-cursor.is-label .liquid-cursor__label{
  color: #171512;
  opacity: 1;
  transform: scale(1);
}

.liquid-cursor.is-hero-surface.is-label .liquid-cursor__edge{
  border-color: #171512;
  background: rgba(23, 21, 18, 0.94);
}

.liquid-cursor.is-hero-surface.is-label .liquid-cursor__label{
  color: #eee9df;
}

.liquid-cursor.is-down{
  --cursor-size: 24px;
  --cursor-alpha: 1;
}

.liquid-cursor.is-down .liquid-cursor__label{
  opacity: 0;
  transform: scale(0.72);
}

@media (prefers-reduced-motion: reduce) {
  .liquid-cursor{
    display: none !important;
  }
}

.page-transition{
  position: fixed;
  inset: 0;
  z-index: 10020;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  contain: layout paint;
}

.page-transition__panel{
  position: absolute;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(50% + 2px);
  background: #080808;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 440ms cubic-bezier(0.77, 0, 0.18, 1);
}

.page-transition__panel--top{
  top: -1px;
  transform: translate3d(0, -101%, 0);
}

.page-transition__panel--bottom{
  bottom: -1px;
  transform: translate3d(0, 101%, 0);
}

.page-transition__seam{
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 2;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  background: rgba(241, 238, 232, 0.34);
  transform: scaleX(0.08);
  transform-origin: center;
}

.page-transition.is-reel-covering{
  pointer-events: auto;
  visibility: visible;
}

.page-transition.is-reel-covering .page-transition__panel{
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.page-transition.is-reel-covering .page-transition__seam{
  animation: reelCurtainSeamClose 500ms cubic-bezier(0.77, 0, 0.18, 1) both;
}

html.is-reel-returning .page-transition{
  pointer-events: auto;
  visibility: visible;
}

html.is-reel-returning .page-transition__panel--top{
  animation: reelCurtainOpenTop 640ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}

html.is-reel-returning .page-transition__panel--bottom{
  animation: reelCurtainOpenBottom 640ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}

html.is-reel-returning .page-transition__seam{
  animation: reelCurtainSeamOpen 360ms ease 100ms both;
}

.page-transition.is-resetting .page-transition__panel{
  transition: none !important;
}

html.is-reel-returning .preloader{
  display: none !important;
}

body.is-reel-navigating .liquid-cursor,
html.is-reel-returning .liquid-cursor{
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes reelCurtainOpenTop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -101%, 0); }
}

@keyframes reelCurtainOpenBottom {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 101%, 0); }
}

@keyframes reelCurtainSeamClose {
  0%,
  58% { opacity: 0; transform: scaleX(0.14); }
  82% { opacity: 0.07; transform: scaleX(0.42); }
  100% { opacity: 0.22; transform: scaleX(0.68); }
}

@keyframes reelCurtainSeamOpen {
  0% { opacity: 0.22; transform: scaleX(0.68); }
  28% { opacity: 0.07; transform: scaleX(0.56); }
  60%,
  100% { opacity: 0; transform: scaleX(0.18); }
}

.site-shell{
  position: relative;
  min-height: 100vh;
  border-radius: 0 0 18px 18px;
  overflow: clip;
  background: var(--dark);
  transition: background 600ms ease, color 600ms ease;
}

.hero{
  --hero-progress: 0;
  --hero-copy-exit: 0;
  --hero-bg-x: 0px;
  --hero-bg-y: 0px;
  --hero-title-x: 0px;
  --hero-title-y: 0px;
  --hero-title-rx: 0deg;
  --hero-title-ry: 0deg;
  --hero-depth-x: 0px;
  --hero-depth-y: 0px;
  --hero-ui-x: 0px;
  --hero-ui-y: 0px;
  --hero-ui-rx: 0deg;
  --hero-ui-ry: 0deg;
  --home-title-color: rgba(246, 239, 226, 0.98);
  --home-title-stroke: rgba(246, 239, 226, 0.18);
  --home-title-highlight: rgba(255, 252, 244, 0.12);
  --home-title-shadow-core: rgba(47, 38, 28, 0.26);
  --home-title-shadow-soft: rgba(22, 18, 14, 0.25);
  --home-title-aura-strong: rgba(246, 239, 226, 0.14);
  --home-title-aura-mid: rgba(209, 207, 192, 0.08);
  --home-title-aura-soft: rgba(255, 255, 255, 0.024);
  --home-ui-strong: rgba(246, 239, 226, 0.94);
  --home-ui: rgba(232, 227, 218, 0.88);
  --home-ui-muted: rgba(232, 227, 218, 0.64);
  --home-ui-soft: rgba(232, 227, 218, 0.50);
  --home-ui-shadow: rgba(34, 28, 22, 0.32);
  --home-ui-shadow-soft: rgba(34, 28, 22, 0.16);
  --home-marquee-color: rgba(232, 227, 218, 0.135);
  --home-marquee-border: rgba(232, 227, 218, 0.115);
  --home-pill-bg: rgba(20, 18, 15, 0.24);
  --home-pill-bg-hover: rgba(20, 18, 15, 0.28);
  --home-pill-gloss: rgba(246, 239, 226, 0.12);
  --home-pill-gloss-hover: rgba(246, 239, 226, 0.15);
  --home-pill-border: rgba(232, 227, 218, 0.24);
  --home-pill-border-strong: rgba(232, 227, 218, 0.36);
  --home-pill-spotlight: rgba(232, 227, 218, 0.28);
  --home-pill-spotlight-soft: rgba(232, 227, 218, 0.10);
  --home-pill-sheen: rgba(232, 227, 218, 0.16);
  --home-pill-sheen-soft: rgba(232, 227, 218, 0.055);
  --home-pill-shadow: rgba(28, 24, 19, 0.16);
  --home-nav-label: rgba(246, 239, 226, 0.92);
  --home-nav-label-hover: rgba(255, 252, 244, 0.98);
  --home-nav-glow: rgba(232, 227, 218, 0.18);
  --hero-surface: var(--home-surface);
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.35rem, 2.6vw, 3.25rem);
  border-bottom: 0;
  background: var(--hero-surface);
  overflow: hidden;
  isolation: isolate;
  background: rgb(var(--home-surface-rgb) / calc(1 - var(--hero-progress, 0)));
}

.hero-paper-background{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--home-surface);
  opacity: 1;
  transform: translateZ(0);
}

.hero-paper-background::before,
.hero-paper-background::after{
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-paper-background::before{
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 31% 24%, rgba(31, 41, 55, 0.075), transparent 18%),
    radial-gradient(circle at 78% 66%, rgba(255, 255, 255, 0.045), transparent 14%),
    radial-gradient(circle at 60% 48%, rgba(17, 24, 39, 0.055), transparent 16%);
  opacity: 0.82;
  mix-blend-mode: normal;
  animation: screenPaperLight 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hero-paper-background::after{
  inset: -23% -9% -34% -24%;
  z-index: 1;
  background:
    radial-gradient(circle, rgba(31, 41, 55, 0.075), transparent 62%),
    radial-gradient(circle, rgba(255, 255, 255, 0.035), transparent 58%),
    radial-gradient(circle, rgba(17, 24, 39, 0.05), transparent 56%);
  filter: blur(56px);
  opacity: 0.88;
  transform-origin: center;
  animation: screenPaperShadow 16s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

body.is-screen-light .hero-paper-background::before{
  background:
    radial-gradient(circle at 33% 25%, rgba(255, 255, 255, 0.12), transparent 10%),
    radial-gradient(circle at 76% 67%, rgba(0, 0, 0, 0.035), transparent 8%),
    radial-gradient(circle at 61% 50%, rgba(255, 255, 255, 0.08), transparent 7%);
  opacity: 0.82;
}

body.is-screen-light .hero-paper-background::after{
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.11), transparent 62%),
    radial-gradient(circle, rgba(0, 0, 0, 0.035), transparent 58%),
    radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 56%);
}

.hero-paper-shader{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  transform: translateZ(0);
}

body.is-entry-scrub-active.is-sequence-scrub-started .hero-paper-background,
body.is-portfolio-ready .hero-paper-background{
  opacity: 0;
  visibility: hidden;
}

/* Keep the paper surface compositor-resident while the sequence covers it so
   the reverse handoff does not need to allocate a new layer at the boundary. */
body.is-entry-scrub-active.is-sequence-scrub-started:not(.is-hero-scrub-complete):not(.is-portfolio-ready) .hero-paper-background{
  opacity: 0;
  visibility: visible;
  will-change: opacity;
}

/* A fast reverse can move the mosaic several percent in one paint. Restore an
   opaque surface in that same paint so gaps between tiles never expose the
   dark TV stage. */
body.is-entry-scrub-active.is-entry-first-frame-restoring .hero-paper-background{
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .hero-paper-background::before,
  .hero-paper-background::after{
    animation: none;
  }
}

body[data-home-palette="sage-mist"] .hero{
  --home-title-color: rgba(245, 249, 242, 0.98);
  --home-title-stroke: rgba(175, 190, 165, 0.20);
  --home-title-highlight: rgba(248, 255, 244, 0.12);
  --home-title-shadow-core: rgba(30, 45, 29, 0.28);
  --home-title-shadow-soft: rgba(12, 18, 12, 0.25);
  --home-title-aura-strong: rgba(175, 190, 165, 0.14);
  --home-title-aura-mid: rgba(73, 89, 64, 0.12);
  --home-title-aura-soft: rgba(245, 249, 242, 0.024);
  --home-ui-strong: rgba(245, 249, 242, 0.94);
  --home-ui: rgba(230, 238, 224, 0.88);
  --home-ui-muted: rgba(230, 238, 224, 0.62);
  --home-ui-soft: rgba(230, 238, 224, 0.48);
  --home-ui-shadow: rgba(16, 25, 16, 0.34);
  --home-ui-shadow-soft: rgba(16, 25, 16, 0.17);
  --home-marquee-color: rgba(218, 232, 211, 0.14);
  --home-marquee-border: rgba(218, 232, 211, 0.12);
  --home-pill-bg: rgba(13, 22, 15, 0.25);
  --home-pill-bg-hover: rgba(13, 22, 15, 0.30);
  --home-pill-gloss: rgba(226, 239, 218, 0.12);
  --home-pill-gloss-hover: rgba(226, 239, 218, 0.16);
  --home-pill-border: rgba(218, 232, 211, 0.24);
  --home-pill-border-strong: rgba(218, 232, 211, 0.36);
  --home-pill-spotlight: rgba(175, 190, 165, 0.30);
  --home-pill-spotlight-soft: rgba(175, 190, 165, 0.11);
  --home-pill-sheen: rgba(226, 239, 218, 0.16);
  --home-pill-sheen-soft: rgba(226, 239, 218, 0.055);
  --home-pill-shadow: rgba(14, 22, 14, 0.17);
  --home-nav-label: rgba(245, 249, 242, 0.92);
  --home-nav-label-hover: rgba(250, 255, 247, 0.98);
  --home-nav-glow: rgba(175, 190, 165, 0.20);
}

body[data-home-palette="claude-amber"] .hero{
  --home-title-color: rgba(22, 20, 17, 0.98);
  --home-title-stroke: rgba(22, 20, 17, 0.12);
  --home-title-highlight: rgba(255, 255, 255, 0.18);
  --home-title-shadow-core: rgba(22, 20, 17, 0.08);
  --home-title-shadow-soft: rgba(22, 20, 17, 0.04);
  --home-title-aura-strong: transparent;
  --home-title-aura-mid: transparent;
  --home-title-aura-soft: transparent;
  --home-ui-strong: rgba(22, 20, 17, 0.94);
  --home-ui: rgba(22, 20, 17, 0.82);
  --home-ui-muted: rgba(22, 20, 17, 0.62);
  --home-ui-soft: rgba(22, 20, 17, 0.42);
  --home-ui-shadow: rgba(255, 255, 255, 0.20);
  --home-ui-shadow-soft: rgba(22, 20, 17, 0.04);
  --home-marquee-color: rgba(22, 20, 17, 0.105);
  --home-marquee-border: rgba(22, 20, 17, 0.12);
  --home-pill-bg: rgba(255, 255, 255, 0.20);
  --home-pill-bg-hover: rgba(255, 255, 255, 0.28);
  --home-pill-gloss: rgba(255, 255, 255, 0.24);
  --home-pill-gloss-hover: rgba(255, 255, 255, 0.34);
  --home-pill-border: rgba(22, 20, 17, 0.15);
  --home-pill-border-strong: rgba(255, 255, 255, 0.54);
  --home-pill-spotlight: rgba(217, 119, 87, 0.22);
  --home-pill-spotlight-soft: rgba(217, 119, 87, 0.08);
  --home-pill-sheen: rgba(255, 255, 255, 0.32);
  --home-pill-sheen-soft: rgba(255, 255, 255, 0.10);
  --home-pill-shadow: rgba(22, 20, 17, 0.10);
  --home-nav-label: rgba(22, 20, 17, 0.84);
  --home-nav-label-hover: rgba(22, 20, 17, 0.98);
  --home-nav-glow: rgba(217, 119, 87, 0.16);
  --hero-surface: var(--home-surface);
}

body.is-entry-scrub-active.is-sequence-scrub-started .hero{
  background: transparent;
}

body.is-entry-scrub-active.is-entry-first-frame-restoring .hero{
  background: var(--hero-surface);
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: none;
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: none;
  opacity: 0;
}

.hero-mosaic{
  --hero-mosaic-progress: 0;
  --hero-mosaic-top-edge-alpha: 0.06;
  --hero-mosaic-top-mid-alpha: 0.62;
  --hero-mosaic-left-edge-alpha: 0.08;
  --hero-mosaic-left-mid-alpha: 0.68;
  --hero-mosaic-right-edge-alpha: 0.08;
  --hero-mosaic-right-mid-alpha: 0.68;
  --hero-mosaic-top-fade-start: 0px;
  --hero-mosaic-top-fade-mid: 88px;
  --hero-mosaic-top-fade-end: 160px;
  --hero-mosaic-left-fade-start: 0px;
  --hero-mosaic-left-fade-mid: 50px;
  --hero-mosaic-left-fade-end: 90px;
  --hero-mosaic-right-fade-start: calc(100% - 90px);
  --hero-mosaic-right-fade-mid: calc(100% - 50px);
  --hero-mosaic-right-fade-end: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  opacity: clamp(0, calc(1 - var(--hero-progress, 0) * 4.8), 1);
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgb(0 0 0 / var(--hero-mosaic-top-edge-alpha)) var(--hero-mosaic-top-fade-start),
      rgb(0 0 0 / var(--hero-mosaic-top-mid-alpha)) var(--hero-mosaic-top-fade-mid),
      #000 var(--hero-mosaic-top-fade-end),
      #000 100%
    ),
    linear-gradient(
      to right,
      rgb(0 0 0 / var(--hero-mosaic-left-edge-alpha)) var(--hero-mosaic-left-fade-start),
      rgb(0 0 0 / var(--hero-mosaic-left-mid-alpha)) var(--hero-mosaic-left-fade-mid),
      #000 var(--hero-mosaic-left-fade-end),
      #000 var(--hero-mosaic-right-fade-start),
      rgb(0 0 0 / var(--hero-mosaic-right-mid-alpha)) var(--hero-mosaic-right-fade-mid),
      rgb(0 0 0 / var(--hero-mosaic-right-edge-alpha)) var(--hero-mosaic-right-fade-end)
    );
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to bottom,
      rgb(0 0 0 / var(--hero-mosaic-top-edge-alpha)) var(--hero-mosaic-top-fade-start),
      rgb(0 0 0 / var(--hero-mosaic-top-mid-alpha)) var(--hero-mosaic-top-fade-mid),
      #000 var(--hero-mosaic-top-fade-end),
      #000 100%
    ),
    linear-gradient(
      to right,
      rgb(0 0 0 / var(--hero-mosaic-left-edge-alpha)) var(--hero-mosaic-left-fade-start),
      rgb(0 0 0 / var(--hero-mosaic-left-mid-alpha)) var(--hero-mosaic-left-fade-mid),
      #000 var(--hero-mosaic-left-fade-end),
      #000 var(--hero-mosaic-right-fade-start),
      rgb(0 0 0 / var(--hero-mosaic-right-mid-alpha)) var(--hero-mosaic-right-fade-mid),
      rgb(0 0 0 / var(--hero-mosaic-right-edge-alpha)) var(--hero-mosaic-right-fade-end)
    );
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  transition: none;
}

.hero-mosaic::before,
.hero-mosaic::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-mosaic::before{
  display: none;
}

.hero-mosaic::after{
  display: none;
}

.hero-mosaic__stage{
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.777778vh);
  height: max(100vh, 56.25vw);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(5, 1fr);
  perspective: 1200px;
  overflow: visible;
  opacity: var(--hero-mosaic-stage-opacity, 0);
  border-radius: var(--hero-mosaic-stage-radius, 46px);
  clip-path: none;
  transform:
    translate3d(-50%, calc(-50% + var(--hero-mosaic-stage-y, 58vh)), 0)
    scale(var(--hero-mosaic-stage-scale, 0.78));
  transform-origin: center center;
  transform-style: preserve-3d;
  background: transparent;
  box-shadow: none;
  will-change: auto;
}

body.is-hero-mosaic-active .hero-mosaic__stage{
  will-change: transform, opacity;
}

body.is-entry-scrub-active.is-hero-mosaic-active .hero-mosaic__stage{
  transform:
    translate3d(-50%, calc(-50% + var(--hero-mosaic-stage-y, 58vh)), 0)
    scale(var(--hero-mosaic-stage-scale, 0.78));
}

.hero-mosaic__stage::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: url("assets/sequence/tv-entry-lite/frame_00001.webp?v=20260823_restore_1440_256") center / cover no-repeat;
  border-radius: inherit;
  opacity: var(--hero-mosaic-stitch-opacity, 0);
  will-change: auto;
}

body.is-hero-mosaic-active .hero-mosaic__stage::before{
  will-change: opacity;
}

.hero-mosaic__stage::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 101;
  pointer-events: none;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

body.is-entry-scrub-active.is-hero-mosaic-complete .hero-mosaic__stage::before{
  opacity: 1;
}

.hero-mosaic__tile{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  opacity: 0;
  background: rgb(var(--home-surface-rgb) / 0.72);
  box-shadow: none;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: auto;
}

body.is-hero-mosaic-active .hero-mosaic__tile{
  will-change: transform, opacity, filter;
}

.hero-mosaic__tile:nth-child(1){
  border-top-left-radius: var(--hero-mosaic-stage-radius, 46px);
}

.hero-mosaic__tile:nth-child(9){
  border-top-right-radius: var(--hero-mosaic-stage-radius, 46px);
}

.hero-mosaic__tile:nth-child(37){
  border-bottom-left-radius: var(--hero-mosaic-stage-radius, 46px);
}

.hero-mosaic__tile:nth-child(45){
  border-bottom-right-radius: var(--hero-mosaic-stage-radius, 46px);
}

.hero-mosaic__tile--image{
  background-image: var(--tile-image);
  background-repeat: no-repeat;
}

.hero-mosaic__tile--image::after{
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 48%),
    linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.20));
  mix-blend-mode: soft-light;
}

.hero-mosaic__tile--ghost{
  background:
    linear-gradient(135deg, rgba(241, 237, 230, 0.54), rgba(165, 157, 145, 0.24)),
    rgb(var(--home-surface-rgb) / 0.56);
  box-shadow:
    0 0 62px rgba(213, 224, 170, 0.13),
    0 28px 74px rgba(0, 0, 0, 0.46);
}

.hero-mosaic__tile--type,
.hero-mosaic__tile--label,
.hero-mosaic__tile--line{
  display: grid;
  place-items: center;
  color: rgba(22, 20, 17, 0.78);
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.hero-mosaic__tile--type{
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 11vw, 11rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 32px rgba(255, 255, 255, 0.18);
}

.hero-mosaic__tile--label{
  justify-content: start;
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.82vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(22, 20, 17, 0.54);
}

.hero-mosaic__tile--line{
  height: 1px !important;
  background: rgba(22, 20, 17, 0.24);
  box-shadow: 0 0 24px rgba(22, 20, 17, 0.08);
}

body:not(.is-hero-ready) .hero-mosaic{
  opacity: 0;
}

body.is-portfolio-ready .hero-mosaic,
body.is-hero-scrub-complete .hero-mosaic{
  opacity: 0;
  visibility: hidden;
}

body.is-entry-scrub-active.is-sequence-scrub-started:not(.is-entry-first-frame-locked):not(.is-sequence-frame-committed):not(.is-hero-scrub-complete) .hero-mosaic{
  opacity: 1;
  visibility: visible;
}

body.is-entry-scrub-active.is-sequence-scrub-started.is-entry-first-frame-locked.is-entry-mosaic-handoff-settled:not(.is-hero-scrub-complete) .hero-mosaic,
body.is-entry-scrub-active.is-sequence-frame-committed:not(.is-hero-scrub-complete) .hero-mosaic{
  opacity: 0;
  visibility: hidden;
  transition: none;
  animation: none;
}

body.is-entry-scrub-active:not(.is-sequence-scrub-started) .hero-mosaic{
  transition: none;
  animation: none;
}

body.is-entry-scrub-active .hero__title-wrap{
  opacity: calc(1 - var(--hero-copy-exit));
  filter: blur(calc(var(--hero-copy-exit) * 6px));
  transform:
    translate3d(
      0,
      calc(clamp(0.35rem, 1.8vh, 1.15rem) - var(--hero-copy-exit) * 24px),
      0
    )
    scale(calc(1 - var(--hero-copy-exit) * 0.025));
}

body.is-hero-exiting .hero{
  z-index: 5;
  pointer-events: none;
}

.hero::before{
  transition:
    opacity
    720ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.hero::after{
  transition:
    opacity
    760ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

body.is-hero-exiting .hero::before,
body.is-hero-exiting .hero::after,
body.is-portfolio-ready .hero::before,
body.is-portfolio-ready .hero::after{
  opacity: 0;
}

body.is-portfolio-ready .hero{
  visibility: hidden;
  z-index: 1;
}

/* Once the television screen owns the viewport, keep the completed hero in
   layout but remove its paint/compositor cost. */
body.is-entry-resources-released .hero{
  visibility: hidden !important;
  content-visibility: hidden;
  pointer-events: none;
}

body.is-entry-resources-released .hero,
body.is-entry-resources-released .hero *{
  will-change: auto !important;
}

.hero__title-wrap{
  position: relative;
  isolation: isolate;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 31rem);
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: start;
  column-gap: clamp(2rem, 7vw, 8rem);
  row-gap: clamp(0.8rem, 1.7vh, 1.35rem);
  width: min(100%, 1480px);
  max-width: 1480px;
  min-height: calc(100svh - clamp(2.7rem, 5.2vw, 6.5rem));
  padding: clamp(3.4rem, 7.5vh, 5.8rem) 0 clamp(8.6rem, 17vh, 10.8rem);
  transform:
    translate3d(0, clamp(0.15rem, 0.7vh, 0.5rem), 0);
  perspective: 1000px;
  transform-style: preserve-3d;
}

.hero__title-wrap::before{
  content: none;
  display: none;
}

.hero__meta{
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--home-ui-muted);
  font-family: var(--font-hero-meta);
  font-size: clamp(0.62rem, 0.68vw, 0.76rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__eyebrow{
  display: none;
}

.hero__title{
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  justify-items: start;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-family: var(--font-hero-display);
  font-size: clamp(4.35rem, 7.2vw, 9.4rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: 0;
  max-width: none;
  text-align: left;
  text-transform: none;
  color: var(--home-title-color, rgba(255, 250, 239, 0.97));
  opacity: calc(1 - var(--hero-title-fade, var(--hero-progress)) * 0.06);
  filter: none;
  overflow: visible;
  transform:
    perspective(1200px)
    translate3d(
      calc(var(--hero-title-x) * 0.16),
      calc(var(--hero-title-y) * 0.16),
      12px
    )
    rotateX(calc(var(--hero-title-rx) * 0.16))
    rotateY(calc(var(--hero-title-ry) * 0.16));
  transform-origin: 38% center;
  transform-style: preserve-3d;
  text-shadow: none !important;
  filter: none !important;
  will-change: transform, opacity;
}

.hero__identity-row,
.hero__role-row,
.hero__statement-row{
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  color: inherit;
  white-space: nowrap;
}

.hero__identity-row{
  gap: 0.24em;
}

.hero__role-row{
  gap: 0.14em;
}

.hero__statement-row{
  gap: 0.18em;
  line-height: 0.98;
}

.hero__identity-copy,
.hero__role-prefix,
.hero__statement-row{
  display: inline-block;
}

.hero__media-pill{
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: clamp(7.5rem, 14.5vw, 14.5rem);
  height: 0.52em;
  min-height: 2.8rem;
  overflow: hidden;
  border: 1px solid rgba(22, 20, 17, 0.18);
  border-radius: 999px;
  background: #b96b45;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0.08em 0.28em rgba(22, 20, 17, 0.10);
  transform: translateY(0.045em);
}

.hero__media-pill::before{
  content: "";
  position: absolute;
  inset: -18%;
  background: url("assets/sequence/tv-entry-lite/frame_00001.webp?v=20260823_restore_1440_256") 50% 47% / 170% auto no-repeat;
  filter: saturate(0.76) contrast(1.05) brightness(0.90);
  transform: scale(1.04) translate3d(-2%, 0, 0);
  animation: heroMediaPillDrift 8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  will-change: transform;
}

@keyframes heroMediaPillDrift {
  from {
    transform: scale(1.04) translate3d(-2%, 0, 0);
  }

  to {
    transform: scale(1.12) translate3d(3%, -1.5%, 0);
  }
}

.hero__intro{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.65rem);
  width: 100%;
  padding-top: 0.78rem;
  border-top: 1px solid rgba(22, 20, 17, 0.20);
  color: var(--home-ui-muted);
  font-family: var(--font-hero-ui);
  font-size: clamp(0.7rem, 0.72vw, 0.8rem);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: 0;
}

.hero__intro p{
  margin: 0;
}

.hero__title-wrap > .hero-scroll-cue{
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  flex-direction: row;
  margin-top: 0;
}

.hero__title-line{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.015em;
  padding: 0.16em 0.08em 0.18em;
  margin: -0.16em -0.08em -0.18em;
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.08;
  letter-spacing: inherit;
  color: inherit;
  transform: translateZ(24px);
  overflow: visible;
  filter: none;
  text-shadow: none !important;
  will-change: transform, opacity, filter, clip-path;
}

.hero__title-line::before{
  content: none !important;
  display: none !important;
}

.hero__title-line.hero-gooey{
  --hero-gooey-exit: var(--hero-title-fade, var(--hero-progress));
  --hero-gooey-fade: var(--hero-title-fade-damped, var(--hero-gooey-exit));
  --hero-gooey-prep: clamp(0, calc((var(--hero-gooey-fade) - 0.25) / 0.30), 1);
  --hero-gooey-exit-motion: clamp(0, calc(var(--hero-gooey-fade) / 1.12), 1);
  display: grid;
  place-items: center;
  width: 5.72em;
  height: 1.08em;
  padding: 0;
  margin: -0.12em 0;
  letter-spacing: 0;
  line-height: 1;
  color: var(--home-title-color, rgba(255, 250, 239, 0.98));
  opacity: 1;
  clip-path: none;
  transform: translate3d(0, calc(var(--hero-gooey-prep) * -5px), 24px);
  -webkit-mask-image: none;
  mask-image: none;
}

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

.hero-gooey__stage{
  --gooey-from-blur: 0px;
  --gooey-from-opacity: 1;
  --gooey-to-blur: 100px;
  --gooey-to-opacity: 0;
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.015em;
  opacity: 1;
  filter: none;
  will-change: transform;
}

.hero-gooey__stage:not(.is-slot-rendered){
  filter: url("#hero-gooey-threshold");
}

.hero-gooey__text{
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.015em;
  color: currentColor;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  transform: translate3d(-50%, -50%, 0);
  overflow: visible;
  text-shadow: none !important;
  -webkit-text-stroke: 0;
  paint-order: normal;
  will-change: filter, opacity;
}

.hero-gooey__stage.is-slot-rendered .hero-gooey__text{
  display: none;
}

.hero-gooey__slot{
  --title-motion: var(--hero-gooey-exit-motion, var(--hero-gooey-fade, var(--hero-title-fade-damped, var(--hero-title-fade, var(--hero-progress)))));
  --char-delay: calc(var(--i) * 0.08);
  --char-progress: clamp(0, calc((var(--title-motion) - var(--char-delay)) * 1.52), 1);
  --char-dissolve: clamp(0, calc((var(--char-progress) - 0.04) * 1.18), 1);
  --char-fade: clamp(0, calc((var(--char-progress) - 0.18) * 1.38), 1);
  --char-soft-fade: clamp(0, calc((var(--char-progress) - 0.10) * 1.16), 1);
  --char-mask-top: calc(1 - var(--char-dissolve) * 0.92);
  --char-mask-mid: calc(1 - var(--char-dissolve) * 0.48);
  --char-melt: clamp(0, calc(var(--char-progress) * 0.72), 0.72);
  --char-lift-distance: -108px;
  position: relative;
  display: inline-grid;
  grid-template-areas: "glyph";
  place-items: center;
  padding: 0.18em 0.04em 0.20em;
  margin: -0.18em -0.04em -0.20em;
  line-height: 1.08;
  opacity: calc(1 - var(--char-fade) * 0.98);
  color: var(--home-title-color, rgba(255, 250, 239, 0.98));
  transform:
    translate3d(
      calc((var(--i) - 2) * var(--char-progress) * 3.8px),
      calc(var(--char-progress) * var(--char-lift-distance)),
      0
    )
    scale(calc(1 - var(--char-progress) * 0.018));
  transform-origin: center 72%;
  filter: blur(calc(var(--char-soft-fade) * 5.8px));
  will-change: transform, opacity, filter;
  -webkit-mask-image:
    linear-gradient(180deg,
      rgb(0 0 0 / var(--char-mask-top)) 0%,
      rgb(0 0 0 / var(--char-mask-mid)) 42%,
      #000 100%);
  mask-image:
    linear-gradient(180deg,
      rgb(0 0 0 / var(--char-mask-top)) 0%,
      rgb(0 0 0 / var(--char-mask-mid)) 42%,
      #000 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
}

.hero-gooey__slot:nth-child(2){
  --char-lift-distance: -94px;
}

.hero-gooey__slot:nth-child(3){
  --char-lift-distance: -78px;
}

.hero-gooey__slot:nth-child(4){
  --char-lift-distance: -62px;
}

.hero-gooey__slot:nth-child(5){
  --char-lift-distance: -46px;
}

.hero-gooey__slot-goo{
  grid-area: glyph;
  display: inline-grid;
  grid-template-areas: "glyph";
  place-items: center;
  color: currentColor;
  filter: url("#hero-gooey-threshold");
  transform: translateZ(0);
  will-change: filter;
}

.hero-gooey__slot-layer{
  grid-area: glyph;
  display: block;
  color: currentColor;
  font: inherit;
  line-height: 1.08;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: none !important;
  -webkit-text-stroke: 0;
  paint-order: normal;
  will-change: filter, opacity;
}

.hero-gooey__slot-layer--from{
  opacity: var(--gooey-from-opacity);
  filter: blur(calc(var(--gooey-from-blur) + var(--char-melt) * 0.42px));
}

.hero-gooey__slot-layer--melt{
  opacity: calc(var(--char-melt) * (1 - var(--char-fade)) * 0.24);
  filter: blur(calc(1.4px + var(--char-melt) * 1.8px));
  transform:
    translate3d(
      calc((var(--i) - 2) * var(--char-melt) * 0.016em),
      calc(var(--char-melt) * -0.09em),
      0
    )
    scale(calc(1 + var(--char-melt) * 0.028));
}

.hero-gooey__slot-layer--to{
  opacity: var(--gooey-to-opacity);
  filter: blur(calc(var(--gooey-to-blur) + var(--char-melt) * 0.28px));
}

.hero__title-char{
  --title-motion: var(--hero-title-fade-damped, var(--hero-title-fade, var(--hero-progress)));
  --char-delay: calc(var(--i) * 0.105);
  --char-progress: clamp(0, calc((var(--title-motion) - var(--char-delay)) * 1.72), 1);
  --char-mask-progress: clamp(0, calc((var(--char-progress) - 0.04) * 1.08), 1);
  --char-mask-line: calc(-138% + var(--char-mask-progress) * 238%);
  --char-final-fade: clamp(0, calc((var(--char-progress) - 0.90) * 5), 1);
  --char-shadow-fade: clamp(0, calc((var(--char-mask-progress) - 0.02) * 2.45), 1);

  position: relative;
  display: inline-grid;
  grid-template-areas: "char";
  place-items: center;
  vertical-align: baseline;
  padding: 0.18em 0.08em 0.20em;
  margin: -0.18em -0.08em -0.20em;
  line-height: 1.08;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  text-shadow: none !important;
  filter: none !important;
  opacity: calc(1 - var(--char-final-fade));

  transform:
    translate3d(0, calc(var(--char-progress) * -128px), 0)
    scale(calc(1 - var(--char-progress) * 0.012));
  transform-origin: center 72%;
  will-change: transform, opacity;
}

.hero__title-face,
.hero__title-shadow{
  grid-area: char;
  display: block;
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  padding: 0.18em 0.16em 0.20em;
  margin: -0.18em -0.16em -0.20em;
  overflow: visible;
}

.hero__title-face{
  position: relative;
  z-index: 2;
  color: var(--home-title-color, rgba(255, 250, 239, 0.97));
  background: transparent;
  box-shadow: none;
  -webkit-text-stroke: 0.009em var(--home-title-stroke, rgba(255, 248, 232, 0.16));
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 var(--home-title-highlight, rgba(255, 255, 255, 0.18)),
    0 8px 18px var(--home-title-shadow-core, rgba(72, 50, 31, 0.20)),
    0 24px 42px var(--home-title-shadow-soft, rgba(36, 25, 17, 0.16)) !important;
  filter: none !important;

  -webkit-mask-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent calc(var(--char-mask-line) - 20%),
      rgba(255,255,255,0.04) calc(var(--char-mask-line) - 4%),
      rgba(255,255,255,0.13) calc(var(--char-mask-line) + 12%),
      rgba(255,255,255,0.30) calc(var(--char-mask-line) + 30%),
      rgba(255,255,255,0.56) calc(var(--char-mask-line) + 50%),
      rgba(255,255,255,0.82) calc(var(--char-mask-line) + 72%),
      #fff calc(var(--char-mask-line) + 96%),
      #fff 100%);
  mask-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent calc(var(--char-mask-line) - 20%),
      rgba(255,255,255,0.04) calc(var(--char-mask-line) - 4%),
      rgba(255,255,255,0.13) calc(var(--char-mask-line) + 12%),
      rgba(255,255,255,0.30) calc(var(--char-mask-line) + 30%),
      rgba(255,255,255,0.56) calc(var(--char-mask-line) + 50%),
      rgba(255,255,255,0.82) calc(var(--char-mask-line) + 72%),
      #fff calc(var(--char-mask-line) + 96%),
      #fff 100%);
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 172%;
  mask-size: 100% 172%;
  -webkit-mask-position: 50% 54%;
  mask-position: 50% 54%;
}

.hero__title-shadow{
  position: relative;
  z-index: 1;
  color: transparent;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  filter: none;

  transform:
    translate3d(
      calc(var(--hero-depth-x) * 0.04),
      calc(var(--hero-depth-y) * 0.04 + 1px),
      0
    );

  text-shadow:
    var(--hero-shadow-light-x, calc(var(--hero-depth-x) * -0.22))
    var(--hero-shadow-light-y, calc(var(--hero-depth-y) * -0.22))
    0
    var(--home-title-highlight, rgba(255, 252, 244, 0.10)),

    var(--hero-shadow-core-x, calc(var(--hero-depth-x) * 0.44))
    var(--hero-shadow-core-y, calc(var(--hero-depth-y) * 0.44))
    0
    var(--home-title-shadow-core, rgba(78, 55, 36, 0.24)),

    var(--hero-shadow-soft-x, calc(var(--hero-depth-x) * 0.82))
    var(--hero-shadow-soft-y, calc(var(--hero-depth-y) * 0.82))
    18px
    var(--home-title-shadow-soft, rgba(46, 32, 22, 0.24));

  opacity: calc(
    (1 - var(--char-shadow-fade)) *
    (1 - var(--char-final-fade)) *
    0.50
  );

  will-change: transform, opacity, text-shadow;
}

.hero__title-char:nth-child(2){
  transform:
    translate3d(0, calc(var(--char-progress) * -104px), 0)
    scale(calc(1 - var(--char-progress) * 0.012));
}

.hero__title-char:nth-child(3){
  transform:
    translate3d(0, calc(var(--char-progress) * -78px), 0)
    scale(calc(1 - var(--char-progress) * 0.012));
}

.hero__title-char:nth-child(4){
  transform:
    translate3d(0, calc(var(--char-progress) * -54px), 0)
    scale(calc(1 - var(--char-progress) * 0.012));
}

.hero__title-char:nth-child(5){
  transform:
    translate3d(0, calc(var(--char-progress) * -32px), 0)
    scale(calc(1 - var(--char-progress) * 0.012));
}

.hero__title,
.hero__title-line,
.hero__title-char,
.hero-gooey__slot,
.hero-gooey__slot-layer,
.hero-gooey__text{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero__title{
  contain: none;
}

.hero-scroll-cue{
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  margin-top: clamp(0.72rem, 1.5vh, 1.12rem);
  color: var(--home-ui-muted, rgba(255, 249, 237, 0.72));
  font-family: var(--font-hero-ui);
  font-size: clamp(0.72rem, 0.74vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-align: center;
  pointer-events: none;
  opacity: calc(0.86 - var(--hero-ui-fade, 0) * 0.86);
  transform:
    translate3d(
      0,
      calc(var(--hero-ui-fade, 0) * -8px),
      0
    );
  text-shadow:
    0 1px 2px var(--home-ui-shadow, rgba(75, 53, 34, 0.22)),
    0 8px 20px var(--home-ui-shadow-soft, rgba(45, 31, 20, 0.18));
  will-change: transform, opacity;
}

.hero-scroll-cue__text{
  display: inline-block;
  opacity: 0.78;
}

.hero-scroll-cue__arrow{
  display: inline-block;
  font-size: 0.98rem;
  line-height: 1;
  color: var(--home-ui, rgba(255, 250, 240, 0.88));
  animation: heroScrollCueArrow 1.45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes heroArrowLoop {
  0% {
    opacity: 0.42;
    transform: translate3d(0, -3px, 0);
  }

  42% {
    opacity: 1;
    transform: translate3d(0, 3px, 0);
  }

  100% {
    opacity: 0.42;
    transform: translate3d(0, -3px, 0);
  }
}

@keyframes heroScrollCueArrow {
  0% {
    opacity: 0.38;
    transform: translate3d(0, -4px, 0);
  }

  42% {
    opacity: 1;
    transform: translate3d(0, 4px, 0);
  }

  100% {
    opacity: 0.38;
    transform: translate3d(0, -4px, 0);
  }
}

body.is-drawer-open .hero-scroll-cue{
  opacity: 0;
  pointer-events: none;
}

body.is-drawer-open .hero{
  z-index: 40;
  pointer-events: none;
  filter: blur(3px) saturate(0.82) brightness(0.72);
  transform: scale(1.012);
  transition:
    filter 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-drawer-open .hud--top{
  z-index: 120;
  pointer-events: none;
}

body.is-drawer-open .hud--top .nav-list,
body.is-drawer-open .hud--top .nav-link{
  position: relative;
  z-index: 130;
  pointer-events: auto;
}

body.is-hero-exiting .hero__eyebrow,
body.is-hero-exiting .hero__title{
  animation: none;
}

body.is-hero-exiting .hero__title-line,
body.is-hero-exiting .hero__title-char{
  animation: none;
}

body.is-hero-exiting .hud--top{
  animation: none;
}

body.is-hero-exiting .hud--bottom{
  animation: none;
}

body.is-hero-exiting .hero-marquee{
  animation: none;
}

body.is-portfolio-ready .hero__eyebrow,
body.is-portfolio-ready .hero__title,
body.is-portfolio-ready .hero-scroll-cue,
body.is-portfolio-ready .hud .mode-switch,
body.is-portfolio-ready .hud .logo,
body.is-portfolio-ready .hud .nav-list,
body.is-portfolio-ready .hud--bottom p,
body.is-portfolio-ready .hud--bottom time{
  opacity: 0;
  pointer-events: none;
}

body.is-portfolio-ready .hero-marquee{
  opacity: 0;
  filter: none;
  pointer-events: none;
}

.hero-marquee{
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2rem, 3.8vh, 3rem);
  z-index: 2;
  display: flex;
  width: auto;
  min-height: clamp(4.5rem, 7.15vw, 7.75rem);
  align-items: center;
  overflow: hidden;
  color: var(--home-marquee-color);
  border-block: 1px solid var(--home-marquee-border);
  border-inline: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform:
    perspective(900px)
    translate3d(
      calc(var(--hero-ui-x) * -0.30),
      calc(var(--hero-ui-y) * -0.18 + var(--hero-marquee-fade, 0) * 24px),
      calc(-2px - var(--hero-marquee-fade, 0) * 28px)
    )
    rotateX(calc(var(--hero-ui-rx) * -0.14))
    rotateY(calc(var(--hero-ui-ry) * -0.14))
    rotate(calc(-1.7deg + var(--hero-marquee-fade, 0) * 0.8deg))
    scaleX(calc(1.01 - var(--hero-marquee-fade, 0) * 0.03));
  opacity: calc(0.86 - var(--hero-marquee-fade, 0) * 0.86);
  filter: none;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.36) 5%,
      #000 12%,
      #000 88%,
      rgba(0, 0, 0, 0.36) 95%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.36) 5%,
      #000 12%,
      #000 88%,
      rgba(0, 0, 0, 0.36) 95%,
      transparent 100%
    );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hero-marquee__track{
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  animation: heroMarqueeLoop 27s linear infinite;
  backface-visibility: hidden;
  will-change: transform;
}

.hero-marquee__group{
  display: flex;
  flex: 0 0 auto;
  justify-content: space-around;
  width: max-content;
  min-width: 100vw;
  transform: translate3d(0, 0, 0);
}

.hero-marquee span{
  flex: 0 0 auto;
  padding: 0 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.35vw, 5.35rem);
  font-weight: 900;
  line-height: 0.9;
  white-space: nowrap;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-shadow: none;
}

/* Hero entrance: hidden until the loader opens */
body:not(.is-hero-ready) .hero__eyebrow,
body:not(.is-hero-ready) .hero__title-line,
body:not(.is-hero-ready) .hero__meta,
body:not(.is-hero-ready) .hero__identity-row,
body:not(.is-hero-ready) .hero__role-prefix,
body:not(.is-hero-ready) .hero__statement-row,
body:not(.is-hero-ready) .hero__intro,
body:not(.is-hero-ready) .hud--top,
body:not(.is-hero-ready) .hud--bottom,
body:not(.is-hero-ready) .hero-marquee,
body:not(.is-hero-ready) .hero-scroll-cue{
  opacity: 0;
}

body:not(.is-hero-ready) .hero__title-line{
  translate: 0 18px;
  filter: blur(7px);
  clip-path: inset(100% 0 0 0);
}

body:not(.is-hero-ready) .hero__meta,
body:not(.is-hero-ready) .hero__intro{
  translate: 0 -8px;
  filter: blur(3px);
}

body:not(.is-hero-ready) .hero__identity-row,
body:not(.is-hero-ready) .hero__role-prefix,
body:not(.is-hero-ready) .hero__statement-row{
  translate: 0 18px;
  filter: blur(7px);
  clip-path: inset(100% 0 0 0);
}

body:not(.is-hero-ready) .hero__title-char{
  opacity: 0;
  translate: 0 10px;
}

body:not(.is-hero-ready) .hud--top{
  translate: 0 -8px;
}

body:not(.is-hero-ready) .hud--bottom,
body:not(.is-hero-ready) .hero-scroll-cue{
  translate: 0 8px;
}

body:not(.is-hero-ready) .hero-marquee{
  filter: blur(5px);
  clip-path: inset(0 100% 0 0);
}

body.is-hero-entering .hero__eyebrow,
body.is-hero-entering .hero__title-line{
  animation:
    heroTitleEntrance 680ms cubic-bezier(0.16, 1, 0.3, 1) 155ms both;
}

body.is-hero-entering .hero__meta{
  animation: heroHudFromTop 420ms cubic-bezier(0.16, 1, 0.3, 1) 50ms both;
}

body.is-hero-entering .hero__intro{
  animation: heroHudFromTop 460ms cubic-bezier(0.16, 1, 0.3, 1) 115ms both;
}

body.is-hero-entering .hero__identity-row{
  animation: heroTitleEntrance 660ms cubic-bezier(0.16, 1, 0.3, 1) 72ms both;
}

body.is-hero-entering .hero__role-prefix{
  animation: heroTitleEntrance 650ms cubic-bezier(0.16, 1, 0.3, 1) 145ms both;
}

body.is-hero-entering .hero__statement-row{
  animation: heroTitleEntrance 700ms cubic-bezier(0.16, 1, 0.3, 1) 225ms both;
}

body.is-hero-entering .hero__title-char{
  animation:
    heroTitleCharEntrance 520ms cubic-bezier(0.16, 1, 0.3, 1)
    calc(82ms + var(--i) * 34ms) both;
}

body.is-hero-entering .hud--top{
  animation:
    heroHudFromTop 360ms cubic-bezier(0.16, 1, 0.3, 1) 92ms both;
}

body.is-hero-entering .hud--bottom{
  animation:
    heroHudFromBottom 340ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}

body.is-hero-entering .hero-scroll-cue{
  animation:
    heroHudFromBottom 320ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
}

body.is-hero-entering .hero-marquee{
  animation:
    heroMarqueeEntrance 300ms ease-out 470ms both;
}

/* ── Ensure exit states override entrance ── */
body.is-hero-exiting .hero__eyebrow,
body.is-hero-exiting .hero__title-line,
body.is-hero-exiting .hero__title-char,
body.is-portfolio-ready .hero__eyebrow,
body.is-portfolio-ready .hero__title-line,
body.is-portfolio-ready .hero__title-char{
  animation: none;
}

body.is-portfolio-ready .hero-scroll-cue,
body.is-portfolio-ready .hero-marquee{
  animation: none;
}

body.is-hero-exiting .hud--top .mode-switch,
body.is-hero-exiting .hud--top .logo,
body.is-hero-exiting .hud--top .nav-list li,
body.is-hero-exiting .hud--bottom p:first-child,
body.is-hero-exiting .hud--bottom time{
  animation: none;
}

body.is-hero-exiting .hud--top .mode-switch{
  animation: none;
}

body.is-hero-exiting .hud--top .logo{
  animation: none;
}

body.is-hero-exiting .hud--top .nav-list li:nth-child(1){
  animation: none;
}

body.is-hero-exiting .hud--top .nav-list li:nth-child(2){
  animation: none;
}

body.is-hero-exiting .hud--top .nav-list li:nth-child(3){
  animation: none;
}

body.is-hero-exiting .hud--bottom p:first-child{
  animation: none;
}

body.is-hero-exiting .hud--bottom time{
  animation: none;
}

.hud{
  position: fixed;
  left: clamp(1.2rem, 2.5vw, 2.5rem);
  right: clamp(1.2rem, 2.5vw, 2.5rem);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  font-size: clamp(0.74rem, 0.9vw, 0.95rem);
  pointer-events: none;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.hud > *{
  pointer-events: auto;
}

.hud .mode-switch,
.hud .logo,
.hud .nav-list,
.hud--bottom p,
.hud--bottom time{
  font-family: var(--font-reference-ui);
  transform-style: preserve-3d;
  will-change: transform;
  text-shadow:
    calc(var(--hero-depth-x) * 0.12) calc(var(--hero-depth-y) * 0.12) 10px var(--home-ui-shadow, rgba(0, 0, 0, 0.38));
}

.hud .mode-switch{
  opacity: 1;
  filter: none;
  transform: none;
  transform-style: flat;
  will-change: transform;
}

.hud .hud-actions{
  opacity: 1;
  filter: none;
  transform:
    translate3d(calc(var(--hero-ui-x) * 0.68), calc(var(--hero-ui-y) * -0.48), 0);
  transform-style: flat;
  will-change: transform;
}

.hud .logo{
  opacity: 1;
  filter: none;
  transform:
    perspective(700px)
    translate3d(calc(var(--hero-ui-x) * 0.34), calc(var(--hero-ui-y) * -0.34), 16px)
    rotateX(calc(var(--hero-ui-rx) * 0.36))
    rotateY(calc(var(--hero-ui-ry) * 0.36));
  will-change: transform;
}

.hud .nav-list{
  opacity: 1;
  filter: none;
}

.hud--bottom p:first-child{
  opacity: 1;
  filter: none;
  transform:
    perspective(700px)
    translate3d(calc(var(--hero-ui-x) * -0.48), calc(var(--hero-ui-y) * 0.42), 14px)
    rotateX(calc(var(--hero-ui-rx) * 0.3))
    rotateY(calc(var(--hero-ui-ry) * 0.3));
  will-change: transform;
}

.hud--bottom time{
  opacity: 1;
  filter: none;
  transform:
    perspective(700px)
    translate3d(calc(var(--hero-ui-x) * 0.46), calc(var(--hero-ui-y) * 0.34), 14px)
    rotateX(calc(var(--hero-ui-rx) * 0.3))
    rotateY(calc(var(--hero-ui-ry) * 0.3));
  will-change: transform;
}

body.is-inside-tv .hud{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-inside-tv .hud > *{
  pointer-events: none;
}

.hud--top{
  top: clamp(1.05rem, 2.3vw, 2.25rem);
  opacity: calc(1 - var(--hero-ui-fade, 0));
  filter: none;
  transform:
    translate3d(
      0,
      calc(var(--hero-ui-fade, 0) * -12px),
      0
    );
  will-change: opacity, transform;
}

.hud--top .mode-switch{
  grid-column: auto;
  grid-row: 1;
}

.hud--top .logo{
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.hud--top .hud-actions{
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 1.8vw, 2rem);
}

.hud--top .nav-list{
  grid-column: auto;
  grid-row: auto;
}

.hud--bottom{
  bottom: clamp(1.05rem, 2vw, 2rem);
  align-items: end;
  opacity: calc(1 - var(--hero-ui-fade, 0));
  filter: none;
  transform:
    translate3d(
      0,
      calc(var(--hero-ui-fade, 0) * 14px),
      0
    );
  will-change: opacity, transform;
}

.hud--bottom p,
.hud--bottom time{
  margin: 0;
}

.hud--bottom p{
  color: var(--home-ui-muted, rgba(255, 248, 235, 0.62));
  font-size: 0.86em;
  letter-spacing: 0.02em;
}

.hud--bottom time{
  color: var(--home-ui, rgba(255, 249, 238, 0.72));
}

.hud--bottom time{
  grid-column: 3;
}

.hud--bottom time{
  justify-self: end;
}

.mode-switch{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  min-height: 2.35rem;
  padding: 0 1rem;
  border-radius: 999px;
  color: var(--home-ui, rgba(255, 255, 255, 0.78));
  text-align: left;
  transform-style: preserve-3d;
  transition: background-color 220ms ease, border-color 220ms ease;
}

.mode-switch.hud-label{
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  transform: none;
  transition: none;
  will-change: auto;
}

.mode-switch:hover,
.mode-switch:focus-visible{
  border-color: rgba(255, 255, 255, 0.4);
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.12) 100%
    );
}

.mode-switch:focus-visible{
  outline: 1px solid rgba(255, 255, 255, 0.32);
  outline-offset: 4px;
}

.mode-switch > span{
  display: block;
  font-family: var(--font-reference-ui);
  font-weight: 650;
  line-height: 1;
  transform: none;
  text-shadow:
    0 1px 2px var(--home-ui-shadow, rgba(72, 50, 31, 0.28)),
    calc(var(--hero-depth-x) * 0.24) calc(var(--hero-depth-y) * 0.24) 14px var(--home-ui-shadow-soft, rgba(44, 30, 18, 0.18));
  will-change: transform, text-shadow;
}

[data-hover-text]{
  display: inline-block;
  position: relative;
  cursor: none;
}

[data-hover-text]::before{
  content: "";
  position: absolute;
  inset: -14px -16px;
  display: block;
}

.hover-text__char{
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 50% 62%;
  transition:
    transform 500ms cubic-bezier(0.2, 1.42, 0.34, 1),
    opacity 220ms ease;
  transition-delay: 0ms;
  will-change: transform;
}

[data-hover-text]:hover .hover-text__char,
[data-hover-text]:focus-visible .hover-text__char,
.nav-link:hover [data-hover-text] .hover-text__char,
.nav-link:focus-visible [data-hover-text] .hover-text__char{
  transform: translate3d(0, -4px, 0) scale(1.2);
  transition-delay: calc(var(--hover-char-index, 0) * 30ms);
}

[data-hover-text]:not(:hover):not(:focus-visible) .hover-text__char{
  transition-delay: 0ms;
}

.logo{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: auto;
  min-width: 3.4rem;
  height: 2.45rem;
  min-height: 0;
  padding: 0 1rem;
  font-family: var(--font-reference-ui);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: rgba(20, 20, 20, 0.72);
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.56) 100%
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.42);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 8px 22px rgba(0, 0, 0, 0.10);

  backdrop-filter:
    blur(16px)
    saturate(1.04)
    brightness(1.04);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(1.04)
    brightness(1.04);

  transition: color 200ms ease, box-shadow 200ms ease;
}

.logo.hud-label{
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: clamp(1rem, 1.06vw, 1.08rem);
  font-weight: 750;
  color: var(--home-ui-strong, rgba(255, 248, 235, 0.92));
  background: none;
  box-shadow: none;
  text-shadow:
    0 1px 2px var(--home-ui-shadow, rgba(72, 50, 31, 0.30)),
    0 10px 22px var(--home-ui-shadow-soft, rgba(44, 30, 18, 0.18));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  transition: none;
}

.logo.hud-label[data-hover-text],
.mode-switch.hud-label{
  pointer-events: auto;
}

.logo.hud-label[data-hover-text]{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  white-space: nowrap;
}

.mode-switch.hud-label:hover,
.mode-switch.hud-label:focus-visible{
  border: 0;
  background: none;
  outline: 0;
}

.logo:hover,
.logo:focus-visible{
  color: rgba(0, 0, 0, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 26px rgba(0, 0, 0, 0.16);
}

.logo:focus-visible{
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}

.logo.hud-label[data-hover-text]:hover,
.logo.hud-label[data-hover-text]:focus-visible{
  color: var(--home-ui-strong, rgba(255, 248, 235, 0.92));
  box-shadow: none;
  outline: 0;
}

.nav-list{
  position: relative;
  z-index: 90;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(0.2rem, 0.5vw, 0.4rem);
  margin: 0;
  padding: 0.38rem 0.5rem;
  list-style: none;
  border-radius: 999px;
}

.mode-switch > span,
.logo,
.nav-list li,
.nav-list .nav-link{
  position: relative;
  z-index: 2;
}

.mode-switch > span,
.nav-list .nav-link{
  color: var(--home-nav-label, rgba(255, 248, 235, 0.90));
  text-shadow:
    0 1px 2px var(--home-ui-shadow, rgba(72, 50, 31, 0.30)),
    0 10px 20px var(--home-ui-shadow-soft, rgba(44, 30, 18, 0.16));
}

.nav-link{
  position: relative;
  display: inline-grid;
  grid-template-columns: auto;
  gap: 0;
  align-items: center;
  padding: 0.18rem 0.52rem;
  font-family: var(--font-reference-ui);
  font-weight: 650;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  cursor: none;
  border: 0;
  border-radius: 999px;
  outline: none;
  box-shadow: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    opacity 220ms ease;
}

.nav-link.is-active{
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

.nav-link:focus:not(:focus-visible){
  outline: none;
  box-shadow: none;
}

.nav-link:focus-visible{
  outline: 1px solid rgba(255, 255, 255, 0.28);
  outline-offset: 4px;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link::before{
  display: none;
}

.nav-link:hover{
  color: rgba(255, 255, 255, 0.96);
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.is-active{
  color: rgba(255, 255, 255, 0.95);
}

.nav-link.is-active::before{
  display: none;
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.nav-link.is-active:hover::before{
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.36);
}

.nav-link.is-drawer-active{
  color: rgba(255, 255, 255, 0.96);
}

.nav-link.is-drawer-active::before{
  display: none;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.28);
}

.nav-link.is-drawer-active::after{
  display: none;
}

.tv-stage{
  min-height: 820vh;
  margin-top: -100vh;
  position: relative;
  z-index: 2;
  background: var(--dark);
  opacity: 1;
  pointer-events: none;
}

@supports (height: 100svh) {
  .tv-stage{
    margin-top: -100svh;
  }
}

body.is-hero-exiting .tv-stage,
body.is-inside-tv .tv-stage{
  opacity: 1;
  pointer-events: auto;
}

body.is-portfolio-ready .tv-stage{
  opacity: 1;
  pointer-events: auto;
}

body.is-entry-scrub-active .tv-stage{
  opacity: 1;
  pointer-events: auto;
}

body.is-entry-scrub-active .sequence-canvas{
  opacity: 1;
}

body.is-entry-scrub-active.is-sequence-scrub-started .sequence-canvas{
  transition: none;
  transform: translate3d(0, 0, 0) scale(1);
}

body.is-entry-scrub-active.is-sequence-scrub-started .television{
  --tilt-x: 0deg !important;
  --tilt-y: 0deg !important;
  --tilt-scale: 1 !important;
  --parallax-x: 0px !important;
  --parallax-y: 0px !important;
}

body.is-entry-scrub-active:not(.is-sequence-scrub-started) .sequence-canvas{
  opacity: 0;
  pointer-events: none;
}

body.is-entry-scrub-active:not(.is-sequence-scrub-started):not(.is-entry-first-frame-locked) .tv-stage{
  opacity: 0;
  pointer-events: none;
}

body.is-entry-scrub-active.is-entry-first-frame-locked .tv-stage{
  opacity: 1;
  pointer-events: auto;
}

.tv-scene{
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
  perspective: 1250px;
  background: var(--dark);
}

.entry-first-frame{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url("assets/sequence/tv-entry-lite/frame_00001.webp?v=20260823_restore_1440_256");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0);
  filter: none !important;
  mix-blend-mode: normal !important;
  transition: none !important;
}

body.is-entry-first-frame-locked .entry-first-frame{
  opacity: 1;
  visibility: visible;
}

.sequence-canvas{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: #0a0a0a;
  opacity: 1;
  transform:
    translate3d(
      calc(var(--parallax-x, 0px)),
      calc(var(--parallax-y, 0px)),
      0
    )
    scale(1);
  filter: none !important;
  mix-blend-mode: normal !important;
  transition: none;
  will-change: transform;
}

.sequence-video{
  z-index: 0;
  object-fit: cover;
  object-position: center;
  background: #0a0a0a;
}

.sequence-handoff-frame{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  background:
    #0a0a0a
    url("assets/sequence/tv-entry-lite/frame_00001.webp?v=20260823_restore_1440_256")
    center / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: none !important;
}

body.is-sequence-webp-handoff .sequence-handoff-frame{
  opacity: 1;
  visibility: visible;
}

.tv-stage[data-booted="true"]
.sequence-canvas{
  opacity: 0;
}

.tv-stage[data-booted="true"] .entry-first-frame{
  opacity: 0 !important;
  visibility: hidden !important;
}

.tv-stage[data-booted="true"] .sequence-handoff-frame{
  opacity: 0 !important;
  visibility: hidden !important;
}

.glitch-transition-video{
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transform:
    translateZ(0)
    scale(1.012);
  transition:
    opacity
    96ms
    cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.tv-scene.is-glitch-playing
.glitch-transition-video{
  opacity: 1;
}

.tv-scene.is-glitch-mosaic-covering
.glitch-transition-video{
  opacity: 0;
  transition-duration: 0ms;
}

.tv-scene.is-glitch-complete
.glitch-transition-video{
  opacity: 0;
}

.glitch-mosaic{
  position: absolute;
  inset: -1px;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(var(--glitch-mosaic-columns, 24), minmax(0, 1fr));
  grid-template-rows: repeat(var(--glitch-mosaic-rows, 14), minmax(0, 1fr));
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  contain: strict;
  isolation: isolate;
}

.glitch-mosaic__tile{
  min-width: 0;
  min-height: 0;
  background: #000;
  opacity: 1;
  box-shadow: 0 0 0 1.5px #000;
}

.tv-scene.is-glitch-mosaic-covering
.glitch-mosaic{
  visibility: visible;
  pointer-events: auto;
}

.tv-scene.is-glitch-mosaic-revealing
.glitch-mosaic__tile{
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--glitch-mosaic-duration, 120ms);
  transition-delay: var(--glitch-mosaic-delay, 0ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.tv-scene.is-glitch-complete
.glitch-mosaic{
  visibility: hidden;
}

.tv-stage[data-booted="true"]
.screen-ui{
  animation-delay: 80ms;
}

.television{
  --progress: 0;
  --entry-progress: 0;
  --inside-progress: 0;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-scale: 1;
  --sequence-overlay: 0;
  --sequence-radius: 28px;
  position: relative;
  z-index: 2;
  width: 120vw;
  height: 120vh;
  left: -10vw;
  top: -10vh;
  opacity: var(--sequence-overlay);
  transform:
    translateY(calc(18vh - var(--entry-progress) * 18vh))
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc((0.18 + var(--entry-progress) * 0.82) * var(--tilt-scale)));
  transform-style: preserve-3d;
  transition: filter 220ms ease, opacity 220ms ease;
  will-change: transform;
}

.television__glow{
  display: none;
}

.television__body{
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.tv-stage[data-booted="true"] .television__body{
  pointer-events: auto;
  animation: hleSignalLock 650ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hleSignalLock {
  0% {
    opacity: 0;
    transform: scale(0.9) translateX(0);
    filter: drop-shadow(0 0 0 rgba(255, 0, 50, 0)) drop-shadow(0 0 0 rgba(0, 200, 255, 0)) blur(4px);
  }
  15% {
    opacity: 1;
    transform: scale(1.02) translateX(-6px) skewX(2deg);
    filter: drop-shadow(-15px 0 0 rgba(255, 0, 50, 0.6)) drop-shadow(15px 0 0 rgba(0, 255, 255, 0.6)) blur(0px);
  }
  25% {
    transform: scale(0.99) translateX(4px) skewX(-1deg);
    filter: drop-shadow(8px 0 0 rgba(255, 0, 50, 0.4)) drop-shadow(-8px 0 0 rgba(0, 255, 255, 0.4));
  }
  40% {
    transform: scale(1.005) translateX(-2px) skewX(0);
    filter: drop-shadow(-3px 0 0 rgba(255, 0, 50, 0.2)) drop-shadow(3px 0 0 rgba(0, 255, 255, 0.2));
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0) skewX(0);
    filter: drop-shadow(0 0 0 rgba(255, 0, 50, 0)) drop-shadow(0 0 0 rgba(0, 255, 255, 0)) blur(0px);
  }
}

.television__screen{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: var(--sequence-radius);
  background: #050505;
  box-shadow:
    inset 0 0 80px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 255, 102, calc(var(--sequence-overlay) * 0.08));
}

.television__screen::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(255,255,255,0.035) 50%, transparent 50%) 0 0 / 100% 4px,
    radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.72) 100%);
  mix-blend-mode: screen;
  opacity: 0.72;
  pointer-events: none;
}

.television__screen::after{
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(ellipse, transparent 45%, rgba(0, 0, 0, 0.38) 68%);
  pointer-events: none;
}

.screen-ui{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  color: var(--light);
  font-size: clamp(0.5rem, 0.72vw, 0.82rem);
  overflow: hidden;
  transform: translate3d(-50%, -50%, 34px);
}

.screen-deck{
  height: var(--screen-deck-height, 300%);
  transform: translate3d(0, calc(var(--screen-deck-y, 0px) * -1), 0);
  will-change: transform;
}

.screen-page{
  position: relative;
  height: var(--screen-page-height, 33.3333%);
  padding: clamp(4.5rem, 8vh, 6.5rem) 9vw clamp(4.5rem, 9vh, 7rem);
  overflow: hidden;
  transform: none;
  transform-origin: center center;
}

.screen-page--about,
.screen-page--projects{
  display: grid;
  align-content: center;
  gap: clamp(0.9rem, 2vh, 1.4rem);
}

.screen-page--contact{
  display: grid;
  align-content: start;
  gap: clamp(0.9rem, 2vh, 1.4rem);
  margin-top: 0;
  height: max-content;
  padding:
    clamp(6.2rem, 11.5vh, 8.4rem)
    9vw
    clamp(2rem, 4vh, 3.3rem);
  overflow: hidden;
}

.screen-page--about h2,
.screen-page--projects h2,
.screen-page--contact h2{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: 0;
  text-wrap: balance;
}

.screen-page--about h2,
.screen-page--projects h2{
  width: min(11ch, 100%);
  font-size: clamp(1.55rem, 2.55vw, 3.05rem);
}

.screen-page--contact h2{
  width: min(14ch, 100%);
  font-size: clamp(1.65rem, 2.65vw, 3.15rem);
  line-height: 0.95;
}

.screen-page--about p,
.screen-page--projects p,
.screen-page--contact p{
  max-width: 48ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.45;
}

/* Scoped overflow — screen-ui + screen-deck MUST stay hidden */

/* Force screen containers to clip */
.screen-ui,
.screen-deck{
  overflow: hidden;
}

/* Kill green bars */
.screen-page--projects::before,
.screen-page--projects::after{
  content: none !important;
  display: none !important;
}

/* Projects page */
.screen-page--projects{
  --projects-pad-x: clamp(2.8rem, 5vw, 5.6rem);
  --projects-pad-top: clamp(2.1rem, 3.8vh, 3rem);
  --projects-pad-bottom: clamp(1.8rem, 3.4vh, 2.8rem);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vh, 1.6rem);
  padding: var(--projects-pad-top) 0 var(--projects-pad-bottom);
  overflow: hidden;
}

/* Dual-rail carousel */

/* Card via CSS variables */

/* Size variants */

/* Subtle stagger */

/* Visual */

/* Visuals 1-16 */

/* 纯文字占位项（非链接）弱化展示，避免被误认成第三个可点项 */

[aria-disabled="true"]{
  cursor: not-allowed;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* The two marquee groups are byte-for-byte duplicates, so translating the
   combined compositor layer by exactly one half produces a seamless loop.
   Keeping this animation on translate3d avoids the occasional one-frame snap
   seen when mobile browsers re-rasterize a 2D transform at the loop boundary. */
@keyframes heroMarqueeLoop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes heroHudFromTop {
  from {
    opacity: 0;
    translate: 0 -8px;
    filter: blur(3px);
  }

  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

@keyframes heroHudFromBottom {
  from {
    opacity: 0;
    translate: 0 8px;
    filter: blur(3px);
  }

  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

@keyframes heroTitleEntrance {
  0% {
    opacity: 0;
    translate: 0 18px;
    filter: blur(7px);
    clip-path: inset(100% 0 0 0);
  }

  42% {
    opacity: 1;
    filter: blur(3px);
    clip-path: inset(18% 0 0 0);
  }

  100% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes heroTitleCharEntrance {
  from {
    opacity: 0;
    translate: 0 10px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes heroMarqueeEntrance {
  from {
    opacity: 0;
    filter: blur(5px);
    clip-path: inset(0 100% 0 0);
  }

  to {
    opacity: 0.86;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition,
  .page-transition__panel,
  .page-transition__seam,
  body.is-hero-exiting .hero::before,
  body.is-hero-exiting .hero::after,
  body.is-hero-exiting .hero__title,
  body.is-hero-exiting .hero__title-line,
  body.is-hero-exiting .hero__title-char,
  body.is-hero-exiting .hud--top,
  body.is-hero-exiting .hud--top .mode-switch,
  body.is-hero-exiting .hud--top .logo,
  body.is-hero-exiting .hud--top .nav-list li,
  body.is-hero-exiting .hud--bottom,
  body.is-hero-exiting .hud--bottom p:first-child,
  body.is-hero-exiting .hud--bottom time,
  body.is-hero-entering .hero__title-line,
  body.is-hero-entering .hero__title-char,
  body.is-hero-entering .hero__meta,
  body.is-hero-entering .hero__identity-row,
  body.is-hero-entering .hero__role-prefix,
  body.is-hero-entering .hero__statement-row,
  body.is-hero-entering .hero__intro,
  body.is-hero-entering .hud--top,
  body.is-hero-entering .hud--bottom,
  body.is-hero-entering .hero-scroll-cue,
  body.is-hero-entering .hero-marquee,
  body.is-hero-exiting .hero-marquee{
    animation: none !important;
  }

  body.is-hero-entering .hero__title-line,
  body.is-hero-entering .hero__title-char,
  body.is-hero-entering .hero__meta,
  body.is-hero-entering .hero__identity-row,
  body.is-hero-entering .hero__role-prefix,
  body.is-hero-entering .hero__statement-row,
  body.is-hero-entering .hero__intro,
  body.is-hero-entering .hud--top,
  body.is-hero-entering .hud--bottom,
  body.is-hero-entering .hero-scroll-cue,
  body.is-hero-entering .hero-marquee,
  body.is-hero-entering .hud--top .mode-switch,
  body.is-hero-entering .hud--top .logo,
  body.is-hero-entering .hud--top .nav-list li,
  body.is-hero-entering .hud--bottom p:first-child,
  body.is-hero-entering .hud--bottom time{
    animation: none !important;
    opacity: 1;
    translate: 0 0;
  }

  .hero__media-pill::before{
    animation: none !important;
  }

  .glitch-transition-video{
    opacity: 0;
  }

  .glitch-mosaic{
    display: none;
  }
}

@media (max-width: 820px) {
  body{
    cursor: auto;
  }

  .hero{
    padding: max(1.1rem, env(safe-area-inset-top)) 1.1rem max(1.1rem, env(safe-area-inset-bottom));
  }

  .hero__title-wrap{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    align-content: center;
    align-items: start;
    gap: clamp(0.75rem, 2.2vh, 1.15rem);
    width: 100%;
    min-height: calc(100svh - 2.2rem);
    padding: max(4.6rem, 10vh) 0 max(9rem, 19vh);
  }

  .hero__meta{
    grid-column: 1;
    grid-row: 1;
  }

  .hero__title{
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(2.85rem, 12.2vw, 5.9rem);
    max-width: 100%;
    line-height: 0.9;
    transform:
      perspective(1100px)
      translate3d(
        calc(var(--hero-title-x) * 0.08),
        calc(var(--hero-title-y) * 0.08 - 2px),
        8px
      )
      rotateX(calc(var(--hero-title-rx) * 0.08))
      rotateY(calc(var(--hero-title-ry) * 0.08));
  }

  .hero__identity-row,
  .hero__role-row{
    width: max-content;
  }

  .hero__statement-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: max-content;
  }

  .hero__statement-tail{
    display: block;
  }

  .hero__media-pill{
    width: clamp(5.1rem, 25vw, 9rem);
    min-height: 2rem;
  }

  .hero__title-line.hero-gooey{
    width: 5.58em;
  }

  .hero__intro{
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    grid-template-columns: 1fr;
    width: min(84%, 24rem);
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: clamp(0.68rem, 2.7vw, 0.78rem);
  }

  .hero__title-wrap > .hero-scroll-cue{
    grid-column: 1;
    grid-row: 4;
    justify-self: end;
  }

  

  

  

  .hero-marquee{
    bottom: 16vh;
  }

  .hud{
    position: absolute;
    left: 1rem;
    right: 1rem;
    grid-template-columns: 1fr auto;
  }

  .mode-switch{
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .hud--top .logo{
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    transform: none;
  }

  .nav-list{
    position: fixed;
    left: max(1rem, env(safe-area-inset-left));
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(0.7rem, env(safe-area-inset-bottom));
    z-index: 70;
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0.28rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(8, 8, 8, 0.58);
    backdrop-filter: blur(18px);
  }

  .nav-link{
    width: 100%;
    min-height: 2.35rem;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.72rem;
    white-space: nowrap;
    color: transparent;
  }

  .nav-link::after{
    content: attr(data-mobile-label);
    color: rgba(255, 255, 255, 0.68);
  }

  .nav-list li{
    min-width: 0;
  }

  .nav-link::before{
    display: none;
  }

  .nav-link.is-active{
    background: rgba(255, 255, 255, 0.12);
    color: transparent;
  }

  .nav-link.is-active::after{
    color: #fff;
  }

  

  .hud--bottom{
    grid-template-columns: 1fr;
    gap: 0.7rem;
    bottom: calc(4.25rem + env(safe-area-inset-bottom));
  }

  .hud--bottom p:nth-child(2),
  .hud--bottom time{
    justify-self: start;
  }

  .television{
    width: min(112vw, 760px);
    left: -6vw;
  }

  .screen-page{
    padding: 14vh 9% 10vh;
  }

  .screen-page--about,
  .screen-page--projects,
  .screen-page--contact{
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0.75rem;
  }

  .screen-page--about h2,
  .screen-page--about > p:last-child{
    grid-column: auto;
  }

  .screen-page--about h2{
    width: min(11ch, 100%);
    font-size: clamp(1.35rem, 6.9vw, 2.15rem);
    line-height: 1.02;
  }

  .screen-page--about > p:last-child,
  .screen-page--projects p,
  .screen-page--contact p{
    max-width: 31ch;
    font-size: 0.68rem;
    line-height: 1.55;
  }

  

  

}

@media (min-width: 679px) and (max-width: 820px) {
  .television{
    left: calc(50vw - 380px);
  }
}

/* ── Glass Drawer Panel ── */
.drawer-overlay{
  position: fixed;
  inset: 0;
  z-index: 72;
  background:
    radial-gradient(circle at 72% 30%, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at 16% 78%, rgba(232, 205, 170, 0.08), transparent 32%),
    rgba(4, 4, 4, 0.38);
  backdrop-filter: blur(5px) saturate(0.86) brightness(0.88);
  -webkit-backdrop-filter: blur(5px) saturate(0.86) brightness(0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms 320ms;
}

.drawer-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms 0ms;
}

.drawer-panel{
  --panel-x: 50%;
  --panel-y: 50%;
  --panel-tilt-x: 0deg;
  --panel-tilt-y: 0deg;
  position: fixed;
  right: var(--drawer-right);
  top: 50%;
  z-index: 142;
  width: var(--drawer-width);
  height: var(--drawer-height);
  transform-origin: 82% 50%;
  padding: clamp(24px, 2.3vw, 34px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background:
    radial-gradient(
      78% 62% at 18% 0%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.065) 34%,
      transparent 68%
    ),
    radial-gradient(
      92% 72% at 100% 16%,
      rgba(232, 205, 170, 0.11) 0%,
      rgba(232, 205, 170, 0.035) 34%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      rgba(22, 21, 19, 0.78) 0%,
      rgba(12, 12, 12, 0.70) 48%,
      rgba(5, 5, 6, 0.80) 100%
    );
  backdrop-filter: blur(32px) saturate(1.25) brightness(0.92);
  -webkit-backdrop-filter: blur(32px) saturate(1.25) brightness(0.92);
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-top-color: rgba(255, 255, 255, 0.32);
  border-left-color: rgba(255, 255, 255, 0.24);
  border-radius: clamp(24px, 2vw, 32px);
  box-shadow:
    0 42px 120px rgba(0, 0, 0, 0.54),
    0 14px 42px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(0, 0, 0, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  transform:
    translate3d(28px, -50%, 0)
    scale(0.985)
    rotateX(var(--panel-tilt-x))
    rotateY(var(--panel-tilt-y));
  transform-style: preserve-3d;
  perspective: 1000px;
  transition:
    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms 520ms,
    box-shadow 260ms ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      circle at var(--panel-x) var(--panel-y),
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.065) 18%,
      rgba(255, 255, 255, 0.00) 46%
    );
  opacity: 0;
  transition: opacity 220ms ease;
}

.drawer-panel.is-pointer-inside::before{
  opacity: 1;
}

.drawer-panel::after{
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border-radius: calc(clamp(24px, 2vw, 32px) - 8px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.35) 64%, transparent 100%);
  pointer-events: none;
  opacity: 0.42;
}

.drawer-panel.is-open{
  opacity: 1;
  visibility: visible;
  transform:
    translate3d(0, -50%, 0)
    scale(1)
    rotateX(var(--panel-tilt-x))
    rotateY(var(--panel-tilt-y));
  transition:
    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms 0ms;
}

.drawer-panel__close{
  position: relative;
  z-index: 2;
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.70);
  cursor: none;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.18);
  padding: 7px 13px;
  transition:
    color 200ms ease,
    border-color 200ms ease,
    background 200ms ease,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-panel__close:hover{
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
}

.drawer-panel__content{
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: clamp(12px, 1.5vw, 20px);
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.drawer-panel__pane{
  display: none;
}

.drawer-panel__pane.is-active{
  display: block;
  animation: drawerPaneIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes drawerPaneIn {
  from {
    opacity: 0;
    translate: 0 14px;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

.drawer-panel__title{
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 clamp(22px, 2.2vw, 32px);
  padding: 0 0 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  text-transform: uppercase;
}

.drawer-panel__title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 5px;
  height: 1.15em;
  border-radius: 99px;
  background: rgba(255, 248, 235, 0.86);
  box-shadow: 0 0 22px rgba(255, 248, 235, 0.42);
}

.drawer-panel__bio{
  max-width: 43em;
  font-size: clamp(12.5px, 0.9vw, 14px);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.66);
  margin: 0 0 24px;
}

.drawer-panel__tools{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.drawer-panel__tools span{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Timeline ── */

@media (max-width: 820px) {
  .drawer-panel{
    right: 8px;
    width: calc(100vw - 16px);
    height: min(72vh, 620px);
    max-height: none;
    top: clamp(72px, 9vh, 100px);
    border-radius: 22px;
    padding: 24px 20px 28px;
    transform:
      translate3d(0, 18px, 0)
      scale(0.985)
      rotateX(var(--panel-tilt-x))
      rotateY(var(--panel-tilt-y));
  }

  .drawer-panel.is-open{
    transform:
      translate3d(0, 0, 0)
      scale(1)
      rotateX(var(--panel-tilt-x))
      rotateY(var(--panel-tilt-y));
  }

  
}

body.is-hero-scrub-complete .hero__eyebrow,
body.is-hero-scrub-complete .hero__title,
body.is-hero-scrub-complete .hero__title *,
body.is-hero-scrub-complete .hero-scroll-cue,
body.is-hero-scrub-complete .hero-scroll-cue *,
body.is-hero-scrub-complete .hud--top,
body.is-hero-scrub-complete .hud--top *,
body.is-hero-scrub-complete .hud--bottom,
body.is-hero-scrub-complete .hud--bottom *,
body.is-hero-scrub-complete .hero-marquee,
body.is-hero-scrub-complete .hero-marquee *{
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
  text-shadow: none !important;
}

/* ── Hero copy exit: scatter + fade driven by --hero-copy-exit ── */
body.is-entry-scrub-active .hud--top .mode-switch,
body.is-entry-scrub-active .hud--top .logo,
body.is-entry-scrub-active .hud--top .hud-actions,
body.is-entry-scrub-active .hud--top .nav-list,
body.is-entry-scrub-active .hud--top .nav-list li,
body.is-entry-scrub-active .hud--bottom p:first-child,
body.is-entry-scrub-active .hud--bottom time,
body.is-entry-scrub-active .hero-scroll-cue,
body.is-entry-scrub-active .hero-marquee{
  transition: none !important;
  will-change: transform, opacity, filter;
}

body.is-entry-scrub-active .hud--top .mode-switch{
  opacity: calc(1 - var(--hero-copy-exit));
  transform:
    translate3d(
      calc(var(--hero-copy-exit) * -42px),
      calc(var(--hero-copy-exit) * -48px),
      0
    )
    scale(calc(1 - var(--hero-copy-exit) * 0.035));
  filter: blur(calc(var(--hero-copy-exit) * 2.2px));
}

body.is-entry-scrub-active .hud--top .logo{
  opacity: calc(1 - var(--hero-copy-exit));
  transform:
    translate3d(
      0,
      calc(var(--hero-copy-exit) * -52px),
      0
    )
    scale(calc(1 - var(--hero-copy-exit) * 0.04));
  filter: blur(calc(var(--hero-copy-exit) * 2px));
}

body.is-entry-scrub-active .hud--top .nav-list{
  opacity: calc(1 - var(--hero-copy-exit));
  transform:
    translate3d(
      calc(var(--hero-copy-exit) * 56px),
      calc(var(--hero-copy-exit) * -48px),
      0
    )
    scale(calc(1 - var(--hero-copy-exit) * 0.035));
  filter: blur(calc(var(--hero-copy-exit) * 2.2px));
}

body.is-entry-scrub-active .hud--top .hud-actions{
  opacity: calc(1 - var(--hero-copy-exit));
  transform:
    translate3d(
      calc(var(--hero-copy-exit) * 56px),
      calc(var(--hero-copy-exit) * -48px),
      0
    )
    scale(calc(1 - var(--hero-copy-exit) * 0.035));
  filter: blur(calc(var(--hero-copy-exit) * 2.2px));
}

body.is-entry-scrub-active .hud--top .hud-actions .nav-list{
  opacity: 1;
  transform: none;
  filter: none;
}

body.is-entry-scrub-active .hud--top .mode-switch.hud-label{
  opacity: 1;
  transform: none;
  filter: none;
}

body.is-entry-scrub-active .hud--top .nav-list li{
  opacity: 1;
  filter: none;
  transform:
    translate3d(
      calc(var(--hero-copy-exit) * 8px),
      calc(var(--hero-copy-exit) * -4px),
      0
    );
}

body.is-entry-scrub-active .hud--top .nav-list li:nth-child(1){
  transform:
    translate3d(
      calc(var(--hero-copy-exit) * 4px),
      calc(var(--hero-copy-exit) * -3px),
      0
    );
}

body.is-entry-scrub-active .hud--top .nav-list li:nth-child(2){
  transform:
    translate3d(
      calc(var(--hero-copy-exit) * 9px),
      calc(var(--hero-copy-exit) * -6px),
      0
    );
}

body.is-entry-scrub-active .hud--top .nav-list li:nth-child(3){
  transform:
    translate3d(
      calc(var(--hero-copy-exit) * 14px),
      calc(var(--hero-copy-exit) * -4px),
      0
    );
}

body.is-entry-scrub-active .hud--bottom p:first-child{
  opacity: calc(1 - var(--hero-copy-exit));
  transform:
    translate3d(
      calc(var(--hero-copy-exit) * -48px),
      calc(var(--hero-copy-exit) * 46px),
      0
    )
    scale(calc(1 - var(--hero-copy-exit) * 0.035));
  filter: blur(calc(var(--hero-copy-exit) * 2.2px));
}

body.is-entry-scrub-active .hud--bottom time{
  opacity: calc(1 - var(--hero-copy-exit));
  transform:
    translate3d(
      calc(var(--hero-copy-exit) * 48px),
      calc(var(--hero-copy-exit) * 46px),
      0
    )
    scale(calc(1 - var(--hero-copy-exit) * 0.035));
  filter: blur(calc(var(--hero-copy-exit) * 2.2px));
}

body.is-entry-scrub-active .hero-scroll-cue{
  opacity: calc(1 - var(--hero-copy-exit));
  transform:
    translate3d(
      0,
      calc(var(--hero-copy-exit) * 38px),
      0
    )
    scale(calc(1 - var(--hero-copy-exit) * 0.08));
  filter: blur(calc(var(--hero-copy-exit) * 2.6px));
}

body.is-entry-scrub-active .hero-marquee{
  opacity: calc(1 - var(--hero-copy-exit));
  transform:
    translate3d(
      0,
      calc(var(--hero-copy-exit) * 62px),
      0
    )
    scale(calc(1 + var(--hero-copy-exit) * 0.018));
  filter: blur(calc(var(--hero-copy-exit) * 2.8px));
}

body.is-entry-scrub-active:not(.is-sequence-scrub-started) .hero-marquee{
  opacity: calc(1 - var(--hero-copy-exit));
  filter: blur(calc(var(--hero-copy-exit) * 2.8px));
}

body.is-entry-scrub-active:not(.is-sequence-scrub-started) .hud--bottom{
  opacity: 1;
  filter: none;
}

body.is-entry-scrub-active.is-hero-mosaic-complete .hero__title-wrap,
body.is-entry-scrub-active.is-hero-mosaic-complete .hero-marquee,
body.is-entry-scrub-active.is-hero-mosaic-complete .hud--bottom{
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

body.is-entry-scrub-active:not(.is-hero-ready) .hero-marquee{
  opacity: 0;
  filter: blur(5px);
  clip-path: inset(0 100% 0 0);
}

body.is-entry-scrub-active:not(.is-hero-ui-disabled) .hud--top .nav-list,
body.is-entry-scrub-active:not(.is-hero-ui-disabled) .hud--top .nav-link{
  pointer-events: auto;
}

body.is-hero-ui-disabled .hud--top,
body.is-hero-ui-disabled .hud--top *,
body.is-hero-ui-disabled .hero-scroll-cue,
body.is-hero-ui-disabled .mode-switch,
body.is-hero-ui-disabled .logo,
body.is-hero-ui-disabled .nav-list,
body.is-hero-ui-disabled .nav-link{
  pointer-events: none !important;
}

/* DVDrod-inspired screen interior. Original styling using Song Fan content only. */
.screen-ui{
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.025), transparent 46%),
    #090909;
  color: #f2f1ec;
}

.screen-ui::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.034) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 62%, rgba(255, 255, 255, 0.026) 0 1px, transparent 1.6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 32%, rgba(255, 255, 255, 0.012));
  background-size: 5px 5px, 7px 7px, 100% 100%;
  opacity: 0.42;
}

.screen-deck,
.screen-page{
  position: relative;
  z-index: 1;
}

.screen-page{
  background: #090909;
}

/* DVDrod screen pass 6: scroll-timed, clipped section reveals inside the TV only. */
.tv-stage[data-booted="true"] .screen-ui{
  --dvd-bg: #0c0c0b;
  --dvd-bg-soft: #141413;
  --dvd-fg: #ededed;
  --dvd-muted: rgba(237, 237, 232, 0.62);
  --dvd-faint: rgba(237, 237, 232, 0.34);
  --dvd-line: rgba(237, 237, 232, 0.11);
  --dvd-line-strong: rgba(237, 237, 232, 0.38);
  --dvd-accent: #ff3d00;
  --dvd-green: #58dc7c;
}

.tv-stage[data-booted="true"] .dvd-nav{
  position: absolute !important;
  top: clamp(1.25rem, 3vh, 2.6rem) !important;
  left: clamp(1.55rem, 3vw, 2.75rem) !important;
  right: clamp(1.55rem, 3vw, 2.75rem) !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(0) !important;
  -webkit-backdrop-filter: blur(0) !important;
  transition:
    top 450ms cubic-bezier(0.4, 0, 0.2, 1),
    left 450ms cubic-bezier(0.4, 0, 0.2, 1),
    right 450ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 450ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 360ms ease,
    background 360ms ease,
    box-shadow 360ms ease,
    backdrop-filter 360ms ease;
}

.tv-stage[data-booted="true"] .dvd-nav.is-scrolled{
  top: clamp(0.78rem, 2vh, 1.1rem) !important;
  left: 22% !important;
  right: 22% !important;
  padding: clamp(0.72rem, 1.3vh, 0.95rem) clamp(1.3rem, 2.8vw, 2.25rem) !important;
  border-color: rgba(23, 21, 18, 0.12) !important;
  background: rgb(var(--home-surface-rgb) / 0.84) !important;
  box-shadow: 0 0.45rem 1.9rem rgba(23, 21, 18, 0.14) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

body.is-screen-light .tv-stage[data-booted="true"] .dvd-nav.is-scrolled{
  border-color: rgba(241, 238, 232, 0.12) !important;
  background: rgba(44, 41, 37, 0.84) !important;
  box-shadow: 0 0.45rem 1.9rem rgba(0, 0, 0, 0.18) !important;
}

.tv-stage[data-booted="true"] .dvd-nav__logo{
  font-family: var(--font-hero-display), "Noto Sans SC", sans-serif !important;
  font-size: clamp(0.88rem, 1vw, 1.12rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

.tv-stage[data-booted="true"] .dvd-nav__right{
  gap: clamp(1.4rem, 2.45vw, 2.2rem) !important;
}

.tv-stage[data-booted="true"] .dvd-nav a,
.tv-stage[data-booted="true"] .dvd-theme{
  font-size: clamp(0.62rem, 0.72vw, 0.8rem) !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.tv-stage[data-booted="true"] .dvd-deck.screen-deck{
  height: var(--screen-deck-height, 400vh) !important;
  transform: translate3d(0, calc(var(--screen-deck-y, 0px) * -1), 0) !important;
  will-change: transform !important;
}

.tv-stage[data-booted="true"] .dvd-section.screen-page{
  display: block !important;
  min-height: var(--screen-page-height, 100vh) !important;
  height: var(--screen-page-real-height, var(--screen-page-height, 100vh)) !important;
  padding-left: clamp(1.7rem, 3.15vw, 2.75rem) !important;
  padding-right: clamp(1.7rem, 3.15vw, 2.75rem) !important;
  overflow: hidden !important;
}

.tv-stage[data-booted="true"] .dvd-title-line{
  display: block !important;
  overflow: hidden !important;
}

.tv-stage[data-booted="true"] .dvd-title-line > span{
  display: block !important;
  transform: translate3d(0, 112%, 0) !important;
  transition: transform 1050ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: calc(var(--dvd-reveal-order, 0) * 70ms) !important;
}

.tv-stage[data-booted="true"] .is-dvd-visible .dvd-title-line > span,
.tv-stage[data-booted="true"] .dvd-title-line.is-dvd-visible > span{
  transform: translate3d(0, 0, 0) !important;
}

.tv-stage[data-booted="true"] .dvd-reveal{
  opacity: 0 !important;
  transform: translate3d(0, 32px, 0) !important;
  transition:
    opacity 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 760ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  transition-delay: calc(var(--dvd-reveal-order, 0) * 70ms) !important;
}

.tv-stage[data-booted="true"] .dvd-reveal.is-dvd-visible,
.tv-stage[data-booted="true"] .is-dvd-visible > .dvd-reveal{
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

.tv-stage[data-booted="true"] .dvd-work.screen-page--projects{
  min-height: max(var(--screen-page-height, 100vh), 1480px) !important;
  padding-top: clamp(6.7rem, 13vh, 8.5rem) !important;
  padding-bottom: clamp(5rem, 11vh, 7rem) !important;
}

.tv-stage[data-booted="true"] .dvd-section-head{
  display: flex !important;
  justify-content: space-between !important;
  align-items: end !important;
  gap: 2rem !important;
  margin-bottom: clamp(2.8rem, 6vh, 4rem) !important;
  padding-bottom: clamp(1.1rem, 2.4vh, 1.45rem) !important;
  border-bottom: 1px solid var(--dvd-line) !important;
}

.tv-stage[data-booted="true"] .dvd-section-head p{
  margin: 0 !important;
  color: var(--dvd-muted) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.75rem) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.tv-stage[data-booted="true"] .dvd-section-head h2{
  margin: 0 !important;
  font-size: clamp(4.4rem, 8.8vw, 8.8rem) !important;
  line-height: 0.86 !important;
}

.tv-stage[data-booted="true"] .dvd-about.screen-page--about{
  min-height: max(var(--screen-page-height, 100vh), 860px) !important;
  padding-top: clamp(6.7rem, 13vh, 8.5rem) !important;
  padding-bottom: clamp(2.4rem, 5vh, 3.4rem) !important;
}

.tv-stage[data-booted="true"] .dvd-about-grid{
  grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.82fr) !important;
  gap: clamp(3.2rem, 7vw, 6.5rem) !important;
  margin-top: clamp(3rem, 7vh, 5rem) !important;
}

.tv-stage[data-booted="true"] .dvd-side{
  gap: clamp(2.1rem, 4.5vh, 3.25rem) !important;
}

.tv-stage[data-booted="true"] .dvd-list-block h3,
.tv-stage[data-booted="true"] .dvd-skills h3{
  font-size: clamp(1.35rem, 2.5vw, 2.8rem) !important;
  letter-spacing: -0.075em !important;
}

.tv-stage[data-booted="true"] .dvd-skills{
  margin-top: clamp(3.2rem, 6.5vh, 4.8rem) !important;
}

.tv-stage[data-booted="true"] .dvd-skills span{
  min-height: 1.95rem !important;
  padding: 0.36rem 0.75rem !important;
  font-size: clamp(0.62rem, 0.74vw, 0.86rem) !important;
}

.tv-stage[data-booted="true"] .dvd-contact-page.screen-page--contact{
  display: flex !important;
  min-height: var(--screen-page-height, 100vh) !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding-top: clamp(4.5rem, 8vh, 5.75rem) !important;
  padding-bottom: clamp(3.2rem, 7vh, 5rem) !important;
  background: transparent !important;
}

/* The legacy contact page used pale text on a dark screen. The current paper
   surface is light, so bind contact details to the active theme foreground. */

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .dvd-nav.is-scrolled{
    left: 1rem !important;
    right: 1rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  

  
}

/* ====================================================
   Screen Interior Remake — DVDrod-style portfolio
   Scope: only the page inside the television screen.
   ==================================================== */

.tv-stage[data-booted="true"] .television__screen::before,
.tv-stage[data-booted="true"] .television__screen::after{
  opacity: 0 !important;
}

.tv-stage[data-booted="true"] .screen-ui{
  --dvd-bg: #0c0c0b;
  --dvd-bg-soft: #141413;
  --dvd-fg: #ededed;
  --dvd-muted: rgba(237, 237, 232, 0.62);
  --dvd-faint: rgba(237, 237, 232, 0.34);
  --dvd-line: rgba(237, 237, 232, 0.12);
  --dvd-accent: #ff4b2b;
  --dvd-green: #58dc7c;
  z-index: 8 !important;
  color: var(--dvd-fg) !important;
  background: var(--dvd-bg) !important;
  font-family: Inter, "Noto Sans SC", sans-serif !important;
  transform: translate3d(-50%, -50%, 0) !important;
  overflow: hidden !important;
  isolation: isolate;
}

body.is-screen-light .tv-stage[data-booted="true"] .screen-ui{
  --dvd-bg: #ededed;
  --dvd-bg-soft: #deded8;
  --dvd-fg: #11110f;
  --dvd-muted: rgba(17, 17, 15, 0.62);
  --dvd-faint: rgba(17, 17, 15, 0.34);
  --dvd-line: rgba(17, 17, 15, 0.14);
}

.tv-stage[data-booted="true"] .screen-ui::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.035) 0 1px, transparent 1.35px),
    radial-gradient(circle at 72% 58%, rgba(255, 255, 255, 0.025) 0 1px, transparent 1.45px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 34%, rgba(255, 255, 255, 0.01));
  background-size: 5px 5px, 7px 7px, 100% 100%;
  opacity: 0.13 !important;
  mix-blend-mode: screen;
}

body.is-screen-light .tv-stage[data-booted="true"] .screen-ui::before{
  opacity: 0.12 !important;
  mix-blend-mode: multiply;
}

.dvd-nav{
  position: absolute;
  z-index: 20;
  left: clamp(1.4rem, 3vw, 2.75rem);
  right: clamp(1.4rem, 3vw, 2.75rem);
  top: clamp(1.25rem, 3.2vh, 2.7rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  font-size: clamp(0.68rem, 0.78vw, 0.86rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  pointer-events: auto;
}

.dvd-nav a,
.dvd-theme{
  color: var(--dvd-muted);
  text-decoration: none;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.dvd-nav a:hover,
.dvd-nav a:focus-visible{
  color: var(--dvd-fg);
}

.dvd-nav__logo{
  color: var(--dvd-fg) !important;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.25vw, 1.42rem);
  font-weight: 900;
  letter-spacing: -0.08em;
}

.dvd-nav__right{
  display: flex;
  align-items: center;
  gap: clamp(1.3rem, 2.5vw, 2.35rem);
}

.dvd-theme{
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 2rem;
  padding: 0.36rem 0.72rem;
  border: 1px solid var(--dvd-line);
  border-radius: 999px;
  font: inherit;
  line-height: 1;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.dvd-theme:hover,
.dvd-theme:focus-visible{
  color: var(--dvd-bg);
  border-color: var(--dvd-fg);
  background: var(--dvd-fg);
  transform: translateY(-1px);
}

.dvd-theme em{
  font-style: normal;
}

.dvd-deck.screen-deck{
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: var(--screen-deck-height, 300vh) !important;
  transform: translate3d(0, calc(var(--screen-deck-y, 0px) * -1), 0) !important;
  will-change: transform;
}

.dvd-section.screen-page{
  position: relative !important;
  width: 100% !important;
  min-height: var(--screen-page-height, 100vh) !important;
  height: var(--screen-page-real-height, var(--screen-page-height, 100vh)) !important;
  padding: 0 clamp(1.4rem, 3vw, 2.75rem) !important;
  overflow: hidden !important;
  background: transparent !important;
  color: var(--dvd-fg) !important;
}

@keyframes dvdScrollRailSweep {
  0% {
    top: 0;
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  72% {
    opacity: 1;
  }

  100% {
    top: 80%;
    opacity: 0;
  }
}

@keyframes dvdScrollThumbSweep {
  0% {
    top: 0;
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  72% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes dvdScrollLabelPulse {
  0%,
  100% {
    opacity: 0.48;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.82;
    transform: translate3d(0, 3px, 0);
  }
}

.dvd-work.screen-page--projects{
  display: block !important;
  min-height: max(var(--screen-page-height, 100vh), 1820px) !important;
  padding-top: clamp(7rem, 14vh, 9rem) !important;
  padding-bottom: clamp(6rem, 12vh, 9rem) !important;
  overflow: hidden !important;
}

.dvd-section-head{
  display: block;
  margin-bottom: clamp(2.4rem, 6vh, 4.4rem);
}

.dvd-section-head p{
  margin: 0;
  color: var(--dvd-muted);
  font-size: clamp(0.82rem, 0.95vw, 1rem);
}

.dvd-section-head h2{
  width: max-content;
  max-width: 100%;
  margin: 0.55rem 0 0;
  font-family: var(--font-hero-display), "Noto Sans SC", sans-serif;
  font-size: clamp(5rem, 11vw, 10.2rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.1em;
  color: var(--dvd-fg);
}

.dvd-about.screen-page--contact{
  display: block !important;
  min-height: max(var(--screen-page-height, 100vh), 1980px) !important;
  padding-top: clamp(7rem, 14vh, 9rem) !important;
  padding-bottom: clamp(3rem, 8vh, 5rem) !important;
  overflow: hidden !important;
}

.dvd-about-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 0.72fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.dvd-side{
  display: grid;
  gap: clamp(2.4rem, 5vh, 4rem);
}

.dvd-list-block h3,
.dvd-skills h3{
  margin: 0 0 1.1rem;
  color: var(--dvd-fg);
  font-family: var(--font-hero-display), "Noto Sans SC", sans-serif;
  font-size: clamp(1.85rem, 3.4vw, 3.7rem);
  line-height: 0.86;
  letter-spacing: -0.1em;
}

.dvd-timeline{
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--dvd-line);
}

.dvd-timeline li{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--dvd-line);
}

.dvd-timeline span,
.dvd-timeline a,
.dvd-timeline strong{
  color: var(--dvd-fg);
  font-size: clamp(0.82rem, 0.95vw, 1rem);
  font-weight: 650;
}

.dvd-timeline a{
  position: relative;
  display: inline-flex;
  min-height: 1.9rem;
  align-items: baseline;
  gap: 0.34em;
  padding: 0.3rem 0.35rem;
  margin: -0.3rem -0.35rem;
  color: var(--dvd-fg);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.dvd-timeline a::after{
  content: "↗";
  color: var(--dvd-muted);
  font-size: 0.72em;
  font-weight: 500;
  opacity: 0.48;
  transform: translate3d(0, -0.08em, 0);
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.dvd-timeline a:hover,
.dvd-timeline a:focus-visible{
  text-decoration: underline;
}

.dvd-timeline a:hover::after,
.dvd-timeline a:focus-visible::after{
  color: var(--dvd-accent);
  opacity: 1;
  transform: translate3d(0.12em, -0.16em, 0);
}

.dvd-timeline a:focus-visible{
  border-radius: 0.2rem;
  outline: 1px solid color-mix(in srgb, var(--dvd-accent) 58%, transparent);
  outline-offset: 0.22rem;
}

.dvd-timeline em{
  display: block;
  margin-top: 0.22rem;
  color: var(--dvd-muted);
  font-style: normal;
  font-size: clamp(0.72rem, 0.82vw, 0.9rem);
}

.dvd-timeline strong{
  color: var(--dvd-muted);
  white-space: nowrap;
}

.dvd-skills{
  margin-top: clamp(6rem, 14vh, 10rem);
}

.dvd-skills > div{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  max-width: 62rem;
}

.dvd-skills span{
  display: inline-flex;
  min-height: 2.1rem;
  align-items: center;
  padding: 0.42rem 0.84rem;
  border: 1px solid var(--dvd-line);
  border-radius: 999px;
  color: var(--dvd-muted);
  background: rgba(255, 255, 255, 0.018);
  font-size: clamp(0.72rem, 0.84vw, 0.94rem);
}

@media (max-width: 820px) {
  .dvd-nav{
    align-items: flex-start;
  }

  .dvd-nav__right{
    gap: 1rem;
  }

  

  .dvd-about-grid{
    grid-template-columns: 1fr;
  }

  

  

  

  

  
}

.screen-page--projects,
.screen-page--contact{
  background: #090909;
  color: #f2f1ec;
}

.screen-page--projects{
  --projects-pad-x: clamp(2rem, 3.3vw, 3.2rem);
  --projects-pad-top: clamp(4.3rem, 9vh, 6.2rem);
  --projects-pad-bottom: clamp(2rem, 4vh, 3rem);
  gap: clamp(1.2rem, 2.6vh, 2rem);
}

.screen-page--contact{
  padding:
    clamp(4.8rem, 9vh, 6.8rem)
    clamp(2rem, 3.3vw, 3.2rem)
    clamp(2.4rem, 5vh, 3.7rem);
  align-content: start;
}

.screen-page--contact h2{
  width: min(14ch, 70vw);
  font-family: var(--font-hero-display);
  font-size: clamp(3.1rem, 6.8vw, 7rem);
  line-height: 0.86;
  letter-spacing: -0.09em;
  color: rgba(242, 241, 236, 0.96);
}

.screen-page--contact p{
  max-width: 54ch;
  color: rgba(242, 241, 236, 0.54);
  font-family: var(--font-reference-ui);
  font-size: clamp(0.76rem, 0.9vw, 1.02rem);
  line-height: 1.68;
}

/* Final screen-only correction after legacy screen resets. */

/* Screen-only Background Paper Shaders adaptation. */
.tv-stage[data-booted="true"] .screen-ui{
  --dvd-bg: var(--home-surface) !important;
  --dvd-bg-soft: #beb8ae !important;
  --dvd-fg: #171512 !important;
  --dvd-muted: rgba(23, 21, 18, 0.62) !important;
  --dvd-faint: rgba(23, 21, 18, 0.36) !important;
  --dvd-line: rgba(23, 21, 18, 0.14) !important;
  --dvd-line-strong: rgba(23, 21, 18, 0.36) !important;
  background: var(--home-surface) !important;
}

body.is-screen-light .tv-stage[data-booted="true"] .screen-ui{
  --dvd-bg: #2c2925 !important;
  --dvd-bg-soft: #37332e !important;
  --dvd-fg: #f1eee8 !important;
  --dvd-muted: rgba(241, 238, 232, 0.66) !important;
  --dvd-faint: rgba(241, 238, 232, 0.38) !important;
  --dvd-line: rgba(241, 238, 232, 0.14) !important;
  --dvd-line-strong: rgba(241, 238, 232, 0.38) !important;
  background: #2c2925 !important;
}

.tv-stage[data-booted="true"] .screen-ui::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 31% 24%, rgba(31, 41, 55, 0.075), transparent 18%),
    radial-gradient(circle at 78% 66%, rgba(255, 255, 255, 0.045), transparent 14%),
    radial-gradient(circle at 60% 48%, rgba(17, 24, 39, 0.055), transparent 16%);
  opacity: 0.82 !important;
  mix-blend-mode: normal !important;
  animation: screenPaperLight 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

body.is-screen-light .tv-stage[data-booted="true"] .screen-ui::before{
  background:
    radial-gradient(circle at 33% 25%, rgba(255, 255, 255, 0.12), transparent 10%),
    radial-gradient(circle at 76% 67%, rgba(0, 0, 0, 0.035), transparent 8%),
    radial-gradient(circle at 61% 50%, rgba(255, 255, 255, 0.08), transparent 7%);
  opacity: 0.82 !important;
}

.tv-stage[data-booted="true"] .screen-ui::after{
  content: "" !important;
  position: absolute !important;
  inset: -23% -9% -34% -24% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(31, 41, 55, 0.075), transparent 62%),
    radial-gradient(circle, rgba(255, 255, 255, 0.035), transparent 58%),
    radial-gradient(circle, rgba(17, 24, 39, 0.05), transparent 56%);
  filter: blur(56px);
  opacity: 0.88 !important;
  transform-origin: center;
  animation: screenPaperShadow 16s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

body.is-screen-light .tv-stage[data-booted="true"] .screen-ui::after{
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.11), transparent 62%),
    radial-gradient(circle, rgba(0, 0, 0, 0.035), transparent 58%),
    radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 56%);
}

.tv-stage[data-booted="true"] .screen-paper-shader{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: translateZ(0);
}

.screen-paper-shader{
  display: none;
}

.tv-stage[data-booted="true"] .dvd-deck.screen-deck{
  z-index: 2 !important;
}

.tv-stage[data-booted="true"] .dvd-section.screen-page{
  background: transparent !important;
}

.tv-stage[data-booted="true"] .dvd-nav{
  z-index: 20 !important;
}

.tv-stage[data-booted="true"] .dvd-nav:not(.is-scrolled) .dvd-nav__logo{
  color: rgba(18, 18, 18, 0.82) !important;
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.34);
}

body.is-screen-light .tv-stage[data-booted="true"] .dvd-nav:not(.is-scrolled) .dvd-nav__logo{
  color: rgba(245, 245, 240, 0.9) !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.24);
}

@keyframes screenPaperLight {
  0%,
  100% {
    transform: translate3d(-2.4%, -1.4%, 0) scale(0.96);
    opacity: 0.64;
  }

  50% {
    transform: translate3d(3.2%, 2.1%, 0) scale(1.065);
    opacity: 0.94;
  }
}

@keyframes screenPaperShadow {
  0%,
  100% {
    transform: translate3d(2.6%, -1.8%, 0) scale(0.95);
    opacity: 0.66;
  }

  50% {
    transform: translate3d(-3.4%, 2.5%, 0) scale(1.08);
    opacity: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv-stage[data-booted="true"] .screen-ui::before,
  .tv-stage[data-booted="true"] .screen-ui::after{
    animation: none;
    transform: none;
  }
}

/* Liquid glass treatment for the hero drawer buttons only. */

.hud--top .nav-list li{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  z-index: 3;
}

.hud--top .nav-list .nav-link{
  --liquid-nav-scale: 1;
  --liquid-nav-y: 0px;
  position: relative;
  isolation: isolate;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(4.55rem, 4.85vw, 5.65rem);
  min-height: clamp(2rem, 1.9vw, 2.38rem);
  padding: 0.44rem clamp(0.78rem, 0.9vw, 1.05rem);
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: var(--home-nav-label, rgba(255, 255, 255, 0.88));
  background: transparent;
  box-shadow: none;
  cursor: none;
  transform:
    translate3d(var(--magnetic-x, 0px), calc(var(--magnetic-y, 0px) + var(--liquid-nav-y)), 0)
    scale(var(--liquid-nav-scale));
  transition:
    color 200ms ease,
    filter 200ms ease,
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, filter;
}

.hud--top .nav-list .nav-link__label{
  position: relative;
  z-index: 5;
  display: block;
  color: var(--home-nav-label, rgba(255, 255, 255, 0.9));
  font: inherit;
  line-height: 1;
  text-shadow:
    0 1px 2px var(--home-ui-shadow, rgba(0, 0, 0, 0.22)),
    0 10px 20px var(--home-ui-shadow-soft, rgba(0, 0, 0, 0.10));
  transition:
    color 200ms ease,
    text-shadow 200ms ease,
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hud--top .nav-list .nav-link::before,
.hud--top .nav-list .nav-link::after{
  display: none;
  content: none;
}

.hud--top .nav-list .nav-link:hover{
  --liquid-nav-scale: 1.018;
  --liquid-nav-y: -1px;
  color: var(--home-nav-label-hover, rgba(255, 255, 255, 0.96));
  background: transparent;
  filter: none;
}

.hud--top .nav-list .nav-link:hover .nav-link__label{
  color: var(--home-nav-label-hover, rgba(255, 255, 255, 0.98));
  text-shadow:
    0 1px 2px var(--home-ui-shadow, rgba(0, 0, 0, 0.24)),
    0 0 14px var(--home-nav-glow, rgba(255, 255, 255, 0.18));
}

.hud--top .nav-list .nav-link:active{
  --liquid-nav-scale: 0.985;
  --liquid-nav-y: 1px;
  filter: brightness(0.9);
  transition-duration: 120ms;
}

.hud--top .nav-list .nav-link:focus-visible{
  outline: 0;
  background: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.hud--top .nav-list .nav-link.is-active,
.hud--top .nav-list .nav-link.is-drawer-active{
  color: var(--home-nav-label-hover, rgba(255, 255, 255, 0.98));
  background: transparent;
}

.hud--top .nav-list .nav-link.is-active .nav-link__label,
.hud--top .nav-list .nav-link.is-drawer-active .nav-link__label{
  color: var(--home-nav-label-hover, rgba(255, 255, 255, 1));
}

@media (max-width: 700px) {
  

  .hud--top .nav-list .nav-link{
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.55rem 0.4rem;
    color: rgba(255, 255, 255, 0.88);
  }

  .hud--top .nav-list .nav-link::after{
    display: none;
    content: none;
  }

  .hud--top .nav-list .nav-link__label{
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud--top .nav-list .nav-link,
  .hud--top .nav-list .nav-link__label{
    transition-duration: 1ms;
  }
}

/* iamliu-inspired motion pass: masked type rise, page-like scroll, single-sheet loader lift. */
.preloader{
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition:
    transform 880ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0ms linear 920ms;
}

.preloader.is-lifting{
  transform: translate3d(0, -101%, 0);
}

.preloader.is-done{
  visibility: hidden;
  opacity: 1;
  transform: translate3d(0, -101%, 0);
  pointer-events: none;
}

body:not(.is-hero-ready) .hero__identity-row,
body:not(.is-hero-ready) .hero__role-prefix,
body:not(.is-hero-ready) .hero__statement-row{
  opacity: 1;
  translate: 0 0;
  filter: none;
  clip-path: none;
}

body:not(.is-hero-ready) .hero__identity-copy,
body:not(.is-hero-ready) .hero__media-pill,
body:not(.is-hero-ready) .hero__role-prefix,
body:not(.is-hero-ready) .hero__title-line,
body:not(.is-hero-ready) .hero__statement-row > span{
  opacity: 1;
  translate: 0 112%;
  filter: none;
  clip-path: none;
}

body:not(.is-hero-ready) .hero__identity-row,
body:not(.is-hero-ready) .hero__role-row,
body:not(.is-hero-ready) .hero__statement-row,
body.is-hero-entering .hero__identity-row,
body.is-hero-entering .hero__role-row,
body.is-hero-entering .hero__statement-row{
  overflow: hidden;
}

body.is-hero-entering .hero__identity-row,
body.is-hero-entering .hero__statement-row{
  animation: none;
}

body.is-hero-entering .hero__identity-copy{
  animation: heroEditorialRise 760ms cubic-bezier(0.16, 1, 0.3, 1) 45ms both;
}

body.is-hero-entering .hero__media-pill{
  animation: heroEditorialRise 760ms cubic-bezier(0.16, 1, 0.3, 1) 78ms both;
}

body.is-hero-entering .hero__role-prefix{
  animation: heroEditorialRise 790ms cubic-bezier(0.16, 1, 0.3, 1) 108ms both;
}

body.is-hero-entering .hero__title-line{
  animation: heroEditorialRise 810ms cubic-bezier(0.16, 1, 0.3, 1) 126ms both;
}

body.is-hero-entering .hero__statement-row > span:first-child{
  animation: heroEditorialRise 820ms cubic-bezier(0.16, 1, 0.3, 1) 176ms both;
}

body.is-hero-entering .hero__statement-row > span:last-child{
  animation: heroEditorialRise 820ms cubic-bezier(0.16, 1, 0.3, 1) 212ms both;
}

@keyframes heroEditorialRise {
  from {
    translate: 0 112%;
  }

  to {
    translate: 0 0;
  }
}

body.is-entry-scrub-active .hero__title-wrap{
  opacity: 1;
  filter: none;
  transform: translate3d(
    0,
    calc(
      clamp(0.15rem, 0.7vh, 0.5rem) -
      var(--hero-copy-exit) * 100vh
    ),
    0
  );
}

body.is-entry-scrub-active .hud--top,
body.is-entry-scrub-active .hud--bottom{
  opacity: 1;
  filter: none;
  transform: translate3d(
    0,
    calc(var(--hero-copy-exit) * -100vh),
    0
  );
}

body.is-entry-scrub-active .hud--top .mode-switch,
body.is-entry-scrub-active .hud--top .logo,
body.is-entry-scrub-active .hud--top .hud-actions,
body.is-entry-scrub-active .hud--top .nav-list,
body.is-entry-scrub-active .hud--top .nav-list li,
body.is-entry-scrub-active .hud--bottom p:first-child,
body.is-entry-scrub-active .hud--bottom time,
body.is-entry-scrub-active .hero-scroll-cue,
body.is-entry-scrub-active .hero-marquee{
  opacity: 1;
  filter: none;
}

body.is-entry-scrub-active .hud--top .mode-switch.hud-label{
  transform: none;
  transform-style: flat;
}

body.is-entry-scrub-active .hud--top .logo{
  transform:
    perspective(700px)
    translate3d(calc(var(--hero-ui-x) * 0.34), calc(var(--hero-ui-y) * -0.34), 16px)
    rotateX(calc(var(--hero-ui-rx) * 0.36))
    rotateY(calc(var(--hero-ui-ry) * 0.36));
}

body.is-entry-scrub-active .hud--top .hud-actions{
  transform:
    translate3d(calc(var(--hero-ui-x) * 0.68), calc(var(--hero-ui-y) * -0.48), 0);
  transform-style: flat;
}

body.is-entry-scrub-active .hud--top .nav-list,
body.is-entry-scrub-active .hud--top .nav-list li{
  transform: none;
}

body.is-entry-scrub-active .hud--bottom p:first-child{
  transform:
    perspective(700px)
    translate3d(calc(var(--hero-ui-x) * -0.48), calc(var(--hero-ui-y) * 0.42), 14px)
    rotateX(calc(var(--hero-ui-rx) * 0.3))
    rotateY(calc(var(--hero-ui-ry) * 0.3));
}

body.is-entry-scrub-active .hud--bottom time{
  transform:
    perspective(700px)
    translate3d(calc(var(--hero-ui-x) * 0.46), calc(var(--hero-ui-y) * 0.34), 14px)
    rotateX(calc(var(--hero-ui-rx) * 0.3))
    rotateY(calc(var(--hero-ui-ry) * 0.3));
}

body.is-entry-scrub-active .hero-scroll-cue{
  opacity: 0.86;
  transform: none;
}

body.is-entry-scrub-active .hero-marquee,
body.is-entry-scrub-active:not(.is-sequence-scrub-started) .hero-marquee{
  opacity: 0.86;
  filter: none;
  transform:
    translate3d(
      0,
      calc(var(--hero-copy-exit) * -100vh),
      0
    )
    rotate(-1.7deg)
    scaleX(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .preloader,
  .preloader.is-lifting{
    transition-duration: 1ms !important;
  }

  body.is-hero-entering .hero__identity-copy,
  body.is-hero-entering .hero__media-pill,
  body.is-hero-entering .hero__role-prefix,
  body.is-hero-entering .hero__title-line,
  body.is-hero-entering .hero__statement-row > span{
    animation: none !important;
    translate: 0 0;
  }
}

/* Final precedence for the compact editorial marquee. */
.hero .hero-marquee{
  bottom: 3.25rem;
  min-height: 2.2rem;
  border: 0;
  border-top: 1px solid rgba(22, 20, 17, 0.13);
  background: transparent;
  opacity: calc(0.52 - var(--hero-marquee-fade, 0) * 0.52);
  filter: none;
  transform: translate3d(0, calc(var(--hero-marquee-fade, 0) * 20px), 0);
  -webkit-mask-image: none;
  mask-image: none;
}

.hero .hero-marquee span{
  padding: 0 1.25rem;
  color: var(--home-ui-muted);
  font-family: var(--font-hero-meta);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.is-entry-scrub-active .hero .hero-marquee,
body.is-entry-scrub-active:not(.is-sequence-scrub-started) .hero .hero-marquee{
  opacity: calc(0.52 - var(--hero-copy-exit) * 0.52);
  filter: none;
  transform: translate3d(0, calc(var(--hero-copy-exit) * -100vh), 0);
}

@media (max-width: 820px) {
  .hero .hero-marquee,
  body.is-entry-scrub-active .hero .hero-marquee,
  body.is-entry-scrub-active:not(.is-sequence-scrub-started) .hero .hero-marquee{
    bottom: 4.35rem;
    min-height: 1.8rem;
  }

  .hero .hero-marquee span{
    font-size: 0.58rem;
  }
}

.hero{
  height: 100vh;
  height: 100svh;
}

.hero__title-wrap.hero-editorial{
  height: 100%;
  min-height: 0;
}

/* Keep the mobile masthead compact and free of duplicated labels. */
@media (max-width: 820px) {
  .hud.hud--top{
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    right: 1rem;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .hud--top .logo{
    position: static;
    inset: auto;
    flex: 0 0 auto;
    transform: none !important;
  }

  .hud--top .hud-actions{
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    transform: none !important;
  }

  .hud--top .mode-switch{
    display: none;
  }

  

  .hud--top .nav-list li{
    display: inline-flex;
    min-width: 0;
  }

  .hud--top .nav-list .nav-link{
    width: auto;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0.5rem 0.65rem;
  }

  .hud--top .nav-list .nav-link__label{
    color: var(--home-nav-label);
    font-size: 0.68rem;
  }

  .hud.hud--bottom{
    display: none;
  }
}

@media (max-width: 360px) {
  .hud--top .nav-list .nav-link{
    padding-inline: 0.5rem;
  }

  .hud--top .nav-list .nav-link__label{
    font-size: 0.64rem;
  }
}

/* 20260714: reduce the hero to its essential identity and positioning. */
.hero__title-wrap.hero-editorial{
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 25.5rem);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 3.25rem;
  row-gap: 2.5rem;
  padding-top: 6.5rem;
  padding-bottom: 6.25rem;
}

.hero-editorial .hero__title{
  grid-column: 1;
  grid-row: 1;
}

.hero-editorial .hero__intro{
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
}

.hud--top .logo.hud-label{
  font-family: var(--font-hero-meta);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.14em;
}

.hud--top .mode-switch.hud-label > span{
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.64;
  text-transform: uppercase;
}

.hero-editorial__lead{
  max-width: 21rem;
}

.hero__title-wrap.hero-editorial > .hero-scroll-cue{
  grid-column: 2;
  grid-row: 2;
  flex-direction: column;
  gap: 0.48rem;
  margin: 0;
}

.hero-editorial .hero-scroll-cue__rail{
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 24%, transparent);
}

.hero-editorial .hero-scroll-cue__rail::before{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: var(--hero-scroll-fill, 0%);
  background: currentColor;
  opacity: 0.5;
}

.hero-editorial .hero-scroll-cue__thumb{
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 3px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
  transform: translate3d(-50%, var(--hero-scroll-thumb-y, 0px), 0);
  animation: heroScrollRailIdle 1.7s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}

body.is-hero-mosaic-active .hero-editorial .hero-scroll-cue__thumb{
  animation: none;
  transform: translate3d(-50%, var(--hero-scroll-thumb-y, 0px), 0);
}

@keyframes heroScrollRailIdle {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
  }

  18% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, 44px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-editorial .hero-scroll-cue__thumb{
    animation: none;
    opacity: 1;
  }
}

.hud.hud--bottom{
  display: none;
}

.hero .hero-marquee{
  bottom: 1.25rem;
}

@media (max-width: 1100px) {
  .hero__title-wrap.hero-editorial{
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
    column-gap: 2.5rem;
  }
}

@media (max-width: 820px) {
  .hero__title-wrap.hero-editorial{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 1.25rem;
    padding-top: 5.5rem;
    padding-bottom: 4.75rem;
  }

  .hero-editorial .hero__title{
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin-bottom: clamp(4.5rem, 10vh, 5.25rem);
  }

  .hero-editorial .hero__intro{
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    width: min(100%, 20rem);
    margin: 0;
  }

  .hero__title-wrap.hero-editorial > .hero-scroll-cue{
    grid-column: 1;
    grid-row: 3;
    margin: 4rem 0 0;
  }

  .hero .hero-marquee{
    display: none;
  }
}

@media (max-width: 480px) {
  .hero__title-wrap.hero-editorial{
    padding-top: 5.25rem;
    padding-bottom: 3.75rem;
  }
}

/* 20260715: editorial navigation and profile index. */
.hud--top .nav-list.studio-index{
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.35rem;
  width: auto;
  margin: 0;
  padding: 0.4rem 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hud--top .nav-list.studio-index::before,
.hud--top .nav-list.studio-index::after{
  content: none;
  display: none;
}

.hud--top .nav-list.studio-index li{
  position: relative;
  display: block;
  min-width: 0;
  overflow: visible;
}

.hud--top .nav-list.studio-index .nav-link{
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0.42rem;
  width: auto;
  min-width: 0;
  min-height: 2rem;
  padding: 0.38rem 0 0.42rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--home-nav-label, rgba(22, 20, 17, 0.84));
  filter: none;
  transform: translate3d(var(--magnetic-x, 0px), var(--magnetic-y, 0px), 0);
  transition:
    color 180ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hud--top .nav-list.studio-index .nav-link::before{
  content: none;
  display: none;
}

.hud--top .nav-list.studio-index .nav-link::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  background: currentColor;
  opacity: 0.86;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hud--top .nav-list.studio-index .nav-link:hover,
.hud--top .nav-list.studio-index .nav-link:focus-visible,
.hud--top .nav-list.studio-index .nav-link.is-drawer-active{
  color: var(--home-nav-label-hover, rgba(22, 20, 17, 0.98));
  background: transparent;
  filter: none;
}

.hud--top .nav-list.studio-index .nav-link:hover::after,
.hud--top .nav-list.studio-index .nav-link:focus-visible::after,
.hud--top .nav-list.studio-index .nav-link.is-drawer-active::after{
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.hud--top .nav-list.studio-index .nav-link:active{
  filter: none;
  transform: translate3d(var(--magnetic-x, 0px), calc(var(--magnetic-y, 0px) + 1px), 0);
}

.hud--top .nav-list.studio-index .nav-link:focus-visible{
  outline: 1px solid currentColor;
  outline-offset: 5px;
  box-shadow: none;
}

.hud--top .nav-list.studio-index .nav-link__index{
  display: block;
  color: currentColor;
  font-family: var(--font-hero-meta);
  font-size: 0.52rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.52;
  transition: opacity 180ms ease;
}

.hud--top .nav-list.studio-index .nav-link__label{
  position: relative;
  display: block;
  color: currentColor;
  font-family: var(--font-reference-ui);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
  transition: color 180ms ease;
}

.hud--top .nav-list.studio-index .nav-link:hover .nav-link__index,
.hud--top .nav-list.studio-index .nav-link.is-drawer-active .nav-link__index{
  opacity: 1;
}

body.is-drawer-open .hero{
  filter: blur(1.2px) saturate(0.72) brightness(0.88);
  transform: none;
  transition: filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.is-drawer-scroll-locked,
html.is-drawer-scroll-locked body{
  overflow: hidden !important;
  overscroll-behavior: none;
}

.drawer-overlay{
  z-index: 138;
  background: rgba(22, 20, 17, 0.22);
  backdrop-filter: blur(1.5px) saturate(0.78);
  -webkit-backdrop-filter: blur(1.5px) saturate(0.78);
  transition:
    opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms 380ms;
}

.drawer-overlay.is-open{
  transition:
    opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms 0ms;
}

.drawer-panel{
  --drawer-paper: #e8e4dc;
  --drawer-ink: #171512;
  --drawer-muted: rgba(23, 21, 18, 0.58);
  --drawer-faint: rgba(23, 21, 18, 0.38);
  --drawer-rule: rgba(23, 21, 18, 0.18);
  --drawer-gutter: 3rem;
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 150;
  display: flex;
  flex-direction: column;
  width: min(48rem, 48vw);
  min-width: 34rem;
  height: 100vh;
  height: 100svh;
  padding: 0 var(--drawer-gutter);
  overflow: hidden;
  color: var(--drawer-ink);
  background: var(--drawer-paper);
  border: 0;
  border-left: 1px solid var(--drawer-rule);
  border-radius: 0;
  box-shadow: -18px 0 60px rgba(23, 21, 18, 0.12);
  opacity: 1;
  visibility: hidden;
  transform: translate3d(101%, 0, 0);
  transform-origin: 100% 50%;
  transform-style: flat;
  perspective: none;
  transition:
    transform 620ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0ms 620ms;
  overscroll-behavior: contain;
}

.drawer-panel::before,
.drawer-panel::after,
.drawer-panel.is-pointer-inside::before{
  content: none;
  display: none;
}

body[data-active-drawer] .drawer-panel.is-open{
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    transform 620ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0ms 0ms;
}

.drawer-panel__masthead{
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 4.75rem;
  margin-inline: calc(var(--drawer-gutter) * -1);
  padding-inline: var(--drawer-gutter);
  overflow: hidden;
  background: #e1ddd5;
  border-bottom: 1px solid rgba(23, 21, 18, 0.24);
  box-shadow: 0 12px 26px rgba(23, 21, 18, 0.04);
  isolation: isolate;
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-panel__masthead::after{
  content: "";
  position: absolute;
  right: var(--drawer-gutter);
  bottom: 0;
  left: var(--drawer-gutter);
  height: 2px;
  background: #9a4e32;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-panel.is-match-mode .drawer-panel__masthead{
  background: #ddd8cf;
}

.drawer-panel.is-match-mode .drawer-panel__masthead::after{
  transform: scaleX(1);
}

.drawer-panel__identity{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--drawer-muted);
  font-family: var(--font-hero-meta);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.drawer-profile__section-label{
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--drawer-muted);
  font-family: var(--font-hero-meta);
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1;
}

.drawer-profile__section-label span{
  color: #9a4e32;
}

.drawer-profile__section-label h3{
  margin: 0;
  color: inherit;
  font: inherit;
}

.drawer-profile__actions{
  display: block;
  margin: 2.35rem 0 1.25rem;
  padding: 0.45rem;
  background: rgba(154, 78, 50, 0.065);
  border: 1px solid rgba(154, 78, 50, 0.2);
  border-radius: 0.4rem;
}

.drawer-profile__actions button{
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  min-height: 6.9rem;
  margin: 0;
  padding: 1rem 1.15rem;
  overflow: visible;
  color: var(--drawer-ink);
  background: rgba(238, 234, 226, 0.76);
  border: 1px solid rgba(23, 22, 19, 0.16);
  border-radius: 0.2rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 0.8rem 2rem rgba(42, 35, 28, 0.045);
  appearance: none;
  font-family: var(--font-hero-ui);
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition:
    color 220ms ease,
    background-color 360ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 360ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-profile__actions button::before{
  content: "";
  align-self: stretch;
  width: 2px;
  min-height: 3.9rem;
  justify-self: start;
  grid-column: 1;
  grid-row: 1;
  background: #9a4e32;
  transform: scaleY(0.42);
  transform-origin: 50% 50%;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-profile__action-index{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  margin-top: 0.12rem;
  color: #9a4e32;
  font-family: var(--font-hero-meta);
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1;
}

.drawer-profile__action-copy{
  display: grid;
  grid-column: 2;
  gap: 0.38rem;
  min-width: 0;
}

.drawer-profile__action-kicker,
.drawer-profile__action-time{
  color: var(--drawer-muted);
  font-family: var(--font-hero-meta);
  font-size: 0.54rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.drawer-profile__action-label{
  font-size: clamp(1.18rem, 1.65vw, 1.5rem);
  font-weight: 650;
  line-height: 1.15;
}

.drawer-profile__action-note{
  color: var(--drawer-muted);
  font-size: 0.68rem;
  font-weight: 450;
  line-height: 1.45;
  transition: color 220ms ease;
}

.drawer-profile__action-side{
  display: grid;
  grid-column: 3;
  grid-template-columns: auto 3.25rem;
  align-items: center;
  gap: 0.85rem;
}

.drawer-profile__action-arrow{
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--drawer-paper);
  background: var(--drawer-ink);
  border: 1px solid var(--drawer-ink);
  border-radius: 50%;
  font-size: 0.92rem;
  line-height: 1;
  box-shadow: 0 0.5rem 1.2rem rgba(23, 22, 19, 0.12);
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms ease;
}

.drawer-profile__actions button:hover,
.drawer-profile__actions button:focus-visible{
  color: var(--drawer-paper);
  background: var(--drawer-ink);
  border-color: var(--drawer-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 1.1rem 2.3rem rgba(23, 22, 19, 0.16);
}

.drawer-profile__actions button:hover::before,
.drawer-profile__actions button:focus-visible::before{
  transform: scaleY(1);
}

.drawer-profile__actions button:hover .drawer-profile__action-kicker,
.drawer-profile__actions button:hover .drawer-profile__action-note,
.drawer-profile__actions button:hover .drawer-profile__action-time,
.drawer-profile__actions button:focus-visible .drawer-profile__action-kicker,
.drawer-profile__actions button:focus-visible .drawer-profile__action-note,
.drawer-profile__actions button:focus-visible .drawer-profile__action-time{
  color: rgba(238, 234, 226, 0.62);
}

.drawer-profile__actions button:hover .drawer-profile__action-arrow,
.drawer-profile__actions button:focus-visible .drawer-profile__action-arrow{
  color: var(--drawer-ink);
  background: var(--drawer-paper);
  border-color: var(--drawer-paper);
  box-shadow: 0 0.65rem 1.5rem rgba(0, 0, 0, 0.2);
  transform: translate3d(0.16rem, -0.16rem, 0) rotate(5deg);
}

.drawer-profile__actions button:focus-visible{
  outline: 1px solid var(--drawer-ink);
  outline-offset: 4px;
}

.drawer-panel__pane--profile.is-match-active > :not(.drawer-match){
  display: none;
}

.drawer-match{
  min-height: 100%;
  color: var(--drawer-ink);
  opacity: 0;
  transform: translateY(0.8rem);
  transition:
    opacity 320ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-match.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.drawer-match__masthead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--drawer-rule);
}

.drawer-match__masthead p{
  margin: 0;
  color: var(--drawer-faint);
  font-family: var(--font-hero-meta);
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.drawer-match__navigation{
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.drawer-match__back,
.drawer-match__previous{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0;
  color: var(--drawer-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  font-family: var(--font-hero-ui);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 180ms ease;
}

.drawer-match__previous{
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  min-width: 9.75rem;
  min-height: 3.15rem;
  padding: 0.38rem 0;
  color: var(--drawer-ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--drawer-rule);
  border-bottom: 1px solid var(--drawer-rule);
  border-radius: 0;
  transition:
    border-color 180ms ease;
}

.drawer-match__previous[hidden]{
  display: none;
}

.drawer-match__back span,
.drawer-match__previous-icon{
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-match__previous-icon{
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--drawer-paper);
  background: var(--drawer-ink);
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-match__previous-copy{
  display: grid;
  gap: 0.18rem;
  text-align: left;
}

.drawer-match__previous-copy small{
  color: var(--drawer-faint);
  font-family: var(--font-hero-meta);
  font-size: 0.46rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.drawer-match__previous-copy strong{
  color: var(--drawer-ink);
  font-family: var(--font-hero-ui);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1;
}

.drawer-match__back:hover,
.drawer-match__back:focus-visible{
  color: var(--drawer-ink);
}

.drawer-match__previous:hover,
.drawer-match__previous:focus-visible{
  color: var(--drawer-ink);
  background: transparent;
  border-color: rgba(154, 78, 50, 0.72);
}

.drawer-match__back:hover span,
.drawer-match__back:focus-visible span,
.drawer-match__previous:hover .drawer-match__previous-icon,
.drawer-match__previous:focus-visible .drawer-match__previous-icon{
  transform: translateX(-0.2rem);
}

.drawer-match__previous:hover .drawer-match__previous-icon,
.drawer-match__previous:focus-visible .drawer-match__previous-icon{
  background: #9a4e32;
}

.drawer-match__back:focus-visible,
.drawer-match__previous:focus-visible{
  outline: 1px solid var(--drawer-ink);
  outline-offset: 0.25rem;
}

.drawer-match__progress{
  position: relative;
  height: 1px;
  margin: 0 0 2.5rem;
  overflow: hidden;
  background: var(--drawer-rule);
}

.drawer-match__progress span{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #9a4e32;
  transition: width 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-match__question-stage,
.drawer-match__result{
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.drawer-match.is-advancing .drawer-match__question-stage,
.drawer-match.is-advancing .drawer-match__result{
  opacity: 0;
  transform: translateY(-0.55rem);
}

.drawer-match__question{
  max-width: 34rem;
  margin: 1.15rem 0 0;
  color: var(--drawer-ink);
  font-family: var(--font-hero-display);
  font-size: clamp(2.35rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
}

.drawer-match__question:focus,
.drawer-match__result h2:focus{
  outline: none;
}

.drawer-match__hint{
  max-width: 32rem;
  margin: 0;
  color: var(--drawer-muted);
  font-family: var(--font-hero-ui);
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0;
}

.drawer-match__question-meta{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
  margin: 1rem 0 1.75rem;
}

.drawer-match__options{
  border-top: 1px solid var(--drawer-rule);
}

.drawer-match__options button{
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 3.8rem;
  margin: 0;
  padding: 0 0.85rem 0 0;
  color: var(--drawer-muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--drawer-rule);
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  text-align: left;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    padding 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-match__options button > span,
.drawer-match__options button > small{
  color: var(--drawer-faint);
  font-family: var(--font-hero-meta);
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.drawer-match__options button > strong{
  color: inherit;
  font-family: var(--font-hero-ui);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.drawer-match__options button:hover,
.drawer-match__options button:focus-visible{
  padding-left: 0.85rem;
  color: var(--drawer-paper);
  background: var(--drawer-ink);
}

.drawer-match__options button:hover > span,
.drawer-match__options button:hover > small,
.drawer-match__options button:focus-visible > span,
.drawer-match__options button:focus-visible > small{
  color: rgba(232, 228, 220, 0.58);
}

.drawer-match__options button:focus-visible{
  outline: 1px solid var(--drawer-ink);
  outline-offset: -1px;
}

.drawer-match__options button.is-selected:not(:hover):not(:focus-visible){
  padding-left: 0.85rem;
  color: var(--drawer-ink);
  background: rgba(154, 78, 50, 0.07);
  box-shadow: inset 2px 0 #9a4e32;
}

.drawer-match__confirm{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.35rem;
  margin: 1rem 0 0;
  padding: 0 1rem;
  color: var(--drawer-paper);
  background: var(--drawer-ink);
  border: 1px solid var(--drawer-ink);
  border-radius: 0;
  font-family: var(--font-hero-ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease;
}

.drawer-match__confirm small{
  color: rgba(232, 228, 220, 0.58);
  font-family: var(--font-hero-meta);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0;
}

.drawer-match__confirm:hover,
.drawer-match__confirm:focus-visible{
  color: var(--drawer-ink);
  background: transparent;
}

.drawer-match__confirm:hover small,
.drawer-match__confirm:focus-visible small{
  color: var(--drawer-faint);
}

.drawer-match__confirm:focus-visible{
  outline: 1px solid var(--drawer-ink);
  outline-offset: 2px;
}

.drawer-match__confirm:disabled{
  color: var(--drawer-faint);
  background: transparent;
  border-color: var(--drawer-rule);
  cursor: default;
}

.drawer-match__confirm:disabled small{
  color: var(--drawer-faint);
}

.drawer-match__confirm[hidden]{
  display: none;
}

.drawer-match__custom-entry{
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--drawer-rule);
  animation: drawer-match-custom-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-match__custom-entry[hidden]{
  display: none;
}

.drawer-match__custom-entry label,
.drawer-match__custom-entry small{
  display: block;
  color: var(--drawer-faint);
  font-family: var(--font-hero-meta);
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

.drawer-match__custom-entry > div{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  margin: 0.55rem 0 0.45rem;
}

.drawer-match__custom-entry input{
  width: 100%;
  min-width: 0;
  height: 2.6rem;
  padding: 0;
  color: var(--drawer-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--drawer-ink);
  border-radius: 0;
  outline: 0;
  font-family: var(--font-hero-ui);
  font-size: 0.82rem;
  letter-spacing: 0;
}

.drawer-match__custom-entry input::placeholder{
  color: var(--drawer-faint);
}

.drawer-match__custom-entry input:focus-visible{
  border-bottom-color: #9a4e32;
}

.drawer-match__custom-entry button{
  min-width: 4.5rem;
  height: 2.6rem;
  padding: 0 1rem;
  color: var(--drawer-paper);
  background: var(--drawer-ink);
  border: 1px solid var(--drawer-ink);
  border-radius: 0;
  font-family: var(--font-hero-ui);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}

.drawer-match__custom-entry button:disabled{
  color: var(--drawer-faint);
  background: transparent;
  border-color: var(--drawer-rule);
  cursor: default;
}

@keyframes drawer-match-custom-in {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drawer-match__options:has(button:nth-child(6)) button{
  min-height: 3.1rem;
}

@media (min-width: 821px) and (max-height: 820px) {
  .drawer-match__progress{
    margin-bottom: 2rem;
  }

  .drawer-match__question-meta{
    margin: 0.75rem 0 1rem;
  }

  .drawer-match__options button{
    min-height: 3rem;
  }

  .drawer-match__options:has(button:nth-child(6)) button{
    min-height: 2.65rem;
  }

  .drawer-match__custom-entry{
    padding-block: 0.75rem;
  }
}

.drawer-match__result > .drawer-panel__eyebrow{
  margin-bottom: 1.25rem;
}

.drawer-match__scoreline{
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--drawer-rule);
}

.drawer-match__scoreline strong{
  color: var(--drawer-ink);
  font-family: var(--font-hero-display);
  font-size: clamp(5rem, 9vw, 7.5rem);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: 0;
}

.drawer-match__scoreline span{
  padding-bottom: 0.2rem;
  color: var(--drawer-faint);
  font-family: var(--font-hero-meta);
  font-size: 0.66rem;
  line-height: 1;
  letter-spacing: 0;
}

.drawer-match__result h2{
  margin: 1.6rem 0 0;
  color: var(--drawer-ink);
  font-family: var(--font-hero-display);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.drawer-match__result-copy{
  max-width: 32rem;
  margin: 1rem 0 2.75rem;
  color: var(--drawer-muted);
  font-family: var(--font-hero-ui);
  font-size: 0.82rem;
  line-height: 1.75;
  letter-spacing: 0;
}

.drawer-match__evidence{
  border-top: 1px solid var(--drawer-rule);
}

.drawer-match__evidence-head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 0.8rem 0;
  color: var(--drawer-faint);
  border-bottom: 1px solid var(--drawer-rule);
  font-family: var(--font-hero-meta);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0;
}

.drawer-match__evidence ol{
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-match__evidence li{
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--drawer-rule);
}

.drawer-match__evidence li > span,
.drawer-match__evidence li > b,
.drawer-match__evidence li small{
  color: var(--drawer-faint);
  font-family: var(--font-hero-meta);
  font-size: 0.57rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

.drawer-match__evidence li > b{
  white-space: nowrap;
}

.drawer-match__evidence li div{
  display: grid;
  gap: 0.38rem;
}

.drawer-match__evidence li strong{
  color: var(--drawer-ink);
  font-family: var(--font-hero-ui);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.drawer-match__evidence li p{
  max-width: 30rem;
  margin: 0.1rem 0 0;
  color: var(--drawer-muted);
  font-family: var(--font-hero-ui);
  font-size: 0.72rem;
  line-height: 1.65;
  letter-spacing: 0;
}

.drawer-match__result-actions{
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--drawer-rule);
  border-bottom: 1px solid var(--drawer-rule);
}

.drawer-match__result-actions button{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 18rem);
  min-height: 4rem;
  padding: 0 1.1rem;
  color: var(--drawer-paper);
  background: var(--drawer-ink);
  border: 1px solid var(--drawer-ink);
  border-radius: 0.15rem;
  box-shadow: none;
  appearance: none;
  font-family: var(--font-hero-ui);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-match__result-actions button:hover,
.drawer-match__result-actions button:focus-visible{
  color: var(--drawer-paper);
  background: #2d2924;
  border-color: #9a4e32;
  transform: translateY(-0.1rem);
}

.drawer-match__result-actions button:focus-visible{
  outline: 1px solid var(--drawer-ink);
  outline-offset: -1px;
}

.drawer-match__method{
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 0.22rem;
  width: min(100%, 28rem);
  margin: 1.15rem 0 0 auto;
  padding: 0.55rem 0;
  color: var(--drawer-faint);
  border-top: 1px solid var(--drawer-rule);
  border-bottom: 1px solid var(--drawer-rule);
  text-align: right;
}

.drawer-match__method > span{
  font-family: var(--font-hero-meta);
  font-size: 0.46rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.drawer-match__method p,
.drawer-match__method small{
  max-width: 28rem;
  margin: 0;
  font-family: var(--font-hero-ui);
  font-size: 0.5rem;
  line-height: 1.65;
  letter-spacing: 0;
}

.drawer-match__method a{
  width: fit-content;
  color: var(--drawer-muted);
  font-family: var(--font-hero-ui);
  font-size: 0.5rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-color: var(--drawer-rule);
  text-underline-offset: 0.2rem;
}

.drawer-match__method a:hover,
.drawer-match__method a:focus-visible{
  color: var(--drawer-ink);
}

.drawer-match__method small{
  display: block;
  color: var(--drawer-faint);
}

.drawer-panel__location{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.drawer-panel__location i{
  display: block;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: #9a4e32;
}

.drawer-panel__close{
  position: relative;
  z-index: 2;
  display: grid;
  align-self: center;
  flex: 0 0 auto;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  color: var(--drawer-ink);
  background: transparent;
  border: 1px solid var(--drawer-rule);
  border-radius: 50%;
  box-shadow: none;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-panel__close span{
  display: block;
  font-family: var(--font-reference-ui);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-0.08em);
}

.drawer-panel__close:hover,
.drawer-panel__close:focus-visible{
  color: var(--drawer-paper);
  background: var(--drawer-ink);
  border-color: var(--drawer-ink);
  transform: rotate(90deg);
}

.drawer-panel__close:focus-visible{
  outline: 1px solid var(--drawer-ink);
  outline-offset: 4px;
}

.drawer-panel__content{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 2rem 0 3rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--drawer-faint) transparent;
}

.drawer-panel__content::-webkit-scrollbar{
  display: block;
  width: 4px;
  height: 4px;
}

.drawer-panel__content::-webkit-scrollbar-track{
  background: transparent;
}

.drawer-panel__content::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: var(--drawer-faint);
}

.drawer-panel__content::-webkit-scrollbar-thumb:hover{
  background: var(--drawer-muted);
}

.drawer-panel__pane{
  display: none;
}

.drawer-panel__pane.is-active{
  display: block;
  animation: drawerPaneIn 560ms 170ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes drawerPaneIn {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.drawer-pane__header{
  display: grid;
  gap: 1.1rem;
  margin-bottom: 2.25rem;
}

.drawer-panel__eyebrow{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--drawer-muted);
  font-family: var(--font-hero-meta);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.drawer-panel__eyebrow span{
  color: #9a4e32;
}

.drawer-panel__title{
  position: relative;
  margin: 0;
  padding: 0;
  color: var(--drawer-ink);
  border: 0;
  font-family: var(--font-hero-display);
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: none;
}

.drawer-panel__title::before{
  content: none;
  display: none;
}

.drawer-panel__bio{
  max-width: 34rem;
  margin: 0 0 3rem;
  color: var(--drawer-muted);
  font-family: var(--font-hero-ui);
  font-size: 0.92rem;
  line-height: 1.9;
  letter-spacing: 0;
}

.drawer-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 3rem;
  border-top: 1px solid var(--drawer-rule);
}

.drawer-facts div{
  min-height: 6.3rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--drawer-rule);
}

.drawer-facts div:nth-child(odd){
  padding-right: 1.5rem;
}

.drawer-facts div:nth-child(even){
  padding-left: 1.5rem;
  border-left: 1px solid var(--drawer-rule);
}

.drawer-facts dt{
  margin: 0 0 1.2rem;
  color: var(--drawer-faint);
  font-family: var(--font-hero-meta);
  font-size: 0.6rem;
  line-height: 1;
  letter-spacing: 0;
}

.drawer-facts dd{
  margin: 0;
  color: var(--drawer-ink);
  font-family: var(--font-hero-ui);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
}

.drawer-panel__tools{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--drawer-rule);
}

.drawer-panel__tools span{
  display: block;
  padding: 0.85rem 0;
  color: var(--drawer-muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--drawer-rule);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-hero-meta);
  font-size: 0.66rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.drawer-panel__folio{
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  color: var(--drawer-faint);
  border-top: 1px solid var(--drawer-rule);
  font-family: var(--font-hero-meta);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0;
}

.drawer-panel__folio-page::before{
  content: "01 / 01";
}

@media (max-width: 1100px) {
  .hud--top .nav-list.studio-index{
    gap: 1rem;
  }

  .drawer-panel{
    --drawer-gutter: 2.25rem;
    width: min(42rem, 56vw);
    min-width: 31rem;
    padding-inline: var(--drawer-gutter);
  }

  .drawer-panel__title{
    font-size: 3.8rem;
  }
}

@media (max-width: 820px) {
  .hud--top .nav-list.studio-index{
    position: static;
    display: flex;
    gap: 0.8rem;
    width: auto;
    padding: 0.25rem 0;
    transform: none !important;
  }

  .hud--top .nav-list.studio-index .nav-link{
    width: auto;
    min-height: 2.1rem;
    padding: 0.38rem 0 0.42rem;
  }

  .hud--top .nav-list.studio-index .nav-link__index{
    display: none;
  }

  .hud--top .nav-list.studio-index .nav-link__label{
    color: var(--home-nav-label);
    font-size: 0.68rem;
  }

  .drawer-panel{
    --drawer-gutter: 1.5rem;
    inset: 0;
    width: 100%;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    padding-inline: var(--drawer-gutter);
    border-left: 0;
    border-radius: 0;
    transform: translate3d(101%, 0, 0);
  }

  body[data-active-drawer] .drawer-panel.is-open{
    transform: translate3d(0, 0, 0);
  }

  .drawer-panel__masthead{
    min-height: 4.75rem;
  }

  .drawer-panel__identity{
    gap: 0.8rem;
    font-size: 0.56rem;
  }

  .drawer-panel__content{
    padding: 3.25rem 0 2.5rem;
  }

  .drawer-pane__header{
    margin-bottom: 2rem;
  }

  .drawer-panel__title{
    font-size: 3.25rem;
  }

  
}

@media (max-width: 520px) {
  .hud--top .nav-list.studio-index{
    gap: 0.62rem;
  }

  .hud--top .nav-list.studio-index .nav-link__label{
    font-size: 0.63rem;
  }

  .drawer-panel{
    --drawer-gutter: 1.15rem;
    padding-inline: var(--drawer-gutter);
  }

  .drawer-panel__identity > span:first-child{
    display: none;
  }

  .drawer-panel__title{
    font-size: 2.85rem;
  }

  

  

  

  .drawer-facts{
    grid-template-columns: 1fr;
  }

  .drawer-facts div,
  .drawer-facts div:nth-child(odd),
  .drawer-facts div:nth-child(even){
    min-height: 0;
    padding: 1rem 0;
    border-left: 0;
  }

  .drawer-facts dt{
    margin-bottom: 0.7rem;
  }

  .drawer-profile__actions button,
  .drawer-profile__actions button:first-child,
  .drawer-profile__actions button:last-child{
    grid-template-columns: 2.1rem minmax(0, 1fr) 2.9rem;
    gap: 0.75rem;
    min-height: 6.35rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(23, 22, 19, 0.16);
  }

  .drawer-profile__actions{
    margin-bottom: 1rem;
    padding: 0.32rem;
  }

  .drawer-profile__action-side{
    grid-template-columns: 2.9rem;
    gap: 0;
  }

  .drawer-profile__action-time{
    display: none;
  }

  .drawer-profile__action-arrow{
    width: 2.9rem;
    height: 2.9rem;
  }

  .drawer-profile__action-note{
    max-width: 18rem;
    font-size: 0.64rem;
  }

  .drawer-match__progress{
    margin-bottom: 2.5rem;
  }

  .drawer-match__question{
    font-size: 2.35rem;
  }

  .drawer-match__question-meta{
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .drawer-match__previous{
    justify-self: end;
    min-width: 9.25rem;
  }

  .drawer-match__options button{
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    min-height: 4rem;
    padding-right: 0.35rem;
  }

  .drawer-match__evidence li{
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .drawer-match__evidence li > b{
    grid-column: 2;
  }

  .drawer-match__result-actions{
    padding: 1.15rem 0;
  }

  .drawer-match__result-actions button{
    width: min(100%, 16rem);
    min-height: 3.5rem;
    padding: 0 1rem;
    border-bottom: 0;
  }

  
}

@media (prefers-reduced-motion: reduce) {
  .drawer-panel,
  body[data-active-drawer] .drawer-panel.is-open,
  .drawer-panel__pane.is-active,
  .drawer-overlay,
  .drawer-overlay.is-open,
  .drawer-match,
  .drawer-match__question-stage,
  .drawer-match__result,
  .drawer-match__progress span{
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }

  .drawer-panel__masthead,
  .drawer-panel__masthead::after{
    transition-duration: 1ms !important;
  }
}

/* Screen project copy: clarify scope and responsibilities without adding another intro page. */
.tv-stage[data-booted="true"] .dvd-section-head p small{
  display: block !important;
  max-width: 30rem !important;
  margin-top: 0.65rem !important;
  color: var(--dvd-faint) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.88rem) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Optional project images configured in content.js. */

/* Hero summary: a quiet credential line followed by the hiring-relevant message. */
.hero-editorial__lead{
  display: grid;
  gap: 0.5rem;
  max-width: 22.5rem;
}

.hero-editorial__lead-kicker{
  display: block;
  color: var(--home-ui-strong);
  font-family: var(--font-hero-ui);
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

.hero-editorial__lead-copy{
  display: block;
  max-width: 22.5rem;
  color: var(--home-ui);
  font-family: var(--font-hero-ui);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  text-wrap: balance;
}

@media (max-width: 800px) {
  .hero-editorial__lead{
    gap: 0.42rem;
  }

  .hero-editorial__lead-kicker{
    font-size: 1rem;
  }

  .hero-editorial__lead-copy{
    max-width: 20rem;
    font-size: 0.95rem;
  }
}

/* Project links: role details lead to personal work; imagery leads to the full film. */
.tv-stage[data-booted="true"] .screen-ui{
  --dvd-project-surface: #c6c0b6;
  --dvd-project-accent: #9a4d36;
  --dvd-project-label: rgba(23, 21, 18, 0.78);
}

body.is-screen-light .tv-stage[data-booted="true"] .screen-ui{
  --dvd-project-surface: #35312d;
  --dvd-project-accent: #d99a78;
  --dvd-project-label: rgba(241, 238, 232, 0.82);
}

/* Compact project masthead: bring the selected work into view sooner. */
.tv-stage[data-booted="true"] .dvd-work.screen-page--projects{
  align-content: start !important;
  padding-top: clamp(5.4rem, 9.5vh, 6.25rem) !important;
}

.tv-stage[data-booted="true"] .dvd-work .dvd-section-head{
  display: grid !important;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(22rem, 1.28fr) !important;
  align-items: end !important;
  column-gap: clamp(2rem, 5vw, 5rem) !important;
  margin-bottom: clamp(2.25rem, 4.4vh, 3.15rem) !important;
  padding-bottom: clamp(0.9rem, 1.8vh, 1.15rem) !important;
}

.tv-stage[data-booted="true"] .dvd-work .dvd-section-head p{
  max-width: 25rem !important;
  padding-bottom: 0.18rem !important;
}

.tv-stage[data-booted="true"] .dvd-work .dvd-section-head h2{
  justify-self: end !important;
  max-width: none !important;
  font-size: clamp(3.8rem, 7.15vw, 7.15rem) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.072em !important;
  text-align: right !important;
  white-space: nowrap !important;
}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .dvd-work.screen-page--projects{
    padding-top: 4.25rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-work .dvd-section-head{
    grid-template-columns: 1fr !important;
    row-gap: 1.35rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-work .dvd-section-head h2{
    justify-self: start !important;
    font-size: clamp(3.7rem, 16vw, 6.25rem) !important;
    text-align: left !important;
  }
}

/* Mixed-format selected work: one landscape case, one portrait case, then an image-led archive. */

/* Six selected works share one fixed canvas. Hover redistributes width without resizing the page. */
.tv-stage[data-booted="true"] .dvd-selected{
  width: 100% !important;
  height: clamp(26rem, 60vh, 32rem) !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow: hidden !important;
  margin-top: clamp(1.8rem, 3.6vh, 2.6rem) !important;
  border-radius: 8px !important;
  background: var(--dvd-line) !important;
  isolation: isolate !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item{
  position: relative !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 1px solid rgba(245, 245, 238, 0.16) !important;
  border-radius: 6px !important;
  color: #f5f5ee !important;
  background: #1b1b19 !important;
  text-decoration: none !important;
  isolation: isolate !important;
  contain: paint !important;
  transition:
    flex-grow 720ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item[hidden]{
  display: none !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(7, 7, 6, 0.28), transparent 35%),
    linear-gradient(0deg, rgba(7, 7, 6, 0.88), rgba(7, 7, 6, 0.08) 58%, transparent 76%) !important;
  pointer-events: none !important;
  transition: opacity 460ms ease !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.035) !important;
  filter: saturate(0.86) contrast(1.03) brightness(0.9) !important;
  transition:
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms ease !important;
}

.tv-stage[data-booted="true"] .dvd-selected__index{
  position: absolute !important;
  z-index: 2 !important;
  top: clamp(0.9rem, 1.5vw, 1.2rem) !important;
  left: clamp(0.9rem, 1.5vw, 1.2rem) !important;
  color: rgba(245, 245, 238, 0.78) !important;
  font-family: var(--font-hero-meta) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.72rem) !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .dvd-selected{
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }

  

  
}

@media (max-width: 520px) {
  .tv-stage[data-booted="true"] .dvd-selected{
    grid-template-columns: 1fr !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item{
    aspect-ratio: 16 / 11 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv-stage[data-booted="true"] .dvd-selected__item,
  .tv-stage[data-booted="true"] .dvd-selected__item img{
    transition: none !important;
  }
}

/* Selected work mosaic: mixed formats share one fixed canvas and exchange area on hover. */
.tv-stage[data-booted="true"] .dvd-work.screen-page--projects{
  min-height: var(--screen-page-height, 100vh) !important;
  padding-bottom: clamp(1.35rem, 2.4vh, 1.8rem) !important;
}

.tv-stage[data-booted="true"] .dvd-selected{
  --selected-cols: 1.08fr 1.32fr 1.16fr 0.94fr;
  --selected-rows: 1fr 1.08fr 1fr;
  width: 100% !important;
  height: clamp(70rem, 165vh, 86rem) !important;
  display: grid !important;
  grid-template-columns: var(--selected-cols) !important;
  grid-template-rows: var(--selected-rows) !important;
  gap: 10px !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--dvd-line) !important;
  border-radius: 8px !important;
  background: var(--dvd-line) !important;
  isolation: isolate !important;
  transition:
    grid-template-columns 760ms cubic-bezier(0.16, 1, 0.3, 1),
    grid-template-rows 760ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item{
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--dvd-fg) !important;
  background: var(--dvd-bg-soft) !important;
  text-decoration: none !important;
  isolation: isolate !important;
  contain: layout paint style !important;
  transition:
    opacity 420ms ease,
    filter 520ms ease,
    box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(1){
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(2){
  grid-column: 3 / 5 !important;
  grid-row: 1 / 3 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(3){
  grid-column: 1 !important;
  grid-row: 2 / 4 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(4){
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(5){
  grid-column: 2 / 4 !important;
  grid-row: 3 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(6){
  grid-column: 4 !important;
  grid-row: 3 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(2),
.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(3),
.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(4),
.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(6){
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(2) .dvd-selected__media,
.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(3) .dvd-selected__media,
.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(4) .dvd-selected__media,
.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(6) .dvd-selected__media{
  grid-row: 1 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(2) .dvd-selected__info,
.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(3) .dvd-selected__info,
.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(4) .dvd-selected__info,
.tv-stage[data-booted="true"] .dvd-selected__item:nth-child(6) .dvd-selected__info{
  grid-row: 2 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__info{
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(0.65rem, 1.1vw, 1rem) !important;
  padding: clamp(0.9rem, 1.45vw, 1.45rem) !important;
  color: var(--dvd-fg) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--dvd-bg-soft) 94%, white 6%), var(--dvd-bg-soft)) !important;
  transition:
    background 420ms ease,
    color 420ms ease !important;
}

.tv-stage[data-booted="true"] .dvd-selected__index{
  position: static !important;
  align-self: start !important;
  color: var(--dvd-project-accent) !important;
  font-family: var(--font-hero-meta) !important;
  font-size: clamp(0.57rem, 0.64vw, 0.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.tv-stage[data-booted="true"] .dvd-selected__copy{
  min-width: 0 !important;
  align-self: center !important;
  display: grid !important;
  gap: clamp(0.42rem, 0.72vw, 0.7rem) !important;
}

.tv-stage[data-booted="true"] .dvd-selected__copy em{
  overflow: hidden !important;
  color: var(--dvd-muted) !important;
  font-family: var(--font-hero-meta) !important;
  font-size: clamp(0.5rem, 0.57vw, 0.63rem) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.35 !important;
  letter-spacing: 0.055em !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.tv-stage[data-booted="true"] .dvd-selected__copy b{
  max-width: 12ch !important;
  color: var(--dvd-fg) !important;
  font-family: var(--font-hero-display), "Noto Sans SC", sans-serif !important;
  font-size: clamp(1.18rem, 2vw, 2.12rem) !important;
  font-weight: 820 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tv-stage[data-booted="true"] .dvd-selected__summary{
  max-width: 27rem !important;
  color: var(--dvd-muted) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.78rem) !important;
  line-height: 1.52 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__info > small{
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
  overflow: visible !important;
  padding-top: 0.48rem !important;
  border-top: 1px solid var(--dvd-line-strong) !important;
  color: var(--dvd-fg) !important;
  font-family: var(--font-hero-meta) !important;
  font-size: clamp(0.54rem, 0.61vw, 0.67rem) !important;
  font-weight: 650 !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transform: none !important;
}

.tv-stage[data-booted="true"] .dvd-selected__info > small i{
  color: var(--dvd-project-accent) !important;
  font-style: normal !important;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tv-stage[data-booted="true"] .dvd-selected__media{
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #1b1b19 !important;
  isolation: isolate !important;
}

.tv-stage[data-booted="true"] .dvd-selected__media::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(7, 7, 6, 0.12), transparent 44%),
    linear-gradient(0deg, rgba(7, 7, 6, 0.42), transparent 42%) !important;
  pointer-events: none !important;
}

.tv-stage[data-booted="true"] .dvd-selected__media img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.018) !important;
  filter: saturate(0.9) contrast(1.025) brightness(0.92) !important;
  transition:
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms ease !important;
}

.tv-stage[data-booted="true"] .dvd-selected__media > span{
  position: absolute !important;
  z-index: 2 !important;
  right: clamp(0.7rem, 1vw, 1rem) !important;
  bottom: clamp(0.65rem, 0.9vw, 0.9rem) !important;
  color: rgba(245, 245, 238, 0.72) !important;
  font-family: var(--font-hero-meta) !important;
  font-size: clamp(0.49rem, 0.55vw, 0.6rem) !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
}

@media (min-width: 821px) {
  .tv-stage[data-booted="true"] .dvd-about.screen-page--about{
    padding-top: clamp(3.1rem, 5.8vh, 4rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-about .dvd-section-head{
    margin-top: -4.5rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-about > .dvd-section-head,
  .tv-stage[data-booted="true"] .dvd-about > .dvd-about-grid,
  .tv-stage[data-booted="true"] .dvd-about > .dvd-skills{
    position: relative !important;
    top: -6.5rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-about > .dvd-skills{
    top: -2.5rem !important;
  }

}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .dvd-selected{
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(24rem, auto) !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(n){
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 24rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(1),
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(5){
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: 1fr !important;
  }
}

@media (max-width: 560px) {
  .tv-stage[data-booted="true"] .dvd-selected{
    grid-template-columns: 1fr !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(n){
    grid-column: 1 !important;
    min-height: 30rem !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(15rem, 1.08fr) minmax(14rem, 0.92fr) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__media{
    grid-row: 1 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__info{
    grid-row: 2 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv-stage[data-booted="true"] .dvd-selected,
  .tv-stage[data-booted="true"] .dvd-selected__band,
  .tv-stage[data-booted="true"] .dvd-selected__middle-stack,
  .tv-stage[data-booted="true"] .dvd-selected__item,
  .tv-stage[data-booted="true"] .dvd-selected__media img,
  .tv-stage[data-booted="true"] .dvd-selected__copy b,
  .tv-stage[data-booted="true"] .dvd-selected__info > small i{
    transition: none !important;
  }
}

/* Project index: reclaim the masthead gap and extend the mixed-format work wall. */
@media (min-width: 821px) {
  .tv-stage[data-booted="true"] .dvd-work.screen-page--projects{
    --project-content-inset: clamp(0.8rem, 1.45vw, 1.35rem);
    padding-top: clamp(3.8rem, 6.8vh, 4.65rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-work .dvd-section-head{
    grid-template-columns: minmax(15rem, 0.76fr) minmax(21rem, 1.24fr) !important;
    column-gap: clamp(2rem, 4.4vw, 4.5rem) !important;
    margin: 0 var(--project-content-inset) clamp(1rem, 2.1vh, 1.45rem) !important;
    padding: 0 0 clamp(0.75rem, 1.45vh, 1rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-work .dvd-section-head p{
    max-width: 29rem !important;
    padding: 0 0 0 clamp(0.25rem, 0.5vw, 0.5rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-work .dvd-section-head p > small{
    max-width: 34rem !important;
    display: block !important;
    margin-top: 0.48rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0.025em !important;
    text-transform: none !important;
  }

  .tv-stage[data-booted="true"] .dvd-work .dvd-section-head h2{
    font-size: clamp(3.35rem, 6.15vw, 6.15rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected{
    --selected-cols: repeat(4, minmax(0, 1fr));
    --selected-rows: repeat(4, minmax(0, 1fr));
    width: calc(100% - (var(--project-content-inset) * 2)) !important;
    height: clamp(106rem, 228vh, 122rem) !important;
    margin-right: var(--project-content-inset) !important;
    margin-left: var(--project-content-inset) !important;
    grid-template-columns: var(--selected-cols) !important;
    grid-template-rows: var(--selected-rows) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(1){
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(2){
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(3){
    grid-column: 4 !important;
    grid-row: 1 / 3 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(4){
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(5){
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(6){
    grid-column: 3 / 5 !important;
    grid-row: 3 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(7){
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(8){
    grid-column: 3 / 5 !important;
    grid-row: 4 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(1),
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(3){
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(1) .dvd-selected__media,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(3) .dvd-selected__media{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(1) .dvd-selected__info,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(3) .dvd-selected__info{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(2),
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(4),
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(5),
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(6),
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(7),
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(8){
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: 1fr !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(2) .dvd-selected__info,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(4) .dvd-selected__info,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(5) .dvd-selected__info,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(6) .dvd-selected__info,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(7) .dvd-selected__info,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(8) .dvd-selected__info{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(2) .dvd-selected__media,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(4) .dvd-selected__media,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(5) .dvd-selected__media,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(6) .dvd-selected__media,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(7) .dvd-selected__media,
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(8) .dvd-selected__media{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .dvd-work.screen-page--projects{
    padding-top: 4rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-work .dvd-section-head{
    margin-bottom: 1.35rem !important;
    padding-bottom: 0.9rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(7){
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: 1fr !important;
  }
}

@media (max-width: 560px) {
  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(7){
    grid-column: 1 !important;
    min-height: 30rem !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(15rem, 1.08fr) minmax(14rem, 0.92fr) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(7) .dvd-selected__media{
    grid-row: 1 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:nth-child(7) .dvd-selected__info{
    grid-row: 2 !important;
  }
}

/* Selected work: keep the composition while using the motion board's nested squeeze logic. */
@media (min-width: 821px) {
  .tv-stage[data-booted="true"] .dvd-selected{
    --selected-gap: clamp(0.55rem, 0.78vw, 0.72rem);
    --selected-band-rows: minmax(0, 1.08fr) minmax(0, 1.84fr) minmax(0, 1.08fr) minmax(0, 1.18fr);
    display: grid !important;
    width: calc(100% - (var(--project-content-inset) * 2)) !important;
    height: clamp(88rem, 198vh, 102rem) !important;
    margin-right: var(--project-content-inset) !important;
    margin-left: var(--project-content-inset) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--selected-band-rows) !important;
    grid-auto-flow: row !important;
    gap: var(--selected-gap) !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    contain: layout paint !important;
    isolation: isolate !important;
    transition: grid-template-rows 820ms cubic-bezier(0.3, 0.7, 0.2, 1) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__band,
  .tv-stage[data-booted="true"] .dvd-selected__middle-stack{
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: var(--selected-gap);
  }

  .tv-stage[data-booted="true"] .dvd-selected__band--top{
    --selected-top-cols: minmax(0, 1.1657fr) minmax(0, 0.8343fr);
    grid-template-columns: var(--selected-top-cols);
    transition: grid-template-columns 820ms cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .tv-stage[data-booted="true"] .dvd-selected__band--middle{
    --selected-middle-cols: minmax(0, 1.0122fr) minmax(0, 0.9756fr) minmax(0, 1.0122fr);
    grid-template-columns: var(--selected-middle-cols);
    transition: grid-template-columns 820ms cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .tv-stage[data-booted="true"] .dvd-selected__middle-stack{
    --selected-middle-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: var(--selected-middle-rows);
    transition: grid-template-rows 820ms cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .tv-stage[data-booted="true"] .dvd-selected__band--bottom{
    --selected-bottom-cols: minmax(0, 0.8343fr) minmax(0, 1.1657fr);
    grid-template-columns: var(--selected-bottom-cols);
    transition: grid-template-columns 820ms cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .tv-stage[data-booted="true"] .dvd-selected__band--extra{
    --selected-extra-cols: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: var(--selected-extra-cols);
    transition: grid-template-columns 820ms cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .tv-stage[data-booted="true"] .dvd-selected__item[data-mondrian-index]{
    min-height: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    border: 1px solid var(--dvd-line-strong) !important;
    border-radius: 8px !important;
    transform: none !important;
    transform-origin: center !important;
    transition:
      border-color 280ms ease,
      background-color 280ms ease !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item[data-mondrian-index] .dvd-selected__media{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item[data-mondrian-index] .dvd-selected__info{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__info{
    min-height: clamp(4.15rem, 7.4vh, 5.25rem) !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: clamp(0.7rem, 1vw, 1rem) !important;
    padding: clamp(0.62rem, 0.9vw, 0.82rem) clamp(0.72rem, 1.05vw, 0.95rem) !important;
    background: var(--dvd-bg-soft) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__index{
    grid-column: 1 !important;
    align-self: center !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__copy{
    grid-column: 2 !important;
    align-self: center !important;
    gap: 0.2rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__copy b{
    max-width: none !important;
    overflow: hidden !important;
    font-size: clamp(0.92rem, 1.22vw, 1.26rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__copy em{
    font-size: clamp(0.44rem, 0.51vw, 0.56rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__summary{
    display: none !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__info > small{
    width: auto !important;
    grid-column: 3 !important;
    align-self: center !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__info > small > span{
    display: none !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__media{
    background: color-mix(in srgb, var(--dvd-bg-soft) 94%, white 6%) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__media::after{
    display: none !important;
    content: none !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected:is(
    [data-mondrian-active="1"],
    [data-mondrian-active="2"]
  ){
    --selected-band-rows: minmax(0, 1.35fr) minmax(0, 1.6fr) minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected:is(
    [data-mondrian-active="3"],
    [data-mondrian-active="4"],
    [data-mondrian-active="7"],
    [data-mondrian-active="8"]
  ){
    --selected-band-rows: minmax(0, 0.9fr) minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 1fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected:is(
    [data-mondrian-active="5"],
    [data-mondrian-active="6"]
  ){
    --selected-band-rows: minmax(0, 1.05fr) minmax(0, 1.6fr) minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected:is(
    [data-mondrian-active="9"],
    [data-mondrian-active="10"],
    [data-mondrian-active="11"]
  ){
    --selected-band-rows: minmax(0, 0.95fr) minmax(0, 1.55fr) minmax(0, 0.95fr) minmax(0, 1.7fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="1"] .dvd-selected__band--top{
    --selected-top-cols: minmax(0, 1.4fr) minmax(0, 0.6fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="2"] .dvd-selected__band--top{
    --selected-top-cols: minmax(0, 0.6fr) minmax(0, 1.4fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected:is(
    [data-mondrian-active="3"],
    [data-mondrian-active="4"]
  ) .dvd-selected__band--middle{
    --selected-middle-cols: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="7"] .dvd-selected__band--middle{
    --selected-middle-cols: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="8"] .dvd-selected__band--middle{
    --selected-middle-cols: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="3"] .dvd-selected__middle-stack{
    --selected-middle-rows: minmax(0, 1.45fr) minmax(0, 0.55fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="4"] .dvd-selected__middle-stack{
    --selected-middle-rows: minmax(0, 0.55fr) minmax(0, 1.45fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="5"] .dvd-selected__band--bottom{
    --selected-bottom-cols: minmax(0, 1.4fr) minmax(0, 0.6fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="6"] .dvd-selected__band--bottom{
    --selected-bottom-cols: minmax(0, 0.6fr) minmax(0, 1.4fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="9"] .dvd-selected__band--extra{
    --selected-extra-cols: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0, 0.75fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="10"] .dvd-selected__band--extra{
    --selected-extra-cols: minmax(0, 0.75fr) minmax(0, 1.5fr) minmax(0, 0.75fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="11"] .dvd-selected__band--extra{
    --selected-extra-cols: minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 1.5fr);
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-ready="true"] .dvd-selected__item,
  .tv-stage[data-booted="true"] .screen-page--projects .dvd-selected[data-mondrian-ready="true"][data-mondrian-active] .dvd-selected__item{
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-ready="true"] .dvd-selected__media img,
  .tv-stage[data-booted="true"] .screen-page--projects .dvd-selected[data-mondrian-ready="true"][data-mondrian-active] .dvd-selected__item .dvd-selected__media img{
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transform-origin: center !important;
    transition: none !important;
    will-change: auto !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:is(:hover, :focus-visible),
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="1"] .dvd-selected__item[data-mondrian-index="1"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="2"] .dvd-selected__item[data-mondrian-index="2"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="3"] .dvd-selected__item[data-mondrian-index="3"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="4"] .dvd-selected__item[data-mondrian-index="4"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="5"] .dvd-selected__item[data-mondrian-index="5"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="6"] .dvd-selected__item[data-mondrian-index="6"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="7"] .dvd-selected__item[data-mondrian-index="7"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="8"] .dvd-selected__item[data-mondrian-index="8"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="9"] .dvd-selected__item[data-mondrian-index="9"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="10"] .dvd-selected__item[data-mondrian-index="10"],
  .tv-stage[data-booted="true"] .dvd-selected[data-mondrian-active="11"] .dvd-selected__item[data-mondrian-index="11"]{
    z-index: 2 !important;
    border-color: color-mix(in srgb, var(--dvd-accent) 62%, var(--dvd-line-strong)) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__info > small i{
    transition: transform 240ms ease !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__item:is(:hover, :focus-visible) .dvd-selected__info > small i{
    transform: translate3d(0.16rem, -0.16rem, 0) !important;
  }
}

.tv-stage[data-booted="true"] .dvd-selected__media > video[data-selected-motion-src]{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition: opacity 120ms ease !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item.is-selected-preview-playing .dvd-selected__media > video[data-selected-motion-src]{
  opacity: 1;
}

.tv-stage[data-booted="true"] .dvd-selected__item::before{
  display: none !important;
  background: none !important;
  content: none !important;
}

.tv-stage[data-booted="true"] .dvd-selected__media{
  background:
    linear-gradient(180deg, rgba(7, 7, 6, 0.28), transparent 35%),
    linear-gradient(0deg, rgba(7, 7, 6, 0.64), rgba(7, 7, 6, 0.08) 58%, transparent 76%),
    color-mix(in srgb, var(--dvd-bg-soft) 94%, white 6%) !important;
}

.tv-stage[data-booted="true"] .dvd-selected__media::after{
  display: none !important;
  background: none !important;
  content: none !important;
}

.tv-stage[data-booted="true"] .dvd-selected__media > img{
  filter: none !important;
}

.tv-stage[data-booted="true"] .dvd-selected__item:has(video[data-selected-motion-src]) .dvd-selected__media > span{
  z-index: 3 !important;
}

.tv-stage[data-booted="true"] .dvd-selected__media > .dvd-selected__motion-state{
  top: clamp(0.65rem, 0.9vw, 0.85rem) !important;
  right: auto !important;
  bottom: auto !important;
  left: clamp(0.65rem, 0.9vw, 0.85rem) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.42rem;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgb(0 0 0 / 0.28);
}

.tv-stage[data-booted="true"] .dvd-selected__motion-state i{
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.tv-stage[data-booted="true"] .dvd-selected__motion-state em{
  font: inherit;
  font-style: normal;
}

.tv-stage[data-booted="true"] .dvd-selected__item.is-selected-preview-playing .dvd-selected__motion-state i{
  background: var(--dvd-accent);
  border-color: var(--dvd-accent);
}

.tv-stage[data-booted="true"] .dvd-selected__item.is-selected-preview-playing .dvd-selected__motion-state em{
  color: transparent;
  font-size: 0;
}

.tv-stage[data-booted="true"] .dvd-selected__item.is-selected-preview-playing .dvd-selected__motion-state em::after{
  color: color-mix(in srgb, white 88%, transparent);
  font-size: clamp(0.49rem, 0.55vw, 0.6rem);
  content: "Playing";
}

@media (prefers-reduced-motion: reduce) {
  .tv-stage[data-booted="true"] .dvd-selected__media > video[data-selected-motion-src]{
    display: none !important;
    transition: none !important;
  }
}

/* Motion work: horizontal hover-to-play cards using the selected-work language. */
.tv-stage[data-booted="true"] .dvd-motion-head{
  margin-top: clamp(5.5rem, 12vh, 8.5rem) !important;
}

.tv-stage[data-booted="true"] .dvd-motion-board{
  --motion-cols: minmax(0, 1.08fr) minmax(0, 0.92fr);
  --motion-gap: clamp(0.55rem, 0.78vw, 0.72rem);
  display: grid;
  width: calc(100% - (var(--project-content-inset) * 2));
  height: clamp(71rem, 158vh, 84rem);
  margin-right: var(--project-content-inset);
  margin-left: var(--project-content-inset);
  grid-template-columns: var(--motion-cols);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--motion-gap);
  contain: layout paint;
  isolation: isolate;
  transition: grid-template-columns 820ms cubic-bezier(0.3, 0.7, 0.2, 1) !important;
}

.tv-stage[data-booted="true"] .dvd-motion-board:not([data-motion-ready="true"]){
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.tv-stage[data-booted="true"] .dvd-motion__row{
  --motion-cols: minmax(0, 1.12fr) minmax(0, 0.88fr);
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: var(--motion-cols);
  gap: var(--motion-gap);
  transition: grid-template-columns 820ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

.tv-stage[data-booted="true"] .dvd-motion__column{
  --motion-column-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: var(--motion-column-rows);
  gap: var(--motion-gap);
  transition: grid-template-rows 820ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

.tv-stage[data-booted="true"] .dvd-motion__item{
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) auto;
  color: var(--dvd-fg);
  text-decoration: none;
  background: var(--dvd-bg-soft);
  border: 1px solid var(--dvd-line-strong);
  border-radius: 8px;
  transition:
    border-color 280ms ease,
    background-color 280ms ease;
}

.tv-stage[data-booted="true"] .dvd-motion__item[hidden]{
  display: none;
}

.tv-stage[data-booted="true"] .dvd-motion__media{
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--dvd-bg-soft) 92%, var(--dvd-fg) 8%);
  contain: layout paint;
}

.tv-stage[data-booted="true"] .dvd-motion__poster,
.tv-stage[data-booted="true"] .dvd-motion__media video{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  transform: translate3d(0, 0, 0) scale(1);
  transition: none !important;
}

.tv-stage[data-booted="true"] .dvd-motion__media > video:not(.dvd-motion__player){
  opacity: 0;
  pointer-events: none;
}

.tv-stage[data-booted="true"] .dvd-motion__player{
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  transition: none;
}

.tv-stage[data-booted="true"] .dvd-motion__player.is-visible{
  opacity: 1;
}

.tv-stage[data-booted="true"] .dvd-motion__state,
.tv-stage[data-booted="true"] .dvd-motion__count{
  position: absolute;
  z-index: 2;
  bottom: clamp(0.55rem, 0.8vw, 0.75rem);
  color: color-mix(in srgb, white 88%, transparent);
  font-family: var(--font-mono);
  font-size: clamp(0.48rem, 0.55vw, 0.6rem);
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgb(0 0 0 / 0.28);
}

.tv-stage[data-booted="true"] .dvd-motion__state{
  left: clamp(0.6rem, 0.9vw, 0.82rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.tv-stage[data-booted="true"] .dvd-motion__state i{
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.tv-stage[data-booted="true"] .dvd-motion__state em{
  font: inherit;
}

.tv-stage[data-booted="true"] .dvd-motion__count{
  right: clamp(0.6rem, 0.9vw, 0.82rem);
}

.tv-stage[data-booted="true"] .dvd-motion__info{
  display: grid;
  min-height: clamp(4.15rem, 7.4vh, 5.25rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.7rem, 1vw, 1rem);
  padding: clamp(0.62rem, 0.9vw, 0.82rem) clamp(0.72rem, 1.05vw, 0.95rem);
  background: var(--dvd-bg-soft);
}

.tv-stage[data-booted="true"] .dvd-motion__index{
  color: var(--dvd-accent);
  font-family: var(--font-mono);
  font-size: clamp(0.54rem, 0.65vw, 0.7rem);
  font-weight: 700;
  line-height: 1;
}

.tv-stage[data-booted="true"] .dvd-motion__copy{
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.tv-stage[data-booted="true"] .dvd-motion__copy em{
  overflow: hidden;
  color: var(--dvd-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.44rem, 0.51vw, 0.56rem);
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tv-stage[data-booted="true"] .dvd-motion__copy b{
  overflow: hidden;
  font-size: clamp(0.92rem, 1.22vw, 1.26rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-stage[data-booted="true"] .dvd-motion__item:is(:hover, :focus-visible),
.tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="1"] .dvd-motion__item[data-motion-index="1"],
.tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="2"] .dvd-motion__item[data-motion-index="2"],
.tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="3"] .dvd-motion__item[data-motion-index="3"],
.tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="4"] .dvd-motion__item[data-motion-index="4"],
.tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="5"] .dvd-motion__item[data-motion-index="5"],
.tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="6"] .dvd-motion__item[data-motion-index="6"]{
  z-index: 2;
  border-color: color-mix(in srgb, var(--dvd-accent) 62%, var(--dvd-line-strong));
}

.tv-stage[data-booted="true"] .dvd-motion__item.is-playing .dvd-motion__state i{
  background: var(--dvd-accent);
  border-color: var(--dvd-accent);
}

.tv-stage[data-booted="true"] .dvd-motion__item.is-playing .dvd-motion__state em{
  color: transparent;
  font-size: 0;
}

.tv-stage[data-booted="true"] .dvd-motion__item.is-playing .dvd-motion__state em::after{
  color: color-mix(in srgb, white 88%, transparent);
  font-size: clamp(0.48rem, 0.55vw, 0.6rem);
  content: "Playing";
}

@media (min-width: 821px) {
  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="1"],
  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="3"],
  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="5"]{
    --motion-cols: minmax(0, 1.28fr) minmax(0, 0.72fr);
  }

  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="2"],
  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="4"],
  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="6"]{
    --motion-cols: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }

  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="1"] .dvd-motion__column:nth-child(1),
  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="2"] .dvd-motion__column:nth-child(2){
    --motion-column-rows: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.7fr);
  }

  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="3"] .dvd-motion__column:nth-child(1),
  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="4"] .dvd-motion__column:nth-child(2){
    --motion-column-rows: minmax(0, 0.7fr) minmax(0, 1.6fr) minmax(0, 0.7fr);
  }

  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="5"] .dvd-motion__column:nth-child(1),
  .tv-stage[data-booted="true"] .dvd-motion-board[data-motion-active="6"] .dvd-motion__column:nth-child(2){
    --motion-column-rows: minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.6fr);
  }
}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .dvd-motion-head{
    margin-top: 4rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-motion-board{
    width: calc(100% - (var(--project-content-inset) * 2));
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    transition: none !important;
  }

  .tv-stage[data-booted="true"] .dvd-motion__row{
    grid-template-columns: 1fr;
    transition: none !important;
  }

  .tv-stage[data-booted="true"] .dvd-motion__column{
    display: contents;
  }

  .tv-stage[data-booted="true"] .dvd-motion__item{
    min-height: 24rem;
  }

  .tv-stage[data-booted="true"] .dvd-motion__media{
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv-stage[data-booted="true"] .dvd-motion-board,
  .tv-stage[data-booted="true"] .dvd-motion__column,
  .tv-stage[data-booted="true"] .dvd-motion__row,
  .tv-stage[data-booted="true"] .dvd-motion__item,
  .tv-stage[data-booted="true"] .dvd-motion__info > i{
    transition: none !important;
  }
}

/* Contact page: a typographic closing poster rather than a sparse footer. */
.tv-stage[data-booted="true"] .dvd-contact-page.screen-page--contact{
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  padding-top: clamp(4rem, 7vh, 5.25rem) !important;
  padding-bottom: clamp(2rem, 4.4vh, 3.1rem) !important;
}

.tv-stage[data-booted="true"] .dvd-contact-page.screen-page--contact::before{
  position: absolute;
  top: 45%;
  right: -0.1em;
  z-index: 0;
  color: transparent;
  font-family: var(--font-hero-display), "Noto Sans SC", sans-serif;
  font-size: clamp(10rem, 21vw, 23rem);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: -0.09em;
  white-space: nowrap;
  content: "CONTACT";
  opacity: 0.72;
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--dvd-fg) 8%, transparent);
  text-stroke: 1px color-mix(in srgb, var(--dvd-fg) 8%, transparent);
}

.tv-stage[data-booted="true"] .dvd-contact-page.screen-page--contact > *{
  position: relative;
  z-index: 1;
}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .dvd-contact-page.screen-page--contact{
    padding-top: clamp(3.2rem, 6vh, 4.1rem) !important;
    padding-bottom: clamp(1.5rem, 3.5vh, 2.4rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-contact-page.screen-page--contact::before{
    top: 43%;
    right: -0.5em;
    font-size: clamp(8rem, 30vw, 13rem);
    opacity: 0.5;
  }

  

  

  

  

  

  

  
}

/* About page: remove artificial page height and negative offsets so the deck
   expands only when its real content needs the space. */
.tv-stage[data-booted="true"] .dvd-about.screen-page--about{
  height: var(--screen-page-real-height, auto) !important;
  min-height: 0 !important;
  padding-top: clamp(4.6rem, 8.5vh, 6.2rem) !important;
  padding-bottom: clamp(2rem, 4vh, 3rem) !important;
}

.tv-stage[data-booted="true"] .dvd-about > .dvd-section-head,
.tv-stage[data-booted="true"] .dvd-about > .dvd-about-grid{
  top: 0 !important;
}

.tv-stage[data-booted="true"] .dvd-about .dvd-section-head{
  margin-top: 0 !important;
}

.tv-stage[data-booted="true"] .dvd-about-grid{
  grid-template-columns: minmax(22rem, 1.18fr) minmax(0, 0.82fr) !important;
  align-items: start !important;
  gap: clamp(2.25rem, 5vw, 5rem) !important;
  margin-top: clamp(1.8rem, 3.8vh, 2.8rem) !important;
}

.tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills{
  min-width: 0;
  margin-top: 0 !important;
  align-self: start;
}

.tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > div{
  max-width: none;
}

.tv-stage[data-booted="true"] .dvd-about .dvd-side{
  gap: clamp(1.35rem, 2.8vh, 2rem) !important;
}

.tv-stage[data-booted="true"] .dvd-about-grid .dvd-list-block h3,
.tv-stage[data-booted="true"] .dvd-about-grid .dvd-skills h3{
  margin-bottom: clamp(0.9rem, 1.8vh, 1.2rem) !important;
}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .dvd-about.screen-page--about{
    padding-top: clamp(3.6rem, 7vh, 4.8rem) !important;
    padding-bottom: clamp(1.7rem, 3.5vh, 2.5rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid{
    grid-template-columns: 1fr !important;
    gap: clamp(1.5rem, 3.5vh, 2.2rem) !important;
    margin-top: clamp(1.5rem, 3vh, 2.2rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills{
    margin-top: 0 !important;
  }
}

/* Contact closing page: keep the stable full-screen scroll range, then let the
   information grid occupy all space below the CTA. */
.tv-stage[data-booted="true"] .dvd-contact-page.screen-page--contact{
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: var(--screen-page-real-height, var(--screen-page-height, 100vh)) !important;
  min-height: var(--screen-page-height, 100vh) !important;
  padding-bottom: 0 !important;
}

@media (max-width: 820px) {
  

  .tv-stage[data-booted="true"] .dvd-contact-page.screen-page--contact{
    grid-template-rows: auto auto auto;
  }

  

  

  

  

  

  
}

/* Final contact poster — a compact, type-only closing frame. Its height follows
   the headline so removing the old contact rail does not leave a blank screen. */
.tv-stage[data-booted="true"] .contact-final.screen-page--contact{
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  gap: 0 !important;
  height: var(--screen-page-real-height, auto) !important;
  min-height: 0 !important;
  padding: clamp(4rem, 7vh, 5.25rem) clamp(1.7rem, 3.15vw, 2.75rem) 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.tv-stage[data-booted="true"] .contact-final.screen-page--contact::before{
  display: none !important;
  content: none !important;
}

.tv-stage[data-booted="true"] .contact-final__label{
  align-self: start;
  margin: 0 !important;
  color: var(--dvd-muted) !important;
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 0.68vw, 0.76rem) !important;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.14em;
}

.tv-stage[data-booted="true"] .contact-final__index{
  position: absolute !important;
  top: clamp(4rem, 7vh, 5.25rem) !important;
  right: clamp(1.7rem, 3.15vw, 2.75rem) !important;
  color: var(--dvd-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.7vw, 0.78rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
}

.tv-stage[data-booted="true"] .contact-final__title{
  position: relative;
  z-index: 1;
  align-self: start;
  width: 100%;
  margin: clamp(3.5rem, 7vh, 5.5rem) 0 clamp(1.4rem, 2.8vh, 2.2rem) !important;
  color: var(--dvd-fg);
  font-family: var(--font-hero-display), "Noto Sans SC", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.tv-stage[data-booted="true"] .contact-final__line{
  display: block;
  width: max-content;
  max-width: 100%;
}

.tv-stage[data-booted="true"] .contact-final__line:first-child{
  font-size: clamp(3.8rem, 7.2vw, 7.2rem);
  font-weight: 850;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.tv-stage[data-booted="true"] button.contact-final__line{
  position: relative;
  appearance: none;
  padding: 0;
  border: 0;
  text-align: left;
  margin-top: 0.03em;
  color: var(--dvd-fg);
  background-color: transparent;
  font-family: inherit;
  font-size: clamp(6.5rem, 13.8vw, 15.5rem);
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.075em;
  text-decoration: none;
  cursor: copy;
  background-image: linear-gradient(var(--dvd-accent), var(--dvd-accent));
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 0% 0.055em;
  transition: color 220ms ease, background-size 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tv-stage[data-booted="true"] button.contact-final__line:hover,
.tv-stage[data-booted="true"] button.contact-final__line:focus-visible,
.tv-stage[data-booted="true"] button.contact-final__line.is-copied{
  color: var(--dvd-accent);
  background-size: 100% 0.055em;
}

.tv-stage[data-booted="true"] .contact-final__rail{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template:
    "direct links" auto
    "footer footer" auto
    / minmax(0, 1.18fr) minmax(18rem, 0.82fr);
  align-content: start;
  gap: clamp(1rem, 1.8vh, 1.35rem) clamp(2.5rem, 5vw, 6rem);
  height: auto;
  min-height: 0;
  padding: clamp(1.1rem, 2vh, 1.4rem) 0 clamp(0.85rem, 1.5vh, 1.1rem);
  border-top: 1px solid var(--dvd-line);
  background: transparent;
}

.tv-stage[data-booted="true"] .contact-final__direct{
  display: grid;
  grid-area: direct;
  align-content: start;
  gap: clamp(0.65rem, 1.2vh, 0.9rem);
  min-width: 0;
  padding: 0;
}

.tv-stage[data-booted="true"] .contact-final__method{
  display: grid;
  grid-template-columns: clamp(4.4rem, 5.5vw, 5.5rem) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(0.7rem, 1.15vw, 1rem);
  min-width: 0;
  color: var(--dvd-fg);
  text-decoration: none;
}

.tv-stage[data-booted="true"] .contact-final__method:first-child{
  border: 0;
}

.tv-stage[data-booted="true"] .contact-final__method strong{
  min-width: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.5rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.018em;
  overflow-wrap: anywhere;
  transition: transform 220ms ease;
}

.tv-stage[data-booted="true"] .contact-final__method + .contact-final__method strong{
  font-size: clamp(0.96rem, 1.15vw, 1.28rem);
}

.tv-stage[data-booted="true"] .contact-final__method:hover strong,
.tv-stage[data-booted="true"] .contact-final__method:focus-visible strong{
  transform: translate3d(3px, 0, 0);
}

.tv-stage[data-booted="true"] .contact-final__links,
.tv-stage[data-booted="true"] .contact-final__footer{
  min-width: 0;
}

.tv-stage[data-booted="true"] .contact-final__links{
  display: flex;
  grid-area: links;
  align-items: baseline;
  align-self: start;
  flex-wrap: wrap;
  gap: 0.55rem clamp(1rem, 1.6vw, 1.65rem);
  justify-content: flex-end;
  padding: 0;
}

.tv-stage[data-booted="true"] .contact-final__links .contact-final__eyebrow{
  margin-right: clamp(0.25rem, 0.7vw, 0.65rem);
}

.tv-stage[data-booted="true"] .contact-final__links a{
  position: relative;
  align-self: baseline;
  padding-bottom: 0.1rem;
  color: var(--dvd-fg);
  font-size: clamp(0.82rem, 0.92vw, 1rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.tv-stage[data-booted="true"] .contact-final__links a::before{
  content: none !important;
}

.tv-stage[data-booted="true"] .contact-final__links a::after{
  position: absolute;
  right: 0;
  bottom: -0.18rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms ease;
}

.tv-stage[data-booted="true"] .contact-final__links a:hover::after,
.tv-stage[data-booted="true"] .contact-final__links a:focus-visible::after{
  transform: scaleX(1);
  transform-origin: left;
}

.tv-stage[data-booted="true"] .contact-final__footer{
  display: flex;
  grid-area: footer;
  align-items: center;
  align-self: start;
  justify-content: space-between;
  gap: clamp(0.8rem, 1.5vw, 1.5rem);
  color: var(--dvd-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.66vw, 0.74rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding-top: clamp(0.75rem, 1.3vh, 1rem);
  border-top: 1px solid color-mix(in srgb, var(--dvd-line) 72%, transparent);
}

.tv-stage[data-booted="true"] .contact-final__footer a{
  position: relative;
  color: var(--dvd-fg);
  text-decoration: none;
}

.tv-stage[data-booted="true"] .contact-final__footer a::after{
  position: absolute;
  right: 0;
  bottom: -0.2rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms ease;
}

.tv-stage[data-booted="true"] .contact-final__footer a:hover::after,
.tv-stage[data-booted="true"] .contact-final__footer a:focus-visible::after{
  transform: scaleX(1);
  transform-origin: left;
}

.tv-stage[data-booted="true"] .contact-final__eyebrow{
  color: var(--dvd-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.56rem, 0.6vw, 0.66rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
}

.tv-stage[data-booted="true"] .contact-final__eyebrow[data-index]::before{
  margin-right: 0.55em;
  color: var(--dvd-fg);
  content: attr(data-index) " /";
}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .contact-final.screen-page--contact{
    grid-template-rows: auto auto auto !important;
    padding-top: clamp(3.2rem, 6vh, 4.1rem) !important;
    overflow: hidden !important;
  }

  .tv-stage[data-booted="true"] .contact-final__index{
    top: clamp(3.2rem, 6vh, 4.1rem) !important;
  }

  .tv-stage[data-booted="true"] .contact-final__title{
    margin: clamp(2.75rem, 6vh, 4rem) 0 clamp(1.25rem, 2.8vh, 1.8rem) !important;
  }

  .tv-stage[data-booted="true"] .contact-final__line:first-child{
    font-size: clamp(3.1rem, 11vw, 4.8rem);
  }

  .tv-stage[data-booted="true"] button.contact-final__line{
    font-size: clamp(4.5rem, 15vw, 7.4rem);
    line-height: 0.88;
  }

  .tv-stage[data-booted="true"] .contact-final__rail{
    grid-template:
      "direct" auto
      "links" auto
      "footer" auto
      / 1fr;
    gap: 0.9rem;
    height: auto;
    min-height: clamp(10.5rem, 24vh, 13rem);
    padding-top: 1.2rem;
  }

  .tv-stage[data-booted="true"] .contact-final__direct{
    min-height: 0;
    padding: 0;
  }

  .tv-stage[data-booted="true"] .contact-final__links{
    min-height: 0;
    padding: 0;
    border-top: 0;
    justify-content: flex-start;
  }

  .tv-stage[data-booted="true"] .contact-final__footer{
    justify-content: space-between;
    min-height: 0;
    padding-top: 0.8rem;
    border-top: 1px solid color-mix(in srgb, var(--dvd-line) 72%, transparent);
  }
}

@media (max-width: 560px) {
  .tv-stage[data-booted="true"] .contact-final__line:first-child{
    font-size: clamp(2.7rem, 12vw, 3.8rem);
  }

  .tv-stage[data-booted="true"] button.contact-final__line{
    font-size: clamp(3.8rem, 16.5vw, 5.8rem);
  }

  .tv-stage[data-booted="true"] .contact-final__direct{
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .tv-stage[data-booted="true"] .contact-final__method{
    display: grid;
    grid-template-columns: clamp(4.6rem, 23vw, 6rem) minmax(0, 1fr);
    width: 100%;
    min-height: 0;
  }

  .tv-stage[data-booted="true"] .contact-final__footer{
    flex-wrap: wrap;
    min-height: 4rem;
    padding: 0.75rem 0;
  }

  .tv-stage[data-booted="true"] .contact-final__footer > span:nth-child(2){
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv-stage[data-booted="true"] button.contact-final__line,
  .tv-stage[data-booted="true"] .contact-final__method strong,
  .tv-stage[data-booted="true"] .contact-final__links a::after,
  .tv-stage[data-booted="true"] .contact-final__footer a::after{
    transition: none;
  }
}

/* Contact page balance: keep the oversized closing statement on the left and
   let the contact details read as one loose editorial note on the right. */
.tv-stage[data-booted="true"] .contact-final.screen-page--contact{
  grid-template-columns: minmax(0, 1fr) !important;
}

.tv-stage[data-booted="true"] .contact-final__rail{
  grid-template:
    "direct" auto
    "links" auto
    "footer" auto
    / minmax(0, 1fr);
}

.tv-stage[data-booted="true"] .contact-final__links{
  padding: 0;
  border-top: 0;
  border-bottom: 0;
}

.tv-stage[data-booted="true"] .contact-final__direct{
  gap: clamp(0.9rem, 1.45vh, 1.15rem);
  padding: 0;
  border-bottom: 0;
}

.tv-stage[data-booted="true"] .contact-final__links a{
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  color: var(--dvd-fg);
  font-weight: 650;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--dvd-fg) 48%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.tv-stage[data-booted="true"] .contact-final__links a::after{
  display: none;
  content: none;
}

.tv-stage[data-booted="true"] .contact-final__links a:hover,
.tv-stage[data-booted="true"] .contact-final__links a:focus-visible{
  color: var(--dvd-accent);
  text-decoration-color: currentColor;
}

.tv-stage[data-booted="true"] .contact-final__method--email{
  display: block;
}

.tv-stage[data-booted="true"] .contact-final__method--email .contact-final__eyebrow{
  display: block;
  margin-bottom: clamp(0.35rem, 0.6vh, 0.5rem);
}

.tv-stage[data-booted="true"] .contact-final__method--phone{
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 1vw, 1rem);
  width: fit-content;
}

.tv-stage[data-booted="true"] .contact-final__method:hover strong,
.tv-stage[data-booted="true"] .contact-final__method:focus-visible strong{
  transform: none;
}

@media (min-width: 1101px) {
  .tv-stage[data-booted="true"] .contact-final.screen-page--contact{
    grid-template-columns: minmax(0, 1fr) clamp(22rem, 30vw, 26rem) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    column-gap: clamp(1.5rem, 3vw, 3.5rem) !important;
    padding-bottom: clamp(2rem, 4.4vh, 3.1rem) !important;
  }

  .tv-stage[data-booted="true"] .contact-final__label{
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .tv-stage[data-booted="true"] .contact-final__title{
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    min-width: 0;
    margin-bottom: clamp(2rem, 4vh, 3rem) !important;
  }

  .tv-stage[data-booted="true"] .contact-final__line:first-child{
    font-size: clamp(3.8rem, 7.2vw, 7.2rem);
  }

  .tv-stage[data-booted="true"] button.contact-final__line{
    font-size: clamp(6.5rem, 13.8vw, 15.5rem);
    white-space: nowrap;
  }

  .tv-stage[data-booted="true"] .contact-final__rail{
    grid-template:
      "direct" auto
      "links" auto
      "footer" auto
      / minmax(0, 1fr);
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: stretch;
    gap: clamp(0.55rem, 1vh, 0.8rem);
    width: 100%;
    padding-top: clamp(1.15rem, 2.1vh, 1.5rem);
  }

  .tv-stage[data-booted="true"] .contact-final__method strong{
    font-size: clamp(1.3rem, 1.65vw, 1.75rem);
  }

  .tv-stage[data-booted="true"] .contact-final__method + .contact-final__method strong{
    font-size: clamp(0.92rem, 1.1vw, 1.2rem);
  }

  .tv-stage[data-booted="true"] .contact-final__direct .contact-final__eyebrow{
    font-size: clamp(0.58rem, 0.64vw, 0.7rem);
  }

  .tv-stage[data-booted="true"] .contact-final__links{
    justify-content: flex-start;
    gap: 0.45rem clamp(0.85rem, 1.35vw, 1.35rem);
    padding: 0;
    border-top: 0;
    border-bottom: 0;
  }

  .tv-stage[data-booted="true"] .contact-final__links a{
    font-size: clamp(0.92rem, 1.05vw, 1.08rem);
    font-weight: 650;
  }

  .tv-stage[data-booted="true"] .contact-final__footer{
    flex-wrap: wrap;
    font-size: clamp(0.64rem, 0.73vw, 0.8rem);
    line-height: 1.45;
  }
}

/* 20260823: contact index. The closing frame pairs the oversized statement
   with a precise editorial directory instead of a compressed footer rail. */
.tv-stage[data-booted="true"] .contact-final.screen-page--contact{
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
}

.tv-stage[data-booted="true"] .contact-final__rail{
  display: grid;
  grid-template:
    "head" auto
    "direct" auto
    "links" auto
    / minmax(0, 1fr);
  align-content: start;
  gap: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border-top: 1px solid var(--dvd-line);
  border-bottom: 0;
  background: transparent;
}

.tv-stage[data-booted="true"] .contact-final__rail-head,
.tv-stage[data-booted="true"] .contact-final__links-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  color: var(--dvd-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.56rem, 0.62vw, 0.7rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
}

.tv-stage[data-booted="true"] .contact-final__rail-head{
  grid-area: head;
  min-height: 1.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--dvd-line) 78%, transparent);
}

.tv-stage[data-booted="true"] .contact-final__rail-head h3{
  margin: 0;
  color: var(--dvd-fg);
  font: inherit;
}

.tv-stage[data-booted="true"] .contact-final__direct{
  display: grid;
  grid-area: direct;
  gap: 0;
  min-width: 0;
  padding: 0;
}

.tv-stage[data-booted="true"] .contact-final__method,
.tv-stage[data-booted="true"] .contact-final__method--email,
.tv-stage[data-booted="true"] .contact-final__method--phone{
  display: grid;
  grid-template:
    "label action" auto
    "value action" auto
    / minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 clamp(1rem, 1.3vw, 1.35rem);
  width: 100%;
  min-width: 0;
  color: var(--dvd-fg);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--dvd-line) 78%, transparent);
}

.tv-stage[data-booted="true"] .contact-final__method--email{
  min-height: 3.7rem;
  padding: 0.58rem 0 0.64rem;
}

.tv-stage[data-booted="true"] .contact-final__method--phone{
  min-height: 3.05rem;
  padding: 0.48rem 0 0.54rem;
}

.tv-stage[data-booted="true"] .contact-final__method .contact-final__eyebrow{
  grid-area: label;
  display: block;
  margin: 0;
  color: var(--dvd-muted);
  font-size: clamp(0.54rem, 0.58vw, 0.65rem);
}

.tv-stage[data-booted="true"] .contact-final__method strong,
.tv-stage[data-booted="true"] .contact-final__method + .contact-final__method strong{
  grid-area: value;
  min-width: 0;
  margin-top: 0.3rem;
  color: var(--dvd-fg);
  font-weight: 680;
  line-height: 1.08;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  transition: color 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tv-stage[data-booted="true"] .contact-final__method--email strong{
  font-size: clamp(1.42rem, 1.85vw, 1.95rem);
}

.tv-stage[data-booted="true"] .contact-final__method--phone strong,
.tv-stage[data-booted="true"] .contact-final__method + .contact-final__method strong{
  font-size: clamp(0.98rem, 1.08vw, 1.18rem);
  letter-spacing: -0.012em;
}

.tv-stage[data-booted="true"] .contact-final__action{
  display: inline-flex;
  grid-area: action;
  align-items: center;
  align-self: center;
  gap: 0.45rem;
  color: var(--dvd-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.56rem, 0.6vw, 0.68rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: color 180ms ease;
}

.tv-stage[data-booted="true"] .contact-final__action i,
.tv-stage[data-booted="true"] .contact-final__links a > i{
  display: inline-block;
  font-style: normal;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tv-stage[data-booted="true"] .contact-final__method:hover strong,
.tv-stage[data-booted="true"] .contact-final__method:focus-visible strong{
  color: var(--dvd-accent);
  transform: translate3d(3px, 0, 0);
}

.tv-stage[data-booted="true"] .contact-final__method:hover .contact-final__action,
.tv-stage[data-booted="true"] .contact-final__method:focus-visible .contact-final__action{
  color: var(--dvd-accent);
}

.tv-stage[data-booted="true"] .contact-final__method:hover .contact-final__action i,
.tv-stage[data-booted="true"] .contact-final__method:focus-visible .contact-final__action i{
  transform: translate3d(3px, -3px, 0);
}

.tv-stage[data-booted="true"] .contact-final__method:focus-visible,
.tv-stage[data-booted="true"] .contact-final__links a:focus-visible{
  outline: 1px solid color-mix(in srgb, var(--dvd-accent) 72%, transparent);
  outline-offset: 3px;
}

.tv-stage[data-booted="true"] .contact-final__links{
  display: grid;
  grid-area: links;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
}

.tv-stage[data-booted="true"] .contact-final__links-head{
  min-height: 1.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--dvd-line) 78%, transparent);
}

.tv-stage[data-booted="true"] .contact-final__links a{
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  min-height: 2.15rem;
  padding: 0;
  color: var(--dvd-fg);
  font-size: clamp(0.86rem, 0.96vw, 1.02rem);
  line-height: 1;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--dvd-line) 68%, transparent);
  transition: color 180ms ease;
}

.tv-stage[data-booted="true"] .contact-final__links a:last-child{
  border-bottom: 0;
}

.tv-stage[data-booted="true"] .contact-final__links a::after{
  display: none;
  content: none;
}

.tv-stage[data-booted="true"] .contact-final__link-index{
  color: var(--dvd-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.54rem, 0.58vw, 0.64rem);
  font-weight: 650;
  letter-spacing: 0.1em;
}

.tv-stage[data-booted="true"] .contact-final__links a strong{
  min-width: 0;
  font-weight: 650;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tv-stage[data-booted="true"] .contact-final__links a > i{
  color: var(--dvd-muted);
}

.tv-stage[data-booted="true"] .contact-final__links a:hover,
.tv-stage[data-booted="true"] .contact-final__links a:focus-visible{
  color: var(--dvd-accent);
  text-decoration: none;
}

.tv-stage[data-booted="true"] .contact-final__links a:hover strong,
.tv-stage[data-booted="true"] .contact-final__links a:focus-visible strong{
  transform: translate3d(3px, 0, 0);
}

.tv-stage[data-booted="true"] .contact-final__links a:hover > i,
.tv-stage[data-booted="true"] .contact-final__links a:focus-visible > i{
  color: var(--dvd-accent);
  transform: translate3d(3px, -3px, 0);
}

.tv-stage[data-booted="true"] .contact-final__footer{
  display: flex;
  grid-area: auto;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  margin-top: clamp(0.8rem, 1.6vh, 1.15rem);
  padding-top: clamp(0.7rem, 1.2vh, 0.9rem);
  color: var(--dvd-muted);
  border-top: 1px solid color-mix(in srgb, var(--dvd-line) 78%, transparent);
}

@media (min-width: 1101px) {
  .tv-stage[data-booted="true"] .contact-final.screen-page--contact{
    grid-template-columns: minmax(0, 1fr) clamp(23rem, 32vw, 29rem) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: clamp(1.75rem, 2.6vw, 3rem) !important;
    row-gap: 0 !important;
  }

  .tv-stage[data-booted="true"] .contact-final__title,
  .tv-stage[data-booted="true"] .contact-final__rail{
    align-self: start;
    margin-top: clamp(3rem, 6vh, 4.5rem) !important;
  }

  .tv-stage[data-booted="true"] .contact-final__title{
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0 !important;
  }

  .tv-stage[data-booted="true"] button.contact-final__line{
    font-size: clamp(6.35rem, calc(15.7vw - 2.6rem), 14.5rem);
  }

  .tv-stage[data-booted="true"] .contact-final__rail{
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
  }

  .tv-stage[data-booted="true"] .contact-final__footer{
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .contact-final__rail{
    min-height: 0;
  }

  .tv-stage[data-booted="true"] .contact-final__method--email strong{
    font-size: clamp(1.25rem, 4.2vw, 1.72rem);
  }

  .tv-stage[data-booted="true"] .contact-final__links a{
    min-height: 2.35rem;
  }
}

@media (max-width: 560px) {
  .tv-stage[data-booted="true"] .contact-final__method,
  .tv-stage[data-booted="true"] .contact-final__method--email,
  .tv-stage[data-booted="true"] .contact-final__method--phone{
    grid-template:
      "label action" auto
      "value value" auto
      / minmax(0, 1fr) auto;
  }

  .tv-stage[data-booted="true"] .contact-final__method strong,
  .tv-stage[data-booted="true"] .contact-final__method + .contact-final__method strong{
    margin-top: 0.4rem;
  }

  .tv-stage[data-booted="true"] .contact-final__footer{
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv-stage[data-booted="true"] .contact-final__method strong,
  .tv-stage[data-booted="true"] .contact-final__action,
  .tv-stage[data-booted="true"] .contact-final__action i,
  .tv-stage[data-booted="true"] .contact-final__links a,
  .tv-stage[data-booted="true"] .contact-final__links a strong,
  .tv-stage[data-booted="true"] .contact-final__links a > i{
    transition: none;
  }
}

/* 20260822: lightweight SF identity card; the photo gate is intentionally retired. */
.logo.hud-label[data-identity-card-open]{
  --identity-magnet-x: 0px;
  --identity-magnet-y: 0px;
  --identity-hit-pad-inline: 0.75rem;
  --identity-hit-pad-block: 0.8rem;
  appearance: none;
  box-sizing: border-box;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: var(--identity-hit-pad-block) var(--identity-hit-pad-inline);
  margin:
    calc(0rem - var(--identity-hit-pad-block))
    calc(0rem - var(--identity-hit-pad-inline));
  cursor: none;
  translate: var(--identity-magnet-x) var(--identity-magnet-y);
  scale: 1;
  transition:
    translate 180ms cubic-bezier(0.16, 1, 0.3, 1),
    scale 140ms ease;
}

.logo.hud-label[data-identity-card-open]:active{
  scale: 0.9;
}

.logo.hud-label[data-identity-card-open]::before{
  position: absolute;
  top: 50%;
  left: calc(100% - var(--identity-hit-pad-inline) + 0.48rem);
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  content: "";
  background: currentColor;
  opacity: 0.32;
  transform: translateY(-50%) scale(0.72);
  transition: opacity 180ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.logo.hud-label[data-identity-card-open]::after{
  position: absolute;
  top: 50%;
  left: calc(100% - var(--identity-hit-pad-inline) + 0.95rem);
  content: "PROFILE";
  color: currentColor;
  font-family: var(--font-hero-meta);
  font-size: 0.52rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-0.3rem, -50%, 0);
  transition: opacity 180ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.logo.hud-label[data-identity-card-open]:hover::before,
.logo.hud-label[data-identity-card-open]:focus-visible::before,
.logo.hud-label[data-identity-card-open][aria-expanded="true"]::before{
  opacity: 0.84;
  transform: translateY(-50%) scale(1);
}

.logo.hud-label[data-identity-card-open]:hover::after,
.logo.hud-label[data-identity-card-open]:focus-visible::after,
.logo.hud-label[data-identity-card-open][aria-expanded="true"]::after{
  opacity: 0.52;
  transform: translate3d(0, -50%, 0);
}

.logo.hud-label[data-identity-card-open]:focus-visible{
  outline: 1px solid currentColor;
  outline-offset: -0.12rem;
}

.identity-card{
  position: fixed;
  top: clamp(4.5rem, 7vw, 6rem);
  left: clamp(1.1rem, 2.6vw, 2.5rem);
  z-index: 80;
  width: min(23.5rem, calc(100vw - 2.2rem));
  overflow: hidden;
  border: 1px solid rgba(63, 51, 38, 0.2);
  color: #211d18;
  background:
    linear-gradient(
      145deg,
      rgba(238, 231, 219, 0.97) 0%,
      rgba(213, 198, 177, 0.97) 100%
    );
  box-shadow: 0 1.5rem 4.5rem rgba(57, 44, 31, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(0.96);
  backdrop-filter: blur(14px) saturate(0.96);
  opacity: 0;
  clip-path: inset(0 100% 100% 0);
  transform: translate3d(-0.65rem, -0.45rem, 0) scale(0.985);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity 170ms ease,
    clip-path 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.identity-card[hidden]{
  display: none !important;
}

.identity-card.is-open{
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.identity-card::before{
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.09;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(45, 36, 27, 0.055) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(45, 36, 27, 0.035) 7px 8px);
}

.identity-card__masthead,
.identity-card__body,
.identity-card__footer{
  position: relative;
  z-index: 1;
}

.identity-card__masthead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.8rem;
  padding: 0.65rem 0.72rem 0.65rem 1rem;
  border-bottom: 1px solid rgba(55, 44, 33, 0.16);
  font-family: var(--font-hero-meta);
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.07em;
}

.identity-card__masthead > span{
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.identity-card__masthead i{
  width: 0.34rem;
  height: 0.34rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #a75d35;
  opacity: 0.9;
}

.identity-card__close{
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid rgba(55, 44, 33, 0.22);
  border-radius: 50%;
  color: inherit;
  font-family: var(--font-hero-ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  transition: color 160ms ease, background-color 160ms ease, transform 240ms ease;
}

.identity-card__close:hover,
.identity-card__close:focus-visible{
  color: #eee8de;
  background: #27211b;
  outline: none;
  transform: rotate(7deg);
}

.identity-card__body{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.05rem;
  align-items: center;
  gap: 1rem;
  padding: 1.08rem 1.05rem 1.16rem 1.1rem;
}

.identity-card__copy{
  min-width: 0;
  padding: 0;
}

.identity-card__body h2{
  margin: 0;
  font-family: var(--font-hero-display);
  font-size: clamp(3rem, 4.2vw, 3.6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.identity-card__roles{
  margin: 0.72rem 0 0;
  font-family: var(--font-hero-ui);
  font-size: 0.77rem;
  font-weight: 650;
  line-height: 1.5;
  color: rgba(33, 29, 24, 0.88);
}

.identity-card__description{
  max-width: 28em;
  margin: 0.6rem 0 0;
  color: rgba(33, 29, 24, 0.7);
  font-family: var(--font-hero-ui);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.62;
  text-wrap: pretty;
}

.identity-card__photo{
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 248 / 330;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: #ece5da;
}

.identity-card__photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  filter: sepia(0.06) saturate(1.06) contrast(1.01) brightness(1.01);
  transform: scale(1.025);
  transform-origin: 50% 12%;
}

.identity-card__footer{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.66rem 0.95rem;
  border-top: 1px solid rgba(55, 44, 33, 0.16);
  color: rgba(33, 29, 24, 0.54);
  font-family: var(--font-hero-meta);
  font-size: 0.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

@media (max-width: 520px) {
  .logo.hud-label[data-identity-card-open]::after{
    display: none;
  }

  .identity-card{
    top: 4.1rem;
    left: 0.75rem;
    width: calc(100vw - 1.5rem);
  }

  .identity-card__body h2{
    font-size: 2.9rem;
  }

  .identity-card__body{
    grid-template-columns: minmax(0, 1fr) 3.6rem;
    gap: 0.7rem;
    padding: 1rem 0.9rem 1.05rem 1rem;
  }

  .identity-card__roles{
    font-size: 0.72rem;
  }

  .identity-card__description{
    font-size: 0.66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .identity-card,
  .identity-card *,
  .logo.hud-label[data-identity-card-open]::before,
  .logo.hud-label[data-identity-card-open]::after{
    transition-duration: 1ms !important;
  }

  .logo.hud-label[data-identity-card-open]{
    translate: 0 0 !important;
    scale: 1 !important;
  }
}

/* Selected projects: remove the production-label row and align the title rail. */
.tv-stage[data-booted="true"] .dvd-selected__copy > em{
  display: none !important;
}

@media (min-width: 821px) {
  .tv-stage[data-booted="true"] .dvd-selected__info{
    grid-template-columns: 1.7rem minmax(0, 1fr) 1.15rem !important;
    gap: clamp(0.52rem, 0.75vw, 0.76rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__copy{
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__index,
  .tv-stage[data-booted="true"] .dvd-selected__copy b,
  .tv-stage[data-booted="true"] .dvd-selected__info > small{
    line-height: 1 !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__index{
    min-width: 1.7rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__copy b{
    font-size: clamp(1rem, 1.28vw, 1.34rem) !important;
    letter-spacing: -0.025em !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__info > small{
    justify-self: end !important;
  }

  .tv-stage[data-booted="true"] .dvd-selected__info > small i{
    font-size: clamp(0.82rem, 0.9vw, 0.98rem) !important;
    line-height: 1 !important;
  }
}

/* Motion projects: remove the English category row and align the remaining
   number, Chinese title and arrow on one calm baseline. */
.tv-stage[data-booted="true"] .dvd-motion__copy > em{
  display: none !important;
}

.tv-stage[data-booted="true"] .dvd-motion__copy{
  align-self: center !important;
}

@media (min-width: 821px) {
  .tv-stage[data-booted="true"] .dvd-motion__info{
    grid-template-columns: 1.7rem minmax(0, 1fr) 1.15rem !important;
    gap: clamp(0.52rem, 0.75vw, 0.76rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-motion__copy{
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .tv-stage[data-booted="true"] .dvd-motion__index,
  .tv-stage[data-booted="true"] .dvd-motion__copy b,
  .tv-stage[data-booted="true"] .dvd-motion__info > i{
    line-height: 1 !important;
  }

  .tv-stage[data-booted="true"] .dvd-motion__index{
    min-width: 1.7rem !important;
  }

  .tv-stage[data-booted="true"] .dvd-motion__copy b{
    font-size: clamp(1rem, 1.28vw, 1.34rem) !important;
    letter-spacing: -0.025em !important;
  }

.tv-stage[data-booted="true"] .dvd-motion__info > i{
    justify-self: end !important;
    font-size: clamp(0.82rem, 0.9vw, 0.98rem) !important;
  }
}

@keyframes skillsTurbulenceA {
  0%, 100% { translate: -2px 1.8px; rotate: -0.2deg; }
  14% { translate: 6px -4.2px; rotate: 0.5deg; }
  36% { translate: -5px -1.8px; rotate: 0.16deg; }
  56% { translate: 3px 4.5px; rotate: -0.56deg; }
  78% { translate: 6.5px -1.5px; rotate: 0.28deg; }
  91% { translate: -6px 3px; rotate: -0.46deg; }
}

@keyframes skillsTurbulenceB {
  0%, 100% { translate: 3px -1.5px; rotate: 0.22deg; }
  18% { translate: -7px 5px; rotate: -0.64deg; }
  35% { translate: -8px -3px; rotate: 0.36deg; }
  54% { translate: 5.5px -5.5px; rotate: 0.7deg; }
  74% { translate: 2px 4.2px; rotate: -0.3deg; }
  89% { translate: 8px 2px; rotate: 0.5deg; }
}

@keyframes skillsTurbulenceC {
  0%, 100% { translate: -1px -3px; rotate: 0.14deg; }
  14% { translate: 5px 5.5px; rotate: -0.72deg; }
  33% { translate: 7px 1px; rotate: 0.46deg; }
  49% { translate: -4px -6px; rotate: 0.68deg; }
  69% { translate: -7px 3.8px; rotate: -0.44deg; }
  86% { translate: 3px 5px; rotate: -0.2deg; }
}

@keyframes skillsTurbulenceD {
  0%, 100% { translate: 2px 2.5px; rotate: -0.24deg; }
  17% { translate: -8px -4px; rotate: 0.62deg; }
  39% { translate: 5px -4.5px; rotate: -0.48deg; }
  56% { translate: 7.5px 3.5px; rotate: 0.3deg; }
  76% { translate: -3px 4.5px; rotate: 0.68deg; }
  92% { translate: -6px -1px; rotate: -0.56deg; }
}

/* About / abilities: a restrained magnetic tray. The force itself is round,
   while the labels stay softly squared and drift through a low-frequency field. */
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tv-stage[data-booted="true"] .dvd-about-grid{
    align-items: stretch !important;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills{
    display: flex !important;
    min-height: 0;
    flex-direction: column;
    align-self: stretch !important;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > h3{
    flex: 0 0 auto;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field]{
    --skills-pointer-x: 50%;
    --skills-pointer-y: 50%;
    position: relative;
    isolation: isolate;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 0;
    max-width: none;
    padding: clamp(0.78rem, 1.2vw, 1rem);
    overflow: hidden;
    contain: layout paint;
    border: 1px solid color-mix(in srgb, var(--dvd-line-strong) 46%, transparent);
    border-radius: 1.12rem;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--dvd-fg) 2.2%, transparent), transparent 54%),
      color-mix(in srgb, var(--dvd-bg-soft) 12%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dvd-fg) 3.5%, transparent);
    transition:
      border-color 260ms ease,
      background-color 260ms ease,
      box-shadow 260ms ease;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field]::before{
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: clamp(7.4rem, 11vw, 9.5rem);
    aspect-ratio: 1;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--dvd-accent) 24%, transparent);
    border-radius: 50%;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--dvd-accent) 7%, transparent) 0,
      color-mix(in srgb, var(--dvd-accent) 2.5%, transparent) 44%,
      transparent 72%
    );
    opacity: 0;
    transform: translate3d(
      calc(var(--skills-pointer-x) - 50%),
      calc(var(--skills-pointer-y) - 50%),
      0
    ) scale(0.72);
    transition: opacity 180ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-active{
    border-color: color-mix(in srgb, var(--dvd-accent) 24%, var(--dvd-line-strong));
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--dvd-fg) 5%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--dvd-accent) 4%, transparent);
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-active::before{
    opacity: 0.86;
    transform: translate3d(
      calc(var(--skills-pointer-x) - 50%),
      calc(var(--skills-pointer-y) - 50%),
      0
    ) scale(1);
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-ready{
    display: block !important;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-ready > span{
    position: absolute !important;
    z-index: 1;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0.78rem !important;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transform-origin: 50% 50%;
    animation-duration: var(--skill-drift-duration, 9s);
    animation-delay: var(--skill-drift-delay, 0s);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-play-state: paused;
    background: color-mix(in srgb, var(--dvd-bg-soft) 24%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dvd-fg) 4%, transparent);
    transition:
      opacity 200ms ease,
      color 180ms ease,
      border-color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease !important;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-laid-out > span{
    opacity: 1;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-ready > span:nth-child(-n + 4){
    animation-name: skillsTurbulenceA;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-ready > span:nth-child(n + 5):nth-child(-n + 9){
    animation-name: skillsTurbulenceB;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-ready > span:nth-child(n + 10):nth-child(-n + 13){
    animation-name: skillsTurbulenceC;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-ready > span:nth-child(n + 14){
    animation-name: skillsTurbulenceD;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-in-view.is-magnet-laid-out > span{
    animation-play-state: running;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-running > span{
    will-change: transform;
  }

  .tv-stage[data-booted="true"] .dvd-about-grid > .dvd-skills > [data-skills-field].is-magnet-ready > span.is-magnet-charged{
    color: var(--dvd-fg) !important;
    border-color: color-mix(in srgb, var(--dvd-accent) 54%, var(--dvd-line-strong)) !important;
    background: color-mix(in srgb, var(--dvd-accent) 8%, var(--dvd-bg-soft)) !important;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--dvd-fg) 7%, transparent),
      0 0.45rem 1.35rem color-mix(in srgb, var(--dvd-accent) 9%, transparent);
  }
}

/* About / experience: internship is a quiet status marker rather than part of
   the company name. The warm tint follows the screen palette in both themes. */
.tv-stage[data-booted="true"] .dvd-timeline em.has-internship{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem 0.42rem;
}

.tv-stage[data-booted="true"] .dvd-timeline .dvd-timeline__internship{
  display: inline-flex;
  min-height: 1.2rem;
  align-items: center;
  gap: 0.34rem;
  padding: 0.16rem 0.48rem 0.18rem;
  border: 1px solid color-mix(in srgb, var(--dvd-project-accent) 38%, var(--dvd-line-strong));
  border-radius: 0.28rem;
  color: color-mix(in srgb, var(--dvd-project-accent) 82%, var(--dvd-fg)) !important;
  background: color-mix(in srgb, var(--dvd-project-accent) 7%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dvd-fg) 5%, transparent);
  font-family: var(--font-mono), "IBM Plex Mono", monospace;
  font-size: clamp(0.58rem, 0.62vw, 0.68rem) !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: translateY(-0.02rem);
}

.tv-stage[data-booted="true"] .dvd-timeline .dvd-timeline__internship::before{
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.72;
}

@media (max-width: 820px) {
  .tv-stage[data-booted="true"] .dvd-timeline .dvd-timeline__internship{
    min-height: 1.08rem;
    padding: 0.13rem 0.4rem 0.15rem;
    font-size: 0.56rem !important;
  }
}

/* 20260825: mobile input and viewport stability pass. The desktop composition
   stays untouched; small/coarse screens keep native vertical scrolling after
   the opening sequence and no longer jump when browser chrome expands. */
@media (max-width: 820px), (pointer: coarse) {
  html,
  body{
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }

  .tv-scene,
  .screen-ui{
    height: 100svh;
  }

  .television{
    height: 120svh;
    top: -10svh;
  }

  .screen-ui,
  .screen-deck,
  .screen-page,
  .dvd-selected,
  .dvd-motion-board,
  .dvd-motion__item{
    touch-action: pan-y;
  }

  .tv-stage[data-booted="true"] .dvd-motion__item{
    min-height: 0;
    grid-template-rows: auto auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .tv-stage[data-booted="true"] .dvd-motion__media{
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .tv-stage[data-booted="true"] .dvd-motion__info{
    min-height: 4.6rem;
  }

  .tv-stage[data-booted="true"] .dvd-motion__item:active{
    border-color: color-mix(in srgb, var(--dvd-accent) 60%, var(--dvd-line-strong));
  }

  .tv-stage[data-booted="true"] .dvd-motion__state,
  .tv-stage[data-booted="true"] .dvd-motion__count{
    bottom: 0.72rem;
    font-size: 0.56rem;
  }

  .tv-stage[data-booted="true"] .dvd-motion__state{
    left: 0.76rem;
  }

  .tv-stage[data-booted="true"] .dvd-motion__count{
    right: 0.76rem;
  }
}

/* 20260825: desktop viewport fit. The mobile showreel is a separate route and
   remains untouched. One fluid type scale keeps the complete composition
   proportionate from compact laptops through 2K/4K displays. */
@media (min-width: 821px) {
  html{
    font-size: clamp(15px, calc(12.5px + 0.243vw), 18px);
  }

  :root{
    --desktop-content-limit: 120rem;
    --desktop-edge-gutter: max(
      clamp(1.4rem, 3vw, 3.75rem),
      calc((100vw - var(--desktop-content-limit)) / 2)
    );
  }

  .hero{
    padding-inline: var(--desktop-edge-gutter);
  }

  .hero__title-wrap.hero-editorial{
    width: min(100%, var(--desktop-content-limit));
    margin-inline: auto;
    column-gap: clamp(2rem, 3.2vw, 4.5rem);
    padding-top: clamp(4.75rem, 9vh, 7.25rem);
    padding-bottom: clamp(4.75rem, 8.5vh, 7rem);
  }

  .hud{
    right: var(--desktop-edge-gutter);
    left: var(--desktop-edge-gutter);
  }

  .tv-stage[data-booted="true"] .dvd-nav{
    right: var(--desktop-edge-gutter) !important;
    left: var(--desktop-edge-gutter) !important;
  }

  .tv-stage[data-booted="true"] .dvd-section.screen-page{
    padding-right: var(--desktop-edge-gutter) !important;
    padding-left: var(--desktop-edge-gutter) !important;
  }

  .drawer-panel{
    width: clamp(32rem, 48vw, 50rem);
    min-width: 0;
  }
}

/* Short laptop displays need a slightly denser vertical rhythm. Width-based
   proportions stay intact, so 1366×768 and ultrawide screens keep the same look. */
@media (min-width: 821px) and (max-height: 780px) {
  html{
    font-size: clamp(14px, calc(11.5px + 0.22vw), 15.5px);
  }

  .hero__title-wrap.hero-editorial{
    padding-top: clamp(4.2rem, 8vh, 5.4rem);
    padding-bottom: clamp(4rem, 7.5vh, 5.15rem);
  }

  .hero-editorial .hero__intro{
    margin-top: 0;
  }

  .hero .hero-marquee{
    bottom: 2.65rem;
  }

  .tv-stage[data-booted="true"] .dvd-nav{
    top: clamp(0.9rem, 2vh, 1.35rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-work.screen-page--projects{
    padding-top: clamp(3.35rem, 6vh, 4rem) !important;
  }

  .tv-stage[data-booted="true"] .dvd-work .dvd-section-head{
    margin-bottom: clamp(0.78rem, 1.55vh, 1.15rem) !important;
  }
}

/* Very wide canvases stop stretching after the editorial composition reaches
   its designed reading width; the remaining space becomes balanced margin. */
@media (min-width: 2400px) {
  :root{
    --desktop-content-limit: 128rem;
  }
}