/* ============================================================================
   ODD SISTER — styles.css
   ----------------------------------------------------------------------------
   Design direction: Navy as the dominant field (mirrors TRC's Royal-Green-as-
   background move), Pink standing in as the primary interactive accent, Gold
   held back as a second-tier, occasional highlight. Charmonman (script) is
   reserved for hero H1s and short taglines only — everything else, including
   menu headings, runs in Borna so the "used sparingly" instruction in the
   brand guide actually holds. See BRAND_GUIDE.md for the full derivation.

   Structure of this file:
     1. FONTS
     2. TOKENS — colour, type, spacing, radius
     3. MENU COMPONENT BRANDING  (menus/menu.css reads these)
     4. RESET + PAGE SHELL
     5. TYPOGRAPHY
     6. LAYOUT HELPERS
     7. NAVIGATION (MIGRATION.md §2.1)
     8. BUTTONS
     9. FOOTER
    10. PROMO POPUP (MIGRATION.md §12)
    11. HOMEPAGE SECTIONS
    12. UTILITIES
    13. LINKS PAGE

   Mobile-first throughout: media queries widen up, never shrink down
   (~80% of traffic is phone).
   ========================================================================= */


/* ============================================================================
   1. FONTS — self-hosted, converted from Font Source/ (MIGRATION.md §8)
   ========================================================================= */

@font-face {
  font-family: 'Borna';
  src: url('fonts/Borna-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Borna';
  src: url('fonts/Borna-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Charmonman';
  src: url('fonts/Charmonman-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Hero H1s and short taglines (H4) only, per BRAND_GUIDE.md — never body,
   never repeated across every menu heading. */


/* ============================================================================
   2. TOKENS
   ========================================================================= */

:root {
  /* — Type families — */
  --os-font-script: 'Charmonman', cursive;                                   /* H1 + H4 only */
  --os-font-body:   'Borna', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* — Colour system — from BRAND_GUIDE.md, sampled off the brand deck's
       rendered swatches (its printed hex codes are leftover template values
       and don't match). Navy is the PRIMARY FIELD, mirroring TRC's green
       flip; Pink takes the role TRC's Gold plays (default accent — buttons,
       links, highlights); Gold is held back further still, for the rare
       gilded touch (a badge glow, a hover state) — never a repeated UI
       colour. Blush/Blush-dark are derived neutrals (not in the source
       guide) for light-surface sections. */
  --os-navy:        #212236;  /* dominant field — page bg, nav, footer, panels */
  --os-navy-deep:   #15161F;  /* darker variant — reserve for specific cases only */
  --os-navy-light:  #3B3D57;  /* lighter tint — hover states on dark */

  --os-pink:        #DB7E8E;  /* primary accent — buttons, links, highlights, logo stand-in */
  --os-pink-deep:   #C25F71;  /* darker variant — reserve for specific cases only */
  --os-pink-light:  #E9A6B1;  /* lighter tint — hover highlight */

  --os-gold:        #D4AC62;  /* secondary accent — sparing use only: badges, gilded hover */
  --os-gold-light:  #E3C68C;

  --os-white:       #FFFFFF;
  --os-blush:       #F4ECEA;  /* derived — light neutral surface */
  --os-blush-dark:  #D8C6C3;  /* derived — muted border on light surfaces */

  /* — Text roles. Kept as their own tokens (not read directly off the colour
       tokens above) so a future palette tweak can't silently drag text
       contrast below AA. — */
  --os-text:          var(--os-white);      /* headings + body on dark field — 15.8:1 */
  --os-text-soft:     var(--os-blush-dark); /* de-emphasised text on dark field — 8.1:1 */
  --os-text-on-light: var(--os-navy);       /* copy on any light/blush surface — 13.9:1 */

  /* — Type scale — clamp() so display sizes stay big on desktop without
       overflowing a 360px phone. Script (H1) runs a touch larger than a
       serif/sans equivalent would need to, since swash letterforms read
       smaller at the same point size. — */
  --step--1: 0.85rem;
  --step-0:  1rem;
  --step-1:  1.15rem;
  --step-2:  clamp(1.4rem,  1.15rem + 1vw,  1.85rem);
  --step-3:  clamp(1.9rem,  1.4rem + 2vw,   2.75rem);
  --step-4:  clamp(2.6rem,  1.5rem + 4.2vw, 3.9rem);
  --step-5:  clamp(3.4rem,  1.5rem + 8vw,   6.2rem);  /* hero / H1 — script */

  /* — Spacing — */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.85rem;
  --space-m:   1.35rem;
  --space-l:   2.2rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;

  /* — Corner language + measure — */
  --radius-s:  4px;
  --radius-m:  10px;
  --radius-lg: 22px;
  --pill:      999px;
  --measure:   62ch;
  --page-max:  1180px;
  --gutter:    clamp(1.1rem, 4vw, 3rem);

  /* — Nav sizing — */
  --nav-logo-h: 40px;
  --nav-h: calc(2 * var(--space-m) + var(--nav-logo-h));

  /* — Header/mobile-nav brand tokens (MIGRATION.md §2.1) — */
  --brand-nav:    var(--os-white);
  --brand-panel:  var(--os-navy);
}


/* ============================================================================
   3. MENU COMPONENT BRANDING
   ----------------------------------------------------------------------------
   menus/menu.css ships with no :root block of its own — every rule falls
   back to a hardcoded default via var(--menu-*, fallback). This is the only
   place these tokens are set; the component itself stays unmodified.
   Heading font intentionally stays Borna, not the script — "sparingly" only
   holds if a dozen category/section headings a page don't all run in script.
   ========================================================================= */

:root {
  --menu-text:             var(--os-navy);
  --menu-surface:          var(--os-blush);
  --menu-accent:           var(--os-pink);
  --menu-font-heading:     var(--os-font-body);
  --menu-font-body:        var(--os-font-body);
  --menu-skeleton-base:    var(--os-blush-dark);
  --menu-skeleton-shimmer: rgba(33, 34, 54, .22);
}


/* ============================================================================
   4. RESET + PAGE SHELL
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--os-navy);
  color: var(--os-text);
  font-family: var(--os-font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

main { flex: 1 0 auto; width: 100%; }

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

a { color: var(--os-pink); text-decoration-thickness: from-font; }
a:hover, a:focus-visible { color: var(--os-pink-light); }

:focus-visible {
  outline: 2px solid var(--os-pink);
  outline-offset: 3px;
}


/* ============================================================================
   5. TYPOGRAPHY
   ========================================================================= */

h1, h4 {
  font-family: var(--os-font-script);
  font-weight: 400;
  color: var(--os-text);
  margin: 0 0 0.4em;
  line-height: 1.1;
}
h2, h3 {
  font-family: var(--os-font-body);
  color: var(--os-text);
  margin: 0 0 0.5em;
  line-height: 1.2;
}

h1 { font-size: var(--step-5); letter-spacing: 0.005em; }
h2 { font-size: var(--step-3); font-weight: 500; }
h3 { font-size: var(--step-2); font-weight: 500; }
/* H4 = "slogan" treatment per BRAND_GUIDE.md type hierarchy — short script
   taglines only, not a generic quaternary heading. */
h4 { font-size: var(--step-2); }

p { margin: 0 0 1em; max-width: var(--measure); }

blockquote {
  margin: var(--space-l) 0;
  padding-left: var(--space-m);
  border-left: 2px solid var(--os-pink);
  font-family: var(--os-font-script);
  font-size: var(--step-3);
  max-width: var(--measure);
}
blockquote span { display: inline-block; margin-top: var(--space-2xs); font-size: var(--step--1); font-family: var(--os-font-body); }

.eyebrow {
  display: block;
  font-family: var(--os-font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-pink);
  margin-bottom: var(--space-xs);
}

/* Hero-only swap: the big headline reads sturdier in Borna, and the
   address kicker gets the script treatment instead — flipping the
   general H1/eyebrow pairing used everywhere else on the site. */
.hero h1 { font-family: var(--os-font-body); font-weight: 500; letter-spacing: 0; }
.hero .eyebrow {
  font-family: var(--os-font-script);
  font-weight: 400;
  font-size: var(--step-2);
  letter-spacing: 0;
  text-transform: none;
}

.text-soft { color: var(--os-text-soft); }

.page-header { text-align: center; padding-bottom: var(--space-l); }
.page-header .wrap { max-width: 62ch; }
.page-header p { margin-inline: auto; }
/* Charmonman's swash caps/ascenders (H, L, h, l...) overshoot the font's own
   line-box, and that overshoot grows with the H1's fluid step-5 size — so the
   gap needs to scale with it too, not just the eyebrow's fixed margin-bottom,
   or the swash tips crowd or cross into the eyebrow line above. */
.page-header h1 { margin-top: 0.35em; }

/* Left-aligned, full-width variant for the landing/SEO pages (brunch, dinner,
   cocktails, happy-hour) — matches the full-width intro/FAQ treatment below
   instead of the centered 62ch column used elsewhere. */
.page-header.page-header--left { text-align: left; }
.page-header--left.page-header .wrap { max-width: var(--page-max); }
.page-header--left p { margin-inline: 0; }


/* ============================================================================
   6. LAYOUT HELPERS
   ========================================================================= */

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

main section {
  padding-block: var(--space-2xl);
}

.section-light {
  background-color: var(--os-blush);
  /* Translucent blush wash sits over the fabric tile (painted first =
     top layer) so only a soft hint of grain shows through, tinted to
     match rather than a raw grayscale texture. */
  background-image:
    linear-gradient(rgba(244, 236, 234, .72), rgba(244, 236, 234, .72)),
    url('images/fabric-texture.jpg');
  background-repeat: no-repeat, repeat;
  background-size: cover, 450px 450px;
  color: var(--os-text-on-light);
}
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--os-text-on-light); }
.section-light a { color: var(--os-pink-deep); }
.section-light .text-soft { color: var(--os-navy-light); }
.section-light a:hover, .section-light a:focus-visible { color: var(--os-navy-light); }


/* ============================================================================
   7. NAVIGATION (MIGRATION.md §2.1)
   ========================================================================= */

.topnav-container {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m) var(--gutter);
  background: var(--os-navy);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: background-color .35s ease, box-shadow .35s ease;
}

/* Homepage hero nav: floats transparently over the hero image, fades in the
   solid nav background once the page scrolls (JS toggles .is-scrolled). */
.topnav-container.nav--overlay {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
}
.topnav-container.nav--overlay.is-scrolled {
  background: var(--os-navy);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}

.nav-logo { height: var(--nav-logo-h); width: auto; transition: opacity .3s ease, filter .3s ease; }
/* The seal carries fine arced-text detail (ODD SISTER / NEW YORK), so it
   wants noticeably more height than the wordmark to stay legible. */
.nav-logo--seal { height: calc((var(--nav-logo-h) + 8px) * 1.44); }
.footer-logo { height: 46px; width: auto; margin-bottom: var(--space-s); }

.topnav {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  margin-left: auto;
}

.nav-link {
  font-family: var(--os-font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-nav);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--os-pink); }

.nav-link-reserve {
  padding: var(--space-xs) var(--space-m);
  border: 1px solid var(--os-pink);
  border-radius: var(--pill);
  background: var(--os-pink);
  color: var(--os-navy);
}
.nav-link-reserve:hover, .nav-link-reserve:focus-visible {
  background: var(--os-pink-deep);
  border-color: var(--os-pink-deep);
  color: var(--os-navy);
}

/* Hamburger button — hidden on desktop */
.icon {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--brand-nav);
}
.icon svg { width: 34px; height: auto; overflow: visible; }
.icon svg path { transition: transform .3s ease, opacity .2s ease; transform-box: fill-box; transform-origin: center; }
.icon[aria-expanded="true"] svg path:nth-of-type(1) { transform: translateY(12px) rotate(45deg); }
.icon[aria-expanded="true"] svg path:nth-of-type(2) { opacity: 0; }
.icon[aria-expanded="true"] svg path:nth-of-type(3) { transform: translateY(-12px) rotate(-45deg); }

.no-scroll { overflow: hidden; }

@media (max-width: 760px) {
  .icon { display: inline-flex; z-index: 40; }
  .topnav-container { justify-content: space-between; }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 15;
  }
  body.no-scroll::before { opacity: 1; pointer-events: auto; }

  body.no-scroll .nav-logo { opacity: .35; filter: blur(3px); }

  .topnav {
    position: fixed;
    inset: 0 -100% 0 auto;
    width: min(85vw, 360px);
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-l);
    padding: 6.5rem var(--space-l) var(--space-l);
    margin-left: 0;
    background: var(--brand-panel);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    transition: right .3s ease;
    z-index: 30;
  }
  .topnav.show { right: 0; }
  .topnav a.nav-link { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--step-1); }
  .topnav .nav-link-reserve {
    margin-top: auto;
    background: var(--os-pink);
    color: var(--os-navy);
  }
}


/* ============================================================================
   8. BUTTONS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-l);
  border-radius: var(--pill);
  font-family: var(--os-font-body);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-primary {
  background: var(--os-pink);
  color: var(--os-navy); /* 6.3:1 on pink */
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--os-pink-light);
  color: var(--os-navy);
}

.btn-ghost {
  background: transparent;
  border-color: var(--os-pink);
  color: var(--os-pink);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--os-pink);
  color: var(--os-navy);
}

.btn-gold {
  background: var(--os-gold);
  color: var(--os-navy);
}
.btn-gold:hover, .btn-gold:focus-visible {
  background: var(--os-gold-light);
  color: var(--os-navy);
}


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

.site-footer {
  background: var(--os-navy);
  padding: var(--space-2xl) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-l);
}
.footer-links a {
  font-family: var(--os-font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--os-text-soft);
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--os-pink); }

.footer-copyright {
  font-size: var(--step--1);
  color: var(--os-text-soft);
  margin: 0;
}


/* ============================================================================
   10. PROMO POPUP (MIGRATION.md §12) — ships inactive
   ========================================================================= */

.promo-popup[hidden] { display: none; }

.promo-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 22, 31, .75);
  backdrop-filter: blur(3px);
  z-index: 50;
}

.promo-popup__card {
  position: fixed;
  z-index: 51;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 420px);
  padding: var(--space-xl) var(--space-l) var(--space-l);
  background: var(--os-navy);
  border: 1px solid var(--os-pink);
  border-radius: var(--radius-lg);
  text-align: center;
  animation: promo-in 0.3s ease;
}

.promo-popup__close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--os-text-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.promo-popup__close:hover, .promo-popup__close:focus-visible { color: var(--os-pink); }

.promo-popup__title { font-size: var(--step-2); }
.promo-popup__body { margin-inline: auto; color: var(--os-text-soft); }
.promo-popup__cta { margin-top: var(--space-m); }

@keyframes promo-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}


/* ============================================================================
   11. HOMEPAGE SECTIONS
   ========================================================================= */

.hero {
  position: relative;
  height: 100svh;
  padding-block: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,22,31,.18) 0%, rgba(21,22,31,.58) 65%, rgba(21,22,31,.94) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-xl);
}

@media (max-width: 760px) {
  .hero__content { padding-block: var(--space-l); }
  .hero__actions { flex-direction: column; align-items: flex-start; }
}

.hero__subtitle {
  font-size: var(--step-1);
  max-width: 48ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.hero__dots {
  position: absolute;
  z-index: 2;
  bottom: var(--space-m);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
}

.hero__dot {
  position: relative;
  width: 26px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
/* Each stitch is a nearly-straight SVG path with a very gentle bow —
   drawn exactly rather than approximated via a clipped circle, so the
   curve amount stays small and predictable. */
.hero__dot-stitch {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 10px;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.hero__dot-stitch path {
  fill: none;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: stroke .25s ease;
}
/* Each also sits at its own slight angle, alternating direction like
   hand-sewn thread — echoing the wordmark's own uneven stitched
   underline rather than a perfectly even dashed rule. */
.hero__dot:nth-child(1) .hero__dot-stitch { transform: translate(-50%, -50%) rotate(-6deg); }
.hero__dot:nth-child(2) .hero__dot-stitch { transform: translate(-50%, -50%) rotate(5deg); }
.hero__dot:nth-child(3) .hero__dot-stitch { transform: translate(-50%, -50%) rotate(-4deg); }
.hero__dot:nth-child(4) .hero__dot-stitch { transform: translate(-50%, -50%) rotate(6deg); }
.hero__dot:nth-child(5) .hero__dot-stitch { transform: translate(-50%, -50%) rotate(-5deg); }

.hero__dot:hover .hero__dot-stitch path { stroke: rgba(255, 255, 255, .85); }

/* Active: the same stitch, just in brand Pink. */
.hero__dot.is-active .hero__dot-stitch path { stroke: var(--os-pink); }

/* Last dot only: a needle-and-thread illustration in place of the plain
   stitch — as if it just sewed the four dashes before it. Same color
   states as the thread itself, just filled rather than stroked. */
.hero__dot-stitch .hero__needle path {
  fill: rgba(255, 255, 255, .55);
  stroke: none;
}
.hero__dot:hover .hero__dot-stitch .hero__needle path { fill: rgba(255, 255, 255, .85); }
.hero__dot.is-active .hero__dot-stitch .hero__needle path { fill: var(--os-pink); }

.hero__dot:focus-visible { outline: 2px solid var(--os-pink); outline-offset: 3px; }

/* Heading row + decorative seal watermark, side by side in normal flow —
   deliberately not absolutely positioned, so it can never overlap the
   photo grid below regardless of how long the heading text runs. */
.gallery__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}
/* Faint and "pressed into" the fabric-textured field via a light/dark
   drop-shadow pair (the classic deboss trick) rather than a flat, fully
   opaque mark. */
.gallery__seal {
  display: none;
  flex-shrink: 0;
  width: clamp(90px, 9vw, 150px);
  height: auto;
  opacity: .55;
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, .8))
    drop-shadow(-1px -1px 0.5px rgba(33, 34, 54, .18));
}
@media (min-width: 900px) {
  .gallery__seal { display: block; }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
  margin-top: var(--space-l);
  list-style: none;
  padding: 0;
}
.gallery-grid li { position: relative; overflow: hidden; }
.gallery-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Stitched pink trim, inset from the edge — see .img-trim / BRAND_GUIDE.md "Logo". */
.gallery-grid li::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: none;
  background:
    linear-gradient(90deg, var(--os-pink) 0 10px, transparent 10px 16px) top left / 16px 1.5px repeat-x,
    linear-gradient(90deg, var(--os-pink) 0 10px, transparent 10px 16px) bottom left / 16px 1.5px repeat-x,
    linear-gradient(180deg, var(--os-pink) 0 10px, transparent 10px 16px) top left / 1.5px 16px repeat-y,
    linear-gradient(180deg, var(--os-pink) 0 10px, transparent 10px 16px) top right / 1.5px 16px repeat-y;
  pointer-events: none;
}
.gallery-grid li:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 8 / 5; }
.gallery-grid li:nth-child(3n+1) img { aspect-ratio: 8 / 5; }

@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid li:nth-child(3n+1) { grid-column: span 1; aspect-ratio: 4 / 5; }
  .gallery-grid li:nth-child(3n+1) img { aspect-ratio: 4 / 5; }
}

/* Occasion cards (brunch/dinner/cocktails/happy-hour) — SEO landing pages
   that live outside the main nav, surfaced here instead. */
.occasion-cards {
  list-style: none;
  padding: 0;
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
}
.occasion-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
}
.occasion-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.occasion-card:hover img, .occasion-card:focus-visible img { transform: scale(1.06); }
.occasion-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,22,31,0) 45%, rgba(21,22,31,.88) 100%);
}
/* Stitched pink trim, inset from the edge, on top of the gradient and
   label — see .img-trim / BRAND_GUIDE.md "Logo". */
/* An SVG rounded-rect stroke, not a CSS border — so the dash pattern
   (length independent of thickness) actually follows the rounded corner
   instead of clipping square. viewBox matches the card's 4/5 ratio so
   stretching to 100%/100% doesn't distort the corners. */
.occasion-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 8px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%20400%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%22317%22%20height%3D%22397%22%20rx%3D%2216%22%20ry%3D%2216%22%20fill%3D%22none%22%20stroke%3D%22%23DB7E8E%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%2214%208%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.occasion-card__label {
  position: absolute;
  z-index: 1;
  left: var(--space-m);
  right: var(--space-m);
  bottom: var(--space-m);
}
.occasion-card__label h3 { margin: 0; font-size: var(--step-1); color: var(--os-white); }
.occasion-card__label span { display: block; margin-top: 0.15em; font-size: var(--step--1); color: var(--os-blush-dark); }

@media (min-width: 700px) {
  .occasion-cards { grid-template-columns: repeat(4, 1fr); }
}

.sister-logos {
  list-style: none;
  margin: var(--space-xl) auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-l) var(--space-xl);
}
.sister-logos img { height: 34px; width: auto; opacity: .85; transition: opacity .2s ease; }
.sister-logos a:hover img, .sister-logos a:focus-visible img { opacity: 1; }

.story p { max-width: none; }

.intro__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  text-align: center;
}

.intro__text { max-width: 56ch; margin-inline: auto; }
.intro__text h2 { font-size: var(--step-4); }
.intro__text p {
  font-size: var(--step-1);
  color: var(--os-text-soft);
  margin-inline: auto;
  max-width: none;
}

.intro__image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
}
.intro__image img {
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 800px) {
  .intro__grid { grid-template-columns: 1fr 1.1fr; text-align: left; }
  .intro__text { margin-inline: 0; }
  .intro__text p { margin-inline: 0; }
}

/* Mobile only, and only the text+photo intro (about/home) — the photo runs
   full-bleed to the viewport edges with no rounded corners, and sits flush
   against the next section since it's the last thing in this one. */
@media (max-width: 799px) {
  .intro__grid .intro__image {
    margin-inline: calc(-1 * var(--gutter));
  }
  .intro__grid .intro__image img {
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    border-radius: 0;
  }
  section.intro:has(.intro__grid) {
    padding-bottom: 0;
  }
}

/* Landing-page intro variant (brunch/dinner/cocktails/happy-hour): copy runs
   full width above the fold, photo and menu picks sit side by side below —
   instead of squeezing the copy into a narrow column beside the photo. */
.intro__copy { margin-bottom: var(--space-xl); }
.intro__copy p { max-width: none; }
.intro__split {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
.intro__highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
@media (min-width: 800px) {
  .intro__split { grid-template-columns: 1fr 1.2fr; }
}

.visit__grid {
  display: grid;
  gap: var(--space-xl);
}
@media (max-width: 699px) {
  .visit__grid { text-align: center; }
  .visit__grid .contact-icons { justify-content: center; }
}
@media (min-width: 700px) {
  .visit__grid { grid-template-columns: 1fr 1fr; }
}

.contact-icons {
  display: flex;
  gap: var(--space-s);
  margin: var(--space-m) 0 var(--space-l);
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--os-text-soft);
  transition: color .2s ease;
}
.contact-icon svg { width: 24px; height: 24px; }
.contact-icon:hover, .contact-icon:focus-visible { color: var(--os-pink); }
.section-light .contact-icon { color: var(--os-navy); }
.section-light .contact-icon:hover, .section-light .contact-icon:focus-visible {
  color: var(--os-pink-deep);
}

.footer-social { margin: 0; }

.hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--os-blush-dark);
  font-size: var(--step--1);
}
.hours-list li:last-child { border-bottom: none; }

/* Menu-highlight lists (brunch/dinner/cocktails/happy-hour landing pages) —
   a few real picks pulled from the live sheet, with a link through to the
   full /menu rather than duplicating data that would drift out of sync. */
.highlight-list {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.highlight-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--os-navy-light);
}
.section-light .highlight-item { border-bottom-color: var(--os-blush-dark); }
.highlight-item:last-child { border-bottom: none; padding-bottom: 0; }
.highlight-item__text h3 { margin: 0 0 0.2em; font-size: var(--step-1); }
.highlight-item__text p { margin: 0; color: var(--os-text-soft); font-size: var(--step--1); max-width: 46ch; }
.section-light .highlight-item__text p { color: var(--os-navy-light); }
.highlight-item__price { font-weight: 600; white-space: nowrap; color: var(--os-gold); }

/* Simple native-<details> FAQ accordion (no JS needed). */
.faq-list { display: flex; flex-direction: column; gap: var(--space-s); }
.faq-item { border-bottom: 1px solid var(--os-blush-dark); padding-block: var(--space-s); }
.faq-item summary {
  cursor: pointer;
  font-family: var(--os-font-body);
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--os-text-on-light);
}
.faq-item p { margin: var(--space-xs) 0 0; color: var(--os-navy-light); max-width: none; }


/* ============================================================================
   12. UTILITIES
   ========================================================================= */

.text-center { text-align: center; }

.img-trim {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
}
/* A stitched-looking pink trim, inset from the edge — echoes the
   wordmark's stitched underline (BRAND_GUIDE.md "Logo"). */
.img-trim::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: none;
  background:
    linear-gradient(90deg, var(--os-pink) 0 10px, transparent 10px 16px) top left / 16px 1.5px repeat-x,
    linear-gradient(90deg, var(--os-pink) 0 10px, transparent 10px 16px) bottom left / 16px 1.5px repeat-x,
    linear-gradient(180deg, var(--os-pink) 0 10px, transparent 10px 16px) top left / 1.5px 16px repeat-y,
    linear-gradient(180deg, var(--os-pink) 0 10px, transparent 10px 16px) top right / 1.5px 16px repeat-y;
  border-radius: inherit;
  pointer-events: none;
}

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

/* Menu component override — the shared menus/menu.css file stays unmodified
   (MIGRATION.md §5); per-store tweaks like this one live here instead. */
#menu-container .menu-section h3 {
  border-bottom: 2px solid var(--os-pink);
  border-radius: 0;
}

#menu-container .menu-item.highlighted { border-width: 2px; border-color: var(--os-gold); }

#category-tabs button { padding: 0.3em 0.7em; }

#menu-container .top-pick {
  background: none;
  color: var(--os-gold);
  padding: 0;
  font-family: var(--os-font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--step--1);
}


/* ============================================================================
   13. LINKS PAGE — mobile-first bio-link card (Instagram bio destination).
   ========================================================================= */

body.links-page {
  position: relative;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-2xl) + 6px) var(--gutter);
  overflow-x: hidden;
}

.linktree-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.linktree-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.linktree-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(21,22,31,.9) 0%, rgba(21,22,31,.74) 40%, rgba(21,22,31,.94) 100%);
}

.linktree {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
}

.linktree__logo {
  width: 220px;
  height: auto;
  margin: 0 auto var(--space-m);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

.linktree__eyebrow {
  font-family: var(--os-font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-text-soft);
  margin: 0 0 var(--space-2xs);
}

.linktree__handle {
  font-family: var(--os-font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-pink);
  margin: 0;
}

.linktree__rule {
  width: 56px;
  height: 1px;
  margin: var(--space-l) auto;
  background: var(--os-pink);
}

.linktree__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}
.linktree__socials a {
  display: inline-flex;
  color: var(--os-pink);
  transition: color .2s ease;
}
.linktree__socials a:hover, .linktree__socials a:focus-visible { color: var(--os-pink-light); }
.linktree__socials svg { width: 26px; height: 26px; }

.linktree__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  min-height: 54px;
  padding: var(--space-s) var(--space-l);
  border-radius: var(--pill);
  border: 1px solid var(--os-pink);
  background: rgba(33,34,54,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--os-pink-light);
  font-family: var(--os-font-body);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.link-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.link-btn:hover, .link-btn:focus-visible {
  background: var(--os-pink);
  color: var(--os-navy);
}
.link-btn:active { transform: scale(.97); }

.link-btn--primary {
  background: var(--os-pink);
  color: var(--os-navy);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.link-btn--primary:hover, .link-btn--primary:focus-visible {
  background: var(--os-pink-light);
  color: var(--os-navy);
}

.linktree__footer {
  margin-top: var(--space-xl);
  font-size: var(--step--1);
  color: var(--os-text-soft);
}