/* ===========================================================================
   KUMIKO WORKSHOP — gallery theme (v1, warm washi light)
   Paper canvas · natural matte wood accents · gallery calm.
   Used by index.html (home) and shop.html (shop).
   One deliberately dark inset ("trace the light") is the only place amber glows.
   =========================================================================== */

:root{
  /* ---- washi paper canvas ---- */
  --paper:   #F1EBDF;         /* warm washi page background            */
  --paper-2: #EAE1D0;         /* slightly deeper alternating band      */
  --paper-3: #E4DAC6;         /* deepest — footer / wells              */
  --card:    #F8F7F3;         /* matches product-photo bg → boxes float*/
  --card-2:  #FFFFFF;

  /* ---- warm ink ---- */
  --ink:     #241D14;         /* primary text — warm near-black        */
  --ink-2:   #574B3B;         /* secondary text                        */
  --muted:   #6E6152;         /* captions, kickers — WCAG AA on paper  */
  --faint:   #B4A88F;         /* decorative vertical type              */

  /* ---- natural wood accent (NOT neon) ---- */
  --wood:      #8A5626;       /* accent: rules, buttons, large marks   */
  --wood-2:    #A06D34;       /* lighter / hover                       */
  --wood-ink:  #6E441E;       /* accent text needing contrast          */
  --wood-deep: #4E3418;

  /* ---- hairlines ---- */
  --line:   rgba(58,42,24,.14);
  --line-2: rgba(58,42,24,.26);
  --line-3: rgba(58,42,24,.40);

  /* ---- the one dark inset ---- */
  --night:   #17110B;
  --night-2: #1F160D;
  --glow:    #E3B878;

  /* ---- type ---- */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --jp:    'Shippori Mincho', serif;
  --sans:  'Jost', system-ui, sans-serif;

  --maxw: min(1900px, 94vw);   /* percentage of viewport → fills big browsers, not a tiny fixed column */
  --pad:  clamp(20px, 5vw, 72px);
  --sect: clamp(88px, 14vh, 176px);
  --ease: cubic-bezier(.16,.8,.24,1);

  /* ---- compatibility aliases for cart.js (nav-button context = light) ---- */
  --amber:        var(--wood);
  --amber-bright: var(--wood-2);
  --fg:     var(--ink);
  --fg-dim: var(--ink-2);
  --bg-3:   var(--paper-3);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;   /* clip (not hidden) → no nested scroll container; keeps html the scroller */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(138,86,38,.20); color:var(--ink); }
:focus-visible{ outline:2px solid var(--wood); outline-offset:3px; border-radius:2px; }
:focus:not(:focus-visible){ outline:none; }

/* skip-to-content (visible on keyboard focus) */
.skip{
  position:absolute; left:-9999px; top:0; z-index:80;
  background:var(--wood); color:#F6EFE2; padding:12px 20px; border-radius:0 0 6px 0;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{ left:0; }

/* ---- atmosphere: barely-there paper grain ---- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{ display:none; }   /* no dark vignette on paper */

/* ---- type utilities ---- */
.kicker{
  display:inline-block; font-size:11px; font-weight:400; letter-spacing:.34em;
  text-transform:uppercase; color:var(--wood-ink);
}
.vrt{
  writing-mode:vertical-rl; font-family:var(--jp); font-weight:400;
  letter-spacing:.5em; color:var(--faint);
}
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:.008em; line-height:1.06; margin:0; color:var(--ink); }
h2{ font-size:clamp(28px, 4.4vw, 52px); }
h3{ font-size:clamp(20px, 2.4vw, 27px); }
em{ font-style:italic; color:var(--wood-ink); }
p{ margin:0; }
.lede{ font-family:var(--serif); font-weight:300; font-size:clamp(18px,2vw,25px); color:var(--ink-2); line-height:1.5; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans);
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--wood-ink);
  border:1px solid var(--line-2); border-radius:999px; padding:14px 30px; background:transparent;
  cursor:pointer; transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ border-color:var(--wood); background:rgba(138,86,38,.06); }
.btn--solid{ background:var(--wood); border-color:var(--wood); color:#F6EFE2; }
.btn--solid:hover{ background:var(--wood-deep); border-color:var(--wood-deep); color:#fff; }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.qlink{ display:inline-flex; align-items:center; min-height:44px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--wood-ink); transition:color .3s var(--ease); }
.qlink:hover{ color:var(--wood); }

/* ---- nav ---- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(244,238,227,.82); backdrop-filter:blur(14px) saturate(1.05);
  padding-top:13px; padding-bottom:13px; border-bottom:1px solid var(--line);
  box-shadow:0 12px 34px -26px rgba(40,28,14,.5);
}
.brand{ display:flex; align-items:baseline; gap:12px; }
.brand-jp{ font-family:var(--jp); font-size:18px; color:var(--ink); }
.brand-en{ font-family:var(--sans); font-size:11px; letter-spacing:.30em; text-transform:uppercase; color:var(--muted); }
.nav-links{ display:flex; align-items:center; gap:clamp(16px,2.6vw,36px); }
.nav-links a{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2);
  transition:color .3s var(--ease);
}
.nav-links a:hover{ color:var(--wood); }
.nav-shop{                       /* filled so the shop is unmissable */
  border:1px solid var(--wood); background:var(--wood); border-radius:999px;
  padding:9px 22px; color:#F6EFE2!important; letter-spacing:.2em;
}
.nav-shop:hover{ background:var(--wood-deep); border-color:var(--wood-deep); color:#fff!important; }
.nav-links a[aria-current]{ color:var(--wood); }
.nav-links a[aria-current]:not(.nav-shop)::after{
  content:""; display:block; height:1px; margin-top:3px; background:var(--wood); opacity:.6;
}

/* mobile drawer */
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  margin:-8px -8px -8px 0; background:transparent; border:0; color:var(--ink-2); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle svg{ width:24px; height:24px; }
.nav-toggle:hover{ color:var(--wood); }
.nav-scrim{
  position:fixed; inset:0; z-index:48; background:rgba(28,20,12,.4); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.nav-scrim.open{ opacity:1; pointer-events:auto; }
@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:fixed; top:0; right:0; z-index:49; width:min(82vw,320px); height:100dvh;
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px;
    padding:96px 30px 36px; background:rgba(248,247,243,.98); backdrop-filter:blur(18px) saturate(1.05);
    border-left:1px solid var(--line); transform:translateX(100%); visibility:hidden;
    transition:transform .34s var(--ease), visibility .34s var(--ease); overflow-y:auto;
  }
  .nav-links.open{ transform:none; visibility:visible; }
  .nav-links a{ width:100%; min-height:44px; display:flex; align-items:center; font-size:13px; letter-spacing:.2em; }
  .nav-links a[aria-current]:not(.nav-shop)::after{ display:none; }
  .nav-shop{ margin-top:12px; align-self:flex-start; }
}

/* =====================================================================
   HOME
   ===================================================================== */

/* ---- flat hero (panel shown clean, face-on, uncropped) ---- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  gap:clamp(22px,5vh,46px); padding:clamp(112px,16vh,150px) var(--pad) 64px;
}
/* pixel-liquid fluid backdrop (21st.dev component, warm-palette port) */
.hero-liquid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 90% at 50% 32%, rgba(227,184,120,.12), rgba(227,184,120,0) 66%);
  /* dissolve the triangular fluid (and its canvas) into the paper over the lower third,
     so the hero hands off to the asanoha band as a soft gradient instead of a hard cut */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 60%, transparent 92%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 60%, transparent 92%);
}
/* page-wide faint triangular fluid — fixed behind ALL content, barely visible subtle detail.
   Sits above the paper (root bg) but below content via z-index:-1; calm areas are transparent
   so only the soft drifting streaks tint the paper. */
.page-fluid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:0;
  animation:pfFadeIn 2.2s var(--ease) .2s forwards;   /* eases in on load (pure CSS) so it never pops as a hard cut */
  /* feather all edges so the fixed rectangle never shows a straight boundary */
  -webkit-mask-image:radial-gradient(135% 115% at 50% 45%, #000 66%, transparent 100%);
          mask-image:radial-gradient(135% 115% at 50% 45%, #000 66%, transparent 100%);
}
@keyframes pfFadeIn{ from{ opacity:0; } to{ opacity:1; } }   /* shader controls faintness (uVisBase); CSS just fades it in */
@media (prefers-reduced-motion:reduce){
  .page-fluid{ animation:none; opacity:1; }
}
.static-fluid .page-fluid{ display:none; }
.static-fluid .hero-liquid{
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 86% at 50% 38%, rgba(250,247,240,.94) 0%, rgba(241,235,223,.72) 48%, rgba(138,86,38,.14) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 138'%3E%3Cpolygon points='0,0 80,138 160,0' fill='%23E3B878' fill-opacity='.34'/%3E%3Cpolygon points='0,138 80,0 160,138' fill='%238A5626' fill-opacity='.22'/%3E%3Cpath d='M0 0L80 138L160 0M0 138L80 0L160 138' fill='none' stroke='%234E3418' stroke-opacity='.12' stroke-width='1'/%3E%3C/svg%3E");
  background-size:cover, 160px 138px;
  background-position:center, center;
}
.static-fluid .about-maker{
  background-color:var(--night);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 138'%3E%3Cpolygon points='0,0 80,138 160,0' fill='%23E3B878' fill-opacity='.10'/%3E%3Cpolygon points='0,138 80,0 160,138' fill='%238A5626' fill-opacity='.12'/%3E%3Cpath d='M0 0L80 138L160 0M0 138L80 0L160 138' fill='none' stroke='%23E3B878' stroke-opacity='.12' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #1F160D, #0C0805);
  background-size:160px 138px, cover;
}
.static-fluid .foot--dark{
  background-color:#0C0805;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 138'%3E%3Cpolygon points='0,0 80,138 160,0' fill='%23E3B878' fill-opacity='.07'/%3E%3Cpolygon points='0,138 80,0 160,138' fill='%238A5626' fill-opacity='.08'/%3E%3Cpath d='M0 0L80 138L160 0M0 138L80 0L160 138' fill='none' stroke='%23E3B878' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
  background-size:160px 138px;
}
.hero > .banner, .hero > .hero-copy{ position:relative; z-index:1; }
.hero > .scrollcue{ z-index:1; }
/* ---- wide kumiko lattice banner (full-bleed, pans on scroll) ---- */
.banner{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(220px,36vh,380px); overflow:hidden;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  background:#403b34;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.banner-track{
  position:absolute; top:50%; left:50%; width:132%;
  transform:translate(-50%,-50%) translate3d(var(--pan,0px),0,0);
  will-change:transform;
}
.banner-img{ display:block; width:100%; height:auto; opacity:0; transition:opacity 1.15s var(--ease); }
.banner-img:not(:first-child){ position:absolute; inset:0; }   /* first stays in flow to size the track */
.banner-img.on{ opacity:1; }
.banner-label{
  position:absolute; left:max(20px,4vw); bottom:12px; z-index:2;
  font-family:var(--jp,inherit); font-size:11px; letter-spacing:.16em;
  color:#4a3822; text-shadow:0 1px 2px rgba(247,241,230,.85);
  opacity:.72; pointer-events:none; transition:opacity .5s var(--ease);
}
@media (max-width:680px){
  .banner{ height:clamp(150px,26vh,220px); } .banner-track{ width:200%; }
  .banner-label{ left:14px; bottom:9px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce){ .banner-img{ transition:none; } }

/* ---- (legacy) scroll-scrub hero ---- */
.hero-track{ position:relative; height:280vh; }        /* scroll length of the scrub */
.hero-stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:1fr auto; align-items:center;
  padding:96px var(--pad) 40px;
}
.hero-vrt{ position:absolute; right:max(20px,3vw); top:0; bottom:0; display:flex; align-items:center; font-size:13px; z-index:2; }
/* the figure IS the studio plate; the Blender frames scrub in it, poster shows until they load */
.hero-figure{
  position:relative; justify-self:center; align-self:center;
  width:min(86vmin,720px,64svh); height:min(86vmin,720px,64svh);
}
.hero-plate{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;
  border-radius:6px; box-shadow:0 44px 84px -44px rgba(60,42,22,.55);
}
.hero-copy{
  position:relative; text-align:center; z-index:2;
  max-width:min(940px,94vw);
  padding:clamp(22px,4vh,40px) clamp(30px,6vw,74px);
  background:radial-gradient(118% 132% at 50% 48%,
              rgba(241,235,223,.92) 0%, rgba(241,235,223,.68) 42%, rgba(241,235,223,0) 72%);
}
.hero-kicker{ font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--wood-ink); margin-bottom:8px; text-shadow:0 1px 10px rgba(241,235,223,.96); }
.hero-copy h1{ font-size:clamp(36px,6.4vw,74px); text-shadow:0 1px 20px rgba(241,235,223,.92); }
.hero-copy p{ margin-top:12px; font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); text-shadow:0 1px 10px rgba(241,235,223,.96); }
.hero-cta{ margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:13px; }
.scrollcue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; }
.scrollcue span{
  display:block; width:1px; height:50px; background:linear-gradient(var(--line-3), transparent);
  position:relative; overflow:hidden;
}
.scrollcue span::after{
  content:""; position:absolute; left:0; top:-50%; width:1px; height:50%; background:var(--wood);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(0); opacity:0;} 30%{opacity:1;} 100%{ transform:translateY(200%); opacity:0;} }
@media (max-width:680px){ .hero-vrt{ display:none; } .hero-track{ height:230vh; } }
/* short landscape phones: go side-by-side + cap the panel to the short axis so copy never overlaps it */
@media (max-height:560px) and (orientation:landscape){
  .hero-stage{ grid-template-columns:auto minmax(0,1fr); grid-template-rows:1fr; align-items:center;
    gap:clamp(18px,4vw,44px); padding:60px var(--pad) 22px; }
  .hero-figure{ height:100%; }
  .hero-canvas{ width:min(40svh,300px); height:min(40svh,300px); }
  .hero-copy{ text-align:left; }
  .hero-cta{ align-items:flex-start; }
  .scrollcue{ display:none; }
}

/* ---- feature band: full-bleed asanoha macro + copy (hero-07 layout, ported) ---- */
/* transparent (not opaque paper) so the fixed page-fluid passes through continuously —
   an opaque bg here chopped the faint fluid at the band's top edge = a hard seam.
   The body's paper (same colour) still shows behind the fluid, so the band looks identical. */
.asaband{ position:relative; width:100%; background:transparent; overflow:hidden; }
.asaband-media{
  position:relative; margin:0; width:100%;
  /* fade BOTH edges into the paper so the hero->image transition is a soft gradient, not a hard cut */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 94%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 94%);
}
.asaband-media img{
  display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; object-position:center;
}
.asaband-media::after{                 /* warm the neutral render toward the washi palette */
  content:""; position:absolute; inset:0; background:var(--wood);
  opacity:.10; mix-blend-mode:overlay; pointer-events:none;
}
.asaband-grid{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:clamp(20px,3vh,40px) var(--pad) clamp(56px,9vh,110px);
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(22px,3vw,40px); align-items:start;
}
.asaband-tag{ grid-column:1 / span 4; font-family:var(--sans); font-size:13px; line-height:1.6; color:var(--muted); letter-spacing:.02em; }
.asaband-body{ grid-column:7 / span 6; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,2vh,20px); }
.asaband-title{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,4vw,48px); line-height:1.08; letter-spacing:.008em; color:var(--ink); }
.asaband-desc{ font-family:var(--sans); font-weight:300; font-size:15px; line-height:1.75; color:var(--ink-2); max-width:54ch; }
@media (max-width:760px){
  .asaband-media img{ aspect-ratio:3/2; }
  .asaband-grid{ grid-template-columns:1fr; gap:14px; }
  .asaband-tag, .asaband-body{ grid-column:1 / -1; }
}

/* ---- work gallery: scroll-reveal masonry (in-view effect, ported) ---- */
.workgrid{ max-width:var(--maxw); margin:0 auto; padding:var(--sect) var(--pad); }
.workgrid-head{ text-align:center; margin-bottom:clamp(28px,5vh,56px); }
.workgrid-head h2{ margin-top:12px; }
/* spring-physics masonry (vanilla port of the 21st.dev react-spring component).
   Cells are absolutely positioned; masonry.js drives transform/width/height. */
.msy{ position:relative; width:100%; min-height:200px; }
.msy-cell{
  position:absolute; top:0; left:0; padding:clamp(7px,0.8vw,15px); box-sizing:border-box;
  opacity:0; transition:opacity .6s var(--ease);   /* JS sets per-cell transition-delay (trail) + will-change */
}
.msy.in .msy-cell{ opacity:1; }
.msy-card{
  position:relative; width:100%; height:100%; overflow:hidden; border-radius:8px;
  background:#E9E3D6;               /* placeholder tint while the lazy img decodes */
  box-shadow:0 22px 48px -30px rgba(60,42,22,.55);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.msy-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.msy-cell:hover{ z-index:3; }
.msy-card:hover{ transform:scale(1.06); box-shadow:0 32px 64px -28px rgba(38,26,12,.62); }
.msy-cap{
  position:absolute; left:0; right:0; bottom:0; padding:30px 14px 11px;
  font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#F3ECDE; text-shadow:0 1px 10px rgba(0,0,0,.55);
  background:linear-gradient(to top, rgba(22,15,8,.66), rgba(22,15,8,.10) 60%, rgba(22,15,8,0));
}
@media (prefers-reduced-motion:reduce){
  .msy-cell{ opacity:1; transition:none; }
  .msy-card{ transition:none; }
}

/* ---- statement ---- */
.statement{
  position:relative; max-width:var(--maxw); margin:0 auto; padding:var(--sect) var(--pad); text-align:center;
}
.statement p{
  font-family:var(--serif); font-weight:300; font-size:clamp(24px,3.6vw,42px); line-height:1.32;
  color:var(--ink); max-width:19em; margin:0 auto;
}
.statement-mark{
  position:absolute; inset:0; display:grid; place-items:center; z-index:-1;
  font-family:var(--jp); font-size:clamp(220px,40vw,460px); color:rgba(138,86,38,.05);
  pointer-events:none;
}

/* ---- split sections ---- */
.split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,88px);
  align-items:center; max-width:var(--maxw); margin:0 auto; padding:var(--sect) var(--pad);
}
.split.reverse{ grid-template-columns:.95fr 1.05fr; }
.split.reverse .split-media{ order:2; }
.split-media{ margin:0; position:relative; }
.split-media img{
  width:100%; height:auto; border-radius:3px; border:1px solid var(--line);
  box-shadow:0 40px 70px -34px rgba(60,42,22,.5);
}
/* transparent-bg renders (the white 3D panel) sit on a soft studio plate so the white reads */
.split-media.float{
  position:relative; display:grid; place-items:center; padding:8% 7%;
  background:radial-gradient(120% 120% at 50% 36%, #f3ecdd 0%, #e7dcc7 68%, #ddd0b8 100%);
  border:1px solid var(--line); border-radius:5px; box-shadow:0 34px 64px -40px rgba(60,42,22,.45);
}
.split-media.float img{ width:88%; height:auto; border:0; box-shadow:none; border-radius:0; filter:drop-shadow(0 16px 22px rgba(74,52,24,.26)); }
.split-media.float figcaption{ text-align:center; }
.split-media figcaption{
  margin-top:14px; font-family:var(--jp); font-size:12px; letter-spacing:.26em; color:var(--muted);
}
.split-text h2{ margin:14px 0 22px; }
.split-text p{ color:var(--ink-2); font-size:clamp(15px,1.3vw,17px); max-width:34ch; margin-bottom:18px; }
@media (max-width:820px){
  .split, .split.reverse{ grid-template-columns:1fr; gap:30px; }
  .split.reverse .split-media{ order:0; }
  .split-text p{ max-width:60ch; }
}

/* ---- the one dark inset: "trace the light" ---- */
.darklight{
  position:relative; margin:var(--sect) 0; padding:clamp(56px,9vh,110px) var(--pad);
  background:radial-gradient(120% 130% at 50% 30%, var(--night-2) 0%, var(--night) 60%, #100b06 100%);
  color:#F1E6D2; text-align:center; overflow:hidden;
  border-top:1px solid rgba(227,184,120,.14); border-bottom:1px solid rgba(227,184,120,.14);
}
.darklight .kicker{ color:#D6A86A; }
.darklight h2{ color:#F3E9D6; margin:14px 0 12px; }
.darklight p{ color:#C6B291; font-size:14px; letter-spacing:.02em; max-width:40ch; margin:0 auto; }
.darklight em{ color:var(--glow); }
.lightbox{
  position:relative; margin:clamp(30px,5vh,56px) auto 0; width:min(720px,92%); aspect-ratio:1;
  border:1px solid rgba(227,184,120,.18); border-radius:4px; overflow:hidden; cursor:crosshair;
  background:#0c0805;
  --mx:50%; --my:42%;
}
.lightbox img{ width:100%; height:100%; object-fit:cover; opacity:.92; }
.lightbox .spot{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(320px 320px at var(--mx) var(--my), rgba(227,184,120,.5), rgba(227,184,120,0) 70%);
  transition:background .06s linear;
}
.lightbox .shade{           /* gentle cursor-following vignette — panel stays readable at rest */
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 130% at var(--mx) var(--my), rgba(12,8,5,0) 44%, rgba(12,8,5,.42) 88%);
}
@media (prefers-reduced-motion: reduce){ .lightbox{ cursor:default; } }

/* ---- featured boxes teaser (home) ---- */
/* ---- jig listings (replaces the old "precision you can print" split) ---- */
.jigshop{ max-width:var(--maxw); margin:0 auto; padding:var(--sect) var(--pad); }
.jigshop-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:clamp(28px,5vh,52px); }
.jigshop-head h2{ margin:12px 0 14px; }
.jigshop-lead{ font-family:var(--sans); font-weight:300; font-size:15px; line-height:1.7; color:var(--ink-2); max-width:52ch; }
.jigshop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.6vw,24px); }
.jigcard{ margin:0; }
.jigcard a{ display:block; text-decoration:none; color:inherit; }
.jigcard-media{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:8px; background:#ECE7DD;
  box-shadow:0 22px 44px -30px rgba(60,42,22,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.jigcard a:hover .jigcard-media{ transform:translateY(-5px); box-shadow:0 34px 60px -30px rgba(38,26,12,.6); }
.jigcard-media img{
  width:100%; height:100%; object-fit:contain; box-sizing:border-box; padding:3%; display:block;
  mix-blend-mode:multiply; transition:transform .55s var(--ease);
}
.jigcard a:hover .jigcard-media img{ transform:scale(1.025); }
.jigcard-badge{
  position:absolute; left:12px; bottom:12px; font-family:var(--sans); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#F3ECDE; background:rgba(34,25,15,.72); padding:5px 10px; border-radius:999px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.jigcard-info{ margin-top:13px; }
.jigcard-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.jigcard-row h3{ font-family:var(--serif); font-weight:500; font-size:19px; letter-spacing:.005em; color:var(--ink); margin:0; }
.jigcard-price{ font-family:var(--sans); font-size:14px; color:var(--wood-ink); white-space:nowrap; }
.jigcard-price em{ font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:3px; }
.jigcard-jp{ display:block; margin-top:4px; font-family:var(--jp); font-size:12.5px; color:var(--muted); letter-spacing:.04em; }
@media (max-width:980px){ .jigshop-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .jigshop-grid{ grid-template-columns:1fr; } }

.showcase{ max-width:var(--maxw); margin:0 auto; padding:var(--sect) var(--pad); }
.showcase-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,5vh,52px); }
.showcase-head h2{ margin-top:12px; }
.showcase-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(16px,2vw,26px); }
.showcase-grid figure{ margin:0; }
.showcase-grid .sc-media{
  aspect-ratio:1; background:var(--card); border-radius:4px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 26px 46px -34px rgba(60,42,22,.5); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.showcase-grid a:hover .sc-media{ transform:translateY(-5px); box-shadow:0 34px 56px -32px rgba(60,42,22,.6); }
.showcase-grid img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.showcase-grid figcaption{ margin-top:13px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.sc-name{ font-family:var(--serif); font-size:19px; color:var(--ink); }
.sc-jp{ font-family:var(--jp); font-size:11px; letter-spacing:.2em; color:var(--muted); }
@media (max-width:540px){ .showcase-grid{ grid-template-columns:1fr; } }

/* ---- tools ---- */
.tools{ max-width:var(--maxw); margin:0 auto; padding:var(--sect) var(--pad); }
.tools-head{ text-align:center; margin-bottom:clamp(34px,6vh,60px); }
.tools-head h2{ margin-top:12px; }
.tools-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,26px); }
.tool{
  position:relative; display:block; padding:clamp(28px,3.4vw,46px);
  border:1px solid var(--line); border-radius:5px; background:var(--card);
  transition:border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow:0 22px 40px -34px rgba(60,42,22,.45);
}
.tool:hover{ border-color:var(--line-2); transform:translateY(-4px); box-shadow:0 32px 52px -32px rgba(60,42,22,.55); }
.tool-num{ font-family:var(--serif); font-size:14px; color:var(--wood); letter-spacing:.2em; }
.tool h3{ margin:10px 0 14px; }
.tool p{ color:var(--ink-2); font-size:15px; max-width:38ch; margin-bottom:22px; }
.tool-go{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--wood-ink); }
.tool-media{ aspect-ratio:16/10; border-radius:4px; overflow:hidden; border:1px solid var(--line); background:var(--paper-2); margin-bottom:24px; }
.tool-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:720px){ .tools-grid{ grid-template-columns:1fr; } }

/* ---- about the maker: the practical reason behind the workshop ---- */
.about-maker{
  position:relative; overflow:hidden; scroll-margin-top:76px;
  color:#F1EBDF; background:transparent;
  padding:clamp(150px,22vh,268px) var(--pad);
}
/* the About section has no field of its own — the ONE page-wide #bgFluid shows through
   its transparent background and its triangles have recoloured to night by this point. */
.about-maker-in{
  position:relative; width:min(1200px,100%); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(56px,8vw,128px); align-items:start;
}
.about-maker-head,.about-maker-copy{ position:relative; z-index:1; }
.about-maker .kicker{ color:#C59A63; }
.about-maker h2{
  margin-top:18px; max-width:10ch; color:#F1EBDF;
  font-size:clamp(38px,5vw,68px); line-height:.98;
}
.about-maker h2 em{ color:#E3B878; }
.about-maker-copy{
  padding-top:32px; max-width:650px;
  border-top:1px solid rgba(227,184,120,.28);
}
.about-maker-copy p{
  margin:0; color:#CFC0A5; font-size:clamp(15px,1.25vw,18px);
  line-height:1.8; max-width:62ch;
}
.about-maker-copy p + p{ margin-top:22px; }
.about-maker-copy .about-maker-lede{
  color:#F1EBDF; font-family:var(--serif); font-size:clamp(21px,2vw,29px);
  line-height:1.45; letter-spacing:.005em;
}
.about-maker-support{
  display:flex; flex-direction:column; gap:8px; margin-top:36px; padding-top:24px;
  border-top:1px solid rgba(227,184,120,.18);
}
.about-maker-support span{
  color:#9F8C70; font-size:10px; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
}
.about-maker-support strong{
  color:#E3B878; font-family:var(--serif); font-size:clamp(18px,1.8vw,24px);
  font-weight:400; line-height:1.35;
}
.about-maker-mark{
  position:absolute; right:-22px; bottom:-76px; z-index:0;
  font-family:var(--jp); font-size:clamp(230px,30vw,430px); line-height:1;
  color:rgba(227,184,120,.045); pointer-events:none; user-select:none;
}
@media (max-width:780px){
  .about-maker-in{ grid-template-columns:1fr; gap:42px; }
  .about-maker h2{ max-width:12ch; }
  .about-maker-copy{ padding-top:26px; }
  .about-maker-mark{ right:-44px; bottom:-36px; font-size:240px; }
}

/* ---- cta ---- */
.cta{
  position:relative; text-align:center; max-width:var(--maxw); margin:0 auto;
  padding:var(--sect) var(--pad) calc(var(--sect) + 12px);
}
.cta-vrt{ position:absolute; left:max(20px,3vw); top:0; bottom:0; display:flex; align-items:center; font-size:13px; }
.cta h2{ margin:14px 0 18px; }
.cta p{ color:var(--ink-2); max-width:42ch; margin:0 auto 34px; }
@media (max-width:760px){ .hero-vrt, .cta-vrt{ display:none; } }

/* ---- footer ---- */
.foot{
  border-top:1px solid var(--line); background:var(--paper-2); padding:38px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.foot-brand{ font-family:var(--jp); font-size:13px; color:var(--ink-2); letter-spacing:.06em; }
.foot-brand .brand-jp{ margin-right:8px; }
.foot-social{ display:flex; align-items:center; gap:clamp(14px,2vw,24px); flex-wrap:wrap; }
.foot-social a{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
  border-bottom:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease);
}
.foot-social a:hover{ color:var(--wood); border-color:var(--line-2); }
.foot-meta{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
/* homepage footer sits on the dark bottom of the field — no white strip */
.foot--dark{ background:transparent; border-top-color:rgba(227,184,120,.20); }
.foot--dark .foot-brand{ color:#CFC0A5; }
.foot--dark .foot-brand .brand-jp{ color:#E3B878; }
.foot--dark .foot-social a{ color:#CFC0A5; }
.foot--dark .foot-social a:hover{ color:#F1EBDF; border-color:rgba(227,184,120,.45); }
.foot--dark .foot-meta{ color:#A08D6E; }
@media (max-width:760px){ .foot{ flex-direction:column; align-items:flex-start; gap:12px; } }

/* ---- mobile shipping pass -------------------------------------------------
   Phones use a static kumiko field instead of two simultaneous WebGL fluid
   simulations. This keeps the palette and visual identity while making scroll
   and touch interaction predictable on mobile GPUs. */
@media (max-width:760px){
  :root{
    --pad:clamp(18px,5vw,24px);
    --sect:clamp(64px,9vh,82px);
  }
  body{ overflow-x:hidden; }
  .nav{ padding:14px var(--pad); }
  .nav.scrolled{ padding-top:9px; padding-bottom:9px; }
  .brand{ gap:9px; min-width:0; }
  .brand-jp{ font-size:17px; }
  .brand-en{ font-size:9px; letter-spacing:.22em; white-space:nowrap; }

  .hero{
    min-height:100dvh; overflow:hidden;
    padding:88px var(--pad) 70px;
  }
  .hero-liquid{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  }
  .hero-copy{
    width:100%; max-width:350px;
    padding:28px 20px 30px;
    border:1px solid rgba(78,52,24,.13); border-radius:12px;
    background:rgba(247,243,234,.86);
    box-shadow:0 24px 64px -38px rgba(36,29,20,.58);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .hero-kicker{ margin-bottom:10px; font-size:10px; letter-spacing:.28em; line-height:1.5; }
  .hero-copy h1{ font-size:clamp(40px,12vw,52px); line-height:1.02; }
  .hero-copy p{ margin-top:15px; font-size:11px; line-height:1.7; letter-spacing:.20em; }
  .hero-cta{ margin-top:24px; gap:8px; }
  .hero .btn{ width:min(100%,260px); min-height:48px; justify-content:center; padding:13px 20px; }
  .hero .qlink{ justify-content:center; }
  .scrollcue{ bottom:16px; }
  .scrollcue span{ height:34px; }

  .asaband-grid{ padding-top:18px; padding-bottom:56px; }
  .asaband-tag{ font-size:12px; }
  .asaband-desc{ font-size:16px; line-height:1.65; }
  .statement p{ font-size:clamp(27px,8vw,34px); }
  .workgrid-head{ margin-bottom:24px; }
  .msy-cell{ padding:5px; }
  .msy-card{ border-radius:6px; }
  .msy-cap{ padding:24px 9px 8px; font-size:9px; letter-spacing:.10em; }

  .jigshop-head{ gap:14px; margin-bottom:26px; }
  .jigshop-head .qlink{ margin-top:0; }
  .jigshop-lead{ font-size:16px; line-height:1.65; }
  .jigshop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 12px; }
  .jigcard-media{ aspect-ratio:1; border-radius:6px; }
  .jigcard-info{ margin-top:10px; }
  .jigcard-row{ flex-direction:column; align-items:flex-start; gap:2px; }
  .jigcard-row h3{ font-size:17px; line-height:1.12; }
  .jigcard-price{ font-size:13px; }
  .jigcard-jp{ font-size:10px; line-height:1.45; }
  .jigcard-badge{ left:8px; bottom:8px; font-size:8px; padding:4px 7px; }

  .tool{ padding:24px; }
  .tool p{ font-size:16px; line-height:1.65; }
  .showcase-grid{ gap:24px; }
  .cta{ padding-bottom:88px; }
  .cta p{ font-size:16px; line-height:1.65; }
  .about-maker{ padding:92px var(--pad) 84px; }
  .about-maker-in{ gap:32px; }
  .about-maker h2{ font-size:clamp(38px,11vw,50px); }
  .about-maker-copy{ padding-top:22px; }
  .about-maker-copy p{ font-size:16px; line-height:1.7; }
  .about-maker-copy p + p{ margin-top:18px; }
  .about-maker-support{ margin-top:28px; padding-top:20px; }
  .foot{ padding-top:30px; padding-bottom:max(30px,env(safe-area-inset-bottom)); }
  .foot-social a{ min-height:44px; display:inline-flex; align-items:center; }
}

@media (hover:none), (pointer:coarse){
  .msy-card:hover,
  .jigcard a:hover .jigcard-media,
  .jigcard a:hover .jigcard-media img,
  .showcase-grid a:hover .sc-media,
  .tool:hover{ transform:none; }
}

@media (max-height:560px) and (orientation:landscape){
  .hero{
    min-height:100dvh; overflow:hidden;
    padding:64px var(--pad) 24px;
  }
  .hero-copy{
    width:min(540px,88vw); max-width:none;
    padding:16px 24px 18px;
    border:1px solid rgba(78,52,24,.13); border-radius:10px;
    background:rgba(247,243,234,.88);
    box-shadow:0 20px 54px -34px rgba(36,29,20,.58);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .hero-kicker{ margin-bottom:4px; font-size:9px; }
  .hero-copy h1{ font-size:38px; }
  .hero-copy p{ margin-top:5px; font-size:10px; line-height:1.5; letter-spacing:.18em; }
  .hero-cta{ margin-top:12px; flex-direction:row; justify-content:center; gap:18px; }
  .hero .btn{ min-height:44px; padding:10px 20px; }
  .scrollcue{ display:none; }
}

/* =====================================================================
   SHOP
   ===================================================================== */
.shop-hero{
  position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(130px,20vh,210px) var(--pad) clamp(40px,7vh,72px);
  text-align:center; overflow:hidden;
}
.shop-hero .hero-mark{
  position:absolute; top:8%; left:50%; transform:translateX(-50%); z-index:-1;
  font-family:var(--jp); font-size:clamp(200px,34vw,380px); color:rgba(138,86,38,.05); pointer-events:none;
}
.shop-hero h1{ font-size:clamp(38px,6.2vw,72px); margin:0 0 18px; }
.shop-hero .lede{ max-width:56ch; margin:0 auto; }

.cat{ max-width:var(--maxw); margin:0 auto; padding:clamp(48px,8vh,96px) var(--pad); border-top:1px solid var(--line); }
.cat:first-of-type{ border-top:0; }
.cat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(26px,4vh,44px); }
.cat-head h2{ margin-top:10px; }
.cat-head .note{ color:var(--muted); font-size:13px; max-width:32ch; letter-spacing:.02em; }

/* flagship feature row */
.feature{ margin:0 0 30px; }
.feature-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  box-shadow:0 32px 60px -40px rgba(60,42,22,.5);
}
.feature-media{ position:relative; background:var(--card); }
.feature-media img{ width:100%; aspect-ratio:1; object-fit:cover; mix-blend-mode:multiply; }
.feature-text{ padding:clamp(24px,3.4vw,52px) clamp(24px,3.4vw,52px) clamp(24px,3.4vw,52px) 0; }
.feature-text h2{ margin:10px 0 16px; }
.feature-text p{ color:var(--ink-2); font-size:16px; margin-bottom:14px; max-width:42ch; }
.feature-text .spec{ font-family:var(--jp); font-size:12px; letter-spacing:.14em; color:var(--muted); margin-bottom:20px; }
@media (max-width:860px){
  .feature-inner{ grid-template-columns:1fr; }
  .feature-text{ padding:0 clamp(22px,5vw,34px) clamp(30px,5vw,40px); }
}

/* product grids */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:clamp(16px,2vw,26px); }
.grid.boxes{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.grid.two{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.grid.tidy{ display:flex; flex-wrap:wrap; justify-content:center; }   /* sparse rows: truly center 1–3 cards */
.grid.tidy > .card{ flex:1 1 300px; max-width:360px; }

.card{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:6px; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  box-shadow:0 22px 40px -36px rgba(60,42,22,.45);
}
.card:hover{ transform:translateY(-5px); box-shadow:0 34px 56px -34px rgba(60,42,22,.55); border-color:var(--line-2); }
.card-media{ position:relative; display:block; aspect-ratio:4/3; background:var(--card); overflow:hidden; }
.card-media.square{ aspect-ratio:1; }
.card-media.tall{ aspect-ratio:1; }
.card-media.contain{ display:grid; place-items:center; padding:14%; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card-media.contain img{ object-fit:contain; }
.card-media.blend img{ mix-blend-mode:multiply; }   /* box photos on #f8f7f3 → seamless */
.card:hover .card-media img{ transform:scale(1.03); }
.badge{
  position:absolute; top:12px; left:12px; z-index:2; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:#F6EFE2; background:var(--wood); padding:5px 11px; border-radius:999px;
}
.badge.free{ background:#3E6B4E; }
.badge.soft{ background:rgba(248,247,243,.92); color:var(--wood-ink); border:1px solid var(--line-2); }

.card-body{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; }
.card-jp{ font-family:var(--jp); font-size:11px; letter-spacing:.16em; color:var(--muted); }
.card-body h3{ margin:7px 0 10px; }
.card-body p{ color:var(--ink-2); font-size:14px; line-height:1.6; margin-bottom:14px; flex:1; }
.spec{ font-family:var(--jp); font-size:11.5px; letter-spacing:.1em; color:var(--muted); margin-bottom:16px; }

.variant{ margin:2px 0 16px; }
.variant label{ display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.variant select{
  width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--card-2);
  border:1px solid var(--line-2); border-radius:4px; padding:10px 12px; cursor:pointer;
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238A7C68' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.variant select:focus-visible{ border-color:var(--wood); }

.card-foot, .buys{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:auto; }
.price{ font-family:var(--serif); font-size:26px; color:var(--ink); line-height:1; }
.price .from{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.price .two{ display:block; font-family:var(--sans); font-size:11px; letter-spacing:.02em; text-transform:none; color:var(--muted); margin-top:5px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em; font:inherit;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
  color:var(--wood-ink); background:transparent; border:1px solid var(--line-2); border-radius:999px; padding:12px 18px; min-height:44px;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.pill:hover{ border-color:var(--wood); background:rgba(138,86,38,.06); }
.pill.solid{ background:var(--wood); border-color:var(--wood); color:#F6EFE2; }
.pill.solid:hover{ background:var(--wood-deep); border-color:var(--wood-deep); color:#fff; }
.pill.ghost{ color:var(--ink-2); }

.shop-note{
  max-width:var(--maxw); margin:clamp(40px,7vh,80px) auto 0; padding:clamp(28px,4vw,44px) var(--pad);
}
.shop-note > div{
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px; padding:clamp(24px,3vw,36px);
  color:var(--ink-2); font-size:14px; line-height:1.75; max-width:74ch; margin:0 auto;
}
.shop-note strong{ color:var(--ink); font-weight:500; }
.shop-note a{ color:var(--wood-ink); border-bottom:1px solid var(--line-2); }
.shop-note a:hover{ color:var(--wood); }

/* =====================================================================
   scroll reveal
   ===================================================================== */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scrollcue span::after{ animation:none; }
}

/* =====================================================================
   cart.js — keep its elegant DARK drawer as a "jewel box" overlay.
   Scope dark-on-amber variable values to the overlay elements only.
   ===================================================================== */
.kw-drawer, .kw-toast{
  --fg:#F2EADA; --fg-dim:#CFC0A5; --muted:#A08D6E;
  --amber:#E3B878; --amber-bright:#F0CF97;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --line:rgba(227,184,120,.16); --line-2:rgba(227,184,120,.30); --bg-3:#241D14;
}
.nav .kw-badge{ color:#F6EFE2; }   /* legible count on the wood badge in the light nav */