/* HOUSE RULES: no rounded corners, no shadows, no glass/blur.
   Everything below is square-edged and flat by design. */
/* =========================================================================
   SUB. — Design system
   Switzer (UI) + Fraunces (display) + Noto Sans Thai (Thai, loopless)
   ========================================================================= */

@font-face{
  font-family:'Switzer';
  src:url('../fonts/Switzer-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/Fraunces-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- tokens ------------------------------------------------------ */
:root{
  /* neutrals */
  --ink:        #16181C;
  --ink-2:      #4C515B;
  --ink-3:      #8C919C;
  --paper:      #FFFFFF;
  --bone:       #F5F6F9;
  --line:       #E5E7EC;
  --line-soft:  #EFF1F5;

  /* brand */
  --peri-50:    #F3F6FC;
  --peri-100:   #E4EBF7;
  --peri-200:   #CCDAF0;
  --peri-300:   #B7CAE8;   /* signature */
  --peri-500:   #7B95C6;
  --peri-700:   #46578A;   /* AA on paper */
  --butter:     #FCF1B9;
  --butter-600: #D8B02C;

  /* per-page accent (collection pages override) */
  --accent:     var(--peri-300);
  --accent-ink: var(--peri-700);

  /* type */
  --sans: 'Switzer','Noto Sans Thai','Kanit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display: 'Fraunces','Noto Sans Thai','Kanit',Georgia,serif;

  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-lg:   1.0625rem;
  --t-xl:   clamp(1.25rem, 1.6vw, 1.5rem);
  --t-2xl:  clamp(1.6rem, 2.6vw, 2.25rem);
  --t-3xl:  clamp(2.1rem, 4.4vw, 3.4rem);
  --t-4xl:  clamp(2.6rem, 7vw, 5.5rem);

  /* space + rhythm */
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --wrap: 1400px;
  --wrap-narrow: 760px;
  --wrap-mid: 940px;
  --section: clamp(4.5rem, 9vw, 8.5rem);

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  --nav-h: 70px;
  --lace-r: 25px;      /* scallop radius — traced from the mockup */
  --lace-pitch: 53.3px;/* lobe pitch */
  --lace-lobes: 27;    /* whole lobes across the bar; site.js keeps it exact */

  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-std: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.3,.64,1);

  --shadow-sm: 0 1px 2px rgb(22 24 28 / .06);
  --shadow-md: 0 4px 14px rgb(22 24 28 / .10), 0 1px 3px rgb(22 24 28 / .06);
  --shadow-lg: 0 18px 48px rgb(22 24 28 / .14), 0 4px 12px rgb(22 24 28 / .08);
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.6;
  font-variation-settings:'wght' 400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;              /* never overflow-x:hidden — it kills sticky */
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
::selection{background:var(--butter);color:var(--ink)}

/* ---------- layout primitives ------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.wrap--mid{max-width:var(--wrap-mid)}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.bleed{width:100%}
.stack>*+*{margin-top:var(--gap,1rem)}

.eyebrow{
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-variation-settings:'wght' 600;
  color:var(--ink-3);
}
.eyebrow--ink{color:var(--ink)}

h1,h2,h3{line-height:1.08;letter-spacing:-.02em;font-variation-settings:'wght' 600}
.h-display{
  font-family:var(--display);
  font-size:var(--t-4xl);
  line-height:.98;
  letter-spacing:-.025em;
  font-variation-settings:'wght' 400,'SOFT' 30,'WONK' 1,'opsz' 144;
  text-wrap:balance;
}
.h1{font-size:var(--t-3xl);text-wrap:balance}
.h2{font-size:var(--t-2xl);text-wrap:balance}
.h3{font-size:var(--t-xl)}
.lead{font-size:var(--t-lg);line-height:1.55;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.body{color:var(--ink-2);max-width:64ch;text-wrap:pretty}
.muted{color:var(--ink-3)}

/* ---------- buttons / links -------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  min-height:46px;padding:0 1.35rem;
  font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;
  font-variation-settings:'wght' 600;
  transition:background .18s var(--ease-std),color .18s var(--ease-std),
             transform .12s var(--ease-std);
}
.btn:active{transform:scale(.985)}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:#000;transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:var(--bone)}
.btn--light{background:rgb(255 255 255 / .92);color:var(--ink);}
.btn--light:hover{background:#fff;transform:translateY(-1px);}
.btn .arw{transition:transform .22s var(--ease-spring)}
.btn:hover .arw{transform:translateX(4px)}

.link-u{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--t-sm);letter-spacing:.08em;text-transform:uppercase;
  font-variation-settings:'wght' 600;
  padding-bottom:3px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--ease-out),opacity .2s;
}
.link-u:hover{background-size:0% 1px;background-position:100% 100%;opacity:.7}

/* ---------- announcement ticker ---------------------------------------- */
.ticker{background:var(--ink);color:#fff;overflow:hidden;font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase}
.ticker__track{display:flex;width:max-content;animation:ticker 38s linear infinite}
.ticker__group{display:flex;gap:3.5rem;padding:.6rem 1.75rem .6rem 0}
.ticker li{white-space:nowrap;opacity:.9}
.ticker li::before{content:'✱';margin-right:.9rem;color:var(--butter);opacity:.9}
@keyframes ticker{to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ---------- nav --------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  color:#fff;
  transition:color .35s var(--ease-std);
}
/* scalloped lace edge — bar + lobes are one painted box, the eyelet dots are
   real holes in the mask so they show whatever scrolls behind. Geometry is
   traced from the client mockup: lobe r25 @ pitch 53.3, 7 dots 30deg apart
   on r19.6. */
.nav__paint{
  position:absolute;left:0;right:0;top:0;
  height:calc(var(--nav-h) + var(--lace-r));
  background:var(--accent);
  transition:background .4s var(--ease-std);
  pointer-events:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2053.3%2095%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2053.3%2095%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H53.3V70H51.65A25%2025%200%200%201%201.65%2070H0ZM44.300%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM41.674%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM34.500%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM24.700%2089.600a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM14.900%2086.974a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM7.726%2079.800a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200ZM5.100%2070.000a1.95%201.95%200%201%200%203.9%200a1.95%201.95%200%201%200%20-3.9%200Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:calc(100% / var(--lace-lobes)) 100%;
  mask-size:calc(100% / var(--lace-lobes)) 100%;
}
/* the lace bar is opaque now, so it no longer floats over the hero — it takes
   its own space and only the scallop overlaps what follows */
body:not([data-nav="solid"]) .nav{margin-bottom:0}
.nav__inner{position:relative;z-index:1;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.nav__list{display:flex;gap:1.75rem}
.nav__list a{
  font-size:var(--t-sm);letter-spacing:.01em;
  font-variation-settings:'wght' 500;
  position:relative;padding-block:.35rem;
}
.nav__list a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease-out);
}
.nav__list a:hover::after,.nav__list a[aria-current="page"]::after{transform:scaleX(1)}
.nav__right{display:flex;justify-content:flex-end;align-items:center;gap:1.25rem}
.nav__icon{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px}
.nav__icon svg{width:19px;height:19px}
.nav__shop{display:none;background:#000;color:#fff;border-color:#000;
  font-size:var(--t-sm);letter-spacing:.01em;text-transform:none}
.nav__shop:hover{background:var(--ink);border-color:var(--ink)}
@media (min-width:900px){.nav__shop{display:inline-flex}}

/* solid state — the lace bar is always painted (as in the mockup); passing a
   collection band only changes its colour. */
.nav[data-solid="true"],body[data-nav="solid"] .nav{
  color:var(--accent-ink);
}

/* logo mark (masked → inherits currentColor) */
.logo{display:inline-flex;align-items:center;position:relative;line-height:0}
.logo__mark,.logo__dot{
  display:block;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.logo__mark{
  width:var(--logo-w,74px);aspect-ratio:673/266;background:currentColor;
  -webkit-mask-image:url('../img/logo-mark.png');mask-image:url('../img/logo-mark.png');
}
.logo__dot{
  position:absolute;inset:0;width:var(--logo-w,74px);aspect-ratio:673/266;
  background:var(--butter-600);
  -webkit-mask-image:url('../img/logo-dot.png');mask-image:url('../img/logo-dot.png');
}
.nav[data-solid="true"] .logo__dot,body[data-nav="solid"] .logo__dot{background:var(--butter-600)}

/* mobile drawer */
/* 3 tight bars, sized off the mockup: 26 x 2.5 with a 3.5 gap */
.burger{display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:3.5px;width:44px;height:44px;margin-left:-10px}
.burger span{display:block;width:26px;height:2.5px;background:currentColor;
  transition:transform .3s var(--ease-std),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:899px){.nav__list{display:none}}

.drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:55;
  background:var(--paper);color:var(--ink);
  padding:2rem var(--gutter) 3rem;
  display:flex;flex-direction:column;gap:.25rem;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);
}
.drawer[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.drawer a{
  font-family:var(--display);font-size:clamp(2rem,9vw,2.75rem);
  font-variation-settings:'wght' 400,'SOFT' 30,'WONK' 1,'opsz' 144;
  padding-block:.35rem;border-bottom:1px solid var(--line-soft);
}
.drawer__foot{margin-top:auto;padding-top:2rem;display:flex;gap:1.25rem;flex-wrap:wrap}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;background:var(--bone)}
.hero__media{position:relative;display:block;overflow:hidden}
.hero__media img{width:100%;height:auto}
.hero__topscrim{
  position:absolute;inset:0 0 auto 0;height:150px;
  background:linear-gradient(to bottom,rgb(10 12 16 / .34),transparent);
  pointer-events:none;
}
.hero__scrim{
  position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(to top,rgb(10 12 16 / .42),transparent);
  pointer-events:none;
}
.hero__overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 var(--gutter) clamp(1.5rem,3vw,2.75rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  color:#fff;
}
.hero__count{font-size:var(--t-xs);letter-spacing:.18em;font-variation-settings:'wght' 600}
.hero__caption{padding:1.75rem 0 0}
.hero__caption .h2{font-family:var(--display);font-variation-settings:'wght' 400,'SOFT' 30,'WONK' 1,'opsz' 144}

/* mobile: banner keeps its own band, type sits below (no portrait crop) */
@media (max-width:767px){
  .hero__overlay,.hero__topscrim,.hero__scrim{display:none}
  .hero__caption{display:block}
}
@media (min-width:768px){
  .hero__caption{display:none}
}

/* ---------- collection band (banner + its products) -------------------- */
@media (max-width:719px){
  .band__head{flex-direction:column;align-items:flex-start!important;gap:.6rem}
}
.band__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;
  padding-block:clamp(2rem,4vw,3rem) clamp(1.25rem,2vw,1.75rem);
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap;
}
.band__title{font-family:var(--display);font-size:var(--t-2xl);
  font-variation-settings:'wght' 400,'SOFT' 30,'WONK' 1,'opsz' 144;letter-spacing:-.02em}
.band__meta{font-size:var(--t-sm);color:var(--ink-3)}
.band__actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}

.banner{
  position:relative;display:block;overflow:hidden;
  background:var(--bone);
}
.banner img{width:100%;height:auto;
  transition:transform .9s var(--ease-out)}
.banner:hover img{transform:scale(1.025)}
.banner__cta{
  position:absolute;right:clamp(1rem,2vw,1.5rem);bottom:clamp(1rem,2vw,1.5rem);
  opacity:0;transform:translateY(6px);
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);
}
.banner:hover .banner__cta,.banner:focus-visible .banner__cta{opacity:1;transform:none}
@media (hover:none){.banner__cta{opacity:1;transform:none}}

/* ---------- product rail / grid ---------------------------------------- */
.rail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(58vw,1fr);
  gap:.75rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-block:1.25rem 1.75rem;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media (min-width:640px){.rail{grid-auto-columns:minmax(32vw,1fr)}}
@media (min-width:1024px){
  .rail{grid-auto-flow:row;grid-template-columns:repeat(var(--cols,5),1fr);
    overflow:visible;gap:1rem}
}

.grid-p{display:grid;gap:1rem 1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.grid-p{grid-template-columns:repeat(3,1fr);gap:1.5rem 1.25rem}}
@media (min-width:1180px){.grid-p{grid-template-columns:repeat(4,1fr)}}

.pcard{display:flex;flex-direction:column;gap:.85rem;position:relative}
article.pcard{cursor:default}
.pcard__media{
  position:relative;overflow:hidden;
  background:var(--bone);aspect-ratio:4/5;
}
.pcard__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;
  transition:opacity .45s var(--ease-out),transform .8s var(--ease-out);
}
.pcard__alt{opacity:0;transform:scale(1.04)}
.pcard:hover .pcard__img,.pcard:focus-visible .pcard__img{opacity:0}
.pcard:hover .pcard__alt,.pcard:focus-visible .pcard__alt{opacity:1;transform:scale(1)}
.pcard__tag{
  position:absolute;top:.6rem;left:.6rem;z-index:2;
  background:rgb(255 255 255 / .92);padding:.28rem .7rem;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wght' 600;
}
.pcard__meta{display:grid;gap:.3rem}
.pcard__name{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);
  font-variation-settings:'wght' 500}
.chip{width:11px;height:11px;background:var(--sw,#ccc);flex:none}
.pcard__color{font-size:var(--t-sm);color:var(--ink-3)}
.pcard__price{font-size:var(--t-sm);font-variation-settings:'wght' 500;
  font-variant-numeric:tabular-nums}
.pcard__hint{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  opacity:0;transform:translateY(-2px);transition:opacity .25s,transform .25s;
}
.pcard:hover .pcard__hint{opacity:1;transform:none}

/* ---------- collections index ------------------------------------------ */
.ccard{display:block;position:relative}
.ccard__media{overflow:hidden;background:var(--bone);aspect-ratio:4/5}
.ccard__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out),filter .5s}
a.ccard:hover img{transform:scale(1.035)}
article.ccard .ccard__media{background:var(--bone)}
.ccard__body{padding-top:1rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.ccard__name{font-family:var(--display);font-size:var(--t-xl);
  font-variation-settings:'wght' 400,'SOFT' 30,'WONK' 1,'opsz' 144}
.badge{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wght' 600;
  border:1px solid var(--line);padding:.25rem .65rem;
  color:var(--ink-2);white-space:nowrap;
}
.badge--accent{background:var(--butter);border-color:transparent;color:var(--ink)}

/* ---------- editorial blocks ------------------------------------------- */
.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-l{grid-template-columns:1.15fr .85fr}
  .split--wide-r{grid-template-columns:.85fr 1.15fr}
}
.split__media{overflow:hidden;background:var(--bone)}
.split__media img{width:100%;height:100%;object-fit:cover}

.numbered{display:flex;gap:.85rem;align-items:baseline}
.numbered__n{
  font-size:var(--t-sm);letter-spacing:.12em;
  font-variation-settings:'wght' 600;font-variant-numeric:tabular-nums;
  color:var(--accent-ink);white-space:nowrap;
}

.trio{display:grid;gap:1.5rem}
@media (min-width:768px){.trio{grid-template-columns:repeat(3,1fr);gap:1.75rem}}
.trio figure img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.trio figcaption{padding-top:1.1rem}

.tint{background:var(--peri-50)}
.tint-butter{background:linear-gradient(180deg,#FEFCF2,var(--paper))}
.ink-block{background:var(--ink);color:#fff}
.ink-block .lead,.ink-block .body,.ink-block .muted{color:rgb(255 255 255 / .68)}
.ink-block .eyebrow{color:rgb(255 255 255 / .55)}

/* reels */
.reels{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.reels{grid-template-columns:repeat(4,1fr);gap:1rem}}
.reel{position:relative;overflow:hidden;aspect-ratio:9/16;
  background:var(--peri-100)}
.reel img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.reel:hover img{transform:scale(1.04)}
.reel__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgb(10 12 16 / .35),transparent 55%);
}
.reel__play span{
  width:46px;height:46px;display:grid;place-items:center;
  background:rgb(255 255 255 / .9);
  transition:transform .25s var(--ease-spring);
}
.reel:hover .reel__play span{transform:scale(1.08)}
.reel__meta{position:absolute;left:.7rem;bottom:.7rem;color:#fff;font-size:var(--t-xs);
  letter-spacing:.06em}

/* promo strip */
.promo{display:grid;gap:1rem}
@media (min-width:768px){.promo{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.promo__item{
  border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;flex-direction:column;gap:.6rem;min-height:200px;
  transition:border-color .25s,background .25s,transform .25s var(--ease-std);
}
.promo__item:hover{border-color:var(--ink);background:var(--bone);transform:translateY(-2px)}
.promo__item .link-u{margin-top:auto}

/* ---------- accordion (FAQ / footer) ----------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  text-align:left;padding:1.15rem 0;font-size:var(--t-lg);
  font-variation-settings:'wght' 500;line-height:1.4;
}
.acc__btn:hover{color:var(--accent-ink)}
.acc__ic{position:relative;width:14px;height:14px;flex:none}
.acc__ic::before,.acc__ic::after{
  content:'';position:absolute;background:currentColor;transition:transform .3s var(--ease-std)
}
.acc__ic::before{left:0;right:0;top:6.25px;height:1.5px}
.acc__ic::after{top:0;bottom:0;left:6.25px;width:1.5px}
.acc__btn[aria-expanded="true"] .acc__ic::after{transform:scaleY(0)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease-std)}
.acc__btn[aria-expanded="true"]+.acc__panel{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__panel p,.acc__panel ul{padding-bottom:1.35rem;color:var(--ink-2);max-width:62ch}
.acc__panel ul{list-style:none;display:grid;gap:.4rem}
.acc__panel ul li{padding-left:1.1rem;position:relative}
.acc__panel ul li::before{content:'';position:absolute;left:0;top:.7em;width:5px;height:1px;
  background:var(--ink-3)}
.acc__panel a{border-bottom:1px solid var(--peri-300)}

.tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);margin-bottom:.5rem}
@media (min-width:820px){.tabs{flex-wrap:wrap;overflow:visible;gap:.2rem 1.1rem}}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  padding:.85rem .95rem;white-space:nowrap;
  font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  font-variation-settings:'wght' 600;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .2s,border-color .2s;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- forms ------------------------------------------------------- */
.field{display:grid;gap:.45rem}
.field label{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  font-variation-settings:'wght' 600;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--t-base);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);
  padding:.85rem .95rem;width:100%;
  transition:border-color .18s;
}
.field textarea{min-height:150px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--ink-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--ink);}
.field small{font-size:var(--t-xs);color:var(--ink-3)}
.form-grid{display:grid;gap:1.15rem}
@media (min-width:640px){.form-grid--2{grid-template-columns:1fr 1fr}}

.channel{
  display:flex;align-items:center;gap:1rem;padding:1.15rem 0;
  border-bottom:1px solid var(--line);transition:padding-left .25s var(--ease-std)}
.channel:hover{padding-left:.4rem}
.channel__ic{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line);flex:none;transition:background .25s,border-color .25s}
.channel:hover .channel__ic{background:var(--ink);border-color:var(--ink);color:#fff}
.channel__ic svg{width:18px;height:18px}
.channel__t{display:grid;gap:.1rem}
.channel__t b{font-size:var(--t-sm);letter-spacing:.09em;text-transform:uppercase;
  font-variation-settings:'wght' 600}
.channel__t span{font-size:var(--t-sm);color:var(--ink-3)}
.channel .arw{margin-left:auto;transition:transform .25s var(--ease-spring)}
.channel:hover .arw{transform:translateX(5px)}

/* ---------- value strip + footer --------------------------------------- */
.values{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.values{grid-template-columns:repeat(4,1fr)}}
.values div{display:grid;gap:.25rem}
.values b{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  font-variation-settings:'wght' 600}
.values span{font-size:var(--t-sm);color:var(--ink-3)}

.footer{border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,4.5rem)}
.footer__top{display:grid;gap:2.5rem}
@media (min-width:900px){.footer__top{grid-template-columns:1.35fr .65fr;gap:4rem}}
.footer .acc__btn{font-size:var(--t-sm);letter-spacing:.09em;text-transform:uppercase;
  font-variation-settings:'wght' 600;padding:1rem 0}
.footer .acc__panel ul{padding-bottom:1.1rem;gap:.55rem}
.footer .acc__panel ul li::before{display:none}
.footer .acc__panel ul li{padding-left:0}
.footer .acc__panel a{border:0;color:var(--ink-2);font-size:var(--t-sm)}
.footer .acc__panel a:hover{color:var(--ink)}
.socials{display:flex;gap:.6rem;flex-wrap:wrap}
.socials a{width:38px;height:38px;display:grid;place-items:center;
  background:var(--ink);color:#fff;transition:transform .22s var(--ease-spring),opacity .2s}
.socials a:hover{transform:translateY(-2px);opacity:.85}
.socials svg{width:16px;height:16px}
.footer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:2.25rem;font-size:var(--t-xs);letter-spacing:.08em;color:var(--ink-3);
  text-transform:uppercase;
}

/* ---------- reveal ------------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
  transition-delay:calc(var(--i,0) * 60ms)}
[data-reveal-stagger].is-in>*{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal],[data-reveal-stagger]>*{opacity:1;transform:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;z-index:100}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:#fff;padding:.7rem 1rem;}

/* ---------- search ------------------------------------------------------ */
.searchfield{
  display:flex;align-items:center;gap:.7rem;
  max-width:520px;margin:2rem auto 0;
  border:1px solid var(--line);
  padding:.15rem .35rem .15rem 1.1rem;background:var(--paper);
  transition:border-color .2s;
}
.searchfield:focus-within{border-color:var(--ink);}
.searchfield svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.searchfield input{font:inherit;border:0;outline:none;background:none;padding:.85rem 0;width:100%}

.searchbox[hidden]{display:none}
.searchbox{position:fixed;inset:0;z-index:80;background:rgb(16 18 22 / .34);display:grid;align-items:start;justify-items:center;
  padding:calc(var(--nav-h) + 4vh) var(--gutter) 2rem;
  animation:fadeIn .18s var(--ease-out)}
@keyframes fadeIn{from{opacity:0}}
.searchbox__panel{width:100%;max-width:640px;background:var(--paper);overflow:hidden;
  animation:pop .22s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}}
.searchbox__bar{display:flex;align-items:center;gap:.85rem;padding:.5rem .6rem .5rem 1.2rem;
  border-bottom:1px solid var(--line-soft)}
.searchbox__bar svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.searchbox__bar input{font:inherit;font-size:var(--t-lg);border:0;outline:none;background:none;
  padding:.95rem 0;width:100%}
.searchbox__bar button{width:40px;height:40px;display:grid;place-items:center;
  color:var(--ink-3)}
.searchbox__bar button:hover{background:var(--bone);color:var(--ink)}
.searchbox__results{max-height:min(56vh,440px);overflow:auto;padding:.4rem}
.searchbox__results li a,.searchbox__results li p{
  display:flex;align-items:center;gap:.85rem;padding:.75rem .8rem;}
.searchbox__results li a:hover,.searchbox__results li a:focus-visible{background:var(--bone)}
.searchbox__results .k{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-left:auto;white-space:nowrap}
.searchbox__results .t{font-variation-settings:'wght' 500}
.searchbox__results .empty{color:var(--ink-3)}

/* ---- version switcher (v1 / v2 / v3 home designs) ---------------------- */
.nav__vers{display:inline-flex;align-items:center;gap:.55rem;margin-right:.35rem}
.nav__vers a{
  font-size:var(--t-xs);font-variation-settings:'wght' 600;letter-spacing:.06em;
  text-transform:uppercase;opacity:.62;transition:opacity .2s}
.nav__vers a:hover,.nav__vers a:focus-visible{opacity:1;text-decoration:underline}
@media (max-width:520px){.nav__vers{display:none}}

/* =========================================================================
   Full-bleed product rows (home). Client mockup: the product images run
   edge to edge across the viewport, four up then five up, with a hairline
   gutter — not inside .wrap.
   ========================================================================= */
/* flush to the viewport edges — no outer gutter on banners or rows */
:root{ --edge:0px; --prow-gap:clamp(5px,.7vw,9px); }

.bleed-row{ padding-inline:var(--edge); }
.prow{
  display:grid;
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:var(--prow-gap);
  width:100%;
}
.pr{display:flex;flex-direction:column;background:var(--paper)}
.pr__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:5/9;background:var(--bone);
}
.pr__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 14%;
  transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.3,1);
}
.pr__alt{position:absolute;inset:0;opacity:0}
.pr:hover .pr__alt{opacity:1}
.pr:hover .pr__img{opacity:0}
.pr__body{padding:.6rem .15rem 1.1rem;display:flex;flex-direction:column;gap:.18rem}
.pr__top{display:flex;align-items:center;gap:.4rem}
.pr__sw{
  width:11px;height:11px;flex:0 0 auto;
  background:var(--sw,#ccc);
}
.pr__n{
  font-size:var(--t-xs);font-variation-settings:'wght' 600;line-height:1.35;
  flex:1 1 auto;min-width:0;
}
.pr__bag{width:14px;height:14px;flex:0 0 auto;color:var(--ink-2)}
.pr__c{font-size:var(--t-xs);color:var(--ink-3);line-height:1.4;padding-left:calc(11px + .4rem)}
.pr__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:.28rem;padding-left:calc(11px + .4rem);
}
.pr__price{font-size:var(--t-xs);font-variation-settings:'wght' 600;font-variant-numeric:tabular-nums}
.pr__save{
  width:22px;height:22px;display:grid;place-items:center;color:var(--ink-3);transition:color .2s,transform .2s;
}
.pr__save svg{width:14px;height:14px}
.pr__save:hover{color:var(--ink);transform:scale(1.1)}
.pr__save[aria-pressed="true"]{color:#D2506A}
.pr__save[aria-pressed="true"] svg{fill:currentColor}

/* full-bleed banners between the rows */
.bleed-banner{display:block;padding-inline:var(--edge);margin-block:var(--prow-gap)}
.bleed-banner img{width:100%;height:auto}

@media (max-width:900px){
  .prow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .prow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr__n{font-size:.625rem}
}

/* home accent zones — flow-root so the banners' margins stay inside and the
   zone boxes are contiguous (no gap where the nav colour would reset) */
.zone{display:flow-root}

/* ---- sleeve-embroidery grid (Kuromi collection page) ------------------- */
.emb{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.5rem,1.4vw,1rem);padding-top:1.75rem;
}
.emb__i{margin:0}
.emb__i img{width:100%;height:auto;display:block}
.emb__i figcaption{
  display:flex;align-items:center;gap:.45rem;margin-top:.6rem;
  font-size:var(--t-xs);font-variation-settings:'wght' 600;
}
@media (max-width:900px){ .emb{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .emb{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---- size guide tables ------------------------------------------------- */
.sizewrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(1rem,2.5vw,2rem);padding-top:1.5rem}
.sizetable{width:100%;border-collapse:collapse;font-size:var(--t-sm);
  font-variant-numeric:tabular-nums}
.sizetable caption{text-align:left;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;font-variation-settings:'wght' 700;color:var(--ink-2);
  padding-bottom:.6rem}
.sizetable th,.sizetable td{padding:.55rem .5rem;text-align:left;
  border-bottom:1px solid var(--line-soft)}
.sizetable thead th{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-variation-settings:'wght' 600;border-bottom:1px solid var(--line)}
.sizetable tbody th{font-variation-settings:'wght' 700}
.sizetable tbody tr:hover{background:var(--bone)}
@media (max-width:420px){
  .sizetable th,.sizetable td{padding:.5rem .3rem;font-size:var(--t-xs)}
}

/* ---- Garden: three-step builder ---------------------------------------- */
.gstep{padding-top:clamp(1.75rem,4vw,2.75rem)}
.gstep__k{margin:0;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wght' 700;color:var(--accent-ink)}
.gstep__s{margin:.4rem 0 0;font-size:var(--t-sm);color:var(--ink-2)}
.gcolours{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:clamp(.4rem,1vw,.85rem);padding-top:1.1rem}
.gcol{margin:0}
.gcol img{width:100%;height:auto;display:block}
.gcol figcaption{display:flex;align-items:center;gap:.35rem;margin-top:.5rem;
  font-size:var(--t-xs);font-variation-settings:'wght' 600;line-height:1.3}
.gmotifs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,1.2vw,1rem);padding-top:1.1rem}
.gmotif{margin:0}
.gmotif img{width:100%;height:auto;display:block}
.gmotif figcaption{display:flex;align-items:center;gap:.45rem;margin-top:.5rem;
  font-size:var(--t-xs);font-variation-settings:'wght' 600}
.gmotif__n{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;
  background:var(--accent);color:var(--accent-ink);font-size:.625rem;
  font-variation-settings:'wght' 700}
.gprice{margin:.5rem 0 0;font-family:var(--display);font-size:var(--t-2xl);
  font-variation-settings:'wght' 500,'SOFT' 30,'opsz' 90;font-variant-numeric:tabular-nums}
@media (max-width:900px){ .gcolours{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){
  .gcolours{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gmotifs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- films (collection pages) ------------------------------------------
   Square, flat, no blur — house rules. preload="none" keeps the page light
   until a visitor actually asks for the clip. */
.films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.6rem,1.6vw,1.25rem);max-width:min(720px,100%);padding-top:1.5rem}
.film{margin:0}
.film video{width:100%;height:auto;display:block;background:#000;aspect-ratio:608/1080}
.film figcaption{margin-top:.55rem;font-size:var(--t-xs);color:var(--ink-2)}
@media (max-width:560px){ .films{grid-template-columns:1fr} }