a{color:inherit;text-decoration:none}
.header{position:fixed!important;z-index:20!important;top:0;right:0;left:0;height:90px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
.header>div:first-child{width:108px;flex:0 0 108px}
.header .logo{display:block;width:108px;height:auto;transform:none}
.header .year{display:none!important}
.nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:34px;font-size:22px;font-weight:500}
.nav a{color:inherit;text-decoration:none;padding-bottom:7px;border-bottom:1px solid transparent}
.nav a.active{border-bottom-color:currentColor}
.clock{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500}
.dot{width:14px;height:14px;flex:none;border-radius:50%}
.reading .ko,.reading .en,.strategy-copy .ko,.strategy-copy .en,.experience-copy .ko,.experience-copy .en{font-size:16px!important;line-height:1.72!important}
.footer .brand{display:block;width:100%;height:auto;transform:none}
.footer .meta{font-size:22px!important}.footer .meta p:first-child{max-width:520px}
.flagship-detail .diagram,.northface-detail .diagram,.goyo-detail .diagram{width:80%!important;justify-self:center!important}
.popup-detail .interaction-stage{width:80%!important;justify-self:center!important}
.swim-detail .fixture-wrap{width:80%!important;justify-self:center!important}
.nini-detail .strategy-copy{grid-column:7/13}
.nini-detail .diagram{grid-column:1/13;width:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 28px;aspect-ratio:auto;overflow:visible}
.nini-detail .strategy-slide{position:static;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;opacity:1}
.nini-detail .strategy-slide:nth-child(1){grid-column:1/7}
.nini-detail .strategy-slide:nth-child(2){grid-column:8/13;margin-top:150px}
.nini-detail .strategy-slide:nth-child(3){grid-column:2/7;margin-top:35px}
.nini-detail .strategy-slide:nth-child(4){grid-column:7/13;margin-top:185px}
.flagship-detail .header,.flagship-detail .hero-title,.flagship-detail .hero-index{color:#fff!important}.flagship-detail .header .logo{filter:invert(1)}.flagship-detail .dot{background:#fff!important}
@media(max-width:760px){.footer .meta{font-size:12px!important}}
@media(max-width:760px){.header{height:74px;padding:0 20px}.header>div:first-child{width:92px;flex-basis:92px}.header .logo{width:92px}.nav{position:static;transform:none;margin-left:auto;margin-right:18px;gap:14px;font-size:12px}.clock{margin-left:0;font-size:10px;gap:7px}.dot{width:10px;height:10px}.reading .ko,.reading .en,.strategy-copy .ko,.strategy-copy .en,.experience-copy .ko,.experience-copy .en{font-size:14px!important}.flagship-detail .diagram,.northface-detail .diagram,.goyo-detail .diagram,.popup-detail .interaction-stage,.swim-detail .fixture-wrap{width:80%!important}.nini-detail .strategy-copy{grid-column:1/5}.nini-detail .diagram{grid-column:1/5;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 12px;width:100%;margin-left:0}.nini-detail .strategy-slide:nth-child(n){grid-column:1/5;margin-top:0}.nini-detail .strategy-slide:nth-child(even){grid-column:2/5}}

/* Match the approved home paper; texture stays behind photos and embeds. */
html{background:#f8f7f4}
body{position:relative;isolation:isolate;background:#f8f7f4}
body::before{content:"";position:fixed!important;inset:0!important;z-index:-1!important;pointer-events:none!important;background:url('assets/paper-grain.svg') center/cover no-repeat!important;opacity:1!important;filter:none;mix-blend-mode:soft-light}
.footer .wordmark::after{content:"";position:absolute;inset:0;pointer-events:none;background:url('assets/paper-grain.svg') center/cover no-repeat;mix-blend-mode:screen;opacity:.17}
.footer .wordmark,.footer .logo{position:relative}
.footer .meta{font-weight:400!important}
.reading .ko,.strategy-copy .ko,.experience-copy .ko{word-break:keep-all;letter-spacing:-.025em;word-spacing:0;line-height:1.8!important}

/* North Face has a dark art direction; keep it separate from light detail pages. */
html:has(body.northface-detail),body.northface-detail{background:#080808;color:#efefec}
body.northface-detail::before{background:url('assets/paper-grain.svg') 0 0/600px 600px repeat!important}

/* Keep the project title as the sole hero caption on every detail page. */
.hero-index{display:none!important}

@media(max-width:760px){
  .header{gap:12px;justify-content:space-between}
  .header>div:first-child{flex:0 0 92px;width:92px}
  .nav{position:static;transform:none;flex:0 1 auto;min-width:0;margin:0 0 0 auto;gap:12px;font-size:13px;white-space:nowrap}
  .nav a:first-child{display:none}
  .clock{display:none}
  .hero-title{max-width:calc(100% - 40px);right:20px!important;font-size:clamp(20px,6vw,24px)!important;line-height:1.12!important;overflow-wrap:break-word}
  .strategy-counter{display:none!important}
}
@media(max-width:360px){
  .header>div:first-child{flex-basis:80px;width:80px}
  .header .logo{width:80px}
  .nav{gap:10px;font-size:12px}
}