/* ==========================================================================
   Pan D Endz : afterfilm.css
   Styles for everything PDE.afterfilm.mount() builds below the scroll film.

   Scope: every rule starts inside .af, the class mount() puts on its root, so
   nothing here can leak into a concept's own film styles.
   Names: BEM, .af-<block>__<element>, state classes .is-*.
   Values: tokens only. No raw colour, size, or easing is written by hand.
   Order: mobile first. Wider screens are added in min-width blocks.
   Motion: transform, opacity, filter and clip-path only, and every one of them
   is switched off in the reduced motion block at the bottom of this file.
   ========================================================================== */

.af {
  display: block;
}

/* ============================================================ 1. THE LANDING
   The seam. This block starts at exactly the colour the film fades to, so the
   join is invisible. Copy sits bottom left against the gutter. */

.af-landing {
  display: flex;
  align-items: flex-end;
  min-height: 80vh;
  min-height: 80svh;
  padding: var(--s-7) var(--gutter) var(--s-6);
  background: var(--char);
  color: var(--cream);
}

.af-landing__inner {
  width: 100%;
}

.af-landing__title {
  margin: 0 0 var(--s-3);
}

.af-landing__body {
  /* 40ch, tighter than the usual 62ch measure: this is one spoken line, not a
     paragraph of reading. */
  max-width: 40ch;
  margin: 0 0 var(--s-4);
  color: var(--cream-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.af-landing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* =============================================================== 2. THE MELT
   Dark world into paper world. Both ends are live tokens, so the bottom of this
   gradient always matches the menu board even as the page warms up. */

.af-melt {
  height: 60vh;
  background: linear-gradient(var(--char), var(--paper));
}

/* ============================================================== 3. THE BOARD
   A painted sign board: rows, dotted leaders, prices. Never cards. */

.af-menu {
  padding: var(--s-6) var(--gutter) var(--s-7);
  background: var(--paper);
  color: var(--ink);
  /* --paper is mixed from --heat, so the board warms as the page heats up. */
  transition: background-color var(--t-slow) var(--ease-smoke);
}

.af-menu__head {
  max-width: var(--measure);
}

.af-menu__head .kicker {
  margin: 0 0 var(--s-2);
  color: var(--green);
}

.af-menu__head h2 {
  margin: 0;
}

.af-menu__note {
  max-width: 46ch;
  margin: var(--s-3) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ------------------------------------------------------------ the heat dial */

.af-dial {
  max-width: 30rem;
  margin: var(--s-6) 0;
}

.af-dial__label {
  display: block;
  margin: 0 0 var(--s-2);
  color: var(--green);
}

/* 44px tall so the whole strip is a comfortable tap target. */
.af-dial__control {
  position: relative;
  height: 44px;
}

/* The visible track is drawn here, not by the browser, so it sits in exactly
   the same place in every engine. Green to gold to bonnet: mild to fyah. */
.af-dial__control::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--bonnet));
}

.af-dial__input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.af-dial__input:focus-visible {
  border-radius: var(--r-pill);
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* Both native tracks are invisible and full height, so the thumb rides the
   middle of the 44px strip. */
.af-dial__input::-webkit-slider-runnable-track {
  height: 44px;
  border: 0;
  background: transparent;
}

.af-dial__input::-moz-range-track {
  height: 44px;
  border: 0;
  background: transparent;
}

/* The native thumb keeps its 36px size, so dragging feels right, but it is
   invisible: the pepper below is what the visitor sees. */
.af-dial__input::-webkit-slider-thumb {
  width: 36px;
  height: 36px;
  margin-top: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.af-dial__input::-moz-range-thumb {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

/* The scotch bonnet that rides the track. --dial-p is 0 to 1, written by
   afterfilm.js on every change. The 18px half-thumb inset keeps the pepper
   exactly over the native thumb at both ends. */
.af-dial__pepper {
  position: absolute;
  top: 50%;
  left: calc(18px + (100% - 36px) * var(--dial-p, 0.3333));
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.af-dial__pepper-body { fill: var(--bonnet-deep); }
.af-dial__pepper-cap { fill: var(--green); }
.af-dial__pepper-stem { stroke: var(--green); }

.af-dial__stops {
  display: flex;
  justify-content: space-between;
  margin: var(--s-1) 0 0;
  padding: 0;
  list-style: none;
}

.af-dial__stop {
  color: var(--ink-muted);           /* 7.5:1 on cold paper, 6.5:1 on hot */
  font-family: var(--font-sign);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: color var(--t-med) var(--ease-smoke);
}

.af-dial__stop.is-on {
  color: var(--bonnet-deep);         /* 5.3:1 cold, 6.4:1 hot */
}

/* -------------------------------------------------------------- menu groups */

.af-menu__group + .af-menu__group,
.af-menu__minor {
  margin-top: var(--s-6);
}

.af-menu__grouptitle {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--rule);
  color: var(--green);
}

.af-menu__rows {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-menu__rows--compact {
  gap: var(--s-2);
}

.af-menu__minor {
  display: grid;
  gap: var(--s-5);
}

/* Each row wipes open left to right the first time it is seen. The delay that
   staggers a batch by 50ms is set inline by afterfilm.js and removed again once
   the wipe is done, so it can never delay the dimming below. */
.af-menu__row {
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path var(--t-slow) var(--ease-smoke),
    opacity var(--t-med) var(--ease-smoke);
}

.af-menu__row.is-in {
  clip-path: inset(0);
}

/* Dishes two or more steps from the heat dial recede.

   CONTRAST, COMPUTED, NOT ASSUMED (sRGB compositing, WCAG 2.1, checked against
   the published table in DESIGN-SYSTEM.md section 2, which this method
   reproduces to within 0.05):

     ink        at 55% over paper cold 3.90:1   hot 3.74:1
     ink-muted  at 55% over paper cold 2.59:1   hot 2.46:1
     bonnet-deep at 55% over paper cold 2.41:1  hot 2.59:1
     green      at 55% over paper cold 2.44:1   hot 2.33:1

   So 55% fails AA. The Worker caught this and the Director's original spec was
   wrong.

   DIRECTOR RULING 2026-09-20: far rows lose their colour instead of their
   legibility. The row fades only to 80%, and the description, the price and
   the Popular pill all turn solid ink. Ink at 80% over paper computes to
   9.00:1 cold and 8.20:1 hot, so every piece of text in a far row is AAA. */
.af-menu__row.is-far {
  opacity: 0.8;
}

.af-menu__row.is-far .af-menu__desc,
.af-menu__row.is-far .af-menu__price,
.af-menu__row.is-far .af-menu__pop {
  border-color: var(--ink);
  color: var(--ink);
}

.af-menu__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  margin: 0;
}

.af-menu__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fraunces-soft);
  line-height: 1.1;
  letter-spacing: var(--track-display);
}

/* The dotted leader. An empty inline box sits on the text baseline, which is
   exactly where a leader belongs, so the border needs no nudging. */
.af-menu__leader {
  flex: 1;
  align-self: baseline;
  min-width: 1.5rem;          /* never collapses to nothing on a narrow row */
  border-bottom: 2px dotted var(--rule);
}

.af-menu__price {
  color: var(--bonnet-deep);
  font-family: var(--font-sign);
  font-size: var(--fs-d3);
  letter-spacing: var(--track-label);
  white-space: nowrap;
}

.af-menu__pop {
  align-self: center;
  padding: 0.3em 0.75em;
  border: 1px solid var(--green);
  border-radius: var(--r-pill);
  color: var(--green);
  line-height: 1;
  white-space: nowrap;
}

.af-menu__desc {
  max-width: 46ch;
  margin: var(--s-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.af-menu__row--compact .af-menu__name,
.af-menu__row--compact .af-menu__price {
  font-size: var(--fs-body);
}

.af-menu__baked {
  max-width: var(--measure);
  margin: var(--s-6) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* The dish circle that follows the cursor. Built only on fine pointers, and
   held invisible until the pointer has actually moved. */
.af-peek {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;                 /* under the nav (--z-nav) and thermometer */
  width: 240px;
  height: 240px;
  overflow: hidden;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 1.5rem 3.75rem color-mix(in srgb, var(--char) 45%, transparent);
}

.af-peek__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================ 4. THE MARQUEE
   Dish names drifting forever, leaning into the scroll. Decoration only.

   Spacing is margin-right on every item, never flex gap: the loop shifts the
   track by exactly half its width, and only a trailing margin on the last item
   makes that land precisely on the start of the second copy. */

.af-marquee {
  overflow: hidden;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  transition: background-color var(--t-slow) var(--ease-smoke);
}

.af-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.af-marquee__item {
  margin-right: var(--s-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: var(--fraunces-wonk);
  font-size: var(--fs-d1);
  line-height: 1;
  letter-spacing: var(--track-display);
  white-space: nowrap;
}

.af-marquee__item--fill {
  color: var(--ink);
}

.af-marquee__item--out {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
}

/* ============================================================ 5. THE GROCERY
   Sticky stage inside a tall driver, never a pin. Layers back to front:
   shelf track, flat dim, price tags, left to right scrim, heading. */

.af-grocery {
  background: var(--char);
  color: var(--cream);
}

.af-grocery__driver {
  position: relative;
  height: 300vh;
}

.af-grocery__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.af-grocery__track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  width: max-content;
  height: 100%;
  will-change: transform;
}

/* Height drives width through the aspect ratio, so the track can be measured
   before a single shelf picture has downloaded. */
.af-grocery__tile {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  background: var(--coal);
}

.af-grocery__tile--mirror {
  transform: scaleX(-1);
}

.af-grocery__dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--char) 55%, transparent);
}

.af-grocery__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--char) 0%,
    color-mix(in srgb, var(--char) 88%, transparent) 26%,
    transparent 62%
  );
}

.af-grocery__head {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  z-index: 4;
  max-width: min(34ch, 42vw);
  transform: translateY(-50%);
}

.af-grocery__head .kicker {
  margin: 0 0 var(--s-2);
  color: var(--gold);
}

.af-grocery__head h2 {
  margin: 0;
}

.af-grocery__body {
  margin: var(--s-3) 0 0;
  color: var(--cream-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* -------------------------------------------------------------- price tags */

.af-grocery__tags {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rail is set to 1.35 times the shelf track by afterfilm.js, so the tags
   have further to travel over the same scroll and read as the nearer layer. */
.af-grocery__rail {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  padding: 0 12vw;
  /* stated rather than inherited: afterfilm.js sets this element's width in
     pixels, so the padding has to count inside that number. */
  box-sizing: border-box;
  will-change: transform;
}

.af-tag {
  position: relative;
  flex: 0 0 auto;
  width: clamp(9rem, 13vw, 13rem);
  padding-top: var(--tag-drop, 10vh);
  transform-origin: top center;   /* the sway pivots where the string hangs */
}

/* Three alternating drops so the run of tags is never a straight line. */
.af-tag--d0 { --tag-drop: 8vh; }
.af-tag--d1 { --tag-drop: 24vh; }
.af-tag--d2 { --tag-drop: 15vh; }

.af-tag__string {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: var(--tag-drop, 10vh);
  background: var(--cork);
}

.af-tag__card {
  position: relative;
  display: block;
  padding: var(--s-3) var(--s-2) var(--s-2);
  border-radius: var(--r-tag);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0.625rem 1.875rem color-mix(in srgb, var(--char) 55%, transparent);
}

/* The punched hole the string runs through. */
.af-tag__hole {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--char);
  transform: translateX(-50%);
}

.af-tag__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fraunces-soft);
  font-size: var(--fs-body);
  line-height: 1.15;
}

.af-tag__desc {
  display: block;
  margin-top: 0.15em;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: 1.3;
}

.af-tag__price {
  display: block;
  margin-top: var(--s-1);
  color: var(--bonnet-deep);
  font-family: var(--font-sign);
  font-size: var(--fs-d3);
  letter-spacing: var(--track-label);
  white-space: nowrap;
}

/* Sold out. DIRECTOR RULING 2026-09-20: no opacity on text (60% computed to
   2.63:1, below AA). The struck price turns ink-muted instead, which is 7.5:1
   on cold paper and 6.5:1 on hot, and the "Out of stock" line under it carries
   the meaning in words. */
.af-tag.is-out .af-tag__price {
  color: var(--ink-muted);
  text-decoration: line-through;
}

.af-tag__out {
  display: block;
  margin-top: var(--s-1);
  color: var(--bonnet-deep);
}

/* ------------------------------- the phone and reduced motion grocery aisle */

.af-grocery--plain {
  padding: var(--s-6) var(--gutter) var(--s-7);
}

.af-grocery--plain .af-grocery__head {
  position: static;
  z-index: auto;
  max-width: var(--measure);
  transform: none;
}

.af-grocery__banner {
  margin: var(--s-4) 0;
  overflow: hidden;
  border-radius: var(--r-tag);
}

.af-grocery__shelf {
  display: block;
  width: 100%;
  height: clamp(9rem, 32vw, 16rem);
  object-fit: cover;
  background: var(--coal);
}

.af-grocery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.af-grocery__grid .af-tag {
  width: auto;
  padding-top: var(--s-3);
}

.af-grocery__grid .af-tag__string {
  height: var(--s-3);
}

@media (max-width: 419px) {
  .af-grocery__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ 6. THE REVIEWS
   A snap strip of big italic quotes. No cards, no stars, no avatars. The strip
   itself is the one place on the page allowed to scroll sideways. */

.af-reviews {
  padding: var(--s-6) 0 var(--s-7);
  background: var(--paper);
  color: var(--ink);
  transition: background-color var(--t-slow) var(--ease-smoke);
}

.af-reviews > .kicker,
.af-reviews > h2 {
  margin: 0 var(--gutter);
  color: var(--green);
}

.af-reviews > h2 {
  margin-top: var(--s-2);
  color: var(--ink);
}

.af-reviews__strip {
  display: flex;
  gap: var(--s-6);
  padding: var(--s-5) var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  overscroll-behavior-x: contain;
}

.af-reviews__strip:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.af-review {
  flex: 0 0 min(34ch, 84vw);
  margin: 0;
  scroll-snap-align: start;
}

.af-review__quote {
  margin: 0;
  font-style: italic;
  font-variation-settings: var(--fraunces-wonk);
}

.af-review__quote p {
  margin: 0;
}

.af-review__rule {
  display: block;
  width: 3rem;
  height: 2px;
  margin: var(--s-3) 0 var(--s-2);
  background: var(--gold);
}

.af-review__name {
  color: var(--ink-muted);
}

.af-reviews__arrows {
  display: flex;
  gap: var(--s-1);
  padding: 0 var(--gutter);
}

.af-reviews__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-smoke);
}

.af-reviews__arrow:hover {
  transform: translateY(-2px);
}

.af-reviews__arrow:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* ============================================================== 7. THE VISIT */

.af-visit {
  display: grid;
  gap: var(--s-6);
  padding: var(--s-7) var(--gutter);
  background: var(--char);
  color: var(--cream);
}

/* Scoped to the left column on purpose: the hours heading and the open badge
   are kickers too, and they carry their own colours below. */
.af-visit__left > .kicker {
  margin: 0 0 var(--s-2);
  color: var(--gold);
}

.af-visit h2 {
  margin: 0;
}

.af-visit__body {
  max-width: 40ch;
  margin: var(--s-3) 0 0;
  color: var(--cream-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* The shop's motto, under the line that invites you in. Gold on char is
   12.4:1, and Bungee at label size keeps it a stamp rather than a sentence. */
.af-visit__motto {
  margin: var(--s-3) 0 0;
  color: var(--gold);
}

.af-visit__phone {
  display: inline-block;
  margin: var(--s-4) 0 var(--s-4);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fraunces-soft);
  line-height: 1;
  letter-spacing: var(--track-display);
  text-decoration: none;
}

.af-visit__phone:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.af-visit__directions {
  display: inline-flex;
}

.af-visit__hourshead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.af-visit__hourshead h3 {
  margin: 0;
  color: var(--cream);
}

.af-visit__badge {
  padding: 0.4em 0.85em;
  border: 1px solid var(--cork);
  border-radius: var(--r-pill);
  color: var(--cream-muted);        /* 10.1:1 on char */
  line-height: 1;
}

.af-visit__badge.is-open {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--char);               /* 12.4:1 */
}

.af-hours {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.af-hours__row {
  border-bottom: 1px solid var(--cork);
}

.af-hours__day,
.af-hours__time {
  padding: var(--s-2) 0;
  color: var(--cream-muted);
  font-weight: 400;
}

.af-hours__day {
  text-align: left;
}

.af-hours__time {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.af-hours__row.is-today .af-hours__day,
.af-hours__row.is-today .af-hours__time {
  color: var(--gold);               /* 12.4:1 on char */
}

.af-hours__time--closed {
  font-family: var(--font-sign);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* ============================================================= 8. THE FOOTER
   The wordmark runs off the bottom edge. overflow: hidden on the footer is what
   lets it bleed without ever giving the page a sideways scrollbar. */

.af-footer {
  overflow: hidden;
  padding: var(--s-6) var(--gutter) 0;
  background: var(--char);
  color: var(--cream);
}

/* --- every page of the site, and the two social accounts ------------------ */

.af-footer__top {
  display: grid;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--cork);
}

.af-footer__pages {
  display: flex;
  flex-wrap: wrap;
  /* A comfortable gap rather than a tight one: these are 44px tap targets
     sitting side by side at the bottom of a phone screen. */
  gap: var(--s-1) var(--s-4);
}

.af-footer__pagelink,
.af-footer__social {
  display: inline-flex;
  align-items: center;
  min-height: 44px;

  color: var(--cream);              /* 17.5:1 on char */
  font-family: var(--font-sign);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
}

.af-footer__pagelink:hover,
.af-footer__social:hover,
.af-footer__pagelink:focus-visible,
.af-footer__social:focus-visible {
  color: var(--gold);               /* 12.4:1 on char */
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.af-footer__followtitle {
  margin: 0 0 var(--s-1);
  color: var(--gold);
}

.af-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
}

.af-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  color: var(--cream-muted);
  font-size: var(--fs-body);
}

.af-footer__addr {
  display: grid;
  font-style: normal;
}

.af-footer__phone {
  color: var(--gold);
  text-decoration: none;
}

.af-footer__phone:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.af-footer__copy {
  margin: 0;
}

.af-footer__mark {
  margin: var(--s-5) 0 -0.22em;
  color: var(--cream);
  font-size: var(--fs-mega);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* ====================================================== WIDER SCREENS ONLY */

@media (min-width: 700px) {
  .af-landing {
    min-height: 80vh;
    min-height: 80svh;
  }

  .af-reviews__strip {
    gap: var(--s-7);
  }
}

@media (min-width: 700px) {
  /* The page links and the social block sit side by side once there is room. */
  .af-footer__top {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--s-6);
  }
}

@media (min-width: 900px) {
  /* The board goes to two columns. Grid, not multi column, so the heat dial can
     move rows with Flip without the browser reflowing them into a column box. */
  .af-menu__rows--mains {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-7);
  }

  .af-menu__minor {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-7);
  }

  .af-visit {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--s-7);
    align-items: start;
  }
}

/* ========================================================== REDUCED MOTION
   Nothing moves. Every element that motion would have revealed is simply
   present. The grocery aisle is built as the plain vertical list by
   afterfilm.js, so there is no sticky stage left to switch off here. */

@media (prefers-reduced-motion: reduce) {
  .af-menu__row {
    clip-path: none;
    transition: none;
  }

  .af-dial__stop,
  .af-menu,
  .af-marquee,
  .af-reviews,
  .af-reviews__arrow {
    transition: none;
  }

  .af-reviews__arrow:hover {
    transform: none;
  }

  /* The marquee stops dead and the cursor follower never gets built. */
  .af-marquee__track {
    transform: none;
  }

  .af-peek {
    display: none;
  }
}