@charset "UTF-8";
/* ==========================================================================
   LAS FAMOSAS DE JOSE — rustic vintage taquería
   Hand-written CSS. No frameworks, no build step.

   01. Fonts
   02. Design tokens
   03. Reset & base
   04. Layout utilities
   05. Ornament (tile, greca, plaster, arches)
   06. Buttons & links
   07. Site header + navigation
   08. Mobile action bar
   09. Hero
   10. Welcome
   11. Food showcase
   12. Around the clock
   13. Atmosphere
   14. Location
   15. Final call to action
   16. Footer
   17. Contact page
   18. Motion & reveals
   ========================================================================== */

/* 01. Fonts ============================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 02. Design tokens ====================================================== */

:root {
  /* --- Brand palette (exact) --- */
  --color-walnut: #734b32;
  --color-adobe: #be8c63;
  --color-ivory: #f5e9d9;
  --color-espresso: #3b2923;
  --color-sage: #527568;

  /* --- Accessible variants derived from the brand palette ---
     Contrast measured against the surface each one is used on:
       walnut-deep  on ivory  8.2:1     ivory  on walnut-deep 8.2:1
       sage-deep    on ivory  6.1:1     white  on sage        5.1:1
       adobe-light  on espresso 7.0:1   espresso on adobe     4.7:1          */
  --color-walnut-deep: #5e3b26;
  --color-walnut-ink: #472c1c;
  --color-sage-deep: #3f5c51;
  --color-adobe-light: #d8b38c;
  --color-espresso-deep: #2b1d19;
  --color-sand: #ebd9c2;
  --color-sand-deep: #e4cfb4;
  --color-cream: #fbf4e9;

  /* --- Semantic --- */
  --color-background: var(--color-ivory);
  --color-surface: var(--color-cream);
  --color-text: var(--color-espresso);
  --color-text-muted: #5a453c;
  --color-text-on-dark: var(--color-ivory);
  --color-text-on-dark-muted: #d6c4ae;
  --color-rule: rgba(115, 75, 50, 0.28);
  --color-rule-strong: rgba(115, 75, 50, 0.55);
  --color-rule-dark: rgba(216, 179, 140, 0.32);
  --color-focus: #1f6feb;

  /* --- Type --- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;
  --font-body: "Source Sans 3", "Helvetica Neue", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.7rem);
  --step-4: clamp(2.2rem, 1.7rem + 2.5vw, 3.6rem);
  --step-5: clamp(2.6rem, 1.8rem + 3.8vw, 4.6rem);

  /* --- Space --- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);

  /* --- Shape --- */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --arch: 50% 50% var(--radius-l) var(--radius-l) / 40% 40% var(--radius-l)
    var(--radius-l);
  --arch-wide: 50% 50% var(--radius-l) var(--radius-l) / 26% 26% var(--radius-l)
    var(--radius-l);

  --shadow-s: 0 1px 2px rgba(59, 41, 35, 0.14),
    0 4px 14px -8px rgba(59, 41, 35, 0.3);
  --shadow-m: 0 2px 4px rgba(59, 41, 35, 0.12),
    0 18px 40px -24px rgba(59, 41, 35, 0.55);

  /* --- Frame --- */
  --content-max: 74rem;
  --content-narrow: 44rem;
  --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 2.75rem);

  --header-h: 4.5rem;
  --topbar-h: 2.25rem;
  --actionbar-h: 0rem;

  /* --- Ornament (inline SVG, no external requests) --- */
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 1.6 46.4 24 24 46.4 1.6 24Z' fill='none' stroke='%23734B32' stroke-width='2.2'/%3E%3Cpath d='M24 11 37 24 24 37 11 24Z' fill='%23BE8C63'/%3E%3Cpath d='M24 18.6 29.4 24 24 29.4 18.6 24Z' fill='%23F5E9D9'/%3E%3Cpath d='M0 0h9L0 9Z M48 0v9L39 0Z M0 48v-9l9 9Z M48 48h-9l9-9Z' fill='%23527568'/%3E%3C/svg%3E");
  --greca-adobe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cpath d='M0 11h4V4h8v7h4' fill='none' stroke='%23BE8C63' stroke-width='2.4'/%3E%3C/svg%3E");
  --greca-walnut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cpath d='M0 11h4V4h8v7h4' fill='none' stroke='%23734B32' stroke-width='2.4'/%3E%3C/svg%3E");
  --plaster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");
}

@media (min-width: 48em) {
  :root {
    --header-h: 5.25rem;
  }
}

/* 03. Reset & base ======================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-wrap: break-word;
  padding-bottom: var(--actionbar-h);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--space-s);
  color: inherit;
}

h1 {
  font-size: var(--step-5);
  font-weight: 800;
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p,
ul,
ol,
dl,
figure,
table {
  margin: 0 0 var(--space-s);
}

p:last-child,
ul:last-child,
dl:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-walnut-deep);
  text-decoration-thickness: max(1px, 0.07em);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-walnut-ink);
}

img,
svg,
iframe {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

/* `hidden` must win over any display set by a component rule. */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Dark surfaces need a focus ring that survives the espresso background. */
.band--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: #ffd98a;
}

::selection {
  background: var(--color-adobe);
  color: var(--color-espresso);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-s);
  z-index: 200;
  transform: translateY(-120%);
  padding: 0.75rem 1.25rem;
  background: var(--color-espresso);
  color: var(--color-ivory);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  box-shadow: var(--shadow-m);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-ivory);
}

/* 04. Layout utilities =================================================== */

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: calc(var(--content-narrow) + var(--gutter) * 2);
}

.band {
  position: relative;
  padding-block: var(--space-2xl);
  background-color: var(--color-ivory);
}

.band--sand {
  background-color: var(--color-sand);
}

.band--dark {
  background-color: var(--color-espresso);
  color: var(--color-text-on-dark);
}

.band--dark h2,
.band--dark h3 {
  color: var(--color-cream);
}

.band--textured::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--plaster);
  background-size: 220px 220px;
  opacity: 0.055;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.band--dark.band--textured::before {
  opacity: 0.13;
  mix-blend-mode: overlay;
}

.band > .wrap {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: block;
  margin: 0 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-walnut-deep);
}

.band--dark .eyebrow {
  color: var(--color-adobe-light);
}

.eyebrow::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  margin-top: 0.6rem;
  background: var(--color-adobe);
  border-radius: 2px;
}

.eyebrow--center {
  text-align: center;
}

.eyebrow--center::after {
  margin-inline: auto;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 54ch;
}

.band--dark .lead {
  color: var(--color-text-on-dark-muted);
}

.lead--center {
  margin-inline: auto;
}

.text-center {
  text-align: center;
}

.section-head {
  max-width: 56ch;
  margin-bottom: var(--space-xl);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* 05. Ornament =========================================================== */

.tile-band {
  height: 48px;
  background-color: var(--color-sand);
  background-image: var(--tile);
  background-size: 48px 48px;
  background-repeat: repeat-x;
  background-position: center;
  border-block: 2px solid var(--color-walnut);
}

.tile-band--onDark {
  background-color: var(--color-espresso);
  border-color: var(--color-walnut-deep);
}

/* Stepped Southwestern fret used as a section cap. */
.band--capped::after,
.greca {
  content: "";
  display: block;
  height: 14px;
  background-image: var(--greca-adobe);
  background-size: 16px 14px;
  background-repeat: repeat-x;
  background-position: center;
}

.band--capped {
  padding-top: calc(var(--space-2xl) + 14px);
}

.band--capped::after {
  position: absolute;
  top: var(--space-m);
  left: 0;
  right: 0;
  opacity: 0.85;
}

.band--sand.band--capped::after {
  background-image: var(--greca-walnut);
  opacity: 0.55;
}

/* Arched photo frames -------------------------------------------------- */

.frame {
  position: relative;
  display: block;
  padding: 10px;
  background: linear-gradient(
    160deg,
    var(--color-walnut) 0%,
    var(--color-walnut-deep) 55%,
    var(--color-walnut-ink) 100%
  );
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}

/* The markup wraps every photo in <picture>, so these must be descendant
   selectors, not child selectors. */
.frame picture {
  display: block;
}

.frame img {
  width: 100%;
  border-radius: var(--radius-m);
  display: block;
}

.frame--arch {
  border-radius: var(--arch);
  padding: 12px;
}

.frame--arch img {
  border-radius: 50% 50% var(--radius-s) var(--radius-s) / 40% 40%
    var(--radius-s) var(--radius-s);
}

.frame--archWide {
  border-radius: var(--arch-wide);
  padding: 12px;
}

.frame--archWide img {
  border-radius: 50% 50% var(--radius-s) var(--radius-s) / 26% 26%
    var(--radius-s) var(--radius-s);
}

/* Four painted tacks, like a vintage hand-lettered sign. */
.frame--tacked::before,
.frame--tacked::after {
  content: "";
  position: absolute;
  bottom: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-adobe-light);
  box-shadow: inset 0 -1px 0 rgba(59, 41, 35, 0.45);
}

.frame--tacked::before {
  left: 12px;
}
.frame--tacked::after {
  right: 12px;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.band--dark figcaption {
  color: var(--color-text-on-dark-muted);
}

/* 06. Buttons & links ==================================================== */

.btn {
  --btn-bg: var(--color-walnut);
  --btn-fg: #fff;
  --btn-bd: var(--color-walnut-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius-m);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--btn-bd), var(--shadow-s);
  transition: transform 0.14s ease, box-shadow 0.14s ease,
    background-color 0.14s ease;
}

.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--btn-bd), var(--shadow-m);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--btn-bd);
}

.btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

.btn--primary {
  --btn-bg: var(--color-walnut);
  --btn-fg: #fff;
  --btn-bd: var(--color-walnut-ink);
}

.btn--primary:hover {
  --btn-bg: var(--color-walnut-deep);
}

.btn--secondary {
  --btn-bg: var(--color-sage-deep);
  --btn-fg: #fff;
  --btn-bd: #2f4740;
}

.btn--secondary:hover {
  --btn-bg: #35504a;
}

/* Outline sits on ivory; the dark variant sits on espresso. */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-walnut-deep);
  --btn-bd: var(--color-walnut);
  box-shadow: none;
  border-width: 2px;
}

.btn--outline:hover {
  --btn-bg: rgba(115, 75, 50, 0.1);
  --btn-fg: var(--color-walnut-ink);
  box-shadow: none;
}

.btn--onDark {
  --btn-bg: transparent;
  --btn-fg: var(--color-cream);
  --btn-bd: var(--color-adobe);
  box-shadow: none;
}

.btn--onDark:hover {
  --btn-bg: rgba(216, 179, 140, 0.18);
  --btn-fg: #fff;
  box-shadow: none;
}

.btn--sand {
  --btn-bg: var(--color-adobe-light);
  --btn-fg: var(--color-espresso-deep);
  --btn-bd: #a8784f;
}

.btn--sand:hover {
  --btn-bg: #e4c6a5;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.btn-row--center {
  justify-content: center;
}

/* Text link with a travelling arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  font-weight: 700;
  color: var(--color-walnut-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--color-adobe);
  padding-bottom: 2px;
}

.link-arrow svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  transition: transform 0.18s ease;
}

.link-arrow:hover {
  color: var(--color-walnut-ink);
  border-bottom-color: var(--color-walnut);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

.band--dark .link-arrow {
  color: var(--color-adobe-light);
  border-bottom-color: var(--color-adobe);
}

.band--dark .link-arrow:hover {
  color: #fff;
}

/* Status chip ----------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  background: var(--color-sage-deep);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status__dot {
  width: 0.7em;
  height: 0.7em;
  flex: none;
  border-radius: 50%;
  background: #8fe3b0;
  box-shadow: 0 0 0 3px rgba(143, 227, 176, 0.28);
}

.status--onLight {
  background: var(--color-sage-deep);
}

.status--spaced {
  margin-top: var(--space-s);
}

/* 07. Site header ======================================================== */

.site-header {
  position: sticky;
  top: calc(var(--topbar-h) * -1);
  z-index: 100;
  background: var(--color-cream);
}

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  background: var(--color-espresso);
  color: var(--color-text-on-dark);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.topbar p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar strong {
  color: var(--color-adobe-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The phone number must never be the thing that gets ellipsed. */
.topbar .wrap > p:last-child {
  flex: none;
}

.topbar a {
  display: inline-flex;
  align-items: center;
  min-height: 24px; /* WCAG 2.2 SC 2.5.8 target size */
  color: var(--color-cream);
  font-weight: 600;
  white-space: nowrap;
}

.topbar__addr {
  display: none;
}

@media (min-width: 40em) {
  .topbar__addr {
    display: inline;
  }
}

.navbar {
  border-bottom: 2px solid var(--color-walnut);
  background: var(--color-cream);
  transition: box-shadow 0.2s ease;
}

.site-header.is-stuck .navbar {
  box-shadow: 0 10px 24px -18px rgba(59, 41, 35, 0.9);
}

.navbar__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.navbar__inner > .btn {
  white-space: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--color-espresso);
  padding-block: 0.4rem;
}

.brand img {
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 0.72rem + 1.1vw, 1.125rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.brand__tag {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-walnut-deep);
  white-space: nowrap;
}

/* Below ~350px there is no room for the strapline next to the toggle. */
@media (max-width: 21.99em) {
  .brand__tag {
    display: none;
  }
}

@media (min-width: 48em) {
  .brand img {
    width: 3.5rem;
    height: 3.5rem;
  }
  .brand__name {
    font-size: 1.375rem;
  }
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  font-weight: 700;
  color: var(--color-espresso);
  text-decoration: none;
  border-radius: var(--radius-s);
  position: relative;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.25rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-adobe);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}

.nav__link:hover {
  color: var(--color-walnut-ink);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"] {
  color: var(--color-walnut-deep);
}

.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--color-walnut);
}

/* Delivery-areas submenu -------------------------------------------------
   The parent is a real link to the hub page plus a separate disclosure
   button, so the hub is always reachable and the submenu never depends on
   hover. */
.nav__item--has-menu {
  position: relative;
  display: flex;
  align-items: center;
}

/* A top-level item whose submenu has no landing page: the button *is* the
   nav item, so it is styled like a link and carries the label. */
.nav__link--button {
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: inherit;
  cursor: pointer;
  gap: 0.45em;
}

.nav__link--button svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: currentColor;
  transition: transform 0.18s ease;
}

.nav__link--button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav__link--button[aria-expanded="true"]::after {
  transform: scaleX(1);
}

/* Marks the group when one of its pages is the current page. */
.nav__link--button[aria-current]::after {
  transform: scaleX(1);
  background: var(--color-walnut);
}

.nav__link--button[aria-current] {
  color: var(--color-walnut-deep);
}

.nav__disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: 2.75rem;
  margin-left: -0.35rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-s);
  color: var(--color-walnut-deep);
  cursor: pointer;
}

.nav__disclosure svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  transition: transform 0.18s ease;
}

.nav__disclosure:hover {
  color: var(--color-walnut-ink);
}

.nav__disclosure[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav__sub {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 120;
  min-width: 15rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--color-cream);
  border: 2px solid var(--color-walnut);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}

.nav__sub::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--color-adobe);
  border-radius: 2px 2px 0 0;
}

.nav__sub a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-s);
  font-weight: 600;
  color: var(--color-espresso);
  text-decoration: none;
}

.nav__sub a:hover {
  background: var(--color-sand);
  color: var(--color-walnut-ink);
}

.nav__sub a[aria-current="page"] {
  color: var(--color-walnut-deep);
  font-weight: 700;
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  font-weight: 700;
  color: var(--color-espresso);
  text-decoration: none;
  white-space: nowrap;
}

.nav__phone svg {
  width: 1.05em;
  height: 1.05em;
  fill: var(--color-walnut);
}

.nav__phone:hover {
  color: var(--color-walnut-ink);
  text-decoration: underline;
}

/* The phone number is already in the top bar and the mobile action bar, so
   the header keeps it only where there is room for it. */
.nav__phone,
.navbar .btn {
  display: none;
}

@media (min-width: 34em) {
  .nav__phone {
    display: inline-flex;
  }
}

/* Hamburger ------------------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 0.85rem;
  background: var(--color-ivory);
  color: var(--color-espresso);
  border: 2px solid var(--color-walnut);
  border-radius: var(--radius-m);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--color-sand);
}

.nav-toggle__bars {
  position: relative;
  width: 20px;
  height: 14px;
  flex: none;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--color-walnut-deep);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__bars span:nth-child(1) {
  top: 0;
}
.nav-toggle__bars span:nth-child(2) {
  top: 5.75px;
}
.nav-toggle__bars span:nth-child(3) {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5.75px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-5.75px) rotate(-45deg);
}

/* Mobile panel ---------------------------------------------------------- */

.mobile-nav {
  background: var(--color-cream);
  border-bottom: 2px solid var(--color-walnut);
  box-shadow: var(--shadow-m);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--space-s) 0 var(--space-m);
}

.mobile-nav li + li {
  border-top: 1px solid var(--color-rule);
}

.mobile-nav a:not(.btn) {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-height: 3.25rem;
  padding: 0.5rem 0.25rem;
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--color-espresso);
  text-decoration: none;
}

.mobile-nav a:not(.btn):hover {
  color: var(--color-walnut-ink);
}

.mobile-nav a[aria-current="page"] {
  color: var(--color-walnut-deep);
}

.mobile-nav svg {
  width: 1em;
  height: 1em;
  fill: var(--color-walnut);
  flex: none;
}

.mobile-nav .btn {
  width: 100%;
  margin-top: var(--space-s);
}

/* A group heading in the mobile panel for a set of pages with no landing
   page of their own. */
.mobile-nav__group {
  display: block;
  padding: 0.9rem 0.25rem 0.5rem;
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--color-espresso);
}

/* The delivery areas are simply listed, indented, under their parent — no
   toggle to discover and nothing hidden behind an interaction. */
.mobile-nav__sub {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0 0 0.35rem 1.1rem;
  border-left: 3px solid var(--color-adobe);
}

.mobile-nav__sub li + li {
  border-top: 0;
}

.mobile-nav__sub a:not(.btn) {
  min-height: 2.75rem;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--color-text-muted);
}

.mobile-nav__sub a:not(.btn)::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  border-radius: 1px;
  background: var(--color-adobe);
  transform: rotate(45deg);
}

.mobile-nav__note {
  margin: var(--space-s) 0 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

/* Without JavaScript the hamburger cannot open anything, so the inline
   links are shown at every width instead and the toggle is removed. */
html:not(.js) .nav-toggle,
html:not(.js) .nav__disclosure {
  display: none;
}

html:not(.js) .nav {
  display: block;
}

html:not(.js) .nav__list {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Swap to the desktop navigation. Declared after the component rules above
   so it wins the cascade at equal specificity. */
@media (min-width: 64em) {
  .nav {
    display: block;
  }
  .navbar .btn {
    display: inline-flex;
  }
  /* The phone number is already in the top bar directly above, so the
     desktop row drops it and keeps the navigation from crowding. */
  .nav-toggle,
  .nav__phone,
  .mobile-nav {
    display: none !important;
  }
}

/* 08. Mobile action bar ================================================== */

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-espresso);
  border-top: 3px solid var(--color-adobe);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.action-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.25rem;
  color: var(--color-cream);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.action-bar a + a {
  border-left: 1px solid rgba(216, 179, 140, 0.3);
}

.action-bar a:hover {
  background: var(--color-espresso-deep);
  color: #fff;
}

.action-bar svg {
  width: 1.3em;
  height: 1.3em;
  fill: var(--color-adobe-light);
}

.action-bar a:last-child {
  background: var(--color-walnut);
}

.action-bar a:last-child svg {
  fill: #fff;
}

.action-bar a:last-child:hover {
  background: var(--color-walnut-deep);
}

@media (min-width: 48em) {
  .action-bar {
    display: none;
  }
}

@media (max-width: 47.999em) {
  :root {
    --actionbar-h: 3.5rem;
  }
}

/* 09. Hero =============================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(29rem, 80svh, 46rem);
  padding-block: var(--space-xl);
  background: var(--color-espresso-deep);
  color: var(--color-ivory);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 45%;
}

/* A light scrim only — the storefront should stay readable. All of the
   hero's text contrast comes from the opaque sign board below, never
   from this gradient. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(43, 29, 25, 0.46) 0%,
    rgba(43, 29, 25, 0.1) 32%,
    rgba(43, 29, 25, 0.16) 66%,
    rgba(43, 29, 25, 0.58) 100%
  );
}

/* The hero copy sits on a painted sign board, the way the restaurant's own
   lettering sits on the panel above its door. */
.hero__inner {
  position: relative;
  max-width: 44rem;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  padding-top: calc(clamp(1.4rem, 1rem + 1.6vw, 2.4rem) + 14px);
  background: rgba(43, 29, 25, 0.94);
  border: 2px solid rgba(216, 179, 140, 0.55);
  border-radius: var(--radius-l);
  box-shadow: 0 24px 60px -30px rgba(18, 11, 8, 0.95);
}

.hero__inner::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 14px;
  background-image: var(--greca-adobe);
  background-size: 16px 14px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.75;
}

@supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)) {
  .hero__inner {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* On wide screens the board moves right so the restaurant's own painted
   sign stays visible on the left of the photograph. */
@media (min-width: 60em) {
  .hero__inner {
    margin-left: auto;
    max-width: 38rem;
  }
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 1.55rem + 3.1vw, 4rem);
  margin-bottom: var(--space-s);
}

.hero .eyebrow {
  color: var(--color-adobe-light);
}

.hero__lead {
  font-size: var(--step-0);
  line-height: 1.6;
  color: #ece0d0;
  max-width: 46ch;
}

@media (min-width: 40em) {
  .hero__lead {
    font-size: var(--step-1);
    line-height: 1.55;
  }
}

.hero .status {
  margin-bottom: var(--space-m);
}

/* Sign rail under the hero. */
.sign-rail {
  background: var(--color-espresso);
  color: var(--color-text-on-dark);
  border-block: 3px solid var(--color-adobe);
}

.sign-rail ul {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}

.sign-rail li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85rem 0.5rem;
  text-align: center;
  font-size: var(--step--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
}

.sign-rail li + li {
  border-top: 1px solid rgba(216, 179, 140, 0.28);
}

.sign-rail svg {
  width: 1.1em;
  height: 1.1em;
  fill: var(--color-adobe-light);
  flex: none;
}

.sign-rail a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-cream);
}

@media (min-width: 48em) {
  .sign-rail ul {
    grid-template-columns: repeat(3, 1fr);
  }
  .sign-rail li + li {
    border-top: 0;
    border-left: 1px solid rgba(216, 179, 140, 0.28);
  }
}

/* 10. Welcome ============================================================ */

.welcome__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.welcome__media {
  position: relative;
  max-width: 30rem;
  margin-inline: auto;
  width: 100%;
}

.welcome__badge {
  display: block;
  width: clamp(5.5rem, 16vw, 7.5rem);
  margin: 0 auto var(--space-m);
  padding: 0.5rem;
  background: var(--color-cream);
  border: 3px solid var(--color-walnut);
  border-radius: 50%;
  box-shadow: var(--shadow-m);
}

.welcome__badge img {
  width: 100%;
  border-radius: 50%;
}

.welcome__always {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--color-cream);
  border-left: 6px solid var(--color-sage);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-espresso);
}

@media (min-width: 56em) {
  .welcome__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .welcome__media {
    margin-inline: 0;
  }
  /* Logo medallion tucks into the arch's lower corner, on ivory — never
     over the photograph itself. */
  .welcome__badge {
    position: absolute;
    right: -2.25rem;
    bottom: -1.75rem;
    z-index: 2;
    margin: 0;
    width: clamp(6.5rem, 11vw, 9rem);
  }
}

/* 11. Food showcase ====================================================== */

.showcase {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}

.showcase figure {
  display: flex;
  flex-direction: column;
}

.showcase .frame {
  flex: 1;
}

.showcase img {
  width: 100%;
}

@media (min-width: 44em) {
  .showcase {
    grid-template-columns: repeat(2, 1fr);
    /* The wide photo needs both columns, which would otherwise leave a hole
       beside the first portrait. These are independent captioned figures in
       no particular order, so back-filling is safe. */
    grid-auto-flow: dense;
  }
  .showcase__wide {
    grid-column: span 2;
  }
}

@media (min-width: 68em) {
  .showcase {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    gap: var(--space-l);
    align-items: start;
  }
  /* The two arched portraits span both rows and sit centred in them, which
     staggers the gallery the way a magazine spread does. */
  .showcase__tall {
    grid-row: span 2;
    align-self: center;
  }
  .showcase__wide {
    grid-column: span 2;
  }
}

.showcase__cta {
  margin-top: var(--space-xl);
  text-align: center;
}

/* 12. Around the clock =================================================== */

.clock {
  text-align: center;
}

.clock__dial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 1.75rem);
  margin-block: var(--space-m) var(--space-m);
}

.clock__rule {
  flex: 1;
  max-width: 11rem;
  height: 14px;
  background-image: var(--greca-adobe);
  background-size: 16px 14px;
  background-repeat: repeat-x;
  opacity: 0.8;
}

.clock__big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.5rem, 12vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-adobe-light);
  white-space: nowrap;
}

.clock__big span {
  color: var(--color-cream);
}

.clock__highlight {
  display: inline-block;
  margin-top: var(--space-s);
  padding: 0.7rem 1.35rem;
  border: 2px solid var(--color-adobe);
  border-radius: var(--radius-m);
  background: rgba(216, 179, 140, 0.1);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-cream);
}

.clock__times {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-adobe-light);
}

.clock__times li {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.clock__times li::after {
  content: "◆";
  font-size: 0.6em;
  color: var(--color-adobe);
  opacity: 0.8;
}

.clock__times li:last-child::after {
  display: none;
}

.clock__status {
  margin-top: var(--space-l);
  font-size: var(--step-0);
  color: var(--color-cream);
}

.clock__status .status {
  margin-bottom: 0.5rem;
}

.clock__localtime {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--color-text-on-dark-muted);
  letter-spacing: 0.04em;
}

/* 13. Atmosphere ========================================================= */

.atmosphere__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 56em) {
  .atmosphere__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
  .atmosphere__copy {
    order: 2;
  }
  .atmosphere__media {
    order: 1;
  }
}

/* 14. Location =========================================================== */

.location__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 56em) {
  .location__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.info-card {
  background: var(--color-cream);
  border: 2px solid var(--color-walnut);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}

.info-card__head {
  padding: var(--space-s) var(--space-m);
  background: var(--color-walnut);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
}

.info-card__body {
  padding: var(--space-m);
}

/* Each term/description pair is wrapped in a single <div>, which is the only
   wrapper a <dl> is allowed to contain. */
.detail-list {
  margin: 0;
  display: grid;
  gap: var(--space-m);
}

.detail-list > div {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: var(--space-s);
}

.detail-list svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: var(--color-walnut);
}

.detail-list dt {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-walnut-deep);
  margin-bottom: 0.2rem;
}

.detail-list dd {
  grid-column: 2;
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.5;
}

.detail-list dd address {
  font-style: normal;
}

.detail-list dd a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-weight: 700;
}

.map-frame {
  padding: 10px;
  background: var(--color-walnut);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}

.map-frame iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--color-sand-deep);
  display: block;
}

@media (min-width: 56em) {
  .map-frame iframe {
    aspect-ratio: 16 / 11;
  }
}

.map-note {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

/* 15. Final call to action =============================================== */

.final-cta {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-2xl);
  background: var(--color-espresso-deep);
  color: var(--color-text-on-dark);
  text-align: center;
  overflow: hidden;
  border-top: 3px solid var(--color-adobe);
}

.final-cta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.final-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(43, 29, 25, 0.93) 0%,
    rgba(43, 29, 25, 0.88) 50%,
    rgba(43, 29, 25, 0.95) 100%
  );
}

.final-cta h2 {
  color: #fff;
}

.final-cta p {
  margin-inline: auto;
}

/* This band is dark but is not a .band--dark, so it needs the on-dark text
   colours spelled out — the light-surface muted brown would fail contrast. */
.final-cta .lead,
.final-cta p {
  color: var(--color-text-on-dark-muted);
}

.final-cta .eyebrow {
  color: var(--color-adobe-light);
}

/* 16. Footer ============================================================= */

.site-footer {
  background: var(--color-espresso-deep);
  color: var(--color-text-on-dark);
}

.site-footer::before {
  content: "";
  display: block;
  height: 14px;
  background-color: var(--color-espresso);
  background-image: var(--greca-adobe);
  background-size: 16px 14px;
  background-repeat: repeat-x;
  background-position: center;
}

.site-footer .wrap {
  padding-block: var(--space-xl);
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l) var(--space-xl);
  }
}

@media (min-width: 64em) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 82em) {
  .footer-grid {
    grid-template-columns: 1.3fr 0.85fr 0.85fr 1fr 0.9fr;
    gap: var(--space-l);
  }
}

.footer-brand img {
  width: 5.5rem;
  height: 5.5rem;
  padding: 0.4rem;
  background: var(--color-cream);
  border-radius: 50%;
  border: 2px solid var(--color-adobe);
  margin-bottom: var(--space-s);
}

.footer-brand p {
  color: var(--color-text-on-dark-muted);
  max-width: 34ch;
}

.site-footer h2 {
  font-size: var(--step-1);
  font-family: var(--font-display);
  color: var(--color-adobe-light);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-s);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li + li {
  margin-top: 0.35rem;
}

.site-footer a {
  color: var(--color-cream);
  text-decoration-color: rgba(251, 244, 233, 0.45);
}

.site-footer a:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

.footer-links a,
.footer-visit a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  gap: 0.5em;
}

.footer-sublinks {
  margin: 0 0 0.35rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(216, 179, 140, 0.35);
}

.footer-sublinks li + li {
  margin-top: 0;
}

.footer-sublinks a {
  min-height: 2.25rem;
  font-size: var(--step--1);
  color: var(--color-text-on-dark-muted);
}

.footer-sublinks a:hover {
  color: #fff;
}

.footer-visit address {
  font-style: normal;
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-xs);
}

.footer-visit strong {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--color-adobe-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--step--1);
  text-wrap: balance;
}

.social-list {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.social-list li + li {
  margin-top: 0;
}

.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--color-adobe);
  border-radius: var(--radius-m);
  color: var(--color-cream);
  text-decoration: none;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.social-list a:hover {
  background: var(--color-adobe);
  color: var(--color-espresso-deep);
  transform: translateY(-2px);
}

.social-list svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(216, 179, 140, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  align-items: center;
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--color-text-on-dark-muted);
}

.footer-bottom p {
  margin: 0;
}

/* Back to top ----------------------------------------------------------- */

.to-top {
  position: fixed;
  right: var(--space-s);
  bottom: calc(var(--actionbar-h) + var(--space-s) + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.875rem;
  height: 2.875rem;
  background: var(--color-walnut);
  color: #fff;
  border: 2px solid var(--color-walnut-ink);
  border-radius: 50%;
  box-shadow: var(--shadow-m);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--color-walnut-deep);
}

/* 17. Contact page ======================================================= */

.page-hero {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--space-xl) + 1rem);
  background: var(--color-espresso-deep);
  color: var(--color-text-on-dark);
  overflow: hidden;
  border-bottom: 3px solid var(--color-adobe);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      92deg,
      rgba(43, 29, 25, 0.95) 0%,
      rgba(43, 29, 25, 0.9) 58%,
      rgba(43, 29, 25, 0.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(43, 29, 25, 0.55) 0%,
      rgba(43, 29, 25, 0.72) 100%
    );
}

.page-hero h1 {
  color: #fff;
  font-size: var(--step-4);
}

/* The eyebrow is small bold text, so it gets the lightest adobe tint to
   clear 4.5:1 even where the photograph behind the scrim is brightest. */
.page-hero .eyebrow {
  color: #ecd6ba;
}

.page-hero__inner {
  max-width: 44rem;
}

.page-hero .lead {
  color: #efe2d2;
}

.page-hero .status {
  margin-top: var(--space-m);
}

.contact-grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68em) {
  .contact-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-m);
  background: var(--color-cream);
  border: 2px solid var(--color-rule-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-s);
  background: var(--color-sand);
  border: 2px solid var(--color-walnut);
  border-radius: 50% 50% var(--radius-s) var(--radius-s) / 42% 42%
    var(--radius-s) var(--radius-s);
}

.contact-card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: var(--color-walnut-deep);
}

.contact-card h3 {
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}

.contact-card address {
  font-style: normal;
}

.contact-card p,
.contact-card address {
  color: var(--color-text-muted);
  margin-bottom: var(--space-s);
}

.contact-card .link-arrow {
  margin-top: auto;
  align-self: flex-start;
}

.hours-layout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 56em) {
  .hours-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.hours-table {
  margin-top: var(--space-m);
  width: 100%;
  border-collapse: collapse;
  background: var(--color-cream);
  border: 2px solid var(--color-walnut);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.hours-table caption {
  caption-side: top;
  padding: var(--space-s) var(--space-m);
  background: var(--color-walnut);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  text-align: left;
}

.hours-table th,
.hours-table td {
  padding: 0.75rem var(--space-m);
  text-align: left;
  border-top: 1px solid var(--color-rule);
}

.hours-table thead th {
  border-top: 0;
  background: var(--color-sand);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-walnut-deep);
}

.hours-table tbody th {
  font-weight: 700;
}

.hours-table td {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.hours-aside .frame {
  margin-bottom: var(--space-m);
}

/* 18. Delivery areas ===================================================== */

.area-grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .area-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 72em) {
  .area-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.area-card {
  display: flex;
  flex-direction: column;
  background: var(--color-cream);
  border: 2px solid var(--color-walnut);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}

.area-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 2px solid var(--color-walnut);
}

.area-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-m);
}

.area-card h3 {
  font-size: var(--step-2);
  margin-bottom: 0.3rem;
}

.area-card__distance {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}

.area-card p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-s);
}

.area-card .link-arrow {
  margin-top: auto;
  align-self: flex-start;
}

/* Radius explainer ------------------------------------------------------ */

.radius {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 56em) {
  .radius {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.radius__dial {
  position: relative;
  max-width: 22rem;
  margin-inline: auto;
  padding: var(--space-m);
  background: var(--color-cream);
  border: 2px solid var(--color-walnut);
  border-radius: 50%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-m);
}

.band--dark .radius__dial {
  background: rgba(216, 179, 140, 0.08);
  border-color: var(--color-adobe);
}

.radius__dial svg {
  width: 100%;
  height: auto;
}

.radius__miles {
  position: absolute;
  inset: auto 0 18% 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--color-walnut-deep);
  pointer-events: none;
}

.band--dark .radius__miles {
  color: var(--color-adobe-light);
}

.zone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--space-m);
  padding: 0;
}

.zone-list li {
  padding: 0.4rem 0.8rem;
  background: var(--color-cream);
  border: 1px solid var(--color-rule-strong);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-text);
}

.band--sand .zone-list li {
  background: var(--color-ivory);
}

.band--dark .zone-list li {
  background: rgba(251, 244, 233, 0.08);
  border-color: var(--color-rule-dark);
  color: var(--color-cream);
}

/* A plain, honest note — used for the edges that fall outside 10 miles. */
.note {
  display: flex;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  background: var(--color-cream);
  border-left: 6px solid var(--color-adobe);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.band--sand .note {
  background: var(--color-ivory);
}

.band--dark .note {
  background: rgba(251, 244, 233, 0.07);
  color: var(--color-text-on-dark-muted);
}

.note svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.15rem;
  fill: var(--color-walnut);
}

.band--dark .note svg {
  fill: var(--color-adobe-light);
}

.note strong {
  color: var(--color-text);
}

.band--dark .note strong {
  color: var(--color-cream);
}

/* Two-column "about the area" block, mirrored on alternate pages. */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 56em) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .split--mediaRight .split__media {
    order: 2;
  }
}

.split__media {
  max-width: 34rem;
  margin-inline: auto;
  width: 100%;
}

/* Highlight pulled from the approved copy: "you're in the right place". */
.pitch {
  padding: var(--space-m) var(--space-l);
  background: var(--color-cream);
  border: 2px solid var(--color-walnut);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}

.band--sand .pitch {
  background: var(--color-ivory);
}

.pitch p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-espresso);
}

.pitch p + p {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-top: var(--space-s);
}

.breadcrumb {
  padding-block: var(--space-s);
  background: var(--color-sand);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--step--1);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-muted);
}

.breadcrumb li:not(:last-child)::after {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 1px;
  background: var(--color-adobe);
  transform: rotate(45deg);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 600;
}

.breadcrumb [aria-current="page"] {
  font-weight: 700;
  color: var(--color-text);
}

/* 19. Ordering direct vs. the marketplaces =============================== */

.fee-compare {
  display: grid;
  gap: var(--space-l);
  /* minmax(0, …) rather than 1fr: without it a grid item's automatic minimum
     size lets the table's nowrap cells push the card past its track, which
     overflows the page at 320px. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 54em) {
  .fee-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fee-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  border: 2px solid var(--color-walnut);
  background: var(--color-cream);
  box-shadow: var(--shadow-s);
}

.band--sand .fee-card {
  background: var(--color-ivory);
}

.fee-card h3 {
  font-size: var(--step-1);
  margin-bottom: 0.35rem;
}

.fee-card__total {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-s);
  color: var(--color-walnut-deep);
}

.fee-card__total strong {
  font-size: 1.35em;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* The marketplace side is the heavy one — dark, so it reads as the weight
   it describes. */
.fee-card--market {
  background: var(--color-espresso);
  border-color: var(--color-espresso-deep);
  color: var(--color-text-on-dark);
}

.band--sand .fee-card--market {
  background: var(--color-espresso);
}

.fee-card--market h3 {
  color: var(--color-cream);
}

.fee-card--market .fee-card__total {
  color: var(--color-adobe-light);
}

.fee-card--direct {
  border-color: var(--color-sage-deep);
  border-width: 3px;
}

.fee-card--direct .fee-card__total {
  color: var(--color-sage-deep);
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-s);
  font-size: var(--step--1);
}

.fee-table th,
.fee-table td {
  padding: 0.55rem 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--color-rule-dark);
}

.fee-table thead th {
  border-top: 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-adobe-light);
  padding-bottom: 0.4rem;
}

.fee-table tbody th {
  font-weight: 700;
  padding-right: 0.75rem;
}

/* The "who pays it" column may stay on one line once there is room for it. */
@media (min-width: 26em) {
  .fee-table tbody th {
    white-space: nowrap;
  }
}

.fee-table td:last-child,
.fee-table th:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 0.5rem;
}

.fee-table tfoot th,
.fee-table tfoot td {
  border-top: 2px solid var(--color-adobe);
  font-weight: 800;
  color: var(--color-cream);
  padding-top: 0.7rem;
}

/* Decorative weight bar under each figure. Never the only cue — the
   percentage is always printed next to it. */
.bar {
  display: block;
  height: 5px;
  margin-top: 0.3rem;
  border-radius: 3px;
  background: var(--color-adobe);
  opacity: 0.85;
}

.bar--30 {
  width: 62%;
}
.bar--15 {
  width: 31%;
}
.bar--3 {
  width: 7%;
}
.bar--48 {
  width: 100%;
  height: 7px;
  background: var(--color-adobe-light);
  opacity: 1;
}

.fee-card--direct .bar {
  background: var(--color-sage);
}

.fee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}

.fee-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  line-height: 1.5;
}

.fee-list svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.22rem;
  fill: var(--color-sage-deep);
}

.fee-note {
  margin-top: auto;
  padding-top: var(--space-s);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.fee-card--market .fee-note {
  color: var(--color-text-on-dark-muted);
}

/* Cross-links to the other marketplace pages. */
.marketplace-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
}

.marketplace-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  background: var(--color-cream);
  border: 2px solid var(--color-rule-strong);
  border-radius: var(--radius-m);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--color-espresso);
  text-decoration: none;
}

.band--sand .marketplace-list a {
  background: var(--color-ivory);
}

.marketplace-list a:hover {
  background: var(--color-sand);
  border-color: var(--color-walnut);
  color: var(--color-walnut-ink);
}

/* Trademark / accuracy small print. */
.smallprint {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-rule);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.band--dark .smallprint {
  border-top-color: var(--color-rule-dark);
  color: var(--color-text-on-dark-muted);
}

.gratitude {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  background: var(--color-cream);
  border: 2px solid var(--color-walnut);
  border-left-width: 8px;
  border-radius: 0 var(--radius-l) var(--radius-l) 0;
  box-shadow: var(--shadow-s);
}

.band--sand .gratitude {
  background: var(--color-ivory);
}

.gratitude p:first-child {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.gratitude p {
  margin: 0;
  color: var(--color-text-muted);
}

/* 20. Motion & reveals =================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  .btn:hover,
  .social-list a:hover {
    transform: none;
  }
}

@media print {
  .site-header,
  .action-bar,
  .to-top,
  .map-frame,
  .hero__media,
  .final-cta__media {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}