/* 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;
  /* visibility, not opacity alone: an invisible panel that still accepts focus
     kept its ten links in the tab order of every page at every width, desktop
     included, where the burger that opens it does not exist */
  transform:translateY(-8px);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),
             visibility 0s linear .28s;
}
.drawer[data-open="true"]{opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility 0s}
.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}


/* =========================================================================
   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} }

/* ---------- version switcher: seven chips ------------------------------
   Seven of these will not fit a 375px bar at the desktop size, and hiding
   them on a phone defeats the point of a switcher, so on small screens they
   go compact and, if a device is narrower still, the strip scrolls sideways
   rather than pushing the burger off the edge. */
@media (max-width:640px){
  .nav__vers{
    display:inline-flex;gap:.3rem;margin-right:0;
    flex:0 1 auto;min-width:0;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .nav__vers::-webkit-scrollbar{display:none}
  /* the switcher can only give up width if its flex parent is allowed to
     shrink too, otherwise the burger gets pushed past the bar */
  .nav__right{min-width:0}
  .nav__vers a{font-size:.625rem;letter-spacing:.04em;flex:0 0 auto}
}