/* ==========================================================================
   Kitty Brew Cat Café — site styles (design E)
   ==========================================================================
   Sections in this file:
     1. Colors, fonts & sizes      7. Inner pages (Visit, Menu, Kitty Cam, FAQ)
     2. Base                       8. Mural band
     3. Helpers                    9. Footer
     4. Buttons                   10. Phone action bar
     5. Header                    11. Responsive (smaller screens)
     6. Homepage                  12. CAT ART & DECORATIONS: sizes & positions

   Units: font sizes and spacing use rem (1rem = the browser's base text size,
   16px by default) so they grow if a visitor enlarges their text. Divide px by
   16 to convert: 24px = 1.5rem. Borders, page-edge gutters, header heights and
   illustration sizes stay in px. Breakpoints use em for the same reason.
   ========================================================================== */


/* ==========================================================================
   1. COLORS, FONTS & SIZES
   ========================================================================== */

:root {
  /* Palette taken from Bright Wall Collective's original mural files */
  --wall: #e6eeee;            /* pale mint-grey walls: main page background */
  --lavender: #bac6e4;        /* big soft leaf shapes */
  --periwinkle: #8484c0;      /* periwinkle flower splashes */
  --periwinkle-dark: #6a69ae; /* "Open now" bar: deep enough for white text (4.95:1 contrast) */
  --periwinkle-deep: #3f3d86; /* subheadings */
  --night: #2b2a55;           /* deep indigo blocks (replaces the old black) */
  --night-soft: #3d3c7a;      /* slightly lighter indigo, for shapes on indigo */
  --mustard: #d2ae2a;         /* yellow flowers */
  --sage: #72907e;
  --teal: #2a7e84;
  --orange: #d27230;          /* orange flower splash, rug */
  --terracotta: #b45a2a;      /* darker orange: buttons (readable with white text) */
  --terracotta-dark: #96481f; /* button hover */
  --tangerine: #f0ae5a;       /* orange tabby fur: accents on indigo */
  --ink: #1d1a18;             /* main text */
  --muted: #5d5b6e;           /* secondary text */
  --on-night: #dcdbf6;        /* body text on indigo */
  --white: #fff;

  /* Supporting colors: lines, status lights and small print */
  --line: #cfd9da;            /* thin divider lines on the wall color */
  --line-dark: #b4c0cf;       /* dotted leader lines on the menu */
  --ink-soft: #3a3846;        /* menu item descriptions */
  --muted-on-night: #aaa9c8;  /* small print on indigo */
  --night-deep: #1c1b38;      /* behind the Kitty Cam video */
  --status-open: #7ff0a6;     /* green dot: "Open now" */
  --status-closed: #b9b8d8;   /* grey dot: closed */
  --live-red: #e53935;        /* pulsing dot on the Kitty Cam's "Live" label */

  --font-display: "Bebas Neue", Impact, sans-serif;
  --font-hand: "Patrick Hand SC", "Comic Sans MS", cursive;   /* like the mural lettering */
  --font-body: "Roboto", system-ui, sans-serif;
  /* Kitty Brew's brand lettering is Montserrat Alternates with five letters
     (a, E, Q, T, Z/z) swapped in from regular Montserrat. Each page loads a
     tiny Montserrat file with only those letters, and it's listed first: the
     browser takes each letter from the first font that has it, so those six
     come from Montserrat and every other letter falls back to Alternates. */
  --font-brand: "Montserrat", "Montserrat Alternates", sans-serif;

  --container: 1140px;
  /* Header heights stay in px: js/main.js reads these to know when to shrink the header. */
  --header-h: 116px;
  --header-h-small: 64px;

  --radius: 1.375rem;         /* rounded corners on cards and photos */
  --shadow: 0 0.5rem 1.5rem rgba(40, 40, 90, 0.08);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-small) + 2.5rem);
}

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.05;
  margin: 0 0 0.35em;
  text-wrap: balance;   /* when a heading wraps, even out the lines so no word sits alone */
}

p {
  margin: 0 0 1em;
}

section {
  position: relative;
}


/* ==========================================================================
   3. HELPERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* A section's content sits on a layer above its decorations (the painted
   leaves, flowers and side cats placed directly in the section). Without this,
   those positioned decorations would paint on top of headings and text where
   they overlap, which happens on phones where the margins are narrow. */
section > .container,
.section > .container {
  position: relative;
  z-index: 1;
}

/* Icons: each is an <svg> that draws one shape from images/icons.svg, e.g.
   <svg class="icon" aria-hidden="true"><use href="images/icons.svg#phone"></use></svg>
   They're sized in em, so they scale with the text around them, and
   currentColor makes them the same color as that text. */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;   /* sit on the text's baseline like a letter */
  fill: currentColor;
}

/* Hides text visually but keeps it for screen readers (e.g. the menu
   button's "Main menu" label) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 200;
  transform: translateY(calc(-100% - 24px)); /* hidden above the page until focused */
  background: var(--night);
  color: var(--white);
  padding: 0.625rem 1rem;
  text-decoration: none;
  border-radius: 0.5rem;
}

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

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

.hand {
  font-family: var(--font-hand);
  font-variant-ligatures: no-common-ligatures;   /* this font's joined "ff" looks like the letters overlap */
}

/* Subheading in the mural's hand-lettered style (small, used sparingly) */
.sub {
  text-align: center;
  font-family: var(--font-hand);
  font-variant-ligatures: no-common-ligatures;
  font-size: 1.4rem;
  color: var(--periwinkle-deep);
  margin-bottom: 2rem;
}

/* Sections fade up as they scroll into view (see initReveal in main.js).
   The starting "hidden" state only applies when the html element has the
   class "js", which main.js adds as soon as it runs. If the script never
   loads, these sections simply stay visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Painted cats and decorative leaves/flowers: positioned in section 12 */
.art,
.deco {
  position: absolute;
  pointer-events: none;
  height: auto;
}

.art {
  z-index: 3;
  filter: drop-shadow(0 10px 16px rgba(20, 20, 60, 0.18));
}

.deco {
  z-index: 0;
}

.deco-dim {
  opacity: 0.16; /* lavender leaves turned into a subtle texture on indigo */
}

/* The wavy edge under the hero / page headers */
/* The wavy edge under the hero and page headers: an empty <div class="wave">
   drawn entirely here. Each layer is a shape from an SVG file used as a mask
   (a cut-out), filled with a color token, so the colors live in one place. */
.wave {
  position: relative;
  height: 70px;
  margin-top: -1px;
}

.wave::before,
.wave::after {
  content: "";
  position: absolute;
  inset: 0;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;   /* stretch the wave across the full width */
}

.wave::before {
  background: var(--night);
  mask-image: url("../images/art/wave-edge.svg");
}

.wave::after {
  background: var(--lavender);
  mask-image: url("../images/art/wave-line.svg");
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8rem 1.4rem;
  background: var(--terracotta);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 1.5px;
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--terracotta);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.btn:hover {
  background: var(--terracotta-dark);
  border-color: var(--terracotta-dark);
}

.btn:active {
  transform: translateY(1px);
}

.btn-small {
  font-size: 1rem;
  padding: 0.6rem 1.05rem;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: var(--ink);
}

.btn-dark {
  background: var(--night);
  border-color: var(--night);
}

.btn-dark:hover {
  background: var(--night-soft);
  border-color: var(--night-soft);
}

/* Ghost and outline buttons that sit on indigo */
.on-night .btn-ghost,
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}

.on-night .btn-ghost:hover,
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}


/* ==========================================================================
   5. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wall);
  transition: box-shadow 0.25s, margin-bottom 0.25s;
}

/* When the header shrinks, the margin takes up the space it gave back, so the
   page below never moves. (If it moved, the browser would nudge the scroll
   position back above the switch point and the header would flicker.) */
.site-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(20, 20, 60, 0.12);
  margin-bottom: calc(var(--header-h) - var(--header-h-small));
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  transition: height 0.25s;
}

.site-header.is-scrolled .site-header-inner {
  height: var(--header-h-small);
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-logo {
  height: 96px;
  width: auto;
}

.brand-word {
  display: none;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
}

.site-header.is-scrolled .brand-logo {
  display: none;
}

.site-header.is-scrolled .brand-word {
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-list {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.2s;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--terracotta-dark);   /* darker so it passes contrast on the pale wall (5.5:1) */
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
}

/* The button holds both icons; CSS shows one based on aria-expanded, which
   main.js sets to "true" when the menu opens: ☰ when closed, ✕ when open. */
.nav-toggle .icon-xmark,
.nav-toggle[aria-expanded="true"] .icon-bars {
  display: none;
}

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

/* "Open now" bar under the header */
.today-bar {
  background: var(--periwinkle-dark);
  color: var(--white);
  font-size: 0.875rem;
  line-height: 1.4;
}

.today-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem 1.125rem;
  padding: 0.5rem 24px;
}

.today-bar a {
  color: var(--white);
  text-underline-offset: 3px;
}

.today-bar strong {
  font-weight: 700;
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.375rem;
  vertical-align: 1px;
  background: var(--status-closed);
}

.status-dot.is-open {
  background: var(--status-open);
  box-shadow: 0 0 0 3px rgba(127, 240, 166, 0.3);
}

.today-bar-sep {
  opacity: 0.6;
}


/* ==========================================================================
   6. HOMEPAGE
   ========================================================================== */

/* ---- Hero: indigo text panel + photo (a different photo each visit) ---- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--night);
  color: var(--white);
  min-height: 38.75rem;
  overflow: hidden;
}

.hero-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.375rem 3.75rem 5rem max(24px, calc((100vw - var(--container)) / 2 + 24px));
}

.hero h1 {
  font-size: clamp(3.2rem, 6vw, 5.4rem);
}

.hero h1 span {
  display: block;
}

/* each line of the headline gets its own mural color */
.hero h1 span:nth-child(1) { color: var(--tangerine); }
.hero h1 span:nth-child(2) { color: var(--lavender); }
.hero h1 span:nth-child(3) { color: var(--mustard); }

.hero-lead {
  color: var(--on-night);
  max-width: 28rem;
  font-size: 1.08rem;
}

.hero-note {
  margin: 0.25rem 0 1.4rem;
}

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

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-media {
  position: relative;
  overflow: hidden;
  background: var(--night-soft);
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* main.js adds the photo; it fades in once it has downloaded. Scoped to .js
   so the no-JavaScript photo in the <noscript> is never left invisible. */
.js .hero-photo {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.js .hero-photo.is-loaded {
  opacity: 1;
}

/* ---- How it works ---- */
.how {
  text-align: center;
  padding: 0.625rem 0 5rem;
  overflow: hidden;
}

.how-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.step-art {
  height: 200px;
  margin: 0 auto 0.875rem;
}

.step-art img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

.step:hover .step-art img {
  transform: rotate(-3deg) scale(1.04);
}

.step h3 {
  font-size: 2.1rem;
}

/* The Café, The Lounge and Adoptions headings each get their own color */
.step:nth-child(1) h3 { color: var(--terracotta); }
.step:nth-child(2) h3 { color: var(--periwinkle-deep); }
.step:nth-child(3) h3 { color: var(--teal); }

.step p {
  max-width: 19rem;
  margin: 0 auto;
}

/* ---- Making a difference: photo + indigo panel ---- */
.impact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--night);
  color: var(--white);
}

.impact-media {
  position: relative;
  min-height: 33.75rem;
}

.impact-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

.impact-text {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.375rem max(24px, calc((100vw - var(--container)) / 2 + 24px)) 4.375rem 5rem;
}

.impact-num {
  font-family: var(--font-display);
  font-size: 6.5rem;
  line-height: 0.9;
  color: var(--mustard);
}

.impact-num small {
  display: block;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--lavender);
}

.impact h2 {
  font-size: 2.6rem;
  margin-top: 0.875rem;
}

.impact p {
  color: var(--on-night);
}

.impact p strong {
  color: var(--white);
}

.impact-price {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 1.125rem;
  padding: 0.875rem 1.125rem;
  margin: 0.375rem 0 1.375rem;
  color: var(--on-night);
}

/* ---- Step inside the lounge: photo gallery ---- */
.gallery-sec {
  padding: 5.625rem 0 4.375rem;
  overflow: hidden;
}

.gallery {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-auto-rows: 13.75rem;
  gap: 1rem;
}

.gallery figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

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

.gallery .tall {
  grid-row: span 2;
}

.gallery figcaption {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  background: var(--white);
  border-radius: 99px;
  padding: 0.2rem 0.75rem;
  font-family: var(--font-hand);
  font-variant-ligatures: no-common-ligatures;
  font-size: 1.05rem;
}

/* ---- Reviews carousel (main.js adds the buttons, dots and auto-advance) ---- */
.reviews {
  padding: 0.625rem 0 4.375rem;
  overflow: hidden;
}

/* The reviews sit side by side in a row that scrolls sideways, 3 at a time
   (2 on tablets, 1 on phones). scroll-snap makes each swipe or scroll stop
   neatly on a card. main.js adds the buttons, dots and auto-advance. */
.review-carousel {
  position: relative;
  z-index: 1;
}

.review-cards {
  --visible: 3;
  --gap: 1.5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;            /* hide the scrollbar (Firefox) */
  padding: 0.75rem 0 2rem;          /* room for the card shadows… */
  margin: -0.75rem 0 -1.25rem;      /* …without adding space around the row */
}

.review-cards::-webkit-scrollbar {
  display: none;                    /* hide the scrollbar (Chrome, Safari) */
}

.review-cards:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 4px;
}

.review {
  scroll-snap-align: start;
  margin: 0;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.625rem;
  box-shadow: var(--shadow);
}

.review blockquote {
  margin: 0;
}

.review figcaption {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.5px;
  color: var(--periwinkle-deep);
  margin-top: 0.625rem;
}

/* Previous / pause / next buttons and the dots under the reviews */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.carousel-controls[hidden] {
  display: none;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--periwinkle-deep);
  color: var(--white);
  font-size: 0.95rem;
  cursor: pointer;
}

.carousel-btn:hover {
  background: var(--night);
}

.carousel-dots {
  display: flex;
  gap: 0.25rem;
}

/* Each dot is a 24px button (easy to tap) with a small circle drawn inside */
.carousel-dots button {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel-dots button::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--lavender);
}

.carousel-dots [aria-current="true"]::before {
  background: var(--terracotta);
}

/* ---- Instagram ---- */
.insta {
  padding: 5.625rem 0 4.375rem;
  overflow-x: clip;
}

.insta-card {
  position: relative;
  background: var(--white);
  border-radius: 1.625rem;
  padding: 1.625rem 1.75rem 1.875rem;
  box-shadow: var(--shadow);
}

.insta-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
}

.insta-head h2 {
  font-size: 2.4rem;
  margin: 0;
}

/* the Instagram and Facebook buttons, side by side (they wrap on narrow screens) */
.insta-follow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.insta-head .hand {
  display: block;
  margin-top: -0.25rem;
  font-size: 1.25rem;
  color: var(--periwinkle-deep);
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
}

/* Each tile is a link: a square photo and, for posts from the Instagram feed,
   a <figure> with the start of the caption underneath (see initInstagram) */
.insta-grid a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.insta-grid figure {
  margin: 0;
}

.insta-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.875rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.insta-grid a:hover img {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* the caption, cut off with "…" after two lines */
.insta-grid figcaption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.insta-grid a:hover figcaption {
  color: var(--ink);
}

/* ---- Find us: address + map (homepage and Visit page) ---- */
.location {
  padding: 7.5rem 0 5rem;
  overflow: hidden;
}

.location .container {
  position: relative;
}

.loc-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  background: var(--night);
  color: var(--white);
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: 0 0.625rem 1.875rem rgba(20, 20, 60, 0.15);
}

.loc-text {
  position: relative;
  overflow: hidden;
  padding: 2.875rem 2.75rem;
}

.loc-text h2 {
  font-size: 3rem;
  color: var(--mustard);
  margin-bottom: 0;
}

.loc-text .hand {
  display: block;
  margin-bottom: 1.125rem;
  font-size: 1.3rem;
  color: var(--lavender);
}

.loc-text address {
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/* the café's name, in the brand lettering */
.loc-text address strong {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
}

.loc-text .landmarks {
  color: var(--on-night);
  font-size: 0.95rem;
  margin-bottom: 1.375rem;
}

.loc-map {
  min-height: 23.75rem;
}

.loc-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ==========================================================================
   7. INNER PAGES
   ========================================================================== */

/* ---- Page header: indigo band with a painted cat, then the wavy edge ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--white);
  text-align: center;
  padding: 4rem 0 2.5rem;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: clamp(3.5rem, 8vw, 5.4rem);
  color: var(--tangerine);
  margin-bottom: 0.15em;
}

.page-hero p {
  max-width: 45rem;
  margin: 0 auto 0.75rem;
  color: var(--on-night);
  font-size: 1.06rem;
}

.page-hero p strong {
  color: var(--white);
}

.page-hero .hero-actions {
  justify-content: center;
  margin-top: 1.375rem;
}

/* ---- 404 page (<main class="not-found">) ---- */
.not-found .error-code {
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: var(--lavender);
}

.not-found h1 {
  max-width: 14em;
  margin-inline: auto;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
}

.not-found .error-note {
  font-size: 0.95rem;
  color: var(--muted-on-night);
}

.not-found .hero-actions {
  justify-content: center;
}

/* the kitten tips its mug back and forth */
.cat-page-404 {
  transform-origin: bottom center;
  animation: tip-mug 3s ease-in-out infinite;
}

@keyframes tip-mug {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

.section {
  position: relative;   /* also set on every <section>; this covers <div class="section"> */
  padding: 1.875rem 0 4.375rem;
  overflow-x: clip;   /* side decorations can hang off the edge without a sideways scrollbar */
}

.section-flush-top {
  padding-top: 0;
}

.section-night {
  background: var(--night);
  color: var(--white);
  padding: 4.5rem 0 4.5rem;
  overflow: hidden;
}

/* Main heading for a page section (used on every page) */
.section-title {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1.75rem;
}

/* When a hand-lettered subheading follows, the two sit together.
   :has() selects the title only if a .sub comes right after it. */
.section-title:has(+ .sub) {
  margin-bottom: 0;
}

.section-night .section-title {
  color: var(--tangerine);
}

/* Jump links at the top of the Menu and FAQ pages */
.jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

.jump a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 1px;
  line-height: 1;
  padding: 0.6rem 1rem 0.55rem;
  border-radius: 99px;
  background: var(--white);
  color: var(--periwinkle-deep);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(40, 40, 90, 0.06);
  transition: background 0.2s, color 0.2s;
}

.jump a:hover {
  background: var(--periwinkle-deep);
  color: var(--white);
}

/* ---- Visit page: booking ---- */
.book {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2.5rem;
  align-items: start;
}

.facts {
  position: sticky;
  top: calc(var(--header-h-small) + 3.5rem);
}

.facts-list {
  margin: 0 0 1.375rem;
}

/* each <div> holds one <dt> fact and its <dd> description */
.facts-list div {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
}

.facts-list div:first-child {
  padding-top: 0;
}

.facts-list dt {
  font-family: var(--font-display);
  font-size: 2.125rem;
  line-height: 1;
  color: var(--terracotta);
}

.facts-list dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.facts .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 0.625rem;
}

.book-widget {
  min-height: 30rem;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.125rem;
  box-shadow: var(--shadow);
}

.book-widget h2 {
  font-size: 2.375rem;
  margin-bottom: 0.25rem;
}

.book-widget > p {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-bottom: 0.875rem;
}

.book-help {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

/* ---- Visit page: policy cards ---- */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.625rem;
}

.card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 1.75rem 1.875rem;
  color: var(--on-night);
}

.card h3 {
  font-size: 2.125rem;
  color: var(--mustard);
  margin-bottom: 0.3em;
}

.card strong {
  color: var(--white);
}

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

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

.card ul {
  padding-left: 1.1em;
  margin: 0 0 1em;
}

.card li {
  margin-bottom: 0.375rem;
  line-height: 1.6;
}

.card li::marker {
  color: var(--tangerine);
}

.card-wide {
  grid-column: 1 / -1;
}

.card-with-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  overflow: hidden;
}

.card-with-photo > div {
  padding: 1.75rem 1.875rem;
}

.card-with-photo > img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

/* A photo at the bottom of a regular card. It grows to fill any empty space
   when the card beside it is taller. */
.card:has(.card-photo) {
  display: flex;
  flex-direction: column;
}

.card-photo {
  flex-grow: 1;
  width: 100%;
  height: 12rem;   /* starting height; flex-grow stretches it to fill the card */
  margin-top: 0.5rem;
  border-radius: calc(var(--radius) / 2);
  object-fit: cover;
}

.card-note {
  font-size: 0.875rem;
  color: var(--muted-on-night);
}

.big {
  font-family: var(--font-display);
  font-size: 3.625rem;
  line-height: 1;
  color: var(--white);
  margin: 0.25rem 0 0.5rem;
}

.big small {
  font-size: 1.375rem;
  letter-spacing: 1px;
  color: var(--lavender);
}

.rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem 1.75rem;
  list-style: none;
  margin: 0.625rem 0 0;
  padding: 0;
}

.rules li {
  position: relative;
  margin: 0;
  padding-left: 1.875rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* a paw print before each rule: the shape comes from paw.svg (as a mask),
   the color from the token */
.rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  background: var(--tangerine);
  mask: url("../images/paw.svg") center / contain no-repeat;
}

.rules strong {
  display: block;
  margin-bottom: 0.125rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.included {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1.25rem;
  list-style: none;
  margin: 0.75rem 0 1rem;
  padding: 0;
}

.included li {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.included .icon {
  color: var(--tangerine);
}

/* ---- Menu page ---- */
.menu-section {
  margin-bottom: 3.5rem;
  scroll-margin-top: calc(var(--header-h-small) + 3rem);
}

.menu-section > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 3px solid var(--periwinkle-deep);
  padding-bottom: 0.375rem;
  margin-bottom: 1.375rem;
}

.menu-section > header h2 {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  font-size: 2.875rem;
  color: var(--terracotta);
  margin: 0;
}

/* A cat mug from the Kitty Brew logo sits after each heading, on its
   underline like a mug on a shelf. Which mug goes with which section is set in section 12. */
.menu-section > header h2::after {
  content: "";
  flex-shrink: 0;
  height: 1.6em;
  aspect-ratio: 95 / 98;
  margin-bottom: -0.15em;   /* down onto the line (cancels the header's padding) */
  background: var(--mug) bottom / contain no-repeat;
}

.menu-section > header p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 1px;
  color: var(--muted);
  white-space: nowrap;
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.625rem 3.5rem;
}

/* Each item: name, dotted leader, and price on the first row;
   the description spans the full width below */
.menu-grid > li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  align-content: start;   /* stay at the top when the item beside it is taller */
  column-gap: 0.625rem;
}

.menu-grid h3 {
  font-size: 1.875rem;
  margin: 0 0 0.125rem;
}

/* dotted leader line between the item name and its price */
.menu-grid > li::before {
  content: "";
  grid-row: 1;
  grid-column: 2;
  min-width: 20px;
  border-bottom: 2px dotted var(--line-dark);
  transform: translateY(-6px);
}

.menu-grid p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.menu-grid .price {
  grid-row: 1;
  grid-column: 3;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
}

.menu-grid .flavors {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.menu-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ---- Kitty Cam page ---- */
.cam {
  max-width: 1080px;
  margin: 0 auto;
}

.cam-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--night-deep);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0.625rem 2.5rem rgba(20, 20, 60, 0.25);
}

.cam-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--night-deep);
}

.cam-live {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 1.5px;
  line-height: 1;
  padding: 0.375rem 0.7rem 0.3rem;
  border-radius: 99px;
}

.cam-live::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live-red);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  50% { opacity: 0.3; }
}

.cam-offline {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(rgba(43, 42, 85, 0.82), rgba(43, 42, 85, 0.82)), url("../images/photos/grey-kitten-toy.webp") center / cover;
  color: var(--white);
}

.cam-offline h2 {
  font-size: 2.75rem;
  color: var(--tangerine);
  margin-bottom: 0.2em;
}

.cam-offline p {
  max-width: 28.75rem;
  margin: 0 auto;
  color: var(--on-night);
}

.cam.is-offline .cam-offline {
  display: grid;
}

.cam.is-offline .cam-live {
  display: none;
}

.cam-cta {
  justify-content: center;
  margin-top: 1.25rem;
}

.cam-intro {
  max-width: 47.5rem;
  margin: 2.125rem auto 0;
  text-align: center;
  font-size: 1.0625rem;
}

.support {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.support a {
  display: block;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem 1.625rem;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
}

.support a:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.875rem 1.875rem rgba(40, 40, 90, 0.12);
}

.support .icon {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 2.125rem;
  color: var(--terracotta);
}

.support h3 {
  font-size: 1.875rem;
  margin-bottom: 0.2em;
}

.support p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ---- FAQ page ---- */
.faq {
  max-width: 56.25rem;
  margin: 0 auto;
}

.faq-group {
  margin-bottom: 2.75rem;
  scroll-margin-top: calc(var(--header-h-small) + 3rem);
}

.faq-group > h2 {
  font-size: 2.75rem;
  color: var(--terracotta);
  border-bottom: 3px solid var(--periwinkle-deep);
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0.25rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.625rem;
  letter-spacing: 0.5px;
  line-height: 1.15;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.625rem;
  line-height: 1;
  color: var(--terracotta);
  transition: transform 0.2s;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  color: var(--periwinkle-deep);
}

.faq-answer {
  padding: 0 0.25rem 1.375rem;
}

.faq-answer ul {
  padding-left: 1.2em;
}

.faq-answer li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.faq-answer li::marker {
  content: "🐾  ";
}

.faq-links {
  display: grid;
  gap: 0.75rem;
  margin: 0.625rem 0;
}

.faq-links a {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
  text-decoration: none;
}

.faq-links a:hover {
  border-color: var(--terracotta);
}

.faq-links .icon {
  margin-top: 0.1875rem;
  font-size: 1.375rem;
  color: var(--terracotta);
}

.faq-links strong {
  display: block;
}

.faq-links span {
  display: block;
  font-size: 0.906rem;
  color: var(--muted);
  line-height: 1.5;
}

.faq-cta {
  margin-top: 1.25rem;
  padding: 2.125rem 1.25rem;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.faq-cta > img {
  width: 8rem;
  aspect-ratio: 1;
  margin: 0 auto 1rem;
  border-radius: 50%;
  object-fit: cover;
}

.faq-cta h2 {
  font-size: 2.5rem;
}


/* ==========================================================================
   8. MURAL BAND (above the footer on every page)
   ==========================================================================
   The images are added by main.js (see MURAL_BAND there) so the list lives in
   one place instead of being copied into all five pages. Each piece's size and
   position is set in section 12.
   ========================================================================== */

.band {
  position: relative;
  height: 290px;
  overflow: hidden;
}

.band-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 1400px);   /* below 1400px wide, the band just shows its middle */
}

.band img {
  position: absolute;
  bottom: 0;
  height: auto;
}

.band .lf { z-index: 1; }     /* lavender leaves */
.band .fl { z-index: 2; }     /* flowers */
.band .ct { z-index: 3; }     /* cats + props */
.band .ct.up { z-index: 4; }  /* the "floating" row overlaps the bottom row a little, like on the wall */


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.site-footer {
  position: relative;   /* so Will Feral's photo can sit in its bottom corner */
  background: var(--night);
  color: var(--on-night);
  padding: 3.125rem 0 1.75rem;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 2.25rem;
}

.site-footer h2 {
  font-size: 1.9rem;
  color: var(--mustard);
}

/* Hours lists are filled in by main.js from KB_HOURS */
.hours {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 2;
}

.hours li {
  display: grid;
  grid-template-columns: 7.5em 1fr;
}

.hours b {
  color: var(--white);
}

.hours li.is-today,
.hours li.is-today b {
  color: var(--tangerine);
}

.contact-list {
  list-style: none;
  margin: 0 0 1.125rem;
  padding: 0;
}

.contact-list li {
  margin-bottom: 0.5rem;
}

.contact-list a {
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
}

.contact-list a:hover {
  color: var(--tangerine);
}

.contact-list .icon {
  margin-right: 0.45em;
  color: var(--lavender);
}

.footer-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 1.375rem;
}

.follow {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-footer .follow h2 {
  margin: 0;
  font-size: 1.6rem;
}

.follow a {
  font-size: 1.4rem;
  color: var(--white);
  transition: color 0.2s, transform 0.2s;
}

.follow a:hover {
  color: var(--tangerine);
  transform: scale(1.1);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin-top: 2.375rem;
  padding-top: 1.125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: var(--muted-on-night);
}

.footer-legal a {
  color: var(--on-night);
}

/* the café's name in the copyright line, in the brand lettering */
.footer-legal .brand-name {
  font-family: var(--font-brand);
  font-weight: 600;
  color: var(--on-night);
}

/* In memory of Will Feral: a small cutout of him sits on the bottom edge of
   the page, in the footer's bottom-right corner */
.footer-will {
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  margin: 0;
}

.footer-will img {
  width: auto;
  height: 7rem;
}

/* The caption is a speech bubble above Will's head. It's invisible until
   someone hovers over him (screen readers read it either way). */
.footer-will figcaption {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: max-content;
  max-width: 13rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.875rem;
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--font-hand);
  font-variant-ligatures: no-common-ligatures;
  font-size: 1.05rem;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  transform: translateY(0.375rem);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

/* the bubble's little tail, pointing down at Will */
.footer-will figcaption::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 2.5rem;
  border: 0.5rem solid transparent;
  border-top-color: var(--white);
}

.footer-will strong {
  color: var(--terracotta);
  font-weight: 400;
}

/* the thank-you goes on its own line, a little smaller */
.footer-will figcaption span {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.footer-will:hover figcaption {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   10. PHONE ACTION BAR (Call / Directions / Book), hidden on larger screens
   ========================================================================== */

.action-bar {
  display: none;
}


/* ==========================================================================
   11. RESPONSIVE
   Breakpoints use em (1em = 16px at the default text size): if a visitor
   enlarges their text, the smaller-screen layout kicks in sooner.
   ========================================================================== */

@media (max-width: 86em) { /* 1376px: the margin is too narrow for Will, so the legal line makes room */
  .footer-legal {
    padding-right: 5.5rem;
  }
}

@media (max-width: 64em) { /* 1024px at default text size */
  .review-cards {
    --visible: 2;
  }

  .nav,
  .nav-list {
    gap: 1.125rem;
  }

  .nav-list a {
    font-size: 1.25rem;
  }

  .nav .btn {
    font-size: 0.95rem;
    padding: 0.55rem 0.8rem;
  }

  .brand-logo {
    height: 84px;
  }

  .rules {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 53.75em) { /* 860px */
  .footer-will {
    display: none;   /* no room beside the footer text on phones */
  }

  :root {
    --header-h: 88px;
    --header-h-small: 60px;
  }

  .brand-logo {
    height: 70px;
  }

  /* phone menu: the ☰ button shows, links drop down when it's tapped */
  .nav-toggle {
    display: block;
  }

  .nav .btn {
    display: none;   /* the action bar's Book button replaces it */
  }

  .nav-list {
    position: fixed;
    inset: var(--header-h-small) 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 24px 1.25rem;
    background: var(--wall);
    box-shadow: 0 12px 20px rgba(20, 20, 60, 0.15);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;   /* also removes the hidden links from keyboard Tab order and screen readers */
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }

  .site-header:not(.is-scrolled) .nav-list {
    top: var(--header-h);
  }

  .nav-list.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .nav-list a {
    display: block;
    padding: 0.625rem 0;
    font-size: 1.625rem;
    border-bottom: 1px solid var(--line);
  }

  /* homepage */
  .hero,
  .impact {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .hero-media {
    order: -1;
    aspect-ratio: 16 / 11;
  }

  .hero-text {
    padding: 2.75rem 24px 3.25rem;
  }

  .hero > .deco {
    display: none;   /* would land on top of the photo */
  }

  .impact-media {
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  .impact-text {
    padding: 3.25rem 24px;
  }

  .how-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .review-cards {
    --visible: 1;
  }

  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 10.625rem;
  }

  .loc-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .loc-text {
    padding: 2.25rem 1.625rem;
  }

  .loc-map {
    min-height: 18.75rem;
  }

  /* inner pages */
  .book,
  .policy-grid,
  .card-with-photo,
  .menu-grid,
  .support {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts {
    position: static;
  }

  .facts-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
  }

  .facts-list div {
    padding: 0 0 0.75rem;
  }

  .card-with-photo > img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  /* mural band + footer */
  .band {
    height: 232px;
  }

  .band-inner {
    transform: translateX(-50%) scale(0.8);
    transform-origin: bottom center;
  }

  .footer-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.875rem;
  }

  /* phone action bar, pinned to the bottom of the screen */
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); /* room for the iPhone home bar */
    background: var(--night);
    box-shadow: 0 -6px 18px rgba(20, 20, 60, 0.25);
  }

  .action-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.75rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 1px;
    line-height: 1;
    text-decoration: none;
  }

  .action-bar .icon {
    font-size: 1.1rem;
    color: var(--lavender);
  }

  .action-bar .action-bar-book {
    flex-direction: row;
    gap: 0.5rem;
    background: var(--terracotta);
    border-radius: 999px;
    font-size: 1.2rem;
  }

  .action-bar .action-bar-book .icon {
    color: var(--white);
  }

  body {
    padding-bottom: 4.625rem;   /* so the action bar never covers the end of the page */
  }
}

@media (max-width: 35em) { /* 560px */
  .carousel-dots {
    display: none;   /* too many to fit on a phone; the arrow buttons and swiping still work */
  }

  .container {
    padding: 0 16px;
  }

  .today-bar-inner {
    padding: 0.5rem 16px;
    font-size: 0.8125rem;
    gap: 0.125rem 0.75rem;
  }

  .today-bar-addr {
    display: none;
  }

  .hero-text,
  .impact-text {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .impact-num {
    font-size: 5rem;
  }

  .insta-card {
    padding: 1.25rem 1rem 1.5rem;
  }

  .insta-grid {
    grid-template-columns: 1fr 1fr;   /* two wide tiles a row, so two lines of caption say something */
    gap: 0.875rem 0.625rem;
  }

  .card,
  .card-with-photo > div {
    padding: 1.375rem 1.25rem;
  }

  .card-with-photo {
    padding: 0;
  }

  .rules,
  .included {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu-section > header h2 {
    gap: 0.5rem;
    font-size: 2.375rem;
  }

  .menu-section > header h2::after {
    height: 1.3em;
  }

  .menu-grid h3 {
    font-size: 1.625rem;
  }

  .menu-grid .price {
    font-size: 1rem;
  }

  .faq summary {
    font-size: 1.375rem;
  }

  .jump a {
    font-size: 1rem;
    padding: 0.5rem 0.75rem 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .hero-photo {
    transition: none;
  }

  .cat-page-404 {
    animation: none;
  }

  .footer-will figcaption {
    transition: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .step:hover .step-art img,
  .insta-grid a:hover img,
  .support a:hover {
    transform: none;
  }

  .cam-live::before {
    animation: none;
  }
}


/* ==========================================================================
   12. CAT ART & DECORATIONS: SIZES & POSITIONS  ← everything you'd want to
       tweak is here
   ==========================================================================
   How the numbers work:
     width    how big the drawing is. % = percent of the box it sits in
              (e.g. the hero photo); px = a fixed size.
     left / right / top / bottom
              distance from that edge of the box. Bigger number = further in
              from that edge. Negative numbers push it past the edge so it
              hangs off (that's how cats "cross" a photo's border).
              Use left OR right (not both), and top OR bottom.
     transform: scaleX(-1)    mirror the drawing left-to-right
     transform: rotate(-8deg)  tilt it (negative = counter-clockwise)
     z-index  stacking order: higher numbers sit on top of lower ones.
   Tip: in your browser, right-click a cat → Inspect, and you can change these
   values live to try them out before editing this file.
   ========================================================================== */


/* ---- "How it works" step drawings ----
   Each drawing fills a 200px-tall box (see .step-art). Use height to shrink
   one (e.g. 85%) and top / left to nudge it (e.g. top: 10px). */
.step-art .cat-step-cafe      { height: 100%; top: 0; left: 0; }  /* kitten + mug (cat-spilling-mug.webp) */
.step-art .cat-step-lounge    { height: 100%; top: 0; left: 0; }  /* napping orange cat (cat-napping.webp) */
.step-art .cat-step-adoptions { height: 100%; top: 0; left: 0; }  /* Siamese on teal cushion (cat-reaching.webp) */

/* ---- "Making a difference": cat on the photo's edge ---- */
.cat-impact { width: 26%; right: -9%; top: -7%; }  /* grey cat leaping off the yellow flower (cat-jumping.webp) */

/* ---- Reviews: cats peeking in from the sides (z-index 0 = behind the cards) ---- */
.cat-reviews-left  { width: 130px; left: 0; bottom: 10px; z-index: 0; }  /* tortie on the orange flower (cat-tortie-flower.webp) */
.cat-reviews-right { width: 190px; right: 0; top: 14px; z-index: 0; }    /* tortie with the yarn on the orange rug (cat-tortie.webp) */

/* ---- Instagram: cat peeking over the top of the card ---- */
.cat-insta { width: 140px; right: 40px; top: -96px; z-index: 0; }  /* white cat in the teal cave bed (cat-british-shorthair.webp) */

/* ---- Find Us: cat lounging on top of the map card ---- */
.cat-location { width: 170px; right: 60px; top: -112px; z-index: 2; }  /* cream cat on the purple cushion (cat-bed.webp) */

/* ---- Inner page headers: one painted cat in the corner of each ---- */
.cat-page-visit { width: 150px; right: 4%; bottom: 8px; }  /* calico in the fish box (cat-in-box.webp) */
.cat-page-menu  { width: 190px; right: 4%; bottom: 6px; }  /* kitten knocking over a mug (cat-spilling-mug.webp) */
.cat-page-cam   { width: 160px; right: 4%; bottom: 8px; }  /* black cat peeking over the fish pillow (cat-string.webp) */
.cat-page-404   { width: 190px; right: 4%; bottom: 6px; }  /* 404 page: kitten knocking over a mug (cat-spilling-mug.webp) */
.cat-page-faq   { width: 120px; right: 5%; bottom: 8px; }  /* cream cat looking up, curious (cat-ivan.webp) */

/* ---- Decorative leaves & flowers behind sections (Bright Wall's shapes) ----
   On indigo they use .deco-dim so they read as a subtle texture. */
.deco-hero-leaf   { width: 300px; left: -80px; bottom: -60px; transform: rotate(-20deg); }  /* leaves-03.svg */
.deco-hero-flower { width: 110px; left: 40%; top: 36px; }                                     /* flower-06.svg */
.deco-how-right   { width: 260px; right: -60px; top: 0; transform: rotate(25deg); }          /* leaves-03.svg */
.deco-how-left    { width: 170px; left: -50px; bottom: 20px; }                                /* leaves-05.svg */
.deco-how-flower  { width: 64px; left: 9%; top: 56px; }                                       /* flower-04.svg */
.deco-impact      { width: 240px; right: -50px; top: -40px; }                                 /* flower-01.svg (dimmed) */
.deco-gallery-leaf   { width: 300px; right: -90px; top: 70px; transform: rotate(-70deg); }    /* leaves-04.svg */
.deco-gallery-flower { width: 80px; left: 15%; top: 40px; }                                    /* flower-03.svg */
.deco-reviews-flower { width: 60px; left: 5%; top: 20px; }                                      /* flower-02.svg */
.deco-insta-left     { width: 240px; left: -90px; top: 46%; transform: rotate(-35deg); }        /* leaves-03.svg */
.deco-insta-right    { width: 70px; right: 6%; bottom: 10px; }                                  /* flower-05.svg */
/* Will Feral (cat-will-feral.webp), in memory of our most famous lounge cat.
   Wide screens: in the margin left of the photos. Narrower: perched on top of
   the big photo's corner (see the 88em block below). */
.gallery .cat-gallery { width: 150px; height: auto; right: calc(100% + 12px); bottom: 24px; }

@media (max-width: 88em) { /* 1408px: too narrow for the margin */
  .gallery .cat-gallery { width: 130px; right: auto; left: 1rem; bottom: calc(100% - 14px); }
}
.deco-loc-left    { width: 230px; left: -50px; top: 30px; }                                    /* leaves-04.svg */
.deco-loc-right   { width: 220px; right: -60px; bottom: 40px; transform: rotate(150deg); }    /* leaves-03.svg */
.deco-loc-card    { width: 190px; right: -50px; bottom: -60px; }                               /* flower-06.svg (dimmed) */
.deco-page-left   { width: 260px; left: -70px; bottom: -40px; transform: rotate(-15deg); }    /* inner page headers: leaves-04.svg (dimmed) */
.deco-page-right  { width: 110px; left: 12%; top: 30px; }                                      /* inner page headers: flower-06.svg (dimmed) */
.deco-night-left  { width: 280px; left: -80px; top: 40px; }                                    /* indigo sections: leaves-04.svg (dimmed) */
.deco-night-right { width: 220px; right: -60px; bottom: 40px; transform: rotate(150deg); }    /* indigo sections: leaves-05.svg (dimmed) */

/* ---- Café Menu & FAQ: leaves and flowers in the side margins, spaced down the page ----
   top is a % of the page's main section, so they spread out however long the page is.
   They're hidden on narrower screens (see the media queries below) so they never sit behind text. */
.deco-menu-1 { width: 230px; left: -80px; top: 2%; transform: rotate(80deg); }     /* leaves-04.svg */
.deco-menu-2 { width: 70px; right: 4%; top: 22%; }                                  /* flower-02.svg */
.deco-menu-3 { width: 180px; left: -70px; top: 46%; }                               /* leaves-05.svg */
.deco-menu-4 { width: 240px; right: -90px; top: 66%; transform: rotate(-120deg); }  /* leaves-03.svg */
.deco-menu-5 { width: 64px; left: 3.5%; top: 86%; }                                 /* flower-06.svg */

.deco-faq-1 { width: 260px; left: -80px; top: 4%; transform: rotate(60deg); }       /* leaves-03.svg */
.deco-faq-2 { width: 74px; right: 8%; top: 24%; }                                    /* flower-04.svg */
.deco-faq-3 { width: 190px; left: -60px; top: 56%; }                                 /* leaves-05.svg */
.deco-faq-4 { width: 250px; right: -80px; top: 78%; transform: rotate(-80deg); }    /* leaves-04.svg */

@media (max-width: 88em) { /* 1408px: the menu fills most of the width, so the margins are too narrow */
  .deco-menu-1, .deco-menu-2, .deco-menu-3, .deco-menu-4, .deco-menu-5 { display: none; }
}

@media (max-width: 75em) { /* 1200px: same for the FAQ's narrower column */
  .deco-faq-1, .deco-faq-2, .deco-faq-3, .deco-faq-4 { display: none; }
}

/* ---- Mural band above the footer ----
   left is a % of the band's width, so things stay spread out on any screen.
   bottom is px up from the band's bottom edge (the band is 290px tall, so
   keep bottom + the drawing's height under ~290px or it gets cut off).
   Which images appear is listed in MURAL_BAND in js/main.js. */

/* Cats: the bottom row sits at bottom: 0, the "floating" row at bottom: 148px */
.band .band-cat-cookie        { left: 0.5%;  width: 150px; bottom: 0; }
.band .band-cat-peaches       { left: 6%;    width: 84px;  bottom: 148px; }
.band .band-cat-in-box-02     { left: 11.6%; width: 122px; bottom: 0; }
.band .band-cat-stretching    { left: 21.6%; width: 100px; bottom: 148px; }
.band .band-cat-vlad          { left: 22.7%; width: 86px;  bottom: 0; }
.band .band-cat-behind-plant  { left: 33.8%; width: 142px; bottom: 0; }
.band .band-cat-string        { left: 37.2%; width: 104px; bottom: 148px; }
.band .band-tuxedo-box        { left: 44.6%; width: 152px; bottom: 0; }   /* "Deliver to: Kitty Brew Cat Café" */
.band .band-cat-ivan-blanket  { left: 52.8%; width: 116px; bottom: 148px; }
.band .band-cat-josie         { left: 56%;   width: 140px; bottom: 0; }
.band .band-cat-treat-bag     { left: 67.1%; width: 112px; bottom: 0; }
.band .band-cat-napping       { left: 68.4%; width: 112px; bottom: 148px; }
.band .band-cat-morticia      { left: 78.2%; width: 100px; bottom: 0; }
.band .band-cat-spilling-mug  { left: 84%;   width: 112px; bottom: 148px; }
.band .band-cat-sleepy        { left: 89.3%; width: 150px; bottom: -22px; transform: rotate(20deg); }  /* tilted so the cut-off edge sits flat on the bottom, like he's peeking up */

/* Little props tucked between the cats */
.band .band-toy-ball-1    { left: 20.6%; width: 22px; bottom: 0; }
.band .band-fishbone-01   { left: 29.6%; width: 52px; bottom: 6px; }
.band .band-toy-fish-1    { left: 75.4%; width: 34px; bottom: 8px; }
.band .band-fishbone-02   { left: 85.4%; width: 52px; bottom: 6px; }
.band .band-toy-ball-2    { left: 97.4%; width: 22px; bottom: 0; }

/* Lavender leaves (behind everything). Kept smaller and spaced out, alternating
   high and low, so each one reads as its own shape instead of a solid mass. */
.band .band-leaf-01 { left: -1%; width: 170px; bottom: -14px; }                         /* leaves-01.svg */
.band .band-leaf-02 { left: 9%;  width: 130px; bottom: 96px;  transform: scaleX(-1); }  /* leaves-04.svg */
.band .band-leaf-03 { left: 18%; width: 180px; bottom: -6px; }                          /* leaves-03.svg */
.band .band-leaf-04 { left: 28%; width: 150px; bottom: 110px; }                         /* leaves-03.svg */
.band .band-leaf-05 { left: 37%; width: 200px; bottom: -12px; transform: scaleX(-1); }  /* leaves-04.svg */
.band .band-leaf-06 { left: 48%; width: 130px; bottom: 104px; }                         /* leaves-04.svg */
.band .band-leaf-07 { left: 57%; width: 170px; bottom: -14px; transform: scaleX(-1); }  /* leaves-01.svg */
.band .band-leaf-08 { left: 67%; width: 150px; bottom: 96px;  transform: scaleX(-1); }  /* leaves-03.svg */
.band .band-leaf-09 { left: 76%; width: 180px; bottom: -6px;  transform: scaleX(-1); }  /* leaves-03.svg */
.band .band-leaf-10 { left: 87%; width: 200px; bottom: -12px; }                         /* leaves-04.svg */

/* Flowers (behind the cats, in front of the leaves) */
.band .band-flower-01 { left: 4%;  width: 62px; bottom: 182px; }  /* flower-05.svg */
.band .band-flower-02 { left: 12%; width: 46px; bottom: 100px; }  /* flower-03.svg */
.band .band-flower-03 { left: 21%; width: 54px; bottom: 196px; }  /* flower-02.svg */
.band .band-flower-04 { left: 30%; width: 44px; bottom: 116px; }  /* flower-04.svg */
.band .band-flower-05 { left: 39%; width: 58px; bottom: 200px; }  /* flower-06.svg */
.band .band-flower-06 { left: 47%; width: 62px; bottom: 110px; }  /* flower-01.svg */
.band .band-flower-07 { left: 56%; width: 54px; bottom: 198px; }  /* flower-05.svg */
.band .band-flower-08 { left: 65%; width: 44px; bottom: 104px; }  /* flower-03.svg */
.band .band-flower-09 { left: 73%; width: 52px; bottom: 200px; }  /* flower-02.svg */
.band .band-flower-10 { left: 82%; width: 56px; bottom: 112px; }  /* flower-06.svg */
.band .band-flower-11 { left: 91%; width: 46px; bottom: 196px; }  /* flower-04.svg */
.band .band-flower-12 { left: 98%; width: 52px; bottom: 104px; }  /* flower-01.svg */

/* ---- Café Menu: which cat mug sits beside each section heading ----
   Mug drawings: mug-grey (the logo mug), mug-calico, mug-tuxedo, mug-cream,
   mug-white. Change the file name to swap a mug; size is set in section 7. */
#coffee { --mug: url("../images/art/mug-grey.svg"); }
#lattes { --mug: url("../images/art/mug-calico.svg"); }
#tea    { --mug: url("../images/art/mug-tuxedo.svg"); }
#addons { --mug: url("../images/art/mug-cream.svg"); }
#frozen { --mug: url("../images/art/mug-white.svg"); }
#cold   { --mug: url("../images/art/mug-calico.svg"); }
#snacks { --mug: url("../images/art/mug-tuxedo.svg"); }
#merch  { --mug: url("../images/art/mug-grey.svg"); }

/* ---- Smaller laptops & tablets (narrower than about 1220px) ----
   Page-header cats move from the corner to centered above the title, so they
   never cover the text. */
@media (max-width: 76em) { /* 1216px */
  .page-hero .art { position: relative; right: auto; bottom: auto; display: block; margin: -1.25rem auto 0.5rem; }
  .cat-page-visit { width: 110px; }
  .cat-page-menu  { width: 130px; }
  .cat-page-cam   { width: 110px; }
  .cat-page-404   { width: 130px; }
  .cat-page-faq   { width: 80px; }
}

/* ---- Phone-size versions (screens narrower than 860px) ----
   Anything not listed here keeps the setting from above. */
@media (max-width: 53.75em) {
  .cat-impact        { width: 26%; right: 4%; top: auto; bottom: -10%; }
  .cat-reviews-left,
  .cat-reviews-right,
  .cat-gallery       { display: none; }   /* hidden on phones: not enough room beside the cards */
  .deco-how-left,
  .deco-how-right,
  .deco-how-flower,
  .deco-gallery-leaf,
  .deco-gallery-flower,
  .deco-reviews-flower,
  .deco-insta-left,
  .deco-insta-right,
  .deco-loc-left     { display: none; }   /* side decorations would crowd the headings and text on phones */
  .cat-insta         { width: 104px; right: 16px; top: -72px; }
  .cat-location      { width: 120px; right: 30px; top: -80px; }
}