/* Bad Boy Diner — neon greaser diner aesthetic. Plain CSS, no framework. */

:root {
  --bg: #0c0c0e;
  --bg-raised: #161618;
  --red: #ff2b3d;
  --red-dim: #b3121f;
  --neon-pink: #ff5ea8;
  --cream: #f6ecd9;
  --muted: #9a9aa0;
  --checker-dark: #1a1a1c;
  --checker-light: #2a2a2d;
  --radius: 10px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: "Arial Black", "Helvetica Neue", Impact, sans-serif;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-2);
}

a { color: var(--neon-pink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
/* Anchor-nav targets (#menu, #breakfast, #order, etc.) sit right under this sticky
   header -- without scroll-margin-top, a nav jump lands the section's h2 clipped
   under the fixed bar. Applied via [id] below rather than per-section so any future
   anchor target gets it automatically. */
:target, [id] {
  scroll-margin-top: 76px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: rgba(12, 12, 14, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--red-dim);
}

.brand {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.25rem;
  color: var(--cream);
  text-transform: uppercase;
}
.brand span { color: var(--red); }
.brand:hover { text-decoration: none; }

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-1);
}

.site-header nav a {
  margin-left: var(--space-3);
  color: var(--cream);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* Specialty Menus -- plain nav link to specialty-menus.html (a real landing page
   with cards for every menu that isn't a permanent nav anchor or a currently-
   featured slot). 2026-09-14: removed the CSS-only hover/:focus-within dropdown
   here after founder testing showed it was unusable -- CDP-driven verification
   confirmed touch taps never opened the panel at all (a tap just navigated
   straight through, since there is no hover state on touch), and desktop mouse
   travel toward a panel item could close the panel mid-transit. A plain link to
   an already-good landing page is simpler and works identically on every input
   method. See assets/nav-data.js for which menus are featured vs. specialty. */

.promo-banner {
  background: var(--red);
  color: var(--cream);
  text-align: center;
  padding: var(--space-2) var(--space-3);
}
.promo-banner p {
  margin: 0;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
}
.promo-banner strong { text-transform: uppercase; }
.site-header nav a:hover { color: var(--red); text-decoration: none; }

/* Mobile nav (375-414px class of phones): tighten the horizontal rhythm so the
   6-item nav (Order / Classic Menu / 2 featured / Specialty Menus / Gallery /
   Bad Boy Club) wraps to a clean two-line grid instead of an awkward mid-word
   wrap. Founder-decided structure, 2026-09-14: Order + Classic Menu are
   permanent; featured count is 2 (see assets/nav-data.js). */
@media (max-width: 480px) {
  .site-header {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
  .site-header nav a {
    margin-left: var(--space-2);
    font-size: 0.78rem;
  }
}

/* Hero */
.hero {
  position: relative;
  text-align: center;
  padding: var(--space-6) var(--space-3) var(--space-5);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 43, 61, 0.25), transparent 60%),
    var(--bg);
  overflow: hidden;
}

.hero-inner { max-width: 720px; margin: 0 auto; }

.eyebrow {
  color: var(--neon-pink);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  margin: 0 0 var(--space-2);
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--cream);
  text-shadow: 0 0 6px rgba(255,43,61,0.6), 0 0 20px rgba(255,43,61,0.35);
  margin-bottom: var(--space-2);
}
.hero h1 .neon {
  color: var(--red);
  text-shadow: 0 0 8px var(--red), 0 0 24px var(--red), 0 0 48px rgba(255,43,61,0.6);
}
.hero h1 .tm {
  font-size: 0.3em;
  vertical-align: super;
  opacity: 0.7;
  text-shadow: none;
}

/* Diner-marquee signage treatment -- a thin chrome-bulb border ring around the hero
   headline, evoking a 1950s marquee sign frame, built from layered gradients (no
   image assets). Additive only: the existing neon text-shadow on .hero h1/.neon is
   untouched, this just frames it. */
.hero h1 {
  position: relative;
  display: inline-block;
  padding: 0.15em 0.5em;
}
.hero h1::before {
  content: "";
  position: absolute;
  inset: -0.12em -0.3em;
  z-index: -1;
  border-radius: 999px;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, #fff 0%, #999 20%, #fff 38%, #666 56%, #ddd 72%, #444 88%, #fff 100%) border-box;
  box-shadow: 0 0 12px rgba(255, 43, 61, 0.25);
}

.tagline {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 var(--space-1);
}

.slogan {
  color: var(--red);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  margin: 0 0 var(--space-2);
}

.subtagline {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.9rem;
  margin: 0 0 var(--space-4);
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.contact-line {
  margin-top: var(--space-3);
  color: var(--muted);
}
.contact-line a { color: var(--red); }

.qr-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
}
.qr-code {
  background: #fff;
  padding: 8px;
  border-radius: var(--radius);
  border: 2px solid var(--red-dim);
}

.btn {
  display: inline-block;
  padding: 0.85em 1.75em;
  border-radius: var(--radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  border: 2px solid transparent;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--red);
  color: #16060a;
  box-shadow: 0 0 16px rgba(255,43,61,0.5);
}
.btn-primary:hover { background: #ff5060; }
/* 2026-09-14: #order-checkout-btn is disabled when the cart is empty (can't check out
   nothing) -- give that state a visible affordance instead of looking identical to the
   enabled button. */
.btn-primary:disabled,
.btn-primary:disabled:hover {
  background: #5a2026;
  color: #8a6a6e;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); }

/* Chrome/metallic button trim -- classic diner counter-stool chrome, built purely
   with layered linear gradients (no image assets). A thin chrome border ring sits
   just outside the existing button border, giving primary/ghost buttons a diner-
   fixture edge without altering their existing red/cream identity underneath. */
.btn-primary,
.btn-ghost {
  position: relative;
}
.btn-primary::before,
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: calc(var(--radius) + 3px);
  background: linear-gradient(135deg, #fdfdfd 0%, #8a8a8a 22%, #f2f2f2 40%, #5c5c5c 58%, #d8d8d8 72%, #3a3a3a 88%, #eee 100%);
  opacity: 0.55;
}

.checker-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background-image: repeating-conic-gradient(var(--checker-dark) 0% 25%, var(--checker-light) 0% 50%);
  background-size: 28px 28px;
}

/* Classic-diner checkerboard system — reusable border/divider treatment, layered
   ADDITIVELY onto the existing dark/neon-red palette. Kept to thin strips (a diner
   floor motif used as trim, not as a background fill) so it reads as a period detail
   rather than overwhelming the neon-greaser identity already established. Two sizes:
   .checker-strip (existing, 14px, hero-only) and .checker-divider (new, 8px, reusable
   section-boundary trim) — same gradient recipe, different scale for different uses. */
.checker-divider {
  height: 8px;
  background-image: repeating-conic-gradient(var(--checker-dark) 0% 25%, var(--checker-light) 0% 50%);
  background-size: 16px 16px;
}

/* Section dividers: a checkerboard trim line at the top of the main content bands,
   echoing a classic diner's black-and-white floor tile as a border accent. */
.menu,
.club-perks,
.gallery-grid {
  position: relative;
}
.menu::before {
  content: "";
  display: block;
  height: 8px;
  margin: calc(var(--space-5) * -1) calc(var(--space-3) * -1) var(--space-4);
  background-image: repeating-conic-gradient(var(--checker-dark) 0% 25%, var(--checker-light) 0% 50%);
  background-size: 16px 16px;
}
.menu:first-of-type::before { display: none; } /* first menu section sits right under the sticky header/promo banner -- no divider needed there */

/* Chrome/metallic accent -- a diner-counter chrome edge, built with layered linear
   gradients (no image assets). Applied as a reusable border treatment for card-like
   containers: menu-figure frames, gallery items, perk list items, related-links pills. */
.chrome-edge {
  border-image: linear-gradient(135deg, #eee 0%, #999 18%, #fff 32%, #777 48%, #ccc 60%, #444 74%, #eee 88%, #999 100%) 1;
}

/* Menu */
.menu {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  background: var(--bg-raised);
  border-top: 1px solid #232326;
  border-bottom: 1px solid #232326;
}

.menu h2 {
  color: var(--red);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-1);
}
/* Diner-signage underline: a short chrome bar beneath each menu section heading,
   echoing a stainless-steel counter trim. Kept to a fixed short width (not
   full-bleed) so it reads as a signage flourish, not a rule across the page. */
.menu h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff 25%, #888 50%, #fff 75%, transparent);
}

.menu-note {
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.menu-figure {
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
}

.menu-figure .hof-zoom-wrap {
  border-radius: var(--radius);
  border: 2px solid var(--red-dim);
  box-shadow: 0 0 32px rgba(255,43,61,0.15), 0 0 0 1px rgba(200,200,200,0.15);
  background: #000;
}

.menu-figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  cursor: zoom-in;
}

.menu-figure figcaption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.9rem;
}

.menu-figure .zoom-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.8rem;
  color: var(--red-dim);
}

/* Styled hint line above a menu image/order picker (used on pages with a text/photo hint
   above the picker, e.g. burger-of-the-year-menu.html). Not overlay-specific. */
.menu-image-order-hint {
  margin: 0 0 var(--space-2);
  text-align: center;
  color: var(--red);
  font-weight: 600;
}

.share-row {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
}
.share-label {
  color: var(--muted);
  font-size: 0.85rem;
}
.share-link {
  display: inline-block;
  padding: 0.4em 0.9em;
  border: 1px solid var(--red-dim);
  border-radius: var(--radius);
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.share-link:hover {
  background: var(--red-dim);
  text-decoration: none;
}

/* Order */
.order {
  padding: var(--space-5) var(--space-3);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.order h2 {
  color: var(--cream);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: var(--space-3);
}
.order a { color: var(--red); }
.order-form {
  display: grid;
  gap: var(--space-2);
  text-align: left;
  margin-top: var(--space-3);
}
.order-form label {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.order-form input,
.order-form textarea {
  width: 100%;
  padding: 0.75em 1em;
  border-radius: var(--radius);
  border: 2px solid var(--red-dim);
  background: var(--bg-raised);
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}
.order-form input:focus,
.order-form textarea:focus {
  outline: none;
  border-color: var(--red);
}
.order-form button {
  margin-top: var(--space-1);
  cursor: pointer;
}
.order-form-notify {
  border: 2px solid var(--red-dim);
  border-radius: var(--radius);
  padding: 0.75em 1em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.order-form-notify legend {
  width: 100%;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0;
  margin-bottom: 0.4em;
}
.order-form-optional {
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.75;
}
.order-form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: #fff;
  text-transform: none;
  font-size: 0.95rem;
  letter-spacing: normal;
  cursor: pointer;
}
.order-form-checkbox input[type="checkbox"] {
  width: auto;
  accent-color: var(--red);
  cursor: pointer;
}
.order-form-status {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--red-dim);
  background: var(--bg-raised);
  color: #fff;
  font-size: 0.9rem;
}
.order-form-note {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 0.85rem;
}
.order-form-note a { color: var(--red); }
.menu-picker {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-1);
}
.menu-picker input[type="number"] {
  width: 4.5em;
  text-align: center;
}
.menu-picker-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  min-height: 1.2em;
}
.order-cart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  /* 2026-09-14 founder directive: no internal/nested scroll containers anywhere on the
     site -- the outer page scroll is the only scroller. This list previously bounded
     itself to 45vh with its own overflow-y:auto (a real, independently-scrollable box);
     that bound is removed here and the list now grows with its content, same as
     .order-cart-panel below. `flex: 0 0 auto` + `min-height: 0` are kept -- they are
     still required for this flex-column child of .order-cart-panel to report its real
     content height instead of collapsing to 0 (the exact "I can't see what's in my
     order" bug from commit 3a3a7c5); removing max-height/overflow-y does not reintroduce
     that bug because the sizing fix was about flex height resolution, not about the
     scroll bound. */
  flex: 0 0 auto;
  min-height: 0;
}
.order-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 0.6em 1em;
  border-radius: var(--radius);
  border: 1px solid var(--red-dim);
  background: var(--bg-raised);
  font-size: 0.9rem;
}
.order-cart-item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cream);
}
/* Per-line qty +/- stepper inside the cart panel -- same shape/behavior as the former
   mini-cart's stepper (assets/order-all.js's shared buildQtyStepper), styled here to fit
   this panel's look rather than the old compact mini-cart bar. */
.order-cart-item-stepper {
  display: flex;
  align-items: center;
  gap: 0.35em;
  flex: 0 0 auto;
}
.order-cart-item-stepper-step {
  width: 1.6em;
  height: 1.6em;
  line-height: 1;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--red-dim);
  background: transparent;
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.order-cart-item-stepper-step:hover { border-color: var(--red); background: rgba(255, 255, 255, 0.06); }
/* Directly-editable qty field between the +/- steppers -- additive to the steppers, so
   jumping from 1 to 8 is one type instead of seven clicks. Applies live (debounced) and
   on blur/Enter; no separate save step. */
.order-cart-item-stepper-qty-input {
  width: 2.6em;
  min-width: 1.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0.15em 0.2em;
  border-radius: var(--radius);
  border: 1px solid var(--red-dim);
  background: var(--bg);
  color: #fff;
  font-size: 0.9rem;
  -moz-appearance: textfield;
}
.order-cart-item-stepper-qty-input:focus { outline: none; border-color: var(--red); }
/* Non-blocking confirm popover -- reused for the single destructive action in the cart
   panel (dropping a line to qty 0 via minus-click or by typing 0). Rendered OUTSIDE
   .order-cart (appended to .order-cart-panel/body, see assets/order-all.js's
   showConfirmPopover); `position: fixed` with left/top set in JS from the anchor's live
   viewport rect, not CSS-relative to any scrolling ancestor -- kept fixed-position even
   now that .order-cart/.order-cart-panel have no internal scroll region of their own
   (2026-09-14), since the popover's anchor math never depended on that clipping. */
.order-confirm-popover {
  position: fixed;
  z-index: 50;
  min-width: 200px;
  padding: var(--space-1);
  border-radius: var(--radius);
  border: 1px solid var(--red);
  background: var(--bg-raised);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.order-confirm-popover-msg {
  margin: 0 0 0.6em;
  color: var(--cream);
  font-size: 0.85rem;
}
.order-confirm-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}
.order-confirm-popover-actions .btn {
  padding: 0.35em 0.8em;
  font-size: 0.8rem;
}
.order-cart-item-price {
  flex: 0 0 auto;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.order-cart-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25em;
}
.order-cart-remove:hover { color: var(--red); }
.order-cart-total {
  margin: 0;
  color: var(--cream);
  font-weight: 600;
  font-size: 0.9rem;
}
@media (max-width: 480px) {
  .menu-picker { grid-template-columns: 1fr; }
  .menu-picker input[type="number"] { width: 100%; }
}
.order-builder {
  display: grid;
  gap: var(--space-2);
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}
/* An element with [hidden] must actually disappear -- .order-all-things declares an
   explicit `display`, which (per spec) beats the UA [hidden] stylesheet unless
   overridden here. */
[hidden] { display: none !important; }
.order-view-menu-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-1); }
.order-view-menu-links:empty { display: none; }
/* order.html has no Browse-by-Menu alternative anymore -- these links are the ONLY
   way to reach a single printed menu from this page, so they render larger/bolder
   than the original small-chip treatment (still used standalone in future contexts). */
.order-view-menu-links-prominent { gap: 10px; margin: 0 0 var(--space-2); }
.order-view-menu-links-prominent .order-view-menu-link {
  font-size: 0.9rem;
  padding: 0.6em 1.1em;
  border-width: 2px;
  font-weight: 700;
}
.order-view-menu-link {
  background: none;
  border: 1px solid var(--red-dim);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3em 0.7em;
  cursor: pointer;
  white-space: nowrap;
}
.order-view-menu-link:hover { background: var(--red-dim); color: #fff; }

/* Embedded order picker on each standalone menu page -- same shared component, same
   cart, so a direct-link/QR visitor can order without navigating to order.html. */
.embedded-order-picker {
  margin: var(--space-3) 0;
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--red-dim);
  background: var(--bg-raised);
}
.embedded-order-picker h2 { margin: 0 0 var(--space-1); color: var(--red); font-size: 1.1rem; }

/* Nav "Order" cart-count badge -- hidden entirely at zero items (never "(0)"). */
.nav-order-count {
  margin-left: 0.35em;
  color: var(--red);
  font-weight: 700;
}

/* Item picker -- shared by order.html's single "All The Things" combined picker and
   each standalone menu page's own scoped embedded picker (assets/menu-picker.js).
   order.html no longer has a "Browse by Menu" grouped alternative -- that per-menu
   browsing now lives only within each menu page's own context. A search box narrows
   the list; each row adds itself directly via its own inline Add button (no checkbox,
   no separate batch "Add Selected" step). */
.order-all-things { display: grid; gap: var(--space-1); }
/* Tag-filter chip row -- multi-select facets (cuisine/protein/type) derived from
   assets/sku.csv's category+name+notes via order-all.js's ITEM_TAGS lookup (see that
   file's header comment). Same outlined-pill look as .order-view-menu-link so the two
   chip rows read as one family; active state is filled red (vs. outlined) so multiple
   simultaneously-selected chips are unambiguous at a glance. */
.order-tag-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.order-tag-filters:empty { display: none; }
.order-tag-filter {
  background: none;
  border: 1px solid var(--red-dim);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3em 0.75em;
  cursor: pointer;
  white-space: nowrap;
}
.order-tag-filter:hover { background: var(--red-dim); color: #fff; }
.order-tag-filter.is-active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 700;
}
.order-tag-filter-clear { color: var(--muted); border-color: var(--muted); }
.order-tag-filter-clear:hover { background: var(--muted); color: #17171a; }
.order-tag-filter-clear.is-active { background: var(--muted); border-color: var(--muted); color: #17171a; }
.order-search-input {
  width: 100%;
  padding: 0.7em 1em;
  border-radius: var(--radius);
  border: 2px solid var(--red-dim);
  background: var(--bg-raised);
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
}
.order-search-input:focus { outline: none; border-color: var(--red); }
.order-pick-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  display: grid;
  gap: 4px;
  /* 2026-09-14 founder directive: no internal/nested scroll containers anywhere on the
     site -- removed the 280px max-height + overflow-y:auto bound this list previously
     had (used on standalone menu pages' picker); it now grows with content and relies on
     the outer page scroll, same as order.html's own override below (which is now
     redundant but left in place as an explicit, self-documenting no-op). */
  border-radius: var(--radius);
  border: 1px solid var(--red-dim);
  background: var(--bg);
}
.order-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 0.55em 0.75em;
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.order-pick-row:hover { background: #1e1e21; }
.order-pick-label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--cream);
  font-size: 0.92rem;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
}
.order-pick-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  flex: 0 0 auto;
}
.order-pick-qty {
  width: 3.5em;
  text-align: center;
  padding: 0.35em;
  border-radius: var(--radius);
  border: 1px solid var(--red-dim);
  background: var(--bg);
  color: #fff;
  font-size: 0.85rem;
  flex: 0 0 auto;
}
/* Per-row inline Add action -- compact, consistent with the qty stepper's own button
   sizing rather than a large/heavy btn-primary that would unbalance a picker row. */
.order-pick-add {
  flex: 0 0 auto;
  padding: 0.35em 0.8em;
  border-radius: var(--radius);
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.order-pick-add:hover { background: var(--red); color: #fff; }
.order-pick-add:active { transform: scale(0.97); }
.order-all-things .btn { justify-self: start; margin-top: var(--space-2); }
.order-geo { display: grid; gap: 4px; margin-top: var(--space-2); position: relative; }
.order-geo label {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.order-geo-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.order-geo-results:empty { display: none; }
.order-geo-results button {
  width: 100%;
  text-align: left;
  padding: 0.55em 0.75em;
  border-radius: var(--radius);
  border: 1px solid var(--red-dim);
  background: var(--bg-raised);
  color: var(--cream);
  font-size: 0.88rem;
  cursor: pointer;
}
.order-geo-results button:hover { background: #1e1e21; }
.order-geo-results button:disabled { color: var(--muted); cursor: not-allowed; }
.order-geo-picked {
  margin: 0;
  color: var(--cream);
  font-size: 0.88rem;
}

/* Two-pane order layout: picker/search on the left, a single always-visible cart panel
   to its RIGHT on wide viewports -- same row, no scrolling the page to find either one.
   This replaces the old sticky-mini-cart + below-the-fold "Your Order So Far" + separate
   "Review Your Order" gate step with one live panel (see #order-cart-panel below and
   assets/order-all.js's render()). Panel is 1fr/minmax so it never collapses below a
   usable width; picker column gets the remaining space. */
.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: start;
  gap: var(--space-3);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.order-layout .order-builder { padding: 0; max-width: none; }

/* The live cart panel -- sticky to the viewport (stays visible while the picker column,
   an unbounded page-scrolling list, scrolls past it). 2026-09-14 founder directive: NO
   internal/nested scroll regions anywhere on the site, cart panel included -- the page's
   own outer scroll is the only scroller everywhere now.
   `top` is offset below the sticky .site-header (measured 64px tall) plus a breathing-
   room gap, so the panel's own top edge (h2 "Your Order") never renders clipped
   underneath the header bar -- the earlier `top: var(--space-2)` (16px) put the panel's
   sticky point ABOVE the header's own 64px height, so the header visually covered the
   panel's top ~48px once scrolled. The panel no longer bounds its own height or scrolls
   internally (see that rule's own comment) -- `position: sticky` still pins it in view as
   the page scrolls; only the never-exceed-viewport ceiling and the internal-scroll
   fallback were removed, per the founder's instruction. */
.order-cart-panel {
  position: sticky;
  top: calc(64px + var(--space-2));
  /* 2026-09-14 founder directive: no internal/nested scroll containers anywhere on the
     site. This panel previously carried its own max-height + overflow-y:auto as a
     last-resort safety net for a genuinely oversized order; that bound is removed here
     so the panel grows to its full natural content height and the outer page becomes the
     only scroller. `position: sticky` is unaffected by removing the height/overflow
     bound -- it still pins the panel's top edge in the viewport as the picker column (or
     now the whole longer page) scrolls past.

     2026-09-14 follow-up fix: an UNBOUNDED sticky panel taller than the viewport doesn't
     just "scroll off from the bottom" harmlessly -- once its natural height exceeds the
     viewport, its own bottom (the Checkout button, later line items, submit button once
     the form expands) renders permanently below the fold with no page-scroll position
     that brings it into view, because a sticky element's box is pinned by its TOP and
     the browser has no way to reveal content past its own bottom edge while it remains
     sticky. That is a real reachability bug, not the "expected/acceptable" tradeoff
     described in the paragraph above -- revisited and fixed here without reintroducing
     any nested scroll container (still hard-banned).

     Fix: assets/order-cart-sticky.js observes this panel's height against the viewport
     height (ResizeObserver + a resize listener) and toggles the `.order-cart-panel--
     overflowing` class below, which flips `position` to `static`, whenever the panel's
     natural content height would exceed the available viewport space under its sticky
     `top` offset. With `position: static` the panel flows in-document like any other
     block -- the ordinary page scroll (the one and only scroller) reaches every part of
     it, including a checkout form expanded to its full height. The class is removed
     (re-enabling sticky) the moment the panel shrinks back under the viewport bound (cart
     item removed, or the checkout form collapses back to the Checkout button), so a
     small cart still gets the pinned-in-view behavior with zero regression. */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--red);
  background: var(--bg-raised);
}
.order-cart-panel h2 { margin: 0 0 0.2em; font-size: 1.1rem; }
/* Toggled by assets/order-cart-sticky.js -- see the long comment on .order-cart-panel
   above. Flips the panel to normal document flow whenever its natural height would
   exceed the viewport under the sticky `top` offset, so the ordinary page scroll (never
   a nested scroll container) can reach every part of it. Desktop-only concern: the
   @media(max-width:900px) block below already forces `position: static` unconditionally
   on narrow viewports, so this class is a no-op there (static overriding static). */
.order-cart-panel.order-cart-panel--overflowing { position: static; }
#order-cart-empty-hint { margin: 0; }
/* order.html-only override, now redundant with the shared .order-pick-list rule above
   (which itself dropped its max-height/overflow-y as of 2026-09-14) -- left in place,
   explicit and harmless, as a self-documenting guarantee that this page's picker in
   particular never regains an internal scroll region. */
.order-layout .order-pick-list { max-height: none; overflow-y: visible; }

/* Narrow viewports: side-by-side doesn't fit, so the cart panel stacks BELOW the picker
   (source order already puts it second) instead of beside it, and drops the sticky
   positioning so it behaves like a normal in-flow section -- still reachable by a short
   scroll immediately after the picker, never hunted for further down a long page, and
   still the single live-updating panel (no separate mini-cart/review). */
@media (max-width: 900px) {
  .order-layout { grid-template-columns: 1fr; }
  .order-cart-panel { position: static; }
  /* 2026-09-14 founder directive: "On the mobile version, my order should always come
     before the long list of stuff you can add." DOM order stays picker-then-cart (kept
     for tab order / accessibility per .order-layout's source markup); visual order flips
     via the CSS `order` property so the cart panel renders first on stacked/narrow
     viewports while the wide-viewport side-by-side layout (picker left, cart right)
     above this media query is untouched. */
  .order-cart-panel { order: -1; }
  .order-builder { order: 0; }
}
.order-cart-grand-total { font-size: 1.05rem; color: var(--red); }
.order-pairing-suggestions {
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px dashed var(--red-dim);
  background: var(--bg-raised);
}
.pairing-suggest-label {
  margin: 0 0 var(--space-1);
  color: var(--cream);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pairing-suggest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pairing-suggest-btn {
  font-size: 0.85rem;
  padding: 0.5em 0.9em;
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}
.mailing-list-line {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid #232326;
  color: var(--cream);
  font-style: italic;
}
.mailing-list-line a { color: var(--red); font-style: normal; }
.kitchen-partner {
  margin-top: var(--space-3);
  text-align: left;
  color: var(--muted);
  font-size: 0.85rem;
}
.kitchen-partner summary {
  cursor: pointer;
  color: var(--muted);
  text-align: center;
  list-style: none;
}
.kitchen-partner summary::-webkit-details-marker { display: none; }
.kitchen-partner summary:hover { color: var(--red); }
.kitchen-partner-note {
  margin: var(--space-2) 0;
  text-align: center;
}
.kitchen-partner-form {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.kitchen-partner-form input {
  padding: 0.6em 1em;
  border-radius: var(--radius);
  border: 2px solid var(--red-dim);
  background: var(--bg-raised);
  color: #fff;
  font-size: 0.9rem;
  min-width: 220px;
}
.kitchen-partner-form input:focus { outline: none; border-color: var(--red); }
.kitchen-partner-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.kitchen-partner-status {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--cream);
}

/* Disclosures */
.disclosures {
  padding: var(--space-4) var(--space-3);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.disclosures h2 {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.disclosures p {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}
.disclosures a { color: var(--red); }

/* Gallery */
.gallery-intro {
  padding: var(--space-5) var(--space-3) var(--space-2);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.gallery-intro h1 {
  color: var(--red);
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3rem);
  text-shadow: 0 0 8px var(--red), 0 0 24px var(--red);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-3);
}
.gallery-item {
  margin: 0;
  border: 2px solid var(--red-dim);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  /* Vinyl-booth edge: a soft chrome halo just outside the existing red border,
     evoking a diner booth's chrome trim without changing the red identity. */
  box-shadow: 0 0 0 1px rgba(210,210,210,0.2), 0 4px 14px rgba(0,0,0,0.4);
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  cursor: zoom-in;
}

/* CRT power-on reveal, masking real image-load latency across the gallery.html
   thumbnail grid. JS-progressive-enhancement only: an image with no JS support, or
   before the .hof-crt-ready class exists, renders instantly and normally -- the
   effect never gates visibility, it only decorates an already-successful load.
   Cheap on purpose (transform/opacity/clip-path only -- compositor thread, no
   layout/paint cost) so 8 concurrent reveals don't compete with real image decode.
   The standalone gallery-<slug>.html photo pages use crossfader.hof.js instead
   (published ThatREALM widget at api.thatrealm.com/hof/) -- not duplicated here. */
.gallery-item img.hof-crt-loading {
  opacity: 0;
}
.gallery-item img.hof-crt-on {
  animation: hof-crt-scan 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
             hof-crt-flash 420ms ease-out both;
}
@keyframes hof-crt-scan {
  0%   { clip-path: inset(50% 0 50% 0); opacity: 1; }
  60%  { clip-path: inset(50% 0 50% 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes hof-crt-flash {
  0%   { filter: brightness(2.2) saturate(0.3); }
  40%  { filter: brightness(1.6) saturate(0.6); }
  100% { filter: brightness(1) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-item img.hof-crt-loading { opacity: 1; }
  .gallery-item img.hof-crt-on { animation: none; }
}
.gallery-item figcaption {
  padding: var(--space-2);
  text-align: center;
  color: var(--cream);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  background: var(--bg-raised);
}
.gallery-back {
  text-align: center;
  padding: var(--space-2) var(--space-3) var(--space-5);
}
.gallery-back a { color: var(--red); font-weight: 600; }

/* Footer */
.site-footer {
  text-align: center;
  padding: var(--space-4) var(--space-3) var(--space-5);
  color: var(--muted);
  font-size: 0.85rem;
  position: relative;
}
.site-footer p { margin: 0.35em 0; }
/* Closing checkerboard bookend -- mirrors .checker-strip at the top of the hero,
   giving the page a diner-floor motif that opens and closes the layout rather than
   appearing only once. Thin trim, not a background fill. */
.site-footer::before {
  content: "";
  display: block;
  height: 8px;
  margin: 0 0 var(--space-3);
  background-image: repeating-conic-gradient(var(--checker-dark) 0% 25%, var(--checker-light) 0% 50%);
  background-size: 16px 16px;
}

/* Bad Boy Club */
.club-intro {
  text-align: center;
  padding: var(--space-5) var(--space-3) var(--space-3);
}
.club-intro h1 {
  color: var(--red);
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3rem);
  text-shadow: 0 0 8px var(--red), 0 0 24px var(--red);
  margin: 0 0 var(--space-2);
}
.club-intro .tagline {
  color: #fff;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.club-intro .menu-note {
  max-width: 640px;
  margin: 0 auto;
}

.club-perks {
  max-width: 640px;
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-3);
}
.perk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.perk-list li {
  background: var(--bg-raised);
  border: 1px solid #232326;
  border-left: 4px solid var(--red-dim);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  /* Booth-seat cue: a vinyl-red accent edge (left border) on each perk, echoing a
     diner booth's upholstery seam -- subtle, not a full tufted-pattern treatment,
     which would have looked gimmicky at this small a card size. */
}

.club-signup {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
  text-align: center;
}
.club-signup h2 {
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.club-form {
  display: grid;
  gap: var(--space-2);
  text-align: left;
  margin-top: var(--space-3);
}
.club-form label {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.club-form input {
  width: 100%;
  padding: 0.75em 1em;
  border-radius: var(--radius);
  border: 2px solid var(--red-dim);
  background: var(--bg-raised);
  color: #fff;
  font-size: 1rem;
}
.club-form input:focus {
  outline: none;
  border-color: var(--red);
}
.club-form button {
  margin-top: var(--space-1);
  cursor: pointer;
}
.club-form-status {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--red-dim);
  background: var(--bg-raised);
  color: #fff;
  font-size: 0.9rem;
}
.club-form-note {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 0.85rem;
}
.club-form-note a { color: var(--red); }

/* Standalone dedicated page (per-menu, per-gallery-photo) intro + cross-nav.
   Reuses .menu-figure/.zoom-hint/.club-form-note tokens rather than inventing new
   ones, since these pages render the same figure component the homepage sections
   already use -- just one per page, with its own head metadata and internal links. */
.page-intro {
  padding: var(--space-5) var(--space-3) var(--space-2);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.page-intro h1 {
  color: var(--red);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  text-shadow: 0 0 8px var(--red), 0 0 24px var(--red);
  margin: 0 0 var(--space-2);
}

/* Contextual "see the full menu" CTA on each standalone gallery-photo page --
   an obvious, in-content link to the specific menu that photo relates to,
   not just the generic top nav / related-pages list at the bottom. */
.gallery-menu-cta {
  display: inline-block;
  margin-top: var(--space-1);
}

/* specialty-menus.html card grid -- reuses the site's existing card/panel look
   (bg-raised + red-dim border) rather than inventing a new surface style. */
.specialty-menu-grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.specialty-menu-card {
  border: 1px solid var(--red-dim);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: var(--space-3);
}
.specialty-menu-card h2 {
  margin: 0 0 var(--space-1);
  font-size: 1.15rem;
}
.specialty-menu-card h2 a { color: var(--cream); }
.specialty-menu-card h2 a:hover { color: var(--red); }
.specialty-menu-card p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 var(--space-2);
}

.related-pages {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
  text-align: center;
}
.related-pages h2 {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.related-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.related-links a {
  display: inline-block;
  padding: 0.6em 1.2em;
  border-radius: var(--radius);
  border: 1px solid var(--red-dim);
  box-shadow: 0 0 0 1px rgba(200,200,200,0.12);
  background: var(--bg-raised);
  color: var(--cream);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.related-links a:hover {
  border-color: var(--red);
  color: var(--red);
  text-decoration: none;
}

/* Standalone gallery-photo page: single large photo, no grid.
   Flex row [prev arrow][image][next arrow] -- arrows sit BESIDE the photo,
   vertically centered against it via align-items:center on the row, but in
   normal flow (not absolutely positioned over the image itself). */
.photo-figure {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 auto var(--space-4);
  max-width: 900px;
  padding: 0 var(--space-3);
}
.photo-figure .photo-figure-media {
  flex: 1 1 auto;
  min-width: 0;
}
/* Fixed "screen" frame around the photo -- border/background/shadow live
   HERE, not on the <img> itself, and never shrink with it. The crossfader
   widget's power-off collapse (transform: scale on the <img>) is layout-
   neutral by spec, so nothing below this frame ever actually moves, but
   without a persistent frame the collapsing photo visually vanishes into
   bare page background, leaving what reads as a dead gap before the
   Previous/Next labels. Framing it keeps the TV-off collapse happening
   INSIDE a stable screen, not into a void. */
.photo-figure .photo-screen {
  /* Fixed frame height (majority of the real gallery photos are 3:4; the
     handful at ~5:6 letterbox via object-fit:contain below rather than
     cropping or stretching) so the Previous/Next arrows -- vertically
     centered against this row via align-items:center -- land at the SAME
     position on every photo page, not wherever that particular photo's own
     aspect ratio happens to put the row's center. */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  border: 2px solid var(--red-dim);
  box-shadow: 0 0 32px rgba(255,43,61,0.15);
  background: #000;
  overflow: hidden;
}
.photo-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.photo-figure figcaption {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--muted);
}

/* Prev/Next arrows -- plain < / > characters, not icon glyphs. FIXED to the
   viewport (not in document flow) so they stay in the exact same on-screen
   spot regardless of scroll position or which photo is showing -- the user
   never has to scroll to reach them. .photo-figure keeps its gap so the
   photo itself isn't overlapped by the fixed arrows on narrow viewports. */
.photo-nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid var(--red-dim);
  color: var(--cream);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 16px rgba(0,0,0,0.4);
}
.photo-nav-arrow.photo-nav-prev { left: var(--space-2); }
.photo-nav-arrow.photo-nav-next { right: var(--space-2); }
.photo-nav-arrow:hover {
  border-color: var(--red);
  color: var(--red);
  text-decoration: none;
}
.photo-nav-arrow .photo-nav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 640px) {
  .photo-figure { gap: var(--space-1); }
  .photo-nav-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
  .photo-nav-arrow.photo-nav-prev { left: var(--space-1); }
  .photo-nav-arrow.photo-nav-next { right: var(--space-1); }
}

/* Prev/Next labels (photo titles) below the image, since the overlay arrows
   above are icon-only -- keeps the "which photo is next" context without
   crowding the image itself. */
.photo-nav-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  max-width: 900px;
  margin: var(--space-2) auto 0;
  padding: 0 var(--space-3);
  color: var(--muted);
  font-size: 0.85rem;
}
.photo-nav-labels a { color: var(--muted); }
.photo-nav-labels a:hover { color: var(--red); }
.photo-nav-labels .photo-nav-next-label { text-align: right; margin-left: auto; }