:root{
 --ink:#161616;--paper:#f4f3f1;--dark:#171717;--dark2:#222;--grey:#585856;--line:#d9d7d3;--lineD:#3a3a3a;--white:#f2f1ee;
 --serif-jp:"SM","Hiragino Mincho ProN","Yu Mincho",serif;
 --serif-en:"Fr","Iowan Old Style","Palatino Linotype",Georgia,serif;
 --f-body:"Fr","SM","Hiragino Mincho ProN","Yu Mincho",serif;
 --t-num:clamp(88px,10vw,144px);--t-h1:clamp(24px,2.3vw,32px);--t-sub:clamp(15px,1.1vw,16px);
 --gut:clamp(16px,3.2vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dark);color:var(--white);font:400 15px/1.9 var(--f-body);line-break:strict}
body.light{background:var(--paper);color:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-999px}
.small{font:400 12.5px/1.4 var(--f-body);font-variation-settings:"opsz" 9;letter-spacing:.06em}
.mark{font:500 16px/1 var(--serif-en);font-variation-settings:"opsz" 14;letter-spacing:.28em;text-transform:uppercase;text-decoration:none}
.h1{font:400 var(--t-h1)/1.5 var(--serif-jp);letter-spacing:.04em;font-feature-settings:"palt";word-break:keep-all;text-wrap:balance;margin:0}
.num{font:200 var(--t-num)/1 "FrNum",var(--serif-en);letter-spacing:-.01em;margin:0}
.price{font:400 16px/1.4 var(--serif-en);font-variation-settings:"opsz" 14}
/* header */
.hd{position:absolute;z-index:8;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gut);color:var(--white)}
.hd nav{display:flex;gap:clamp(14px,2.2vw,34px)}
.hd nav a{font:400 12.5px/1 var(--f-body);font-variation-settings:"opsz" 9;letter-spacing:.06em;text-decoration:none;padding:10px 0}
.hd .menu{display:none;font:400 12.5px/1 var(--f-body);letter-spacing:.06em}
.hd.solid{position:static;background:var(--dark)}
body.light .hd.ink{color:var(--ink)}
@media(max-width:768px){.hd nav a:not(.cart){display:none}.hd .menu{display:inline-block;margin-right:18px}.hd nav{align-items:center}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;background:var(--white);color:var(--ink);font:500 15px/1 var(--serif-jp);letter-spacing:.06em;text-decoration:none}
.btn.dk{background:var(--ink);color:var(--white)}
.btn[aria-disabled=true]{background:transparent;color:var(--grey);border:1px solid var(--line);cursor:not-allowed}
.lnk{font:400 15px/1.4 var(--serif-jp);letter-spacing:.06em;text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
/* hero (home) */
.hero{position:relative;height:100vh;min-height:640px;max-height:1000px;overflow:hidden;background:#555}
.hero>picture{position:absolute;inset:0;display:block}.hero>picture img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(10,10,10,.82) 0,rgba(10,10,10,.5) 50%,rgba(10,10,10,0) 100%)}
.cols{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(3,1fr)}
.cols a{position:relative;text-decoration:none;color:var(--white);display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px}

.cols a span{font:400 12.5px/1 var(--f-body);font-variation-settings:"opsz" 9;letter-spacing:.08em;border-bottom:1px solid transparent;padding-bottom:3px}
.cols a:hover span{border-color:var(--white)}
.hero .copy{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:84px;width:min(700px,90vw);text-align:center}
.copy .cat{font:400 14px/1.4 var(--f-body);letter-spacing:.12em;margin:0 0 12px;opacity:.9}
.copy .sub{font:400 var(--t-sub)/1.9 var(--serif-jp);margin:14px auto 22px;max-width:36em;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.copy .ctas{display:flex;gap:26px;justify-content:center;align-items:center}
.strip{display:none}
@media(max-width:600px){
 .hero{height:auto;min-height:0;max-height:none;background:var(--dark);overflow:visible}
 .hero>picture{position:relative;inset:auto;padding-top:56px}
 .hero:after,.cols{display:none}
 .strip{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding:64px 0 0 var(--gut)}
 .strip a{flex:0 0 72vw;scroll-snap-align:start;position:relative;text-decoration:none}
 .strip img{width:100%;aspect-ratio:4/5;object-fit:cover}
 .strip span{display:block;font:400 12px/1 var(--f-body);letter-spacing:.08em;padding:10px 0}
 .dots{display:flex;gap:8px;justify-content:center;padding:6px 0 0}.dots i{width:6px;height:6px;border-radius:50%;background:#555}.dots i:first-child{background:var(--white)}
 .hero .copy{position:static;transform:none;width:auto;padding:26px var(--gut) 44px;text-align:left}
 .copy .ctas{flex-direction:column;align-items:stretch;gap:16px;text-align:center}
 .copy .sub{margin-left:0}
}
/* shelf */
.shelf{padding:88px var(--gut) 96px}
.shelf h2,.sec h2{font:400 clamp(20px,1.9vw,26px)/1.5 var(--serif-jp);letter-spacing:.05em;margin:0 0 6px;font-feature-settings:"palt"}
.shelf .note{margin:0 0 36px;color:#aaa;font-size:14px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px)}
.card{text-decoration:none;display:block}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#444}
.card .t{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font:500 15px/1.4 var(--serif-jp)}
.card .t b{font:400 12.5px var(--f-body);letter-spacing:.1em;color:#aaa;margin-right:10px}
.card .w{font:400 12.5px/1.6 var(--f-body);color:#9c9c9c;margin-top:2px}
.more{margin-top:34px;display:inline-block}
@media(max-width:768px){.cards{grid-template-columns:repeat(2,1fr)}.card:nth-child(3){grid-column:1/-1}.card:nth-child(3) img{aspect-ratio:4/3}}
/* chapters */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:10px;font:200 14px/1 "FrNum",var(--serif-en);color:#fff;mix-blend-mode:difference}
.rail span.on{font-weight:500;font-family:var(--serif-en)}
@media(max-width:768px){.rail{display:none}}
.chap{position:relative;height:100vh;min-height:640px;max-height:1000px;overflow:hidden;background:#555}
.chap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chap .tx{position:absolute;bottom:56px;max-width:420px;color:#fff;z-index:2}
.chap.l .tx{left:var(--gut)}.chap.r .tx{right:var(--gut)}
.chap:after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(10,10,10,.55),rgba(10,10,10,0))}
.chap .tx *{position:relative;z-index:3}
.chap h2{font:400 22px/1.5 var(--serif-jp);letter-spacing:.05em;margin:6px 0 2px}
.chap .meta{font:400 13px/1.6 var(--f-body);color:#ddd;margin:0 0 10px}
.chap p.b{margin:0 0 14px;font:400 15px/1.9 var(--serif-jp);text-wrap:pretty}
.chap dl{margin:0 0 14px;border-top:1px solid rgba(255,255,255,.35)}
.chap dl div{display:flex;gap:18px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.35);font:400 14px/1.5 var(--serif-jp)}
.chap dt{width:2em;color:#ddd}.chap dd{margin:0}
.chap .wear{font:400 12.5px var(--f-body);color:#ddd;margin:0 0 14px}
.end{padding:34px var(--gut);text-align:center;color:#b9b9b9;font:400 14px var(--serif-jp);background:var(--dark)}
@media(max-width:768px){
 .chap{height:auto;min-height:0;max-height:none;background:var(--dark)}
 .chap>img{position:static;aspect-ratio:4/5;height:auto}
 .chap:after{display:none}
 .chap .tx{position:static;max-width:none;padding:22px var(--gut) 52px}
 .chap.r>img{object-position:30% 20%}.chap.l>img{object-position:80% 20%}
}
/* teasers */
.teas{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lineD)}
.teas a{padding:48px var(--gut) 56px;text-decoration:none;border-left:1px solid var(--lineD)}
.teas a:first-child{border-left:0}
.teas h3{font:400 18px/1.5 var(--serif-jp);margin:0 0 8px;letter-spacing:.05em}
.teas p{margin:0 0 14px;color:#bdbdbd;font:400 14px/1.9 var(--serif-jp)}
@media(max-width:768px){.teas{grid-template-columns:1fr}.teas a{border-left:0;border-top:1px solid var(--lineD);padding:32px var(--gut)}.teas a:first-child{border-top:0}}
/* footer */
.ft{padding:40px var(--gut) 48px;border-top:1px solid var(--lineD);display:grid;gap:18px;font:400 13px/1.8 var(--serif-jp);color:#aaa}
.ft nav{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--f-body)}
body.light .ft{border-color:var(--line);color:var(--grey)}
/* light pages */
.sec{padding:72px var(--gut);border-top:1px solid var(--line)}
.sec .in{max-width:1120px;margin:0 auto}
.sec p{max-width:34em;margin:0 0 14px;font-family:var(--serif-jp)}
/* product */
.pd{position:relative;height:82vh;min-height:560px;overflow:hidden;background:#555}
.pd>img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.pd:after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(to top,rgba(10,10,10,.75),rgba(10,10,10,0))}
.pd .tx{position:absolute;left:var(--gut);bottom:44px;z-index:3;color:#fff}
.pd .crumb{font:400 12.5px var(--f-body);letter-spacing:.06em;opacity:.85;margin:0 0 10px}
.pd .meta{margin:10px 0 0;font:400 13px/1.7 var(--f-body);color:#e4e4e4}
.pd .badge{display:inline-block;margin-left:10px;border:1px solid rgba(255,255,255,.5);padding:1px 8px;font:400 12px var(--f-body)}
.jump{display:flex;gap:26px;padding:16px var(--gut);border-bottom:1px solid var(--line);font:400 13px var(--serif-jp);overflow:auto;white-space:nowrap}
.sz{display:flex;gap:8px;margin:0 0 18px}
.sz button{min-width:48px;min-height:44px;border:1px solid var(--line);background:transparent;font:400 15px var(--serif-en);color:var(--ink)}
.sz button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
table.t{width:100%;border-collapse:collapse;font:400 15px/1.4 var(--serif-jp);max-width:640px}
table.t th,table.t td{padding:13px 8px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--serif-en);font-variation-settings:"opsz" 14}
table.t th:first-child,table.t td:first-child{text-align:left;font-family:var(--serif-jp)}
table.t thead th{font:400 12.5px var(--f-body);color:var(--grey);letter-spacing:.06em}
table.t td.on,table.t th.on{background:#e9e7e3}
table.t td.sp{text-align:left;font-family:var(--serif-jp)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.crop{aspect-ratio:1/1;overflow:hidden;background:#555}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.three figcaption{font:400 13.5px/1.7 var(--serif-jp);margin-top:10px}
.three figure{margin:0}
@media(max-width:768px){.two{grid-template-columns:1fr}.three{grid-template-columns:1fr 1fr}.three figure:last-child{grid-column:1/-1}.sec{padding:52px var(--gut)}}
/* form */
.fm{max-width:720px;margin:0 auto;padding:128px var(--gut) 72px}
.fm .lead{font:400 15px/1.9 var(--serif-jp);color:#444;margin:12px 0 28px}
.radios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 6px}
.radios label{display:block;border:1px solid var(--line);padding:16px 16px 14px;min-height:92px;cursor:pointer;font:500 15px/1.5 var(--serif-jp);background:#fff}
.radios label small{display:block;font:400 12.5px/1.6 var(--serif-jp);color:var(--grey);margin-top:4px}
.radios input{position:absolute;opacity:0}
.radios label.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.f{margin:24px 0 0}
.f label{display:block;font:500 14px/1.5 var(--serif-jp);margin-bottom:6px}
.f label i{font-style:normal;font:400 12px var(--f-body);color:var(--grey);margin-left:8px}
.f input,.f textarea,.f select{width:100%;min-height:48px;border:1px solid #bdbab4;background:#fff;padding:12px 14px;font:400 15px var(--serif-jp);color:var(--ink);border-radius:0}
.f textarea{min-height:140px}
.f .err{color:#9b2c1e;font:400 13.5px/1.6 var(--serif-jp);margin-top:6px}
.f.bad input{border-color:#9b2c1e}
.chk{display:flex;gap:12px;margin:26px 0;font:400 14px/1.7 var(--serif-jp)}
.chk input{width:22px;height:22px;margin-top:3px}
.stores{border-top:1px solid var(--line)}
.stores .row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font:400 15px/1.5 var(--serif-jp)}
@media(max-width:768px){.radios{grid-template-columns:1fr}.stores .row{grid-template-columns:1fr}.fm{padding-top:96px}}
@media(max-width:768px){
 .copy .sub{text-wrap:pretty;word-break:normal;overflow-wrap:normal;line-break:strict}
 .card .t{flex-direction:column;gap:2px}.card .t .price{font-size:15px}
}
@media(max-width:768px){.copy .sub,.chap p.b,.end{text-wrap:balance}}
@media(min-width:601px) and (max-width:900px){
 .hero{height:auto;min-height:0;max-height:none;background:var(--dark);overflow:visible;padding-top:64px}
 .hero>img{position:relative;inset:auto;height:auto;aspect-ratio:3/2}
 .hero:after{display:none}
 .cols{inset:64px 0 auto 0;aspect-ratio:3/2;height:auto;bottom:auto}
 .hero .copy{position:static;transform:none;width:auto;max-width:640px;margin:0 auto;padding:30px var(--gut) 52px}
 .cols a span{background:rgba(10,10,10,.45);padding:5px 8px}
}

.mhero{display:none}
@media(max-width:600px){
 .strip,.dots{display:none}
 .mhero{display:block;position:relative;padding-top:56px}
 .mhero img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
 .mhero:after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(to top,rgba(23,23,23,.95),rgba(23,23,23,0))}
 .mcols{position:absolute;z-index:2;inset:56px 0 0 0;display:grid;grid-template-columns:repeat(3,1fr)}
 .mcols a{display:flex;align-items:flex-end;justify-content:center;padding:0 4px 14px;text-decoration:none;color:var(--white);border-left:1px solid rgba(255,255,255,.14);min-height:44px}
 .mcols a:first-child{border-left:0}
 .mcols span{font:400 12px/1.5 var(--f-body);letter-spacing:.06em;text-align:center}
}

/* ===== G5 additions ===== */
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.hero .cols a:focus-visible,.mcols a:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.hd nav a[aria-current=page]{text-decoration:underline;text-underline-offset:.5em;text-decoration-thickness:1px}
.hd .menu{background:none;border:0;color:inherit;padding:10px 0;cursor:pointer}
.hd .cartbtn{background:none;border:0;color:inherit;font:400 12.5px/1 var(--f-body);letter-spacing:.06em;padding:10px 0;cursor:pointer}
.skip:focus{left:8px;top:8px;z-index:30;background:#fff;color:#000;padding:8px 12px}
/* menu overlay + cart panel */
.mnav{position:fixed;inset:0;z-index:20;background:var(--dark);color:var(--white);display:none;padding:96px var(--gut) 40px;flex-direction:column;gap:6px}
.mnav.open{display:flex}
.mnav a{font:400 22px/1.4 var(--serif-jp);padding:12px 0;text-decoration:none;border-bottom:1px solid var(--lineD)}
.mnav .x{position:absolute;right:var(--gut);top:20px;background:none;border:0;color:inherit;font:400 13px var(--f-body);padding:10px}
.cartp{position:fixed;right:0;top:0;bottom:0;width:min(380px,100vw);z-index:25;background:var(--paper);color:var(--ink);padding:28px;display:none}
.cartp.open{display:block;animation:cin .32s cubic-bezier(.2,.7,.2,1)}@keyframes cin{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.cartp h2{font:400 20px var(--serif-jp);margin:0 0 14px}
.cartp .x{position:absolute;right:20px;top:18px;background:none;border:0;font:400 13px var(--f-body);padding:10px;color:inherit}
.shade{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:24;display:none}.shade.open{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* home opener */
.hero .cover{position:absolute;inset:0;z-index:4;pointer-events:none;visibility:hidden}
.hero .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero.opening .cover{visibility:visible}
.hero .spine{position:absolute;top:0;bottom:0;width:48px;z-index:5;background:#3a3a3a;color:#fff;display:none;align-items:center;justify-content:center;font:200 18px/1 "FrNum",var(--serif-en);opacity:0}
.hero.opening .spine.on{display:flex;opacity:1;transition:opacity .2s}
.hero.opening .copy,.hero.opening .cols a span{opacity:0;transition:opacity .12s linear}
.cols a{transition:filter .2s cubic-bezier(.2,.7,.2,1)}

.chap>img{transition:transform .48s cubic-bezier(.2,.7,.2,1)}
.chap dl div{cursor:default;position:relative}
.chap dl div:hover dd,.chap dl div:focus-visible dd{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.chap .frame{position:absolute;inset:0;overflow:hidden}
.chap .frame>img{width:100%;height:100%;object-fit:cover;transition:transform .48s cubic-bezier(.2,.7,.2,1)}
@media(max-width:768px){.chap .frame{position:relative}.chap .frame>img{aspect-ratio:4/5;height:auto}}
.rail{opacity:0;pointer-events:none;transition:opacity .2s}.rail.show{opacity:1;pointer-events:auto}
.rail a{color:inherit;text-decoration:none;opacity:.5;display:flex;gap:6px;align-items:center;justify-content:flex-end}
.rail a.on{opacity:1;font-weight:500;font-family:var(--serif-en)}
.rail a.on:after{content:"";width:16px;height:1px;background:currentColor}
.chnav{display:none;gap:22px;margin-top:14px;font:400 13px var(--serif-jp)}
@media(max-width:768px){.chnav{display:flex}}
/* collection */
.pg{padding:120px var(--gut) 56px;max-width:1400px;margin:0 auto}
.pg h1{margin:0 0 6px}
.ctl{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin:20px 0 10px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 14px var(--serif-jp)}
.ctl .seg button{background:none;border:0;border-bottom:1px solid transparent;font:400 14px var(--serif-jp);padding:8px 2px;margin-right:16px;color:var(--grey);cursor:pointer}
.ctl .seg button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
.ctl fieldset{border:0;margin:0;padding:0;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
.ctl legend{float:left;margin-right:10px;color:var(--grey);font-size:13px}
.ctl label{display:inline-flex;align-items:center;gap:6px;min-height:36px;cursor:pointer}
.ctl select{font:400 14px var(--serif-jp);padding:8px;border:1px solid var(--line);background:#fff;min-height:40px}
.cnt{font:400 14px var(--serif-jp);margin:6px 0 24px}
.grp h2{font:400 clamp(20px,1.9vw,26px)/1.4 var(--serif-jp);margin:44px 0 16px;display:flex;gap:14px;align-items:baseline}
.grp h2 small{font:400 13px var(--f-body);color:var(--grey);letter-spacing:.06em}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px)}
.gc{display:block;text-decoration:none;color:inherit}
.gc .im{position:relative;aspect-ratio:4/5;overflow:hidden;background:#555}
.gc img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.gc .im img+img{position:absolute;inset:0;opacity:0}
.gc:hover .im img+img{opacity:1}
.gc .t{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font:500 15px/1.4 var(--serif-jp)}
.gc .t .price{white-space:nowrap}
.gc .s{font:400 12.5px/1.6 var(--f-body);color:var(--grey);margin-top:2px}
.gc .note{font:400 12px var(--serif-jp);color:var(--grey);margin-top:4px}
.msg{grid-column:1/-1;border:1px solid var(--line);background:#fff;padding:14px 16px;font:400 14px/1.8 var(--serif-jp)}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}
.empty{padding:40px 0;font:400 15px/1.9 var(--serif-jp)}
/* lookbook */
.lb{padding-top:0}
.lbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--dark)}
.lbs::-webkit-scrollbar{display:none}
.lk{flex:0 0 100%;scroll-snap-align:start;position:relative;height:calc(100vh - 150px);min-height:480px;max-height:900px;overflow:hidden}
.lk img{width:100%;height:100%;object-fit:cover}
.lkhd{padding:96px var(--gut) 14px;background:var(--dark);color:var(--white);display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.lkhd .h1{font-size:18px}
.lkhd small{font:400 12.5px var(--f-body);color:#aaa}
.lkinfo{padding:16px var(--gut) 20px;background:var(--dark);color:var(--white);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;font:400 14px/1.7 var(--serif-jp)}
.lkinfo .n{font:200 40px/1 "FrNum",var(--serif-en)}
.lkctl{display:flex;gap:8px}.lkctl button{min-width:44px;min-height:44px;border:1px solid #555;background:none;color:inherit;font:400 14px var(--f-body);cursor:pointer}
.lkctl button:disabled{opacity:.35;cursor:default}
.thumbs{display:flex;gap:6px;padding:0 var(--gut) 28px;background:var(--dark)}
.thumbs button{flex:1;border:0;padding:0;background:none;cursor:pointer;opacity:.5;border-bottom:2px solid transparent;min-height:44px}
.thumbs button[aria-current=true]{opacity:1;border-color:var(--white)}
.thumbs img{width:100%;aspect-ratio:3/2;object-fit:cover}
.chip{display:inline-block;border:1px solid #666;padding:0 8px;font:400 12px var(--f-body);margin-left:8px;text-decoration:none}
@media(max-width:768px){.lk{height:auto;min-height:0;max-height:none}.lk img{aspect-ratio:4/5;height:auto}.thumbs{display:none}}
/* brand */
.bt{padding:120px var(--gut) 40px;max-width:900px;margin:0 auto}
.bt .toc{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font:400 14px var(--serif-jp)}
.spr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;padding:56px var(--gut);border-top:1px solid var(--line);max-width:1200px;margin:0 auto}
.spr svg{width:100%;max-width:420px;margin:auto;display:block}
.spr:nth-of-type(even) .fig{order:2}
@media(max-width:768px){.spr{grid-template-columns:1fr}.spr:nth-of-type(even) .fig{order:0}}
.gl{width:100%;max-width:720px;border-collapse:collapse;font:400 15px/1.7 var(--serif-jp)}
.gl th,.gl td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.gl th{font-weight:500;width:34%}
.bimg{width:100%;aspect-ratio:3/2;object-fit:cover}
/* contact extras */
.ok{border:1px solid var(--ink);padding:24px;background:#fff;margin-top:24px}
.ok h2{font:400 20px var(--serif-jp);margin:0 0 8px}
.sumry{margin:14px 0;border-top:1px solid var(--line)}.sumry div{display:flex;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font:400 14px/1.7 var(--serif-jp)}.sumry dt{width:9em;color:var(--grey)}.sumry dd{margin:0}
.errsum{border:1px solid #9b2c1e;color:#9b2c1e;padding:12px 14px;margin:18px 0;font:500 14px var(--serif-jp)}
.dyn[hidden]{display:none}
.sti{width:100%;aspect-ratio:3/2;object-fit:cover;margin:32px 0 0}
/* product extras */
.pd>img{transition:transform .48s cubic-bezier(.2,.7,.2,1)}
table.t tr[data-origin]{cursor:pointer}
table.t tr[data-origin]:hover td,table.t tr[data-origin]:focus-visible td{background:#ecebe8}
table.t.size1 td:nth-child(3),table.t.size1 th:nth-child(3),table.t.size3 td:nth-child(3),table.t.size3 th:nth-child(3){background:none}
.imgl{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px)}.grid3 .grp .grid4{grid-template-columns:1fr}@media(max-width:768px){.grid3{grid-template-columns:1fr 1fr}}

.mcols{display:none}
@media(max-width:600px){
 .hero>picture{position:relative;inset:auto;padding-top:56px;background:var(--dark)}
 .hero>picture img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
 .hero>picture:after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(to top,rgba(23,23,23,.95),rgba(23,23,23,0))}
 .mcols{display:grid;grid-template-columns:repeat(3,1fr);position:absolute;z-index:2;left:0;right:0;top:56px;aspect-ratio:4/5}
 .mcols a{display:flex;align-items:flex-end;justify-content:center;padding:0 4px 14px;text-decoration:none;color:var(--white);border-left:1px solid rgba(255,255,255,.14);min-height:44px}
 .mcols a:first-child{border-left:0}
 .mcols span{font:400 12px/1.5 var(--f-body);letter-spacing:.06em;text-align:center}
 .hero .cover{top:56px}
}
@media(min-width:601px) and (max-width:900px){
 .hero>picture{position:relative;inset:auto;padding-top:64px}
 .hero>picture img{height:auto;aspect-ratio:3/2}
}
@media(max-width:600px){.copy .sub{word-break:auto-phrase}}
.h1{overflow-wrap:anywhere}
.rail:not(.show){visibility:hidden}

.chap .parts{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid rgba(255,255,255,.35)}
.chap .parts li{border-bottom:1px solid rgba(255,255,255,.35)}
.chap .parts button{display:flex;gap:18px;width:100%;min-height:44px;align-items:center;background:none;border:0;color:inherit;text-align:left;font:400 14px/1.5 var(--serif-jp);cursor:pointer;padding:6px 0}
.chap .parts .k{width:2em;color:#ddd}
.chap .parts button:hover span:last-child,.chap .parts button:focus-visible span:last-child,.chap .parts button[aria-pressed=true] span:last-child{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.lkctl button:disabled{opacity:1;color:#9a9a9a;border-style:dashed}
.mark{display:inline-block;padding:10px 0}
.lnk{display:inline-block;padding:6px 0}
.ft nav a,.hd nav a,.jump a,.toc a{display:inline-block;padding:10px 0;min-height:24px}
.teas .lnk{padding:6px 0}
.chap .tx .sr{position:absolute}

.sec,.jump{color:var(--ink)}
.jump{background:var(--paper)}
.toc a{min-width:24px;text-align:center}
body:not(.light) .sec a.lnk{color:var(--ink)}

.ctl input[type=checkbox]{width:24px;height:24px;margin:0}
table.t td.on,table.t th.on{background:#e4e2de}

p,.lead,.note{word-break:auto-phrase;text-wrap:pretty}
.copy .sub{word-break:auto-phrase}
.grid3+.grp .grid4,.grp.out .grid4{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.grid3+.grp .grid4{grid-template-columns:1fr 1fr}}
.radios label{position:relative;padding-left:44px}
.radios label:before{content:"";position:absolute;left:16px;top:20px;width:16px;height:16px;border:1px solid #888;border-radius:50%;background:#fff}
.radios label.on:before{background:radial-gradient(circle,var(--ink) 0 4px,#fff 5px)}
.radios label:hover{border-color:#888}
.radios input:focus-visible+*{outline:0}
.radios label:focus-within{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:600px){
 .hero>picture img{aspect-ratio:10/11;object-position:50% 35%}
 .mcols{aspect-ratio:10/11}
 .mcols a{border-left-color:transparent}
}
.radios input{position:absolute;opacity:0;width:24px;height:24px;left:12px;top:16px;margin:0}.chk input{min-width:24px;min-height:24px}
.pd .badge{padding:4px 10px;min-height:24px;display:inline-flex;align-items:center}

/* hero hover: no divider lines; dim the others, lift the one under the pointer */
.cols a:before,.mcols a:before{content:"";position:absolute;inset:0;background:rgba(10,10,10,0);transition:background .28s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.cols:hover a:not(:hover):not(:focus-visible):before,.cols:focus-within a:not(:focus-visible):before{background:rgba(10,10,10,.42)}
.cols a:hover:before,.cols a:focus-visible:before{background:rgba(255,255,255,.07)}
.cols a span,.mcols a span{position:relative;z-index:1}
.mcols a{border-left:0}

.grid3.flat .gc .im{aspect-ratio:4/5}
@media(max-width:768px){.grid3.flat{grid-template-columns:1fr 1fr}}
/* feathered edges: no hard seam between lit and dimmed columns */
.cols a:before{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%)}
.cols a:first-child:before{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 160px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 160px),transparent 100%)}
.cols a:last-child:before{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 160px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 160px,#000 100%)}
.cols a:hover:before,.cols a:focus-visible:before{background:rgba(255,255,255,.05)}
.cols:hover a:not(:hover):not(:focus-visible):before,.cols:focus-within a:not(:focus-visible):before{background:rgba(10,10,10,.5)}

.spr .bimg{max-width:560px;margin:auto}
.bimg,.imgl,.sti{height:auto}

/* ===== PREMIUM: film + motion ===== */
.film{background:var(--dark);color:var(--white)}
.film-box{position:relative;aspect-ratio:16/9;max-height:92vh;width:100%;background:#222;overflow:hidden}
.film-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.18)}
.film-bar i{display:block;height:100%;width:100%;background:var(--white);transform-origin:0 50%;transform:scaleX(0)}
.film-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:22px var(--gut) 40px;flex-wrap:wrap}
.film-cap h2{font:400 clamp(20px,1.9vw,26px)/1.5 var(--serif-jp);margin:0 0 2px;letter-spacing:.05em}
.film-cap p{margin:0;color:#b9b9b9;font:400 14px/1.8 var(--serif-jp)}
.film-btn{min-height:44px;padding:0 18px;border:1px solid #555;background:none;color:inherit;font:400 13.5px var(--serif-jp);cursor:pointer;letter-spacing:.06em}
.film-btn:hover{border-color:#aaa}
.lb .film{margin-top:0}
/* hero breathes (stops when opening / reduced) */
@keyframes breathe{from{object-position:50% 14%}to{object-position:50% 26%}}
.hero>picture img{animation:breathe 28s ease-in-out infinite alternate}
.hero.opening>picture img{animation-play-state:paused}
/* header hides on scroll down */
.hd{transition:transform .36s cubic-bezier(.2,.7,.2,1),background .3s}
.hd.hide{transform:translateY(-100%)}
.hd.fixed{position:fixed}
/* chapter reveal on scroll */
.js .chap:not(.in) .frame>img{transform:scale(1.07)}
.js .chap:not(.in) .tx{opacity:0;transform:translateY(18px)}
.chap .frame>img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.chap .tx{transition:opacity .9s .25s cubic-bezier(.2,.7,.2,1),transform .9s .25s cubic-bezier(.2,.7,.2,1)}
.js .chap:not(.in) .frame{clip-path:inset(6% 0 0 0)}
.chap .frame{transition:clip-path 1.2s cubic-bezier(.65,0,.2,1)}
/* product hero parallax (scroll-driven where supported) */
@supports (animation-timeline:scroll()){
 .pd>img{animation:pdpar linear both;animation-timeline:scroll(root);animation-range:0 90vh}
 @keyframes pdpar{from{transform:translateY(0)}to{transform:translateY(8vh)}}
}
/* cross-document page transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtout .32s ease both}
::view-transition-new(root){animation:vtin .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes vtout{to{opacity:0}}
@keyframes vtin{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .hero>picture img{animation:none}
 .js .chap:not(.in) .frame>img,.js .chap:not(.in) .tx{transform:none;opacity:1}
 .js .chap:not(.in) .frame{clip-path:none}
 @view-transition{navigation:none}
}

.hd,.hd.solid{position:fixed;left:0;right:0;top:0}
.hd.scrolled{background:rgba(23,23,23,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.light .hd.ink.scrolled{background:rgba(244,243,241,.92)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.pd>img{transform:none!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
/* ===== round 2: first view keeps all three garments visible (text moves into a band under the photo) ===== */
:root{--ph:clamp(460px,calc(100vh - 262px),780px)}
@media(min-width:901px){
 .hero{height:auto;min-height:0;max-height:none;overflow:visible;background:var(--dark)}
 .hero>picture{position:relative;inset:auto;display:block;height:var(--ph);overflow:hidden}
 .hero>picture:after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(to top,rgba(23,23,23,.78),rgba(23,23,23,0));pointer-events:none}
 .hero:after{display:none}
 .hero .cols{inset:0 0 auto 0;bottom:auto;height:var(--ph)}
 .hero .spine{bottom:auto;height:var(--ph)}
 .hero .copy{position:static;transform:none;left:auto;bottom:auto;width:min(760px,90vw);margin:0 auto;padding:22px 0 38px}
 .hero .copy .sub{margin-top:10px;margin-bottom:18px}
 .hero .copy .cat{margin-bottom:8px}
}
/* mobile: chapter labels sit in a dark band under the photo, not on the coats */
@media(max-width:600px){
 .hero>picture{padding-bottom:64px;background:var(--dark)}
 .mcols{aspect-ratio:auto;height:calc(100vw * 1.1 + 64px)}
 .hero>picture:after{display:none}
 .mcols a{padding-bottom:12px}
}

.flat:not(.grid3){position:relative;max-width:400px;margin:0 auto}.flat:not(.grid3) img{width:100%;height:auto;display:block}.flat:not(.grid3) svg{position:absolute;inset:0;width:100%;height:100%}
.js .chap:not(.in) .frame>img{transform:translateY(3%)}

/* hero video (Flow, in-house): fades in over the still; still stays as poster / fallback */
.hero-v{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 18%;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hero-v.on{opacity:1}
.hero.hv>picture img{animation:none}
.hero-pause{position:absolute;z-index:6;right:var(--gut);bottom:26px;font:400 12.5px/1 var(--f-body);letter-spacing:.08em;color:var(--white);background:rgba(10,10,10,.45);border:1px solid rgba(255,255,255,.45);padding:11px 16px;min-height:44px;cursor:pointer}
.hero-pause:hover{border-color:#fff}.hero-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:600px){.hero-v,.hero-pause{display:none!important}}
@media(min-width:601px) and (max-width:900px){.hero-v{inset:64px 0 auto 0;height:auto;aspect-ratio:3/2}.hero-pause{bottom:auto;top:76px}}
@media(min-width:601px) and (max-width:900px){.hero>picture{padding-top:0}}
/* PREMIUM r5: hero labels sit on a dark base band (contrast), bigger, clear of garment details */
@media(min-width:901px){
 .hero>picture:after{height:26%;background:linear-gradient(to top,rgba(14,14,14,.94) 0,rgba(14,14,14,.82) 34%,rgba(14,14,14,0) 100%)}
 .cols a{padding-bottom:18px}
 .cols a span{font-size:14px;letter-spacing:.1em;padding:0 0 4px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
}
@media(min-width:601px) and (max-width:900px){.cols a span{background:rgba(10,10,10,.78);font-size:13px;padding:7px 10px}}
@media(min-width:901px){
 .hero-v{inset:0 0 auto 0;height:var(--ph)}
 .hero-pause{bottom:auto;top:calc(var(--ph) - 62px)}
 .hero>picture:after{z-index:2}
 .hero.hv .cols{z-index:3}
}
@media(min-width:901px){.hero-pause{top:84px;bottom:auto}}
/* r5: chapters breathe; numerals quieter */
:root{--t-num:clamp(48px,5vw,68px)}
@media(min-width:769px){.chap+.chap{margin-top:clamp(72px,9vw,136px)}.chap:first-of-type{margin-top:clamp(72px,9vw,136px)}.shelf+.chap{margin-top:0}}

/* r5b: mobile hero crop (less empty wall, more garment); label gradient lighter; form parts */
@media(max-width:600px){.hero>picture img{object-position:50% 82%;animation:none}}
@media(min-width:901px){.hero>picture:after{height:18%;background:linear-gradient(to top,rgba(14,14,14,.92) 0,rgba(14,14,14,.7) 40%,rgba(14,14,14,0) 100%)}}
.ctl input[type=checkbox]{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:1px solid var(--ink);border-radius:0;background:transparent;display:inline-grid;place-content:center;cursor:pointer}
.ctl input[type=checkbox]:checked{background:var(--ink)}
.ctl input[type=checkbox]:checked:after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.ctl input[type=checkbox]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ctl select{appearance:none;-webkit-appearance:none;border:0;border-bottom:1px solid var(--ink);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23171717'/%3E%3C/svg%3E") no-repeat right 4px center;padding:8px 24px 8px 2px;border-radius:0;min-height:40px}
@media(min-width:601px) and (max-width:900px){.hero-pause{top:auto;bottom:auto;top:calc(64px + 66.667vw + 12px);right:var(--gut);background:transparent}}

/* r6: PC hero = dark nav band + photo + label band below (labels never sit on garments) */
@media(min-width:901px){
 :root{--ph:clamp(460px,calc(100vh - 250px),780px)}
 .hero{padding-top:64px;background:var(--dark)}
 .hero>picture:after{display:none}
 .hero-v{inset:64px 0 auto 0;height:var(--ph)}
 .hero .cols{inset:calc(64px + var(--ph)) 0 auto 0;height:52px;bottom:auto;background:var(--dark)}
 .hero .cols a{align-items:center;padding-bottom:0}
 .hero .cols a span{text-shadow:none;font-size:14px;padding-bottom:3px}
 .hero .spine,.hero .cover{top:64px}
 .hero .spine{height:var(--ph)}
 .hero .cover{bottom:auto;height:var(--ph)}
 .hero .copy{padding-top:76px}
 .hero-pause{top:calc(64px + 16px);right:var(--gut)}
}
@media(min-width:601px) and (max-width:900px){.hero-pause{top:72px;bottom:auto;right:var(--gut);min-height:36px;padding:8px 12px;font-size:12px;background:rgba(10,10,10,.6)}}
@media(max-width:600px){.gc .t{flex-direction:column;gap:2px}.ctl fieldset{gap:6px 14px}}
/* r6 tablet: same label band as PC */
@media(min-width:601px) and (max-width:900px){
 .hero .cols{inset:calc(64px + 66.667vw) 0 auto 0;height:48px;aspect-ratio:auto;background:var(--dark)}
 .cols a{align-items:center;padding-bottom:0}
 .cols a span{background:none;padding:0 0 3px;font-size:13px}
 .hero .copy{padding-top:56px}
}
/* r7: labels centred under each person (people are not on the column centres); taller photo */
@media(min-width:601px){
 .hero .cols a:nth-child(1) span{transform:translateX(-1.6vw)}
 .hero .cols a:nth-child(2) span{transform:translateX(-3.2vw)}
 .hero .cols a:nth-child(3) span{transform:translateX(-4.6vw)}
}
@media(min-width:901px){:root{--ph:clamp(480px,calc(100vh - 205px),820px)}.hero-v,.hero>picture img{object-position:50% 22%}}
/* r8: PC hero is a 3:2 plate (native frame, sharper, full figures) centred on the dark page */
@media(min-width:901px){
 :root{--ph:clamp(480px,calc(100vh - 235px),760px);--hw:min(100vw,calc(var(--ph)*1.5))}
 .hero>picture{width:var(--hw);margin:0 auto}
 .hero>picture img{object-position:50% 50%}
 .hero-v{left:calc(50% - var(--hw)/2);right:auto;width:var(--hw);object-position:50% 50%}
 .hero .cols{left:calc(50% - var(--hw)/2);right:auto;width:var(--hw)}
 .hero .cols a:nth-child(n) span{transform:none}
 .hero-pause{right:calc(50% - var(--hw)/2 + 16px)}
}
@media(max-width:600px){.grid3.flat{grid-template-columns:1fr}}
/* r9: full-bleed feel with native-resolution centre: backdrop extends the studio grey, plate edges feather into it */
@media(min-width:901px){
 :root{--ph:clamp(480px,calc(100vh - 290px),760px)}
 .hero>picture{width:auto;margin:0;background:#6a6a6a url(../img/hero-bg.webp?v=10221445) 50% 50%/auto 100% no-repeat}
 .hero>picture img,.hero-v{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
 .hero>picture img{width:var(--hw);margin:0 auto;display:block}
 .hero-pause{right:var(--gut)}
 .hero .cols a:nth-child(1) span{transform:translateX(calc(var(--hw)*-.012))}
 .hero .cols a:nth-child(2) span{transform:translateX(calc(var(--hw)*-.055))}
 .hero .cols a:nth-child(3) span{transform:translateX(calc(var(--hw)*-.057))}
}
@media(max-width:600px){.ctl legend{float:none;display:block;width:100%;margin:0 0 4px}}

/* r10: looks + macros band (pose and scale variety from existing photos); rail legible; CTA nearer the fold */
.looks{background:var(--dark);color:var(--white);padding:clamp(72px,8vw,120px) var(--gut) clamp(56px,6vw,96px)}
.looks h2{font:400 clamp(20px,1.9vw,26px)/1.5 var(--serif-jp);letter-spacing:.05em;margin:0 0 28px}
.lk3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);margin-bottom:clamp(12px,1.6vw,24px)}
.lk3 figure{margin:0}
.lk3 img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#3a3a3a}
.lk3.macro img{aspect-ratio:3/2}
.lk3 figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font:400 14px/1.6 var(--serif-jp);color:#d8d8d8}
.lk3 figcaption span{color:#a8a8a8}
.looks .lkl{display:flex;gap:28px;margin:26px 0 0}
@media(max-width:768px){.lk3{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px}.lk3 figure{scroll-snap-align:start}.lk3.macro{grid-auto-columns:64%}.lk3 figcaption{flex-direction:column;gap:0}}
.rail{mix-blend-mode:normal;background:rgba(14,14,14,.78);padding:12px 10px;right:14px;gap:12px;font-size:15px}
.rail a{opacity:.72}.rail a.on{opacity:1}
@media(min-width:901px){:root{--ph:clamp(430px,calc(100vh - 322px),740px)}}
/* r10 PC: compact two-column intro so headline, text and the main button all sit in the first view */
@media(min-width:901px){
 .hero .copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"cat sub" "h1 sub" "h1 cta";column-gap:clamp(40px,5vw,88px);align-items:start;text-align:left;width:min(1120px,calc(100vw - 2*var(--gut)));padding:84px 0 40px}
 .hero .copy .cat{grid-area:cat;margin:0 0 10px}
 .hero .copy .h1{grid-area:h1;margin:0;text-align:left}
 .hero .copy .sub{grid-area:sub;margin:0 0 20px;max-width:none;text-align:left}
 .hero .copy .ctas{grid-area:cta;justify-content:flex-start}
}
.lk3:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* campaign band (a still: no video) */
.camp{background:var(--dark,#171717);color:#fff;padding:0}.camp figure{margin:0;position:relative}.camp img{display:block;width:100%;height:auto;max-height:100vh;object-fit:cover;object-position:50% 40%}
.camp figcaption{position:absolute;left:var(--gut,4vw);bottom:clamp(18px,4vw,56px);max-width:30em;text-shadow:0 2px 24px rgba(0,0,0,.45)}.camp h2{font:400 clamp(22px,2.4vw,34px)/1.6 var(--serif-jp,serif);letter-spacing:.08em;margin:0 0 6px}.camp p{font:400 14px/1.9 var(--serif-jp,serif);margin:0;opacity:.95}
.camp figure::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(10,10,10,.7),rgba(10,10,10,0));pointer-events:none}.camp figcaption{z-index:2}
@media(max-width:700px){.camp figcaption{position:static;padding:18px var(--gut,20px) 30px;text-shadow:none}.camp figure::after{display:none}}
/* r7: new hero photo (3:2, three natural poses) — fills the strip, edges feather into a blurred backdrop of the same photo */
.hero>picture{background:#5a5a5a url(../img/hero-bg.webp?v=10221445) center/cover no-repeat}
.hero>picture img{display:block;margin:0 auto;width:auto;max-width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%)}
@media(max-width:900px){.hero>picture img{-webkit-mask-image:none;mask-image:none;width:100%;height:auto}}
/* r7: labels sit under each model of the new hero (image is centred, 3:2 of --ph) */
@media(min-width:901px){
 .hero .cols{display:block;left:50%;right:auto;width:calc(var(--ph)*1.5);max-width:100%;transform:translateX(-50%)}
 .hero .cols a{position:absolute;top:0;bottom:0;width:30%;transform:translateX(-50%)}
 .hero .cols a:nth-child(1){left:25%}.hero .cols a:nth-child(2){left:52%}.hero .cols a:nth-child(3){left:77%}
}
@media(min-width:901px){.hero .cols a span{transform:none!important}}
@media(max-width:600px){
 .hero>picture img{aspect-ratio:6/5;object-position:50% 30%}
 .mcols{aspect-ratio:auto;height:calc(100vw * .8334 + 64px)}
}
@media(max-width:900px){.hero>picture{background:var(--dark)}}
/* r7: chapter photos are 3:2 plates; mobile crop follows the person */
@media(max-width:600px){#c1 .frame>img{object-position:82% 50%}#c2 .frame>img{object-position:9% 50%}#c3 .frame>img{object-position:97% 50%}}
.camp figcaption{width:max-content;max-width:min(30em,86vw)}.camp h2{white-space:nowrap}
/* r9: atelier-door opening (CSS only, plays once per load; no video) */
.doors{position:absolute;z-index:6;left:0;right:0;top:64px;height:var(--ph);overflow:hidden;pointer-events:none;animation:dgone 0s linear 4.2s forwards}
.door{position:absolute;top:0;bottom:0;width:50.2%;background:#0e0e0e;display:flex;align-items:center;overflow:hidden}
.door span{font:500 clamp(34px,8vw,120px)/1 Georgia,"Times New Roman",serif;letter-spacing:.3em;color:#fff;opacity:0;animation:dfin 1.1s ease .5s forwards;white-space:nowrap}
.door.l{left:0;justify-content:flex-end;animation:dl 2.2s cubic-bezier(.75,0,.2,1) 1.9s forwards}.door.l span{margin-right:-.15em}
.door.r{right:0;justify-content:flex-start;animation:dr 2.2s cubic-bezier(.75,0,.2,1) 1.9s forwards}.door.r span{margin-left:-.15em}
.dline{position:absolute;left:50%;top:0;width:1px;height:100%;background:#fff;transform:scaleY(0);animation:dln 1.2s ease forwards,dlo .6s ease 1.9s forwards}
@keyframes dl{to{transform:translateX(-100%)}}@keyframes dr{to{transform:translateX(100%)}}
@keyframes dln{to{transform:scaleY(1)}}@keyframes dlo{to{opacity:0}}@keyframes dfin{to{opacity:1}}@keyframes dgone{to{visibility:hidden}}
.hero>picture img{animation:breathe 28s ease-in-out 5s infinite alternate,dzoom 5.2s cubic-bezier(.2,.7,.1,1) .6s both}
@keyframes dzoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero .copy,.hero .cols,.hero .mcols{animation:dfin 1.3s ease 3.6s both}
@keyframes dfin2{from{opacity:0}to{opacity:1}}
.hero .copy,.hero .cols,.hero .mcols{opacity:0;animation:dfin 1.3s ease 3.6s forwards}
@media(max-width:900px){.doors{top:64px;height:66.667vw}}
@media(max-width:600px){.doors{top:56px;height:calc(83.34vw + 4px)}}
@media(prefers-reduced-motion:reduce){.doors{display:none}.hero .copy,.hero .cols,.hero .mcols{opacity:1;animation:none}.hero>picture img{animation:none}}
/* r10 (film → touch) retired 2026-10-23: the hero is the atelier-door opening (r9) again, per CEO. Old rules kept in .local-backups/ostrel-film-2026-10-23/site.css */