@import url("../fonts/fonts.css");

/* ==========================================================================
   Sweet Nala's Bakery — design system
   Every color, shape and edge in here is taken from the physical cart and
   the hand-painted A-frame sign in Oakham: yellow fill, sky-blue offset,
   navy outline, painted white panels, capsule sprinkles.
   ========================================================================== */

:root {
  /* Ink — the near-black navy every painted shape on the cart is outlined in */
  --ink: #22262f;
  --ink-soft: #545c6b;
  --ink-faint: #8a93a2;

  /* Sky — the cart body and the offset inside every painted letter */
  --sky: #a9d9e9;
  --sky-pale: #e8f5fa;
  --sky-mid: #7cc5e2;
  --sky-deep: #2a7897;

  /* Sun — the script and the BAKERY tag */
  --sun: #f2cf4e;
  --sun-deep: #ddb633;
  --sun-pale: #fcf3d2;

  /* Painted white wood + kraft bags */
  --cream: #fbf7ee;
  --paper: #ffffff;
  --kraft: #c9a177;

  /* Sprinkles — used as marks, never as UI color */
  --sprinkle-red: #d9453c;
  --sprinkle-mint: #5bc4b0;
  --sprinkle-sun: #f2cf4e;
  --sprinkle-sky: #7cc5e2;
  --sprinkle-white: #ffffff;

  --font-display: "Fredoka", "Trebuchet MS", sans-serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --shell: 1280px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* Painted edge — the hard offset shadow a sign board casts */
  --edge: 4px 4px 0 var(--ink);
  --edge-sm: 3px 3px 0 var(--ink);
  --edge-press: 1px 1px 0 var(--ink);

  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Clears the sticky masthead so anchor targets — and anything the keyboard
     tabs to below the fold — are never scrolled in underneath it. */
  scroll-padding-top: 6.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0 0 1em;
  max-width: 62ch;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--sky-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 0.75rem;
}

/* --------------------------------------------------------------------------
   The signature: painted type.
   Yellow fill, sky-blue ring, navy ring — exactly how the sign is painted.
   Reserved for the largest display moments, where the navy ring carries
   the contrast. Everything at reading size stays ink-on-cream.
   -------------------------------------------------------------------------- */
/* Ring widths are in em, not px, so the outline holds the same proportion to
   the letter at every size. In px the ink ring stayed 6px while the type shrank
   to 43px on a phone, and it closed up the counters in a, e, d and B. */
.painted {
  color: var(--sun);
  text-shadow:
    0.037em 0 0 var(--sky-mid),
    -0.037em 0 0 var(--sky-mid),
    0 0.037em 0 var(--sky-mid),
    0 -0.037em 0 var(--sky-mid),
    0.025em 0.025em 0 var(--sky-mid),
    -0.025em 0.025em 0 var(--sky-mid),
    0.025em -0.025em 0 var(--sky-mid),
    -0.025em -0.025em 0 var(--sky-mid),
    0.074em 0 0 var(--ink),
    -0.074em 0 0 var(--ink),
    0 0.074em 0 var(--ink),
    0 -0.074em 0 var(--ink),
    0.049em 0.049em 0 var(--ink),
    -0.049em 0.049em 0 var(--ink),
    0.049em -0.049em 0 var(--ink),
    -0.049em -0.049em 0 var(--ink),
    0.061em 0.025em 0 var(--ink),
    -0.061em 0.025em 0 var(--ink),
    0.061em -0.025em 0 var(--ink),
    -0.061em -0.025em 0 var(--ink),
    0.025em 0.061em 0 var(--ink),
    -0.025em 0.061em 0 var(--ink),
    0.025em -0.061em 0 var(--ink),
    -0.025em -0.061em 0 var(--ink);
}

/* The BAKERY tag — yellow banner, navy outline, navy letters.
   This is how yellow is allowed to carry text: as a block behind dark type. */
.tag {
  display: inline-block;
  background: var(--sun);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 0.32em 0.8em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
}
.tag--sky {
  background: var(--sky);
}
.tag--paper {
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   Sprinkles — hand-painted capsules, drawn not clip-arted.
   -------------------------------------------------------------------------- */
.sprinkles {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
}
.sprinkles i {
  display: block;
  width: 22px;
  height: 8px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--sprinkle-sun);
  flex: none;
}
.sprinkles i:nth-child(6n + 2) {
  background: var(--sprinkle-mint);
  transform: rotate(-24deg);
}
.sprinkles i:nth-child(6n + 3) {
  background: var(--sprinkle-red);
  transform: rotate(16deg);
}
.sprinkles i:nth-child(6n + 4) {
  background: var(--sprinkle-white);
  transform: rotate(-8deg);
}
.sprinkles i:nth-child(6n + 5) {
  background: var(--sprinkle-sky);
  transform: rotate(30deg);
}
.sprinkles i:nth-child(6n + 6) {
  background: var(--sprinkle-sun);
  transform: rotate(-14deg);
}
.sprinkles--center {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Buttons — a painted sign board you can press
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--sun);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--btn-bg);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.82rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--edge);
  transition:
    transform 0.16s var(--ease),
    box-shadow 0.16s var(--ease),
    background-color 0.16s var(--ease);
  cursor: pointer;
}
.btn:hover {
  background: var(--sun-deep);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: var(--edge-press);
}
.btn--sky {
  --btn-bg: var(--sky);
}
.btn--sky:hover {
  background: var(--sky-mid);
}
.btn--paper {
  --btn-bg: var(--paper);
}
.btn--paper:hover {
  background: var(--sky-pale);
}
.btn--ink {
  --btn-bg: var(--ink);
  color: var(--cream);
  box-shadow: 4px 4px 0 var(--sky-deep);
}
.btn--ink:hover {
  background: #14171e;
  box-shadow: 2px 2px 0 var(--sky-deep);
}
.btn--sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.92rem;
  border-width: 2px;
  box-shadow: var(--edge-sm);
}
.btn--sm:hover {
  box-shadow: 2px 2px 0 var(--ink);
}
.btn .arrow {
  transition: transform 0.16s var(--ease);
}
.btn:hover .arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn .arrow {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Header — the cart's white roof panel
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand img {
  width: clamp(158px, 22vw, 232px);
  height: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.35rem 0;
  border-bottom: 3px solid transparent;
  transition: border-color 0.16s var(--ease);
}
.nav a:hover,
.nav a[aria-current="page"] {
  border-bottom-color: var(--sun);
}
.masthead__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The order button that lives inside the collapsed mobile panel */
.btn--mobile-only {
  display: none;
}

.nav-toggle {
  display: none;
  background: var(--sky);
  border: 3px solid var(--ink);
  border-radius: 12px;
  width: 46px;
  height: 44px;
  box-shadow: var(--edge-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }
  .masthead__nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 3px solid var(--ink);
    padding: 0.5rem var(--gutter) 1.35rem;
    display: none;
  }
  .masthead__nav[data-open="true"] {
    display: block;
  }
  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* :not(.btn) — the order button also lives in this nav, and a bare `.nav a`
     rule outranks `.btn--sm`, stripping the pill's own padding. */
  .nav a:not(.btn) {
    padding: 0.85rem 0;
    border-bottom: 2px solid var(--sky-pale);
  }
  .nav a:not(.btn):hover,
  .nav a:not(.btn)[aria-current="page"] {
    border-bottom-color: var(--sun);
  }
  .masthead__cta .btn--desktop {
    display: none;
  }
  .btn--mobile-only {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 1.1rem;
  }
}
@media (min-width: 901px) {
  .masthead__nav {
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   Hero — asymmetric, text left, the real cart right
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: radial-gradient(
      120% 90% at 88% 12%,
      var(--sky-pale) 0%,
      rgba(232, 245, 250, 0) 62%
    ),
    var(--cream);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.7rem, 7.2vw, 5.1rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.hero h1 .line {
  display: block;
}
.hero__lede {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 40ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.9rem 0 1.6rem;
}
.hero__note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.hero__note strong {
  color: var(--ink);
  font-weight: 600;
}

/* The cart photo sits on a painted panel, tilted like a board leaned against a tree */
.hero__art {
  position: relative;
}
.hero__panel {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: 10px 10px 0 var(--sky);
  transform: rotate(-1.6deg);
}
.hero__panel img {
  border-radius: 16px;
  width: 100%;
}
.hero__stamp {
  position: absolute;
  right: -14px;
  bottom: 26px;
  background: var(--sun);
  border: 3px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.15rem;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  box-shadow: var(--edge-sm);
  transform: rotate(6deg);
  max-width: 168px;
}
.hero__stamp span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero__art {
    order: -1;
  }
  .hero__panel {
    transform: rotate(-1deg);
    box-shadow: 7px 7px 0 var(--sky);
  }
  .hero__stamp {
    right: -6px;
    bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  padding: clamp(3.25rem, 7vw, 5.75rem) 0;
}
.section--paper {
  background: var(--paper);
  border-block: 3px solid var(--ink);
}
.section--sky {
  background: var(--sky-pale);
  border-block: 3px solid var(--ink);
}
.section--ink {
  background: var(--ink);
  color: var(--cream);
}
.section--ink h2,
.section--ink h3 {
  color: var(--cream);
}
.section--ink p {
  color: #c8ceda;
}

.section__head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 62ch;
}
.section__head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
  flex-wrap: wrap;
}
.section h2 {
  font-size: clamp(1.85rem, 1.4rem + 2.1vw, 2.9rem);
  margin: 0.85rem 0 0.7rem;
}
.section__lede {
  color: var(--ink-soft);
  font-size: 1.06rem;
  margin: 0;
}
.section--ink .section__lede {
  color: #c8ceda;
}

/* --------------------------------------------------------------------------
   Hours strip — the job of this section is to get someone to the cart
   -------------------------------------------------------------------------- */
.hours {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--edge);
  overflow: hidden;
}
.hours__cell {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-right: 3px solid var(--ink);
}
.hours__cell:last-child {
  border-right: 0;
}
.hours__cell dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-deep);
  margin-bottom: 0.5rem;
}
.hours__cell dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.3;
}
.hours__cell small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
  line-height: 1.5;
}
@media (max-width: 780px) {
  .hours {
    grid-template-columns: 1fr;
  }
  .hours__cell {
    border-right: 0;
    border-bottom: 3px solid var(--ink);
  }
  .hours__cell:last-child {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Treat cards — an even grid. Every card is the same width and every photo the
   same aspect ratio, so the product names sit on one line across a row.
   -------------------------------------------------------------------------- */
.treats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  align-items: stretch;
}
.treat {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--edge);
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.treat:hover {
  transform: translate(-2px, -3px);
  box-shadow: 7px 8px 0 var(--ink);
}
.treat__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
  background: var(--sky-pale);
}
.treat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.treat__price {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--sun);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  box-shadow: 2px 2px 0 var(--ink);
}
.treat__body {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.treat__body h3 {
  font-size: 1.32rem;
  margin-bottom: 0.5rem;
}
.treat__body p {
  font-size: 0.97rem;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}
.treat__body .btn {
  margin-top: auto;
  align-self: flex-start;
}
.treat__meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

@media (max-width: 620px) {
  .treats {
    grid-template-columns: 1fr;
  }
  .treat:hover {
    transform: none;
    box-shadow: var(--edge);
  }
}

/* --------------------------------------------------------------------------
   Flavor strip
   -------------------------------------------------------------------------- */
.flavors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.flavor {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--edge-sm);
}
.flavor img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  border-bottom: 3px solid var(--ink);
}
.flavor span {
  display: block;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
}

.flavor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.flavor-list li {
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.95rem;
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.94rem;
}
.section--ink .flavor-list li {
  background: transparent;
  border-color: var(--sky);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Reviews — real Facebook recommendations, staggered like pinned notes
   -------------------------------------------------------------------------- */
.reviews {
  columns: 3;
  column-gap: clamp(1.1rem, 2.2vw, 1.6rem);
}
@media (max-width: 1000px) {
  .reviews {
    columns: 2;
  }
}
@media (max-width: 640px) {
  .reviews {
    columns: 1;
  }
}

.review {
  break-inside: avoid;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  box-shadow: var(--edge);
}
/* Canted like notes pinned to a board — enough tilt to read as deliberate. */
.review:nth-child(3n + 1) {
  transform: rotate(-1.6deg);
}
.review:nth-child(3n + 2) {
  transform: rotate(1.3deg);
}
.review:nth-child(3n + 3) {
  transform: rotate(-0.7deg);
}
.review blockquote {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.6;
}
.review figcaption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
}
.review figcaption small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   Split feature (story / custom orders)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--flip .split__art {
  order: -1;
}
.split__art {
  position: relative;
}
.split__art img {
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--edge);
  width: 100%;
}
.split__art--tilt img {
  transform: rotate(1.4deg);
}
.split h2 {
  margin-bottom: 1rem;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .split--flip .split__art {
    order: 0;
  }
  .split__art--tilt img {
    transform: none;
  }
}

/* Photo pair used on the About page */
.photo-pair {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
  align-items: start;
}
.photo-pair img {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--edge-sm);
  width: 100%;
}
.photo-pair img:last-child {
  margin-top: 2.5rem;
}
@media (max-width: 560px) {
  .photo-pair img:last-child {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Steps (how ordering works)
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  counter-reset: step;
}
.step {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  box-shadow: var(--edge);
  position: relative;
}
.step__num {
  counter-increment: step;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sky);
  border: 3px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
}
.step__num::before {
  content: counter(step);
}
.step h3 {
  font-size: 1.18rem;
  margin-bottom: 0.5rem;
}
.step p {
  font-size: 0.96rem;
  color: var(--ink-soft);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Menu board — used for the item with no photograph, and on the Treats page
   -------------------------------------------------------------------------- */
.board {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--edge);
  overflow: hidden;
}
.board__head {
  background: var(--sun);
  border-bottom: 3px solid var(--ink);
  padding: 0.9rem clamp(1.1rem, 2.4vw, 1.75rem);
}
.board__head h3 {
  font-size: 1.24rem;
}
.board__row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem clamp(1.1rem, 2.4vw, 1.75rem);
  border-bottom: 2px dashed var(--sky);
}
.board__row:last-child {
  border-bottom: 0;
}
.board__row h4 {
  font-size: 1.08rem;
  font-weight: 500;
  flex: none;
}
.board__row .dots {
  flex: 1;
  border-bottom: 2px dotted var(--ink-faint);
  transform: translateY(-4px);
  min-width: 18px;
}
.board__row .price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  flex: none;
}
.board__row p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0.25rem 0 0;
  width: 100%;
}
.board__row--stack {
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Final call to action
   -------------------------------------------------------------------------- */
.finale {
  text-align: center;
}
.finale h2 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  margin-bottom: 1rem;
}
.finale p {
  margin-inline: auto;
}
.finale .hero__actions {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--paper);
  border-top: 3px solid var(--ink);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.footer h4 {
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-deep);
  margin-bottom: 0.85rem;
}
.footer a {
  text-decoration: none;
}
.footer li a:hover,
.footer address a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer li {
  margin-bottom: 0.5rem;
}
.footer address {
  font-style: normal;
  line-height: 1.8;
}
/* Hours sit with the address they apply to, not in the links list. */
.footer__hours {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.footer__brand img {
  width: 210px;
  margin-bottom: 1rem;
}
.footer__base {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--sky);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
@media (max-width: 780px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Page header for interior pages
   -------------------------------------------------------------------------- */
.pagehead {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  background: radial-gradient(
      100% 80% at 20% 0%,
      var(--sky-pale) 0%,
      rgba(232, 245, 250, 0) 60%
    ),
    var(--cream);
}
.pagehead h1 {
  font-size: clamp(2.3rem, 1.6rem + 3.6vw, 3.9rem);
  margin: 0.9rem 0 1rem;
}
.pagehead p {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Map band — full-bleed map under the Visit page header
   -------------------------------------------------------------------------- */
.mapband {
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--sky-pale);
}
.mapband iframe {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 420px);
  border: 0;
}

/* --------------------------------------------------------------------------
   Motion — GSAP sets the start state only when it is allowed to run
   -------------------------------------------------------------------------- */
[data-reveal] {
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
  .review,
  .hero__panel,
  .hero__stamp,
  .split__art--tilt img {
    transform: none !important;
  }
}