:root {
  --paper: #f7f7f2;
  --mist: #eceef3;
  --klein: #002fa7;
  --klein-bright: #073cff;
  --ink: #101116;
  --soft-ink: #60636d;
  --ice: #f5f7ff;
  --sky: #dce6ff;
  --blue: #002fa7;
  --ocean: #2448a6;
  --deep: #101116;
  --white: #fbfbf7;
  --hairline: rgba(16,17,22,.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
p, h1, h2, h3 { margin: 0; }

.site-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 64%, rgba(0,47,167,.08), transparent 34%),
    linear-gradient(145deg, #fbfbf8, #e9edf6 58%, #f7f7f3);
  transform: translate3d(0,0,0);
  transition: transform .9s cubic-bezier(.76,0,.24,1), visibility 0s linear .9s;
}
.site-loader.is-ready { visibility: hidden; transform: translate3d(0,-102%,0); pointer-events: none; }
.site-loader::after { content: ""; position: absolute; inset: -40%; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); animation: grain .3s steps(2) infinite; }
.loader-reveal { position: relative; z-index: 1; width: min(980px,86vw); }
.loader-word { position: relative; height: clamp(82px,16vw,190px); overflow: hidden; }
.loader-word > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(76px,15vw,188px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.085em;
}
.loader-word-outline { color: transparent; -webkit-text-stroke: 1px rgba(0,47,167,.42); }
.loader-word-fill {
  color: var(--klein);
  clip-path: polygon(
    0 calc(100% - var(--load-progress) + 3.2%),
    10% calc(100% - var(--load-progress) - 2.4%),
    22% calc(100% - var(--load-progress) + 1.8%),
    35% calc(100% - var(--load-progress) - 3.8%),
    49% calc(100% - var(--load-progress) + 2.7%),
    63% calc(100% - var(--load-progress) - 1.9%),
    76% calc(100% - var(--load-progress) + 3.6%),
    89% calc(100% - var(--load-progress) - 2.8%),
    100% calc(100% - var(--load-progress) + 1.4%),
    100% 100%,
    0 100%
  );
  transition: clip-path .38s cubic-bezier(.22,1,.36,1);
}
.loader-word-dots {
  color: transparent;
  background:
    radial-gradient(circle, rgba(0,47,167,.92) 0 1px, transparent 1.25px) 0 0 / 7px 7px,
    radial-gradient(circle, rgba(82,121,224,.62) 0 .7px, transparent 1px) 3px 3px / 9px 9px;
  -webkit-background-clip: text;
  background-clip: text;
  clip-path: polygon(
    0 calc(100% - var(--load-progress) - 3%),
    10% calc(100% - var(--load-progress) - 8.6%),
    22% calc(100% - var(--load-progress) - 4.4%),
    35% calc(100% - var(--load-progress) - 10%),
    49% calc(100% - var(--load-progress) - 3.5%),
    63% calc(100% - var(--load-progress) - 8.1%),
    76% calc(100% - var(--load-progress) - 2.6%),
    89% calc(100% - var(--load-progress) - 9%),
    100% calc(100% - var(--load-progress) - 4.8%),
    100% calc(100% - var(--load-progress) + 5.8%),
    89% calc(100% - var(--load-progress) + 3.2%),
    76% calc(100% - var(--load-progress) + 9.6%),
    63% calc(100% - var(--load-progress) + 4.1%),
    49% calc(100% - var(--load-progress) + 8.7%),
    35% calc(100% - var(--load-progress) + 2.2%),
    22% calc(100% - var(--load-progress) + 7.8%),
    10% calc(100% - var(--load-progress) + 3.6%),
    0 calc(100% - var(--load-progress) + 9.2%)
  );
  transition: clip-path .38s cubic-bezier(.22,1,.36,1);
}
.loader-meta { margin-top: 20px; padding-top: 12px; display: flex; justify-content: space-between; border-top: 1px solid rgba(0,47,167,.24); color: var(--klein); }
.loader-meta small { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.loader-meta b { font-size: 10px; font-weight: 400; letter-spacing: .12em; }


.site-shell { position: relative; height: 100svh; overflow: hidden; background: var(--paper); isolation: isolate; }
[data-magnetic] {
  --magnet-x: 0px;
  --magnet-y: 0px;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 82px;
  padding: 22px 2.4vw 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  pointer-events: none;
  color: var(--klein);
  background: linear-gradient(180deg, rgba(247,247,242,.86), rgba(247,247,242,0));
}
.site-header a, .site-header nav, .site-header .language-switcher, .site-header .language-switcher button { pointer-events: auto; }
.logo {
  width: max-content;
  display: grid;
  grid-template-columns: auto 20px auto;
  align-items: center;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .8;
}
.logo i { height: 1px; background: currentColor; transform: scaleX(.7); }
.studio-note {
  max-width: 310px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: rgba(16,17,22,.62);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .04em;
}
.studio-note b { font-size: 12px; color: var(--klein); }
.site-header nav {
  justify-self: end;
  display: flex;
  gap: clamp(18px, 2.4vw, 42px);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-header nav a { position: relative; padding-bottom: 6px; }
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.language-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid currentColor; border-radius: 999px; }
.language-switcher button { min-width: 28px; height: 24px; padding: 0 6px; color: inherit; border: 0; border-radius: 999px; background: transparent; font-size: 8px; letter-spacing: .05em; cursor: pointer; transition: color .25s ease, background .25s ease; }
.language-switcher button.is-active { color: white; background: var(--klein); }
.site-header .language-switcher { margin-top: -5px; color: var(--klein); border-color: rgba(0,47,167,.34); background: rgba(247,247,242,.58); backdrop-filter: blur(10px); }
.site-header .language-switcher button.is-active { color: white; background: var(--klein); }
.language-switcher button:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
@media (pointer: fine) {
  .site-header nav { color: var(--klein); mix-blend-mode: normal; }
  .site-header .studio-note { color: rgba(0,47,167,.72); mix-blend-mode: normal; }
  .site-header .studio-note b { color: var(--klein); }
}

.reel {
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.slide {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.visual { position: absolute; inset: 0; overflow: hidden; background: var(--mist); }
.visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 38%, rgba(244,245,250,.72));
}
.visual-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0,47,167,.075);
  font-size: clamp(82px, 16vw, 300px);
  font-weight: 500;
  letter-spacing: -.085em;
  line-height: .8;
  white-space: nowrap;
  text-transform: uppercase;
  animation: breathe 8s ease-in-out infinite;
}
.orb, .current-line, .grain { position: absolute; display: block; }
.orb { border-radius: 50%; filter: blur(.2px); }
.orb-one { width: 38vw; aspect-ratio: 1; left: 12%; top: 5%; }
.orb-two { width: 22vw; aspect-ratio: 1; right: 9%; bottom: 7%; }
.current-line { height: 1px; border-radius: 50%; border-top: 1px solid rgba(0,47,167,.3); }
.current-one { width: 74vw; left: 4%; top: 43%; transform: rotate(-8deg); }
.current-two { width: 66vw; right: -5%; top: 58%; transform: rotate(7deg); }
.grain {
  inset: -50%;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}

.project-video { background: #f5f4f1; }
.project-video::after { display: none; }
.project-video video { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,15,40,.12), transparent 46%, rgba(4,8,18,.54)); }
.project-link { position: absolute; z-index: 7; inset: 0; padding: 0; border: 0; background: transparent; }
.project-caption, .slide-tag, .scroll-hint { pointer-events: none; }
.project-slide .visual {
  transform: scale(1.035) translate3d(var(--visual-x, 0px), var(--visual-y, 0px), 0);
  transition: transform .62s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}
.project-slide::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(520px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255,255,255,.12), transparent 58%);
  transition: opacity .32s ease;
}
.project-slide:hover::after { opacity: 1; }
.project-slide.is-active .visual { transform: scale(1) translate3d(var(--visual-x, 0px), var(--visual-y, 0px), 0); }
.project-slide:not(.is-active) .visual-word,
.project-slide:not(.is-active) .orb,
.project-slide:not(.is-active) .grain { animation-play-state: paused; }

.liminality .visual {
  background:
    radial-gradient(ellipse at 63% 35%, rgba(255,255,255,.95), transparent 10%),
    radial-gradient(ellipse at 46% 57%, rgba(123,156,255,.22), transparent 30%),
    linear-gradient(135deg, #f8f8f3 3%, #e8ecf7 46%, #d8e3ff 72%, #f1efe9 100%);
}
.liminality .orb-one { background: radial-gradient(circle at 34% 28%, #fff, #aebff2 42%, #3159bf 76%); box-shadow: 0 30px 110px rgba(0,47,167,.16); animation: drift-a 9s ease-in-out infinite; }
.liminality .orb-two { background: rgba(255,255,255,.32); border: 1px solid rgba(0,47,167,.22); animation: drift-b 11s ease-in-out infinite; }

.micro .visual {
  background:
    radial-gradient(circle at 74% 29%, #fff, transparent 3%),
    radial-gradient(ellipse at 64% 41%, rgba(103,142,255,.28), transparent 19%),
    linear-gradient(115deg, #f0f0ec, #dce3f5 52%, #f9f9f5 100%);
}
.micro .orb-one { width: 46vw; left: -8%; top: 8%; background: radial-gradient(circle at 60% 40%, #fff, rgba(134,158,228,.35) 24%, rgba(0,47,167,.03) 68%); border: 1px solid rgba(0,47,167,.18); animation: liquid 12s ease-in-out infinite; }
.micro .orb-two { right: 12%; bottom: 18%; background: radial-gradient(circle at 35% 30%, #fff, #b4c6f5 32%, #3159bf 74%); box-shadow: inset 20px 15px 45px rgba(255,255,255,.5); animation: drift-a 10s ease-in-out infinite reverse; }

.tides .visual {
  background:
    linear-gradient(110deg, rgba(255,255,255,.7), transparent 48%),
    radial-gradient(ellipse at 76% 33%, rgba(110,145,255,.36), transparent 22%),
    linear-gradient(145deg, #f9f8f3 7%, #e0e5f2 51%, #c9d7ff 83%, #f4f4ef 100%);
}
.tides .orb-one { width: 25vw; left: 58%; top: 13%; border-radius: 42% 58% 64% 36% / 35% 40% 60% 65%; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(0,47,167,.15)); box-shadow: -40px 50px 90px rgba(0,47,167,.14); animation: liquid 8s ease-in-out infinite; }
.tides .orb-two { left: 18%; bottom: -13%; width: 38vw; border: 1px solid rgba(0,47,167,.2); background: rgba(255,255,255,.34); animation: drift-b 12s ease-in-out infinite; }

.deep-sea .visual {
  background:
    radial-gradient(circle at 72% 40%, rgba(255,255,255,.9), transparent 6%),
    radial-gradient(ellipse at 65% 45%, rgba(0,47,167,.33), transparent 27%),
    linear-gradient(128deg, #f5f5f0, #e0e3ec 48%, #cbd8ff 72%, #f7f6f1);
}
.deep-sea .orb-one { width: 30vw; left: 54%; top: 18%; background: radial-gradient(circle at 50% 46%, transparent 0 8%, rgba(0,47,167,.72) 9% 11%, transparent 12% 22%, rgba(79,113,211,.26) 23% 27%, transparent 29%); filter: blur(2px); animation: pulse 7s ease-in-out infinite; }
.deep-sea .orb-two { width: 48vw; right: -12%; bottom: -22%; background: radial-gradient(circle at 40% 30%, rgba(74,109,210,.22), rgba(255,255,255,.03) 66%); border: 1px solid rgba(0,47,167,.18); animation: drift-a 13s ease-in-out infinite; }

.slide-tag {
  position: absolute;
  z-index: 3;
  top: 108px;
  left: 2.4vw;
  right: 2.4vw;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.slide-tag span:last-child {
  padding: 8px 12px;
  margin-top: -8px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  opacity: .78;
  background: rgba(5,35,48,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(12px) saturate(135%);
}
.project-caption {
  position: absolute;
  left: 2.4vw;
  right: 2.4vw;
  bottom: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 4vw;
  align-items: end;
}
.project-title-row { display: flex; align-items: flex-end; gap: clamp(16px,1.6vw,28px); min-width: 0; }
.project-heading { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 32px); }
.project-no { font-size: clamp(13px, 1.15vw, 18px); letter-spacing: .08em; }
.project-heading h1 { font-weight: 400; line-height: .82; letter-spacing: -.065em; }
.project-heading h1 > span { display: inline-block; white-space: nowrap; font-family: "Songti SC", "STSong", serif; font-size: clamp(62px, 7.2vw, 124px); letter-spacing: -.04em; }
.project-en-accent { flex: 0 0 auto; position: relative; z-index: 5; padding-bottom: .06em; color: var(--klein); font-size: clamp(22px, 2.4vw, 40px); font-weight: 400; line-height: .86; letter-spacing: -.045em; }
.project-meta { padding-bottom: 5px; display: grid; gap: 14px; font-size: 10px; line-height: 1.65; letter-spacing: .04em; }
.project-meta p:last-child { max-width: 360px; font-family: "Songti SC", "STSong", serif; font-size: 13px; }
.scroll-hint { position: absolute; z-index: 4; right: 2.4vw; top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right center; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.project-heading, .project-en-accent, .project-meta, .slide-tag, .scroll-hint,
.info-main > *, .services-strip, .contact-copy > *, .wechat-box {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 24px, 0);
  transition: opacity .48s ease, filter .55s ease, transform .58s cubic-bezier(.16,1,.3,1);
}
.slide.is-active .project-heading, .slide.is-active .project-en-accent, .slide.is-active .slide-tag,
.slide.is-active .info-main > *, .slide.is-active .contact-copy > * {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0);
}
.slide.is-active .project-meta, .slide.is-active .services-strip,
.slide.is-active .wechat-box, .slide.is-active .scroll-hint {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0);
  transition-delay: .12s;
}
.slide.is-active .scroll-hint { transform: rotate(90deg) translateX(50%); }

.info-slide { padding: 100px 2.4vw 58px; color: var(--deep); background: var(--ice); display: grid; grid-template-rows: auto 1fr auto; }
.info-index, .contact-index { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .12em; }
.info-main { display: grid; grid-template-columns: .72fr 1.28fr; align-content: center; gap: 5vw; }
.info-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.info-main h2 { max-width: 980px; font-family: "Songti SC", "STSong", serif; font-size: clamp(54px, 7.6vw, 132px); font-weight: 400; line-height: 1.08; letter-spacing: -.07em; }
.info-copy { grid-column: 2; margin-top: 42px; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; max-width: 920px; font-size: 12px; line-height: 1.85; color: rgba(3,39,53,.65); }
.services-strip { position: relative; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(3,39,53,.28); }
.services-strip::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(360px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(26,168,216,.18), transparent 60%);
  transition: opacity .45s ease;
}
.services-strip:hover::before { opacity: 1; }
.services-strip article { position: relative; padding: 18px 2vw 0 0; display: grid; grid-template-columns: 34px 1fr; align-items: baseline; border-right: 1px solid rgba(3,39,53,.2); transition: transform .45s cubic-bezier(.2,.8,.2,1), background .45s ease; }
.services-strip article:hover { transform: translateY(-8px); background: rgba(255,255,255,.3); }
.services-strip article + article { padding-left: 2vw; }
.services-strip article:last-child { border-right: 0; }
.services-strip span, .services-strip p { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.services-strip h3 { font-size: clamp(15px, 1.35vw, 23px); font-weight: 400; }
.services-strip p { grid-column: 2; margin-top: 8px; color: rgba(3,39,53,.55); }

.contact-slide { padding: 100px 2.4vw 26px; color: white; background: radial-gradient(circle at 72% 35%, #73d2e4, transparent 18%), radial-gradient(ellipse at 69% 48%, rgba(12,134,176,.78), transparent 35%), linear-gradient(135deg,#012534,#005d7a 62%,#0f9cc7); }
.contact-copy { position: absolute; left: 2.4vw; top: 50%; transform: translateY(-58%); }
.contact-copy > p { margin-bottom: 22px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.contact-copy h2 { font-family: "Songti SC", "STSong", serif; font-size: clamp(58px, 8.2vw, 146px); font-weight: 400; line-height: 1.02; letter-spacing: -.07em; }
.wechat-box { position: absolute; right: 3.2vw; bottom: 96px; width: min(370px, 35vw); padding: 22px; display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 20px; border: 1px solid rgba(255,255,255,.42); background: rgba(0,35,50,.16); backdrop-filter: blur(14px); }
.qr-placeholder { aspect-ratio: 1; display: grid; place-content: center; border: 1px solid rgba(255,255,255,.45); text-align: center; font-size: 8px; letter-spacing: .14em; }
.qr-placeholder b { margin-top: 4px; font-size: 20px; font-weight: 400; }
.wechat-box p { margin-bottom: 17px; font-size: 9px; letter-spacing: .12em; }
.wechat-box strong { display: block; margin-bottom: 7px; font-size: 16px; font-weight: 400; }
.wechat-box small { color: rgba(255,255,255,.66); font-size: 10px; }
.contact-slide footer { position: absolute; left: 2.4vw; right: 2.4vw; bottom: 25px; padding-top: 15px; display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1px solid rgba(255,255,255,.38); font-size: 9px; letter-spacing: .1em; }
.contact-slide footer a { justify-self: end; }

.reel-progress {
  position: fixed;
  z-index: 60;
  left: 2.4vw;
  right: 2.4vw;
  bottom: 13px;
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 7px;
  pointer-events: none;
  mix-blend-mode: difference;
}
.reel-progress button { height: 12px; padding: 0; display: flex; align-items: flex-end; border: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.reel-progress span { width: 100%; height: 1px; background: rgba(255,255,255,.48); transition: height .3s ease, background .3s ease; }
.reel-progress button:hover span, .reel-progress button:focus-visible span, .reel-progress button.active span { height: 3px; background: #fff; }

.cursor-lens {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  color: white;
  background: transparent;
  transition: width .48s cubic-bezier(.16,1,.3,1), height .48s cubic-bezier(.16,1,.3,1), margin .48s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.cursor-lens.is-visible { opacity: 1; }
.cursor-lens.is-interactive { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: transparent; }
.cursor-dot { position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--klein); box-shadow: 0 0 0 1px rgba(255,255,255,.76), 0 2px 9px rgba(0,47,167,.32), 0 0 12px rgba(255,255,255,.38); transform: scale(1); transition: opacity .25s ease, transform .48s cubic-bezier(.16,1,.3,1); }
.cursor-label { position: absolute; z-index: 1; opacity: 0; color: var(--klein); font-size: 8px; font-weight: 600; letter-spacing: .18em; transform: translateX(.09em) scale(.72); filter: blur(1px) drop-shadow(0 0 3px rgba(255,255,255,.72)); transition: opacity .24s ease .04s, transform .48s cubic-bezier(.16,1,.3,1), filter .35s ease; }
.cursor-lens.is-project { width: 54px; height: 22px; margin: -11px 0 0 -27px; color: var(--klein); background: transparent; border: 0; }
.cursor-lens.is-project .cursor-dot { opacity: 0; transform: scale(.18); }
.cursor-lens.is-project .cursor-label { opacity: 1; }

/* 2026 light editorial motion system */
.project-slide { color: var(--ink); }
.chromatic-summer, .daybreak-citrus, .all-categories { color: white; }
.project-slide::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(0,47,167,.12), transparent 67%);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .7s ease;
}
.project-slide:hover::before { opacity: 1; }
.chromatic-summer::before, .daybreak-citrus::before { background: radial-gradient(440px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255,255,255,.16), transparent 67%); mix-blend-mode: screen; }
.project-slide::after { background: none; }
.project-slide:hover .visual { filter: saturate(1.04) contrast(1.015); }

.slide-tag { color: var(--klein); }
.chromatic-summer .slide-tag, .daybreak-citrus .slide-tag { color: white; }
.slide-tag span:first-child { position: relative; padding-left: 24px; }
.slide-tag span:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform-origin: left;
  animation: signal 2.4s cubic-bezier(.16,1,.3,1) infinite;
}
.slide-tag span:last-child {
  border-color: rgba(0,47,167,.2);
  color: var(--klein);
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 30px rgba(0,47,167,.06);
}
.chromatic-summer .slide-tag span:last-child, .daybreak-citrus .slide-tag span:last-child { color: white; border-color: rgba(255,255,255,.35); background: rgba(10,18,34,.16); }

.project-heading h1 { display: flex; align-items: baseline; flex-wrap: wrap; }
.kinetic-title { display: inline-flex; font-family: "Songti SC", "STSong", serif; font-size: clamp(68px, 10vw, 176px); letter-spacing: -.04em; }
.kinetic-title i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, .55em, 0) rotate(2deg);
  transition: opacity .7s ease, filter .85s ease, transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--char-index) * 55ms);
}
.slide.is-active .kinetic-title i { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) rotate(0); }
.project-no { color: var(--klein); font-weight: 600; }
.chromatic-summer .project-no, .daybreak-citrus .project-no { color: white; }
.project-meta { color: rgba(16,17,22,.7); }
.chromatic-summer .project-meta, .daybreak-citrus .project-meta { color: rgba(255,255,255,.82); }
.scroll-hint { color: var(--klein); }
.chromatic-summer .scroll-hint, .daybreak-citrus .scroll-hint { color: white; }

/* Preview copy samples the moving image beneath it, so light footage renders dark
   type and dark footage renders light type without project-specific exceptions. */
.project-slide .project-caption,
.project-slide .slide-tag,
.project-slide .scroll-hint {
  color: #fff;
}
.project-slide .project-caption .project-heading,
.project-slide .project-caption .project-meta,
.project-slide .slide-tag,
.project-slide .scroll-hint { mix-blend-mode: difference; }
.project-slide .project-caption .project-heading,
.project-slide .project-caption .project-meta { position: relative; z-index: 4; }
.project-slide .project-caption .project-no,
.project-slide .project-caption h1,
.project-slide .project-caption .project-meta,
.project-slide .slide-tag span,
.project-slide .scroll-hint { color: inherit; }
.project-slide .slide-tag span:last-child {
  border-color: currentColor;
  background: rgba(255,255,255,.12);
  box-shadow: none;
}

.archive-slide { padding: 0 2.4vw; display: grid; grid-template-rows: auto minmax(0,1fr); color: var(--ink); background: #f2f3f6; }
.archive-head { min-height: 31svh; padding: 92px 0 34px; display: grid; grid-template-columns: 1fr auto; align-items: end; border-bottom: 1px solid rgba(0,47,167,.2); }
.archive-head p { margin-bottom: 24px; color: var(--klein); font-size: 9px; letter-spacing: .14em; }
.archive-head h2 { font-family: "Songti SC","STSong",serif; font-size: clamp(58px,7vw,112px); font-weight: 400; line-height: .78; letter-spacing: -.075em; }
.archive-head h2 small { display: inline-block; margin-left: .35em; color: var(--klein); font-family: "Helvetica Neue",Arial,sans-serif; font-size: .28em; font-weight: 400; letter-spacing: -.04em; }
.archive-head > span { color: var(--klein); font-size: 8px; line-height: 1.8; letter-spacing: .12em; text-align: right; }
.archive-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--klein) transparent; }
.archive-item { width: 100%; min-height: 98px; padding: 14px 0; display: grid; grid-template-columns: 46px 148px minmax(260px,1fr) minmax(170px,.45fr) 64px; gap: 24px; align-items: center; color: inherit; border: 0; border-bottom: 1px solid rgba(0,47,167,.16); background: transparent; text-align: left; cursor: pointer; transition: color .35s ease, background .35s ease, padding .45s cubic-bezier(.16,1,.3,1); }
.archive-item:not(:disabled):hover { padding-left: 14px; padding-right: 14px; color: white; background: var(--klein); }
.archive-item:disabled { cursor: default; opacity: .52; }
.archive-no, .archive-type, .archive-action { font-size: 8px; line-height: 1.55; letter-spacing: .1em; text-transform: uppercase; }
.archive-thumb { position: relative; width: 148px; aspect-ratio: 16 / 9; display: block; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg,#dbe5ff,#9db7ff); }
.archive-thumb img { object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.archive-item:hover .archive-thumb img { transform: scale(1.05); }
.archive-thumb i { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; color: white; background: linear-gradient(135deg,#061535,#143b91); font-size: 12px; font-style: normal; text-align: center; }
.archive-item strong { font-family: "Songti SC","STSong",serif; font-size: clamp(30px,3vw,50px); font-weight: 400; line-height: .82; letter-spacing: -.055em; }
.archive-item strong small { display: inline-block; margin-left: .45em; color: var(--klein); font-family: "Helvetica Neue",Arial,sans-serif; font-size: .36em; font-weight: 400; letter-spacing: -.03em; transition: color .35s ease; }
.archive-item:not(:disabled):hover strong small { color: white; }
.archive-action { justify-self: end; }

.info-slide {
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 16%, rgba(0,47,167,.08), transparent 23%),
    linear-gradient(135deg, #fbfbf7, #f1f2f6);
}
.info-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: radial-gradient(var(--klein) .7px, transparent .7px);
  background-size: 12px 12px;
}
.info-index, .info-main, .services-strip { position: relative; z-index: 2; }
.info-index, .info-kicker { color: var(--klein); }
.info-main h2 > span { color: inherit; }
.info-main h2 > span.accent-line { color: var(--klein); }
.motion-marquee {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 26%;
  width: max-content;
  display: flex;
  color: rgba(0,47,167,.045);
  font-size: clamp(110px, 16vw, 280px);
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: .8;
  white-space: nowrap;
  animation: marquee 24s linear infinite;
}
.services-strip { border-color: rgba(0,47,167,.2); }
.services-strip::before { background: radial-gradient(420px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(0,47,167,.15), transparent 62%); }
.services-strip article { overflow: hidden; border-color: rgba(0,47,167,.14); }
.services-strip article::after {
  content: "↗";
  position: absolute;
  right: 18px;
  top: 16px;
  color: var(--klein);
  opacity: 0;
  transform: translate(-8px,8px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.services-strip article:hover { color: white; background: var(--klein); transform: translateY(-8px); }
.services-strip article:hover::after { opacity: 1; color: white; transform: translate(0,0); }
.services-strip article:hover p { color: rgba(255,255,255,.7); }

.contact-slide {
  color: var(--ink);
  background:
    radial-gradient(circle at 76% 37%, rgba(0,47,167,.14), transparent 22%),
    linear-gradient(135deg, #f8f8f3, #e8eaf1 66%, #f7f7f2);
}
.contact-index, .contact-copy > p { color: var(--klein); }
.contact-copy h2 > span { color: inherit; }
.contact-copy h2 > span.accent-line { color: var(--klein); }
.wechat-box { color: var(--ink); border-color: rgba(0,47,167,.2); background: rgba(255,255,255,.52); box-shadow: 0 28px 80px rgba(0,47,167,.1); backdrop-filter: blur(22px) saturate(140%); transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease; }
.slide.is-active .wechat-box:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: 0 38px 100px rgba(0,47,167,.16); }
.qr-placeholder { color: var(--klein); border-color: rgba(0,47,167,.32); }
.wechat-box small { color: rgba(16,17,22,.55); }
.contact-slide footer { color: var(--klein); border-color: rgba(0,47,167,.22); }
.contact-orbit { position: absolute; right: 7vw; top: 10vh; width: min(44vw, 640px); aspect-ratio: 1; pointer-events: none; }
.contact-orbit i { position: absolute; inset: 0; display: block; border: 1px solid rgba(0,47,167,.13); border-radius: 50%; animation: orbit 12s linear infinite; }
.contact-orbit i:nth-child(2) { inset: 14%; animation-duration: 9s; animation-direction: reverse; }
.contact-orbit i:nth-child(3) { inset: 31%; background: var(--klein); box-shadow: 0 30px 100px rgba(0,47,167,.22); animation: breathe-dot 5s ease-in-out infinite; }
.contact-orbit i::after { content: ""; position: absolute; top: 8%; left: 22%; width: 7px; height: 7px; border-radius: 50%; background: var(--klein); }
.contact-orbit i:nth-child(3)::after { display: none; }

.reel-progress { mix-blend-mode: normal; }
.reel-progress span { background: rgba(0,47,167,.18); }
.reel-progress button:hover span, .reel-progress button:focus-visible span, .reel-progress button.active span { background: var(--klein); }
.cursor-lens { color: var(--klein); border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.cursor-lens.is-interactive, .cursor-lens.is-project { background: transparent; box-shadow: none; backdrop-filter: none; }
.cursor-lens.is-project .cursor-label { opacity: 1; transform: translateX(.09em) scale(1); filter: blur(0) drop-shadow(0 0 3px rgba(255,255,255,.82)); }
.cursor-lens::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 30px; height: 30px; border-radius: 50%; opacity: .72; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.66) 0 8%, rgba(0,47,167,.16) 30%, rgba(255,255,255,.12) 48%, transparent 72%); filter: blur(2px); transform: translate(-50%,-50%) scale(1); transition: opacity .32s ease, transform .48s cubic-bezier(.16,1,.3,1); }
.cursor-lens.is-project::after { opacity: .36; transform: translate(-50%,-50%) scale(1.55); }
.pointer-aura { display: none; }

.drawer-backdrop {
  position: fixed;
  z-index: 110;
  inset: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: rgba(12,14,22,.34);
  backdrop-filter: blur(0);
  pointer-events: none;
  transition: opacity .55s ease, backdrop-filter .55s ease;
}
.drawer-backdrop.is-open { opacity: 1; backdrop-filter: blur(10px); pointer-events: auto; }
.project-drawer {
  position: fixed;
  z-index: 120;
  inset: 3vh 0 0;
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain;
  color: var(--ink);
  background: var(--paper);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -30px 100px rgba(6,13,38,.16);
  transform: translate3d(0,102%,0) scale(.985);
  transform-origin: center bottom;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
  scrollbar-width: thin;
  scrollbar-color: var(--klein) transparent;
}
.project-drawer.is-open { transform: translate3d(0,0,0) scale(1); }
.drawer-toolbar {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 74px;
  padding: 22px 2.4vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: white;
  mix-blend-mode: difference;
  pointer-events: none;
  font-size: 9px;
  letter-spacing: .12em;
}
.drawer-toolbar button { padding: 0; border: 0; color: inherit; background: none; pointer-events: auto; text-transform: uppercase; }
.drawer-toolbar button b { display: inline-block; margin-left: 8px; font-size: 17px; font-weight: 300; transition: transform .35s ease; }
.drawer-toolbar button:hover b { transform: rotate(90deg); }
.drawer-video {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 62svh;
  overflow: hidden;
  background: rgba(245,248,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.58);
  backdrop-filter: blur(46px) saturate(1.55) contrast(1.04);
  -webkit-backdrop-filter: blur(46px) saturate(1.55) contrast(1.04);
  box-shadow:
    0 22px 70px rgba(4,8,18,.13),
    inset 0 1px 0 rgba(255,255,255,.84),
    inset 0 -1px 0 rgba(0,47,167,.1),
    inset 18px 0 38px rgba(255,255,255,.12),
    inset -18px 0 38px rgba(95,132,255,.08);
  transition: height .85s cubic-bezier(.16,1,.3,1);
}
.drawer-video::before {
  content: "";
  position: absolute;
  inset: 0;
  inset: -18%;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255,255,255,.56) 0 8%, transparent 36%),
    radial-gradient(ellipse at 78% 68%, rgba(92,135,255,.18), transparent 42%),
    radial-gradient(ellipse at 48% 110%, rgba(191,230,255,.2), transparent 46%),
    conic-gradient(from 120deg at 50% 50%, rgba(255,255,255,.1), rgba(105,144,255,.08), rgba(255,255,255,.22), rgba(255,255,255,.1));
  filter: blur(18px);
  transform: translate3d(0,0,0) scale(1.04);
  animation: liquid-glass-shift 11s ease-in-out infinite alternate;
  pointer-events: none;
}
.drawer-video::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -50%;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.72'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grain .26s steps(2) infinite;
}
.project-drawer.is-video-collapsed .drawer-video { height: 34svh; }
.drawer-video video { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; }
.drawer-video > span { position: absolute; right: 2.4vw; bottom: 24px; color: white; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; transition: opacity .3s ease; }
.project-drawer.is-video-collapsed .drawer-video > span { opacity: 0; }
.drawer-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding-top: 62svh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--paper);
  scrollbar-width: thin;
  scrollbar-color: var(--klein) transparent;
  transition: padding-top .85s cubic-bezier(.16,1,.3,1);
}
.project-drawer.is-video-collapsed .drawer-content { padding-top: 34svh; }
.drawer-intro { padding: clamp(86px,10vw,160px) 2.4vw; display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; border-bottom: 1px solid rgba(0,47,167,.15); }
.drawer-intro > div:first-child > p, .drawer-section-no { margin-bottom: 34px; color: var(--klein); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.drawer-intro h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: clamp(74px,10vw,168px); font-weight: 400; line-height: .8; letter-spacing: -.07em; }
.drawer-intro h2 small { display: block; margin-top: 22px; color: var(--klein); font-family: "Helvetica Neue",Arial,sans-serif; font-size: .34em; font-weight: 400; letter-spacing: -.05em; }
.drawer-lead { align-self: end; }
.drawer-lead > p { max-width: 520px; font-family: "Songti SC","STSong",serif; font-size: 17px; line-height: 1.9; }
.drawer-lead dl { margin: 52px 0 0; border-top: 1px solid rgba(16,17,22,.2); }
.drawer-lead dl > div { padding: 13px 0; display: grid; grid-template-columns: 1fr 1.5fr; border-bottom: 1px solid rgba(16,17,22,.14); font-size: 10px; letter-spacing: .07em; }
.drawer-lead dt { color: var(--klein); text-transform: uppercase; }
.drawer-lead dd { margin: 0; }
.drawer-story { padding: clamp(90px,11vw,180px) 2.4vw; display: grid; grid-template-columns: .38fr 1.12fr .75fr; gap: 4vw; background: linear-gradient(135deg,#fbfbf7,#eef0f6); }
.drawer-story h3 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: clamp(50px,6vw,105px); font-weight: 400; line-height: 1.07; letter-spacing: -.06em; }
.drawer-story > div { align-self: end; display: grid; gap: 22px; color: var(--soft-ink); font-size: 13px; line-height: 1.9; }
.drawer-direction { display: grid; grid-template-columns: 1.1fr repeat(3,1fr); border-top: 1px solid rgba(0,47,167,.16); border-bottom: 1px solid rgba(0,47,167,.16); }
.drawer-direction > span, .drawer-direction > div { min-height: 220px; padding: 28px 2.4vw; border-right: 1px solid rgba(0,47,167,.14); }
.drawer-direction > span { color: var(--klein); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.drawer-direction > div { display: flex; flex-direction: column; justify-content: space-between; transition: color .4s ease, background .4s ease; }
.drawer-direction > div:hover { color: white; background: var(--klein); }
.drawer-direction b { color: var(--klein); font-size: 10px; font-weight: 400; transition: color .4s ease; }
.drawer-direction > div:hover b { color: white; }
.drawer-direction p { font-size: clamp(17px,1.4vw,24px); }
.drawer-concept { padding: clamp(96px,12vw,190px) 2.4vw; display: grid; grid-template-columns: 1.05fr .82fr; gap: 8vw; border-bottom: 1px solid rgba(64,38,27,.16); background: #eee6da; color: #211712; }
.drawer-concept:nth-of-type(even) { background: #1c1512; color: #f2e9dc; }
.drawer-concept-heading { align-self: start; }
.drawer-concept-heading > span { display: block; margin-bottom: clamp(42px,6vw,90px); color: #7b3d30; font-size: 9px; letter-spacing: .15em; }
.drawer-concept:nth-of-type(even) .drawer-concept-heading > span { color: #d69f85; }
.drawer-concept h3 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: clamp(52px,6.2vw,108px); font-weight: 400; line-height: 1.05; letter-spacing: -.065em; }
.drawer-concept h3 span { display: block; }
.drawer-concept-copy { align-self: end; display: grid; gap: 22px; font-size: 13px; line-height: 1.95; }
.drawer-concept-copy > p { max-width: 610px; }
.drawer-concept-copy ul { margin: 34px 0 0; padding: 0; border-top: 1px solid currentColor; list-style: none; opacity: .85; }
.drawer-concept-copy li { padding: 15px 0; display: grid; grid-template-columns: 42px 1fr; border-bottom: 1px solid currentColor; }
.drawer-concept-copy li b { font-size: 9px; font-weight: 400; letter-spacing: .12em; }
.drawer-gallery { padding: clamp(90px,10vw,160px) 2.4vw; background: #f4f1e9; }
.drawer-gallery-head { margin-bottom: clamp(62px,8vw,120px); display: grid; grid-template-columns: 1fr 1.5fr; gap: 5vw; color: var(--klein); }
.drawer-gallery-head > span { font-size: 9px; letter-spacing: .14em; }
.drawer-gallery-head p { max-width: 760px; font-family: "Songti SC","STSong",serif; font-size: clamp(44px,5.6vw,96px); line-height: 1.08; letter-spacing: -.06em; }
.drawer-gallery-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: clamp(18px,2.4vw,42px); align-items: start; }
.drawer-gallery-grid figure { margin: 0; }
.drawer-gallery-grid figure.wide { grid-column: span 12; }
.drawer-gallery-grid figure.portrait { grid-column: span 5; }
.drawer-gallery-grid figure.portrait:nth-of-type(3n) { grid-column-start: 8; }
.drawer-gallery-grid figure.portrait:nth-of-type(3n + 1) { margin-top: 12vw; }
.drawer-gallery-grid img { width: 100%; height: auto; display: block; background: #dedbd2; transition: transform 1s cubic-bezier(.16,1,.3,1), filter .7s ease; }
.drawer-gallery-grid figure { overflow: hidden; }
.drawer-gallery-grid figure:hover img { transform: scale(1.018); filter: saturate(1.05); }
.drawer-gallery-grid figcaption { padding-top: 10px; color: var(--soft-ink); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.drawer-gallery.is-editorial { padding-left: 0; padding-right: 0; background: #ece8df; }
.drawer-gallery.is-editorial .drawer-gallery-head { padding: 0 2.4vw; border-bottom: 1px solid rgba(0,47,167,.18); padding-bottom: clamp(48px,6vw,84px); }
.drawer-gallery.is-editorial .drawer-gallery-grid { padding: 0 2.4vw; gap: clamp(52px,8vw,132px) clamp(22px,3vw,52px); }
.drawer-gallery.is-editorial .drawer-gallery-grid figure { position: relative; overflow: visible; }
.drawer-gallery.is-editorial .drawer-gallery-grid figure:nth-of-type(1) { grid-column: 2 / span 10; margin: 0; }
.drawer-gallery.is-editorial .drawer-gallery-grid figure:nth-of-type(2) { grid-column: 2 / span 5; margin: 0; }
.drawer-gallery.is-editorial .drawer-gallery-grid figure:nth-of-type(3) { grid-column: 8 / span 4; margin: 12vw 0 0; }
.drawer-gallery.is-editorial .drawer-gallery-grid img { aspect-ratio: 2 / 3; object-fit: cover; }
.drawer-gallery.is-editorial .drawer-gallery-grid figcaption { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; padding: 0; display: flex; color: #fff; mix-blend-mode: difference; font-size: 8px; line-height: 1.45; letter-spacing: .13em; }
.drawer-gallery.is-editorial .drawer-gallery-grid figure::before { content: "BLULUE / STILL"; position: absolute; z-index: 2; top: 14px; left: 14px; color: #fff; mix-blend-mode: difference; font-size: 7px; letter-spacing: .16em; }
.drawer-gallery.is-daybreak-editorial { background: #e9e6de; }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid { gap: clamp(58px,9vw,148px) clamp(22px,3vw,52px); }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure.wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure.portrait img { aspect-ratio: 2 / 3; object-fit: cover; }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure:nth-of-type(1) { grid-column: 2 / span 10; margin: 0; }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure:nth-of-type(2) { grid-column: 2 / span 4; margin: 0; }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure:nth-of-type(3) { grid-column: 8 / span 4; margin: 14vw 0 0; }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure:nth-of-type(4) { grid-column: 2 / span 10; margin: 0; }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure:nth-of-type(5) { grid-column: 2 / span 4; margin: 0; }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure:nth-of-type(6) { grid-column: 8 / span 4; margin: 11vw 0 0; }
.drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure:nth-of-type(7) { grid-column: 2 / span 10; margin: 0; }
@supports (animation-timeline: view()) {
  .drawer-concept-heading, .drawer-concept-copy, .drawer-gallery-grid figure { animation: drawer-rise both linear; animation-timeline: view(); animation-range: entry 8% cover 34%; }
}
@keyframes drawer-rise { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: translateY(0); } }
.drawer-footer { min-height: 54svh; padding: 40px 2.4vw; display: flex; flex-direction: column; justify-content: space-between; color: white; background: var(--klein); }
.drawer-footer p { font-size: 10px; letter-spacing: .13em; }
.drawer-footer button { display: flex; justify-content: space-between; align-items: flex-end; padding: 0; border: 0; color: white; background: none; font-family: "Songti SC","STSong",serif; font-size: clamp(56px,9vw,148px); text-align: left; }
.drawer-footer button span { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.drawer-footer button:hover span { transform: translateY(-14px); }
.project-drawer ~ .cursor-lens { z-index: 200; }

.work-page { color: var(--ink); background: var(--paper); }
.work-intro h1 em, .work-kicker, .work-index { color: var(--klein); }
.work-next a:hover { background: var(--klein); }

@keyframes signal { 0%,100% { transform: scaleX(.3); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes breathe-dot { 0%,100% { transform: scale(.88); } 50% { transform: scale(1.08); } }
@keyframes liquid-glass-shift {
  0% { transform: translate3d(-2.5%,-1.5%,0) scale(1.04) rotate(-1deg); }
  50% { transform: translate3d(2%,1%,0) scale(1.09) rotate(1.2deg); }
  100% { transform: translate3d(-1%,2%,0) scale(1.06) rotate(-.5deg); }
}

@keyframes breathe { 0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(.98); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.03); } }
@keyframes drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-4vw,3vh,0) scale(1.06); } }
@keyframes drift-b { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(3vw,-4vh,0); } }
@keyframes pulse { 0%,100% { transform: scale(.88); opacity: .65; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes liquid { 0%,100% { border-radius: 42% 58% 64% 36% / 35% 40% 60% 65%; transform: rotate(0deg); } 50% { border-radius: 63% 37% 38% 62% / 57% 58% 42% 43%; transform: rotate(11deg); } }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(3%,-2%); } 50% { transform: translate(-2%,3%); } 75% { transform: translate(2%,2%); } 100% { transform: translate(-3%,-3%); } }

.work-page { min-height: 100svh; overflow: auto; color: #0b1718; background: #f2f1ed; }
.work-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  padding: 22px 2.4vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  color: white;
  mix-blend-mode: difference;
}
.work-header > p { display: flex; gap: 8px; font-size: 10px; letter-spacing: .05em; }
.work-close { justify-self: end; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.work-hero { position: relative; height: 100svh; min-height: 620px; padding: 0; background: #080808; }
.work-hero video { width: 100%; height: 100%; display: block; object-fit: contain; background: #050505; }
.work-index { position: absolute; left: 2.4vw; bottom: 24px; color: white; font-size: 9px; letter-spacing: .14em; }
.work-intro { padding: clamp(72px, 10vw, 160px) 2.4vw; display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; }
.work-kicker { margin-bottom: 36px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.work-intro h1 { font-family: "Songti SC", "STSong", serif; font-size: clamp(64px, 9vw, 150px); font-weight: 400; line-height: .88; letter-spacing: -.07em; }
.work-intro h1 em { display: block; margin-top: 18px; font-family: "Helvetica Neue", Arial, sans-serif; font-size: .42em; font-style: normal; letter-spacing: -.05em; }
.work-description { align-self: end; padding-bottom: 8px; }
.work-description > p { max-width: 560px; font-family: "Songti SC", "STSong", serif; font-size: 16px; line-height: 1.9; }
.work-description dl { margin: 56px 0 0; border-top: 1px solid rgba(11,23,24,.25); }
.work-description dl > div { padding: 13px 0; display: grid; grid-template-columns: 1fr 1.5fr; border-bottom: 1px solid rgba(11,23,24,.18); font-size: 10px; letter-spacing: .08em; }
.work-description dt { opacity: .5; text-transform: uppercase; }
.work-description dd { margin: 0; }
.work-next { border-top: 1px solid rgba(11,23,24,.18); }
.work-next a { min-height: 42svh; padding: 42px 2.4vw; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; transition: color .35s ease, background .35s ease; }
.work-next a:hover { color: white; background: var(--deep); }
.work-next span { grid-column: 1 / -1; align-self: start; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.work-next strong { font-family: "Songti SC", "STSong", serif; font-size: clamp(72px, 12vw, 190px); font-weight: 400; line-height: .8; letter-spacing: -.08em; }
.work-next i { font-size: clamp(56px, 8vw, 120px); font-style: normal; font-weight: 200; line-height: .7; }

@media (max-width: 860px) {
  .site-header { height: 68px; padding: 18px 18px 0; grid-template-columns: 1fr auto; }
  .studio-note { display: none; }
  .site-header nav { gap: 16px; }
  .slide { min-height: 640px; }
  .slide-tag { top: 84px; left: 18px; right: 18px; }
  .project-caption { left: 18px; right: 18px; bottom: 48px; grid-template-columns: 1fr; gap: 22px; }
  .project-title-row { flex-wrap: wrap; gap: 12px 18px; }
  .project-heading { align-items: flex-start; gap: 12px; }
  .project-heading h1 > span { font-size: clamp(56px, 17vw, 92px); }
  .project-en-accent { margin-left: clamp(30px,9vw,54px); font-size: clamp(22px, 7vw, 36px); }
  .project-meta { grid-template-columns: 1fr; gap: 8px; }
  .project-meta p:last-child { max-width: 290px; }
  .scroll-hint { display: none; }
  .visual-word { font-size: 28vw; }
  .orb-one { width: 76vw; }
  .orb-two { width: 54vw; }
  .archive-slide { padding: 0 18px; }
  .archive-head { min-height: 28svh; padding: 86px 0 26px; grid-template-columns: 1fr; }
  .archive-head h2 { font-size: clamp(54px,16vw,82px); }
  .archive-head h2 small { display: block; margin: 14px 0 0; font-size: .3em; }
  .archive-head > span { display: none; }
  .archive-item { min-height: 112px; grid-template-columns: 28px 94px minmax(0,1fr) 36px; gap: 12px; }
  .archive-thumb { width: 94px; }
  .archive-item strong { font-size: clamp(28px,8vw,42px); }
  .archive-item strong small { display: block; margin: 8px 0 0; font-size: .38em; }
  .archive-type { display: none; }
  .info-slide, .contact-slide { padding: 84px 18px 46px; }
  .info-main { grid-template-columns: 1fr; align-content: center; }
  .info-main h2 { font-size: clamp(46px, 13.5vw, 82px); }
  .info-copy { grid-column: 1; margin-top: 24px; grid-template-columns: 1fr; gap: 12px; }
  .services-strip { grid-template-columns: 1fr; }
  .services-strip article { padding: 11px 0; grid-template-columns: 30px 1fr; border-right: 0; border-bottom: 1px solid rgba(3,39,53,.16); }
  .services-strip article + article { padding-left: 0; }
  .services-strip article:last-child { border-bottom: 0; }
  .services-strip p { display: none; }
  .contact-copy { left: 18px; right: 18px; top: 42%; }
  .contact-copy h2 { font-size: clamp(54px, 16vw, 96px); }
  .wechat-box { left: 18px; right: 18px; bottom: 82px; width: auto; grid-template-columns: 76px 1fr; }
  .contact-slide footer { left: 18px; right: 18px; bottom: 23px; grid-template-columns: 1fr 1fr; }
  .contact-slide footer span:nth-child(2) { display: none; }
  .reel-progress { left: 18px; right: 18px; }
  .work-header { padding: 18px; grid-template-columns: 1fr 1fr; }
  .work-header > p { display: none; }
  .work-hero { min-height: 540px; }
  .work-index { left: 18px; bottom: 18px; }
  .work-intro { padding: 76px 18px; grid-template-columns: 1fr; gap: 58px; }
  .work-intro h1 { font-size: clamp(62px, 18vw, 104px); }
  .work-description { max-width: 580px; }
  .work-next a { min-height: 34svh; padding: 32px 18px; }
  .motion-marquee { top: 31%; font-size: 34vw; }
  .contact-orbit { right: -28vw; top: 10vh; width: 100vw; opacity: .7; }
  .pointer-aura { display: none; }
  .kinetic-title { font-size: clamp(64px, 21vw, 112px); }
  .project-drawer { top: 1.5vh; border-radius: 20px 20px 0 0; }
  .drawer-toolbar { padding: 18px; }
  .drawer-video { height: 52svh; }
  .project-drawer.is-video-collapsed .drawer-video { height: 30svh; }
  .drawer-content { padding-top: 52svh; }
  .project-drawer.is-video-collapsed .drawer-content { padding-top: 30svh; }
  .drawer-video > span { right: 18px; bottom: 18px; }
  .drawer-intro { padding: 76px 18px; grid-template-columns: 1fr; gap: 58px; }
  .drawer-intro h2 { font-size: clamp(70px,21vw,112px); }
  .drawer-story { padding: 80px 18px; grid-template-columns: 1fr; gap: 36px; }
  .drawer-story h3 { font-size: clamp(48px,14vw,80px); }
  .drawer-direction { grid-template-columns: 1fr; }
  .drawer-direction > span, .drawer-direction > div { min-height: 120px; padding: 20px 18px; border-right: 0; border-bottom: 1px solid rgba(0,47,167,.14); }
  .drawer-concept { padding: 82px 18px; grid-template-columns: 1fr; gap: 52px; }
  .drawer-concept-heading > span { margin-bottom: 34px; }
  .drawer-concept h3 { font-size: clamp(48px,14vw,76px); }
  .drawer-gallery { padding: 78px 18px; }
  .drawer-gallery-head { grid-template-columns: 1fr; gap: 28px; }
  .drawer-gallery-head p { font-size: clamp(44px,13vw,72px); }
  .drawer-gallery-grid { grid-template-columns: 1fr; gap: 36px; }
  .drawer-gallery-grid figure.wide, .drawer-gallery-grid figure.portrait, .drawer-gallery-grid figure.portrait:nth-of-type(3n) { grid-column: 1; }
  .drawer-gallery-grid figure.portrait:nth-of-type(3n + 1) { margin-top: 0; }
  .drawer-gallery.is-editorial { padding-left: 0; padding-right: 0; }
  .drawer-gallery.is-editorial .drawer-gallery-head { padding-left: 18px; padding-right: 18px; }
  .drawer-gallery.is-editorial .drawer-gallery-grid { padding: 0 18px; gap: 42px; }
  .drawer-gallery.is-editorial .drawer-gallery-grid figure:nth-of-type(1),
  .drawer-gallery.is-editorial .drawer-gallery-grid figure:nth-of-type(2),
  .drawer-gallery.is-editorial .drawer-gallery-grid figure:nth-of-type(3) { grid-column: 1; margin: 0; }
  .drawer-gallery.is-daybreak-editorial .drawer-gallery-grid figure:nth-of-type(n) { grid-column: 1; margin: 0; }
  .drawer-footer { padding: 30px 18px; }
}

@media (pointer: fine) {
  .site-shell, .site-shell a, .site-shell button { cursor: none; }
}

@media (pointer: coarse) {
  .cursor-lens { display: none; }
  .project-slide .visual, .project-slide.is-active .visual { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cursor-lens { display: none; }
  .pointer-aura { display: none; }
  .project-heading, .project-en-accent, .project-meta, .slide-tag, .scroll-hint,
  .info-main > *, .services-strip, .contact-copy > *, .wechat-box { opacity: 1; filter: none; transform: none; }
  .slide.is-active .scroll-hint { transform: rotate(90deg) translateX(50%); }
  .project-drawer { transition-duration: .01ms !important; }
}

@media (max-height: 700px) and (min-width: 861px) {
  .site-header { height: 66px; padding-top: 16px; }
  .slide-tag { top: 78px; }
  .project-caption { bottom: 44px; }
  .info-slide, .contact-slide { padding-top: 78px; }
  .info-main h2 { font-size: clamp(50px, 7vw, 98px); }
  .info-copy { margin-top: 22px; }
  .wechat-box { bottom: 72px; }
}

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

body .work-page { color: var(--ink); background: var(--paper); }
.work-page .work-kicker, .work-page .work-index, .work-page .work-intro h1 em { color: var(--klein); }
.work-page .work-next a:hover { color: white; background: var(--klein); }

.works-directory {
  height: 100svh;
  overflow-y: auto;
  color: var(--ink);
  background: #f4f5f8;
  scrollbar-width: thin;
  scrollbar-color: var(--klein) transparent;
}
.directory-header {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 76px;
  padding: 22px 2.4vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  border-bottom: 1px solid rgba(0,47,167,.14);
  background: rgba(244,245,248,.76);
  backdrop-filter: blur(18px) saturate(140%);
}
.directory-header > p, .directory-header-actions > a { font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.directory-header-actions { justify-self: end; display: flex; align-items: center; gap: 16px; }
.directory-header-actions .language-switcher { color: var(--klein); border-color: rgba(0,47,167,.32); }
.directory-logo { width: max-content; display: grid; grid-template-columns: auto 18px auto; align-items: center; font-size: 16px; font-weight: 600; letter-spacing: -.06em; }
.directory-logo i { height: 1px; background: var(--klein); transform: scaleX(.72); }
.directory-intro { min-height: 44svh; padding: clamp(90px,9vw,142px) 2.4vw 48px; display: grid; grid-template-columns: 1fr auto; align-content: end; border-bottom: 1px solid rgba(0,47,167,.14); }
.directory-intro > p { grid-column: 1 / -1; margin-bottom: 34px; color: var(--klein); font-size: 9px; letter-spacing: .14em; }
.directory-intro h1 { font-family: "Songti SC","STSong",serif; font-size: clamp(78px,13vw,210px); font-weight: 400; line-height: .72; letter-spacing: -.085em; }
.directory-intro h1 small { display: block; margin-top: 28px; color: var(--klein); font-family: "Helvetica Neue",Arial,sans-serif; font-size: .22em; font-weight: 400; letter-spacing: -.04em; }
.directory-intro > span { align-self: end; color: var(--klein); font-size: 9px; letter-spacing: .13em; }
.directory-controls { position: relative; padding: 28px 2.4vw 34px; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.42fr); gap: 30px 4vw; border-bottom: 1px solid rgba(0,47,167,.14); }
.directory-filter-block, .directory-search { display: grid; gap: 13px; }
.directory-filter-block > span, .directory-search > span { color: var(--klein); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.directory-tabs { display: flex; gap: 8px; }
.directory-tabs button, .directory-type-chips button { padding: 9px 14px; color: rgba(5,15,35,.58); border: 1px solid rgba(0,47,167,.16); border-radius: 999px; background: transparent; cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease; }
.directory-tabs button { min-width: 88px; display: flex; justify-content: space-between; gap: 18px; font-size: 12px; }
.directory-tabs button small { color: var(--klein); font-size: 8px; }
.directory-tabs button.is-active, .directory-type-chips button.is-active { color: white; border-color: var(--klein); background: var(--klein); }
.directory-tabs button.is-active small { color: white; }
.directory-search { align-self: start; }
.directory-search > div { height: 42px; padding: 0 12px 0 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border: 1px solid rgba(0,47,167,.2); border-radius: 999px; background: rgba(255,255,255,.44); }
.directory-search input { min-width: 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 11px; }
.directory-search input::placeholder { color: rgba(5,15,35,.38); }
.directory-search b { color: var(--klein); font-size: 18px; font-weight: 400; line-height: 1; }
.directory-type-filter { grid-column: 1 / -1; }
.directory-type-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.directory-type-chips button { padding: 7px 12px; font-size: 9px; letter-spacing: .05em; }
.directory-type-chips button:disabled { opacity: .3; cursor: default; }
.directory-grid { padding: 3.2vw 2.4vw 6vw; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(46px,6vw,98px) 2.4vw; }
.directory-card { min-width: 0; display: block; }
button.directory-card { width: 100%; padding: 0; color: inherit; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.directory-project-drawer { text-align: left; }
.directory-visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: #e4e8f2; }
.directory-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 52%,rgba(5,10,24,.28)); opacity: .55; transition: opacity .35s ease; }
.directory-visual img { object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1), filter .45s ease; }
.directory-visual > span { position: absolute; z-index: 3; right: 18px; bottom: 16px; padding: 8px 11px; color: white; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; font-size: 8px; letter-spacing: .12em; background: rgba(4,12,28,.12); backdrop-filter: blur(12px); }
.directory-card .directory-visual > b { position: absolute; z-index: 3; left: 18px; top: 16px; max-width: none; padding: 7px 10px; transform: none; color: white; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(4,12,28,.12); backdrop-filter: blur(12px); font-size: 8px; font-weight: 400; line-height: 1; letter-spacing: .12em; }
.directory-card:hover .directory-visual img { transform: scale(1.025); filter: saturate(1.06); }
.directory-card:hover .directory-visual::after { opacity: .25; }
.directory-meta { padding-top: 16px; display: grid; grid-template-columns: 42px minmax(0,1fr) minmax(220px,.58fr); gap: 18px; align-items: start; border-top: 1px solid rgba(0,47,167,.16); }
.directory-meta > span { color: var(--klein); font-size: 9px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.directory-meta h2 { font-family: "Songti SC","STSong",serif; font-size: clamp(32px,4vw,64px); font-weight: 400; line-height: .9; letter-spacing: -.06em; }
.directory-meta h2 small { display: block; margin-top: 10px; font-family: "Helvetica Neue",Arial,sans-serif; font-size: .34em; font-weight: 400; letter-spacing: -.035em; }
.directory-meta dl { margin: 0; display: grid; gap: 7px; }
.directory-meta dl div { display: grid; grid-template-columns: 44px 1fr; gap: 10px; font-size: 9px; line-height: 1.45; }
.directory-meta dt { color: rgba(5,15,35,.38); }
.directory-meta dd { margin: 0; color: var(--klein); }
.directory-tides .directory-visual { background: radial-gradient(circle at 70% 34%,rgba(255,255,255,.9),transparent 8%),linear-gradient(135deg,#dbe5ff,#f7f6f1 48%,#9db7ff); }
.directory-deep-sea .directory-visual { color: rgba(255,255,255,.62); background: radial-gradient(circle at 68% 42%,rgba(69,112,232,.52),transparent 19%),linear-gradient(135deg,#061535,#143b91,#02091c); }
.directory-visual > b { position: absolute; left: 50%; top: 50%; max-width: 90%; transform: translate(-50%,-50%); font-size: clamp(38px,6vw,96px); font-weight: 400; line-height: .82; letter-spacing: -.075em; white-space: nowrap; }
.directory-visual > i { position: absolute; width: 34%; aspect-ratio: 1; right: 8%; top: 12%; border: 1px solid rgba(0,47,167,.22); border-radius: 50%; box-shadow: inset 20px 20px 60px rgba(255,255,255,.45); }
.directory-card.is-upcoming { opacity: .72; }
.directory-empty { min-height: 52svh; padding: 8vw 2.4vw; display: grid; align-content: center; justify-items: start; border-bottom: 1px solid rgba(0,47,167,.14); }
.directory-empty > span { margin-bottom: 32px; color: var(--klein); font-size: 8px; letter-spacing: .13em; }
.directory-empty h2 { max-width: 900px; font-family: "Songti SC","STSong",serif; font-size: clamp(42px,6vw,92px); font-weight: 400; line-height: 1; letter-spacing: -.06em; }
.directory-empty p { max-width: 520px; margin-top: 22px; color: rgba(5,15,35,.54); font-size: 12px; line-height: 1.7; }
.directory-empty button { margin-top: 34px; padding: 10px 15px; color: white; border: 0; border-radius: 999px; background: var(--klein); cursor: pointer; font-size: 9px; letter-spacing: .08em; }
.directory-footer { min-height: 30svh; padding: 36px 2.4vw; display: flex; justify-content: space-between; align-items: flex-end; color: white; background: var(--klein); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.icp-link { color: inherit; opacity: .72; text-decoration: none; transition: opacity .25s ease; }
.icp-link:hover { opacity: 1; }
.legal-footer { padding: 22px 2.4vw; display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(11,23,24,.18); color: var(--soft-ink); font-size: 10px; letter-spacing: .08em; }

@media (max-width: 760px) {
  .directory-header { height: 66px; padding: 18px; grid-template-columns: 1fr auto; }
  .directory-header > p { display: none; }
  .directory-header-actions { gap: 8px; }
  .directory-header-actions .language-switcher button { min-width: 25px; padding: 0 4px; }
  .directory-intro { min-height: 46svh; padding: 100px 18px 42px; grid-template-columns: 1fr; }
  .directory-intro h1 { font-size: clamp(74px,23vw,122px); }
  .directory-intro > span { margin-top: 34px; }
  .directory-controls { padding: 24px 18px 30px; grid-template-columns: 1fr; gap: 28px; }
  .directory-search { grid-row: 1; }
  .directory-type-filter { grid-column: 1; }
  .directory-tabs { display: grid; grid-template-columns: repeat(3,1fr); }
  .directory-tabs button { min-width: 0; padding: 9px 11px; }
  .directory-grid { padding: 28px 18px 60px; grid-template-columns: 1fr; gap: 54px; }
  .directory-visual { border-radius: 12px; }
  .directory-meta { grid-template-columns: 32px 1fr; }
  .directory-meta dl { grid-column: 2; margin-top: 4px; }
  .directory-meta h2 { font-size: clamp(42px,13vw,66px); }
  .directory-empty { min-height: 50svh; padding: 76px 18px; }
  .directory-footer { padding: 28px 18px; }
  .directory-footer { flex-wrap: wrap; gap: 18px; }
  .legal-footer { padding: 20px 18px; flex-wrap: wrap; }
}

/* Language-aware editorial rhythm */
html[lang="en"] body, html[lang="fr"] body { font-family: "Helvetica Neue", Arial, sans-serif; }
html[lang="en"] .kinetic-title, html[lang="fr"] .kinetic-title,
html[lang="en"] .info-main h2, html[lang="fr"] .info-main h2,
html[lang="en"] .contact-copy h2, html[lang="fr"] .contact-copy h2,
html[lang="en"] .drawer-intro h2, html[lang="fr"] .drawer-intro h2,
html[lang="en"] .drawer-story h3, html[lang="fr"] .drawer-story h3,
html[lang="en"] .directory-intro h1, html[lang="fr"] .directory-intro h1,
html[lang="en"] .directory-meta h2, html[lang="fr"] .directory-meta h2,
html[lang="en"] .drawer-footer button, html[lang="fr"] .drawer-footer button {
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
html[lang="en"] .kinetic-title, html[lang="fr"] .kinetic-title {
  font-size: clamp(48px,5vw,88px);
  line-height: .92;
  letter-spacing: -.065em;
}
html[lang="fr"] .kinetic-title { font-size: clamp(44px,4.5vw,80px); }
html[lang="en"] .project-en-accent { display: none; }
html[lang="fr"] .project-en-accent { max-width: 190px; font-size: clamp(17px,1.7vw,28px); line-height: .94; }
html[lang="en"] .project-caption, html[lang="fr"] .project-caption { grid-template-columns: minmax(0,1fr) minmax(250px,.42fr); gap: 3vw; }
html[lang="en"] .project-title-row, html[lang="fr"] .project-title-row { min-width: 0; }
html[lang="en"] .project-heading, html[lang="fr"] .project-heading { min-width: 0; }
html[lang="en"] .project-meta p:last-child, html[lang="fr"] .project-meta p:last-child { max-width: 430px; font-family: "Helvetica Neue",Arial,sans-serif; font-size: 12px; line-height: 1.58; }
html[lang="en"] .info-main h2 { max-width: 900px; font-size: clamp(50px,6vw,104px); line-height: .98; letter-spacing: -.06em; }
html[lang="fr"] .info-main h2 { max-width: 980px; font-size: clamp(46px,5.35vw,94px); line-height: 1.01; letter-spacing: -.055em; }
html[lang="en"] .contact-copy h2 { max-width: 980px; font-size: clamp(52px,6.2vw,108px); line-height: .98; }
html[lang="fr"] .contact-copy h2 { max-width: 1050px; font-size: clamp(46px,5.4vw,96px); line-height: 1; }
html[lang="en"] .info-copy, html[lang="fr"] .info-copy { max-width: 980px; font-size: 11px; line-height: 1.72; }
html[lang="en"] .directory-intro h1 { font-size: clamp(70px,9vw,150px); line-height: .82; letter-spacing: -.075em; }
html[lang="fr"] .directory-intro h1 { font-size: clamp(62px,8vw,136px); line-height: .86; letter-spacing: -.065em; }
html[lang="en"] .directory-intro h1 small, html[lang="fr"] .directory-intro h1 small { margin-top: 22px; font-size: .2em; line-height: 1.1; letter-spacing: -.025em; }
html[lang="en"] .directory-meta h2, html[lang="fr"] .directory-meta h2 { font-size: clamp(28px,3.1vw,50px); line-height: .96; letter-spacing: -.05em; }
html[lang="en"] .drawer-intro h2 { font-size: clamp(62px,7vw,118px); line-height: .88; letter-spacing: -.065em; }
html[lang="fr"] .drawer-intro h2 { font-size: clamp(54px,6.1vw,104px); line-height: .93; letter-spacing: -.055em; }
html[lang="en"] .drawer-story h3 { font-size: clamp(44px,4.8vw,82px); line-height: 1.02; }
html[lang="fr"] .drawer-story h3 { font-size: clamp(40px,4.25vw,74px); line-height: 1.06; }
html[lang="en"] .drawer-lead > p, html[lang="fr"] .drawer-lead > p { font-family: "Helvetica Neue",Arial,sans-serif; font-size: 15px; line-height: 1.72; }
html[lang="en"] .drawer-footer button { font-size: clamp(48px,6vw,104px); line-height: .95; }
html[lang="fr"] .drawer-footer button { font-size: clamp(42px,5.2vw,92px); line-height: 1; }

html[lang="ja"] body { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; }
html[lang="ja"] .kinetic-title, html[lang="ja"] .info-main h2, html[lang="ja"] .contact-copy h2,
html[lang="ja"] .drawer-intro h2, html[lang="ja"] .drawer-story h3, html[lang="ja"] .directory-intro h1,
html[lang="ja"] .directory-meta h2, html[lang="ja"] .drawer-footer button {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}
html[lang="ja"] .kinetic-title { font-size: clamp(60px,8.8vw,154px); letter-spacing: -.075em; }
html[lang="ja"] .project-meta p:last-child { font-family: "Hiragino Mincho ProN","Yu Mincho",serif; line-height: 1.75; }
html[lang="ja"] .info-main h2 { font-size: clamp(52px,6.9vw,116px); line-height: 1.12; letter-spacing: -.075em; }
html[lang="ja"] .contact-copy h2 { font-size: clamp(54px,7.3vw,124px); line-height: 1.08; letter-spacing: -.075em; }
html[lang="ja"] .directory-intro h1 { font-size: clamp(72px,11vw,176px); line-height: .82; }
html[lang="ja"] .drawer-intro h2 { font-size: clamp(68px,8.5vw,142px); line-height: .9; }
html[lang="ja"] .drawer-story h3 { font-size: clamp(46px,5.5vw,92px); line-height: 1.15; }

@media (max-width: 860px) {
  html[lang="en"] .site-header nav, html[lang="fr"] .site-header nav { gap: 10px; font-size: 8px; letter-spacing: .035em; }
  html[lang="en"] .project-caption, html[lang="fr"] .project-caption { grid-template-columns: 1fr; gap: 18px; }
  html[lang="en"] .kinetic-title { font-size: clamp(44px,13vw,72px); }
  html[lang="fr"] .kinetic-title { font-size: clamp(39px,11.5vw,64px); }
  html[lang="fr"] .project-en-accent { margin-left: 0; max-width: none; font-size: 18px; }
  html[lang="en"] .project-meta p:last-child, html[lang="fr"] .project-meta p:last-child { max-width: 92%; font-size: 11px; }
  html[lang="en"] .info-main h2 { font-size: clamp(42px,11.5vw,66px); line-height: 1.02; }
  html[lang="fr"] .info-main h2 { font-size: clamp(37px,10vw,58px); line-height: 1.06; }
  html[lang="en"] .contact-copy h2 { font-size: clamp(42px,11.5vw,68px); }
  html[lang="fr"] .contact-copy h2 { font-size: clamp(36px,9.7vw,58px); line-height: 1.05; }
  html[lang="en"] .drawer-intro h2 { font-size: clamp(54px,15vw,82px); }
  html[lang="fr"] .drawer-intro h2 { font-size: clamp(46px,12.5vw,70px); line-height: .98; }
  html[lang="en"] .drawer-story h3 { font-size: clamp(38px,10.5vw,60px); }
  html[lang="fr"] .drawer-story h3 { font-size: clamp(34px,9.3vw,54px); }
  html[lang="en"] .drawer-footer button { font-size: clamp(40px,11vw,64px); }
  html[lang="fr"] .drawer-footer button { font-size: clamp(34px,9vw,54px); }
  html[lang="en"] .directory-intro h1 { font-size: clamp(58px,16vw,88px); }
  html[lang="fr"] .directory-intro h1 { font-size: clamp(48px,13.5vw,76px); }
  html[lang="en"] .directory-meta h2, html[lang="fr"] .directory-meta h2 { font-size: clamp(34px,9.5vw,52px); }
  html[lang="ja"] .kinetic-title { font-size: clamp(56px,17vw,92px); }
  html[lang="ja"] .info-main h2, html[lang="ja"] .contact-copy h2 { font-size: clamp(44px,12vw,70px); }
  html[lang="ja"] .drawer-intro h2 { font-size: clamp(58px,17vw,92px); }
  html[lang="ja"] .drawer-story h3 { font-size: clamp(42px,12vw,68px); }
}

.cms-directory-gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:40px 0}.cms-directory-gallery img{width:100%;height:auto}.cms-directory-gallery figure{margin:0}.cms-police{font-size:11px;display:block;text-align:center;padding:12px}.cms-police a{color:inherit}@media(max-width:700px){.cms-directory-gallery{grid-template-columns:1fr}}