/* ─────────────────────────────────────────────────────────────────────
   Public product pages: rankings, dishes, restaurants, search.

   Builds on forkelo.css (the landing page's design tokens and primitives:
   .button, .search-box, .score-seal, .compact-result, footer). Anything
   the landing page does not need lives here so forkelo.css can stay in
   sync with the original design file.
   ───────────────────────────────────────────────────────────────────── */

.page-body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 76px;
}

.site-header--page {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

/* ── Page-top search ─────────────────────────────────────────────── */

.page-search {
  padding-block: 1.1rem 0;
}

.search-box--compact {
  width: min(880px, 100%);
  min-height: 60px;
  margin-top: 0;
  padding: 0.35rem;
  box-shadow: none;
}

.search-box--compact .search-submit {
  height: 48px;
  min-height: 48px;
  padding-inline: 1.3rem;
}

.search-box--compact .search-box__query input {
  font-size: 1rem;
}

/* The box arrives holding the query that produced the page, so it needs a way
   back to empty. Hidden without JS, where the button could do nothing. */
.search-clear {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.search-clear:hover {
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--ink);
}

.search-clear[hidden],
.no-js .search-clear {
  display: none;
}

.location-control {
  position: relative;
}

.location-control select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  padding-right: 0.15rem;
  max-width: 11rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  text-overflow: ellipsis;
}

.location-control select:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Page head ───────────────────────────────────────────────────── */

.page-head {
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
}

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

.eyebrow {
  margin-bottom: 0.7rem;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.page-title {
  max-width: 16ch;
  font-size: clamp(2.7rem, 6.2vw, 5.6rem);
  line-height: 0.9;
}

.page-title--dish {
  font-size: clamp(2.3rem, 4.6vw, 4.2rem);
}

/* An index is read for what is on it, so its head is trimmed until the first
   card is above the fold on a laptop. */
.page-head--index {
  padding-block: clamp(1.6rem, 3vw, 2.4rem) 0;
}

.page-head--index .page-title {
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
}

.page-head--index .page-lede {
  margin-top: 0.9rem;
}

.page-lede {
  max-width: 60ch;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.5;
}

.page-head > p.place-switch {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.55rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.page-lede--editorial {
  max-width: 70ch;
  color: var(--ink);
}

.page-lede--editorial p + p {
  margin-top: 1rem;
}

.page-lede--editorial h2,
.page-lede--editorial h3 {
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  line-height: 1.1;
}

.page-lede--editorial a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.muted {
  color: var(--muted);
}

.page-tools {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.tool-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--green);
  font-weight: 750;
  font-size: 0.92rem;
}

/* ── Score chip ──────────────────────────────────────────────────── */

.score-chip {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  color: var(--green);
}

.score-chip strong {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 2.6rem;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.score-chip span {
  font-weight: 750;
}

.score-chip em {
  padding: 0.22rem 0.6rem;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-control);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.score-chip--medium em {
  color: var(--ink);
  opacity: 0.8;
}

.score-chip--low em,
.score-chip--none em {
  color: var(--muted);
  border-style: dashed;
}

.score-chip--large strong {
  font-size: clamp(3.4rem, 7vw, 5rem);
}

/* ── Ranking list ────────────────────────────────────────────────── */

.rank-list {
  display: grid;
  gap: 0.9rem;
  padding-bottom: var(--section-space);
}

.rank-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
  transition: border-color 200ms ease, transform 200ms ease;
}

.rank-card:hover {
  border-color: var(--red);
}

.rank-card:has(.rank-card__img) {
  grid-template-columns: auto minmax(160px, 0.55fr) minmax(0, 1.45fr);
}

.rank-card__rank {
  align-self: start;
  min-width: 2.2ch;
  color: var(--red);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.rank-card--top {
  border-width: 2px;
  border-color: var(--ink);
  box-shadow: var(--shadow);
}

.rank-card--top .rank-card__rank {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
}

.rank-card--top:has(.rank-card__img) {
  grid-template-columns: auto minmax(220px, 0.8fr) minmax(0, 1.2fr);
}

/* Same 4:3 as the feed and the dish hero: in a ranked list especially, photo
   size must not compete with the rank number for saying what is best. */
.rank-card__img {
  display: block;
  align-self: start;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}

.rank-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rank-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rank-card__title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.rank-card h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1;
}

.rank-card--top h2 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.rank-card h2 a:hover {
  color: var(--red);
}

.rank-card__place {
  margin-top: 0.45rem;
  color: var(--muted);
}

.rank-card__place a:hover {
  color: var(--red);
  text-decoration: underline;
}

.rank-card__meta {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  line-height: 1.35;
  text-align: right;
  font-weight: 700;
}

.tag-list {
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
}

.tag-list li {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--yellow) 38%, var(--paper-strong));
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.tag-list--large li {
  padding: 0.5rem 0.95rem;
  font-size: 0.98rem;
}

.rank-card__summary {
  margin-top: 1rem;
  color: var(--muted);
  line-height: 1.5;
}

.rank-card__actions {
  margin-top: auto;
  padding-top: 1.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.rank-card__actions .button {
  min-height: 48px;
}

.evidence-line {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 650;
}

/* ── Map view ────────────────────────────────────────────────────── */

.map-switch--page {
  position: static;
  display: inline-flex;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper-strong);
}

.map-switch--page button {
  min-height: 38px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.map-switch--page button.active {
  background: var(--ink);
  color: var(--paper-strong);
}

.ranking-map {
  padding-bottom: var(--section-space);
}

.ranking-map__canvas {
  width: 100%;
  height: min(72vh, 680px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper-strong);
}

.map-pin-dish {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.map-pin-dish span {
  display: inline-block;
  min-width: 2.6rem;
  padding: 0.35rem 0.55rem;
  border: 2px solid #fff8ed;
  border-radius: var(--radius-control) var(--radius-control) var(--radius-control) 4px;
  background: var(--green);
  color: #fff8ed;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: -0.04em;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: rotate(-4deg);
  transition: transform 160ms ease;
}

.map-pin-dish--top span {
  background: var(--red);
  font-size: 1.15rem;
}

.map-pin-dish:hover span {
  transform: rotate(0) scale(1.08);
}

.map-popup {
  display: grid;
  gap: 0.25rem;
  min-width: 180px;
  color: #1c1a17;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.map-popup__rank {
  color: #dd3928;
  font-weight: 900;
  font-size: 0.8rem;
}

.map-popup strong {
  font-size: 1.05rem;
  line-height: 1.1;
}

.map-popup__score {
  color: #2f6b45;
  font-weight: 900;
  font-size: 1.4rem;
}

.map-popup small {
  color: #655f56;
}

.map-popup a {
  margin-top: 0.3rem;
  color: #dd3928;
  font-weight: 800;
  text-decoration: underline;
}

.mention-list {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.mention-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-strong);
  font-weight: 650;
  text-transform: capitalize;
}

.mention-list li strong {
  color: var(--green);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

.mention-list--critical li strong {
  color: var(--red);
}

/* ── Methodology band ────────────────────────────────────────────── */

.method {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--yellow);
  color: #211c14;
}

.method__grid {
  display: grid;
  grid-template-columns: minmax(200px, 0.45fr) minmax(0, 1.55fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.method h2 {
  max-width: 14ch;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
}

.method p {
  max-width: 62ch;
  margin-top: 1.1rem;
  line-height: 1.55;
  font-weight: 550;
}

/* The band sits on yellow, so links in it take the band's ink and are
   marked by the underline alone rather than by the site's link colour. */
.method p a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  font-weight: 800;
}

.method__ask {
  font-weight: 800;
}

.method__ask a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.score-seal--small {
  width: min(100%, 300px);
  transform: rotate(-3deg);
}

.score-seal--small strong {
  font-size: clamp(4.5rem, 9vw, 6.5rem);
}

.score-seal--small span {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  font-size: 0.95rem;
}

/* ── Cross-links ─────────────────────────────────────────────────── */

.more-rankings {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.more-rankings h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  margin-bottom: 1.2rem;
}

.more-rankings ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.more-rankings li a {
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--paper-strong);
  font-weight: 800;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.more-rankings li a:hover {
  background: var(--yellow);
  color: #201b12;
  transform: translateY(-2px);
}

/* The description sets its own colour, so it does not inherit the hover ink
   and would otherwise stay muted grey on yellow. */
.more-rankings li a:hover span {
  color: inherit;
}

/* ── Category index (/food/{category}) ───────────────────────────── */

/* Each card previews the ranking it opens: the size of the comparison, and
   who is currently top of it, with their photograph. A definition alone does
   not help anybody choose between four burritos. */
.ranking-index {
  padding-block: clamp(1.6rem, 3vw, 2.4rem) var(--section-space);
}

.ranking-index ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0.9rem;
}

.ranking-preview {
  height: 100%;
  padding: 1rem 1.15rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  /* The leader sits on the bottom edge whatever length the definition runs,
     so the scores line up across a row. */
  grid-template-rows: 1fr auto;
  gap: 0.85rem;
  background: var(--paper-strong);
  transition: border-color 180ms ease, transform 180ms ease;
}

.ranking-preview:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.ranking-preview__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 1rem;
}

.ranking-preview__shot {
  width: 112px;
  height: 112px;
  border-radius: 12px;
  object-fit: cover;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.ranking-preview__shot--mark {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.ranking-preview__what {
  display: grid;
  align-content: start;
  gap: 0.3rem;
}

.ranking-preview__what strong {
  font-size: 1.15rem;
  line-height: 1.15;
}

/* Not green: on this card green means the score, and the size of a ranking
   is a different kind of fact. */
.ranking-preview__size {
  font-size: 0.85rem;
  font-weight: 800;
}

.ranking-preview__desc {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  /* Definitions run from 90 to 300+ characters; two lines here and the whole
     of it on the ranking page. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ranking-preview__leader {
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
}

/* The leader row reads like the landing page's sample ranking — rank, dish,
   score — but owns its classes rather than borrowing .compact-*: those carry
   explicit grid placement below 900px for the row they were written for, and
   forkelo.css is kept re-syncable. */

/* The rank is the same on every card, so it labels rather than shouts; the
   score is the number worth reading. */
.ranking-preview__rank {
  color: var(--muted);
  font-size: 1.35rem;
}

.ranking-preview__dish {
  display: grid;
  gap: 0.22rem;
}

.ranking-preview__dish small {
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 500;
}

.ranking-preview__score strong {
  color: var(--green);
  font-size: 1.35rem;
}

.ranking-preview__score {
  display: grid;
  gap: 0.1rem;
  justify-items: end;
  text-align: right;
}

.ranking-preview__score small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

@media (max-width: 460px) {
  .ranking-preview__shot {
    width: 84px;
    height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-preview {
    transition: none;
  }

  .ranking-preview:hover {
    transform: none;
  }
}

/* ── Explore ─────────────────────────────────────────────────────── */

/* One block per food category, stacked. These cards name a ranking and stop
   there: /explore lists the whole catalog, and the tier below it
   (/food/{category}) is where a ranking is previewed with its leader and its
   photograph, because that page holds one category's worth of them. */
.explore-group {
  padding-block: 0 clamp(1.6rem, 3vw, 2.6rem);
}

.explore-group h2 {
  margin-bottom: 0.9rem;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* The mark is a scanning aid for a page you scroll, so it stays quieter than
   the heading it sits beside and never takes the hover colour with it. */
.explore-group__icon {
  flex: none;
  color: var(--muted);
}

.explore-group h2 a:hover {
  color: var(--red);
}

.more-rankings--grid ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.more-rankings--grid li a {
  width: 100%;
  /* Fill the row so a card without a description lines up with its neighbours. */
  height: 100%;
  min-height: 84px;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-card);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 0.8rem;
  align-items: center;
}

.more-rankings--grid li a strong {
  font-size: 1.15rem;
}

.more-rankings--grid li a span {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  /* Definitions vary from 90 to 300+ characters; cap them so one long entry
     does not stretch every card in its row. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.more-rankings--grid li a svg {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* ── Dish page ───────────────────────────────────────────────────── */

.dish-hero {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.dish-hero__media img,
.dish-hero__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  object-fit: cover;
  box-shadow: var(--shadow);
}

.dish-hero__placeholder {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--yellow) 40%, var(--paper-strong));
  color: var(--red);
}

.dish-hero__place {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 650;
}

.dish-hero__place a:hover {
  color: var(--red);
  text-decoration: underline;
}

.rank-lines {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.rank-lines a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-strong);
  font-weight: 700;
}

.rank-lines a:hover {
  border-color: var(--red);
}

.rank-lines strong {
  color: var(--red);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.4rem;
  letter-spacing: -0.05em;
}

.rank-lines small {
  margin-left: auto;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.dish-hero__actions {
  max-width: 460px;
}

.dish-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: var(--section-space);
}

.dish-detail h2,
.similar h2,
.order-section h2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1;
}

.dish-detail h2 + *,
.dish-detail__main h2 {
  margin-top: 0.9rem;
}

.dish-detail__main h2:not(:first-child) {
  margin-top: 2.2rem;
}

.dish-detail__summary {
  font-size: 1.15rem;
  line-height: 1.55;
}

.dish-detail__menu {
  color: var(--muted);
  line-height: 1.55;
}

.dish-detail__side h2 {
  font-size: 1.4rem;
}

/* The side column stacks Evidence and Details, so every heading after the
   first needs air above it — a heading is nearer its own card than the one
   before. (The `.detail-grid` shorthand below resets margins, so the space
   has to hang off the heading rather than the card it follows.) */
.dish-detail__side h2:not(:first-child) {
  margin-top: 2rem;
}

.detail-grid {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
}

.detail-grid dt {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: baseline;
}

.detail-grid dd {
  margin: 0;
  font-weight: 650;
  text-transform: capitalize;
}

.detail-grid dd a {
  text-transform: none;
}

.detail-grid dd a:hover {
  color: var(--red);
  text-decoration: underline;
}

.similar {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.similar .compact-results {
  margin-top: 1.2rem;
}

a.compact-result {
  color: inherit;
}

/* ── Restaurant page ─────────────────────────────────────────────── */

.order-section {
  padding-bottom: var(--section-space);
}

.order-list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.order-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem 1.2rem;
  align-items: start;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
}

.order-item:first-child {
  border-width: 2px;
  border-color: var(--ink);
}

.order-item__medal {
  width: 2.4rem;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: center;
  color: var(--red);
}

.order-item h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.05;
}

.order-item h3 a:hover {
  color: var(--red);
}

.order-item__meta {
  margin-top: 0.4rem;
  color: var(--muted);
  font-weight: 600;
}

.order-item__meta a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
  text-underline-offset: 0.2em;
}

.order-item__summary {
  margin-top: 0.7rem;
  color: var(--muted);
  line-height: 1.5;
}

.order-item .score-chip {
  margin-top: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.order-item .score-chip strong {
  font-size: 2.1rem;
}

.order-section__more {
  margin-top: 2.5rem;
  font-size: 1.2rem;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .rank-card:has(.rank-card__img),
  .rank-card--top:has(.rank-card__img) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rank-card__img {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 200px;
    max-height: 320px;
  }

  .rank-card__rank {
    grid-row: 2;
  }

  .rank-card__body {
    grid-column: 2;
    grid-row: 2;
  }

  .method__grid,
  .dish-hero,
  .dish-detail {
    grid-template-columns: 1fr;
  }

  .score-seal--small {
    width: min(100%, 240px);
  }
}

@media (max-width: 700px) {
  .page {
    padding-top: 68px;
  }

  .page-search {
    padding-top: 0.8rem;
  }

  .search-box--compact {
    min-height: 0;
    padding: 0;
    border: 0;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    background: transparent;
  }

  .search-box--compact .search-box__query {
    grid-column: 1 / -1;
    min-height: 52px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--paper-strong);
  }

  .search-box--compact .location-control {
    min-height: 48px;
    padding-inline: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--paper-strong);
  }

  .search-box--compact .location-control select {
    max-width: 100%;
    min-width: 0;
  }

  .search-box--compact .search-submit {
    width: 100%;
  }

  .page-title {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
  }

  .rank-card {
    padding: 0.9rem;
  }

  .rank-card__title {
    display: grid;
  }

  .rank-card__meta {
    justify-items: start;
    text-align: left;
    color: var(--muted);
    font-size: 0.92rem;
  }

  .rank-card__actions {
    grid-template-columns: 1fr;
  }

  .score-chip strong {
    font-size: 2.2rem;
  }

  .order-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .order-item .score-chip {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
  }
}

/* The landing hero hides its location control on narrow screens; on the
   product pages the place is the whole point, so the compact form keeps it. */
@media (max-width: 1100px) {
  .search-box--compact {
    grid-template-columns: minmax(210px, 1fr) auto auto;
  }

  .search-box--compact .location-control {
    display: flex;
  }
}

/* ── Legal pages ─────────────────────────────────────────────────── */

.legal {
  padding-block: clamp(2rem, 4vw, 3.5rem) var(--section-space);
  line-height: 1.6;
}

.legal > * {
  max-width: 72ch;
}

.legal .page-title {
  margin-bottom: 1.5rem;
}

.legal h2 {
  margin-top: 2.4rem;
  margin-bottom: 0.7rem;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.05;
}

.legal h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}

.legal p + p {
  margin-top: 0.9rem;
}

.legal ul {
  margin: 0.8rem 0;
  padding-left: 1.3rem;
}

.legal li + li {
  margin-top: 0.5rem;
}

.legal a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.legal code {
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: 0.92em;
}

/* ── "Tell us what's better" ─────────────────────────────────────── */
/* The dialog is the suggestion form's alone; `.stack-form` below it is the
   shared one — a labelled column of fields that htmx swaps for its own
   answer. The restaurant early-access form on /for-restaurants uses it too. */

/* The trigger sits inside the yellow methodology band, so it inherits that
   band's ink rather than the site's link colour. */
.method__ask-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* Only one of the two is ever offered: the button needs a dialog to open,
   the mailto link needs nothing at all. */
.method__ask-link--nojs {
  display: none;
}

.no-js .method__ask-link--nojs {
  display: inline;
}

.no-js [data-suggest-open] {
  display: none;
}

.suggest {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(90dvh, 46rem);
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: visible;
}

.suggest::backdrop {
  background: rgba(28, 26, 23, 0.55);
  backdrop-filter: blur(2px);
}

.suggest__body {
  max-height: inherit;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.suggest__close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.suggest__close:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}

/* Keep the eyebrow clear of the close button on a narrow screen. */
.suggest .eyebrow {
  padding-right: 2.4rem;
}

.suggest h2 {
  margin-top: 0.35rem;
  font-size: clamp(1.7rem, 4.5vw, 2.2rem);
  line-height: 1.05;
}

.suggest__lede {
  margin-top: 0.7rem;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.suggest .success-message {
  margin-top: 1.6rem;
}

.stack-form {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.stack-form__field {
  display: grid;
  gap: 0.4rem;
}

/* Flex rather than inline text: where the hint does not fit beside the
   label it drops to its own line whole, instead of leaving a word behind. */
.stack-form label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 800;
}

.stack-form label span {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.8rem;
}

.stack-form input,
.stack-form textarea {
  min-width: 0;
  padding: 0.7rem 1rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
  color: var(--ink);
  font: inherit;
}

.stack-form textarea {
  resize: vertical;
}

.stack-form input::placeholder,
.stack-form textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  opacity: 1;
}

.stack-form input[aria-invalid="true"],
.stack-form textarea[aria-invalid="true"] {
  border-color: var(--red);
}

/* Two fields side by side where there is room. The suggestion form never
   uses it; the restaurant form has six inputs and would otherwise be a
   column long enough to hide its own submit button. */
.stack-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stack-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.stack-form__actions .form-message {
  flex: 1 1 14rem;
}

.stack-form.htmx-request button[type="submit"] {
  opacity: 0.6;
  cursor: progress;
}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.stack-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── The feed at /new ────────────────────────────────────────────── */

/* The shape of a ranking's cards without their numbers: nothing on this page
   is ranked against anything else on it, so nothing here carries a rank. */
.feed-list {
  display: grid;
  gap: 0.9rem;
  padding-bottom: var(--section-space);
}

.feed-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
  transition: border-color 200ms ease;
}

.feed-card:hover {
  border-color: var(--red);
}

/* The whole card takes the click, because the whole card already looks like
   it will: a hover state over a row where only the title and the photo
   answer is a row that lies about itself. The title's own link is stretched
   across the card rather than wrapped around it, so there is still exactly
   one link per destination — the restaurant and the ranking below sit above
   the overlay and keep working. */
.feed-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.feed-card__place a,
.feed-card__ranking {
  position: relative;
  z-index: 1;
}

/* Keyboard focus lands on the title link, whose box is a fraction of what it
   now clicks; the ring belongs around the thing that will open. */
.feed-card:has(h2 a:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.feed-card h2 a:focus-visible {
  outline: none;
}

.feed-card:has(.feed-card__img) {
  grid-template-columns: minmax(190px, 0.6fr) minmax(0, 1.5fr);
}

/* Every dish photo is the same shape and size, top-aligned. Stretching the
   photo to the card's height made the picture a readout of how long the
   evidence summary happened to be — a dish with two extra lines of text got a
   photo twice the size of the one below it, which reads as importance the
   score never claimed. Fixed 4:3 matches the dish page's hero, so the same
   crop carries through from feed to detail. */
.feed-card__img {
  display: block;
  align-self: start;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}

.feed-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.feed-card h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.05;
}

.feed-card h2 a:hover {
  color: var(--red);
}

.feed-card__place {
  color: var(--muted);
}

.feed-card__place a:hover {
  color: var(--red);
  text-decoration: underline;
}

.feed-card__summary {
  line-height: 1.45;
}

.feed-card__ranking {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

@media (max-width: 700px) {
  .feed-card:has(.feed-card__img) {
    grid-template-columns: minmax(0, 1fr);
  }

  .feed-card__img {
    max-height: 260px;
  }
}

/* ── For restaurants ─────────────────────────────────────────────── */

.owner-grid {
  padding-bottom: var(--section-space);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.owner-points {
  display: grid;
  gap: 1.1rem;
}

.owner-point {
  padding: 1.1rem 1.2rem;
  display: flex;
  gap: 0.9rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
}

/* The promise not to sell a rank is the one that matters most, so it is the
   one the eye lands on. */
.owner-point--flat {
  background: var(--yellow);
  color: #211c14;
}

.owner-point svg {
  flex: none;
  margin-top: 0.1rem;
}

.owner-point strong {
  display: block;
  font-size: 1.02rem;
}

.owner-point span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.owner-point--flat span {
  color: #3a3125;
}

.owner-form {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.owner-form h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.05;
}

.owner-form__lede {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.owner-form .success-message {
  margin-top: 1.6rem;
}

@media (max-width: 900px) {
  .owner-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The form is what the page is for; on a phone it goes first. */
  .owner-form {
    order: -1;
  }
}

@media (max-width: 560px) {
  .stack-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The map/list switch toggles `hidden`; make sure no display rule wins over it. */
.page [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Guides

   A guide is the one page on the site that is mostly words, so it gets a
   measure narrow enough to read (about 68 characters) rather than the full
   section width the ranking pages use.
   -------------------------------------------------------------------------- */

.guide-hero {
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.guide-hero img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
}

.guide-shell {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 1000px) {
  .guide-shell {
    grid-template-columns: minmax(0, 68ch) minmax(220px, 1fr);
  }

  /* The outline sits beside the article and follows the reader down it. */
  .guide-outline {
    position: sticky;
    top: 5.5rem;
    order: 2;
  }
}

.guide-outline {
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
}

.guide-outline h2 {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.7rem;
}

.guide-outline ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  counter-reset: outline;
}

.guide-outline li {
  counter-increment: outline;
  font-size: 0.95rem;
  line-height: 1.35;
}

.guide-outline li a::before {
  content: counter(outline) ".";
  color: var(--muted);
  margin-right: 0.45rem;
}

.guide-outline a:hover {
  color: var(--red);
}

.guide-body {
  max-width: 68ch;
  font-size: 1.075rem;
  line-height: 1.7;
}

.guide-body > *:first-child {
  margin-top: 0;
}

.guide-body p,
.guide-body ul,
.guide-body ol {
  margin: 0 0 1.15rem;
}

.guide-body h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.15;
  margin: 2.4rem 0 0.85rem;
  /* Anchored headings must not land under the sticky header. */
  scroll-margin-top: 5.5rem;
}

.guide-body h3 {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  margin: 1.8rem 0 0.6rem;
}

.guide-body ul,
.guide-body ol {
  padding-left: 1.3rem;
}

.guide-body li {
  margin-bottom: 0.5rem;
}

.guide-body a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

.guide-body a:hover {
  color: var(--red);
}

.guide-body blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--yellow);
  color: var(--muted);
}

.guide-body strong {
  font-weight: 800;
}

/* A dish's own table — "what's in it", "how it differs" — reads as data and
   must scroll on its own rather than widening the page. */
.guide-body .table-wrap {
  overflow-x: auto;
  margin: 0 0 1.4rem;
}

.guide-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.guide-body th,
.guide-body td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.guide-body th {
  font-weight: 800;
}

.guide-cta {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.guide-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 1rem;
}

.guide-cta ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.7rem;
}

.guide-cta li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-height: 48px;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.guide-cta li a strong {
  flex: 1 1 100%;
  font-weight: 800;
}

.guide-cta li a span {
  color: var(--muted);
  font-size: 0.92rem;
}

.guide-cta li a:hover {
  background: var(--yellow);
  color: #201b12;
  transform: translateY(-2px);
}

.guide-cta li a:hover span {
  color: inherit;
}

/* The landing page's one link out of the score section, into the full
   method. It lives here rather than in forkelo.css because the original
   design file has no such link and is kept in sync with the design. */

.method-link {
  margin-top: 0.9rem;
  font-weight: 750;
}

.method-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.method-link a:hover {
  color: var(--red);
}

/* ── The paper: /methodology and /about ──────────────────────────── */
/* A long-form article layout. `.paper` is the two-column shell — a sticky
   contents rail beside a measured prose column — and everything under
   `.paper__body` styles the article itself. The prose is set in a serif
   because the page is meant to be read end to end rather than scanned;
   headings stay in the site's Arial Black so it still reads as Forkelo.
   No web font is loaded: both stacks are already on the machine. */

.paper {
  --paper-measure: 74ch;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  /* Narrower than the site's 1480px shell: an article is a column of prose
     and a contents rail, and the rest of a wide screen is margin. */
  max-width: 1120px;
  padding-block: clamp(1.6rem, 3vw, 2.6rem) var(--section-space);
}

.paper__masthead {
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 3px solid var(--ink);
}

.paper__masthead .page-title {
  max-width: 18ch;
}

.paper__dek {
  max-width: 62ch;
  margin-top: 1.3rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.45;
}

.paper__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paper__byline span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.paper__byline b {
  color: var(--ink);
  font-weight: 900;
}

.paper__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: clamp(1.8rem, 3vw, 2.8rem);
}

/* Grid and flex items default to min-content width, which lets a wide table
   or a nowrap formula push the whole page sideways instead of scrolling
   inside its own box. These two keep the overflow where it belongs. */
.paper__layout > * {
  min-width: 0;
}

@media (min-width: 1100px) {
  .paper__layout {
    grid-template-columns: minmax(0, var(--paper-measure)) 16rem;
  }
}

/* ── Contents rail ───────────────────────────────────────────────── */

/* The rail is first in the document so it is reachable before the article
   on a phone and to a screen reader; at desktop widths it is placed into
   the second column instead, beside the prose. */
.paper__contents {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
  font-size: 0.88rem;
  line-height: 1.35;
}

@media (min-width: 1100px) {
  /* Pinned only where it has a column of its own. In one column it is a
     plain list at the top of the article — sticky there would park it on
     top of the prose. */
  .paper__contents {
    position: sticky;
    top: 92px;
    grid-column: 2;
    grid-row: 1;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    padding: 1.3rem 1.3rem 1.5rem;
  }

  .paper__body {
    grid-column: 1;
    grid-row: 1;
  }
}

.paper__contents h2 {
  margin-bottom: 0.8rem;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-family: inherit;
}

.paper__contents ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.paper__contents li {
  counter-increment: toc;
}

.paper__contents li + li {
  margin-top: 0.5rem;
}

.paper__contents a {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: 0.3rem;
  color: var(--muted);
  font-weight: 650;
}

.paper__contents a::before {
  content: counter(toc) ".";
  color: var(--red);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

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

/* ── Article body ────────────────────────────────────────────────── */

.paper__body {
  max-width: min(var(--paper-measure), 100%);
  counter-reset: section figure;
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.62;
}

.paper__body > section {
  counter-increment: section;
  scroll-margin-top: 96px;
}

.paper__body > section + section {
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
}

.paper__body h2 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.02;
}

.paper__body h2::before {
  content: counter(section);
  color: var(--red);
  font-size: 0.62em;
  font-variant-numeric: tabular-nums;
}

.paper__body h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.16rem;
  line-height: 1.15;
}

.paper__body p + p,
.paper__body p + ul,
.paper__body p + ol,
.paper__body ul + p,
.paper__body ol + p {
  margin-top: 0.95rem;
}

.paper__body ul,
.paper__body ol {
  margin: 0.9rem 0;
  padding-left: 1.4rem;
}

.paper__body li + li {
  margin-top: 0.45rem;
}

.paper__body a:not(.button) {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.paper__body strong {
  font-weight: 800;
}

/* Symbols and code keep the sans/mono stacks — a serif italic `q` next to a
   serif roman `q` is not a distinction a reader should have to make. */
.paper__body var,
.paper__body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-style: normal;
  font-size: 0.9em;
}

.paper__body code {
  padding: 0.08rem 0.35rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.paper__body var {
  font-weight: 700;
  color: var(--red);
}

/* ── Abstract ────────────────────────────────────────────────────── */

/* The abstract is a section like the rest so it can be linked to, but it is
   not part of the numbering — section 1 is the first numbered heading. */
.paper__body > section.abstract {
  counter-increment: none;
}

.abstract {
  padding: 1.3rem 1.5rem;
  border-left: 5px solid var(--red);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--paper-strong);
}

.abstract h2 {
  display: block;
  margin-bottom: 0.6rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

.abstract h2::before {
  content: none;
}

.abstract p + p {
  margin-top: 0.8rem;
}

/* ── Display formulas ────────────────────────────────────────────── */

.formula {
  margin: 1.5rem 0;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
  overflow-x: auto;
}

/* Two fixed shadows and two scrolling covers: a cover hides its shadow when
   that edge is at the end of its travel, so a box that scrolls sideways says
   so and one that fits says nothing. Narrow screens are where this earns its
   keep — a formula line and an eight-column trace both outgrow a phone. */
.paper__table,
.formula {
  background:
    linear-gradient(to right, var(--paper-strong) 30%, transparent)
      left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--paper-strong) 30%, transparent)
      right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,
      color-mix(in srgb, var(--ink) 22%, transparent), transparent)
      left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,
      color-mix(in srgb, var(--ink) 22%, transparent), transparent)
      right / 14px 100% no-repeat scroll,
    var(--paper-strong);
}

.formula__line {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.97rem;
  line-height: 1.9;
  white-space: nowrap;
}

.formula__line + .formula__line {
  margin-top: 0.2rem;
}

.formula__where {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.formula em {
  font-style: normal;
  color: var(--red);
  font-weight: 700;
}

/* ── Tables ──────────────────────────────────────────────────────── */

.paper__table {
  margin: 1.4rem 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
}

.paper__table table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
}

.paper__table caption {
  padding: 0.85rem 1.1rem 0;
  color: var(--muted);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
  text-align: left;
}

.paper__table th,
.paper__table td {
  padding: 0.55rem 1.1rem;
  text-align: left;
  vertical-align: top;
}

.paper__table thead th {
  border-bottom: 2px solid var(--ink);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paper__table tbody tr + tr th,
.paper__table tbody tr + tr td {
  border-top: 1px solid var(--line);
}

/* The row-by-row traces are eight columns wide and still have to fit the
   measure, so they trade padding for columns. */
.trace .paper__table table {
  font-size: 0.8rem;
}

.trace .paper__table th,
.trace .paper__table td {
  padding: 0.45rem 0.5rem;
}

.trace .paper__table th:first-child,
.trace .paper__table td:first-child {
  padding-left: 0.9rem;
}

.trace .paper__table th:last-child,
.trace .paper__table td:last-child {
  padding-right: 0.9rem;
}

.paper__table tbody th {
  font-weight: 800;
}

/* Row headings are short labels, not prose. Giving them a floor width stops
   "reader confidence — medium" breaking across three lines beside a column
   holding one number. */
@media (min-width: 700px) {
  .paper__table tbody th {
    min-width: 9.5rem;
  }
}

.paper__table .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.paper__table .yes {
  color: var(--green);
  font-weight: 800;
}

.paper__table .no {
  color: var(--red);
  font-weight: 800;
}

.paper__table tr.is-total th,
.paper__table tr.is-total td {
  border-top: 2px solid var(--ink);
  font-weight: 900;
}

/* ── Figures ─────────────────────────────────────────────────────── */

.figure {
  counter-increment: figure;
  margin: 1.8rem 0;
  padding: 1.2rem 1.3rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
}

.figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.figure figcaption {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.5;
}

.figure figcaption::before {
  content: "Figure " counter(figure) " — ";
  color: var(--ink);
  font-weight: 900;
}

.chart__axis {
  stroke: var(--line);
  stroke-width: 1;
}

.chart__grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.chart__curve {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.chart__curve--alt {
  stroke: var(--green);
  stroke-dasharray: 6 5;
}

.chart__area {
  fill: var(--red);
  opacity: 0.09;
}

.chart__label {
  fill: var(--muted);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.chart__label--key {
  fill: var(--ink);
}

.chart__dot {
  fill: var(--red);
}

/* ── Callouts ────────────────────────────────────────────────────── */

.callout {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-card);
  background: var(--yellow);
  color: #201b12;
}

.callout svg {
  flex: none;
  margin-top: 0.15rem;
}

.callout strong {
  font-weight: 900;
}

.callout a {
  color: inherit;
  text-decoration-color: currentColor;
}

.callout--quiet {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
}

/* ── Constants grid ──────────────────────────────────────────────── */

.constants {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.7rem;
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.constants li {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-strong);
}

.constants b {
  display: block;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.constants span {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* ── Worked example trace ────────────────────────────────────────── */

.trace {
  min-width: 0;
  margin: 1.5rem 0;
  padding: 1.1rem 1.2rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
}

.trace > h3 {
  margin-top: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.trace__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.88rem;
}

.trace__score {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 2.4rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--red);
}

.trace__flag {
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  font-weight: 800;
}

/* ── Footnote / colophon strip ───────────────────────────────────── */

.paper__colophon {
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
  padding-top: 1.4rem;
  border-top: 3px solid var(--ink);
  color: var(--muted);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
}

.paper__colophon p + p {
  margin-top: 0.7rem;
}

/* ── /about ──────────────────────────────────────────────────────── */

.about__principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.about__principles li {
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-strong);
}

.about__principles svg {
  color: var(--red);
}

.about__principles b {
  display: block;
  margin: 0.6rem 0 0.35rem;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.about__principles span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.about__steps {
  counter-reset: step;
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.about__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.9rem;
  padding: 1rem 0;
}

.about__steps li + li {
  border-top: 1px solid var(--line);
}

.about__steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 1.3rem;
  letter-spacing: -0.05em;
  color: var(--red);
}

/* The number is the first grid cell; the title and its note both belong in
   the second column, stacked, rather than flowing back under the number. */
.about__steps b,
.about__steps span {
  grid-column: 2;
}

.about__steps b {
  margin-bottom: 0.25rem;
  font-weight: 900;
}

.about__steps span {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
}