@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap');.gooey-nav {
  --gn-pad: 6px;
  --gn-gap: 4px;
  --gn-font: 14px;
  --gn-x: 16px;
  --gn-y: 9px;
  position: relative;
  display: inline-flex;
  max-width: 100%;
  font-size: var(--gn-font);
  line-height: 1.2;
}

.gooey-nav--sm {
  --gn-pad: 5px;
  --gn-gap: 2px;
  --gn-font: 13px;
  --gn-x: 13px;
  --gn-y: 7px;
}

.gooey-nav--lg {
  --gn-pad: 7px;
  --gn-gap: 6px;
  --gn-font: 16px;
  --gn-x: 20px;
  --gn-y: 11px;
}

.gooey-nav--framed {
  padding: var(--gn-pad);
  border-radius: 999px;
  background: var(--gn-frame);
  box-shadow: var(--gn-frame-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}

.gooey-nav__stage {
  position: relative;
  max-width: 100%;
}

.gooey-nav__canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.gooey-nav__fallback {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  border-radius: 999px;
  background: var(--gn-pill);
  pointer-events: none;
}

.gooey-nav__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gn-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gooey-nav__list--active {
  position: absolute;
  inset: 0;
  color: var(--gn-active-ink);
  visibility: hidden;
  clip-path: inset(100%);
  pointer-events: none;
}

.gooey-nav__item {
  display: flex;
}

.gooey-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--gn-y) var(--gn-x);
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--gn-muted);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.gooey-nav__list--active .gooey-nav__link {
  color: inherit;
}

.gooey-nav__item[data-active] .gooey-nav__link {
  color: var(--gn-ink);
}

.gooey-nav__link:focus-visible {
  outline: 2px solid var(--gn-ink);
  outline-offset: 2px;
}

.gooey-nav__icon {
  display: inline-flex;
  flex: none;
}

.gooey-nav__icon svg {
  width: 1.15em;
  height: 1.15em;
}

.gooey-nav__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--gn-frame-edge),
    inset 0 1px 0 var(--gn-frame-highlight);
  pointer-events: none;
}

@media (hover: hover) {
  .gooey-nav__link:hover {
    color: var(--gn-ink);
  }
}.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.border-glow-card--light {
  border-color: rgb(24 24 27 / 12%);
  box-shadow:
    rgb(24 24 27 / 4%) 0 1px 2px,
    rgb(24 24 27 / 5%) 0 8px 24px;
}

.border-glow-card--light::after,
.border-glow-card--light > .edge-light {
  mix-blend-mode: normal;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 1;
}

.glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.26s ease-out;
}

.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}

.glass-surface__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.glass-surface--svg {
  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%))
      inset,
    0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%))
      inset,
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05),
    0px 16px 56px rgba(17, 17, 26, 0.05),
    0px 4px 16px rgba(17, 17, 26, 0.05) inset,
    0px 8px 24px rgba(17, 17, 26, 0.05) inset,
    0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}

.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),
    0 2px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.4);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
  }

  .glass-surface--fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: inherit;
    z-index: -1;
  }
}

@supports not (backdrop-filter: blur(10px)) {
  @media (prefers-color-scheme: dark) {
    .glass-surface--fallback {
      background: rgba(0, 0, 0, 0.4);
    }

    .glass-surface--fallback::before {
      background: rgba(255, 255, 255, 0.05);
    }
  }
}

.glass-surface:focus-visible {
  outline: 2px solid light-dark(#007aff, #0a84ff);
  outline-offset: 2px;
}

.logoloop {
  position: relative;

  --logoloop-gap: 32px;
  --logoloop-logoHeight: 28px;
  --logoloop-fadeColorAuto: #ffffff;
}

.logoloop--vertical {
  height: 100%;
  display: inline-block;
}

.logoloop--scale-hover {
  padding-top: calc(var(--logoloop-logoHeight) * 0.1);
  padding-bottom: calc(var(--logoloop-logoHeight) * 0.1);
}

@media (prefers-color-scheme: dark) {
  .logoloop {
    --logoloop-fadeColorAuto: #0b0b0b;
  }
}

.logoloop__track {
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
  position: relative;
  z-index: 0;
}

.logoloop--vertical .logoloop__track {
  flex-direction: column;
  height: max-content;
  width: 100%;
}

.logoloop__list {
  display: flex;
  align-items: center;
}

.logoloop--vertical .logoloop__list {
  flex-direction: column;
}

.logoloop__item {
  flex: 0 0 auto;
  margin-right: var(--logoloop-gap);
  font-size: var(--logoloop-logoHeight);
  line-height: 1;
}

.logoloop--vertical .logoloop__item {
  margin-right: 0;
  margin-bottom: var(--logoloop-gap);
}

.logoloop__item:last-child {
  margin-right: var(--logoloop-gap);
}

.logoloop--vertical .logoloop__item:last-child {
  margin-right: 0;
  margin-bottom: var(--logoloop-gap);
}

.logoloop__node {
  display: inline-flex;
  align-items: center;
}

.logoloop__item img {
  height: var(--logoloop-logoHeight);
  width: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logoloop--scale-hover .logoloop__item {
  overflow: visible;
}

.logoloop--scale-hover .logoloop__item:hover img,
.logoloop--scale-hover .logoloop__item:hover .logoloop__node {
  transform: scale(1.2);
  transform-origin: center center;
}

.logoloop--scale-hover .logoloop__node {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logoloop__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

.logoloop__link:hover {
  opacity: 0.8;
}

.logoloop__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.logoloop--fade::before,
.logoloop--fade::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 8%, 120px);
  pointer-events: none;
  z-index: 10;
}

.logoloop--fade::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.logoloop--fade::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.logoloop--vertical.logoloop--fade::before,
.logoloop--vertical.logoloop--fade::after {
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(24px, 8%, 120px);
}

.logoloop--vertical.logoloop--fade::before {
  top: 0;
  bottom: auto;
  background: linear-gradient(
    to bottom,
    var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.logoloop--vertical.logoloop--fade::after {
  bottom: 0;
  top: auto;
  background: linear-gradient(
    to top,
    var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .logoloop__track {
    transform: translate3d(0, 0, 0) !important;
  }

  .logoloop__item img,
  .logoloop__node {
    transition: none !important;
  }
}

.depth-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--dc-perspective, 1400px);
  perspective-origin: 50% 50%;
  touch-action: pan-y;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.depth-carousel:active {
  cursor: grabbing;
}

.depth-carousel:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
  border-radius: 12px;
}

.depth-carousel__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.depth-carousel__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  overflow: hidden;
  background: #0b0d12;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.65),
    0 8px 20px -10px rgba(0, 0, 0, 0.5);
  will-change: transform, opacity, filter;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.depth-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.depth-carousel__tint {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.depth-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3000;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(18, 20, 26, 0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.depth-carousel__arrow:hover {
  background: rgba(28, 31, 40, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}

.depth-carousel__arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.depth-carousel__arrow--prev {
  left: 16px;
}

.depth-carousel__arrow--next {
  right: 16px;
}

.depth-carousel__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(14, 16, 22, 0.4);
  backdrop-filter: blur(6px);
}

.depth-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition:
    width 0.25s ease,
    background 0.25s ease;
}

.depth-carousel__dot.is-active {
  width: 20px;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .depth-carousel__card {
    will-change: auto;
  }
  .depth-carousel__arrow,
  .depth-carousel__dot {
    transition: none;
  }
}

.glow-cursor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.glow-cursor__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.glow-cursor__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}


.glow-cursor.global-glow{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:80}
@media(prefers-reduced-motion:reduce),(pointer:coarse){.global-glow{display:none}}
:root{color-scheme:dark;--bg:#070b09;--ink:#f1f5ef;--muted:#9aa49d;--green:#b8ff63;--line:#e2ffdc29;--shell:min(1700px,calc(100vw - 96px));font-family:'DM Sans','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--bg);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.shell{width:var(--shell);margin:auto}.skip{position:fixed;z-index:99;transform:translateY(-150%);background:var(--green);color:#071008;padding:12px}.skip:focus{transform:none}.nav{height:88px;position:absolute;z-index:10;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #ffffff26}.logo{font:600 25px 'Space Grotesk',Arial,sans-serif;letter-spacing:-2px}.logo span,.hero h1 span,.about em,.strength em{color:var(--green)}.links{display:flex;gap:44px;font-size:clamp(11.05px,0.9259vw,15.6px);letter-spacing:.12em}.links a:hover{color:var(--green)}.talk{justify-self:end;display:flex;gap:10px;align-items:center;border:1px solid #ffffff47;border-radius:99px;padding:12px 18px}.menu{display:none;background:0;border:0;color:white}.hero{min-height:100svh;position:relative;isolation:isolate;overflow:hidden}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#030604e6,#03060473 55%,#03060422),linear-gradient(0deg,var(--bg),transparent 25%)}.media{position:absolute;inset:0;z-index:-2}.media canvas,.media video{position:absolute;width:100%;height:100%;object-fit:cover}.media video{opacity:.72;mix-blend-mode:screen}.hero-in{min-height:100svh;padding-top:176px;display:grid;grid-template-columns:1fr 300px;align-content:center;position:relative}.eyebrow,.kicker{font:500 12px 'Space Grotesk',Arial,sans-serif;letter-spacing:.17em;color:#bac3bc}.eyebrow{position:absolute;top:29%}.eyebrow i{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 16px var(--green);margin-right:10px}.hero h1{font:500 clamp(70px,8.15vw,150px)/.91 'Space Grotesk',Arial,sans-serif;letter-spacing:-.072em;margin:0;max-width:1400px}.hero-in>p{align-self:end;color:#c6cec8;font-size:clamp(14.45px,1.2108vw,20.4px);line-height:1.8;margin:0 0 28px}.scroll{position:absolute;bottom:44px;display:flex;align-items:center;gap:16px;font:500 11px 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em}.scroll svg{border:1px solid var(--line);border-radius:50%;padding:12px;box-sizing:content-box}.year{position:absolute;right:0;bottom:43px;text-align:right;font:12px/1.5 'Space Grotesk',Arial,sans-serif;color:var(--muted)}.year b{color:white;font-size:clamp(23.8px,1.9943vw,33.6px)}.section{padding:150px 0}.kicker{display:flex;gap:15px;align-items:center}.kicker span{color:var(--green)}.kicker:after{content:'';height:1px;width:64px;background:var(--line)}.about-grid{display:grid;grid-template-columns:minmax(320px,560px) 1fr;gap:clamp(70px,8vw,160px);margin-top:74px}.portrait{height:650px;position:relative;overflow:hidden;background:#17211c}.portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.76)}.portrait span{position:absolute;right:28px;bottom:28px;width:126px;height:126px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--green);color:#071008;font:600 11px/1.5 'Space Grotesk',Arial,sans-serif;transform:rotate(7deg)}h2{font:500 clamp(52px,5.5vw,98px)/.96 'Space Grotesk',Arial,sans-serif;letter-spacing:-.06em;margin:0}.bio{padding-top:18px}.lead{font-size:clamp(21.25px,1.7806vw,30px);line-height:1.45;max-width:580px;margin:50px 0 28px}.bio>p:last-of-type{font-size:clamp(13.6px,1.1396vw,19.2px);line-height:1.9;color:var(--muted);max-width:720px}.timeline{margin-top:55px;border-top:1px solid var(--line)}.timeline>div{display:grid;grid-template-columns:155px 1fr;border-bottom:1px solid var(--line);padding:24px 0}.timeline time{font:12px 'Space Grotesk',Arial,sans-serif;color:var(--green)}.timeline p{margin:0;line-height:1.65;color:var(--muted)}.timeline b{color:var(--ink);font-weight:500}.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:88px;border-block:1px solid var(--line)}.stats>div{display:flex;align-items:center;gap:20px;padding:38px 30px;border-right:1px solid var(--line)}.stats b{font:500 58px 'Space Grotesk',Arial,sans-serif;letter-spacing:-.07em}.stats sup{font-size:clamp(17px,1.4245vw,24px);color:var(--green)}.stats span{font:11px/1.5 'Space Grotesk',Arial,sans-serif;color:var(--muted)}.head{display:flex;justify-content:space-between;align-items:start;margin-bottom:66px}.head>p{margin:0;color:var(--muted);line-height:1.65}.projects{display:grid;gap:120px}.visual{position:relative;aspect-ratio:2.08;overflow:hidden;background:#111}.visual img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.project:hover img{transform:scale(1.025)}.visual span{position:absolute;top:24px;left:24px;background:#030805b3;border:1px solid #ffffff38;padding:11px 15px;border-radius:99px}.meta{display:grid;grid-template-columns:1.2fr 1fr auto;align-items:end;border-bottom:1px solid var(--line);padding:28px 0}.meta h3{font:500 42px 'Space Grotesk',Arial,sans-serif;margin:0 0 8px}.meta p{color:var(--muted);margin:0}.meta ul{display:flex;gap:8px;list-style:none;margin:0;padding:0}.meta li{border:1px solid var(--line);padding:8px 12px;border-radius:99px;font-size:clamp(10.2px,0.8547vw,14.4px)}.meta button{display:flex;gap:10px;background:0;border:0;color:white;cursor:pointer}.meta button:hover{color:var(--green)}.strength{padding-top:120px}.strength .head{align-items:end}.strength .head h2{text-align:right;font-size:clamp(48px,5vw,82px)}.strength-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.strength-grid article{min-height:325px;display:grid;grid-template-columns:60px 1fr;padding:38px;border-bottom:1px solid var(--line)}.strength-grid article:nth-child(odd){border-right:1px solid var(--line)}.strength-grid article>span{color:var(--green)}.strength-grid small{letter-spacing:.16em;color:#758078}.strength-grid h3{font:500 31px 'Space Grotesk',Arial,sans-serif;margin:52px 0 18px}.strength-grid p{max-width:510px;line-height:1.8;color:var(--muted)}.tools{display:flex;gap:32px;align-items:center;flex-wrap:wrap;padding:32px 0;border-bottom:1px solid var(--line)}.tools span{color:var(--green);margin-right:auto}.tools p{margin:0}.contact{min-height:100svh;background:var(--green);color:#071008}.contact-in{min-height:100svh;display:flex;flex-direction:column;padding:86px 0 30px}.contact .kicker{color:#20321a}.contact .kicker span{color:#071008}.contact .kicker:after{background:#07100844}.contact-title{margin:auto 0;display:grid;grid-template-columns:1fr 2.2fr;align-items:end}.contact-title p{font-size:clamp(15.3px,1.2821vw,21.6px);line-height:1.6}.contact h2{font-size:clamp(78px,10vw,180px);line-height:.81;text-align:right}.contact h2 em{font-style:normal;color:transparent;-webkit-text-stroke:2px #071008}.mail{border-bottom:2px solid;display:flex;justify-content:space-between;align-items:center;font:500 clamp(26px,3vw,51px) 'Space Grotesk',Arial,sans-serif;padding:22px 0}footer{display:flex;gap:44px;align-items:center;padding-top:28px;font-size:clamp(9.35px,0.7835vw,13.2px)}footer a{display:flex;gap:7px;align-items:center}footer a:last-child{margin-left:auto}
@media(max-width:900px){:root{--shell:min(calc(100vw - 40px),1700px)}.nav{height:72px;grid-template-columns:1fr auto}.links{display:none;position:absolute;top:72px;left:0;right:0;background:#080d0a;padding:28px;flex-direction:column}.links.open{display:flex}.talk{display:none}.menu{display:block}.hero-in{grid-template-columns:1fr;padding-top:130px}.eyebrow{top:22%}.hero h1{font-size:clamp(54px,14vw,96px)}.hero-in>p{align-self:auto;margin-top:30px}.about-grid{grid-template-columns:1fr}.portrait{height:520px}.stats{grid-template-columns:1fr 1fr}.meta{grid-template-columns:1fr;gap:22px}.visual{aspect-ratio:1.25}.head{display:grid;gap:30px}.strength .head h2{text-align:left}.strength-grid{grid-template-columns:1fr}.strength-grid article:nth-child(odd){border-right:0}.contact-title{grid-template-columns:1fr}.contact h2{text-align:left}footer{flex-wrap:wrap}}
@media(max-width:560px){.section{padding:100px 0}.hero h1{font-size:clamp(45.9px,3.8462vw,64.8px)}.year{display:none}.portrait{height:430px}.timeline>div{grid-template-columns:1fr;gap:12px}.stats{grid-template-columns:1fr}.stats>div{border-bottom:1px solid var(--line)}.projects{gap:80px}.strength-grid article{grid-template-columns:36px 1fr;padding:28px 0}.contact h2{font-size:clamp(54.4px,4.5584vw,76.8px)}.mail{font-size:clamp(17px,1.4245vw,24px)}footer a:last-child{margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.visual img{transition:none}.media video{display:none}}

/* Interactive story hero */
.ghost-cursor{position:fixed;inset:0;z-index:80;pointer-events:none;mix-blend-mode:screen}.story-media{position:absolute;inset:0;z-index:-2;background:#050806}.story-media video{position:absolute;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.07);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}.story-second{opacity:0;transform:scale(1.035)}.story-step-1 .story-media video:first-child,.story-step-2 .story-media video:first-child{opacity:0}.story-step-1 .story-second,.story-step-2 .story-second{opacity:1;transform:scale(1)}.hero .eyebrow{top:auto;bottom:44px;left:0}.story-directory,.story-profile,.story-experience{position:absolute;opacity:0;pointer-events:none;transition:opacity .5s ease .2s,transform .7s cubic-bezier(.2,.7,.2,1) .1s}.story-directory{right:0;top:24%;width:min(470px,35vw);transform:translateX(35px)}.story-directory small,.story-profile small{display:block;font:11px 'Space Grotesk',Arial,sans-serif;letter-spacing:.17em;color:var(--green);margin-bottom:30px}.story-directory a{display:grid;grid-template-columns:45px 1fr;padding:19px 0;border-bottom:1px solid var(--line)}.story-directory a b{font:11px 'Space Grotesk',Arial,sans-serif;color:var(--green)}.story-directory a span{font:500 24px 'Space Grotesk'}.story-directory a i{display:block;font:normal 12px 'DM Sans',Arial,sans-serif;color:var(--muted);margin-top:6px}.story-step-1 .story-directory{opacity:1;transform:none;pointer-events:auto}.story-profile{right:0;top:27%;width:min(510px,38vw);transform:translateX(35px)}.story-profile h2{font-size:clamp(61.2px,5.1282vw,86.4px)}.story-profile p{font-size:clamp(15.3px,1.2821vw,21.6px);line-height:1.75;color:#c3cbc5}.story-profile a{display:inline-flex;gap:10px;align-items:center;margin-top:20px;font:11px 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em;color:var(--green)}.story-experience{left:0;bottom:19%;display:grid;gap:18px;transform:translateX(-30px)}.story-experience span{font:11px/1.8 'Space Grotesk',Arial,sans-serif;color:var(--green)}.story-experience b{font-size:clamp(14.45px,1.2108vw,20.4px);color:white;font-weight:500}.story-step-2 .story-profile,.story-step-2 .story-experience{opacity:1;transform:none;pointer-events:auto}.hero .scroll{left:auto;right:0;bottom:30px}.hero .scroll svg{width:20px;height:20px;padding:13px}.story-count{position:absolute;right:76px;bottom:43px;font:12px 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em;color:var(--green)}
.hero .eyebrow,.hero .scroll,.story-count{transition:opacity .32s ease,transform .48s cubic-bezier(.4,0,.2,1)}.is-transitioning .eyebrow{opacity:0;transform:translateX(-42px)}.is-transitioning .scroll,.is-transitioning .story-count{opacity:0;transform:translateY(26px)}.is-transitioning .story-directory,.is-transitioning .story-profile,.is-transitioning .story-experience{opacity:0!important;transform:translateX(42px)!important;pointer-events:none!important}.is-transitioning .story-experience{transform:translateX(-42px)!important}.is-transitioning .story-media video{filter:saturate(.72) contrast(1.05) brightness(.82)}

/* Behance-style case viewer */
.project-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}.visual>i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#05080699;font:500 12px 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em;color:var(--green);opacity:0;transition:opacity .25s}.project-open:hover .visual>i,.project-open:focus-visible .visual>i{opacity:1}.project-open:focus-visible{outline:2px solid var(--green);outline-offset:8px}.view-case{display:flex;align-items:center;gap:10px;font:11px 'Space Grotesk',Arial,sans-serif;letter-spacing:.15em}.modal-open{overflow:hidden}.case-modal{position:fixed;inset:0;z-index:100;background:#050806;display:grid;grid-template-rows:74px 1fr;animation:case-in .35s cubic-bezier(.2,.7,.2,1)}.case-bar{display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:#090e0b}.case-bar>div:first-child{display:flex;align-items:center;gap:22px}.case-bar span{font:10px 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em;color:var(--green)}.case-bar strong{font:500 18px 'Space Grotesk'}.case-actions{display:flex;gap:8px}.case-actions button{width:44px;height:44px;border:1px solid var(--line);background:#101612;color:white;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}.case-actions button:hover,.case-actions button:focus-visible{background:var(--green);color:#071008;outline:0}.case-close{margin-left:8px}.case-stage{overflow:hidden;background:#171a18}.case-stage iframe{width:100%;height:100%;border:0;background:#fff}@keyframes case-in{from{opacity:0;transform:translateY(16px)}}

@media(max-width:900px){.ghost-cursor{display:none}.story-directory,.story-profile{width:min(500px,92vw);right:auto;left:0}.story-directory{top:25%}.story-profile{top:25%}.story-experience{display:none}.hero-copy{align-self:center}.hero-copy>p{font-size:clamp(12.75px,1.0684vw,18px)}.hero-en{font-size:26vw}.case-bar{padding:0 14px}.case-bar span{display:none}.case-actions button{width:40px;height:40px}}


/* Final story composition */
:focus-visible{outline:2px solid var(--green);outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.hero .story-media{inset:0;overflow:hidden}.story-media video{opacity:1;object-fit:cover}.story-media .story-second{opacity:0}.hero:after{background:linear-gradient(0deg,#070b09 0%,transparent 19%,transparent 80%,#070b0944)}.story-step-1 .story-media video:first-child,.story-step-2 .story-media video:first-child{opacity:0}.story-step-1 .story-second,.story-step-2 .story-second{opacity:1}.story-step-2 .story-media{filter:brightness(.6)}.story-directory{top:25%;width:min(470px,37vw);padding:25px;background:linear-gradient(90deg,#070b0910,#070b09e6)}.story-directory a,.story-directory button{display:grid;grid-template-columns:32px 1fr 20px;align-items:center;width:100%;padding:20px 0;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);text-align:left;cursor:pointer}.story-directory button b{font-size:clamp(9.35px,0.7835vw,13.2px);color:var(--green)}.story-directory button span{font:500 24px 'Space Grotesk',sans-serif}.story-directory button i{display:block;font:normal 12px sans-serif;color:var(--muted);margin-top:6px}.story-directory a:hover,.story-directory button:hover{color:var(--green)}.story-directory small{margin-bottom:12px}.story-profile{padding:25px;background:linear-gradient(90deg,#070b0933,#070b09df)}.story-profile h2{line-height:1.2}.story-count{display:flex;bottom:32px;right:76px;gap:6px}.story-count button{width:44px;height:44px;border:0;border-bottom:1px solid #ffffff35;background:none;color:var(--muted);cursor:pointer}.story-count button[aria-current]{color:var(--green);border-color:var(--green)}.story-hint{position:absolute;bottom:100px;right:0;font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.16em;color:#bbc4bb}.hero button.scroll{border:0;background:none;color:var(--ink);padding:0;cursor:pointer}.resume-link{display:inline-flex;align-items:center;gap:10px;color:var(--green);margin-top:18px;font-size:clamp(11.9px,0.9972vw,16.8px)}.case-modal{padding:0;border:0;margin:auto;width:calc(100% - 48px);height:calc(100dvh - 36px);max-width:1500px;max-height:none;color:var(--ink);border:1px solid var(--line);border-radius:12px;overflow:hidden}.case-modal:not([open]){display:none}.case-modal::backdrop{background:#020604dd;backdrop-filter:blur(12px)}.case-stage{overflow-y:auto;overscroll-behavior:contain;background:#121614;scrollbar-color:#5a685e #121614}.case-stage>img{display:block;width:100%;height:auto}.case-actions a{display:flex;align-items:center;gap:8px;padding:10px;font-size:clamp(10.2px,0.8547vw,14.4px)}.case-end{text-align:center;padding:70px 20px;color:var(--green)}.case-end p{font-size:clamp(10.2px,0.8547vw,14.4px);letter-spacing:.2em}.case-end button{display:inline-flex;align-items:center;gap:24px;padding:16px 24px;background:var(--green);color:#070b09;border:0;cursor:pointer}.strength-grid article{transition:background .25s}.strength-grid article:hover{background:#b8ff6308}.bio h2{line-height:1.15}.visual{aspect-ratio:1.85}.contact h2{line-height:.93}.stats>div:last-child{border-right:0}
@media(max-width:900px){.story-directory,.story-profile{width:min(470px,100%);left:auto;right:0;background:#070b09c9;top:23%}.story-directory button span,.story-directory a span{font-size:clamp(17.85px,1.4957vw,25.2px)}.case-modal{width:100%;height:100dvh;border-radius:0}.story-hint{bottom:106px}.hero .eyebrow{bottom:35px;font-size:clamp(7.65px,0.641vw,10.8px);max-width:160px;line-height:1.7}.case-actions a{display:none}.story-profile h2{font-size:clamp(47.6px,3.9886vw,67.2px)}.story-count{right:60px}.stats>div{padding:26px 12px}.stats b{font-size:clamp(40.8px,3.4188vw,57.6px)}.contact-title{margin:80px 0}.contact-in{gap:24px}.contact h2{font-size:clamp(54px,12vw,108px)}}

/* Fixed glass navigation and static third scene */
.nav{position:fixed;top:0;z-index:50;padding-inline:24px;background:rgba(10,19,14,.62);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(230,255,236,.13);border-top:0;box-shadow:0 8px 32px #00000018;border-radius:0 0 16px 16px}
section[id]{scroll-margin-top:104px}
.story-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(20px) brightness(.6);transform:scale(1.08);transition:opacity .8s ease;pointer-events:none}
.story-step-2 .story-media{filter:none}
.story-step-2 .story-media video:first-child,.story-step-2 .story-media .story-second{opacity:0}
.story-step-2 .story-still{opacity:1}
@media(max-width:900px){.nav{padding-inline:16px}section[id]{scroll-margin-top:88px}}
/* The opening scene keeps an unobstructed, transparent navigation. */
.nav{transition:background .3s ease,box-shadow .3s ease,border-color .3s ease}
.nav.nav-cover{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:transparent;border-bottom-color:#ffffff26;border-radius:0}
/* Reference-inspired editorial framing: identity / navigation / scene rail. */
.nav{height:72px;display:flex;gap:34px}
.logo{display:flex;align-items:baseline;gap:12px;font:700 24px Arial,sans-serif;letter-spacing:-.8px;margin-right:auto}
.logo span{font:500 9px Arial,sans-serif;letter-spacing:1.8px;color:var(--muted)}
.links{gap:30px;font-size:clamp(10.2px,0.8547vw,14.4px);letter-spacing:.04em}
.talk{border:0;border-radius:0;padding:12px 0;font-size:clamp(10.2px,0.8547vw,14.4px)}
.nav.nav-cover{border:0;padding-inline:0}
.hero-in{border-bottom:1px solid #e2ffdc30}
.hero .eyebrow{bottom:22px;font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.12em}
.hero .story-count{left:50%;right:auto;bottom:10px;transform:translateX(-50%);gap:4px}
.story-count button{font-size:clamp(8.5px,0.7123vw,12px)}
.hero .scroll{right:0;bottom:12px;display:flex;align-items:center;gap:22px;font-size:clamp(9.35px,0.7835vw,13.2px);letter-spacing:.07em;min-height:44px}
.hero .scroll svg{border:0;border-radius:0;padding:4px;width:18px;height:18px}
.story-hint{bottom:75px;font-size:clamp(7.65px,0.641vw,10.8px);color:var(--muted);letter-spacing:.12em}
@media(max-width:900px){.nav{gap:16px}.logo{font-size:clamp(17.85px,1.4957vw,25.2px)}.logo span{font-size:clamp(6.8px,0.5698vw,9.6px)}.hero .eyebrow{bottom:22px;font-size:clamp(6.8px,0.5698vw,9.6px);max-width:110px}.hero .scroll{gap:8px;font-size:clamp(8.5px,0.7123vw,12px)}.hero .story-count{bottom:12px}.story-count button{width:32px}.story-hint{font-size:clamp(6.8px,0.5698vw,9.6px);bottom:76px}}
@media(prefers-reduced-motion:no-preference){.is-transitioning .story-count{transform:translate(-50%,16px)}}
/* Restore the original compact JL signature. */
.logo{display:block;font:600 25px 'Space Grotesk',Arial,sans-serif;letter-spacing:-2px}
.logo span{font:inherit;letter-spacing:inherit;color:var(--green)}
/* Curved project gallery */
.story-step-1 .story-media{filter:brightness(.2) saturate(.55);transition:filter .8s}
.project-orbit{position:absolute;left:0;top:20%;width:62%;height:66%;animation:case-in .7s ease}
.orbit-heading{display:flex;justify-content:space-between;align-items:center;padding:0 24px;color:var(--green);font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.16em}
.orbit-heading small{color:var(--muted);letter-spacing:.04em}
.orbit-scene{position:relative;height:calc(100% - 85px);min-height:290px;perspective:1200px;isolation:isolate;overflow:hidden}
.orbit-ring{position:absolute;width:95%;height:180px;border:1px solid #b8ff6340;border-radius:50%;bottom:3%;left:2.5%;transform:rotateX(65deg);box-shadow:0 0 50px #b8ff630c}
.orbit-card{position:absolute;left:calc(50% - 160px);top:12%;width:320px;height:76%;max-height:390px;min-height:260px;border:1px solid #bcffd852;border-radius:25px;background:linear-gradient(150deg,#314235,#0c1710 65%);padding:12px;color:var(--ink);text-align:left;cursor:pointer;transform:translateX(calc(var(--offset)*225px)) translateY(calc(var(--offset)*var(--offset)*28px)) translateZ(calc(var(--offset)*var(--offset)*-180px)) rotateY(calc(var(--offset)*-30deg)) rotateZ(calc(var(--offset)*8deg));transition:transform .75s cubic-bezier(.22,.7,.2,1),filter .6s,box-shadow .6s;filter:brightness(.55);z-index:1;box-shadow:0 12px 0 -5px #172c1d,0 15px 0 -5px #b8ff6345}
.orbit-card.is-current{z-index:3;filter:brightness(1);border-color:#d1ff9a;box-shadow:0 12px 0 -5px #203c25,0 15px 0 -5px #b8ff6380,0 0 32px #b8ff6320}
.orbit-card-top{display:flex;justify-content:space-between;padding:6px 5px 14px;font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.13em;color:#c9dccb}
.orbit-card-top b{color:var(--green)}
.orbit-card img{width:100%;height:calc(100% - 106px);object-fit:cover;border-radius:13px;display:block}
.orbit-card-bottom{display:flex;align-items:center;justify-content:space-between;padding:15px 5px 7px}.orbit-card-bottom strong{font-size:clamp(16.15px,1.3533vw,22.8px);letter-spacing:-.02em}.orbit-card-bottom svg{color:var(--green)}.orbit-subtitle{font-size:clamp(8.5px,0.7123vw,12px);color:var(--muted);padding-left:5px}
.orbit-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:8px}.orbit-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#10201780;color:var(--green);cursor:pointer}.orbit-controls span{font-size:clamp(9.35px,0.7835vw,13.2px);letter-spacing:.15em;min-width:125px;text-align:center}
.story-directory .is-selected{color:var(--green);border-bottom-color:#b8ff6380}.story-directory button{transition:color .2s,border-color .2s}
.project-switcher{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:26px;border-bottom:1px solid var(--line)}.project-switcher button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-size:clamp(9.35px,0.7835vw,13.2px);min-height:44px;cursor:pointer;white-space:nowrap;padding:10px 4px;transition:color .2s,border-color .2s}.project-switcher button span{font-size:clamp(7.65px,0.641vw,10.8px);margin-right:8px;opacity:.6}.project-switcher button.is-selected{color:var(--green);border-bottom-color:var(--green)}
@media(max-width:1100px){.orbit-card{width:260px;left:calc(50% - 130px);transform:translateX(calc(var(--offset)*170px)) translateY(calc(var(--offset)*var(--offset)*25px)) translateZ(calc(var(--offset)*var(--offset)*-160px)) rotateY(calc(var(--offset)*-30deg)) rotateZ(calc(var(--offset)*8deg))}.orbit-heading small{display:none}}
@media(max-width:900px){.project-orbit{top:16%;width:100%;height:57%}.orbit-card{max-height:310px}.story-step-1 .story-directory{top:auto;bottom:115px;left:0;right:0;width:100%;padding:0;background:none}.story-step-1 .story-directory small,.story-step-1 .story-directory button{display:none}.story-step-1 .story-directory a{padding:8px;grid-template-columns:25px 1fr 20px}.story-step-1 .story-directory a span{font-size:clamp(12.75px,1.0684vw,18px)}.story-step-1 .story-directory a i{display:none}.project-switcher{bottom:66px;gap:14px}.project-switcher button{font-size:clamp(8.5px,0.7123vw,12px)}.project-switcher button span{display:none}.story-step-1 .story-hint{display:none}.orbit-heading{padding-inline:10px}}

/* Editorial project section with scroll-stacked case studies. */
.stack-work{position:relative;background:#0c100e;border-radius:60px 60px 0 0;margin-top:-40px;padding:90px 0 110px;z-index:1}
.stack-heading{text-align:center;padding:0 0 80px}.stack-heading>span{font-size:clamp(9.35px,0.7835vw,13.2px);letter-spacing:.2em;color:var(--green)}.stack-heading h2{font:900 clamp(64px,12vw,160px)/1 Arial,sans-serif;letter-spacing:-.055em;background:linear-gradient(180deg,#646e67,#d6e6da);background-clip:text;-webkit-text-fill-color:transparent;margin:24px 0}.stack-heading p{font-size:clamp(11.9px,0.9972vw,16.8px);line-height:1.8;color:var(--muted)}
.project-stack{padding-bottom:9vh}.stack-card{position:sticky;top:calc(104px + var(--card-index)*28px);min-height:72vh;margin-bottom:13vh;padding:clamp(16px,2.2vw,32px);border:2px solid #d7e2da;border-radius:clamp(32px,4vw,60px);background:#0c100e;transform:scale(var(--card-scale,1));transform-origin:50% 0;box-shadow:0 -20px 65px #00000035}
.stack-card-head{display:flex;align-items:center;gap:32px;padding:0 4px 24px}.stack-number{font:900 clamp(64px,7vw,112px)/1 Arial,sans-serif;letter-spacing:-.07em;color:#d7e2da}.stack-name small{color:var(--green);font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.13em}.stack-name h3{font:600 clamp(22px,2.4vw,38px)/1.15 Arial,sans-serif;margin:8px 0}.stack-name p{font-size:clamp(10.2px,0.8547vw,14.4px);color:var(--muted);margin:0}.stack-open{display:flex;align-items:center;gap:16px;margin-left:auto;border:2px solid #d7e2da;border-radius:99px;padding:15px 24px;background:transparent;color:var(--ink);cursor:pointer;font-size:clamp(10.2px,0.8547vw,14.4px);letter-spacing:.08em;transition:background .2s,color .2s}.stack-open:hover{background:var(--green);color:var(--bg);border-color:var(--green)}
.stack-images{position:relative;display:grid;grid-template-columns:2fr 3fr;gap:20px;width:100%;height:clamp(340px,53vh,610px);border:0;padding:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}.stack-images-left{display:grid;grid-template-rows:2fr 3fr;gap:18px;min-height:0}.stack-images img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:clamp(24px,3vw,44px);background:#18221b}.stack-image-tall{object-position:top}.stack-image-hint{position:absolute;right:24px;bottom:24px;display:flex;align-items:center;gap:14px;padding:14px 20px;border:1px solid #ffffff45;background:#08100cce;backdrop-filter:blur(12px);border-radius:99px;font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.12em;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}.stack-images:hover .stack-image-hint,.stack-images:focus-visible .stack-image-hint{opacity:1;transform:none}
@media(max-width:700px){.stack-work{border-radius:32px 32px 0 0;padding-top:65px}.stack-heading{padding-bottom:40px}.stack-card{top:calc(86px + var(--card-index)*12px);padding:16px;margin-bottom:14vh;min-height:0}.stack-card-head{flex-wrap:wrap;gap:16px;padding-bottom:18px}.stack-number{font-size:clamp(45.9px,3.8462vw,64.8px)}.stack-name{flex:1}.stack-name small{font-size:clamp(6.8px,0.5698vw,9.6px)}.stack-name h3{font-size:clamp(18.7px,1.567vw,26.4px)}.stack-name p{font-size:clamp(8.5px,0.7123vw,12px)}.stack-open{margin-left:0;padding:10px 16px;min-height:44px;font-size:clamp(9.35px,0.7835vw,13.2px)}.stack-images{gap:10px;height:42vh;min-height:260px}.stack-images-left{gap:10px}.stack-images img{border-radius:18px}.stack-image-hint{display:none}}
@media(max-height:700px) and (min-width:701px){.stack-card{top:calc(80px + var(--card-index)*16px)}.stack-number{font-size:clamp(51px,4.2735vw,72px)}.stack-card-head{padding-bottom:16px}.stack-images{height:48vh;min-height:230px}}
/* BorderGlow stays on the sticky card itself to preserve stacking geometry. */
.stack-card.border-glow-card{position:sticky;border:1px solid #bed7c333;border-radius:clamp(32px,4vw,60px);transform:scale(var(--card-scale,1));background:#0c100e;box-shadow:0 -16px 50px #00000030}
.stack-card .border-glow-inner{overflow:visible;min-width:0}
.stack-card.border-glow-card::before,.stack-card.border-glow-card::after{pointer-events:none}
.stack-card.border-glow-card:focus-within{border-color:#b8ff6380}
@media(max-width:700px){.stack-card.border-glow-card{border-radius:32px}}
@media(prefers-reduced-motion:reduce){.stack-card.border-glow-card::before,.stack-card.border-glow-card::after,.stack-card.border-glow-card>.edge-light{display:none}}
@media(max-width:700px){.stack-card.border-glow-card{--glow-padding:12px!important}}
/* Right-side directory; the character video remains unobscured. */
.story-step-1 .story-media{filter:none}
.story-step-1:after{background:none}
.story-step-1 .project-orbit{left:auto;right:0;width:49%;top:21%;height:64%}
.story-step-1 .orbit-heading{padding-inline:16px}
.story-step-1 .orbit-heading small{display:none}
.story-step-1 .orbit-card{width:280px;left:calc(50% - 140px);transform:translateX(calc(var(--offset)*185px)) translateY(calc(var(--offset)*var(--offset)*28px)) translateZ(calc(var(--offset)*var(--offset)*-180px)) rotateY(calc(var(--offset)*-30deg)) rotateZ(calc(var(--offset)*8deg))}
.story-step-1 .project-switcher{left:auto;right:0;width:49%;transform:none;justify-content:center;gap:22px}
.orbit-empty{height:calc(100% - 106px);border-radius:13px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;background:radial-gradient(ellipse at top,#345438,#101c14);color:var(--green)}.orbit-empty span{font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.16em}.orbit-empty strong{font-size:clamp(25.5px,2.1368vw,36px)}.orbit-empty small{font-size:clamp(8.5px,0.7123vw,12px);color:var(--muted)}
.other-design h2{margin:48px 0 24px;font-size:clamp(44px,5vw,80px);line-height:1.2}.other-design em{color:var(--green);font-style:normal}.other-design>p{color:var(--muted)}
@media(max-width:900px){.story-step-1 .project-orbit{width:100%;top:23%;height:56%}.story-step-1 .project-switcher{width:100%;bottom:68px}.story-step-1 .orbit-card{width:240px;left:calc(50% - 120px)}}
/* Viewport framing and larger directory presentation. */
.nav.shell,.hero-in.shell{width:calc(100% - clamp(40px,4vw,88px));max-width:none}
.hero .eyebrow{bottom:20px;min-height:44px;display:flex;align-items:center;font-size:clamp(10.2px,0.8547vw,14.4px)}
.hero .scroll{bottom:20px;min-height:44px;font-size:clamp(11.05px,0.9259vw,15.6px)}
.story-hint{bottom:20px;right:180px;min-height:44px;display:flex;align-items:center;font-size:clamp(8.5px,0.7123vw,12px)}
.story-step-1 .story-hint{display:none}
.story-step-1 .project-orbit{top:17%;height:70%;width:49%}
.story-step-1 .orbit-heading{font-size:clamp(13px,.8vw,18px);padding-inline:20px}
.story-step-1 .orbit-scene{height:calc(100% - 86px);min-height:0;perspective:1500px}
.story-step-1 .orbit-card{--orbit-width:clamp(280px,19vw,445px);--orbit-spacing:clamp(180px,13vw,300px);width:var(--orbit-width);left:calc(50% - var(--orbit-width)/2);height:82%;max-height:650px;top:8%;padding:clamp(12px,1vw,22px);transform:translateX(calc(var(--offset)*var(--orbit-spacing))) translateY(calc(var(--offset)*var(--offset)*38px)) translateZ(calc(var(--offset)*var(--offset)*-180px)) rotateY(calc(var(--offset)*-30deg)) rotateZ(calc(var(--offset)*8deg))}
.story-step-1 .orbit-card-top{font-size:clamp(11px,.7vw,16px);padding-bottom:18px}
.story-step-1 .orbit-card-bottom strong{font-size:clamp(23px,1.5vw,34px)}
.story-step-1 .orbit-subtitle{font-size:clamp(11px,.75vw,16px)}
.story-step-1 .orbit-card img,.story-step-1 .orbit-empty{height:calc(100% - 125px)}
.story-step-1 .orbit-controls span{font-size:clamp(14px,.9vw,20px)}
.story-step-1 .orbit-controls button{width:50px;height:50px}
.story-step-1 .project-switcher{bottom:20px;right:150px;width:auto;gap:30px}
.project-switcher button{font-size:clamp(13px,.8vw,18px)}
@media(max-width:900px){.nav.shell,.hero-in.shell{width:calc(100% - 32px)}.hero .eyebrow{font-size:clamp(6.8px,0.5698vw,9.6px);bottom:12px}.hero .scroll{bottom:12px;font-size:clamp(9.35px,0.7835vw,13.2px)}.story-hint{bottom:66px;right:0;font-size:clamp(6.8px,0.5698vw,9.6px)}.story-step-1 .project-orbit{width:100%;top:19%;height:58%}.story-step-1 .orbit-card{--orbit-width:240px;--orbit-spacing:160px;height:80%;max-height:390px}.story-step-1 .orbit-card-top{font-size:clamp(8.5px,0.7123vw,12px)}.story-step-1 .orbit-card-bottom strong{font-size:clamp(17.85px,1.4957vw,25.2px)}.story-step-1 .orbit-subtitle{font-size:clamp(8.5px,0.7123vw,12px)}.story-step-1 .project-switcher{right:0;width:100%;bottom:70px;gap:20px}.project-switcher button{font-size:clamp(10.2px,0.8547vw,14.4px)}}
/* Combined third scene: complete profile over the second video's blurred final frame. */
.merged-profile{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;padding:112px 0 90px;scroll-margin-top:0!important}
.merged-profile:before{content:'';position:absolute;inset:-45px;z-index:-2;background:url('/media/cover-2-last.jpg?v=20260921201228') center/cover no-repeat;filter:blur(25px) brightness(.28)}
.merged-profile:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#070b09,transparent 25%,#070b0940)}
.merged-profile .about-grid{grid-template-columns:minmax(260px,.7fr) 1.3fr;gap:clamp(40px,6vw,110px);margin-top:36px}
.merged-profile .portrait{height:clamp(380px,46vh,560px);border-radius:20px}
.merged-profile .bio{padding-top:0}.merged-profile .bio h2{font-size:clamp(40px,4vw,68px);line-height:1.1}.merged-profile .bio h2 br{display:none}
.merged-profile .lead{font-size:clamp(17px,1.4245vw,24px);margin:20px 0 12px}.merged-profile .bio>p:last-of-type{font-size:clamp(12.75px,1.0684vw,18px);line-height:1.8;margin-bottom:8px}
.merged-profile .timeline{margin-top:20px}.merged-profile .timeline>div{padding:14px 0}.merged-profile .stats{margin-top:36px}.merged-profile .stats>div{padding:22px}.merged-profile .stats b{font-size:clamp(40.8px,3.4188vw,57.6px)}
.profile-contact{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px;font-size:clamp(11.9px,0.9972vw,16.8px);color:var(--muted)}.profile-contact a:hover{color:var(--green)}
@media(max-width:900px){.merged-profile .about-grid{grid-template-columns:1fr}.merged-profile .portrait{height:420px;max-width:500px}.merged-profile .bio h2 br{display:block}.merged-profile .stats>div{padding:18px}.merged-profile{padding-top:100px}}
/* Scenes two and three share the exact paused video frame. */
.hero.shared-backdrop{overflow:visible}
.hero.shared-backdrop .story-media{position:fixed;inset:0;pointer-events:none;filter:blur(var(--profile-blur,0px)) brightness(var(--profile-shade,1));transition:none;transform:scale(1.035)}
.hero.shared-backdrop .hero-in{overflow:hidden}
.merged-profile{background:transparent}
.merged-profile:before,.merged-profile:after{display:none}

.experience-cards{display:grid;gap:12px;margin-top:24px}.experience-card .border-glow-inner{overflow:visible}.experience-summary{width:100%;display:grid;grid-template-columns:115px 1fr 20px;gap:16px;align-items:center;padding:20px;background:none;border:0;color:var(--ink);text-align:left;cursor:pointer}.experience-summary time{font-size:clamp(10.2px,0.8547vw,14.4px);color:var(--green)}.experience-summary strong{font-size:clamp(12.75px,1.0684vw,18px);font-weight:500}.experience-summary small{display:block;color:var(--muted);margin-top:8px;font-size:clamp(11.05px,0.9259vw,15.6px)}.experience-summary svg{color:var(--green);transition:transform .25s}.experience-detail{padding:0 24px 24px;max-height:440px;overflow-y:auto;overscroll-behavior:auto;scrollbar-color:#647a5c #0c100e;font-size:clamp(11.9px,0.9972vw,16.8px);line-height:1.9;color:#c7d1c9}.experience-detail>div{white-space:pre-line}.experience-note{font-size:clamp(9.35px,0.7835vw,13.2px);color:var(--green);border-top:1px solid var(--line);padding-top:16px;margin-top:0}.experience-detail a{display:inline-block;margin-top:18px;color:var(--green)}
@media(max-width:700px){.experience-summary{grid-template-columns:1fr 20px;padding:16px}.experience-summary time{grid-column:1/-1}.experience-detail{padding-inline:16px;max-height:55vh}}
.profile-portraits{position:relative;height:540px;min-width:0;isolation:isolate;align-self:start}.profile-portraits .depth-carousel__card{border:1px solid #b8ff6340}.profile-portraits .depth-carousel__arrow{color:var(--green);width:44px;height:44px}.profile-portraits .depth-carousel__dot{width:24px;height:24px;background:radial-gradient(circle,#ffffff55 3px,transparent 4px)}.profile-portraits .depth-carousel__dot.is-active{width:24px;background:radial-gradient(circle,var(--green) 4px,transparent 5px)}.profile-portraits .depth-carousel__dots{bottom:30px;padding:2px 10px;gap:4px}.portrait-play{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:10px 20px;min-height:44px;background:none;border:0;color:var(--muted);font-size:clamp(10.2px,0.8547vw,14.4px);cursor:pointer}.portrait-play:hover{color:var(--green)}
@media(max-width:900px){.profile-portraits{height:450px;width:100%;max-width:540px;margin:auto}}
.profile-portraits .depth-carousel__card:first-child .depth-carousel__img{object-position:62% center}
.software-loop{margin-top:44px;padding:28px 0;border-bottom:1px solid var(--line);overflow:hidden}.software-heading{display:flex;align-items:center;gap:24px;margin-bottom:28px}.software-heading>span{color:var(--green);font-size:clamp(9.35px,0.7835vw,13.2px);letter-spacing:.18em}.software-heading p{color:var(--muted);font-size:clamp(11.05px,0.9259vw,15.6px);margin:0}.software-loop .logoloop{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.software-loop .logoloop__list{padding:12px 0;margin:0;list-style:none}.software-item{display:flex;align-items:center;gap:18px}.software-item img{border-radius:10px}.software-item span{font-size:clamp(16.15px,1.3533vw,22.8px);white-space:nowrap;color:#d6dfd7}.software-loop .logoloop__item{line-height:1.4}
@media(max-width:600px){.software-heading{display:block}.software-heading p{margin-top:12px}.software-item span{font-size:clamp(13.6px,1.1396vw,19.2px)}}
/* A glass-green folder reveals the existing directory on hover. */
.directory-folder{position:absolute;right:4%;top:20%;width:40%;max-width:650px;isolation:isolate}
.folder-art{display:block;position:relative;width:100%;aspect-ratio:1.25;border:0;background:none;color:var(--ink);cursor:pointer;transition:transform .45s cubic-bezier(.2,.7,.2,1);transform-origin:center 70%}
.directory-folder.is-open .folder-art{transform:scale(1.035)}
.folder-back{position:absolute;inset:15% 8% 6%;border-radius:30px;background:linear-gradient(140deg,#719570,#26452b);border:1px solid #cbffb54d}
.folder-photo{position:absolute;display:block;width:36%;height:62%;top:13%;border:8px solid #e5f3df;border-radius:22px;overflow:hidden;box-shadow:0 12px 30px #0004;transition:transform .45s ease}
.folder-photo img{width:100%;height:100%;object-fit:cover}.folder-photo-left{left:6%;transform:rotate(-23deg)}.folder-photo-right{right:4%;transform:rotate(20deg)}.folder-photo-center{left:33%;top:5%;height:66%;z-index:2}.directory-folder.is-open .folder-photo-left{transform:translate(-5px,-10px) rotate(-27deg)}.directory-folder.is-open .folder-photo-right{transform:translate(5px,-10px) rotate(24deg)}.directory-folder.is-open .folder-photo-center{transform:translateY(-14px)}
.folder-front{position:absolute;inset:44% 7% 0;z-index:3;border-radius:8px 28px 28px 28px;background:linear-gradient(165deg,#71985aac 0%,#243f2da8 44%,#b5ecadf0 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid #e0ffd88c;box-shadow:0 18px 25px #0005,inset 0 1px 1px #ffffff8a;text-align:left}
.folder-front:before{content:'';position:absolute;left:-1px;top:-34px;width:53%;height:35px;background:#71985ace;border:1px solid #e0ffd88c;border-bottom:0;clip-path:polygon(0 100%,0 35%,7% 0,82% 0,100% 100%);border-radius:20px 0 0 0}
.folder-label{display:block;position:relative;margin:0 24px;font-size:clamp(13px,1.1vw,20px);letter-spacing:-.02em}.folder-caption{position:absolute;left:24px;bottom:28px;font-size:clamp(11px,.9vw,16px);color:#1a3622}
.folder-arrow{position:absolute;bottom:20px;right:20px;width:clamp(48px,5vw,78px);aspect-ratio:1;display:grid;place-items:center;border:2px solid #eeffe8;border-radius:50%;background:#173723;color:var(--green)}.folder-arrow svg{width:58%;height:58%}
.folder-directory{display:grid;grid-template-rows:repeat(3,1fr);margin:24px 7% 0;opacity:0;transform:translateY(-14px);visibility:hidden;transition:opacity .25s,transform .35s,visibility .25s;border:1px solid #b8ff6340;border-radius:18px;background:#102418de;backdrop-filter:blur(16px);overflow:hidden}.directory-folder.is-open .folder-directory{visibility:visible;opacity:1;transform:none}.folder-directory button{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 22px;min-height:52px;background:none;border:0;border-bottom:1px solid #b8ff6325;color:var(--ink);font-size:clamp(14px,1vw,20px);cursor:pointer;text-align:left}.folder-directory button:last-child{border-bottom:0}.folder-directory button:hover,.folder-directory button:focus-visible{background:#b8ff6315;color:var(--green)}.folder-tip{position:absolute;top:calc(100% - 150px);left:0;right:0;display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted);font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.1em;pointer-events:none;transition:opacity .2s}.directory-folder.is-open .folder-tip{opacity:0}
@media(max-width:900px){.directory-folder{right:5%;width:90%;top:20%;max-width:460px}.folder-directory{margin-top:16px}.folder-directory button{padding:12px 18px}.folder-photo{border-width:5px}}
@media(min-width:901px) and (max-height:850px){.directory-folder{top:17%;width:34%;right:7%}.folder-directory{margin-top:16px}.folder-directory button{min-height:44px;padding:10px 18px}}

/* FolderFloat-inspired flap opening and staggered floating directory pills. */
.directory-folder{top:29%}
.folder-front{transform-origin:50% 100%;transform:perspective(1000px) rotateX(-12deg);transition:transform 520ms cubic-bezier(.23,1,.32,1)}
.directory-folder.is-open .folder-front{transform:perspective(1000px) rotateX(-34deg)}
.directory-folder.is-open .folder-photo-center{transform:translateY(-26px)}
.directory-folder.is-open .folder-photo-left{transform:translate(-8px,-20px) rotate(-27deg)}
.directory-folder.is-open .folder-photo-right{transform:translate(8px,-20px) rotate(24deg)}
.folder-title{margin-top:34px;text-align:center;display:flex;flex-direction:column;gap:10px;color:var(--ink)}.folder-title strong{font-size:clamp(24px,2vw,36px);font-weight:500;letter-spacing:.18em}.folder-title>span{font-size:clamp(10.2px,0.8547vw,14.4px);letter-spacing:.3em;color:var(--green)}
.folder-directory{position:absolute;inset:-105px 0 auto;height:100px;display:flex;justify-content:center;align-items:center;gap:12px;margin:0;overflow:visible;border:0;border-radius:0;background:none;backdrop-filter:none;opacity:1;visibility:visible;transform:none;pointer-events:none;z-index:5}
.folder-directory:after{content:'';position:absolute;inset:0 0 -160px;z-index:-1;pointer-events:none}
.directory-folder.is-open .folder-directory:after{pointer-events:auto}
.folder-directory button{display:flex;align-items:center;gap:10px;min-height:46px;padding:12px 18px;border:1px solid #d6ffb880!important;border-radius:99px;background:#183c25f0;color:#dcffb8;font-size:clamp(12px,.9vw,17px);white-space:nowrap;box-shadow:0 8px 24px #0003;opacity:0;pointer-events:none;transform:translateY(140px) scale(.6);transition:transform 520ms cubic-bezier(.34,1.57,.64,1),opacity 160ms;transition-delay:calc(var(--item-index)*45ms)}
.directory-folder.is-open .folder-directory button{opacity:1;pointer-events:auto;transform:translateY(calc(var(--item-index)*-8px)) rotate(calc((var(--item-index) - 1)*5deg)) scale(1)}
.folder-directory button:hover{background:#2b5635;color:#eeffdf;scale:1.05}
.directory-folder.is-open .folder-directory button span{animation:folder-pill-drift 3.2s ease-in-out infinite;animation-delay:calc(var(--item-index)*-.7s)}
@keyframes folder-pill-drift{50%{translate:0 -3px}}
@media(max-width:900px){.directory-folder{top:32%}.folder-directory{gap:6px;top:-90px}.folder-directory button{font-size:clamp(10.2px,0.8547vw,14.4px);padding:10px 12px}.folder-directory button svg{width:14px}.folder-title{margin-top:24px}}
@media(min-width:901px) and (max-height:850px){.directory-folder{top:29%}}

.folder-category-preview{display:none}
.directory-folder{transition:right .8s cubic-bezier(.22,.7,.2,1),top .8s,width .8s,transform .8s}
.hero.folder-focused:has(.directory-folder.is-expanded) .story-media{filter:blur(22px) brightness(.5)!important;transform:scale(.92)!important;transition:filter .8s ease,transform .8s ease}
.hero.folder-focused:has(.directory-folder.is-expanded) .directory-folder{right:50%;top:44%;width:clamp(300px,30vw,490px);transform:translateX(50%)}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art{aspect-ratio:1.45}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory{top:-260px;height:245px;left:50%;right:auto;width:min(78vw,980px);transform:translateX(-50%);gap:24px;align-items:stretch}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex:1;min-width:0;padding:12px;border-radius:22px;font-size:clamp(15.3px,1.2821vw,21.6px);transform:none;white-space:normal;background:#173723f2}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-category-preview{display:flex;height:170px;overflow:hidden;border-radius:13px;margin-bottom:16px;background:linear-gradient(130deg,#304d35,#132419);align-items:center;justify-content:center;color:var(--green)}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-category-preview img{width:100%;height:100%;object-fit:cover}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button>svg{position:absolute;right:16px;bottom:18px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button>span:not(.folder-category-preview){padding-left:5px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button span{animation:none}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-title{margin-top:18px}
@media(max-width:700px){.hero.folder-focused:has(.directory-folder.is-expanded) .directory-folder{top:46%;width:70%}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory{width:90vw;gap:8px;height:175px;top:-190px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button{padding:8px;font-size:clamp(10.2px,0.8547vw,14.4px);border-radius:14px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-category-preview{height:110px;margin-bottom:10px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button>svg{display:none}}

/* Frosted olive glass, with a translucent face and a thick illuminated rim. */
.folder-back{background:linear-gradient(145deg,#d9f79c38,#95b54430 48%,#536e242b);border:1px solid #e8ffd377;box-shadow:inset 0 1px 2px #f6ffe999,inset 2px 0 6px #d5ffad35,0 16px 0 -6px #c1df8150,0 22px 30px #0003;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.folder-front{background:linear-gradient(150deg,#e1f7ba38 0%,#91ae493b 26%,#7b9b2459 64%,#a0be3b85 100%);backdrop-filter:blur(25px) saturate(145%);-webkit-backdrop-filter:blur(25px) saturate(145%);border:1px solid #dff8b580;box-shadow:inset 0 2px 3px #f1ffcf80,inset 2px 0 5px #edffd84d,inset -1px -2px 4px #a2c05a5c,0 12px 0 -4px #c4df8173,0 15px 0 -4px #e1f8b53d,0 22px 36px #0004;border-radius:10px 28px 28px 28px}
.folder-front:before{background:linear-gradient(135deg,#d8eab65c,#93af4b50);border-color:#e4f8c288;box-shadow:inset 0 2px 2px #efffd55c}
.folder-front:after{content:'';position:absolute;inset:1px;pointer-events:none;border-radius:inherit;background:linear-gradient(112deg,#ffffff25 0%,#ffffff08 24%,transparent 43%,#ffffff0d 72%,transparent 100%);border-left:2px solid #eeffd03b}
.folder-label{color:#efffd7;text-shadow:0 1px 10px #17340033;letter-spacing:.06em;font-size:clamp(12px,1vw,18px);padding-top:14px}
.folder-caption{color:#ecffd1;text-shadow:0 1px 5px #28400055;font-size:clamp(11px,.8vw,15px)}
.folder-arrow{background:#243700b8;border:1px solid #d3ec9d70;box-shadow:inset 0 1px 2px #e2ffc333,0 4px 14px #25380033;color:#dcff9c;backdrop-filter:blur(8px)}
.folder-photo{border-color:#e9f3dc;border-width:5px;box-shadow:0 12px 28px #0005}
.directory-folder.is-open .folder-front{box-shadow:inset 0 2px 4px #f6ffdb8c,inset 2px 0 7px #e8ffc44d,0 12px 0 -4px #c4df8173,0 15px 0 -4px #e1f8b53d,0 28px 46px #0005}
/* Expanded directory: three lifted editorial cards above a shallow glass folder. */
.folder-category-description,.folder-category-english{display:none}
.hero.folder-focused:has(.directory-folder.is-expanded) .directory-folder{top:70%;width:min(65vw,880px);max-width:880px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art{aspect-ratio:6.4}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-photo{opacity:0;pointer-events:none;transition:opacity .35s}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-back{inset:4% 8% 8%;border-radius:22px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-front{inset:18% 3% 0;border-radius:14px 24px 24px 24px;transform:perspective(1000px) rotateX(-18deg)}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art:hover .folder-front{transform:perspective(1000px) rotateX(-30deg)}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-label{font-size:clamp(20px,2.4vw,36px);font-weight:650;padding-top:18px;margin-left:36px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-caption{display:none}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-arrow{width:54px;bottom:14px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory{top:auto;bottom:calc(100% + 24px);height:clamp(300px,43vh,490px);width:min(77vw,1040px);gap:32px;align-items:stretch}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button{gap:0;padding:8px 8px 22px;border-radius:23px;background:linear-gradient(145deg,#e4efccf5,#b4c791f5);color:#23351b;border:2px solid #f0ffcdcc!important;box-shadow:inset 0 1px 0 #fff9,0 20px 40px #0004;transform-origin:center bottom;transform:translateY(calc((1 - var(--item-index)) * (1 - var(--item-index)) * -14px)) rotate(calc((var(--item-index) - 1)*6deg));transition:transform .65s cubic-bezier(.22,.7,.2,1),box-shadow .3s}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button:hover,.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button:focus-visible{scale:1.025;transform:translateY(-24px) rotate(0deg);box-shadow:0 24px 50px #0005,0 0 28px #b8ff6325;z-index:6}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-category-preview{height:59%;min-height:0;flex-shrink:0;margin:0;border-radius:15px 15px 4px 4px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .folder-category-name{align-self:center;margin:-4px 0 14px;padding:9px 20px;border-radius:9px;background:#526e27;color:#f0ffdb;box-shadow:0 3px 0 #34471533;z-index:1;font-size:clamp(17px,1.4vw,23px)}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .folder-category-description{display:block;padding:0 18px;font-size:clamp(12px,.95vw,16px);line-height:1.8;white-space:normal}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .folder-category-english{display:block;padding:14px 18px 0;font-size:clamp(8px,.65vw,11px);letter-spacing:.08em;color:#4f613c;margin-top:auto}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button>svg{display:none}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-title{margin-top:22px}
@media(max-width:700px){.hero.folder-focused:has(.directory-folder.is-expanded) .directory-folder{top:67%;width:86vw}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory{width:91vw;gap:8px;height:clamp(240px,40vh,360px);bottom:calc(100% + 20px)}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button{padding:4px 4px 12px;border-radius:14px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-category-preview{height:52%;border-radius:10px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .folder-category-name{font-size:clamp(10.2px,0.8547vw,14.4px);padding:7px;margin-bottom:8px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .folder-category-description{font-size:clamp(8.5px,0.7123vw,12px);padding:0 6px;line-height:1.5}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .folder-category-english{font-size:clamp(5.95px,0.4986vw,8.4px);padding:8px 6px 0}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-label{font-size:clamp(15.3px,1.2821vw,21.6px);padding-top:7px;margin-left:16px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-arrow{width:30px;bottom:4px;right:10px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-front:before{height:20px;top:-19px}}

/* Three beats: tucked away, hover reveal, then a deliberate full expansion. */
.hero:not(.folder-focused) .directory-folder:not(.is-open) .folder-photo-left{transform:translate(36px,100px) rotate(-5deg) scale(.83)}
.hero:not(.folder-focused) .directory-folder:not(.is-open) .folder-photo-right{transform:translate(-30px,100px) rotate(5deg) scale(.83)}
.hero:not(.folder-focused) .directory-folder:not(.is-open) .folder-photo-center{transform:translateY(112px) scale(.86)}
.hero:not(.folder-focused) .directory-folder:not(.is-open) .folder-front{transform:perspective(1000px) rotateX(0deg)}
.hero:not(.folder-focused) .directory-folder:not(.is-open) .folder-back{inset:33% 8% 6%}
.folder-photo{transition:transform .65s cubic-bezier(.22,.75,.2,1),opacity .4s}
.folder-back{transition:inset .65s cubic-bezier(.22,.75,.2,1)}
.folder-art{transition:transform .65s cubic-bezier(.22,.75,.2,1),aspect-ratio .95s cubic-bezier(.22,.75,.2,1)}
.folder-front{transition:transform .65s cubic-bezier(.22,.75,.2,1),inset .95s cubic-bezier(.22,.75,.2,1),border-radius .8s}
.folder-label{transition:font-size .9s,padding .9s,margin .9s}
.directory-folder{transition:right 1.05s cubic-bezier(.22,.75,.2,1),top 1.05s cubic-bezier(.22,.75,.2,1),width 1.05s cubic-bezier(.22,.75,.2,1),transform 1.05s cubic-bezier(.22,.75,.2,1)}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button{animation:folder-card-unfold 1.15s cubic-bezier(.22,.75,.2,1) both;animation-delay:calc(var(--item-index)*90ms)}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-category-description,.hero.folder-focused:has(.directory-folder.is-expanded) .folder-category-english{animation:folder-copy-reveal .45s ease both;animation-delay:.8s}
@keyframes folder-card-unfold{0%{opacity:0;transform:translateY(260px) rotate(0deg) scale(.35)}25%{opacity:0}48%{opacity:1}100%{opacity:1;transform:translateY(calc((1 - var(--item-index)) * (1 - var(--item-index)) * -14px)) rotate(calc((var(--item-index) - 1)*6deg))}}
@keyframes folder-copy-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.hero:not(.folder-focused) .directory-folder:not(.is-open) .folder-photo-left{transform:translate(20px,65px) rotate(-5deg) scale(.83)}.hero:not(.folder-focused) .directory-folder:not(.is-open) .folder-photo-right{transform:translate(-20px,65px) rotate(5deg) scale(.83)}.hero:not(.folder-focused) .directory-folder:not(.is-open) .folder-photo-center{transform:translateY(75px) scale(.86)}}

.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button{animation-fill-mode:backwards}
/* Center the entire opened folder composition within the viewport. */
.hero.folder-focused:has(.directory-folder.is-expanded) .directory-folder{top:50%;right:50%;width:min(77vw,1040px);max-width:1040px;transform:translate(50%,-50%);display:flex;flex-direction:column;align-items:center}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory{position:relative;order:-1;inset:auto;transform:none;width:100%;height:clamp(280px,40vh,450px);flex-shrink:0;margin-bottom:28px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art{width:85%;flex-shrink:0}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-title{margin-top:20px}
@media(max-width:700px){.hero.folder-focused:has(.directory-folder.is-expanded) .directory-folder{width:91vw}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory{height:clamp(240px,40vh,360px);margin-bottom:22px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art{width:94%}}
/* Hover previews share the expanded directory's images, labels and ordering. */
.folder-photo-empty{display:grid;width:100%;height:100%;place-items:center;background:linear-gradient(130deg,#304d35,#132419);color:var(--green);font-size:clamp(13px,1.2vw,20px)}
.folder-photo-title{position:absolute;left:0;right:0;top:0;padding:8px 5px;background:#20381ce8;color:#efffd7;text-align:center;font-size:clamp(10px,.85vw,15px);letter-spacing:.04em}
/* Move the intact folder first; morph into the directory only after arrival. */
.hero.folder-focused .story-media{filter:blur(22px) brightness(.5)!important;transform:scale(.92)!important;transition:filter 1.05s ease,transform 1.05s ease}
.hero.folder-focused .directory-folder:not(.is-expanded){right:50%;top:50%;width:min(55vw,760px);max-width:760px;transform:translate(50%,-50%)}
.hero.folder-focused .directory-folder:not(.is-expanded) .folder-directory{opacity:0;pointer-events:none;transition:opacity .2s}
.hero.folder-focused .directory-folder:not(.is-expanded) .folder-directory button{pointer-events:none}
@media(max-width:700px){.hero.folder-focused .directory-folder:not(.is-expanded){width:88vw}}
/* One continuous folder face: raised tab, curved shoulder, rounded body. */
.folder-front,
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-front{
 border:0;border-radius:0;overflow:visible;
 clip-path:shape(from 0% 13%,curve to 7% 0% with 0% 5% / 2% 0%,line to 43% 0%,curve to 49% 5% with 46% 0% / 47% 1%,line to 56% 17%,curve to 62% 22% with 58% 21% / 59% 22%,line to 94% 22%,curve to 100% 32% with 98% 22% / 100% 26%,line to 100% 89%,curve to 93% 100% with 100% 97% / 98% 100%,line to 7% 100%,curve to 0% 89% with 2% 100% / 0% 97%,close);
}
.folder-front:before{display:none}
.folder-front:after{inset:0;border:0;background:linear-gradient(135deg,#ffffff30,transparent 32%,transparent 75%,#dcffae22);box-shadow:inset 0 2px 3px #f1ffcf80;pointer-events:none}
.folder-label{padding-top:16px;font-size:clamp(11px,.95vw,16px);max-width:44%;white-space:nowrap}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-label{font-size:clamp(15px,2vw,29px);padding-top:12px;margin-left:30px}
@media(max-width:700px){.hero.folder-focused:has(.directory-folder.is-expanded) .folder-label{font-size:clamp(11.9px,0.9972vw,16.8px);padding-top:4px;margin-left:16px}}
/* Auto-open on directory arrival, with an additional response to real hover. */
.directory-folder.is-open .folder-art:hover{transform:scale(1.065)}
.hero:not(.folder-focused) .directory-folder.is-open .folder-art:hover .folder-front{transform:perspective(1000px) rotateX(-39deg)}
.hero:not(.folder-focused) .directory-folder.is-open .folder-art:hover .folder-photo-center{transform:translateY(-34px)}
/* Video first, then the closed folder fades in before its automatic reveal. */
.hero.story-step-1 .hero-in{transition:opacity .75s ease}
.hero.story-step-1 .hero-in.directory-loading{opacity:0;pointer-events:none}
.hero.story-step-1 .hero-in.directory-visible{opacity:1}

/* The expanded directory shares Projects' pointer-following BorderGlow. */
.folder-directory .directory-glow>.edge-light{pointer-events:none;animation:none!important;padding:0!important}
.hero:not(:has(.directory-folder.is-expanded)) .directory-glow:before,
.hero:not(:has(.directory-folder.is-expanded)) .directory-glow:after,
.hero:not(:has(.directory-folder.is-expanded)) .directory-glow>.edge-light{display:none}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .directory-glow{border:1px solid #e4f6c866!important;isolation:isolate}
/* FolderFloat motion: staggered spring emergence followed by whole-card drift. */
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .directory-glow{
 animation:directory-card-spring 720ms cubic-bezier(.34,1.57,.64,1) backwards,
 directory-card-drift 4.6s ease-in-out infinite;
 animation-delay:calc(var(--item-index)*75ms),calc(720ms + var(--item-index)*75ms);
 transform-origin:50% 100%;
}
@keyframes directory-card-spring{
 from{opacity:0;transform:translate(calc((1 - var(--item-index))*100%),260px) rotate(0deg) scale(.6)}
 to{opacity:1;transform:translateY(calc((1 - var(--item-index))*(1 - var(--item-index))*-14px)) rotate(calc((var(--item-index) - 1)*6deg)) scale(1)}
}
@keyframes directory-card-drift{
 0%,100%{translate:0 0;rotate:0deg}
 30%{translate:calc((var(--item-index) - 1)*3px) -7px;rotate:calc((var(--item-index) - 1)*.55deg)}
 65%{translate:calc((1 - var(--item-index))*2px) -11px;rotate:calc((1 - var(--item-index))*.4deg)}
}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .directory-glow:hover,
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory .directory-glow:focus-visible{animation-play-state:running,paused}

/* A quiet, persistent white reading line across every view. */
.reading-progress{position:fixed;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.14);z-index:1000;pointer-events:none}
.reading-progress>span{display:block;width:100%;height:100%;background:#fff;transform:scaleX(var(--reading-progress,0));transform-origin:left center;transition:transform .16s linear}
@media(prefers-reduced-motion:reduce){.reading-progress>span{transition:none}}
.folder-arrow.folder-toggle{width:auto;aspect-ratio:auto;min-height:44px;padding:10px 16px;border-radius:28px;display:flex;gap:9px;cursor:pointer;font:inherit;font-size:clamp(11.05px,0.9259vw,15.6px);transition:background .2s,transform .2s}
.folder-arrow.folder-toggle svg{width:20px;height:20px;transition:transform .3s}
.folder-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.folder-arrow.folder-toggle:hover{background:#4e681ad9;transform:translateY(-2px)}
.folder-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-arrow.folder-toggle{width:auto}
.folder-front .folder-label{font-size:clamp(23px,2.35vw,38px);font-weight:800;letter-spacing:-.035em;padding-top:13px;margin-left:24px;max-width:48%;line-height:1.15}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-front .folder-label{font-size:clamp(26px,3vw,46px);font-weight:800;padding-top:10px;line-height:1.1}
@media(max-width:700px){.folder-front .folder-label{font-size:clamp(20.4px,1.7094vw,28.8px);margin-left:18px}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-front .folder-label{font-size:clamp(19.55px,1.6382vw,27.6px);padding-top:4px}}
/* Keep the toggle hit area stationary while hovering the folder face. */
.directory-folder.is-open .folder-art:hover{transform:scale(1.035)}
.hero:not(.folder-focused) .directory-folder.is-open .folder-art:hover .folder-front{transform:perspective(1000px) rotateX(-34deg)}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art:hover .folder-front{transform:perspective(1000px) rotateX(-18deg)}
.directory-folder.is-expanded .folder-directory:after{pointer-events:none}
/* Give the directory preview more presence on desktop without changing expansion. */
@media(min-width:901px){
 .hero:not(.folder-focused) .directory-folder{width:48%;max-width:850px;right:1%;top:27%}
}
@media(min-width:901px) and (max-height:850px){
 .hero:not(.folder-focused) .directory-folder{width:min(46%,80vh);top:28%;right:2%}
}
/* Editorial hierarchy: bold uppercase statements, quiet human-scale copy. */
.cover-editorial{position:absolute;left:1%;top:32%;width:48%;z-index:4;animation:editorial-arrive .9s ease both}
.editorial-overline{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(14px,1.7vw,27px);font-weight:700;letter-spacing:.09em;color:#f5f5f5}
.cover-editorial h2{font-family:'Space Grotesk',Arial,sans-serif;font-weight:800;font-size:clamp(44px,5.8vw,100px);letter-spacing:-.065em;line-height:.98;margin:16px 0 22px;color:#fff}
.cover-editorial h2 em{font-style:normal;color:#fff}
.cover-editorial p{max-width:380px;color:#b8bfba;font-size:clamp(14px,1.1vw,18px);line-height:1.8;margin:0 0 28px}
.editorial-cta{display:inline-flex;align-items:center;gap:24px;border:1px solid #ffffff50;border-radius:40px;padding:5px 5px 5px 22px;background:#ffffff10;font-size:clamp(10.2px,0.8547vw,14.4px);color:#fff;transition:background .25s}
.editorial-cta>span{width:38px;height:38px;display:grid;place-items:center;background:#f4f6f0;color:#101710;border-radius:50%}
.editorial-cta:hover{background:#b8ff6330}.editorial-cta:hover>span{background:var(--green)}
.directory-emotion{position:absolute;right:2%;bottom:10%;width:46%;text-align:center;color:#bac4bc;font-size:clamp(13px,1vw,18px);line-height:1.8;letter-spacing:.04em}
.section-emotion{color:#adb8b0;font-size:clamp(15px,1.15vw,20px);font-weight:400;line-height:1.9;max-width:620px;margin:24px 0 36px}
.stack-heading h2,.strength .head h2,.other-design h2{font-family:'Space Grotesk','Microsoft YaHei',sans-serif;font-weight:800;letter-spacing:-.055em;line-height:1.06}
.stack-heading h2{font-size:clamp(64px,8vw,136px)}
.stack-heading>p{font-size:clamp(15px,1.15vw,20px);line-height:1.9;color:#adb8b0;max-width:440px}
.strength .head{align-items:start}.strength .head h2{text-align:left;font-size:clamp(38px,4.5vw,76px)}
.other-design h2{font-size:clamp(44px,5vw,86px)}
.kicker,.stack-heading>span{font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.merged-profile .bio h2{font-weight:800;letter-spacing:-.055em}.merged-profile .section-emotion{margin:20px 0 16px}
.contact{background:#080d09;color:#f1f5ef}.contact .kicker{color:#acb9ad}.contact .kicker span{color:var(--green)}
.contact h2{font-weight:800;letter-spacing:-.06em}.contact h2 em{color:var(--green);-webkit-text-stroke:0}.contact-title p{max-width:330px;color:#aab7ad;font-size:clamp(15.3px,1.2821vw,21.6px);line-height:1.9}
@keyframes editorial-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media(max-width:900px){.cover-editorial{top:34%;width:75%;left:0}.cover-editorial h2{font-size:clamp(40px,8vw,72px)}.cover-editorial p{max-width:280px}.directory-emotion{right:0;width:100%;bottom:8%;font-size:clamp(10.2px,0.8547vw,14.4px)}.contact-title p{margin-bottom:40px}}
/* Directory typography occupies a dedicated top band above the artwork. */
.directory-editorial{position:absolute;top:100px;left:1%;right:1%;display:flex;align-items:center;gap:clamp(24px,4vw,70px);pointer-events:none;color:#f1f5ef}
.directory-editorial>div>span{display:block;font-size:clamp(8.5px,0.7123vw,12px);font-weight:600;letter-spacing:.14em;color:#b8c1b9;margin-bottom:12px}
.directory-editorial h2{font-family:Impact,'Arial Narrow','Space Grotesk',sans-serif;font-size:clamp(32px,4vw,62px);line-height:1;margin:0;font-weight:800;letter-spacing:-.025em}
.directory-editorial p{margin:15px 0 0;font-size:clamp(12px,.9vw,15px);line-height:1.9;color:#aeb9b0}
.directory-editorial small{margin-left:auto;align-self:flex-start;text-align:right;font-size:clamp(7.65px,0.641vw,10.8px);line-height:1.6;letter-spacing:.09em;color:#aeb9b0}
.folder-front .folder-label{font-size:clamp(24px,2.45vw,40px);text-transform:none;letter-spacing:-.035em}
@media(min-width:901px){.hero:not(.folder-focused) .directory-folder{top:34%;width:min(48%,76vh)}}
@media(max-width:900px){.directory-editorial{top:88px;left:0;right:0;gap:18px;align-items:flex-start}.directory-editorial h2{font-size:clamp(25.5px,2.1368vw,36px)}.directory-editorial p{font-size:clamp(9.35px,0.7835vw,13.2px);margin-top:20px}.directory-editorial small{display:none}.hero:not(.folder-focused) .directory-folder{top:39%}}
.directory-bottom-copy{position:absolute;left:1%;bottom:88px;margin:0;max-width:340px;font-size:clamp(13px,1.05vw,18px);line-height:1.9;color:#b8c3ba;pointer-events:none}
@media(max-width:900px){.directory-bottom-copy{left:0;bottom:74px;font-size:clamp(10.2px,0.8547vw,14.4px);max-width:270px}}
/* Reference navigation, scoped to the first full-screen cover. */
.nav.shell{display:flex;align-items:center;height:78px;top:0;border:0;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:none}
.nav.shell .logo{font-size:clamp(23.8px,1.9943vw,33.6px);font-weight:800;animation:nav-quiet-lift .62s cubic-bezier(.25,.8,.3,1) .46s backwards}
.nav.shell .links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:32px}
.nav.shell .links a{font-size:clamp(11.05px,0.9259vw,15.6px);font-weight:500;color:#ededed;animation:nav-quiet-lift .55s cubic-bezier(.25,.8,.3,1) .54s backwards}
.nav.shell .links a:nth-child(2){animation-delay:.585s}
.nav.shell .links a:nth-child(3){animation-delay:.63s}
.nav.shell .talk{margin-left:auto;border:0;background:#fdfdfd;color:#050505;padding:10px 18px;border-radius:999px;font-size:clamp(10.2px,0.8547vw,14.4px);animation:nav-pill-in .55s cubic-bezier(.25,.8,.3,1) .73s backwards}
.nav.shell .talk:hover{background:#dfffbc}
.cover-editorial{animation:none}.cover-editorial h2 .text-mask{display:block;overflow:hidden;padding-top:.1em;margin-top:-.1em}
.cover-editorial h2 .text-mask>span,.cover-editorial h2 .text-mask>em{display:block;animation:reference-line-rise 1.05s cubic-bezier(.16,1,.3,1) .12s backwards}
.cover-editorial h2 .text-mask:nth-child(2)>em{animation-delay:.22s}
@keyframes reference-line-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes nav-quiet-lift{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes nav-pill-in{from{opacity:0;translate:0 8px;scale:.972}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:900px){.nav.shell .links.open{top:72px;left:0;right:0;transform:none;background:#080d0af5}.nav.shell .menu{margin-left:auto}}
.hero .cover-next{position:absolute;right:0;bottom:20px;z-index:5;cursor:pointer;animation:nav-pill-in .7s cubic-bezier(.16,1,.3,1) .9s backwards}
.story-step-0 .story-hint{right:200px}
@media(max-width:900px){.hero .cover-next{bottom:12px}.story-step-0 .story-hint{right:0;bottom:72px}}
/* Keep the cover navigation unchanged across all sections. */
.nav.shell{padding-inline:0;-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border:0;box-shadow:none}
/* Place the cover CTA in the lower-right artwork whitespace. */
.hero.story-step-0 .cover-next{right:10.5%;bottom:20%;}
@media(max-width:900px){.hero.story-step-0 .cover-next{right:8%;bottom:20%;}}
/* Glass is a separate backdrop so navigation text remains crisp. */
.nav.shell{isolation:isolate}
.nav-glass-layer{position:absolute;inset:7px -14px;z-index:-1;pointer-events:none;opacity:1;transition:opacity .4s ease}
.nav.nav-cover .nav-glass-layer{opacity:0;visibility:hidden}
.nav-glass-layer .glass-surface{background:rgba(14,22,17,.5);border:1px solid #ffffff20;box-shadow:inset 0 1px 0 #ffffff20,0 8px 30px #0002}
.nav-glass-layer .glass-surface--fallback{backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
@media(max-width:900px){.nav-glass-layer{inset:6px -8px}}
.hero .cover-next.border-glow-card{display:inline-flex;background:#101710;border-radius:999px;overflow:visible}
.hero .cover-next>.edge-light{display:block;width:auto;height:auto;background:none;pointer-events:none}
.hero .cover-next>.cover-next-arrow{position:relative;z-index:1}
/* Refine cover CTA scale and align the footer hint to the outer edge. */
.hero.story-step-0 .cover-next{right:14%;bottom:24%;font-size:clamp(12.75px,1.0684vw,18px);gap:28px;padding:6px 6px 6px 26px;min-height:60px}
.hero.story-step-0 .cover-next>.cover-next-arrow{width:46px;height:46px}
.hero.story-step-0 .story-hint{right:0;bottom:20px;text-align:right}
@media(max-width:900px){.hero.story-step-0 .cover-next{right:11%;bottom:24%;font-size:clamp(11.9px,0.9972vw,16.8px);gap:20px;min-height:54px}.hero.story-step-0 .cover-next>.cover-next-arrow{width:40px;height:40px}.hero.story-step-0 .story-hint{right:0;bottom:12px}}
.hero.story-step-0 .cover-next.star-border-container{display:inline-block;min-height:0;background:#ffffff12;border:0}
.hero .cover-next.star-border-container>.inner-content{width:auto;height:auto;padding:6px 6px 6px 26px;gap:28px;min-height:56px;font-size:clamp(12.75px,1.0684vw,18px)}
.hero .cover-next.star-border-container .cover-next-arrow{width:46px;height:46px;display:grid;place-items:center;background:#f4f6f0;color:#101710;border-radius:50%}
.hero .cover-next.star-border-container>.border-gradient-top,.hero .cover-next.star-border-container>.border-gradient-bottom{display:block}
.hero .cover-next.star-border-container:hover .cover-next-arrow{background:var(--green)}
@media(max-width:900px){.hero .cover-next.star-border-container>.inner-content{font-size:clamp(11.9px,0.9972vw,16.8px);gap:20px;min-height:50px}.hero .cover-next.star-border-container .cover-next-arrow{width:40px;height:40px}}
.hero .scene-next.star-border-container{display:inline-block;border:0;border-radius:999px;background:#ffffff12;min-height:0}
.hero .scene-next .inner-content{gap:18px;padding:12px 20px;min-height:46px;font-size:clamp(11.05px,0.9259vw,15.6px)}
.hero .scene-next .inner-content>svg{width:19px;height:19px;animation:none;transition:translate .2s}
.hero .scene-next:hover .inner-content>svg{translate:0 3px}
.hero .scene-next:focus-visible{outline:2px solid var(--green);outline-offset:4px}
/* One PDF opening cover per project card. */
.stack-images{display:block}
.stack-images .stack-cover-only{display:block;object-fit:contain;object-position:center;background:#080d0b}
/* Replaceable project previews: one large left image and two stacked right images. */
.stack-images{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px}
.stack-images .stack-primary-image{width:100%;height:100%;object-fit:cover;object-position:center;min-width:0}
.stack-secondary-images{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:20px;min-width:0;min-height:0}
.stack-secondary-images img{object-fit:cover;object-position:top;min-height:0}
@media(max-width:700px){.stack-images,.stack-secondary-images{gap:10px}}

/* Editorial portrait: white frame, oversized lettering and handwritten accent. */
.profile-portraits.profile-poster{height:auto;aspect-ratio: .82;max-width:560px;width:100%;margin:0 auto 40px;background:#fff;color:#090b09;border-radius:24px;padding:24px 26px 32px 40px;isolation:isolate;container-type:inline-size;box-shadow:0 24px 70px #0003}
.profile-poster-heading{display:flex;justify-content:space-between;align-items:center;height:70px;padding:0 6px 16px}
.profile-poster-heading small{display:block;font-size:clamp(8.5px,0.7123vw,12px);font-weight:700;letter-spacing:.13em;margin-bottom:5px}
.profile-poster-heading strong{display:block;font-size:clamp(25.5px,2.1368vw,36px);line-height:1;font-weight:900;letter-spacing:-.05em}
.profile-poster-heading>span{color:#74ad32;font-size:clamp(13.6px,1.1396vw,19.2px);letter-spacing:5px;white-space:nowrap}
.profile-poster-photo{position:absolute;inset:94px 26px 32px 40px;overflow:hidden;border-radius:18px;background:#e6e9df}
.profile-poster-photo .depth-carousel__card{border:0;box-shadow:none}
.profile-poster-side{position:absolute;left:12px;top:128px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(7.65px,0.641vw,10.8px);letter-spacing:.14em;font-weight:800}
.profile-poster-lettering{position:absolute;left:-22px;right:-24px;bottom:-25px;z-index:4;pointer-events:none;transform:rotate(-7deg)}
.profile-poster-lettering>strong{display:block;color:#050705;font-family:Arial,Helvetica,sans-serif;font-size:clamp(90px,32cqw,188px);font-weight:900;font-style:italic;line-height:1;letter-spacing:-.085em;-webkit-text-stroke:16px white;paint-order:stroke fill;filter:drop-shadow(0 6px 0 #fff)}
.profile-poster-lettering>span{display:block;position:absolute;right:0;bottom:-3px;color:#79b936;font-family:'Segoe Script','Brush Script MT',cursive;font-size:clamp(34px,12cqw,68px);font-style:italic;font-weight:600;line-height:1.2;letter-spacing:-.07em;transform:rotate(-5deg);text-shadow:0 1px 0 #fff}
@media(max-width:900px){.profile-portraits.profile-poster{max-width:480px;margin-bottom:60px}}
@media(max-width:560px){.profile-portraits.profile-poster{width:calc(100% - 24px);padding-top:14px;border-radius:18px}.profile-poster-heading{height:62px}.profile-poster-heading strong{font-size:clamp(21.25px,1.7806vw,30px)}.profile-poster-heading>span{font-size:clamp(9.35px,0.7835vw,13.2px);letter-spacing:3px}.profile-poster-photo{top:78px;right:18px;left:32px;bottom:24px}.profile-poster-lettering{left:-15px;right:-14px}.profile-poster-lettering>strong{-webkit-text-stroke:11px white}}

/* Keep the white frame on each photograph, separate from editorial lettering. */
.profile-portraits.profile-poster{background:transparent;color:var(--ink);box-shadow:none;border-radius:0}
.profile-poster-photo{background:transparent;overflow:visible}
.profile-poster-photo .depth-carousel__card{border:9px solid #fff;border-radius:22px!important;background:#fff;box-shadow:0 18px 40px #0003}
@media(max-width:560px){.profile-poster-photo .depth-carousel__card{border-width:6px;border-radius:18px!important}}
.profile-poster-lettering{transform:none;background:transparent}
.profile-poster-lettering>img{display:block;width:100%;height:auto;object-fit:contain;background:transparent}

/* About introduction: left-aligned name hierarchy and adjacent contact details. */
.bio-intro{background:#f6f7f2;color:#101510;padding:clamp(24px,2.6vw,44px);border-radius:22px;margin-bottom:28px;text-align:left}
.bio-intro .bio-eyebrow{margin:0 0 16px;color:#659c2f;font-size:clamp(16px,1.5vw,23px);font-weight:800;line-height:1.15;letter-spacing:.025em}
.bio-title-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.merged-profile .bio-name h2{color:#080b08;font-family:Arial,Helvetica,sans-serif;font-size:clamp(38px,3.8vw,62px);font-weight:900;line-height:1.02;letter-spacing:-.055em;margin:0}
.bio-chinese-name{font-size:clamp(18.7px,1.567vw,26.4px);font-weight:650;line-height:1.4;letter-spacing:.12em;margin:10px 0 0}
.bio-social{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:clamp(11.05px,0.9259vw,15.6px);line-height:1.5;color:#537c2d}
.bio-social a:hover{color:#294a0c;text-decoration:underline;text-underline-offset:4px}
.bio-social a:first-child span{font-size:clamp(16.15px,1.3533vw,22.8px);font-weight:700;vertical-align:middle}
.bio-summary{font-size:clamp(14.45px,1.2108vw,20.4px);line-height:1.8;margin:0 0 12px;color:#202820}
.bio-description{font-size:clamp(12.75px,1.0684vw,18px);line-height:1.85;margin:0 0 12px;color:#424a40}
.bio-intro .resume-link{color:#537c2d;margin-top:6px;font-weight:600}
@media(max-width:560px){.bio-title-row{gap:18px;margin-bottom:20px}.bio-social{font-size:clamp(10.2px,0.8547vw,14.4px);gap:6px}.bio-chinese-name{font-size:clamp(17px,1.4245vw,24px)}.bio-summary{font-size:clamp(13.6px,1.1396vw,19.2px)}}

/* Place the introduction directly on the existing dark page background. */
.bio-intro{background:transparent;color:var(--ink);border-radius:0;padding:0;box-shadow:none}
.bio-intro .bio-eyebrow{color:var(--green)}
.merged-profile .bio-name h2,.bio-chinese-name{color:var(--ink)}
.bio-summary{color:#e0e7df}
.bio-description{color:#adb8b0}
.bio-social,.bio-intro .resume-link{color:var(--green)}
.bio-social a:hover{color:#deffc4}

.bio-details{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.bio-details h3{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;font-size:clamp(15.3px,1.2821vw,21.6px);font-weight:700;color:var(--ink)}
.bio-details h3 span{font-size:clamp(8.5px,0.7123vw,12px);font-weight:500;letter-spacing:.14em;color:var(--green)}
.bio-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin:0}
.bio-info-grid>div{min-width:0}
.bio-info-grid dt{font-size:clamp(10.2px,0.8547vw,14.4px);color:var(--muted);margin-bottom:5px}
.bio-info-grid dd{margin:0;font-size:clamp(11.9px,0.9972vw,16.8px);color:var(--ink);overflow-wrap:anywhere}
.bio-info-grid a:hover{color:var(--green)}
.bio-education{display:flex;gap:28px;align-items:baseline;font-size:clamp(11.9px,0.9972vw,16.8px)}
.bio-education>span{color:var(--green);white-space:nowrap;font-size:clamp(11.05px,0.9259vw,15.6px)}
.bio-education strong{font-size:clamp(13.6px,1.1396vw,19.2px);font-weight:600}
.bio-education p{margin:8px 0 0;color:var(--muted);line-height:1.6}
@media(max-width:560px){.bio-info-grid{gap:16px}.bio-education{gap:14px}.bio-education strong{font-size:clamp(11.9px,0.9972vw,16.8px)}}

.bio-intro .resume-button{margin:0 0 0 auto;min-height:46px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid #b8ff6366;border-radius:99px;background:#b8ff630a;color:var(--green);font-size:clamp(11.9px,0.9972vw,16.8px);white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.bio-intro .resume-button:hover{background:#b8ff6320;border-color:var(--green);transform:translateY(-2px)}
.bio-intro .resume-button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(max-width:560px){.bio-intro .resume-button{padding:10px 14px;font-size:clamp(10.2px,0.8547vw,14.4px);min-height:44px}}

.project-glow-button{cursor:pointer;color:var(--ink);font:inherit;border:1px solid #ffffff26;box-shadow:none}
.hero .scene-next.project-glow-button{display:inline-flex;align-items:center;gap:18px;padding:12px 20px;min-height:48px;background:#101710;border:1px solid #ffffff26;border-radius:999px;font-size:clamp(11.05px,0.9259vw,15.6px)}
.hero .scene-next.project-glow-button>svg{width:19px;height:19px;padding:0;border:0;animation:none;transition:translate .2s}
.hero .scene-next.project-glow-button:hover>svg{translate:0 3px}
.project-glow-button>.edge-light{pointer-events:none}
.bio-intro .resume-button.project-glow-button{background:#101710}
.project-glow-button:focus-visible{outline:2px solid var(--green);outline-offset:4px}

.software-item .software-ai-icon{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:10px;border:1px solid #ffffff26;font-family:Arial,sans-serif;font-size:clamp(13.6px,1.1396vw,19.2px);font-weight:800;letter-spacing:-.05em;color:#fff;background:#17221d}
.software-item .software-ai-icon--gpt{background:#164f42}
.software-item .software-ai-icon--codex{background:#eeeae2;color:#111;font-family:Consolas,monospace;font-size:clamp(20.4px,1.7094vw,28.8px)}
.software-item .software-ai-icon--lovart{background:#e4ff93;color:#1b2816;font-size:clamp(27.2px,2.2792vw,38.4px);font-style:italic}
.software-item .software-ai-icon--kling{background:#141b18;color:#c0ff60;font-size:clamp(15.3px,1.2821vw,21.6px)}

/* Override generic span padding so each category badge has equal text insets. */
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button>span.folder-category-name{display:inline-flex;align-items:center;justify-content:center;align-self:center;text-align:center;padding:9px 20px;line-height:1.25;flex-shrink:0;max-width:100%;box-sizing:border-box}
@media(max-width:700px){.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory button>span.folder-category-name{padding:7px}}

.cover-year-badge{position:absolute;left:18%;top:56%;padding:10px 22px;border-radius:12px;background:#213f24d9;border:1px solid #d9ffbd4d;color:#fff;font:700 clamp(18px,1.6vw,27px)/1.1 'Space Grotesk',Arial,sans-serif;letter-spacing:.07em;backdrop-filter:blur(12px);box-shadow:0 8px 28px #0002}
@media(min-width:901px){.hero:not(.folder-focused) .directory-folder{top:28%;right:5%}}
@media(max-width:900px){.cover-year-badge{left:12%;top:56%;padding:8px 16px;font-size:clamp(15.3px,1.2821vw,21.6px)}.hero:not(.folder-focused) .directory-folder{top:34%;right:7%}}

.cover-year-badge{border-radius:999px;background:#B6FC63;border-color:#B6FC63;color:#fff;backdrop-filter:none}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art{width:100%;aspect-ratio:5.2;transition:width 1.05s cubic-bezier(.22,.75,.2,1),transform .65s cubic-bezier(.22,.75,.2,1),aspect-ratio .95s cubic-bezier(.22,.75,.2,1)}
@media(max-width:700px){.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art{width:100%;aspect-ratio:4.8}}

.cover-year-badge{background:#516D27;border-color:#516D27}
@keyframes cover-text-arrive{from{opacity:0;translate:0 16px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.hero.story-step-0 .eyebrow,
.hero.story-step-0 .cover-year-badge,
.hero.story-step-0 .cover-next,
.hero.story-step-0 .story-hint,
body:has(.hero.story-step-0) .nav .logo,
body:has(.hero.story-step-0) .nav .links a,
body:has(.hero.story-step-0) .nav .talk{
 animation:cover-text-arrive 1000ms cubic-bezier(.16,1,.3,1) 250ms both;
}

.hero.story-step-0 .cover-year-badge,.hero.story-step-0 .cover-next{animation:none;opacity:0;visibility:hidden;pointer-events:none}
.hero.story-step-0 .cover-labels-visible .cover-year-badge,.hero.story-step-0 .cover-labels-visible .cover-next{visibility:visible;pointer-events:auto;animation:cover-text-arrive 1000ms cubic-bezier(.16,1,.3,1) 0ms both}
.hero .story-hint{font-family:'Space Grotesk','Microsoft YaHei',Arial,sans-serif;font-size:clamp(10.2px,0.8547vw,14.4px);font-weight:500;letter-spacing:.17em;color:#bac3bc}
.profile-poster-heading{position:absolute;top:calc(100% + 50px);left:40px;right:26px;height:auto;padding:0;gap:20px}
.profile-portraits.profile-poster{margin-bottom:145px}
@media(max-width:900px){.hero .story-hint{font-size:clamp(6.8px,0.5698vw,9.6px)}.profile-portraits.profile-poster{margin-bottom:150px}}

/* Reference motion: 32px fade-up, 700ms ease-out and 500ms media blending. */
@keyframes cover-text-arrive{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}
.hero.story-step-0 .eyebrow,.hero.story-step-0 .story-hint,
body:has(.hero.story-step-0) .nav .logo,body:has(.hero.story-step-0) .nav .links a,body:has(.hero.story-step-0) .nav .talk{animation-duration:700ms;animation-timing-function:ease-out}
.hero.story-step-0 .cover-labels-visible .cover-year-badge,.hero.story-step-0 .cover-labels-visible .cover-next{animation:cover-text-arrive 700ms ease-out 0ms both}
.story-media video,.story-media .story-still{transition-duration:500ms}
.hero .directory-visible .folder-art{animation-duration:700ms;animation-timing-function:ease-out}
.project-glow-button,.nav a{transition-duration:300ms}

.folder-front .folder-label{display:flex;flex-direction:column;align-items:flex-start;gap:8px;line-height:1}
.folder-front .folder-label strong{font-size:clamp(38px,4vw,66px);font-weight:900;letter-spacing:.04em}
.folder-front .folder-label small{font-size:clamp(20px,2.1vw,34px);font-weight:800;letter-spacing:.04em}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-front .folder-label{gap:4px;padding-top:8px}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-label strong{font-size:clamp(30px,3vw,46px)}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-label small{font-size:clamp(18px,1.7vw,27px)}
@media(max-width:700px){.folder-front .folder-label strong{font-size:clamp(27.2px,2.2792vw,38.4px)}.folder-front .folder-label small{font-size:clamp(15.3px,1.2821vw,21.6px)}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-label strong{font-size:clamp(20.4px,1.7094vw,28.8px)}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-label small{font-size:clamp(11.9px,0.9972vw,16.8px)}}

/* Project one: focused, full-length case reading surface. */
.case-modal-editorial{width:min(1560px,calc(100vw - 64px));height:calc(100dvh - 48px);border-radius:24px;border:1px solid #d6e9d329;grid-template-rows:76px minmax(0,1fr);background:#080e0b;box-shadow:0 32px 120px #0009}
.case-modal-editorial .case-bar{padding:0 28px;background:#0d1713;border-color:#ffffff12}
.case-modal-editorial .case-bar strong{font-size:clamp(17px,1.4245vw,24px);font-weight:700;letter-spacing:-.02em}
.case-modal-editorial .case-actions button{border-radius:50%;background:#ffffff06;border-color:#ffffff1f}
.case-modal-editorial .case-actions .case-close{background:#eaf1e5;color:#142015;border:0}
.case-modal-editorial .case-actions a{color:#b8c5ba;padding:10px 16px;border-right:1px solid #ffffff15;margin-right:8px}
.case-modal-editorial .case-stage{background:#080e0b;scrollbar-width:thin;scrollbar-color:#516d27 #080e0b;padding-bottom:58px}
.case-introduction{padding:36px 42px;display:flex;justify-content:space-between;align-items:center;gap:28px;border-bottom:1px solid #ffffff14;background:radial-gradient(ellipse at top right,#516d271f,transparent 65%)}
.case-introduction>div>span{font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.16em;color:var(--green)}
.case-introduction h2{font-size:clamp(28px,3vw,44px);font-weight:700;line-height:1.2;letter-spacing:-.03em;margin:12px 0}
.case-introduction p{font-size:clamp(11.05px,0.9259vw,15.6px);color:#aab8ad;margin:0;line-height:1.7}
.case-intro-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;max-width:300px}
.case-intro-meta>span{border:1px solid #ffffff24;border-radius:99px;padding:8px 12px;color:#d4ddd4!important;letter-spacing:.06em!important}
.case-intro-meta a{display:flex;gap:8px;align-items:center;font-size:clamp(10.2px,0.8547vw,14.4px);color:var(--green);padding:8px 12px}
.case-reading-tools{position:absolute;bottom:0;left:0;right:0;height:52px;background:#0d1713f5;backdrop-filter:blur(16px);border-top:1px solid #ffffff14;padding:0 28px;display:flex;align-items:center;justify-content:space-between;color:#aab8ad;font-size:clamp(10.2px,0.8547vw,14.4px)}
.case-reading-tools strong{color:var(--green);margin-left:12px;font-variant-numeric:tabular-nums}
.case-reading-tools button{color:#e3ece0;background:none;border:1px solid #ffffff24;border-radius:99px;padding:7px 14px;cursor:pointer}
.case-reading-tools button:hover{border-color:var(--green);color:var(--green)}
.case-modal-editorial .case-end{padding:72px 20px 90px}
.case-modal-editorial .case-end button{border-radius:99px;font-size:clamp(11.9px,0.9972vw,16.8px)}
@media(max-width:700px){.case-modal-editorial{width:100%;height:100dvh;border-radius:0;grid-template-rows:64px minmax(0,1fr)}.case-modal-editorial .case-bar{padding:0 14px}.case-introduction{padding:24px 20px;align-items:flex-start;flex-direction:column}.case-intro-meta{justify-content:flex-start;max-width:none}.case-reading-tools{padding:0 18px}.case-modal-editorial .case-bar strong{font-size:clamp(13.6px,1.1396vw,19.2px)}}

/* Hide incoming foreground immediately; reveal only after the video advances. */
.hero.story-step-1 .hero-in.directory-loading{opacity:0;visibility:hidden;transition:none;pointer-events:none}
.hero.story-step-1 .hero-in.directory-visible{visibility:visible;opacity:1;transition:opacity 700ms ease-out}


/* A single frosted front cover, with the original exposed card arrangement. */
.directory-folder .folder-front{backdrop-filter:blur(25px) saturate(145%);-webkit-backdrop-filter:blur(25px) saturate(145%);box-shadow:inset 0 2px 3px #f1ffcf80,inset 2px 0 5px #edffd84d,inset -1px -2px 4px #a2c05a5c,0 22px 36px #0004}
.directory-folder.is-open .folder-front{box-shadow:inset 0 2px 4px #f6ffdb8c,inset 2px 0 7px #e8ffc44d,0 28px 46px #0005}
/* Portfolio progress stays centered at the bottom as a compact track. */
.reading-progress.portfolio-reading-bar{left:50%;right:auto;bottom:24px;width:min(72vw,1040px);height:2px;transform:translateX(-50%);border-radius:999px;overflow:hidden;background:#ffffff30;box-shadow:none;z-index:25}
.portfolio-reading-bar>span{border-radius:inherit;background:#fff}
.modal-open .portfolio-reading-bar{visibility:hidden}
@media(max-width:600px){.reading-progress.portfolio-reading-bar{bottom:18px;width:calc(100vw - 40px);height:2px}}
.experience-detail .experience-copy{width:100%;max-width:none;white-space:normal;overflow-wrap:anywhere}
.experience-copy>p{margin:0 0 16px;line-height:1.9}
.experience-copy strong{font-weight:700;color:#eef3ed}
.experience-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;padding-top:20px;border-top:1px solid var(--line);margin-top:24px}
.experience-projects p{margin:0;min-width:0}
.experience-projects strong,.experience-projects span{display:block}
.experience-projects strong{margin-bottom:7px}
@media(max-width:700px){.experience-projects{grid-template-columns:1fr;gap:18px}}

.experience-projects{gap:0;border-top:0;padding-top:0;border-left:1px dashed #7ea6a2;margin-top:28px}
.experience-project{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:18px;padding:28px 22px;min-width:0;position:relative}
.experience-project:nth-child(even){border-left:1px dashed #7ea6a2}
.experience-project:nth-child(n+3){border-top:1px dashed #7ea6a2}
.experience-project img{width:42px;height:42px;object-fit:contain;margin-top:2px}
.experience-project strong{font-size:clamp(13.6px,1.1396vw,19.2px);line-height:1.5;margin:0 0 8px;display:block;color:#fff}
.experience-project ul{margin:0;padding-left:18px;line-height:1.8}
.experience-project li{padding-left:2px;margin-bottom:4px}
@media(max-width:700px){.experience-project{padding:22px 16px;gap:14px}.experience-project:nth-child(even){border-left:0}.experience-project:nth-child(n+2){border-top:1px dashed #7ea6a2}}

/* One rear panel underneath every folder state. */
.folder-base{position:absolute;inset:15% 8% 4%;z-index:0;pointer-events:none;border-radius:30px;background:linear-gradient(145deg,#657a37e6,#35461ed9 60%,#536d27e6);border:1px solid #e8ffd35c;box-shadow:inset 0 1px 3px #f6ffe966,0 18px 30px #0004;transition:inset 650ms cubic-bezier(.22,.75,.2,1),border-radius 650ms ease}
.hero:not(.folder-focused) .directory-folder:not(.is-open) .folder-base{inset:33% 8% 4%}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-base{inset:4% 5% 6%;border-radius:22px}

.graphic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.graphic-card{width:100%;padding:0;text-align:left;color:var(--ink);cursor:pointer;overflow:hidden}
.graphic-preview{height:360px;overflow:hidden;background:#151a14;border-radius:22px 22px 0 0}
.graphic-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 500ms ease}
.graphic-card:hover .graphic-preview img{transform:scale(1.035)}
.graphic-caption{padding:24px}.graphic-caption small{color:var(--green);font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.1em}.graphic-caption h3{font-size:clamp(17px,1.4245vw,24px);line-height:1.5;margin:12px 0 24px}.graphic-caption>span{display:flex;align-items:center;gap:10px;font-size:clamp(10.2px,0.8547vw,14.4px);color:#c7d1c9}
.graphic-modal{padding:0;width:min(1100px,94vw);height:92dvh;max-width:none;max-height:none;background:#0c100e;color:var(--ink);border:1px solid #ffffff30;border-radius:24px;overflow:hidden}
.graphic-modal[open]{display:flex;flex-direction:column}.graphic-modal::backdrop{background:#000c;backdrop-filter:blur(12px)}
.graphic-modal header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 28px;border-bottom:1px solid var(--line);flex-shrink:0}.graphic-modal header small{display:block;color:var(--green);font-size:clamp(8.5px,0.7123vw,12px);margin-bottom:6px}.graphic-modal header strong{font-size:clamp(15.3px,1.2821vw,21.6px)}.graphic-modal header button{display:grid;place-items:center;width:40px;height:40px;background:#ffffff0b;border:1px solid #ffffff26;border-radius:50%;color:white;cursor:pointer}
.graphic-artwork{overflow:auto;overscroll-behavior:contain;min-height:0;background:#090c09}.graphic-artwork img{display:block;width:100%;height:auto}
@media(max-width:900px){.graphic-grid{gap:16px}.graphic-preview{height:280px}.graphic-caption{padding:18px}.graphic-caption h3{font-size:clamp(14.45px,1.2108vw,20.4px)}}
@media(max-width:600px){.graphic-grid{grid-template-columns:1fr}.graphic-preview{height:380px}.graphic-modal{width:100%;height:100dvh;border-radius:0}.graphic-modal header{padding:16px}.graphic-modal header strong{font-size:clamp(13.6px,1.1396vw,19.2px)}}

/* Video dimensions depend on width and source ratio, never viewport height. */
.hero{--scene-ratio:var(--cover-ratio,1.6);height:calc(100vw / var(--scene-ratio));min-height:0}
.hero.story-step-1,.hero.story-step-2{--scene-ratio:var(--directory-ratio,1.777778)}
.hero .hero-in{height:100%;min-height:0;padding-top:0;display:block}
.hero .story-media{top:0;left:0;right:0;bottom:auto;height:calc(100vw / var(--scene-ratio))}
.hero .story-media video,.hero .story-media .story-still{object-fit:contain;object-position:center top;transform:none}
.hero.shared-backdrop .story-media{inset:0 0 auto;height:calc(100vw / var(--scene-ratio));transform:none}
.hero .eyebrow{bottom:20px}.hero.story-step-0 .story-hint{bottom:20px}
@media(max-width:900px){.hero .eyebrow,.hero.story-step-0 .story-hint{bottom:12px}.directory-editorial{top:70px}.directory-editorial h2{font-size:clamp(18px,4vw,30px)}}

/* First-scene navigation remains transparent. */
header.nav.nav-cover{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-color:transparent!important}
header.nav.nav-cover .nav-glass-layer{display:none!important}
header.nav.nav-cover::before,header.nav.nav-cover::after{display:none!important}

.graphic-gallery{display:flex;flex-direction:column;gap:64px;width:min(1100px,100%);margin:48px auto 0}
.graphic-gallery>img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:600px){.graphic-gallery{gap:32px;margin-top:32px}}

.graphic-gallery.graphic-gallery-grouped{display:grid;grid-template-columns:2172fr 2776fr;align-items:start;width:100%;gap:56px 28px}
.graphic-piece{margin:0;min-width:0}.graphic-piece figcaption{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}.graphic-piece figcaption strong{font-size:clamp(17px,1.4245vw,24px);font-weight:600;color:var(--ink)}.graphic-piece figcaption span{font-size:clamp(8.5px,0.7123vw,12px);letter-spacing:.12em;color:var(--green)}
.graphic-piece img{display:block;width:100%;height:auto}
.graphic-piece-coffee-brand{grid-column:1/-1}
@media(max-width:600px){.graphic-gallery.graphic-gallery-grouped{gap:32px 12px}.graphic-piece figcaption{flex-direction:column;gap:5px;margin-bottom:12px}.graphic-piece figcaption strong{font-size:clamp(13.6px,1.1396vw,19.2px)}.graphic-piece figcaption span{font-size:clamp(6.8px,0.5698vw,9.6px)}}

.graphic-gallery.graphic-gallery-sequential{display:flex;flex-direction:column;width:min(1100px,100%);gap:56px}

/* Graphic artwork spans the viewport without cropping. */
#other-design .graphic-gallery.graphic-gallery-sequential{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
#other-design .graphic-piece figcaption{padding-inline:clamp(16px,3vw,48px)}
#other-design .graphic-piece img{width:100%;height:auto}

.contact-character-scene{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;background:#0b0b0d}
.contact-character{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.contact-character-scene .contact-in{position:relative;min-height:100svh;padding-top:120px;padding-bottom:30px;display:flex;flex-direction:column;justify-content:center;gap:32px}
.contact-character-scene .contact-title{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:28px;margin:0;width:48%}
.contact-character-scene h2{font-size:clamp(44px,6vw,100px);text-align:left;line-height:1.02}
.contact-character-scene .contact-title p{margin:0;font-size:clamp(13.6px,1.1396vw,19.2px);max-width:360px}
.contact-character-scene .mail{align-self:flex-start;font-size:clamp(18px,2vw,30px);margin:0}
.contact-character-scene footer{width:100%;margin-top:auto;padding-top:32px}
@media(max-width:700px){.contact-character{object-position:62% center;opacity:.55}.contact-character-scene .contact-title{width:100%}.contact-character-scene .contact-in{padding-top:110px}.contact-character-scene h2{font-size:clamp(44px,10vw,70px)}.contact-character-scene footer{background:#0b0b0d80}}

/* Closing composition: expressive title on the left, waving character on the right. */
.contact-character-scene .closing-title{width:48%;flex-direction:column;gap:22px;position:relative;margin-top:40px}
.contact-character-scene .closing-byline{font-size:clamp(15px,1.5vw,23px);max-width:none;color:#edf1e9}
.contact-character-scene .closing-title h2{position:relative;font-family:'Microsoft YaHei','Space Grotesk',sans-serif;font-size:clamp(60px,8vw,132px);font-weight:900;letter-spacing:-.045em;line-height:1.12;transform:rotate(-3deg);margin:0 0 16px}
.closing-underline{position:absolute;left:0;bottom:-14px;width:92%;height:12px;background:#b6fc63;clip-path:polygon(2% 30%,100% 0,94% 60%,0 100%);transform:rotate(-3deg)}
.contact-character-scene .closing-english{font-family:'Space Grotesk',sans-serif;font-size:clamp(16px,1.8vw,28px);font-weight:600;letter-spacing:.06em;color:#fff;max-width:none}
.closing-discipline{font-size:clamp(11.9px,0.9972vw,16.8px);letter-spacing:.18em;color:#b6fc63}
.closing-bubble{position:absolute;left:51%;top:17%;padding:22px 24px;border-radius:50% 50% 8px 50%;background:#b6fc63;color:#15210c;font:800 clamp(18px,2vw,30px) 'Space Grotesk',sans-serif;transform:rotate(-10deg)}
.closing-doodle{position:absolute;left:38%;top:15%;width:clamp(48px,6vw,90px);color:#b6fc63;transform:rotate(8deg)}
@media(max-width:700px){.contact-character-scene .closing-title{width:100%;gap:20px;margin-top:60px}.contact-character-scene .closing-title h2{font-size:clamp(58px,13vw,92px)}.closing-bubble{left:auto;right:20px;top:100px;padding:15px}.closing-doodle{left:25px;top:95px;width:50px}.contact-character-scene .closing-english{font-size:clamp(14.45px,1.2108vw,20.4px)}}

.contact-character-scene .closing-title .closing-thanks{font-family:Georgia,'Times New Roman',serif;font-size:clamp(76px,9.5vw,160px);font-weight:400;letter-spacing:-.065em;line-height:1.1;transform:none;margin-bottom:10px}
.closing-thanks span{display:inline-block;position:relative}.closing-thanks span::first-letter{font-style:italic;color:#dcffb5;text-shadow:0 0 4px #fff,0 0 14px #b6fc63,0 0 32px #71f647}
.closing-thanks span::after{content:'';position:absolute;left:0;right:-6%;bottom:-4px;height:20px;border-bottom:2px solid #b6fc63;border-radius:50%;transform:rotate(-5deg);filter:drop-shadow(0 0 5px #9bff57)}
.contact-character-scene .closing-english-stacked{position:relative;font-family:Georgia,'Times New Roman',serif;font-size:clamp(22px,2.6vw,40px);font-weight:400;line-height:.95;letter-spacing:0;margin-left:50px}
.closing-english-stacked i{position:absolute;left:-30px;top:40%;width:15px;height:15px;background:#b6fc63}
@media(max-width:700px){.contact-character-scene .closing-title .closing-thanks{font-size:clamp(76px,18vw,120px)}.contact-character-scene .closing-english-stacked{font-size:clamp(22.1px,1.8519vw,31.2px)}}

.contact-character-scene .contact-character{inset:auto 0 0 auto;width:82%;height:82%;object-fit:contain;object-position:right bottom}
.contact-character-scene .closing-title{width:55%;z-index:1}
.closing-thanks-art{display:block;width:100%;height:auto;mix-blend-mode:screen}
.contact-character-scene .closing-bubble,.contact-character-scene .closing-doodle{display:none}
@media(max-width:700px){.contact-character-scene .contact-character{width:100%;height:65%;opacity:.65}.contact-character-scene .closing-title{width:100%;margin-top:20px}}

.contact.closing-image-scene{background:#030a04;min-height:0;padding:0;position:relative}
.closing-scene-image{display:block;width:100%;height:auto}
.closing-footer{padding:0 0 30px}.closing-footer footer{margin:0;padding-top:24px}

.hero .scene-next{display:none!important}
.global-scene-next{position:fixed;right:clamp(16px,3vw,48px);bottom:28px;z-index:40;display:flex;align-items:center;gap:14px;padding:13px 20px;color:var(--ink);font-size:clamp(11.05px,0.9259vw,15.6px);cursor:pointer}
.modal-open .global-scene-next{visibility:hidden}
@media(max-width:600px){.global-scene-next{bottom:32px;padding:10px 15px;font-size:clamp(10.2px,0.8547vw,14.4px)}}

.scene-heading{display:block;text-align:left;color:var(--ink)}
.scene-heading>small{display:flex;align-items:center;gap:5px;font-size:clamp(9.35px,0.7835vw,13.2px);font-weight:600;color:#c4cdc6}
.scene-heading>small i{width:3px;height:10px;background:var(--green);transform:skew(-15deg)}
.scene-heading h2,.stack-heading.scene-heading h2,.other-design .scene-heading h2,.directory-editorial .scene-heading h2{margin:10px 0 5px;font-family:'Microsoft YaHei',sans-serif;font-size:clamp(28px,3vw,46px);font-weight:900;letter-spacing:-.04em;line-height:1.2;text-align:left;background:none;-webkit-text-fill-color:initial}
.scene-heading h2 em{color:var(--green);font-style:normal}
.scene-heading>p,.stack-heading.scene-heading>p,.directory-editorial .scene-heading>p{margin:0;font-size:clamp(10.2px,0.8547vw,14.4px);line-height:1.5;color:#9ba79f}
.stack-heading.scene-heading{align-items:flex-start;margin-bottom:48px}
.closing-identity{position:absolute;left:4%;bottom:16%;display:flex;flex-direction:column;gap:8px;color:white;font-size:clamp(14px,1.4vw,22px)}
.closing-identity>strong{font-size:clamp(20px,2vw,32px)}
.closing-contact-links{display:flex;gap:24px;margin-top:12px;font-size:clamp(11px,1vw,16px)}.closing-contact-links a{display:flex;align-items:center;gap:8px}
@media(max-width:600px){.closing-identity{bottom:20%;gap:4px}.closing-contact-links{gap:8px;flex-direction:column;margin-top:5px}}

/* Tighten the gap between the final UI project and graphic design. */
#work.stack-work{padding-bottom:32px}
#work .project-stack{padding-bottom:0}
#work .project-stack>.stack-card:last-child{margin-bottom:0}
#other-design.section{padding-top:56px}
@media(max-width:700px){#work.stack-work{padding-bottom:24px}#other-design.section{padding-top:40px}}

.scene-title-number{display:inline-block;margin-right:16px;color:var(--green);font-family:'Space Grotesk',sans-serif;font-size:.7em;font-weight:600;letter-spacing:0;vertical-align:baseline}

.scene-heading h2 .scene-title-number{margin-right:0;font:inherit;color:var(--green);letter-spacing:inherit}

.closing-image-scene .closing-identity{left:8%}

.nav.shell .links{position:static;left:auto;top:auto;transform:none;margin-left:auto;justify-content:flex-end}
@media(max-width:900px){.nav.shell .links.open{position:absolute;top:72px;left:0;right:0;margin-left:0;transform:none}.nav.shell .menu{margin-left:auto}}

.hero.story-step-0 .hero-in .story-hint{position:fixed;right:calc((100vw - min(72vw,1040px))/2);left:auto;bottom:34px;min-height:0;display:block;text-align:right;z-index:26;font-size:clamp(8.5px,0.7123vw,12px);line-height:1.5;letter-spacing:.08em}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art{top:20px}
#other-design .graphic-piece figcaption{flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
@media(max-width:600px){.hero.story-step-0 .hero-in .story-hint{right:20px;bottom:26px;font-size:clamp(6.8px,0.5698vw,9.6px)}.hero.folder-focused:has(.directory-folder.is-expanded) .folder-art{top:12px}}

#about .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:600px){#about .stats>div{flex-direction:column;align-items:flex-start;gap:8px;padding:20px 10px}#about .stats b{font-size:clamp(34px,2.849vw,48px)}}

/* Directory previews use landscape 4:3 proportions. */
.directory-folder .folder-photo{width:42%;height:auto;aspect-ratio:4/3;top:26%}
.directory-folder .folder-photo-center{top:22%;left:29%;height:auto}
.directory-folder .folder-photo-left{left:3%}.directory-folder .folder-photo-right{right:1%}
.directory-folder .folder-photo img{object-position:center top}
.hero .story-hint{display:none!important}
.portfolio-progress-hint{position:fixed;right:calc((100vw - min(72vw,1040px))/2);bottom:34px;z-index:26;color:#bac3bc;font:500 10px/1.5 'Space Grotesk','Microsoft YaHei',sans-serif;letter-spacing:.08em;pointer-events:none;text-align:right}
.modal-open .portfolio-progress-hint{visibility:hidden}
@media(max-width:600px){.portfolio-progress-hint{right:20px;bottom:26px;font-size:clamp(6.8px,0.5698vw,9.6px)}}

.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory>button:nth-child(1) .folder-category-preview img,
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-directory>button:nth-child(3) .folder-category-preview img{object-position:center top}

#about .experience-cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px}
#about .experience-cards>div{min-width:0}
#about .experience-summary{grid-template-columns:1fr 20px;gap:10px;padding:18px}
#about .experience-summary time{grid-column:1/-1}
#about .experience-summary>span{min-width:0}
#about .experience-summary strong{display:block;line-height:1.6}
#about .experience-detail{padding-inline:18px}
#about .experience-projects{grid-template-columns:1fr}
#about .experience-project:nth-child(even){border-left:0}
#about .experience-project:nth-child(n+2){border-top:1px dashed #7ea6a2}
@media(max-width:700px){#about .experience-cards{grid-template-columns:1fr}}

#about .shell>.experience-cards{width:100%;grid-template-columns:minmax(0,1fr);margin-top:32px;gap:12px}
#about .experience-summary{grid-template-columns:115px minmax(0,1fr) 20px;gap:16px;padding:20px}
#about .experience-summary time{grid-column:auto}
#about .experience-projects{grid-template-columns:repeat(2,minmax(0,1fr))}
#about .experience-project:nth-child(even){border-left:1px dashed #7ea6a2}
#about .experience-project:nth-child(2){border-top:0}
@media(max-width:700px){#about .experience-summary{grid-template-columns:1fr 20px}#about .experience-summary time{grid-column:1/-1}#about .experience-projects{grid-template-columns:1fr}#about .experience-project:nth-child(even){border-left:0}#about .experience-project:nth-child(2){border-top:1px dashed #7ea6a2}}

#about .profile-portraits.profile-poster{margin-bottom:50px}
#about .profile-poster-heading{top:calc(100% + 20px)}
#about .shell>.experience-cards{margin-top:16px}

#work.stack-work{padding-top:40px}
#work .stack-heading.scene-heading{padding-top:0;padding-bottom:0;margin-bottom:28px}
#work .stack-heading.scene-heading h2{margin-top:0}
@media(max-width:700px){#work.stack-work{padding-top:28px}#work .stack-heading.scene-heading{padding-bottom:0;margin-bottom:22px}}

/* Unified body copy throughout the portfolio. */
:root{--body-copy-size:16px}
.bio-summary,.bio-description,.bio .bio-summary,.bio .bio-description,.bio-details dd,.bio-details p,.bio-education p,
.experience-detail,.experience-copy p,.experience-copy li,.experience-summary small,
.stack-name p,.stack-heading p,.other-design>p,.section-emotion,
.folder-category-description,.closing-identity>span,.closing-contact-links,
.case-introduction p,.case-end p{font-size:var(--body-copy-size);line-height:1.8}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-category-description{font-size:var(--body-copy-size);line-height:1.65}
@media(max-width:700px){:root{--body-copy-size:14px}}

.hero.story-step-0 .cover-identity{position:absolute;left:3%;top:56%;width:24%;display:flex;flex-direction:column;align-items:flex-end;gap:16px;opacity:0;visibility:hidden;pointer-events:none}
.hero.story-step-0 .cover-identity .cover-year-badge{position:static;animation:none;opacity:1;visibility:inherit}
.cover-identity>strong{display:block;white-space:nowrap;color:#fff;font-family:'Microsoft YaHei',sans-serif;font-size:clamp(18px,2.15vw,36px);font-weight:900;line-height:1.35}
.hero.story-step-0 .cover-labels-visible .cover-identity{visibility:visible;animation:cover-text-arrive 700ms ease-out both}
@media(max-width:900px){.hero.story-step-0 .cover-identity{left:2%;width:26%;gap:10px}.cover-identity>strong{font-size:clamp(12px,2.15vw,22px)}}

/* Larger, readable typography for the resume section. */
#about{--body-copy-size:20px}
#about .bio-summary,#about .bio-description,#about .bio-details dd,#about .bio-details p,
#about .bio-education p,#about .experience-detail,#about .experience-copy p,
#about .experience-copy li,#about .experience-summary small{font-size:var(--body-copy-size);line-height:1.8}
#about .experience-summary strong,#about .bio-details h3{font-size:clamp(18.7px,1.567vw,26.4px);line-height:1.55}
#about .experience-project>div>strong{font-size:clamp(17px,1.4245vw,24px);line-height:1.6}
#about .bio-details dt,#about .bio-education>span,#about .experience-summary time,
#about .software-heading>span{font-size:clamp(13.6px,1.1396vw,19.2px);line-height:1.6}
#about .bio-eyebrow,#about .bio-details h3 span{font-size:clamp(11.9px,0.9972vw,16.8px)}
@media(max-width:700px){
 #about{--body-copy-size:18px}
 #about .experience-summary strong,#about .bio-details h3{font-size:clamp(17px,1.4245vw,24px)}
 #about .experience-project>div>strong{font-size:clamp(15.3px,1.2821vw,21.6px)}
 #about .bio-details dt,#about .bio-education>span,#about .experience-summary time,#about .software-heading>span{font-size:clamp(12.75px,1.0684vw,18px)}
}

/* Shared body typography across every portfolio scene. */
:root{--body-copy-size:20px}
.bio-summary,.bio-description,.bio .bio-summary,.bio .bio-description,.bio-details dd,.bio-details p,.bio-education p,
.experience-detail,.experience-copy p,.experience-copy li,.experience-summary small,
.stack-name p,.stack-heading p,.other-design>p,.section-emotion,
.folder-category-description,.closing-identity>span,.closing-contact-links,
.case-introduction p,.case-end p{font-size:var(--body-copy-size);line-height:1.8}
.hero.folder-focused:has(.directory-folder.is-expanded) .folder-category-description{font-size:var(--body-copy-size);line-height:1.65}
@media(max-width:700px){:root{--body-copy-size:18px}}

/* Fluid body scale shared by every scene, including the resume. */
:root,#about{--body-copy-size:clamp(18px,1.425vw,24px)}
@media(max-width:700px){:root,#about{--body-copy-size:clamp(16px,calc(14px + .57vw),18px)}}

/* Gooey navigation keeps the original transparent header. */
.nav.shell .gooey-nav.links{gap:0;letter-spacing:0}
.nav.shell .gooey-nav .gooey-nav__link{font:inherit;color:var(--gn-muted);animation:none;padding:var(--gn-y) var(--gn-x)}
.nav.shell .gooey-nav .gooey-nav__list--active .gooey-nav__link{color:var(--gn-active-ink)}
.nav.shell .gooey-nav .gooey-nav__item[data-active]>.gooey-nav__link{color:var(--gn-ink)}
@media(max-width:900px){.nav.shell .gooey-nav.links:not(.open){display:none}.nav.shell .gooey-nav.links.open{display:flex;justify-content:center;padding:16px}.gooey-nav__list{flex-wrap:nowrap}.nav.shell .gooey-nav{--gn-x:10px;--gn-y:9px}}

/* Keep all story stages visible on tall windows and use 40px content gaps. */
.hero.story-stage{min-height:100svh}
#about.section{padding-top:40px;padding-bottom:0}
#about .about-grid{gap:40px;margin-top:40px}
#about .shell>.experience-cards{margin-top:40px}
#about .software-loop{margin-top:40px;padding-top:0;padding-bottom:0;border-bottom:0}
#about .software-heading{margin-bottom:40px}
#work.stack-work{margin-top:40px;padding-top:0;padding-bottom:0}
#work .stack-heading.scene-heading{margin-bottom:40px}
#work .stack-card{min-height:0;margin-bottom:40px}
#work .project-stack{padding-bottom:0}
#work .project-stack>.stack-card:last-child{margin-bottom:0}
#other-design.section{padding-top:40px;padding-bottom:40px}
#other-design .graphic-gallery.graphic-gallery-sequential{margin-top:40px;gap:40px}
@media(max-width:900px){
 .hero.story-stage.story-step-1{min-height:max(100svh,820px)}
}

/* One 1920 × 1080 composition, scaled uniformly inside every window. */
html.portfolio-host,html.portfolio-host body,html.portfolio-host #root{width:100%;height:100%;margin:0;overflow:hidden;background:#070b09}
.portfolio-viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#070b09}
.portfolio-viewport-frame{position:relative;flex:none;overflow:hidden}
.portfolio-viewport-frame iframe{position:absolute;top:0;left:0;border:0;display:block;transform-origin:top left;background:#070b09}
.portfolio-canvas .hero.story-stage{height:1080px;min-height:1080px}
.portfolio-canvas .hero .story-media,.portfolio-canvas .hero.shared-backdrop .story-media{height:1080px}
.portfolio-canvas .story-media video{object-fit:contain;object-position:center}