/* ============================================================
   WORLDSNOTMINE — Design System
   Palette extracted from the Seoul campaign imagery.
   ============================================================ */

:root{
  /* — CORE ————————————————————————— */
  --void:        #08070A;   /* base black, cool-shifted   */
  --void-2:      #0E0B0F;   /* raised surface             */
  --oxblood:     #4A070E;   /* deep red field             */
  --blood:       #8E0C18;   /* primary red                */
  --ember:       #C81C2C;   /* hot highlight              */
  --bone:        #E9DCC8;   /* primary text / cream       */
  --bone-dim:    #B5A894;   /* secondary text             */
  --ash:         #6E6759;   /* tertiary / meta            */

  /* — SECONDARY ————————————————————— */
  --sage:        #7E8B72;   /* sculptural green           */
  --sage-deep:   #38402F;   /* green shadow               */
  --gold:        #C9A227;   /* jewellery accent           */
  --flesh:       #E5C9B0;   /* skin / wax                 */

  /* — RUPTURE (psychedelic, used sparingly) ————— */
  --magenta:     #D6246E;
  --cyan:        #2BA8C4;
  --toxic:       #9FCB3F;
  --amber:       #E8C41E;

  /* — TYPE ————————————————————————— */
  --display:   "Cinzel", "Times New Roman", serif;
  --editorial: "Cormorant Garamond", Georgia, serif;
  --mono:      "Space Mono", ui-monospace, SFMono-Regular, monospace;

  /* — SCALE ———————————————————————— */
  --step--1: clamp(.68rem, .64rem + .18vw, .78rem);
  --step-0:  clamp(.86rem, .82rem + .22vw, 1rem);
  --step-1:  clamp(1.1rem, .98rem + .6vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.2rem + 1.5vw, 2.6rem);
  --step-3:  clamp(2.2rem, 1.5rem + 3.4vw, 4.8rem);
  --step-4:  clamp(2.6rem, 1rem + 8.6vw, 8.6rem);

  --gut: clamp(1.15rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ background:var(--void); -webkit-text-size-adjust:100%; }

body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--mono);
  font-size:var(--step-0);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  cursor:none;
}
@media (max-width:900px){ body{ cursor:auto } }

::selection{ background:var(--blood); color:var(--bone); }

img,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:none; }

/* ============================================================
   LANGUAGE — Korean and English live side by side in the markup;
   the root's data-lang decides which one is painted.
   ============================================================ */
html[data-lang="en"] [data-l="ko"],
html[data-lang="ko"] [data-l="en"]{ display:none !important; }

/* Korean sets its own type, and must never break mid-word. */
[data-l="ko"]{ word-break:keep-all; }
html[data-lang="ko"] .manifesto-body p,
html[data-lang="ko"] .hands-head p,
html[data-lang="ko"] .mirror-head p,
html[data-lang="ko"] .five-head p,
html[data-lang="ko"] .cta p{
  font-family:"Nanum Myeongjo", var(--editorial), serif;
  line-height:1.75;
}

.lang-switch{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.16em;
}
.lang-switch button{
  color:var(--ash); padding:.15em .1em;
  transition:color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.lang-switch button:hover{ color:var(--bone-dim) }
.lang-switch i{ color:var(--ash); font-style:normal; opacity:.5 }
html[data-lang="en"] .lang-switch [data-set="en"],
html[data-lang="ko"] .lang-switch [data-set="ko"]{
  color:var(--bone); border-bottom-color:currentColor;
}

/* ============================================================
   GRAIN + VIGNETTE — the texture that ties the campaigns together
   ============================================================ */
.grain{
  position:fixed; inset:-150%;
  z-index:120; pointer-events:none;
  opacity:.15; mix-blend-mode:overlay;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 700ms steps(2) infinite;
}
@keyframes grainshift{
  0%   { transform:translate(0,0) }
  50%  { transform:translate(-2.5%,1.5%) }
  100% { transform:translate(1.5%,-2%) }
}
.vignette{
  position:fixed; inset:0; z-index:118; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,
    transparent 34%, rgba(4,3,5,.5) 76%, rgba(4,3,5,.92) 100%);
}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:200; pointer-events:none;
  width:32px; height:32px; margin:-16px 0 0 -16px;
  border:1px solid var(--bone-dim); border-radius:50%;
  mix-blend-mode:difference;
  transition:width .55s var(--ease), height .55s var(--ease), margin .55s var(--ease),
             background-color .4s var(--ease), border-color .4s var(--ease);
  will-change:transform;
}
.cursor::after{
  content:attr(data-label);
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  color:var(--void); opacity:0; transition:opacity .3s;
}
.cursor.is-active{
  width:86px; height:86px; margin:-43px 0 0 -43px;
  background:var(--bone); border-color:transparent;
}
.cursor.is-active::after{ opacity:1 }
@media (max-width:900px){ .cursor{ display:none } }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:300;
  background:var(--void);
  display:grid; place-items:center;
  transition:opacity 1s var(--ease), visibility 1s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.pre-mark{ line-height:0; text-align:center; }
.pre-mark svg{
  width:min(58vw, 420px); height:auto;
  fill:var(--bone); color:var(--bone);
  opacity:0; animation:preIn 1.4s var(--ease) .15s forwards;
}
@keyframes preIn{
  from{ opacity:0; clip-path:inset(0 50% 0 50%) }
  to  { opacity:1; clip-path:inset(0 0 0 0) }
}
.pre-bar{
  margin:2.1rem auto 0; width:min(38vw,300px); height:1px;
  background:rgba(233,220,200,.14); position:relative; overflow:hidden;
}
.pre-bar i{
  position:absolute; inset:0 100% 0 0;
  background:var(--blood); transition:right .3s linear;
}
.pre-num{
  margin-top:.85rem; text-align:center;
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.3em; color:var(--ash);
}

/* ============================================================
   WEBGL STAGE
   ============================================================ */
#gl{ position:fixed; inset:0; z-index:0; width:100%; height:100%; }
.gl-veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    /* top scrim — guarantees the nav reads over any frame of the shader */
    linear-gradient(180deg, rgba(8,7,10,.78) 0%, rgba(8,7,10,.34) 9%, rgba(8,7,10,0) 22%),
    /* bottom fade into the page */
    linear-gradient(180deg, rgba(8,7,10,0) 42%, rgba(8,7,10,.72) 80%, var(--void) 100%);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2.4vw,1.9rem) var(--gut);
  mix-blend-mode:difference;
  transition:transform .7s var(--ease), background-color .5s var(--ease),
             padding .5s var(--ease);
}
/* Off the hero the shader is gone, so trade the blend for a real scrim. */
.nav.is-solid{
  mix-blend-mode:normal;
  background:rgba(8,7,10,.62);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  padding-block:clamp(.7rem,1.6vw,1.15rem);
  border-bottom:1px solid rgba(233,220,200,.08);
}
/* Scrolling down hides it; scrolling up brings it back. */
.nav.is-up{ transform:translateY(-105%); }
.nav-mark{ display:block; line-height:0; }
.nav-mark svg{
  width:clamp(112px, 13vw, 168px); height:auto;
  fill:currentColor; color:var(--bone);
}
.nav-links{ display:flex; gap:clamp(1.1rem,2.6vw,2.6rem); }
.nav-links a{
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.2em; text-transform:uppercase;
  position:relative; padding-bottom:2px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .6s var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav-right{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.8rem); }
.nav-loc{ font-family:var(--mono); font-size:var(--step--1); letter-spacing:.26em; }

/* — mobile trigger ————————————————————————— */
.nav-toggle{
  display:none; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.2em; text-transform:uppercase;
}
.nav-toggle-bars{ display:inline-grid; gap:4px; width:20px; }
.nav-toggle-bars i{
  display:block; height:1px; background:currentColor;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.is-menu .nav-toggle-bars i:first-child{ transform:translateY(2.5px) rotate(15deg) }
.is-menu .nav-toggle-bars i:last-child{ transform:translateY(-2.5px) rotate(-15deg) }

@media (max-width:760px){
  .nav-links{ display:none }
  .nav-right{ display:none }   /* language moves into the menu */
  .nav-toggle{ display:flex }
}

/* — fullscreen menu ————————————————————————— */
.menu{
  position:fixed; inset:0; z-index:115;
  background:var(--void);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gut) 2.5rem;
  opacity:0; transition:opacity .55s var(--ease);
}
.menu[hidden]{ display:none }
.menu.is-open{ opacity:1 }
.menu::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%, rgba(142,12,24,.32), transparent 62%);
}
.menu-nav{ display:grid; gap:.2rem; position:relative; }
.menu-nav a{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,11vw,3.6rem); line-height:1.16;
  overflow:hidden; display:block;
}
.menu-nav a span{
  display:block; transform:translateY(110%);
  transition:transform .8s var(--ease); transition-delay:var(--d,0ms);
}
.menu-nav a em{ font-style:normal }
html[data-lang="ko"] .menu-nav a{ font-family:"Nanum Myeongjo", serif; }
.menu.is-open .menu-nav a span{ transform:none }
.menu-nav a:nth-child(1) span{ --d:60ms }
.menu-nav a:nth-child(2) span{ --d:120ms }
.menu-nav a:nth-child(3) span{ --d:180ms }
.menu-nav a:nth-child(4) span{ --d:240ms }
.menu-nav a:nth-child(5) span{ --d:300ms }
.menu-nav a:nth-child(6) span{ --d:360ms }
.menu-nav a:nth-child(7) span{ --d:420ms }
.menu-nav a:active{ color:var(--ember) }

.menu-foot{
  position:absolute; left:var(--gut); right:var(--gut); bottom:2.2rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.14em; color:var(--ash);
  opacity:0; transition:opacity .6s var(--ease) .38s;
}
.menu.is-open .menu-foot{ opacity:1 }

body.is-menu{ overflow:hidden }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
main{ position:relative; z-index:2; }
.wrap{ padding-inline:var(--gut); }
.rule{ height:1px; background:rgba(233,220,200,.12); }

.eyebrow{
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.32em; text-transform:uppercase; color:var(--ash);
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{
  content:""; width:clamp(24px,4vw,60px); height:1px; background:var(--blood);
}

[data-reveal]{
  opacity:0; transform:translateY(32px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

.line-mask{ display:block; overflow:hidden; }
.line-mask > span{
  display:block; transform:translateY(105%);
  transition:transform 1.2s var(--ease); transition-delay:var(--d,0ms);
}
.line-mask.is-in > span{ transform:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  height:100svh; min-height:500px;
  display:grid; place-items:center; text-align:center;
  position:relative;
}
/* The shader is alive, so the frame behind the mark is unpredictable.
   A soft centred scrim guarantees the wordmark reads on every frame —
   difference blending alone lost it against the bright passages. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 38% at 50% 48%,
    rgba(5,4,6,.78) 0%, rgba(5,4,6,.46) 48%, rgba(5,4,6,0) 78%);
}
.hero-inner{ position:relative; z-index:1; padding-inline:var(--gut); }
/* — the official vector wordmark ————————————————— */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.hero-mark{ display:block; line-height:0; }
.hero-mark svg{
  width:min(78vw, 1120px); height:auto;
  fill:var(--bone); color:var(--bone);
  /* the mark opens outward from the mirror axis */
  clip-path:inset(0 50% 0 50%);
  transition:clip-path 1.7s var(--ease) .3s;
}
.is-ready .hero-mark svg{ clip-path:inset(0 0 0 0); }
.hero-sub{
  margin-top:clamp(.9rem,2vw,1.6rem);
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.6em; text-indent:.6em; color:var(--bone-dim);
  opacity:0; transition:opacity 1.6s var(--ease) 1.1s;
}
.is-ready .hero-sub{ opacity:1 }

.scroll-cue{
  position:absolute; left:50%; bottom:clamp(1.6rem,4vh,3rem);
  transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:.32em;
  color:var(--ash); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  opacity:0; transition:opacity 1.4s var(--ease) 1.6s;
}
.is-ready .scroll-cue{ opacity:1 }
.scroll-cue i{
  width:1px; height:clamp(32px,6vh,54px);
  background:rgba(110,103,89,.4); position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; inset:0; background:var(--bone);
  animation:cue 2.4s var(--ease-io) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{
  padding:clamp(7rem,18vh,16rem) 0 clamp(6rem,14vh,12rem);
  background:linear-gradient(180deg, var(--void) 0%, #12060A 45%, var(--void) 100%);
}
.manifesto-head{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:1rem; margin-bottom:clamp(3rem,8vh,7rem);
}
.manifesto-body{ max-width:60ch; margin-inline:auto; }
.manifesto-body p{
  font-family:var(--editorial);
  font-size:var(--step-2); line-height:1.42;
  color:var(--bone); margin-bottom:1.5em;
  font-weight:300;
}
.manifesto-body p:first-child{
  font-style:italic; color:var(--ember);
  font-size:var(--step-3); line-height:1.2;
}
.manifesto-body p em{ color:var(--sage); font-style:italic; }
.manifesto-body p strong{ color:var(--flesh); font-weight:400; }

/* ============================================================
   THE FIVE — the storybook spirits.
   Reproduces the printed product card: a black field, a hairline
   double rule in the spirit's own colour, name / hanja / epithet,
   a dropped diamond, then the text.
   ============================================================ */
.five{
  padding:clamp(5rem,13vh,11rem) 0 clamp(4rem,10vh,8rem);
  background:var(--void); position:relative; overflow:hidden;
}
.five-head{ max-width:56ch; margin-bottom:clamp(3rem,8vh,6rem); }
.five-head h2{
  font-family:"Nanum Myeongjo", var(--display), serif;
  font-weight:400; font-size:var(--step-3); line-height:1.1;
  margin:.7rem 0 1rem;
}
.five-head h2 span{
  display:block; margin-top:.35em;
  font-family:var(--display); font-size:.42em;
  letter-spacing:.16em; color:var(--bone-dim);
}
.five-head p{
  font-family:var(--editorial); font-size:var(--step-1);
  font-weight:300; line-height:1.55; color:var(--bone-dim);
}

.rites{
  display:grid; gap:clamp(2.4rem,6vh,5rem);
  padding-inline:var(--gut);
  justify-items:center;
}

.rite{ width:min(100%, 620px); position:relative; }

/* the spirit's colour bleeds out behind its card */
.rite::before{
  content:""; position:absolute; inset:-14% -22%;
  background:radial-gradient(60% 55% at 50% 45%,
    color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%);
  filter:blur(60px); opacity:0;
  transition:opacity 1.4s var(--ease);
  pointer-events:none;
}
.rite.is-in::before{ opacity:.5 }
.rite:hover::before{ opacity:.85 }

.rite-card{
  position:relative;
  background:linear-gradient(180deg, #0A080B, #060406);
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding:clamp(2.2rem,5vw,3.6rem) clamp(1.4rem,4vw,3.2rem);
  text-align:center;
}
/* the inner hairline, as on the printed card */
.rite-card::after{
  content:""; position:absolute; inset:7px; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.rite-card h3{
  font-family:"Nanum Myeongjo", serif; font-weight:400;
  font-size:clamp(1.9rem,5.5vw,2.9rem); line-height:1.1;
  color:var(--bone); letter-spacing:.04em;
}
.rite-card .hanja{
  font-family:"Nanum Myeongjo", serif;
  font-size:clamp(.95rem,2.4vw,1.2rem);
  color:color-mix(in srgb, var(--accent) 70%, var(--bone-dim));
  letter-spacing:.24em; margin-top:.25em;
}
.rite-card .epithet{
  font-family:"Nanum Gothic", var(--mono), sans-serif;
  font-size:var(--step-0); color:var(--bone-dim);
  margin-top:.7em; letter-spacing:.02em;
}
.rite-card .epithet.en{
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash); margin-top:.5em;
}

/* the vertical rule dropping into a diamond */
.rite .drop{
  display:block; width:1px; height:clamp(46px,7vh,74px);
  margin:clamp(1.4rem,3.4vh,2.4rem) auto clamp(1.6rem,4vh,2.8rem);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 85%, transparent),
    color-mix(in srgb, var(--accent) 20%, transparent) 78%, transparent);
  position:relative;
}
.rite .drop::after{
  content:""; position:absolute; left:50%; bottom:-9px;
  width:9px; height:14px; margin-left:-4.5px;
  background:var(--accent);
  clip-path:polygon(50% 0, 100% 32%, 50% 100%, 0 32%);
}

.rite-body{ text-align:left; }
.rite-body p{
  font-family:"Nanum Gothic", sans-serif;
  font-size:clamp(.9rem,2.1vw,1rem); line-height:1.95;
  color:var(--bone); margin-bottom:1.25em;
  word-break:keep-all;            /* never split a Korean word */
}
.rite-body p:last-child{ margin-bottom:0 }

/* Only one language paints at a time, so the divider that used to sit
   between the two blocks is gone. */
.rite-body.en{ margin-top:0; padding-top:0; border-top:0; }
.rite-body.en p{
  font-family:var(--editorial); font-weight:300;
  font-size:clamp(1rem,2.3vw,1.15rem); line-height:1.62;
  color:var(--bone-dim);
}
.rite-body.en em{ color:color-mix(in srgb, var(--accent) 60%, var(--bone)); font-style:italic; }

.rite-card footer{
  margin-top:clamp(1.8rem,4vh,2.6rem);
  padding-top:clamp(1rem,2.4vh,1.5rem);
  border-top:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.16em;
}
.rite-card footer span:first-child{
  text-transform:uppercase; letter-spacing:.28em; color:var(--ash);
}
.rite-card footer span:last-child{
  color:color-mix(in srgb, var(--accent) 68%, var(--bone));
}

/* Older engines without color-mix still get a readable card. */
@supports not (color: color-mix(in srgb, red, blue)){
  .rite-card{ border-color:rgba(233,220,200,.3) }
  .rite-card::after{ border-color:rgba(233,220,200,.14) }
  .rite-card .hanja,
  .rite-card footer span:last-child{ color:var(--bone-dim) }
  .rite::before{ display:none }
}

/* ============================================================
   COLLECTION — horizontal gallery
   ============================================================ */
.collection{
  padding:clamp(5rem,12vh,10rem) 0; overflow:hidden;
  background:var(--void);   /* opaque — the shader must not read through */
}
.collection-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:1.4rem; margin-bottom:clamp(2.4rem,6vh,4.5rem);
}
.collection-head h2{
  font-family:var(--display); font-weight:400;
  font-size:var(--step-3); line-height:1; letter-spacing:.02em;
}
.rail{
  display:flex; gap:clamp(1rem,2.4vw,2.4rem);
  padding-inline:var(--gut);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
}
.rail::-webkit-scrollbar{ display:none }

.look{
  flex:0 0 clamp(240px, 30vw, 420px);
  scroll-snap-align:center;
}
.look-frame{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:var(--void-2);
  transition:transform 1.1s var(--ease);
}
.look:hover .look-frame{ transform:scale(.975) }
.look-frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease), filter 1.4s var(--ease);
  filter:saturate(.9) contrast(1.08);
}
.look:hover .look-frame img{ transform:scale(1.08); filter:saturate(1.1) contrast(1.16); }

/* ——— procedural stand-in ————————————————————————
   Photography is not shot into the site yet. Rather than grey boxes,
   each frame renders a marbled field in the campaign palette: soft
   gradients pushed through a high contrast filter, which thresholds
   them into hard organic edges. Swap for <img> when the shoot lands. */
.look-frame[data-fill]::before{
  content:""; position:absolute; inset:-18%;
  background:
    radial-gradient(38% 30% at 28% 20%, var(--ember) 0%, transparent 62%),
    radial-gradient(44% 34% at 72% 38%, var(--sage) 0%, transparent 58%),
    radial-gradient(50% 40% at 44% 68%, var(--blood) 0%, transparent 60%),
    radial-gradient(70% 55% at 60% 96%, var(--oxblood) 0%, transparent 66%),
    linear-gradient(160deg, #16060B, var(--oxblood) 58%, var(--void));
  filter:blur(26px) contrast(2.2) saturate(1.2);
  transform:scale(1.04);
  transition:transform 1.6s var(--ease), filter 1.6s var(--ease);
}
.look-frame[data-fill="2"]::before{
  background:
    radial-gradient(34% 28% at 58% 26%, var(--flesh) 0%, transparent 60%),
    radial-gradient(40% 32% at 34% 52%, var(--ember) 0%, transparent 58%),
    radial-gradient(56% 44% at 50% 84%, var(--blood) 0%, transparent 62%),
    linear-gradient(200deg, #1A0206, var(--oxblood) 55%, var(--void));
}
.look-frame[data-fill="3"]::before{
  background:
    radial-gradient(30% 24% at 32% 34%, var(--magenta) 0%, transparent 58%),
    radial-gradient(32% 26% at 68% 58%, var(--cyan) 0%, transparent 56%),
    radial-gradient(34% 28% at 52% 16%, var(--toxic) 0%, transparent 54%),
    radial-gradient(40% 32% at 20% 76%, var(--amber) 0%, transparent 56%),
    linear-gradient(140deg, var(--void), #24082A 70%, var(--void));
  filter:blur(24px) contrast(2.6) saturate(1.5);
}
.look-frame[data-fill="4"]::before{
  background:
    radial-gradient(36% 30% at 46% 26%, var(--sage) 0%, transparent 60%),
    radial-gradient(30% 26% at 70% 58%, var(--flesh) 0%, transparent 56%),
    radial-gradient(58% 46% at 32% 88%, var(--sage-deep) 0%, transparent 64%),
    linear-gradient(180deg, #0D1108, #101408 60%, var(--void));
}
/* mirror fold + edge fall-off, so each frame echoes the hero */
.look-frame[data-fill]::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,4,7,.85) 0%, transparent 26%,
                           transparent 74%, rgba(6,4,7,.85) 100%),
    linear-gradient(0deg,  rgba(6,4,7,.9) 0%, transparent 34%);
}
.look:hover .look-frame[data-fill]::before{
  transform:scale(1.16) scaleX(-1); filter:blur(18px) contrast(2.5) saturate(1.35);
}

/* Once the shader plate is baked in, it replaces the CSS stand-in. */
.look-frame.has-plate::before,
.mirror-half.has-plate::before{ display:none; }

.look-frame.has-plate{
  background-repeat:no-repeat; background-position:center;
  background-size:104% auto;
  transition:background-size 1.5s var(--ease), filter 1.5s var(--ease);
  filter:saturate(.96) contrast(1.04);
}
.look:hover .look-frame.has-plate{
  background-size:118% auto; filter:saturate(1.14) contrast(1.12);
}

.mirror-half.has-plate{
  background-repeat:no-repeat; background-position:center; background-size:cover;
}

.look-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:1rem; font-family:var(--mono);
  font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase;
}
.look-meta .n{ color:var(--ash) }
.look-meta .t{ color:var(--bone-dim) }

.rail-hint{
  margin:clamp(1.8rem,4vh,3rem) var(--gut) 0;
  display:flex; align-items:center; gap:1rem;
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.26em; text-transform:uppercase; color:var(--ash);
}
.rail-hint .track{ flex:1; height:1px; background:rgba(233,220,200,.12); position:relative; }
.rail-hint .track i{
  position:absolute; top:0; left:0; height:1px; width:18%;
  background:var(--blood); transition:transform .1s linear;
}

/* ============================================================
   MIRROR — the interactive centrepiece
   ============================================================ */
.mirror{
  padding:clamp(5rem,12vh,10rem) 0;
  background:linear-gradient(180deg, var(--void), #0B0509 50%, var(--void));
}
.mirror-head{ margin-bottom:clamp(2rem,5vh,3.4rem); max-width:52ch; }
.mirror-head h2{
  font-family:var(--display); font-weight:400;
  font-size:var(--step-3); line-height:1.02; margin:.6rem 0 1rem;
}
.mirror-head p{
  font-family:var(--editorial); font-size:var(--step-1);
  color:var(--bone-dim); font-weight:300; line-height:1.5;
}
.mirror-stage{
  position:relative; margin-inline:var(--gut);
  aspect-ratio:16/9; min-height:340px; overflow:hidden;
  background:var(--void-2); touch-action:pan-y;
}
@media (max-width:760px){ .mirror-stage{ aspect-ratio:4/5 } }
.mirror-half{ position:absolute; inset:0; }
.mirror-half.a::before,
.mirror-half.b::before{
  content:""; position:absolute; inset:0;
}
.mirror-half.a::before{
  background:
    radial-gradient(60% 70% at 50% 40%, var(--ember) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 110%, var(--oxblood) 0%, transparent 62%),
    linear-gradient(180deg, #1C0206, var(--void));
  filter:blur(10px) saturate(1.1); transform:scale(1.1);
}
.mirror-half.b{
  clip-path:inset(0 0 0 var(--split,50%));
}
.mirror-half.b::before{
  background:
    radial-gradient(55% 50% at 40% 35%, var(--toxic) 0%, transparent 50%),
    radial-gradient(60% 55% at 72% 60%, var(--magenta) 0%, transparent 52%),
    radial-gradient(80% 70% at 50% 100%, var(--cyan) 0%, transparent 55%),
    linear-gradient(200deg, var(--void), #24082A 70%, var(--void));
  filter:blur(10px) saturate(1.25); transform:scale(1.1) scaleX(-1);
}
.mirror-half img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.mirror-half.b img{ transform:scaleX(-1) }
.mirror-line{
  position:absolute; top:0; bottom:0; left:var(--split,50%);
  width:1px; background:var(--bone); z-index:3; pointer-events:none;
  box-shadow:0 0 22px 2px rgba(233,220,200,.35);
}
.mirror-line::after{
  content:""; position:absolute; top:50%; left:50%;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border:1px solid var(--bone); border-radius:50%;
  background:rgba(8,7,10,.4); backdrop-filter:blur(4px);
}
.mirror-tag{
  position:absolute; bottom:1.2rem; z-index:4;
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.26em; text-transform:uppercase; color:var(--bone);
  mix-blend-mode:difference; pointer-events:none;
}
.mirror-tag.l{ left:1.2rem } .mirror-tag.r{ right:1.2rem }

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive{ padding:clamp(5rem,12vh,10rem) 0; background:var(--void); }
.archive h2{
  font-family:var(--display); font-weight:400;
  font-size:var(--step-3); line-height:1; margin:.7rem 0 clamp(2rem,5vh,3.5rem);
}
.arc-list{ border-top:1px solid rgba(233,220,200,.12) }
.arc-row{
  position:relative; display:grid;
  grid-template-columns:5rem 1fr auto;
  gap:1rem; align-items:center;
  padding:clamp(1.1rem,2.6vh,1.9rem) 0;
  border-bottom:1px solid rgba(233,220,200,.12);
  transition:color .5s var(--ease), padding-left .6s var(--ease);
}
.arc-row:hover{ color:var(--ember); padding-left:1.2rem; }
.arc-row .yr{
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.16em; color:var(--ash);
  transition:color .5s var(--ease);
}
.arc-row:hover .yr{ color:var(--ember) }
.arc-row .ttl{
  font-family:var(--display); font-weight:400;
  font-size:var(--step-2); line-height:1.1; letter-spacing:.02em;
}
.arc-row .st{
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ash);
}
@media (max-width:640px){
  .arc-row{ grid-template-columns:3.6rem 1fr }
  .arc-row .st{ display:none }
}

/* ============================================================
   THE HANDS — collaborators, given real estate rather than a
   credit line. The point of the brand is that they are named.
   ============================================================ */
.hands{
  padding:clamp(5rem,12vh,10rem) 0;
  background:var(--void);
}
.hands-head{ max-width:60ch; margin-bottom:clamp(2.6rem,7vh,5rem); }
.hands-head h2{
  font-family:var(--display); font-weight:400;
  font-size:var(--step-3); line-height:1.04; margin:.7rem 0 1rem;
}
.hands-head p{
  font-family:var(--editorial); font-weight:300;
  font-size:var(--step-1); line-height:1.55; color:var(--bone-dim);
}

.hand-list{ list-style:none; border-top:1px solid rgba(233,220,200,.12); }
.hand{
  display:grid; grid-template-columns:4.5rem 1fr;
  gap:clamp(1rem,3vw,2.4rem);
  padding:clamp(1.8rem,4.5vh,3.2rem) 0;
  border-bottom:1px solid rgba(233,220,200,.12);
  transition:padding-left .7s var(--ease);
}
.hand:hover{ padding-left:clamp(.4rem,1.6vw,1.4rem) }

.hand-n{
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.18em; color:var(--ash); padding-top:.55em;
}
.hand-main{ max-width:62ch }

.hand h3{
  font-family:var(--display); font-weight:400;
  font-size:var(--step-2); line-height:1.1; letter-spacing:.01em;
  color:var(--bone); transition:color .5s var(--ease);
}
.hand:hover h3{ color:var(--ember) }
.hand h3 span{
  font-family:"Nanum Myeongjo", serif; font-size:.6em;
  color:var(--bone-dim); margin-left:.5em; letter-spacing:.06em;
  white-space:nowrap;   /* a name must never break across lines */
}
.hand-role{
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--sage); margin:.7rem 0 1.1rem;
}
.hand-say{
  font-family:var(--editorial); font-weight:300;
  font-size:var(--step-1); line-height:1.55; color:var(--bone);
}
.hand-note{
  margin-top:.9rem;
  font-family:var(--mono); font-size:var(--step--1);
  line-height:1.75; letter-spacing:.04em; color:var(--ash);
}
.hand-note em{ color:var(--bone-dim); font-style:normal }

@media (max-width:640px){
  .hand{ grid-template-columns:2.8rem 1fr }
}

/* ============================================================
   WHOLESALE / CTA
   ============================================================ */
.cta{
  padding:clamp(6rem,15vh,13rem) 0;
  background:linear-gradient(180deg, var(--void), #140208 55%, var(--void));
  text-align:center;
}
.cta h2{
  font-family:var(--display); font-weight:400;
  font-size:var(--step-3); line-height:1.04; max-width:20ch;
  margin:1.2rem auto 1.6rem;
}
.cta p{
  font-family:var(--editorial); font-size:var(--step-1);
  color:var(--bone-dim); max-width:50ch; margin:0 auto 2.6rem;
  font-weight:300;
}
.eyebrow.c{ justify-content:center }
.btn{
  display:inline-flex; align-items:center; gap:.9rem;
  padding:1.05rem 2.2rem;
  border:1px solid rgba(233,220,200,.28);
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.26em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--blood); transform:translateY(101%);
  transition:transform .7s var(--ease);
}
.btn:hover::before{ transform:none }
.btn:hover{ border-color:var(--blood) }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  padding:clamp(3.5rem,8vh,6rem) 0 clamp(1.6rem,4vh,2.6rem);
  border-top:1px solid rgba(233,220,200,.12);
  background:var(--void); position:relative; z-index:2;
}
.foot-grid{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:clamp(3rem,8vh,6rem);
}
.foot-col h3{
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--ash); margin-bottom:1.2rem; font-weight:400;
}
.foot-col ul{ list-style:none; display:grid; gap:.6rem; }
.foot-col a{
  font-family:var(--mono); font-size:var(--step-0);
  color:var(--bone-dim); transition:color .4s var(--ease);
}
.foot-col a:hover{ color:var(--ember) }

.news{ display:flex; border-bottom:1px solid rgba(233,220,200,.24); }
.news input{
  flex:1; background:none; border:0; outline:0; color:var(--bone);
  font-family:var(--mono); font-size:var(--step-0);
  padding:.6rem 0; min-width:0;
}
.news input::placeholder{ color:var(--ash) }
.news button{
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.2em; color:var(--bone-dim); padding-left:1rem;
  transition:color .4s var(--ease);
}
.news button:hover{ color:var(--ember) }
.news-note{
  margin-top:.7rem; font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; color:var(--ash); line-height:1.5;
}

.foot-mark{
  line-height:0; text-align:center;
  margin-bottom:clamp(1.6rem,4vh,2.6rem); user-select:none;
}
/* outline only — the mark sits back rather than shouting */
.foot-mark svg{
  width:min(92%, 1000px); height:auto;
  fill:none; stroke:rgba(233,220,200,.26); stroke-width:.6;
  vector-effect:non-scaling-stroke;
}
.foot-legal{
  margin-bottom:clamp(1rem,2.4vh,1.6rem);
  padding-bottom:clamp(1rem,2.4vh,1.6rem);
  border-bottom:1px solid rgba(233,220,200,.08);
  font-family:"Nanum Gothic", var(--mono), sans-serif;
  font-size:11px; line-height:1.9; color:var(--ash);
  word-break:keep-all;
}
.foot-legal p{ margin:0 }
.foot-legal span{ font-family:var(--mono); letter-spacing:.1em; }
.foot-legal a{ color:var(--ash); transition:color .4s var(--ease); }
.foot-legal a:hover{ color:var(--bone-dim) }

.foot-base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash);
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1; transform:none }
  .line-mask > span{ transform:none }
  .grain{ animation:none }
}