/* Content pages — About, Contact, Catering, Gallery, Truck, Privacy, Terms.
   Loaded alongside /styles.css and /home.css: reuses the same header, footer,
   band and hero tokens as the homepage so the marketing site reads as one
   site, not a homepage bolted onto ordering-app leftovers. */

/* ---------------------------------------------------- content-page chrome
   These pages share the homepage's header and footer, with two deltas.

   1. The header is `position: fixed`. On the homepage that is invisible
      because a full-bleed hero sits under it; here the first thing on the
      page is the hero band, which would otherwise start underneath the
      header and lose its breadcrumb behind it. The band pays for the
      header's own height instead of every page remembering to.

   2. The homepage hides `.home-nav` below 900px, which is fine there — the
      hero carries two CTAs and the page is one long scroll. On a content
      page it would leave a phone with NO navigation at all except the
      footer, so here it stays visible and scrolls horizontally if it has
      to. Losing the nav on the pages that exist purely to be navigated
      between is not a trade worth making.
   --------------------------------------------------------------------- */
.is-content .page-hero-inner { padding-top: calc(clamp(44px, 8vw, 76px) + var(--space-80)); }

@media (max-width: 900px) {
  .is-content .home-nav {
    display: flex;
    /* Padding on the links rather than gap between them: the visual rhythm
       is the same, but the tappable box grows instead of the dead space
       between boxes. "Visit" was a 25px-wide target; it is now ~45. */
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .is-content .home-nav::-webkit-scrollbar { display: none; }
  /* Sizing and the 44px floor now live on .home-nav a in home.css, applied
     at every width -- this audit found the nav failing that floor on the
     homepage too, so fixing it only here would have left the same control
     broken on the more important page. All that is left for content pages
     is not wrapping. */
  .is-content .home-nav a { white-space: nowrap; }
  /* Trailing space so the last item is not flush against the clip edge --
     an item cut exactly at the boundary reads as broken layout rather than
     as "this row scrolls". */
  .is-content .home-nav::after { content: ''; flex: 0 0 var(--space-4); }
  /* Wraps to its own line under the brand + CTA rather than squeezing them. */
  .is-content .home-header { flex-wrap: wrap; row-gap: var(--space-10); }
  .is-content .home-nav { order: 3; flex-basis: 100%; }
  .is-content .page-hero-inner { padding-top: calc(clamp(44px, 8vw, 76px) + 112px); }
}

/* ------------------------------------------------------------ page hero
   Matched to the homepage's new scale. These headings were --text-4xl
   (48px max) against a flat two-stop gradient; the homepage now opens every
   section with an eyebrow, a rule and --text-display, and a content page
   that doesn't do the same reads as a different site. Same three parts,
   same sizes, same rhythm. */
.page-hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg) 100%);
  overflow: hidden;
}
.page-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(44px, 8vw, 76px) var(--gutter) clamp(40px, 6vw, 64px);
}
.page-hero h1 {
  margin: 0; font-family: var(--font-display); font-size: var(--text-display);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.page-hero .lede {
  margin: var(--space-16) 0 0; max-width: var(--maxw-text);
  color: var(--ink-dim); font-size: var(--text-lead); line-height: var(--leading-body);
}

/* Photographic variant. A page whose subject IS a place or a thing (the
   story, the truck, the room) gets the photograph behind its title rather
   than a gradient — the same move the homepage's full-bleed break makes,
   at page-header scale.

   THREE scrim layers, not one, and the reason is measured rather than
   decorative: the first build used the flat --photo-veil alone and the lede
   was genuinely unreadable — dim warm grey (--ink-dim) sitting on the
   brightest part of a pizza. A flat veil darkens the whole frame uniformly,
   which protects nothing in particular; text needs the dark concentrated
   where the text actually is. So:
     1. a horizontal pass that carves a dark bed under the left-aligned copy,
        exactly as the homepage hero does over its video;
     2. the flat veil, holding the overall exposure down;
     3. the shared vertical fade, dissolving the photo into the page.
   The copy colours are lifted a step as well — over photography, --ink-dim
   is a decorative grey, not body text. */
.page-hero--photo { background: var(--bg); }
.page-hero--photo .page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.page-hero--photo .page-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(19,14,11,.94) 0%, rgba(19,14,11,.72) 46%, rgba(19,14,11,.20) 100%),
    var(--photo-veil),
    var(--photo-fade);
}
/* Over a photograph the quiet tiers stop being quiet and start being
   illegible. One step brighter each, and the lede gets a shadow so it
   survives whatever happens to sit behind it. */
.page-hero--photo .lede {
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(19,14,11,.85);
}
.page-hero--photo .breadcrumb,
.page-hero--photo .breadcrumb a { color: var(--ink-dim); }
.page-hero--photo .breadcrumb a:hover { color: var(--ink); }
.page-hero--photo h1 { text-shadow: 0 2px 24px rgba(19,14,11,.6); }

.breadcrumb { margin: 0 0 var(--space-16); font-size: var(--text-sm); color: var(--ink-faint); }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink-dim); }

/* ------------------------------------------------------------------ body */
.page-body {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
/* Long-form pages (privacy, terms, story) cap on the measure token rather
   than a magic 760px, so prose width is one decision made once. */
.page-body.narrow { max-width: calc(var(--maxw-text) + var(--gutter) * 2); }

.prose { color: var(--ink-dim); font-size: var(--text-md); line-height: 1.75; max-width: var(--maxw-text); }
.prose h2 {
  color: var(--ink); font-family: var(--font-display); font-size: var(--text-2xl);
  margin: var(--space-56) 0 var(--space-16); letter-spacing: -.015em; line-height: var(--leading-snug);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--ink); font-size: var(--text-lead); margin: var(--space-32) 0 var(--space-10); }
.prose p { margin: 0 0 var(--space-18); }
.prose ul, .prose ol { margin: 0 0 var(--space-16); padding-left: var(--space-22); }
.prose li { margin-bottom: var(--space-6); }
.prose a { color: var(--accent-text); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose strong { color: var(--ink); }

/* A source note under a claim pulled from a review or the live site —
   keeps the "don't invent facts" discipline visible, not just in the repo. */
.sourced { font-size: var(--text-xs); color: var(--ink-faint); margin: -var(--space-10) 0 var(--space-20); }

/* ------------------------------------------------------------- info grid */
.info-grid {
  display: grid; gap: var(--space-16);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--space-8) 0 var(--space-56);
}
.info-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-24);
  transition: border-color var(--dur) var(--ease);
}
.info-card:hover { border-color: var(--line-strong); }
.info-card h3 {
  margin: 0 0 var(--space-8); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--gold);
}
.info-card p { margin: 0; color: var(--ink); font-size: var(--text-base); line-height: 1.6; }
.info-card a { color: var(--accent-text); text-decoration: none; }
.info-card a:hover { text-decoration: underline; }
.info-card .hours { margin-top: var(--space-4); }
/* One line per run of identical days: "Sun–Thu   10:00 AM – 1:00 AM". The
   rows are written by renderHours() in site.js and had no rule of their own,
   so the day and the times rendered as one word. */
.info-card .hrow {
  display: flex; justify-content: space-between; gap: var(--space-6);
  color: var(--ink); font-size: var(--text-base); line-height: 1.6;
}
.info-card .hrow span:first-child { color: var(--ink-dim); white-space: nowrap; }
.info-card .hrow span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- gallery
   Larger minimum tile and a wider container: at 190px these were thumbnails,
   and the restaurant's photography is the strongest asset the site has. */
.gallery-grid {
  display: grid; gap: var(--space-14);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.gallery-grid figure { margin: 0; }
.gallery-tile {
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.gallery-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.gallery-grid figure:hover .gallery-tile { border-color: var(--line-strong); }
.gallery-grid figure:hover .gallery-tile img { transform: scale(1.04); }
.gallery-grid figcaption {
  margin-top: var(--space-10); font-size: var(--text-xs); color: var(--ink-dim);
  text-align: center;
}
.gallery-empty { color: var(--ink-faint); font-size: var(--text-ui); }

/* ----------------------------------------------------------------- truck */
.truck-band {
  display: grid; gap: clamp(24px, 5vw, 56px);
  grid-template-columns: 1.1fr 1fr; align-items: center;
}
.truck-facts { list-style: none; margin: var(--space-22) 0 0; padding: 0; display: grid; gap: var(--space-10); }
.truck-facts li { display: flex; gap: var(--space-10); align-items: baseline; font-size: var(--text-ui); color: var(--ink-dim); }
.truck-facts strong { color: var(--ink); min-width: 1.4em; }
.truck-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.truck-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------ contact map */
.map-link {
  display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); text-decoration: none;
  position: relative; aspect-ratio: 16 / 7; background: var(--bg-card);
}
.map-link iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.25) invert(.92) contrast(.9); }

@media (max-width: 760px) {
  .truck-band { grid-template-columns: 1fr; }
  .truck-media { order: -1; }
}

/* ------------------------------------------------------------------- 404 */
/* Scoped to .prose deliberately: `.prose ul` above is (0,0,1,1) and would
   otherwise beat a bare .notfound-links, putting the bullets and the indent
   back. Specificity, not !important. */
/* The list of ways out. Deliberately not a row of buttons: someone who has
   landed here is looking for a destination, not being asked to commit to an
   action, and four equal-weight buttons make the choice harder rather than
   easier. Rules between the rows do the separating so nothing needs a border
   box of its own. */
.prose .notfound-links { list-style: none; margin: var(--space-24) 0; padding-left: 0; }
.prose .notfound-links li { border-top: 1px solid var(--line); margin-bottom: 0; }
.prose .notfound-links li:last-child { border-bottom: 1px solid var(--line); }
.prose .notfound-links a {
  display: block;
  padding: var(--space-16) 0;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.prose .notfound-links a strong { color: var(--ink); font-weight: 600; }
/* Nudges right on hover rather than changing colour alone -- movement reads
   as "this goes somewhere" more clearly than a tint on a dark ground. */
.prose .notfound-links a:hover { color: var(--ink); padding-left: var(--space-10); }
.prose .notfound-links a:hover strong { color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) {
  .prose .notfound-links a { transition: none; }
  .prose .notfound-links a:hover { padding-left: 0; }
}

/* Typography, 2026-09-19: no orphans in prose, balanced headings. */
.prose p, .prose li, .lede { text-wrap: pretty; }
.page-hero h1, .prose h2, .prose h3 { text-wrap: balance; }

/* Phones: the page title block is centred (Sabri, 2026-10-09); the reading text below stays left. */
@media (max-width: 700px) {
  .page-hero-inner { text-align: center; }
  .page-hero .lede { margin-inline: auto; }
}