/* ————————————————————————————————————————————
   THE TINY THAI — design system
   Warm paper, brush-red, chalkboard night.
   Poster typography · photography as hero · flat colour.
   ———————————————————————————————————————————— */

:root {
  /* Brand */
  --red: #ff0000;
  --red-deep: #d4110a;
  --red-ink: #a80d08;
  --teal: #009490;
  --teal-deep: #04524e;
  --teal-ink: #033a37;

  /* Surfaces — LIGHT VERSION
     Dark bands used to supply section rhythm. With them gone the ladder has to
     do that work, so it runs four warm steps instead of two, with the mist and
     sand tints alternating against them. --night survives for the footer only. */
  --paper: #fbf7ed;
  --paper-2: #f3ecdc;
  --paper-3: #eae0ca;
  --paper-4: #e2d6bc;
  --mist: #dfeae7;
  --mist-deep: #cfdedb;
  --night: #12100d;
  --night-2: #1c1813;

  /* Ink */
  --ink: #171310;
  --ink-70: rgba(23, 19, 16, 0.76);
  --ink-50: rgba(23, 19, 16, 0.58);
  --ink-30: rgba(23, 19, 16, 0.3);
  --ink-12: rgba(23, 19, 16, 0.14);
  --light: #f7f2e6;
  --light-70: rgba(247, 242, 230, 0.74);
  --light-50: rgba(247, 242, 230, 0.52);
  --light-16: rgba(247, 242, 230, 0.16);

  /* Shape */
  --r-img: 22px;
  --r-card: 24px;
  --r-btn: 999px;
  --r-sm: 8px;

  /* Rhythm */
  --wrap: 1240px;
  --wrap-tight: 940px;
  --gap-section: clamp(72px, 9vw, 148px);
  --pad-x: clamp(20px, 5vw, 56px);
  --header-h: 86px;

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans), "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: var(--red);
  color: var(--paper);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

/* ——— Type ——————————————————————————————————— */

.display,
h1,
h2,
h3 {
  font-family: var(--font-display), "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.88;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 8.4vw, 7rem);
}

h2 {
  font-size: clamp(2.1rem, 5.2vw, 4.25rem);
}

h3 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 0.95;
}

.h-xl {
  font-size: clamp(3.4rem, 11.5vw, 10rem);
  line-height: 0.84;
  letter-spacing: -0.025em;
}

.h-sm {
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1;
  letter-spacing: 0;
}

/* Eyebrow / kicker */
.kicker {
  font-family: var(--font-sans), sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--red-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.kicker--plain::before {
  display: none;
}

.kicker--light {
  color: var(--paper);
}

.kicker--teal {
  color: var(--teal);
}

/* keep long eyebrows on one line on narrow screens */
@media (max-width: 560px) {
  .kicker {
    letter-spacing: 0.13em;
    gap: 0.5em;
  }

  .kicker::before {
    width: 16px;
  }
}

/* Thai script accent */
.thai {
  font-family: var(--font-sans), sans-serif;
  font-weight: 400;
  color: var(--teal);
  letter-spacing: 0.02em;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 62ch;
  font-weight: 300;
}

.lede--light {
  color: var(--light-70);
}

p + p {
  margin-top: 1.1em;
}

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

.small {
  font-size: 0.92rem;
  line-height: 1.55;
}

.tiny {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4;
}

/* ——— Layout ————————————————————————————————— */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.wrap-tight {
  width: 100%;
  max-width: var(--wrap-tight);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: var(--gap-section);
}

.section--tight {
  padding-block: clamp(52px, 6vw, 92px);
}

.band-paper2 {
  background: var(--paper-2);
}

.band-mist {
  background: var(--mist);
}

/* LIGHT VERSION: what used to be the dark band is now the deepest warm step.
   It still reads as a distinct section, but without dropping the page to black. */
.band-night {
  background: var(--paper-4);
  color: var(--ink);
}

.band-teal {
  background: var(--teal-deep);
  color: var(--light);
}

.band-red {
  background: var(--red-deep);
  color: var(--paper);
}

.band-teal h1,
.band-teal h2,
.band-teal h3,
.band-red h1,
.band-red h2,
.band-red h3 {
  color: var(--paper);
}

.band-night h1,
.band-night h2,
.band-night h3 {
  color: var(--ink);
}

.grid {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}

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

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

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

@media (max-width: 900px) {
  .g-3,
  .g-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .g-2,
  .g-3,
  .g-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 60px);
}

.section-head__text {
  max-width: 46ch;
}

.section-head h2 {
  margin-top: 16px;
}

/* ——— Food story ————————————————————————————————— */

/* Three equal columns: big image, heading, text. Matches the card rhythm used
   on the homepage rather than inventing a second layout language. */
.pillar h3 {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  line-height: 0.98;
  margin-top: 22px;
}

.pillar h3::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 16px;
  background: var(--red);
}

.pillar p {
  margin-top: 16px;
  color: var(--ink-70);
  font-size: 1rem;
}

/* ——— Buttons ————————————————————————————————— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 15px 28px;
  border-radius: var(--r-btn);
  font-family: var(--font-sans), sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border: 2px solid transparent;
  /* Hover changes colour only — no lift (Matt, 24 Sep 2026). */
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.btn--red {
  background: var(--red);
  color: #fff;
}

.btn--red:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
}

.btn--ink:hover {
  background: var(--red);
  color: #fff;
}

.btn--teal {
  background: var(--teal);
  color: #fff;
}

.btn--teal:hover {
  background: var(--teal-ink);
}

.btn--outline {
  border-color: var(--ink);
  color: var(--ink);
}

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

.btn--light {
  background: var(--paper);
  color: var(--ink);
}

.btn--light:hover {
  background: var(--red);
  color: #fff;
}

.btn--ghost-light {
  border-color: var(--paper);
  color: var(--paper);
}

.btn--ghost-light:hover {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.btn--sm {
  padding: 11px 20px;
  font-size: 0.78rem;
}

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

/* Ghost text link with arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
  font-size: 0.87rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
  color: var(--red-deep);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}

.tlink:hover {
  gap: 0.9em;
  color: var(--ink);
}

.tlink--light {
  color: var(--paper);
}

/* ——— Header ——————————————————————————————————— */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-12);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.hdr--over {
  background: transparent;
  border-color: transparent;
}

.hdr--solid {
  background: var(--paper);
  border-color: var(--ink-12);
}

.hdr__in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hdr__logo img {
  height: 58px;
  width: auto;
}

@media (max-width: 480px) {
  .hdr__logo img {
    height: 42px;
  }
}

.hdr__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
}

.hdr__nav a {
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  position: relative;
  padding-block: 6px;
  transition: color 0.25s var(--ease);
}

.hdr__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--red);
  transition: width 0.3s var(--ease);
}

.hdr__nav a:hover::after,
.hdr__nav a[aria-current="page"]::after {
  width: 100%;
}

.navgroup {
  position: relative;
}

.navgroup summary {
  list-style: none;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 17px 6px 0;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

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

.navgroup summary::before {
  content: "";
  position: absolute;
  right: 2px;
  top: 46%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-55%) rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.navgroup[open] summary::before {
  transform: translateY(-15%) rotate(225deg);
}

@media (hover: hover) and (pointer: fine) {
  .hdr__nav .navgroup:hover summary::before {
    transform: translateY(-15%) rotate(225deg);
  }
}

.navgroup[data-active="true"] summary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - 17px);
  height: 2px;
  background: var(--red);
}

/* The panel sits 14px below the label. Without a bridge across that gap the
   pointer crosses dead space on its way down and mouseleave closes the menu. */
.navgroup__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.navgroup__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 4;
  width: max-content;
  min-width: 210px;
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--ink-12);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 18px 38px rgba(18, 16, 13, 0.16);
}

.hdr__nav .navgroup__panel a {
  padding: 10px 12px;
  color: var(--ink);
  font-size: 0.76rem;
}

.hdr__nav .navgroup__panel a::after {
  display: none;
}

.hdr__nav .navgroup__panel a:hover,
.hdr__nav .navgroup__panel a[aria-current="page"] {
  color: var(--red-ink);
  background: var(--paper-2);
  border-radius: 8px;
}

.hdr--over .hdr__nav a,
.hdr--over .navgroup summary,
.hdr--over .hdr__tel,
.hdr--over .hdr__burger {
  color: var(--paper);
}

.hdr--over .hdr__nav .navgroup__panel a {
  color: var(--ink);
}

.hdr__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hdr__tel {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}

.hdr__burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.hdr__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}

.hdr__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hdr__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hdr__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1160px) {
  .hdr__nav,
  .hdr__tel {
    display: none;
  }

  .hdr__burger {
    display: flex;
  }
}

/* the sticky book bar covers this below 760px */
@media (max-width: 760px) {
  .hdr__right > .btn {
    display: none;
  }
}

.mnav {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--night);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 20px var(--pad-x) 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
}

.mnav[data-open="true"] {
  transform: translateY(0);
}

.mnav__top {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.mnav__top img {
  height: 36px;
  width: auto;
}

.mnav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: auto;
}

.mnav__list a {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.12;
  display: block;
}

.mnav__list a:hover {
  color: var(--red);
}

/* Every top-level item gets the same rule above it, so a standalone link like
   Contact cannot read as a child of the group that precedes it. */
.mnav__list > li + li {
  border-top: 1px solid var(--light-16);
  padding-top: 12px;
  margin-top: 8px;
}

.mnav__group summary {
  list-style: none;
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.12;
  cursor: pointer;
}

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

.mnav__group summary::after {
  content: "+";
  color: var(--red);
  float: right;
}

.mnav__group details[open] summary::after {
  content: "−";
}

.mnav__group ul {
  list-style: none;
  display: grid;
  gap: 9px;
  padding: 14px 0 8px 18px;
}

.mnav__group ul a {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  line-height: 1.35;
}

.mnav__foot {
  display: grid;
  gap: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--light-16);
  margin-top: 32px;
}

/* ——— Announcement / marquee ————————————————— */

.marquee {
  background: var(--red);
  color: #fff;
  overflow: hidden;
  padding-block: 11px;
  border-block: 1px solid rgba(0, 0, 0, 0.14);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 42s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-inline: 18px;
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.marquee__item svg {
  flex: none;
  opacity: 0.9;
}

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ——— Bunting ————————————————————————————————— */

.bunting {
  width: 100%;
  height: 46px;
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='46'%3E%3Cpath d='M0 4H126' stroke='rgba(23,19,16,0.32)' stroke-width='1.6'/%3E%3Cpolygon points='3,4 39,4 21,36' fill='%23FF0000'/%3E%3Cpolygon points='45,4 81,4 63,36' fill='%23009490'/%3E%3Cpolygon points='87,4 123,4 105,36' fill='%23E8A31C'/%3E%3C/svg%3E");
}

.bunting--paper2 {
  background-color: var(--paper-2);
}

.bunting--mist {
  background-color: var(--mist);
}

.bunting--night {
  background-color: var(--night);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='46'%3E%3Cpath d='M0 4H126' stroke='rgba(247,242,230,0.34)' stroke-width='1.6'/%3E%3Cpolygon points='3,4 39,4 21,36' fill='%23FF0000'/%3E%3Cpolygon points='45,4 81,4 63,36' fill='%23009490'/%3E%3Cpolygon points='87,4 123,4 105,36' fill='%23E8A31C'/%3E%3C/svg%3E");
}

/* the band a bunting introduces loses its own top padding */
.bunting + .section {
  padding-top: clamp(48px, 5.5vw, 90px);
}

/* ——— Hero ————————————————————————————————————— */

.hero {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

/* warm ember glow behind the type */
.hero::before {
  content: "";
  position: absolute;
  left: -12%;
  top: -18%;
  width: 62%;
  height: 90%;
  background: radial-gradient(
    circle at 30% 40%,
    rgba(255, 90, 40, 0.09),
    rgba(255, 90, 40, 0) 64%
  );
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(36px, 4vw, 60px));
  padding-bottom: clamp(40px, 4.5vw, 66px);
  min-height: clamp(560px, 84vh, 840px);
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-bottom: 44px;
  }
}

.hero h1 {
  color: var(--ink);
  font-size: clamp(2.5rem, 4.9vw, 4.6rem);
  line-height: 0.9;
  margin-block: 20px 24px;
  max-width: 16ch;
}

.hero h1 span,
.hero h1 em {
  display: block;
}

.hero h1 em {
  font-style: normal;
  color: var(--red);
}

.hero__sub {
  max-width: 46ch;
  color: var(--ink-70);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
}

.hero__actions {
  margin-top: 34px;
}

.hero__proof {
  margin-top: 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 1rem;
  color: var(--ink-70);
}

.hero__art {
  align-self: center;
}

.hero__art-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
}

.hero__art-main {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-img);
  overflow: hidden;
}

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

.hero__art-inset {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  margin: 0 0 clamp(-46px, -3.2vw, -20px) clamp(-64px, -4.5vw, -24px);
  width: clamp(150px, 17vw, 216px);
  z-index: 2;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  border: 5px solid var(--paper);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.8);
}

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

@media (max-width: 900px) {
  .hero__art-main {
    aspect-ratio: 4 / 3;
  }

  .hero__art-inset {
    justify-self: end;
    margin: 0 16px -28px 0;
    width: 128px;
  }
}

.hero__bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--ink-12);
  background: var(--paper-2);
}

.hero__bar-in {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 4vw, 68px);
  padding-block: 30px;
}

.hero__bar-in > div {
  min-width: 190px;
}

.hero__bar-in dt {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin-bottom: 8px;
}

.hero__bar-in dd {
  font-size: 0.98rem;
  color: var(--ink-70);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .hero__bar-in {
    padding-top: 56px;
  }
}

/* Page hero (interior pages) */
.phero {
  position: relative;
  background: var(--night);
  color: var(--paper);
  min-height: clamp(460px, 68vh, 700px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

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

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

.phero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(10, 9, 7, 0.94) 0%,
      rgba(10, 9, 7, 0.78) 22%,
      rgba(10, 9, 7, 0.4) 48%,
      rgba(10, 9, 7, 0.08) 78%,
      rgba(10, 9, 7, 0.22) 100%
    ),
    linear-gradient(to right, rgba(10, 9, 7, 0.34) 0%, rgba(10, 9, 7, 0) 55%);
}

@media (max-width: 760px) {
  .phero__scrim {
    background: linear-gradient(
      to top,
      rgba(10, 9, 7, 0.95) 0%,
      rgba(10, 9, 7, 0.86) 40%,
      rgba(10, 9, 7, 0.55) 72%,
      rgba(10, 9, 7, 0.35) 100%
    );
  }
}

.phero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: clamp(36px, 4.5vw, 60px);
}

.phero h1 {
  color: var(--paper);
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 0.9;
  margin-block: 18px 20px;
  max-width: 18ch;
}

.phero .lede {
  color: var(--light-70);
}

/* ——— Figures ————————————————————————————————— */

.fig {
  position: relative;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--paper-3);
}

.fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.fig--hover:hover img {
  transform: scale(1.045);
}

.ar-1 {
  aspect-ratio: 1;
}
.ar-45 {
  aspect-ratio: 4 / 5;
}
.ar-34 {
  aspect-ratio: 3 / 4;
}
.ar-43 {
  aspect-ratio: 4 / 3;
}
.ar-169 {
  aspect-ratio: 16 / 9;
}
.ar-32 {
  aspect-ratio: 3 / 2;
}

/* ——— Dish cards (photo is the card) ——————————— */

.dish {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dish__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.dish__name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  font-size: 1.28rem;
  line-height: 1;
}

.dish__price {
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--red-deep);
  white-space: nowrap;
}

.dish__en {
  font-size: 0.83rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
  margin-top: 5px;
}

.dish p {
  font-size: 1rem;
  color: var(--ink-70);
  line-height: 1.6;
}

/* ——— Menu list ———————————————————————————————— */

.mrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 28px;
  padding-block: 26px;
  border-bottom: 1px solid var(--ink-12);
  align-items: start;
}

.mrow:last-child {
  border-bottom: none;
}

.mrow__name {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.mrow__en {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
}

.mrow__desc {
  grid-column: 1;
  font-size: 1.02rem;
  color: var(--ink-70);
  max-width: 66ch;
  margin-top: 9px;
}

.mrow__price {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--red-deep);
  line-height: 1;
  text-align: right;
}

/* Wine names need a calmer, more legible hierarchy than dish shorthand. */
.mrow--wine {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 20px;
}

.mrow__name--wine {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: 0.5px;
  line-height: 1.04;
}

.mrow__name--wine .mrow__en {
  font-size: clamp(0.72rem, 1.1vw, 0.84rem);
  line-height: 1.25;
}

.mrow__price--wine {
  font-family: var(--font-sans), sans-serif;
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.mrow__ladder {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  gap: 18px;
  text-align: right;
}

.mrow__ladder div {
  min-width: 60px;
}

.mrow__ladder dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 500;
  margin-bottom: 5px;
}

.mrow__ladder dd {
  font-family: var(--font-display), sans-serif;
  font-size: 1.1rem;
  color: var(--red-deep);
  line-height: 1;
}

@media (max-width: 620px) {
  .mrow--wine {
    gap: 12px 14px;
    padding-block: 30px;
  }

  .mrow__name--wine {
    font-size: 1.45rem;
    gap: 8px;
  }

  .mrow__name--wine .mrow__en {
    flex-basis: 100%;
    font-size: 0.75rem;
    letter-spacing: 0.13em;
  }

  .mrow__ladder {
    grid-row: auto;
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
    margin-top: 14px;
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-btn);
  border: 1.5px solid var(--teal);
  color: var(--teal-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

.heat {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

/* Filter chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip {
  padding: 10px 18px;
  border-radius: var(--r-btn);
  border: 1.5px solid var(--ink-12);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  transition: all 0.25s var(--ease);
  background: transparent;
}

.chip:hover {
  border-color: var(--ink-30);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ——— Location cards ——————————————————————————— */

/* Photo on top, facts on a solid panel — nothing sits over busy imagery. */

.loc {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.loc__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex: none;
}

.loc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

.loc:hover .loc__media img {
  transform: scale(1.045);
}

.loc__in {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 36px);
  border-top: 5px solid var(--red);
}

.loc--teal .loc__in {
  border-top-color: var(--teal);
}

.loc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.loc h3 {
  color: var(--paper);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
}

.loc__strap {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1;
}

.loc--teal .loc__strap {
  color: var(--teal);
}

.loc__addr {
  margin-top: 14px;
  color: var(--light-70);
  font-size: 1rem;
  line-height: 1.6;
}

.loc__addr a:hover {
  color: var(--paper);
}

.loc__hours {
  margin-block: 22px;
  display: grid;
}

.loc__hours div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 0.95rem;
  padding-block: 11px;
  border-top: 1px solid var(--light-16);
}

.loc__hours div:last-child {
  border-bottom: 1px solid var(--light-16);
}

.loc__hours dt {
  color: var(--paper);
  font-weight: 400;
  flex: none;
}

.loc__hours dd {
  color: var(--light-70);
  text-align: right;
}

.loc .btn-row {
  margin-top: auto;
}

/* ——— Quote ————————————————————————————————————— */

.quote {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.8vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.quote__by {
  margin-top: 26px;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--red);
}

.stars {
  display: inline-flex;
  gap: 3px;
  color: var(--red);
}

/* Review card */
.rev {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.rev p {
  font-size: 1.01rem;
  color: var(--ink-70);
  line-height: 1.62;
}

.rev__by {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ink-12);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ——— Feature rows ————————————————————————————— */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}

.split--wide {
  grid-template-columns: 1.15fr 1fr;
}

/* text yields to the artwork */
.split--art {
  grid-template-columns: 0.86fr 1.14fr;
}

.split--top {
  align-items: start;
}

/* Process strip — the from-scratch work, shown rather than described */
.strip {
  margin-top: clamp(46px, 5vw, 78px);
  padding-top: clamp(34px, 3.8vw, 54px);
  border-top: 1px solid var(--light-16);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

@media (max-width: 760px) {
  .strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.strip figcaption {
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--light-70);
}

@media (max-width: 860px) {
  .split,
  .split--wide,
  .split--art {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stack {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
}

.numbered {
  list-style: none;
  display: grid;
  gap: 26px;
}

.numbered li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}

.numbered__n {
  font-family: var(--font-display), sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--red);
  min-width: 42px;
}

.numbered h3 {
  font-size: 1.15rem;
  margin-bottom: 7px;
}

.numbered p {
  font-size: 1rem;
  color: var(--ink-70);
}

.band-night .numbered p,
.band-teal .numbered p {
  color: var(--light-70);
}

/* ——— CTA band ————————————————————————————————— */

.cta {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 22px;
}

.cta h2 {
  max-width: 18ch;
}

/* ——— Footer ———————————————————————————————————— */

.ftr {
  background: var(--night);
  color: var(--light-70);
  padding-top: clamp(56px, 7vw, 92px);
}

.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(36px, 5vw, 72px);
  row-gap: clamp(44px, 5vw, 72px);
  padding-bottom: 52px;
}

.ftr__top > *,
.ftr__locations > *,
.ftr__nav > * {
  min-width: 0;
}

.ftr__locations,
.ftr__nav {
  display: grid;
  align-content: start;
  gap: clamp(24px, 2.5vw, 36px);
}

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

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

.ftr__brand {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--light-16);
}

.ftr__brand-copy {
  max-width: 34ch;
}

.ftr__socials {
  justify-content: flex-end;
}

@media (max-width: 920px) {
  .ftr__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .ftr__locations,
  .ftr__nav {
    gap: clamp(22px, 4vw, 32px);
  }
}

@media (max-width: 520px) {
  .ftr__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ftr__brand {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .ftr__socials {
    justify-content: flex-start;
  }
}

@media (max-width: 440px) {
  .ftr__locations {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ftr img.ftr__logo {
  height: 62px;
  width: auto;
  margin-bottom: 20px;
}

.ftr h4 {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--red);
  margin-bottom: 18px;
}

.ftr ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.ftr a:hover {
  color: var(--paper);
}

.ftr__bottom {
  border-top: 1px solid var(--light-16);
  padding-block: 24px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  font-size: 0.84rem;
}

.ftr address {
  font-style: normal;
  line-height: 1.65;
  font-size: 0.96rem;
}

.ftr__email {
  overflow-wrap: anywhere;
}

/* ——— Sticky book bar (mobile) ————————————————— */

.bookbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--night);
  border-top: 1px solid var(--light-16);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: none;
  gap: 8px;
}

.bookbar .btn {
  flex: 1;
  padding-inline: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

@media (max-width: 760px) {
  .bookbar {
    display: flex;
  }

  body {
    padding-bottom: 68px;
  }
}

/* ——— Misc ————————————————————————————————————— */

.notecard {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--ink-12);
}

.notecard h3 {
  font-size: 1.1rem;
  margin-bottom: 9px;
}

.notecard p {
  font-size: 0.98rem;
  color: var(--ink-70);
}

.pill-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--r-btn);
  background: var(--mist);
  color: var(--teal-ink);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* ——— Expanded sitemap templates ————————————————— */

.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dietary-key {
  display: grid;
  gap: 12px;
}

.dietary-key div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-12);
}

.dietary-key dt {
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  border-radius: 5px;
  background: var(--teal);
  color: var(--paper);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.dietary-key dd {
  font-weight: 400;
}

.faq-list {
  border-top: 1px solid var(--ink-12);
}

.faq-item {
  border-bottom: 1px solid var(--ink-12);
  padding: 0;
}

.faq-item summary {
  position: relative;
  padding: 24px 44px 24px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 0.95;
  text-transform: uppercase;
}

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

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-family: var(--font-sans), sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  max-width: 70ch;
  padding: 0 44px 28px 0;
  color: var(--ink-70);
}

.checklist {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-70);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

.policy-card {
  padding: clamp(30px, 5vw, 58px);
}

@media (max-width: 760px) {
  .facts-grid {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* ——— Bento ————————————————————————————————————
   Seven tiles, two big anchors on the diagonal, a wide
   human moment along the bottom. Areas keep it readable. */

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-template-areas:
    "a a b c"
    "a a b c"
    "a a d d"
    "e f d d"
    "g g d d";
  gap: clamp(8px, 1vw, 14px);
  aspect-ratio: 4 / 5;
}

.bento > * {
  min-width: 0;
  min-height: 0;
  border-radius: clamp(10px, 1.1vw, 16px);
}

.bento > * img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento__a {
  grid-area: a;
}
.bento__b {
  grid-area: b;
}
.bento__c {
  grid-area: c;
}
.bento__d {
  grid-area: d;
}
.bento__e {
  grid-area: e;
}
.bento__f {
  grid-area: f;
}
.bento__g {
  grid-area: g;
}

@media (max-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "a a"
      "a a"
      "b c"
      "b c"
      "d d"
      "d d"
      "d d"
      "e f"
      "e f"
      "g g"
      "g g";
    aspect-ratio: 1 / 3.45;
  }
}

.form-row {
  display: grid;
  gap: 14px;
}

label.field {
  display: grid;
  gap: 7px;
}

label.field span {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-50);
}

input,
textarea,
select {
  font: inherit;
  font-size: 0.95rem;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--ink-12);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}

.band-night input,
.band-night textarea {
  background: var(--night-2);
  border-color: var(--light-16);
  color: var(--paper);
}

input:focus,
textarea:focus {
  border-color: var(--teal);
  outline: none;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: var(--r-sm);
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal[data-shown="true"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* ——— Journal ————————————————————————————————— */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-50);
}

.post-meta span:first-child {
  color: var(--red-deep);
}

.post-meta span + span::before {
  content: "·";
  margin-right: 10px;
  color: var(--ink-30);
}

/* Lead post — image and copy side by side, the copy doing the talking. */
.post-lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}

.post-lead__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-img);
  overflow: hidden;
}

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

.post-lead__body h2 {
  margin-block: 18px 20px;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
}

.post-lead__body .tlink {
  margin-top: 26px;
  display: inline-flex;
}

@media (max-width: 860px) {
  .post-lead {
    grid-template-columns: minmax(0, 1fr);
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.post-card h3 {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1;
}

.post-card > p:last-of-type {
  font-size: 0.97rem;
  color: var(--ink-70);
  line-height: 1.6;
}

.post-card .tlink {
  margin-top: auto;
  align-self: flex-start;
}

/* Article measure — long-form copy needs a readable line, not the full grid. */
.post-body {
  max-width: 68ch;
  margin-inline: auto;
}

.post-body p {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink-70);
}

.post-body .post-meta {
  margin-bottom: 30px;
}

.post-body__lead {
  font-size: clamp(1.2rem, 1.7vw, 1.42rem) !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
}

.post-body__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--ink-12);
}

/* ——— Events ——————————————————————————————————— */

/* A date block reads faster than a date in a sentence — it is the thing people
   scan an events page for. */
.datechip {
  display: inline-grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-width: 66px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  line-height: 1;
}

.datechip span:first-child {
  font-family: var(--font-display), sans-serif;
  font-size: 1.5rem;
}

.datechip span:last-child {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.datechip--lg {
  min-width: 82px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.datechip--lg span:first-child {
  font-size: 2rem;
}

.event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.event-facts span + span::before {
  content: "·";
  margin-right: 10px;
  color: var(--ink-30);
}

.event-lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

.event-lead__media {
  aspect-ratio: 5 / 4;
  border-radius: var(--r-img);
  overflow: hidden;
}

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

.event-lead__body h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
}

.event-lead__body .lede {
  margin-top: 20px;
}

.event-lead__body .tlink {
  margin-top: 26px;
  display: inline-flex;
}

@media (max-width: 860px) {
  .event-lead {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Agenda rows — chronological and scannable, not a grid of equal cards. */
.agenda {
  list-style: none;
  display: grid;
}

.agenda__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 2.6vw, 36px);
  align-items: center;
  padding-block: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--ink-12);
  transition: padding-left 0.35s var(--ease);
}

.agenda li:last-child .agenda__row {
  border-bottom: 1px solid var(--ink-12);
}

.agenda__row:hover {
  padding-left: 10px;
}

.agenda__main h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1;
}

.agenda__excerpt {
  margin-top: 12px;
  font-size: 0.97rem;
  color: var(--ink-70);
  max-width: 62ch;
}

.agenda__go {
  color: var(--red-deep);
  transition: transform 0.35s var(--ease);
}

.agenda__row:hover .agenda__go {
  transform: translateX(6px);
}

@media (max-width: 640px) {
  .agenda__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .agenda__go {
    display: none;
  }
}

/* Sticky detail panel so the booking route stays in reach while reading. */
.event-panel {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  align-self: start;
  background: var(--paper-2);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.8vw, 34px);
}

.event-panel h2 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin-bottom: 20px;
}

.event-panel dl {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}

.event-panel dt {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 4px;
}

.event-panel dd {
  font-size: 1rem;
}

.event-panel .btn-row {
  flex-direction: column;
  align-items: stretch;
}


/* ——— LIGHT VERSION overrides ————————————————————
   The hero is now cream, so the "on dark" variants used inside it flip to ink.
   The footer keeps its own dark scope below. */

.hero .kicker--light {
  color: var(--red-deep);
}

.hero .tlink--light {
  color: var(--red-deep);
}

.hero .tlink--light:hover {
  color: var(--ink);
}

.hero .btn--ghost-light {
  border-color: var(--ink);
  color: var(--ink);
}

.hero .btn--ghost-light:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Location cards: the photo still leads, but the facts panel is paper now so the
   card stops being a dark block in the middle of a light page. The accent bar
   keeps doing the per-location colour coding. */
.loc {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--ink-12);
}

.loc h3 {
  color: var(--ink);
}

.loc__addr {
  color: var(--ink-70);
}

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

.loc__hours div {
  border-top-color: var(--ink-12);
}

.loc__hours div:last-child {
  border-bottom-color: var(--ink-12);
}

.loc__hours dt {
  color: var(--ink);
}

.loc__hours dd {
  color: var(--ink-70);
}

.loc .btn--ghost-light {
  border-color: var(--ink);
  color: var(--ink);
}

.loc .btn--ghost-light:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Mobile nav: a full-screen black overlay is the biggest dark moment left in the
   journey, so it goes cream too. The footer stays the single dark anchor. */
.mnav {
  background: var(--paper);
  color: var(--ink);
}

.mnav__list > li + li {
  border-top-color: var(--ink-12);
}

.mnav__foot {
  border-top-color: var(--ink-12);
}

.mnav .btn--ghost-light {
  border-color: var(--ink);
  color: var(--ink);
}

.mnav .btn--ghost-light:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ════════════════════════════════════════════════════════════
   LIGHT VERSION — final overrides

   These sit last on purpose. The dark-scheme rules they replace appear
   throughout the file at equal specificity, so source order is what decides
   the winner. Anything that assumed a dark parent gets flipped here.
   ════════════════════════════════════════════════════════════ */

/* — Header over the now-cream hero — */
.hdr--over .hdr__nav a,
.hdr--over .navgroup summary,
.hdr--over .hdr__tel,
.hdr--over .hdr__burger {
  color: var(--ink);
}

.hdr--over .hdr__nav .navgroup__panel a {
  color: var(--ink);
}

/* — The band that used to be near-black — */
.band-night .lede,
.band-night .lede--light,
.band-night .numbered p,
.band-night p,
.band-night dd {
  color: var(--ink-70);
}

.band-night .kicker,
.band-night .kicker--light {
  color: var(--red-ink);
}

.band-night .numbered__n {
  color: var(--red-deep);
}

.band-night .quote,
.band-night dt {
  color: var(--ink);
}

.band-night .strip {
  border-top-color: var(--ink-12);
}

.band-night .strip figcaption {
  color: var(--ink-70);
}

.band-night .btn--ghost-light {
  border-color: var(--ink);
  color: var(--ink);
}

.band-night .btn--ghost-light:hover {
  background: var(--ink);
  color: var(--paper);
}

.band-night input,
.band-night textarea {
  background: var(--paper);
  border-color: var(--ink-12);
  color: var(--ink);
}

/* — Small brand-coloured text needs the darker steps to clear WCAG AA on cream.
     Scoped away from the saturated bands, where a dark kicker would vanish. — */
.kicker,
.band-night .kicker {
  color: var(--red-ink);
}

.band-red .kicker,
.band-teal .kicker,
.ftr .kicker,
.phero .kicker,
.hero .kicker {
  color: inherit;
}

.band-red .kicker,
.band-teal .kicker {
  color: var(--paper);
}

.phero .kicker {
  color: var(--paper);
}

.hero .kicker {
  color: var(--red-ink);
}

.hero__bar-in dt {
  color: var(--red-ink);
}

.kicker--teal {
  color: var(--teal-ink);
}

.loc__strap {
  color: var(--red-ink);
}

.loc--teal .loc__strap {
  color: var(--teal-ink);
}

.post-meta span:first-child,
.tlink,
.dish__price,
.mrow__price,
.mrow__ladder dd {
  color: var(--red-ink);
}

.dish__en,
.mrow__en {
  color: var(--teal-ink);
}

.tag {
  border-color: var(--teal-ink);
  color: var(--teal-ink);
}

.muted,
.post-meta,
.event-facts {
  color: rgba(23, 19, 16, 0.66);
}

/* — The footer stays dark: it is the one anchor that ends the page — */
.ftr .kicker,
.ftr .kicker--light {
  color: var(--red);
}

/* ════════════════════════════════════════════════════════════════════════
   VERSION 3 — Paul's own style

   Paul's feedback: the earlier concepts felt "more chain than I want". They
   were built on sweetgreen and Roberta's — both chains — with Anton in poster
   uppercase and tracked-caps micro-labels everywhere. This block reskins the
   same platform in his live Squarespace theme instead:

     headings   Amatic SC 700, no transform   (his --heading-font)
     body/nav   Oswald 300 / 400, .02em       (his --body-font)
     palette    white · black · #EE352A red (logo-sampled, his --accent)
                #C92018 deeper red (his --lightAccent) · #4C0E0B (his --darkAccent)
     buttons    Oswald, mixed case, pills     (his --primary-button)

   It sits last on purpose: the rules it replaces appear throughout the file
   at equal specificity, so source order decides the winner.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --red: #ee352a;
  --red-deep: #c92018;
  --red-ink: #c92018; /* 5.7:1 on white — safe for small red text */
  --maroon: #4c0e0b;

  /* No teal in his palette: secondary actions go black, deep bands go maroon. */
  --teal: #151515;
  --teal-deep: #4c0e0b;
  --teal-ink: #262626;

  --paper: #ffffff;
  --paper-2: #f6f2ec;
  --paper-3: #eee7dc;
  --paper-4: #f1ebe2;
  --mist: #f6f2ec;
  --mist-deep: #eee7dc;
  --night: #111111;
  --night-2: #1b1b1b;

  --ink: #151515;
  --ink-70: rgba(21, 21, 21, 0.8);
  --ink-50: rgba(21, 21, 21, 0.64);
  --ink-30: rgba(21, 21, 21, 0.32);
  --ink-12: rgba(21, 21, 21, 0.12);
  --light: #ffffff;
  --light-70: rgba(255, 255, 255, 0.86);
  --light-50: rgba(255, 255, 255, 0.66);
  --light-16: rgba(255, 255, 255, 0.24);

  /* Softer, smaller radii read as a restaurant, not an app. */
  --r-img: 8px;
  --r-card: 10px;
  --r-btn: 999px;

  --header-h: 124px; /* announcement bar + nav */
}

@media (max-width: 760px) {
  :root {
    --header-h: 108px;
  }
}

body {
  font-family: var(--font-sans), "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 1.06rem;
  letter-spacing: 0.02em;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
}

/* ——— Headings: Amatic SC, his hand-drawn face ———————————————————————— */

.display,
h1,
h2,
h3 {
  font-family: var(--font-display), "Oswald", sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1;
}

h1 {
  font-size: clamp(3.4rem, 7vw, 6.2rem);
}

h2 {
  font-size: clamp(2.8rem, 5.2vw, 4.5rem);
}

h3 {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1.05;
}

.hero h1,
.phero h1 {
  font-size: clamp(3.4rem, 7.4vw, 6.4rem);
  line-height: 0.95;
}

/* The eyebrow becomes a hand-written accent, like his "Welcome To". */
.kicker {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1;
  color: var(--red-ink);
}

.kicker::before {
  display: none;
}

.band-red .kicker,
.band-teal .kicker,
.phero .kicker,
.v3-band-black .kicker {
  color: #fff;
}

/* ——— Strip the tracked-caps micro-labels: the loudest "chain" signal ——— */

.btn,
.tlink,
.tiny,
.chip,
.tag,
.dish__en,
.mrow__en,
.mrow__ladder dt,
.post-meta,
.event-facts,
.loc__strap,
.rev__by,
.quote__by,
.ftr h4,
.hero__bar-in dt,
.strip figcaption,
.event-panel dt,
label.field span,
.hdr__nav a,
.navgroup summary,
.hdr__tel,
.mnav__group ul a,
.datechip span:last-child {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ——— Buttons: his pills, Oswald, mixed case ——————————————————————————— */

.btn {
  font-family: var(--font-sans), sans-serif;
  font-weight: 400;
  font-size: 1.02rem;
  padding: 14px 30px;
}

.btn--sm {
  font-size: 0.95rem;
  padding: 10px 22px;
}

/* Small white text on #EE352A is 4.0:1; his deeper red clears AA at 5.7:1. */
.btn--red {
  background: var(--red-deep);
  color: #fff;
}

.btn--red:hover {
  background: var(--ink);
}

.btn--teal {
  background: var(--ink);
  color: #fff;
}

.btn--teal:hover {
  background: var(--red-deep);
}

.btn--ink:hover {
  background: var(--red-deep);
}

.btn--light {
  background: #fff;
  color: var(--red-deep);
}

.btn--light:hover {
  background: var(--ink);
  color: #fff;
}

.tlink {
  font-family: var(--font-sans), sans-serif;
  font-weight: 400;
  font-size: 1.02rem;
  border-bottom-width: 1px;
}

.chip {
  font-size: 0.95rem;
  font-weight: 400;
}

.tag {
  font-size: 0.8rem;
  font-weight: 400;
  border-color: var(--ink-30);
  color: var(--ink-70);
}

/* ——— Navigation, like his: Oswald, mixed case ——————————————————————————— */

.hdr,
.hdr--over,
.hdr--solid {
  background: var(--paper);
  border-bottom: 1px solid var(--ink-12);
}

.hdr__nav a,
.navgroup summary,
.hdr--over .hdr__nav a,
.hdr--over .navgroup summary,
.hdr--over .hdr__tel,
.hdr--over .hdr__burger {
  color: var(--ink);
}

.hdr__nav a,
.navgroup summary {
  font-weight: 400;
  font-size: 1.08rem;
}

.hdr__nav .navgroup__panel a {
  font-size: 1rem;
}

.hdr__tel {
  font-size: 1rem;
}

.hdr__in {
  height: calc(var(--header-h) - 38px);
}

.hdr__logo img {
  height: 46px;
  width: auto;
}

@media (max-width: 760px) {
  .hdr__in {
    height: calc(var(--header-h) - 34px);
  }

  .hdr__logo img {
    height: 36px;
  }
}

/* His red announcement bar */
.announce {
  background: var(--red-deep);
  color: #fff;
  text-align: center;
  font-family: var(--font-sans), sans-serif;
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 38px;
  height: 38px;
  padding-inline: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announce a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .announce {
    height: 34px;
    line-height: 34px;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
  }
}

.mnav {
  background: var(--paper);
  color: var(--ink);
}

.mnav__list a,
.mnav__group summary {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(2.6rem, 11vw, 3.4rem);
  line-height: 1.1;
}

.mnav__group ul a {
  font-family: var(--font-sans), sans-serif;
  font-size: 1.1rem;
}

/* ——— Chain furniture off: ticker and bunting were our inventions ———————— */

.marquee,
.bunting {
  display: none;
}

.bunting + .section {
  padding-top: var(--gap-section);
}

/* ——— Component type that used the display face at small sizes ——————————
   Amatic SC is narrow with a small x-height, so anything set in it needs to be
   larger than Anton was. Prices and numbers move to Oswald for legibility. */

.dish__name {
  font-size: 2rem;
  line-height: 1;
}

.dish__price,
.mrow__price,
.mrow__ladder dd,
.datechip span:first-child {
  font-family: var(--font-sans), sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.dish__price {
  font-size: 1.05rem;
}

.mrow__price {
  font-size: 1.15rem;
}

.mrow__ladder dd {
  font-size: 1.1rem;
}

.dish__en,
.mrow__en {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-50);
}

.mrow__name {
  font-size: clamp(1.9rem, 2.8vw, 2.4rem);
  line-height: 1;
}

.numbered__n {
  font-size: 2.2rem;
}

.numbered h3 {
  font-size: 1.7rem;
}

.quote {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1.05;
  text-transform: none;
}

.loc h3 {
  font-size: clamp(2.7rem, 4.4vw, 3.6rem);
}

.loc__strap {
  font-size: 0.98rem;
  font-weight: 400;
}

.pillar h3,
.post-card h3,
.agenda__main h3 {
  font-size: clamp(2rem, 2.8vw, 2.5rem);
}

.post-lead__body h2,
.event-lead__body h2 {
  font-size: clamp(2.6rem, 4.4vw, 3.8rem);
}

.datechip span:first-child {
  font-size: 1.45rem;
}

.datechip span:last-child {
  font-size: 0.8rem;
}

.post-meta,
.event-facts {
  font-size: 0.95rem;
  font-weight: 400;
}

.rev__by,
.quote__by {
  font-size: 0.98rem;
  font-weight: 500;
}

.ftr h4 {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--red);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ——— Surfaces ——————————————————————————————————————————————————————— */

.band-red {
  background: var(--red);
}

.band-red .lede,
.band-red p {
  color: #fff;
}

/* On bright red, CTA text is large display type (≥ 3:1 for large text). */
.band-red h2 {
  font-size: clamp(3rem, 5.4vw, 4.8rem);
}

.band-red .btn--ghost-light {
  border-color: #fff;
  color: #fff;
}

.band-teal {
  background: var(--maroon);
}

.v3-band-black {
  background: var(--night);
  color: #fff;
}

.v3-band-black h2,
.v3-band-black h3 {
  color: #fff;
}

.v3-band-black p {
  color: var(--light-70);
}

.fig,
.hero__art-main,
.hero__art-inset,
.loc,
.notecard,
.rev,
.event-panel {
  border-radius: var(--r-card);
}

/* ——— v3 homepage ———————————————————————————————————————————————————————— */

/* Hero: his starters shot full-bleed, his white logo, his brush banner.
   His live hero runs ~2,000px of one image before any content; this keeps the
   same image-led feel inside a single screen. */
.v3-hero {
  position: relative;
  min-height: clamp(620px, calc(100svh - var(--header-h)), 940px);
  margin-top: var(--header-h);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #2a2019;
  color: #fff;
}

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

.v3-hero__shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.34) 70%,
    rgba(0, 0, 0, 0.46) 100%
  );
}

.v3-hero__in {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 2vw, 20px);
  padding-block: clamp(40px, 6vw, 72px);
  text-align: center;
}

.v3-hero__logo {
  width: clamp(240px, 34vw, 440px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35));
}

.v3-brush {
  position: relative;
  width: min(94vw, 900px);
  display: grid;
  place-items: center;
}

.v3-brush__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* The brush PNG is only solid across its upper two-thirds — the bottom centre
   is transparent between the curl and the tail. The heavy bottom padding
   stretches the shape so that dead zone sits under empty space, never text. */
.v3-brush__text {
  position: relative;
  padding: clamp(20px, 2.6vw, 30px) clamp(34px, 7vw, 104px) clamp(58px, 8vw, 104px);
}

.v3-brush__text h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.3vw, 3.5rem);
  line-height: 1;
}

.v3-brush__text p {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.12;
  color: #fff;
  letter-spacing: 0.01em;
}

.v3-brush__text h1 + p {
  margin-top: 10px;
}

/* His red action band */
.v3-actions {
  padding-block: clamp(26px, 3.4vw, 40px);
}

.v3-actions__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}

@media (max-width: 640px) {
  .v3-actions__in .btn {
    flex: 1 1 100%;
  }
}

/* Welcome: two photographs, overlapped */
.v3-duo {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: end;
  gap: 16px;
}

.v3-duo__a {
  aspect-ratio: 4 / 5;
}

.v3-duo__b {
  aspect-ratio: 3 / 4;
  margin-bottom: clamp(-40px, -3vw, -16px);
}

.v3-duo .fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The restaurant, full width */
.v3-photoband {
  position: relative;
  min-height: clamp(420px, 70vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.v3-photoband__card {
  position: relative;
  z-index: 2;
  margin: 0 0 clamp(20px, 4vw, 48px) clamp(16px, 5vw, 64px);
  max-width: 420px;
  background: #fff;
  border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.5);
}

.v3-photoband__card p {
  margin-block: 10px 16px;
  color: var(--ink-70);
}

.v3-center-head {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: clamp(34px, 4.4vw, 60px);
}

/* Cards: photo, hand-lettered heading, a line, a link */
.v3-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.v3-card h3 {
  margin-top: 10px;
  font-size: clamp(2.2rem, 3vw, 2.7rem);
}

.v3-card p {
  color: var(--ink-70);
}

.v3-card .tlink {
  margin-top: auto;
  align-self: flex-start;
}

.v3-card .fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A wall of his dishes — the "more images on the front" ask */
.v3-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}

.v3-wall .fig {
  aspect-ratio: 4 / 5;
}

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

@media (max-width: 760px) {
  .v3-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* His deeper red (the --lightAccent band) */
.v3-band-deepred {
  background: var(--red-deep);
  color: #fff;
}

.v3-band-deepred .quote,
.v3-band-deepred h2 {
  color: #fff;
}

.v3-band-deepred .quote__by {
  color: #fff;
}

.v3-band-deepred .stars {
  color: #fff;
}

.v3-band-deepred .rev {
  background: #fff;
  color: var(--ink);
}

.v3-band-deepred .rev .stars {
  color: var(--red-deep);
}

.v3-awards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
}

.v3-awards img {
  width: clamp(150px, 18vw, 220px);
  height: auto;
}

/* The global p + p spacing is for body copy, not the stacked banner lines. */
.v3-brush__text p + p {
  margin-top: 4px;
}

.v3-brush__text {
  padding-top: clamp(26px, 3.2vw, 38px);
}

/* The black "keep up to date" band runs straight into the black footer, as on
   his site. Trim the join so it reads as one ending, not a gap. */
.v3-band-black {
  padding-bottom: clamp(44px, 5vw, 64px);
}

.v3-band-black + * .ftr,
main:has(> .v3-band-black:last-child) + .ftr {
  padding-top: clamp(28px, 3vw, 40px);
}

/* White text on his bright red is 4.06:1 — just under AA for button-size text.
   A light dark wash behind outline buttons on the red band lifts it to ~5.4:1
   and still reads as the secondary action next to the solid white pills. */
.band-red .btn--ghost-light {
  background: rgba(0, 0, 0, 0.16);
}

.band-red .btn--ghost-light:hover {
  background: #fff;
  color: var(--red-deep);
}

/* Date chips carry small white text: his deeper red keeps them at 5.7:1. */
.datechip {
  background: var(--red-deep);
}

/* Hero track can't grow past the viewport. Without minmax(0, 1fr) the 94vw
   brush plus the wrap padding blew the grid track out to ~392px on a 375px
   phone and pushed the whole lockup off-centre. */
.v3-hero {
  grid-template-columns: minmax(0, 1fr);
}

/* Short hiring line on phones instead of an ellipsis mid-sentence. */
.announce__short {
  display: none;
}

@media (max-width: 760px) {
  .v3-hero__in {
    padding-inline: 0;
  }

  .announce__long {
    display: none;
  }

  .announce__short {
    display: inline;
  }
}

/* ==========================================================================
   VERSION 3 — TYPE SCALE (23 Sep 2026)
   Feedback: "fonts are too small". Measured on Paul's live site at 1440px:
   body and nav are Oswald 300 at 19.2px, buttons and review quotes 20.8px,
   Amatic headings 28.8–41.6px, and nothing but the announcement bar goes
   under 16px. Oswald is condensed, so it needs those sizes to read like a
   normal sans. Before this block most v3 copy sat at 15–17px and labels
   went down to 11px.

   The floor now: body, nav, buttons and links ~19px; card copy ~18.4px;
   meta lines ~16.5px; nothing under 15px. Amatic is never set small (it is
   illegible below ~26px), so small attribution lines move to Oswald.

   Must stay LAST in the file: the rules it replaces have equal specificity,
   so source order decides. A few inline JSX sizes were raised to match.
   ========================================================================== */

body {
  font-size: 1.2rem;
}

/* Navigation, buttons and text links — Paul's are 19.2–20.8px */
.hdr__nav a,
.navgroup summary {
  font-size: 1.2rem;
}

.hdr__nav .navgroup__panel a {
  font-size: 1.1rem;
}

.hdr__tel {
  font-size: 1.15rem;
}

.btn {
  font-size: 1.2rem;
}

.btn--sm {
  font-size: 1.12rem;
}

.tlink {
  font-size: 1.2rem;
}

.chip {
  font-size: 1.06rem;
}

.bookbar .btn {
  font-size: 1.02rem;
}

.mnav__group ul a {
  font-size: 1.25rem;
}

.announce {
  font-size: 0.95rem;
}

/* Supporting copy */
.lede {
  font-size: clamp(1.25rem, 1.6vw, 1.4rem);
}

.small {
  font-size: 1.05rem;
}

.tiny {
  font-size: 0.95rem;
}

.pillar p,
.dish p,
.numbered p,
.notecard p,
.mrow__desc,
.agenda__excerpt,
.post-card > p:last-of-type,
.event-panel dd,
.loc__addr,
.loc__hours div {
  font-size: 1.15rem;
}

.rev p {
  font-size: 1.2rem;
}

.post-body p {
  font-size: 1.2rem;
}

/* Meta lines, labels and prices */
.post-meta,
.event-facts,
.loc__strap,
.dish__en,
.mrow__en,
.mrow__name--wine .mrow__en {
  font-size: 1.05rem;
}

/* Attributions were Amatic at 15.7px on the red band — unreadable. */
.rev__by,
.quote__by {
  font-family: var(--font-sans), sans-serif;
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.mrow__ladder dt,
.event-panel dt,
.dietary-key dt,
.tag,
.pill-note,
.strip figcaption,
.datechip span:last-child,
label.field span {
  font-size: 0.95rem;
}

.dietary-key dd {
  font-size: 1.05rem;
}

/* 16px minimum on form controls also stops iOS zooming into the field. */
input,
textarea,
select {
  font-size: 1.06rem;
}

.dish__price {
  font-size: 1.15rem;
}

.mrow__price--wine {
  font-size: 1.1rem;
}

/* Footer — his footer copy is body size; ours stays a step under it. */
.ftr__nav a,
.ftr address,
.ftr__brand-copy,
.ftr__location .small {
  font-size: 1.08rem;
}

.ftr__bottom {
  font-size: 0.98rem;
}

/* Amatic headings that were set too small to read */
.kicker {
  font-size: clamp(1.9rem, 2.5vw, 2.4rem);
}

.notecard h3,
.numbered h3 {
  font-size: 2rem;
}

.v3-brush__text p {
  font-size: clamp(1.5rem, 2.2vw, 1.8rem);
}

.faq-item summary {
  font-size: clamp(1.75rem, 2.6vw, 2.1rem);
}

.event-panel h2 {
  font-size: clamp(1.9rem, 2.4vw, 2.3rem);
}

@media (max-width: 760px) {
  /* Paul's phone sizes: body 18.2px, buttons 19.2px */
  body {
    font-size: 1.125rem;
  }

  .btn,
  .tlink {
    font-size: 1.14rem;
  }

  .announce {
    font-size: 0.88rem;
  }
}