/* The Food page in blog.css's section vocabulary, its places laid out as
   the reference's apps lineup (getartcraft.com/apps): per city an index,
   then one grid of ruled cards per cuisine family (four, two or one
   across). A card is a numbered tone chip, a 16:10 dish photo with a second
   dish as the raised tile, a two-tone name, dish chips and arrow links. A
   short last row ends on a Next up card. */
.food-head .section-head > .hud-label:first-child { margin: 0 0 32px; }
.food-head .section-head a { text-decoration: underline; text-underline-offset: 4px; }
.food-head .section-head a:hover { color: var(--ink); }
.food-head .display + .hud-label { margin: 32px 0 0; }
.eyebrow h2 { margin: 0; }
.food-page a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The index: one ruled row per place, a column per cuisine family. */
.food-intro { padding: 40px; border-bottom: 1px solid var(--line); }
.food-list, .food-list ol { margin: 0; padding: 0; list-style: none; }
.food-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; align-items: start; }
.list-group > p { margin: 0 0 8px; }
.food-list a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.food-list a:hover .list-name { color: var(--muted); }
.list-name { font-family: var(--font-display); font-weight: 620; font-stretch: 118%; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--ink-strong); }

/* The picker (js/food.js): a ruled band under the index. The filter is a
   row of ruled cells, the chosen one inverted like the bar's current page;
   the result is a card's name, toned by its cuisine. */
.picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 48px; align-items: end; padding: 40px; border-bottom: 1px solid var(--line); }
.picker[hidden] { display: none; }
.picker-title { margin: 0; font-family: var(--font-display); font-weight: 620; font-stretch: 118%; font-size: 2.25rem; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-strong); }
.picker-title em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; color: var(--muted); }
.picker-filter { display: flex; flex-wrap: wrap; align-items: center; margin: 28px 0 0; padding: 0; border: 0; }
.picker-filter legend { float: left; margin-right: 16px; padding: 0; }
.picker-filter label { position: relative; margin: 0 -1px 0 0; }
.picker-filter input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.picker-filter label > span { display: block; padding: 8px 14px; border: 1px solid var(--line-strong); color: var(--muted); }
.picker-filter label > span [lang] { letter-spacing: 0.05em; }
.picker-filter label:hover > span { color: var(--ink); }
.picker-filter input:checked + span { position: relative; background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-fg); }
.picker-filter input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.picker-pick { display: grid; gap: 20px; padding-left: 32px; border-left: 1px solid var(--line); }
.picker-result p { margin: 0; }
.picker-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 1.75rem; }
.picker-meta .spot-num { color: #000; }
.picker-town { white-space: nowrap; }
.picker-meta .eyebrow-slash { margin: 0 12px 0 0; color: var(--faint); }
/* Two lines reserved (name, then its Chinese name), so the shuffle between
   places with and without one doesn't jolt the page below. */
.picker-name { min-height: 2.2em; margin-top: 10px !important; font-family: var(--font-display); font-weight: 560; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink-strong); overflow-wrap: anywhere; }
.picker-name .tone-ink { display: block; }
.picker[data-state="idle"] .picker-name { color: var(--faint); }
.picker[data-state="shuffling"] .picker-name { color: var(--muted); }
.picker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.picker-go { padding: 12px 20px; border: 1px solid var(--invert-bg); background: var(--invert-bg); color: var(--invert-fg); cursor: pointer; }
.picker-go:hover { background: transparent; color: var(--ink); }
.picker-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.picker-see { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.picker-see:hover { color: var(--ink); }
.picker-see[hidden] { display: none; }
/* The picked card's tone rule stays drawn for a moment after the jump. */
.spot.is-picked::before { transform: scaleX(1); }

/* A cuisine family: a display heading with its serif-italic gloss. */
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 56px 40px 20px; border-bottom: 1px solid var(--line-strong); }
.group-head h3 { margin: 0; font-family: var(--font-display); font-weight: 620; font-stretch: 118%; font-size: 2.25rem; letter-spacing: -0.03em; color: var(--ink-strong); }
.group-head em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; color: var(--muted); }
.group-head p { margin: 0; }

/* Cuisine tones: the reference's app colour pairs, the chip fill and a
   readable ink, lighter in dark. */
.tone-hunan { --tone: #e8573f; --tone-ink: #b83a24; }
.tone-shanghai { --tone: #2f7bf5; --tone-ink: #1a5bc4; }
.tone-dongbei { --tone: #8b5cf6; --tone-ink: #6a3fd6; }
.tone-canton { --tone: #12a58a; --tone-ink: #0a7563; }
.tone-chongqing { --tone: #e5397f; --tone-ink: #b5195c; }
.tone-american { --tone: #f2a516; --tone-ink: #8a5800; }
.tone-turkish { --tone: #13a3c9; --tone-ink: #0b6f8a; }
.tone-spanish { --tone: #7cb518; --tone-ink: #4d7300; }
.tone-italian { --tone: #b8763a; --tone-ink: #7f4a1c; }
.tone-korean { --tone: #4a5ac0; --tone-ink: #34408a; }
.tone-seafood { --tone: #1d6fa5; --tone-ink: #14507a; }
html[data-theme="dark"] .tone-hunan { --tone-ink: #ff8a70; }
html[data-theme="dark"] .tone-shanghai { --tone-ink: #7fb0ff; }
html[data-theme="dark"] .tone-dongbei { --tone-ink: #b69cff; }
html[data-theme="dark"] .tone-canton { --tone-ink: #3fd6b8; }
html[data-theme="dark"] .tone-chongqing { --tone-ink: #ff7eb3; }
html[data-theme="dark"] .tone-american { --tone-ink: #ffc14d; }
html[data-theme="dark"] .tone-turkish { --tone-ink: #5fd0ee; }
html[data-theme="dark"] .tone-spanish { --tone-ink: #b2e05a; }
html[data-theme="dark"] .tone-italian { --tone-ink: #e8a96a; }
html[data-theme="dark"] .tone-korean { --tone-ink: #9eaaf0; }
html[data-theme="dark"] .tone-seafood { --tone-ink: #6fb4e6; }

/* The lineup: hairline gaps, each card ringed in the line colour, so the
   empty cells of a short last row stay page-coloured. */
.spot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid var(--line); }
.spot { position: relative; display: flex; flex-direction: column; background: var(--bg); box-shadow: 0 0 0 1px var(--line); scroll-margin-top: calc(var(--nav-h) + 48px); }
.spot::before { content: ''; position: absolute; inset: 0 0 auto; z-index: 2; height: 2px; background: var(--tone); transform: scaleX(0); transform-origin: left; transition: transform 300ms; }
.spot:hover::before, .spot:focus-within::before { transform: scaleX(1); }
.spot-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.spot-bar p { margin: 0; }
.spot-num { padding: 4px 8px; background: var(--tone); color: #000; font-weight: 700; }
.spot-photo { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-sunken); }
.spot-hero { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.spot:hover .spot-hero { transform: scale(1.03); }
.spot-body { display: flex; flex: 1; flex-direction: column; padding: 0 32px 28px; }
.spot-tile { position: relative; width: 88px; height: 88px; margin-top: -44px; object-fit: cover; border: 3px solid var(--bg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28); transition: transform 300ms; }
.spot:hover .spot-tile { transform: translateY(-4px); }
.spot h4 { margin: 28px 0 0; font-family: var(--font-display); font-weight: 560; font-size: 1.875rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink-strong); }
.spot-tile + h4 { margin-top: 16px; }
.tone-ink { color: var(--tone-ink); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.chip { display: block; padding: 1px 6px; border: 1px solid var(--line); background: var(--bg-sunken); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.chip [lang] { letter-spacing: 0.05em; white-space: nowrap; }
.spot-label { margin: 20px 0 0; }
.spot-label + .chips { margin-top: 8px; }
.spot-facts { display: grid; gap: 6px; margin: 24px 0 0; }
.spot-facts div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.spot-facts dt, .spot-facts dd { margin: 0; }
.spot-facts dd { font-size: 0.875rem; line-height: 1.5; }
.spot-links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: auto; padding-top: 24px; }
.spot-links a { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.spot-links a:hover { color: var(--ink); }

/* The reference's "Next up" cell. */
.spot-next { justify-content: center; padding: 40px 32px; }
.spot-next p { margin: 0; }
.spot-next-line { margin: 16px 0 12px !important; font-family: var(--font-display); font-weight: 560; font-size: 2.25rem; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-strong); }
.spot-next-line em { font-family: var(--font-serif); font-weight: 400; color: var(--accent-ink); }

/* Side by side, cards share row tracks (subgrid), so each line of text
   starts level with its neighbours': a missing small photo leaves
   its row empty rather than lifting what follows. */
@media (min-width: 761px) {
  .spot:not(.spot-next) { grid-row: span 10; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .spot-next { grid-row: span 10; }
  .spot-body { grid-row: 3 / span 8; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .spot-tile { grid-row: 1; justify-self: start; }
  .spot h4, .spot-tile + h4 { grid-row: 2; margin-top: 16px; }
  .spot-label { grid-row: 3; }
  .spot-label + .chips { grid-row: 4; }
  .spot-facts { grid-row: 5 / span 3; grid-template-rows: subgrid; }
  .spot-links { grid-row: 8; }
}
/* Four across on a wide frame: tighter cells, and the Next up card takes
   the rest of the last row (two or three cells). */
@media (min-width: 1101px) {
  .spot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spot-bar { padding: 10px 20px; }
  .spot-body { padding: 0 20px 24px; }
  .spot-tile { width: 64px; height: 64px; margin-top: -32px; }
  .spot h4 { font-size: 1.375rem; }
  .spot h4 .tone-ink { display: block; }
  .spot h4, .spot-tile + h4 { margin-top: 14px; }
  .spot-facts div { grid-template-columns: 4rem minmax(0, 1fr); gap: 8px; }
  .spot-facts dd { font-size: 0.8125rem; }
  .spot:nth-child(4n+1) + .spot-next { grid-column: span 3; }
  .spot:nth-child(4n+2) + .spot-next { grid-column: span 2; }
  .spot:nth-child(4n) + .spot-next { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .food-list { grid-template-columns: minmax(0, 1fr); }
  .picker { grid-template-columns: minmax(0, 1fr); }
  .picker-pick { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .spot-grid { grid-template-columns: minmax(0, 1fr); }
  .spot-next { display: none; }
}
@media (max-width: 640px) {
  .food-intro { padding: 28px 24px; }
  .food-list a { grid-template-columns: 2rem minmax(0, 1fr); gap: 4px 12px; }
  .list-cuisine { grid-column: 2; grid-row: 2; }
  .list-town { display: none; }
  .group-head { padding: 40px 24px 16px; }
  .group-head h3 { font-size: 1.75rem; }
  .spot-body { padding: 0 24px 24px; }
  .spot h4 { font-size: 1.625rem; }
  .food-head .display { font-size: 2.5rem; }
  .picker { padding: 28px 24px; }
  .picker-title, .picker-name { font-size: 1.75rem; }
  /* A long cuisine and town wrap here; two lines reserved, as for the name. */
  .picker-meta { min-height: 2.875rem; align-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .spot::before, .spot-hero, .spot-tile { transition: none; }
}
@media print {
  .picker { display: none; }
  .spot { break-inside: avoid; }
  .spot-links, .spot-next { display: none; }
}