/* The user's original gemsbok photo, with a shared evening palette. */
:root {
  color-scheme: dark;
  --ink: #f7f0e4;
  --ink-soft: #e6ddce;
  --paper: #11140f;
  --paper-deep: #1c2018;
  --cream: #fff8ec;
  --rust: #e1c58d;
  --rust-dark: #171b14;
  --gold: #e1c58d;
  --line: rgb(225 197 141 / 30%);
  --serif: "Cormorant Garamond", "Palatino Linotype", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}
html { background: #111310; }
body {
  isolation: isolate;
  background: transparent;
  line-height: 1.75;
  text-shadow: 0 1px 3px rgb(0 0 0 / 90%), 0 2px 16px rgb(0 0 0 / 45%);
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #111310;
  background-image:
    linear-gradient(90deg, rgb(5 8 5 / 28%), rgb(5 8 5 / 8%) 52%, rgb(5 8 5 / 18%)),
    url("assets/karoo-gemsbok-background.jpg");
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  pointer-events: none;
}
h1, h2, h3,
.pizza-page h1, .pizza-page h2, .pizza-page h3 {
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
h1 em, h2 em, .dish-number, .dish-topline strong, .menu-row strong,
.pizza-dish strong, .pizza-signatures .pizza-dish strong { color: var(--gold); }
.site-header {
  color: var(--ink);
  background: rgb(12 15 11 / 68%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.site-nav a, .header-cta, .button, .eyebrow, .mini-label,
.menu-list-heading, .dish-topline, .hero-details dt,
.sunday-side-note span, .sunday-seal span, .mobile-actions a {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
}
.site-nav a, .header-cta, .eyebrow, .mini-label, .menu-list-heading {
  color: var(--gold);
}
.site-nav a:hover, .site-nav a[aria-current], .header-cta:hover,
.text-link:hover, .pizza-dish a:hover { color: var(--cream); }
.brand, .footer-brand, .hero-logo-card { overflow: visible; }
.brand-logo, .footer-brand img, .hero-logo-card img { object-fit: contain; }
.hero, .menu-section, .sunday-section, .pizza-hero, .pizza-menu-section {
  margin-block: clamp(1.25rem, 3vw, 2.5rem);
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
  background: transparent;
  box-shadow: none;
}
.hero {
  min-height: calc(100svh - var(--header-height) - 5rem);
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3rem, 5vw, 5rem);
}
.hero h1 { font-size: clamp(3.3rem, 5.4vw, 5.75rem); }
.hero > *, .pizza-hero > *, .pizza-menu > *,
.section-heading > *, .visit-grid > * { min-width: 0; }
.hero-details { margin-top: 2.5rem; }
.hero-details dd { font-size: 1.3rem; line-height: 1.4; }
.hero-visual { padding: 0; width: 100%; }
.image-frame {
  aspect-ratio: 1536 / 928;
  border: 1px solid var(--line);
}
.hero-visual figcaption, .pizza-photo figcaption {
  color: var(--ink-soft);
  font-size: 1rem;
}
.menu-section, .sunday-section, .pizza-menu-section {
  background: rgb(8 12 8 / 18%);
  border-block: 1px solid rgb(225 197 141 / 18%);
}
.favourites-grid { gap: 1.5rem; border: 0; background: transparent; }
.feature-dish, .feature-burger, .pizza-menu-group, .pizza-signatures {
  color: var(--ink);
  background: rgb(8 12 8 / 22%);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
}
.feature-dish h3, .pizza-intro h3 { letter-spacing: -0.015em; line-height: 1.1; }
.section-heading h2, .visit-heading h2, .story-statement h2, .sunday-content h2 {
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  letter-spacing: -0.015em;
}
.service-ribbon, .pizza-location-strip {
  background: rgb(9 13 9 / 38%);
  border-block: 1px solid var(--line);
}
.story-section, .visit-section, .pizza-collection {
  background: rgb(8 12 8 / 22%);
  border-block: 1px solid rgb(225 197 141 / 18%);
}
.story-copy > p:not(.story-lead), .pizza-signatures > p,
.pizza-signatures .pizza-dish p { color: var(--ink-soft); }
.menu-list, .visit-grid { border-color: var(--line); }
.menu-list-premium { border-top-color: var(--gold); }
.menu-row span, .menu-row strong { font-size: 1.25rem; line-height: 1.35; }
.menu-row small, .menu-note, .footer-meta, .pizza-page .footer-meta {
  font-size: 0.875rem;
  line-height: 1.6;
}
.pizza-dish h4, .pizza-dish strong { font-size: 1.45rem; font-weight: 600; }
.button { border: 1px solid var(--gold); text-shadow: none; }
.button-primary, .mobile-actions a:nth-child(2) {
  color: #171b14;
  background: #e1c58d;
  text-shadow: none;
}
.button-primary:hover, .button-primary:focus-visible,
.mobile-actions a:nth-child(2):hover { color: #171b14; background: #f1dcaf; }
.button-quiet { color: var(--cream); background: rgb(8 12 8 / 28%); }
.button-quiet:hover { color: var(--cream); background: rgb(8 12 8 / 75%); }
.skip-link { color: var(--cream); background: #171b14; }
.site-footer {
  background: rgb(8 12 8 / 42%);
  border-top: 1px solid var(--line);
}
.footer-meta { color: var(--ink-soft); opacity: 1; }
.mobile-actions {
  color: var(--cream);
  background: rgb(10 14 10 / 96%);
  border-top: 1px solid var(--line);
}
@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero-visual { width: min(100%, 630px); }
  .site-nav { background: rgb(10 14 10 / 97%); }
}
@media (max-width: 650px) {
  body, .pizza-page { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Keep the animal centred in the portrait crop as the page scrolls. */
  body::before { background-position: center, 49% center; }
  .hero, .menu-section, .sunday-section, .pizza-hero, .pizza-menu-section {
    width: calc(100% - 1.5rem);
    margin-block: 1rem;
    padding-inline: 1.1rem;
  }
  .hero h1, .pizza-hero h1 { font-size: clamp(2.75rem, 11.6vw, 4.25rem); }
  .hero-details { gap: 0.75rem; }
  .hero-details div + div { padding-left: 0.75rem; }
  .hero-details dd { font-size: 1.1rem; overflow-wrap: anywhere; }
  .hero-visual { padding: 0; }
  .service-ribbon { flex-wrap: wrap; justify-content: center; white-space: normal; }
  .mobile-actions { padding-bottom: env(safe-area-inset-bottom); }
  .mobile-actions a { font-size: 0.875rem; letter-spacing: 0.035em; }
}
@media print {
  :root {
    color-scheme: light;
    --ink: #20160f;
    --ink-soft: #423b30;
    --cream: #20160f;
    --gold: #654b22;
    --rust: #654b22;
    --line: #b7ab97;
  }
  html, body { background: white; }
  body { text-shadow: none; }
  body::before, .mobile-actions { display: none; }
}