/* ============================================================
   JOYCOS — brand homepage
   Direction: editorial paper. Photo-first, de-carded, hairline grid.
   Palette: espresso ink / amber gold / rice-paper ivory
   ============================================================ */
:root{
  --ink:#1c1309;
  --ink-2:#291d10;
  --amber:#c49158;
  --amber-hi:#e6c893;
  --paper:#f6f0e4;
  --paper-2:#efe6d3;
  --line-d:rgba(230,200,147,.20);
  --line-l:rgba(28,19,9,.14);
  --tx-d:#f2eade;
  --tx-dm:rgba(242,234,222,.72);
  --tx-l:#1f1710;
  --tx-lm:rgba(31,23,16,.72);
  --gold-ink:#6b4718;          /* amber that passes contrast on ivory */
  --serif:'Noto Serif KR','Apple SD Gothic Neo',serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --hd-h:74px;
  --focus:var(--ink);

  /* type scale — real steps, not a 5px mush */
  --t-display:clamp(42px,6.6vw,88px);
  --t-h2:clamp(32px,4.6vw,60px);
  --t-lede:clamp(16.5px,1.35vw,19px);
  --t-body:15.5px;
  --t-small:13.5px;
  --t-label:11px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 12px);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--tx-l);line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,a{touch-action:manipulation}
::selection{background:var(--amber);color:#1c1207}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.sec--dark,.meta,.story,.contact,.band,.lockup,.ticker,footer{--focus:var(--amber-hi)}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

html[lang="ko"] .en{display:none !important}
html[lang="en"] .ko{display:none !important}

/* ---------- bilingual text engine ----------
   Hangul must never break between syllables; Latin needs its own
   tracking and measure. One value cannot serve both scripts. */
body{word-break:keep-all;overflow-wrap:break-word}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3{letter-spacing:-.025em}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{letter-spacing:-.018em}
html[lang="ko"] p{line-height:1.85}
html[lang="en"] p{line-height:1.72}
h1,h2,h3,.band p.big{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- micro-label ---------- */
.eyebrow{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:500}
.sec--ivory .eyebrow,.sec--ivory2 .eyebrow{color:var(--gold-ink)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease);
  background:transparent;border-bottom:1px solid transparent}
body.scrolled header{background:rgba(246,240,228,.86);backdrop-filter:saturate(160%) blur(16px);border-bottom-color:var(--line-l)}
/* over the hero photo the header is light; it inverts once the page scrolls */
body:not(.scrolled) .logo{color:#fff}
body:not(.scrolled) .logo em{color:rgba(255,255,255,.66)}
body:not(.scrolled) nav.main a{color:rgba(255,255,255,.78)}
body:not(.scrolled) nav.main a:hover{color:#fff}
body:not(.scrolled) .lang button{color:rgba(255,255,255,.66)}
body:not(.scrolled) .lang button.on{color:#fff}
body:not(.scrolled) .lang .bar{color:rgba(255,255,255,.3)}
body:not(.scrolled) .burger{color:#fff}
.hd{display:flex;align-items:center;justify-content:space-between;height:var(--hd-h);gap:20px;transition:height .35s var(--ease)}
body.scrolled .hd{height:60px}
.logo{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:.04em;line-height:1}
.logo em{font-style:normal;display:block;font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.44em;
  color:var(--tx-lm);margin-top:5px;transition:opacity .3s var(--ease)}
body.scrolled .logo em{opacity:0}
nav.main{display:flex;gap:30px;font-size:14px;font-weight:500}
nav.main a{position:relative;color:var(--tx-lm);padding:4px 0;transition:color .2s var(--ease)}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
nav.main a:hover{color:var(--tx-l)}
nav.main a:hover::after{transform:scaleX(1);transform-origin:left}
.hd-right{display:flex;align-items:center;gap:10px}
.lang{display:flex;align-items:center;gap:1px;font-size:11.5px;font-weight:600;letter-spacing:.06em}
.lang button{background:none;border:0;cursor:pointer;font:inherit;letter-spacing:inherit;color:var(--tx-lm);padding:6px 8px;transition:.2s var(--ease)}
.lang button.on{color:var(--tx-l)}
.lang .bar{color:var(--line-l)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--tx-l);position:relative;z-index:70}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;margin:5px 0;transition:.35s var(--ease)}
body.nav-open .burger{color:var(--tx-d)}
body.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* full-screen mobile sheet */
.m-nav{position:fixed;inset:0;z-index:55;background:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 28px calc(56px + env(safe-area-inset-bottom));gap:2px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
body.nav-open .m-nav{opacity:1;visibility:visible}
.m-nav a{display:block;padding:15px 0;font-family:var(--serif);font-weight:300;font-size:clamp(28px,7.4vw,38px);
  color:var(--tx-d);border-bottom:1px solid var(--line-d);
  opacity:0;translate:0 16px;transition:opacity .5s var(--ease),translate .5s var(--ease)}
body.nav-open .m-nav a{opacity:1;translate:none}
body.nav-open .m-nav a:nth-child(1){transition-delay:.06s}
body.nav-open .m-nav a:nth-child(2){transition-delay:.12s}
body.nav-open .m-nav a:nth-child(3){transition-delay:.18s}
body.nav-open .m-nav a:nth-child(4){transition-delay:.24s}
body.nav-open .m-nav a:nth-child(5){transition-delay:.30s}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  padding:15px 30px;border:1px solid transparent;overflow:hidden;transition:color .3s var(--ease),border-color .3s var(--ease);cursor:pointer}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .38s var(--ease)}
.btn>*{position:relative}
.btn:active{scale:.97}
.btn-solid{background:var(--paper);color:var(--ink)}
.btn-solid::before{background:var(--amber)}
.btn-ghost{border-color:rgba(242,234,222,.5);color:var(--tx-d)}
.btn-ghost::before{background:var(--paper)}
.sec--dark .btn-solid,.sec--ivory .btn-solid,.sec--ivory2 .btn-solid{background:var(--ink);color:var(--paper)}
.sec--ivory .btn-ghost,.sec--ivory2 .btn-ghost{border-color:rgba(28,19,9,.28);color:var(--tx-l)}

/* ---------- hero: full-strength photo, copy on the floor ---------- */
.hero{position:relative;isolation:isolate;min-height:min(94svh,900px);display:flex;align-items:flex-end;overflow:hidden;
  background:var(--ink);margin-top:calc(-1 * var(--hd-h))}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% center;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(18,12,4,.90) 0%,rgba(18,12,4,.80) 16%,rgba(18,12,4,.58) 36%,rgba(18,12,4,.30) 54%,rgba(18,12,4,.08) 72%,rgba(18,12,4,0) 86%),
    linear-gradient(to right,rgba(18,12,4,.58) 0%,rgba(18,12,4,.26) 34%,rgba(18,12,4,0) 60%),
    linear-gradient(to bottom,rgba(18,12,4,.42) 0%,rgba(18,12,4,0) 15%)}
.hero .wrap{width:100%;padding-top:calc(var(--hd-h) + 40px);padding-bottom:clamp(56px,7vh,92px)}
.hero-copy{max-width:640px;color:var(--tx-d)}
.hero .eyebrow{color:var(--amber-hi)}
.hero h1{font-family:var(--serif);font-weight:200;font-size:var(--t-display);line-height:1.1;margin-top:18px;color:#fff}
.hero h1 strong{font-weight:500;color:var(--amber-hi)}
.hero .lede{margin-top:22px;max-width:46ch;color:rgba(255,255,255,.82);font-size:var(--t-lede);line-height:1.75}
.hero .lede b{font-weight:600;color:#fff}
.cta-row{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.hero-cap{position:absolute;right:28px;bottom:clamp(56px,7vh,92px);z-index:1;
  writing-mode:vertical-rl;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.42)}

/* ---------- meta bar ---------- */
.meta{background:var(--ink);color:var(--tx-d)}
.meta .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:38px;padding-bottom:38px}
.m-cell b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.9vw,26px);color:var(--amber-hi);
  font-variant-numeric:lining-nums tabular-nums}
.m-cell span{display:block;margin-top:8px;font-size:12.5px;color:var(--tx-dm);line-height:1.5}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);border-top:1px solid var(--line-d);overflow:hidden;padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk{display:flex;width:max-content;animation:tkroll 52s linear infinite}
.tk-track{display:flex;flex:none}
.tk-track span{font-family:var(--serif);font-weight:300;font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx-dm);padding:0 26px;white-space:nowrap}
.tk-track span::after{content:"·";margin-left:26px;color:var(--amber)}
@keyframes tkroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:clamp(84px,11vw,148px) 0}
.sec--ivory{background:var(--paper)}
.sec--ivory2{background:var(--paper-2)}
.sec--dark{background:var(--ink);color:var(--tx-d)}
.sec h2{font-family:var(--serif);font-weight:200;font-size:var(--t-h2);line-height:1.12;margin-top:14px}
.sec h2 strong{font-weight:500}
.sec--dark h2 strong{color:var(--amber-hi)}
.sec--ivory h2 strong,.sec--ivory2 h2 strong{color:var(--gold-ink)}
.sub{margin-top:20px;color:var(--tx-lm);font-size:var(--t-body);max-width:52ch}
.sec--dark .sub{color:var(--tx-dm)}
.sec-head{margin-bottom:clamp(44px,5vw,72px);padding-top:20px;border-top:1px solid var(--line-l)}
.sec--dark .sec-head{border-top-color:var(--line-d)}
@media (min-width:1001px){
  .sec-head{display:grid;grid-template-columns:1.15fr .85fr;column-gap:60px;align-items:end}
  .sec-head .sub{grid-column:2;grid-row:1/span 2;align-self:end;margin-top:0}
}

/* ---------- brand cards: staggered, de-carded ---------- */
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:bd}
.b-card{display:flex;flex-direction:column;counter-increment:bd}
.b-card:nth-child(2){margin-top:40px}
.b-card:nth-child(3){margin-top:80px}
.b-card .ph{aspect-ratio:3/4;overflow:hidden;background:var(--paper-2);position:relative}
.b-card .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(28,19,9,.07);pointer-events:none}
.b-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.b-card .tx{padding:20px 0 0;margin-top:20px;border-top:1px solid var(--line-l);position:relative}
.b-card .tx::before{content:counter(bd,decimal-leading-zero);position:absolute;top:20px;right:0;
  font-size:10.5px;letter-spacing:.14em;color:var(--tx-lm);font-variant-numeric:tabular-nums}
.b-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2vw,26px);margin-top:10px}
.b-card h3 small{display:block;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.16em;color:var(--tx-lm);margin-top:7px}
.b-card p{margin-top:13px;font-size:14px;color:var(--tx-lm)}
.b-card .go{position:relative;display:inline-block;margin-top:18px;font-size:13px;font-weight:600;color:var(--gold-ink);padding-bottom:3px}
.b-card .go::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:right;transition:transform .45s var(--ease)}

/* ---------- signature: numbered index, no cards ---------- */
.sig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:sig}
.s-card{counter-increment:sig;display:flex;flex-direction:column}
.s-card .ph{aspect-ratio:1;overflow:hidden;background:var(--paper-2);position:relative}
.s-card .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(28,19,9,.07);pointer-events:none}
.s-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.s-card .tx{padding:18px 0 0;margin-top:18px;border-top:1px solid var(--line-l)}
.s-card .brandtag{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  display:flex;gap:10px;align-items:baseline}
.s-card .brandtag::before{content:counter(sig,decimal-leading-zero);color:var(--tx-lm);font-variant-numeric:tabular-nums}
.s-card h3{font-family:var(--serif);font-size:19px;font-weight:500;margin-top:10px;line-height:1.35}
.s-card p{margin-top:10px;font-size:var(--t-small);color:var(--tx-lm)}

/* ---------- full-bleed band ---------- */
.band{position:relative;isolation:isolate;min-height:min(72vh,620px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;z-index:-2}
/* fades out of the ivory above and melts into the dark story below — no seam */
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(239,230,211,.6) 0%,rgba(28,19,9,0) 22%),
    linear-gradient(to top,var(--ink) 0%,rgba(28,19,9,.72) 20%,rgba(28,19,9,.2) 52%,rgba(28,19,9,.05) 76%)}
.band .inner{width:100%;max-width:1240px;margin:0 auto;padding:0 28px clamp(52px,7vw,86px);color:#fff}
.band .eyebrow{color:var(--amber-hi)}
.band p.big{font-family:var(--serif);font-weight:200;font-size:clamp(38px,7.4vw,104px);line-height:1.02;margin-top:20px}
.band p.big .w{display:block}
.band p.big .w+.w{margin-top:2px}
.band p.small{margin-top:22px;font-size:14px;color:rgba(255,255,255,.72);max-width:40ch}

/* ---------- story: the numeral breaks its column ---------- */
.story .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,76px);align-items:start}
.year{font-family:var(--serif);font-weight:200;font-size:clamp(96px,15.5vw,248px);line-height:.82;
  letter-spacing:-.05em;color:var(--amber-hi);font-variant-numeric:lining-nums tabular-nums;margin-left:-.06em}
.year-cap{margin-top:20px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-dm);
  padding-top:14px;border-top:1px solid var(--line-d)}
.s-row{display:flex;gap:44px;flex-wrap:wrap;margin-top:44px;padding-top:30px;border-top:1px solid var(--line-d)}
.s-row div b{display:block;font-family:var(--serif);font-weight:300;font-size:26px;color:var(--amber-hi);line-height:1.2}
.s-row div span{display:block;margin-top:7px;font-size:12.5px;color:var(--tx-dm)}

/* ---------- oversized lockup ---------- */
.lockup{background:var(--ink);overflow:hidden;padding:clamp(20px,4vw,48px) 0 0;text-align:center}
.lockup b{display:block;font-family:var(--serif);font-weight:200;font-size:25.5vw;line-height:.78;letter-spacing:-.035em;
  background:linear-gradient(180deg,var(--amber-hi) 8%,rgba(196,145,88,.12) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- where to buy: editorial index rows ---------- */
.buy-grid{display:block;border-top:1px solid var(--line-l)}
.buy-card{position:relative;display:grid;grid-template-columns:150px 1.1fr 1.4fr auto;gap:24px;align-items:center;
  padding:26px 4px;border-bottom:1px solid var(--line-l);isolation:isolate;transition:padding .4s var(--ease)}
.buy-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--ease)}
.buy-card .rg{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);transition:color .3s var(--ease)}
.buy-card b{font-family:var(--serif);font-size:clamp(19px,2vw,26px);font-weight:500;transition:color .3s var(--ease)}
.buy-card>.ko,.buy-card>.en{font-size:13.5px;color:var(--tx-lm);transition:color .3s var(--ease)}
.buy-card .arrow{font-size:14px;color:var(--tx-lm);letter-spacing:.1em;transition:color .3s var(--ease),transform .4s var(--ease)}
/* honest state: no href = not yet live, so it must not look clickable */
.buy-card:not([href]){cursor:default}
.buy-card:not([href]) .arrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-lm);opacity:.7}
.buy-note{margin-top:26px;font-size:13px;color:var(--tx-lm)}

/* ---------- contact ---------- */
.contact .wrap{display:grid;grid-template-columns:1fr .95fr;gap:clamp(40px,5vw,76px);align-items:start}
.c-list{border-top:1px solid var(--line-d)}
.c-row{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-d);font-size:14.5px}
.c-row i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--amber);text-transform:uppercase;padding-top:4px}
.c-row a{color:var(--amber-hi);border-bottom:1px solid rgba(230,200,147,.3);overflow-wrap:anywhere}
.c-row span{color:var(--tx-dm);line-height:1.7}

/* ---------- footer ---------- */
footer{background:#140d05;color:rgba(242,234,222,.5);font-size:12.5px}
footer .wrap{padding-top:44px;padding-bottom:calc(48px + env(safe-area-inset-bottom))}
.f-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline}
.f-logo{font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.1em;color:var(--tx-d)}
.f-legal{margin-top:20px;line-height:2}
.f-copy{margin-top:18px;color:rgba(242,234,222,.32)}

/* ---------- film grain: the texture layer premium beauty sites all have ---------- */
body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* swipe hint — hidden by default, shown under the mobile rails */
.rail-hint{display:none;align-items:center;gap:8px;margin-top:14px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-lm)}
.rail-hint::before{content:"";width:26px;height:1px;background:currentColor;opacity:.5}

/* ---------- reveal ----------
   animates `translate`, NOT `transform`, so hover/scroll transforms stay free */
html.js .rv{opacity:0;translate:0 20px;transition:opacity .85s var(--ease),translate .85s var(--ease);transition-delay:var(--d,0s)}
html.js .rv.vis{opacity:1;translate:none}

/* ---------- desktop-only enhancements ---------- */
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:scaleY(1)}
  .btn-solid:hover{color:#1c1207}
  .btn-ghost:hover{color:var(--ink);border-color:var(--paper)}
  .sec--ivory .btn-solid:hover,.sec--ivory2 .btn-solid:hover,.sec--dark .btn-solid:hover{color:#1c1207}
  .b-card:hover .ph img,.s-card:hover .ph img{transform:scale(1.045)}
  .b-card .go:hover::after{transform:scaleX(0)}
  .buy-card[href]:hover{padding-left:22px;padding-right:22px}
  .buy-card[href]:hover::before{transform:scaleY(1)}
  .buy-card[href]:hover b{color:var(--paper)}
  .buy-card[href]:hover .rg{color:var(--amber-hi)}
  .buy-card[href]:hover>.ko,.buy-card[href]:hover>.en{color:var(--tx-dm)}
  .buy-card[href]:hover .arrow{color:var(--amber-hi);transform:translateX(6px)}
}
/* touch devices get press feedback instead of sticky hover states */
@media (hover:none){
  .b-card:active .ph img,.s-card:active .ph img{transform:scale(1.03)}
  .buy-card[href]:active::before{transform:scaleY(1)}
  .buy-card[href]:active b{color:var(--paper)}
  .buy-card[href]:active .rg{color:var(--amber-hi)}
}

/* scroll-driven hero drift — progressive enhancement, desktop only */
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hero-bg{animation:heroDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes heroDrift{from{transform:scale(1.06) translateY(-1.4%)}to{transform:scale(1.06) translateY(1.4%)}}
  }
}

@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;translate:none;transition:none}
  html{scroll-behavior:auto}
  .tk{animation:none}
  body::after{display:none}
  *{transition:none !important;animation:none !important}
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:1000px){
  :root{--hd-h:62px}
  nav.main{display:none}
  .burger{display:block}
  .sec-head{margin-bottom:36px}
  .b-card:nth-child(2),.b-card:nth-child(3){margin-top:0}

  /* hero stays one full-bleed frame — never a photo slab + text slab */
  .hero{min-height:min(96svh,780px)}
  .hero .wrap{padding-bottom:44px}
  .hero-copy{max-width:none}
  .hero .lede{font-size:15.5px;max-width:38ch}
  .hero-cap{display:none}
  .cta-row{margin-top:28px;gap:10px}
  .btn{padding:14px 24px;font-size:13.5px}

  /* brand + signature become edge-bleeding snap rails */
  .brand-grid,.sig-grid{display:grid;grid-auto-flow:column;grid-auto-columns:76%;grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    gap:16px;margin-inline:-28px;padding-inline:28px;padding-bottom:6px;
    scrollbar-width:none;-ms-overflow-style:none}
  .brand-grid::-webkit-scrollbar,.sig-grid::-webkit-scrollbar{display:none}
  .b-card,.s-card{scroll-snap-align:start}
  .b-card .ph{aspect-ratio:3/4}
  .s-card .ph{aspect-ratio:1}
  .rail-hint{display:flex}

  .band{min-height:min(72svh,560px)}
  .story .wrap,.contact .wrap{grid-template-columns:1fr;gap:36px}
  .year{font-size:clamp(88px,26vw,150px)}
  .meta .wrap{grid-template-columns:1fr 1fr;gap:26px 20px}

  /* buy rows restack: region+name on one line, descriptor under */
  .buy-card{grid-template-columns:1fr auto;gap:4px 16px;padding:20px 2px;align-items:baseline}
  .buy-card .rg{grid-column:1;font-size:10px}
  .buy-card b{grid-column:1;grid-row:2}
  .buy-card>.ko,.buy-card>.en{grid-column:1;grid-row:3;margin-top:2px}
  .buy-card .arrow{grid-column:2;grid-row:2}
  .buy-card[href]:hover{padding-left:2px;padding-right:2px}
  .lockup b{font-size:29vw}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .brand-grid,.sig-grid{grid-auto-columns:84%;margin-inline:-20px;padding-inline:20px}
  .logo{font-size:20px}
  .s-row{gap:26px}
  .c-row{grid-template-columns:1fr;gap:6px}
  .meta .wrap{padding-top:30px;padding-bottom:30px}
}