/* ==========================================================================
   El Carnitas — A Taste of Mexico
   Static site stylesheet. Mobile-first, no frameworks, no build step.

   Contents
   1.  Design tokens
   2.  Base elements
   3.  Utilities
   4.  Buttons
   5.  Header and navigation
   6.  Decorative bands (serape, papel picado)
   7.  Hero
   8.  Quick info strip
   9.  Sections and headings
   10. Featured menu cards
   11. Menu variety highlights
   12. Location, hours and status
   13. Contact page components
   14. Call-to-action sign
   15. Footer
   16. Mobile order bar
   17. Motion and reveal
   18. Print
   ========================================================================== */

/* 1. Design tokens ======================================================== */

:root {
  /* Official brand colors */
  --brand-orange: #FA4D09;
  --brand-blue: #01369C;
  --brand-red: #D30112;
  --brand-green: #029521;

  /* Rustic supporting neutrals */
  --paper: #FFF7E8;
  --kraft: #F3E3C3;
  --sand: #E7C58E;
  --wood: #6B3F24;
  --ink: #26170F;
  --white: #FFFFFF;

  /* Accessible text variations (WCAG AA on paper) */
  --blue-deep: #012A7A;
  --green-text: #017A1B;
  --red-text: #B00010;

  /* Focus rings: blue on light surfaces, warm yellow on blue surfaces */
  --focus-light: #01369C;
  --focus-dark: #FFC94D;

  /* Typography */
  --font-display: Rockwell, "Rockwell Nova", "Roboto Slab", "American Typewriter", Georgia, serif;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --step-3: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --step-4: clamp(2rem, 1.4rem + 3vw, 3.75rem);

  /* Layout */
  --container: 74rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-space: clamp(3rem, 7vw, 5.5rem);
  --order-bar-height: 4.75rem;

  /* Shapes: slightly irregular, hand-cut sign corners */
  --radius-sign: 10px 18px 12px 16px / 16px 10px 18px 12px;
  --radius-btn: 8px 12px 8px 12px / 12px 8px 12px 8px;
  --border-thick: 3px solid var(--ink);

  /* Textures built from gradients (no raster files) */
  --texture-paper:
    radial-gradient(circle at 20% 30%, rgb(107 63 36 / 0.06) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 75%, rgb(107 63 36 / 0.045) 0 1px, transparent 1.6px);
  --texture-paper-size: 19px 19px, 31px 31px;

  --texture-kraft:
    repeating-linear-gradient(0deg, rgb(107 63 36 / 0.035) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 30% 40%, rgb(107 63 36 / 0.08) 0 1px, transparent 1.6px);
  --texture-kraft-size: auto, 23px 23px;

  --texture-weave:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.035) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.05) 0 2px, transparent 2px 11px);

  --serape: repeating-linear-gradient(
    90deg,
    var(--brand-blue) 0 16px,
    var(--sand) 16px 20px,
    var(--brand-orange) 20px 36px,
    var(--paper) 36px 39px,
    var(--brand-red) 39px 55px,
    var(--sand) 55px 59px,
    var(--brand-green) 59px 75px,
    var(--paper) 75px 78px
  );
}

/* 2. Base elements ======================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--texture-paper);
  background-size: var(--texture-paper-size);
  -webkit-font-smoothing: antialiased;
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-blue);
  text-wrap: balance;
}

h2 {
  font-size: var(--step-3);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0.05em 0.05em 0 var(--sand);
}

h3 {
  font-size: var(--step-1);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--brand-blue);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

address {
  font-style: normal;
}

main:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--focus-light);
  outline-offset: 3px;
}

/* Dark (blue or wood) surfaces use the warm focus ring */
.site-header :focus-visible,
.info-strip :focus-visible,
.section--blue :focus-visible,
.site-footer :focus-visible,
.order-bar :focus-visible {
  outline-color: var(--focus-dark);
}

/* 3. Utilities ============================================================ */

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

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

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  color: var(--brand-blue);
  background: var(--paper);
  border: var(--border-thick);
  border-radius: var(--radius-btn);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35em 0.9em;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--brand-orange);
  border-radius: 4px 10px 4px 10px;
  box-shadow: 3px 3px 0 var(--brand-orange);
}

.fine-print {
  font-size: var(--step--1);
  color: var(--wood);
}

/* 4. Buttons ============================================================== */

.btn {
  --btn-bg: var(--brand-blue);
  --btn-fg: var(--white);
  --btn-shadow: var(--ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  max-width: 100%;
  min-height: 48px;
  padding: 0.7em 1.3em;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--border-thick);
  border-radius: var(--radius-btn);
  box-shadow: 4px 4px 0 var(--btn-shadow);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--btn-shadow);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--btn-shadow);
}

.btn--primary {
  --btn-bg: var(--brand-blue);
  --btn-fg: var(--white);
}

.btn--secondary {
  --btn-bg: var(--brand-red);
  --btn-fg: var(--white);
}

.btn--order {
  --btn-bg: var(--brand-orange);
  --btn-fg: var(--ink);
}

.btn--light {
  --btn-bg: var(--paper);
  --btn-fg: var(--brand-blue);
}

.btn--lg {
  min-height: 56px;
  padding: 0.85em 1.6em;
  font-size: var(--step-1);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
}

@media (max-width: 29.99em) {
  .button-row > .btn {
    width: 100%;
  }
}

/* 5. Header and navigation =============================================== */

.site-header {
  position: relative;
  z-index: 50;
  color: var(--white);
  background-color: var(--brand-blue);
  background-image: var(--texture-weave);
}

.site-header::after {
  content: "";
  display: block;
  height: 8px;
  background: var(--serape);
  border-top: 2px solid var(--ink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 4.5rem;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  margin-right: auto;
  color: var(--white);
  text-decoration: none;
}

.brand__badge {
  flex: none;
  padding: 3px;
  background: var(--paper);
  border: 2px solid var(--brand-orange);
  border-radius: 12px;
}

.brand__logo {
  width: 3.25rem;
  height: auto;
}

.brand__text {
  display: none;
  line-height: 1.1;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--ink);
}

.brand__tagline {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
}

@media (min-width: 26.25em) {
  .brand__text {
    display: block;
  }
}

.btn--header {
  min-height: 44px;
  padding: 0.5em 0.95em;
  font-size: 0.875rem;
  box-shadow: 3px 3px 0 var(--ink);
}

.btn--header .icon {
  display: none;
}

@media (max-width: 22.49em) {
  .btn--header {
    padding-inline: 0.7em;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

@media (min-width: 25em) {
  .btn--header .icon {
    display: block;
  }
}

.nav-toggle {
  display: none;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
}

.site-nav__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--brand-orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

.site-nav__link[aria-current="page"] {
  color: var(--sand);
  text-decoration: underline;
  text-decoration-color: var(--sand);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

/* "Areas We Deliver" submenu: listed inside the mobile panel, a dropdown on desktop */
.site-nav__parent {
  position: relative;
}

.submenu-toggle {
  display: none;
}

.site-nav__submenu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
  color: var(--brand-blue);
}

.site-nav__link.is-section-current {
  color: var(--sand);
  text-decoration: underline;
  text-decoration-color: var(--sand);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

/* Mobile navigation (only when JavaScript is available) */
@media (max-width: 63.99em) {
  .js .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--white);
    background: transparent;
    border: 2px solid var(--paper);
    border-radius: var(--radius-btn);
    cursor: pointer;
  }

  .js .nav-toggle .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .nav-toggle__close,
  .nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: block;
  }

  .js .site-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1rem;
    background-color: var(--paper);
    background-image: var(--texture-paper);
    background-size: var(--texture-paper-size);
    border-bottom: 4px solid var(--ink);
    box-shadow: 0 10px 0 rgb(38 23 15 / 0.12);
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .js .site-nav.is-open .site-nav__list {
    display: flex;
  }

  .js .site-nav__list > li + li {
    border-top: 2px dashed var(--sand);
  }

  .js .site-nav__link {
    display: flex;
    min-height: 56px;
    padding-inline: 0.75rem;
    font-size: var(--step-1);
    color: var(--brand-blue);
  }

  .js .site-nav__link[aria-current="page"] {
    color: var(--brand-blue);
    text-decoration-color: var(--brand-orange);
    background: var(--kraft);
    border-left: 6px solid var(--brand-orange);
  }

  .js .site-nav__link.is-section-current {
    color: var(--brand-blue);
    text-decoration-color: var(--brand-orange);
  }

  .js .site-nav__submenu {
    display: block;
    margin: 0 0 0.75rem 0.75rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--sand);
  }

  .js .site-nav__sublink {
    min-height: 48px;
    padding-inline: 0.75rem;
    font-size: var(--step-0);
  }

  .js .site-nav__sublink[aria-current="page"] {
    background: var(--kraft);
    box-shadow: inset 5px 0 0 var(--brand-orange);
  }

  .js .site-nav__list :focus-visible {
    outline-color: var(--focus-light);
    outline-offset: -3px;
  }

  /* Without JavaScript the links simply wrap under the logo */
  .no-js .site-header__inner {
    flex-wrap: wrap;
  }
}

@media (min-width: 64em) {
  .site-header__inner {
    gap: 0.75rem;
    min-height: 5.5rem;
  }

  .brand__logo {
    width: 3.5rem;
  }

  .brand__name {
    font-size: 1.125rem;
    white-space: nowrap;
  }

  .site-nav__list {
    flex-wrap: nowrap;
  }

  .site-nav__link {
    padding-inline: 0.6rem;
    white-space: nowrap;
  }

  .btn--header {
    white-space: nowrap;
  }

  .site-nav__list {
    align-items: center;
  }

  .site-nav__parent {
    display: flex;
    align-items: center;
  }

  .site-nav__parent > .site-nav__link {
    padding-right: 0.15rem;
  }

  .submenu-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--white);
    background: transparent;
    border: 0;
    border-radius: var(--radius-btn);
    cursor: pointer;
  }

  .submenu-toggle:hover {
    background: rgb(255 255 255 / 0.14);
  }

  .submenu-toggle .icon {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.2s ease;
  }

  .submenu-toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }

  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 14rem;
    padding: 0.5rem;
    background-color: var(--paper);
    background-image: var(--texture-paper);
    background-size: var(--texture-paper-size);
    border: var(--border-thick);
    border-radius: var(--radius-sign);
    box-shadow: 5px 5px 0 var(--brand-orange);
  }

  .site-nav__parent:hover > .site-nav__submenu,
  .site-nav__parent.is-open > .site-nav__submenu,
  .no-js .site-nav__parent:focus-within > .site-nav__submenu {
    display: block;
  }

  .site-nav__sublink {
    padding: 0.5rem 0.85rem;
    border-radius: 6px;
  }

  .site-nav__sublink:hover,
  .site-nav__sublink[aria-current="page"] {
    background: var(--kraft);
  }

  .site-nav__sublink:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand-orange);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.3em;
  }

  .site-nav__sublink[aria-current="page"] {
    box-shadow: inset 5px 0 0 var(--brand-orange);
  }

  .site-nav__submenu :focus-visible {
    outline-color: var(--focus-light);
    outline-offset: -2px;
  }
}

@media (min-width: 80em) {
  .site-header__inner {
    gap: 1.25rem;
  }

  .brand__logo {
    width: 4.25rem;
  }

  .brand__name {
    font-size: 1.375rem;
  }

  .site-nav__link {
    padding-inline: 0.85rem;
  }

  .btn--header {
    font-size: 0.9375rem;
    padding-inline: 1.15em;
  }
}

/* 6. Decorative bands ===================================================== */

.serape-band {
  height: 10px;
  background: var(--serape);
  border-block: 2px solid var(--ink);
}

/* Papel-picado bunting drawn as an inline SVG data URI (no raster file) */
.papel-picado {
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='40' viewBox='0 0 320 40'%3E%3Cpath d='M0 3.5H320' stroke='%2326170F' stroke-width='1.5'/%3E%3Cg fill-rule='evenodd' stroke='%2326170F' stroke-width='1'%3E%3Cpath fill='%23FA4D09' d='M8 3h64v29l-8 7-8-7-8 7-8-7-8 7-8-7-8 7-8-7zM40 11l6 7-6 7-6-7zM22 14l3 3-3 3-3-3zM58 14l3 3-3 3-3-3z'/%3E%3Cpath fill='%2301369C' d='M88 3h64v29l-8 7-8-7-8 7-8-7-8 7-8-7-8 7-8-7zM120 11l6 7-6 7-6-7zM102 14l3 3-3 3-3-3zM138 14l3 3-3 3-3-3z'/%3E%3Cpath fill='%23029521' d='M168 3h64v29l-8 7-8-7-8 7-8-7-8 7-8-7-8 7-8-7zM200 11l6 7-6 7-6-7zM182 14l3 3-3 3-3-3zM218 14l3 3-3 3-3-3z'/%3E%3Cpath fill='%23D30112' d='M248 3h64v29l-8 7-8-7-8 7-8-7-8 7-8-7-8 7-8-7zM280 11l6 7-6 7-6-7zM262 14l3 3-3 3-3-3zM298 14l3 3-3 3-3-3z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 320px 40px;
}

/* 7. Hero ================================================================= */

.hero {
  position: relative;
  overflow-x: clip;
}

.hero__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem);
}

.hero__title {
  margin-bottom: 0.4em;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--paper), 0.07em 0.07em 0 var(--brand-orange);
}

.hero__lead {
  max-width: 36rem;
  font-size: var(--step-1);
  line-height: 1.55;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

@media (max-width: 29.99em) {
  .hero__actions > .btn {
    width: 100%;
  }
}

.ribbon-badge {
  margin: 2rem 0 0;
}

.ribbon-badge span {
  display: inline-block;
  padding: 0.5em 2.1em;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--brand-red);
  border-block: 2px dashed rgb(255 255 255 / 0.6);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.9em) 50%, 100% 100%, 0 100%, 0.9em 50%);
  transform: rotate(-2deg);
}

.hero__visual {
  position: relative;
  justify-self: center;
  width: min(100%, 22rem);
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(250 77 9 / 0.16) 0deg 7.5deg,
    rgb(231 197 142 / 0.34) 7.5deg 15deg
  );
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 71%);
  mask: radial-gradient(circle, #000 52%, transparent 71%);
}

.hero__logo {
  position: relative;
  width: 100%;
  transition: transform 0.35s ease;
}

.hero__visual:hover .hero__logo {
  transform: rotate(-2deg) scale(1.02);
}

@media (min-width: 56.25em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .hero__visual {
    width: min(100%, 30rem);
  }
}

/* Contact hero variant */
.hero--contact .hero__visual {
  width: min(100%, 17rem);
}

@media (min-width: 56.25em) {
  .hero--contact .hero__visual {
    width: min(100%, 23rem);
  }
}

.today-card {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  max-width: 30rem;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 5px 5px 0 var(--brand-blue);
}

.today-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
  background: var(--brand-orange);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.today-card__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood);
}

.today-card__hours {
  margin: 0.15rem 0 0.6rem;
  font-size: var(--step-1);
  font-weight: 700;
}

/* 8. Quick info strip ===================================================== */

.info-strip {
  color: var(--white);
  background-color: var(--brand-blue);
  background-image: var(--texture-weave);
  border-block: 3px solid var(--ink);
}

.info-strip__grid {
  display: grid;
  gap: 1.25rem 2rem;
  margin: 0;
  padding-block: 1.75rem;
  list-style: none;
}

@media (min-width: 35em) {
  .info-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .info-strip__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.info-item {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.info-item__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
  background: var(--brand-orange);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
}

.info-item__label {
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
}

.info-item__value {
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
}

.info-item__value a {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--white);
}

.info-item .status {
  margin-top: 0.5rem;
}

/* 9. Sections and headings ================================================ */

.section {
  position: relative;
  padding-block: var(--section-space);
}

.section--kraft {
  background-color: var(--kraft);
  background-image: var(--texture-kraft);
  background-size: var(--texture-kraft-size);
  border-block: 3px solid var(--ink);
}

.section--blue {
  color: var(--paper);
  background-color: var(--brand-blue);
  background-image: var(--texture-weave);
}

.section--blue::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--serape);
  border-bottom: 2px solid var(--ink);
}

.section--blue h2 {
  color: var(--white);
  text-shadow: 0.05em 0.05em 0 var(--ink);
}

.section-heading {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.section-heading p:last-child {
  margin-bottom: 0;
}

.section-lead {
  max-width: 40rem;
  font-size: var(--step-1);
}

.section-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.section-footer .fine-print {
  max-width: 38rem;
  margin: 0;
}

/* 10. Featured menu cards ================================================= */

.menu-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.menu-card {
  --card-accent: var(--brand-orange);

  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 6px 6px 0 var(--card-accent);
}

.menu-card--blue { --card-accent: var(--brand-blue); }
.menu-card--red { --card-accent: var(--brand-red); }
.menu-card--green { --card-accent: var(--brand-green); }

.menu-card__art {
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background-color: var(--sand);
  background-color: color-mix(in srgb, var(--card-accent) 16%, var(--paper));
  background-image: repeating-linear-gradient(
    -45deg,
    rgb(255 255 255 / 0.35) 0 6px,
    transparent 6px 14px
  );
  border-bottom: var(--border-thick);
}

.menu-card__art svg {
  width: 6rem;
  height: 6rem;
}

.menu-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.35rem 1.5rem;
}

.menu-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.menu-card__title {
  margin: 0;
  font-size: var(--step-2);
  text-transform: uppercase;
}

.menu-card__price {
  flex: none;
  margin: 0.1rem 0 0;
  padding: 0.2em 0.65em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--white);
  background: var(--brand-red);
  border: 2px solid var(--ink);
  border-radius: 4px 8px 4px 8px;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-3deg);
}

.menu-card__portion {
  align-self: flex-start;
  margin: 0.75rem 0 0.9rem;
  padding: 0.15em 0.6em;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood);
  border: 2px dashed var(--sand);
  border-radius: 4px;
}

.menu-card__desc {
  margin: 0;
}

/* 11. Menu variety highlights ============================================= */

.variety__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.variety__intro {
  max-width: 46rem;
}

.variety__intro p {
  font-size: var(--step-1);
}

.highlight-list {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 56.25em) {
  .highlight-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.highlight {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--texture-paper);
  background-size: var(--texture-paper-size);
  border: var(--border-thick);
  border-left: 10px solid var(--brand-orange);
  border-radius: var(--radius-sign);
  box-shadow: 5px 5px 0 var(--ink);
}

.highlight svg {
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.9rem;
}

.highlight h3 {
  font-size: var(--step-1);
  text-transform: uppercase;
}

.highlight p {
  margin: 0;
}

/* 12. Location, hours and status ========================================== */

.location__grid,
.hours-section__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 60em) {
  .location__grid,
  .hours-section__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.address-sign {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  max-width: 26rem;
  margin: 1.5rem 0 1.75rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.35;
  background: var(--white);
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 5px 5px 0 var(--brand-orange);
}

.address-sign .icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.1rem;
  color: var(--brand-red);
}

.hours-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 7px 7px 0 var(--brand-blue);
}

.hours-card__title {
  font-size: var(--step-2);
  text-transform: uppercase;
}

.hours-table {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: collapse;
}

.hours-table th,
.hours-table td {
  padding: 0.75rem 0.6rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 2px dashed var(--sand);
}

.hours-table tbody tr:last-child th,
.hours-table tbody tr:last-child td {
  border-bottom: 0;
}

.hours-table th {
  font-family: var(--font-display);
  font-weight: 700;
}

.hours-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hours-table tr.is-today th,
.hours-table tr.is-today td {
  font-weight: 800;
  background: color-mix(in srgb, var(--brand-orange) 14%, var(--white));
}

.hours-table tr.is-today th {
  box-shadow: inset 6px 0 0 var(--brand-orange);
}

.today-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1em 0.5em;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--ink);
  background: var(--brand-orange);
  border: 2px solid var(--ink);
  border-radius: 4px;
}

.hours-timezone {
  margin: 1rem 0 0;
  font-size: var(--step--1);
  color: var(--wood);
}

/* Live open/closed status — text always states Open or Closed */
.status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  margin: 0;
  padding: 0.35em 0.9em;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 1.1em;
}

.status::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 0.7em;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.status strong {
  font-weight: 800;
}

.status--open {
  color: var(--green-text);
  border-color: var(--brand-green);
}

.status--open::before {
  background: currentColor;
}

.status--closed {
  color: var(--red-text);
  border-color: var(--brand-red);
}

.status--closed::before {
  background: transparent;
}

.hours-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 34rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 2px dashed var(--wood);
  border-radius: var(--radius-sign);
}

.hours-note .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  color: var(--brand-red);
}

/* 13. Contact page components ============================================= */

.contact-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

  .contact-grid > li:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60em) {
  .contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.contact-card {
  --card-accent: var(--brand-blue);

  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 1.5rem 1.6rem;
  background: var(--paper);
  border: var(--border-thick);
  border-top: 12px solid var(--card-accent);
  border-radius: var(--radius-sign);
  box-shadow: 6px 6px 0 var(--ink);
}

.contact-card--orange { --card-accent: var(--brand-orange); }
.contact-card--red { --card-accent: var(--brand-red); }

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: -0.25rem 0 1rem;
  color: var(--ink);
  background: var(--sand);
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 50% 50%;
}

.contact-card__icon .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.contact-card h3 {
  font-size: var(--step-2);
  text-transform: uppercase;
}

.contact-card__value {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.contact-card__address {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.35;
}

.contact-card .button-row {
  margin-top: auto;
}

.contact-card .btn {
  flex: 1 1 11rem;
  padding-inline: 1em;
  font-size: 1rem;
}

.directions__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 56.25em) {
  .directions__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* 13b. Delivery area pages ================================================ */

.breadcrumb {
  padding-top: clamp(1rem, 3vw, 1.5rem);
  font-size: var(--step--1);
}

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

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.breadcrumb li + li::before {
  content: "›";
  content: "›" / "";
  font-weight: 700;
  color: var(--wood);
}

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

.breadcrumb [aria-current="page"] {
  font-weight: 800;
}

.hero--area .hero__inner {
  padding-top: clamp(0.75rem, 2vw, 1.5rem);
}

.best-callout {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  background: var(--white);
  border: var(--border-thick);
  border-left: 10px solid var(--brand-red);
  border-radius: var(--radius-sign);
  box-shadow: 4px 4px 0 var(--brand-green);
}

.best-callout strong {
  color: var(--red-text);
}

/* Hand-painted sign showing the area's distance from the truck */
.distance-sign {
  position: relative;
  container-type: inline-size;
  margin: 6% 3%;
  padding: 2.25rem 1.5rem 2rem;
  text-align: center;
  color: var(--ink);
  background-color: var(--brand-orange);
  background-image:
    radial-gradient(circle at 18px 18px, var(--ink) 0 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 18px) 18px, var(--ink) 0 4px, transparent 5px),
    radial-gradient(circle at 18px calc(100% - 18px), var(--ink) 0 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), var(--ink) 0 4px, transparent 5px);
  border: 4px solid var(--ink);
  border-radius: var(--radius-sign);
  box-shadow: 8px 8px 0 var(--brand-blue);
  transform: rotate(-2deg);
}

.distance-sign__label {
  margin: 0 0 0.35rem;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.distance-sign__city {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-size: clamp(1.4rem, 10cqi, 3rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--paper);
  overflow-wrap: anywhere;
}

.distance-sign__distance {
  max-width: 18rem;
  margin: 0.9rem auto 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}

.distance-sign__check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.4em 0.9em;
  font-size: var(--step--1);
  font-weight: 800;
  color: var(--green-text);
  background: var(--paper);
  border: 2px solid var(--brand-green);
  border-radius: 1.1em;
}

.distance-sign__check .icon {
  width: 1.1em;
  height: 1.1em;
}

/* Delivery radius diagram on the Areas We Deliver page */
.hero__visual--map {
  width: min(100%, 26rem);
}

.hero__visual--map::before {
  display: none;
}

.radius-map {
  margin: 0;
}

.radius-map svg {
  width: 100%;
  height: auto;
}

.radius-map text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  fill: var(--ink);
}

.radius-map .radius-map__small {
  font-size: 13px;
  font-weight: 600;
  fill: var(--wood);
}

.radius-map figcaption {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  text-align: center;
  color: var(--wood);
}

.tag {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 0.6rem;
  padding: 0.15em 0.6em;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood);
  border: 2px dashed var(--sand);
  border-radius: 4px;
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 60em) {
  .split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.prose > p {
  max-width: 42rem;
}

.prose .button-row {
  margin-top: 1.5rem;
}

.facts-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 7px 7px 0 var(--brand-orange);
}

.facts-card__title {
  font-size: var(--step-2);
  text-transform: uppercase;
}

.facts-list {
  margin: 0;
}

.facts-list > div {
  padding: 0.8rem 0;
  border-bottom: 2px dashed var(--sand);
}

.facts-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.facts-list dt {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wood);
}

.facts-list dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
}

.facts-list .status {
  margin-top: 0.5rem;
}

/* Menu board: a framed sign listing a few items with dotted price leaders */
.menu-board {
  margin: 3px;
  padding: clamp(0.9rem, 3vw, 2rem);
  background-color: var(--paper);
  background-image: var(--texture-paper);
  background-size: var(--texture-paper-size);
  border: 10px solid var(--wood);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 3px var(--ink), 9px 9px 0 3px var(--brand-blue);
}

.menu-board__title {
  padding-bottom: 0.6rem;
  font-size: var(--step-2);
  text-align: center;
  text-transform: uppercase;
  border-bottom: 3px double var(--sand);
}

.menu-board__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-board__item {
  padding: 1rem 0;
  border-bottom: 2px dashed var(--sand);
}

.menu-board__item:last-child {
  border-bottom: 0;
}

.menu-board__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.menu-board__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.menu-board__leader {
  flex: 1 1 1.5rem;
  min-width: 0.5rem;
  border-bottom: 3px dotted rgb(107 63 36 / 0.5);
}

.menu-board__price {
  flex: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--red-text);
}

.menu-board__portion {
  margin: 0.35rem 0 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood);
}

.menu-board__desc {
  margin: 0.25rem 0 0;
}

.menu-board .fine-print {
  margin: 0.75rem 0 0;
  text-align: center;
}

.section--blue a:not(.btn) {
  color: var(--white);
}

.delivery-panel > p {
  max-width: 46rem;
}

.delivery-panel .status {
  margin-top: 0.25rem;
}

.delivery-panel .button-row {
  margin-top: 1.75rem;
}

/* 13c. Order-direct pages (delivery marketplace comparisons) ============== */

.hero__visual--receipt {
  width: min(100%, 25rem);
}

/* Receipt-style fee card with a torn, zigzag bottom edge */
.fee-receipt-wrap {
  position: relative;
  margin: 6% 5%;
  filter: drop-shadow(7px 7px 0 var(--brand-red));
  transform: rotate(2deg);
}

.fee-receipt {
  padding: 1.75rem 1.5rem 2.75rem;
  font-family: "Courier New", Courier, monospace;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-bottom: 0;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}

.fee-receipt__title {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.fee-receipt__subtitle {
  margin: 0.25rem 0 1rem;
  font-size: var(--step--1);
  text-align: center;
  color: var(--wood);
}

.fee-receipt__lines {
  margin: 0;
  border-top: 2px dashed var(--ink);
}

.fee-receipt__lines > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 2px dashed rgb(38 23 15 / 0.35);
}

.fee-receipt__lines dt {
  font-weight: 600;
}

.fee-receipt__lines dd {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

.fee-receipt__lines .fee-receipt__total {
  font-size: var(--step-1);
  border-bottom: 4px double var(--ink);
}

.fee-receipt__total dd {
  color: var(--red-text);
}

.fee-receipt__direct {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-body);
  font-weight: 800;
  text-align: center;
  color: var(--green-text);
  background: var(--paper);
  border: 2px solid var(--brand-green);
  border-radius: 1.1em;
}

.fee-receipt__direct .icon {
  width: 1.1em;
  height: 1.1em;
}

/* Stacked percentage breakdown */
.fee-stack {
  display: grid;
  gap: 0.9rem;
  max-width: 40rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.fee-stack li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fee-stack__pct {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.25rem;
  height: 4.25rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--white);
  background: var(--brand-blue);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
}

.fee-stack__total .fee-stack__pct {
  background: var(--brand-red);
}

.fee-stack strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-transform: uppercase;
  color: var(--brand-blue);
}

.fee-stack__total strong {
  color: var(--red-text);
}

/* Worked example of fees on a real menu order */
.fee-example {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 7px 7px 0 var(--brand-blue);
}

.fee-example__title {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.fee-example__items {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  list-style: none;
  background: var(--paper);
  border: 2px dashed var(--sand);
  border-radius: 6px;
}

.fee-example__items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.2rem;
  font-weight: 600;
}

.fee-example__items data {
  white-space: nowrap;
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.fee-table th,
.fee-table td {
  padding: 0.6rem 0;
  font-weight: 500;
  text-align: left;
  vertical-align: top;
  border-bottom: 2px dashed var(--sand);
}

.fee-table td {
  padding-left: 1rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.fee-table__fee td {
  color: var(--red-text);
}

.fee-table__total th,
.fee-table__total td {
  font-weight: 800;
  border-bottom: 4px double var(--ink);
}

.fee-table__keep th,
.fee-table__keep td {
  border-bottom: 0;
}

.fee-example__direct {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 2px solid var(--brand-green);
  border-left-width: 8px;
  border-radius: 8px;
}

.fee-example__direct strong {
  color: var(--green-text);
}

/* "When you order direct" checklist card */
.direct-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--texture-paper);
  background-size: var(--texture-paper-size);
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 7px 7px 0 var(--brand-orange);
}

.direct-card h3 {
  font-size: var(--step-2);
  text-transform: uppercase;
}

.direct-list {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.direct-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.4;
}

.direct-list__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--ink);
  background: var(--brand-orange);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.direct-list__check .icon {
  width: 1rem;
  height: 1rem;
}

/* Frequently asked questions */
.faq-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 60em) {
  .faq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.faq-card {
  height: 100%;
  padding: 1.5rem;
  background: var(--paper);
  border: var(--border-thick);
  border-left: 10px solid var(--brand-green);
  border-radius: var(--radius-sign);
  box-shadow: 5px 5px 0 var(--ink);
}

.faq-card h3 {
  font-size: var(--step-1);
}

.faq-card p {
  margin: 0;
}

.cta__legal {
  max-width: 52rem;
  margin: 2rem auto 0;
  font-size: var(--step--1);
  text-align: center;
  color: var(--sand);
}

/* 13d. Feedback page ====================================================== */

.hero--feedback .hero__inner {
  align-items: start;
}

/* Give the review form half the hero on desktop so its star row fits */
@media (min-width: 56.25em) {
  .hero--feedback .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Card that hosts the third-party review form (OrderChop Reviews embed) */
.review-card {
  --card-pad: clamp(1.25rem, 3vw, 2rem);

  min-width: 0;
  padding: var(--card-pad);
  background: var(--white);
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 7px 7px 0 var(--brand-orange);
}

.review-card__title {
  font-size: var(--step-2);
  text-transform: uppercase;
}

.review-card__intro {
  margin-bottom: 1.25rem;
}

/* Reserve space so the page doesn't jump while the form loads, and let the
   widget use the card's full inner width (it brings its own padding) */
.review-card__embed {
  min-height: 22rem;
  margin-inline: calc(var(--card-pad) * -1);
}

.review-card__fallback,
.review-card__note {
  margin: 1rem 0 0;
  font-size: var(--step--1);
  color: var(--wood);
}

.review-card__fallback {
  padding: 0.9rem 1rem;
  font-weight: 600;
  background: var(--paper);
  border: 2px dashed var(--wood);
  border-radius: 8px;
}

/* 13e. Homepage reviews carousel (OrderChop Reviews embed) ================ */

/* Reserve roughly the carousel's rendered height (about 515–535px) so the
   page doesn't jump while it loads */
.reviews__carousel {
  min-height: 32rem;
}

.reviews .section-footer .button-row {
  justify-content: center;
}

/* 13f. Hero review badge (OrderChop Reviews "avatars" embed) ============== */

/* Reserve the badge's rendered height (about 60–64px) so nothing shifts */
.hero__proof {
  min-height: 4rem;
  margin-top: 1.5rem;
}

/* 13g. Photos ============================================================= */

/* Homepage gallery: square tiles with a caption plate */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.photo-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 5px 5px 0 var(--brand-orange);
}

.photo-grid li:nth-child(4n + 2) .photo-tile { box-shadow: 5px 5px 0 var(--brand-blue); }
.photo-grid li:nth-child(4n + 3) .photo-tile { box-shadow: 5px 5px 0 var(--brand-red); }
.photo-grid li:nth-child(4n + 4) .photo-tile { box-shadow: 5px 5px 0 var(--brand-green); }

.photo-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-bottom: var(--border-thick);
}

.photo-tile figcaption {
  padding: 0.6rem 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

/* Single photo inside a text column (area and order-direct pages) */
.photo-inline {
  max-width: 42rem;
  margin: 1.75rem 0 0;
}

.photo-inline img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border-thick);
  border-radius: var(--radius-sign);
  box-shadow: 6px 6px 0 var(--brand-orange);
}

.photo-inline figcaption {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--wood);
}

/* Featured photo on a blue section (contact page directions) */
.photo-feature {
  justify-self: center;
  width: min(100%, 26rem);
  margin: 0;
}

.photo-feature img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 4px solid var(--ink);
  border-radius: var(--radius-sign);
  box-shadow: 8px 8px 0 var(--brand-orange);
  transform: rotate(-1.5deg);
}

.photo-feature figcaption {
  margin-top: 1.1rem;
  font-weight: 700;
  text-align: center;
  color: var(--sand);
}

/* 14. Call-to-action sign ================================================= */

.cta {
  overflow-x: clip;
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 94px, rgb(0 0 0 / 0.35) 94px 97px),
    repeating-linear-gradient(180deg, rgb(0 0 0 / 0.08) 0 2px, transparent 2px 9px, rgb(255 255 255 / 0.04) 9px 10px, transparent 10px 23px),
    linear-gradient(90deg, rgb(0 0 0 / 0.2), transparent 15%, transparent 85%, rgb(0 0 0 / 0.2));
  border-top: 3px solid var(--ink);
}

.cta-sign {
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--ink);
  background-color: var(--brand-orange);
  background-image:
    radial-gradient(circle at 18px 18px, var(--ink) 0 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 18px) 18px, var(--ink) 0 4px, transparent 5px),
    radial-gradient(circle at 18px calc(100% - 18px), var(--ink) 0 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), var(--ink) 0 4px, transparent 5px);
  border: 4px solid var(--ink);
  border-radius: var(--radius-sign);
  box-shadow: 10px 10px 0 var(--brand-blue);
}

.cta-sign h2 {
  color: var(--ink);
  text-shadow: 0.05em 0.05em 0 var(--paper);
}

.cta-sign p {
  max-width: 34rem;
  margin-inline: auto;
  font-size: var(--step-1);
  font-weight: 500;
}

.cta-sign .button-row {
  justify-content: center;
  margin-top: 1.75rem;
}

/* 15. Footer ============================================================== */

.site-footer {
  color: var(--paper);
  background-color: var(--brand-blue);
  background-image: var(--texture-weave);
}

.site-footer a {
  color: var(--white);
}

.site-footer__grid {
  display: grid;
  gap: 2.25rem 2rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

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

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 70em) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 0.8fr 1.15fr 1.15fr;
  }

  .footer-brand {
    grid-column: auto;
  }
}

.footer-brand__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 4px;
  background: var(--paper);
  border: 2px solid var(--brand-orange);
  border-radius: 14px;
}

.footer-brand__badge img {
  width: 6rem;
}

.footer-brand__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--ink);
}

.footer-brand__tagline {
  margin: 0.2rem 0 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
}

.footer-brand p:last-child {
  max-width: 24rem;
}

.footer-title {
  margin-bottom: 0.9rem;
  padding-bottom: 0.4rem;
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  color: var(--sand);
  text-shadow: none;
  border-bottom: 2px dashed rgb(231 197 142 / 0.55);
}

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

.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-list a[aria-current="page"] {
  color: var(--sand);
  text-decoration-thickness: 0.16em;
}

.footer-sublist {
  margin: 0 0 0 0.35rem;
  padding: 0 0 0 0.9rem;
  list-style: none;
  border-left: 2px dashed rgb(231 197 142 / 0.55);
}

.footer-title--spaced {
  margin-top: 1.75rem;
}

.footer-hours {
  margin: 0;
}

.footer-hours div + div {
  margin-top: 0.6rem;
}

.footer-hours dt {
  font-weight: 700;
  color: var(--white);
}

.footer-hours dd {
  margin: 0;
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-link {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--brand-blue);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px 14px 10px 14px / 14px 10px 14px 10px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.site-footer .social-link {
  color: var(--brand-blue);
}

.social-link .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.social-link:hover {
  color: var(--ink);
  background: var(--brand-orange);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}

.site-footer__bottom {
  padding-block: 1.1rem;
  font-size: var(--step--1);
  background: var(--blue-deep);
  border-top: 2px solid var(--ink);
}

.site-footer__bottom p {
  margin: 0;
}

/* 16. Mobile order bar ==================================================== */

.order-bar {
  display: none;
}

@media (max-width: 44.99em) {
  .has-order-bar {
    scroll-padding-bottom: calc(var(--order-bar-height) + env(safe-area-inset-bottom, 0px) + 1rem);
  }

  .has-order-bar .site-footer__bottom {
    padding-bottom: calc(var(--order-bar-height) + env(safe-area-inset-bottom, 0px) + 1.1rem);
  }

  .order-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    gap: 0.75rem;
    padding: 0.7rem max(var(--gutter), env(safe-area-inset-right, 0px)) calc(0.7rem + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background-color: var(--brand-blue);
    border-top: 3px solid var(--ink);
    box-shadow: 0 -4px 0 rgb(38 23 15 / 0.15);
  }

  .order-bar .btn {
    min-height: 48px;
    padding-block: 0.6em;
    font-size: 0.9375rem;
    box-shadow: 3px 3px 0 var(--ink);
  }

  .order-bar .btn--order {
    flex: 1;
  }

  .js .order-bar {
    visibility: hidden;
    transform: translateY(110%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .js .order-bar.is-visible {
    visibility: visible;
    transform: none;
    transition: transform 0.25s ease, visibility 0s;
  }
}

/* 17. Motion and reveal =================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .btn:active,
  .social-link:hover,
  .hero__visual:hover .hero__logo {
    transform: none;
  }
}

/* 18. Print =============================================================== */

@media print {
  .site-header::after,
  .nav-toggle,
  .papel-picado,
  .serape-band,
  .order-bar,
  .skip-link {
    display: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  body,
  .section--blue,
  .info-strip,
  .site-header,
  .site-footer,
  .cta,
  .cta-sign {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
}