/* ============================================================
   KITHINARI BATIK
   Palette sampled from the logo: vermilion #FA4B16, amber #F7C63F
   Contrast-checked: CTA fill #C2340A on white = 5.54:1 (AA)
                     #FA4B16 is a LARGE-FILL colour only (3.45:1)
   ============================================================ */
:root{
  --ink:#14100E;
  --ink-2:#2A2320;
  --paper:#FAF5EE;
  --paper-2:#F1E9DD;
  --muted:#6B5F55;
  --line:#DED2C2;

  --brand:#FA4B16;
  --brand-deep:#C2340A;
  --amber:#F7C63F;
  --wa:#128C4A;

  --font-display:'Anton',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Karla',ui-sans-serif,system-ui,-apple-system,sans-serif;

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem;
  --sp-5:4rem;  --sp-6:6rem;

  --wrap:min(1400px,92vw);
  --r:2px;                    /* buttons, chips  */
  --r-img:16px;               /* product imagery */
  --r-img-sm:10px;            /* thumbnails      */
  --t:220ms cubic-bezier(.2,.7,.3,1);
  --t-slow:380ms cubic-bezier(.16,.84,.44,1);   /* power1.out-ish */
}

*,*::before,*::after{box-sizing:border-box}
/* Any author `display` rule outranks the UA stylesheet's [hidden]{display:none},
   so .card{display:flex} silently kept filtered-out cards on screen. Restore it. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
                       transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh;
  overflow-x:clip;              /* the rotated marquee is wider than the viewport */
}
@supports not (overflow:clip){body{overflow-x:hidden}}
main{flex:1}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;border-radius:var(--r)}

.wrap{width:var(--wrap);margin-inline:auto}
.sr{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:var(--sp-2);top:-100px;z-index:200;background:var(--ink);
      color:var(--paper);padding:.75rem 1.25rem;font-weight:700;transition:top var(--t)}
.skip:focus{top:var(--sp-2)}

/* ---------- display type ---------- */
.d{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
   line-height:.86;letter-spacing:-.005em;margin:0}
.d--xl{font-size:clamp(3.2rem,12vw,10rem)}
.d--lg{font-size:clamp(2.3rem,6.5vw,5rem)}
.d--md{font-size:clamp(1.7rem,3.6vw,2.8rem)}
.outline{color:transparent;-webkit-text-stroke:2px currentColor}
.outline--paper{-webkit-text-stroke-color:var(--paper)}
@supports not (-webkit-text-stroke:1px red){.outline{color:inherit;opacity:.5}}

.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
         color:var(--brand-deep);margin:0 0 var(--sp-2)}
.eyebrow--light{color:var(--amber)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(250,245,238,.93);
     backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:var(--sp-3);padding:.65rem 0;
         width:var(--wrap);margin-inline:auto}
.hdr__logo{display:flex;align-items:center;flex:none;min-height:44px;padding:2px 0}
.hdr__logo img{height:52px;width:auto}
.hdr__nav{display:flex;gap:var(--sp-3);margin-left:auto;align-items:center}
.hdr__nav a{text-decoration:none;font-weight:600;font-size:.88rem;letter-spacing:.05em;
            text-transform:uppercase;position:relative;
            display:inline-flex;align-items:center;min-height:44px}
.hdr__nav a::after{content:'';position:absolute;left:0;bottom:.2rem;width:100%;height:2px;
                   background:var(--brand-deep);transform:scaleX(0);transform-origin:right;
                   transition:transform var(--t)}
.hdr__nav a:hover::after,.hdr__nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.hdr__nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:640px){
  .hdr__in{gap:var(--sp-2)}
  .hdr__logo img{height:42px}
  .hdr__nav{gap:var(--sp-2)}
  .hdr__nav a{font-size:.76rem}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border:none;
     border-radius:var(--r);padding:.95rem 1.6rem;font-weight:700;font-size:.86rem;
     letter-spacing:.06em;text-transform:uppercase;text-decoration:none;min-height:48px;
     transition:transform var(--t),background var(--t),color var(--t)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--brand-deep);color:#fff}
.btn--primary:hover{background:#A82C08}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--ghost-light{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px var(--paper)}
.btn--ghost-light:hover{background:var(--paper);color:var(--ink)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:#0E7038}
.btn--block{width:100%}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- hero (full-bleed photo, copy overlaid) ---------- */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
      min-height:min(88vh,760px);display:flex;align-items:center}
.hero__art{position:absolute;inset:0;z-index:0}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
/* scrim: solid enough on the left for AA text, clear on the right for the photo */
.hero__art::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,16,14,.94) 0%,rgba(20,16,14,.86) 32%,
                                   rgba(20,16,14,.45) 58%,rgba(20,16,14,.15) 100%)}
.hero .wrap{position:relative;z-index:1;width:var(--wrap)}
.hero__copy{max-width:34rem;padding:var(--sp-6) 0}
.hero__lede{max-width:34ch;color:#E4DBCE;font-size:1.05rem;margin:var(--sp-3) 0 var(--sp-4)}
.hero__cta{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.hero__stat{position:absolute;right:0;bottom:var(--sp-4);z-index:2;background:var(--amber);
            color:var(--ink);padding:.8rem 1.25rem;font-weight:700;font-size:.76rem;
            letter-spacing:.14em;text-transform:uppercase}
@media (max-width:900px){
  .hero{min-height:0}
  .hero__art img{object-position:center 22%}
  /* vertical scrim on narrow screens so the faces stay visible above the text */
  .hero__art::after{background:linear-gradient(180deg,rgba(20,16,14,.35) 0%,
                                                      rgba(20,16,14,.72) 45%,
                                                      rgba(20,16,14,.95) 78%)}
  .hero__copy{max-width:none;padding:14rem 0 var(--sp-4)}
  .hero__stat{position:static;display:inline-block;margin-top:var(--sp-3)}
}

/* ---------- marquee ---------- */
/* the rotated strip is deliberately wider than the viewport, so it gets its
   own clipping wrapper, relying on overflow on <body> does not contain it */
.marq-wrap{overflow:hidden;margin:var(--sp-5) 0}
.marq{background:var(--brand);color:var(--ink);overflow:hidden;border-block:3px solid var(--ink);
      transform:rotate(-1.3deg) scale(1.05)}
.marq__track{display:flex;gap:2.5rem;width:max-content;padding:.8rem 0;
             animation:slide 42s linear infinite}
.marq span{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.1em;
           text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:2.5rem}
.marq span::after{content:'\2726';opacity:.6}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marq__track{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
}

/* ---------- sections ---------- */
.sec{padding:var(--sp-6) 0}
.sec--tight{padding:var(--sp-5) 0}
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);
           flex-wrap:wrap;margin-bottom:var(--sp-4)}
.sec__note{color:var(--muted);max-width:42ch;font-size:.95rem;margin:0}

/* ---------- page head ---------- */
.phead{background:var(--ink);color:var(--paper);padding:var(--sp-5) 0}
.phead p{color:#C9BFB2;max-width:52ch;margin:var(--sp-2) 0 0}
.crumb{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
       margin:0 0 var(--sp-2)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------- controls ---------- */
.ctl{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;
     padding-bottom:var(--sp-3);border-bottom:2px solid var(--ink);margin-bottom:var(--sp-3)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{background:transparent;border:1.5px solid var(--line);border-radius:100px;
      padding:.55rem 1rem;font-size:.8rem;font-weight:600;letter-spacing:.03em;
      transition:background var(--t),color var(--t),border-color var(--t);
      min-height:44px;display:inline-flex;align-items:center;gap:.45rem}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip__dot{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);flex:none}
.chip__n{opacity:.6;font-variant-numeric:tabular-nums}
.search{margin-left:auto;position:relative;display:flex;align-items:center}
.search input{font:inherit;font-size:.9rem;padding:.7rem 1rem .7rem 2.5rem;min-height:44px;
              border:1.5px solid var(--line);border-radius:100px;background:#fff;width:15rem;
              transition:border-color var(--t)}
.search input:focus{border-color:var(--ink)}
.search svg{position:absolute;left:.9rem;width:16px;height:16px;color:var(--muted);pointer-events:none}
@media (max-width:720px){.search{margin-left:0;width:100%}.search input{width:100%}}
.count{font-size:.85rem;color:var(--muted);margin:0 0 var(--sp-4);font-variant-numeric:tabular-nums}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
      gap:var(--sp-4) var(--sp-2);list-style:none;padding:0;margin:0}
.card{display:flex;flex-direction:column;gap:.7rem}
.card__link{text-decoration:none;display:flex;flex-direction:column;gap:.7rem}
.card__fig{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:1;
           border-radius:var(--r-img);
           transition:box-shadow var(--t),transform var(--t)}
.card__link:hover .card__fig{box-shadow:0 14px 32px -12px rgba(20,16,14,.38)}
.card__fig img{width:100%;height:100%;object-fit:cover;
               transition:transform 520ms cubic-bezier(.2,.7,.3,1)}
.card__link:hover .card__fig img,.card__link:focus-visible .card__fig img{transform:scale(1.06)}
.card__sku{position:absolute;top:.6rem;left:.6rem;background:rgba(20,16,14,.85);color:var(--paper);
           font-size:.64rem;font-weight:700;letter-spacing:.12em;padding:.35rem .6rem}
.card__n{position:absolute;top:.6rem;right:.6rem;background:var(--amber);color:var(--ink);
         font-size:.64rem;font-weight:700;letter-spacing:.08em;padding:.35rem .55rem;
         text-transform:uppercase}
.card__view{position:absolute;inset:auto 0 0 0;background:var(--brand-deep);color:#fff;
            text-align:center;padding:.7rem;font-size:.74rem;font-weight:700;letter-spacing:.12em;
            text-transform:uppercase;transform:translateY(101%);transition:transform var(--t)}
.card__link:hover .card__view,.card__link:focus-visible .card__view{transform:translateY(0)}
.card__row{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.card__name{font-weight:700;font-size:.95rem}
.card__price{font-weight:700;font-size:.88rem;color:var(--brand-deep);white-space:nowrap;
             font-variant-numeric:tabular-nums}
.card__price--ask{color:var(--muted);font-weight:600;font-size:.8rem}
.card__meta{display:flex;align-items:center;gap:.45rem;font-size:.79rem;color:var(--muted);
            text-transform:capitalize}
.card__sw{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);flex:none}
.empty{grid-column:1/-1;text-align:center;padding:var(--sp-6) 0;color:var(--muted)}
.empty p{margin:0 0 var(--sp-3)}

/* ---------- craft strip ---------- */
.strip{background:var(--ink);color:var(--paper);padding:var(--sp-5) 0}
.strip__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
             list-style:none;padding:0;margin:0}
@media (max-width:800px){.strip__grid{grid-template-columns:1fr;gap:var(--sp-3)}}
.strip h3{font-family:var(--font-display);font-size:1.4rem;text-transform:uppercase;
          margin:0 0 .55rem}
.strip p{color:#C9BFB2;margin:0;font-size:.94rem}
.strip__n{font-family:var(--font-display);font-size:2.4rem;color:var(--brand);line-height:1;
          display:block;margin-bottom:.4rem}

/* ---------- cta band ---------- */
.cta{padding:var(--sp-6) 0}
.cta__box{background:var(--amber);color:var(--ink);padding:var(--sp-5) var(--sp-3);
          border:3px solid var(--ink);text-align:center}
.cta__box p{max-width:48ch;margin:var(--sp-2) auto var(--sp-4);font-size:1.03rem}
.cta__row{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}

/* ---------- product detail ---------- */
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-5);padding:var(--sp-5) 0}
@media (max-width:860px){.pd{grid-template-columns:1fr;gap:var(--sp-4);padding:var(--sp-4) 0}}
.pd__media{background:var(--paper-2);aspect-ratio:1;overflow:hidden;position:relative;
           border-radius:var(--r-img)}
.pd__media img{width:100%;height:100%;object-fit:cover;
               transition:opacity 260ms ease}
.pd__media.is-swapping img{opacity:.25}
.pd__tag{position:absolute;top:var(--sp-2);left:var(--sp-2);background:rgba(20,16,14,.85);
         color:var(--paper);font-size:.68rem;font-weight:700;letter-spacing:.14em;padding:.4rem .7rem}
.pd__thumbs{list-style:none;display:flex;gap:.5rem;padding:0;margin:.5rem 0 0;
            overflow-x:auto;scrollbar-width:thin}
.pd__thumbs li{flex:none}
.pd__thumb{padding:0;border:2px solid transparent;background:none;width:78px;height:78px;
           overflow:hidden;display:block;opacity:.62;border-radius:var(--r-img-sm);
           transition:border-color var(--t),opacity var(--t),transform var(--t)}
.pd__thumb img{width:100%;height:100%;object-fit:cover}
.pd__thumb:hover{opacity:1;transform:translateY(-2px)}
.pd__thumb[aria-pressed="true"]{border-color:var(--ink);opacity:1}
.pd__body{display:flex;flex-direction:column}
.pd__name{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.2rem);
          text-transform:uppercase;line-height:.92;margin:.4rem 0 var(--sp-2)}
.pd__price{font-size:1.5rem;font-weight:700;margin:0 0 var(--sp-3);
           font-variant-numeric:tabular-nums;color:var(--brand-deep)}
.pd__price--ask{color:var(--muted);font-size:1.1rem}
.pd__desc{color:var(--muted);margin:0 0 var(--sp-3);max-width:48ch}
.pd__spec{margin:0 0 var(--sp-4);display:grid;gap:0}
.pd__spec div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;
              border-bottom:1px solid var(--line);font-size:.92rem}
.pd__spec dt{color:var(--muted);margin:0}
.pd__spec dd{margin:0;font-weight:600;text-transform:capitalize;display:flex;
             align-items:center;gap:.45rem}
.pd__act{margin-top:auto;display:grid;gap:.7rem}
.pd__hint{font-size:.79rem;color:var(--muted);margin:0;text-align:center}
.pd__more{border-top:2px solid var(--ink);padding-top:var(--sp-4);margin-top:var(--sp-4)}

/* ---------- prose ---------- */
.prose{max-width:64ch}
.prose h2{font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.4rem);
          text-transform:uppercase;margin:var(--sp-4) 0 var(--sp-2);line-height:1}
.prose p{margin:0 0 var(--sp-2);color:var(--ink-2)}
.prose ol,.prose ul{color:var(--ink-2);padding-left:1.2rem;margin:0 0 var(--sp-2)}
.prose li{margin-bottom:.5rem}
.prose strong{color:var(--ink)}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);padding:var(--sp-5) 0}
@media (max-width:860px){.cgrid{grid-template-columns:1fr;gap:var(--sp-4)}}
.ccard{background:#fff;border:2px solid var(--ink);padding:var(--sp-4)}
.ccard h3{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;margin:0 0 var(--sp-2)}
.field{display:grid;gap:.4rem;margin-bottom:var(--sp-3)}
.field label{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.field input,.field textarea,.field select{font:inherit;padding:.75rem .9rem;min-height:48px;
       border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);
       transition:border-color var(--t)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field small{color:var(--muted);font-size:.78rem}
.orders{background:var(--amber);border:3px solid var(--ink);padding:var(--sp-3)}
.orders__note{margin:0 0 var(--sp-3);font-size:.95rem;max-width:44ch}
.orders__row{display:grid;gap:.7rem}
.orders .eyebrow{color:var(--ink)}
.tag-main{background:var(--brand-deep);color:#fff;font-size:.6rem;letter-spacing:.1em;
          padding:.15rem .4rem;margin-left:.35rem;vertical-align:middle}
.dl small{color:var(--muted);font-size:.78rem}
.dl{display:grid;gap:var(--sp-2);margin:0}
.dl div{display:flex;gap:.75rem;align-items:flex-start}
.dl dt{font-weight:700;min-width:6.5rem;font-size:.85rem;letter-spacing:.05em;
       text-transform:uppercase;margin:0}
.dl dd{margin:0;color:var(--ink-2)}
.dl a{text-decoration:none;border-bottom:1px solid var(--line)}
.dl a:hover{border-color:var(--brand-deep);color:var(--brand-deep)}

/* ============================================================
   MOTION
   Reveals are applied only when JS is running (html.js), so the
   server-rendered catalogue stays visible to crawlers and to
   anyone with JS off. Everything here is disabled wholesale by
   the prefers-reduced-motion block at the top of this file.
   ============================================================ */

/* --- scroll reveal ---
   Gated on .reveals-armed, which motion.js sets on <html> only once it is
   actually running. If that file 404s or throws, nothing is ever hidden. */
.reveals-armed .reveal{opacity:0;transform:translateY(14px);
            transition:opacity var(--t-slow),transform var(--t-slow);
            transition-delay:calc(var(--i,0) * 40ms)}
.reveals-armed .reveal.is-in{opacity:1;transform:none}
.reveals-armed .reveal[style*="--i"]{will-change:opacity,transform}

/* --- hero entrance --- */
.js .hero__copy > *{opacity:0;transform:translateY(18px);
                    animation:riseIn 620ms cubic-bezier(.16,.84,.44,1) forwards}
.js .hero__copy > *:nth-child(1){animation-delay:80ms}
.js .hero__copy > *:nth-child(2){animation-delay:170ms}
.js .hero__copy > *:nth-child(3){animation-delay:260ms}
.js .hero__copy > *:nth-child(4){animation-delay:350ms}
.js .hero__copy > *:nth-child(5){animation-delay:440ms}
@keyframes riseIn{to{opacity:1;transform:none}}

/* slow drift on the hero photo, small enough not to disorient */
.js .hero__art img{animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}
                 to{transform:scale(1.10) translate3d(0,-1.4%,0)}}

/* --- header condenses once you scroll --- */
.hdr{transition:box-shadow var(--t),background var(--t)}
.hdr.is-stuck{box-shadow:0 6px 22px -14px rgba(20,16,14,.55)}
.hdr__logo img{transition:height var(--t)}
.hdr.is-stuck .hdr__logo img{height:44px}

/* --- back to top --- */
.totop{position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;width:48px;height:48px;
       border-radius:50%;border:2px solid var(--ink);background:var(--amber);color:var(--ink);
       display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.9);
       pointer-events:none;transition:opacity var(--t),transform var(--t),background var(--t)}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--brand);transform:translateY(-2px)}
.totop svg{width:20px;height:20px}

/* --- press feedback --- */
.btn:active,.chip:active,.pd__thumb:active{transform:scale(.97)}

/* ============================================================
   TOUCH DEVICES
   Every card effect above is hover-driven, which never fires on a
   phone, and on iOS a tapped :hover state sticks until you tap
   elsewhere. So: kill the lifts, drop the hover-only affordance,
   and give real press states in their place.
   ============================================================ */

/* remove the 300ms tap delay and the grey flash, since we draw
   our own pressed state below */
a,button,input,select,textarea,.card__link,label{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

@media (hover:none){
  /* neutralise sticky hover lifts */
  .btn:hover,.pd__thumb:hover,.totop:hover{transform:none}
  .card__link:hover .card__fig img{transform:none}
  .card__link:hover .card__fig{box-shadow:none}

  /* the "View piece" bar only exists on hover, so it can never be
     seen on touch, hide it and let the whole card be the target */
  .card__view{display:none}

  /* pressed states: fast in, so the tap feels answered immediately */
  .card__link:active .card__fig{transform:scale(.978)}
  .card__link:active .card__fig img{transform:scale(1.05)}
  .card__link:active .card__name{color:var(--brand-deep)}
  .card__fig,.card__fig img{transition-duration:180ms}

  .chip:active{transform:scale(.95)}
  .btn:active{transform:scale(.97)}
  .pd__thumb:active{transform:scale(.93)}
  .hdr__nav a:active{color:var(--brand-deep)}
  .ft a:active,.dl a:active{color:var(--amber)}

  /* thumbnails become a snap-scrolling strip */
  .pd__thumbs{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
              padding-bottom:.35rem}
  .pd__thumbs li{scroll-snap-align:start}

  /* the marquee is the one continuous animation; slow it slightly so
     it costs less on a phone GPU */
  .marq__track{animation-duration:52s}
}

/* keep the back-to-top clear of the iOS home indicator */
.totop{bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));
       right:calc(1.25rem + env(safe-area-inset-right,0px))}

@media (max-width:640px){
  /* shorter travel on small screens so reveals finish within the
     much smaller viewport rather than trailing behind the scroll */
  .reveals-armed .reveal{transform:translateY(10px)}
  /* comfortable thumb targets. `.ft li a` rather than `.ft a` because
     the base footer rule is declared later in this file and would
     otherwise win at equal specificity. */
  .ft li a{min-height:44px}
  .crumb a{display:inline-block;padding:.5rem .1rem}
  .totop{width:44px;height:44px;bottom:calc(1rem + env(safe-area-inset-bottom,0px));right:1rem}
  /* the hero drift is heavier per-pixel on mobile, reduce the range */
  .js .hero__art img{animation-duration:28s}
}
@keyframes driftSm{from{transform:scale(1.03)}to{transform:scale(1.07) translate3d(0,-1%,0)}}
@media (max-width:640px){.js .hero__art img{animation-name:driftSm}}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:#B9AFA3;padding:var(--sp-5) 0 var(--sp-3);font-size:.88rem}
.ft__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}
@media (max-width:800px){.ft__grid{grid-template-columns:1fr;gap:var(--sp-3)}}
.ft img{height:88px;width:auto;margin-bottom:var(--sp-2)}
.ft__blurb{max-width:34ch;margin:0}
.ft h4{color:var(--paper);font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;
       margin:0 0 .9rem}
.ft ul{list-style:none;padding:0;margin:0;display:grid}
.ft li{display:flex}
/* WCAG 2.2 target size, footer links get a real hit area, not just text height */
.ft a{text-decoration:none;transition:color var(--t);
      display:inline-flex;align-items:center;min-height:34px;padding:.15rem 0}
.ft a:hover{color:var(--amber)}
.ft__base a{min-height:34px}
.ft__base{border-top:1px solid #332B26;padding-top:var(--sp-3);display:flex;
          justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;font-size:.79rem}
.ft__base p{margin:0}

/* contact form: two ways to send the same message */
.form__actions{display:grid;gap:.7rem}
@media (min-width:520px){.form__actions{grid-template-columns:1fr 1fr}}

/* ============================================================
   SHOP LANDING, the two doors
   ============================================================ */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.doors--wide{grid-template-columns:1fr}
@media (max-width:760px){.doors{grid-template-columns:1fr}}
.door{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);text-decoration:none;
      background:#fff;border:2px solid var(--ink);border-radius:var(--r-img);overflow:hidden;
      transition:transform var(--t),box-shadow var(--t)}
.door__fig{position:relative;aspect-ratio:1;overflow:hidden;background:var(--paper-2)}
.door__fig img{width:100%;height:100%;object-fit:cover;
               transition:transform 520ms cubic-bezier(.2,.7,.3,1)}
.door__body{padding:var(--sp-3);display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.door__n{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
         color:var(--brand-deep)}
.door__blurb{color:var(--muted);font-size:.94rem}
.door__go{margin-top:.5rem;font-weight:700;font-size:.82rem;letter-spacing:.08em;
          text-transform:uppercase;color:var(--brand-deep)}
.door--preorder{grid-template-columns:1fr;background:var(--amber)}
.door--preorder .door__blurb{color:var(--ink-2)}
.door--preorder .door__n,.door--preorder .door__go{color:var(--ink)}
@media (hover:hover){
  .door:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(20,16,14,.5)}
  .door:hover .door__fig img{transform:scale(1.05)}
}
@media (hover:none){.door:active{transform:scale(.99)}}
@media (max-width:520px){.door{grid-template-columns:1fr}}

/* ---------- section subnav ---------- */
.subnav{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.subnav a{text-decoration:none;font-size:.82rem;font-weight:700;letter-spacing:.05em;
          padding:.6rem 1rem;min-height:44px;display:inline-flex;align-items:center;
          border:1.5px solid var(--line);border-radius:100px;
          transition:background var(--t),color var(--t),border-color var(--t)}
.subnav a:hover{border-color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- pre-order cards ---------- */
.grid--pre{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.badge--pre{position:absolute;top:.6rem;right:.6rem;background:var(--amber);color:var(--ink);
            font-size:.64rem;font-weight:700;letter-spacing:.1em;padding:.35rem .55rem;
            text-transform:uppercase}
.card__fig--placeholder{display:grid;place-items:center}
.ph{position:absolute;inset:0;display:grid;place-items:center;
    background:var(--paper-2);color:var(--brand);overflow:hidden}
.ph svg{position:absolute;inset:0;width:100%;height:100%;opacity:.45}
.ph__label{position:relative;background:rgba(20,16,14,.86);color:var(--paper);
           font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
           padding:.5rem .85rem;border-radius:100px}
.card__note{color:var(--muted);font-size:.85rem;margin:.5rem 0 0}
.card__acts{display:flex;gap:.5rem;margin-top:.85rem;flex-wrap:wrap}
.btn--sm{padding:.6rem 1rem;font-size:.76rem;min-height:44px}
.btn--sm svg{width:15px;height:15px}
.strip__grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.strip__grid--4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.strip__grid--4{grid-template-columns:1fr}}

/* original batik motif artwork on pre-order cards */
.card__fig .art{width:100%;height:100%;object-fit:cover;background:var(--paper-2)}
.ph__label--corner{position:absolute;left:.6rem;bottom:.6rem;background:rgba(20,16,14,.86);
  color:var(--paper);font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:.35rem .6rem;border-radius:100px}

/* wall art, temporary "back soon" state */
.soon{background:var(--ink);color:var(--paper);border-radius:var(--r-img);
      padding:var(--sp-6) var(--sp-3);text-align:center}
.soon__tag{display:inline-block;background:var(--amber);color:var(--ink);font-size:.7rem;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.45rem .9rem;
  border-radius:100px;margin-bottom:var(--sp-3)}
.soon p{color:#C9BFB2;max-width:46ch;margin:var(--sp-2) auto 0}
.soon__ask{margin-bottom:var(--sp-4) !important}
.soon .cta__row{margin-top:var(--sp-3)}

/* ============================================================
   PHONE DENSITY
   The desktop rhythm (6rem sections, single-column footer with
   44px link rows) makes the page far longer than it needs to be
   on a 375px screen. Tighten the vertical scale without touching
   touch-target sizes.
   ============================================================ */
@media (max-width:640px){
  :root{
    --sp-4:2rem;
    --sp-5:2.75rem;
    --sp-6:3.25rem;   /* was 6rem: the single biggest length saving */
  }

  /* hero: 224px of top padding pushed everything off screen */
  .hero__copy{padding:9rem 0 var(--sp-3)}
  .hero__lede{font-size:1rem;margin:var(--sp-2) 0 var(--sp-3)}
  .hero__cta{gap:.6rem}
  .hero__cta .btn{flex:1 1 100%}

  .sec{padding:var(--sp-5) 0}
  .sec--tight{padding:var(--sp-4) 0}
  .phead{padding:var(--sp-4) 0}
  .cta{padding:var(--sp-5) 0}
  .cta__box{padding:var(--sp-4) var(--sp-2)}
  .strip{padding:var(--sp-5) 0}
  .sec__head{margin-bottom:var(--sp-3)}

  /* two columns of links instead of one long stack */
  .ft{padding:var(--sp-4) 0 var(--sp-2)}
  .ft__grid{gap:var(--sp-3)}
  .ft ul{grid-template-columns:1fr 1fr;column-gap:var(--sp-2)}
  .ft h4{margin-bottom:.35rem}
  .ft img{height:72px;margin-bottom:.6rem}
  .ft__blurb{font-size:.86rem}
  .ft__base{padding-top:var(--sp-2);gap:.35rem}
  .ft__base p{font-size:.75rem}

  /* product grid: two up reads better than one huge column */
  .grid{grid-template-columns:1fr 1fr;gap:var(--sp-3) .6rem}
  .card__name{font-size:.86rem}
  .card__price,.card__meta{font-size:.76rem}
  .card__sku{font-size:.58rem;padding:.28rem .45rem}
  .grid--pre{grid-template-columns:1fr}
}

/* very small phones: one column again, the two-up gets too cramped */
@media (max-width:359px){
  .grid{grid-template-columns:1fr}
}

/* Five nav items wrap onto two lines at 375px. Keep one line and let it
   scroll sideways instead, with the scrollbar hidden. */
@media (max-width:640px){
  .hdr__nav{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;
            -webkit-overflow-scrolling:touch;scrollbar-width:none;
            justify-content:flex-end;gap:.85rem}
  .hdr__nav::-webkit-scrollbar{display:none}
  .hdr__nav a{white-space:nowrap;flex:none}
}
@media (max-width:400px){
  .hdr__nav{gap:.7rem}
  .hdr__nav a{font-size:.72rem;letter-spacing:.03em}
}

/* In a two-up phone grid the card is ~168px wide, so name and price cannot
   sit on one row: the name wraps and the price strands beside its first
   line. Stack them instead. */
@media (max-width:640px){
  .card__row{flex-direction:column;align-items:flex-start;gap:.1rem}
  .card__name{line-height:1.25}
  .card__price,.card__price--ask{white-space:normal}
}

/* ============================================================
   MOBILE MENU
   Below 780px the five nav items no longer fit, so the full list
   collapses behind a burger. Shop and Contact stay outside it as
   the two links people actually reach for.
   ============================================================ */
.burger{display:none;background:none;border:none;padding:0;width:46px;height:46px;
        place-items:center;flex:none;border-radius:var(--r)}
.burger__box{display:block;width:24px;height:16px;position:relative}
.burger__box span{position:absolute;left:0;width:100%;height:2.5px;background:var(--ink);
                  border-radius:2px;transition:transform var(--t),opacity var(--t)}
.burger__box span:nth-child(1){top:0}
.burger__box span:nth-child(2){top:6.75px}
.burger__box span:nth-child(3){top:13.5px}
/* the three lines fold into an X while the menu is open */
.hdr.is-open .burger__box span:nth-child(1){transform:translateY(6.75px) rotate(45deg)}
.hdr.is-open .burger__box span:nth-child(2){opacity:0}
.hdr.is-open .burger__box span:nth-child(3){transform:translateY(-6.75px) rotate(-45deg)}

.hdr__quick{display:none;gap:.9rem;margin-left:auto;align-items:center}
.hdr__quick a{text-decoration:none;font-weight:700;font-size:.8rem;letter-spacing:.05em;
              text-transform:uppercase;display:inline-flex;align-items:center;min-height:44px;
              position:relative}
.hdr__quick a[aria-current="page"]{color:var(--brand-deep)}

@media (max-width:780px){
  .burger{display:grid}
  .hdr__quick{display:flex}
  .hdr__in{gap:var(--sp-2)}

  /* the full list becomes a dropdown panel under the bar */
  /* display toggle rather than a visibility transition: the panel must
     never depend on a transition finishing in order to be seen */
  .hdr__nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;
            flex-direction:column;align-items:stretch;gap:0;
            background:var(--paper);border-bottom:2px solid var(--ink);
            box-shadow:0 18px 30px -20px rgba(20,16,14,.6);
            padding:.4rem 4vw .8rem}
  .hdr.is-open .hdr__nav{display:flex;animation:menuIn 200ms cubic-bezier(.2,.7,.3,1)}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .hdr__nav a{min-height:52px;font-size:.95rem;border-bottom:1px solid var(--line);
              justify-content:flex-start}
  .hdr__nav a:last-child{border-bottom:none}
  .hdr__nav a::after{display:none}
  .hdr__nav a[aria-current="page"]{color:var(--brand-deep)}
}

/* above the breakpoint the burger and quick links must never appear */
@media (min-width:781px){
  .burger,.hdr__quick{display:none !important}
}

/* ============================================================
   SHOP + ORDER PANEL  (cashier-style layout)
   ============================================================ */
.shoplayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-3);align-items:start}
@media (max-width:1000px){.shoplayout{grid-template-columns:1fr}}
.shoplayout__main{min-width:0}
.grid--shop{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}

/* --- card gains size chips + an add button --- */
.card__opt{margin-top:.15rem}
.card__lbl{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
           text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.chipx{background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r);
       padding:.3rem .5rem;font-size:.72rem;font-weight:700;min-height:32px;
       transition:background var(--t),color var(--t),border-color var(--t)}
.chipx:hover{border-color:var(--ink)}
.chipx[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
            border-top:1px solid var(--line);padding-top:.6rem;margin-top:.15rem}
.addbtn{width:40px;height:40px;flex:none;border:2px solid var(--ink);background:var(--paper);
        border-radius:var(--r);display:grid;place-items:center;
        transition:background var(--t),color var(--t),transform var(--t)}
.addbtn svg{width:18px;height:18px}
.addbtn:hover{background:var(--ink);color:var(--paper)}
.addbtn:active{transform:scale(.92)}
.addbtn.is-added{background:var(--wa);border-color:var(--wa);color:#fff}

/* --- the panel --- */
.ord{position:sticky;top:84px;background:#fff;border:2px solid var(--ink);
     border-radius:var(--r-img);padding:var(--sp-3);display:flex;flex-direction:column;gap:.75rem}
@media (max-width:1000px){.ord{position:static}}
.ord__head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.ord__title{font-family:var(--font-display);font-size:1.4rem;text-transform:uppercase;margin:0}
.ord__clear{background:none;border:none;padding:0;color:var(--brand-deep);font-size:.78rem;
            font-weight:700;text-transform:uppercase;letter-spacing:.08em;min-height:32px}
.ord__clear:hover{text-decoration:underline}
.ord__count{font-size:.8rem;color:var(--muted);margin:0}
.ord__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
           max-height:44vh;overflow-y:auto}
.ord__list li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:.6rem;
              align-items:center;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.ord__list img{width:56px;height:56px;object-fit:cover;border-radius:var(--r-img-sm)}
.ord__meta{min-width:0}
.ord__name{display:block;font-weight:700;font-size:.85rem;line-height:1.25}
.ord__sub{display:block;font-size:.73rem;color:var(--muted)}
.ord__qty{grid-column:2;display:inline-flex;align-items:center;gap:.4rem;margin-top:.25rem}
.ord__qty button{width:28px;height:28px;border:1.5px solid var(--line);background:var(--paper);
                 border-radius:var(--r);font-weight:700;line-height:1}
.ord__qty button:hover{border-color:var(--ink)}
.ord__qty span{min-width:1.2rem;text-align:center;font-weight:700;font-size:.85rem;
               font-variant-numeric:tabular-nums}
.ord__price{grid-row:1/3;grid-column:3;font-weight:700;font-size:.8rem;white-space:nowrap;
            font-variant-numeric:tabular-nums}
.ord__empty{font-size:.85rem;color:var(--muted);margin:0;padding:.5rem 0}
.ord__sum{margin:0;display:grid;gap:.35rem;border-top:2px solid var(--ink);padding-top:.7rem}
.ord__sum div{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem}
.ord__sum dt,.ord__sum dd{margin:0}
.ord__total{font-weight:700;font-size:1.05rem !important;font-variant-numeric:tabular-nums}
.ord__act{display:grid;gap:.5rem}
.ord__act .btn.is-off{opacity:.45;pointer-events:none}
.ord__note{font-size:.74rem;color:var(--muted);margin:0;line-height:1.5}

@media (max-width:640px){
  .grid--shop{grid-template-columns:1fr 1fr}
  .card__lbl{display:none}
  .chipx{font-size:.66rem;padding:.25rem .4rem;min-height:30px}
  .ord__list{max-height:none}
}

/* ---- staff sign-in: present but subordinate to the shopping links ---- */
.hdr__admin{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);
            margin-left:.35rem;padding-left:.85rem;position:relative}
.hdr__admin::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
                    width:1px;height:16px;background:var(--line)}
.hdr__admin svg{width:14px;height:14px;flex:none}
.hdr__admin:hover{color:var(--brand-deep)}
.hdr__admin::after{display:none}
@media (max-width:780px){
  .hdr__admin{margin-left:0;padding-left:0;color:var(--muted)}
  .hdr__admin::before{display:none}
  .hdr__admin svg{width:16px;height:16px}
}

/* ============================================================
   Off-screen product cards are skipped during layout and paint
   until they are near the viewport. The markup stays in the HTML
   so Google still indexes every piece, but a 34-card grid costs
   about as much to render as the few cards actually on screen.
   contain-intrinsic-size reserves the right height so the
   scrollbar does not jump as cards come into view.
   ============================================================ */
@supports (content-visibility: auto){
  .grid > .card{
    content-visibility:auto;
    contain-intrinsic-size:auto 420px;
  }
  .pd__more .grid > .card{contain-intrinsic-size:auto 380px}
}