/* BRGR — the public site.
 *
 * The same design system as the app, translated: butcher-paper canvas,
 * charred ink, hairlines instead of cards, and exactly one saturated
 * action colour. Fraunces carries the work — the burger, its name, its
 * score. Archivo carries the software — every word BRGR itself says.
 * Values come from lib/design/tokens.dart; nothing here invents a colour.
 */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces.ttf") format("truetype-variations"),
    url("/fonts/Fraunces.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo.ttf") format("truetype-variations"),
    url("/fonts/Archivo.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --canvas: #efe2ce;
  --surface: #fffbf4;
  --surface-sunken: #e4d8c4;
  --ink: #171512;
  --ink-2: #554f47;
  --ink-3: #7a6f60;
  --divider: #bcb1a1;
  --track: #d3c6b2;
  --action: #a83c17;
  --on-action: #ffffff;
  --action-pressed: #8f3313;
  --patty: #5a2717;
  --balance: #7e6006;
  --bun: #a96a22;
  --build: #b93129;
  --chip-paper: #fffcf6;
  --chip-ink: #171512;
  --chip-border: rgba(23, 21, 18, 0.65);
  --photo-hairline: rgba(23, 21, 18, 0.1);
  --shadow-lift: 0 2px 6px rgba(35, 25, 9, 0.14), 0 1px 1px rgba(35, 25, 9, 0.1);
}
/* Light only, deliberately.
   The app opens light and the owner asked for the site to match it, so the
   page has one palette rather than two. A `prefers-color-scheme: dark`
   block lived here and redefined thirteen tokens; it is gone rather than
   commented, because a second palette nobody looks at drifts from the
   first. `theme-color` in the pages is light-only for the same reason. */

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.5 "Archivo", ui-sans-serif, system-ui, -apple-system,
    sans-serif;
}

/* The work is serif; the software is not. */
.editorial {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 28, "WONK" 1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.editorial-quiet {
  /* The wonk is character at display sizes and noise below them. */
  font-variation-settings: "SOFT" 28, "WONK" 0;
}

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 20px;
}
.page-wide {
  max-width: 64rem;
}

/* ---- brand ---- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 20px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.wordmark svg {
  display: block;
}
.wordmark-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wordmark-text b {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 28, "WONK" 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.075em;
}
.layer-rule {
  display: flex;
  height: 3px;
  border-radius: 1.5px;
  overflow: hidden;
}
.layer-rule i {
  flex: 1;
}
.layer-rule i:nth-child(1) {
  background: var(--patty);
}
.layer-rule i:nth-child(2) {
  background: var(--balance);
}
.layer-rule i:nth-child(3) {
  background: var(--bun);
}
.layer-rule i:nth-child(4) {
  background: var(--build);
}

.masthead nav {
  display: flex;
  gap: 20px;
  font-weight: 600;
  font-size: 15px;
}
.masthead nav a {
  color: var(--ink-2);
  text-decoration: none;
}
.masthead nav a:hover {
  color: var(--ink);
}

/* ---- voice ---- */

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

h1 {
  margin: 10px 0 0;
  font-size: clamp(2.1rem, 6.5vw, 3.25rem);
  line-height: 1.06;
  text-wrap: balance;
}
h2 {
  margin: 0 0 12px;
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 600;
}
h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
}
p {
  margin: 0 0 1em;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 34rem;
}
.muted {
  color: var(--ink-2);
}
.small {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
a {
  color: var(--action);
}
a:hover {
  color: var(--action-pressed);
}

/* The one action this site has: the App Store listing.
 *
 * One rule rather than three copies, because the front page, the support
 * page's answer and the link landing pages the Worker serves are all reached
 * by the same stranger in the same minute, and a button that looks different
 * on the page a friend's link lands on reads as a different site. The landing
 * pages are built in `backend/src/index.ts` and already load this stylesheet,
 * so the Worker and the assets directory cannot drift apart on it.
 *
 * Plain text in the site's own action colour, not Apple's badge artwork: the
 * badge is a trademark with its own clear-space and minimum-size rules, and a
 * resized copy of it is worse than a sentence that says where the link goes.
 *
 * `color` is set on both states because `a:hover` would otherwise repaint the
 * label in the action colour it sits on. */
.store-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--action);
  color: var(--on-action);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
}
.store-link:hover,
.store-link:focus-visible {
  background: var(--action-pressed);
  color: var(--on-action);
}

section {
  border-top: 1px solid var(--divider);
  padding: 40px 0;
}
section.no-rule {
  border-top: 0;
}

/* ---- the four layer chips ----
 *
 * Retired 2026-10-12. Four equal pills, one per layer, were the front page's
 * only picture of the scoring model, and they said the four layers were
 * interchangeable. They are not: `lib/ratings/bite_score.dart:31-36` weighs
 * them 0.40 / 0.25 / 0.20 / 0.15, and that inequality is the product's one
 * real opinion. `.weights` below draws the real thing. The pills were used on
 * `index.html` and nowhere else, so the rules went with them. */

/* ---- the paper score chip: the one ownable object ---- */

/* `docs/design-decisions.md:123-132` — "The one ownable object is the paper
 * score chip — #FFFCF6 in both appearances, a stamped 4pt bottom-left corner,
 * and a four-colour layer edge." `lib/widgets/score_chip.dart:30-33` adds what
 * it is for: "the same widget is the map marker, the badge over a photograph,
 * and the stamp on a share card, which is what makes a screenshot
 * recognisable."
 *
 * These rules were written when the site was built and, until 2026-10-12, drew
 * nothing: no page used the class. The site's one ownable object was specified
 * and absent, which is most of why the page read as a template. */
.score-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--chip-paper);
  color: var(--chip-ink);
  border: 1.5px solid var(--chip-border);
  /* Three rounded corners and one stamped square-ish corner at the bottom
   * left, "the way a torn ticket keeps one cut edge" (tokens.dart:43-45). */
  border-radius: 14px 14px 14px 4px;
  padding: 6px 12px 7px;
  box-shadow: var(--shadow-lift);
}
.score-chip b {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-optical-sizing: auto;
  /* WONK earns its place here and only here: the rule is that it is
   * "character at 34pt and noise at 17" (design-decisions.md:79-84), and this
   * numeral is the one display-size thing on the page after the headline. */
  font-variation-settings: "SOFT" 28, "WONK" 1;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.score-chip .layer-rule {
  width: 38px;
  height: 4px;
}

/* ---- the specimen: one burger, taken apart ---- */

/* The torn strip of butcher paper, translated from
 * `lib/widgets/torn_edge.dart`. It is the app's only framing device that is
 * deliberately not a crisp rounded rectangle — ":9-14" calls it "a deckle
 * edge … a reader should feel the section was set apart on purpose" — and the
 * site had no equivalent.
 *
 * Faithful to the original where it matters: the same 7px tear depth
 * (`_tear = 7.0`), the top and bottom torn while the left and right stay flat
 * ("the honest cut across the roll"), and the tear generated once from the
 * app's own seed (0x8A17, and 0x8A17 ^ 0x51ED for the opposite edge) so it is
 * the same tear on every load rather than shimmering. x is in percent so the
 * strip tears across any width; y is in pixels so the tear keeps its depth.
 *
 * `clip-path` would normally swallow the shadow, so the soft lift lives on the
 * wrapper as a `drop-shadow`, which follows the clipped silhouette instead of
 * boxing it — paper resting on the wall, not a card floating off it. */
.torn {
  margin: 20px 0 24px;
  filter: drop-shadow(0 2px 3px rgba(35, 25, 9, 0.12));
}
.torn-paper {
  background: var(--surface);
  padding: 27px 20px 29px;
  clip-path: polygon(
    0% 4px, 2.27% 0.4px, 4.55% 3.5px, 6.82% 1.2px, 9.09% 4.9px,
    11.36% 4.8px, 13.64% 1.1px, 15.91% 5.7px, 18.18% 4.6px, 20.45% 3.6px,
    22.73% 3.9px, 25% 0.5px, 27.27% 0.6px, 29.55% 3.6px, 31.82% 0.1px,
    34.09% 4.6px, 36.36% 0.4px, 38.64% 1.5px, 40.91% 4.2px, 43.18% 0px,
    45.45% 1.5px, 47.73% 1.7px, 50% 2.8px, 52.27% 4.5px, 54.55% 1.1px,
    56.82% 4px, 59.09% 2.2px, 61.36% 6.1px, 63.64% 6.2px, 65.91% 3.5px,
    68.18% 0.3px, 70.45% 1.5px, 72.73% 4.8px, 75% 3.3px, 77.27% 1.4px,
    79.55% 3px, 81.82% 6.8px, 84.09% 3.3px, 86.36% 6.6px, 88.64% 6.7px,
    90.91% 0.4px, 93.18% 5.2px, 95.45% 2.4px, 97.73% 6.1px, 100% 4.3px,
    100% calc(100% - 1.7px), 97.73% calc(100% - 4px),
    95.45% calc(100% - 5.9px), 93.18% calc(100% - 4.4px),
    90.91% calc(100% - 3.2px), 88.64% calc(100% - 4.2px),
    86.36% calc(100% - 6.4px), 84.09% calc(100% - 4.1px),
    81.82% calc(100% - 6.9px), 79.55% calc(100% - 0.1px),
    77.27% calc(100% - 7px), 75% calc(100% - 6.1px),
    72.73% calc(100% - 2.9px), 70.45% calc(100% - 0.9px),
    68.18% calc(100% - 3.7px), 65.91% calc(100% - 5.2px),
    63.64% calc(100% - 4.3px), 61.36% calc(100% - 1.9px),
    59.09% calc(100% - 1.7px), 56.82% calc(100% - 0.1px),
    54.55% calc(100% - 0.5px), 52.27% calc(100% - 1.6px),
    50% calc(100% - 5.4px), 47.73% calc(100% - 0.7px),
    45.45% calc(100% - 4.1px), 43.18% calc(100% - 4.8px),
    40.91% calc(100% - 5.4px), 38.64% calc(100% - 2.5px),
    36.36% calc(100% - 0.4px), 34.09% calc(100% - 3.9px),
    31.82% calc(100% - 3.3px), 29.55% calc(100% - 3.8px),
    27.27% calc(100% - 1px), 25% calc(100% - 0.6px),
    22.73% calc(100% - 6.3px), 20.45% calc(100% - 1.4px),
    18.18% calc(100% - 3.7px), 15.91% calc(100% - 1.6px),
    13.64% calc(100% - 0.2px), 11.36% calc(100% - 0.4px),
    9.09% calc(100% - 0.7px), 6.82% calc(100% - 2.4px),
    4.55% calc(100% - 6px), 2.27% calc(100% - 3.8px),
    0% calc(100% - 6.6px)
  );
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Not the action colour. The ember "never appears on anything that is not a
   * button or a link" (design-decisions.md:112-113), which is what lets the
   * four layer accents mean anything. */
  color: var(--ink-3);
}

.specimen {
  position: relative;
  /* Room for the chip, which hangs 14px below the photograph on purpose. */
  margin: 0 0 32px;
}
/* The photograph is clipped and the hairline sits on top of it — the `bleed`
 * pattern at `docs/frontend-finish/spec/00-system.md:671`, "children clipped
 * with ClipRRect(radius 16, Clip.antiAlias), the hairline still on top. Use
 * for photos, maps and accent edges." An inset shadow rather than a border, so
 * the hairline follows the same curve the clip does and cannot end flat where
 * the curve begins — the notched corner is the owner's recorded "cheap" tell
 * (design-decisions.md:1658-1667). */
.specimen-frame {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  position: relative;
}
.specimen-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--photo-hairline);
  pointer-events: none;
}
.specimen-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
/* The stamp is NOT clipped by the photograph it sits on. `frontend-finish`
 * FX-7 recorded what happens when it is: clipping a stamp to its own box "cut
 * the stamp's shadow into a grey square". A decorative mark either follows the
 * curve or is left unclipped — never squared off by a clip. */
.chip-stamp {
  position: absolute;
  right: 12px;
  bottom: -14px;
  display: block;
  /* A chip laid on a photograph by hand is never perfectly square to it. The
   * tilt is static: the app's stamp animates scale and ink, never rotation. */
  transform: rotate(-2.5deg);
}
/* The band word — "Really good" for 89 — was set under the chip and is gone.
 * It straddled the photograph's bottom edge, half on the picture and half on
 * the paper, and the clip cut it. The chip is the ownable object and the app
 * never prints the band inside it (`lib/widgets/score_chip.dart`), so rather
 * than invent a new piece of chip furniture the word was dropped: the numeral
 * and the four weights are the message, and the worked line below carries the
 * arithmetic. */

/* The four weights, as bars.
 *
 * Deliberately *not* a filled track. `LayerStrip` was deleted from the app for
 * exactly this shape: "its flexes were the constant formula weights
 * 40/25/20/15, so it was byte-identical on every burger and read as a stalled
 * progress bar" (design-decisions.md:152-170, and the departures table at
 * :1030). A fill inside an empty track *is* a progress bar. A bare bar with
 * its percentage beside it is a weighing, which is what this is — and here
 * there is one of them, labelled, explaining the formula rather than
 * reporting on a burger, which is the context that made the original read
 * wrong. */
.weights {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.weights li {
  display: grid;
  /* Tight on the label and the figure so the bar — the thing read at a glance
   * — gets the rest. The figures are tabular, so the column cannot jitter. */
  grid-template-columns: 4.7rem 1fr 2.3rem;
  align-items: center;
  gap: 9px;
  font-size: 15px;
}
.w-name {
  font-weight: 600;
}
.w-rail {
  display: block;
  height: 12px;
}
.w-rail i {
  display: block;
  height: 100%;
  border-radius: 5px;
  transform-origin: left center;
}
/* The bars are scaled so the heaviest layer fills the column: 40 / 25 / 20 / 15
 * drawn as 100 / 62.5 / 50 / 37.5. It is one linear scale, so every ratio
 * between the four is exactly right — Patty is still 2⅔ times Build — and the
 * eye compares lengths rather than guessing at four short stubs in a column
 * that is 60% empty by construction. The printed figure beside each bar is the
 * value; the bar is the comparison. This is also what keeps the group from
 * reading as four part-filled tracks, which is the shape that got `LayerStrip`
 * deleted from the app. */
.weights .patty .w-rail i {
  width: 100%;
  background: var(--patty);
}
.weights .balance .w-rail i {
  width: 62.5%;
  background: var(--balance);
}
.weights .bun .w-rail i {
  width: 50%;
  background: var(--bun);
}
.weights .build .w-rail i {
  width: 37.5%;
  background: var(--build);
}
.w-pct {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.worked {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* The strip, given room.
 *
 * Stacked, the photograph grows with the measure, and at the full 44rem it was
 * 620px of appetising stock burger with the instrument underneath it — which
 * is the failure the whole design is trying to avoid: a big food photograph is
 * what every burger page has, and the weights and the chip are what nothing
 * else has. Side by side, the picture stays the size of an exhibit and the
 * reader sees the burger and the weighing of it in one glance, which is the
 * actual argument. The narrow layout is untouched. */
@media (min-width: 40rem) {
  .torn-paper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 30px;
    align-items: start;
    padding: 29px 26px 31px;
  }
  .eyebrow {
    grid-column: 1 / -1;
  }
  .specimen {
    grid-column: 1;
    margin-bottom: 0;
  }
  .weights {
    grid-column: 2;
    margin-bottom: 0;
    /* Against the picture's optical centre, not its top edge. */
    align-self: center;
  }
  .worked {
    grid-column: 1 / -1;
    margin-top: 26px;
  }
}

/* ---- the one person this is ---- */

/* Hairlines instead of cards (design-decisions.md:123-132), so the quote is
 * set off by a rule and a type change, not by a tinted box. */

/* ---- screen-reader-only text ---- */

/* The chip's numeral is "89" on the page, which is the whole point of a stamp
 * and meaningless read aloud on its own. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- screenshots ----
 *
 * Retired 2026-10-12 with the two app captures they framed, which the owner
 * asked to remove from the front page. `.shots` was a horizontal scroller and
 * `.shot` the phone-shaped figure inside it; no other page used either, so
 * keeping them would have left a scroll-snapping carousel in the stylesheet
 * for a carousel that does not exist. The image files are still in
 * `public/img/` on purpose — the decision was recorded as "maybe" — so if a
 * capture comes back, it comes back with a frame designed for wherever it
 * lands rather than inheriting this one. `.specimen` above is the current
 * photograph frame, and it is a single exhibit, not a strip. */

/* ---- prose pages (privacy, terms, support) ---- */

.prose {
  padding-bottom: 24px;
}
.prose h2 {
  margin-top: 40px;
}
.prose h3 {
  margin-top: 24px;
}
.prose ul {
  padding-left: 1.2em;
  margin: 0 0 1em;
}
.prose li {
  margin-bottom: 0.35em;
}

/* An unfilled blank in a published document, drawn so a reader cannot miss
 * it. `terms.html` is built from `docs/app-store-fixes/terms-draft.md` §A,
 * which still carries `[DECISION: …]` markers the owner has to fill — the
 * effective date, and the postal address and telephone number that §19 and
 * §20 each print, which 17 U.S.C. §512(c)(2) requires of a designated
 * copyright agent. Carrying them through visibly is the
 * point: a term silently dropped reads as a finished document that happens
 * not to mention the thing, and nobody reviewing the page would find it.
 * Dashed rather than solid, and in the one action colour the site already
 * has, so it reads as a hole rather than as emphasis — and `mark`'s own
 * yellow is overridden, because it is not a highlight. */
.decision {
  background: var(--surface-sunken);
  color: var(--action);
  border: 1px dashed var(--action);
  border-radius: 4px;
  padding: 0 0.3em;
  font-weight: 600;
}

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--divider);
  margin-top: 24px;
  padding: 24px 0 48px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
footer a {
  color: var(--ink-2);
}
footer a:hover {
  color: var(--ink);
}
footer .layer-rule {
  width: 64px;
  margin-bottom: 14px;
}

/* The hero's one job: the badge, then why. Tighter than a normal section
   because the button is the content, not an afterword. */
.hero-get {
  padding-top: 28px;
}
.hero-get h1 {
  margin-top: 22px;
}
.hero-get .lede {
  margin-top: 14px;
}
.hero-get .small {
  margin-top: 14px;
}

/* Apple's badge, unmodified and unstyled beyond its hit area. Their identity
   guidelines forbid recolouring it, adding effects, or boxing it in another
   button, so this rule gives it nothing but a target big enough to tap
   (the image is 67px tall, over the 44px minimum) and a focus ring. */
.store-badge {
  display: inline-block;
  border-radius: 10px;
  line-height: 0;
}
.store-badge img {
  display: block;
  width: 200px;
  height: auto;
}
.store-badge:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 4px;
}

/* ---- the one thing that moves ----
 *
 * The app has exactly one animation it calls earned, and this is the web
 * translation of it. `docs/design-decisions.md:1011-1022`: "The score reveal
 * is the product's one earned ceremony. The score arrives whole. The numeral
 * never counts, rolls, spins or flips. What may move is the paper it is
 * printed on and the ink that stamps it — once, under 500ms". And
 * `:1008-1009`: "No confetti, no bouncing food, no slot-machine numerals."
 *
 * So: the chip's paper scales in and its ink rises, once, in 420ms; then the
 * band word and the four weights ink in on the app's own 60ms stagger. The
 * numeral does not count. Nothing rotates — the static tilt is set above, and
 * the app's stamp animates scale and opacity only. `stampSpring` is damping
 * 0.9, documented as crossing the target once "by under one percent of the
 * travel — a stamp landing on paper, not a bounce" (tokens.dart:181-185); the
 * curve below carries the same barely-there overshoot.
 *
 * The resting state is the default and the animations are additive, declared
 * inside `no-preference`. That is the safe direction: anything that does not
 * match the query — a reduced-motion reader, an old browser, a text-only
 * renderer — gets the finished page, not an invisible one.
 *
 * Nothing here carries information. The score, the band and the four weights
 * are all on the page as text before any of this runs. */
@media (prefers-reduced-motion: no-preference) {
  .chip-stamp {
    animation: brgr-stamp 380ms cubic-bezier(0.2, 1.04, 0.3, 1) both;
  }
  .weights li {
    animation: brgr-ink 220ms ease-out both;
  }
  /* The rails' read-down-the-page idiom, on the 60ms stagger the reveal
   * ceremony uses for its own lines. The last one has finished inking by
   * 480ms, so the page is at rest well inside the three seconds a stranger
   * gives it — the stamp is a thing they catch, not a thing they wait for. */
  .weights li:nth-child(1) {
    animation-delay: 140ms;
  }
  .weights li:nth-child(2) {
    animation-delay: 200ms;
  }
  .weights li:nth-child(3) {
    animation-delay: 260ms;
  }
  .weights li:nth-child(4) {
    animation-delay: 320ms;
  }
}

@keyframes brgr-stamp {
  from {
    opacity: 0;
    transform: rotate(-2.5deg) scale(1.28);
  }
  30% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: rotate(-2.5deg) scale(1);
  }
}
@keyframes brgr-ink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The masthead at the narrow end.
 *
 * `Support Privacy Terms` plus the wordmark is close to the full measure at
 * 390px and ran out of room below it, which clipped "Terms" against the
 * gutter with no warning. The nav is allowed to drop under the wordmark
 * rather than be cut: nothing here needs to be on one line, and a clipped
 * legal link is a legal link a reader cannot reach. */
@media (max-width: 26rem) {
  .masthead {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .masthead nav {
    gap: 18px;
  }
}

/* ---------------------------------------------------------------------------
 * The indexable pages: /burger/<slug> and /burgers.
 *
 * Everything here reuses the page's existing tokens and adds no colour. Two
 * things could not be reused and are the reason this block exists at all:
 *
 *  - `.weights` draws four rails at 100/62.5/50/37.5%, because those are the
 *    four *weights* and they are constants. A burger page draws four *scores*,
 *    which are data, so `.layers` takes its width from an inline style and
 *    shares nothing but the look.
 *  - A rounded card with an unclipped square corner inside it is the recurring
 *    "cheap" tell (`docs/design-decisions.md`), so every box below either has
 *    no corner of its own or sets `overflow:hidden` with its radius.
 * ------------------------------------------------------------------------- */

.crumbs {
  padding: 4px 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.crumbs a {
  color: var(--ink-2);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
}

/* The chip is a stamp on a photograph on the front page, which is why
 * `.chip-stamp` is `position:absolute` with a bottom offset — it hangs off the
 * edge of a `.specimen-frame`. There is no photograph here (no page BRGR
 * publishes to a signed-out reader carries somebody else's picture) and no
 * positioned ancestor either, so reusing `.chip-stamp` took the chip out of
 * flow and off the page entirely — it rendered nowhere, which a capture
 * caught and no assertion would have. In flow, then, left-aligned with the
 * prose, keeping only the hand-laid tilt. */
.chip-inline {
  display: block;
  margin: 2px 0 16px 3px;
  transform: rotate(-2.5deg);
  transform-origin: left center;
}

.layers {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.layers li {
  display: grid;
  grid-template-columns: 4.7rem 1fr 2.3rem;
  align-items: center;
  gap: 9px;
  font-size: 15px;
}

.layers .layer-rail {
  height: 8px;
  border-radius: 4px;
  background: var(--track);
  /* The fill is a child with its own radius; clipping the parent is what stops
   * a 100-score fill from drawing a square corner inside a rounded rail. */
  overflow: hidden;
  display: block;
}

.layers .layer-rail i {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.layers .patty .layer-rail i { background: var(--patty); }
.layers .balance .layer-rail i { background: var(--balance); }
.layers .bun .layer-rail i { background: var(--bun); }
.layers .build .layer-rail i { background: var(--build); }

.layers .w-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* The "Where this sits" links. Where a `.mention-list` used to draw other
 * publications' verdicts as a quoted list, this draws BRGR's own catalog
 * coverage as prose — see `src/pages.ts`'s `coverageSection` for why that
 * section changed. */
.coverage p {
  font-size: 15px;
}

/* The one box on the page, and the one that must be read. Dashed like
 * `.decision`, because it is the same kind of sentence: a thing the product
 * has decided and will not quietly change. */
.disclaimer {
  background: var(--surface);
  border: 1px dashed var(--divider);
  border-radius: 10px;
  overflow: hidden;
  padding: 18px 20px 4px;
  margin-top: 36px;
}

.disclaimer h2 {
  margin-top: 0;
}

.burger-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}

.burger-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 15px;
  margin: 0;
}

.burger-list a {
  font-weight: 600;
}

.burger-list .at {
  color: var(--ink-2);
}

.burger-list .marks {
  margin-left: auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}

.hood {
  margin-top: 34px;
}

/* At phone width the score and the list count would push the restaurant onto
 * a third line; letting them wrap under it keeps the dish name the first thing
 * on every row. */
@media (max-width: 30rem) {
  .burger-list .marks {
    margin-left: 0;
    flex-basis: 100%;
  }
}