/* ==========================================================================
   Our Story
   ========================================================================== */

/* Hero (rounds 385–389, owner's illustration: a drawn village street with two stores, assets/images/story/village-*.webp).
   Round 389: the copy, the drawing and the yellow chapter strip share ONE screen under the navbar at every width (the section is
   100svh less the navbar's 80; it only grows when the copy alone would not fit, e.g. a phone held sideways).
   Desktop (from 1024): eyebrow + the headline (Gilroy 700, --text-hero) in columns 1–7, the lede and one secondary button in
   9–12, bottoms level; the drawing fills the section behind them, anchored on the strip. Phones and tablets: the copy, then the
   drawing filling whatever height is left (cover, anchored at its foot), then the strip. The sky is cut out of both drawings,
   so the page grid shows through; the colour drawing paints in under the pointer on a canvas over the B/W one (story-paint.js). */
.story-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--space-4) - var(--space-9));
  padding-top: var(--space-6);
  padding-bottom: 0;
  overflow: hidden;
}
.story-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-5);
  align-items: end;
}
.story-hero__grid > * { grid-column: 1 / -1; min-width: 0; }
.story-hero__head { display: grid; gap: var(--space-4); }
.story-hero__head .eyebrow { display: block; }
.story-hero__title { margin: 0; font-size: var(--text-hero); line-height: var(--leading-hero); }
.story-hero__side { display: grid; justify-items: start; gap: var(--space-5); }
.story-hero__lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-wrap: pretty;
}
.story-hero__art { position: relative; flex: 1 0 var(--space-10); margin: var(--space-5) 0 0; }   /* takes the height that is left */
.story-hero__art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 100%;   /* phones: the store on the left */
}
.story-paint__canvas { position: absolute; pointer-events: none; }
.story-hero__art.is-paintable { cursor: crosshair; }
@media (min-width: 48em) {
  .story-hero { padding-top: var(--space-8); }
  .story-hero__art { margin-top: var(--space-6); }
  .story-hero__head { grid-column: 1 / 6; }
  .story-hero__side { grid-column: 6 / 9; }
  .story-hero__art img { object-position: 50% 100%; }
}
@media (min-width: 64em) {
  .story-hero { padding-top: var(--space-8); }   /* round 391: 48, the copy sits higher (was 80) */
  .story-hero__head { grid-column: 1 / 8; }
  .story-hero__side { grid-column: 9 / 13; }
  /* the drawing fills the section behind the copy, from the strip up, cropped at its sky and sides */
  .story-hero__art { position: absolute; inset: 0 0 calc(var(--leading-eyebrow) + var(--space-4) * 2); margin: 0; z-index: 0; }
}

/* Chapter strip (rounds 388–389, owner's reference): a full-width yellow band along the foot of the hero, with the page's
   chapters as Eyebrow links (black) jumping to their sections, centred as one line, the home value strip's sparkle between
   them (the same sparkle.svg, 8px, not turning), centred on the words' height. When the line is wider than the screen (phones,
   small tablets) it scrolls sideways inside the band instead of wrapping. From 1024 (round 390) the line spans the page grid: the
   first word starts on its first line, the last ends on its last, and words and sparkles are spaced evenly. */
.story-strip {
  position: relative;
  z-index: 1;
  flex: none;
  margin-top: auto;
  padding: var(--space-4) var(--margin);
  overflow-x: auto;
  scrollbar-width: none;
  color: var(--black);
  background-color: var(--yellow);
}
.story-strip::-webkit-scrollbar { display: none; }
.story-strip__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);   /* 16 between every chapter and sparkle, as in the value strips */
  width: max-content;
  margin: 0 auto;        /* centred while it fits; starts at the left edge when it scrolls */
  padding: 0;
  list-style: none;
}
.story-strip__list li { display: contents; white-space: nowrap; }   /* words and sparkles are all items of one row */
.story-strip__list li + li::before {   /* the sparkle between two chapters */
  content: "";
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  background-color: currentColor;
  -webkit-mask: url("/assets/icons/sparkle.svg") center / contain no-repeat;
  mask: url("/assets/icons/sparkle.svg") center / contain no-repeat;
}
.story-strip a {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.3em;
}
.story-strip a:hover, .story-strip a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; }
@media (min-width: 64em) {   /* round 390: first word on the grid's first line, last word on its last, equal space between every word and sparkle */
  .story-strip__list { width: auto; max-width: var(--container); justify-content: space-between; }
}
/* Why we started (rounds 362 / 411–415). The copy on the left (eyebrow, the two-line Heading, one Body paragraph). Round 415:
   the Bengaluru map is gone; on the right a store catalogue card (.catalog; Subko only since round 416, Food Stories removed): a white card with the
   one stroke and 24 padding; on top the 56px logo, the store's name (Subheading) and under it its distance and category (Body,
   grey; the distance is a placeholder), and at the right the primary "Order in app" button with an arrow; below, three of its products side by side: a square photo, the name on one line
   (Body, cut with an ellipsis) and the price on one line (Body, maroon). Real products and prices from each store's own site
   (design-research/scripts/fetch-products.js, read 2026-10-19). From 1024: copy 1–5, card 7–12 (round 417; was 6–12); below, copy then cards;
   phones list the products as rows (64px photo beside name and price). */
.why__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--head-gap);
  align-items: center;
}
.why__grid > * { grid-column: 1 / -1; min-width: 0; }
.why__copy { display: grid; gap: var(--space-4); }
.why__copy .eyebrow { display: block; }
.why__copy h2 { margin: 0; }
.why__lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-wrap: pretty;
}
.why__shelves { display: grid; gap: var(--gutter); }
.catalog {
  display: grid;
  gap: var(--space-5);
  padding: var(--card-pad);
  background-color: var(--neutral-0);
  border: var(--stroke);
  border-radius: var(--radius-md);
}
.catalog__head { display: flex; align-items: center; gap: var(--space-4); }
.catalog__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--logo-size);
  height: var(--logo-size);
  overflow: hidden;
  background-color: var(--tile, var(--neutral-100));
  border: var(--stroke);
  border-radius: var(--radius-md);
}
.catalog__logo img { display: block; width: 78%; height: 78%; object-fit: contain; }
.catalog__id { display: grid; flex: 1; min-width: 0; }
.catalog__cta { flex: none; }   /* round 416: the primary "Order in app" button with an arrow, at the right of the store row (a download link) */
@media (max-width: 29.99em) {   /* small phones: the button drops under the store name, full width */
  .catalog__head { flex-wrap: wrap; }
  .catalog__cta { flex-basis: 100%; }
}
.catalog__name {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}
.catalog__meta, .catalog__item-name, .catalog__price {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}
.catalog__meta { color: var(--neutral-600); }
.catalog__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.catalog__item { display: grid; min-width: 0; }
.catalog__item img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: var(--space-2); border-radius: var(--radius-md); background-color: var(--neutral-100); }
.catalog__item-name, .catalog__price { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog__price { color: var(--maroon); font-variant-numeric: tabular-nums; }
/* rounds 418–420: under the catalogue card, two store tiles (Ugaoo, Artzo since round 420: short names that never cut), side
   by side from 1440 and one per row below, the gutter between; laid out like the card's own store row (round 419): the 56px logo, then the name (Subheading) over its
   distance and category (Body, grey; distances are placeholders). */
.why__minis { display: grid; gap: var(--gutter); margin: 0; padding: 0; list-style: none; }   /* one per row below 1440 */
@media (min-width: 90em) { .why__minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* round 420: side by side from 1440, where short names (Ugaoo, Artzo) fit whole */
.mini {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--card-pad);
  background-color: var(--neutral-0);
  border: var(--stroke);
  border-radius: var(--radius-md);
}
.mini__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--logo-size);
  height: var(--logo-size);
  overflow: hidden;
  background-color: var(--tile, var(--neutral-100));
  border: var(--stroke);
  border-radius: var(--radius-md);
}
.mini__logo img { display: block; width: 78%; height: 78%; object-fit: contain; }
.mini__id { display: grid; min-width: 0; }
.mini__name {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini__meta {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--neutral-600);
}
@media (max-width: 47.99em) {   /* phones: each product a row, a 64px photo beside its name and price, so names are not cut */
  .catalog__items { grid-template-columns: minmax(0, 1fr); }
  .catalog__item { grid-template-columns: var(--space-9) minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
  .catalog__item img { grid-row: 1 / 3; margin-bottom: 0; }
  .catalog__item-name { align-self: end; }
  .catalog__price { align-self: start; }
}
@media (min-width: 48em) {
  .why__shelves { grid-column: 2 / 8; }
}
@media (min-width: 64em) {
  .why__copy { grid-column: 1 / 6; }
  .why__shelves { grid-column: 7 / 13; }   /* round 417: columns 7–12, a full empty column between copy and card (smaller product photos) */
}

/* Why it matters (rounds 365 / 404, owner's reference): a full-bleed photo (seen from inside a grocery bag; a man, or a woman
   on the next load: story-swap.js alternates them) under a dark maroon shade, the type in yellow on the page grid. Top row:
   "Why it matters" (Eyebrow) left, "Source: CB Insights" (Eyebrow, linked) right. Under it, left: "12–20 Million" and "75%"
   in Heading (52 on desktop) each over its line in Subheading (32). Bottom row: "Bengaluru is where we start" (Eyebrow) left,
   and right-aligned on the right "Our mission" (Subheading) over the mission in Heading. From 1024 one screen under the
   navbar. Phones and tablets: everything stacked on the left. The dotted India map of round 365 is gone. */
.site-main > section.matters { background-image: none; }
.matters {
  position: relative;
  overflow: hidden;
  color: var(--yellow);
  background-color: var(--black);
}
.matters__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.matters::after {   /* the shade: black (round 405; was deep maroon), heaviest at the edges where the type sits */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(24 24 24 / 0.72), rgb(24 24 24 / 0.24) 50%, rgb(24 24 24 / 0.72)),
    rgb(24 24 24 / 0.24);
  pointer-events: none;
}
.matters__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-6);
  align-items: start;
}
.matters__grid > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
.matters .eyebrow { display: block; color: inherit; }
.matters__src a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.matters__stats { display: grid; gap: var(--space-6); }
.matters__stat { display: grid; gap: var(--space-2); }
.matters__stat strong, .matters__mission h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: inherit;
  text-wrap: balance;
}
.matters__stat span, .matters__mission-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  line-height: var(--leading-subheading);
}
.matters__mission { display: grid; gap: var(--space-2); }
.matters__mission h2 { margin: 0; }
.matters__label { order: 0; }
.matters__stats { order: 1; }
.matters__mission { order: 2; }
.matters__src { order: 3; }
.matters__start { order: 4; }
@media (min-width: 64em) {
  .matters { display: flex; min-height: calc(100svh - var(--space-4) - var(--space-9)); }
  .matters > .container { flex: 1; }
  .matters__grid { grid-template-rows: auto auto 1fr; row-gap: var(--space-8); height: 100%; }
  .matters__label { grid-column: 1 / 7; grid-row: 1; }
  .matters__src { grid-column: 7 / 13; grid-row: 1; text-align: right; }
  .matters__stats { grid-column: 1 / 6; grid-row: 2; }
  .matters__start { grid-column: 1 / 6; grid-row: 3; align-self: end; }
  .matters__mission { grid-column: 8 / 13; grid-row: 3; align-self: end; justify-items: end; text-align: right; }   /* columns 8–12, right-aligned */
}

/* What we believe (round 393, owner's reference: a 4 × 2 grid of colour tiles and photos in a checkerboard). Each belief is one
   column of two squares, its text tile and a photo; the text sits on top in columns 1 and 3 and under the photo in 2 and 4, so
   the tiles alternate across and down. Text tiles: white with the one stroke (round 406; were yellow / maroon), 24 padding, the number
   (Eyebrow) at the top, the phrase (Subheading; no strike since round 406) and its line (Body) at the foot. Desktop: four beliefs of 3 grid
   columns from 1280; 1024–1279 and tablets two across (2 × 4 squares); phones one belief per row, text beside the photo,
   alternating sides (under 384: text above a 4:3 photo).
   Left out of the reference: the arrows (the tiles are not links) and its italics. Photos: two store fronts, two placeholders. */
.believe__head { display: grid; gap: var(--space-4); margin-bottom: var(--head-gap); }
.believe__head .eyebrow { display: block; }
.believe__head h2 { margin: 0; }
.beliefs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
.belief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.belief:nth-child(even) .belief__photo { order: -1; }   /* phones: the photo on the left every other row */
.belief__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--card-pad);
  color: var(--black);
  background-color: var(--neutral-0);
  border: var(--stroke);   /* round 406: every text tile white with the one stroke (were yellow / maroon) */
}
.belief__n {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.belief__title { margin: auto 0 0; color: inherit; text-wrap: balance; }   /* Subheading, pushed to the foot with its line */
.belief__line {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-wrap: pretty;
}
.belief__photo { position: relative; min-height: var(--space-12); margin: 0; overflow: hidden; background-color: var(--neutral-100); }   /* phones: as tall as its text tile */
.belief__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 23.99em) {   /* under 384: a half-width tile cannot hold "convenience" in Subheading, so text above a 4:3 photo */
  .belief { grid-template-columns: minmax(0, 1fr); }
  .belief__photo { aspect-ratio: 4 / 3; }
  .belief:nth-child(even) .belief__photo { order: 0; }   /* always text, then its photo */
}
@media (min-width: 48em) {   /* tablets: two beliefs side by side, each a column of two squares */
  .belief__photo { aspect-ratio: 1; }
  .beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belief { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .belief__text { aspect-ratio: 1; }
  .belief:nth-child(even) .belief__photo { order: 0; }
  .belief:nth-child(4n + 2) .belief__photo, .belief:nth-child(4n + 3) .belief__photo { order: -1; }   /* checkerboard in rows of two */
}
@media (min-width: 80em) {   /* from 1280: all four across, 3 grid columns each, text on top in columns 1 and 3 (1024–1279 keeps two across: a 198px tile cannot hold the text) */
  .beliefs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .belief:nth-child(4n + 3) .belief__photo { order: 0; }
  .belief:nth-child(even) .belief__photo { order: -1; }
}

/* Five checks (rounds 395–410). Round 410: the eyebrow and Heading on top, then five "Passed" stamps: ONE blank stamp image
   (assets/images/story/stamp-blank.webp: the owner's stamp with its lettering painted out by design-research/scripts/
   blank-stamp.js, so the rings, scalloped edge, sprig and paper grain stay) with the text set live in the site's styles on
   it: "Passed" (Eyebrow), a short rule, the check (Subheading), all in --yellow. From 1440 the five sit in one row across the
   grid (five equal cells, 229px at 1440, "Reputation" 161px wide inside the ring); below 1440 they wrap, centred, at 240px
   (three to a row at 1024–1439, two on tablets) so the word always fits; phones two to a row (Subheading 24).
   Class .seal (the site already has a global .stamp). */
.checks__head { display: grid; gap: var(--space-4); margin-bottom: var(--head-gap); }
.checks__head .eyebrow { display: block; }
.checks__head h2 { margin: 0; }
.checks__stamps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gutter);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.seal { position: relative; flex: 0 0 calc((100% - var(--gutter)) / 2); max-width: 11rem; }   /* phones: two to a row */
.seal img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
@media (max-width: 23.99em) { .seal { flex-basis: 100%; } }   /* under 384 a half-width stamp cannot hold "Reputation": one per row, 176px */
.seal__text {   /* the lettering band of the original stamp: centred, above the sprig */
  position: absolute;
  inset: 22% 8% 37%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--yellow);
  text-align: center;
}
.seal__label {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.seal__label::after {   /* the short rule under "Passed" */
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: var(--space-2);
  background-color: currentColor;
  opacity: 0.8;
}
.seal__word {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  white-space: nowrap;
}
@media (min-width: 48em) {
  .checks__stamps { max-width: calc(15rem * 3 + var(--gutter) * 2); }   /* at most three to a row below 1440 */
  .seal { flex: 0 0 15rem; max-width: none; }
}
@media (min-width: 90em) {   /* one row of five across the grid */
  .checks__stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }
}

/* The 30 that made it (rounds 378 / 400, owner's reference): from 1280 one grid of four cells across, 3 grid columns each, two
   rows: the head in the first cell (eyebrow, Heading, Body, top-aligned), then six real shopfronts (6:7, the store's name on
   the glass tag, each linking to its store page, a small zoom on hover) and, last, the yellow card "Download app / 22+ stores
   in the app" (a download link) at the same size. 1024–1279: the head above, three tiles across, the yellow card across the
   row under them; tablets two to a row (yellow card across); phones one. */
.wall__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--head-gap);
  align-items: center;
}
.wall__grid > * { grid-column: 1 / -1; min-width: 0; }
.wall__head { display: grid; gap: var(--space-4); }
.wall__head .eyebrow { display: block; }
.wall__head h2, .wall__head p { margin: 0; }
.wall__head p { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); }
.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mosaic__tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; color: inherit; text-decoration: none; background-color: var(--neutral-100); }
.mosaic__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-media) var(--ease-out); }
@media (hover: hover) { .mosaic__tile:hover img { scale: 1.04; } }
.mosaic__tile .glass-tag { position: absolute; left: var(--space-4); bottom: var(--space-4); max-width: calc(100% - var(--space-6)); overflow: hidden; text-overflow: ellipsis; }
/* round 383: the home stores section's last tile (.listing--more): yellow, the one stroke, "Download app" and the arrow along
   the top, "22+ stores in the app" (Subheading) at the foot; the arrow nudges 4px on hover */
.mosaic__more .mosaic__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--card-pad);
  background-color: var(--yellow);
  box-shadow: inset 0 0 0 var(--stroke-w) var(--stroke-color);
}
.mosaic__more-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.mosaic__more .eyebrow { display: block; }
.mosaic__more strong {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  text-wrap: balance;
}
.mosaic__more .icon { flex: none; transition: translate var(--dur-hover) var(--ease-out); }
@media (hover: hover) { .mosaic__more .mosaic__tile:hover .icon { translate: var(--space-1) 0; } }
@media (min-width: 48em) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic__more { grid-column: 1 / -1; }
  .mosaic__more .mosaic__tile { aspect-ratio: auto; min-height: calc(var(--space-12) + var(--space-9)); }
}
@media (min-width: 64em) {   /* 1024–1279: the head above, three tiles across all 12 columns, the yellow card across under them */
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 80em) {   /* round 400: head + seven tiles share one grid of 3-column cells, two rows */
  .wall__grid { row-gap: var(--gutter); align-items: stretch; }
  .wall__head { grid-column: 1 / 4; grid-row: 1; align-self: start; }
  .mosaic { display: contents; }
  .mosaic > li, .mosaic__more { grid-column: span 3; }
  .mosaic__tile, .mosaic__more .mosaic__tile { aspect-ratio: 1; min-height: 0; }   /* round 402: square (was 6:7) */
}

/* Is / isn't (rounds 371 / 401, owner's reference: a photo beside a coloured text panel, then the other way round). A centred
   head (Eyebrow, Heading), then two rows on the grid: the Food Stories shopfront (columns 1–6, 1:1 since round 403) beside the yellow "Pikvita
   is" panel (7–12), then the maroon "Pikvita isn't" panel (1–6, yellow type, the rows struck) beside the warehouse photo (7–12).
   Each panel is as tall as its photo: an Eyebrow label at the top, the three points centred in Subheading, a small Eyebrow
   caption for the photo at the foot. Tablet: the same at 1–4 / 5–8; phones: photo, then its panel, for each. */
.isnt__head { display: grid; justify-items: center; gap: var(--space-4); text-align: center; margin-bottom: var(--head-gap); }
.isnt__head .eyebrow { display: block; }
.isnt__head h2 { margin: 0; }
.isnt {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--gutter);
}
.isnt > * { grid-column: 1 / -1; min-width: 0; }
.isnt__photo { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); background-color: var(--neutral-100); }
.isnt__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }   /* the image never sets the row height */
.isnt__photo--is img { object-position: 50% 15%; }   /* the store sign in view */
.isnt__photo--not { order: 2; }   /* phones: the photo above its panel */
.isnt__box--not { order: 3; }
.isnt__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;   /* round 407: left-aligned (was centred) */
  gap: var(--space-6);
  padding: var(--card-pad);
  text-align: left;
  border-radius: var(--radius-md);
}
.isnt__box .eyebrow { display: block; color: inherit; }   /* yellow on the maroon panel */
.isnt__box ul { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: isnt; }
.isnt__box li {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  text-wrap: balance;
  position: relative;
  padding-left: var(--space-8);   /* round 407: room for the number */
  counter-increment: isnt;
}
.isnt__box li::before { content: counter(isnt); position: absolute; left: 0; top: 0; opacity: 0.56; }   /* 1, 2, 3 in the same Subheading, muted, never struck */   /* 1, 2, 3 in the same Subheading, muted */
.isnt__nowrap { white-space: nowrap; }   /* "60–120 min" never breaks at the dash */
.isnt__box--is { color: var(--black); background-color: var(--yellow); }
.isnt__box--not { color: var(--yellow); background-color: var(--maroon); }
.isnt__box--not s { text-decoration-thickness: 2px; }
/* round 408: the isn't panel mirrors the is panel: right-aligned, its numbers on the right edge */
.isnt__box--not { text-align: right; }
.isnt__box--not li { padding-left: 0; padding-right: var(--space-8); }
.isnt__box--not li::before { left: auto; right: 0; text-align: right; }
@media (min-width: 48em) {
  .isnt__box { aspect-ratio: 1; }   /* round 403: square like its photo, taller only if its text needs it */
  .isnt__photo { aspect-ratio: auto; align-self: stretch; }   /* the photo fills the row beside its panel */
  .isnt__photo--is { grid-column: 1 / 5; grid-row: 1; }
  .isnt__box--is { grid-column: 5 / 9; grid-row: 1; }
  .isnt__box--not { grid-column: 1 / 5; grid-row: 2; }
  .isnt__photo--not { grid-column: 5 / 9; grid-row: 2; }
}
@media (min-width: 64em) {
  .isnt__photo--is { grid-column: 1 / 7; }
  .isnt__box--is { grid-column: 7 / 13; }
  .isnt__box--not { grid-column: 1 / 7; }
  .isnt__photo--not { grid-column: 7 / 13; }
}

/* FAQ */
.faq__grid { display: grid; gap: var(--space-7); }
.faq__more { color: var(--color-text-secondary); }
.faq .area-check { margin-top: var(--space-2); }
@media (min-width: 64em) {
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--space-10); }
  .faq__head { position: sticky; top: calc(var(--header-h) + var(--space-6)); align-self: start; }
}

/* Three ways in (round 366, from story direction "Documentary", epilogue, on white in the site's own style): a centred head (eyebrow,
   Heading; the P mark removed in round 370), then three columns of 4 grid columns each (1–4, 5–8, 9–12) split by hairlines on the grid lines
   (round 367; were in the middle of the gutters): an Eyebrow label, the line in Subheading, one 48px secondary button (round 369: "Get the app" too;
   "Talk to us" and the "Nominate a store" collapsible, whose form opens under it). A hairline, then the manifesto line centred. Phones and tablets:
   the columns stacked, hairlines between them. */
.ways__head { display: grid; justify-items: center; text-align: center; margin-bottom: var(--head-gap); }
.ways__head .eyebrow { display: block; }
.ways__head h2 { margin: var(--space-4) 0 0; }
.ways__cols {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}
.ways__col {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  padding-block: var(--space-7);
}
.ways__col + .ways__col { border-top: var(--stroke); }
.ways__label { display: block; margin: 0; }
.ways__line {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  text-wrap: balance;
}
.ways__col > .btn, .ways__col > .nominate { margin-top: var(--space-6); }
.ways__col .nominate { display: grid; justify-items: stretch; width: 100%; }
.ways__col .nominate > summary { justify-self: center; }
.ways__col .nominate__form { width: 100%; text-align: left; }
.ways__more {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-5);
  border-top: var(--stroke);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
@media (min-width: 64em) {
  /* the three columns share their rows (subgrid), so the buttons start on one line and an open nominate form only grows its own column */
  .ways__cols { grid-template-rows: auto auto auto; }
  .ways__col { grid-column: span 4; grid-row: span 3; grid-template-rows: subgrid; padding-block: var(--space-2); }
  .ways__line { align-self: start; }
  .ways__col > .btn { align-self: start; }
  .ways__col + .ways__col { border-top: 0; }
  .ways__col + .ways__col { border-left: var(--stroke); }   /* round 367: the dividers on the grid lines (columns 5 and 9 start), full height */
  .ways__more { margin-top: var(--head-gap); }
}

/* Nominate (Collapsible) */
.nominate { width: 100%; margin-top: var(--space-2); }
.nominate > summary { list-style: none; }
.nominate[open] > summary { margin-bottom: var(--space-5); }
.nominate__form { display: grid; gap: var(--space-4); }
.nominate__result {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--text-body);
  background-color: var(--green-50);
  border-left: var(--stroke);
  border-radius: var(--radius-sm);
}
.nominate__result[hidden] { display: none; }
.nominate__text {
  margin: 0;
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  white-space: pre-wrap;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--stroke);
  border-radius: var(--radius-xs);
}
.nominate__form .field__error[hidden] { display: none; }