/* Tablegrub public site. Monochrome, like the app (Theme.swift, palette .monochrome). */
:root {
  color-scheme: light dark;
  --heart: var(--ink);
  --bg: #f3f3f1;
  --surface: #ffffff;
  --ink: #111111;
  --muted: #6b6b6b;
  --line: #e2e2df;
  --soft: #e9e9e6;
  --invert-bg: #111111;
  --invert-ink: #f3f3f1;
  --land: #e7e7e3;
  /* Each title's colour, for its medal's disc and its chip (ContributorTitle.hex in the app): his pick "07 Fresh Vivid"
     (2026-10-29), softer than the game item colours they follow, on light and dark pages alike. */
  --tier-uncommon: #4aab2e;
  --tier-rare: #2479e8;
  --tier-epic: #9341e6;
  --tier-legendary: #e47b2c;
  --tier-artifact: #d1a137;
  --font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --wrap: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e0e;
    --surface: #1a1a1a;
    --ink: #f2f2f2;
    --muted: #9c9c9c;
    --line: #2c2c2c;
    --soft: #262626;
    --invert-bg: #f2f2f2;
    --invert-ink: #0e0e0e;
    --land: #202020;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 20; background: var(--surface); padding: 8px 12px; border-radius: 8px; }

h1, h2, h3 { margin: 0; line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(44px, 7.2vw, 86px); font-weight: 900; }
h2 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 900; }
h3 { font-size: 15px; letter-spacing: 0; font-weight: 700; }
p { margin: 0; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.lede { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5; color: var(--muted); max-width: 33em; margin-top: 20px; text-wrap: pretty; }
.fine { font-size: 13.5px; color: var(--muted); }
.note { margin-top: 28px; color: var(--muted); font-size: 15px; }

/* Header and footer */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; position: relative; }
.brand { display: block; text-decoration: none; }
.wordmark { height: 25px; width: auto; }
/* The olive-branch logo; 1.6x the old wordmark's height keeps the letters the same size. */
.logo { height: 40px; width: auto; }
.top nav, .foot nav { display: flex; gap: 22px; }
.top nav a, .foot nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); }
.top nav a:hover, .top nav a[aria-current], .foot nav a:hover { color: var(--ink); }
/* The search box at the end of the bar (his request, 2026-11-02: "i want to search posts on the website"): a plain
   form to /search, no script. A pill with a magnifier; on phones a round icon-sized field that widens over the whole
   bar while it has focus (:focus-within, below), so the logo and the links keep their room. The links sit just before
   it, on the right. */
.top-in nav { margin-left: auto; }
.site-search { position: relative; flex: none; width: 260px; }
.site-search label { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 38px; display: grid; place-items: center; color: var(--muted); cursor: text; }
.site-search label svg, .search-field svg { width: 17px; height: 17px; }
:is(.site-search, .search-field) input {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 38px; margin: 0; padding: 0 12px 0 36px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 15px var(--font);
}
:is(.site-search, .search-field) input::placeholder { color: var(--muted); opacity: 1; }
:is(.site-search, .search-field) input::-webkit-search-decoration { -webkit-appearance: none; }
:is(.site-search, .search-field) input:hover { border-color: var(--muted); }
/* Focused: an ink ring two pixels wide, the pill kept (the site's :focus-visible would square its corners). */
:is(.site-search, .search-field) input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); border-radius: 999px; }
.foot { border-top: 1px solid var(--line); padding: 44px 0 52px; margin-top: 24px; }
.foot-in { display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; align-items: start; }
.foot .wordmark { height: 21px; }
.foot .logo { height: 34px; }
.foot p { color: var(--muted); font-size: 15px; margin-top: 12px; }
.foot .fine { grid-column: 1 / -1; margin-top: 8px; }
/* Six footer links (build.mjs FOOTER_LINKS) in two columns of three, read down each column; one column on the
   narrowest phones, where "Community guidelines" would not fit beside "Delete account". */
.foot nav { display: grid; grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 4px 36px; }
.foot nav a { padding: 4px 0; }
@media (max-width: 359px) { .foot nav { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 32px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 24px;
  border-radius: 999px; background: var(--invert-bg); color: var(--invert-ink);
  font-weight: 700; font-size: 16.5px; text-decoration: none; white-space: nowrap;
}
.pill[aria-disabled] { cursor: default; }
.pill.light { background: var(--invert-ink); color: var(--invert-bg); }
.apple { width: 20px; height: 20px; margin-top: -3px; }
.text-link { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--line); padding-bottom: 2px; }
.text-link:hover { border-color: var(--ink); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 80px; }

/* Phone illustration */
.phone-wrap { margin: 0; justify-self: center; width: min(330px, 100%); }
.phone-wrap figcaption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
.phone {
  aspect-ratio: 9 / 19.2; border-radius: 52px; padding: 11px; background: #0b0b0b;
  box-shadow: 0 0 0 1.5px #2a2a2a inset, 0 40px 80px -30px rgba(0, 0, 0, 0.45), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
}
.screen {
  position: relative; height: 100%; border-radius: 42px; overflow: hidden;
  background: var(--bg); display: flex; flex-direction: column; font-size: 12px; line-height: 1.3;
}
.island { position: absolute; top: 10px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: #000; border-radius: 20px; z-index: 2; }
.app-head { padding: 50px 16px 10px; }
.app-area { font-size: 25px; font-weight: 900; letter-spacing: -0.03em; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.app-search { margin-top: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--muted); font-size: 11.5px; background: var(--surface); }
.mini-map { width: 100%; height: auto; aspect-ratio: 300 / 150; flex: none; }
.mini-map .land { fill: var(--land); }
.mini-map .faint { fill: none; stroke: var(--muted); stroke-opacity: 0.35; stroke-width: 0.8; }
.mini-map .here { fill: var(--ink); fill-opacity: 0.05; stroke: var(--ink); stroke-width: 1.6; }
.mini-map .pin-ring { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.app-controls { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.seg { display: inline-flex; background: var(--soft); border-radius: 8px; padding: 2px; }
.seg span { padding: 5px 9px; border-radius: 6px; font-weight: 600; font-size: 11px; }
.seg .on { background: var(--ink); color: var(--bg); }
.period { font-size: 11px; font-weight: 600; }
/* Every rank in the same small row, as in the app's Search tab. */
.app-row { display: flex; align-items: center; gap: 9px; margin: 0 14px; padding: 7px 2px; border-top: 1px solid var(--line); }
.app-rank { width: 12px; flex: none; font-weight: 900; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.app-photo { width: 46px; height: 36px; flex: none; border-radius: 7px; overflow: hidden; }
.app-photo svg { width: 100%; height: 100%; }
.app-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.app-text b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-text span { color: var(--muted); font-size: 10.5px; }
.app-row .likes { color: var(--ink); font-weight: 800; font-size: 12.5px; display: flex; align-items: center; gap: 3px; flex: none; }
.likes .heart { width: 12px; height: 12px; }
.chev-r { width: 6px; height: 6px; flex: none; margin: 0 4px 0 1px; border-right: 1.5px solid var(--muted); border-top: 1.5px solid var(--muted); transform: rotate(45deg); }
.tabbar {
  margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 4px 22px;
  border-top: 1px solid var(--line); background: var(--surface);
}
.tabbar span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); }
.tabbar span.on { color: var(--ink); }
.tabbar svg { width: 19px; height: 19px; }
.tabbar small { display: block; height: 12px; font-size: 9px; line-height: 12px; white-space: nowrap; }

/* Bands and sections */
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 84px 0; }
.counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.count-card { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: var(--bg); }
.count-label { font-size: clamp(26px, 2.6vw, 32px); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 12px; }
.count-card p:last-child { color: var(--muted); }

.split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-top: 96px; padding-bottom: 8px; }
.split.flip > :first-child { order: 2; }
.dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dish, .journey { margin: 0; }
.dish svg { width: 100%; aspect-ratio: 4 / 5; height: auto; border-radius: 12px; }
.dish figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 700; font-size: 15px; margin-top: 8px; }
.dish .heart { width: 16px; height: 16px; flex: none; }
.journeys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.journey { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.journey svg { width: 100%; aspect-ratio: 0.96; height: auto; }
.journey figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.journey b { font-size: clamp(17px, 1.7vw, 20px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.journey span { color: var(--muted); font-size: 14.5px; }

.areas { padding-top: 104px; padding-bottom: 96px; }
.areas-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; margin-top: 40px; align-items: start; }
.map-card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 12px; }
.area-map { width: 100%; height: auto; }
.area-map .city { fill: var(--land); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.area-map .area { fill: var(--ink); fill-opacity: 0.07; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 0.8; stroke-linejoin: round; }
/* The map's views (one per state, then All), picked without script: each radio button sits just before its view,
   and each view repeats the row of buttons with its own one marked. */
.map-views { position: relative; }
.map-views > input { position: absolute; opacity: 0; pointer-events: none; }
.map-view { display: none; }
.map-views > input:checked + .map-view { display: block; }
.map-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 2px 10px; }
.map-bar label { cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.2; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); }
.map-bar label:hover { border-color: var(--muted); }
.map-bar label[aria-current] { background: var(--invert-bg); color: var(--invert-ink); border-color: var(--invert-bg); }
.map-views > input:focus-visible + .map-view .map-bar label[aria-current] { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.area-map .mall { fill: var(--ink); fill-opacity: 0.6; stroke: var(--surface); stroke-width: 1.2; }
/* The /areas list runs long, so on wide screens its map stays in view beside it. */
@media (min-width: 901px) { .results .areas-body .map-card { position: sticky; top: 84px; } }
.area-map .city:hover, .area-map .area:hover { fill: var(--ink); fill-opacity: 0.22; }
.area-map .mall:hover { fill-opacity: 0.9; }
.area-map .labels text {
  font: 800 30px var(--font); fill: var(--ink); text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: var(--surface); stroke-width: 7px; stroke-linejoin: round; pointer-events: none;
}
.area-map .labels .town { font-size: 22px; font-weight: 700; stroke-width: 5px; }
.area-list { display: grid; gap: 22px; }
.area-group h3 { margin-bottom: 10px; }
.areas-body .area-list { gap: 30px; }
.area-mail { margin: 0; color: var(--muted); font-size: 15px; }
.area-mail a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.area-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 4px; }
/* Country (h2), state (h3), city (h4); a state or country that is one city of its name shows that city's list. */
.area-head h2 { font-size: 24px; margin: 0; }
.area-head h3 { font-size: 20px; margin: 0; letter-spacing: -0.02em; }
.area-head h4 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
.area-head :is(h2, h3, h4) a { text-decoration: none; }
.area-head :is(h2, h3, h4) a:hover { text-decoration: underline; }
.area-stats { color: var(--muted); font-size: 13.5px; margin: 0; }
.area-stats b { color: var(--ink); }
.area-state.coming h2 { color: var(--muted); }
.area-country > .area-state { margin-top: 26px; }
.area-city { margin-top: 18px; }
.area-city > .area-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.area-rows { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.area-rows a { display: block; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); }
.area-rows a:hover .name { text-decoration: underline; }
.area-rows .name { display: block; font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.area-rows .area-stats { display: block; color: var(--muted); font-size: 12.5px; }
/* A city's malls, after its areas: a small heading, then each mall with its "Mall" label and its group's tag (KIP). */
.area-malls { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 0; }
.area-tags { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 2px; }
.area-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  padding: 3px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.area-tag.owner { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-ink); }
.eyebrow .area-tag { vertical-align: 1px; }
@media (max-width: 400px) { .area-rows { grid-template-columns: minmax(0, 1fr); } }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.chips li { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 14px; }

.invert { background: var(--invert-bg); color: var(--invert-ink); padding: 88px 0; }
.invert .lede { color: color-mix(in srgb, var(--invert-ink) 70%, var(--invert-bg)); }
.invert-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }

/* Text pages */
.prose { max-width: 760px; padding-top: 64px; padding-bottom: 72px; }
.prose h1 { font-size: clamp(40px, 6vw, 64px); }
.prose h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.02em; margin: 48px 0 14px; }
.prose p + p { margin-top: 14px; }
.prose > .fine { margin-top: 14px; }
.prose ul { padding-left: 1.1em; margin: 0; display: grid; gap: 10px; }
.prose a { text-underline-offset: 3px; }
/* The legal and help pages (privacy, terms, guidelines, delete-account): sub-headings, space between paragraphs,
   lists and tables, and an "On this page" list of the sections. */
.prose h3 { font-size: 18px; letter-spacing: -0.01em; margin: 28px 0 8px; }
.prose h2 + h3 { margin-top: 18px; }
.prose :is(p, ul, ol, dl, div) + :is(p, ul, dl) { margin-top: 14px; }
.prose h2 + :is(.steps, .contact-card) { margin-top: 18px; }
.toc { margin-top: 32px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.toc ol { margin: 0; padding: 0; list-style-position: inside; columns: 2; column-gap: 32px; font-size: 15.5px; color: var(--muted); }
.toc li { break-inside: avoid; padding: 3px 0; }
.toc a { text-decoration: none; color: var(--ink); }
.toc a:hover { text-decoration: underline; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 40px 0 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; position: relative; padding: 20px 20px 20px 70px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.steps li::before { content: counter(step); position: absolute; left: 20px; top: 18px; width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--bg); font-weight: 800; display: grid; place-items: center; }
.rules { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 0 20px; }
.rules div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rules div:last-child { border-bottom: 0; }
.rules dt { color: var(--muted); }
.rules dd { margin: 0; font-weight: 700; text-align: right; }
/* Tables with long values (privacy retention, delete-account timing): on phones the label sits above its value. */
@media (max-width: 560px) { .rules.long div { flex-direction: column; gap: 2px; } .rules.long dd { text-align: left; } }
.contact-card { margin-top: 32px; padding: 22px 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 18px; }
.contact-card a { font-weight: 700; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 20px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 17px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 18px; color: var(--muted); }
.message { min-height: 56vh; padding-top: 96px; padding-bottom: 96px; }

/* Narrow screens */
@media (max-width: 900px) {
  .hero, .split, .areas-body { grid-template-columns: 1fr; gap: 40px; }
  .split.flip > :first-child { order: 0; }
  .hero { padding-top: 44px; padding-bottom: 56px; }
  .split { padding-top: 72px; }
  .counts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .top nav { gap: 16px; }
  .wordmark { height: 21px; }
  .top .logo { height: 34px; }
  .band { padding: 64px 0; }
  .dishes { gap: 8px; }
  .dish figcaption { font-size: 13px; }
  .journeys { gap: 10px; }
  .journey figcaption { padding: 12px; }
  .foot-in { grid-template-columns: 1fr; }
  .pill { width: 100%; justify-content: center; }
  .invert-in .pill { font-size: 15.5px; }
  .area-map .labels text { font-size: 40px; stroke-width: 9px; }
  .area-map .labels .town { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .pill, .text-link { transition: opacity 0.15s, border-color 0.15s; }
  .pill:hover { opacity: 0.86; }
}

/* ---- Results pages (read-only). ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.preview-note { background: var(--soft); border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink); padding: 8px 0; }
.page-head { padding-top: 36px; padding-bottom: 8px; }
.page-head h1 { font-size: clamp(38px, 6vw, 64px); }
.page-head .eyebrow { margin-bottom: 10px; }
.page-head .eyebrow a { text-decoration: none; }
.intro { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted); max-width: 40em; margin-bottom: 26px; }
.sub { color: var(--muted); margin-top: 10px; }
.sub a { color: var(--ink); font-weight: 600; }
.sub b { color: var(--ink); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.pills a { text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.pills a[aria-current] { background: var(--invert-bg); color: var(--invert-ink); border-color: var(--invert-bg); }
.section-title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.02em; margin: 40px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.section-title .detail, .detail { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.wrap.section-title { display: block; margin-left: auto; margin-right: auto; }
.narrow { max-width: 760px; }
.empty { padding-top: 24px; color: var(--muted); }
.empty a { color: var(--ink); font-weight: 700; }

/* Small ranked rows (RankListRow). */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-top: 1px solid var(--line); text-decoration: none; }
.rows li:last-child .row { border-bottom: 1px solid var(--line); }
.row:hover { background: var(--soft); }
.row-rank { width: 24px; flex: none; font-weight: 900; font-size: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row-photo { width: 70px; height: 58px; flex: none; border-radius: 10px; object-fit: cover; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row-text b { font-weight: 600; font-size: 15px; line-height: 1.25; }
.row-text span { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Whose photo it is, one line, a little smaller than the name (his request, 2026-10-29: "add username below dish name
   but limit to only one line for main tab tiles and also search tiles"). */
.row-text .row-by { font-size: 12.5px; color: var(--ink); } /* in the name's colour, not grey (2026-10-29: "dont have usernames grey, have it white") */
/* A dish's restaurant (2026-10-29: "move the restaurant name between dish name and likes") wraps to a second line
   rather than being cut short, as in the app's RankListRow; only past two does it end with an ellipsis. */
.row-text .row-place { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.row-text .row-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-text .row-sub .likes { flex: none; min-width: 52px; color: var(--ink); font-size: 15px; overflow: visible; }
.row-text .row-sub .likes span { color: inherit; overflow: visible; font-size: inherit; }
.row-text .row-sub .row-new { flex: none; min-width: 52px; }
.row-new { font-weight: 700; color: var(--muted); font-size: 14px; flex: none; }
.likes { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; flex: none; }
.likes .heart { width: 13px; height: 13px; color: var(--heart); }
/* Like hearts in the ink colour, black (white in dark mode) (his request, 2026-10-28: "have the hearts in black"). */
.heart { color: var(--heart); }
/* A card's visits, at the end of its likes row (VisitsBubble in the app), the number in white (no longer coloured by
   volume, 2026-10-28). */
.visits-bubble { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.82); color: rgba(255, 255, 255, 0.8); font-size: 11px; font-weight: 600; white-space: nowrap; }
.visits-bubble b { font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; color: #fff; }
/* the fork and spoon in a thin circle outline (2026-10-28: "put a circle outline around the fork and spoon icon") */
.forkspoon { width: 12px; height: 12px; flex: none; } /* no circle since 2026-10-29: "remove the outline around fork and spoon" */
.tally .forkspoon { width: 15px; height: 15px; display: inline-block; vertical-align: -3px; margin-right: 5px; color: var(--ink); }
/* A visit count as the fork and spoon and the number, no word (his request, 2026-10-29: "change all visits to fork and
   spoon count and the icon"): the icon a little over the text's cap height, in the text's colour. */
.visits-count { white-space: nowrap; }
.visits-count .forkspoon { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.post-likes, .post-like-count { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.post-like-count { font-size: 15px; margin-bottom: 10px; }
.post-like-count b { color: var(--ink); }
.heart-outline { width: 14px; height: 14px; flex: none; }
.chev-r { width: 7px; height: 7px; flex: none; margin: 0 6px 0 2px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); }

/* A cuisine's row: its top three places, three spots across (his words, 2026-10-28: "for each cuisine have 3 tiles
   max"). */
.shelf-sec { margin-top: 10px; }
/* Each shelf's heading pins under the site's top bar (sticky, 64px and its 1px line) while its cards scroll under it,
   until the shelf ends and the next heading takes its place, as Home's headers do in the app (his request,
   2026-10-28: "can we make all the headers to anchor at the top whenever a user browses down"). On the page's colour
   so the cards do not show through; the 8px on top was the section's margin. */
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; position: sticky; top: 65px; z-index: 5; background: var(--bg); padding-top: 8px; padding-bottom: 2px; }
.shelf-head h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; }
/* the heart and count centred on the cuisine's name, not on its baseline (2026-10-28) */
.shelf-head h3 a { text-decoration: none; }
.shelf-head .count { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 4px; display: inline-flex; align-items: center; gap: 3px; }
.shelf-head .count .heart { width: 11px; height: 11px; }
/* The unlabelled row has no page of its own, so it says how many it leaves out. */
.shelf-head .more { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.see-all { text-decoration: none; font-weight: 700; font-size: 22px; line-height: 1; white-space: nowrap; padding: 0 4px; }
.stat-icons { display: inline-flex; gap: 14px; align-items: center; vertical-align: middle; }
.zone-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zone-title h1 { min-width: 0; }
.zone-title .stat-icons { flex: none; }
/* The zone's name and counts float under the site's top bar while its page scrolls, and the shelf headings stick just
   under them, as on the app's Home (his request, 2026-10-29: "have the region on the main feed to float too").
   The heading itself stays as it always was, full size and wrapping, so a long name is never shrunk or cut. What
   sticks is .zone-bar, a one-line copy of the row (hidden from screen readers, which have the heading) at a set
   height, so the shelf headings know where to stop: --bar-h. At rest it lies tucked behind the heading (its negative
   margin; the heading and the head above it are drawn over it on the page's colour), so the page lies exactly as
   before; it sticks while still covered, and the heading scrolling away uncovers it. .zone-page spans the zone's page,
   so the bar stays up to its end. A name too long for the bar ends in an ellipsis there only. */
.zone-page { --bar-h: 52px; }
.zone-head { padding-bottom: 0; }
/* The eyebrow's 10px gap moves into the title row's top, so the two cover the tucked bar without a seam. */
.zone-head .eyebrow { margin-bottom: 0; }
.zone-head, .zone-title { position: relative; z-index: 7; background: var(--bg); }
.zone-title { padding-top: 10px; }
.zone-title h1 { font-size: clamp(38px, 6vw, 64px); }
/* nowrap holds "No eateries yet" (a zone with none) to one line too. */
.zone-bar {
  position: sticky; top: 65px; z-index: 6; height: var(--bar-h); margin-top: calc(-1 * var(--bar-h));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); white-space: nowrap;
}
.zone-bar > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: clamp(22px, 7.2vw, 28px); font-weight: 900; line-height: 1.3; letter-spacing: -0.03em; }
.zone-bar .stat-icons { flex: none; }
.page-head-end { padding-bottom: 8px; }
.zone-page .shelf-head { top: calc(65px + var(--bar-h)); }
.zone-page .map-col { top: calc(84px + var(--bar-h)); }
/* Under the bar the stuck map has that much less room, so on a short laptop window it is held to what is left (its
   caption and borders take 43px, 20px spare under it), and its foot and caption stay in view (2026-10-29). */
@media (min-width: 901px) {
  .zone-page .map-col .pin-map svg { max-height: max(220px, calc(100vh - 147px - var(--bar-h))); }
}
/* What the keyboard or a link lands on clears the bar too (html's scroll-padding covers the top bar). */
.zone-page :is(a, [id]) { scroll-margin-top: var(--bar-h); }
.zone-page .shelf .card { scroll-margin-top: calc(36px + var(--bar-h)); }
.stat-icons > span[aria-hidden] { display: inline-flex; align-items: center; gap: 5px; }
.stat-icons svg { width: 17px; height: 17px; color: var(--muted); }
.shelf {
  list-style: none; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  /* Lines up with the page gutter; 6px on top so a card's focus ring is not cut off. */
  padding: 6px max(20px, env(safe-area-inset-left), calc((100% - var(--wrap)) / 2 + 20px)) 10px;
}
/* A card reached with the keyboard stops below its shelf's pinned heading (32px) as well as the top bar, so its badge
   and focus ring are not hidden under the heading (2026-10-28). It has to sit on the card, the focused element. */
.shelf .card { scroll-margin-top: 36px; }
.card { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.card:hover { border-color: var(--muted); }
.card-photo { position: relative; display: block; }
.card-photo img { display: block; width: 100%; object-fit: cover; }
.badge { position: absolute; top: 5px; left: 5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, 0.72); color: #fff; font-weight: 900; font-size: 12.5px; display: grid; place-items: center; }
/* The likes keep to the card's foot, so cards side by side have them level whatever their names take (2026-10-28). */
.card-text { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 7px 8px 9px; }
/* The name (two lines at most) at the top, in room for two lines so cards side by side stay level; whose photo it is
   on one line (2026-10-29: "add username below dish name but limit to only one line for main tab tiles"), at the foot
   directly above the counts ("have the username always directly above the count, for all the tiles in home feed"). */
.card-head { display: flex; flex-direction: column; min-width: 0; min-height: calc(2 * 1.25 * 13.5px); }
.card-head > b { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-by { display: block; margin-top: auto; margin-bottom: 1px; font-size: 12px; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-by .medal { --d: 11px; margin-right: 3px; vertical-align: -1px; }
/* Likes and visits in the app's proportions (LikesCount 14, ForkSpoon 11), so they share a row even on the narrow
   card of a two-place row on a phone; a card narrower still drops the visits under the likes instead of cutting them. */
.card-meta { margin-top: auto; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap; }
.card-by + .card-meta { margin-top: 0; }
.card-text .likes { font-size: 14px; gap: 3px; }
.card-text .likes .heart { width: 10px; height: 10px; }
.card-meta .visits-bubble { gap: 3px; padding: 2px 6px; }
.card-meta .forkspoon { width: 11px; height: 11px; }
/* The row is three spots and never scrolls sideways (ShelfTiles and ThirdsRow in the app). Of two cards the first
   takes two spots and the second one (his rule, 2026-10-26); three take a spot each (2026-10-28). The two-spot card
   gets a taller photo. A lone card takes the first two spots too, the third left empty, so it matches a two-card
   shelf's first card, photo and all (his words, 2026-10-28: "i think if it's a singular it will take up 2 slot tile
   let's try that"). No dashed "add one" note since his words of 2026-10-28: "i think i dont want user to post from
   the main page, just incase user is on a diff region". */
:is(.shelf-1, .shelf-2) li:first-child { grid-column: span 2; }
:is(.shelf-1, .shelf-2) .card-photo img { height: clamp(120px, 12vw, 170px); }
.shelf-3 .card-photo img { height: clamp(100px, 11vw, 160px); }
/* Two lines for the name and one for the counts on every tile (his request, 2026-10-28: "tiles should be 2 lines
   restaurant and one line for the count"): on narrow phones the counts get smaller rather than wrapping. A lone card
   is two spots wide since 2026-10-28, so it keeps the full size, like a two-card shelf's first. */
@media (max-width: 440px) { .shelf-3 .card-meta { gap: 4px; } .shelf-3 .card-text .likes { font-size: 12.5px; } .shelf-3 .card-meta .visits-bubble { padding: 1px 5px; gap: 2px; } .shelf-3 .card-meta .visits-bubble b { font-size: 10.5px; } .shelf-3 .card-meta .forkspoon { width: 9.5px; height: 9.5px; } }
@media (max-width: 360px) { .shelf-3 .card-text { padding-left: 6px; padding-right: 6px; } .shelf-3 .card-meta { gap: 3px; } .shelf-3 .card-text .likes { font-size: 11.5px; gap: 2px; } .shelf-3 .card-text .likes .heart { width: 8px; height: 8px; } .shelf-3 .card-meta .visits-bubble { padding: 1px 4px; } .shelf-3 .card-meta .visits-bubble b { font-size: 10px; } .shelf-3 .card-meta .forkspoon { width: 8.5px; height: 8.5px; } }
/* The zone's front-page sponsor (SponsorBanner in the app, 2026-10-28), photo left and words right since his pick
   that day ("Let's go with b for sponsored"): a square picture, then Sponsored, the headline, and the place's name
   with its own likes and visits after a dot. The picture fills the card's height when the words need more. */
.sponsor-slot { margin-top: 14px; }
.sponsor-card { --sponsor-side: clamp(100px, 13vw, 156px); display: flex; min-height: var(--sponsor-side); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sponsor-card:hover { border-color: var(--muted); }
.sponsor-photo { position: relative; display: block; flex: 0 0 var(--sponsor-side); }
.sponsor-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sponsor-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 10px 12px; }
.sponsored-tag { padding: 1px 5px; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
/* On the photo (2026-10-28): white on a dark backing, so it reads on any photo in light and dark. */
.sponsor-photo .sponsored-tag { position: absolute; top: 6px; left: 6px; z-index: 1; color: #fff; border-color: #fff; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6); }
.sponsor-headline { font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
/* Name · counts on one line when both fit; otherwise the counts wrap to a line of their own, and their dot, which
   then starts that line, falls outside .sponsor-meta and is clipped. */
.sponsor-meta { display: block; align-self: stretch; overflow: hidden; }
.sponsor-meta-in { display: flex; flex-wrap: wrap; align-items: center; row-gap: 3px; margin-left: -16px; }
.sponsor-name { margin-left: 16px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.sponsor-counts { display: inline-flex; align-items: center; gap: 7px; }
.sponsor-counts::before { content: '·'; content: '·' / ''; flex: none; width: 16px; margin-right: -7px; text-align: center; font-weight: 700; color: var(--muted); }
.sponsor-counts .likes { font-size: 14px; }
.sponsor-likes { display: inline-flex; align-items: center; gap: 3px; }
.sponsor-when { font-size: 12px; font-weight: 600; color: var(--muted); }
.sponsor-counts .forkspoon { width: 11px; height: 11px; }
@media (min-width: 700px) { .sponsor-text { gap: 6px; padding: 12px 18px; } }
.missing { margin-top: 26px; }
.missing h3 { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.chips.links a { text-decoration: none; display: inline-block; }
.chips.links li { padding: 0; }
.chips.links a { padding: 5px 12px; }
.chips.links li:hover { border-color: var(--muted); }
.chips .n { color: var(--muted); font-size: 12.5px; font-weight: 700; margin-left: 2px; }

/* Ranked lists beside the area map. */
.ranked-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: start; }
.ranked-grid > div { min-width: 0; }
.map-col { position: sticky; top: 84px; margin-top: 40px; }
.pin-map { margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.pin-map svg { width: 100%; height: auto; }
.pin-map .land { fill: var(--land); }
.pin-map .faint { fill: none; stroke: var(--muted); stroke-opacity: 0.35; stroke-width: 1.2; }
.pin-map .here { fill: var(--ink); fill-opacity: 0.05; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.pin-map .pin { fill: var(--ink); stroke: var(--surface); stroke-width: 2.5; }
.pin-map a:hover .pin { fill: var(--muted); }
.pin-map .pin-n { fill: var(--bg); font: 800 15px var(--font); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pin-map .pin-x { fill: var(--ink); font: 800 12px var(--font); pointer-events: none; }
.pin-map figcaption { font-size: 13px; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--line); }
.route-map svg { max-height: 270px; } /* a quarter shorter than 360 (2026-10-29: "reduce height of map by 25%") */
.pin-map .route { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 9; }
.route-link { margin-top: 12px; font-size: 15px; }
.stops li { position: relative; }
.stops a.stop-maps { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 1; width: 40px; height: 40px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--ink); }
.stops a.stop-maps::before { content: none; }
.stops a.stop-maps svg { width: 22px; height: 22px; }
/* Photo beside the text; more specific than the older .stops a rule further down, which stacks them. */
.stops li > a:not(.stop-maps) { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 56px 12px 50px; }
.stops li > a:not(.stop-maps)::before { top: 30px; }

/* "Posting happens in the app." */
.app-note { display: flex; gap: 10px; align-items: flex-start; margin: 40px 0 8px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 15px; }
.app-note svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* Place, journey and visit pages. */
.place, .journey-page, .visit { padding-top: 28px; padding-bottom: 24px; }
.hero img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; display: block; }
.place .hero img { aspect-ratio: auto; height: 190px; }
.place h1 { font-size: clamp(26px, 3.4vw, 34px); margin-top: 18px; }
.journey-page h1 { font-size: clamp(26px, 3.4vw, 34px); margin-top: 18px; }
/* Visitor / delivery photo tabs and the profile's Visits / Journeys, CSS only. The app's outline style (his
   request, 2026-10-28: "have the segmented control like this"): no track, muted labels, the chosen one bold ink
   inside a 2px ink outline. Equal widths, as in the app's OutlineSegmented. */
.seg-tabs { display: flex; flex-wrap: wrap; gap: 0; }
.seg-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.seg-tabs label { flex: 1 1 0; min-width: 0; min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 10px; font-weight: 500; font-size: 15px; color: var(--muted); cursor: pointer; border: 2px solid transparent; border-radius: 15px; }
.seg-tabs label:hover { color: var(--ink); }
.seg-tabs input:checked + label { color: var(--ink); font-weight: 700; border-color: var(--ink); }
.seg-tabs input:focus-visible + label { outline: 2.5px solid var(--ink); outline-offset: 3px; }
/* On phones the photo tabs ("Delivery · 245") get more room, so a three-digit count stays on one line at
   375px; on the narrowest they also shrink a little, and a long label breaks only between its words. */
@media (max-width: 400px) { .seg-tabs label { padding: 8px 4px; } }
@media (max-width: 360px) { .seg-tabs label { font-size: 14px; } }
/* Room between the bio and the outline, as the app leaves above its Visits / Journeys. */
.profile-tabs { margin-top: 14px; }
@media (forced-colors: active) {
  .seg-tabs label { border-color: Canvas; }
  .seg-tabs input:checked + label { border-color: Highlight; }
}
.seg-panel { width: 100%; margin-top: 12px; display: none; }
.seg-tabs input:nth-of-type(1):checked ~ .seg-v, .seg-tabs input:nth-of-type(2):checked ~ .seg-d { display: block; }
.small { font-size: 14px; margin-bottom: 10px; }
.stops a { padding-left: 50px; display: flex; flex-direction: row; gap: 12px; align-items: flex-start; }
.stop-photo { width: 64px; height: 64px; border-radius: 9px; object-fit: cover; flex: none; }
.stop-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stop-text .nums { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; }
.stop-text .nums .likes { font-size: 15px; color: var(--ink); }
.stop-text .note { color: var(--ink); opacity: 0.85; margin-top: 2px; font-size: 15px; }
.profile { padding-top: 32px; padding-bottom: 24px; }
/* The contributor title from shared visits (Titles.swift in the app): the title's glyph and name on a pill in the
   title's colour (TitleChip). */
.title-chip { display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 0; padding: 3px 11px; border-radius: 999px; background: var(--soft); color: var(--ink); font-weight: 700; font-size: 13.5px; }
.title-chip .glyph { flex: none; width: 1.08em; height: 1.08em; }
/* each title's colour (--tier-*, "07 Fresh Vivid") from 50 shared visits up (ContributorTitle.hex in the app, 28 Oct:
   "50-100 is green, 101-200 is blue, 201- 300 is purple, , 301 onwards is legendary, orange"); on the chip green,
   orange and gold take dark ink and a hairline so they show on light pages */
.title-chip.tier-uncommon { background: var(--tier-uncommon); color: #111; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.title-chip.tier-rare { background: var(--tier-rare); color: #fff; }
.title-chip.tier-epic { background: var(--tier-epic); color: #fff; }
.title-chip.tier-legendary { background: var(--tier-legendary); color: #111; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
/* the fifth, Grand Epicure from 401 (2026-10-28, "use these ranks"): gold */
.title-chip.tier-artifact { background: var(--tier-artifact); color: #111; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
/* The medal (TitleMedal in the app; his picks, 2026-10-29: "03 Curved Branch", then "07 Fresh Vivid"): a disc in the
   title's colour (--tier-*) with its glyph in white, every title the same size. */
.medal { --d: 15px; --stem: 0.03; flex: none; display: inline-block; width: var(--d); height: var(--d); }
.medal svg { display: block; width: 100%; height: 100%; }
.medal.tier-uncommon { color: var(--tier-uncommon); }
.medal.tier-rare { color: var(--tier-rare); }
.medal.tier-epic { color: var(--tier-epic); }
.medal.tier-legendary { color: var(--tier-legendary); }
.medal.tier-artifact { --stem: 0.02; color: var(--tier-artifact); }
/* The stems as his picture draws them, 3% of the medal (--d) for a branch and 2% for the wreath, but never under
   0.4px, so they still show on the smallest medals (TitleGlyph.minStem in the app). Measured in the page's pixels,
   not the drawing's; a browser without max() keeps the drawing's own width. */
@supports (stroke-width: max(1px, 2px)) {
  .medal .stem { vector-effect: non-scaling-stroke; stroke-width: max(0.4px, calc(var(--d) * var(--stem))); }
}
/* What follows a person's name everywhere it shows: their title's medal (NameBadges in the app, 28 Oct). Sized to the
   name's font: the medal 0.85em across; a headline name keeps it at 20px, as the app does. In running text (a
   comment) the medal's bottom is the baseline, as it holds nothing but its picture, and -0.07em centres it on the
   capitals. */
.badges { flex: none; display: inline-flex; align-items: center; margin-left: 0.3em; vertical-align: -0.07em; }
.badges .medal { --d: 0.85em; }
.badges .verified { width: 1.02em; height: 1.02em; margin: 0; vertical-align: 0; }
/* In a flex row the row's gap already spaces the badges from the name, as the app's stack spacing does; the margin
   stays for running text and .curator-name, which have no gap. */
.photo-text .who .badges, .who-line .badges, .who-head h1 .badges { margin-left: 0; }
.who-head h1 .badges { font-size: 20px; }
.who-head { display: flex; gap: 16px; align-items: center; }
.who-head h1 { font-size: clamp(26px, 3.4vw, 34px); display: flex; align-items: center; gap: 4px; }
/* A person's picture: a circle in their colour with their initial (Avatar in the app). The colour is the SVG's own
   fill, so no inline style is needed. */
.avatar-pic { flex: none; overflow: visible; }
.avatar-pic text { fill: #fff; font-family: var(--font); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
/* A journey's curator, celebrated (CuratorLine in the app, 2026-10-27): picture with a faint ring, name with its medal
   and verified mark (.badges, beside the name since 28 Oct), then their title and credential. `.big` on the journey
   page. */
.curator { display: flex; align-items: center; gap: 8px; min-width: 0; }
.curator-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.curator-name { display: flex; align-items: center; min-width: 0; color: var(--ink); font-size: 14.5px; line-height: 1.25; }
.curator-name b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curator-standing { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; }
.curator-standing > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curator.big .curator-name { font-size: 17px; }
/* The page's card has room to wrap, so a long credential reads in full on a phone. */
.curator.big .curator-standing { font-size: 13px; align-items: flex-start; }
.curator.big .curator-standing > span { white-space: normal; }
/* The journey page's "Curated by" card, opening the curator's profile, then the saves with a full mark (a journey is saved, never liked; 2026-10-28). */
.curated-by { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; }
a.curated-by:hover { border-color: var(--muted); }
.curated-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.curated-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; color: var(--muted); }
.j-actions { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 16px; }
.j-saves { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: var(--muted); }
.j-saves b { color: var(--ink); font-variant-numeric: tabular-nums; }
.j-saves .bookmark { width: 13px; height: 13px; }
.j-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.j-stats span { display: inline-flex; align-items: center; gap: 4px; }
.j-stats .bookmark { width: 11px; height: 11px; }
.stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.stats b { color: var(--ink); }
.visit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.visit-grid a { position: relative; display: block; }
.visit-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.visit-grid .photo-heart { top: auto; left: auto; right: 6px; bottom: 6px; }
.who-line a, .meta a { color: var(--ink); }
.meta { color: var(--muted); margin-top: 6px; }
.meta a { color: var(--ink); font-weight: 600; }
.tally { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 16px; font-size: 16px; color: var(--muted); }
.tally + .fine { text-align: center; }
.tally b { color: var(--ink); font-weight: 800; margin-right: 4px; }
/* The visits number has no word after it (his request, 2026-10-29: "change all visits to fork and spoon count and the
   icon"), so no space either: the gap to the likes is the tally's own. */
.tally .forkspoon + b { margin-right: 0; }
.tally .heart { width: 13px; height: 13px; display: inline-block; margin-right: 5px; color: var(--ink); vertical-align: -1px; }
.tally.new b { margin-right: 6px; }
.verified { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-left: 5px; color: #1a73e8; }
.place .chips { margin-top: 16px; }
.place .actions { margin-top: 20px; }
.btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700; font-size: 15px; text-decoration: none; }
.place-details { margin-top: 8px; }
.place-details summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.place-details summary::-webkit-details-marker { display: none; }
.place-details summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.place-details[open] summary::after { transform: rotate(135deg); }
.place-details .meta { margin-top: 4px; }
.btn:hover { border-color: var(--ink); }
.photo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Photo on the right, text on the left (his request, 2026-10-23). */
.photo-row { position: relative; display: flex; flex-direction: row-reverse; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; }
.photo-row:hover { border-color: var(--muted); }
.photo-row .photo { width: 80px; height: 100px; flex: none; border-radius: 9px; object-fit: cover; }
.photo-heart { position: absolute; top: 16px; left: 94px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; display: grid; place-items: center; }
.photo-heart .heart { width: 13px; height: 13px; }
.photo-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.photo-text .who { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.photo-text .when { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 13px; }
.photo-text b { display: flex; align-items: center; gap: 5px; font-size: 16px; margin-top: 4px; }
.photo-text b .heart { width: 12px; height: 12px; flex: none; }
.photo-text .words { color: var(--muted); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.photo-text .channel { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.stops { list-style: none; counter-reset: stop; margin: 0; padding: 0; display: grid; gap: 10px; }
.stops li { counter-increment: stop; }
.stops a { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 14px 58px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; }
.stops a::before { content: counter(stop); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.stops span { color: var(--muted); font-size: 14.5px; }
.lede-sm { margin-top: 12px; font-size: 17px; }
/* Journeys as cards, laid out as his mockup (2026-10-28: "use the layout but not the colour scheme or font") in the
   site's own palette and font: the title large on top with the city under it; the first three stops' photos left to
   right across the card; a hairline; then who made it on the left and the saves with a bookmark on the right, as the
   app's card (his words, the same day: "journey remove the view stops and swap with authoer . number of saves can be
   left of the save button"). */
.journey-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 14px; align-items: start; }
.jcard { container-type: inline-size; padding: 14px 14px 2px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.jcard .nw { white-space: nowrap; }
.jcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.jcard-title { font-size: clamp(20px, 2vw, 23px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.jcard-title a { text-decoration: none; }
.jcard-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* No likes at the title's end: journeys are saved, never liked (his words, 2026-10-28: "Can't like a journey only
   save"). */
/* The city directly under the title, plain and muted with no pin (his words, 2026-10-28: "hve the region name
   directly below the restaurant name without the icon"). */
.jcard-name { flex: 1; min-width: 0; }
.jcard-place { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.3; }
/* The photos left to right across the card in equal columns (his words, 2026-10-28: "have the images from left to
   right"), no rank on them ("remove the numbering 1 2 3 etc"). Always as tall as one of three square tiles (container
   units), so one or two stops show wider photos at the same height and the cards line up; square where container
   units are missing. */
.jcard-photos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 12px; }
.jcard-photo { display: block; width: 100%; height: auto; aspect-ratio: 1; height: calc((100cqi - 12px) / 3); border-radius: 10px; object-fit: cover; }
/* Under a hairline: the curator on the left, the saves and a bookmark on the right (the right alone on a profile's
   own list). A long name wraps, and at large text the saves drop under it, still on the right. */
.jcard-foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; min-height: 46px; margin-top: 14px; border-top: 1px solid var(--line); }
.jcard-by { flex: 1 1 12em; min-width: 0; margin: 0; padding: 6px 0; display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; }
.jcard-by a { text-decoration: none; }
.jcard-by a:hover { text-decoration: underline; }
.jcard-saves { flex: none; margin: 0 0 0 auto; padding: 6px 0; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jcard-saves b { font-weight: inherit; }
.jcard-saves svg { flex: none; width: 19px; height: 19px; color: var(--ink); }
.who-line { display: flex; align-items: center; gap: 4px; font-size: 18px; }
.liked { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-weight: 700; font-size: 14px; }
.liked .heart { width: 14px; height: 14px; }
/* A post's photos (his words, 2026-10-26: "Multiple photos per post"): a row that snaps one photo at a time with
   the next one peeking, as the app's carousel. CSS only. */
.post-photos { list-style: none; margin: 22px 0 0; padding: 0 0 6px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.post-photos li { position: relative; flex: 0 0 min(100%, 440px); scroll-snap-align: start; scroll-margin-top: 90px; }
.post-photos.many li { flex-basis: min(84%, 400px); }
.dish-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; display: block; }
.photo-count { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.photo-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 30px 14px 12px; border-radius: 0 0 14px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: #fff; }
.photo-caption b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-caption .heart { width: 14px; height: 14px; flex: none; color: #fff; }
/* The dishes under the photos; with several photos each row shows its thumbnail and links to its photo. */
.dish-list { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.dish-list li + li { border-top: 1px solid var(--line); }
.dish-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; text-decoration: none; }
a.dish-row:hover { background: var(--soft); }
.dish-thumb { width: 40px; height: 50px; flex: none; border-radius: 7px; object-fit: cover; }
.dish-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.dish-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dish-name b { font-size: 16.5px; }
.dish-note { font-size: 15px; }
/* The stacked-photos badge on a post's first photo when it holds more (PhotoStackBadge in the app). */
.photo-wrap { position: relative; flex: none; }
.stack-badge { position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stack-badge svg { width: 10px; height: 10px; }
.visit-grid .stack-badge { top: 6px; right: 6px; }
.likes-badge { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.likes-badge .heart { width: 9px; height: 9px; color: #fff; fill: currentColor; }
.visit .body { margin-top: 22px; font-size: 18px; }
.response { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.response p { margin-top: 4px; }
/* A post's area card (his words, 2026-10-27: "Show areas polygons for posts", "Show adjacent polygons"), drawn like
   the app's AreaMap: the area strong, the areas next to it faint and named, its mall dashed, the place as a dot.
   Sizes are in the map's 600-wide units, the app's points scaled by 600/337. */
.area-card { margin-top: 22px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.area-card h2 { font-size: 15.5px; font-weight: 700; line-height: 1.35; letter-spacing: normal; }
.area-card h2 a { color: inherit; }
.area-card .area-stats { margin-top: 2px; }
.area-card svg { display: block; width: 100%; height: auto; margin-top: 8px; border-radius: 10px; }
.area-card .land { fill: var(--land); }
.area-card .next path { fill: var(--ink); fill-opacity: 0.04; stroke: var(--ink); stroke-opacity: 0.4; stroke-width: 1.8; stroke-linejoin: round; }
.area-card .here { fill: var(--ink); fill-opacity: 0.14; stroke: var(--ink); stroke-opacity: 0.95; stroke-width: 4.5; stroke-linejoin: round; }
.area-card .mall { fill: var(--ink); fill-opacity: 0.22; stroke: var(--ink); stroke-opacity: 0.95; stroke-width: 2.7; stroke-dasharray: 7 5; }
.area-card .pin { fill: var(--ink); stroke: var(--surface); stroke-width: 3.5; }
.area-card text {
  font: 600 19.5px var(--font); fill: var(--ink); fill-opacity: 0.7; text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: var(--land); stroke-width: 5px; stroke-linejoin: round; pointer-events: none;
}
.area-card text.main { font-weight: 800; font-size: 22px; fill-opacity: 1; }
.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.comments li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }

@media (max-width: 900px) {
  .ranked-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .map-col { position: static; order: -1; margin-top: 30px; }
  .pin-map svg { max-height: min(60vh, 420px); }
}
.top nav a { white-space: nowrap; }
/* With the search box in the bar (2026-11-02), How it works leaves the bar on phones on every page, and a little
   earlier beside the results pages' longer nav; the footer still links it. */
@media (max-width: 460px) {
  .results .top nav a[href="/how-it-works"] { display: none; }
}
@media (max-width: 400px) {
  .top nav a[href="/how-it-works"] { display: none; }
}
/* The narrowest phones (320px): a smaller logo and tighter gaps keep the logo, both links and the search icon on one
   line. */
@media (max-width: 359px) {
  .top .logo { height: 28px; }
  .top-in { gap: 10px; }
  .top nav { gap: 12px; }
  .top nav a { font-size: 13.5px; }
}
@media (max-width: 560px) {
  .top nav { gap: 14px; }
  .top nav a { font-size: 14px; }
  .photo-heart { left: 78px; }
  .journey-grid { gap: 10px; }
  .jcard { padding: 12px 12px 2px; }
  .jcard-place { font-size: 13.5px; }
  .place .hero img { height: 150px; }
  .pin-map svg { max-height: 340px; }
}

/* ---- Search (his request, 2026-11-02: "i want to search posts on the website"; worker.js and web/search.js). ---- */
@media (max-width: 780px) {
  /* The header's box as a round field the size of an icon, up to where the pill (its placeholder whole) and the whole
     nav fit side by side with room for a desktop scrollbar; focused, it covers the bar from gutter to gutter. Its 16px
     text keeps iOS from zooming in. */
  .site-search { width: 38px; }
  .site-search input { padding: 0; font-size: 16px; color: transparent; cursor: pointer; }
  .site-search input::placeholder { color: transparent; }
  .site-search input:not(:focus)::-webkit-search-cancel-button { display: none; }
  .site-search label { width: 36px; cursor: pointer; }
  .site-search:focus-within { position: absolute; z-index: 2; inset: 0 max(20px, env(safe-area-inset-left)); width: auto; display: flex; align-items: center; background: var(--bg); }
  .site-search:focus-within input { padding: 0 12px 0 36px; color: var(--ink); cursor: text; }
  .site-search:focus-within input::placeholder { color: var(--muted); }
}
/* The page's own box, the query kept in it, and a Search button. */
.search-head h1 { font-size: clamp(34px, 5vw, 52px); }
.search-form { display: flex; gap: 10px; margin-top: 18px; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field svg { position: absolute; left: 16px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search-field input { height: 50px; padding: 0 14px 0 44px; font-size: 17px; }
.search-go { flex: none; height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--invert-bg); color: var(--invert-ink); font: 700 16px var(--font); cursor: pointer; }
.search-go:hover { opacity: 0.86; }
.search-sum { margin-top: 14px; }
.search-results .app-note { margin: 22px 0 0; }
.search-tip { margin-top: 18px; font-size: 15px; }
.hits .section-title { margin: 30px 0 10px; }
/* The words that matched, in every result: a soft band of ink behind them, in light and dark. */
mark { background: color-mix(in srgb, var(--ink) 14%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; margin: 0 -1px; }
/* A post: its first photo, the dishes, where, a piece of what was said with the matches marked, who, when and likes. */
.hit-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hit-post { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; }
a.hit-post:hover { border-color: var(--muted); }
.hit-photo { width: 80px; height: 100px; flex: none; border-radius: 9px; object-fit: cover; }
.hit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hit-dishes { font-size: 16px; font-weight: 700; line-height: 1.25; }
.hit-place { font-size: 14px; font-weight: 600; line-height: 1.3; }
.hit-snippet { color: var(--muted); font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hit-snippet mark { color: var(--ink); }
.hit-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: auto; padding-top: 3px; color: var(--muted); font-size: 13px; }
.hit-by { color: var(--ink); font-weight: 600; }
.hit-foot .post-likes { margin-left: auto; }
/* Places, dishes, cuisines, zones, people and journeys: one small row each, as the ranked lists. A row with no page
   on this host (a zone on the real domain before launch) is not a link and has no arrow. */
.hit-rows { list-style: none; margin: 0; padding: 0; }
.hit-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); text-decoration: none; }
.hit-rows li:last-child .hit-row { border-bottom: 1px solid var(--line); }
a.hit-row:hover { background: var(--soft); }
.hit-thumb, .hit-icon { width: 56px; height: 46px; flex: none; border-radius: 9px; }
.hit-thumb { object-fit: cover; }
.hit-icon { display: grid; place-items: center; background: var(--soft); color: var(--muted); }
.hit-icon svg { width: 20px; height: 20px; }
.hit-icon.avatar { background: none; }
.hit-icon.avatar svg { width: 40px; height: 40px; }
.hit-row .hit-text { gap: 2px; }
.hit-row .hit-text b { font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.hit-row .hit-text > span { color: var(--muted); font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hit-row .likes { font-size: 15px; }
@media (max-width: 400px) {
  .search-go { padding: 0 18px; }
  .hit-photo { width: 72px; height: 90px; }
}