/* ============================================================
   Fonts, served from this site rather than fonts.googleapis.com.

   Google Fonts costs two extra origins on the critical path: a
   render-blocking stylesheet from googleapis.com, which then points at
   font files on gstatic.com -- a second DNS lookup, TLS handshake and
   round trip before any text can be drawn in the real typeface. Serving
   them here makes the fonts same-origin, Brotli-compressed and cached by
   Cloudflare, removes two third parties from every page load, and lets
   the Content-Security-Policy drop both of them.

   Karla is a variable font, so one file covers 400-700; there is no
   separate file per weight. Both faces are SIL Open Font License, which
   permits hosting them this way.

   font-display:swap keeps text visible in a fallback face while these
   load, so nothing is ever invisible.
   ============================================================ */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   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:38px;padding:.1rem 0}
  .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)}
/* small marks on the contact links: they are recognised faster than the
   words, and they cost one line of height, not two */
.ft a svg{width:15px;height:15px;flex:none;margin-right:.45rem;opacity:.7;
          transition:opacity var(--t)}
.ft a:hover svg{opacity:1}
.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-3) 0 var(--sp-2)}
  .ft__grid{gap:var(--sp-2);margin-bottom:var(--sp-2)}
  .ft ul{grid-template-columns:1fr 1fr;column-gap:var(--sp-2)}
  .ft h4{margin-bottom:.2rem;font-size:.68rem}
  .ft img{height:52px;margin-bottom:.4rem}
  .ft__blurb{font-size:.8rem;line-height:1.5;max-width:42ch}
  .ft a{font-size:.85rem}
  .ft a svg{width:14px;height:14px;margin-right:.35rem}
  .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:.2rem 4vw .45rem}
  .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:42px;font-size:.86rem;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}
}

/* ============================================================
   Out of stock. The server patches these in from the admin's
   database as the page is sent, so the file on disk never has to
   change and nothing has to be rebuilt.
   ============================================================ */
.card__sold{position:absolute;left:0;right:0;bottom:0;z-index:2;
            background:rgba(20,16,14,.86);color:var(--paper);
            font-size:.64rem;font-weight:700;letter-spacing:.14em;
            text-transform:uppercase;text-align:center;padding:.45rem .5rem}
/* The photo keeps its full colour. Greying it out sells the batik short,
   and the band, the price line and the missing Add button already say
   plainly enough that the piece has gone. */
/* the hover lift reads as "click me", which is the wrong invitation here */
.card.is-sold .card__link:hover .card__fig img{transform:none}
.card.is-sold .card__link:hover .card__fig{box-shadow:none}
.card.is-sold .card__opt{opacity:.75}
.card__price--sold{color:var(--muted);font-weight:700;font-size:.72rem;
                   letter-spacing:.1em;text-transform:uppercase}

.pd__price--sold{color:var(--muted);font-size:1.05rem;font-weight:700;
                 letter-spacing:.08em;text-transform:uppercase}
.pd__sold{margin:0 0 var(--sp-2);padding:.85rem 1rem;border-radius:var(--r);
          background:var(--paper-2);border:1px solid var(--line);
          font-size:.88rem;line-height:1.55;color:var(--ink-2)}

@media (max-width:640px){
  .card__sold{font-size:.56rem;padding:.35rem .4rem;letter-spacing:.1em}
  .pd__sold{font-size:.84rem;padding:.7rem .85rem}
}

/* shown only if the grid would otherwise be empty */
.grid__empty{grid-column:1/-1;padding:var(--sp-3) 0;color:var(--muted);
             font-size:.95rem;line-height:1.6}
.grid__empty a{color:var(--brand-deep);font-weight:600}

/* ============================================================
   Phone pass. Two problems measured on a 375px screen:
   the size chips were 30px tall, which is awkward for a thumb
   even though it clears the 24px WCAG minimum; and the supporting
   type had drifted to 9-12px, which is small for reading a price
   or a piece code at arm's length.
   ============================================================ */
@media (max-width:640px){
  /* size chips: a real thumb target, with room between them */
  .chips{gap:.5rem}
  .chipx{min-height:44px;padding:.5rem .85rem;font-size:.76rem}

  /* the card is the whole shop on a phone, so its text carries the work */
  .card__name{font-size:.95rem;line-height:1.35}
  .card__price,.card__meta{font-size:.84rem}
  .card__lbl{font-size:.72rem}
  .card__sku{font-size:.7rem;padding:.32rem .5rem}
  .card__n{font-size:.68rem}
  .card__sold{font-size:.66rem;padding:.45rem .5rem;letter-spacing:.12em}

  /* section eyebrows sat at 11.5px, under the 12px floor */
  .eyebrow{font-size:.78rem;letter-spacing:.18em}
  .ft__base p{font-size:.78rem}

  /* a one-character size label was only 37px wide */
  .chipx{min-width:44px}

  /* Add to order is the one thing a phone visitor is here to press,
     and it was the smallest control on the card at 40px. */
  .addbtn{width:44px;height:44px}
  .addbtn svg{width:20px;height:20px}

  /* back-to-top sits over content near the thumb, so give it room */
  .totop{width:48px;height:48px}
}

/* ============================================================
   Target sizes, by input device rather than by screen width.
   A 768px tablet is still a thumb, so the phone-only rules above
   were leaving its chips at 24px and its breadcrumbs at 14px.
   WCAG 2.2 AA asks for 24 CSS px on any pointer, so that floor is
   global; the roomier 44px is for touch.
   ============================================================ */
.crumb a{display:inline-block;padding:.45rem .25rem}
.chipx{min-height:36px;min-width:36px}

@media (hover:none){
  .chipx{min-height:44px;min-width:44px;padding:.5rem .85rem}
  .chips{gap:.5rem}
  .addbtn{width:44px;height:44px}
  .addbtn svg{width:20px;height:20px}
  .ft li a{min-height:34px}
}

/* Tablet: 707px of usable width was fitting only two cards, because
   three 230px tracks plus gaps overflowed by ~30px. Ask for three
   directly and the batik gets a fairer showing. */
@media (min-width:641px) and (max-width:1000px){
  .grid,.grid--shop{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- coming soon ----
   Amber, the same signal the wall-art page already uses for a piece that
   is on its way. Deliberately different from the dark "out of stock"
   band: one is an ending, the other is an invitation. */
.card__sold--soon{background:var(--amber);color:var(--ink)}
.card.is-soon .card__price--sold{color:var(--brand-deep)}
.pd__price--soon{color:var(--brand-deep)}
.pd__sold--soon{background:#FDF6E3;border-color:var(--amber)}

/* ============================================================
   iPhone sideways-scroll fix.

   Two separate faults, and both had to go:

   1. Grid items default to a minimum size of their content, and a card
      holds an image with aspect-ratio, whose intrinsic width can set that
      floor far above the track. The 1fr tracks were resolving to 420px
      inside a 345px grid. min-width:0 is the documented release valve.

   2. The page leaned on body{overflow-x:clip} to hide the result. Chrome
      propagates that to the viewport; WebKit does not, so on iOS the
      overflow became a real horizontal scroll -- the whole layout shifted
      and the sticky header only covered half the screen. Clipping on
      <html> works in both. clip rather than hidden, because hidden would
      make html a scroll container and break position:sticky.
   ============================================================ */
html{overflow-x:clip}
@supports not (overflow:clip){html{overflow-x:hidden}}

.grid,.grid--shop,.grid--pre{min-width:0}
.card{min-width:0;max-width:100%}
.card__fig{min-width:0}

/* ============================================================
   Compact phone footer.

   It was running to roughly 580px on a large iPhone -- most of a screen
   of nav links under a shop. Every row here earns its height:
   the blurb repeats what the hero already says and is the first to go,
   the logo is already in the header a scroll away, and the link rows come
   down to 34px, still well clear of the 24px pointer minimum.
   ============================================================ */
@media (max-width:640px){
  .ft{padding:var(--sp-2) 0 var(--sp-1)}
  .ft__grid{gap:.9rem;margin-bottom:.9rem}

  /* said already in the hero; on a phone it is 3 lines of repetition */
  .ft__blurb{display:none}

  .ft img{height:34px;margin-bottom:0}
  .ft h4{margin-bottom:.1rem;font-size:.64rem;letter-spacing:.14em}
  .ft li a{min-height:34px;font-size:.82rem;padding:0}
  .ft a svg{width:13px;height:13px;margin-right:.3rem}

  .ft__base{padding-top:.7rem;gap:.15rem}
  .ft__base p{font-size:.72rem;line-height:1.45}
}

/* ============================================================
   Phone menu, tidied.

   Three things were muddling it: SHOP and CONTACT appeared twice, once
   in the bar and again in the open panel; the current page was marked by
   colour alone; and the staff sign-in sat in the customer list with the
   same weight as Shop.
   ============================================================ */
@media (max-width:780px){
  /* the bar's shortcuts are redundant once the full list is open. Faded
     rather than removed, so the burger does not jump sideways. */
  .hdr.is-open .hdr__quick{opacity:0;pointer-events:none;
                           transition:opacity 140ms ease}
  .hdr__quick{transition:opacity 140ms ease}

  /* current page: an orange edge as well as the colour, so it is not
     colour alone doing the telling */
  .hdr__nav a{padding-left:.65rem}
  .hdr__nav a[aria-current="page"]{font-weight:700;
                                   box-shadow:inset 3px 0 0 var(--brand)}

  /* staff sign-in is not customer navigation; give it air and drop the
     rule above it so it reads as a footnote to the list, not an item in it */
  .hdr__nav a:nth-last-child(2){border-bottom:none}
  .hdr__nav .hdr__admin{margin-top:.45rem;padding-top:.5rem;
                        border-top:1px solid var(--line);border-bottom:none}
}