/* ============================================================
   OTTACU — shared styles
   Anime-inspired streetwear · strictly monochrome · ensō signature
   ============================================================ */
:root{
  --ink:#0E0E0E; --ink-2:#161616; --paper:#F2F0EB; --paper-2:#E9E6DE;
  --grey:#9A9A93; --white:#FBFAF7; --line:rgba(14,14,14,.14); --line-on-ink:rgba(251,250,247,.16);
  --display:"Shippori Mincho", serif; --sans:"Zen Kaku Gothic New", system-ui, sans-serif;
  --pad:clamp(20px,5vw,84px); --rail:56px; --maxw:1480px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.label{font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--grey);}
.jp{font-family:var(--display);}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

/* RAIL ---------------------------------------------------------- */
.rail{position:fixed; top:0; bottom:0; left:0; width:var(--rail); z-index:40; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:18px 0; background:var(--paper);}
.rail .vtext{writing-mode:vertical-rl; text-orientation:mixed; font-family:var(--display); font-size:13px; letter-spacing:.32em;}
.rail .vtext.jp{font-size:15px;}
.rail .dot{width:5px; height:5px; border-radius:50%; background:var(--ink);}

/* NAV ----------------------------------------------------------- */
header.nav{position:fixed; top:0; left:var(--rail); right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px var(--pad); background:rgba(242,240,235,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .4s ease;}
.nav .wordmark{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:.06em;}
.nav .links{display:flex; gap:30px; align-items:center;}
.nav .links a{font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase; position:relative; padding-bottom:3px;}
.nav .links a.active{color:var(--ink);}
.nav .links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--ink); transition:width .25s ease;}
.nav .links a:hover::after, .nav .links a:focus-visible::after, .nav .links a.active::after{width:100%;}
.cart-btn{font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--ink); padding:8px 15px; background:transparent; cursor:pointer; transition:.2s;}
.cart-btn:hover{background:var(--ink); color:var(--paper);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.burger span{width:22px; height:2px; background:var(--ink); transition:.3s;}
.mobile-menu{position:fixed; inset:0; z-index:60; background:var(--ink); color:var(--paper); transform:translateY(-100%); transition:transform .45s cubic-bezier(.7,0,.2,1); display:flex; flex-direction:column; justify-content:center; padding:var(--pad); gap:6px;}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{font-family:var(--display); font-weight:700; font-size:38px; letter-spacing:.02em; padding:8px 0; border-bottom:1px solid var(--line-on-ink);}
.mobile-menu .mm-jp{font-size:.4em; color:var(--grey); margin-left:14px;}
.mobile-menu .mm-close{position:absolute; top:18px; right:var(--pad); background:none; border:none; color:var(--paper); font-size:30px; cursor:pointer; line-height:1;}
.mobile-menu .mm-foot{margin-top:28px; display:flex; gap:24px;}
.mobile-menu .mm-foot a{font-family:var(--sans); font-size:13px; letter-spacing:.16em; text-transform:uppercase; border:none; padding:0;}

/* LAYOUT -------------------------------------------------------- */
.wrap{margin-left:var(--rail); flex:1;}
.inner{max-width:var(--maxw); margin:0 auto;}
section{padding:clamp(56px,9vw,128px) var(--pad);}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:50px;}
.sec-head h2{font-family:var(--display); font-weight:800; font-size:clamp(34px,6vw,68px); line-height:.9; letter-spacing:.02em;}
.sec-head h2 .jp{display:block; font-size:.4em; font-weight:500; color:var(--grey); letter-spacing:.1em; margin-bottom:8px;}

/* HERO ---------------------------------------------------------- */
.hero{min-height:100svh; position:relative; display:flex; flex-direction:column; justify-content:center; padding:130px var(--pad) 80px; overflow:hidden;}
.enso{position:absolute; top:50%; right:clamp(-60px,2vw,80px); transform:translateY(-50%); width:min(58vw,640px); aspect-ratio:1; opacity:.9; pointer-events:none;}
.hero__eyebrow{display:flex; gap:18px; align-items:center; margin-bottom:24px; flex-wrap:wrap;}
.hero__title{font-family:var(--display); font-weight:800; font-size:clamp(64px,15vw,210px); line-height:.86; letter-spacing:.02em; position:relative; z-index:2;}
.hero__tag{font-family:var(--display); font-weight:500; font-size:clamp(20px,2.6vw,34px); margin-top:18px; letter-spacing:.02em; position:relative; z-index:2;}
.hero__sub{margin-top:14px; color:var(--grey); max-width:42ch; position:relative; z-index:2;}
.hero__cta{margin-top:34px; display:inline-flex; align-items:center; gap:12px; align-self:flex-start; font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.2em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:16px 28px; position:relative; z-index:2; transition:transform .2s;}
.hero__cta:hover{transform:translateX(5px);}
.scrollcue{position:absolute; bottom:26px; left:var(--pad); font-family:var(--sans); font-size:10px; letter-spacing:.34em; color:var(--grey); text-transform:uppercase;}

/* page header (interior pages) */
.pagehead{padding:140px var(--pad) 40px;}
.pagehead .label{margin-bottom:14px; display:block;}
.pagehead h1{font-family:var(--display); font-weight:800; font-size:clamp(44px,9vw,110px); line-height:.88; letter-spacing:.02em;}
.pagehead h1 .jp{display:block; font-size:.34em; font-weight:500; color:var(--grey); letter-spacing:.1em; margin-bottom:10px;}
.crumbs{font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:28px;}
.crumbs a:hover{color:var(--ink);}

/* MARQUEE ------------------------------------------------------- */
.strip{background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap; padding:13px 0;}
.strip__track{display:inline-flex; gap:40px; animation:slide 30s linear infinite; font-family:var(--display); font-size:14px; letter-spacing:.18em; text-transform:uppercase;}
.strip__track .jp{letter-spacing:.1em;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* PRODUCT GRID -------------------------------------------------- */
.drop{display:grid; grid-template-columns:repeat(2,1fr); gap:4px;}
.drop.cols-3{grid-template-columns:repeat(2,1fr);}
.piece{background:var(--paper-2); border:1px solid var(--line); display:grid; grid-template-columns:1.1fr .9fr; min-height:340px; transition:transform .3s ease;}
.piece:hover{transform:translateY(-4px);}
.piece__art{position:relative; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.piece__art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.piece__kanji{font-family:var(--display); font-weight:700; font-size:clamp(56px,9vw,120px); opacity:.92;}
.piece__num{position:absolute; top:14px; left:16px; z-index:2;} .piece__num .label{color:rgba(251,250,247,.55);}
.piece__slot{position:absolute; bottom:14px; left:16px; right:16px; font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,250,247,.4); z-index:2;}
.piece__body{padding:26px 24px; display:flex; flex-direction:column;}
.piece__name{font-family:var(--display); font-weight:700; font-size:26px; line-height:1.1;}
.piece__meaning{color:var(--grey); margin-top:10px; font-size:15px; flex:1;}
.piece__foot{display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.piece__price{font-family:var(--display); font-weight:700; font-size:18px;}
.btn{font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--ink); background:transparent; color:var(--ink); padding:9px 16px; cursor:pointer; transition:.2s; display:inline-block; text-align:center;}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn--solid{background:var(--ink); color:var(--paper);}
.btn--solid:hover{background:var(--ink-2);}
.btn--block{display:block; width:100%; padding:16px;}
.btn[disabled]{opacity:.35; cursor:not-allowed;} .btn[disabled]:hover{background:transparent; color:var(--ink);}

/* PRODUCT DETAIL ------------------------------------------------ */
.pdp{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,64px); padding:120px var(--pad) clamp(56px,9vw,120px); align-items:start;}
.pdp__media{position:sticky; top:96px; background:var(--ink); color:var(--paper); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; border:1px solid var(--line);}
.pdp__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.pdp__media .piece__kanji{font-size:clamp(90px,16vw,200px);}
.pdp__num{position:absolute; top:18px; left:20px;} .pdp__num .label{color:rgba(251,250,247,.5);}
.pdp__slot{position:absolute; bottom:18px; left:20px; right:20px; font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,250,247,.4);}
.pdp__kanji-sub{font-family:var(--display); font-size:20px; color:var(--grey); margin-bottom:8px;}
.pdp__name{font-family:var(--display); font-weight:800; font-size:clamp(36px,5vw,60px); line-height:.95; letter-spacing:.02em;}
.pdp__price{font-family:var(--display); font-weight:700; font-size:24px; margin:18px 0;}
.pdp__story{color:var(--ink); opacity:.78; margin-bottom:8px;}
.pdp__divider{height:1px; background:var(--line); margin:28px 0;}
.sizes{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 26px;}
.size{min-width:52px; padding:12px 0; text-align:center; border:1px solid var(--line); font-family:var(--sans); font-size:14px; cursor:pointer; transition:.15s; background:transparent;}
.size:hover{border-color:var(--ink);}
.size.sel{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.size-note{font-size:13px; color:var(--grey); margin-bottom:10px;}
.spec{display:grid; grid-template-columns:auto 1fr; gap:8px 24px; font-family:var(--sans); font-size:14px; margin-top:8px;}
.spec dt{color:var(--grey); text-transform:uppercase; letter-spacing:.08em; font-size:12px;}
.spec dd{text-align:right;}

/* PHILOSOPHY ---------------------------------------------------- */
.philo{background:var(--ink); color:var(--paper);}
.philo .sec-head{border-color:var(--line-on-ink);}
.philo .sec-head h2{color:var(--paper);} .philo .sec-head h2 .jp{color:rgba(251,250,247,.5);}
.philo__lead{font-family:var(--display); font-weight:500; font-size:clamp(26px,3.4vw,46px); line-height:1.18; max-width:18ch; margin-bottom:54px;}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-on-ink); border:1px solid var(--line-on-ink);}
.pillar{background:var(--ink); padding:28px 24px;}
.pillar .n{font-family:var(--display); font-size:15px; color:rgba(251,250,247,.5); letter-spacing:.2em;}
.pillar h3{font-family:var(--display); font-weight:700; font-size:20px; margin:14px 0 8px;}
.pillar p{color:rgba(251,250,247,.66); font-size:14px;}

/* PROSE / STORY ------------------------------------------------- */
.prose{max-width:64ch;}
.prose p{margin-bottom:20px; font-size:18px;}
.prose h3{font-family:var(--display); font-weight:700; font-size:26px; margin:40px 0 14px;}
.prose .jp-mark{font-family:var(--display); font-size:40px; display:block; margin-bottom:24px;}

/* SIZE GUIDE TABLE ---------------------------------------------- */
.sizetable{width:100%; border-collapse:collapse; font-family:var(--sans); margin-top:10px;}
.sizetable th, .sizetable td{border:1px solid var(--line); padding:14px 16px; text-align:center; font-size:15px;}
.sizetable th{font-family:var(--display); font-weight:700; background:var(--paper-2); letter-spacing:.04em;}
.sizetable td:first-child, .sizetable th:first-child{text-align:left; font-weight:700;}

/* CONTACT ------------------------------------------------------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px);}
.field{display:flex; flex-direction:column; margin-bottom:18px;}
.field label{font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:8px;}
.field input, .field textarea{border:1px solid var(--line); background:var(--paper); padding:14px 16px; font-family:var(--sans); font-size:15px; color:var(--ink); border-radius:0;}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--ink);}
.field textarea{min-height:140px; resize:vertical;}

/* SIGNUP -------------------------------------------------------- */
.signup{background:var(--paper-2); text-align:center;}
.signup .jp.top{font-family:var(--display); font-size:30px; color:var(--grey); display:block; margin-bottom:8px;}
.signup h2{font-family:var(--display); font-weight:800; font-size:clamp(30px,5vw,56px); letter-spacing:.02em; margin-bottom:14px;}
.signup p{color:var(--grey); max-width:42ch; margin:0 auto 30px;}
.signup__form{display:flex; max-width:460px; margin:0 auto; border:1px solid var(--ink);}
.signup__form input{flex:1; border:none; background:transparent; padding:16px; font-family:var(--sans); font-size:14px; color:var(--ink);}
.signup__form input:focus{outline:none;}
.signup__form button{border:none; background:var(--ink); color:var(--paper); padding:0 24px; font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;}

/* FOOTER -------------------------------------------------------- */
footer.site{background:var(--ink); color:var(--paper); padding:clamp(48px,7vw,100px) var(--pad) 40px;}
.foot__top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px; border-bottom:1px solid var(--line-on-ink); padding-bottom:40px;}
.foot__brand{font-family:var(--display); font-weight:800; font-size:clamp(44px,11vw,128px); line-height:.82; letter-spacing:.04em;}
.foot__brand .jp{display:block; font-size:.28em; font-weight:500; color:rgba(251,250,247,.55); letter-spacing:.14em; margin-top:14px;}
.foot__cols{display:flex; gap:clamp(28px,6vw,72px); flex-wrap:wrap;}
.foot__cols h4{font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(251,250,247,.45); margin-bottom:15px;}
.foot__cols a{display:block; font-size:14px; color:rgba(251,250,247,.82); margin-bottom:10px; transition:.2s;}
.foot__cols a:hover{color:var(--paper);}
.foot__bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:30px;}
.foot__bottom .label{color:rgba(251,250,247,.4);}

/* REVEAL -------------------------------------------------------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:none;}

/* RESPONSIVE ---------------------------------------------------- */
@media(max-width:980px){ .pdp{grid-template-columns:1fr;} .pdp__media{position:relative; top:0; max-width:520px;} .contact-grid{grid-template-columns:1fr;} }
@media(max-width:880px){ .drop{grid-template-columns:1fr;} .pillars{grid-template-columns:1fr;} .enso{opacity:.45; width:80vw;} }
@media(max-width:760px){
  .nav .links{display:none;} .burger{display:flex;}
}
@media(max-width:600px){
  :root{--rail:0px;} .rail{display:none;} body{font-size:16px;}
  .piece{grid-template-columns:1fr;} .piece__art{min-height:240px;}
  .signup__form{flex-direction:column;} .signup__form button{padding:14px;} .foot__top{flex-direction:column;}
  .mobile-menu a{font-size:30px;}
}
@media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important;} .reveal{opacity:1; transform:none;} }

/* ============================================================
   CART DRAWER (WhatsApp COD)
   ============================================================ */
.cart-drawer{position:fixed; inset:0; z-index:70; visibility:hidden; pointer-events:none;}
.cart-drawer.open{visibility:visible; pointer-events:auto;}
.cart-backdrop{position:absolute; inset:0; background:rgba(14,14,14,.5); opacity:0; transition:opacity .35s ease;}
.cart-drawer.open .cart-backdrop{opacity:1;}
.cart-panel{position:absolute; top:0; right:0; height:100%; width:min(420px,100%); background:var(--paper); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .4s cubic-bezier(.7,0,.2,1); border-left:1px solid var(--line);}
.cart-drawer.open .cart-panel{transform:translateX(0);}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line);}
.cart-head h3{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:.04em;}
.cart-head .jp{font-size:.6em; color:var(--grey); margin-left:8px;}
.cart-close{background:none; border:none; font-size:28px; line-height:1; cursor:pointer; color:var(--ink);}
.cart-body{flex:1; overflow-y:auto; padding:8px 24px;}
.cart-empty{padding:48px 0; text-align:center; color:var(--grey);}
.cart-line{display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line);}
.cart-line__k{width:64px; height:80px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:28px; overflow:hidden;}
.cart-line__k img{width:100%; height:100%; object-fit:cover;}
.cart-line__name{font-family:var(--display); font-weight:700; font-size:16px;}
.cart-line__meta{font-size:12px; color:var(--grey); margin:2px 0 8px;}
.qty{display:inline-flex; align-items:center; gap:14px; border:1px solid var(--line); padding:4px 10px;}
.qty button{background:none; border:none; font-size:16px; cursor:pointer; color:var(--ink); line-height:1;}
.cart-line__price{font-family:var(--display); font-weight:700; font-size:15px;}
.cart-footer{padding:20px 24px; border-top:1px solid var(--line); background:var(--paper-2);}
.cart-footer:empty{display:none;}
.cart-total{display:flex; justify-content:space-between; font-family:var(--display); font-weight:700; font-size:20px; margin-bottom:12px;}
.cart-note{font-size:12px; color:var(--grey); margin-bottom:14px; line-height:1.5;}