/* ==========================================================================
   Big Potato Company — Burleson, TX
   Design system
   ========================================================================== */

:root {
  --ink:        #241F20;
  --ink-soft:   #55504F;
  --ink-faint:  #8C8785;
  --red:        #EA2228;
  --red-dark:   #C4161C;
  --cream:      #F7F4F0;
  --line:       #E4DFDA;
  --white:      #FFFFFF;

  --wrap:       1200px;
  --gutter:     clamp(20px, 5vw, 64px);
  --section:    clamp(64px, 9vw, 128px);

  --display:    'Anton', 'Arial Narrow', sans-serif;
  --body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is required — the HTML width/height attributes act as
   presentational hints and would otherwise beat the aspect-ratio rules below. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  margin: 0;
}

h1 { font-size: clamp(46px, 9vw, 104px); }
h2 { font-size: clamp(34px, 5.5vw, 68px); }

/* For sections whose content is short enough that the full display size
   overwhelms it — see "Three ways to eat" on index.html. */
.h2--compact {
  font-size: clamp(26px, 3.2vw, 40px);
  margin-bottom: 28px;
}
h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.05; }

p { margin: 0 0 1em; }

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
}

.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
}

.eyebrow--muted { color: var(--ink-faint); }

/* --- Layout -------------------------------------------------------------- */

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

.section { padding-block: var(--section); }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); color: var(--white); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

.stack > * + * { margin-top: 24px; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-dark); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }

.btn--light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn--light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Header -------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Grows with the window up to 300px, but never below 210px on desktop so it
   stays readable; the six nav links still fit beside it at 901px. */
.header__logo img { width: clamp(210px, 23vw, 300px); height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}

.nav a:hover { border-bottom-color: var(--red); }
.nav a[aria-current="page"] { border-bottom-color: var(--red); }

.nav .btn { padding: 13px 26px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(56vh, 460px);
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

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

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,16,.28) 0%, rgba(20,16,16,.55) 55%, rgba(20,16,16,.85) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  width: 100%;
  padding: clamp(36px, 5vw, 60px) var(--gutter);
  color: var(--white);
}

/* Smaller and wider than the site-wide h1 so the headline sits on two lines
   instead of three — that line was most of the hero's height. */
.hero h1 {
  max-width: 20ch;
  font-size: clamp(38px, 6vw, 80px);
  text-shadow: 0 2px 24px rgba(0,0,0,.3);
}

.hero__sub {
  font-size: clamp(16px, 1.7vw, 20px);
  max-width: 46ch;
  margin: 16px 0 26px;
  color: rgba(255,255,255,.9);
}

/* Page hero (interior pages) */

.pagehead {
  padding-block: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}

.pagehead h1 { max-width: 16ch; }
.pagehead .lede { margin-top: 22px; }

/* Two-column page head — copy left, photo right. A modifier, not a change to
   .pagehead, because catering.html and menu.html use the plain version. */
.pagehead--split .pagehead__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

/* 4/5 matches the source portrait, so the frame crops almost nothing. */
.pagehead__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
}

/* The catering head photo is a square studio shot, so show it whole instead of
   cropping it to the 4:5 the other page heads use. */
.pagehead--catering .pagehead__media img { aspect-ratio: 1 / 1; }

@media (max-width: 860px) {
  .pagehead--split .pagehead__grid { grid-template-columns: 1fr; }
  /* photo above the copy reads oddly on a hiring page — keep it after */
  .pagehead__media { order: 2; }
}

/* --- Info bar ------------------------------------------------------------ */

.infobar {
  background: var(--ink);
  color: var(--white);
}

.infobar__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.infobar__item { display: flex; align-items: center; gap: 10px; }

.infobar a { text-decoration: none; }
.infobar a:hover { color: var(--red); }

/* "Burleson" label leading the bar, and Fort Worth pushed to the far end */
.infobar__label {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

.infobar__soon { margin-left: auto; }
/* Fort Worth label mirrors the red "Burleson" one, in the Fort Worth purple.
   A lighter tint of TCU's #4D1979, which is too dark to read on the ink bar. */
.infobar__label--fw { color: #A873EA; }
.infobar__soon a:hover .infobar__label--fw { color: #C7A3F3; }
.infobar__soon a { display: inline-flex; align-items: center; gap: 8px; }

/* --- "Coming soon" marks ---------------------------------------------------
   Used wherever Burleson contact info appears, to note Fort Worth. Outline
   only — never a red fill. --dark is for the ink info bar and footer. */

.soon-badge {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.soon-badge--dark {
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.85);
}

.soon-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
}

.soon-note a { text-decoration: none; }
.soon-note a:hover { text-decoration: underline; }

/* Eye-catching Fort Worth card. Ink panel with a red top rule — red stays a
   mark (rule + eyebrow), never the fill. */
.soon-callout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 22px;
  background: var(--ink);
  border-top: 4px solid #A873EA;
  border-radius: 3px;
  color: var(--white);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.soon-callout:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(36,31,32,.18); }
.soon-callout:focus-visible { outline: 2px solid #A873EA; outline-offset: 3px; }
.soon-callout__eyebrow {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #A873EA;
}
.soon-callout__title {
  display: block;
  font-family: var(--display); font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1; text-transform: uppercase; letter-spacing: .01em;
}
.soon-callout__cta {
  flex: none;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.soon-callout:hover .soon-callout__cta { color: var(--white); }
@media (prefers-reduced-motion: reduce) { .soon-callout { transition: none; } .soon-callout:hover { transform: none; } }

#visit { padding-block: clamp(40px, 4.5vw, 60px); }
#visit .stack > * + * { margin-top: 16px; }
#visit .lede { font-size: 17px; }
#visit .hours-list li { padding: 8px 0; }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #57C86E;
  flex: none;
}

/* --- Split (image + text) ------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

.split--flip .split__media { order: 2; }

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}

/* --- Slideshow -----------------------------------------------------------
   Auto-crossfading images in a .split__media slot. Used for "what we do" on
   index.html. Slides are stacked absolutely, so only one is ever visible and
   the container never reflows as it cycles.

   With no JS the first slide shows and nothing moves — the `:first-child`
   rule below is the fallback, and .is-ready hands control to the script. */

.slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
}

/* Portrait frame for upright phone photos, so a whole dish fits without
   cropping. Every slide in this frame is cropped to 3:4 — landscape shots
   added later will lose their sides. */
.slideshow--portrait { aspect-ratio: 3 / 4; }
.slideshow--square { aspect-ratio: 1 / 1; }

/* Landscape frame, 3:2, matching the studio food shots exactly so nothing
   is cropped off the sides or the top. */
.slideshow--wide { aspect-ratio: 3 / 2; }

/* slideshow in a split page head (menu.html) — cap it so the head stays short */
.pagehead__show { width: 100%; max-width: 380px; justify-self: end; }
@media (max-width: 860px) { .pagehead__show { justify-self: stretch; max-width: none; } }

/* Mascot beside the Locations page head. Decorative (empty alt). Sized to the
   headline block so it doesn't make the head taller. */
/* The mascot is taller than the copy beside him, so this head was running
   ~470px for two lines of text. Tighter padding + a smaller potato. Scoped to
   the modifier so the Menu and Jobs heads are untouched. */
.pagehead--mascot { padding-block: clamp(36px, 4vw, 56px); }
.pagehead--mascot .pagehead__grid { grid-template-columns: 1fr auto; }
.pagehead--mascot h1 { max-width: none; }
/* Flip lives on the wrapper so it doesn't fight the dance transform on the
   image. He faces into the page instead of off the edge. */
.pagehead__mascot { justify-self: end; transform: scaleX(-1); }
.pagehead__mascot img {
  width: clamp(116px, 12vw, 168px);
  height: auto;
  transform-origin: 50% 90%;
  /* Three bars of the same dance the Fort Worth mascot does, then he settles.
     4.8s total keeps it under the 5s mark, so it needs no pause control. */
  animation: soon-dance 1.6s ease-in-out 3 both;
}
.pagehead__mascot:hover img { animation: soon-dance 1.6s ease-in-out infinite; }
@media (max-width: 860px) { .pagehead__mascot { display: none; } }

.slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}

/* no-JS fallback: show the first slide */
.slideshow__img:first-child { opacity: 1; }

/* once the script is running, only .is-active is visible */
.slideshow.is-ready .slideshow__img { opacity: 0; }
.slideshow.is-ready .slideshow__img.is-active { opacity: 1; }

/* WCAG 2.2.2 — content that moves on its own needs a way to stop it. */
.slideshow__pause {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(36,31,32,.6);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}

.slideshow.is-ready .slideshow__pause { display: inline-flex; }
.slideshow__pause:hover { background: rgba(36,31,32,.85); }

.slideshow__pause:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.slideshow__pause svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slideshow__icon-play { display: none; }
.slideshow.is-paused .slideshow__icon-pause { display: none; }
.slideshow.is-paused .slideshow__icon-play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .slideshow__img { transition: none; }
}

/* For artwork that must not be cropped (flyers, menus) — keep the full frame. */
.split__media--natural img {
  aspect-ratio: auto;
  object-fit: contain;
  border: 1px solid var(--line);
}

/* --- Feature cards ------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.card { text-decoration: none; display: block; }

.card__media {
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 22px;
}

.card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}

.card:hover .card__media img { transform: scale(1.04); }

.card h3 { margin-bottom: 6px; }
.card p { color: var(--ink-soft); font-size: 16px; margin: 0; }

.card__price {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  color: var(--red) !important;
  margin-bottom: 10px !important;
}

/* --- Steps --------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  counter-reset: step;
}

.step { counter-increment: step; }

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-size: 46px;
  line-height: 1;
  color: var(--red);
  margin-bottom: 16px;
}

.step h3 { margin-bottom: 10px; }
.step p { color: var(--ink-soft); font-size: 16px; margin: 0; }

.section--ink .step p { color: rgba(255,255,255,.72); }


/* --- Category drawer -----------------------------------------------------
   A rail of categories on the left; picking one slides its panel out on the
   right with a photo, a heading and copy. Used for "How it works" on
   catering.html. Plain .steps is untouched — index.html and jobs.html keep
   the 3-up grid.

   Progressive enhancement: js/site.js adds .is-ready and wires ARIA tabs.
   Until then every panel is visible and stacked, so with JS off the section
   still reads as a plain list of all three categories. */

.drawer {
  display: grid;
  grid-template-columns: minmax(230px, 320px) 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
}

/* --- rail --- */

.drawer__rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drawer__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px;
  background: rgba(255,255,255,.05);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.drawer__tab:hover { background: rgba(255,255,255,.10); }

.drawer__tab:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.drawer__tab[aria-selected="true"] {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.drawer__thumb {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 2px;
  object-fit: cover;
}

.drawer__tab-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.drawer__tab-title {
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.drawer__tab-meta {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

/* --- panel --- */

.drawer__panel {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
}

/* stacked fallback spacing before JS upgrades the group to tabs */
.drawer__panel + .drawer__panel { margin-top: 12px; }
.drawer.is-ready .drawer__panel + .drawer__panel { margin-top: 0; }

.drawer__panel-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.drawer__panel-eyebrow {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 10px;
}

.drawer__panel h3 { margin-bottom: 12px; }

.drawer__panel p {
  color: var(--ink-soft);
  font-size: 16px;
  margin: 0;
  max-width: 46ch;
}

.drawer.is-ready .drawer__panel { animation: drawer-in .28s ease both; }

@keyframes drawer-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer__tab { transition: none; }
  .drawer.is-ready .drawer__panel { animation: none; }
}

@media (max-width: 860px) {
  .drawer { grid-template-columns: 1fr; }
  .drawer__panel { grid-template-columns: 1fr; }
  .drawer__panel-media img { aspect-ratio: 16 / 9; }
}

/* --- Menu ---------------------------------------------------------------- */

/* --header-h is measured and set by js/site.js so the two sticky bars stay
   flush at every breakpoint. The literal is the desktop fallback. */
.menunav {
  position: sticky;
  top: var(--header-h, 79px);
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.menunav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.menunav__inner::-webkit-scrollbar { display: none; }

.menunav a {
  flex: none;
  padding: 18px 4px;
  margin-right: 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: border-color .18s ease;
}

.menunav a:hover, .menunav a.is-active { border-bottom-color: var(--red); }

.menu-section {
  padding-block: clamp(48px, 6vw, 88px);
  scroll-margin-top: calc(var(--header-h, 79px) + var(--menunav-h, 55px));
}
.menu-section + .menu-section { border-top: 1px solid var(--line); }

.menu-section__head { margin-bottom: 48px; max-width: 62ch; }
.menu-section__head p { color: var(--ink-soft); margin-top: 16px; }

.menu-group { margin-top: 56px; }
.menu-group:first-of-type { margin-top: 0; }

.menu-group__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--ink);
}

.items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px clamp(32px, 5vw, 72px);
}

.item__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
}

.item__name {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
}

.item__dots {
  flex: 1;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}

.item__price {
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.item__desc {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-faint);
  vertical-align: 2px;
}

/* Loaded-mode callout */

.callout {
  background: var(--cream);
  border-left: 4px solid var(--red);
  padding: clamp(26px, 3vw, 40px);
  border-radius: 0 3px 3px 0;
}

.callout h3 { margin-bottom: 20px; }

.callout__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.callout__grid strong { display: block; margin-bottom: 4px; }
.callout__grid p { font-size: 15px; color: var(--ink-soft); margin: 0; }

.addons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.addons span {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.section--cream .addons span { background: var(--white); }

/* --- Reviews ------------------------------------------------------------- */

.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: 48px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-soft);
}

.rating__score {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
}

.stars {
  display: inline-flex;
  gap: 3px;
  flex: none;
}

.stars svg {
  width: 16px;
  height: 16px;
  fill: var(--red);
}

.stars--lg svg { width: 19px; height: 19px; }

/* --- Carousel ------------------------------------------------------------
   Horizontal scroll-snap track. The scrolling itself is pure CSS, so swipe and
   trackpad work with no JS at all; js/site.js adds .is-ready and only then
   reveals the arrows and dots, which would otherwise be dead controls. */

.carousel {
  --carousel-gap: clamp(20px, 2.5vw, 32px);
  position: relative;
}

.carousel__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__viewport:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

/* Two per view on desktop. Four narrow columns would cut these
   paragraph-length quotes to ~25 characters a line, which is unreadable. */
.reviews__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--carousel-gap)) / 2);
  gap: var(--carousel-gap);
  align-items: stretch;
}

.carousel__controls {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.carousel.is-ready .carousel__controls { display: flex; }

.carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease, opacity .2s ease;
}

.carousel__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel__btn:hover:not(:disabled) { border-color: var(--ink); }

.carousel__btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.carousel__btn:disabled {
  opacity: .3;
  cursor: default;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #CFC8C0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.carousel__dot[aria-current="true"] {
  background: var(--red);
  transform: scale(1.3);
}

.carousel__dot:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
  .carousel__dot, .carousel__btn { transition: none; }
}

@media (max-width: 760px) {
  .reviews__grid { grid-auto-columns: 100%; }
}

/* --- Continuous loop -----------------------------------------------------
   Opt-in with data-carousel-loop. js/site.js duplicates the cards once and
   adds .is-looping, then the track drifts left by exactly half its width, so
   the seam is invisible and the motion never stops.

   Loop mode is only entered when the visitor has NOT asked for reduced motion.
   Otherwise the manual arrows/dots carousel above is used instead, untouched. */

.carousel.is-looping .carousel__viewport {
  overflow: hidden;
  scroll-snap-type: none;
}

/* Fixed slide widths: the percentage columns of the manual carousel are
   relative to the container, which breaks once the track becomes max-content. */
/* align-items:start so cards hug their own copy. Stretching them to a common
   height is right for the paged carousel, but in the drifting rail the review
   lengths vary enough (roughly 220–420px tall) that the short ones would carry
   ~200px of dead space under the quote. Aligned tops, ragged bottoms. */
.carousel.is-looping .reviews__grid {
  width: max-content;
  grid-auto-columns: clamp(280px, 30vw, 420px);
  align-items: start;
  animation: carousel-loop linear infinite;
}

/* The track holds two copies: 2n cards and 2n-1 gaps. So -50% is short by half
   a gap — one full copy is n cards PLUS its trailing gap. Without the extra
   half-gap the loop jumps sideways on every cycle. */
@keyframes carousel-loop {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--carousel-gap) / 2)), 0, 0); }
}

/* Pause on hover, on keyboard focus inside the rail, and on demand. */
.carousel.is-looping:hover .reviews__grid,
.carousel.is-looping:focus-within .reviews__grid,
.carousel.is-looping.is-paused .reviews__grid {
  animation-play-state: paused;
}

/* In loop mode the pause button replaces the arrows and dots. */
.carousel__pause { display: none; }
.carousel.is-looping .carousel__pause { display: inline-flex; }

.carousel.is-looping [data-carousel-prev],
.carousel.is-looping [data-carousel-next],
.carousel.is-looping .carousel__dots { display: none; }

.carousel__icon-play { display: none; }
.carousel.is-paused .carousel__icon-pause { display: none; }
.carousel.is-paused .carousel__icon-play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .carousel.is-looping .reviews__grid { animation: none; }
}

/* --- Utilities ----------------------------------------------------------- */

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

/* margin:0 resets the UA default on <figure> (1em 40px), which was insetting
   every card 40px inside its column and throwing off the snap positions. */
.review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  scroll-snap-align: start;
}

.section--cream .review { background: var(--white); }

.review__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.review__by {
  margin: auto 0 0;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.review__src {
  display: block;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}

.reviews__more { margin-top: 40px; }

/* Live-fetch states — hidden unless js/reviews.js turns them on. */
.reviews[data-state="loading"] .reviews__grid { opacity: .45; }

/* --- CTA band ------------------------------------------------------------ */

/* Closing CTA. Red stays an accent here — the rule for this site is that red
   is never a block fill, only a mark: buttons, eyebrows, numerals, rules. */
.band {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 4px solid var(--red);
}

.band h2 { margin-bottom: 18px; }
.band p { max-width: 48ch; margin-inline: auto; color: rgba(255,255,255,.72); }
.band .btn-row { justify-content: center; margin-top: 32px; }

/* --- Footer -------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: rgba(255,255,255,.75);
  padding-block: clamp(56px, 7vw, 88px) 40px;
  font-size: 15px;
}

/* The CTA band is also ink, so without this the two run together as one slab. */
.band + .footer { border-top: 1px solid rgba(255,255,255,.16); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
}

.footer__logo { width: 220px; margin-bottom: 22px; }

.footer h4 {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 18px;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: 10px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--white); }

.footer__note {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

.social { display: flex; gap: 14px; margin-top: 22px; }

.social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  transition: background-color .18s ease, border-color .18s ease;
}

.social a:hover { background: var(--red); border-color: var(--red); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.closed-note {
  color: rgba(255,255,255,.5);
}

/* --- Utility ------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  z-index: 100;
}
.skip:focus { left: 0; }

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

.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list .is-closed { color: var(--ink-faint); }

.section--ink .hours-list li { border-bottom-color: rgba(255,255,255,.14); }

/* --- Locations ------------------------------------------------------------
   One card per store on locations.html. A store that isn't open yet uses
   .location--soon: an ink panel instead of a photo, and an outline status
   badge. Red stays a mark here — the "Open now" badge is red text on a red
   hairline, never a red fill. */

.locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}

.location {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--white);
}

.location__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Fort Worth panel uses TCU-style purple instead of the brand red, as a local
   nod. --fw-purple is TCU's #4D1979; the brighter tint is what actually reads
   on the ink background. */
.location__media--soon {
  --fw-purple: #4D1979;
  --fw-purple-bright: #9B5FE0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--ink);
  overflow: hidden;
}

/* Scrolling text bands. Each track holds two identical runs, so sliding it
   by exactly -50% loops with no visible seam. */
.soon-band {
  position: absolute;
  left: -10%;
  width: 120%;
  transform: rotate(-8deg);
  white-space: nowrap;
  pointer-events: none;
}
.soon-band--one { top: 14%; }
.soon-band--two { bottom: 12%; }

.soon-band__track {
  display: inline-flex;
  animation: soon-scroll 26s linear infinite;
}
.soon-band--two .soon-band__track { animation-direction: reverse; animation-duration: 32s; }

.soon-band span {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.10);
  padding-right: .4em;
}
.soon-band b { font-weight: 400; color: rgba(155,95,224,.7); }

@keyframes soon-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Dancing mascot, front and centre. Scoped under .location__media so it
   beats the general ".location__media img" photo rule (100% wide, 3:2 crop). */
.location__media .soon-mascot {
  aspect-ratio: auto;
  object-fit: contain;
  position: relative;
  z-index: 2;
  width: clamp(96px, 26%, 150px);
  height: auto;
  transform-origin: 50% 90%;
  animation: soon-dance 1.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
@keyframes soon-dance {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  25%      { transform: translateY(-14px) rotate(0deg); }
  50%      { transform: translateY(0) rotate(6deg); }
  75%      { transform: translateY(-14px) rotate(0deg); }
}

/* Red outline stamp — a mark, not a fill */
.soon-stamp {
  position: absolute;
  z-index: 3;
  right: 7%;
  top: 11%;
  padding: 6px 12px;
  border: 2px solid var(--fw-purple-bright);
  border-radius: 3px;
  background: rgba(36,31,32,.85);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(8deg);
  animation: soon-pulse 2.4s ease-in-out infinite;
}
@keyframes soon-pulse {
  0%, 100% { transform: rotate(8deg) scale(1);    box-shadow: 0 0 0 0 rgba(155,95,224,.6); }
  50%      { transform: rotate(8deg) scale(1.08); box-shadow: 0 0 0 10px rgba(155,95,224,0); }
}

/* Tiny horned frog tucked in the bottom-right corner */
.soon-frog {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 6%;
  width: clamp(60px, 15%, 86px);
  height: auto;
  transform-origin: 30% 80%;
  animation: soon-frog 3.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
@keyframes soon-frog {
  0%, 70%, 100% { transform: translateY(0) rotate(0); }
  78%           { transform: translateY(-6px) rotate(-6deg); }
  86%           { transform: translateY(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .soon-band__track, .location__media .soon-mascot, .soon-stamp, .soon-frog,
  .pagehead__mascot img { animation: none; }
}


.location__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  padding: clamp(22px, 2.6vw, 32px);
}

/* push the buttons to the bottom so both cards' buttons line up */
.location__body .btn-row { margin-top: auto; padding-top: 8px; }

.location__status {
  align-self: flex-start;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.location__status--open {
  border-color: var(--red);
  color: var(--red);
}

.location__name { margin: 0; }

.location__address { margin: 0; font-size: 17px; line-height: 1.5; }
.location__address a { text-decoration: none; }
.location__address a:hover { text-decoration: underline; }

.location__note { margin: 0; color: var(--ink-soft); max-width: 44ch; }

.location .hours-list { max-width: none; }


/* --- Menu location tabs ---------------------------------------------------
   Burleson / Fort Worth switcher on menu.html. The bar only appears once
   js/site.js adds .is-ready; with JS off both menus simply stack. The active
   tab gets a red underline — a hairline mark, per the red-as-accent rule. */

.loctabs { display: none; border-bottom: 1px solid var(--line); }
[data-tabs].is-ready .loctabs { display: block; }

.loctabs__inner {
  display: flex;
  gap: 6px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 10px var(--gutter) 0;
}

.loctab {
  margin-bottom: -1px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

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

.loctab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--red);
}

.loctab:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.loctab__soon {
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  vertical-align: 2px;
}

.narrow-copy .lede { max-width: 56ch; }

/* "Burleson Menu" / "Fort Worth Menu Soon" wrap to three lines at phone
   width with the desktop padding — tighten so each stays on one line. */
@media (max-width: 480px) {
  .loctabs__inner { gap: 0; padding-inline: 12px; }
  .loctab { padding: 12px 8px; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
  .loctab__soon { margin-left: 4px; padding: 1px 4px; font-size: 9px; letter-spacing: 0.08em; }
}

@media (max-width: 359px) {
  .loctabs__inner { padding-inline: 8px; }
  .loctab { padding-inline: 6px; font-size: 11px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .loctab { transition: none; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .header__inner { padding-block: 14px; }
  .header__logo img { width: 220px; }
  .nav-toggle { display: block; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
    box-shadow: 0 18px 30px -22px rgba(0,0,0,.4);
  }

  .nav.is-open { display: flex; }

  .nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
  }

  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--red); }

  .nav .btn { margin-top: 18px; border-bottom: 0; }
  .nav .btn:hover { color: var(--white); }

  .infobar__inner { gap: 8px 24px; font-size: 12px; }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .items { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .nav .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Catering request form (catering.html #request) -----------------------
   Netlify Forms handles submission; see the comment above the <form>. */

/* The catering address is one long unbreakable word. On a narrow phone it is
   wider than the text column, which pushed the whole page sideways. Let it
   break only when it truly cannot fit; at every normal width it stays whole
   and sits on one line with the "Email:" before it. */
.form-intro .lede a { overflow-wrap: break-word; }

.form-intro { max-width: 720px; margin-bottom: 32px; }
.form-intro .lede a { color: var(--ink); font-weight: 600; }

.cform {
  max-width: 760px;
  padding: clamp(22px, 3vw, 40px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.cform__group {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}

/* short note under a fieldset legend, above its checkboxes */
.cform__hint {
  margin: -6px 0 14px;
  max-width: 62ch;
  font-size: 14px;
  color: var(--ink-soft);
}

.cform__group legend {
  margin-bottom: 14px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

.cform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px 20px;
  margin-bottom: 16px;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cform__grid .field { margin-bottom: 0; }
.field--wide { grid-column: 1 / -1; }

.field label,
.field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.req { color: var(--red); }

.cform input[type="text"],
.cform input[type="tel"],
.cform input[type="email"],
.cform input[type="date"],
.cform input[type="time"],
.cform input[type="number"],
.cform textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #CFC8C0;
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;   /* 16px stops iOS zooming into the field */
  line-height: 1.4;
}

.cform textarea { resize: vertical; min-height: 110px; }

.cform input:focus,
.cform textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--ink);
}

.choices { display: flex; flex-wrap: wrap; gap: 10px; }

.choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #CFC8C0;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.choice:hover { border-color: var(--ink); }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--cream); }

/* delivery address only shows once "Delivery" is picked (js/site.js);
   with JS off it stays visible and optional */
[data-delivery-only][hidden] { display: none; }  /* beats .field { display:flex } */

.cform__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.cform__fine { margin: 0; font-size: 13px; color: var(--ink-faint); }

/* Small print under a button — e.g. who runs the online ordering. */
.btn-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }

/* The hero and the closing bands are dark, so the grey above would vanish;
   the bands also centre their content. */
.hero .btn-note, .band .btn-note { color: rgba(255,255,255,.58); }
.band .btn-note { text-align: center; }

@media (max-width: 560px) {
  .cform__submit .btn { width: 100%; }
}


/* Reviews on the ink background (index.html). The cards stay white, so the
   quotes read exactly as before; only the frame and the pause button change. */
.section--ink.reviews .review { border-color: transparent; }
.section--ink.reviews .carousel__btn {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.35);
}
.section--ink.reviews .carousel__btn:hover:not(:disabled) { border-color: var(--white); }
.section--ink .rating { color: rgba(255,255,255,.72); }
.section--ink .rating__score { color: var(--white); }


/* --- Compact reviews (index.html) ----------------------------------------
   Was ~970px tall. Tight section padding, compact heading, the Google link
   moved up beside the heading, and smaller card type. */
.btn--sm { padding: 11px 20px; font-size: 12px; }
#reviews .reviews__head { margin-bottom: 24px; align-items: center; }
#reviews .review { padding: 20px 22px; gap: 10px; }
#reviews .review__text { font-size: 15px; line-height: 1.5; }
#reviews .carousel__controls { margin-top: 14px; }
#reviews .carousel__btn { width: 36px; height: 36px; }

/* Compact Burleson / Fort Worth section (index.html #visit) */
#visit { padding-block: clamp(36px, 4vw, 52px); }
#visit .stack > * + * { margin-top: 12px; }
#visit .hours-list li { padding: 6px 0; }
#visit .soon-callout { padding: 12px 18px; }
#visit .soon-callout__title { font-size: clamp(24px, 2.6vw, 32px); }
#visit .soon-callout__eyebrow { margin-bottom: 4px; }

/* Compact closing band + footer (all pages). The band's bottom padding used
   to run straight into the footer's top padding on the same ink colour,
   leaving a ~180px empty gap. */
.band { padding-block: clamp(36px, 4vw, 52px); }
.band h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 10px; }
.band p { margin-bottom: 18px; }
.band + * .footer, main:has(> .band:last-child) + .footer { padding-top: 24px; }
.footer { padding-block: clamp(36px, 4vw, 48px) 24px; }
.footer__logo { margin-bottom: 14px; }
.footer li + li { margin-top: 6px; }
.footer__note { margin-top: clamp(24px, 3vw, 36px); padding-top: 18px; }

/* "Call Fort Worth — Coming soon" in the closing band. No number yet, so it
   links to the Fort Worth card; purple outline marks it as Fort Worth. */
.btn--fw { border-color: #A873EA; }
.btn--fw:hover { background: #A873EA; border-color: #A873EA; color: var(--white); }
.btn__soon {
  font-size: 10px;
  letter-spacing: .14em;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .85;
}

/* Hero location buttons: thin outline colour-coded by store — red for
   Burleson, purple for Fort Worth. Hover tints rather than fills, so red
   stays an accent (see "Red is an accent, never a block"). */
.btn--loc { border-width: 1px; }
.btn--bur { border-color: var(--red); }
.btn--bur:hover { background: rgba(234,34,40,.18); border-color: var(--red); color: var(--white); }
.hero .btn--fw { border-color: #A873EA; }
.hero .btn--fw:hover { background: rgba(168,115,234,.2); border-color: #A873EA; color: var(--white); }

/* Same location buttons on a light background ("what we do"): dark text,
   coloured thin outline, a pale tint of the store colour on hover. */
.btn--outline.btn--bur,
.btn--outline.btn--fw { color: var(--ink); }
.btn--outline.btn--fw { border-color: #8A4FD6; }
.btn--outline.btn--bur:hover { background: rgba(234,34,40,.08); color: var(--ink); border-color: var(--red); }
.btn--outline.btn--fw:hover { background: rgba(138,79,214,.1); color: var(--ink); border-color: #8A4FD6; }

/* Red word in a headline — foreground colour, so still "red as a mark". */
.text-red { color: var(--red); }

/* Thin red frame around the "what we do" photo + copy (index.html). A 1px
   rule, so red stays a mark rather than a fill. */
.split--framed {
  /* The frame breaks out of the content column: up to ~280px wider on each
     side, but never wider than the window minus a small margin. The photo and
     the copy then spread out to fill that width instead of sitting in the
     middle of it, so the block stays in proportion to the little it holds. */
  --frame-w: min(calc(100vw - 40px), calc(100% + 560px));
  width: var(--frame-w);
  margin-inline: calc((100% - var(--frame-w)) / 2);
  padding-block: clamp(18px, 2.4vw, 34px);
  padding-inline: clamp(20px, 5vw, 76px);
  border: 3px solid var(--red);
  border-radius: 6px;
}

/* keep "Bigger toppings." on one line — it has only ~30px to spare at laptop widths */
h2 .text-red { white-space: nowrap; }

/* Nudge the "what we do" photo left inside the red frame. Kept small now that
   the content fills the frame — any more and the photo would cross the rule. */
@media (min-width: 1240px) {
  .split--framed .split__media { position: relative; left: -20px; }
}
@media (min-width: 1400px) {
  .split--framed .split__media { left: -28px; }
}

/* Visit: Burleson details left, larger Fort Worth card right (no map). The
   card is vertically centred against the Burleson column. */
.split--visit { align-items: center; }
#visit .soon-callout--lg { padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.8vw, 36px); flex-direction: column; align-items: flex-start; gap: 16px; }
#visit .soon-callout--lg .soon-callout__eyebrow { font-size: 13px; margin-bottom: 8px; }
#visit .soon-callout--lg .soon-callout__title { font-size: clamp(34px, 4.2vw, 54px); }
#visit .soon-callout--lg .soon-callout__note { display: block; margin-top: 10px; font-size: 16px; color: rgba(255,255,255,.72); }
#visit .soon-callout--lg .soon-callout__cta { font-size: 14px; }

/* Footer is now just the social icons + the copyright line (all pages). */
.footer__social { display: flex; justify-content: center; }
.footer__social .social { margin: 0; }
.footer__note { margin-top: 20px; }

/* --- Call pop-up (built by js/site.js) ----------------------------------- */
.call-dialog {
  width: min(92vw, 380px);
  padding: 30px 28px 26px;
  border: 0;
  border-top: 4px solid var(--red);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.call-dialog--soon { border-top-color: #8A4FD6; }
.call-dialog::backdrop { background: rgba(20,16,16,.62); }
.call-dialog__close {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-faint);
}
.call-dialog__close:hover { color: var(--ink); }
.call-dialog__eyebrow {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
}
.call-dialog--soon .call-dialog__eyebrow { color: #8A4FD6; }
.call-dialog__title { font-size: clamp(30px, 6vw, 40px); margin-bottom: 14px; }
.call-dialog__number {
  display: block; margin-bottom: 8px;
  font-family: var(--display); font-size: clamp(34px, 8vw, 44px); line-height: 1;
  color: var(--ink); text-decoration: none;
}
.call-dialog__number:hover { color: var(--red); }
.call-dialog__soon {
  margin: 0 0 8px; font-family: var(--display); font-size: 30px; line-height: 1;
  text-transform: uppercase; color: #8A4FD6;
}
.call-dialog__note { margin: 0 0 18px; font-size: 15px; color: var(--ink-soft); }
.call-dialog .btn-row { justify-content: center; }
.call-dialog .btn { width: auto; }

/* --- Menu badges from the printed menu ----------------------------------- */
.tag--fav { border-color: var(--red); color: var(--red); }
.item__tip {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.item__tip span {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.item__note { margin: 4px 0 0; font-size: 13px; font-style: italic; color: var(--ink-faint); }