/* site-nav.css — the site's own navigation in the shared chip rail.
   The chip rail was built for ten numbered samples and hides the name on a
   phone, leaving the number; these chips have no number, so the name must
   stay. The rail already scrolls sideways. */
.site-nav .fable-chip__name{ display:inline }
.site-nav .fable-chip{ white-space:nowrap }
/* the rail clips what spills past its padding, and the current chip's ring reaches 6px past it (plus the 3px shadow below):
   room for the whole ring, so the Home bubble is never cut off (operator, 2026-09-17) */
@media (min-width:901px){ .fable-rail.site-nav{ padding:8px 8px 11px } }   /* the phone panel keeps its own padding */
@media (max-width:900px){
  .site-nav .fable-chip{ padding:5px 11px 5px 8px; font-size:.78rem }
  .site-nav .fable-chip__dot{ width:7px; height:7px }
}

/* the brand as the operator drew it: flower, signature, STUDIO */
.brand-sig{ display:grid; justify-items:center; gap:3px; min-width:0 }
.brand-sig__img{ height:44px; width:auto; display:block }
.brand-sig .fable-brand__sub{ margin-top:0; letter-spacing:.22em; font-size:.6rem; font-weight:700; color:var(--ink); text-indent:.22em }
.fable-brand{ gap:12px }
@media (max-width:900px){ .brand-sig__img{ height:38px } }

/* the nav chips in the same voice as the "sillyartstuff" line: spaced small caps */
.site-nav .fable-chip{ font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; padding:8px 14px 8px 10px }
.site-nav .fable-chip__name{ font-weight:700; font-size:inherit; letter-spacing:inherit }
.site-nav .fable-chip[aria-current="page"] .fable-chip__name{ font-weight:800 }
@media (max-width:900px){ .site-nav .fable-chip{ font-size:.6rem; letter-spacing:.12em; padding:6px 11px 6px 8px } }

/* ---- phones: one short bar (brand · Menu · Cart), the chips in a panel that drops down from it ---- */
.site-nav__toggle{ display:none }
.site-nav__tools{ display:flex; align-items:center; gap:8px }
.site-nav__tools:empty{ display:none }
.site-nav__burger{ position:relative; width:14px; height:2px; background:currentColor; border-radius:2px; flex:none }
.site-nav__burger::before, .site-nav__burger::after{ content:""; position:absolute; left:0; width:14px; height:2px; background:currentColor; border-radius:2px }
.site-nav__burger::before{ top:-5px } .site-nav__burger::after{ top:5px }
@media (max-width:900px){
  .fable-nav{ position:sticky; top:0 }
  .fable-nav__inner{ flex-wrap:nowrap; gap:8px; padding-bottom:0 }
  .fable-nav__right{ width:auto; flex-basis:auto; flex:0 0 auto; margin-left:auto; justify-content:flex-end; gap:8px }
  .site-nav__toggle{ display:inline-flex; order:2; font-size:.68rem; letter-spacing:.12em; padding:8px 12px 8px 10px }
  .site-nav__tools{ order:3 }
  .site-nav__tools .cart-chip{ font-size:.68rem; letter-spacing:.12em; padding:8px 12px 8px 10px }
  .brand-sig__img{ height:34px }
  .brand-sig .fable-brand__sub{ font-size:.52rem }
  .fable-brand{ gap:8px }
  .site-nav{ display:none; position:absolute; left:0; right:0; top:100%; margin:0; padding:12px 14px 16px; background:#fff; border-bottom:3px solid var(--ink); box-shadow:0 14px 24px rgba(51,43,66,.18); flex-wrap:wrap; gap:8px; overflow:visible }
  .site-nav > li{ display:contents }
  .fable-nav.is-open .site-nav{ display:flex }
  .site-nav .fable-chip{ font-size:.74rem; letter-spacing:.12em; padding:9px 14px 9px 11px; min-height:40px }
  .site-nav .fable-chip__dot{ width:8px; height:8px }
  .site-nav__toggle[aria-expanded="true"]{ background:var(--accent-wash, #FDF1E4) }
}
/* the Cart chip in the bar speaks like the other chips */
.site-nav__tools .fable-chip{ font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; padding:8px 14px 8px 10px }
.site-nav__tools .fable-chip .fable-chip__name{ display:inline; font-weight:700; font-size:inherit; letter-spacing:inherit }
@media (max-width:900px){ .site-nav__tools .fable-chip .fable-chip__name, .site-nav__toggle .fable-chip__name{ display:none } }