/* Layout: a town. A scrolling high street, a chiller you stand in front of,
   a sheet that slides up when you pick something, and a receipt page behind it. */
/* The two typefaces, served from the site itself so no visitor's browser talks
   to anyone else. Each file is a variable font holding every weight; the four
   rules name the same weights Google's stylesheet did, so nothing renders
   differently. Latin characters only, which covers every character on the site.
   Licences: fonts/OFL-Fredoka.txt and fonts/OFL-JetBrainsMono.txt. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(fonts/fredoka-latin.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(fonts/fredoka-latin.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/jetbrains-mono-latin.woff2) format("woff2"); }

:root {
  --paper: #FFF8E7;
  --paper-2: #FFFDF6;
  --ink: #1A1A1A;
  --red: #FF4F4F;
  --yellow: #FFD23F;
  --blue: #5AC8FA;
  --orange: #FFB020;
  --green: #7BD389;
  --pink: #FF9AC0;
  --rose: #FF6FA3;
  --brown: #C98B5A;
  --sky: #DFF3FA;
  --sky-2: #9ED3E6;
  --foil: #B4B2A9;
  --rawbird: #FFE5D0;
  --rawturkey: #F6D4B8;
  --rawchick: #FFF0D6;
  --rawbacon: #F4A6A6;
  --rawlamb: #E88A84;
  --rind: #E07A5F;
  --card: #C9B99A;
  --egg: #FFF0D6;
  --wire: #8A8F94;
  --lentil: #F08A4B;
  --chickpea: #F2D9A6;
  --bean: #3B3240;
  --nutbrown: #B5703A;
  --tofu: #FFF7E3;
  --oatcarton: #EAF2F6;
  --pave: #EADFC8;
  --floor: #D9D6CC;
  --slate: #33423C;
  --card-in: #AE9A76;
  --warm: #FFF1CF;
  --road: #7D93AD;
  --muted: #4A4639;
  --display: "Fredoka", "Arial Rounded MT Bold", "Nunito", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--paper); color: var(--ink); }
body {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.45;
  padding-block: 16px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
body.locked { overflow: hidden; }
main { max-width: 1120px; margin: 0 auto; }

/* The way round the site: a bean for home, three words, the same again at the bottom. */
/* The space under the navigation is the same on every page and never less than 32px, the gap
   between the home page's tagline and the line below it. It used to shrink to 18px on a phone,
   which left the tin on the home page too close to the navigation. */
.topnav { max-width: 1120px; margin: 0 auto clamp(32px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topnav .home { display: block; width: 38px; height: 38px; transition: transform 120ms ease; }
.topnav .home:hover, .topnav .home:focus-visible { transform: rotate(-12deg); }
.topnav .home svg { width: 38px; height: 38px; }
.topnav nav { display: flex; gap: clamp(14px, 4vw, 26px); }
.topnav nav a { font-weight: 600; font-size: 16px; text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; }
.topnav nav a:hover { border-bottom-color: var(--ink); }
.topnav nav a[aria-current="page"] { border-bottom-color: var(--red); }
@media (prefers-reduced-motion: reduce) { .topnav .home { transition: none; } }
h1, h2, h3 { font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 7vw, 52px); }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
svg { display: block; }

.f-paper { fill: var(--paper-2); }
.f-red { fill: var(--red); }
.f-yellow { fill: var(--yellow); }
.f-blue { fill: var(--blue); }
.f-orange { fill: var(--orange); }
.f-green { fill: var(--green); }
.f-pink { fill: var(--pink); }
.f-rose { fill: var(--rose); }
.f-brown { fill: var(--brown); }
.f-sky { fill: var(--sky); }
.f-foil { fill: var(--foil); }
.f-window { fill: #FFF0B3; }
.f-rawbird { fill: var(--rawbird); }
.f-rawturkey { fill: var(--rawturkey); }
.f-rawchick { fill: var(--rawchick); }
.f-rawbacon { fill: var(--rawbacon); }
.f-rawlamb { fill: var(--rawlamb); }
.f-card { fill: var(--card); }
.f-egg { fill: var(--egg); }
.f-lentil { fill: var(--lentil); }
.f-chickpea { fill: var(--chickpea); }
.f-bean { fill: var(--bean); }
.f-nutbrown { fill: var(--nutbrown); }
.f-tofu { fill: var(--tofu); }
.f-oatcarton { fill: var(--oatcarton); }

.screen { display: grid; gap: 22px; }
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: start; }
@media (max-width: 599px) { .top { grid-template-columns: minmax(0, 1fr); } }
.intro { display: grid; gap: 6px; }
.intro .sub { max-width: 34ch; }
.masthead { display: grid; justify-items: center; text-align: center; gap: 4px; }
.masthead .logo svg { width: 120px; height: auto; }
.wordmark { font-weight: 600; font-size: clamp(34px, 7vw, 52px); line-height: 1.05; }
.tagline { font-size: clamp(17px, 3vw, 20px); margin-top: 6px; }
.lead { font-size: clamp(17px, 3vw, 20px); text-align: center; margin-top: 10px; }
@media (max-width: 479px) { .masthead .logo svg { width: 96px; } }
.store-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.store-top .intro { min-width: 0; gap: 10px; }
.store-top { padding-bottom: 8px; }
.store-top .sub { max-width: 52ch; }


/* The shopping list. Ticks itself off as you go. */
.list {
  position: relative; justify-self: end; width: 250px; max-width: 100%;
  background: var(--paper-2); border: 3px solid var(--ink); padding: 18px 16px 12px; transform: rotate(-2deg);
  box-shadow: 5px 5px 0 var(--ink);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, #D8E4EA 27px 28px); background-position: 0 22px;
}
@media (max-width: 599px) { .list { justify-self: start; transform: rotate(-1deg); width: 280px; } }
.list .pin { position: absolute; top: -12px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--red); border: 3px solid var(--ink); }
.list-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.list ol { list-style: none; margin: 0; padding: 0; display: grid; }
.list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; line-height: 28px; font-weight: 600; }
.list .box { width: 18px; height: 18px; border: 3px solid var(--ink); background: var(--paper); display: grid; place-items: center; }
.list li.done .box::after { content: ""; width: 10px; height: 5px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: translateY(-2px) rotate(-45deg); }
.list li.done { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; color: var(--muted); }
.list-foot { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; }
.store-grid .list { justify-self: stretch; width: auto; transform: rotate(1.5deg); }
@media (max-width: 759px) { .store-grid .list { width: 280px; transform: rotate(-1deg); } }

/* The nudge: until a shop is picked, the shops hop one after another down the street. */
.street:not(.has-pick) .shop { animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.3s); }
@keyframes bob { 0%, 8%, 100% { transform: translateY(0); } 3% { transform: translateY(-10px); } 6% { transform: translateY(0); } 7% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .street:not(.has-pick) .shop { animation: none; } }
.intro .sub { font-size: clamp(17px, 3vw, 21px); color: var(--muted); }
.crumb {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  background: none; border: none; padding: 0;
  font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: 3px;
}

/* The high street. Scrolls sideways; the town is longer than the screen. */
.street {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  border: 4px solid var(--ink); border-radius: 18px; background: var(--paper);
  scrollbar-width: thin; scrollbar-color: var(--ink) var(--pave);
}
.street-inner {
  position: relative; isolation: isolate; display: flex; align-items: flex-end; gap: 10px;
  padding: 56px 28px 0; width: max-content; min-width: 100%;
}
.street-inner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px; z-index: -1;
  background: linear-gradient(var(--pave) 0 20px, var(--ink) 20px 23px, var(--road) 23px);
}
.street-inner::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 26px, transparent 26px 44px);
}
.street-inner > * { padding-bottom: 76px; scroll-snap-align: center; }
.bunting { position: absolute; left: 0; top: 8px; padding-bottom: 0 !important; pointer-events: none; }
.shop {
  background: none; border: none; padding: 0 0 76px; width: 150px; flex: none;
  position: relative; z-index: 1; transition: transform 120ms ease;
}
.shop svg { width: 150px; height: auto; }
.shop:hover, .shop:focus-visible { transform: translateY(-6px); }
.shop:active { transform: translateY(2px); }
.shop.selected { transform: translateY(-8px); }
.lamp { width: 30px; flex: none; position: relative; z-index: 1; }
.lamp svg { width: 30px; height: auto; }
.street-wrap { position: relative; min-width: 0; max-width: 100%; }

/* Snow. Everything here hangs off data-snow on <html>, set by snow.js.
   Without that attribute none of it applies and the site is as it was. */
.snow-cap, .snow-only { display: none; }
.lights { display: none; position: absolute; left: 0; top: 8px; padding-bottom: 0 !important; pointer-events: none; }
.snowfall { display: none; }
html[data-snow] { --dusk: #2F4A6B; --dusk-road: #4A5F7A; --snow: #FFFFFF; }
html[data-snow] .street { background: var(--dusk); }
html[data-snow] .street-inner::after { background: linear-gradient(var(--snow) 0 20px, var(--ink) 20px 23px, var(--dusk-road) 23px); }
html[data-snow] .street .f-sky { fill: var(--yellow); }
html[data-snow] .snow-cap { display: inline; fill: var(--snow); }
html[data-snow] .snow-only { display: inline; }
html[data-snow] .bunting { display: none; }
html[data-snow] .lights { display: block; }
html[data-snow] .snowfall { display: block; position: absolute; inset: 4px; border-radius: 14px; overflow: hidden; pointer-events: none; z-index: 1; }
.flake {
  position: absolute; left: var(--x); top: -12px; width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--snow); opacity: var(--o); animation: fall var(--d) linear var(--delay) infinite;
}
@keyframes fall { from { transform: translate(0, 0); } to { transform: translate(var(--drift), var(--fall, 340px)); } }
@media (prefers-reduced-motion: reduce) { .flake { animation: none; top: var(--y); } }
.chev {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--ink); background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink);
  font-size: 30px; line-height: 1; padding: 0 0 4px; display: grid; place-items: center; z-index: 2;
}
.chev.l { left: -6px; } .chev.r { right: -6px; }
.chev[hidden] { display: none; }
.chev:active { transform: translateY(-50%) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .shop, .pack { transition: none; } }

/* The store. Two glass-door chillers under hanging signs, wire racks, a floor. */
.store { border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--paper); scroll-margin-top: 12px; }
.aisle { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; padding: 24px 16px 18px; align-items: stretch; }
.aisle.three { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); gap: 14px; }
@media (max-width: 599px) {
  .aisle, .aisle.three {
    display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch;
    padding: 24px 16px 18px; scrollbar-width: thin; scrollbar-color: var(--ink) var(--pave);
  }
  .aisle .unit { flex: 0 0 84%; scroll-snap-align: center; }
}
.unit { display: grid; grid-template-rows: auto 1fr; gap: 0; justify-items: center; }
.sign {
  background: var(--green); border: 4px solid var(--ink); padding: 6px 22px; margin-bottom: 14px;
  font-weight: 600; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; position: relative;
}
.chiller {
  position: relative; width: 100%; border: 4px solid var(--ink); border-radius: 8px; background: var(--sky);
  padding: 20px 10px 4px; overflow: hidden; display: grid; align-content: space-evenly;
}
.rail {
  position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 3; pointer-events: none;
  background: var(--shop, var(--sky-2)); border-bottom: 4px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}

.chiller::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 12%, rgba(255,253,246,0.32) 12%, rgba(255,253,246,0.32) 20%, transparent 20%, transparent 44%, rgba(255,253,246,0.3) 44%, rgba(255,253,246,0.3) 49%, transparent 49%);
}
.chiller.open { background: var(--paper-2); border-radius: 4px; }
.chiller.open::before { display: none; }
.chiller.open .rail { background: var(--shop, var(--brown)); }
.chiller.open .shelf::after { background: var(--brown); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); height: 10px; }
.handle { position: absolute; top: 46%; width: 8px; height: 56px; border: 3px solid var(--ink); border-radius: 4px; background: var(--paper-2); z-index: 3; pointer-events: none; }
.store.open .pack { animation: settle 450ms ease-out both; }
@keyframes settle { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .store.open .pack { animation: none; }
}
.handle.solo { right: 10px; }
.shelf { position: relative; display: grid; gap: 8px; align-items: end; padding: 14px 6px 0; }
.shelf::after {
  content: ""; display: block; grid-column: 1 / -1; height: 8px; margin: 0 -2px;
  border-top: 3px solid var(--wire); border-bottom: 3px solid var(--wire);
  background: repeating-linear-gradient(90deg, transparent 0 28px, var(--wire) 28px 31px);
}
.pack { background: none; border: none; padding: 0; display: grid; gap: 0; justify-items: center; transition: transform 120ms ease; position: relative; z-index: 1; }
.pack svg { width: 100%; max-width: 150px; height: auto; }
.pack:hover, .pack:focus-visible { transform: translateY(-4px); }
.pack.on .ticket { background: var(--red); color: var(--paper-2); }
.pack:active { transform: translateY(2px); }
.ticket {
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--yellow); border: 2px solid var(--ink); padding: 2px 8px; white-space: nowrap;
  margin-top: 4px; margin-bottom: -16px; position: relative; z-index: 3;
}

/* Shop formats. Each one hangs off data-format on .store, set from the shop's `format` in
   supply.js, the way snow hangs off data-snow, so a shop without one is untouched. The shelves
   and items are the same everywhere (that sameness is the point); only the shell changes. */
/* The floor: a band along the foot of the shop that stays put, and one prop standing on it
   under each unit. A prop is inside its unit, so on a phone it slides sideways with the unit
   and keeps its size (Andy, 2026-11-06: fitting all three across a phone made them tiny). */
.store[data-format] { position: relative; }
.shop-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; }
.shop-floor::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; border-top: 4px solid var(--ink); background: var(--floor); }
/* The units stand in front of the band, and the props' feet reach down onto it. */
.store[data-format] .aisle { position: relative; z-index: 1; padding-bottom: 12px; }
/* Every prop gets the same height of row, the tallest drawing's, so the three units stay level. */
.prop { height: 120px; margin-top: 6px; display: grid; align-items: end; }
.prop svg { height: 104px; width: auto; }
.prop-tree svg { height: 120px; }
/* A basket is a small thing: at full height it stood taller than the trolleys beside it. */
.prop-baskets svg { height: 72px; }

/* Discounter. */
.store[data-format="discounter"] { background: var(--paper-2); }
.store[data-format="discounter"] .shop-floor::before {
  background: repeating-linear-gradient(90deg, var(--floor) 0 86px, var(--wire) 86px 88px);
}
/* Plain boards on chains, not framed signs. */
.store[data-format="discounter"] .sign {
  background: var(--yellow); font-family: var(--mono); font-weight: 700; font-size: 17px;
  width: 78%; text-align: center; padding: 5px 8px;
}
.store[data-format="discounter"] .sign::before,
.store[data-format="discounter"] .sign::after { content: ""; position: absolute; top: -28px; width: 4px; height: 24px; background: var(--ink); }
.store[data-format="discounter"] .sign::before { left: 14px; }
.store[data-format="discounter"] .sign::after { right: 14px; }
/* The fridges keep their glass doors, the shine across them and the handle (Andy, 2026-11-06).
   Only what is inside changes. Every shelf is the box the stock came in: a darker inside
   behind the items, a front lip carrying a stripe of the shop's colour. */
.store[data-format="discounter"] .shelf { padding: 12px 12px 0; }
.store[data-format="discounter"] .shelf::before {
  content: ""; position: absolute; left: 0; right: 0; top: 34%; bottom: 0;
  background: var(--card-in); border: 3px solid var(--ink);
}
.store[data-format="discounter"] .shelf::after,
.store[data-format="discounter"] .chiller.open .shelf::after {
  height: 26px; margin: 0 -12px; border: 3px solid var(--ink); position: relative;
  background: linear-gradient(var(--card) 0 5px, var(--shop) 5px 12px, var(--card) 12px);
}
/* Room on the right of a fridge so the door handle does not sit on top of a box. */
.store[data-format="discounter"] .chiller:not(.open) { padding-right: 30px; }
/* The Protein unit: no shelving at all, boxes stacked on a pallet. */
.store[data-format="discounter"] .unit { grid-template-rows: auto 1fr auto; }
.store[data-format="discounter"] .chiller.open { background: none; border: none; padding: 0; overflow: visible; align-content: end; }
.store[data-format="discounter"] .chiller.open .rail { display: none; }
.store[data-format="discounter"] .chiller.open .shelf { margin-top: -3px; }
.pallet { width: 100%; height: 30px; }
/* Tickets stuck on by hand. */
.store[data-format="discounter"] .ticket { background: var(--paper-2); transform: rotate(-2deg); }
.store[data-format="discounter"] .pack:nth-child(even) .ticket { transform: rotate(1.5deg); }
.store[data-format="discounter"] .pack.on .ticket { background: var(--red); }

/* Food hall. */
.store[data-format="foodhall"] .shop-floor::before {
  background: repeating-linear-gradient(90deg, var(--brown) 0 62px, var(--ink) 62px 64px);
}
/* Chalkboards in a wooden frame, hung a little off level. */
.store[data-format="foodhall"] .sign {
  background: var(--slate); color: var(--paper-2); text-transform: none; letter-spacing: 0.02em; font-size: 21px;
  padding: 5px 22px; border-radius: 4px; box-shadow: inset 0 0 0 3px var(--brown); transform: rotate(-1.5deg);
}
.store[data-format="foodhall"] .unit:nth-child(2) .sign { transform: rotate(1.2deg); }
/* Warm light behind the glass, and a scalloped awning in the shop's colour. */
.store[data-format="foodhall"] .chiller { background: var(--warm); padding-top: 34px; }
.store[data-format="foodhall"] .chiller.open { background: var(--paper-2); }
.store[data-format="foodhall"] .rail { height: 18px; background: var(--shop); }
.store[data-format="foodhall"] .rail::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 3px); height: 11px;
  background: radial-gradient(circle at 50% 0, var(--shop) 0 7px, var(--ink) 7.5px 10px, transparent 10.5px) 0 0 / 20px 11px repeat-x;
}
.store[data-format="foodhall"] .handle { background: var(--yellow); height: 76px; top: 42%; }
/* Wooden shelves everywhere, not wire. */
.store[data-format="foodhall"] .shelf::after { background: var(--brown); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); height: 10px; }
/* Chalk tickets. */
.store[data-format="foodhall"] .ticket {
  background: var(--slate); color: var(--paper-2); font-family: var(--display); font-weight: 600; font-size: 12.5px;
  text-transform: none; letter-spacing: 0.01em; border-radius: 3px;
}
/* Item names drop their "A " and are no longer in capitals here, so the first letter needs lifting. */
.store[data-format="foodhall"] .ticket::first-letter { text-transform: uppercase; }
.store[data-format="foodhall"] .pack.on .ticket { background: var(--red); }
/* A lamp hanging in each gap between units. The department store's spotlight and the
   hypermarket's star hang in the same place. */
.store[data-format="foodhall"] .unit { position: relative; }
.pendant, .spot, .star { position: absolute; top: -24px; right: -22px; width: 30px; height: 64px; z-index: 4; pointer-events: none; }

/* Superstore and high street: two big shops, so both keep today's glass doors, the shine
   across them and the handle, and differ in everything round them. */
/* Superstore. */
.store[data-format="superstore"] { background: var(--paper-2); }
.store[data-format="superstore"] .shop-floor::before {
  background: repeating-linear-gradient(90deg, var(--floor) 0 44px, var(--paper-2) 44px 88px);
}
/* The site's basket drawing is orange; here it takes the shop's colour. */
.store[data-format="superstore"] .prop-baskets .f-orange { fill: var(--shop); }
/* Numbered aisle boards in the shop's colour, hung on two rods. The number counts the units. */
.store[data-format="superstore"] .aisle { counter-reset: aisle; }
.store[data-format="superstore"] .unit { counter-increment: aisle; }
.store[data-format="superstore"] .sign {
  background: var(--shop); display: flex; align-items: center; gap: 10px; padding: 5px 18px 5px 8px; font-size: 17px;
}
.store[data-format="superstore"] .sign::before {
  content: counter(aisle); display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--red); color: var(--paper-2);
  font-size: 15px; letter-spacing: 0;
}
.store[data-format="superstore"] .sign::after {
  content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 24px;
  background:
    linear-gradient(var(--ink) 0 0) 12px 0 / 4px 100% no-repeat,
    linear-gradient(var(--ink) 0 0) calc(100% - 12px) 0 / 4px 100% no-repeat;
}
/* A red band under the strip along the top of each unit. */
.store[data-format="superstore"] .chiller { padding-top: 30px; }
.store[data-format="superstore"] .rail,
.store[data-format="superstore"] .chiller.open .rail {
  height: 22px; background: linear-gradient(var(--shop) 0 10px, var(--ink) 10px 13px, var(--red) 13px);
}
/* Shelf edges: a white strip with barcode ticks, not wire. */
.store[data-format="superstore"] .shelf::after,
.store[data-format="superstore"] .chiller.open .shelf::after {
  height: 13px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  background: var(--paper-2) repeating-linear-gradient(90deg, transparent 0 30px, var(--ink) 30px 32px, transparent 32px 35px, var(--ink) 35px 36px, transparent 36px 39px, var(--ink) 39px 41px, transparent 41px 64px);
}

/* High street. */
.store[data-format="highstreet"] .shop-floor::before {
  background-color: var(--pave);
  background-image:
    radial-gradient(circle, var(--brown) 0 2.5px, transparent 3px),
    radial-gradient(circle, var(--orange) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--wire) 0 2px, transparent 2.5px);
  background-size: 37px 17px, 53px 13px, 29px 19px;
  background-position: 4px 3px, 17px 8px, 22px 1px;
}
/* Lozenges in the shop's colour on a single rod. */
.store[data-format="highstreet"] .sign {
  background: var(--shop); border-radius: 999px; text-transform: none; letter-spacing: 0.02em; font-size: 20px; padding: 4px 26px;
}
.store[data-format="highstreet"] .sign::before {
  content: ""; position: absolute; left: 50%; margin-left: -2px; top: -28px; width: 4px; height: 24px; background: var(--ink);
}
/* Arched fridges; the glass, the shine and the handle stay. */
.store[data-format="highstreet"] .chiller { border-radius: 30px 30px 8px 8px; padding-top: 34px; }
.store[data-format="highstreet"] .rail { height: 20px; }
.store[data-format="highstreet"] .handle { background: var(--shop); }
/* Solid shelves with an edge in the shop's colour. */
.store[data-format="highstreet"] .shelf::after,
.store[data-format="highstreet"] .chiller.open .shelf::after {
  height: 11px; background: var(--shop); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
/* White lozenge tickets. */
.store[data-format="highstreet"] .ticket { background: var(--paper-2); border-radius: 999px; padding: 2px 10px; }
.store[data-format="highstreet"] .pack.on .ticket { background: var(--red); }

/* Department store and corner shop: both keep today's glass doors, the shine across them
   and the handle. */
/* Department store. */
/* A lighting track across the ceiling. The signs and the spotlights hang from it. */
.store[data-format="department"]::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; background: var(--ink); }
.store[data-format="department"] .shop-floor::before {
  background: conic-gradient(var(--ink) 25%, var(--paper-2) 0 50%, var(--ink) 0 75%, var(--paper-2) 0) 0 0 / 34px 34px;
}
/* Black boards with a gold line, on two short rods from the track. */
.store[data-format="department"] .sign {
  color: var(--paper-2); font-size: 16px; letter-spacing: 0.2em; padding: 7px 20px 11px 24px; border-radius: 2px;
  background: linear-gradient(var(--ink) 0 calc(100% - 8px), var(--yellow) calc(100% - 8px) calc(100% - 5px), var(--ink) calc(100% - 5px));
}
.store[data-format="department"] .sign::before,
.store[data-format="department"] .sign::after { content: ""; position: absolute; top: -16px; width: 4px; height: 12px; background: var(--ink); }
.store[data-format="department"] .sign::before { left: 12px; }
.store[data-format="department"] .sign::after { right: 12px; }
/* A black strip over a line of the shop's colour; a long black handle. */
.store[data-format="department"] .chiller { padding-top: 30px; }
.store[data-format="department"] .rail,
.store[data-format="department"] .chiller.open .rail { height: 20px; background: linear-gradient(var(--ink) 0 10px, var(--shop) 10px); }
.store[data-format="department"] .handle { background: var(--ink); height: 76px; top: 42%; }
/* Slim black shelves in every unit. */
.store[data-format="department"] .shelf::after,
.store[data-format="department"] .chiller.open .shelf::after { height: 8px; background: var(--ink); border: none; }
/* Black labels. */
.store[data-format="department"] .ticket { background: var(--ink); color: var(--paper-2); }
.store[data-format="department"] .pack.on .ticket { background: var(--red); }
/* A spotlight in each gap between units, the second one turned the other way. It is placed
   by the pendant's rule above. */
.store[data-format="department"] .unit { position: relative; }
.store[data-format="department"] .unit:nth-child(2) .spot { transform: scaleX(-1); }

/* Corner shop. */
/* A tiled ceiling: plain tile, lit panel, plain tile, repeated. */
.store[data-format="convenience"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--paper-2) 0 58px, var(--ink) 58px 60px, var(--yellow) 60px 118px, var(--ink) 118px 120px, var(--paper-2) 120px 178px, var(--ink) 178px 180px);
}
.store[data-format="convenience"] .shop-floor::before {
  background: repeating-linear-gradient(90deg, var(--sky) 0 52px, var(--sky-2) 52px 54px);
}
/* The sign is a lit fascia fixed to the top of its unit, with a band of the shop's colour
   along its foot. It replaces both the hanging sign and the strip along the top of the unit. */
.store[data-format="convenience"] .sign {
  width: 100%; margin-bottom: -4px; text-align: center; font-size: 17px; padding: 6px 8px 13px; border-radius: 10px 10px 0 0;
  background: linear-gradient(var(--paper-2) 0 calc(100% - 8px), var(--ink) calc(100% - 8px) calc(100% - 5px), var(--shop) calc(100% - 5px));
}
.store[data-format="convenience"] .chiller,
.store[data-format="convenience"] .chiller.open { border-radius: 0 0 8px 8px; padding-top: 10px; }
.store[data-format="convenience"] .rail { display: none; }
/* White tickets with a tab of the shop's colour. */
.store[data-format="convenience"] .ticket { background: var(--paper-2); padding-left: 14px; box-shadow: inset 7px 0 0 var(--shop); }
.store[data-format="convenience"] .pack.on .ticket { background: var(--red); }

/* Hypermarket: keeps today's glass doors, the shine across them and the handle. */
.store[data-format="hypermarket"] { background: var(--paper-2); }
/* A warehouse floor: grey, with a yellow lane line painted along it. */
.store[data-format="hypermarket"] .shop-floor::before {
  background: linear-gradient(var(--floor) 0 11px, var(--ink) 11px 13px, var(--yellow) 13px 19px, var(--ink) 19px 21px, var(--floor) 21px);
}
/* Boards in the shop's colour with a pointer down at the unit. The pointer is a small
   square turned on its corner; its top half sits over the board's lower edge, so the
   outline runs round board and pointer as one shape. */
.store[data-format="hypermarket"] .sign { background: var(--shop); border-radius: 6px; padding: 6px 24px; font-size: 17px; margin-bottom: 20px; }
.store[data-format="hypermarket"] .sign::after {
  content: ""; position: absolute; left: 50%; bottom: -11px; width: 14px; height: 14px; margin-left: -7px;
  background: var(--shop); border-right: 4px solid var(--ink); border-bottom: 4px solid var(--ink); transform: rotate(45deg);
}
/* A yellow band under the strip along the top of each unit, and a yellow handle. */
.store[data-format="hypermarket"] .chiller { padding-top: 30px; }
.store[data-format="hypermarket"] .rail,
.store[data-format="hypermarket"] .chiller.open .rail {
  height: 22px; background: linear-gradient(var(--shop) 0 10px, var(--ink) 10px 13px, var(--yellow) 13px);
}
.store[data-format="hypermarket"] .handle { background: var(--yellow); }
/* Shelf edges: stripes of the shop's colour and cream, in every unit. */
.store[data-format="hypermarket"] .shelf::after,
.store[data-format="hypermarket"] .chiller.open .shelf::after {
  height: 13px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(135deg, var(--shop) 0 8px, var(--paper-2) 8px 16px);
}
/* Tickets in the shop's colour. */
.store[data-format="hypermarket"] .ticket { background: var(--shop); }
.store[data-format="hypermarket"] .pack.on .ticket { background: var(--red); }
/* A star in each gap between units. It is placed by the pendant's rule above. */
.store[data-format="hypermarket"] .unit { position: relative; }

/* The facts, under the fridge. */
.panel {
  margin-top: 18px; border: 4px solid var(--ink); border-radius: 18px; background: var(--paper); overflow: hidden;
  font-family: var(--mono); font-size: 15px; line-height: 1.55; scroll-margin-top: 12px;
  animation: settle 300ms ease-out both;
}
.panel .sheet-in { max-width: none; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); padding-bottom: 20px; }
@media (min-width: 640px) { .panel .sheet-in { padding-left: 28px; padding-right: 28px; } }
.panel .head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; }
.panel .head svg { width: 88px; height: 88px; }
.panel .head .what { font-size: clamp(22px, 4vw, 28px); font-weight: 600; line-height: 1.15; font-family: var(--display); }

/* The not-found page. */
.notfound { max-width: 560px; margin: 12vh auto 0; display: grid; gap: 14px; justify-items: center; text-align: center; }
.notfound .btn { font-size: 16px; }

/* Resources and About: reading pages, narrower than the shop. */
.page { max-width: 720px; margin: 0 auto; }
.page > section { display: grid; gap: 12px; scroll-margin-top: 64px; }
.page h2 { font-size: 26px; margin-top: 10px; }
.page h3 { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.jump {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; gap: 10px; flex-wrap: wrap;
  background: var(--paper); padding: 10px 0; border-bottom: 3px solid var(--ink);
}
.jump button { font-weight: 600; font-size: 15px; background: var(--paper-2); border: 3px solid var(--ink); padding: 5px 12px; box-shadow: 3px 3px 0 var(--ink); }
.jump button span { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 4px; }
.jump button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.books { display: grid; gap: 12px; }
.book {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: stretch; text-decoration: none;
  background: var(--paper-2); border: 3px solid var(--ink); padding: 12px 14px; box-shadow: 4px 4px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.book:hover, .book:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.book .spine, .org .spine { background: var(--red); border: 3px solid var(--ink); }
.book:nth-child(2n) .spine, .org:nth-child(2n) .spine { background: var(--blue); }
.book:nth-child(3n) .spine, .org:nth-child(3n) .spine { background: var(--yellow); }
.book:nth-child(4n) .spine, .org:nth-child(4n) .spine { background: var(--green); }
.book .t, .book .a, .book .l, .org .a { display: block; }
.book .t { font-weight: 600; font-size: 20px; line-height: 1.15; text-decoration: underline; text-underline-offset: 3px; }
.book .a, .org .a { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.book .l { font-size: 15px; line-height: 1.5; }
.books .note { margin-top: 2px; }
.orgs { display: grid; gap: 12px; }
.org {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: stretch; text-decoration: none;
  background: var(--paper-2); border: 3px solid var(--ink); padding: 12px 14px; box-shadow: 4px 4px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.org .body { display: grid; gap: 4px; }
.org:hover, .org:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.org .n { font-weight: 600; font-size: 18px; text-decoration: underline; text-underline-offset: 3px; }
.org .a { margin: 0; }
.org .l { font-size: 15px; line-height: 1.5; color: var(--muted); }
.prose { display: grid; gap: 16px; font-size: 19px; line-height: 1.6; max-width: 62ch; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.contact .addr { font-family: var(--mono); font-size: 17px; font-weight: 700; user-select: all; }
@media (prefers-reduced-motion: reduce) { .book, .org { transition: none; } }

/* The basket: cards stacking under the fridge, one headline fact each. */
.basket { display: grid; gap: 10px; margin-top: 16px; font-family: var(--mono); }
.basket:empty { display: none; }
.card-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--paper-2); border: 3px solid var(--ink); padding: 10px 12px; animation: settle 350ms ease-out both;
}
.card-row svg { width: 64px; height: 64px; }
.card-body { font-size: 13px; line-height: 1.55; }
.card-body .chip { font-size: 12px; }
.card-actions { display: grid; gap: 4px; justify-items: end; }
.link { background: none; border: none; padding: 0; font-family: var(--mono); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.till-row { display: flex; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 480px) { .card-row { grid-template-columns: 52px minmax(0, 1fr); } .card-row svg { width: 52px; height: 52px; } .card-actions { grid-column: 2; justify-items: start; grid-auto-flow: column; gap: 14px; } }
.till-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.till-item svg { width: 64px; height: 64px; }
.till-item .what { font-family: var(--display); font-size: clamp(20px, 4vw, 26px); font-weight: 600; }

/* The sheet. Slides up over the store. Just the facts and the counter. */
.backdrop { position: fixed; inset: 0; background: rgba(26, 26, 26, 0.55); z-index: 20; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  max-height: min(92dvh, 92vh); overflow-y: auto;
  background: var(--paper); border-top: 4px solid var(--ink); border-radius: 22px 22px 0 0;
  padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px));
  font-family: var(--mono); font-size: 15px; line-height: 1.55;
  transform: translateY(0); animation: rise 260ms ease-out;
}
@keyframes rise { from { transform: translateY(40px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 640px) {
  .sheet {
    left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%);
    width: min(720px, calc(100vw - 48px)); max-height: min(88vh, 900px);
    border: 4px solid var(--ink); border-radius: 22px; box-shadow: 10px 10px 0 var(--ink);
    padding: 0 0 24px; animation: pop 200ms ease-out;
  }
  .sheet .grab { display: none; }
  .sheet .sheet-in { padding-left: 30px; padding-right: 30px; max-width: none; }
}
@keyframes pop { from { transform: translate(-50%, -50%) scale(0.96); opacity: 0.4; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-in {
  max-width: 720px; margin: 0 auto; display: grid; gap: 16px; padding-top: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 5px 18px; border-bottom: 4px solid var(--ink); line-height: 1.2;
}
.band .pre { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.band .band-shop { font-family: var(--display); font-weight: 600; font-size: 20px; }
.made-wrap { display: grid; gap: 10px; }
.made-box { display: grid; gap: 8px; background: var(--paper-2); border: 3px solid var(--ink); padding: 12px 14px; }
.made { font-size: 16px; line-height: 1.6; }
.chip { background: var(--yellow); border: 2px solid var(--ink); padding: 1px 8px; font-weight: 700; white-space: nowrap; }
.owners { font-size: 12px; color: var(--muted); }
.facts { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; counter-reset: f; }
.fact { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.fact .num { counter-increment: f; font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1; color: var(--red); }
.fact .num::before { content: counter(f); }
.fact .src { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
/* "Meet the animal": plain sentences, each with its own source, no numbers. */
.meet { display: grid; gap: 14px; }
.meet p { margin: 0; }
/* A small drawing sits to the left of the line it belongs to. */
.meet .row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; }
.meet .pic svg { width: 72px; height: auto; display: block; }
@media (max-width: 480px) { .meet .row { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; } .meet .pic svg { width: 58px; } }
.meet .src { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
mark.hi { background: var(--yellow); color: var(--ink); padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.grab { width: 48px; height: 6px; background: var(--ink); border-radius: 3px; margin: 0 auto; }
.sheet .head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; }
.sheet .head svg { width: 88px; height: 88px; }
.sheet .head .where { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.sheet .head .what { font-size: clamp(20px, 4vw, 26px); font-weight: 700; line-height: 1.15; font-family: var(--display); }
.sheet .head .line { color: var(--red); font-weight: 700; }
.mono .f-paper, .mono .f-yellow, .mono .f-blue, .mono .f-orange, .mono .f-green,
.mono .f-pink, .mono .f-rose, .mono .f-brown, .mono .f-sky, .mono .f-chickpea, .mono .f-nutbrown { fill: var(--paper); }
.mono .f-red { fill: var(--red); }
.k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
/* Sections of the facts panel. Every block sits 16px from the next, which made
   a heading as close to the section above as to its own content. A heading now
   gets more room above and less below, so each section reads as one group, and
   the counter is set apart the same way. */
.panel .sheet-in > .k { margin-top: 22px; margin-bottom: -2px; }
.panel .sheet-in > .ticker { margin-top: 22px; }
.lived { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; counter-reset: f; }
.lived li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.lived li::before { counter-increment: f; content: counter(f) "."; font-weight: 700; color: var(--red); }
.lived .src { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.ticker { display: grid; gap: 4px; padding: 14px 0; border-top: 3px dashed var(--ink); border-bottom: 3px dashed var(--ink); }
.ticker .n { font-size: clamp(34px, 8vw, 56px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--red); }
.ticker .l { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
/* The yearly total behind the counter, with its source, in the panel's ordinary text. */
.ticker .yr { margin-top: 8px; }
.ticker .yr .src { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 0; padding: 10px 14px;
  box-shadow: 4px 4px 0 var(--ink); text-decoration: none; display: inline-block;
}
.btn.go { background: var(--red); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

/* The receipt. The full paperwork behind "More info". */
.reveal { font-family: var(--mono); font-size: 15px; line-height: 1.55; }
.receipt { border: 3px solid var(--ink); background: var(--paper); }
.receipt > section { padding: 20px 18px; border-bottom: 3px dashed var(--ink); display: grid; gap: 12px; }
.receipt > section:last-child { border-bottom: none; }
.receipt .head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.receipt .head svg { width: 96px; height: 96px; }
.receipt .head .where { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.receipt .head .what { font-size: clamp(20px, 4vw, 26px); font-weight: 700; line-height: 1.15; }
.receipt .head .line { color: var(--red); font-weight: 700; }
.who { display: grid; gap: 10px; }
.who .co { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.who .co .n { font-weight: 700; }
.who .co .own { font-size: 13px; text-align: right; }
.who .co .blurb { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.note { font-size: 13px; color: var(--muted); }
.labels { display: grid; gap: 8px; }
.labels .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding-top: 8px; border-top: 1px solid #B9B09A; }
.labels .row:first-child { border-top: none; padding-top: 0; }
.labels .says { font-weight: 700; }
.foot { font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
.foot a { word-break: break-word; }
.toast { font-size: 13px; min-height: 1.2em; }