/* ============================================================
   Kimmy Cakes — token system + composition
   Concept: CONCEPT.md. Positioning: full dessert house, cheesecake as hook.
   Display: Norican (Campbell's pick) · Text: Trocchi
   Laws honoured: no giant type (display ceiling 40px) · host owns the axis ·
   no eyebrow above H1 · no emoji · no reflex card grid · motion verb = SETTLE
   ============================================================ */

:root{
  /* --- her real mark, pipetted (g28-palette on logo) --- */
  --kc-field:      #fddbe2;   /* soft pink field */
  --kc-pinkwhite:  #f5edf0;
  --kc-caramel:    #d4a996;   /* cheesecake caramel */
  --kc-rose:       #a66472;   /* the wordmark script — pipetted from her real mark.
                                 4.10:1 on cream: correct for the script at display
                                 size (large-text bar is 3:1), never for body copy. */
  --kc-rose-text:  #9c5a68;   /* 4.72:1 — the same rose taken one step down so it can
                                 carry inline links at reading size. */
  --kc-espresso:   #432524;   /* deepest brown */

  /* --- neutrals built FROM the brand hue, never flat gray --- */
  --kc-cream:      #faf4ee;   /* dominant field, never flat white */
  --kc-cream-deep: #f3e9df;
  --kc-ink:        #33201e;
  --kc-ink-soft:   #6b5450;   /* 6.39:1 on cream */
  --kc-ink-faint:  #7a615c;   /* 5.21:1 on cream. The quiet voice of the case —
                                 sold out, crust notes, "first come first served".
                                 Was #957c77 (3.54:1) and failed the wall on the
                                 disabled "Gone" control, 2026-07-30. Quiet is a
                                 tone, not an excuse to be unreadable. */
  --kc-line:       rgba(67,37,36,.15);
  --kc-line-soft:  rgba(67,37,36,.08);

  /* --- the scarce accent: berry red from the strawberry in her own logo.
         SPENT ONLY on the case's live state. Nothing else. --- */
  --kc-berry:      #b4232f;

  /* type */
  --kc-script: 'Norican', cursive;
  --kc-text:   'Trocchi', Georgia, serif;

  /* display ceiling — Campbell's standing law: scale is never the idea */
  --kc-d1: 38px;   /* largest display on the site */
  --kc-d2: 27px;
  --kc-d3: 21px;
  --kc-body: 17px;
  --kc-small: 14.5px;
  --kc-tiny: 12.5px;

  --kc-gut: 26px;
  --kc-max: 1140px;
  --kc-read: 62ch;

  /* radius ramp (one ramp, no ad-hoc radii) */
  --kc-r-btn: 10px;
  --kc-r-box: 16px;
  --kc-r-plate: 20px;

  --kc-shadow-set: 0 18px 34px -20px rgba(67,37,36,.42), 0 3px 8px -4px rgba(67,37,36,.22);
  --kc-shadow-lift: 0 26px 50px -22px rgba(67,37,36,.5), 0 4px 10px -4px rgba(67,37,36,.26);

  --kc-ease-settle: cubic-bezier(.16,.84,.28,1);
}

*{box-sizing:border-box}
/* The canvas wears the FOOTER's colour, not the page's. iOS rubber-band
   overscroll paints the canvas, so a cream canvas under an espresso footer
   shows a band of dead light at the bottom of every scroll — the exact defect
   that escaped on earlier builds. Top overscroll matches the dark utility
   strip, so both ends read deliberate. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--kc-espresso)}

body{
  margin:0;
  background-color:var(--kc-cream);
  background-image:url('../assets/brand/cloth.png');
  background-size:220px 220px;
  color:var(--kc-ink);
  font-family:var(--kc-text);
  font-size:var(--kc-body);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* light falls from the upper left, like her window shots */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 12% -8%, rgba(255,255,255,.72), rgba(255,255,255,0) 62%);
}
main,header,footer{position:relative;z-index:1}

h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.12}
p{margin:0 0 1em}
a{color:var(--kc-rose-text)}
img{max-width:100%;display:block}

.wrap{max-width:var(--kc-max);margin:0 auto;padding:0 var(--kc-gut)}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}

/* THE HOST OWNS THE AXIS — page axis is CENTRE.
   Left is EARNED by reading matter at width, inside a centred block,
   and un-earns itself on a phone. */
.axis-centre{text-align:center}
.earn-left{text-align:left}
@media(max-width:760px){ .earn-left{text-align:center} }

/* ---------- script + display voices ---------- */
.script{font-family:var(--kc-script);font-weight:400;letter-spacing:.005em}
.d1{font-size:var(--kc-d1)}
.d2{font-size:var(--kc-d2)}
.d3{font-size:var(--kc-d3)}
.lead{font-size:19px;line-height:1.55;color:var(--kc-ink-soft)}
.small{font-size:var(--kc-small)}
.tiny{font-size:var(--kc-tiny)}
.faint{color:var(--kc-ink-faint)}
.rose{color:var(--kc-rose)}

/* ---------- motion law: SETTLE (weighted arrival, comes to rest) ---------- */
@keyframes kc-settle{
  from{opacity:0;transform:translate3d(0,16px,0) scale(.985)}
  to  {opacity:1;transform:none}
}
.settle{animation:kc-settle .62s var(--kc-ease-settle) both}
.settle-2{animation-delay:.08s}
.settle-3{animation-delay:.16s}
.settle-4{animation-delay:.24s}
.settle-5{animation-delay:.32s}
/* Content is visible by DEFAULT. Only once JS proves it can drive the reveal
   does it hide, so a failed observer or no-JS never leaves a blank section. */
html.kc-reveal [data-reveal]{opacity:0}
html.kc-reveal [data-reveal].in{animation:kc-settle .68s var(--kc-ease-settle) both}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1}
  html{scroll-behavior:auto}
}

/* ---------- utility strip (provisional-build honesty; one line to remove) ---------- */
.kc-preview{
  background:var(--kc-espresso);color:#f0e2de;
  font-size:var(--kc-tiny);letter-spacing:.02em;
}
.kc-preview .wrap{display:flex;gap:14px;justify-content:center;align-items:center;padding-top:9px;padding-bottom:9px;flex-wrap:wrap;text-align:center}
.kc-preview b{color:#fff}

/* ---------- masthead ---------- */
.mast{padding:26px 0 6px}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mast-mark{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.mast-mark img{width:62px;height:62px}
.mast-mark span{font-family:var(--kc-script);font-size:25px;color:var(--kc-rose);line-height:1}
/* chrome keeps its functional spread */
.nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav a{
  font-family:var(--kc-text);font-size:15px;text-decoration:none;color:var(--kc-ink-soft);
  padding:8px 12px;border-radius:var(--kc-r-btn);transition:background .18s,color .18s;
  /* the 48px law — a thumb on a phone, not a cursor on a desktop */
  display:inline-flex;align-items:center;min-height:48px;
}
.nav a:hover{background:var(--kc-pinkwhite);color:var(--kc-espresso)}
.nav a:focus-visible{outline:2px solid var(--kc-rose);outline-offset:2px}

/* buttons — contents always centred (his law) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:9px;
  font-family:var(--kc-text);font-size:16px;line-height:1;
  padding:15px 26px;border-radius:var(--kc-r-btn);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .2s var(--kc-ease-settle),box-shadow .2s,background .2s;
}
.btn-primary{background:var(--kc-espresso);color:#fdf6f2;box-shadow:var(--kc-shadow-set)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--kc-shadow-lift)}
.btn-ghost{background:transparent;color:var(--kc-espresso);border-color:var(--kc-line)}
.btn-ghost:hover{background:var(--kc-pinkwhite)}
.btn:focus-visible{outline:2px solid var(--kc-rose);outline-offset:3px}
/* the platform is the glyph, never the word (a gray28 law) — the button still
   says what it DOES, the mark says where it goes, the name rides aria-label */
.btn-glyph svg{width:17px;height:17px;flex:0 0 auto;fill:currentColor}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ============================================================
   1. ARRIVAL — the cloth. Plain thing leads at reading size.
   ============================================================ */
.arrival{padding:34px 0 54px}
.arrival-top{max-width:720px;margin:0 auto;text-align:center}
.arrival h1{font-size:var(--kc-d1);letter-spacing:-.01em;margin-bottom:14px}
.arrival h1 .script{color:var(--kc-rose);font-size:1.06em}
.arrival .lead{margin:0 auto 22px;max-width:56ch}
.arrival-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* the hero photograph: hung with weight, sitting ON the cloth,
   the word STRUCK ACROSS its edge (material event, not a floating image) */
.hero-hang{position:relative;margin:44px auto 0;max-width:940px}
.hero-frame{
  position:relative;border-radius:var(--kc-r-plate);overflow:hidden;
  box-shadow:var(--kc-shadow-lift);
  border:7px solid #fff;
}
.hero-frame img{width:100%;height:clamp(300px,46vw,470px);object-fit:cover}
.hero-strike{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:-19px;z-index:2;
  font-family:var(--kc-script);font-size:var(--kc-d2);color:var(--kc-espresso);
  background:var(--kc-cream);border:1px solid var(--kc-line);
  padding:9px 22px;border-radius:999px;white-space:nowrap;
  box-shadow:var(--kc-shadow-set);
}

/* ============================================================
   2. THE CASE — the signature. Live, honest inventory.
   Shelves, not a card grid. data-g28-earned.
   ============================================================ */
.case{padding:64px 0 60px;border-top:1px solid var(--kc-line-soft)}
.case-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.case-head h2{font-size:var(--kc-d2)}
.case-head h2 .script{color:var(--kc-rose)}
.case-status{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--kc-small);color:var(--kc-ink-soft);
  border:1px solid var(--kc-line);border-radius:999px;padding:8px 15px;background:rgba(255,255,255,.6);
}
.case-status .dot{width:9px;height:9px;border-radius:50%;background:#2e7d4f;flex:0 0 auto}
.case-status[data-open="false"] .dot{background:var(--kc-ink-faint)}
.case-sub{font-size:var(--kc-small);color:var(--kc-ink-faint);margin:2px 0 26px}

/* the glass shelf */
.shelf{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.5));
  border:1px solid var(--kc-line);border-radius:var(--kc-r-box);
  padding:16px;margin-bottom:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--kc-shadow-set);
}
.shelf-label{
  font-size:var(--kc-tiny);letter-spacing:.13em;text-transform:uppercase;
  color:var(--kc-ink-faint);margin:0 4px 12px;display:flex;justify-content:space-between;gap:12px;
}
/* the lane needs to LOOK like a lane, or a cut-off plate reads as a bug */
.shelf-scroll{position:relative}
.shelf-scroll::after{
  content:"";position:absolute;top:0;right:-1px;bottom:9px;width:56px;pointer-events:none;
  background:linear-gradient(90deg, rgba(250,244,238,0), rgba(250,244,238,.92));
  border-radius:0 var(--kc-r-box) var(--kc-r-box) 0;
  opacity:1;transition:opacity .25s;
}
.shelf-scroll[data-end="true"]::after{opacity:0}
.shelf-row{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 9px;scroll-snap-type:x proximity;scrollbar-width:thin}
.shelf-row::-webkit-scrollbar{height:7px}
.shelf-row::-webkit-scrollbar-track{background:rgba(67,37,36,.07);border-radius:99px}
.shelf-row::-webkit-scrollbar-thumb{background:var(--kc-caramel);border-radius:99px}
.plate-body>.state{align-self:center}

/* a plate = one real item, varying width so it never reads as a card row */
.plate{
  flex:0 0 auto;width:210px;scroll-snap-align:start;
  background:var(--kc-cream);border:1px solid var(--kc-line);
  border-radius:var(--kc-r-plate);overflow:hidden;
  display:flex;flex-direction:column;text-align:center;
  transition:transform .24s var(--kc-ease-settle),box-shadow .24s;
}
.plate.w-wide{width:268px}
.plate:hover{transform:translateY(-3px);box-shadow:var(--kc-shadow-set)}
.plate img{width:100%;height:150px;object-fit:cover}
.plate-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.plate-name{font-size:16.5px;line-height:1.25;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.plate-meta{font-size:var(--kc-tiny);color:var(--kc-ink-faint);min-height:2.4em}
.plate-foot{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px}
.plate-price{font-size:16px;color:var(--kc-espresso)}

/* live state — the ONLY place the berry accent is spent */
.state{font-size:var(--kc-tiny);letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px}
.state-ready{color:#2e7d4f}
.state-low{color:var(--kc-berry);font-weight:700}
.state-out{color:var(--kc-ink-faint)}
/* Sold out goes QUIET, not illegible. The hush belongs to the photograph —
   a blanket opacity on the plate dragged the words down with it and put the
   disabled control at 3.54:1 (wall, 2026-07-30). The picture fades; the
   sentence telling you it went at 1:37pm stays readable. */
.plate[data-state="out"]{opacity:1;background:var(--kc-cream-deep)}
.plate[data-state="out"] img{filter:grayscale(.92) contrast(.9);opacity:.58}
.plate[data-state="out"]:hover{transform:none;box-shadow:none}
.take{
  font-family:var(--kc-text);font-size:14.5px;
  padding:9px 16px;border-radius:var(--kc-r-btn);
  background:var(--kc-espresso);color:#fdf6f2;border:1px solid transparent;cursor:pointer;
  transition:transform .18s var(--kc-ease-settle);
  /* the 48px law — taking a slice is the whole point of the case, and it is
     done with a thumb on a phone standing in front of the counter */
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
}
.take:hover{transform:translateY(-2px)}
.take:focus-visible{outline:2px solid var(--kc-rose);outline-offset:2px}
.take[disabled]{background:transparent;color:var(--kc-ink-faint);border-color:var(--kc-line);cursor:not-allowed;transform:none}
.case-foot{
  margin-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:var(--kc-small);color:var(--kc-ink-soft);align-items:center;
}

/* ============================================================
   3. THE RANGE — everything she makes. A ledger, never cards.
   This is where "dessert house, not cheesecake-only" is proven.
   ============================================================ */
.range{padding:60px 0;border-top:1px solid var(--kc-line-soft)}
.range h2{font-size:var(--kc-d2);text-align:center;margin-bottom:10px}
.range h2 .script{color:var(--kc-rose)}
.range .intro{text-align:center;max-width:58ch;margin:0 auto 30px;color:var(--kc-ink-soft);font-size:var(--kc-small)}
.ledger{border-top:1px solid var(--kc-line)}
.lrow{
  display:grid;grid-template-columns:82px 1fr auto;gap:18px;align-items:center;
  padding:15px 6px;border-bottom:1px solid var(--kc-line-soft);
  transition:background .2s;
}
.lrow:hover{background:rgba(255,255,255,.5)}
.lrow img{width:82px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--kc-line)}
.lrow-name{font-size:18px;margin-bottom:3px}
.lrow-desc{font-size:var(--kc-small);color:var(--kc-ink-soft);margin:0}
.lrow-right{text-align:right;white-space:nowrap}
.lrow-price{font-size:16.5px}
.lrow-lead{font-size:var(--kc-tiny);color:var(--kc-ink-faint)}
@media(max-width:640px){
  .lrow{grid-template-columns:64px 1fr;gap:14px}
  .lrow img{width:64px;height:56px}
  .lrow-right{grid-column:2;text-align:left}
}

/* ============================================================
   4. THE MAKER — her voice, her hands
   ============================================================ */
.maker{padding:62px 0;border-top:1px solid var(--kc-line-soft)}
.maker-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.maker h2{font-size:var(--kc-d2);margin-bottom:16px}
.maker h2 .script{color:var(--kc-rose)}
.maker p{color:var(--kc-ink-soft);max-width:46ch}
.maker .pull{
  font-family:var(--kc-script);font-size:var(--kc-d2);color:var(--kc-espresso);
  margin:22px 0 18px;line-height:1.25;
}
.maker-fig{position:relative}
.maker-fig img{border-radius:var(--kc-r-plate);border:7px solid #fff;box-shadow:var(--kc-shadow-lift);height:clamp(280px,38vw,410px);width:100%;object-fit:cover}
.slot{
  border:1px dashed var(--kc-caramel);border-radius:var(--kc-r-box);
  padding:16px 18px;background:rgba(253,219,226,.3);
  font-size:var(--kc-small);color:#6b4a45;margin-top:18px;
}
.slot b{color:var(--kc-espresso)}
@media(max-width:820px){ .maker-grid{grid-template-columns:1fr;gap:28px} .maker p{max-width:none} }

/* ============================================================
   5. CELEBRATIONS — date-first feasibility. Kills the form wall.
   ============================================================ */
.celebrate{padding:62px 0;border-top:1px solid var(--kc-line-soft)}
.celebrate h2{font-size:var(--kc-d2);text-align:center;margin-bottom:10px}
.celebrate h2 .script{color:var(--kc-rose)}
.celebrate .intro{text-align:center;max-width:60ch;margin:0 auto 28px;color:var(--kc-ink-soft);font-size:var(--kc-small)}
.instrument{
  max-width:720px;margin:0 auto;background:rgba(255,255,255,.72);
  border:1px solid var(--kc-line);border-radius:var(--kc-r-box);
  padding:24px;box-shadow:var(--kc-shadow-set);text-align:center;
}
.field-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:flex-end}
.field{text-align:left}
.field label{display:block;font-size:var(--kc-tiny);letter-spacing:.08em;text-transform:uppercase;color:var(--kc-ink-faint);margin-bottom:6px}
.field input,.field select{
  font-family:var(--kc-text);font-size:16px;color:var(--kc-ink);
  padding:12px 14px;border:1px solid var(--kc-line);border-radius:var(--kc-r-btn);
  background:var(--kc-cream);min-width:190px;
}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--kc-rose);outline-offset:1px}
.verdict{
  margin-top:20px;padding:18px;border-radius:var(--kc-r-box);
  border:1px solid var(--kc-line);background:var(--kc-cream);
  font-size:16px;min-height:64px;display:flex;align-items:center;justify-content:center;text-align:center;
}
.verdict[data-v="yes"]{border-color:#2e7d4f;background:#eef6ef;color:#1f5c39}
.verdict[data-v="tight"]{border-color:var(--kc-caramel);background:#fdf3e8;color:#7a4d1e}
.verdict[data-v="no"]{border-color:var(--kc-berry);background:#fdecec;color:#8d1b24}

/* ============================================================
   6. THE TABLE — event/catering proof, a lane (not cards)
   ============================================================ */
.table-proof{padding:58px 0;border-top:1px solid var(--kc-line-soft)}
.table-proof h2{font-size:var(--kc-d2);text-align:center;margin-bottom:8px}
.table-proof h2 .script{color:var(--kc-rose)}
.table-proof .intro{text-align:center;max-width:56ch;margin:0 auto 26px;color:var(--kc-ink-soft);font-size:var(--kc-small)}
.lane{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.lane figure{flex:0 0 auto;width:min(78vw,420px);margin:0;scroll-snap-align:center}
.lane img{width:100%;height:270px;object-fit:cover;border-radius:var(--kc-r-plate);border:6px solid #fff;box-shadow:var(--kc-shadow-set)}
.lane figcaption{font-size:var(--kc-small);color:var(--kc-ink-soft);margin-top:10px;text-align:center}

/* ============================================================
   7. VISIT
   ============================================================ */
.visit{padding:60px 0;border-top:1px solid var(--kc-line-soft)}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.visit h2{font-size:var(--kc-d2);margin-bottom:14px}
.visit h2 .script{color:var(--kc-rose)}
.visit dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:var(--kc-small)}
.visit dt{color:var(--kc-ink-faint);letter-spacing:.04em}
.visit dd{margin:0;color:var(--kc-ink)}
@media(max-width:820px){ .visit-grid{grid-template-columns:1fr;gap:26px} }

/* ---------- footer ---------- */
.foot{background:var(--kc-espresso);color:#e8d6d2;padding:40px 0 34px;margin-top:20px}
.foot a{color:var(--kc-field)}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot-mark{display:flex;align-items:center;gap:12px}
.foot-mark img{width:54px;height:54px}
.foot-mark span{font-family:var(--kc-script);font-size:23px;color:var(--kc-field)}
.social{display:flex;gap:12px;margin-top:14px}
.social a{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(253,219,226,.35);
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.social a:hover{background:rgba(253,219,226,.16)}
.social svg{width:19px;height:19px;fill:var(--kc-field)}
.legal{font-size:var(--kc-tiny);color:#c3a9a4;text-align:right;line-height:1.7}
.legal a{color:var(--kc-field)}
@media(max-width:700px){ .foot-grid{flex-direction:column} .legal{text-align:left} }

/* ---------- skip link ---------- */
/* The skip link lives ON the page, clipped to a pixel, not thrown to -9999px —
   an off-canvas control is one a keyboard can reach and nothing can scroll to
   (wall, 2026-07-30). It unclips on focus and lands where the eye already is. */
.skip{
  position:absolute;left:0;top:0;z-index:99;
  width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);
  background:var(--kc-espresso);color:#fdf6f2;border-radius:0 0 var(--kc-r-btn) 0;
}
.skip:focus{width:auto;height:auto;padding:12px 18px;overflow:visible;clip-path:none}
.skip:focus{left:0}

@media(max-width:760px){
  :root{--kc-d1:30px;--kc-d2:23px;--kc-d3:19px;--kc-gut:20px}
  .mast .wrap{flex-direction:column;gap:12px}
  /* one clean scrollable row instead of three ragged wrapped lines,
     and no hamburger — a menu that can trap a thumb is worse than a swipe */
  .nav{
    flex-wrap:nowrap;overflow-x:auto;width:100%;justify-content:flex-start;
    gap:2px;padding-bottom:4px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;font-size:14.5px;padding:8px 10px;min-height:48px}
  .maker-fig img{height:300px}
  /* the shelf note repeats what the section line already said — drop it on a phone
     rather than let two labels fight for one row */
  .shelf-label{display:block}
  .shelf-label span:last-child{display:none}
  .kc-preview .wrap{padding-top:8px;padding-bottom:8px}
}

/* The Current is installed on the hero. Its stylesheet sets `height:auto` on
   the image it drives, so this build restates its own geometry at higher
   specificity — the instrument draws, the ROOM owns geometry (its own law). */
.hero-hang .hero-frame > img{height:clamp(300px,46vw,470px);object-fit:cover;width:100%}
.hero-hang .hero-frame .g28-current-canvas{border-radius:var(--kc-r-plate)}