/* ==========================================================================
   Flavors of Phoenicia
   One stylesheet, no framework. Tokens first, then chrome, then pages.

   Colour comes from the restaurant's own branding: #00838D is the teal in
   their logo and #DCECEF the pale blue behind it. The warm cream and
   terracotta are the neutral and accent chosen to sit with them — teal alone
   reads cold and clinical, which is wrong for this food.

   Their logo is teal ink on a white field (it is a JPEG, so the white is
   opaque). Anywhere it lands on a dark or coloured surface it gets an explicit
   white chip rather than being recoloured or keyed — see .brand and
   .foot__brand img.

   The mark itself is derived in fetch_assets.py: TouchBistro's banner carries
   it stretched ~1.5x wide, so it is squeezed back to the proportions of the
   copy the owner supplied. Aspect ratio 3.81:1, wordmark ~43% of the height.
   ========================================================================== */

:root {
  --ink:        #0e2529;
  --ink-2:      #3f585c;
  --ink-3:      #5f767a;   /* darkened from #6b8286 to clear 4.5:1 on cream */
  --teal:       #00838d;
  --teal-dk:    #015a63;
  --teal-lt:    #1aa0aa;
  --pale:       #dceceF;
  --pale-2:     #eef6f8;
  --cream:      #fcf9f3;
  --sand:       #f3ead9;
  --terra:      #b4531f;
  --line:       rgba(14, 37, 41, .13);
  --line-2:     rgba(14, 37, 41, .07);
  --shadow:     0 1px 2px rgba(14,37,41,.05), 0 8px 24px -12px rgba(14,37,41,.18);
  --shadow-lg:  0 2px 6px rgba(14,37,41,.06), 0 24px 48px -20px rgba(14,37,41,.28);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --wrap: 1140px;
  --gut: clamp(1.1rem, 4vw, 2.5rem);
  --r: 14px;
  --r-sm: 9px;
}

/* --------------------------------------------------------------------------
   Reset-ish
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 clamp(1rem, .97rem + .16vw, 1.075rem)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.5rem + 3.1vw, 3.9rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.4vw, 2.3rem); }
h3 { font-size: 1.09rem; font-family: var(--sans); font-weight: 650;
     letter-spacing: -.005em; }
p  { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--teal-dk); text-underline-offset: .18em;
    text-decoration-thickness: .07em; }
a:hover { color: var(--terra); }

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

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--ink); color: #fff; padding: .7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); z-index: 100;
  text-decoration: none; font-weight: 600;
}
.skip:focus { transform: translate(-50%, 0); color: #fff; }

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }

.kicker {
  font: 650 .74rem/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Their exact #00838D is kept for fills and borders, but as small uppercase
     text on cream it only reaches 4.3:1, so the kicker uses the darker teal. */
  color: var(--teal-dk);
  margin: 0 0 .75rem;
}

.linkish {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--teal-dk); font-weight: 600; text-decoration: underline;
  text-underline-offset: .18em;
}
.linkish:hover { color: var(--terra); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  background: var(--teal); color: #fff;
  padding: .82rem 1.5rem;
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  font: 650 .95rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--teal-dk); border-color: var(--teal-dk);
             color: #fff; transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--ghost { background: transparent; color: var(--teal-dk);
              border-color: rgba(0,131,141,.42); }
.btn--ghost:hover { background: var(--teal-dk); border-color: var(--teal-dk);
                    color: #fff; }

.btn--sm { padding: .58rem 1.05rem; font-size: .875rem; }

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

.site {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site__in {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 68px;
}

/* The mark is ~3.8:1, so it is sized by height and left to find its width. */
.brand { display: flex; align-items: center; flex: 0 0 auto; margin-right: auto; }
/* Re-framed to the owner's proportions the mark is ~30% narrower than the
   stretched banner it replaces, so it can be set taller for legibility and
   still occupy less width in the bar than it did before. */
.brand img { width: auto; height: 44px; }
@media (min-width: 700px) { .brand img { height: 54px; } }

.nav { display: flex; align-items: center; gap: 1.6rem; }
/* The :not(.btn) is load-bearing. `.nav a` scores (0,1,1) and `.btn--sm` only
   (0,1,0), so a bare `.nav a` quietly wins the padding it never meant to set:
   the Order pickup pill was inheriting `padding: .35rem 0` and rendering with
   no horizontal padding at all, its rounded border pinched against the text.
   Keeping link styling and button styling in separate selectors settles it
   here rather than with !important further down. */
.nav a:not(.btn) {
  color: var(--ink); text-decoration: none; font-weight: 550; font-size: .96rem;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { color: var(--teal-dk);
  border-bottom-color: var(--teal-lt); }
.nav a[aria-current="page"] { color: var(--teal-dk);
  border-bottom-color: var(--teal); }
/* Deliberately roomier than .btn--sm. The header band is 68px tall, so a ~41px
   pill still sits comfortably inside it, and this is the one action on the
   page that should read as a target rather than another link. */
.nav .btn { border-bottom: 1.5px solid var(--teal); color: #fff;
            padding: .72rem 1.4rem; font-size: .95rem; }
.nav .btn:hover { color: #fff; }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.burger span:not(.sr) {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 800px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1.25rem;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--line-2); }
  .nav a[aria-current="page"] { border-bottom-color: var(--line-2); }
  .nav .btn { margin-top: .9rem; align-self: flex-start; border-bottom-width: 1.5px; }
}

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

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--pale-2), var(--pale));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* The text block keeps the page's normal left gutter — capping its width here
   instead would combine with .wrap's auto margins and centre it under the
   photography. The right half is reserved with padding so the collage has
   somewhere to sit. */
.hero__in { position: relative; z-index: 2; padding: clamp(3rem, 7vw, 5.5rem) 0
            clamp(3rem, 7vw, 5rem); }
@media (min-width: 901px) { .hero__in { padding-right: 48%; } }
.hero h1 { margin-bottom: .55rem; }
.hero__lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem); color: var(--ink-2);
              max-width: 34rem; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.7rem 0 1.1rem; }
.hero__meta { font-size: .92rem; color: var(--ink-2); margin: 0; }

/* Four dish photos, fanned down the right. Decorative — the alt text is empty
   and the whole block is aria-hidden, because the food is named in the menu. */
.hero__art {
  position: absolute; inset: 0 0 0 auto; width: 46%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 1.5rem 1.5rem 1.5rem 0;
  opacity: .96;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 26%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 26%, #000 100%);
}
.hero__art img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r); box-shadow: var(--shadow);
}
.hero__art img:nth-child(1) { transform: translateY(-6%); }
.hero__art img:nth-child(4) { transform: translateY(6%); }

@media (max-width: 900px) {
  /* The collage is first in the DOM so it can be positioned behind the text on
     a wide screen. Once it stops being absolute it would otherwise push the
     headline off the top of a phone, so the order is flipped explicitly. */
  .hero { display: flex; flex-direction: column; }
  .hero__in { order: 1; }
  .hero__art { order: 2; }
  .hero__art { position: static; width: auto; padding: 0 var(--gut) 2rem;
    -webkit-mask-image: none; mask-image: none;
    grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .hero__art img { aspect-ratio: 1; transform: none !important; }
  .hero__in { padding-bottom: 2rem; }
}
@media (max-width: 560px) {
  .hero__art { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Home: stats, band, cards, market teaser, find us
   -------------------------------------------------------------------------- */

.stats { background: var(--ink); color: #fff; }
.stats__in {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; padding: 1.9rem 0;
  text-align: center;
}
/* Scoped to the direct children: a bare `.stats div` also matches .stats__in
   itself and quietly beats its own `display: grid`. */
.stats__in > div { display: flex; flex-direction: column; gap: .2rem; }
.stats strong { font: 600 clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem)/1 var(--serif);
                color: #fff; }
.stats span { font-size: .84rem; letter-spacing: .04em; color: rgba(255,255,255,.72); }
@media (max-width: 560px) {
  .stats__in { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.5rem 0; }
}

.band {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.band__text h2 { max-width: 15ch; }
.band__text p { color: var(--ink-2); }

.creds { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.creds li { padding: 1.05rem 0; border-top: 1px solid var(--line);
            color: var(--ink-2); font-size: .97rem; }
.creds li:last-child { border-bottom: 1px solid var(--line); }
.creds strong { display: block; color: var(--ink); font-weight: 650;
                font-size: 1rem; margin-bottom: .12rem; }
@media (max-width: 860px) { .band { grid-template-columns: 1fr; } }

.sect__head { max-width: 40rem; margin-bottom: 2rem; }
.sect__head p { color: var(--ink-2); margin: 0; }

.sigs { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
/* There are exactly six of these, so lock three-up once there is room:
   auto-fill gives four columns at desktop width and a ragged 4 + 2. */
@media (min-width: 920px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card img, .card__noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__noimg { background: linear-gradient(135deg, var(--pale), var(--sand)); }
.card__body { padding: 1.05rem 1.15rem 1.2rem; display: flex;
              flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .3rem; }
.card__body p { font-size: .9rem; color: var(--ink-2); margin: 0 0 .9rem; }
.card__price { margin-top: auto !important; font-weight: 700; color: var(--teal-dk);
               font-size: 1.02rem; }
.sigs__more { margin: 2rem 0 0; }

.market-teaser {
  background: var(--sand);
  border-block: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.mt__in { display: grid; grid-template-columns: 1.15fr 1fr;
          gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.mt__text p { color: var(--ink-2); }
.mt__text .btn--ghost { margin-top: .5rem; }
.mt__aisles { list-style: none; margin: 0; padding: 0;
              display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mt__aisles a {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .68rem .9rem; text-decoration: none; color: var(--ink);
  font-size: .91rem; font-weight: 550;
  transition: border-color .15s ease, transform .15s ease;
}
.mt__aisles a:hover { border-color: var(--teal); transform: translateX(2px);
                      color: var(--teal-dk); }
.mt__aisles span { color: var(--ink-3); font-variant-numeric: tabular-nums;
                   font-size: .82rem; }
@media (max-width: 860px) { .mt__in { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .mt__aisles { grid-template-columns: 1fr; } }

.findus { display: grid; grid-template-columns: 1.1fr 1fr;
          gap: clamp(2rem, 5vw, 4rem); padding: clamp(3rem, 6vw, 5rem) 0;
          align-items: start; }
.findus address { font-style: normal; font-size: 1.1rem; line-height: 1.55;
                  margin-bottom: .8rem; }
@media (max-width: 760px) { .findus { grid-template-columns: 1fr; } }

.hours-card { margin: 0; background: #fff; border: 1px solid var(--line);
              border-radius: var(--r); overflow: hidden; }
.hours-card__row { display: flex; justify-content: space-between; gap: 1rem;
                   padding: .72rem 1.1rem; border-bottom: 1px solid var(--line-2);
                   font-size: .96rem; }
.hours-card__row:last-child { border-bottom: 0; }
.hours-card__row dt { font-weight: 550; margin: 0; }
.hours-card__row dd { margin: 0; color: var(--ink-2);
                      font-variant-numeric: tabular-nums; }
.hours-card__row.is-closed { background: var(--pale-2); }
.hours-card__row.is-closed dd { color: var(--terra); font-weight: 650; }
.hours-card--lg .hours-card__row { padding: .9rem 1.25rem; font-size: 1rem; }

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.cta { background: var(--teal-dk); color: #fff; }
.cta__in { padding: clamp(3rem, 6vw, 4.5rem) 0; max-width: 40rem; }
.cta h2 { color: #fff; }
.cta .kicker { color: var(--pale); }
.cta p { color: rgba(255,255,255,.86); }
.cta__btns { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 .9rem; }
.cta .btn { background: #fff; color: var(--teal-dk); border-color: #fff; }
.cta .btn:hover { background: var(--pale); border-color: var(--pale);
                  color: var(--teal-dk); }
.cta .btn--ghost { background: transparent; color: #fff;
                   border-color: rgba(255,255,255,.5); }
.cta .btn--ghost:hover { background: #fff; color: var(--teal-dk);
                         border-color: #fff; }
.cta__note { font-size: .88rem; color: rgba(255,255,255,.75) !important; margin: 0; }

/* --------------------------------------------------------------------------
   Page heads
   -------------------------------------------------------------------------- */

.phead { background: linear-gradient(180deg, var(--pale-2), var(--cream));
         border-bottom: 1px solid var(--line-2);
         padding: clamp(2.6rem, 5vw, 4.2rem) 0 clamp(2rem, 4vw, 3rem); }
.phead--alt { background: linear-gradient(180deg, var(--sand), var(--cream)); }
.phead h1 { margin-bottom: .4rem; }
.phead__lede { font-size: clamp(1.02rem, 1rem + .35vw, 1.2rem);
               color: var(--ink-2); max-width: 46ch; }
.phead__btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.phead--404 { text-align: center; }
.phead--404 .phead__lede { margin-inline: auto; }
.phead--404 .phead__btns { justify-content: center; }

/* --------------------------------------------------------------------------
   Jump nav + filters (menu & market)
   -------------------------------------------------------------------------- */

.jump {
  position: sticky; top: 68px; z-index: 30;
  background: rgba(252,249,243,.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.jump__in { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0;
            scrollbar-width: thin; }
.jump a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink); text-decoration: none; font-size: .875rem; font-weight: 550;
  white-space: nowrap;
}
.jump a:hover { border-color: var(--teal); color: var(--teal-dk); }
.jump__n { color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; }

.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding: 1.6rem 0 .5rem;
}
.search { position: relative; flex: 1 1 20rem; }
.search input {
  width: 100%; padding: .72rem 2.4rem .72rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink);
  font: 400 .97rem/1.3 var(--sans);
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { border-color: var(--teal); }
.search__clear {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--line-2); color: var(--ink-2);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.search__clear:hover { background: var(--pale); color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  font: 550 .855rem/1 var(--sans); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--teal); color: var(--teal-dk); }
.chip.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }

.filters__count { margin: 0; font-size: .87rem; color: var(--ink-3);
                  font-variant-numeric: tabular-nums; }

.noresult { padding: 2.5rem 0; color: var(--ink-2); }

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

.menu-body { padding-bottom: clamp(3rem, 6vw, 5rem); }

.msec { padding-top: clamp(2.2rem, 4vw, 3.4rem); scroll-margin-top: 128px; }
.msec__head { max-width: 46rem; margin-bottom: 1.2rem;
              padding-bottom: .7rem; border-bottom: 2px solid var(--teal); }
.msec__head h2 { margin-bottom: .15rem; }
.msec__blurb { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* min(330px, 100%) rather than a bare 330px: the floor in minmax() is hard, so
   on a 360px phone the column stayed 330 wide inside a 309 wide container and
   pushed 3px of horizontal scroll onto the whole page. */
.rows { list-style: none; margin: 0; padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
        gap: .1rem 2.5rem; }

.row { display: flex; gap: .95rem; align-items: flex-start;
       padding: 1rem 0; border-bottom: 1px solid var(--line-2); }
.row[hidden] { display: none; }
.row__img { width: 72px; height: 72px; flex: 0 0 auto; object-fit: cover;
            border-radius: 10px; background: var(--pale-2); }
.row__body { flex: 1; min-width: 0; }
.row__head { display: flex; align-items: baseline; gap: .35rem; }
.row__name { margin: 0; font-size: 1rem; font-weight: 650; }
.row__dots { flex: 1; border-bottom: 1px dotted var(--line);
             transform: translateY(-.22em); min-width: 1rem; }
.row__price { font-weight: 700; color: var(--teal-dk);
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.row__desc { margin: .28rem 0 0; font-size: .89rem; color: var(--ink-2);
             line-height: 1.5; }

.tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.tag {
  font: 650 .68rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  padding: .28rem .5rem; border-radius: 4px; white-space: nowrap;
}
.tag--v  { background: #e6f2e4; color: #2f6128; }
.tag--vg { background: #dff0e6; color: #1d6b46; }
.tag--gf { background: var(--pale); color: var(--teal-dk); }

.note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--pale-2); border: 1px solid var(--line-2);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-sm); padding: 1.4rem 1.5rem;
}
.note h2 { font-size: 1.15rem; font-family: var(--sans); font-weight: 650;
           margin-bottom: .6rem; }
.note ul { margin: 0; padding-left: 1.1rem; }
.note li { margin-bottom: .5rem; font-size: .93rem; color: var(--ink-2); }
.note li:last-child { margin-bottom: 0; }
.note .tag { text-transform: none; }

/* --------------------------------------------------------------------------
   Prose (about)
   -------------------------------------------------------------------------- */

.prose { max-width: 44rem; padding: clamp(2.5rem, 5vw, 3.5rem) 0
         clamp(3rem, 6vw, 4.5rem); }
.prose .lede { font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem);
               color: var(--ink); font-family: var(--serif); line-height: 1.5; }
.prose h2 { margin-top: 2.2rem; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem); }
.prose p { color: var(--ink-2); }

.callout { margin-top: 2.8rem; background: var(--sand); border-radius: var(--r);
           padding: 1.6rem 1.7rem; }
.callout h2 { margin-top: 0; font-family: var(--sans); font-size: 1.2rem;
              font-weight: 650; }
.callout p { color: var(--ink-2); }
.callout p:last-child { margin-bottom: 0; display: flex; flex-wrap: wrap;
                        gap: .6rem; }

/* --------------------------------------------------------------------------
   Visit
   -------------------------------------------------------------------------- */

.visit__grid { display: grid; grid-template-columns: 1fr 1.1fr;
               gap: clamp(2rem, 5vw, 3.5rem);
               padding: clamp(2.5rem, 5vw, 3.5rem) 0; align-items: start; }
.visit__col h2 { font-size: 1.25rem; font-family: var(--sans); font-weight: 650;
                 margin-top: 2.2rem; }
.visit__col h2:first-child { margin-top: 0; }
.visit__note { font-size: .9rem; color: var(--ink-3); margin-top: .7rem; }
.visit__addr { font-style: normal; font-size: 1.1rem; line-height: 1.55;
               margin-bottom: .9rem; }
.visit__col .btn + .btn { margin-left: .4rem; }
.visit__map { position: sticky; top: 96px; }
.visit__map iframe { width: 100%; height: clamp(320px, 52vh, 520px);
                     border-radius: var(--r); border: 1px solid var(--line);
                     display: block; }
@media (max-width: 860px) {
  .visit__grid { grid-template-columns: 1fr; }
  .visit__map { position: static; }
}

.faqs { padding-bottom: clamp(3rem, 6vw, 4.5rem); max-width: 46rem; }
.faqs h2 { margin-bottom: 1rem; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600;
               list-style: none; display: flex; justify-content: space-between;
               gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--teal); font-size: 1.35rem;
                      font-weight: 400; line-height: 1; flex: 0 0 auto; }
.faq[open] summary::after { content: "–"; }
.faq p { margin: 0 0 1.1rem; color: var(--ink-2); font-size: .96rem;
         max-width: 60ch; }

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

.site-foot { background: var(--ink); color: rgba(255,255,255,.76);
             margin-top: auto; }
.foot__grid {
  display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1.4fr 1fr 1fr .8fr;
  padding: clamp(2.8rem, 5vw, 4rem) 0 2.2rem;
}
.foot__brand img {
  height: 78px; width: auto;
  background: #fff; padding: 10px 14px; border-radius: var(--r-sm);
}
.foot__tag { margin: 1rem 0 .2rem; color: rgba(255,255,255,.8); font-size: .95rem; }
.foot__legal-name { margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); }
.site-foot h2 { color: #fff; font-family: var(--sans); font-size: .78rem;
                font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
                margin-bottom: .9rem; }
.site-foot a { color: #fff; text-decoration-color: rgba(255,255,255,.35); }
.site-foot a:hover { color: var(--pale); }
.site-foot address { font-style: normal; line-height: 1.65; font-size: .95rem;
                     margin-bottom: 1rem; }
.site-foot .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.site-foot .btn--ghost:hover { background: #fff; color: var(--ink);
                               border-color: #fff; }

.fhours { margin: 0; font-size: .89rem; }
.fhours__row { display: flex; justify-content: space-between; gap: .8rem;
               padding: .2rem 0; }
.fhours__row dt, .fhours__row dd { margin: 0; }
.fhours__row dd { color: rgba(255,255,255,.62);
                  font-variant-numeric: tabular-nums; }
.fhours__row.is-closed dd { color: #f0a882; font-weight: 600; }
.foot__note { margin: .8rem 0 0; font-size: .84rem; color: rgba(255,255,255,.5); }

.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
               font-size: .95rem; }

.foot__base { border-top: 1px solid rgba(255,255,255,.12); padding: 1.2rem 0 1.6rem; }
.foot__base p { margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); }

@media (max-width: 900px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Print — the menu is the page people print.
   -------------------------------------------------------------------------- */

@media print {
  .site, .jump, .filters, .cta, .site-foot, .skip, .phead__btns,
  .noresult, .hero__art { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .rows { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .row__img { display: none; }
  .msec { break-inside: avoid; padding-top: 1.2rem; }
  a { text-decoration: none; color: #000; }
}