/* v2.css — Redesign layer (Duotone / Editorial). Loaded after style.css. Content untouched. */
:root{
  --font-display:'Switzer','Pretendard Variable',Pretendard,system-ui,sans-serif;
  --font-body:'Switzer','Pretendard Variable',Pretendard,system-ui,sans-serif;
  --acc:#19f0ff; --duo-lo:#0a0a5c; --duo-hi:#19f0ff;
  --text-hero:clamp(3.2rem,1rem + 7.6vw,9.6rem);
  --text-3xl:clamp(2.8rem,1rem + 6vw,7rem);
  --text-2xl:clamp(2rem,1rem + 3.2vw,4.25rem);
}
html[data-theme='dark']{
  --paper:#08081a; --ink:#ecebe6; --ink-deep:#050512; --ink-muted:#8e8ea6; --link:#ecebe6;
  --rule:#26263c; --cyan-pale:transparent; --green:var(--acc); --pink:transparent; --pink-pale:transparent;
  color-scheme:dark;
}
html[data-theme='light']{
  --paper:#f4f3ef; --ink:#111114; --ink-deep:#08081a; --ink-muted:#66666e; --link:#111114;
  --rule:#d4d3cc; --cyan-pale:transparent; --green:var(--acc); --pink:transparent; --pink-pale:transparent;
}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
::selection{background:var(--acc);color:#000}

/* remove decorative layer */
.tape,.glitch{display:none!important}
.dotfield,.shards{background-image:none!important}
.dotfield::before,.dotfield::after,.shards::before,.shards::after{display:none!important}
.band-cyan,.band-cyan-pale{background:transparent!important;border-top:1px solid var(--rule);}
.hero-card .card::after,.p-head .card::after,.cta::before,.cta::after{display:none!important}

/* links & accent */
a{color:inherit;text-decoration-color:var(--acc);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
.prose a,.facts a,.credits a{text-decoration:underline;text-decoration-color:var(--acc)}
.arrow-link{color:var(--ink);font-family:var(--font-display);font-weight:500;letter-spacing:.02em}
.arrow-link:hover{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc)!important;outline-offset:3px}

/* type system */
.page-title,.section-title,.p-title,.hero-name,.cta h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.045em}
.page-title{font-size:var(--text-3xl);line-height:.88}
.section-title{font-size:var(--text-2xl);line-height:.92;font-weight:600}
.eyebrow,.kicker,.card-w .yr,.news .d,.facts dt{font-family:var(--font-display);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}
.kicker,.kicker.cyan,.kicker.pink{background:transparent!important;color:var(--ink-muted)!important;padding:0;border:0}
.eyebrow{color:var(--ink-muted)}
.lead{font-family:var(--font-serif);color:var(--ink);font-size:clamp(1.5rem,1rem + 1.8vw,2.6rem);line-height:1.18;max-width:28ch}
.quote-big{font-size:clamp(1.9rem,1rem + 2.6vw,3.6rem);line-height:1.08;max-width:22ch;letter-spacing:-.01em}
.quote-big::before,.quote-big::after{color:var(--acc)}
html[data-lang='ko'] .page-title,html[data-lang='ko'] .section-title,html[data-lang='ko'] .p-title,html[data-lang='ko'] .cta h2{font-family:'Pretendard Variable',sans-serif;font-weight:800;letter-spacing:-.04em}
.muted{color:var(--ink-muted)}
.section{padding-block:clamp(4rem,9vw,9rem)}

/* buttons */
.btn,.btn.green{background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:0;font-family:var(--font-display);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;padding:.9rem 1.4rem}
.btn:hover,.btn.green:hover{background:var(--ink);color:var(--paper)}

/* header */
.site-header{background:transparent;position:relative;z-index:30}
html[data-theme='dark'] .site-header{background:var(--paper)}
.hdr-nav{border-bottom:1px solid var(--rule)}
.logo .lw{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.logo .lw b{color:var(--acc);font-weight:700}
.logo .lk{color:var(--ink-muted)}
.primary a{font-family:var(--font-display);font-weight:500;color:var(--ink-muted);letter-spacing:.1em;font-size:.78rem;border-bottom:1px solid transparent}
.primary a:hover{color:var(--ink);border-bottom-color:var(--ink-muted)}
.primary a[aria-current='page']{color:var(--ink);border-bottom-color:var(--acc)}
.lang{border:1px solid var(--rule)}
.lang button{color:var(--ink-muted)}
.lang button[aria-pressed='true']{background:transparent;color:var(--acc)}
.menu-btn{border:1px solid var(--ink);color:var(--ink);font-family:var(--font-display);font-weight:500}
.hdr-util a{color:var(--ink-muted)}

/* ---------- DUOTONE ---------- */
.hero-media,.card-w .thumb,.p-hero{background:var(--duo-lo)!important;isolation:isolate}
.hero-media img,.card-w .thumb img,.p-hero img{filter:grayscale(1) brightness(1.22) contrast(1.32);mix-blend-mode:screen}
.hero-media::after,.card-w .thumb::after,.p-hero::after{content:'';position:absolute;inset:0;background:var(--duo-hi);mix-blend-mode:multiply;pointer-events:none;z-index:1;transition:opacity .7s cubic-bezier(.2,.7,.2,1)}
.card-w .thumb img{transition:filter .7s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.card-w .thumb{transition:background-color .7s}
/* hover reveals the original colour photograph */
.card-w:hover .thumb,.card-w:focus-visible .thumb{background:#000!important}
.card-w:hover .thumb img,.card-w:focus-visible .thumb img{filter:none}
.card-w:hover .thumb::after,.card-w:focus-visible .thumb::after{opacity:0}
.card-w:hover .thumb img{transform:scale(1.025)}
.card-w .thumb .ph{background:var(--duo-lo)!important}
.card-w .thumb .ph span{color:var(--acc);font-family:var(--font-display);letter-spacing:-.03em}


/* ---------- HOME HERO ---------- */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));min-height:min(92vh,980px);border-bottom:1px solid var(--rule)}
.hero-media{grid-column:7 / -1;grid-row:1;aspect-ratio:auto;min-height:0;height:100%;position:relative}
.hero-media img{position:absolute;inset:0;object-position:58% 50%}
.hero-credit{z-index:3;background:transparent;color:#fff;font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;right:1.25rem;bottom:1.1rem}
.hero-credit:hover{color:var(--acc)}
.hero-card{grid-column:1 / -1;grid-row:1;margin:0;max-width:none;z-index:2;display:flex;align-items:flex-end;padding-bottom:clamp(2rem,5vw,4.5rem);pointer-events:none}
.hero-card .card,.hero-card .card.has-portrait{background:transparent!important;color:var(--ink);padding:0;max-width:calc(50% - 2rem);width:100%;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:2.2rem;pointer-events:auto}
.hero-name{font-size:var(--text-hero);line-height:.82;font-weight:700;letter-spacing:-.06em;color:var(--ink);mix-blend-mode:normal}
.hero-name small{font-size:clamp(.9rem,.7rem + .6vw,1.25rem);font-weight:500;letter-spacing:.2em;margin-top:1.4rem;color:var(--ink-muted)}
.hero-roles{font-family:var(--font-display);font-weight:500;letter-spacing:.16em;font-size:.74rem;color:var(--ink);margin-top:2rem;max-width:38ch;line-height:1.7}
.hero-tag{font-family:var(--font-serif);font-size:clamp(1.3rem,1rem + 1vw,2rem);color:var(--acc);margin-top:.6rem}
.hero-portrait,.hero-card .hero-portrait{width:clamp(64px,5.5vw,92px);margin:0;border:0;align-self:end;filter:grayscale(1) contrast(1.05);opacity:.9;transition:filter .5s,opacity .5s}
.hero-portrait:hover{filter:none;opacity:1}
.hero-portrait img{border:0;box-shadow:none}
@media (max-width:860px){
  .hero{display:block;min-height:0}
  .hero-media{height:auto;aspect-ratio:4/5;width:100%}
  .hero-card{padding-top:1.75rem;padding-bottom:2.5rem}
  .hero-card .card{max-width:none}
  .hero-name{font-size:clamp(3.2rem,15vw,5.5rem)}
}

/* ---------- HOME SECTIONS ---------- */
.panel{background:transparent;color:var(--ink);padding:0;border-top:1px solid var(--ink)}
.panel h2{font-family:var(--font-display);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);padding-top:1rem}
.panel ul{gap:0}
.panel li{border-bottom:1px solid var(--rule)}
.panel a{color:var(--ink);display:flex;justify-content:space-between;padding:.85rem 0;font-family:var(--font-display);font-weight:500;font-size:1rem;letter-spacing:-.01em}
.panel a::after{content:'→';color:var(--ink-muted)}
.panel a:hover{color:var(--acc)}
.panel a:hover::after{color:var(--acc)}
.panel p{color:var(--ink-muted)}

.news{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;border-top:1px solid var(--ink)}
.news li{background:transparent;padding:1.5rem 1.75rem 1.75rem 0;border-right:1px solid var(--rule);margin-right:1.75rem}
.news li:last-child{border-right:0}
.news .d{color:var(--acc)}

/* Selected work — asymmetric editorial grid */
.cards{gap:clamp(1.5rem,3vw,3rem) clamp(1.25rem,2.5vw,2.5rem);counter-reset:w}
.cards>li{counter-increment:w}
.card-w{background:transparent;color:var(--ink)}
.card-w .meta{padding-top:1rem;gap:.3rem;position:relative}
.card-w .meta::before{content:counter(w,decimal-leading-zero);font-family:var(--font-display);font-size:.72rem;font-weight:500;color:var(--acc);letter-spacing:.1em}
.card-w .t-en{font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,1rem + .8vw,1.75rem);letter-spacing:-.03em;line-height:1.05}
.card-w:hover .t-en{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px}
.card-w .yr{color:var(--ink-muted)}
.card-w .t-ko,.card-w .role{color:var(--ink-muted)}
@media (min-width:861px){
  .cards{grid-template-columns:repeat(12,minmax(0,1fr))}
  .cards>li{grid-column:span 4}
  /* home (6 items): 7/5, 5/7, 4/4/4 rhythm */
  #feat-h~.cards>li:nth-child(1),.section [aria-labelledby='feat-h'] .cards>li:nth-child(1){grid-column:1 / span 7}
  .cards>li .thumb{aspect-ratio:4/3}
  /* work index: offset the middle column for a staggered rhythm */
  .cards>li:nth-child(3n+2){transform:translateY(clamp(2rem,5vw,5rem))}
  .cards{padding-bottom:clamp(2rem,5vw,5rem)}
}
@media (max-width:860px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* filters */
.filters{gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding-block:.25rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.filters button{background:transparent!important;border:0!important;color:var(--ink-muted)!important;font-family:var(--font-display);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.74rem;padding:.9rem 1.3rem .9rem 0}
.filters button[aria-pressed='true']{color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:.5em}
.filters .count{background:transparent!important;color:var(--acc)!important;margin-left:.35rem}

/* four imaginations — typographic index */
.foci{gap:0;counter-reset:f}
.foci li{background:transparent!important;padding:1.2rem 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:3.2rem 1fr;align-items:baseline;column-gap:1rem}
.foci li:last-child{border-bottom:1px solid var(--rule)}
.foci li::before{font-family:var(--font-display);font-weight:500;font-size:.8rem;color:var(--acc);margin:0;grid-row:1 / span 3;letter-spacing:.1em}
.foci .f-t{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,1rem + 1.6vw,2.5rem);line-height:1.02;letter-spacing:-.035em;margin-bottom:.5rem}
.foci li>*:not(.f-t){grid-column:2}
.foci.four{grid-template-columns:1fr!important}

.courses li{background:transparent!important;border-top:1px solid var(--rule);padding:1.1rem 0!important}
.courses h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;font-size:clamp(1.3rem,1rem + 1.2vw,2.1rem)}

.cta{background:transparent;border-top:1px solid var(--ink);padding:clamp(2.5rem,5vw,4.5rem) 0 0;align-items:flex-end}
.cta h2{font-size:var(--text-2xl);max-width:14ch;line-height:.92}
.cta p{color:var(--ink-muted)}

/* footer */
.site-footer{background:var(--ink-deep);color:#a7a7ba;border-top:1px solid var(--rule);margin-top:clamp(4rem,8vw,8rem)}
.site-footer .flogo{font-family:var(--font-display);letter-spacing:-.04em;font-weight:700}
.site-footer .flogo small,.site-footer h2{color:var(--acc)}
.site-footer a{color:#ecebe6}
.site-footer a:hover{color:var(--acc)}

/* ---------- PROJECT PAGES ---------- */
.p-hero{position:relative;overflow:hidden}
.p-hero img{width:100%;height:min(88vh,920px);max-height:none;object-fit:cover}
.p-hero::before{content:'';position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to bottom,transparent,var(--paper));z-index:2;pointer-events:none}
.p-head{margin-top:clamp(-14rem,-18vw,-6rem);z-index:3}
.p-head.nohero{margin-top:clamp(2rem,5vw,4rem)}
.p-head .card{background:transparent!important;padding:0;max-width:none}
.p-title{font-size:clamp(2.8rem,1rem + 7vw,8.5rem);line-height:.86;letter-spacing:-.055em;max-width:14ch}
.p-title .ko{font-size:clamp(1rem,.8rem + .7vw,1.4rem);font-weight:600;letter-spacing:.04em;color:var(--ink-muted);margin-bottom:1rem}
.p-head .eyebrow{color:var(--acc)}
.p-body{gap:clamp(2rem,6vw,7rem)}
.lines.prose>p:first-child{font-size:clamp(1.15rem,1rem + .5vw,1.45rem);line-height:1.5;color:var(--ink)}
.prose{color:var(--ink)}
.prose p{max-width:66ch}
.facts{background:transparent;padding:0;border-top:1px solid var(--ink)}
.facts dl{gap:0}
.facts dl>div{border-bottom:1px solid var(--rule);padding:.85rem 0}
.facts dt{color:var(--ink-muted)}
.facts dd{color:var(--ink)}
.credits{border-top:1px solid var(--rule)}
.gallery{columns:3 300px;column-gap:clamp(.75rem,1.5vw,1.25rem)}
.gallery a{background:transparent;margin-bottom:clamp(.75rem,1.5vw,1.25rem)}
.gallery a:hover img{opacity:.8}
.pn{border-top:1px solid var(--ink)}
.pn a{background:transparent!important;color:var(--ink)}
.pn .tt{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;font-size:clamp(1.3rem,1rem + 1.2vw,2.2rem)}
.pn a:hover .tt{color:var(--acc)}
.lb{background:rgba(5,5,18,.96)}

/* ---------- LIGHT (reading) PAGES ---------- */
html[data-theme='light'] .site-footer{color:#a7a7ba}
html[data-theme='light'] .hdr-nav{border-bottom-color:var(--ink)}
html[data-theme='light'] .news .d,html[data-theme='light'] .foci li::before,html[data-theme='light'] .card-w .meta::before,html[data-theme='light'] .p-head .eyebrow{color:#0a0a5c}
html[data-theme='light'] .quote-big::before,html[data-theme='light'] .quote-big::after{color:#0a0a5c}
html[data-theme='light'] .lang button[aria-pressed='true']{color:var(--ink);background:var(--acc)}
html[data-theme='light'] .primary a[aria-current='page']{border-bottom:2px solid var(--acc)}
html[data-theme='light'] .filters .count{color:#0a0a5c!important}
html[data-theme='light'] .hero-tag{color:#0a0a5c}

/* subtle motion */
@media (prefers-reduced-motion:no-preference){
  .rv{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.hero-portrait::before{display:none}
@media (max-width:860px){.hero-card .card.has-portrait{display:flex;flex-direction:column-reverse;max-width:none}}

/* fixes r2 */
.hero-card{padding-inline:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)))}
.hero-portrait,.hero-card .hero-portrait{align-self:flex-start!important}
.btn::before,.btn::after{display:none!important}
.btn{clip-path:none!important;mask:none!important;-webkit-mask:none!important}
.courses li{border-left:0!important}

/* hover → original colour on large hero images */
.hero-media img,.p-hero img{transition:filter .8s cubic-bezier(.2,.7,.2,1)}
.hero-media:hover,.p-hero:hover{background:#000!important}
.hero-media:hover img,.p-hero:hover img{filter:none}
.hero-media,.p-hero{transition:background-color .8s}
.hero-media:hover::after,.p-hero:hover::after{opacity:0}

/* name accent: "Yoo" */
.hero-name .yy,.site-footer .flogo .yy{color:var(--acc)}
.logo:hover .lw b{color:var(--ink)}
html[data-theme='light'] .logo .lw b{color:#1d3ee0}

html,body{overflow-x:clip}

/* ================= STAGES (Schlemmer: one colour per stage) ================= */
html[data-stage='yellow'],.stage-yellow{--paper:#f1c232;--ink:#111114;--ink-deep:#08081a;--ink-muted:#4d3f12;--link:#111114;--rule:rgba(17,17,20,.28)}
html[data-stage='pink'],.stage-pink{--paper:#f2a7bb;--ink:#111114;--ink-deep:#08081a;--ink-muted:#5a2f3c;--link:#111114;--rule:rgba(17,17,20,.28)}
.stage-yellow,.stage-pink{background:var(--paper)!important;color:var(--ink);border-top:0!important}
.stage-yellow .eyebrow,.stage-pink .eyebrow,.stage-yellow .foci li::before,.stage-pink .foci li::before{color:var(--ink)!important}
html[data-stage] .lang button[aria-pressed='true']{background:var(--ink);color:var(--paper)}
html[data-stage] .primary a[aria-current='page']{border-bottom-color:var(--ink)}
html[data-stage] ::selection,.stage-yellow ::selection,.stage-pink ::selection{background:var(--ink);color:var(--paper)}
html[data-stage] a,.stage-yellow a,.stage-pink a{text-decoration-color:currentColor}

/* ================= DUOTONE → ORIGINAL on every photograph ================= */
.gallery a,.video .yt,.portrait,.hero-portrait{background:var(--duo-lo)!important;isolation:isolate;position:relative;overflow:hidden}
.gallery a{display:block;line-height:0}
.gallery a img,.video .yt img,.portrait img,.hero-portrait img{filter:grayscale(1) brightness(1.22) contrast(1.32);mix-blend-mode:screen;opacity:1!important;transition:filter .8s cubic-bezier(.2,.7,.2,1)}
.gallery a::after,.video .yt::after,.portrait::after,.hero-portrait::after{content:'';position:absolute;inset:0;background:var(--duo-hi);mix-blend-mode:multiply;pointer-events:none;z-index:1;transition:opacity .8s cubic-bezier(.2,.7,.2,1)}
.portrait::before{display:none!important}
.video .yt .play{z-index:2}
.gallery a,.video .yt,.portrait,.hero-portrait{transition:background-color .8s}
.gallery a:hover img{opacity:1!important}
/* reveal: pointer hover / keyboard focus / touch (JS adds .live in viewport centre) */
.gallery a:hover,.gallery a:focus-visible,.video .yt:hover,.video .yt:focus-visible,.portrait:hover,.hero-portrait:hover,
.gallery a.live,.video .yt.live,.portrait.live,.hero-portrait.live,.hero-media.live,.p-hero.live,.card-w .thumb.live{background:#000!important}
.gallery a:hover img,.gallery a:focus-visible img,.video .yt:hover img,.video .yt:focus-visible img,.portrait:hover img,.hero-portrait:hover img,
.gallery a.live img,.video .yt.live img,.portrait.live img,.hero-portrait.live img,.hero-media.live img,.p-hero.live img,.card-w .thumb.live img{filter:none}
.gallery a:hover::after,.gallery a:focus-visible::after,.video .yt:hover::after,.video .yt:focus-visible::after,.portrait:hover::after,.hero-portrait:hover::after,
.gallery a.live::after,.video .yt.live::after,.portrait.live::after,.hero-portrait.live::after,.hero-media.live::after,.p-hero.live::after,.card-w .thumb.live::after{opacity:0}

/* =====================================================================
   MODE X — experimental grammar (preview on index / research / dance-of-wings)
   1 spotlight reveal · 2 bilingual collision · 3 broken grid & stage flats
   ===================================================================== */
@property --r{syntax:'<length>';inherits:true;initial-value:0px}

/* ---- 1. SPOTLIGHT: only a circle of light reveals the original colour ---- */
html[data-mode='x'] .spot-on{background:var(--duo-lo)!important;--r:0px;transition:--r .55s cubic-bezier(.2,.7,.2,1)}
html[data-mode='x'] .spot-on>img:not(.spot){filter:grayscale(1) brightness(1.22) contrast(1.32)!important;transform:none!important}
html[data-mode='x'] .spot-on::after{opacity:1!important}
html[data-mode='x'] .spot-on .spot{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;z-index:2;pointer-events:none;filter:none!important;mix-blend-mode:normal!important;opacity:1!important;
  -webkit-mask:radial-gradient(circle var(--r) at var(--mx,50%) var(--my,50%),#000 52%,transparent 100%);mask:radial-gradient(circle var(--r) at var(--mx,50%) var(--my,50%),#000 52%,transparent 100%)}
html[data-mode='x'] .spot-on:hover{--r:clamp(130px,15vw,260px)}
html[data-mode='x'] .p-hero::before{z-index:3}
html[data-mode='x'] .hero-credit{z-index:4}
html[data-mode='x'] .video .yt .play{z-index:3}
/* touch: a horizontal band of light at the viewport centre */
html[data-mode='x'].touch .spot-on .spot{
  -webkit-mask:linear-gradient(to bottom,transparent calc(var(--by,-999px) - 26vh),#000 calc(var(--by,-999px) - 9vh),#000 calc(var(--by,-999px) + 9vh),transparent calc(var(--by,-999px) + 26vh));
  mask:linear-gradient(to bottom,transparent calc(var(--by,-999px) - 26vh),#000 calc(var(--by,-999px) - 9vh),#000 calc(var(--by,-999px) + 9vh),transparent calc(var(--by,-999px) + 26vh))}

/* ---- 2. BILINGUAL COLLISION ---- */
html[data-mode='x'] .x-ko{position:absolute;writing-mode:vertical-rl;font-family:'Pretendard Variable',Pretendard,sans-serif;font-weight:800;line-height:.9;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px var(--ink);pointer-events:none;z-index:4;user-select:none}
html[data-mode='x'] .hero{position:relative;overflow:hidden}
html[data-mode='x'] .hero .x-ko{left:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));top:1.5rem;font-size:clamp(4.5rem,11vw,12rem);-webkit-text-stroke-color:var(--acc)}
html[data-mode='x'] .hero-card .card,html[data-mode='x'] .hero-card .card.has-portrait{max-width:none}
html[data-mode='x'] .hero-name{font-size:clamp(4.6rem,21.5vw,26rem);line-height:.78;letter-spacing:-.07em;white-space:nowrap;margin-right:-12vw;mix-blend-mode:difference;color:#fff}
html[data-mode='x'] .hero-name .yy{color:var(--acc);mix-blend-mode:normal}
html[data-mode='x'] .hero-name small{letter-spacing:.3em;mix-blend-mode:normal}
html[data-mode='x'] .hero-media{grid-column:4 / -1}
html[data-mode='x'] .hero-roles,html[data-mode='x'] .hero-tag{max-width:46ch}
html[data-mode='x'] .section-title{font-size:clamp(3rem,10.5vw,13rem);line-height:.82;letter-spacing:-.065em;margin-left:-.05em}

/* page heads: Research / project title */
html[data-mode='x'] main>.section:first-child .wrap{position:relative}
html[data-mode='x'] .page-title{font-size:clamp(5rem,24vw,30rem);line-height:.76;letter-spacing:-.075em;white-space:nowrap;margin-left:-.06em;margin-right:-20vw}
html[data-mode='x'] main>.section:first-child .x-ko{right:var(--gutter);top:-.5rem;font-size:clamp(4rem,13vw,15rem)}
html[data-mode='x'] .p-head .card{position:relative}
html[data-mode='x'] .p-title{font-size:clamp(4rem,15.5vw,19rem);line-height:.78;letter-spacing:-.07em;max-width:none}
html[data-mode='x'] .p-title .ko{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html[data-mode='x'] .p-head .x-ko{right:0;bottom:calc(100% + 1rem);font-size:clamp(3.5rem,9vw,10rem);-webkit-text-stroke-color:var(--acc)}

/* ---- 3. BROKEN GRID & STAGE FLATS ---- */
/* home: selected work — unequal, off-axis */
@media (min-width:861px){
  html[data-mode='x'] .cards>li{transform:none!important}
  html[data-mode='x'] .cards>li:nth-child(6n+1){grid-column:1 / 8}
  html[data-mode='x'] .cards>li:nth-child(6n+2){grid-column:9 / 13;margin-top:14vw}
  html[data-mode='x'] .cards>li:nth-child(6n+3){grid-column:3 / 7;margin-top:-4vw}
  html[data-mode='x'] .cards>li:nth-child(6n+4){grid-column:8 / 13;margin-top:6vw}
  html[data-mode='x'] .cards>li:nth-child(6n+5){grid-column:1 / 6;margin-top:-2vw}
  html[data-mode='x'] .cards>li:nth-child(6n){grid-column:7 / 12;margin-top:10vw}
  html[data-mode='x'] .cards>li:nth-child(6n+1) .thumb{aspect-ratio:16/10}
  html[data-mode='x'] .cards>li:nth-child(6n+4) .thumb{aspect-ratio:4/5}
}
/* stage flats: colour planes cut in at an angle */
html[data-mode='x'] .stage-yellow{clip-path:polygon(0 5vw,100% 0,100% calc(100% - 3vw),0 100%);padding-block:calc(var(--space-16) + 5vw)!important;margin-top:4vw}
html[data-mode='x'] .stage-pink{clip-path:polygon(0 0,100% 4vw,100% 100%,0 calc(100% - 5vw));margin-left:9vw;padding-block:calc(var(--space-16) + 4vw)!important;margin-top:-3vw}
/* research: a black flat intrudes into the yellow stage */
html[data-mode='x'][data-stage='yellow'] .band-cyan{background:#111114!important;color:#f1c232;--ink:#f1c232;--ink-muted:#d9b54a;--rule:rgba(241,194,50,.3);--link:#f1c232;margin-left:7vw;clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%);padding-top:calc(var(--space-16) + 3vw)!important;border-top:0!important}
html[data-mode='x'][data-stage='yellow'] .band-cyan .eyebrow,html[data-mode='x'][data-stage='yellow'] .band-cyan .foci li::before{color:#f1c232!important}
/* project: the facts box becomes a yellow flat */
html[data-mode='x'] .facts{background:#f1c232!important;color:#111114;padding:2rem 1.8rem 2.4rem;transform:rotate(-1.6deg);margin-top:-6rem;position:relative;z-index:3}
html[data-mode='x'] .facts dt{color:#111114;opacity:.7}
html[data-mode='x'] .facts a{color:#111114}
/* project gallery: mixed scale, hard crops */
@media (min-width:700px){
  html[data-mode='x'] .gallery{columns:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:13vw;gap:clamp(.6rem,1.2vw,1rem);grid-auto-flow:dense}
  html[data-mode='x'] .gallery a{margin:0;height:100%}
  html[data-mode='x'] .gallery a>img:not(.spot){width:100%;height:100%;object-fit:cover}
  html[data-mode='x'] .gallery a:nth-child(6n+1){grid-column:span 4;grid-row:span 3}
  html[data-mode='x'] .gallery a:nth-child(6n+2){grid-column:span 2;grid-row:span 2}
  html[data-mode='x'] .gallery a:nth-child(6n+3){grid-column:span 2;grid-row:span 1}
  html[data-mode='x'] .gallery a:nth-child(6n+4){grid-column:span 2;grid-row:span 2}
  html[data-mode='x'] .gallery a:nth-child(6n+5){grid-column:span 4;grid-row:span 2}
  html[data-mode='x'] .gallery a:nth-child(6n){grid-column:span 6;grid-row:span 2}
}
@media (max-width:860px){
  html[data-mode='x'] .hero-name{font-size:clamp(4rem,23vw,9rem);margin-right:-20vw}
  html[data-mode='x'] .hero .x-ko{font-size:clamp(3rem,16vw,6rem);left:auto;right:var(--gutter);top:1rem}
  html[data-mode='x'] .stage-pink{margin-left:5vw}
  html[data-mode='x'] .facts{margin-top:0;transform:rotate(-1deg)}
}
/* mode x — hero fix: name crosses the lower edge of the image */
@media (min-width:861px){
  html[data-mode='x'] .hero{min-height:0;align-items:start}
  html[data-mode='x'] .hero-media{grid-column:4 / -1;grid-row:1;height:80vh;align-self:start}
  html[data-mode='x'] .hero-card{grid-row:1;padding-top:58vh;align-items:flex-start}
  html[data-mode='x'] .hero-name{font-size:18.6vw;margin-right:0}
  html[data-mode='x'] .hero .x-ko{left:auto;right:var(--gutter);top:2rem;-webkit-text-stroke-color:#fff;z-index:3}
}
html[data-mode='x'] .stage-pink .section-title,html[data-mode='x'] .split .section-title{font-size:clamp(2.6rem,5.4vw,6.2rem)}
@media (min-width:861px){html[data-mode='x'] .hero-name{font-size:17.4vw}}
html[data-mode='x'] .hero-credit{top:1rem;bottom:auto}
@media (max-width:860px){html[data-mode='x'] .hero-name{font-size:19.5vw;margin-right:0}html[data-mode='x'] .hero .x-ko{font-size:13vw}}
html[data-mode='x'] .x-ko{white-space:nowrap}
html[data-mode='x'][data-stage='yellow'] .section-title{font-size:clamp(2.6rem,7vw,8rem)}
html[data-mode='x'] .p-head .x-ko{font-size:clamp(3rem,6.2vw,6.5rem);-webkit-text-stroke-color:#fff}
/* mode x — site-wide: per-title sizing (inline --pt from title length) */
html[data-mode='x'] .p-title{font-size:clamp(3rem,var(--pt,15.5vw),19rem)}
html[data-mode='x'] .page-title.x-wrap{white-space:normal;margin-right:0;font-size:clamp(3rem,var(--pt,24vw),30rem);line-height:.8}
html[data-mode='x'] .p-head.nohero .x-ko{bottom:auto;top:-1rem;-webkit-text-stroke-color:var(--acc);opacity:.85}
html[data-mode='x'] .p-head.nohero .card{padding-right:clamp(4rem,8vw,8rem)}
/* teaching: a black flat intrudes into the pink stage */
html[data-mode='x'][data-stage='pink'] .band-cyan{background:#111114!important;color:#f2a7bb;--ink:#f2a7bb;--ink-muted:#e3a0b3;--rule:rgba(242,167,187,.3);--link:#f2a7bb;margin-right:7vw;clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%);padding-top:calc(var(--space-16) + 3vw)!important;border-top:0!important}
html[data-mode='x'][data-stage='pink'] .band-cyan .eyebrow{color:#f2a7bb!important}
html[data-mode='x'][data-stage='pink'] .section-title{font-size:clamp(2.6rem,7vw,8rem)}
html[data-mode='x'] .x-ko.x-faint{z-index:0;-webkit-text-stroke-color:rgba(17,17,20,.16)}
html[data-mode='x'] .p-head.nohero~* .facts,html[data-mode='x'] .nohero .facts{margin-top:0}
html[data-mode='x'] main:has(.p-head.nohero) .facts{margin-top:0}
@media (max-width:860px){
  html[data-mode='x'] .p-head.nohero .x-ko,html[data-mode='x'] main>.section:first-child .x-ko{font-size:clamp(2.4rem,11vw,3.6rem);opacity:.4;z-index:0}
  html[data-mode='x'] .p-head.nohero .card{padding-right:0}
}
html[data-mode='x'] .page-title>span[lang='ko']{letter-spacing:.02em;white-space:normal;line-height:1.2}
/* ---- silkscreen strip (after Warhol's Marilyn Diptych): repeated face, stage colours, fading to grey; reveals the photo frame by frame ---- */
.ss-strip{display:flex;flex-direction:column;gap:0;width:min(15vh,10.5vw);z-index:5;text-decoration:none}
.ss-f{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#111114}
.ss-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ss-f .o{opacity:0;transition:opacity .45s cubic-bezier(.2,.7,.2,1);transition-delay:calc((4 - var(--i)) * 70ms)}
.ss-strip.on .ss-f .o,.ss-strip:hover .ss-f .o,.ss-strip:focus-visible .ss-f .o{opacity:1;transition-delay:calc(var(--i) * 110ms)}
.ss-strip:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
@media (min-width:861px){
  .hero{position:relative}
  .ss-strip{position:absolute;left:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));top:0;transform:translateX(min(2vw,1.5rem))}
}
@media (max-width:860px){
  .ss-strip{flex-direction:row;width:100%;margin-top:.9rem}
  .ss-f{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){.ss-f .o{transition:none!important}}
@media (min-width:861px){.ss-strip{top:0;grid-row:1}}
@media (max-width:860px){.ss-strip{grid-column:1 / -1;padding-inline:var(--gutter);margin-top:.9rem;box-sizing:border-box}}
@media (min-width:861px){.ss-strip{width:min(12.5vh,9vw)}}
@media (min-width:861px){.ss-strip{left:calc(25vw - min(12.5vh,9vw));transform:none}}