/* ═══════════════════════════════════════════════════════════════
   MIEL MARKET — the shop on Fig & Rind Corner
   A self-contained world. Its own palette, its own type pairing,
   its own paper-and-fabric shape language. No shared tokens with
   any other world.

   palette   honey #F2B94B · tomato #E65E4C · mint #A8D8B0
             cream #FFF6E6 · berry #9B4963 · dark brown #3B2B24
   type      marker-pen voice (the shopkeeper's hand) · condensed
             gothic signage (the shopfront, the aisle blades)
             price-tag microtype (prices, labels, receipts)
   shape     scalloped awnings, punched price tags, offset sticker
             edges, torn receipt paper
   motion    fabric — things sag, swing, bob, print
   ═══════════════════════════════════════════════════════════════ */

:root {
  --honey:  #F2B94B;
  --tomato: #E65E4C;
  --mint:   #A8D8B0;
  --cream:  #FFF6E6;
  --berry:  #9B4963;
  --ink:    #3B2B24;
  --paper:  #FFFCF3;

  /* the voice: written by hand on a produce label, not set in a book.
     The local names that used to lead this stack (Marker Felt, Segoe
     Print, Ink Free, Bradley Hand, Chalkboard SE) exist only on the
     machines they were named on, so the lead is now Kalam — a real
     brush hand — and the old names stay behind it as fallbacks. */
  --voice:  "Kalam", "Marker Felt", "Segoe Print", "Ink Free", "Bradley Hand", "Chalkboard SE", cursive;
  /* the signage: painted board letters, condensed and heavy. Same
     repair — Franklin Gothic Medium is a Microsoft face, so Signika
     leads and the Windows condensed stack follows it. */
  --sign:   "Signika", "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow", "Trebuchet MS", sans-serif;

  --edge: 3px solid var(--ink);
  --lift: 5px;
  --radius: 22px;
  --wrap: min(1160px, 100% - 2.5rem);
  --gutter: clamp(1.1rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must beat the display rules set on .btn and friends */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--voice);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.62;
  /* faint laid-paper grain: pure ink at 5%, no new hues */
  background-image: radial-gradient(rgba(59, 43, 36, .05) 1px, transparent 1px);
  background-size: 4px 4px;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--sign);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--berry); text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover { color: var(--tomato); }

:focus-visible {
  outline: 3px dashed var(--tomato);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 60;
  background: var(--berry);
  color: var(--cream);
  padding: .6rem 1rem;
  border: var(--edge);
  border-radius: 0 0 14px 14px;
  font-family: var(--sign);
  font-weight: 700;
  transition: top .2s ease;
}
.skip:focus { top: 0; color: var(--cream); }

/* ── shared display atoms ───────────────────────────────────── */

.eyebrow {
  font-family: var(--tag);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--berry);
  margin: 0 0 .85rem;
}

.btn {
  --shade: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: var(--edge);
  border-radius: 999px;
  background: var(--berry);
  color: var(--cream);
  font-family: var(--sign);
  font-weight: 800;
  font-size: .95rem;
  padding: .62rem 1.25rem;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--shade);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn:hover { background: var(--tomato); }
.btn:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--shade); }
.btn--honey { background: var(--honey); color: var(--ink); }
.btn--honey:hover { background: var(--mint); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  border-style: dashed;
}
.btn--ghost:hover { background: rgba(59, 43, 36, .07); }
.btn--ghost:active { transform: none; }

/* ═══════════ TOP BAR ═══════════ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.6rem);
  padding: .7rem var(--gutter);
  background: var(--honey);
  border-bottom: var(--edge);
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand__mark { width: 34px; flex: none; }
.brand__words { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--sign);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -.02em;
}
.brand__sub {
  font-family: var(--tag);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}

.topnav { display: flex; gap: clamp(.4rem, 1.4vw, 1.1rem); }
.topnav a {
  font-family: var(--sign);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  text-decoration: none;
  padding: .3rem .1rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.topnav a:hover { border-bottom-color: var(--berry); color: var(--berry); }

.basketbtn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: var(--edge);
  border-radius: 999px;
  background: var(--cream);
  padding: .35rem .5rem .35rem .95rem;
  font-family: var(--sign);
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.basketbtn:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }
.basketbtn__count {
  min-width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--tomato);
  color: var(--cream);
  font-family: var(--tag);
  font-size: .78rem;
}
.basketbtn.is-bumped { animation: bump .34s ease; }

@keyframes bump {
  40% { transform: translateY(-5px) rotate(-2deg); }
  70% { transform: translateY(1px) rotate(1deg); }
  100% { transform: none; }
}

/* ═══════════ HERO ═══════════ */

.hero {
  width: var(--wrap);
  margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 3.4rem) 0 clamp(1rem, 3vw, 2rem);
  display: grid;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
}

.hero__title {
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  letter-spacing: -.035em;
}
.hero__title em {
  display: inline-block;
  font-style: normal;
  color: var(--cream);
  background: var(--berry);
  padding: .06em .22em .1em;
  border-radius: .18em;
  transform: rotate(-1.1deg);
}
.hero__lede {
  margin-top: 1.15rem;
  max-width: 34ch;
  font-size: 1.06rem;
}
.hero__hint {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--tag);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero__hint-knock {
  width: 1.55rem; height: 1.55rem;
  border-radius: 50%;
  border: var(--edge);
  background: var(--mint);
  position: relative;
  flex: none;
}
.hero__hint-knock::after {
  content: "";
  position: absolute;
  inset: .3rem;
  border-radius: 50%;
  background: var(--berry);
  animation: knock 2.6s ease-in-out infinite;
}
@keyframes knock {
  0%, 62%, 100% { transform: scale(.55); opacity: .55; }
  72% { transform: scale(1); opacity: 1; }
  82% { transform: scale(.7); opacity: .8; }
  92% { transform: scale(1); opacity: 1; }
}

/* ── the storefront ─────────────────────────────────────────── */

.storefront {
  position: relative;
  border: var(--edge);
  border-radius: 26px;
  overflow: hidden;
  background: var(--mint);
  box-shadow: 8px 9px 0 rgba(59, 43, 36, .16);
  touch-action: pan-y;
}
.storefront .shop { width: 100%; height: auto; }

/* ── the shop is open air, and air moves ─────────────────────────
   Everything below is ambient: it runs at rest, before any pointer
   moves, so the plate reads as a place with weather in it rather
   than a diagram. Each cycle is between 4 and 19 seconds, which is
   what a person standing on that pavement would actually see. */

.shop .sun { animation: sunbreathe 11s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sunbreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: .92; }
}

/* birds cross the sky on a long, offset loop */
.shop .birds { animation: drift 19s linear infinite; }
.shop .birds--b { animation-duration: 27s; animation-delay: -11s; opacity: .6; }
@keyframes drift {
  0% { transform: translateX(-90px); }
  100% { transform: translateX(760px); }
}
.shop .bird { animation: wing 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wing {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.45); }
}

/* the flowers in the pot lean with the wind */
.shop .bloom { animation: lean 6.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.shop .bloom--b { animation-duration: 7.9s; animation-delay: -2.2s; }
@keyframes lean {
  0%, 100% { transform: rotate(-1.8deg); }
  50% { transform: rotate(2.4deg); }
}

/* warm light breathes inside the windows, as if the fluorescents are on */
.shop .winlight { animation: lampflicker 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lampflicker {
  0%, 100% { opacity: 1; }
  38% { opacity: .94; }
  42% { opacity: 1; }
  71% { opacity: .97; }
}

/* produce sitting still is produce nobody has touched */
.shop .crate { animation: settle 8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.shop .crate--b { animation-duration: 10.4s; animation-delay: -3.1s; }
@keyframes settle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1.6px) rotate(.35deg); }
}

/* the awning breathes even when no pointer is on it */
.awning { animation: fabricbreathe 5.4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes fabricbreathe {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(.985) scaleX(1.004); }
}
/* each valance swings on its own phase, so the hem is never flat */
.awning__stripe::after { animation: hem 4.3s ease-in-out infinite; transform-origin: 50% 0; }
.awning__stripe:nth-child(2)::after { animation-delay: -.7s; }
.awning__stripe:nth-child(3)::after { animation-delay: -1.4s; }
.awning__stripe:nth-child(4)::after { animation-delay: -2.1s; }
.awning__stripe:nth-child(5)::after { animation-delay: -2.8s; }
.awning__stripe:nth-child(6)::after { animation-delay: -3.5s; }
.awning__stripe:nth-child(7)::after { animation-delay: -4.2s; }
.awning__stripe:nth-child(8)::after { animation-delay: -4.9s; }
.awning__stripe:nth-child(9)::after { animation-delay: -5.6s; }
@keyframes hem {
  0%, 100% { transform: rotate(-.6deg); }
  50% { transform: rotate(1deg); }
}

/* the door light and the light on the pavement under it */
.door__glow { opacity: .35; transition: opacity .4s ease; animation: doorpulse 7s ease-in-out infinite; }
@keyframes doorpulse {
  0%, 100% { opacity: .35; }
  50% { opacity: .46; }
}
.storefront.is-open .door__glow { animation: none; }

.door__spill { transition: opacity .5s ease .12s; }

.storefront.is-open .door--l { transform: rotateY(-74deg); }
.storefront.is-open .door--r { transform: rotateY(74deg); }
.storefront.is-open .door__glow { opacity: 1; }
.storefront.is-open .door__spill { opacity: .55; }

/* ── the awning: nine fabric panels that follow the pointer ─── */

.awning {
  position: absolute;
  left: 7.8%;
  width: 84.4%;
  top: 31.9%;
  height: 13.5%;
  display: flex;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 8px 6px rgba(59, 43, 36, .22));
}
.awning__stripe {
  --lift: 0px;
  --skew: 0deg;
  flex: 1 1 0;
  position: relative;
  will-change: transform;
  transform: translate3d(0, var(--lift), 0) skewX(var(--skew));
  transition: transform .5s cubic-bezier(.3, 1.3, .5, 1);
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 3px 3px 46% 46% / 3px 3px 96% 96%;
  background: var(--cream);
}
.awning__stripe:nth-child(odd) { background: var(--tomato); }
.awning__stripe:nth-child(3n) { background: var(--honey); }
/* the little scalloped valance hanging off each panel */
.awning__stripe::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -9px;
  height: 15px;
  background: inherit;
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.storefront.is-open .awning__stripe {
  --lift: -13px !important;
  --skew: 0deg !important;
  transition-duration: .6s;
}

/* click target over the whole shopfront */
.doorhit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.doorhit__open {
  position: absolute;
  left: 50%;
  top: 76%;
  translate: -50% 0;
  font-family: var(--sign);
  font-weight: 800;
  font-size: clamp(.7rem, 1.5vw, .95rem);
  letter-spacing: .1em;
  color: var(--cream);
  background: var(--tomato);
  border: var(--edge);
  border-radius: 999px;
  padding: .3rem .9rem;
  opacity: 0;
  transform: rotate(-4deg) scale(.7);
  transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.storefront.is-open .doorhit__open { opacity: 1; transform: rotate(-4deg) scale(1); }
.storefront.is-open .doorhit { cursor: default; }

/* ═══════════ TRUST STRIP ═══════════ */

.strip {
  background: var(--berry);
  border-block: var(--edge);
  color: var(--cream);
}
.strip__list {
  width: var(--wrap);
  margin: 0 auto;
  padding: .9rem 0;
  list-style: none;
  display: grid;
  gap: .3rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  font-size: .93rem;
}
.strip strong {
  font-family: var(--sign);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ═══════════ SECTIONS ═══════════ */

.section { width: var(--wrap); margin: 0 auto; padding: clamp(2.4rem, 6vw, 4.4rem) 0; }
.section__title { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); }
.section__lede { margin-top: .85rem; max-width: 56ch; color: rgba(59, 43, 36, .82); }
.section__head { margin-bottom: clamp(1.3rem, 3vw, 2.2rem); }

/* ═══════════ AISLES ═══════════ */

.aisles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.aisle {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "no name glyph" "no meta glyph";
  align-items: center;
  gap: .1rem .85rem;
  text-align: left;
  background: var(--paper);
  border: var(--edge);
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(59, 43, 36, .14);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.aisle:hover { transform: translate(-2px, -3px); box-shadow: 7px 8px 0 rgba(59, 43, 36, .18); background: #fff; }
.aisle:active { transform: translate(0, 2px); box-shadow: 2px 2px 0 rgba(59, 43, 36, .18); }
.aisle__no {
  grid-area: no;
  align-self: center;
  font-family: var(--tag);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--cream);
  background: var(--ink);
  border-radius: 999px;
  padding: .32rem .5rem;
}
.aisle__name {
  grid-area: name;
  font-family: var(--sign);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.015em;
  align-self: end;
}
.aisle__meta {
  grid-area: meta;
  font-size: .85rem;
  color: rgba(59, 43, 36, .72);
  align-self: start;
}
.aisle__glyph { grid-area: glyph; width: 42px; opacity: .9; }
.aisle[aria-pressed="true"] { background: var(--mint); box-shadow: 5px 5px 0 var(--berry); }

/* ═══════════ SHELVES ═══════════ */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  padding: 1rem 1.1rem;
  border: var(--edge);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 1rem;
  transition: opacity .3s ease;
}
.dial__label, .filters__label {
  display: block;
  font-family: var(--tag);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: .45rem;
  color: rgba(59, 43, 36, .7);
}
.dial__seasons, .filters__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.dial__seasons button, .chip {
  border: var(--edge);
  border-radius: 999px;
  background: var(--cream);
  font-family: var(--sign);
  font-weight: 700;
  font-size: .88rem;
  padding: .35rem .9rem;
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease;
}
.dial__seasons button:hover, .chip:hover { background: var(--honey); }
.dial__seasons button:active, .chip:active { transform: translateY(2px); }
.dial__seasons button[aria-pressed="true"] { background: var(--tomato); color: var(--cream); }
.chip.is-on { background: var(--berry); color: var(--cream); }

.shelfcount {
  font-family: var(--tag);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: rgba(59, 43, 36, .68);
  transition: opacity .3s ease;
}

/* the gated market floor */
.section--shelves { position: relative; }
.market-body { transition: opacity .45s ease, transform .45s ease, filter .45s ease; }

.shelves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.8rem, 1.8vw, 1.2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
}
.shelf {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  background: var(--paper);
  border: var(--edge);
  border-radius: var(--radius);
  padding: .85rem .9rem 1rem;
  box-shadow: 5px 5px 0 rgba(59, 43, 36, .13);
  transition: transform .18s ease, box-shadow .18s ease;
  animation: shelfin .42s cubic-bezier(.3, 1.3, .5, 1) both;
  animation-delay: calc(var(--pop, 0) * 55ms);
}
@keyframes shelfin {
  from { opacity: 0; transform: translateY(14px) rotate(-1.2deg); }
  to { opacity: 1; transform: none; }
}
.shelf:hover { transform: translate(-2px, -4px); box-shadow: 7px 9px 0 rgba(59, 43, 36, .17); }
.shelf__art {
  background: var(--cream);
  border: 2px dashed rgba(59, 43, 36, .28);
  border-radius: 16px;
  padding: .5rem;
  display: grid;
  place-items: center;
  transform-origin: 50% 88%;
}
.shelf:hover .shelf__art,
.shelf:focus-within .shelf__art { animation: bob .62s cubic-bezier(.3, 1.5, .5, 1); }
.shelf__art svg { width: min(100%, 132px); height: auto; }
@keyframes bob {
  0% { transform: translateY(0) scale(1, 1); }
  28% { transform: translateY(-9px) scale(.96, 1.05); }
  55% { transform: translateY(2px) scale(1.05, .94); }
  78% { transform: translateY(-3px) scale(.99, 1.02); }
  100% { transform: none; }
}
.shelf__name {
  font-size: 1.14rem;
  /* NOT the signage voice. Product names used to be set in the same
     Franklin Gothic as the shopfront and the section heads, so a crate
     of radishes and the painted board over the door were one typeface
     talking. Produce names are written on a card and stuck in the
     crate; signage is painted. Different hand, different job. */
  font-family: var(--voice);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--ink);
  transform: rotate(-.5deg);
}
.shelf__stall {
  font-size: .84rem;
  color: rgba(59, 43, 36, .7);
  margin-bottom: .2rem;
}
/* what the price is actually buying, and where to walk for it —
   marker hand, because this is a card, not a sign */
.shelf__unit {
  font-family: var(--voice);
  font-size: .94rem;
  color: var(--berry);
  line-height: 1.2;
  margin-top: -.2rem;
  transform: rotate(.7deg);
}
.shelf__unit::before {
  content: "\21B3 ";
  color: var(--tomato);
}
/* price tag: punched hole on the left, microtype, a little tilt */
.tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--tag);
  font-size: .78rem;
  letter-spacing: .1em;
  background: var(--honey);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: .2rem .5rem .2rem .55rem;
  position: relative;
  transform: rotate(-1.4deg);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.shelf:hover .tag { transform: rotate(-1.4deg) scale(1.07); }
.tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--ink);
  flex: none;
}
/* ── the shutter that comes down until the shop opens ────────────
   This covered 21% of the document as one flat maroon rectangle.
   The plate behind the sign is now a painted steel shutter box:
   corrugations, guide rails, rust off the bottom rail, and honey
   light coming in under the door. The berry survives as the paint,
   not as a void. */

.shutter {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow: hidden;
  border: var(--edge);
  border-radius: 26px;
  background: var(--berry);
  transition: transform .62s cubic-bezier(.7, 0, .25, 1), opacity .3s ease .35s;
}
.shutter__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* the shutter box is a room with air in it: the light under the door
   shifts, the hanging sign turns on its hook, the rust-stained steel
   breathes. Nothing here waits for a pointer. */
.shutter__plate { animation: boxbreathe 12s ease-in-out infinite; }
@keyframes boxbreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.09); }
}
.shutter__sign { animation: signsway 6.2s ease-in-out infinite; transform-origin: 50% -1.4rem; }
@keyframes signsway {
  0%, 100% { transform: rotate(-.7deg); }
  50% { transform: rotate(.7deg); }
}
/* the hanging hook the sign swings from */
.shutter__hanger {
  position: absolute;
  left: 50%;
  top: -1.55rem;
  width: 3px;
  height: 1.55rem;
  margin-left: -1.5px;
  background: var(--cream);
  opacity: .55;
}
/* chalked on the steel by whoever closes up */
.shutter__chalk {
  position: absolute;
  left: clamp(1.2rem, 5vw, 3.4rem);
  bottom: clamp(2.6rem, 8vh, 5.5rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transform: rotate(-2.2deg);
  pointer-events: none;
}
.shutter__chalk span {
  font-family: var(--voice);
  font-size: clamp(1.05rem, .8rem + 1vw, 1.6rem);
  line-height: 1.1;
  color: var(--cream);
  opacity: .5;
  text-shadow: 0 1px 0 rgba(59, 43, 36, .35);
}
.shutter__chalk span:nth-child(2) { margin-left: 1.6rem; opacity: .38; }

/* The ghost of a sign painted on this shutter years ago. It is HTML
   rather than SVG because the plate behind it is stretched to fit
   (preserveAspectRatio="none"), and at 390 the two axes differ by more
   than 2x, which smears any <text> in the plate into an unreadable
   band. Lettering has to scale honestly at both widths. */
.shutter__ghost {
  position: absolute;
  left: clamp(1.1rem, 6vw, 3.6rem);
  top: 11%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--cream);
  opacity: .17;
  transform: rotate(-1.6deg);
  pointer-events: none;
}
.shutter__ghost-big {
  font-family: var(--sign);
  font-weight: 700;
  font-size: clamp(2.1rem, 8vw, 5.4rem);
  letter-spacing: .06em;
}
.shutter__ghost-small {
  font-family: var(--sign);
  font-weight: 400;
  font-size: clamp(.8rem, 2.4vw, 1.5rem);
  letter-spacing: .34em;
  margin-top: .5em;
  margin-left: .3em;
}
/* on a narrow floor the notice owns the middle, so the ghost sits
   above it rather than beside it */
.shutter__chalk span:nth-child(3) { margin-left: .5rem; opacity: .32; }
@media (max-width: 640px) {
  .shutter__ghost { top: 5%; opacity: .13; }
  .shutter__chalk { bottom: clamp(1.6rem, 5vh, 3rem); }
}

.shutter__sign {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 30ch;
  color: var(--cream);
  padding: 1.4rem 1.6rem 1.5rem;
  border: 3px solid var(--cream);
  border-radius: 20px;
  background: rgba(59, 43, 36, .34);
  backdrop-filter: blur(1.5px);
}
.shutter__big {
  font-family: var(--sign);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.4rem);
  line-height: 1.05;
  margin-bottom: .5rem;
}
.shutter__small { margin-bottom: 1.2rem; font-size: .98rem; opacity: .92; }

.section--shelves.is-open .shutter { transform: translateY(-101%); opacity: 0; pointer-events: none; }
.section--shelves.is-shut .market-body { opacity: 0; transform: translateY(18px); filter: blur(2px); pointer-events: none; }
.section--shelves.is-shut .controls,
.section--shelves.is-shut .shelfcount { opacity: .35; pointer-events: none; }

/* ═══════════ THE COUNTER ═══════════ */

.section--counter { padding-bottom: clamp(2rem, 5vw, 3.4rem); }
.counter {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
}
@media (min-width: 880px) {
  .counter { grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); }
}
.counter__title { font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem); }
.counter__sub { margin: .4rem 0 1.1rem; color: rgba(59, 43, 36, .75); font-size: .95rem; }

/* the little receipt that fills up as you add things */
.slip {
  background: var(--paper);
  border: var(--edge);
  border-radius: 8px 8px 4px 4px;
  padding: 1.1rem 1.1rem .9rem;
  box-shadow: 6px 6px 0 rgba(59, 43, 36, .13);
  background-image: repeating-linear-gradient(180deg, rgba(59, 43, 36, .045) 0 1px, transparent 1px 5px);
}
.slip__lines { list-style: none; margin: 0; padding: 0; min-height: 12px; }
.slip__lines li {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: baseline;
  gap: .3rem;
  font-family: var(--tag);
  font-size: .82rem;
  padding: .28rem 0;
  animation: printed .3s steps(3) both;
}
@keyframes printed {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
.slip__qty { color: var(--berry); }
.slip__name { font-family: var(--voice); font-size: .95rem; }
.slip__dots { border-bottom: 2px dotted rgba(59, 43, 36, .4); transform: translateY(-.28em); }
.slip__sum { font-variant-numeric: tabular-nums; }
.slip__drop {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--tag);
  font-size: .8rem;
  color: var(--berry);
  text-decoration: underline;
  text-underline-offset: .2em;
  padding: .1rem .15rem;
}
.slip__drop:hover { color: var(--tomato); }
.slip__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 2px solid var(--ink);
  font-family: var(--tag);
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
.slip__foot { margin-top: .7rem; font-size: .86rem; color: rgba(59, 43, 36, .72); }
#emptyBtn { margin-top: .9rem; }

/* your usual — a rubber stamp on paper */
.stamp {
  position: relative;
  background: var(--mint);
  border: var(--edge);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.5rem;
  box-shadow: 6px 6px 0 rgba(59, 43, 36, .15);
  transform: rotate(-.7deg);
}
.stamp::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(59, 43, 36, .35);
  border-radius: 14px;
  pointer-events: none;
}
.stamp__top {
  font-family: var(--tag);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-align: center;
  opacity: .75;
}
.stamp__title { font-size: 1.7rem; text-align: center; margin: .15rem 0 .9rem; }
.stamp__list { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .5rem; }
.stamp__list li {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  align-items: baseline;
  border-bottom: 2px dotted rgba(59, 43, 36, .35);
  padding-bottom: .4rem;
  font-size: .98rem;
}
.stamp__tag {
  font-family: var(--tag);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: .15rem .35rem;
  white-space: nowrap;
}
.stamp__note { font-size: .86rem; color: rgba(59, 43, 36, .78); margin-bottom: 1rem; }

.shutbtn {
  display: block;
  margin: 1.2rem auto 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--tag);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--berry);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.shutbtn:hover { color: var(--tomato); }

/* ═══════════ HOURS ═══════════ */

.hours {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .hours { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}
.clockwrap { text-align: center; }
.hours__title { font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem); margin-bottom: 1rem; }
.clock { display: grid; justify-items: center; gap: .8rem; }
.clock__face { width: min(240px, 74vw); height: auto; }
.hand { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--deg, 0deg)); }
/* The minute and hour hands still take a real hour and a real twelve
   hours to come round — that is what a shop clock does, and it is not
   the thing that was wrong. What was wrong is that they were the ONLY
   continuous motion on the page, at 1-hour and 12-hour cycles, so to
   any visitor arriving and reading the page they are a still image.
   The clock now has a second hand that ticks every second. That is
   human timescale, it is what a real shop clock has, and it makes the
   face read as a mechanism rather than a printed disc. */
.hand--sec {
  animation: tick 60s steps(60, end) infinite;
  transform-origin: 100px 108px;
}
.hand--min { animation: sweep 3600s linear infinite; }
.hand--hour { animation: sweep 43200s linear infinite; }
@keyframes sweep { to { transform: rotate(calc(var(--deg, 0deg) + 360deg)); } }
@keyframes tick {
  from { transform: rotate(var(--sec, 0deg)); }
  to { transform: rotate(calc(var(--sec, 0deg) + 360deg)); }
}
/* the pin the second hand sweeps around gets a small pulse, so the
   tick is legible even when the hand itself is near vertical */
.clock__pin { animation: pinpulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pinpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}

.clock__now {
  font-family: var(--tag);
  font-size: 1rem;
  letter-spacing: .12em;
}
.statuspill {
  font-family: var(--sign);
  font-weight: 800;
  font-size: .92rem;
  background: var(--mint);
  border: var(--edge);
  border-radius: 999px;
  padding: .3rem .9rem;
}
.statuspill.is-shut { background: var(--tomato); color: var(--cream); }

.hours__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 1rem;
}
.hours__table th, .hours__table td {
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 2px dashed rgba(59, 43, 36, .2);
}
.hours__table tr:last-child th, .hours__table tr:last-child td { border-bottom: 0; }
.hours__table th { font-family: var(--sign); font-weight: 700; }
.hours__table td {
  font-family: var(--tag);
  font-size: .88rem;
  letter-spacing: .06em;
  text-align: right;
  white-space: nowrap;
}
.hours__note { margin-top: 1rem; max-width: 52ch; color: rgba(59, 43, 36, .8); }

/* ═══════════ FOOTER — the whole nav printed as a receipt ═══════ */

.receipt {
  padding: clamp(2rem, 5vw, 3.4rem) var(--gutter) clamp(2.4rem, 6vw, 4rem);
  background: var(--ink);
}
.receipt__sheet {
  position: relative;
  max-width: 60ch;
  margin: 0 auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .3));
}
.receipt__body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--tag);
  font-size: .82rem;
  line-height: 1.7;
  padding: 1.1rem 1.5rem 1.5rem;
  background-image: repeating-linear-gradient(180deg, rgba(59, 43, 36, .04) 0 1px, transparent 1px 6px);
}
.tear { display: block; width: 100%; height: 11px; }
.tear--bot { transform: scaleY(-1); }

.receipt__head {
  font-family: var(--sign);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .1em;
  text-align: center;
  line-height: 1.1;
}
.receipt__sub, .receipt__meta {
  text-align: center;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.receipt__meta {
  margin: .5rem 0 1rem;
  padding-bottom: .8rem;
  border-bottom: 2px dashed rgba(59, 43, 36, .3);
}
.receipt__lines { list-style: none; margin: 0; padding: 0; }
.receipt__lines li { display: flex; align-items: baseline; gap: .3rem; padding: .18rem 0; }
.lname { white-space: nowrap; }
.lname a { color: var(--berry); text-decoration: none; border-bottom: 2px solid rgba(155, 73, 99, .4); }
.lname a:hover { color: var(--tomato); border-bottom-color: var(--tomato); }
.ldots { flex: 1 1 auto; border-bottom: 2px dotted rgba(59, 43, 36, .45); transform: translateY(-.3em); }
.lsum { font-variant-numeric: tabular-nums; }
.receipt__total {
  display: flex;
  justify-content: space-between;
  margin: .8rem 0 .2rem;
  padding-top: .5rem;
  border-top: 2px solid var(--ink);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.barcode { width: 100%; height: 44px; margin: .8rem 0 .4rem; }
.receipt__tiny { text-align: center; font-size: .64rem; letter-spacing: .1em; }
.receipt__tiny--dim { opacity: .55; margin-top: .9rem; text-transform: none; letter-spacing: .04em; }
.receipt__thanks {
  text-align: center;
  font-family: var(--sign);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .12em;
  line-height: 1.4;
  margin: .7rem 0 .2rem;
}

/* ═══════════ NARROWER FLOORS ═══════════ */

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; row-gap: .5rem; }
  .brand { margin-right: auto; }
  .topnav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    border-top: 2px dashed rgba(59, 43, 36, .35);
    padding-top: .4rem;
    padding-bottom: .15rem;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .hero__title br { display: none; }
  .receipt__body { padding: .9rem 1rem 1.2rem; }
  .clock__face { width: min(210px, 62vw); }
}

@media (max-width: 420px) {
  .brand__sub { display: none; }
  .btn { font-size: .88rem; padding: .55rem 1rem; }
  .shelf__btn { width: 100%; justify-content: center; }
  .slip__name { font-size: .88rem; }
}

/* ═══════════ REDUCED MOTION ═══════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .awning__stripe { transition: none; }
  .shelf:hover { transform: none; }
  .aisle:hover { transform: none; }
  .hero__title em { transform: none; }

  /* Reduced motion must leave the scene COMPLETE, not stripped.
     Most of the ambient keyframes happen to settle on a composed
     value, but two of them do not, and those are pinned back here:
   - the birds' drift keyframe ends with them 760px to the right,
     which is off the plate entirely. Left alone they would vanish
     from the sky, so they are put back over the shopfront.
   - the shutter sign's sway is left at its mid-swing angle; it is
     squared up so the sign hangs plumb. */
  .shop .birds,
  .shop .birds--b { animation: none; transform: none; }
  .shop .birds { transform: translateX(150px); }
  .shop .birds--b { transform: translateX(330px); }
  .shutter__sign { animation: none; transform: none; }
  .shutter__plate { animation: none; }
  .awning__stripe::after { animation: none; transform: none; }
  .awning { animation: none; }
  /* the clock keeps its real time — a stopped clock would be a lie,
     and the second hand is one discrete step a second */
  .clock__pin { animation: none; }
}