/* ============================================================
   WU YUXUAN — PORTFOLIO 2026
   digital-deconstruction / charcoal matte / brushed silver / dark crimson
   one continuous take · five texture layers · z-axis narrative
   ============================================================ */

@font-face{
  font-family:'Archivo Black';
  src:url('../assets/fonts/archivo-black.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../assets/fonts/jbmono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../assets/fonts/jbmono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
/* elegant thin serif — latin display accents */
@font-face{
  font-family:'Cormorant';
  src:url('../assets/fonts/cormorant-300.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cormorant';
  src:url('../assets/fonts/cormorant-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
/* heavy display serif — the carrier for the liquid chrome treatment */
@font-face{
  font-family:'Playfair';
  src:url('../assets/fonts/playfair-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Playfair';
  src:url('../assets/fonts/playfair-900.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;
}

:root{
  --ink-0:#050506;
  --ink-1:#08080a;
  --ink-2:#0c0c0f;
  --ink-3:#121216;
  --silver:#e8e9eb;
  --silver-2:#a8acb2;
  --silver-3:#787c83;
  --silver-4:#43464c;
  --crimson:#8d1220;
  --crimson-2:#b01626;
  --crimson-3:#d21f34;
  --line:rgba(232,233,235,.10);
  --line-soft:rgba(232,233,235,.055);
  --pad:6vw;
  --ease:cubic-bezier(.22,1,.36,1);

  --f-display:'Archivo Black','Arial Black','Impact','Microsoft YaHei','PingFang SC',sans-serif;
  --f-chrome:'Playfair','Songti SC','STSong','SimSun','Microsoft YaHei',serif;
  --f-sans:'Helvetica Neue','Segoe UI','Microsoft YaHei','PingFang SC',sans-serif;
  --f-mono:'JetBrains Mono','Consolas','Microsoft YaHei',monospace;
  --f-hand:'STKaiti','KaiTi','Kaiti SC','STSong','SimSun',serif;
  --f-serif:'Cormorant','Times New Roman','Songti SC','STSong',serif;

  --metal:
    repeating-linear-gradient(101deg, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 1px 3.5px),
    linear-gradient(101deg,#f6f7f8 0%,#b6bac0 14%,#eef0f2 27%,#7e838a 41%,#dcdee1 55%,#969ba2 69%,#f0f1f3 83%,#a6abb1 100%);
  --metal-base:linear-gradient(101deg,#f6f7f8 0%,#b6bac0 14%,#eef0f2 27%,#7e838a 41%,#dcdee1 55%,#969ba2 69%,#f0f1f3 83%,#a6abb1 100%);
  --metal-line:repeating-linear-gradient(101deg, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 1px 3.5px);
  --sheen:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 74%, rgba(255,255,255,0) 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{background:#050506;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-y:scroll}
body{
  margin:0;background:var(--ink-1);color:var(--silver);
  font-family:var(--f-sans);font-size:16px;line-height:1.75;
  overflow-x:clip;
  min-width:1180px;
}
body.has-cursor,body.has-cursor *{cursor:none !important}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,ul,li{margin:0;padding:0}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:none}
::selection{background:rgba(141,18,32,.55);color:#fff}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.dim{color:var(--silver-3)}

/* handwritten / calligraphic accent — used sparingly */
.hand{
  font-family:var(--f-hand);
  font-weight:400;
  color:rgba(232,233,235,.42);
  letter-spacing:.18em;
  line-height:1;
  pointer-events:none;user-select:none;
}

/* ============================================================
   LIQUID CHROME TYPE
   vertical chrome bands (sky → horizon → dark core → ground)
   with a crimson translucency in the dark band, brushed grain
   on top and a specular highlight that slowly travels across
   ============================================================ */
.chrome{
  position:relative;
  font-family:var(--f-chrome);
  font-weight:900;
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 0 28%, rgba(255,255,255,.40) 48%, rgba(255,255,255,0) 70%),
    repeating-linear-gradient(97deg, rgba(255,255,255,.12) 0 1px, rgba(255,255,255,0) 1px 5px),
    linear-gradient(0deg,
      rgba(176,22,38,0) 38%,
      rgba(196,26,46,.12) 46%,
      rgba(150,16,30,.26) 54%,
      rgba(104,8,18,.11) 62%,
      rgba(176,22,38,0) 70%),
    linear-gradient(180deg,
      #ffffff 0%, #f3f5f8 7%, #c9ced5 15%, #7d828a 23%,
      #43484f 31%, #23272d 39%, #12151a 47%, #0b0d11 52%,
      #262b31 58%, #565c63 64%, #9ba1a8 70%, #e6e9ec 78%,
      #ffffff 85%, #c2c7cd 91%, #f6f8fa 96%, #cfd3d8 100%);
  background-size:34% 100%,auto,100% 100%,100% 100%;
  background-position:150% 0,0 0,0 0,0 0;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* the liquid sweep is retired: a travelling gradient on type is the
     single most "字体变色" effect on the page. the metal stays, still. */
  animation:none;
}
@keyframes chromeFlow{
  0%{background-position:150% 0,0 0,0 0,0 0}
  62%{background-position:-60% 0,0 0,0 0,0 0}
  100%{background-position:-60% 0,0 0,0 0,0 0}
}
/* soft molten pool under the glyphs — depth, not decoration */
.chrome--molten::before{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  font:inherit;letter-spacing:inherit;
  color:rgba(176,22,38,.18);
  -webkit-text-fill-color:rgba(176,22,38,.18);
  background:none;
  filter:blur(26px);
  z-index:-1;pointer-events:none;
  transform:translateY(9px);
}

/* brushed-silver text + slow low-frequency breathing */
.silver,
.hero-name__cn{
  background-image:var(--metal);
  background-size:auto,260% 100%;
  background-position:0 0,32% 0;
  background-repeat:repeat,no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* no breathing gradient on the type either — the silver reads, static */
  animation:none;
}
@keyframes metalBreathe{
  0%,100%{background-position:0 0,30% 0}
  50%{background-position:0 0,62% 0}
}

/* scrollbar */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#08080a}
::-webkit-scrollbar-thumb{background:#24262b;border:2px solid #08080a}
::-webkit-scrollbar-thumb:hover{background:#3a3d43}

/* ============================================================
   TOP FIXED NAV — semi-transparent charcoal matte, silver type
   ============================================================ */
.nav{
  position:fixed;left:0;right:0;top:0;height:68px;z-index:90;
  background:linear-gradient(180deg,rgba(5,5,7,.97) 0%,rgba(6,6,8,.88) 58%,rgba(6,6,8,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 64%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 64%,transparent 100%);
  pointer-events:none;
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}
.nav__in{
  height:100%;display:flex;align-items:center;
  padding:0 var(--pad);pointer-events:auto;
}
.nav__brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.nav__mark{
  width:8px;height:8px;background:var(--crimson-2);transform:rotate(45deg);
  box-shadow:0 0 14px rgba(176,22,38,.85);
  animation:markPulse 4.6s ease-in-out infinite;
}
@keyframes markPulse{0%,100%{opacity:.65;transform:rotate(45deg) scale(.86)}50%{opacity:1;transform:rotate(45deg) scale(1.1)}}
.nav__name{font-family:var(--f-display);font-size:15px;letter-spacing:.3em;color:var(--silver)}
.nav__sub{
  color:var(--silver-4);font-size:9px;letter-spacing:.22em;
  margin-left:8px;padding-left:16px;border-left:1px solid var(--line);
}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav__link{position:relative;display:flex;align-items:baseline;gap:9px;padding:10px 18px}
.nav__idx{font-size:8.5px;letter-spacing:.1em;color:var(--silver-4);transition:color .5s var(--ease)}
.nav__txt{
  position:relative;font-family:var(--f-display);font-size:14px;letter-spacing:.15em;
  color:var(--silver-2);
  transition:color .55s var(--ease),letter-spacing .8s var(--ease),text-shadow .7s var(--ease);
}
.nav__link::before{
  content:'';position:absolute;left:18px;right:18px;bottom:5px;height:1px;
  background:linear-gradient(90deg,var(--crimson-3),rgba(176,22,38,0) 88%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease);
}
.nav__link::after{
  content:'';position:absolute;inset:4px 12px;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(214,32,50,.85) 0 1px,transparent 1.7px);
  background-size:5px 5px;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.34) 52%,transparent 94%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.34) 52%,transparent 94%);
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
/* edge light travels across the label — slow, never a blink */
.nav__link .nav__txt::after{
  content:'';position:absolute;left:-4%;right:-4%;top:-2px;bottom:-2px;z-index:-1;
  border-radius:2px;
  background:linear-gradient(96deg,transparent 18%,rgba(176,22,38,.34) 46%,rgba(214,32,50,.16) 62%,transparent 86%);
  background-size:220% 100%;background-position:180% 0;
  opacity:0;transition:opacity .9s var(--ease);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.nav__link:hover .nav__txt{color:var(--crimson-3);letter-spacing:.19em;text-shadow:0 0 22px rgba(210,31,52,.34)}
.nav__link:hover .nav__idx{color:rgba(210,31,52,.75)}
.nav__link:hover::before{transform:scaleX(1)}
.nav__link:hover::after{opacity:.30;animation:navDust 18s ease-in-out infinite}
.nav__link:hover .nav__txt::after{opacity:1;animation:navEdge 3.4s var(--ease) forwards}
@keyframes navDust{
  0%,100%{background-position:0 0}
  50%{background-position:6px -5px}
}
@keyframes navEdge{
  0%{background-position:180% 0}
  100%{background-position:-60% 0}
}
.nav__link.is-on .nav__txt{color:var(--silver);text-shadow:0 0 16px rgba(232,233,235,.4)}
.nav__link.is-on .nav__idx{color:var(--crimson-3)}
.nav__link.is-on::before{transform:scaleX(.55)}
.nav__right{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  margin-left:26px;padding-left:24px;border-left:1px solid var(--line);
  color:var(--silver-4);font-size:9px;letter-spacing:.22em;
}
.nav__blip{
  width:5px;height:5px;border-radius:50%;background:var(--crimson-3);
  box-shadow:0 0 10px rgba(210,31,52,.9);
  animation:blip 6.4s ease-in-out infinite;
}
@keyframes blip{0%,100%{opacity:.42}50%{opacity:.92}}
.nav__bar{width:46px;height:1px;background:linear-gradient(90deg,rgba(232,233,235,.34),transparent)}

/* ============================================================
   FIXED BACKGROUND — FIVE TEXTURE LAYERS
   ============================================================ */
.bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink-0);
  transform-origin:50% 50%;
}
.bg__base{
  position:absolute;inset:-12%;
  background:radial-gradient(125% 85% at 50% -12%, #191a1e 0%, #0b0b0d 46%, #050506 100%);
  animation:baseBreathe 16s ease-in-out infinite;
}
@keyframes baseBreathe{0%,100%{opacity:.94}50%{opacity:1}}
.bg__halo{
  position:absolute;inset:0;
  background:
    radial-gradient(46% 38% at 82% 18%, rgba(150,18,32,.14), transparent 72%),
    radial-gradient(52% 44% at 10% 82%, rgba(206,212,220,.06), transparent 74%);
  animation:haloBreathe 13s ease-in-out infinite;
}
@keyframes haloBreathe{0%,100%{opacity:.8}50%{opacity:1}}

.bg__field{position:absolute;inset:0;will-change:transform}
.bg__layer{position:absolute;inset:-14%;will-change:transform}
.bg__tex{position:absolute;inset:-8%;display:block;}
.bg__tex svg{width:100%;height:100%;display:block}

/* L1 · charcoal noise */
.bg__tex--noise{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:300px 300px;
  opacity:.055;
  animation:noiseDrift 46s ease-in-out infinite;
}
@keyframes noiseDrift{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-1.4%,1%,0)}
  40%{transform:translate3d(1%,-1.4%,0)}
  60%{transform:translate3d(-1%,-1%,0)}
  80%{transform:translate3d(1.2%,.8%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* L2 · brushed silver scratches */
.bg__tex--scratch{animation:texDrift 58s linear infinite;opacity:.9}
/* L3 · broken grid */
.bg__tex--grid{
  background-image:
    linear-gradient(to right, rgba(232,233,235,.062) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232,233,235,.048) 1px, transparent 1px);
  background-size:7.2vw 11.5vh;
  -webkit-mask-image:
    repeating-linear-gradient(90deg,#000 0 5.2vw,transparent 5.2vw 7.2vw),
    repeating-linear-gradient(0deg,#000 0 8.2vh,transparent 8.2vh 11.5vh);
  mask-image:
    repeating-linear-gradient(90deg,#000 0 5.2vw,transparent 5.2vw 7.2vw),
    repeating-linear-gradient(0deg,#000 0 8.2vh,transparent 8.2vh 11.5vh);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  animation:texDriftRev 74s linear infinite;
}
/* L4 · crimson crack afterimage */
.bg__tex--crack{animation:texDrift 92s linear infinite}
.crack-set{opacity:.85}
.crack-set--a{animation:crackBreathe 11s ease-in-out infinite}
.crack-set--b{animation:crackBreathe 14s ease-in-out infinite 1.5s}
.crack-set--d{animation:crackBreathe 17s ease-in-out infinite 3s}
@keyframes crackBreathe{0%,100%{opacity:.55}50%{opacity:.8}}

/* L5 · broken pixel strata */
.bg__tex--pixel{
  background-image:
    linear-gradient(90deg, rgba(232,233,235,.055) 0 3px, transparent 3px 100%),
    linear-gradient(90deg, rgba(160,20,34,.10) 0 2px, transparent 2px 100%),
    linear-gradient(90deg, rgba(232,233,235,.035) 0 12px, transparent 12px 100%);
  background-size:220px 2px,340px 1px,420px 3px;
  background-position:0 22%,120px 58%,60px 81%;
  background-repeat:repeat-x;
  opacity:.75;
  animation:texDriftSlow 110s linear infinite;
}
@keyframes texDrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3%,-1.6%,0)}100%{transform:translate3d(0,0,0)}}
@keyframes texDriftRev{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(2.4%,1.8%,0)}100%{transform:translate3d(0,0,0)}}
@keyframes texDriftSlow{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-220px,0,0)}}

/* glitch traces */
.bg__glitch{position:absolute;inset:0;pointer-events:none}
.bg__glitch i{
  position:absolute;left:0;top:var(--t);
  width:var(--w);height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,233,235,.28),transparent);
  opacity:.16;
  filter:blur(.4px);
  animation:slowBand 34s ease-in-out infinite;
  animation-delay:var(--d);
}
.bg__glitch i:nth-child(2n){
  background:linear-gradient(90deg,transparent,rgba(178,22,38,.6),transparent);
}
@keyframes slowBand{
  0%{opacity:.06;transform:translateX(-6%)}
  50%{opacity:.22;transform:translateX(8%)}
  100%{opacity:.06;transform:translateX(-6%)}
}

/* slow horizontal scan beams */
.bg__beam{
  position:absolute;left:-40%;width:180%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(232,233,235,.16) 40%,rgba(232,233,235,.05) 60%,transparent);
  filter:blur(.2px);
}
.bg__beam--a{top:31%;animation:beamSweep 26s linear infinite}
.bg__beam--b{top:68%;animation:beamSweep 38s linear infinite reverse;background:linear-gradient(90deg,transparent,rgba(178,22,38,.2) 45%,transparent)}
@keyframes beamSweep{0%{transform:translateX(-18%)}100%{transform:translateX(18%)}}

/* repeated oversized type ghosting — bottom-most, never over content */
.bg__ghost{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bg__ghost-l{
  position:absolute;left:-7%;top:var(--t);
  font-family:var(--f-display);
  font-size:clamp(110px,14.4vw,280px);
  line-height:.78;letter-spacing:-.02em;white-space:nowrap;
  color:rgba(232,233,235,.012);
  -webkit-text-stroke:1px rgba(232,233,235,.052);
  animation:ghostDrift 52s ease-in-out infinite;
  animation-delay:var(--d,0s);
  
}
.bg__ghost-l--c{
  left:auto;right:-6%;
  color:rgba(150,18,32,.02);
  -webkit-text-stroke:1px rgba(150,18,32,.085);
}
@keyframes ghostDrift{
  0%,100%{transform:translate3d(0,0,0) skewX(0deg)}
  33%{transform:translate3d(-3.4%,-1.6%,0) skewX(-1.6deg)}
  66%{transform:translate3d(2.2%,1.4%,0) skewX(1.2deg)}
}

.bg__scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;opacity:.45;
  animation:scanShift 12s linear infinite;
}
@keyframes scanShift{0%{transform:translateY(0)}100%{transform:translateY(3px)}}
.bg__vignette{
  position:absolute;inset:0;
  background:radial-gradient(118% 92% at 50% 46%, transparent 24%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.93) 100%);
}
.bg__grain{
  position:absolute;inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size:260px 260px;
  mix-blend-mode:screen;opacity:.05;
  animation:grainShift 22s ease-in-out infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-2%,1%,0)}
  50%{transform:translate3d(1%,-2%,0)}
  75%{transform:translate3d(-1%,-1%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* mid-ground silver dust */
#dust{position:fixed;inset:0;z-index:5;pointer-events:none;width:100%;height:100%}

/* ============================================================
   PAGE / SECTIONS
   ============================================================ */
#page{position:relative;z-index:10;transform-origin:50% 50%}
.sec{position:relative}
.cam-in,.cam-out{width:100%;}
.wrap{padding:0 var(--pad);max-width:1820px;margin:0 auto}

.sec-head{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;position:relative;z-index:3}
.sec-head__rule{flex:1;height:1px;background:var(--line);margin-bottom:18px;min-width:120px}

.dv-title{
  position:relative;
  font-family:var(--f-chrome);
  font-weight:900;
  font-size:clamp(64px,9vw,160px);
  line-height:.9;letter-spacing:-.015em;
  display:inline-block;
  padding-right:.06em;
}
.dv-title::before{
  content:attr(data-text);
  position:absolute;left:.045em;top:.072em;
  color:rgba(150,18,32,.42);
  clip-path:inset(52% 0 0 0);
  z-index:-1;pointer-events:none;
  -webkit-text-fill-color:rgba(150,18,32,.42);
  background:none;
  -webkit-mask-image:repeating-linear-gradient(177deg,#000 0 2px,rgba(0,0,0,.06) 2px 10px);
  mask-image:repeating-linear-gradient(177deg,#000 0 2px,rgba(0,0,0,.06) 2px 10px);
  animation:crimsonBreathe 15s ease-in-out infinite;
}
@keyframes crimsonBreathe{0%,100%{opacity:.78}50%{opacity:.96}}

/* ============================================================
   00 PRE-HERO + 01 HERO  — one continuous take
   ============================================================ */
.sec--opening{height:260vh}
.open-stage{position:sticky;top:0;height:100vh;overflow:hidden;pointer-events:none}
.open-layer{position:absolute;inset:0;}

/* --- pre-hero --- */
.open-layer--pre{display:grid;place-items:center;z-index:2}
.pre-inner{
  position:relative;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  margin-top:-1vh;
}
.pre__tag{
  position:relative;color:var(--silver-3);font-size:10px;letter-spacing:.52em;text-indent:.52em;
  padding-bottom:16px;margin-bottom:2.6vh;
}
.pre__tag::after{
  content:'';position:absolute;left:50%;bottom:0;width:82px;height:1px;margin-left:-41px;
  background:linear-gradient(90deg,transparent,rgba(176,22,38,.9),transparent);
}
.pre__cn{
  position:relative;z-index:3;
  font-family:var(--f-chrome);
  font-weight:900;
  -webkit-text-stroke:.014em rgba(238,240,244,.34);
  font-size:clamp(56px,6.8vw,132px);
  line-height:.94;letter-spacing:.14em;text-indent:.14em;
  margin-bottom:-.04em;
  filter:drop-shadow(0 18px 46px rgba(0,0,0,.9));
}
/* every glyph is the same brushed silver — no crimson fill, no offset ghosts */
.pre__en{
  position:relative;z-index:2;
  font-family:var(--f-chrome);
  font-weight:900;
  font-size:clamp(66px,10.4vw,212px);
  line-height:.86;letter-spacing:-.012em;
  filter:drop-shadow(0 24px 74px rgba(0,0,0,.82));
}
.pre__en-ink{position:relative;z-index:1;display:block}
.pre__en-echo{
  position:absolute;left:0;top:0;z-index:0;display:block;
  color:rgba(150,18,32,.34);
  -webkit-text-fill-color:rgba(150,18,32,.34);
  transform:translate(.012em,.055em);
  clip-path:inset(58% 0 0 0);
  pointer-events:none;user-select:none;
  -webkit-mask-image:repeating-linear-gradient(178deg,#000 0 4px,rgba(0,0,0,.25) 4px 15px);
  mask-image:repeating-linear-gradient(178deg,#000 0 4px,rgba(0,0,0,.25) 4px 15px);
}
.pre__sub{
  margin-top:4.6vh;color:var(--silver-3);
  letter-spacing:.62em;text-indent:.62em;font-size:11px;
}
.pre__hand{
  position:absolute;right:-3vw;bottom:-9vh;
  font-size:clamp(20px,1.9vw,34px);
  letter-spacing:.34em;
  color:rgba(232,233,235,.3);
  transform:rotate(-5deg);
  animation:handFade 7s ease-in-out infinite;
}
@keyframes handFade{0%,100%{opacity:.34}50%{opacity:.72}}
.pre__meta{
  position:absolute;left:var(--pad);right:var(--pad);bottom:5vh;
  display:flex;justify-content:space-between;color:var(--silver-4);
}
.pre-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pre-deco__ghost{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  font-family:var(--f-display);
  font-size:clamp(300px,38vw,720px);line-height:.8;letter-spacing:.04em;
  color:transparent;-webkit-text-stroke:1px rgba(232,233,235,.05);
  white-space:nowrap;
  animation:ghostBreath 15s ease-in-out infinite;
}
@keyframes ghostBreath{0%,100%{opacity:.5;transform:translate(-50%,-52%) scale(1)}50%{opacity:.85;transform:translate(-51%,-51%) scale(1.02)}}
.pre-deco__red{
  position:absolute;left:8.4vw;top:23vh;width:9px;height:22vh;
  background:linear-gradient(180deg,rgba(176,22,38,0),rgba(176,22,38,.8) 30%,rgba(141,18,32,.5) 70%,rgba(176,22,38,0));
  animation:redPulse 9s ease-in-out infinite;
}
@keyframes redPulse{0%,100%{opacity:.55;transform:scaleY(.94)}50%{opacity:.95;transform:scaleY(1)}}
.pre-deco__crack{position:absolute;color:rgba(176,22,38,.5)}
.pre-deco__crack--l{left:4vw;top:14vh;width:min(24vw,360px);height:auto;transform:rotate(-6deg)}
.pre-deco__crack--r{right:3vw;bottom:10vh;width:min(26vw,390px);height:auto;transform:rotate(9deg);opacity:.6}
.pre-deco__line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(232,233,235,.22),transparent)}
.pre-deco__line--a{left:8vw;right:8vw;top:26vh}
.pre-deco__line--b{left:14vw;right:14vw;bottom:27vh;background:linear-gradient(90deg,transparent,rgba(178,22,38,.35),transparent)}

/* --- hero --- */
.open-layer--hero{z-index:3;opacity:0}
.hero-inner{
  position:relative;height:100%;width:100%;
  padding:0 var(--pad);
  display:flex;flex-direction:column;justify-content:center;
}
.hero-meta{
  position:absolute;top:10.4vh;left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;gap:20px;
  color:var(--silver-3);
}
.hero-meta .mono:nth-child(2){margin-left:auto;margin-right:auto;transform:translateX(-50%);position:absolute;left:50%}

.hero-title{
  position:relative;
  font-family:var(--f-chrome);
  font-size:clamp(88px,15.6vw,252px);
  line-height:1;letter-spacing:-.018em;
  font-weight:900;
  margin:0;
  z-index:2;
}
.ht-line{display:block;position:relative;white-space:nowrap;line-height:1}
.ht-line--2{margin-top:-.12em}
.ht-line::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  color:rgba(150,18,32,.34);
  transform:translate(.045em,.02em);
  clip-path:inset(0 62% 0 0);
  z-index:-1;pointer-events:none;
}
.ht-line--1{margin-left:-.6vw}
.ht-line--2{margin-left:7.4vw}

.ch{position:relative;display:inline-block;vertical-align:top}
.ch:nth-child(2){transform:translateY(-.016em)}
.ch:nth-child(3){transform:translateY(.02em) rotate(.45deg)}
.ch:nth-child(4){transform:translateY(-.022em) rotate(-.7deg)}
.ch:nth-child(5){transform:translateY(.012em) rotate(-.3deg)}
.ch__ghost{display:inline-block;visibility:hidden;pointer-events:none;clip-path:inset(0 0 66.4% 0)}
.frag{
  position:absolute;left:0;top:0;white-space:pre;
  background-image:
    var(--sheen),
    linear-gradient(0deg,
      rgba(176,22,38,0) 42%,
      rgba(196,26,46,.10) 50%,
      rgba(150,16,30,.22) 58%,
      rgba(104,8,18,.09) 66%,
      rgba(176,22,38,0) 74%),
    repeating-linear-gradient(97deg, rgba(255,255,255,.12) 0 1px, rgba(255,255,255,0) 1px 5px),
    linear-gradient(180deg,
      #ffffff 0%, #f8fafb 8%, #dde1e6 17%, #9aa0a8 26%,
      #5b6169 34%, #363b43 42%, #22262c 50%, #171a20 54%,
      #2f343b 59%, #666d75 65%, #adb3ba 71%, #eef0f3 78%,
      #ffffff 85%, #d2d7dd 92%, #f8fafb 100%);
  background-size:46% 100%,100% 100%,auto,100% 100%;
  background-repeat:no-repeat,no-repeat,repeat,no-repeat;
  background-position:160% 0,0 0,0 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* the per-glyph sheen sweep is retired with the rest of the travelling
     gradients; the fragments keep their metal plate and their GSAP motion */
  animation:none;
}
.frag--0{clip-path:inset(0 0 66.4% 0)}
.frag--1{clip-path:inset(33.2% 0 33.2% 0)}
.frag--2{clip-path:inset(66.4% 0 0 0)}
@keyframes sheenSweep{
  0%{background-position:160% 0,0 0,0 0,0 0}
  16%{background-position:-70% 0,0 0,0 0,0 0}
  100%{background-position:-70% 0,0 0,0 0,0 0}
}

.hero-foot{
  position:absolute;left:var(--pad);right:var(--pad);bottom:10vh;
  display:flex;align-items:flex-end;gap:4.4vw;
  z-index:3;
}
.hero-role,.hero-edu{display:flex;flex-direction:column;gap:6px}
.hero-role p{font-size:clamp(15px,1.2vw,20px);letter-spacing:.02em}
.hero-edu p{font-size:14px;color:var(--silver-2)}
.hero-scroll{display:flex;align-items:center;gap:14px;padding-bottom:8px;margin-left:auto;margin-right:24vw}
.hero-scroll__bar{position:relative;display:block;width:64px;height:1px;background:rgba(232,233,235,.18)}
.hero-scroll__bar i{position:absolute;left:0;top:-1px;width:22px;height:3px;background:linear-gradient(90deg,transparent,var(--silver));animation:scrollPulse 2.6s var(--ease) infinite}
@keyframes scrollPulse{0%{transform:translateX(0);opacity:0}30%{opacity:1}100%{transform:translateX(42px);opacity:0}}
.hero-tick{
  position:absolute;left:var(--pad);bottom:3vh;
  display:flex;gap:26px;color:var(--silver-4);
}

.hero-deco{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-deco__rule{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(232,233,235,.20),transparent)}
.hero-deco__rule--a{left:6vw;right:10vw;top:30vh}
.hero-deco__rule--b{left:12vw;right:6vw;bottom:26vh;background:linear-gradient(90deg,transparent,rgba(178,22,38,.32),transparent)}
.hero-deco__crack{position:absolute;color:rgba(176,22,38,.45)}
.hero-deco__crack--l{left:1.5vw;top:16vh;width:min(17vw,260px);transform:rotate(-12deg)}
.hero-deco__crack--r{right:2vw;bottom:8vh;width:min(19vw,280px);transform:rotate(8deg);opacity:.7}
.hero-deco__tick{position:absolute;right:8.4vw;top:26vh;color:var(--silver-4);writing-mode:vertical-rl;letter-spacing:.42em}
.hero-deco__dust{position:absolute;left:52%;top:14vh;width:1px;height:12vh;background:linear-gradient(180deg,transparent,rgba(232,233,235,.35),transparent);animation:dustFall 7s ease-in-out infinite}
@keyframes dustFall{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.8;transform:translateY(8vh)}}

/* hero name — fixed, above every texture */
.hero-name{
  position:fixed;right:4.4vw;bottom:5.2vh;z-index:40;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  pointer-events:none;text-align:right;opacity:0;
}
.hero-name__en{color:var(--silver-3);letter-spacing:.34em;font-size:11px}
.hero-name__cn{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(48px,4.6vw,84px);
  line-height:1;letter-spacing:.02em;
  font-weight:900;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.65));
}
.hero-name__rule{display:block;width:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(176,22,38,.9))}

/* ============================================================
   02 CONTENTS
   ============================================================ */
.sec--contents{margin-top:-38vh;padding:12vh 0 7vh}
.sec--contents .wrap{position:relative}
.toc-deco{position:absolute;inset:-8vh -2vw -6vh -2vw;pointer-events:none;z-index:0}
.toc-deco__ghost{
  position:absolute;right:-2vw;top:-7vh;
  font-family:var(--f-display);
  font-size:clamp(90px,10.4vw,190px);line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(232,233,235,.055);
  white-space:nowrap;
  animation:ghostDrift 48s ease-in-out infinite reverse;
}
.toc-deco__red{
  position:absolute;left:-1.6vw;top:32%;width:7px;height:24vh;
  background:linear-gradient(180deg,rgba(176,22,38,0),rgba(176,22,38,.8) 34%,rgba(141,18,32,.4) 72%,rgba(176,22,38,0));
  animation:redPulse 11s ease-in-out infinite;
}
.toc-deco__cline{
  position:absolute;left:0;right:0;top:23%;height:1px;
  background:linear-gradient(90deg,rgba(176,22,38,.5),rgba(176,22,38,0) 44%);
}
.toc-deco__bars{
  position:absolute;inset:0;
  background-image:linear-gradient(90deg, rgba(232,233,235,.07) 1px, transparent 1px);
  background-size:6.4vw 100%;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 4.4vw,transparent 4.4vw 6.4vw);
  mask-image:repeating-linear-gradient(90deg,#000 0 4.4vw,transparent 4.4vw 6.4vw);
  opacity:.7;
}
.toc-deco__glow{
  position:absolute;left:-4vw;top:18%;width:38vw;height:46vh;
  background:radial-gradient(50% 50% at 40% 50%, rgba(150,18,32,.18), transparent 72%);
  filter:blur(6px);
  animation:glowDrift 14s ease-in-out infinite;
}
@keyframes glowDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3vw,-2vh,0) scale(1.12)}}
.toc-deco__glitch{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(232,233,235,.30),transparent);opacity:.12;filter:blur(.4px);animation:slowBand 30s ease-in-out infinite}
.toc-deco__glitch--a{left:6%;top:34%;width:26%;animation-delay:1.4s}
.toc-deco__glitch--b{right:8%;bottom:26%;width:18%;animation-delay:6.2s;background:linear-gradient(90deg,transparent,rgba(178,22,38,.55),transparent)}
.toc-deco__crack{position:absolute;right:-1vw;top:-2vh;width:min(23vw,340px);height:auto;color:rgba(176,22,38,.42);transform:rotate(6deg)}

.toc{position:relative;z-index:2;margin-top:7vh;border-top:1px solid rgba(232,233,235,.12);max-width:1320px}
.toc__item{border-bottom:1px solid rgba(232,233,235,.09)}
.toc__link{
  position:relative;display:grid;
  grid-template-columns:110px 1fr 330px 54px;
  align-items:center;gap:24px;
  padding:2.7vh 1.2vw;
  transition:padding-left .9s var(--ease),background .9s var(--ease);
  overflow:hidden;
}
.toc__link::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(141,18,32,.12),transparent 48%);
  opacity:0;transition:opacity .9s var(--ease);
}
.toc__num{color:var(--silver-3);font-size:12px;transition:color .7s var(--ease),transform .9s var(--ease)}
.toc__cn{
  font-size:clamp(38px,4.2vw,74px);font-weight:800;letter-spacing:.01em;
  line-height:1.04;font-family:var(--f-sans);
  background-image:var(--metal);
  background-size:auto,260% 100%;
  background-repeat:repeat,no-repeat;
  background-position:0 0,34% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  transition:background-position 1.1s var(--ease),transform .9s var(--ease),
             letter-spacing .9s var(--ease),filter .7s var(--ease);
}
.toc__en{color:var(--silver-3);justify-self:end;transition:color .9s var(--ease),transform .9s var(--ease)}
.toc__go{color:var(--silver-3);justify-self:end;transition:.7s var(--ease);font-size:17px}
.toc__crack{
  position:absolute;right:11%;top:-14%;width:380px;height:130%;
  color:rgba(176,22,38,.9);opacity:0;
  transform:translateX(28px) scaleX(.82);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease);
  pointer-events:none;
}
.toc__band{
  position:absolute;left:0;top:50%;height:2px;width:0;
  background:linear-gradient(90deg,rgba(232,233,235,.65),rgba(178,22,38,.6),transparent);
  opacity:0;pointer-events:none;
  transition:width .55s var(--ease),opacity .4s var(--ease);
}
.toc__link:hover{padding-left:2.6vw}
.toc__link:hover::before{opacity:1}
.toc__link:hover .toc__cn{transform:translateX(14px);letter-spacing:.05em}
.toc__link:hover .toc__num{color:var(--crimson-3);transform:translateX(6px)}
.toc__link:hover .toc__en{color:var(--silver-2);transform:translateX(-6px)}
.toc__link:hover .toc__go{color:var(--silver);transform:translate(4px,-4px)}
.toc__link:hover .toc__crack{opacity:.95;transform:none}
.toc__link:hover .toc__band{width:62%;opacity:1}
.toc__note{margin-top:3.4vh;color:var(--silver-4);letter-spacing:.24em}

/* ============================================================
   03 ABOUT
   ============================================================ */
.sec--about{padding:8vh 0 10vh}
.about-grid{
  position:relative;
  display:grid;grid-template-columns:minmax(300px,34%) 1fr;
  gap:6.4vw;
}
.about-tex{position:absolute;inset:-6vh -2vw;pointer-events:none;z-index:0;overflow:clip}
.about-tex__ghost{
  position:absolute;left:-1.4vw;top:-5%;
  font-family:var(--f-display);
  font-size:clamp(84px,9.4vw,172px);line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(232,233,235,.05);
  white-space:nowrap;
  animation:ghostDrift 56s ease-in-out infinite;
}
.about-tex__red{
  position:absolute;left:30.5%;top:62%;width:40px;height:118px;
  background:linear-gradient(180deg,rgba(176,22,38,.8),rgba(141,18,32,.12));
  opacity:.62;
  animation:redPulse 13s ease-in-out infinite;
}
.about-tex__cline{
  position:absolute;left:0;right:0;top:3.4%;height:1px;
  background:linear-gradient(90deg,rgba(176,22,38,.42),rgba(176,22,38,0) 38%);
}
.about-tex__scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(232,233,235,.035) 0 1px, transparent 1px 7px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 100%);
  mask-image:linear-gradient(90deg,transparent,#000 26%,#000 100%);
  opacity:.7;
}
.about-tex__noise{
  position:absolute;left:22%;right:0;top:0;bottom:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:screen;
}
.about-tex__crack{position:absolute;right:2%;bottom:4%;width:min(20vw,300px);color:rgba(176,22,38,.32);transform:rotate(-8deg)}
.about-tex__bar{
  position:absolute;left:24%;right:6%;top:9%;height:1px;
  background:linear-gradient(90deg,rgba(232,233,235,.16),transparent 62%);
}

.portrait{position:relative;margin:0;align-self:stretch;z-index:2}
.portrait__sticky{position:sticky;top:10vh;display:block}
.portrait__box{position:relative;aspect-ratio:3/4;overflow:visible;box-shadow:0 40px 90px -60px #000}
.portrait__img{position:absolute;inset:0;}
.crop{overflow:hidden}
.crop img{width:100%;height:106%;object-fit:cover;object-position:50% 0;}
.portrait__frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.portrait__crack{
  position:absolute;left:-8%;top:-10%;width:54%;height:34%;
  color:rgba(176,22,38,.62);z-index:4;pointer-events:none;
  transform:rotate(-9deg);
}
.portrait__corner{position:absolute;right:14px;bottom:12px;z-index:5;color:var(--silver-3);letter-spacing:.2em}
.portrait__cap{margin-top:16px;color:var(--silver-4);letter-spacing:.24em}

.about-copy{position:relative;z-index:2;max-width:900px}
.about-head{position:relative}
.about-hand{
  position:absolute;right:2px;top:78px;
  font-size:30px;letter-spacing:.32em;
  color:rgba(232,233,235,.36);
  transform:rotate(-4deg);
  animation:handFade 9s ease-in-out infinite;
}
.about-name{
  position:relative;
  font-family:var(--f-chrome);
  font-size:clamp(56px,6.2vw,108px);
  line-height:.94;letter-spacing:.06em;margin-top:10px;
  font-weight:900;
}
.about-sub{color:var(--silver-3);margin-top:16px;letter-spacing:.3em;font-size:11.5px}

.info{
  display:grid;grid-template-columns:1fr 1fr;gap:0 3.4vw;
  margin-top:4.2vh;border-top:1px solid var(--line);
}
.info__row{
  display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft);
  font-size:15px;color:rgba(232,233,235,.88);
}
.info__row .k{min-width:78px;color:var(--silver-3);letter-spacing:.16em;font-size:10.5px;padding-top:5px}

.blk{margin-top:5.6vh}
.blk__t{
  display:flex;align-items:center;gap:12px;
  color:var(--silver-2);letter-spacing:.26em;font-size:11px;
}
.blk__t i{display:block;width:30px;height:1px;background:var(--crimson-2);flex:0 0 auto}
.blk__lead{margin-top:18px;font-size:19px;color:rgba(232,233,235,.96);letter-spacing:.01em;font-weight:500}
.blk__lead .hl{color:#fff;font-weight:700;font-family:var(--f-mono);font-size:15px;letter-spacing:.04em}
.blk__p{margin-top:12px;font-size:15px;line-height:2.05;color:rgba(232,233,235,.62);letter-spacing:.01em}
.k2{display:inline-block;margin-right:12px;font-size:10px;letter-spacing:.16em;color:var(--crimson-3);vertical-align:1px}
.blk--split{display:grid;grid-template-columns:1fr 1fr;gap:3.4vw}
.item{position:relative;margin-top:22px;padding-left:17px;border-left:1px solid var(--line)}
.item::before{content:'';position:absolute;left:-1px;top:6px;width:1px;height:22px;background:var(--crimson-2)}
.item__h{font-size:14.6px;color:rgba(232,233,235,.92);line-height:1.7;font-weight:500}
.item__sep{color:var(--silver-4);margin:0 4px}
.item__p{margin-top:7px;font-size:13.6px;line-height:1.9;color:rgba(232,233,235,.52)}
.about-sign{margin-top:6vh;color:var(--silver-4);letter-spacing:.28em}

/* ============================================================
   04 WORKS — collage stack, cards overlap (no title)
   ============================================================ */
.sec--works{padding:0;position:relative;z-index:12}
.works-plate{
  position:absolute;left:-4vw;right:-4vw;top:-9vh;bottom:-9vh;z-index:0;
  background:
    radial-gradient(66% 58% at 50% 46%, rgba(26,26,31,.9) 0%, rgba(16,16,20,.82) 46%, rgba(10,10,13,0) 84%);
  pointer-events:none;
}
.works-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.works-deco__ghost{
  position:absolute;left:-3vw;top:35%;
  font-family:var(--f-display);
  font-size:clamp(120px,13.6vw,250px);line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(232,233,235,.06);
  white-space:nowrap;
  animation:ghostDrift 44s ease-in-out infinite;
}
.works-deco__red{position:absolute;background:var(--crimson-2);z-index:0}
.works-deco__red--a{left:0;top:21%;width:7px;height:17vh;opacity:.75}
.works-deco__red--b{right:1.2vw;top:58%;width:54px;height:54px;opacity:.8;box-shadow:0 0 40px rgba(176,22,38,.35)}
.works-deco__red--c{left:24%;bottom:4.5%;width:38px;height:5px;opacity:.7}
.works-deco__band{
  position:absolute;left:-6vw;top:34%;width:64vw;height:30vh;
  background:radial-gradient(50% 50% at 50% 50%, rgba(150,18,32,.10), transparent 74%);
  filter:blur(10px);
}
.works-deco__crack{position:absolute;color:rgba(176,22,38,.34)}
.works-deco__crack--a{left:6%;top:6%;width:min(18vw,260px);transform:rotate(-14deg)}
.works-deco__crack--b{right:8%;bottom:4%;width:min(20vw,300px);transform:rotate(12deg);opacity:.7}
.works-deco__crack--c{left:44%;top:40%;width:min(16vw,240px);transform:rotate(24deg);opacity:.5}
.works-deco__beam{
  position:absolute;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,233,235,.26) 18%,rgba(232,233,235,.06) 52%,transparent);
  opacity:.8;
}
/* the guide lines stay perfectly still — they used to fade in and out and
   read as a pulse behind the photographs */
.works-deco__beam--a{left:2vw;top:46.5%;width:26vw;opacity:.55}
.works-deco__beam--b{right:3vw;top:53%;width:22vw;opacity:.42}
.works-deco__beam--c{left:34%;top:50.4%;width:30vw;height:1px;opacity:.4;
  background:linear-gradient(90deg,transparent,rgba(176,22,38,.42) 40%,rgba(232,233,235,.2) 62%,transparent)}
.works-deco__grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(232,233,235,.05) 0 1px, transparent 1px 148px),
    repeating-linear-gradient(0deg, rgba(232,233,235,.045) 0 1px, transparent 1px 132px);
  mask-image:radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.85), transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.85), transparent 78%);
  opacity:.55;
}

.card{
  position:absolute;
  left:var(--x,0%);
  top:var(--y,0%);
  width:var(--cardw,44vw);
  transform:rotate(var(--r));
  transform-origin:50% 50%;
  outline:none;
  z-index:var(--z);
  
}
.card-enter,.card-exit{}
.card-inner{
  position:relative;
  background:#0b0b0e;
  transition:transform 1s var(--ease),box-shadow 1s var(--ease),filter 1s var(--ease);
  
  box-shadow:0 46px 90px -46px rgba(0,0,0,.98);
}
/* the frame follows each artwork's own ratio — nothing is cropped or stretched */
.card__media{
  position:relative;aspect-ratio:var(--ar,16/10);background:#0a0a0c;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transition:clip-path 1.1s var(--ease);
}
.card__media img{
  width:100%;height:100%;object-fit:contain;object-position:50% 50%;
  transition:opacity 1.2s var(--ease);
}
.card:hover .card__media{
  clip-path:polygon(0 0,100% 0,100% 86%,98.4% 86%,98.4% 92%,95% 92%,95% 97%,90.6% 97%,90.6% 100%,0 100%);
}
/* the light on the artwork is now a still, fixed grade — no sweeping bands,
   no looping pulses: a repeated bright pass over a photo reads as flicker */
.card__fx{position:absolute;inset:0;z-index:3;pointer-events:none}
/* 01 — soft top light, fixed */
.card__fx--scan{
  background:linear-gradient(180deg,rgba(232,233,235,.05) 0%,rgba(232,233,235,0) 26%);
}
/* 02 — crimson grade, fixed */
.card__fx--flow{
  background:radial-gradient(64% 46% at 28% 26%, rgba(176,22,38,.16), transparent 72%),
             radial-gradient(48% 44% at 76% 72%, rgba(140,20,32,.12), transparent 74%);
}
/* 03 — faint bloom in the lower corner, fixed */
.card__fx--bubble{
  background:radial-gradient(58% 40% at 22% 88%, rgba(206,224,235,.10), transparent 72%);
}
/* 04 — fixed reflection band, never travels */
.card__fx--gloss{
  background:linear-gradient(112deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.045) 50%,rgba(255,255,255,0) 62%);
}

/* pixel-erosion veil (hover) */
.card__erode{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background-image:radial-gradient(circle, rgba(5,5,7,.95) 0 1.3px, transparent 1.9px);
  background-size:4px 4px;
  -webkit-mask-image:linear-gradient(122deg,transparent 30%,#000 62%,#000 100%);
  mask-image:linear-gradient(122deg,transparent 30%,#000 62%,#000 100%);
  transition:opacity .9s var(--ease),background-size .9s var(--ease);
}
.card:hover .card__erode{opacity:.9;background-size:6px 6px}
.card.is-focus .card__erode{opacity:0}
.card.is-focus .card__media{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

.card__sheen{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background-image:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.14) 47%,rgba(255,255,255,.03) 53%,transparent 64%);
  background-size:260% 100%;
  background-position:190% 0;
  transition:background-position 1.7s var(--ease),opacity 1s var(--ease);
  opacity:0;
}
.card__frame{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);z-index:7;pointer-events:none;overflow:visible}
.card__crack{
  position:absolute;left:-5%;top:-7%;width:56%;height:44%;z-index:8;
  color:rgba(176,22,38,.85);pointer-events:none;
  opacity:0;transform:scale(.88) rotate(-4deg);
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
  transform-origin:0 0;
}

/* crimson rectangle anchor (corner opposite the caption) */
.card__red{
  position:absolute;width:44px;height:44px;z-index:8;
  background:linear-gradient(142deg,var(--crimson-2),#630c16);
  box-shadow:0 0 34px rgba(176,22,38,.4), inset 0 0 0 1px rgba(232,233,235,.12);
  opacity:.92;
  transition:transform 1s var(--ease),opacity .8s var(--ease);
}
.card__rule{
  position:absolute;height:1px;width:42%;z-index:8;
  background:linear-gradient(90deg,rgba(176,22,38,.85),rgba(176,22,38,0));
  opacity:.65;
  transition:width 1.1s var(--ease),opacity .8s var(--ease);
}
.card:hover .card__red{transform:scale(1.14);opacity:1}
.card:hover .card__rule{width:62%;opacity:1}

/* caption — floats at the outward corner, always clear of the overlap */
/* caption lives in its own footer plate — never fights the artwork */
.card__meta{
  position:relative;left:auto;bottom:auto;top:auto;z-index:9;
  width:100%;padding:15px 22px 18px 22px;
  background:linear-gradient(180deg, rgba(10,10,13,.97) 0%, rgba(6,6,8,.99) 100%);
  border-top:1px solid rgba(232,233,235,.075);
}
/* corner scrim — painted on the media itself so its edges are the card's edges */
.card__media::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(3,3,5,0) 62%, rgba(3,3,5,.34) 100%);
}

.card__head{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.card__num{font-family:var(--f-mono);color:var(--crimson-3);letter-spacing:.3em;font-size:11px;flex:none}
.card__cat{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(232,233,235,.46);padding-left:12px;border-left:1px solid rgba(232,233,235,.22);
}
/* small sizes need a brighter chrome so the plate stays legible */
.chrome--bright{
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 0 30%, rgba(255,255,255,.34) 48%, rgba(255,255,255,0) 70%),
    repeating-linear-gradient(97deg, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 1px 5px),
    linear-gradient(0deg, rgba(176,22,38,0) 64%, rgba(190,26,44,.32) 82%, rgba(176,22,38,0) 100%),
    linear-gradient(180deg,
      #ffffff 0%, #f2f5f8 16%, #cfd4da 30%, #9aa0a8 42%,
      #b9bfc6 54%, #eef1f4 68%, #ffffff 82%, #d3d8de 100%);
  background-size:34% 100%,auto,100% 100%,100% 100%;
  background-position:150% 0,0 0,0 0,0 0;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat;
}
.card__title{
  margin:9px 0 0;
  font-family:var(--f-chrome);font-weight:900;
  font-size:clamp(24px,2.06vw,37px);line-height:1.1;
  letter-spacing:.02em;color:#fff;
  animation:none;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.8));
}
.card__tags{
  margin:9px 0 0;color:rgba(226,96,110,.98);
  text-shadow:0 1px 10px rgba(0,0,0,.9);
  letter-spacing:.16em;font-size:9.6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card__desc{
  margin:7px 0 0;font-size:13px;line-height:1.58;
  color:rgba(240,241,243,.9);
  text-shadow:0 1px 12px rgba(0,0,0,.85);
  text-wrap:pretty;
}
.card__open{
  position:absolute;z-index:9;
  color:var(--silver-2);letter-spacing:.24em;font-size:9.5px;
  opacity:0;transform:translateY(-6px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}

.card:hover .card-inner{transform:translateY(-12px);box-shadow:0 70px 120px -50px rgba(0,0,0,1)}
/* hover is carried by the frame and the caption — the artwork itself never
   moves or scales, so it can never be clipped a second time */
.card:hover .card__sheen{opacity:1;background-position:-90% 0}
.card:hover .card__crack{opacity:1;transform:scale(1) rotate(0deg)}
.card:hover .card__open{opacity:1;transform:none}
.card:hover .card__title{color:#fff;text-shadow:0 0 26px rgba(232,233,235,.28),0 2px 18px rgba(0,0,0,.8)}
.card:focus-visible .card-inner{outline:1px solid rgba(232,233,235,.4);outline-offset:6px}
.card.is-active .card__crack{opacity:1;transform:scale(1)}
.card.is-active .card-inner{box-shadow:0 0 0 1px rgba(176,22,38,.55),0 50px 90px -50px #000}
.card.is-folded .card-inner{opacity:0;transition:opacity .3s var(--ease)}

/* ============================================================
   05 CONTACT
   ============================================================ */
.sec--contact{padding:12vh 0 6vh;min-height:100vh;display:flex;flex-direction:column;overflow:clip}
.sec--contact .cam-in{flex:1;display:flex;flex-direction:column;min-height:0}
.sec--contact .cam-out{flex:1;display:flex;flex-direction:column;min-height:0}
.contact-wrap{width:100%;position:relative;display:flex;flex-direction:column;justify-content:space-between;flex:1;min-height:0;padding-top:6vh}
.contact-tex{position:absolute;inset:-8vh -3vw 3vh -3vw;pointer-events:none;z-index:0;overflow:clip}
.contact-tex__ghost--b{right:auto;left:-2vw;top:auto;bottom:-2%;-webkit-text-stroke:1px rgba(232,233,235,.06)}
.contact-tex__ghost{
  position:absolute;right:-2vw;top:-3%;
  font-family:var(--f-display);
  font-size:clamp(88px,10.6vw,196px);line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(232,233,235,.05);
  white-space:nowrap;
  animation:ghostDrift 50s ease-in-out infinite reverse;
}
.contact-tex__red{
  position:absolute;left:0;top:6%;width:7px;height:16vh;
  background:linear-gradient(180deg,rgba(176,22,38,.85),rgba(176,22,38,0));
  animation:redPulse 10s ease-in-out infinite;
}
.contact-hand{
  position:static;
  font-size:clamp(30px,3.1vw,54px);letter-spacing:.26em;
  color:rgba(232,233,235,.30);
  transform:rotate(-6deg);
  animation:handFade 8s ease-in-out infinite;
}
.contact-tex__scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(232,233,235,.032) 0 1px, transparent 1px 8px);
  opacity:.75;
}
.contact-tex__crack{position:absolute;left:-2vw;bottom:6vh;width:min(28vw,420px);color:rgba(176,22,38,.4);transform:rotate(-10deg)}
.contact-tex__bar{
  position:absolute;right:0;top:16%;width:38vw;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,233,235,.2));
}
.contact-title{
  position:relative;display:inline-block;z-index:2;
  font-family:var(--f-chrome);font-weight:900;
  font-size:clamp(86px,12.4vw,212px);
  line-height:.86;letter-spacing:-.005em;
}
.contact-title::before{
  content:attr(data-text);position:absolute;left:.04em;top:.085em;
  color:rgba(150,18,32,.4);clip-path:inset(56% 0 0 0);z-index:-1;
  -webkit-text-fill-color:rgba(150,18,32,.4);background:none;
  -webkit-mask-image:repeating-linear-gradient(177deg,#000 0 2px,rgba(0,0,0,.06) 2px 11px);
  mask-image:repeating-linear-gradient(177deg,#000 0 2px,rgba(0,0,0,.06) 2px 11px);
}
.contact-body{
  position:relative;z-index:2;
  margin-top:5vh;
  padding-top:4vh;
  border-top:1px solid rgba(232,233,235,.09);
  display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  padding-bottom:3vh;
}
.contact-id{
  display:flex;flex-direction:column;gap:9px;
  padding-left:20px;border-left:1px solid rgba(176,22,38,.45);
}
.contact-side{
  position:relative;display:flex;align-items:baseline;gap:26px;
  padding:0 0 0 20px;border-left:1px solid rgba(176,22,38,.28);
}
.contact-red{width:70px;height:9px;background:var(--crimson-2);opacity:.85;box-shadow:0 0 26px rgba(176,22,38,.4)}
.contact-meta{color:rgba(232,233,235,.4);font-size:9px;letter-spacing:.24em}
.contact-name{font-size:clamp(24px,2.3vw,36px);color:#fff;letter-spacing:.04em}
.contact-line{font-size:clamp(15px,1.2vw,19px);color:rgba(232,233,235,.62);letter-spacing:.03em}
.contact-deco{
  position:absolute;right:2vw;top:22%;bottom:22%;
  display:flex;align-items:center;gap:24px;pointer-events:none;
}
.contact-deco__txt{writing-mode:vertical-rl;color:var(--silver-4);letter-spacing:.42em;font-size:9px}
.contact-deco__crack{width:260px;height:150px;color:rgba(176,22,38,.55);transform:rotate(8deg)}

.foot__top{transition:color .5s var(--ease),letter-spacing .5s var(--ease)}
.foot__top:hover{color:var(--silver);letter-spacing:.3em}
.foot{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;gap:20px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  color:var(--silver-4);letter-spacing:.2em;font-size:10px;
}

/* ============================================================
   SCROLL SPY
   ============================================================ */
.spy{
  position:fixed;right:30px;top:50%;transform:translateY(-50%);
  z-index:70;display:flex;flex-direction:column;gap:17px;align-items:flex-end;
  padding:12px 0;
}
.spy__rail{position:absolute;right:4.5px;top:0;bottom:0;width:1px;background:rgba(232,233,235,.10)}
.spy__item{position:relative;display:flex;align-items:center;height:10px;gap:12px}
.spy__dot{
  width:10px;height:10px;background:rgba(232,233,235,.26);
  transform:rotate(45deg) scale(.52);transition:.6s var(--ease);
  flex:0 0 auto;
}
.spy__label{
  color:var(--silver-3);font-size:9px;letter-spacing:.22em;
  opacity:0;transform:translateX(8px);
  transition:.5s var(--ease);white-space:nowrap;order:-1;
}
.spy__item:hover .spy__label{opacity:1;transform:none}
.spy__item.is-active .spy__dot{
  background:var(--crimson-3);transform:rotate(45deg) scale(1.05);
  box-shadow:0 0 16px rgba(210,31,52,.6);
}
.spy__item.is-active .spy__label{opacity:.9;transform:none;color:var(--silver)}

/* ============================================================
   MODAL
   ============================================================ */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;visibility:hidden;pointer-events:none}
.modal.is-open{visibility:visible;pointer-events:auto}
.modal__veil{
  position:absolute;inset:0;background:rgba(3,3,4,.93);
  opacity:0;transition:opacity .8s var(--ease);
}
.modal.is-open .modal__veil{opacity:1}
.modal__panel{
  position:relative;width:min(1180px,84vw);height:88vh;
  background:linear-gradient(180deg,#0c0c0f,#08080a 60%,#0a0a0c);
  box-shadow:0 80px 160px -60px #000;
  clip-path:polygon(0% 1.1%,13% 0%,31% 0.8%,57% 0.1%,78% 0.9%,100% 0.2%,99.3% 21%,100% 46%,99.4% 70%,100% 98.7%,85% 100%,62% 99.3%,38% 100%,15% 99.2%,0% 99.8%,0.8% 73%,0% 51%,0.6% 26%);
  opacity:0;overflow:hidden;
  transform-origin:50% 50%;
}
.modal__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.modal__bg-crack{
  position:absolute;display:block;
  background:
    linear-gradient(104deg,transparent 46%,rgba(150,18,32,.30) 50%,transparent 54%),
    linear-gradient(76deg,transparent 30%,rgba(150,18,32,.18) 33%,transparent 37%);
  opacity:.5;
  animation:crackSlide 18s ease-in-out infinite;
}
.modal__bg-crack--a{left:-10%;top:-20%;width:80%;height:90%;animation-delay:0s}
.modal__bg-crack--b{right:-14%;bottom:-16%;width:70%;height:70%;animation-delay:6s}
@keyframes crackSlide{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.35}
  50%{transform:translate3d(2%,1.5%,0) scale(1.1);opacity:.6}
}
.modal__bg-scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(232,233,235,.03) 0 1px, transparent 1px 4px);
  opacity:.6;
  animation:scanShift 9s linear infinite;
}
.modal__frame{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}
.modal__close{
  position:absolute;right:26px;top:24px;z-index:12;
  width:46px;height:46px;display:grid;place-items:center;
  transition:transform .6s var(--ease),border-color .6s;
  border:1px solid rgba(232,233,235,.16);
}
.modal__close span{position:absolute;width:18px;height:1px;background:var(--silver-2);transition:.5s var(--ease)}
.modal__close span:nth-child(1){transform:rotate(45deg)}
.modal__close span:nth-child(2){transform:rotate(-45deg)}
.modal__close:hover{border-color:rgba(210,31,52,.7);transform:rotate(90deg)}
.modal__close:hover span{background:var(--crimson-3)}
.modal__scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  padding:66px 70px 84px;
  scrollbar-width:thin;
  z-index:2;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 54px,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 54px,#000 calc(100% - 44px),transparent 100%);
}
.modal__scroll::-webkit-scrollbar{width:6px}
.modal__scroll::-webkit-scrollbar-track{background:transparent}
.modal__scroll::-webkit-scrollbar-thumb{background:rgba(232,233,235,.16)}
.modal__content{position:relative}

/* modal typography */
.m-kicker{display:flex;align-items:center;gap:14px;color:var(--silver-3);letter-spacing:.26em}
.m-kicker i{display:block;width:34px;height:1px;background:var(--crimson-2)}
.m-title{
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(38px,4vw,64px);line-height:1.02;
  margin-top:16px;letter-spacing:.01em;
}
.m-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.m-tags span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  padding:6px 12px;border:1px solid rgba(232,233,235,.14);color:var(--silver-2);
  text-transform:uppercase;
}
.m-lead{margin-top:22px;font-size:15px;line-height:2;color:rgba(232,233,235,.62);max-width:64ch}
/* the story synopsis is the narrative heart of the project sheet */
.m-story-label{display:flex;align-items:center;gap:14px;margin-top:26px}
.m-story-label > span:first-child{
  font-size:10px;letter-spacing:.24em;color:var(--crimson-3);
}
.m-story-label i{flex:1;height:1px;background:var(--line)}
.m-story-label .dim{font-size:9px;letter-spacing:.22em;color:var(--silver-4)}
.m-lead--story{
  margin-top:16px;padding-left:18px;
  border-left:2px solid rgba(176,22,38,.8);
  font-size:16px;line-height:2.05;letter-spacing:.02em;
  color:rgba(232,233,235,.84);max-width:66ch;
}

/* video */
.m-media{margin-top:26px;position:relative;max-width:min(100%,calc((88vh - 300px) * 1.7778))}
.m-body{margin-top:4px}
.video{
  position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;
  clip-path:polygon(0.4% 1.4%,9% 0%,27% 1%,48% 0.2%,71% 1.2%,92% 0.4%,99.6% 1.2%,100% 24%,99.2% 52%,100% 79%,99.4% 98.8%,88% 100%,63% 99%,41% 100%,17% 99.2%,0.6% 99.6%,0% 76%,0.8% 49%,0% 23%);
}
/* vertical (9:16) video: same torn frame, but portrait — centred and capped
   so the full frame stays inside the modal viewport */
.video--portrait{
  aspect-ratio:624/1280;
  width:min(100%,38vh);
  margin-inline:auto;
}
.video__el,.video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.video__poster{z-index:1;transition:opacity 1s var(--ease)}
.video__el{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .8s}
.video.is-playing .video__el{opacity:1}
.video.is-playing .video__poster{opacity:0}
.video__grade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.35),transparent 30%,transparent 62%,rgba(5,5,6,.8));
}
.video__play{
  position:absolute;left:50%;top:50%;z-index:5;
  width:132px;height:132px;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}
.video__tri{
  position:relative;z-index:3;
  width:54px;height:60px;display:block;transform:translateX(3px);
  filter:drop-shadow(0 0 20px rgba(210,31,52,.42)) drop-shadow(0 3px 12px rgba(0,0,0,.85));
  transition:transform .9s var(--ease),filter .9s var(--ease);
}
.video__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.video__ring circle{
  fill:none;stroke:rgba(196,26,44,.95);stroke-width:1.6;
  stroke-dasharray:14 9 26 12;opacity:.9;
  transform-origin:50% 50%;
  animation:ringSpin 22s linear infinite;
}
.video__ring circle:nth-child(2){stroke-dasharray:6 18 30 8;opacity:.5;animation-duration:34s;animation-direction:reverse}
.video__ring circle:nth-child(1){stroke:rgba(232,233,235,.42);stroke-width:.8;stroke-dasharray:44 5 18 6;opacity:.85;animation-duration:46s}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.video__play::before{
  content:'';position:absolute;inset:6%;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(4,4,6,.74) 0%,rgba(4,4,6,.5) 54%,rgba(4,4,6,0) 74%);
  transition:opacity .6s var(--ease);
}
.video__play:hover::before{background:radial-gradient(circle,rgba(70,8,16,.8) 0%,rgba(4,4,6,.55) 58%,rgba(4,4,6,0) 76%)}
.video__play:hover .video__tri{transform:translateX(6px) scale(1.08);filter:drop-shadow(0 0 26px rgba(210,31,52,.62)) drop-shadow(0 3px 12px rgba(0,0,0,.85))}
.video.is-playing .video__play{opacity:0;transform:translate(-50%,-50%) scale(.86);pointer-events:none}
.video__label{
  position:relative;z-index:4;
  margin-top:14px;padding:0 2px;display:flex;gap:10px;align-items:center;
  color:rgba(232,233,235,.92);font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  width:100%;
}
.video__label b{color:var(--crimson-3)}
.video__label b{color:var(--crimson-3);font-weight:400}
.video__bili{
  margin-left:auto;text-decoration:none;white-space:nowrap;
  font-size:9px;letter-spacing:.18em;color:rgba(232,233,235,.46);
  transition:color .5s var(--ease);
}
.video__bili:hover{color:var(--crimson-3)}
.video__hint{
  position:absolute;left:50%;top:calc(50% + 84px);transform:translateX(-50%);
  z-index:6;text-align:center;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;color:var(--silver-3);
  padding:8px 16px;background:rgba(6,6,8,.72);
  border:1px solid rgba(232,233,235,.14);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;white-space:nowrap;
}
.video__hint.is-on{opacity:1}
.video.is-noSrc .video__play{opacity:.82}

/* ---- external screening: QR + bilibili link, directly under the video ---- */
.m-online{
  position:relative;display:flex;align-items:center;gap:24px;
  margin:20px 0 6px;padding:18px 22px;
  background:linear-gradient(112deg,rgba(21,21,26,.96) 0%,rgba(9,9,12,.98) 100%);
  border:1px solid rgba(232,233,235,.10);
  border-left:2px solid rgba(176,22,38,.85);
  box-shadow:0 30px 70px -40px rgba(0,0,0,1),inset 0 0 0 1px rgba(0,0,0,.5);
  clip-path:polygon(0 0,100% 0,100% 82%,97.4% 82%,97.4% 90%,94% 90%,94% 100%,0 100%);
}
.m-online__qr{
  flex:0 0 auto;display:block;width:176px;height:176px;padding:10px;box-sizing:border-box;
  background:#fff;
  box-shadow:0 0 0 1px rgba(232,233,235,.2),0 14px 34px -20px rgba(0,0,0,1);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}
.m-online__qr img{width:100%;height:100%;display:block}
.m-online:hover .m-online__qr{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 0 0 1px rgba(214,32,50,.6),0 0 30px rgba(176,22,38,.32);
}
.m-online__info{min-width:0;flex:1}
.m-online__k{display:block;font-size:9px;letter-spacing:.3em;color:rgba(226,96,110,.9)}
.m-online__t{
  display:block;margin-top:8px;font-family:var(--f-display);font-weight:400;
  font-size:clamp(19px,1.7vw,27px);letter-spacing:.01em;color:rgba(232,233,235,.94);
}
.m-online__d{
  margin-top:8px;font-size:12px;line-height:1.7;letter-spacing:.04em;
  color:rgba(232,233,235,.6);
}
.m-online__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  padding:9px 16px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  color:rgba(232,233,235,.82);text-decoration:none;
  border:1px solid rgba(232,233,235,.22);
  background:linear-gradient(180deg,rgba(232,233,235,.07),rgba(232,233,235,.02));
  transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease);
}
.m-online__go:hover{
  background:linear-gradient(142deg,rgba(150,18,32,.92),rgba(80,8,18,.92));
  color:#fff;border-color:rgba(214,32,50,.6);
}
.m-online__go span{color:var(--crimson-3);transition:color .6s var(--ease)}
.m-online__go:hover span{color:#fff}
.m-online__edge{
  position:absolute;left:0;bottom:0;width:42%;height:1px;
  background:linear-gradient(90deg,rgba(176,22,38,.85),rgba(176,22,38,0));
  transition:width .9s var(--ease);
}
.m-online:hover .m-online__edge{width:74%}
/* playable-game variant: a permanently lit call to action, no animation */
.m-online--play{border-left-color:rgba(214,32,50,.95)}
.m-online--play .m-online__k{color:#ef6072}
.m-online--play .m-online__go{
  background:linear-gradient(142deg,rgba(150,18,32,.94),rgba(80,8,18,.94));
  border-color:rgba(214,32,50,.7);color:#fff;
}
.m-online--play .m-online__go span{color:#fff}
.m-online--play .m-online__go:hover{
  background:linear-gradient(142deg,rgba(196,26,44,1),rgba(110,10,24,1));
}

/* slots */
.m-sec{margin-top:58px}
.m-sec__head{display:flex;align-items:center;gap:16px}
.m-sec__head h4{
  margin:0;font-family:var(--f-display);font-weight:400;
  font-size:17px;letter-spacing:.14em;color:var(--silver);
}
.m-sec__head span{color:var(--silver-4);letter-spacing:.2em}
.m-sec__head i{flex:1;height:1px;background:var(--line)}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.slots--three{grid-template-columns:repeat(3,1fr)}
.slots--solo{grid-template-columns:1fr}
.m-sec--solo{margin-top:64px;padding-top:34px;border-top:1px solid var(--line-soft)}
.slot{
  position:relative;aspect-ratio:16/10;
  border:1px dashed rgba(232,233,235,.22);
  background:rgba(255,255,255,.026);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  transition:border-color .7s var(--ease),background .7s var(--ease),
             transform .9s var(--ease),filter .9s var(--ease),box-shadow .9s var(--ease);
  opacity:0;
  
}
.slot--tall{aspect-ratio:4/5}
.slot:hover{border-color:rgba(176,22,38,.5);background:rgba(141,18,32,.05)}
.slot__tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;color:var(--silver-2)}
.slot__hint{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;color:var(--silver-3)}
.slot::before,.slot::after{
  content:'';position:absolute;width:8px;height:8px;border:1px solid rgba(232,233,235,.3)
}
.slot::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.slot::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.slot.is-focus{
  transform:translateY(-6px);
  border-color:rgba(232,233,235,.34);
  background:rgba(255,255,255,.03);
  box-shadow:0 30px 60px -40px #000;
}
.slot.is-dim{transform:translateY(6px) scale(.99);opacity:.62}
.slot.is-dim .slot__tag{color:var(--silver-4)}

/* ---- filled exhibition boards (real artwork, click to enlarge) ---- */
.slot--filled{
  aspect-ratio:1824/1025;
  border:1px solid rgba(232,233,235,.16);
  background:#08080b;
  display:block;overflow:hidden;cursor:zoom-in;
  align-items:stretch;justify-content:stretch;gap:0;
}
.slot--filled.is-dim{opacity:.86}
.slot--filled > img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform 1.1s var(--ease),opacity .8s var(--ease);
}
.slot--filled:hover > img{transform:scale(1.035)}
.slot--filled::before,.slot--filled::after{z-index:3;border-color:rgba(232,233,235,.45)}
.slot__zoom{
  position:absolute;right:10px;top:10px;z-index:4;
  padding:6px 10px;font-size:8px;letter-spacing:.18em;
  color:rgba(232,233,235,.9);background:rgba(6,6,8,.82);
  border:1px solid rgba(232,233,235,.26);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease),background .6s var(--ease);
}
.slot--filled:hover .slot__zoom,.slot--filled:focus-visible .slot__zoom{
  opacity:1;transform:none;background:rgba(150,18,32,.88);
}
/* each board carries its own caption ABOVE the artwork, so the picture
   itself stays completely unobstructed and keeps its original framing */
.board{margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.board > .slot{width:100%}
.board__title{
  display:flex;align-items:baseline;gap:10px;margin:0;
  padding:0 2px 10px;
  border-bottom:1px solid rgba(232,233,235,.14);
  white-space:nowrap;overflow:hidden;
  transition:border-color .7s var(--ease);
}
.board:hover .board__title{border-color:rgba(176,22,38,.55)}
.board__title b{
  font-family:var(--f-display);font-weight:400;font-size:18px;
  letter-spacing:.02em;color:var(--crimson-3);
}
.board__title i{
  font-style:normal;font-size:14px;letter-spacing:.12em;
  color:rgba(232,233,235,.97);
}
.board__title em{
  margin-left:auto;font-family:var(--f-mono);font-style:normal;font-size:7.5px;
  letter-spacing:.16em;color:rgba(232,233,235,.42);
}
.slots--three .board__title em{display:none}
.board__badge{
  margin-left:auto;flex:0 0 auto;align-self:center;
  padding:3px 7px;border:1px solid rgba(176,22,38,.6);
  background:rgba(150,18,32,.16);
  font-size:9.5px;letter-spacing:.08em;
  color:#ef6072;white-space:nowrap;
}

/* ---- lightbox ---- */
.lightbox{
  position:fixed;inset:0;z-index:190;
  display:flex;align-items:center;justify-content:center;
  background:rgba(3,3,5,.965);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.lightbox__img{
  max-width:86vw;max-height:78vh;object-fit:contain;display:block;
  box-shadow:0 50px 140px -50px #000,0 0 0 1px rgba(232,233,235,.16);
  transform:scale(.965);transition:transform .55s var(--ease);
  user-select:none;-webkit-user-drag:none;cursor:grab;
}
.lightbox.is-open .lightbox__img{transform:scale(1)}
.lightbox__close,.lightbox__nav{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,14,.8);color:rgba(232,233,235,.8);
  border:1px solid rgba(232,233,235,.22);
  font-family:var(--f-mono);cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{
  background:rgba(150,18,32,.9);color:#fff;border-color:rgba(214,32,50,.7);
}
.lightbox__close{right:3.2vw;top:4vh;width:44px;height:44px;font-size:24px;line-height:1}
.lightbox__nav{top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:30px}
.lightbox__nav--prev{left:2.6vw}
.lightbox__nav--next{right:2.6vw}
.lightbox__bar{
  position:absolute;left:0;right:0;bottom:4.4vh;z-index:2;
  display:flex;align-items:baseline;justify-content:center;gap:18px;
  padding:0 12vw;
}
.lightbox__no{font-family:var(--f-display);font-size:22px;color:var(--crimson-3);letter-spacing:.04em}
.lightbox__title{font-size:15px;letter-spacing:.08em;color:rgba(232,233,235,.92)}
.lightbox__count{margin-left:auto;font-size:9px;letter-spacing:.22em;color:rgba(232,233,235,.46)}
.lightbox__hint{
  position:absolute;left:0;right:0;bottom:1.8vh;z-index:2;text-align:center;
  font-size:8px;letter-spacing:.22em;color:rgba(232,233,235,.3);
}

.m-foot{
  margin-top:70px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;
  color:var(--silver-4);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
}
.m-foot b{color:var(--silver-2);font-weight:400}

/* ============================================================
   FX / CURSOR / LOADER
   ============================================================ */
#fx{position:fixed;inset:0;z-index:80;pointer-events:none;width:100%;height:100%}

.cursor{
  position:fixed;left:0;top:0;z-index:200;width:38px;height:38px;
  pointer-events:none;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
  transition:width .5s var(--ease),height .5s var(--ease),opacity .4s;
  display:grid;place-items:center;
}
.cursor svg{width:100%;height:100%;overflow:visible;animation:cursorFloat 7s ease-in-out infinite}
.cursor__drop{
  fill:url(#cursorMetal);
  fill-opacity:.42;
  stroke:rgba(232,233,235,.82);stroke-width:.85;
  stroke-linejoin:round;
  transition:fill-opacity .6s var(--ease),stroke .6s var(--ease);
}
.cursor__crack{
  stroke:rgba(10,10,12,.85);stroke-width:.75;fill:none;
  stroke-linecap:round;
  transition:stroke .6s var(--ease);
}
.cursor__crack--b{stroke:rgba(10,10,12,.6)}
.cursor__dot{fill:rgba(214,32,50,.9);transition:fill .6s var(--ease)}
.cursor.is-hot{width:52px;height:52px}
.cursor.is-hot .cursor__drop{fill-opacity:.72;stroke:rgba(214,32,50,.9)}
.cursor.is-hot .cursor__crack{stroke:rgba(232,233,235,.55)}
.cursor.is-hidden{opacity:0}
@keyframes cursorFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-1px) scale(1.035)}
}

/* ============================================================
   CRT LOADER — aged brushed-metal television shell
   two clip halves so the whole frame can split like an eyelid
   ============================================================ */
.crt{
  position:fixed;inset:0;z-index:400;
  background:transparent;
  
}
.crt__half{
  position:absolute;left:0;width:100%;height:50vh;
  overflow:hidden;
  
  backface-visibility:hidden;
}
.crt__half--t{top:0}
.crt__half--b{bottom:0}
.crt__stage{
  position:absolute;left:0;width:100%;height:100vh;
  transform:translateZ(0);
}
.crt__half--t .crt__stage{top:0}
.crt__half--b .crt__stage{bottom:0}

/* --- metal bezel --- */
.crt__bezel{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.062) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.085) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(148deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 20%),
    radial-gradient(90% 130% at 50% -12%, rgba(255,255,255,.11), transparent 58%),
    linear-gradient(152deg,
      #8a8f97 0%, #5a6068 6%, #767b83 12%, #474b52 21%,
      #6f747c 30%, #383c43 40%, #62676f 50%, #3b3f45 60%,
      #71767e 70%, #4a4e55 80%, #656a72 90%, #33373d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.9);
}
/* 做旧：渍斑、划痕、四周压暗 */
.crt__bezel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(26% 40% at 16% 14%, rgba(0,0,0,.22), transparent 72%),
    radial-gradient(22% 34% at 86% 82%, rgba(0,0,0,.26), transparent 74%),
    radial-gradient(18% 26% at 70% 10%, rgba(232,233,235,.10), transparent 72%),
    radial-gradient(14% 20% at 12% 74%, rgba(232,233,235,.07), transparent 74%);
  mix-blend-mode:multiply;opacity:.72;
}
.crt__bezel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.06) 8%, transparent 20%,
      transparent 80%, rgba(0,0,0,.06) 92%, rgba(0,0,0,.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.05) 10%, transparent 24%,
      transparent 76%, rgba(0,0,0,.05) 90%, rgba(0,0,0,.48) 100%);
  opacity:.8;
}
.crt__screen{
  position:absolute;
  inset:4.4vh 3.7vw 6.4vh;
  border-radius:26px;
  background:
    radial-gradient(120% 120% at 50% 40%, #0b0c0e 0%, #07080a 52%, #040405 100%);
  box-shadow:
    inset 0 0 0 9px #101116,
    inset 0 0 0 10px rgba(232,233,235,.10),
    inset 0 0 0 11px rgba(0,0,0,.9),
    inset 0 10px 26px rgba(0,0,0,.95),
    inset 0 -8px 22px rgba(0,0,0,.9),
    0 -1px 0 rgba(255,255,255,.14),
    0 1px 0 rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.95),
    0 0 70px rgba(0,0,0,.92);
  overflow:hidden;
}
.crt__glass{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    radial-gradient(88% 62% at 50% 30%, rgba(232,233,235,.055), transparent 62%),
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 88%, rgba(0,0,0,.86) 100%);
  border-radius:26px;
}
.crt__scan{
  position:absolute;inset:-4% 0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(232,233,235,.045) 0 1px,
    rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:screen;
  animation:scanCrawl 14s linear infinite;
}
@keyframes scanCrawl{0%{transform:translateY(0)}100%{transform:translateY(3px)}}
.crt__noise{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:.05;mix-blend-mode:screen;
  animation:crtNoise 26s ease-in-out infinite;
}
@keyframes crtNoise{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-14px,10px,0)}
}
.crt__scratch{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.35;
  background:
    linear-gradient(87deg, transparent 22%, rgba(232,233,235,.030) 22.2%, transparent 22.8%),
    linear-gradient(94deg, transparent 63%, rgba(232,233,235,.022) 63.2%, transparent 63.9%),
    linear-gradient(91deg, transparent 78%, rgba(176,22,38,.045) 78.2%, transparent 79%);
}
.crt__iris{
  position:absolute;left:50%;top:50%;z-index:1;
  width:min(46vw,640px);height:min(46vw,640px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(176,22,38,.16) 0%, rgba(120,14,26,.10) 34%,
    rgba(232,233,235,.03) 58%, transparent 76%);
  filter:blur(18px);
  animation:irisBreathe 12s ease-in-out infinite;
}
@keyframes irisBreathe{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}
}

/* --- screws / vent / plate on the bezel --- */
.crt__screw{
  position:absolute;z-index:5;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #6d727a, #24262b 62%, #0d0e11 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.9), inset 0 0 2px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.7);
}
.crt__screw::after{
  content:'';position:absolute;left:1.5px;right:1.5px;top:4px;height:1px;
  background:rgba(0,0,0,.85);transform:rotate(-24deg);
}
.crt__screw--tl{left:1.55vw;top:2.3vh}
.crt__screw--tr{right:1.55vw;top:2.3vh}
.crt__screw--bl{left:1.55vw;bottom:2.3vh}
.crt__screw--br{right:1.55vw;bottom:2.3vh}
.crt__vent{
  position:absolute;z-index:5;right:5.2vw;bottom:2.5vh;width:9vw;height:1.5vh;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.62) 0 2px, rgba(232,233,235,.10) 2px 4px);
  border-radius:1px;opacity:.72;
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}
.crt__plate{
  position:absolute;z-index:5;left:5.2vw;bottom:2.35vh;
  display:flex;align-items:center;gap:.85em;
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.32em;
  color:rgba(232,233,235,.34);
}
.crt__plate b{
  color:rgba(198,26,44,.92);font-weight:400;font-size:9px;
  text-shadow:0 0 10px rgba(198,26,44,.65);
  animation:ledBreathe 7s ease-in-out infinite;
}
@keyframes ledBreathe{0%,100%{opacity:.55}50%{opacity:1}}

/* --- screen read-out --- */
.crt__ui{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  text-align:center;padding-bottom:2vh;
}
.crt__tag{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.52em;
  color:rgba(232,233,235,.42);text-indent:.52em;
  margin-bottom:2.6vh;
}
.crt__read{
  display:flex;align-items:flex-start;justify-content:center;
  font-family:var(--f-mono);font-weight:400;
  font-size:clamp(64px,7.6vw,124px);line-height:.9;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:#f1f2f4;
  text-shadow:0 0 30px rgba(232,233,235,.22), 0 0 2px rgba(255,255,255,.5);
}
.crt__read i{
  font-style:normal;font-size:.34em;line-height:1;margin-left:.14em;margin-top:.12em;
  color:rgba(214,32,50,.9);letter-spacing:.08em;
  text-shadow:0 0 18px rgba(210,31,52,.55);
}
.crt__rail{
  position:relative;display:block;width:min(320px,27vw);height:2px;
  margin-top:3.2vh;background:rgba(232,233,235,.16);
  box-shadow:0 0 14px rgba(232,233,235,.06);
}
.crt__rail i{
  position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(90deg, rgba(141,18,32,.95), rgba(232,233,235,.92));
  box-shadow:0 0 12px rgba(210,31,52,.45);
}
.crt__log{
  margin-top:2.2vh;font-family:var(--f-mono);font-size:8.5px;
  letter-spacing:.34em;color:rgba(232,233,235,.34);
  transition:opacity .6s var(--ease);
}
.crt__hint{
  margin-top:.9vh;font-family:var(--f-mono);font-size:8px;
  letter-spacing:.4em;color:rgba(214,32,50,.55);opacity:0;
  transition:opacity 1s var(--ease);
}
.crt.is-ready .crt__hint{opacity:1}

/* the seam that light bleeds through as the lid parts */
.crt__seam{
  position:absolute;left:0;right:0;top:50%;height:2px;z-index:410;
  transform:translateY(-1px) scaleX(.2);
  background:linear-gradient(90deg,
    transparent 0%, rgba(176,22,38,.35) 22%, rgba(232,233,235,.85) 50%,
    rgba(176,22,38,.35) 78%, transparent 100%);
  filter:blur(.6px);
  opacity:0;pointer-events:none;
}

/* the page itself waits behind the glass, out of focus */
body.is-loading{overflow:hidden}
.crt.is-done{display:none}

/* modal meta row */
.m-meta-row{
  display:flex;gap:48px;flex-wrap:wrap;
  margin-top:32px;padding-top:18px;border-top:1px solid var(--line-soft);
}
.m-meta{display:flex;flex-direction:column;gap:6px}
.m-meta span{font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;color:var(--silver-4)}
.m-meta b{font-weight:400;font-size:13px;letter-spacing:.06em;color:rgba(232,233,235,.74)}

/* end buffer */
.tail-space{display:none}

.video__ring circle{transform-box:fill-box}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================================================
   06 · ROUND 5 — DARK FLORAL ATMOSPHERE
   low-saturation lily / withered bloom / crimson shadow
   always screen-blended, always behind the type
   ============================================================ */
.bg__flora{position:absolute;inset:0;z-index:6;pointer-events:none}
.bg__flora-i{
  position:absolute;display:block;
  mix-blend-mode:screen;
  
  background-repeat:no-repeat;
  mask-image:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.4) 64%,transparent 86%);
  -webkit-mask-image:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.4) 64%,transparent 86%);
}
.bg__flora--lily{
  left:-5vw;top:4vh;width:min(36vw,600px);aspect-ratio:550/470;
  background-image:url('../assets/img/flora-lily.webp');background-size:contain;
  opacity:.17;filter:blur(1.4px) saturate(.12) contrast(1.08);
  animation:floraDriftA 54s ease-in-out infinite;
}
.bg__flora--dry{
  right:-6vw;bottom:-6vh;width:min(48vw,860px);aspect-ratio:1280/924;
  background-image:url('../assets/img/flora-dry.webp');background-size:contain;
  opacity:.13;filter:blur(2.4px) saturate(0) contrast(.95);
  animation:floraDriftB 68s ease-in-out infinite;
}
.bg__flora--red{
  left:38vw;top:52vh;width:min(26vw,420px);aspect-ratio:660/580;
  background-image:url('../assets/img/flora-red.webp');background-size:contain;
  opacity:.30;filter:blur(7px) saturate(1.2) brightness(.95);
  animation:floraDriftC 46s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes floraDriftA{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(1.6vw,-2.4vh,0) scale(1.05) rotate(-1.2deg)}
}
@keyframes floraDriftB{
  0%,100%{transform:translate3d(0,0,0) scale(1.02)}
  50%{transform:translate3d(-2.4vw,1.6vh,0) scale(1.08)}
}
@keyframes floraDriftC{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-1.2vw,-3vh,0) scale(1.14)}
}

/* per-section corner flora — even fainter than the global layer */
.pre-flora,.toc-flora,.about-flora,.works-flora,.contact-flora{
  position:absolute;display:block;pointer-events:none;
  mix-blend-mode:screen;background-repeat:no-repeat;background-size:contain;
  mask-image:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.35) 62%,transparent 88%);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.35) 62%,transparent 88%);
}
.pre-flora{width:min(30vw,520px);aspect-ratio:550/470;
  background-image:url('../assets/img/flora-lily.webp')}
.pre-flora--l{left:-6vw;bottom:-12vh;opacity:.15;filter:blur(1.6px) saturate(0) contrast(1.1);transform:rotate(-8deg)}
.pre-flora--r{right:-8vw;top:-8vh;width:min(26vw,440px);opacity:.11;filter:blur(2.2px) saturate(0) contrast(1.1);transform:rotate(16deg) scaleX(-1)}
.toc-flora{right:-6vw;top:8vh;width:min(34vw,600px);aspect-ratio:1280/924;
  background-image:url('../assets/img/flora-dry.webp');opacity:.12;filter:blur(3px) saturate(0)}
.about-flora{left:-10vw;top:6vh;width:min(30vw,520px);aspect-ratio:660/580;
  background-image:url('../assets/img/flora-red.webp');opacity:.30;filter:blur(12px) saturate(1.1)}
.works-flora{left:-8vw;bottom:-4vh;width:min(32vw,560px);aspect-ratio:1280/924;
  background-image:url('../assets/img/flora-dry.webp');opacity:.11;filter:blur(3.2px) saturate(0)}
.contact-flora{right:-4vw;bottom:-6vh;width:min(28vw,480px);aspect-ratio:550/470;
  background-image:url('../assets/img/flora-lily.webp');opacity:.16;filter:blur(2.2px) saturate(0);transform:rotate(6deg)}

/* thin serif for latin accents */
.serif{font-family:var(--f-serif);font-weight:300;letter-spacing:.06em}
.toc__en{font-family:var(--f-serif);font-weight:300;letter-spacing:.18em}

/* ============================================================
   07 · WORKS — DEPTH PARALLAX NARRATIVE (no collage overlap)
   one card forward at a time, the other three recede in Z
   ============================================================ */
.sec--works{padding:0;position:relative;z-index:12}
/* each frame opens up to its own artwork ratio — 1600×1272 for 01,
   1600×899 for the other three. Nothing is cropped to hit a common box. */
#work-01{--ar:1600/1272}
#work-02,#work-03,#work-04{--ar:1600/899}
.works-plate{
  position:absolute;left:-6vw;right:-6vw;top:0;bottom:0;z-index:0;
  background:
    radial-gradient(58% 44% at 50% 44%, rgba(28,28,33,.92) 0%, rgba(16,16,20,.7) 46%, rgba(10,10,13,0) 82%);
  pointer-events:none;
}
.works-track{position:relative;height:440vh}
.works-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  perspective:1800px;perspective-origin:50% 50%;
  transform-style:preserve-3d;
}
.works-depth{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}

.card{
  position:absolute;left:0;top:0;
  width:var(--cardw,58vw);
  transform:none;transform-origin:50% 50%;transform-style:preserve-3d;
  z-index:1;outline:none;pointer-events:none;
  
  opacity:0;
}
.card.is-live{pointer-events:auto}
.card-inner{
  position:relative;background:#0b0b0e;
  transition:transform .9s var(--ease),box-shadow .9s var(--ease);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.98),0 0 0 1px rgba(232,233,235,.05);
}
.card:hover .card-inner{transform:translateY(-8px) scale(1.008);box-shadow:0 80px 140px -50px rgba(0,0,0,1),0 0 0 1px rgba(232,233,235,.12)}

/* caption — its own plate under the artwork, always legible */
.card__media::after{background:linear-gradient(180deg, rgba(3,3,5,0) 66%, rgba(3,3,5,.30) 100%)}
.card__meta{
  position:relative;z-index:9;left:auto;bottom:auto;top:auto;width:100%;
  padding:16px 22px 19px;text-align:left;
  background:linear-gradient(180deg, rgba(10,10,13,.97) 0%, rgba(6,6,8,.995) 100%);
  border-top:1px solid rgba(232,233,235,.08);
}
.card__head{display:flex;align-items:baseline;gap:12px;justify-content:flex-start;white-space:nowrap}
.card__cat{padding:0 0 0 12px;border-left:1px solid rgba(232,233,235,.22);border-right:0}
.card__title{font-size:clamp(22px,1.98vw,34px)}
.card__tags{font-size:10px}
.card__desc{font-size:12.8px;max-width:38ch;line-height:1.6}
.card__open{right:20px;bottom:20px;left:auto;top:auto}
.card__red{left:auto;right:22px;top:22px;width:30px;height:30px;opacity:.85}
.card__rule{left:0;top:0;width:42%;height:1px;
  background:linear-gradient(90deg,rgba(176,22,38,.9),rgba(176,22,38,0))}
.card:hover .card__rule{width:64%}

/* sequence read-out */
.works-hud{
  position:absolute;left:var(--pad);bottom:5.2vh;z-index:30;
  display:flex;align-items:center;gap:20px;
  pointer-events:none;
}
.works-hud__idx{
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--f-display);letter-spacing:.14em;
  color:rgba(232,233,235,.55);
}
.works-hud__idx b{font-weight:400;font-size:clamp(26px,2.2vw,40px);color:#fff;line-height:1;letter-spacing:.02em}
.works-hud__idx i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--silver-4)}
.works-hud__rail{position:relative;width:min(20vw,230px);height:1px;background:rgba(232,233,235,.16)}
.works-hud__rail i{position:absolute;left:0;top:0;height:1px;width:0%;
  background:linear-gradient(90deg,var(--crimson-3),rgba(232,233,235,.9));
  box-shadow:0 0 12px rgba(210,31,52,.6)}
.works-hud__name{
  font-family:var(--f-serif);font-weight:300;
  font-size:17px;letter-spacing:.12em;color:rgba(232,233,235,.72);
}
.works-hud__state{
  font-family:var(--f-serif);font-weight:300;
  font-size:11px;letter-spacing:.3em;color:rgba(226,96,110,.78);
  padding-left:16px;border-left:1px solid rgba(176,22,38,.4);
}
.works-hud.is-swap .works-hud__name,.works-hud.is-swap .works-hud__state{
  animation:hudSoft 1.1s var(--ease) 1;
}
@keyframes hudSoft{
  0%{opacity:.3;transform:translateX(-4px)}
  100%{opacity:1;transform:none}
}
.works-hint{
  position:absolute;right:var(--pad);bottom:5.4vh;z-index:30;
  font-size:9px;letter-spacing:.32em;color:var(--silver-4);
  transition:opacity .8s var(--ease);
  pointer-events:none;
}
.works-hint.is-gone{opacity:0}

/* ------------------------------------------------------------
   WORKS · depth grading
   the three cards behind the subject are pushed back optically.
   The grade is a static CSS filter that only changes at the instant
   a card becomes the subject — never once per scroll frame.
   ------------------------------------------------------------ */
.card-inner{
  transition:transform .9s var(--ease),box-shadow .9s var(--ease);
}
.card.is-deep .card-inner{
  filter:blur(2.6px) contrast(.84) brightness(.72);
}
.card.is-deep .card__media::after{
  background:linear-gradient(180deg,rgba(4,4,7,.34),rgba(4,4,7,.52));
}
/* the far texture travels slowest of all */
.works-deco{}
/* as the camera pulls back the four plates erode at their edges */
/* as the camera pulls back the four plates erode at their edges and pass
   through three discrete focus grades — never a per-frame blur */
#worksDepth{position:absolute;inset:0;z-index:5;will-change:transform}
#worksDepth.is-leaving .card__erode{opacity:.72;background-size:6px 6px}
#worksDepth.is-leaving .card__media{
  clip-path:polygon(0 0,100% 0,100% 92%,96% 92%,96% 96%,91% 96%,91% 100%,0 100%);
}
#worksDepth.is-fog-1 .card-inner{filter:brightness(.9) contrast(.94)}
#worksDepth.is-fog-2 .card-inner{filter:blur(1.2px) brightness(.84) contrast(.9)}
#worksDepth.is-fog-3 .card-inner{filter:blur(2.2px) brightness(.76) contrast(.86)}

/* ------------------------------------------------------------
   ARCHIVE ARRIVAL — the real section, not a copy inside the works pin
   it comes up from the far plane as the page scrolls, and a single static
   blur grade is dropped once it is close enough to read as "in focus".
   ------------------------------------------------------------ */
#galStage{will-change:transform;transform-origin:50% 50%}
/* three discrete focus grades. the blur radius is gone: a full-stage
   blur re-rasterises the entire archive every frame it is attached, and
   flipping it on / off in steps is what reads as "it flashed" on a slow
   compositor. the depth cue survives as the dimming alone — far reads
   as far without a single filter kernel. */
#galStage.is-far{}
#galStage.is-mid{}

/* ============================================================
   09 · MOTIF LAYER — chess silhouettes, checker, broken rays
   deepest plane, never above content
   ============================================================ */
.bg__motif{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.bg__rays{
  position:absolute;left:54%;top:34%;
  width:150vmax;height:150vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 12deg at 50% 50%,
    rgba(176,22,38,.30) 0deg .22deg, transparent .22deg 4.6deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 14%, rgba(0,0,0,.55) 34%, #000 52%, transparent 78%);
  mask-image:radial-gradient(closest-side, transparent 14%, rgba(0,0,0,.55) 34%, #000 52%, transparent 78%);
  opacity:.22;
  animation:rayTurn 150s linear infinite;
}
@keyframes rayTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}
.bg__check{
  position:absolute;right:-4vw;top:8vh;width:44vw;height:56vh;
  background-image:conic-gradient(from 90deg at 50% 50%,
    rgba(232,233,235,.10) 0 25%, transparent 0 50%,
    rgba(232,233,235,.10) 0 75%, transparent 0);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(64% 64% at 66% 40%, #000 0%, rgba(0,0,0,.35) 44%, transparent 76%);
  mask-image:radial-gradient(64% 64% at 66% 40%, #000 0%, rgba(0,0,0,.35) 44%, transparent 76%);
  opacity:.5;transform:rotate(-7deg) skewY(-4deg);
}
.bg__chess{
  position:absolute;line-height:1;
  font-family:'Segoe UI Symbol','Arial Unicode MS','Apple Symbols',serif;
  color:rgba(232,233,235,.055);
  filter:blur(.8px);
  user-select:none;
}
.bg__chess--a{left:-4vw;bottom:-6vh;font-size:19vw;opacity:.55}
.bg__chess--b{right:-2vw;top:-2vh;font-size:11vw;opacity:.4;transform:rotate(9deg)}
.bg__chess--c{left:0;top:62vh;font-size:7vw;opacity:.28;transform:rotate(-14deg)}

.about-chess{
  position:absolute;right:-4vw;bottom:-14vh;
  font-family:'Segoe UI Symbol','Arial Unicode MS',serif;
  font-size:15vw;line-height:1;
  color:rgba(232,233,235,.045);
  filter:blur(1.4px);
  transform:rotate(-6deg);
  pointer-events:none;
}
.contact-rays{
  position:absolute;left:58%;top:52%;
  width:120vmax;height:120vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(176,22,38,.22) 0deg .2deg, transparent .2deg 5.4deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 18%, rgba(0,0,0,.6) 40%, transparent 74%);
  mask-image:radial-gradient(closest-side, transparent 18%, rgba(0,0,0,.6) 40%, transparent 74%);
  opacity:.18;pointer-events:none;
}


/* ============================================================
   10 · READING-ORDER REVEAL + POINTER-LIT TEXT
   ============================================================ */
.sec-head > span:first-child,
.about-head > span:first-child,
.contact-meta{
  transition:color 2.2s var(--ease);
}
.is-lit{color:rgba(214,32,50,.62)}

.hot{position:relative}
.hot::after{
  content:attr(data-text);
  position:absolute;inset:0;
  display:block;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-align:inherit;
  text-indent:inherit;
  text-transform:inherit;
  white-space:pre-wrap;
  color:var(--crimson-3);
  -webkit-text-fill-color:var(--crimson-3);
  background:none;
  pointer-events:none;
  opacity:0;
  z-index:3;
  transition:opacity .65s var(--ease);
  -webkit-mask-image:radial-gradient(circle var(--hr,170px) at var(--hx,50%) var(--hy,50%),
    #000 0%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.46) 56%, rgba(0,0,0,.14) 78%, transparent 94%);
  mask-image:radial-gradient(circle var(--hr,170px) at var(--hx,50%) var(--hy,50%),
    #000 0%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.46) 56%, rgba(0,0,0,.14) 78%, transparent 94%);
}
.hot:hover::after{opacity:1}
/* the silver-dust trail sits behind the glyphs so the type stays crisp */
.hot::before{
  content:'';position:absolute;left:0;top:0;right:0;bottom:0;
  pointer-events:none;opacity:0;z-index:-1;
  background:radial-gradient(circle var(--hr,160px) at var(--hx,50%) var(--hy,50%),
    rgba(176,22,38,.16) 0%, rgba(176,22,38,.05) 42%, transparent 74%);
  transition:opacity .8s var(--ease);
  filter:blur(6px);
}
.hot:hover::before{opacity:1}

/* ============================================================
   09 · ARCHIVE — staggered container wall (six pieces)
   a table-top of six containers, each on its own depth plane
   ============================================================ */
.sec--gal{padding:0;position:relative;z-index:12}
.gal-track{position:relative;height:260vh}
.gal-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.gal-stage{position:absolute;inset:0}

/* ---- atmosphere ---- */
.gal-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.gal-deco__ghost{
  position:absolute;left:-2vw;bottom:-4vh;
  font-family:var(--f-display);font-size:clamp(90px,13vw,240px);line-height:.8;
  letter-spacing:-.02em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(232,233,235,.045);
  animation:ghostDrift 62s ease-in-out infinite;
}
.gal-deco__check{
  position:absolute;right:-6vw;top:-4vh;width:44vw;height:52vh;
  background:conic-gradient(from 90deg at 50% 50%, rgba(232,233,235,.055) 0 25%, transparent 0 50%, rgba(232,233,235,.055) 0 75%, transparent 0);
  background-size:64px 64px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(60% 60% at 62% 34%, #000 0%, rgba(0,0,0,.4) 52%, transparent 82%);
  mask-image:radial-gradient(60% 60% at 62% 34%, #000 0%, rgba(0,0,0,.4) 52%, transparent 82%);
}
.gal-deco__rays{
  position:absolute;right:-14vw;bottom:-16vh;width:58vw;height:58vw;
  background:repeating-conic-gradient(from 210deg at 100% 100%,
    rgba(232,233,235,.10) 0deg .22deg, transparent .22deg 5deg);
  opacity:.22;
  -webkit-mask-image:radial-gradient(circle at 100% 100%, #000 0%, transparent 68%);
  mask-image:radial-gradient(circle at 100% 100%, #000 0%, transparent 68%);
}
.gal-deco__grid{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(232,233,235,.028) 0 1px, transparent 1px 18vw),
    repeating-linear-gradient(0deg, rgba(232,233,235,.022) 0 1px, transparent 1px 22vh);
  -webkit-mask-image:linear-gradient(160deg, #000 0%, transparent 62%);
  mask-image:linear-gradient(160deg, #000 0%, transparent 62%);
  opacity:.7;
}
.gal-deco__chess{
  position:absolute;right:2vw;bottom:2vh;
  font-size:15vw;line-height:1;color:rgba(232,233,235,.055);
  filter:blur(1.4px);
  animation:chessFloat 34s ease-in-out infinite;
}
.gal-deco__chess--b{
  right:auto;left:26vw;top:48vh;font-size:8vw;
  color:rgba(232,233,235,.035);animation-delay:-12s;
}
.gal-deco__red{position:absolute;background:var(--crimson-2)}
.gal-deco__red--a{left:3vw;top:16vh;width:34px;height:6px;opacity:.7}
.gal-deco__red--b{right:6vw;top:70vh;width:5px;height:90px;opacity:.5;
  background:linear-gradient(180deg, rgba(176,22,38,.85), rgba(176,22,38,0))}
.gal-deco__bar{position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(176,22,38,.35) 22%,transparent 46%,rgba(232,233,235,.06) 78%,transparent)}
.gal-deco__crack{position:absolute;color:rgba(176,22,38,.34)}
.gal-deco__crack--a{left:-3vw;bottom:2vh;width:30vw;height:18vw;transform:rotate(-6deg)}
.gal-deco__crack--b{right:-2vw;top:6vh;width:22vw;height:14vw;transform:rotate(164deg);color:rgba(232,233,235,.10)}

/* ---- section head ---- */
.gal-head{position:absolute;left:var(--pad);top:6vh;z-index:30;pointer-events:none}
.gal-head > span{display:block;font-size:9.5px;letter-spacing:.34em;color:var(--silver-3)}
.gal-title{
  margin:10px 0 12px;
  font-size:clamp(28px,2.7vw,56px);line-height:1;letter-spacing:-.01em;
}
.gal-sub{font-size:9px;letter-spacing:.3em;color:var(--silver-4)}

/* ---- the wall: one 12-column grid, three size classes ---- */
.gal-board{
  position:absolute;left:var(--pad);right:var(--pad);
  top:21vh;bottom:5.2vh;z-index:5;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);
  align-items:stretch;
  column-gap:1.4vw;
}
/* the right half carries the two side plates — two equal rows that fill
   the hero's height exactly, so every edge lines up with it. */
.gal-side{
  grid-column:7 / span 6;grid-row:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  align-content:stretch;
  row-gap:2.2vh;
  min-width:0;
}
.gal{
  position:relative;margin:0;outline:none;z-index:5;min-width:0;
  display:flex;align-items:stretch;
  
  --r:0deg;
}
.gal__inner{
  position:relative;display:flex;flex-direction:column;width:100%;
  font-size:clamp(10.5px,.9vw,16px);
  background:#0a0a0d;
  border:1px solid rgba(232,233,235,.10);
  box-shadow:0 42px 90px -46px rgba(0,0,0,.98), 0 0 0 1px rgba(0,0,0,.6);
  transform:rotate(var(--r));
  transition:transform 1s var(--ease), box-shadow 1s var(--ease), border-color 1s var(--ease);
  overflow:hidden;
}
.gal__inner::before{
  content:'';position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;
  background:
    radial-gradient(58% 42% at 24% 104%, rgba(176,22,38,.42), transparent 66%),
    radial-gradient(40% 30% at 84% -6%, rgba(176,22,38,.26), transparent 68%);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 10px);
  mask-image:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 10px);
  filter:blur(2px);
  transition:opacity 1.1s var(--ease);
}
.gal:hover .gal__inner{
  transform:rotate(var(--r)) translateY(-10px) scale(1.012);
  border-color:rgba(214,32,50,.42);
  box-shadow:0 60px 110px -40px rgba(0,0,0,1), 0 0 34px rgba(176,22,38,.20), 0 0 0 1px rgba(214,32,50,.22);
}
.gal:hover .gal__inner::before{opacity:1}

.gal__media{position:relative;display:block;flex:1 1 auto;min-height:0;overflow:hidden;background:#0b0b0e}
/* thumbnails are shown whole as well — the plate is dark, so the small
   margins a non-matching ratio leaves behind read as a mat, not a gap */
.gal__media img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:opacity 1.2s var(--ease);
}
.gal__media::before{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background-image:radial-gradient(circle,rgba(226,96,110,.75) 0 1px,transparent 1.7px);
  background-size:7px 7px;
  transition:opacity .5s var(--ease);
}
.gal.is-scatter .gal__media::before{opacity:.8}
.gal__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(4,4,6,0) 46%, rgba(4,4,6,.42) 100%);
  pointer-events:none;
}
.gal__sheen{
  position:absolute;top:0;bottom:0;left:-40%;width:34%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-12deg);pointer-events:none;
  transition:left 1.6s var(--ease);
}
.gal:hover .gal__sheen{left:120%}

.gal__body{position:relative;z-index:6;padding:9px 13px 11px;border-top:1px solid rgba(232,233,235,.07)}
/* VIEW PROJECT sits at the lower-left of every container */
.gal__body::after{
  content:'VIEW PROJECT ↗';display:block;margin-top:7px;
  font-family:var(--f-mono);font-size:8px;letter-spacing:.22em;
  color:rgba(232,233,235,.34);
  transition:color .6s var(--ease);
}
.gal:hover .gal__body::after{color:rgba(214,32,50,.92)}
.is-s .gal__body::after{font-size:7px;margin-top:5px;letter-spacing:.16em}
.gal__top{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.gal__idx{font-family:var(--f-display);font-size:.82em;letter-spacing:.18em;color:rgba(232,233,235,.5)}
.gal__cat{
  font-size:.6em;letter-spacing:.2em;color:rgba(226,96,110,.8);
  padding-left:9px;border-left:1px solid rgba(176,22,38,.42);
  white-space:nowrap;
}
.gal__name{
  margin:0;font-size:1.56em;line-height:1.0;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gal__tags{margin-top:4px;font-size:.6em;letter-spacing:.15em;color:rgba(232,233,235,.44);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal__desc{
  margin-top:4px;font-size:.68em;line-height:1.46;color:rgba(232,233,235,.40);max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gal__open{
  position:absolute;right:10px;top:10px;z-index:9;
  font-size:.58em;letter-spacing:.2em;color:rgba(232,233,235,.55);
  opacity:0;transition:opacity .8s var(--ease);
}
.gal:hover .gal__open{opacity:1}
.gal__anchor{
  position:absolute;left:0;top:0;z-index:9;width:26px;height:26px;
  background:var(--crimson-2);opacity:.9;
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.is-m .gal__anchor{width:20px;height:20px}
.is-s .gal__anchor{width:15px;height:15px}
.gal__edge{
  position:absolute;right:0;bottom:0;z-index:9;width:52%;height:1px;
  background:linear-gradient(270deg, rgba(176,22,38,.9), rgba(176,22,38,0));
  transition:width 1.2s var(--ease);
}
.gal:hover .gal__edge{width:82%}
.gal__shot{
  position:absolute;right:12px;bottom:12px;z-index:9;width:8px;height:8px;
  background:var(--crimson-3);opacity:.72;
  box-shadow:0 0 16px rgba(176,22,38,.55);
  transition:width .6s var(--ease),height .6s var(--ease),opacity .6s var(--ease);
}
.gal:hover .gal__shot{width:12px;height:12px;opacity:1}
/* the wall tears apart on the way out — crimson seams open, particles lift */
.gal.is-scatter .gal__edge{width:100%;background:linear-gradient(270deg,rgba(226,40,60,.95),rgba(176,22,38,0))}
.gal.is-scatter .gal__shot{width:18px;height:18px;opacity:.92;box-shadow:0 0 30px rgba(210,31,52,.75)}
.gal.is-scatter .gal__inner::before{opacity:.7}
.gal.is-scatter .gal__inner{border-color:rgba(214,32,50,.3)}

/* placement — one hero (half the wall, full height) plus two plates stacked
   down the right half. Two equal rows fill the hero's height exactly, so the
   top of the first plate and the bottom of the last line up with it. */
.gal--1{grid-column:1 / span 6;grid-row:1;z-index:14}
.gal--2{grid-column:1;grid-row:1;z-index:11}
.gal--3{grid-column:1;grid-row:2;z-index:10}

/* the three side plates are landscape: still on the left, caption on the right.
   That keeps the cover big inside a short row instead of shrinking it, and the
   still is still shown whole — the frame's leftover is filled by a blurred copy
   of the same image, so no flat black ever shows. */
.gal-side .gal__inner{flex-direction:row}
.gal-side .gal__media{flex:0 0 54%;min-height:0;background:#0b0b0e;align-self:stretch}
.gal-side .gal__body{
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  border-top:0;border-left:1px solid rgba(232,233,235,.07);
  padding:12px 16px 12px 16px;
}
.gal-side .gal__desc{min-height:2.92em}
.gal-side .gal__media img{
  position:relative;z-index:1;width:100%;height:100%;
  object-fit:contain;filter:none;opacity:1;
}
.gal__fill{
  position:absolute;inset:-8%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  filter:none;
  opacity:.9;
}
.gal-side .gal__veil{display:none}

/* tier one — the hero. The plate is landscape so the poster's own caption
   band is cropped away; the caption below is given the rest of the height
   and reads as a full editorial plate rather than a strip. */
.gal--1 .gal__inner{font-size:clamp(11px,1.02vw,17px)}
.gal--1 .gal__media{flex:0 0 auto;aspect-ratio:1600/902}
.gal--1 .gal__body{
  flex:1 1 auto;display:flex;flex-direction:column;
  padding:16px 20px 18px;
}
.gal--1 .gal__name{font-size:2.32em;letter-spacing:-.005em}
.gal--1 .gal__tags{font-size:.64em;margin-top:8px}
.gal--1 .gal__desc{max-width:44ch;font-size:.8em;margin-top:10px}
.gal--1 .gal__body::after{
  content:'VIEW PROJECT ↗';
  margin-top:auto;padding-top:13px;
  border-top:1px solid rgba(232,233,235,.075);
  font-family:var(--f-mono);
  font-size:9px;letter-spacing:.26em;
  color:rgba(232,233,235,.38);
  transition:color .6s var(--ease);
}
.gal--1:hover .gal__body::after{color:rgba(214,32,50,.85)}
/* a ghosted index fills the plate's negative space, same language as
   the outline numerals elsewhere on the page */
.gal--1 .gal__body::before{
  content:'01';
  position:absolute;right:16px;bottom:46px;
  font-family:var(--f-display);
  font-size:6.4em;line-height:.78;letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,233,235,.075);
  pointer-events:none;
}

/* tier two — mid cards */
.is-m .gal__body{padding:10px 13px 12px}
.is-m .gal__name{font-size:1.5em}
.is-m .gal__desc{font-size:.68em}

/* tier three — deep cards, quietest */
.is-s .gal__body{padding:8px 10px 10px}
.is-s .gal__name{font-size:1.28em}
.is-s .gal__tags{display:none}
.is-s .gal__desc{font-size:.62em;line-height:1.42}
.is-s .gal__cat{padding-left:6px;letter-spacing:.14em}
.is-s .gal__media img{opacity:.8}
.is-s .gal:hover .gal__media img{opacity:1}
/* 琉光纪 arrives from the fourth main plate — keep it fully solid and sharp */
#gal-04 .gal__media img{opacity:1;filter:none}

/* depth: the further back, the colder and softer. These are static grades —
   the focus shift on hover is a single repaint, never a per-frame filter. */
.is-m .gal__inner{border-color:rgba(232,233,235,.085)}
.is-s .gal__inner{border-color:rgba(232,233,235,.062)}
.is-m .gal__media img{filter:blur(.5px) saturate(.94)}
.is-s .gal__media img{filter:blur(1.05px) saturate(.86)}
.gal:hover .gal__media img{filter:none;opacity:1}
/* the five archive plates keep their stills untouched — no grade, no blur,
   nothing laid over the cover itself */
.gal-side .gal__media img{filter:none;opacity:1}

/* works section eyebrow */
.works-tag{
  position:absolute;left:var(--pad);top:7.4vh;z-index:30;
  font-size:9.5px;letter-spacing:.34em;color:var(--silver-3);
  pointer-events:none;
}

/* ============================================================
   10 · CONTACT BLOOM — the closing visual anchor
   ============================================================ */
.contact-eyebrow{display:block;position:relative;z-index:2;font-size:9.5px;letter-spacing:.34em;color:var(--silver-3)}
.contact-bloom{
  position:absolute;right:-8vw;bottom:-14vh;
  width:min(58vw,1100px);height:min(58vw,1100px);
  z-index:1;pointer-events:none;
  animation:bloomBreath 17s ease-in-out infinite;
}
.contact-bloom__halo{
  position:absolute;left:-18%;top:-12%;width:136%;height:120%;
  opacity:.84;
  background:radial-gradient(48% 46% at 52% 56%, rgba(150,16,30,.44) 0%, rgba(110,10,22,.20) 44%, transparent 72%);
  filter:blur(28px);
  animation:bloomHalo 21s ease-in-out infinite;
}
.contact-bloom__red{
  position:absolute;inset:-16% -18% -16% -18%;
  background:url('../assets/img/flora-red.webp') no-repeat center/cover;
  mix-blend-mode:screen;opacity:.62;
  filter:blur(16px) saturate(1.2) brightness(.88);
  transform:scale(1.04);
  -webkit-mask-image:radial-gradient(44% 44% at 50% 50%, #000 24%, rgba(0,0,0,.42) 50%, transparent 76%);
  mask-image:radial-gradient(44% 44% at 50% 50%, #000 24%, rgba(0,0,0,.42) 50%, transparent 76%);
  animation:bloomRed 26s ease-in-out infinite;
}
.contact-bloom__rim{
  position:absolute;left:4%;top:11%;width:92%;aspect-ratio:550/470;
  background:
    url('../assets/img/flora-lily.webp') no-repeat center/contain,
    radial-gradient(circle at 50% 46%, #c8182c 0%, #8d1220 52%, #5a0a14 100%);
  background-blend-mode:multiply;
  mix-blend-mode:screen;
  filter:blur(11px) brightness(1.05);
  opacity:.6;
  transform:translate(7px,-5px) scale(1.035);
  animation:bloomRim 19s ease-in-out infinite;
}
@keyframes bloomRim{
  0%,100%{transform:translate(7px,-5px) scale(1.035)}
  50%{transform:translate(4px,-8px) scale(1.048)}
}
.contact-bloom__lily{
  position:absolute;left:4%;top:11%;width:92%;aspect-ratio:550/470;
  background:url('../assets/img/flora-lily.webp') no-repeat center/contain;
  mix-blend-mode:screen;
  opacity:.92;
  filter:contrast(1.03) brightness(.98) grayscale(.25);
  -webkit-mask-image:radial-gradient(56% 56% at 50% 50%, #000 56%, rgba(0,0,0,.72) 76%, transparent 96%);
  mask-image:radial-gradient(56% 56% at 50% 50%, #000 56%, rgba(0,0,0,.72) 76%, transparent 96%);
  animation:bloomLily 24s ease-in-out infinite;
}
.contact-bloom__dry{
  position:absolute;right:-2%;bottom:-6%;width:58%;height:58%;
  background:url('../assets/img/flora-dry.webp') no-repeat center/contain;
  mix-blend-mode:screen;opacity:.20;filter:blur(2px) grayscale(1);
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 86%);
  mask-image:radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 86%);
}
.contact-bloom__stem{
  position:absolute;left:48%;bottom:0;width:1px;height:38%;
  background:linear-gradient(180deg, rgba(198,26,44,.55), rgba(176,22,38,0));
  opacity:.6;
}
.contact-bloom__bar{
  position:absolute;background:var(--crimson-2);
  box-shadow:0 0 22px rgba(176,22,38,.45);
}
.contact-bloom__bar--b{left:3%;top:76%;width:44px;height:5px;opacity:.55}
.contact-bloom__dot{
  position:absolute;right:9%;top:31%;width:7px;height:7px;background:var(--crimson-3);
  opacity:.6;animation:redPulse 11s ease-in-out infinite;
}
.contact-bloom__dot--b{right:16%;top:63%;width:4px;height:4px;opacity:.4;animation-delay:-5s}
.contact-bloom__crack{
  position:absolute;right:2%;top:8%;width:46%;height:52%;
  color:rgba(176,22,38,.30);transform:rotate(12deg);
}
.contact-deco{display:none}
.contact-flora{display:none}
.foot{position:relative;z-index:3}

@keyframes bloomBreath{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-9px) scale(1.012)}
}
@keyframes bloomHalo{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
@keyframes bloomRed{
  0%,100%{transform:scale(1.1) translate(0,0)}
  50%{transform:scale(1.15) translate(0,-8px)}
}
@keyframes bloomLily{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.02) rotate(-.5deg)}
}

/* the lit window scales with the type size */
.pre__cn{--hr:min(240px,20vw)}
.dv-title{--hr:min(250px,20vw)}
.about-name{--hr:min(260px,21vw)}
.contact-title{--hr:min(260px,22vw)}

/* ============================================================
   11 · CONTACT ACTIONS — copy meters + résumé download
   thin silver hairlines, crimson only where it means something
   ============================================================ */
.cf-list{
  margin-top:11px;width:100%;
  display:flex;flex-direction:column;gap:1px;
  border-top:1px solid rgba(232,233,235,.075);
  padding-top:11px;
}
.cf{
  position:relative;
  display:flex;align-items:center;gap:13px;
  min-height:36px;
  transition:background .5s var(--ease);
}
/* the row is the real target; it warms up as a whole */
.cf::before{
  content:'';position:absolute;left:-9px;right:-9px;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(176,22,38,.10),rgba(176,22,38,.02) 58%,transparent);
  opacity:0;transition:opacity .55s var(--ease);
  pointer-events:none;
}
.cf:hover::before{opacity:1}
.cf:hover .copy{border-color:rgba(214,32,50,.44);color:rgba(240,241,243,.94)}
.cf__k{
  flex:0 0 auto;width:2.9em;
  font-size:9px;letter-spacing:.22em;color:var(--silver-4);
}
.cf__v{
  font-size:clamp(15px,1.16vw,19px);
  color:rgba(232,233,235,.8);
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---- copy chip ---- */
.copy{
  position:relative;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  margin-left:auto;padding:6px 12px 6px 9px;
  border:1px solid rgba(232,233,235,.16);
  color:rgba(232,233,235,.66);
  overflow:hidden;
  transition:border-color .55s var(--ease), color .55s var(--ease), transform .55s var(--ease);
}
/* crimson rises through the chip instead of flashing */
.copy::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(176,22,38,.30),rgba(141,18,32,.05));
  transform:translateY(101%);
  transition:transform .65s var(--ease);
}
.copy:hover{border-color:rgba(214,32,50,.48);color:rgba(240,241,243,.94)}
.copy:focus-visible{outline:1px solid rgba(214,32,50,.75);outline-offset:3px}
.copy:hover::before{transform:translateY(0)}
.copy:active{transform:translateY(1px)}
.copy > *{position:relative;z-index:1}
.copy__ico,.copy__ok{
  width:11px;height:11px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.copy__ok{display:none;stroke:var(--crimson-3);stroke-width:1.7}
.copy__t{
  font-size:9.5px;letter-spacing:.18em;
  /* fixed track so the chip keeps its size when 复制 → 已复制 */
  min-width:3.7em;text-align:left;
  transition:color .4s var(--ease);
}
.copy.is-done{
  border-color:rgba(176,22,38,.7);
  background:rgba(141,18,32,.30);
  color:#fff;
}
.copy.is-done::before{transform:translateY(0)}
.copy.is-done .copy__ico{display:none}
.copy.is-done .copy__ok{display:block}
.copy.is-done .copy__t{color:rgba(255,255,255,.92)}

/* ---- résumé download ---- */
.resume{
  position:relative;
  display:flex;align-items:center;gap:13px;
  margin-top:16px;padding:13px 17px 13px 16px;
  border:1px solid rgba(232,233,235,.12);
  background:linear-gradient(100deg,rgba(141,18,32,.16),rgba(9,9,12,.55) 44%,rgba(9,9,12,.18));
  overflow:hidden;
  transition:border-color .7s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease);
}
.resume__bar{
  position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--crimson-2);
  box-shadow:0 0 22px rgba(176,22,38,.62);
}
/* a slow light pass, no flicker */
.resume::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,transparent 10%,rgba(176,22,38,.20) 46%,transparent 80%);
  transform:translateX(-101%);
  transition:transform 1.15s var(--ease);
}
.resume:hover{
  border-color:rgba(214,32,50,.44);
  transform:translateY(-2px);
  box-shadow:0 26px 52px -32px rgba(0,0,0,.95), 0 0 34px rgba(176,22,38,.13);
}
.resume:hover::before{transform:translateX(101%)}
.resume__ico{
  position:relative;z-index:1;flex:0 0 auto;
  width:15px;height:17px;
  fill:none;stroke:var(--crimson-3);stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .7s var(--ease);
}
.resume:hover .resume__ico{transform:translateY(2px)}
.resume__body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:4px;
}
.resume__t{font-size:15px;letter-spacing:.08em;color:#fff}
.resume__s{font-size:8.5px;letter-spacing:.22em;color:var(--silver-3)}
.resume__arrow{
  position:relative;z-index:1;margin-left:auto;
  font-size:11px;color:var(--silver-3);
  transition:color .5s var(--ease), transform .5s var(--ease);
}
.resume:hover .resume__arrow{color:var(--crimson-3);transform:translateY(2px)}
.resume:focus-visible{outline:1px solid rgba(214,32,50,.75);outline-offset:3px}

/* ---- copy toast ---- */
.toast{
  position:fixed;left:50%;bottom:46px;z-index:9500;
  display:flex;align-items:center;gap:9px;
  padding:11px 20px 11px 15px;
  background:rgba(8,8,10,.94);
  border:1px solid rgba(214,32,50,.4);
  box-shadow:0 24px 64px -34px rgba(0,0,0,1), 0 0 32px rgba(176,22,38,.14);
  color:rgba(232,233,235,.9);
  font-size:9.5px;letter-spacing:.22em;white-space:nowrap;
  opacity:0;pointer-events:none;
  transform:translate(-50%,14px);
  transition:opacity .45s var(--ease), transform .6s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast__dot{
  width:4px;height:4px;flex:0 0 auto;
  background:var(--crimson-3);
  box-shadow:0 0 12px rgba(214,32,50,.9);
}

/* ============================================================
   PERFORMANCE FALLBACK
   `is-offstage` is the cheap one: anything scrolled out of view stops
   animating, so the browser only ever ticks the section you are looking at.
   ============================================================ */
.is-offstage,.is-offstage *{animation-play-state:paused!important}

/* ------------------------------------------------------------
   STEADY MOTION — the default tier (html.is-lite, set in the head).
   every layer above is still painted — textures, cracks, blooms,
   grains, the chess, the lily, the metal. what is held still is the
   *ticking*: the fifty-odd infinite drifts / breaths / sweeps that
   force the compositor to re-blend full-screen blend layers on every
   frame. a 90-second drift frozen at frame zero is the same picture.
   paused at the 0% keyframe keeps every element at its resting
   opacity, so nothing disappears. GSAP entrances are JS-driven and
   unaffected; hover transitions are transitions, not animations.
   ------------------------------------------------------------ */
html.is-lite *{animation-play-state:paused!important}
html.is-lite #dust,html.is-lite #fx{display:none!important}
/* flat tiles skip the scroll-time repaint of the plates under them */
.bg__tex{contain:paint}


/* ------------------------------------------------------------
   IE / compatibility-skin notice — only ever shown on Trident
   ------------------------------------------------------------ */
.ie-hint{display:none}
html.is-ie .ie-hint{
  display:block;position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:99999;background:#050507;color:#e8e9eb;
  font:15px/1.9 "Microsoft YaHei","PingFang SC",sans-serif;
  padding:26vh 24px 0;box-sizing:border-box;text-align:center}
html.is-ie body{overflow:hidden}
.ie-hint__box{max-width:520px;margin:0 auto;border:1px solid rgba(176,22,38,.5);padding:34px 26px}
.ie-hint__box b{display:block;font-size:17px;letter-spacing:.08em;color:#c8263c;margin-bottom:14px}
.ie-hint__box p{margin:0 0 8px;color:rgba(232,233,235,.78)}
.ie-hint__box p b{display:inline;color:#e8e9eb;font-size:15px;letter-spacing:0;margin:0}

/* ------------------------------------------------------------
   STEADY BUILD — the project panel
   `content-visibility:auto` on the boards is retired: on a slow
   compositor the boards enter the viewport *before* they are rendered,
   which reads as dark / black rectangles flashing past while the modal
   scrolls. images already lazy-attach on their own, so the boards can
   simply render normally.
   the 18-point torn edge and the 160px ambient shadow are also let go
   on this tier: a clipped, shadowed, masked panel has to be
   re-composited whole on every frame of its inner scroll on a
   CPU-composited browser — that is exactly the "弹窗里面很卡".
   ------------------------------------------------------------ */
html.is-lite .modal__panel{
  clip-path:none;
  box-shadow:0 30px 80px -50px #000}
html.is-lite .modal__scroll{
  -webkit-mask-image:none;
  mask-image:none}
/* the veil is animated by GSAP; the CSS transition on the same property
   fights it frame by frame — on the steady tier only one driver. */
html.is-lite .modal__veil{transition:none}

/* ------------------------------------------------------------
   STEADY BUILD — the modal, stripped
   "the effects inside the modal can go": everything decorative that
   moves or repaints on interaction is retired on this tier — the
   sliding crimson cracks and scanlines behind the content, the hairline
   frame, the three endlessly spinning dashed rings on the play button,
   the zoom-on-hover of every still. what is left is the panel, the
   type, the images, the video — the portfolio itself.
   ------------------------------------------------------------ */
html.is-lite .modal__bg-crack,html.is-lite .modal__bg-scan,
html.is-lite .modal__frame,html.is-lite .video__ring{display:none!important}
html.is-lite .slot > img{transition:none!important;transform:none!important}
html.is-lite .slot--filled:hover > img{transform:none!important}
html.is-lite .video__play,html.is-lite .video__play *,
html.is-lite .slot,html.is-lite .slot__zoom{transition:none!important}
html.is-lite .video__play:hover .video__tri{transform:none!important;filter:none!important}

/* ------------------------------------------------------------
   STEADY BUILD — no filter *steps* while scrolling
   the defocus grades (is-deep on a card, is-fog on the plate) are
   static CSS filters, but they are *toggled* as the reader scrolls:
   every toggle re-rasterises that element with a blur kernel on the
   spot, and a run of them reads as "一闪一闪". the depth cue is kept
   by the dark gradient veils that were already painted on top.
   the clip-path transition on .card__media is likewise a 1.1s
   per-frame repaint whenever it runs — on this tier it snaps.
   ------------------------------------------------------------ */
html.is-lite .card.is-deep .card-inner{filter:none!important}
html.is-lite #worksDepth.is-fog-1 .card-inner,
html.is-lite #worksDepth.is-fog-2 .card-inner,
html.is-lite #worksDepth.is-fog-3 .card-inner{filter:none!important}
html.is-lite .card__media{transition:none!important}

/* ------------------------------------------------------------
   TEXT — no colour-shifting on type, anywhere
   the crimson wash under the cursor (the ::before / ::after gradient
   sweeps on .hot) is retired site-wide: not on the contact page, not
   on the nav, not on the toc. the metal and silver gradients above
   stay, but they no longer travel. type is the one thing that should
   simply read.
   ------------------------------------------------------------ */
.hot::after,.hot::before{display:none!important}
.contact-title.chrome{animation:none!important}