:root{--ink:#101116;--ink-soft:#171922;--paper:#ecebe6;--paper-light:#f5f4ef;--white:#f4f3ed;--muted:#a6a9b1;--slate:#5e626a;--violet:#aba1ff;--amber:#d9b796;--line-dark:rgba(238,237,231,.16);--line-light:rgba(26,28,34,.2);--display:"Sora","Noto Sans KR",sans-serif;--body:"DM Sans","Noto Sans KR",sans-serif;--mono:"IBM Plex Mono",monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:77px}body{margin:0;background:var(--ink);color:var(--white);font:16px/1.55 var(--body);overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--violet);outline-offset:4px}::selection{background:var(--violet);color:var(--ink)}.skip-link{position:fixed;top:-80px;left:20px;z-index:200;background:var(--white);color:var(--ink);padding:12px 16px}.skip-link:focus{top:16px}body.menu-open{overflow:hidden}
.site-header{position:fixed;z-index:90;inset:0 0 auto;height:77px;display:flex;align-items:center;gap:28px;padding:0 clamp(22px,3.4vw,56px);background:#101116;border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.menu-button{display:flex;align-items:center;gap:13px;min-height:46px;padding:7px 9px 7px 0;color:var(--white);border:0;background:none;font:500 10px var(--mono);letter-spacing:.13em}.menu-icon{width:23px;height:18px;display:flex;flex-direction:column;justify-content:center;gap:6px}.menu-icon i{height:1px;width:22px;background:var(--white);display:block;transition:transform .25s,width .25s}.menu-button:hover .menu-icon i:last-child{width:15px}.brand{display:flex;gap:13px;align-items:baseline;margin-left:clamp(6px,2vw,35px)}.brand-symbol{font:700 25px/1 var(--display);letter-spacing:-.11em}.brand-period{color:var(--violet)}.brand-name{font:600 10px var(--mono);letter-spacing:.13em}.header-end{margin-left:auto;display:flex;align-items:center;gap:28px}.header-descriptor{font:500 9px var(--mono);color:#a7a9b5;letter-spacing:.08em}.language-control{display:flex;padding:3px;border:1px solid rgba(255,255,255,.25);border-radius:999px;gap:3px}.language-control button{border:0;border-radius:999px;color:#b5b7bf;background:none;min-width:41px;min-height:30px;font:600 10px var(--mono)}.language-control button[aria-pressed=true]{background:var(--white);color:var(--ink)}
.sidebar-scrim{position:fixed;z-index:94;inset:0;background:rgba(4,5,8,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.sidebar-scrim[hidden]{display:none}.sidebar{position:fixed;z-index:95;inset:0 auto 0 0;width:min(470px,100vw);padding:36px clamp(28px,4vw,56px);background:#e9e8e3;color:var(--ink);display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .55s cubic-bezier(.19,.85,.2,1);box-shadow:20px 0 90px rgba(0,0,0,.28)}.sidebar.is-open{transform:translateX(0)}.sidebar-top{display:flex;justify-content:space-between;align-items:center}.sidebar-kicker{font:600 11px var(--mono);letter-spacing:.15em}.sidebar-close{width:46px;height:46px;border:1px solid #a1a2a0;border-radius:50%;background:none;color:var(--ink);font:28px/1 var(--body)}.sidebar-nav{display:flex;flex-direction:column;margin:auto 0;gap:0}.sidebar-nav a{display:grid;grid-template-columns:27px 1fr 18px;align-items:center;gap:11px;border-top:1px solid var(--line-light);padding:20px 0;transition:padding-left .25s,color .25s}.sidebar-nav a:last-child{border-bottom:1px solid var(--line-light)}.sidebar-nav a:hover,.sidebar-nav a[aria-current=true]{color:#5f55aa;padding-left:8px}.sidebar-nav small{font:500 10px var(--mono);color:#85878b}.sidebar-nav span{font:600 clamp(31px,4vw,48px)/1.05 var(--display);letter-spacing:-.07em}.sidebar-nav b{font-weight:400}.sidebar-bottom{display:flex;justify-content:space-between;gap:15px;align-items:end;color:#5e6266;font:10px/1.5 var(--mono)}.sidebar-bottom p{max-width:220px;margin:0}
.about{position:relative;min-height:100svh;padding:77px 0 0;overflow:hidden;background:radial-gradient(circle at 77% 45%,#272737 0%,#191a24 30%,#101116 72%)}.about:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.about-glow{position:absolute;right:3%;top:15%;width:55vw;height:70vh;border-radius:50%;background:radial-gradient(circle,rgba(147,132,255,.12),transparent 65%);filter:blur(35px);pointer-events:none}.about-layout{width:min(1500px,calc(100% - 8vw));min-height:calc(100svh - 133px);margin:auto;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-rows:auto auto;grid-template-areas:"copy visual" "controls visual";gap:0 clamp(10px,3vw,56px);align-content:center;position:relative}.about-copy{grid-area:copy;position:relative;z-index:2;align-self:end;padding:30px 0 20px}.eyebrow{font:600 10px/1.5 var(--mono);letter-spacing:.14em;color:var(--violet);text-transform:uppercase;margin:0 0 24px}.eyebrow-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--violet);margin-right:11px;vertical-align:2px;box-shadow:0 0 14px var(--violet)}.about h1{font:700 clamp(51px,5.5vw,91px)/1.055 var(--display);letter-spacing:-.082em;margin:0;max-width:770px;min-height:2.1em}.about h1 span{display:block}.about h1 span:last-child{color:var(--violet)}.about h1.typing span:last-child:after,.about h1.typing span:first-child:after{content:"";display:inline-block;width:.07em;height:.78em;background:currentColor;margin-left:.06em;animation:cursor-blink .75s step-end infinite}.about h1.typing span:not(.active):after{display:none}@keyframes cursor-blink{50%{opacity:0}}.about-deck{max-width:600px;font:400 clamp(16px,1.2vw,19px)/1.62 var(--body);color:#c4c6d0;margin:29px 0 0}.about-actions{display:flex;align-items:center;gap:30px;margin-top:32px}.primary-link{display:inline-flex;align-items:center;gap:36px;min-height:48px;padding:12px 17px;background:var(--white);color:var(--ink);font:600 12px var(--mono);letter-spacing:-.01em;transition:background .25s,transform .25s}.primary-link:hover{background:var(--violet);transform:translateY(-2px)}.link-arrow{font-size:19px;font-weight:400}.about-signature{font:500 9px var(--mono);letter-spacing:.13em;color:#858891;white-space:nowrap}.about-visual{grid-area:visual;position:relative;min-height:620px;align-self:stretch;overflow:hidden}.about-visual canvas,.face-visual canvas{display:block;width:100%;height:100%;position:absolute;inset:0;z-index:2}.visual-aura{position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle,rgba(172,161,255,.13),transparent 60%);filter:blur(30px)}.visual-label{position:absolute;z-index:3;color:#9da0ae;font:500 9px var(--mono);letter-spacing:.15em}.visual-label.top{right:5%;top:12%}.visual-label.bottom{left:8%;bottom:10%}.canvas-fallback{display:none;position:absolute;inset:0;place-items:center}.fallback-form{width:260px;height:260px;border-radius:40% 60% 55% 45%;background:radial-gradient(circle at 36% 30%,#dcd6ff,#756cc4 38%,#262234 70%);box-shadow:35px 45px 80px rgba(0,0,0,.3),inset -24px -30px 35px rgba(16,17,22,.45);transform:rotate(-22deg)}.webgl-failed .canvas-fallback{display:grid}.webgl-failed canvas{display:none}.story-controls{grid-area:controls;position:relative;z-index:3;max-width:580px;padding:22px 0 42px;align-self:start}.story-head{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-dark);padding:14px 0 17px;color:#aaabb8;font:500 9px var(--mono);letter-spacing:.12em}.story-play{display:grid;place-items:center;width:33px;height:33px;border:1px solid rgba(241,239,234,.4);border-radius:50%;background:none;color:var(--white);font:14px var(--mono)}.story-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.story-tabs button{background:none;border:0;border-bottom:1px solid rgba(235,234,228,.28);text-align:left;color:#91939e;padding:0 3px 12px;min-height:45px;transition:color .2s,border-color .2s}.story-tabs button span{display:block;font:500 9px var(--mono);margin-bottom:8px}.story-tabs button strong{display:block;font:500 11px var(--body);white-space:nowrap}.story-tabs button[aria-current=true]{color:var(--white);border-color:var(--violet)}.story-caption{min-height:43px;color:#c2c4cd;font:13px/1.5 var(--body);margin:14px 0 0}.about-footer{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-top:1px solid var(--line-dark);color:#858793;font:500 9px var(--mono);letter-spacing:.12em}.about-footer a{display:grid;place-items:center;width:36px;height:36px;font-size:19px;color:var(--white)}
.values{background:var(--paper);color:var(--ink);padding:0 4vw 110px;position:relative}.section-frame{height:61px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid currentColor;font:600 10px var(--mono);letter-spacing:.12em;opacity:.45}.values-head,.research-intro,.blog-intro{width:min(1500px,100%);margin:0 auto}.values-head{padding:78px 0 52px}.eyebrow.dark{color:#6055a5}.values h2,.research h2,.blog h2{font:700 clamp(60px,7.2vw,118px)/.98 var(--display);letter-spacing:-.085em;margin:0}.title-period{color:#8d81ed}.values-grid{width:min(1500px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(35px,5vw,100px);align-items:start}.face-visual{height:min(65vw,700px);min-height:580px;position:sticky;top:85px;background:radial-gradient(circle at 51% 43%,#ded8e6 0,#c7c4d3 40%,#b8bbc6 100%);overflow:hidden;border-radius:2px}.face-watermark{position:absolute;z-index:1;left:6%;bottom:4%;font:800 clamp(115px,13vw,250px)/1 var(--display);letter-spacing:-.14em;color:rgba(255,255,255,.25);pointer-events:none}.face-visual-caption{position:absolute;z-index:3;top:24px;left:26px;font:500 9px var(--mono);letter-spacing:.13em;color:#555966}.values-content{padding:3px 0 0}.face-mark{display:flex;align-items:baseline;gap:7px;font:800 clamp(55px,5vw,80px)/1 var(--display);letter-spacing:-.1em;color:#272834}.face-mark span:first-child{color:#6960c6}.face-mark small{margin-left:auto;max-width:150px;font:500 9px/1.45 var(--mono);letter-spacing:.1em;color:#6b6d78}.face-statement{font:500 clamp(18px,1.37vw,22px)/1.62 var(--display);letter-spacing:-.045em;margin:30px 0 42px;color:#25262c}.face-selector{display:grid;grid-template-columns:1fr 1fr;gap:8px}.face-selector button{display:flex;align-items:center;gap:13px;text-align:left;min-height:68px;padding:0 15px;border:1px solid #b9b9bd;background:rgba(255,255,255,.12);color:#3d3f47;transition:background .3s,border-color .3s,transform .3s}.face-selector button:hover{transform:translateY(-2px)}.face-selector button[aria-pressed=true]{background:#22232d;border-color:#22232d;color:var(--white)}.face-letter{font:700 26px var(--display);letter-spacing:-.07em;color:#6a61bd}.face-selector button[aria-pressed=true] .face-letter{color:var(--violet)}.face-name{font:600 13px var(--body)}.face-select-arrow{margin-left:auto;font-size:15px}.face-definition{display:grid;grid-template-columns:135px 1fr;gap:15px;border-top:1px solid var(--line-light);margin-top:32px;padding-top:18px}.face-definition span{font:600 10px var(--mono);letter-spacing:.07em;color:#6860b0}.face-definition p{margin:0;font:15px/1.55 var(--body);color:#555860}
.research{background:#16171e;color:var(--white);padding:0 4vw 125px}.research-intro,.blog-intro{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;padding:97px 0 70px}.research-intro>p,.blog-intro>p{max-width:520px;margin:0 0 10px auto;font:18px/1.6 var(--body);color:#c6c8cf}.research-list{width:min(1500px,100%);margin:auto}.research-item{display:grid;grid-template-columns:68px minmax(250px,1fr) 170px;gap:30px;align-items:start;border-top:1px solid var(--line-dark);padding:35px 0 40px}.research-item:last-child{border-bottom:1px solid var(--line-dark)}.research-number{font:600 11px var(--mono);color:var(--violet)}.research-item h3{font:600 clamp(29px,3vw,48px)/1.1 var(--display);letter-spacing:-.06em;margin:0 0 13px}.research-item p{max-width:600px;margin:0;color:#afb2bd;font:16px/1.55 var(--body)}.research-item a,.inline-button{justify-self:end;border:0;border-bottom:1px solid currentColor;color:#c6bfff;background:none;padding:4px 0;font:500 11px var(--mono);white-space:nowrap}.research-item a:hover,.inline-button:hover{color:var(--white)}.research-boundary{width:min(1500px,100%);margin:45px auto 0;color:#8f929d;font:13px/1.5 var(--body)}
.blog{background:var(--paper-light);color:var(--ink);padding:0 4vw 110px}.blog-intro>p{color:#5c5e66}.blog-list{width:min(1500px,100%);margin:auto}.blog-row{display:grid;grid-template-columns:145px 1fr 105px;gap:28px;align-items:center;width:100%;min-height:112px;padding:23px 0;border:0;border-top:1px solid var(--line-light);background:none;text-align:left;color:var(--ink);transition:padding-left .25s,background .25s}.blog-row:hover{padding-left:12px;background:rgba(255,255,255,.45)}.blog-row:last-child{border-bottom:1px solid var(--line-light)}.blog-row time,.blog-row small{font:500 11px var(--mono);color:#71747c}.blog-row strong{font:600 clamp(24px,2.6vw,39px)/1.15 var(--display);letter-spacing:-.055em}.blog-row .read-arrow{text-align:right;font:15px var(--mono)}.blog-note{width:min(1500px,100%);margin:26px auto 0;font:11px/1.5 var(--body);color:#75777e}
.site-footer{display:grid;grid-template-columns:1fr auto;gap:45px;padding:70px 4vw 32px;background:#101116;color:var(--white)}.site-footer strong{font:800 70px/.9 var(--display);letter-spacing:-.13em}.site-footer strong span{color:var(--violet)}.site-footer p{margin:24px 0 0;font:18px/1.45 var(--body);max-width:470px;color:#c2c5d0}.footer-links{display:flex;gap:24px;align-items:start;padding-top:12px}.footer-links a{font:500 11px var(--mono);border-bottom:1px solid currentColor;padding-bottom:5px;color:#cbc6ff}.site-footer small{grid-column:1/-1;border-top:1px solid var(--line-dark);padding-top:28px;color:#8b8e98;font:10px var(--mono);letter-spacing:.12em}
.content-modal{width:min(760px,calc(100vw - 32px));max-height:85vh;overflow:auto;border:0;border-radius:0;background:#f3f2ec;color:var(--ink);padding:31px clamp(24px,5vw,65px) 55px;box-shadow:0 30px 100px rgba(0,0,0,.5)}.content-modal::backdrop{background:rgba(4,5,9,.76);backdrop-filter:blur(9px)}.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-light);padding-bottom:15px}.modal-head span{font:600 10px var(--mono);letter-spacing:.12em}.modal-head button{width:42px;height:42px;border:1px solid #999aa0;border-radius:50%;background:none;color:var(--ink);font-size:24px}.content-modal h2{font:700 clamp(32px,4.5vw,60px)/1.1 var(--display);letter-spacing:-.065em;margin:38px 0 28px}.content-modal p{font:16px/1.7 var(--body);margin:0 0 18px}.content-modal .source{border-top:1px solid var(--line-light);padding-top:17px;margin-top:30px;color:#73757c;font-size:12px}
@media(max-width:1150px){.brand-name{display:none}.about-layout{width:calc(100% - 7vw);grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}.about h1{font-size:clamp(48px,5.3vw,70px)}.about-signature{display:none}.face-statement{font-size:21px}}
@media(max-width:820px){.header-descriptor{display:none}.site-header{height:67px}.about{padding-top:67px}.about-layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"copy" "visual" "controls";width:calc(100% - 42px);min-height:auto}.about-copy{padding-top:87px;align-self:start}.about h1{font-size:clamp(49px,7.8vw,76px)}.about-deck{max-width:620px}.about-visual{height:430px;min-height:430px;align-self:auto}.visual-label.top{top:2%}.visual-label.bottom{bottom:2%}.story-controls{max-width:none;padding:0 0 38px}.about-footer{padding:0 21px}.values,.research,.blog{padding-left:21px;padding-right:21px}.values-grid{grid-template-columns:1fr;gap:35px}.face-visual{position:relative;top:auto;height:460px;min-height:460px}.values-content{max-width:700px}.research-intro,.blog-intro{grid-template-columns:1fr;gap:25px}.research-intro>p,.blog-intro>p{margin:0;max-width:650px}.research-item{grid-template-columns:40px 1fr 135px;gap:20px}}
@media(max-width:540px){.site-header{padding:0 19px;gap:14px}.brand{margin-left:0}.brand-symbol{font-size:23px}.menu-button{font-size:9px;gap:8px}.language-control button{min-width:36px}.about-copy{padding-top:68px}.eyebrow{font-size:9px;margin-bottom:18px}.about h1{font-size:clamp(42px,10.6vw,63px);min-height:2.18em;line-height:1.09}.about-deck{font-size:15px;line-height:1.55;margin-top:20px}.about-actions{margin-top:23px}.primary-link{font-size:11px}.about-visual{height:315px;min-height:315px;margin-top:4px}.visual-label{font-size:8px}.story-head{padding-bottom:12px}.story-tabs{gap:3px}.story-tabs button{padding-bottom:9px}.story-tabs button span{font-size:8px}.story-tabs button strong{font-size:10px;white-space:normal;line-height:1.2}.story-caption{font-size:12px}.about-footer{height:50px}.section-frame{height:50px;font-size:9px}.values{padding-bottom:75px}.values-head{padding:65px 0 35px}.values h2,.research h2,.blog h2{font-size:clamp(53px,14vw,78px)}.face-visual{height:340px;min-height:340px}.face-watermark{font-size:122px}.face-mark{font-size:64px}.face-mark small{font-size:8px;max-width:120px}.face-statement{font-size:18px;line-height:1.52;margin:20px 0 26px}.face-selector button{min-height:58px;padding:0 10px;gap:8px}.face-letter{font-size:23px}.face-name{font-size:11px}.face-definition{grid-template-columns:1fr;gap:8px}.face-definition p{font-size:14px}.research,.blog{padding-bottom:77px}.research-intro,.blog-intro{padding:68px 0 47px}.research-intro>p,.blog-intro>p{font-size:16px}.research-item{grid-template-columns:28px 1fr;gap:13px;padding:27px 0}.research-item h3{font-size:28px}.research-item p{font-size:14px}.research-item a,.inline-button{grid-column:2;justify-self:start;margin-top:8px}.blog-row{grid-template-columns:1fr 25px;gap:9px;min-height:95px}.blog-row time{grid-column:1/-1}.blog-row strong{font-size:24px}.blog-row .read-arrow{grid-column:2;grid-row:2}.site-footer{grid-template-columns:1fr;padding:56px 21px 27px;gap:28px}.site-footer strong{font-size:60px}.site-footer p{font-size:16px;margin-top:18px}.footer-links{flex-wrap:wrap;padding-top:0}.sidebar{padding:25px}.sidebar-nav span{font-size:34px}}
@media(max-width:370px){.about h1{font-size:40px}.face-selector{grid-template-columns:1fr}.face-selector button{min-height:51px}.about-visual{height:285px;min-height:285px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.about h1.typing span:after{display:none}}

.research-area{justify-self:end;color:#8b8c98;font:500 10px var(--mono);white-space:nowrap;padding-top:5px}
@media(max-width:540px){.research-area{grid-column:2;justify-self:start}}
.fallback-card{width:min(78%,390px);min-height:230px;padding:30px;background:#f3f1eb;color:#20212a;display:flex;flex-direction:column;justify-content:space-between;box-shadow:18px 22px 45px rgba(0,0,0,.17);transform:perspective(750px) rotateY(-13deg) rotateZ(-4deg);border-left:6px solid var(--violet)}
.fallback-card small{font:600 10px var(--mono);letter-spacing:.12em;color:#6c638f}.fallback-card strong{font:700 clamp(27px,3vw,41px)/1.05 var(--display);letter-spacing:-.05em}.fallback-card span{font:500 15px var(--body)}
.face-visual .fallback-card{background:#252631;color:#f3f1eb}
@media(max-width:540px){.fallback-card{min-height:180px;padding:23px}.fallback-card strong{font-size:27px}}
.visual-label.top{font-size:10px;color:#cfc9ec}.visual-label.bottom{font-size:10px;color:#cfc9ec}
.face-visual-caption{color:#454355}.face-visual-action{position:absolute;z-index:3;top:47px;right:25px;color:#494263;font:700 clamp(17px,2vw,26px)/1 var(--display);letter-spacing:-.045em}
@media(max-width:540px){.visual-label.top,.visual-label.bottom{font-size:8px}.face-visual-action{font-size:17px;right:18px;top:49px}.face-visual-caption{left:18px;top:20px;font-size:8px}}
.face-visual-selector{display:none}
@media(max-width:820px){.face-visual-selector{position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:6px;border-radius:999px;background:rgba(28,27,43,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.face-visual-selector button{width:41px;height:41px;border:0;border-radius:50%;background:transparent;color:#d1cce0;font:700 15px var(--display)}.face-visual-selector button[aria-pressed=true]{background:#ded6ff;color:#221c42}}

.face-visual-action{max-width:47%;text-align:right;line-height:1.1;font-size:clamp(15px,1.65vw,22px)}
@media(max-width:540px){.face-visual-action{max-width:52%;font-size:13px;line-height:1.15}}

/* FACE is selected and read in the same panel. */
.face-visual {
  display: flex;
  flex-direction: column;
  height: 570px;
  min-height: 570px;
  padding: 26px;
  background: #22232e;
  color: #f3f0ed;
  isolation: isolate;
  --face-accent: #c8b8ff;
}
.face-visual[data-face="1"] { --face-accent: #8ad7cc; }
.face-visual[data-face="2"] { --face-accent: #f2c6a2; }
.face-visual[data-face="3"] { --face-accent: #b8cff2; }
.face-panel-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  color: #b8b8c4;
  font: 600 10px var(--mono);
  letter-spacing: .14em;
}
.face-visual .face-selector {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 24px;
}
.face-visual .face-selector button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-height: 82px;
  padding: 11px 13px;
  border: 1px solid #555766;
  background: #2b2d39;
  color: #e5e3ec;
  transition: background .22s, border-color .22s, transform .22s;
}
.face-visual .face-selector button:hover { transform: translateY(-3px); border-color: #ddd5ff; }
.face-visual .face-selector button[aria-pressed="true"] { border-color: var(--face-accent); background: #3b394f; }
.face-visual .face-selector button:focus-visible { outline: 3px solid var(--face-accent); outline-offset: 3px; }
.face-visual .face-letter { font: 800 29px/1 var(--display); color: #f3f0ed; }
.face-visual .face-selector button[aria-pressed="true"] .face-letter { color: var(--face-accent); }
.face-visual .face-name { font: 600 10px/1.25 var(--body); color: #c6c6d0; }
.face-display {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  min-height: 290px;
  overflow: hidden;
  border-top: 1px solid #555766;
  margin-top: 26px;
  padding: 42px 16px 16px;
}
.face-display::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 3px;
  background: var(--face-accent);
}
.face-display-letter {
  position: absolute;
  right: 2%;
  top: -48px;
  font: 800 clamp(230px, 25vw, 390px)/1 var(--display);
  letter-spacing: -.12em;
  color: var(--face-accent);
  opacity: .16;
  pointer-events: none;
}
.face-display-copy { position: relative; z-index: 1; max-width: 600px; }
.face-display-index { color: var(--face-accent); font: 600 11px var(--mono); letter-spacing: .12em; }
.face-display h3 { margin: 18px 0 18px; font: 800 clamp(50px, 5.4vw, 80px)/1 var(--display); letter-spacing: -.085em; overflow-wrap: anywhere; }
.face-display p { max-width: 560px; margin: 0; color: #e1dfe9; font: 500 clamp(16px, 1.45vw, 21px)/1.5 var(--body); }
@media(max-width:820px) {
  .face-visual { height: 520px; min-height: 520px; }
  .face-display { min-height: 310px; }
}
@media(max-width:540px) {
  .face-visual { height: 450px; min-height: 450px; padding: 18px; }
  .face-panel-head { font-size: 8px; }
  .face-visual .face-selector { gap: 5px; margin-top: 18px; }
  .face-visual .face-selector button { min-height: 67px; padding: 7px 6px; gap: 4px; }
  .face-visual .face-letter { font-size: 24px; }
  .face-visual .face-name { font-size: 8px; overflow-wrap: anywhere; }
  .face-display { margin-top: 18px; padding: 30px 4px 10px; min-height: 290px; }
  .face-display-letter { font-size: 240px; top: -15px; }
  .face-display h3 { font-size: clamp(41px, 10vw, 61px); }
  .face-display p { font-size: 15px; }
}

/* The selected value is defined by a choice and its visible consequence. */
.face-intro { display: grid; grid-template-columns: minmax(160px,.55fr) minmax(0,1.5fr); gap: 40px; align-items: center; width: min(1500px,100%); margin: 0 auto 40px; padding: 0 0 32px; border-bottom: 1px solid #b8b9be; }
.face-intro-mark { font: 800 clamp(64px,8vw,122px)/1 var(--display); letter-spacing: -.09em; }
.face-intro-mark > span { color: #8070c4; }
.face-intro p { max-width: 800px; margin: 0; font: 500 clamp(18px,1.7vw,25px)/1.55 var(--body); word-break: keep-all; }
.face-experience {
  --face-accent: #b7a5ea;
  position: relative;
  width: min(1500px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(22px, 2.2vw, 34px);
  overflow: hidden;
  background: #202638;
  color: #f5f2ec;
  box-shadow: 0 28px 60px rgba(39, 37, 49, .14);
}
.face-experience[data-face="1"], .face-experience[data-face="2"], .face-experience[data-face="3"] { --face-accent: #b7a5ea; }
.face-experience-head {
  display: flex;
  justify-content: space-between;
  font: 600 10px var(--mono);
  letter-spacing: .15em;
}
.face-experience-head { color: #aaaab8; padding-bottom: 25px; border-bottom: 1px solid #474954; }
.face-experience-body {
  display: grid;
  grid-template-columns: minmax(145px, .42fr) minmax(245px, .8fr) minmax(370px, 1.3fr);
  gap: clamp(22px, 2.7vw, 49px);
  padding-top: 29px;
  align-items: stretch;
}
.face-experience .face-selector { display: flex; flex-direction: column; gap: 0; }
.face-experience .face-selector button {
  display: grid;
  grid-template-columns: 36px 1fr 15px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 96px;
  padding: 12px 10px 12px 0;
  border: 0;
  border-top: 1px solid #4e505b;
  background: transparent;
  color: #aeb0be;
  text-align: left;
  transition: color .22s, padding-left .22s, background .22s;
}
.face-experience .face-selector button:last-child { border-bottom: 1px solid #4e505b; }
.face-experience .face-selector button:hover { padding-left: 7px; color: #fff; transform: none; }
.face-experience .face-selector button[aria-pressed="true"] {
  padding-left: 10px;
  background: #2d303e;
  color: #fff;
  border-color: var(--face-accent);
}
.face-experience .face-selector button:focus-visible { outline: 3px solid var(--face-accent); outline-offset: -3px; }
.face-experience .face-letter { color: #aaa9b8; font: 800 30px/1 var(--display); }
.face-experience .face-selector button[aria-pressed="true"] .face-letter { color: var(--face-accent); }
.face-experience .face-name { color: inherit; font: 600 14px/1.25 var(--body); }
.face-experience .face-select-arrow { color: var(--face-accent); font: 500 16px var(--mono); opacity: 0; }
.face-experience .face-selector button[aria-pressed="true"] .face-select-arrow { opacity: 1; }
.face-reading { display: flex; flex-direction: column; padding: 10px 0 15px; }
.face-reading-index { color: var(--face-accent); font: 600 11px var(--mono); letter-spacing: .15em; }
.face-reading h3 {
  margin: 26px 0 29px;
  font: 800 clamp(46px, 4.7vw, 77px)/.98 var(--display);
  letter-spacing: -.09em;
  overflow-wrap: anywhere;
}
.face-experience[data-face="1"] .face-reading h3,
.face-experience[data-face="3"] .face-reading h3 { font-size: clamp(32px, 3.35vw, 54px); letter-spacing: -.07em; overflow-wrap: normal; }
.face-reading p { max-width: 470px; margin: 0; font: 500 clamp(19px, 1.55vw, 24px)/1.42 var(--body); color: #e2e2e9; word-break: keep-all; }
.face-reading-note { display: block; width: fit-content; margin-top: auto; padding-top: 30px; color: #989cab; font: 500 10px var(--mono); letter-spacing: .07em; }
.face-reading-note::before { content: ""; display: block; width: 50px; height: 2px; margin-bottom: 17px; background: var(--face-accent); }
/* Each image shows the decision or collaboration behind one value. */
.face-image-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #202638;
  border: 1px solid #555969;
}
.face-image-frame::after {
  display: none;
}
.face-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  transition: opacity .3s ease, transform .6s ease;
}
.face-image-frame img.is-changing { opacity: .25; transform: scale(1.03); }
.face-image-frame figcaption {
  position: relative;
  z-index: 2;
  padding: 20px 22px;
  border-top: 1px solid #4e5265;
  display: grid;
  gap: 8px;
  color: #f5f2f0;
}
.face-image-frame figcaption span:first-child { color: var(--face-accent); font: 600 10px var(--mono); letter-spacing: .13em; }
.face-image-frame figcaption span:last-child { font: 600 clamp(18px, 1.6vw, 25px)/1.25 var(--display); letter-spacing: -.035em; }
.face-manifesto { display: grid; grid-template-columns: minmax(160px, .3fr) minmax(0, 1fr); gap: 55px; width: min(1500px,100%); margin: 47px auto 0; padding-top: 30px; border-top: 1px solid #b8b9be; }
.face-manifesto > span { color: #6f61bb; font: 600 10px var(--mono); letter-spacing: .13em; }
.face-manifesto .face-statement { max-width: 1000px; margin: 0; font: 500 clamp(18px, 1.7vw, 25px)/1.55 var(--display); letter-spacing: -.045em; }
@media(max-width:1100px) {
  .face-experience-body { grid-template-columns: 170px minmax(0,1fr) minmax(330px,1.05fr); gap: 22px; }
  .face-experience .face-name { font-size: 12px; }

}
@media(max-width:850px) {
  .face-experience-body { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
  .face-experience .face-selector { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .face-experience .face-selector button { min-height: 69px; padding: 9px; border-bottom: 1px solid #4e505b; grid-template-columns: 28px 1fr; }
  .face-experience .face-select-arrow { display: none; }
  .face-reading { min-height: 0; }
  .face-image-frame, .face-image-frame img { min-height: 0; }
}
@media(max-width:600px) {
  .face-experience { min-height: 0; padding: 18px; }
  .face-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 26px; padding-bottom: 25px; }
  .face-intro-mark { font-size: 75px; }
  .face-intro p { font-size: 17px; line-height: 1.5; }
  .face-experience-head { padding-bottom: 15px; font-size: 9px; }
  .face-experience-body { display: block; padding-top: 15px; }
  .face-experience .face-selector { gap: 4px; }
  .face-experience .face-selector button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 66px; padding: 8px 7px; border: 1px solid #4e505b; }
  .face-experience .face-selector button[aria-pressed="true"] { padding-left: 7px; }
  .face-experience .face-letter { font-size: 26px; }
  .face-experience .face-name { font-size: 8px; overflow-wrap: anywhere; }
  .face-reading { min-height: 0; padding: 24px 0 27px; }
  .face-reading h3 { font-size: clamp(48px, 12vw, 65px); margin: 17px 0 16px; }
  .face-reading p { font-size: 18px; }
  .face-reading-note { margin-top: 20px; padding-top: 0; }
  .face-reading-note::before { margin-bottom: 10px; }
  .face-image-frame, .face-image-frame img { min-height: 0; max-height: none; }
  .face-image-frame figcaption { padding: 16px; }
  .face-manifesto { display: block; margin-top: 30px; padding-top: 20px; }
  .face-manifesto .face-statement { margin-top: 14px; font-size: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .face-image-frame img { transition: none !important; }
}

/* Separate destinations keep the home scroll focused on About GH and FACE. */
[hidden] { display: none !important; }
.sidebar-nav span { font-size: clamp(27px, 3.3vw, 42px); }
.sidebar-nav a[aria-current="location"] { color: #5f55aa; padding-left: 8px; }
.publications { padding: 115px clamp(21px, 6vw, 110px) 100px; min-height: calc(100svh - 250px); background: var(--ink); color: var(--white); }
.publication-topline { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--line-dark); font: 500 11px var(--mono); letter-spacing: .07em; }
.publication-topline a { display: inline-flex; align-items: center; min-height: 44px; color: var(--violet); }
.publications-heading { padding: 62px 0 42px; }
.publications-heading .eyebrow { margin-bottom: 18px; }
.publications-heading h1 { margin: 0; font: 700 clamp(42px, 6.4vw, 96px)/1.06 var(--display); letter-spacing: -.075em; overflow-wrap: anywhere; }
.publications-heading h1:focus { outline: none; }
.publications-heading > p:last-child { max-width: 720px; margin: 28px 0 0; color: #c0c2cb; font: 18px/1.6 var(--body); }
.publications-directory { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px 35px; padding: 19px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
#publications-count { color: #c0c2cb; font: 11px/1.5 var(--mono); }
#publication-years { display: flex; flex-wrap: wrap; gap: 5px 16px; }
#publication-years a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 5px; color: var(--violet); font: 600 12px var(--mono); }
#publication-years a:hover { text-decoration: underline; text-underline-offset: 5px; }
.publication-year { display: grid; grid-template-columns: minmax(100px, .22fr) minmax(0, 1fr); gap: clamp(25px, 5vw, 80px); padding-top: 64px; scroll-margin-top: 90px; }
.publication-year-head { display: flex; align-items: baseline; gap: 18px; }
.publication-year-head h2 { margin: 0; font: 600 clamp(26px, 3vw, 42px)/1.2 var(--display); letter-spacing: -.07em; color: var(--violet); }
.publication-year-head > span { font: 500 10px var(--mono); color: #b0b2be; }
.publication-item { border-top: 1px solid var(--line-dark); scroll-margin-top: 100px; }
.publication-item:last-child { border-bottom: 1px solid var(--line-dark); }
.publication-summary { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 24px; padding: 25px 0; cursor: pointer; list-style: none; }
.publication-summary::-webkit-details-marker { display: none; }
.publication-summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 6px; }
.publication-title { margin: 0; font: 600 clamp(18px, 1.65vw, 24px)/1.42 var(--body); letter-spacing: -.025em; color: var(--white); overflow-wrap: anywhere; transition: color .2s; }
.publication-summary:hover .publication-title, .publication-item[open] .publication-title { color: var(--violet); }
.publication-meta { margin: 12px 0 0; font: 12px/1.65 var(--body); color: #b5b7c2; }
.publication-status { display: inline-block; margin-top: 12px; color: #dbbd9d; font: 500 11px/1.5 var(--mono); }
.publication-expand { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #626573; border-radius: 50%; color: var(--violet); font: 24px/1 var(--body); transition: transform .2s; }
.publication-item[open] .publication-expand { transform: rotate(45deg); }
.publication-body { padding: 0 60px 32px 0; max-width: 960px; }
.publication-authors { margin: 0 0 25px; color: #c8c6de; font: 13px/1.65 var(--body); }
.publication-abstract-label { margin: 0 0 14px; font: 600 11px/1.6 var(--mono); color: var(--violet); letter-spacing: .1em; text-transform: uppercase; }
.publication-abstract { margin: 0; font: 16px/1.8 var(--body); color: #e3e3e8; }
.publication-origin, .publication-note { margin: 19px 0 0; color: #b5b7c2; font: 12px/1.65 var(--body); }
.publication-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; }
.publication-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--violet); border-bottom: 1px solid #77708f; font: 600 12px/1.5 var(--body); }
.publication-link:hover { color: #eeeaff; border-color: currentColor; }
.bibliographic-records { margin-top: 80px; padding-top: 35px; border-top: 1px solid var(--line-dark); }
.publication-record .publication-title { font-size: 18px; }
#blog { padding-top: 100px; min-height: calc(100svh - 250px); }
@media(max-width:820px) {
 .publications { padding-top: 92px; }
 .publications-heading { padding-top: 42px; }
 .publication-year { grid-template-columns: 1fr; gap: 22px; padding-top: 42px; }
 .publication-body { padding-right: 0; }
}
@media(max-width:540px) {
 .publications { padding-bottom: 70px; }
 .publications-heading h1 { font-size: clamp(34px, 9.2vw, 49px); }
 .publications-heading > p:last-child { font-size: 16px; margin-top: 22px; }
 .publication-topline { font-size: 9px; gap: 12px; }
 .publications-directory { display: block; }
 #publication-years { margin-top: 12px; gap: 3px 12px; }
 .publication-summary { gap: 15px; padding: 23px 0; }
 .publication-title { font-size: 18px; }
 .publication-abstract { font-size: 16px; line-height: 1.75; }
 .publication-expand { width: 30px; height: 30px; font-size: 22px; }
 .publication-links { gap: 8px 17px; }
 .bibliographic-records { margin-top: 55px; }
 .sidebar-nav span { font-size: 30px; }
 .sidebar { padding: 24px; }
}
@media(max-height:620px) {
 .sidebar { padding-top: 15px; padding-bottom: 15px; overflow-y: auto; }
 .sidebar-nav { margin: 18px 0; }
 .sidebar-nav a { padding-top: 12px; padding-bottom: 12px; }
 .sidebar-nav span { font-size: 28px; }
}
