/* ==========================================================================
   Bleu Bear Bakery — core stylesheet
   Design language: editorial / gallery. Deep ink blue (the "bleu"), warmed
   with cream, butter and honey. Serif display + geometric sans for UI.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Brand */
  --ink:        #101B33;   /* midnight — the "bleu" */
  --ink-800:    #16243F;
  --ink-700:    #1E3153;
  --slate:      #2E4269;
  --slate-400:  #6A7B99;

  /* Ground */
  --cream:      #FBF7F0;   /* page */
  --paper:      #FFFFFF;
  --butter:     #F3E6CE;
  --butter-dim: #EADCC2;

  /* Accent */
  --honey:      #B9803A;
  --honey-lit:  #D19A4F;
  --berry:      #8C3A52;

  /* Text */
  --text:       #14203A;
  --text-muted: #57637C;
  --text-on-ink:#EDE6DA;
  --text-on-ink-muted: #A7B0C2;

  --line:       #E2D9C9;
  --line-ink:   rgba(237, 230, 218, .18);

  /* Type */
  --display: "Gluten", "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif;
  --sans: "Nunito", "Segoe UI", ui-rounded, system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* Scale (fluid) */
  --step--1: clamp(.8rem, .77rem + .15vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.34rem + .8vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.85rem + 2.7vw, 4.2rem);
  --step-5:  clamp(2.9rem, 1.9rem + 5vw, 6.5rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4.5rem, 9vw, 9rem);
  --measure: 62ch;

  --radius: 2px;
  --radius-lg: 4px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------ 2. Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.005em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--ink); color: var(--butter); }

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

/* --------------------------------------------------------- 3. Layout atoms */
.wrap {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 920px; }
.wrap--text   { max-width: 720px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.section--ink {
  background: var(--ink);
  color: var(--text-on-ink);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--butter); }

.section--butter { background: var(--butter); }

.rule { height: 1px; background: var(--line); border: 0; }

/* Eyebrow / kicker */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--honey);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: .6;
}
.eyebrow--center { justify-content: center; }
.section--ink .eyebrow { color: var(--honey-lit); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--measure);
}
.section--ink .lede { color: var(--text-on-ink-muted); }

/* ------------------------------------------------------------- 4. Buttons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--butter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05em 2.1em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--honey);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: #fff; border-color: var(--honey); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: currentColor;
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: #fff; border-color: var(--honey); }

.btn--light {
  --btn-bg: var(--butter);
  --btn-fg: var(--ink);
}
.btn--on-ink {
  --btn-bg: transparent;
  --btn-fg: var(--butter);
  border-color: var(--line-ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.25rem;
}

/* Text link with animated underline */
.link {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: .35em;
  background-image: linear-gradient(var(--honey), var(--honey));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s var(--ease-out), color .3s var(--ease);
}
.link:hover, .link:focus-visible { background-size: 0% 1px; color: var(--honey); }

/* -------------------------------------------------------------- 5. Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: clamp(1rem, 2.2vw, 1.75rem);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(16,27,51,.55), transparent);
  opacity: 1;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck {
  background: var(--cream);
  padding-block: .7rem;
  box-shadow: 0 1px 0 var(--line), 0 12px 34px -22px rgba(16,27,51,.4);
}
.site-header.is-stuck::before { opacity: 0; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--butter);
  transition: color .4s var(--ease);
}
.is-stuck .brand, .site-header--solid .brand { color: var(--ink); }

.brand__mark { width: 2.5rem; height: 2.5rem; flex: none; transition: width .4s var(--ease), height .4s var(--ease); }
.is-stuck .brand__mark { width: 2.1rem; height: 2.1rem; }

.brand__name {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  letter-spacing: .01em;
  line-height: 1;
}
.brand__name small {
  display: block;
  font-family: var(--sans);
  font-size: .55rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: .3em;
  font-weight: 600;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.4rem); }
.nav a {
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--butter);
  position: relative;
  padding-block: .3rem;
  transition: color .35s var(--ease), opacity .35s var(--ease);
}
.is-stuck .nav a, .site-header--solid .nav a { color: var(--ink); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--honey);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav a[aria-current="page"] { color: var(--honey); }

.header-cta { display: none; }
@media (min-width: 62rem) { .header-cta { display: inline-flex; } }

/* Mobile nav */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--butter);
  cursor: pointer;
  padding: 0;
  align-items: center;
}
.is-stuck .nav-toggle, .site-header--solid .nav-toggle { color: var(--ink); }
.nav-toggle span {
  display: block;
  width: 1.05rem; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 61.999rem) {
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    background: var(--ink);
    padding: 6rem var(--gutter) 3rem;
    clip-path: circle(0% at calc(100% - 3.5rem) 3rem);
    transition: clip-path .7s var(--ease-out);
    pointer-events: none;
  }
  .nav[data-open="true"] { clip-path: circle(145% at calc(100% - 3.5rem) 3rem); pointer-events: auto; }
  .nav a, .is-stuck .nav a, .site-header--solid .nav a {
    color: var(--butter);
    font-family: var(--display);
    font-size: var(--step-2);
    letter-spacing: -.01em;
    text-transform: none;
  }
  .nav .btn { margin-top: 1rem; }
}
@media (min-width: 62rem) { .nav-toggle { display: none; } }

body.nav-open { overflow: hidden; }

/* Skip link */
.skip {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink);
  color: var(--butter);
  padding: .85rem 1.5rem;
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .3s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- 6. Hero */
.hero {
  position: relative;
  min-height: min(100svh, 62rem);
  display: grid;
  align-items: end;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(16,27,51,.94) 0%, rgba(16,27,51,.55) 42%, rgba(16,27,51,.28) 70%, rgba(16,27,51,.5) 100%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(7rem, 14vh, 10rem) clamp(3.5rem, 7vh, 6rem);
  color: var(--text-on-ink);
}
.hero__title {
  font-size: var(--step-5);
  color: var(--butter);
  line-height: .94;
  max-width: 16ch;
}
.hero__title em {
  font-style: normal;
  font-weight: 800;
  color: var(--bear-lit);
}
.hero__sub {
  margin-top: 1.75rem;
  max-width: 46ch;
  font-size: var(--step-1);
  color: var(--text-on-ink-muted);
  line-height: 1.55;
}
.hero__foot {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-ink);
}
.hero__status {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-on-ink-muted);
}
.dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: #5BBF7A;
  flex: none;
  box-shadow: 0 0 0 0 rgba(91,191,122,.6);
  animation: pulse 2.6s infinite;
}
.dot--closed { background: var(--slate-400); animation: none; }
@keyframes pulse {
  70% { box-shadow: 0 0 0 .55rem rgba(91,191,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(91,191,122,0); }
}

/* ------------------------------------------------------------- 7. Marquee */
.marquee {
  background: var(--ink);
  border-block: 1px solid var(--line-ink);
  overflow: hidden;
  padding-block: 1.15rem;
  display: flex;
  user-select: none;
}
.marquee--butter { background: var(--butter); border-color: var(--butter-dim); }
.marquee__track {
  display: flex;
  flex: none;
  gap: 3.5rem;
  padding-right: 3.5rem;
  align-items: center;
  animation: slide 46s linear infinite;
}
.marquee__track span {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  color: var(--butter);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3.5rem;
}
.marquee--butter .marquee__track span { color: var(--ink); }
.marquee__track span::after {
  content: "";
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--honey);
  flex: none;
}
@keyframes slide { to { transform: translateX(-100%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --------------------------------------------------------- 8. Split story */
.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left  { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
  .split--flip > :first-child { order: 2; }
}
.split__body h2 { font-size: var(--step-3); margin-bottom: 1.5rem; }
.split__body p + p { margin-top: 1.15rem; }
.split__body p { color: var(--text-muted); max-width: 52ch; }
.section--ink .split__body p { color: var(--text-on-ink-muted); }

/* Framed image */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--butter);
}
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.frame:hover img { transform: scale(1.04); }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--square   { aspect-ratio: 1 / 1; }
.frame--landscape{ aspect-ratio: 4 / 3; }
.frame--tall     { aspect-ratio: 3 / 4; }
.frame--wide     { aspect-ratio: 16 / 10; }

/* Offset caption plate */
.frame-stack { position: relative; }
.frame-stack__caption {
  position: absolute;
  right: clamp(-1rem, -2vw, -2rem);
  bottom: clamp(-1.25rem, -2.5vw, -2rem);
  background: var(--cream);
  color: var(--ink);
  padding: 1.4rem 1.7rem;
  max-width: 17rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -34px rgba(16,27,51,.5);
}
.frame-stack__caption strong {
  display: block;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: .3rem;
}
.frame-stack__caption span { font-size: var(--step--1); color: var(--text-muted); }

/* ------------------------------------------------------- 9. Section header */
.section-head {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 56rem) {
  .section-head--split {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 3rem;
  }
}
.section-head h2 { font-size: var(--step-3); }
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .lede { margin-inline: auto; }

/* ---------------------------------------------------- 10. Signature cards */
.cards {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: transparent;
}
.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  background: var(--butter);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }
.card__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  background: rgba(251,247,240,.94);
  color: var(--ink);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45em .95em;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.card__body { padding-top: 1.35rem; }
.card__body h3 {
  font-size: var(--step-1);
  margin-bottom: .5rem;
}
.card__body p { font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; }

/* ------------------------------------------------------- 11. Credentials */
.creds {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: cred;
}
.cred {
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-ink);
}
.section--butter .cred, .section--cream .cred { border-color: var(--line); }
.cred__icon { width: 2.4rem; height: 2.4rem; margin-bottom: 1.25rem; color: var(--honey-lit); }
.section--butter .cred__icon { color: var(--honey); }
.cred h3 { font-size: var(--step-1); margin-bottom: .6rem; }
.cred p { font-size: var(--step--1); color: var(--text-on-ink-muted); line-height: 1.65; }
.section--butter .cred p { color: var(--text-muted); }

/* ------------------------------------------------------------ 12. Quotes */
.quote {
  text-align: center;
  max-width: 34ch;
  margin-inline: auto;
}
.quote blockquote {
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1.24;
  font-style: normal;
  font-weight: 500;
  color: var(--butter);
}
.quote figcaption {
  margin-top: 2rem;
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--honey-lit);
}

.testimonials {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.testimonial {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.stars { display: flex; gap: .2rem; color: var(--honey); }
.stars svg { width: 1rem; height: 1rem; }
.testimonial p {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--ink);
  flex: 1;
}
.testimonial cite {
  font-style: normal;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Slider variant — used on the home page where there are more reviews than
   fit a comfortable grid. Degrades to a plain horizontal scroller with JS off. */
.testimonials--slider { position: relative; }
.testimonials__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84vw, 23rem);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  /* Cards carry a border, so bleed the track slightly to keep focus rings visible. */
  padding: 4px;
  margin: -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.testimonials__track::-webkit-scrollbar { height: 6px; }
.testimonials__track::-webkit-scrollbar-track { background: transparent; }
.testimonials__track::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}
.testimonials__track > .testimonial { scroll-snap-align: start; }

/* The scrollbar is the affordance when JS is off; once the controls are live
   it is redundant, so hand navigation to the buttons and dots instead. */
[data-slider-ready] .testimonials__track { scrollbar-width: none; }
[data-slider-ready] .testimonials__track::-webkit-scrollbar { display: none; }

.testimonials__controls {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
[data-slider-ready] .testimonials__controls { display: flex; }

.testimonials__dots { display: flex; gap: .6rem; }
.testimonials__dots button {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.testimonials__dots button[aria-current="true"] {
  background: var(--honey);
  transform: scale(1.4);
}

.testimonials__arrows { display: flex; gap: .6rem; }
.testimonials__arrows button {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.testimonials__arrows button:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--butter);
}
.testimonials__arrows button:disabled { opacity: .35; cursor: default; }
.testimonials__arrows svg { width: 1.05rem; height: 1.05rem; }

/* Rating summary — the aggregate figures that sit above the quotes. */
.rating-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--text-muted);
}
.rating-summary__score {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.rating-summary .stars svg { width: 1.15rem; height: 1.15rem; }
.rating-summary a { color: inherit; text-underline-offset: .25em; }
.rating-summary a:hover { color: var(--ink); }

/* -------------------------------------------------------------- 13. Menu */
.menu-group + .menu-group { margin-top: clamp(3.5rem, 7vw, 6rem); }
.menu-group__head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}
.menu-group__head h2 { font-size: var(--step-2); white-space: nowrap; }
.menu-group__head .rule { flex: 1; }
.menu-group__note {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 60ch;
  margin: -1.25rem 0 2.25rem;
}

.menu-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.35rem 3.5rem;
}
@media (min-width: 46rem) { .menu-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 80rem) { .menu-list--three { grid-template-columns: repeat(3, 1fr); } }

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .35rem .75rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
}
.menu-item__name {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.2;
}
.menu-item__price {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--honey);
  white-space: nowrap;
}
.menu-item__desc {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.55;
}
.menu-item__flags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .2rem;
}
.flag {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3em .7em;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.flag--vg { color: #3F7A4F; border-color: #C3DDC9; background: #F1F8F2; }
.flag--df { color: var(--slate); border-color: #CFD9E8; background: #F1F5FB; }
.flag--fav { color: var(--honey); border-color: #EBD8B8; background: #FBF3E4; }

/* Chips / filter row */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: .6em 1.25em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--butter); }

/* Donut topping cloud */
.cloud { display: flex; flex-wrap: wrap; gap: .55rem; }
.cloud li {
  list-style: none;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: .55em 1.1em;
  font-size: var(--step--1);
  color: var(--text);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cloud li:hover { background: var(--ink); color: var(--butter); border-color: var(--ink); transform: translateY(-2px); }

/* --------------------------------------------------------- 14. Visit info */
.info-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 56rem) { .info-grid { grid-template-columns: repeat(3, 1fr); } }

.info-block h3 {
  font-size: var(--step--1);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--honey);
  margin-bottom: 1.1rem;
}
.info-block p, .info-block address {
  font-style: normal;
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.4;
}
.info-block a { text-decoration: none; border-bottom: 1px solid var(--line-ink); transition: border-color .3s var(--ease), color .3s var(--ease); }
.info-block a:hover { color: var(--honey-lit); border-color: var(--honey-lit); }

.hours {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line-ink);
  font-size: var(--step-0);
}
.section--butter .hours li, .section--cream .hours li { border-color: var(--line); }
.hours li[data-today="true"] { color: var(--honey-lit); font-weight: 700; }
.section--butter .hours li[data-today="true"] { color: var(--honey); }
.hours dt, .hours .day { letter-spacing: .04em; }
.hours .closed { color: var(--slate-400); }

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--butter);
  aspect-ratio: 16 / 10;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -------------------------------------------------------------- 15. Form */
.form { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.field { display: grid; gap: .55rem; }
.field label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field select, .field textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .95rem 1.1rem;
  font-size: var(--step-0);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16,27,51,.08);
}
.field__hint { font-size: var(--step--1); color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }

.form__note {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 56ch;
}

/* ------------------------------------------------------------ 16. Footer */
.site-footer {
  background: var(--ink);
  color: var(--text-on-ink-muted);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
}
.footer-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-ink);
}
@media (min-width: 56rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.site-footer h4 {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--honey-lit);
  margin-bottom: 1.25rem;
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.site-footer a { text-decoration: none; transition: color .3s var(--ease); }
.site-footer a:hover { color: var(--butter); }
.site-footer .brand { color: var(--butter); margin-bottom: 1.25rem; }
.footer-blurb { max-width: 34ch; font-size: var(--step--1); line-height: 1.7; }

.socials { display: flex; gap: .7rem; margin-top: 1.75rem; }
.socials a {
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-ink);
  border-radius: 50%;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.socials a:hover { background: var(--honey); color: #fff; border-color: var(--honey); transform: translateY(-2px); }
.socials svg { width: 1.05rem; height: 1.05rem; }

.footer-base {
  padding-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: var(--step--1);
}
.footer-base p { opacity: .75; }

/* --------------------------------------------------------- 17. CTA banner */
.cta-banner { text-align: center; }
.cta-banner h2 { font-size: var(--step-4); margin-bottom: 1.5rem; }
.cta-banner .lede { margin-inline: auto; }
.cta-banner .btn-row { justify-content: center; }

/* ------------------------------------------------------ 18. Page banner */
.page-hero {
  background: var(--ink);
  color: var(--text-on-ink);
  padding-block: clamp(9rem, 18vh, 13rem) clamp(3.5rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}
.page-hero__inner { position: relative; }
.page-hero h1 { font-size: var(--step-4); color: var(--butter); max-width: 18ch; }
.page-hero .lede { margin-top: 1.5rem; }
.page-hero__deco {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(38rem, 48vw);
  opacity: .07;
  pointer-events: none;
  color: var(--butter);
}

.crumbs {
  display: flex;
  gap: .6rem;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-on-ink-muted);
  margin-bottom: 1.75rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--honey-lit); }
.crumbs li + li::before { content: "/"; margin-right: .6rem; opacity: .4; }

/* --------------------------------------------------------- 19. Gallery */
.gallery {
  display: grid;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 56rem) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--butter); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform 1s var(--ease-out), filter .6s var(--ease); }
.gallery figure:hover img { transform: scale(1.07); }
.gallery .tall { grid-row: span 2; }
.gallery .tall img { aspect-ratio: 1 / 2.06; }

/* --------------------------------------------------------- 20. Accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion details {
  border-bottom: 1px solid var(--line);
}
.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 1.5rem 3rem 1.5rem 0;
  font-family: var(--display);
  font-size: var(--step-1);
  position: relative;
  transition: color .3s var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--honey); }
.accordion summary::after {
  content: "";
  position: absolute;
  right: .5rem; top: 50%;
  width: .8rem; height: .8rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .35s var(--ease);
}
.accordion details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.accordion .acc-body { padding: 0 3rem 1.75rem 0; color: var(--text-muted); max-width: 62ch; }
.accordion .acc-body p + p { margin-top: 1rem; }

/* ----------------------------------------------------- 21. Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(clamp(1rem, 3vh, 2.25rem));
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- 22. Utilities */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: clamp(2rem, 4vw, 3.5rem); }
.stack > * + * { margin-top: 1.15rem; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------- 23. Motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ---------------------------------------------------------- 24. Printing */
@media print {
  .site-header, .site-footer, .marquee, .btn-row, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}

/* =====================================================================
   17. Brand refresh — colour and play, taken from the bear logo
   Sampled from the logo artwork: the bear is teal #30A8A8, the donut
   he is balancing on is pink #E87890. Both now sit alongside the
   original midnight/honey palette rather than replacing it.
   ===================================================================== */

:root {
  --bear:          #2E9EA0;
  --bear-deep:     #1C7A7C;
  --bear-lit:      #7FCACB;
  --bear-wash:     #E4F3F3;
  --sprinkle:      #E5798F;
  --sprinkle-deep: #C25470;
  --sprinkle-lit:  #F6BFC9;
  --sprinkle-wash: #FDEDF0;
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------------------------------------------------------------- fixes */

/* The slider variant inherits .testimonials' auto-fit grid, which put the
   track and the controls in separate columns and squeezed the cards to a
   fraction of the width. The track does its own layout, so opt out. */
.testimonials--slider { display: block; }

/* The header CTA was --butter on a --cream stuck header: a contrast ratio
   of about 1.06, effectively invisible. It is now the brand teal, which
   holds up over the hero image and over the cream header alike. */
.header-cta {
  --btn-bg: var(--bear);
  --btn-fg: #FFFFFF;
  border-color: var(--bear);
  box-shadow: 0 6px 18px -8px rgba(28, 122, 124, .8);
}
.header-cta::after { background: var(--sprinkle); }
.header-cta:hover, .header-cta:focus-visible { border-color: var(--sprinkle); color: #fff; }

/* ------------------------------------------------------------- the logo */

.brand__mark {
  border-radius: 999px;
  background: var(--cream);
  padding: 2px;
  object-fit: contain;
  box-shadow: 0 0 0 2px var(--bear-lit);
  transition: width .4s var(--ease), height .4s var(--ease),
              transform .5s var(--bounce), box-shadow .4s var(--ease);
}
.site-footer .brand__mark { background: var(--butter); }
.brand:hover .brand__mark { box-shadow: 0 0 0 3px var(--sprinkle); }

@media (prefers-reduced-motion: no-preference) {
  /* The bear is balancing on a donut. Let him wobble. */
  @keyframes bear-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-4px) rotate(2deg); }
  }
  @keyframes bear-hop {
    0%   { transform: translateY(0) rotate(0); }
    30%  { transform: translateY(-9px) rotate(-9deg); }
    60%  { transform: translateY(0) rotate(7deg); }
    100% { transform: translateY(0) rotate(0); }
  }
  .brand__mark { animation: bear-bob 4.5s var(--ease) infinite; }
  .brand:hover .brand__mark { animation: bear-hop .7s var(--bounce); }
}

/* ------------------------------------------------- playful accent shapes */

/* A scalloped edge, like the paper doily under a cake. Drop it on any
   section that should end with a soft edge instead of a hard rule. */
.scallop {
  height: 1.5rem;
  background: currentColor;
  -webkit-mask-image: radial-gradient(circle at 50% 0, transparent 68%, #000 69%);
  mask-image: radial-gradient(circle at 50% 0, transparent 68%, #000 69%);
  -webkit-mask-size: 2.4rem 1.5rem;
  mask-size: 2.4rem 1.5rem;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.scallop--cream  { color: var(--cream); }
.scallop--butter { color: var(--butter); }
.scallop--ink    { color: var(--ink); }

/* Sprinkles. Purely decorative, always aria-hidden. */
.sprinkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sprinkles i {
  position: absolute;
  width: .5rem; height: .16rem;
  border-radius: 999px;
  opacity: .75;
  background: var(--sprinkle);
}
.sprinkles i:nth-child(3n)   { background: var(--bear); }
.sprinkles i:nth-child(3n+1) { background: var(--honey-lit); }
.sprinkles i:nth-child(4n)   { width: .38rem; height: .38rem; border-radius: 999px; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes sprinkle-drift {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50%      { transform: translateY(-10px) rotate(calc(var(--rot, 0deg) + 25deg)); }
  }
  .sprinkles i { animation: sprinkle-drift var(--dur, 7s) var(--ease) infinite; animation-delay: var(--del, 0s); }
}

/* A hand-drawn-feeling underline for the word we want to sing. */
.squiggle {
  position: relative;
  white-space: nowrap;
}
.squiggle::after {
  content: "";
  position: absolute;
  left: -.08em; right: -.08em; bottom: -.18em;
  height: .34em;
  background-repeat: repeat-x;
  background-size: 1.1em .34em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 7'%3E%3Cpath d='M0 4.2c3-3.4 5.6 2.4 8.5 0S17 .6 22 3.4' fill='none' stroke='%23E5798F' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.squiggle--teal::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 7'%3E%3Cpath d='M0 4.2c3-3.4 5.6 2.4 8.5 0S17 .6 22 3.4' fill='none' stroke='%232E9EA0' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes squiggle-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .is-in .squiggle::after, .squiggle::after { animation: squiggle-in .9s var(--ease-out) both; }
}

/* -------------------------------------------------------- livelier cards */

.card { transition: transform .5s var(--bounce); }
.card:hover, .card:focus-visible { transform: translateY(-8px) rotate(-.7deg); }
.card__media { box-shadow: 0 18px 40px -28px rgba(16,27,51,.7); }
.card:nth-child(even):hover { transform: translateY(-8px) rotate(.7deg); }

.card__tag {
  background: var(--bear);
  color: #fff;
  transition: transform .4s var(--bounce), background .4s var(--ease);
}
.card:nth-child(3n+2) .card__tag { background: var(--sprinkle); }
.card:nth-child(3n)   .card__tag { background: var(--honey); }
.card:hover .card__tag { transform: rotate(-3deg) scale(1.06); }

/* Gallery tiles get a gentle tilt and a warm wash on hover. */
.gallery figure { transition: transform .5s var(--bounce), box-shadow .5s var(--ease); }
.gallery figure:hover { transform: translateY(-6px) rotate(1deg); box-shadow: 0 22px 44px -30px rgba(16,27,51,.75); }
.gallery figure:nth-child(even):hover { transform: translateY(-6px) rotate(-1deg); }

/* --------------------------------------------------------- colour accents */

.marquee { background: var(--bear); border-block-color: rgba(255, 255, 255, .28); }
.marquee__track span { color: #FFFFFF; }
.marquee__track span::after { background: var(--sprinkle-lit); }

.chip:hover { border-color: var(--bear); color: var(--bear); }
.chip[aria-pressed="true"] { background: var(--bear); border-color: var(--bear); color: #fff; }

.flag--fav { color: var(--sprinkle-deep); border-color: var(--sprinkle-lit); background: var(--sprinkle-wash); }

.cloud li { transition: transform .35s var(--bounce), background .35s var(--ease), color .35s var(--ease); }
.cloud li:hover { transform: translateY(-3px) rotate(-2deg); background: var(--bear-wash); color: var(--bear-deep); }

.rating-summary__score { color: var(--bear); }
.stars { color: var(--honey-lit); }
.testimonials__dots button[aria-current="true"] { background: var(--bear); }
.testimonial { transition: transform .5s var(--bounce), border-color .4s var(--ease); }
.testimonial:hover { transform: translateY(-4px); border-color: var(--bear-lit); }

.cred__icon { color: var(--bear-lit); }
.cred:nth-child(even) .cred__icon { color: var(--sprinkle-lit); }

/* Buttons get a little give when pressed. */
.btn { transition: color .45s var(--ease), border-color .45s var(--ease), transform .18s var(--bounce); }
.btn:active { transform: scale(.96); }

/* Section links pick up the brand teal. */
.link { color: var(--bear-deep); }

/* --------------------------------------------------- staggered reveals */

@media (prefers-reduced-motion: no-preference) {
  .cards > [data-reveal]:nth-child(2) { transition-delay: 90ms; }
  .cards > [data-reveal]:nth-child(3) { transition-delay: 180ms; }
  .cards > [data-reveal]:nth-child(4) { transition-delay: 270ms; }
  .creds > [data-reveal]:nth-child(2) { transition-delay: 90ms; }
  .creds > [data-reveal]:nth-child(3) { transition-delay: 180ms; }
  .creds > [data-reveal]:nth-child(4) { transition-delay: 270ms; }

  .gallery[data-reveal] figure {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s var(--ease-out), transform .7s var(--bounce);
  }
  .gallery[data-reveal].is-in figure { opacity: 1; transform: none; }
  .gallery[data-reveal] figure:nth-child(2) { transition-delay: 80ms; }
  .gallery[data-reveal] figure:nth-child(3) { transition-delay: 160ms; }
  .gallery[data-reveal] figure:nth-child(4) { transition-delay: 240ms; }
  .gallery[data-reveal] figure:nth-child(5) { transition-delay: 320ms; }
  .gallery[data-reveal] figure:nth-child(6) { transition-delay: 400ms; }
}

/* The teal band now ends in a scalloped edge, like the paper under a cake.
   Done as a pseudo-element so every page picks it up without markup. */
.marquee { position: relative; padding-bottom: 1.9rem; }
.marquee::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: .9rem;
  background: var(--cream);
  -webkit-mask-image: radial-gradient(circle at 50% 0, transparent 66%, #000 67%);
  mask-image: radial-gradient(circle at 50% 0, transparent 66%, #000 67%);
  -webkit-mask-size: 1.8rem .9rem;
  mask-size: 1.8rem .9rem;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
/* Inner pages open on an ink hero, so the band scallops into cream there too. */
.page-hero + .marquee::after { background: var(--cream); }

/* Sprinkles sit over the hero art without catching clicks. */
.hero .sprinkles, .page-hero .sprinkles { z-index: 2; }
.hero__inner, .page-hero__inner { position: relative; z-index: 3; }

/* The old brand mark was a simple glyph that read fine at 34px. The real logo
   is a detailed illustration, so it needs a little more room to be legible. */
.brand__mark { width: 3.1rem; height: 3.1rem; }
.is-stuck .brand__mark { width: 2.6rem; height: 2.6rem; }

/* A soft pink ground under the reviews, so the page is not all cream. */
.section--sprinkle { background: var(--sprinkle-wash); }

/* =====================================================================
   18. Hero collage — one image could not show the range, so the hero is
   now a mosaic of eight. The scrim over it is heavier than the single
   image needed, because the tiles are busier behind the headline.
   ===================================================================== */

.hero__collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
  will-change: transform;
}
@media (min-width: 40rem) { .hero__collage { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .hero__collage { grid-template-columns: repeat(4, 1fr); } }

.hero__collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* .hero__media img carries the parallax scale; on the collage the grid
     itself is the thing that moves, so the tiles sit flat. */
  transform: none;
  will-change: auto;
}
/* Below the 4-column breakpoint eight tiles get too tall and thin, so the
   last two drop out and the grid stays 2 or 3 even rows. */
@media (max-width: 63.99rem) {
  .hero__collage img:nth-child(n + 7) { display: none; }
}

.hero--collage .hero__media::after {
  background: linear-gradient(to top,
    rgba(16, 27, 51, .96) 0%,
    rgba(16, 27, 51, .86) 28%,
    rgba(16, 27, 51, .70) 62%,
    rgba(16, 27, 51, .60) 100%);
}

/* The location line reads as a quiet label, not a gold flourish. */
.hero .eyebrow {
  color: var(--text-on-ink);
  font-weight: 500;
  letter-spacing: .22em;
  opacity: .9;
}

/* The teal band's bottom border was drawing a line beneath the scallops.
   The scalloped edge is the edge — it does not need a rule under it. */
.marquee { border-block-end: 0; }
.marquee::after { bottom: -1px; }

/* =====================================================================
   19. Footer — the same information, arranged with more personality.
   ===================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4.5rem, 8vw, 7rem);
}

/* A doily edge along the top, in the same language as the marquee band.
   The CTA section above is also ink, so this butter strip is what marks
   the join rather than a colour change. */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: .95rem;
  background: var(--butter);
  -webkit-mask-image: radial-gradient(circle at 50% 0, #000 66%, transparent 67%);
  mask-image: radial-gradient(circle at 50% 0, #000 66%, transparent 67%);
  -webkit-mask-size: 1.9rem .95rem;
  mask-size: 1.9rem .95rem;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

.site-footer .wrap { position: relative; z-index: 2; }
.site-footer .sprinkles { z-index: 1; }
.site-footer .sprinkles i { opacity: .5; }

/* An oversized wordmark bleeding off the bottom edge. Outlined rather than
   filled so it stays a texture and never competes with the real content. */
.footer-watermark {
  position: absolute;
  left: 50%;
  bottom: -.22em;
  transform: translateX(-50%);
  margin: 0;
  z-index: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(5rem, 21vw, 17rem);
  line-height: .78;
  white-space: nowrap;
  color: rgba(243, 230, 206, .045);
  -webkit-text-stroke: 1.5px rgba(243, 230, 206, .10);
  pointer-events: none;
  user-select: none;
}

.footer-about .brand { margin-bottom: 1.5rem; }
.footer-status { margin-top: 1.5rem; }
.site-footer h4 { color: var(--bear-lit); }

/* Links nudge over on hover instead of just changing colour. */
.site-footer ul a {
  display: inline-block;
  transition: transform .32s var(--bounce), color .3s var(--ease);
}
.site-footer ul a:hover { transform: translateX(5px); color: var(--bear-lit); }
.site-footer .hours li[data-today="true"] { color: var(--bear-lit); }

/* Each social gets its own colour on hover — teal, pink, honey. */
.socials a:hover                { background: var(--bear);     border-color: var(--bear);     color: #fff; }
.socials a:nth-child(2):hover   { background: var(--sprinkle); border-color: var(--sprinkle); color: #fff; }
.socials a:nth-child(3):hover   { background: var(--honey);    border-color: var(--honey);    color: #fff; }
.socials a:hover { transform: translateY(-3px) rotate(-6deg); }

.footer-cta { margin-top: 1.6rem; padding: .85em 1.6em; }

.footer-base { align-items: center; }
.footer-tag { letter-spacing: .04em; }
.footer-top {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--step--1);
  color: var(--bear-lit);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: transform .32s var(--bounce), color .3s var(--ease);
}
.footer-top::after { content: "\2191"; font-size: 1.05em; }
.footer-top:hover { transform: translateY(-3px); color: var(--butter); }

@media (max-width: 55.99rem) {
  .footer-watermark { font-size: clamp(4rem, 30vw, 9rem); }
}