/* TABA — Hero + P1 (DRAFT build). */
:root{--ground:#e5321f;--ink:#fff1ea;--cream:#fff1ea;--dark:#1a0c0a;--ease:cubic-bezier(.7,0,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground);transition:background .62s var(--ease)}
body{color:var(--dark);font:500 15px/1.75 'Zen Kaku Gothic New',system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:var(--ground);transition:background .62s var(--ease)}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--cream);padding:8px 12px;border-radius:4px}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--dark);outline-offset:3px}
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:20px;padding:24px 4.4%;transition:background .35s,padding .35s,box-shadow .35s,transform .3s cubic-bezier(.2,.7,.2,1)}
.bar.away{transform:translateY(-110%)}
.bar{will-change:transform}
.bar.solid{background:var(--ground);padding-top:14px;padding-bottom:14px;box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 25%,transparent)}
.wm{font:800 30px/1 'Bricolage Grotesque',sans-serif;font-stretch:75%;letter-spacing:-.01em;text-decoration:none;color:var(--ink);transition:color .62s}
.tag{font:500 11px/1.3 'Zen Kaku Gothic New';letter-spacing:.06em;color:var(--dark);background:rgba(255,241,234,.82);padding:5px 9px;border-radius:20px}
.nav{margin-left:auto;display:flex;gap:24px;background:var(--cream);padding:11px 18px;border-radius:30px;font:500 13px/1 'Zen Kaku Gothic New';letter-spacing:.06em}
.nav a{text-decoration:none}.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden}
.plate,#gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
#gl{opacity:0;transition:opacity .4s}#gl.on{opacity:1}
.pattern{position:absolute;left:0;top:0;bottom:0;width:46%;overflow:hidden;pointer-events:none;mix-blend-mode:multiply;opacity:.13;font:800 92px/.86 'Bricolage Grotesque';font-stretch:75%;letter-spacing:-.02em;color:color-mix(in srgb,var(--ground) 55%,#000);transform:rotate(-8deg) translate(-6%,-8%);white-space:nowrap;
 -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 92%);mask-image:linear-gradient(90deg,#000 55%,transparent 92%)}
.copy{position:absolute;left:4.4%;top:17%;z-index:5;max-width:34%}
h1{font:900 clamp(46px,5.3vw,84px)/1.06 'Zen Kaku Gothic New';letter-spacing:-.01em;color:var(--ink);transition:color .62s var(--ease)}
h1 span{display:block;white-space:nowrap}
html[lang=en] h1{font:800 clamp(56px,6.6vw,108px)/.86 'Bricolage Grotesque';font-stretch:75%;letter-spacing:-.025em;text-transform:uppercase}
.sub{margin-top:30px;max-width:23em;font:500 14.5px/1.9 'Zen Kaku Gothic New';color:var(--ink);opacity:.92;transition:color .62s var(--ease)}
.papers{position:absolute;left:4.4%;bottom:7.5%;z-index:6;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.papers button{position:relative;width:48px;height:64px;border:0;background:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.papers button i{position:absolute;inset:0;background:linear-gradient(135deg,var(--c) 0 72%,var(--t) 72% 100%);clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .18s var(--ease)}
.papers button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.papers button:active i{transform:scale(.9)}
.papers button[aria-checked=true]::after{content:"";position:absolute;inset:-6px;border:2px solid var(--ink);border-radius:3px;transition:border-color .62s}
.papers button[aria-checked=true] i{transform:translateY(-6px)}
.paperName{margin-left:8px;font:700 13px/1 'Zen Kaku Gothic New';letter-spacing:.06em;color:var(--ink);transition:color .62s}
.nogl{position:absolute;left:4.4%;bottom:2.5%;z-index:6;font-size:12px;color:var(--ink);opacity:.8}

/* ---------- shared section type ---------- */
.step{font:800 13px/1 'Bricolage Grotesque';font-stretch:75%;letter-spacing:.06em;color:var(--ink);margin-bottom:18px;transition:color .62s}
h2{font:900 clamp(40px,4.6vw,74px)/1.08 'Zen Kaku Gothic New';letter-spacing:-.01em;color:var(--ink);transition:color .62s}
h2 span,h3 span{display:block;white-space:nowrap}
html[lang=en] h2{font:800 clamp(52px,5.8vw,96px)/.88 'Bricolage Grotesque';font-stretch:75%;letter-spacing:-.025em;text-transform:uppercase}
.lead{margin-top:24px;max-width:24em;font:500 14.5px/1.9 'Zen Kaku Gothic New';color:var(--ink);transition:color .62s}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cv{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s}.cv.on{opacity:1}
/* ---------- open (P3) ---------- */
.open{height:240vh;position:relative}
.open .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.open .copy{position:absolute;left:4.4%;top:17%;z-index:5;max-width:36%;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px))}
/* ---------- stems ---------- */
.stems{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:4vw;align-items:center;padding:16vh 4.4% 12vh;min-height:100vh}
.stemsPlate{position:relative;aspect-ratio:860/1024;max-height:82vh;width:100%;justify-self:end;overflow:hidden;border:14px solid var(--cream);box-shadow:0 30px 60px rgba(0,0,0,.28);transform:rotate(1.2deg)}
.stemsPlate::after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:-1px;padding:8px 2px 2px;background:var(--cream);font:700 11px/1 'Zen Kaku Gothic New';letter-spacing:.08em;color:var(--dark)}
.stemsPlate .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}
.stag{position:absolute;top:9.5%;transform:translateX(-50%);background:var(--cream);color:var(--dark);font:700 12px/1 'Zen Kaku Gothic New';padding:7px 10px;border-radius:3px;white-space:nowrap;z-index:3}
.slist{list-style:none;margin-top:28px;border-top:1px solid color-mix(in srgb,var(--ink) 40%,transparent);max-width:30em}
.slist li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 40%,transparent);color:var(--ink)}
.slist b{font:900 17px/1.3 'Zen Kaku Gothic New'}.slist span{grid-column:1;font-size:12.5px;opacity:.9}.slist em{grid-row:1/3;grid-column:2;align-self:center;font:800 22px/1 'Bricolage Grotesque';font-style:normal}
.slist .green{display:block;font-size:12.5px;opacity:.9}
.sizes{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.sizes button{display:grid;grid-template-columns:auto auto;gap:2px 10px;align-items:baseline;text-align:left;background:transparent;border:2px solid color-mix(in srgb,var(--ink) 55%,transparent);color:var(--ink);border-radius:10px;padding:10px 14px;cursor:pointer;font:500 12px/1.3 'Zen Kaku Gothic New';touch-action:manipulation}
.sizes b{font:800 22px/1 'Bricolage Grotesque';grid-row:1/3}.sizes em{font-style:normal;font-weight:700}
.sizes button[aria-checked=true]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.snote{margin-top:10px;font-size:12px;color:var(--ink);opacity:.9}
/* ---------- tie (P4) ---------- */
.tie{height:300vh;position:relative}
.tiePlate{position:absolute;right:0;top:0;bottom:0;width:62%}
.tiePlate .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 78%}
.tie .copy{position:absolute;left:4.4%;top:17%;z-index:5;max-width:34%}
.marks{list-style:none;display:flex;gap:8px;margin-top:30px;counter-reset:m}
.marks li{counter-increment:m;font:700 12px/1 'Zen Kaku Gothic New';color:var(--ink);padding:9px 12px;border:1.5px solid color-mix(in srgb,var(--ink) 45%,transparent);border-radius:20px;opacity:.55;transition:opacity .2s,background .2s,color .2s}
.marks li::before{content:counter(m) " ";font-family:'Bricolage Grotesque';font-weight:800}
.marks li.on{opacity:1;background:var(--ink);color:var(--ground);border-color:var(--ink)}
/* ---------- message + CTA ---------- */
.msg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4vw;align-items:center;padding:10vh 4.4% 12vh;min-height:100vh}
.msgPlate{position:relative;aspect-ratio:1024/1180;max-height:88vh;width:100%;overflow:hidden}
.msgPlate .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%}
.card{position:absolute;left:56%;top:70%;width:250px;padding:16px 16px 14px;background:#fbf6ee;color:#3b2a24;box-shadow:0 10px 24px rgba(60,10,0,.28);transform:rotate(-6deg);border-radius:2px;z-index:3}
.card i{position:absolute;left:14px;top:12px;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px #c9b9a6}
.card p{font:600 16px/1.55 'Klee One','Zen Kaku Gothic New',serif;padding-left:16px;line-break:strict}.card .sig{font-size:13px;opacity:.75;margin-top:4px}
.fld{display:block;margin-top:20px;font:700 12.5px/1.4 'Zen Kaku Gothic New';color:var(--ink);max-width:24em}
.fld input{display:block;width:100%;margin-top:8px;padding:13px 14px;border:2px solid color-mix(in srgb,var(--ink) 55%,transparent);border-radius:8px;background:var(--cream);color:var(--dark);font:500 16px/1.3 'Zen Kaku Gothic New'}
.cta{margin-top:44px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--ink) 40%,transparent)}
.cta h3{font:900 clamp(28px,2.8vw,42px)/1.15 'Zen Kaku Gothic New';color:var(--ink)}html[lang=en] .cta h3{font:800 clamp(34px,3.4vw,52px)/.9 'Bricolage Grotesque';font-stretch:75%;text-transform:uppercase}
.cta button{margin-top:22px;font:900 15px/1 'Zen Kaku Gothic New';padding:18px 24px;border-radius:40px;border:0;background:var(--ink);color:var(--ground);cursor:pointer}
.cnote{margin-top:12px;font-size:12.5px;color:var(--ink)}.done{margin-top:12px;font-size:13px;color:var(--ink);font-weight:700}

.foot{padding:48px 4.4% 56px;background:var(--cream);color:var(--dark);font-size:12.5px;line-height:1.9}.foot p{max-width:60em}.foot .mark{margin-top:14px;font:800 12px 'Bricolage Grotesque';letter-spacing:.06em}
@media (max-width:700px){
 .bar{padding:16px 18px;gap:10px}.wm{font-size:26px}.tag{display:none}.nav{gap:12px;padding:9px 13px;font-size:11px}.nav a:nth-child(2),.nav a:nth-child(3){display:none}
 .plate,#gl{object-position:center bottom}
 .pattern{width:100%;height:20%;font-size:56px;opacity:.10;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%);mask-image:linear-gradient(180deg,#000 40%,transparent 100%)}
 .copy{left:18px;right:18px;top:auto;bottom:118px;max-width:none}
 h1{font-size:38px;text-shadow:0 2px 20px rgba(80,0,0,.28)}html[lang=en] h1{font-size:50px}
 .sub{display:none}
 .papers{left:18px;right:18px;bottom:22px;gap:10px}.papers button{width:40px;height:54px}
 .paperName{width:100%;margin:2px 0 0}
 .step{margin-bottom:12px}h2{font-size:36px}html[lang=en] h2{font-size:46px}.lead{font-size:13.5px;margin-top:14px}
 .open .copy{left:18px;right:18px;top:auto;bottom:7%;max-width:none}
 .open .pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(transparent,color-mix(in srgb,var(--ground) 92%,transparent) 55%);opacity:var(--o,0);pointer-events:none;z-index:4}
 .stems{grid-template-columns:1fr;padding:64px 18px;gap:28px}.stemsPlate{order:-1;max-height:none}.stag{font-size:10.5px;padding:5px 7px}
 .tiePlate{width:100%;top:44%}.tiePlate .plate{object-position:center 80%}.tie .copy{left:18px;right:18px;top:76px;bottom:auto;max-width:none}.tie .lead{display:none}.marks{margin-top:14px;flex-wrap:wrap}
 .bar.solid{padding-top:10px;padding-bottom:10px}
 .stems{padding:84px 18px 64px}.stemsPlate{border-width:9px;transform:none}
 .msg{padding-top:84px}
 .msg{grid-template-columns:1fr;padding:56px 18px 72px;gap:26px}.card{left:auto;right:5%;width:210px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Review #8 copy: longer EN size labels — keep S / M / L on one row on phones (letter above its text) */
@media (max-width:700px){.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sizes button{grid-template-columns:1fr;gap:4px;padding:10px}.sizes b{grid-row:auto}}