/* ============================================================
   JAPANESE CERAMICS - design system
   日本の陶磁器

   Palette runs roughly 70-80% ivory, 15-20% charcoal/gray,
   5-10% earth tones. No bright or saturated colour, no
   gradients, no gloss.

   Type:  Shippori Mincho (anything with a voice) · Inter (anything functional)
   ============================================================ */

/* Design tokens: the Setomono system from layout.txt. Names describe the colour
   they hold, so nothing here is a leftover pointing at something else - the
   previous ivory/charcoal/clay set was RENAMED to these, not repointed.
   Never introduce new colours, gradients, shadows, pure white or pure black. */
:root {
  --paper:      #F7F4EE;   /* page background, warm paper white */
  --paper-deep: #EFEAE0;   /* photo card backgrounds, subtle fills */
  --ink:        #2C2C2A;   /* primary text, primary buttons, logo */
  --ink-soft:   #6B6963;   /* secondary text, metadata, captions */
  --hairline:   #DDD8CC;   /* every border and divider, 1px only */
  --kaki:       #C4501F;   /* the accent, persimmon glaze. One per screen */
  --seal:       #B03A22;   /* the hanko seal and "found a home" only */
  --ok:         #5A6650;   /* form success, legible without shouting */
  --err:        #8c3a2e;

  /* serif = anything with a voice. sans = anything functional.
     Never bold the serif: hierarchy is size and space, not weight. */
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Wide, 2026-09-14: the container follows the screen, capped only on very
     large monitors. Prose, forms, cart and checkout cap themselves instead
     (--maxw-text / --maxw-form), so nothing readable stretches with it. */
  --maxw: 1800px;
  --maxw-text: 46rem;                       /* a reading column */
  --maxw-form: 1180px;                      /* cart, account, order pages */
  --gutter: clamp(20px, 5vw, 96px);         /* 96px on a 1920 screen */
  --section: clamp(56px, 8vw, 80px);        /* 80px, one hairline between */
  --radius: 2px;                            /* 0-4px maximum, never rounded */
  --shadow: none;                           /* none, by design */
}

/* The Japanese wordmark and any Japanese editorial text. */
.jp { font-family: var(--serif); font-weight: 400; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Shippori Mincho, always at 400. Hierarchy comes from size and space, never
   from weight: the serif is never bolded anywhere on this site. */
h1, h2, h3, h4, .serif {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.28;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2rem, 3.4vw, 3.4rem); margin: 0 0 .4em; }
h2 { font-size: 1.55rem; margin: 0 0 .5em; }
h3 { font-size: 1.25rem; margin: 0 0 .5em; }

p { margin: 0 0 1.1em; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--kaki); }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kaki);
  margin: 0 0 1rem;
}

/* ---------- Signature marks ----------
   Two devices carry the identity, and they appear nowhere else.

   The tategaki spine: vertical Japanese set as a structural label, echoing the
   brush inscription on a tomobako lid. Decoration that encodes meaning, so it is
   never scattered around for effect.

   The hanko seal: 一点物, "one of one". It sits on the corner of every AVAILABLE
   product photo and is the entire scarcity system. When a piece sells the seal
   disappears, the card dims and the price gains "found a home". Never add another
   badge next to it. */
.tate {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .35em;
  color: var(--ink-soft);
  user-select: none;
}
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1.5px solid var(--seal);
  color: var(--seal);
  font-family: var(--serif);
  font-size: 11px; line-height: 1.25;
  writing-mode: vertical-rl;
  letter-spacing: .1em;
  border-radius: 3px;
  transform: rotate(-2deg);
}

/* ---------- Layout ----------
   One hairline between sections does the work a box or a colour change used to.
   The last section on a page has none: the footer's own rule closes the page. */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
/* Component caps on a wide page: a reading column for prose, a comfortable
   width for anything with fields or rows. The container stays wide everywhere
   photographs are the content. */
.container--text { max-width: calc(var(--maxw-text) + 2 * var(--gutter)); }
.container--form { max-width: calc(var(--maxw-form) + 2 * var(--gutter)); }
.section { padding-block: var(--section); border-bottom: 1px solid var(--hairline); }
.section:last-of-type { border-bottom: 0; }

/* Section head: H2 on the left, meta on the right, sitting on one baseline. */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2.8rem;
}
.section-head h2 { margin: 0; }
.section-head .meta { font-size: 13px; color: var(--ink-soft); }
.section-head .meta a { color: var(--kaki); }
.section-head .meta a:hover { border-bottom: 1px solid var(--kaki); }
.section--neutral { background: var(--paper-deep); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }

.grid { display: grid; gap: clamp(28px, 3vw, 56px) clamp(16px, 2vw, 32px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  /* Product listings stay two across: a single tall column makes the collection
     look thin and doubles the scrolling. Covers the homepage bands and the
     related-products band (.grid--4) and the shop / category listing. */
  .grid--4, #shopGrid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .grid--4 .product-card .cat,
  #shopGrid .product-card .cat { font-size: .6rem; letter-spacing: .14em; margin-top: 10px; }
  .grid--4 .product-card .name,
  #shopGrid .product-card .name { font-size: .96rem; line-height: 1.3; }
  .grid--4 .product-card .price,
  #shopGrid .product-card .price { font-size: .85rem; }
  /* The 15px breathing room round the related cards would eat a narrow column. */
  .related-band .product-card .cat   { margin: 10px 10px 3px; }
  .related-band .product-card .name  { margin: 0 10px 3px; }
  .related-band .product-card .price { margin: 0 10px 10px; }
}

.center { text-align: center; }
.measure { max-width: 62ch; }
/* A container that carries .measure is a centred reading column: on a wide
   page a legal text or a statement set edge to edge is unreadable. */
.container.measure { max-width: calc(72ch + 2 * var(--gutter)); }
.measure.center { margin-inline: auto; }

/* ---------- Buttons ---------- */
/* Sentence case, not uppercase: the copy rule is plain and direct, and shouting
   in a button contradicts it. One primary button per viewport, and its hover is
   the single place the accent is allowed to fill a shape. */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  padding: .85rem 1.9rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--kaki); border-color: var(--kaki); color: var(--paper); }
/* A quiet text link, the second half of a CTA row. */
.link-quiet {
  font-size: 13px; color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline); padding-bottom: 2px;
}
.link-quiet:hover { color: var(--kaki); border-color: var(--kaki); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--light { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.btn--light:hover { background: transparent; color: var(--paper); }
.btn--sm { padding: 9px 16px; font-size: .72rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Utility bar (search / currency / account / wishlist / cart) ----
   Sits above the header so the header itself only carries the logo and the
   navigation. Scrolls away with the page; the header below stays sticky. */
.utility-bar { background: var(--paper-deep); border-bottom: 1px solid var(--hairline); font-size: .82rem; }
.utility-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; }
.util-note { margin: 0; color: var(--ink-soft); font-size: .78rem; letter-spacing: .04em; }
.util-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.util-sep { width: 1px; height: 18px; background: var(--hairline); flex: 0 0 auto; }

.util-ic { position: relative; color: var(--ink); display: inline-flex; padding: 4px; border-radius: 2px; background: none; border: 0; cursor: pointer; }
.util-ic svg { width: 20px; height: 20px; display: block; }
.util-ic:hover { color: var(--kaki); }

/* Search: a real field on desktop, an icon that opens one on small screens. */
.hdr-search { display: flex; align-items: center; gap: 4px; }
.hdr-search-input {
  width: 190px; padding: 5px 8px; border: 1px solid var(--hairline); border-radius: 2px;
  background: var(--paper); font-family: inherit; font-size: 14px; color: var(--ink);
  transition: width .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease, padding .28s ease, border-color .15s;
}
.hdr-search-input:focus { outline: 0; border-color: var(--ink); }
.hdr-search-input::placeholder { color: var(--ink-soft); }


/* ---------- Wishlist heart (product page) ---------- */
.wl-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--hairline); color: var(--ink); padding: 13px 20px; border-radius: 2px; cursor: pointer; font: inherit; font-size: .85rem; letter-spacing: .04em; transition: border-color .2s, color .2s; }
.wl-btn svg { width: 18px; height: 18px; }
.wl-btn:hover { border-color: var(--kaki); color: var(--kaki); }
.wl-btn.is-on { border-color: var(--kaki); color: var(--kaki); }
.wl-btn.is-on svg { fill: var(--kaki); }

/* ---------- Cart ---------- */
.cart-row { display: grid; grid-template-columns: 96px 1fr auto auto auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.cart-row:first-child { border-top: 1px solid var(--hairline); }
.cart-row img { width: 96px; height: 96px; object-fit: contain; background: var(--paper-deep); }   /* square and uncropped, same rule as the card */
.cart-info a { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: 2px; }
.cart-qty button { width: 32px; height: 34px; border: 0; background: var(--paper); cursor: pointer; font-size: 1rem; color: var(--ink); }
.cart-qty span { min-width: 28px; text-align: center; }
.cart-line { font-weight: 400; color: var(--ink); min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.cart-rm { border: 0; background: none; font-size: 1.4rem; color: var(--ink-soft); cursor: pointer; line-height: 1; }
.cart-rm:hover { color: var(--err); }
.cart-foot { display: flex; align-items: center; justify-content: flex-end; gap: 32px; padding-top: 28px; flex-wrap: wrap; }
@media (max-width: 620px) { .cart-foot .btn { width: 100%; text-align: center; } .cart-foot { justify-content: space-between; } }
.cart-total { font-size: 1.1rem; }
.cart-total strong { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin-left: 8px; }
@media (max-width: 620px) {
  .cart-row { grid-template-columns: 64px 1fr auto; grid-template-areas: "img info rm" "img qty line"; gap: 10px 14px; }
  .cart-row img { width: 64px; height: 64px; grid-area: img; }
  .cart-info { grid-area: info; } .cart-qty { grid-area: qty; } .cart-line { grid-area: line; } .cart-rm { grid-area: rm; align-self: start; }
}

/* ---------- Cookie consent ---------- */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 720px; margin: 0 auto; background: var(--ink); color: var(--paper); padding: 16px 20px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; z-index: 280; box-shadow: var(--shadow); font-size: .9rem; }
.cookie-bar a { color: var(--paper); text-decoration: underline; }
.cookie-bar .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); flex: 0 0 auto; }
.cookie-bar .btn:hover { background: transparent; color: var(--paper); }

/* ---------- Toast ---------- */
.jc-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 18px; background: var(--ink); color: var(--paper); padding: 13px 24px; border-radius: 3px; font-size: .9rem; letter-spacing: .04em; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 300; box-shadow: var(--shadow); white-space: nowrap; }
.jc-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.jc-toast a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--kaki); }
.jc-toast a:hover { color: var(--kaki); }

/* Added to cart: the button says so and settles back after a moment. Placed
   after .btn:hover on purpose so the state wins while the pointer is still on it. */
.btn.is-added, .btn.is-added:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); animation: jc-added .35s ease; }
@keyframes jc-added { 0% { transform: scale(1); } 40% { transform: scale(.96); } 100% { transform: scale(1); } }
/* The picture on its way to the Cart link. */
.jc-fly { position: fixed; z-index: 400; object-fit: cover; border-radius: 2px; pointer-events: none; will-change: transform, opacity; }
/* The Cart link taking it in. */
.nav-cart { display: inline-block; transition: color .3s; }
.nav-cart.bump { animation: jc-bump .6s ease; color: var(--kaki); }
@keyframes jc-bump { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 60% { transform: scale(.95); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .btn.is-added, .nav-cart.bump { animation: none; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,244,238,.92);   /* --paper at 92%, never white */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s ease;
  will-change: transform;
}
/* Hide on scroll-down, reveal on scroll-up (toggled in main.js). */
.site-header.header--hidden { transform: translateY(-100%); }
.site-header.header--stuck:not(.header--hidden) { border-bottom: 1px solid var(--hairline); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 78px; }
/* The bar follows the logo: 70px of artwork needs room to breathe, and at
   the old 76px it sat 3px from each edge. Steps down on mobile with the logo. */
@media (max-width: 820px) { .site-header .container { height: 76px; } }
.brand { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .18em; color: var(--ink); text-transform: uppercase; }
.brand small { display: block; font-family: var(--sans); font-size: .58rem; letter-spacing: .3em; color: var(--ink-soft); text-transform: uppercase; margin-top: 2px; }
.brand-logo { height: 46px; width: auto; display: block; }
@media (max-width: 820px) { .brand-logo { height: 50px; } }
/* ---------- Currency switcher (custom flag dropdown) ---------- */
.cur-switch { position: relative; }
.cur-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: .8rem; letter-spacing: .04em;
  border: 1px solid var(--hairline); background: var(--paper); color: var(--ink);
  padding: 6px 9px; border-radius: 2px; cursor: pointer; line-height: 1;
}
.cur-btn:hover, .cur-btn[aria-expanded="true"] { border-color: var(--ink); }
.cur-btn .cur-sym { min-width: 1.6em; text-align: center; font-size: .9rem; }
.cur-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); display: block; }
.cur-caret { transition: transform .2s ease; color: var(--ink-soft); }
.cur-btn[aria-expanded="true"] .cur-caret { transform: rotate(180deg); }
.cur-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 244px; margin: 0; padding: 6px;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px;
  box-shadow: 0 14px 40px rgba(44,44,42, .16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cur-switch.open .cur-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cur-menu ul { list-style: none; margin: 0; padding: 0; }
/* Says outright what the list is for. A flag beside a three-letter code was
   being read as a language picker, which is the one thing it is not. */
.cur-head {
  margin: 2px 4px 6px; padding: 0 6px 6px; border-bottom: 1px solid var(--hairline);
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.cur-menu li {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  font-size: .82rem; border-radius: 3px; cursor: pointer; color: var(--ink);
}
/* The symbol carries the meaning, so give it a fixed column and let the names
   line up beside it. */
.cur-sym { font-weight: 600; color: var(--ink); }
.cur-menu .cur-sym { min-width: 2.1em; text-align: center; }
.cur-menu li:hover, .cur-menu li:focus { background: var(--paper-deep); outline: 0; }
.cur-menu li.is-sel { font-weight: 600; }
.cur-menu .cur-code { letter-spacing: .04em; }
.cur-menu .cur-name { flex: 1; }
/* Four of the ten share a dollar sign, so the ISO code stays as a quiet
   tiebreaker on the right. */
.cur-menu .cur-code { margin-left: auto; color: var(--ink-soft); font-size: .7rem; letter-spacing: .06em; }
@media (max-width: 820px) {
  /* It lives in the utility bar now, not in the mobile drawer: keep it compact
     so five controls still fit across a narrow screen. */
  .cur-btn { padding: 4px 6px; gap: 5px; }
  .cur-menu { right: 0; left: auto; }
}
@media (max-width: 400px) { .cur-btn .cur-code { display: none; } }

/* ---------- Artist detail ---------- */
.artist-detail { display: grid; grid-template-columns: .85fr 1.4fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.artist-detail .photo img { width: 100%; display: block; background: var(--paper-deep); }
@media (max-width: 760px) { .artist-detail { grid-template-columns: 1fr; } .artist-detail .photo { max-width: 360px; } }
/* Text only, sentence case, 13px. No icon pack: the design is type, rules and
   two signature marks. The cart is the one item set in full ink so it reads as
   the live one. */
.nav { display: flex; gap: 2.2rem; align-items: baseline; }
.nav a { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.nav a:hover { color: var(--ink); }
.nav a.nav-cart { color: var(--ink); }
.nav a.nav-cart:hover { color: var(--kaki); }
/* Hamburger: three staggered rules in a 52px tap target, folding into a cross
   when the drawer opens. Navy, like everything else in the header. */
.nav-toggle {
  display: none; width: 52px; height: 52px; margin-right: -10px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); -webkit-tap-highlight-color: transparent;
  transition: background .2s ease;
}
.nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(44,44,42, .06); }
.nav-toggle-lines { position: relative; display: block; width: 30px; height: 18px; }
.nav-toggle-lines span {
  position: absolute; left: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: width .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.nav-toggle-lines span:nth-child(1) { top: 0;    width: 30px; }
.nav-toggle-lines span:nth-child(2) { top: 8px;  width: 19px; }
.nav-toggle-lines span:nth-child(3) { top: 16px; width: 25px; }
.nav-toggle:hover .nav-toggle-lines span { width: 30px; }
.nav-toggle.is-open .nav-toggle-lines span:nth-child(1) { width: 30px; transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-lines span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-toggle.is-open .nav-toggle-lines span:nth-child(3) { width: 30px; transform: translateY(-8px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle-lines span { transition: none; } }
@media (max-width: 820px) {
  /* Anchored to the header, not to a guessed distance from the top of the
     screen, so the utility bar above can never push it out of place. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); padding: 12px var(--gutter) 20px;
    border-bottom: 1px solid var(--hairline); box-shadow: 0 18px 40px rgba(44,44,42,.10);
    /* Hidden by fading out in place, NOT by sliding upward. Translating it up
       by its own height parked the closed menu directly over the utility bar,
       and z-index:-1 only tucked it behind the header's semi-transparent
       background - the bar above sits in a different stacking context, so the
       menu showed through it. */
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 40;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: .9rem; }
  .nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* ---------- Utility bar, small screens ----------
   Pinned to the top: search, currency and the bag stay reachable at any scroll
   depth. The header sticks directly beneath it (--utilh keeps the two in step),
   so the header's own hide-on-scroll still works and simply slides it away
   behind this bar. */
@media (max-width: 820px) {
  :root { --utilh: 54px; }
  .utility-bar {
    position: sticky; top: 0; z-index: 60;
    background: var(--paper-deep);                 /* must stay opaque: the header hides behind it */
    box-shadow: 0 1px 0 var(--hairline);
  }
  .utility-bar .container { height: var(--utilh); min-height: 0; gap: 8px; }
  .site-header { top: var(--utilh); }

  .util-note { display: none; }                 /* the icons need the room */
  .util-actions { gap: 8px; width: 100%; justify-content: flex-end; }
  .util-sep { display: none; }

  /* The field is permanent here rather than an icon that opens one: collapsed
     to zero width and transparent, it read as no search at all. It takes the
     width the icons leave and carries its own magnifier, so the separate
     submit button is redundant (Enter still submits the form). */
  .hdr-search { flex: 1 1 auto; min-width: 0; }
  .hdr-search-toggle { display: none; }
  .hdr-search-input {
    width: 100%; height: 38px; opacity: 1;
    padding: 8px 10px 8px 32px; font-size: 16px;
    border-color: var(--hairline); background-color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7785' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 10px center; background-size: 15px 15px;
  }
}
@media (max-width: 480px) {
  .util-actions { gap: 6px; }
  .util-ic { padding: 3px; }
  .util-ic svg { width: 19px; height: 19px; }
  .cur-btn .cur-caret { display: none; }        /* every pixel goes to the field */
}
@media (prefers-reduced-motion: reduce) { .hdr-search-input { transition: none; } }

/* ---------- Hero ----------
   Text 7fr / tategaki spine / image 5fr. The image bleeds to the right edge of
   the viewport while the text column stays aligned to the 1024px measure, which
   is what stops the composition looking like a boxed banner. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) auto minmax(0, 5fr);
  align-items: stretch;
  border-bottom: 1px solid var(--hairline);
}
.hero-text {
  padding: clamp(48px, 7vw, 88px) var(--gutter);
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.hero-text .eyebrow { display: block; margin-bottom: 1.6rem; }
.hero h1 { max-width: 17em; }
.hero-text p { margin-top: 1.6rem; max-width: 34em; color: var(--ink-soft); }
.hero-cta { margin-top: 2.4rem; display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }

.hero-spine {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 2.5rem .9rem;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.hero-figure {
  background: var(--paper-deep);
  position: relative; overflow: hidden;
  min-height: 460px;
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure figcaption {
  position: absolute; bottom: 1.1rem; right: 1.3rem;
  font-size: 11px; color: var(--ink-soft); letter-spacing: .05em;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding: 3.5rem var(--gutter); }
  .hero-spine { display: none; }
  .hero-figure { min-height: 320px; order: 2; }
}

/* ---------- Shop ----------
   No sidebar and no filter drawer. One hairline toolbar above the grid: the
   categories as a row of text links (the current one underlined in ink), a
   rule-only search field and the count. On a phone the category row scrolls
   sideways under the thumb, and the search takes the full width beneath it. */
.shop-head { max-width: 62ch; margin-bottom: clamp(24px, 3.5vw, 44px); }
.shop-head h1 { margin-bottom: .25em; }
.shop-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 40px; flex-wrap: wrap;
  padding-block: 6px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.shop-cats {
  display: flex; gap: 1.8rem; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cats a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; color: var(--ink-soft); white-space: nowrap;
  border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.shop-cats a:hover { color: var(--ink); }
.shop-cats a.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.shop-tools { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; margin-left: auto; }
.shop-search {
  width: clamp(180px, 22vw, 300px); min-height: 44px;
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 8px 0 8px 26px; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6963' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 16px 16px;
  transition: border-color .2s ease;
}
.shop-search:focus { outline: 0; border-bottom-color: var(--ink); }
.shop-search::placeholder { color: var(--ink-soft); }
.shop-count { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid--shop { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 1600px) { .grid--shop { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px) { .grid--shop { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .grid--shop { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .shop-bar { padding-block: 0 8px; }
  .shop-tools { width: 100%; margin-left: 0; gap: 14px; }
  .shop-search { flex: 1 1 auto; width: auto; }
}

/* ---------- Product card ----------
   Photograph on the paper-deep ground so the card and the page are one surface.
   Hover deepens that ground and nothing else: no zoom, no lift, no shadow. */
.product-card { background: transparent; display: block; }
.product-card .thumb {
  /* Square, always. Every product photograph occupies the same 1:1 tile whatever
     shape the file is, so a grid of pots lines up on every row.
     `contain`, never `cover`: cover would fill the square by cutting the top and
     bottom off anything portrait, which is most pots. The piece is shown whole on
     the paper-deep ground, which reads as a mat rather than as a gap. */
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-deep); position: relative;
  transition: background .25s ease;
}
.product-card:hover .thumb { background: #E9E3D6; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-card .seal { position: absolute; top: .8rem; right: .8rem; transform: scale(.72) rotate(-2deg); transform-origin: top right; }
.product-card .cat { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin: .2rem 0 0; order: 2; }
.product-card .name { font-family: var(--serif); font-size: 1rem; line-height: 1.45; color: var(--ink); margin: 1rem 0 0; }
.product-card .price { font-size: 13.5px; letter-spacing: .03em; color: var(--ink); margin-top: .45rem; }

/* Sold: the seal is gone, the photo steps back, and the price says where it went.
   The piece stays visible and linkable on purpose. */
.product-card.is-sold .thumb { opacity: .55; }
.product-card.is-sold .price { color: var(--ink-soft); }
.product-card.is-sold .price::after { content: " · found a home"; font-size: 12px; color: var(--seal); }

/* ===== Product page: what the buyer needs settled before committing ===== */
.availability { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; font-size: .93rem; line-height: 1.6; max-width: 60ch; }
.availability-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: .5em; }
.availability--ready .availability-dot { background: #0a7a3b; }
.availability--made .availability-dot  { background: var(--kaki); }
.availability strong { color: var(--ink); }

/* Recommendations.
   Its own section below the product, never inside the buy column: a long list of
   advice between the price and the Add to cart button is advice nobody reaches.
   Built from hairlines and type like everything else, with a 22px line glyph at
   the same weight as the rest of the furniture. The glyph inherits its colour
   from the row, so a prohibition reads by the shared diagonal bar rather than by
   turning red. Two columns from 760px up, because these are short independent
   lines and a single column of nine leaves a very long thin section. */
.care-block { margin: 0 0 6px; }
.care-block-head { margin-bottom: 6px; }
.care-block-head h2 { margin: 6px 0 0; }
.care-list { list-style: none; margin: 0 0 16px; padding: 0; }
.care-item { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.care-mark { flex: 0 0 auto; color: var(--ink-soft); line-height: 0; padding-top: 1px; }
.care-item--deny .care-mark { color: var(--ink); }
.care-text { display: block; }
.care-label { display: block; font-size: .95rem; color: var(--ink); }
.care-note { display: block; font-size: .84rem; color: var(--ink-soft); margin-top: 3px; }
.care-foot { font-size: .82rem; color: var(--ink-soft); margin: 0; max-width: 62ch; }

@media (min-width: 760px) {
  .care-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  /* The top rule is drawn per row rather than on the list, or the two columns
     would each need one and they would not line up when the count is odd. */
  .care-item:nth-child(1), .care-item:nth-child(2) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 759px) {
  .care-item:first-child { border-top: 1px solid var(--hairline); }
  .care-item { gap: 11px; }
}
.enquiry-promise { font-size: .86rem; color: var(--ink-soft); margin: 0; align-self: center; }

.assurances { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 9px; max-width: 52ch; }
.assurances li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink); line-height: 1.5; }
.assurances svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .25em; color: #0a7a3b; }
.ship-note { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 14px 16px; background: var(--paper-deep); border-radius: 3px; font-size: .86rem; color: var(--ink-soft); line-height: 1.55; max-width: 52ch; }
.ship-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .1em; }

/* The corner badges are gone: the hanko seal is the whole scarcity system now,
   and a sold piece is marked by the dimmed photo and "found a home" on the
   price line. The cart and wishlist counts are written into the nav labels as
   text, so the little circular count bubble went with them. */
/* Related-products band: white ground, and the card text sits in 15px of air on
   every side so it reads as a block rather than crowding the photo. */
.related-band { background: var(--paper-deep); }
.related-band .product-card .cat { margin: 15px 15px 4px; }
.related-band .product-card .name { margin: 0 15px 4px; }
.related-band .product-card .price { margin: 0 15px 15px; }

/* ---------- Product detail ----------
   Gallery about 60%, buy column sticky beside it so the price and the button stay
   in reach while the photographs are read. Most traffic lands here from a phone,
   where it stacks - that screen is the one that matters most. */
.pdp { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.pdp-buy { position: sticky; top: 100px; max-width: 600px; }
/* The product name sits at a fixed 2rem on desktop rather than following the
   global h1 clamp, which runs up to 3.1rem. That size is right for a page
   heading with a whole column to itself; in the buy column it pushes the price
   and the button down the screen for no gain. Below 900px the column is full
   width and the global clamp takes over again.
   861px, not a round 900, because that is exactly where `.pdp` stops being two
   columns (the rule below is max-width: 860px). A different number would leave a
   band of widths that are two-column but sized as if they were not. */
@media (min-width: 861px) {
  .pdp-buy h1 { font-size: 2rem; line-height: 1.25; }
}
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-buy { position: static; }
}

/* Specifications as a definition list: label left, value right, one hairline per
   row. Nothing here is a box. */
.spec-table { display: grid; grid-template-columns: 1fr; margin: 0; max-width: 44rem; }
.spec-table > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: .8rem 0; border-bottom: 1px solid var(--hairline);
}
.spec-table dt { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.spec-table dd { margin: 0; font-size: 14px; text-align: right; }

/* "Where we found it": the piece's own story, set in the serif at 18px so it
   reads as a passage rather than another row of specifications. This is the
   differentiator on every product page. */
.found-story { margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.found-story p {
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.7;
  color: var(--ink); margin: .6rem 0 0; max-width: 46ch;
}

/* "Found a home": the sold state of the buy button. Reads as a statement, not a
   disabled control shouting SOLD OUT. */
.found-home {
  display: inline-block; padding: .85rem 1.9rem;
  border: 1px solid var(--hairline); color: var(--seal);
  font-size: 13px; letter-spacing: .08em;
}
.pdp .gallery { position: sticky; top: 96px; }
.pdp .pdp-main { background: var(--paper-deep); overflow: hidden; }
/* Square, matching the listing card exactly, so the piece a visitor clicked is
   framed the same way on the page they land on.
   The pairing that matters is square WITH `contain`. An earlier version of this
   file used square with `cover`, which squared the photo by cutting the top and
   bottom off anything portrait; the fix then was to drop the square. Keeping the
   square and dropping the crop gets both: uniform tiles and the whole vessel. */
.pdp .pdp-main img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: contain; }

/* Hover magnifier - desktop only. The class is added by JS after checking the
   pointer really is a mouse, so touch and coarse pointers never get it. */
.pdp .pdp-main.can-zoom { cursor: zoom-in; }
.pdp .pdp-main.can-zoom img { transition: transform .32s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.pdp .pdp-main.is-zooming img { transition-duration: .18s; }
.pdp .pdp-main.can-zoom .zoom-hint { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 20px; background: rgba(44,44,42,.72); color: var(--paper); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; opacity: 1; transition: opacity .25s ease; }
.pdp .pdp-main.can-zoom { position: relative; }
.pdp .pdp-main.is-zooming .zoom-hint { opacity: 0; }
.pdp .pdp-main .zoom-hint svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  .pdp .pdp-main.can-zoom img { transition: none; }
  .pdp .pdp-main.can-zoom .zoom-hint { transition: none; }
}
.pdp .pdp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pdp .pdp-thumb { padding: 0; width: 72px; height: 72px; border: 1px solid var(--hairline); background: var(--paper-deep); border-radius: 2px; overflow: hidden; cursor: pointer; transition: border-color .2s; }
/* contain here too, so a thumbnail previews the same framing the main image
   will show rather than a tighter crop of it. */
.pdp .pdp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0; }
.pdp .pdp-thumb:hover { border-color: var(--kaki); }
.pdp .pdp-thumb.is-active { border-color: var(--ink); }
@media (max-width: 860px) { .pdp .gallery { position: static; } }
.pdp .price-lg { font-size: 1.6rem; color: var(--ink); font-family: var(--serif); margin: .2em 0 1em; }
.spec-title { font-size: 1.05rem; letter-spacing: .04em; margin: 1.8em 0 -.4em; }
.spec-table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.spec-table th, .spec-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.spec-table th { color: var(--ink-soft); font-weight: 600; width: 38%; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- FAQ (AEO block) ---------- */
.faq details { border-bottom: 1px solid var(--hairline); padding: 18px 0; }
.faq summary { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--kaki); font-size: 1.4rem; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 12px; color: var(--ink); }

/* ---------- Article / Journal ---------- */
.article-body { font-size: 1.08rem; line-height: 1.85; color: var(--ink); }
.article-body p { margin: 0 0 1.3em; }
.article-body h2 { margin: 1.6em 0 .5em; }
.article-body h3 { margin: 1.4em 0 .5em; }
.article-body ul, .article-body ol { margin: 0 0 1.3em 1.25em; }
.article-body li { margin-bottom: .4em; }
.article-body blockquote { border-left: 3px solid var(--kaki); margin: 1.6em 0; padding: .2em 0 .2em 1.2em; font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; color: var(--ink); }
.article-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--kaki); text-underline-offset: 2px; }
.author-box { display: flex; gap: 24px; align-items: flex-start; }
.author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--paper-deep); flex: 0 0 auto; }
@media (max-width: 560px) { .author-box { flex-direction: column; gap: 14px; } }

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: .8rem; color: var(--ink-soft); letter-spacing: .04em; padding-block: 20px; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--kaki); }

/* ---------- Subscribe (sits between the page and the footer) ----------
   The only centred section on the site. That contrast is deliberate: everything
   else is left-aligned, so centring reads as an invitation rather than a habit.
   Input and button share one 1px ink frame instead of being two boxes. */
.newsletter { background: var(--paper); border-top: 1px solid var(--hairline); padding-block: clamp(48px, 7vw, 88px); text-align: center; }
.newsletter__inner { display: block; max-width: 34rem; margin: 0 auto; }
.newsletter__copy h2 { font-size: 1.7rem; margin: 0 0 .4em; }
.newsletter__copy p { color: var(--ink-soft); margin: 0 auto; max-width: 46ch; }
.newsletter__row {
  display: flex; max-width: 26rem; margin: 2rem auto 0;
  border: 1px solid var(--ink);
}
.newsletter__row input {
  flex: 1; min-width: 0;
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  padding: .9rem 1.1rem; min-height: 0;
  border: 0; border-radius: 0;
  background: transparent; color: var(--ink);
}
.newsletter__row input::placeholder { color: var(--ink-soft); }
.newsletter__row input:focus { outline: 0; box-shadow: none; }
.newsletter__row .btn { flex: 0 0 auto; border: 0; border-radius: 0; padding: 0 1.6rem; }
.newsletter__small { font-size: .8rem; color: var(--ink-soft); margin: 12px 0 0; }
.newsletter__msg { font-size: .9rem; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--paper); border-left: 3px solid var(--ok); }
.newsletter__msg.is-err { border-left-color: var(--err); color: var(--err); }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.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; }
@media (max-width: 560px) {
  /* Stacked, but each half keeps the single frame rather than growing a second. */
  .newsletter__row { flex-direction: column; }
  .newsletter__row input { border-bottom: 1px solid var(--ink); }
  .newsletter__row .btn { width: 100%; padding: .85rem 1.6rem; }
}

/* ---------- Footer ----------
   One hairline on top and a single row. No dark slab, no columns, no headings:
   the page ends quietly on the same paper it started on. */
.site-footer { border-top: 1px solid var(--hairline); padding-block: 2.2rem 3rem; font-size: 12.5px; color: var(--ink-soft); }
.site-footer .foot {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--kaki); }
.foot-links { display: flex; align-items: center; gap: 1.8rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.foot-social { display: inline-flex; gap: .9rem; align-items: center; }
.foot-social svg { width: 15px; height: 15px; display: block; }
@media (max-width: 560px) { .foot-links { gap: 1.1rem; } }

/* ---------- Forms (brief: inputs >=16px, touch-friendly, elegant focus) ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;               /* mandatory minimum */
  line-height: 1.5;
  padding: 13px 15px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  min-height: 50px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: none;                         /* the darker rule is the focus state */
}
.field .hint { font-size: .8rem; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Figure (photo + caption) ---------- */
.figure { margin: 0; }
.figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-deep); display: block; }
.figure figcaption { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 12px; }

/* ---------- Hero with photographic background ----------
   The interior pages (About) keep a single-column photographic hero, so this has
   to undo the three-column grid the homepage hero now uses. Same class name, one
   column, text centred over the picture. */
.hero--photo {
  display: block;
  background-size: cover; background-position: center;
  padding-block: clamp(72px, 12vw, 150px);
  text-align: center;
  position: relative;
}
.hero--photo h1, .hero--photo h2 { color: var(--paper); }
.hero--photo p { color: rgba(247,244,238,.92); }   /* paper at 92%, over the photograph */
.hero--photo .container { position: relative; z-index: 2; }

/* The homepage hero video now lives inside .hero-figure rather than behind the
   whole section, so it is sized to that cell and needs no scrim: the words are
   beside the picture, not on top of it. */
.hero-figure .hero-video { position: absolute; inset: 0; overflow: hidden; }
.hero-figure .hero-video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  min-width: 177.78%; min-height: 100%;
  border: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hero-figure .hero-video { display: none; } }

/* Hero video. The photo stays behind it and shows while the embed loads, so an
   empty frame is never visible. The iframe is sized to cover the section the
   way background-size:cover would: 16/9 scaled off whichever axis is short.
   The scrim over the video is a flat wash, not a gradient: it exists only so the
   hero text stays legible over moving footage. .hero > .container is already
   z-index 2 and stays on top. */
.hero--video .hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero--video .hero-video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;            /* 16:9 off the width */
  min-width: 177.78vh; min-height: 100%;    /* and off the height when that is the short side */
  border: 0; pointer-events: none;          /* the hero stays clickable, not the video */
}
.hero--video::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(44,44,42,.55);
}
/* Anyone who asks for less motion gets the still photograph instead. */
@media (prefers-reduced-motion: reduce) {
  .hero--video .hero-video { display: none; }
  .hero--video::before { display: none; }
}

/* ---------- Motion & light (subtle) ---------- */
/* Scroll reveal - only hides when JS adds .reveal, and only with motion allowed. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
}
#shopGrid .product-card.reveal { opacity: 1; transform: none; }   /* don't fight the filter */

/* Dark sections carry no drifting glow and no twinkles. The inherited design had
   both; this one gets its atmosphere from the photography, the spacing and the
   type, which is the whole point of the brief. */
.hero, .section--dark { position: relative; overflow: hidden; }
.hero > .container, .section--dark > .container { position: relative; z-index: 2; }

/* Product imagery lifts very slightly on hover. Slow, and nothing else moves. */
@media (prefers-reduced-motion: no-preference) {
  .product-card img { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
  .product-card:hover img { transform: scale(1.03); }
}

/* No hover glow. A card lifting on a drop shadow is the boxed, commercial look
   the brief rules out - the photograph and the whitespace carry the page instead.
   (This block used to re-declare .btn transition and would silently undo the
   slower one set with the button itself.) */
.product-card .thumb { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }

/* ---------- Utility ---------- */
.flow > * + * { margin-top: 1rem; }
.divider { height: 1px; background: var(--hairline); margin-block: clamp(40px, 6vw, 80px); }
.tag { display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--paper-deep); padding: 4px 10px; border-radius: 2px; margin: 0 6px 6px 0; }

/* ---------- Contact ---------- */
/* The contact page is the form and nothing else. Fields are a single bottom rule
   rather than a box: label above in small caps, and focus darkens the rule instead
   of drawing a ring. Scoped to .contact-form on purpose - the checkout keeps its
   boxed fields, where a visible edge helps someone typing an address at speed. */
.container.contact-narrow { max-width: 720px; }
.contact-intro { color: var(--ink-soft); margin-bottom: clamp(30px, 4vw, 48px); max-width: 62ch; }
.contact-form { margin: 0; }
.contact-form .field { margin-bottom: clamp(24px, 3vw, 34px); }
.contact-form .field label { font-size: .72rem; font-weight: 400; letter-spacing: .16em; margin-bottom: 2px; }
.contact-form .field input,
.contact-form .field textarea {
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  min-height: 44px;
}
.contact-form .field textarea { min-height: 104px; }
.contact-form .field input:focus,
.contact-form .field textarea:focus { border-bottom-color: var(--ink); box-shadow: none; }
.contact-form .btn { margin-top: 10px; }
.form-note { padding: 13px 16px; border-radius: 3px; font-size: .95rem; }
.form-note--ok { background: #e7f6ed; color: #0a7a3b; border: 1px solid #b7e2c6; }
.form-note--err { background: #fdecea; color: #b42318; border: 1px solid #f5c2bd; }

/* ===== Payment security & returns reassurance ===== */
/* This block used to sit in a dark footer, so its rules were written for white
   text on charcoal. It now appears on the checkout and the product page, both on
   paper, and the three .site-footer overrides below it are gone with the dark
   footer: white text on paper would have been invisible. */
.pay-trust { border-top: 1px solid var(--hairline); margin-top: 28px; padding-top: 22px; }
.pay-badges { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pay-badges li { display: flex; align-items: center; gap: 9px; font-size: .84rem; }
.pay-badges svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--kaki); }
.pay-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: .82rem; line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
.pay-note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .18em; }

/* "Payment secured by [Stripe]" directly under the pay button. */
.pay-secured { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: .78rem; letter-spacing: .02em; color: var(--ink-soft); }
.pay-secured svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ink); }
.pay-secured a { display: inline-flex; align-items: center; text-decoration: none; }
.pay-secured-mark { height: 20px; width: auto; display: block; }
.pay-secured strong { color: var(--ink); font-weight: 600; }

/* Checkout: quieter, sitting under the pay button. */
.pay-trust--compact { border-top: 1px solid var(--hairline); margin-top: 18px; padding-top: 16px; }
.pay-trust--compact .pay-badges { gap: 7px 18px; margin-bottom: 10px; }
.pay-trust--compact .pay-badges li { font-size: .8rem; color: var(--ink-soft); }
.pay-trust--compact .pay-note { font-size: .79rem; }

/* Product page. */
.product-page .pay-note, .pdp .pay-note { margin-top: 14px; }
.returns-note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; font-size: .86rem; line-height: 1.55; color: var(--ink); max-width: 52ch; }
.returns-note svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .18em; color: #0a7a3b; }
.returns-note--no svg { color: var(--kaki); }
.returns-note a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .pay-badges { gap: 8px 16px; } .pay-badges li { font-size: .8rem; } }

/* ---------- Category index (homepage) ----------
   Not buttons and not pills: a table of contents. Each row is the whole link,
   name in the serif on the left, Japanese on the right, one hairline under it. */
.cat-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; max-width: 44rem; }
.cat-index a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: .95rem 0; border-bottom: 1px solid var(--hairline);
  font-family: var(--serif); font-size: 1.02rem; color: var(--ink);
  transition: color .2s ease;
}
.cat-index a:hover { color: var(--kaki); }
.cat-index .jp { font-family: var(--serif); font-size: .85rem; color: var(--ink-soft); letter-spacing: .1em; }
.cat-index a:hover .jp { color: var(--kaki); }
@media (max-width: 900px) { .cat-index { grid-template-columns: 1fr; gap: 0; } }

/* Trust list: what every piece ships with. A kaki dot marks each row - never an
   icon set, and never an em dash. */
.trust-list { list-style: none; margin: .9rem 0 0; padding: 0; }
.trust-list li {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px solid var(--hairline);
  font-size: 13.5px; color: var(--ink-soft);
}
.trust-list li::before { content: "·"; color: var(--kaki); font-weight: 700; }

/* ---------- Focus and motion ----------
   A 2px kaki outline at 3px offset on everything interactive: the accent earns
   its keep here more than anywhere else on the page.

   Motion is almost absent by design. Colour transitions and the image-card
   background are all that is allowed, and prefers-reduced-motion removes even
   those - including the smooth scrolling. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--kaki);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Touch input floor (keep last) ----------
   iOS zooms the whole page whenever a focused field is smaller than 16px. The
   styled fields already set it; this is the floor for the ones that do not and
   for anything added later. Last in the file so it wins on equal specificity. */
@media (max-width: 820px) {
  input, select, textarea,
  .field input, .field select, .field textarea,
  .hdr-search-input, .shop-search, .newsletter__row input { font-size: 16px; }
  input[type="checkbox"], input[type="radio"], input[type="range"] { font-size: inherit; }
}