/* =====================================================
   Fishers — shared stylesheet
   Tastefully nautical. Ink blue + cream. Editorial.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap');

:root{
  /* Fixed sRGB hex instead of oklch for the three core navy tones — oklch
     is a wide-gamut color space, and its conversion to what a given screen
     actually displays can vary noticeably between a phone's P3 display and
     a desktop sRGB monitor (this is what was making the About band read
     darker on web than mobile). Hex/sRGB has the same well-established,
     consistent conversion path everywhere. Values below are the sRGB
     equivalents of the original oklch colors, so the intended shade is
     unchanged — just pinned instead of gamut-dependent. */
  --ink:        #011b35;
  --ink-deep:   #022840;
  --ink-night:  #00030b;
  --sea:        oklch(0.38 0.07 235);
  --cream:      oklch(0.965 0.013 85);
  --display:    'Sorts Mill Goudy', 'Cormorant Garamond', Georgia, serif;
  --bone:       oklch(0.92 0.018 82);
  --paper:      oklch(0.985 0.008 85);
  --brass:      oklch(0.65 0.085 72);
  --brass-deep: oklch(0.50 0.075 65);
  --gold:       oklch(0.74 0.125 85);
  --gold-deep:  oklch(0.58 0.11 78);
  --rule:       rgba(1, 27, 53, 0.18); /* same base tone as --ink, pinned to sRGB */
  --warm-paper: oklch(0.952 0.022 70);

  --serif:  'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans:   'Source Sans 3', system-ui, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, monospace;

  --max:    1440px;
  --gutter: clamp(20px, 4vw, 72px);

  /* black logo art tinted to cream instead of stark white */
  --logo-cream: invert(1) brightness(0.965) sepia(0.16) saturate(1.8) hue-rotate(2deg);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

/* ---------- Typography ---------- */
.serif{ font-family:var(--serif); font-weight:400; }
.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.05;
  margin:0;
  text-wrap:balance;
}
p{ margin:0 0 1em; max-width:62ch; }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--brass-deep);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--brass-deep);
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.3s ease, border-color 0.4s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:color-mix(in oklch, var(--cream) 88%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  padding:12px 24px;
  border-bottom-color: var(--rule);
}
.site-header.on-dark:not(.scrolled){ color:var(--cream); }
.site-header.on-dark:not(.scrolled) .nav a{ color:var(--cream); }
.site-header.on-dark:not(.scrolled) .header-mark{ color:var(--cream); }

.header-mark{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink-deep);
}
.header-mark svg,
.header-mark img{ height:56px; width:auto; display:block; }
.header-mark .est{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.3em;
  line-height:1.2;
  text-transform:uppercase;
  opacity:0.7;
  border-left:1px solid currentColor;
  padding-left:12px;
}

.nav{
  display:flex;
  gap:clamp(18px,3vw,42px);
  align-items:center;
}
.nav a{
  font-family:var(--serif);
  font-size:19px;
  color:var(--ink-deep);
  position:relative;
  padding:4px 2px;
  transition: opacity 0.2s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:50%; bottom:-2px;
  width:0; height:1px;
  background:currentColor;
  transition: width 0.35s ease, left 0.35s ease;
}
.nav a:hover::after,
.nav a.active::after{
  width:100%; left:0;
}
.nav a.active{ color:var(--brass-deep); }
.nav-toggle{ display:none; position:relative; width:26px; height:18px; background:none; border:0; padding:0; cursor:pointer; color:inherit; z-index:80; }
.nav-toggle span{ position:absolute; left:0; right:0; top:8px; height:2px; background:currentColor; transition:background .2s ease; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; transition:transform .3s ease; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }
.site-header.nav-open .nav-toggle span{ background:transparent; }
.site-header.nav-open .nav-toggle span::before{ transform:translateY(8px) rotate(45deg); }
.site-header.nav-open .nav-toggle span::after{ transform:translateY(-8px) rotate(-45deg); }
.site-header.nav-open{ color:var(--ink-deep) !important; }
.site-header.nav-open .header-mark,
.site-header.nav-open .header-mark img{ color:var(--ink-deep) !important; filter:none !important; }

/* ---------- Layout containers ---------- */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}
section{ position:relative; }

/* ---------- Reveal (scroll-trigger) ---------- */
.rv{
  opacity:0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--rv-delay, 0ms);
  will-change: transform, opacity;
}
.rv.in{ opacity:1; transform:none; }

.rv-left{ transform: translateX(-40px); }
.rv-right{ transform: translateX(40px); }
.rv-left.in, .rv-right.in{ transform:none; }

.rv-mask{
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.7,0,.3,1);
}
.rv-mask.in{ clip-path: inset(0 0 0 0); }

.rv-img{
  overflow:hidden;
}
.rv-img > *{
  transform: scale(1.12);
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.rv-img.in > *{ transform: scale(1); }

/* ---------- Wavy footer ---------- */
.footer{
  margin-top:24px;
  background:var(--ink-night);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.footer-waves{
  display:block;
  width:100%;
  height:auto;
  /* Cream background is needed above the wave paths (the topmost path
     only starts partway down the viewBox, so this shows through as the
     fade from the page's cream background into the waves). The paths
     themselves are extended slightly past the viewBox's bottom edge in
     the markup (see the "L1440,190 L0,190" closes instead of ",180") so
     that the SVG's own default clip-to-viewBox behaviour — not exact
     sub-pixel alignment of the responsive width:100%/height:auto box —
     is what guarantees full coverage at the bottom edge. Without that
     overscan, rounding in the responsive scaling could leave a hairline
     sliver of this cream background visible against the dark footer
     below it. */
  background:var(--cream);
}
.footer-inner{
  padding:60px var(--gutter) 40px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(48px, 8vw, 120px);
  position:relative;
}
/* Houses (left) · Logo (centre) · Follow (right) — flanking the logo */
.footer-inner > :nth-child(1){ order:2; }
.footer-inner > :nth-child(2){ order:1; }
.footer-inner > :nth-child(3){ order:3; }
.footer-inner .col{ text-align:center; }
.footer-inner .col ul{ align-items:center; }
.footer-inner .col h4{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:16px;
  font-weight:500;
}
.footer-inner .col ul{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column;
  gap:4px;
}
.footer-inner .col a{
  font-family:var(--serif);
  font-size:23px;
  font-style:italic;
  color:var(--cream);
  opacity:0.85;
  transition: opacity 0.2s ease;
}
.footer-inner .col a:hover{ opacity:1; color:var(--brass); }
/* "Contact Us" footer button — opens a small popover to pick which house's
   email to use, instead of every page mailto-ing a different address with
   an identical-looking link. See script.js, search "footer-contact". */
.footer-contact{ position:relative; }
.footer-contact-toggle{
  font-family:var(--serif);
  font-size:23px;
  font-style:italic;
  color:var(--cream);
  opacity:0.85;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  transition: opacity 0.2s ease;
}
.footer-contact-toggle:hover,
.footer-contact.is-open .footer-contact-toggle{ opacity:1; color:var(--brass); }
/* Scoped as `.footer-inner .col .footer-contact-menu` (not just
   `.footer-contact-menu`) throughout below: the generic `.footer-inner
   .col ul` / `.footer-inner .col a` rules above have higher specificity
   (3 classes / 2 classes+tag) than a bare `.footer-contact-menu` or
   `.footer-contact-menu a` would, so without matching that specificity
   the popover stayed visibly `display:flex` even with [hidden] set, and
   links stayed the footer's cream color instead of this. */
.footer-inner .col .footer-contact-menu{
  list-style:none;
  margin:0;
  padding:8px 0;
  position:absolute;
  left:50%;
  bottom:calc(100% + 16px);
  transform:translateX(-50%);
  min-width:230px;
  background:var(--cream);
  border-radius:4px;
  box-shadow:0 20px 48px rgba(0,0,0,0.32);
  z-index:20;
}
.footer-inner .col .footer-contact-menu[hidden]{ display:none; }
.footer-contact-menu li + li{ border-top:1px solid color-mix(in oklch, var(--ink) 10%, transparent); }
/* Hairline/citation treatment (see .r-quote-text cite) instead of the
   footer's usual italic serif links. */
.footer-inner .col .footer-contact-menu a{
  display:block;
  padding:13px 24px;
  font-family:var(--mono);
  font-style:normal;
  font-size:11.5px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--brass-deep);
  opacity:1;
  white-space:nowrap;
  text-align:center;
}
.footer-inner .col .footer-contact-menu a:hover{ color:var(--ink-deep); background:color-mix(in oklch, var(--brass) 10%, transparent); }
/* small caret pointing from the popover down to the button */
.footer-contact-menu::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:var(--cream);
}
.footer-inner address{
  font-style:normal;
  font-size:17px;
  line-height:1.7;
  opacity:0.8;
}
.footer-mark{
  color:var(--cream);
}
.footer-mark svg,
.footer-mark img{ height:92px; width:auto; margin-top:0; }
.footer-mark p{
  margin-top:18px;
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  opacity:0.7;
  max-width:32ch;
}
.footer-base{
  border-top:1px solid color-mix(in oklch, var(--cream) 18%, transparent);
  padding:20px var(--gutter);
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  opacity:0.55;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:14px 22px 14px 24px;
  border:1px solid currentColor;
  border-radius:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ink-deep);
  background:transparent;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition: color 0.4s ease;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--ink-deep);
  transform:translateY(101%);
  transition:transform 0.5s cubic-bezier(.7,0,.3,1);
  z-index:-1;
}
.btn:hover{ color:var(--cream); }
.btn:hover::before{ transform:translateY(0); }
.btn .arrow{ transition: transform 0.3s ease; }
.btn:hover .arrow{ transform: translateX(4px); }
.btn.brass{ color:var(--brass-deep); border-color:var(--brass-deep); }
.btn.brass::before{ background:var(--brass-deep); }
.btn.brass:hover{ color:var(--cream); }
.btn.solid{
  background:var(--ink-deep);
  color:var(--cream);
  border-color:var(--ink-deep);
}
.btn.solid::before{ background:var(--brass-deep); }
.btn.blue{
  background:var(--sea);
  color:var(--cream);
  border-color:var(--sea);
}
.btn.blue::before{ background:var(--ink-deep); }
.btn.blue:hover{ color:var(--cream); }
.btn.large{ padding:18px 30px; font-size:12px; }

/* ---------- Captions on photos ---------- */
.cap{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:color-mix(in oklch, var(--ink) 70%, transparent);
}
.cap-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
  color:var(--brass-deep);
}

/* ---------- Hairline rules ---------- */
.rule{
  height:1px;
  background:var(--rule);
  width:100%;
}
.rule-brass{ background: color-mix(in oklch, var(--brass) 60%, transparent); }

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--rule);
  /* Stronger than --rule: this border sits cream-on-cream against the plain
     page background below (unlike the top border, which reads against the
     lighter map image above), so the default rule opacity was nearly
     invisible here. Bumped locally rather than changing --rule globally. */
  border-bottom:1px solid oklch(0.22 0.06 250 / 0.35);
  padding:20px 0;
  background:var(--cream);
}
.marquee-track{
  display:flex;
  gap:60px;
  width:max-content;
  animation: scroll 60s linear infinite;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(28px, 4vw, 56px);
  color:var(--ink-deep);
  white-space:nowrap;
  align-items:center;
}
.marquee-track span{ display:flex; align-items:center; gap:60px; }
.marquee-track .star{
  color:var(--brass);
  font-style:normal;
  font-size:0.7em;
}
@keyframes scroll {
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width: 760px){
  /* On phones, drop the infinite horizontal scroll — width:max-content
     marquees don't hold up well at this width. Instead, present the
     accolades as a static vertical list, one per line, each one framed
     by a diamond on either side. The second <span aria-hidden> only
     exists to make the desktop scroll loop seamless, so it's hidden here
     to avoid duplicating every item; the between-item .star separators
     are hidden too since each item now gets its own pair of diamonds via
     ::before/::after instead. */
  /* Larger, more legible, more substantial block — was cramped at the
     base clamp(28px,4vw,56px) size (4vw only works out to ~16-17px on a
     phone, so it sat at the 28px floor) with tight 16px spacing. */
  .marquee{ padding:48px 0; }
  .marquee-track{
    animation:none;
    transform:none;
    flex-direction:column;
    align-items:center;
    width:auto;
    white-space:normal;
    row-gap:30px;
    text-align:center;
    font-size:clamp(30px, 8vw, 40px);
  }
  .marquee-track > span:not([aria-hidden]){
    flex-direction:column;
    align-items:center;
    row-gap:30px;
  }
  .marquee-track > span[aria-hidden="true"]{ display:none; }
  .marquee-track > span:not([aria-hidden]) > .star{ display:none; }
  .marquee-track em{ font-style:italic; line-height:1.2; }
  .marquee-track em::before,
  .marquee-track em::after{
    content:"✦";
    display:inline-block;
    font-style:normal;
    font-size:0.5em;
    color:var(--brass);
    vertical-align:middle;
  }
  .marquee-track em::before{ margin-right:14px; }
  .marquee-track em::after{ margin-left:14px; }
}

/* ---------- Numerals ---------- */
.numeral{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(72px, 14vw, 200px);
  line-height:0.85;
  color:var(--brass);
  letter-spacing:-0.04em;
}

/* ---------- LANDING ---------- */
.hero{
  min-height: 100vh;
  padding:140px var(--gutter) 60px;
  position:relative;
  background:var(--ink-night);
  color:var(--cream);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.hero-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center 35%;
  z-index:3;
  opacity:1;
  transition: opacity 0.9s ease;
}
.hero-poster.is-hidden{ opacity:0; }
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}
/* Cover-fit the 16:9 iframe to the hero regardless of viewport ratio */
.hero-video{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw;        /* 16:9 derived from width */
  min-width:177.78vh;    /* 16:9 derived from height */
  min-height:100vh;
  transform:translate(-50%, -50%) scale(1.1);
  border:0;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  /* honour reduced-motion: hide the autoplaying video, keep the poster */
  .hero-video-wrap{ display:none; }
}
@media (max-width: 760px){
  /* Static image instead of the autoplaying video on phones — saves data
     and battery, and sidesteps mobile browsers throttling/blocking
     autoplaying video anyway. The matching JS skip is in index.html
     (search "hero-poster"): without it, a 2.6s fallback timer would still
     fade the poster to opacity:0 even with the video hidden here, leaving
     a blank hero. */
  .hero-video-wrap{ display:none; }
  /* Reverted to the original mobile crop — no extra transform, just the
     base .hero-poster object-fit:cover / object-position:center 35%.
     (The zoomed "bowls below the logo" crop we iterated on — ending at
     scale(1.3) — is preserved below as .hero-poster-v2 / OPTION 2 in
     case we want to switch back to it.) */
}
/* ===== OPTION 2 — saved, not currently applied =====
   The cropped/zoomed mobile hero treatment from this session's
   iteration (logo centered, photo scaled so the mussel bowls land
   just below it). To restore: rename this selector to `.hero-poster`
   inside the `@media (max-width: 760px)` block above (or add
   class="hero-poster-v2" to the poster <img> and duplicate this rule
   under that same media query).
@media (max-width: 760px){
  .hero-poster-v2{
    transform: scale(1.3);
    transform-origin: center top;
  }
}
===== END OPTION 2 ===== */
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    /* fine grain speckle */
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCUyM24pJyBvcGFjaXR5PScwLjUnLz48L3N2Zz4="),
    /* gentle, even darkening for legibility — no dramatic directional vignette */
    linear-gradient(180deg,
      color-mix(in oklch, var(--ink-night) 52%, transparent) 0%,
      color-mix(in oklch, var(--ink-night) 38%, transparent) 45%,
      color-mix(in oklch, var(--ink-night) 56%, transparent) 100%);
  background-size: 180px 180px, cover;
  mix-blend-mode: normal;
}
.hero-scrim::after{
  /* grain layer multiplies into the photo for a filmic, even texture */
  content:"";
  position:absolute;
  inset:0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoJTIzZyknIG9wYWNpdHk9JzAuNicvPjwvc3ZnPg==");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.16;
}
.hero-content{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 80px var(--gutter) 80px;
  max-width:none;
  margin:0;
}
.hero-mark{
  color:var(--cream);
  max-width:none;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.hero-logo{
  width: clamp(140px, 20vw, 320px);
  height: auto;
  filter: var(--logo-cream)
          drop-shadow(0 4px 30px color-mix(in oklch, var(--ink-night) 60%, transparent));
}
.hero-caption{
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--cream) 85%, transparent);
  position: relative;
  padding: 14px 18px 0;
}
.hero-caption::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: color-mix(in oklch, var(--cream) 60%, transparent);
}
.hero-title{
  font-size:clamp(54px, 9vw, 140px);
  line-height:0.92;
  font-weight:var(--tw-headline-weight, 300);
  letter-spacing:var(--tw-headline-tracking, -0.025em);
  color:var(--cream);
  margin-top:24px;
  text-shadow: 0 2px 30px color-mix(in oklch, var(--ink-night) 50%, transparent);
}
.hero-title em{
  font-style:italic;
  color: color-mix(in oklch, var(--brass) 80%, white);
}
.hero-lead{
  font-size:18px;
  line-height:1.55;
  max-width:48ch;
  color: color-mix(in oklch, var(--cream) 92%, transparent);
  margin-top:28px;
}
.hero-content .btn{
  color:var(--cream);
  border-color: color-mix(in oklch, var(--cream) 80%, transparent);
}
.hero-content .btn::before{ background:var(--cream); }
.hero-content .btn:hover{ color:var(--ink-deep); }
.hero-content .btn.brass{
  color: color-mix(in oklch, var(--brass) 90%, white);
  border-color: color-mix(in oklch, var(--brass) 90%, white);
}
.hero-content .btn.brass::before{
  background: color-mix(in oklch, var(--brass) 90%, white);
}

.hero-tag{
  position:absolute;
  top:140px;
  right: 0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color: color-mix(in oklch, var(--cream) 80%, transparent);
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid color-mix(in oklch, var(--cream) 25%, transparent);
  background: color-mix(in oklch, var(--ink-night) 40%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-tag .dot{
  width:6px; height:6px;
  border-radius:50%;
  background: var(--brass);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brass) 25%, transparent);
}

.hero-meta-wrap{ position:relative; z-index:2; padding: 0 var(--gutter) 0 clamp(20px, 3vw, 56px); max-width:none; margin:0; }
.hero-meta{
  margin-top:0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:32px;
  padding-top:32px;
  border-top:1px solid color-mix(in oklch, var(--cream) 28%, transparent);
}
.hero-meta > div .lbl{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color: color-mix(in oklch, var(--brass) 85%, white);
  margin-bottom:8px;
}
.hero-meta > div .val{
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  color:var(--cream);
}

/* Auto-darken the fixed header while it sits over the hero, until you scroll */
.site-header:not(.scrolled){ color:var(--cream); }
.site-header:not(.scrolled) .nav a{ color:var(--cream); }
.site-header:not(.scrolled) .header-mark{ color:var(--cream); }
.site-header:not(.scrolled) .header-mark img{ filter: var(--logo-cream); }

/* ---------- Restaurants grid (landing) ---------- */
.houses{
  padding:120px 0 4px;
  background:var(--cream);
}
.houses-head{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:48px;
  align-items:end;
  margin-bottom:60px;
}
.houses-head h2{
  font-size:clamp(40px, 6vw, 88px);
  font-style:italic;
  font-weight:300;
}
.houses-list{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.house{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  text-align:left;
  gap: 16px;
  padding: 40px 32px 36px;
  min-height: 320px;
  position:relative;
  overflow:hidden;
  border-right:1px solid var(--rule);
  z-index:1;
  cursor:pointer;
  transition: transform 0.45s cubic-bezier(.2,.6,.2,1);
}
.house:last-child{ border-right:none; }
.house:hover{ transform: translateY(-6px); }
/* backdrop image, revealed on hover */
.house-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2,.6,.2,1);
}
.house-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, oklch(0.08 0.03 250 / 0) 30%, oklch(0.08 0.03 250 / 0.82) 100%);
}
.house:hover .house-bg{ opacity:1; transform:scale(1); }
/* Mobile equivalent of the hover reveal above — there's no hover on
   touch, so JS (script.js, search "bg-peek") toggles this class on scroll:
   whichever card's center is nearest dead-center of the screen shows its
   photo, and it switches back off as soon as the card scrolls away from
   that point. */
.house.bg-peek .house-bg{ opacity:1; transform:scale(1); }
/* ghost numeral */
.house .ghost{
  position:absolute; top:10px; right:20px; z-index:1;
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(84px, 9vw, 128px);
  line-height:.7;
  color:transparent;
  -webkit-text-stroke: 1px color-mix(in oklch, var(--brass) 60%, transparent);
  pointer-events:none;
  transition: -webkit-text-stroke-color 0.4s ease;
}
.house:hover .ghost{
  -webkit-text-stroke-color: color-mix(in oklch, var(--cream) 55%, transparent);
}
.house .name{
  font-family:var(--serif);
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.04;
  color:var(--ink-deep);
  letter-spacing:-0.01em;
  position:relative; z-index:2;
  transition: color 0.4s ease;
}
.house .addr{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  line-height:1.7;
  color: color-mix(in oklch, var(--ink) 60%, transparent);
  position:relative; z-index:2;
  transition: color 0.4s ease;
}
.house:hover .name,
.house:hover .addr{
  color: var(--cream);
}
.house .descr{
  display: none;
}

/* ---------- Reviews ---------- */
/* NB: vertical padding is set in index.html's tweak-aware rule so it respects
   the --tw-section-pad control; keep it out of here to avoid a dead override. */
.reviews{
  background:var(--ink-deep);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.reviews .wrap{ position:relative; z-index:2; }
.reviews-head{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:80px;
}
.reviews h2{
  font-size:clamp(40px, 6.5vw, 100px);
  font-style:italic;
  font-weight:300;
}
.reviews .lead{
  font-family:var(--serif);
  font-size:22px;
  font-style:italic;
  line-height:1.4;
  opacity:0.8;
  max-width:34ch;
}
/* ---------- Reviews: single-quote carousel ---------- */
.quotecar{
  max-width: 1040px;
  margin: 0 auto;
}
.quotecar-crown{
  display:flex;
  align-items:center;
  gap:30px;
  margin-bottom:44px;
}
.qc-rule{
  flex:1;
  height:1px;
  background: color-mix(in oklch, var(--cream) 24%, transparent);
}
.qc-seal{
  flex:0 0 auto;
  width:92px;
  height:92px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  box-shadow: inset 0 0 0 4px var(--ink-deep),
              inset 0 0 0 5px color-mix(in oklch, var(--gold) 45%, transparent);
}
.qc-mark{
  font-family:var(--serif);
  font-weight:600;
  font-size:64px;
  line-height:1;
  color:var(--gold);
  transform: translateY(0.22em);
}
.quotecar-stage{
  display:grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:center;
  gap:28px;
}
.qc-arrow{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  width:50px;
  height:22px;
  color: color-mix(in oklch, var(--cream) 55%, transparent);
  transition: color .4s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.qc-arrow svg{ width:100%; height:100%; display:block; }
.qc-arrow:hover{ color: var(--gold-deep); }
.qc-prev:hover{ transform: translateX(-4px); }
.qc-next:hover{ transform: translateX(4px); }

.qc-viewport{ display:grid; }
.qc-slide{
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  text-align:center;
  margin:0;
  opacity:0;
  transform: translateY(16px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.qc-slide.is-active{
  opacity:1;
  transform: none;
  pointer-events:auto;
}
.qc-text{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size: clamp(23px, 2.4vw, 35px);
  line-height: 1.34;
  letter-spacing: 0;
  color: var(--ink-deep);
  max-width: 32ch;
  margin:0;
  text-wrap: balance;
}
.qc-text::before{ content: "\201C"; }
.qc-text::after{ content: "\201D"; }
.qc-cite{
  font-family:var(--mono);
  font-style:normal;
  font-size:12px;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.qc-cite::before,
.qc-cite::after{
  content:"";
  width:22px;
  height:1px;
  background: color-mix(in oklch, var(--gold-deep) 70%, transparent);
}
.quotecar-base{
  height:0;
  margin-top:38px;
}
.qc-dots{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:24px;
}
.qc-dot{
  appearance:none;
  border:0;
  padding:0;
  cursor:pointer;
  width:7px;
  height:7px;
  border-radius:50%;
  background: color-mix(in oklch, var(--cream) 30%, transparent);
  transition: background .4s ease, transform .4s ease;
}
/* ---------- Reviews: Folio (3-up sliding carousel) ---------- */
.quotecar.folio{ max-width:1240px; }
.folio-viewport{ overflow:hidden; }
.folio-track{
  display:flex;
  gap:28px;
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}
.folio-clip{
  flex: 0 0 calc((100% - 56px) / 3);
  box-sizing: border-box;
  background:var(--paper);
  color:var(--ink-deep);
  padding:34px 32px 30px;
  border:1px solid color-mix(in oklch, var(--gold) 34%, transparent);
  box-shadow:0 1px 0 color-mix(in oklch, var(--cream) 30%, transparent), 0 18px 40px -28px rgba(20,16,8,.16);
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s ease;
}
.folio-clip:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -28px rgba(20,16,8,.22); }
.folio-head{ display:flex; align-items:baseline; gap:12px; }
.folio-pubname{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:18px;
  letter-spacing:0.01em;
  color:var(--gold-deep);
  white-space:nowrap;
}
.folio-rule{ flex:1; height:1px; background:color-mix(in oklch, var(--gold) 38%, transparent); }
.folio-text{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.44;
  color:color-mix(in oklch, var(--ink) 94%, transparent);
  text-wrap:pretty;
}
.qc-dot:hover{ background: color-mix(in oklch, var(--gold) 70%, transparent); }
.qc-dot.is-active{
  background: var(--gold);
  transform: scale(1.3);
}

/* The Stars / accolades line */
.stars-line{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:60px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  flex-wrap:wrap;
  opacity:0.7;
}
.stars-line .dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--brass);
}

/* ---------- Map section ---------- */
.map-section{
  padding:10px 0 0;
  background:var(--cream);
}
/* Full-bleed antique chart variant */
.map-section--full{
  padding:clamp(40px, 7vh, 96px) 0;
}
.map-box--full{
  position:relative;
  width:100%;
  aspect-ratio: 1600 / 800;
  overflow:hidden;
  border-top:1px solid color-mix(in oklch, var(--brass) 45%, transparent);
  border-bottom:1px solid color-mix(in oklch, var(--brass) 45%, transparent);
  background:#e7dabb;
}
.map-chart{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}
.map-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items:start;
}
.map-text h2{
  font-size:clamp(42px, 5.5vw, 84px);
  font-style:italic;
  font-weight:300;
  margin:18px 0 28px;
}
.map-text p{
  font-size:18px;
  line-height:1.65;
  color: color-mix(in oklch, var(--ink) 85%, transparent);
}
.map-box{
  position:relative;
  aspect-ratio: 21 / 9;
  overflow:hidden;
  border:1px solid color-mix(in oklch, var(--brass) 40%, transparent);
  background: oklch(0.92 0.018 80);
}
.map-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* warm the slightly cool aerial */
  filter: sepia(0.18) saturate(0.85) contrast(1.02);
}
.map-box .map-corner{
  position:absolute;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color: color-mix(in oklch, var(--ink-deep) 80%, transparent);
  z-index: 3;
  background: color-mix(in oklch, var(--cream) 70%, transparent);
  padding: 4px 8px;
  backdrop-filter: blur(2px);
}
.map-box .tl{ top:14px; left:14px; }
.map-box .tr{ top:14px; right:14px; text-align:right; }
.map-box .bl{ bottom:14px; left:14px; }
.map-box .br{ bottom:14px; right:14px; text-align:right; }
.map-compass{
  position:absolute;
  bottom:50px;
  right:18px;
  width:78px;
  height:78px;
  z-index:3;
}
.map-scale{
  position:absolute;
  bottom:48px;
  left:18px;
  width:140px;
  z-index:3;
}

/* Pins */
.map-pin{
  position:absolute;
  z-index:4;
  transform: translate(-50%, -50%);
  pointer-events:none;
}
.pin-dot{
  display:block;
  width:12px; height:12px;
  border-radius:50%;
  background: var(--brass-deep);
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--brass) 30%, transparent),
    0 0 0 1px color-mix(in oklch, var(--ink-deep) 30%, transparent) inset;
  position:relative;
  animation: pin-pulse 2.6s ease-in-out infinite;
}
@keyframes pin-pulse{
  0%, 100%{ box-shadow: 0 0 0 4px color-mix(in oklch, var(--brass) 30%, transparent),
                         0 0 0 1px color-mix(in oklch, var(--ink-deep) 30%, transparent) inset; }
  50%     { box-shadow: 0 0 0 10px color-mix(in oklch, var(--brass) 15%, transparent),
                         0 0 0 1px color-mix(in oklch, var(--ink-deep) 30%, transparent) inset; }
}
.pin-label{
  position:absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  white-space:nowrap;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: var(--ink-deep);
  background: color-mix(in oklch, var(--cream) 88%, transparent);
  padding: 5px 10px;
  border: 1px solid color-mix(in oklch, var(--ink-deep) 25%, transparent);
  backdrop-filter: blur(3px);
}
.pin-label-right{
  left:auto;
  right:22px;
}
.pin-label-below{
  left:50%;
  top: 22px;
  transform: translateX(-50%);
}
.pin-label-above{
  left:50%;
  top:auto;
  bottom: 22px;
  transform: translateX(-50%);
}

@media (max-width: 700px){
  .pin-label{ font-size:9px; padding:3px 6px; letter-spacing:0.18em; }
}

.map-caption{
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color: color-mix(in oklch, var(--ink) 60%, transparent);
}

/* ---------- Story (family history) ---------- */
/* ---------- Story / About — cream editorial split ---------- */
.story{
  padding:0;
  background:var(--cream);
  color:var(--ink);
  position:relative;
}
.story-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0;
  align-items:stretch;
  min-height:clamp(520px, 54vw, 680px);
}
.story-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 clamp(44px, 5vw, 88px) 0
          max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.story-text .eyebrow{ color:var(--brass); margin-bottom:24px; }
.story-head-mark{
  display:block;
  width:clamp(300px, 34vw, 480px);
  height:auto;
  margin:0 0 18px -2px;
}
.story-text h2{
  font-size:clamp(38px, 3.6vw, 56px);
  font-style:italic;
  font-weight:300;
  line-height:1.06;
  letter-spacing:-0.012em;
  margin:0 0 28px;
  color:var(--ink-deep);
}
.story-text h2 em{ font-style:italic; color:var(--brass); }
.story-text p{
  font-size:18px;
  line-height:1.75;
  margin-top:0;
  color:color-mix(in oklch, var(--ink) 82%, transparent);
  max-width:48ch;
}
.story-text p + p{ margin-top:1em; }
.story-text .lede{ font-size:20px; color:var(--ink); }
.story-text .sig{
  font-family:var(--serif);
  font-style:italic;
  font-size:34px;
  color:var(--brass);
  margin-top:28px;
  display:inline-block;
}
.story-img{
  position:relative;
  overflow:hidden;
}
.story-img img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position:center 55%;
}
.story-stamp{
  position:absolute;
  left:30px; bottom:30px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--cream);
  background:oklch(0.12 0.04 250 / 0.55);
  padding:8px 14px;
  backdrop-filter:blur(3px);
}

/* ---------- Restaurant page hero ---------- */
.r-hero{
  min-height:100vh;
  padding:120px var(--gutter) 20px;
  display:grid;
  grid-template-rows: auto 1fr auto;
  position:relative;
}
.r-hero-meta{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:40px;
}
.r-hero-meta .lbl{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--brass-deep);
  margin-bottom:8px;
}
.r-hero-meta .val{
  font-family:var(--serif);
  font-size:22px;
  font-style:italic;
}

.r-hero-title{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:48px;
  align-items:end;
  padding:60px 0 40px;
}
.r-hero-title h1{
  font-size:clamp(64px, 10vw, 180px);
  font-style:italic;
  font-weight:300;
  line-height:0.9;
  letter-spacing:-0.025em;
  color:var(--ink-deep);
}
.r-hero-title h1 em{
  font-style:normal;
  font-family:var(--mono);
  font-size:0.18em;
  letter-spacing:0.3em;
  text-transform:uppercase;
  display:block;
  color:var(--brass-deep);
  margin-bottom:24px;
  font-weight:500;
}

/* Numbered spec-card lede on the restaurant pages */
.r-lede{
  margin:0;
  padding:6px 0 0;
  max-width:36ch;
  display:flex;
  flex-direction:column;
  gap:18px;
  border-top:1px solid color-mix(in oklch, var(--ink) 25%, transparent);
  padding-top:18px;
}
.r-lede-row{
  display:grid;
  grid-template-columns: minmax(110px, 1fr) 2fr;
  gap:24px;
  align-items:baseline;
  position:relative;
}
.r-lede-row::before{
  content:"";
  position:absolute;
  left: 110px;
  right:0;
  bottom: 6px;
  border-bottom: 1px dotted color-mix(in oklch, var(--ink) 35%, transparent);
  z-index:0;
  pointer-events:none;
}
.r-lede dt,
.r-lede dd{
  background: var(--cream);
  position:relative;
  z-index:1;
  padding-right: 6px;
}
.r-lede dt{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:color-mix(in oklch, var(--ink) 70%, transparent);
  white-space:nowrap;
  padding-left:0;
  padding-right:8px;
}
.r-lede dd{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  line-height:1.4;
  color: color-mix(in oklch, var(--ink) 88%, transparent);
  padding-left:6px;
  text-align:right;
}
.r-lede-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  text-transform:none;
  letter-spacing:0;
  color:var(--brass-deep);
  margin-right:10px;
  display:inline-block;
  min-width:18px;
}

@media (max-width: 800px){
  .r-lede{ max-width:none; }
  .r-lede-row{ grid-template-columns: 1fr; gap:4px; }
  .r-lede-row::before{ display:none; }
  .r-lede dd{ text-align:left; padding-left:0; }
}
.r-hero-img{
  position:relative;
  height:clamp(380px, 60vh, 620px);
  overflow:hidden;
}
.r-hero-img img{
  width:100%; height:100%; object-fit:cover;
}

/* ---------- Info / Times / Booking band ---------- */
.book-band{
  padding:80px 0;
  background:var(--ink-deep);
  color:var(--cream);
  position:relative;
}
.book-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:60px;
  align-items:start;
}
.book-card h3{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:18px;
  font-weight:500;
}
.book-card p{
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  line-height:1.45;
}
.hours{ list-style:none; padding:0; margin:0; }
.hours li{
  display:grid;
  grid-template-columns: 1fr auto;
  padding:10px 0;
  border-bottom:1px solid color-mix(in oklch, var(--cream) 18%, transparent);
  align-items:baseline;
}
.hours li .day{
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
}
.hours li .time{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  opacity:0.85;
}
.hours li.closed .time{ color:var(--brass); opacity:1; }
.resdiary-card{
  background:var(--ink-night);
  padding:36px 32px;
  border:1px solid color-mix(in oklch, var(--brass) 35%, transparent);
  position:relative;
}
.resdiary-card::before{
  content:"";
  position:absolute;
  top:-1px; left:24px;
  width:60px; height:1px;
  background:var(--brass);
}
.resdiary-card .tag{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:14px;
}
.resdiary-card h4{
  font-size:36px;
  font-style:italic;
  font-weight:300;
  color:var(--cream);
  margin-bottom:24px;
}
.resdiary-card .btn{
  color:var(--brass);
  border-color:var(--brass);
  width:100%;
  justify-content:space-between;
}
.resdiary-card .btn::before{ background:var(--brass); }
.resdiary-card .btn:hover{ color:var(--ink-deep); }
.resdiary-card .resdiary-note{
  margin-top: 18px;
  margin-bottom: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--cream) 55%, transparent);
}

/* ---------- Description ---------- */
.descr-section{
  padding:140px 0;
  background:var(--cream);
}
.descr-grid{
  display:grid;
  grid-template-columns: 4fr 8fr;
  gap:clamp(40px, 6vw, 120px);
  align-items:start;
}
.descr-text h2{
  font-size:clamp(36px, 4.5vw, 64px);
  font-style:italic;
  font-weight:300;
  margin:18px 0 32px;
  max-width:14ch;
}
.descr-text p{
  font-size:18.5px;
  line-height:1.7;
  color: color-mix(in oklch, var(--ink) 88%, transparent);
}
.descr-text p + p{ margin-top:1.2em; }
.descr-text p.lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:26px;
  line-height:1.4;
  color:var(--ink-deep);
}
.descr-side{ position:sticky; top:120px; }
.descr-side .photo{
  aspect-ratio: 3 / 4;
  overflow:hidden;
  margin-bottom:14px;
}
.descr-side .photo img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Photo collage band ---------- */
.collage{
  padding:80px 0;
  background:var(--ink-deep);
  color:var(--cream);
  overflow:hidden;
}
.collage-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:60px;
}
.collage-head h2{
  font-size:clamp(42px, 5.5vw, 84px);
  font-style:italic;
  font-weight:300;
  max-width:14ch;
}
.collage-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap:18px;
}
.collage-grid .tile{
  overflow:hidden;
  position:relative;
}
.collage-grid .tile img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.collage-grid .tile:hover img{ transform: scale(1.06); }
.collage-grid .tile .label{
  position:absolute;
  bottom:14px; left:14px;
  color:var(--cream);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  background:color-mix(in oklch, var(--ink-night) 70%, transparent);
  padding:6px 10px;
  backdrop-filter: blur(4px);
}

/* Leith collage layout */
.collage-leith .t1{ grid-column: 1 / span 5;  grid-row: span 6; }
.collage-leith .t2{ grid-column: 6 / span 4;  grid-row: span 4; }
.collage-leith .t3{ grid-column: 10/ span 3;  grid-row: span 5; }
.collage-leith .t4{ grid-column: 6 / span 4;  grid-row: span 5; }
.collage-leith .t5{ grid-column: 10/ span 3;  grid-row: span 4; margin-top:-30px; }
.collage-leith .t6{ grid-column: 1 / span 5;  grid-row: span 5; }
.collage-leith .t7{ grid-column: 6 / span 7;  grid-row: span 4; }

/* City collage layout */
.collage-city .t1{ grid-column: 1 / span 4;  grid-row: span 7; }
.collage-city .t2{ grid-column: 5 / span 5;  grid-row: span 4; }
.collage-city .t3{ grid-column: 10/ span 3;  grid-row: span 6; }
.collage-city .t4{ grid-column: 5 / span 3;  grid-row: span 4; }
.collage-city .t5{ grid-column: 8 / span 2;  grid-row: span 4; }
.collage-city .t6{ grid-column: 1 / span 4;  grid-row: span 4; }
.collage-city .t7{ grid-column: 5 / span 5;  grid-row: span 4; margin-top:-30px; }
.collage-city .t8{ grid-column: 10/ span 3;  grid-row: span 4; }

/* Shore collage layout */
.collage-shore .t1{ grid-column: 1 / span 6;  grid-row: span 6; }
.collage-shore .t2{ grid-column: 7 / span 6;  grid-row: span 4; }
.collage-shore .t3{ grid-column: 7 / span 3;  grid-row: span 4; }
.collage-shore .t4{ grid-column: 10/ span 3;  grid-row: span 4; }
.collage-shore .t5{ grid-column: 1 / span 4;  grid-row: span 4; }
.collage-shore .t6{ grid-column: 5 / span 4;  grid-row: span 4; }
.collage-shore .t7{ grid-column: 9 / span 4;  grid-row: span 4; }

/* ---------- Menu ---------- */
.menu-section{
  padding:140px 0;
  background:var(--cream);
  position:relative;
}
.menu-head{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:48px;
  align-items:end;
  margin-bottom:80px;
  border-bottom:1px solid var(--rule);
  padding-bottom:36px;
}
.menu-head h2{
  font-size:clamp(36px, 4.75vw, 64px);
  font-style:italic;
  font-weight:300;
  letter-spacing:-0.02em;
  line-height:0.95;
}
.menu-head .meta{
  text-align:right;
}
.menu-note{
  display:block;
  margin-top:10px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--brass-deep);
  opacity:0.75;
}
.menu-head .meta .lbl{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--brass-deep);
  margin-bottom:6px;
}
.menu-head .meta .val{
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
}
.menu-cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(40px, 6vw, 100px);
}
/* Separate two menu grids stacked back-to-back (e.g. Starters/Mains above
   Sides/Desserts) so the lower headers aren't cramped against the row above */
.menu-section .menu-cols + .menu-cols{
  margin-top: clamp(44px, 5vw, 76px);
}
.menu-section h3.course{
  font-family:var(--display);
  font-style:normal;
  font-size:28px;
  font-weight:400;
  letter-spacing:0.005em;
  color:var(--brass-deep);
  padding-bottom:14px;
  border-bottom:1px solid var(--brass);
  margin-bottom:8px;
}
.menu-section h3.course-wide{
  font-size: clamp(36px, 4.5vw, 56px);
  text-align: left;
  border-bottom-color: var(--ink-deep);
  color: var(--ink-deep);
}
.menu-section h4.course-sub{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 500;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in oklch, var(--brass) 50%, transparent);
}
.menu-section .course-note{
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.4;
  color: color-mix(in oklch, var(--ink) 65%, transparent);
  margin: 0 0 12px;
  max-width: 38ch;
}
.menu-section h3.course + .menu-item{ margin-top:18px; }

/* Serving options within a single menu item (e.g. oysters four ways) */
.menu-serves{
  list-style: none;
  margin: 12px 0 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 44ch;
}
.menu-serves li{
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.menu-serves .s-name{
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}
.menu-serves .dots{
  flex: 1 1 auto;
  align-self: stretch;
  border-bottom: 1px dotted color-mix(in oklch, var(--brass) 60%, transparent);
  transform: translateY(-4px);
}
.menu-serves .s-price{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--brass-deep);
}

/* ============== Restaurant pages — slim sections ============== */

/* Full-bleed photo band */
.r-band{
  margin: 0;
  padding: 80px 0 90px;
  position: relative;
}
.r-band-img{
  width: 100%;
  height: clamp(380px, 65vh, 680px);
  overflow: hidden;
  position: relative;
}
.r-band-tall .r-band-img{
  height: clamp(520px, 86vh, 920px);
}
.r-band-img img{
  width: 100%;
  height: 110%;
  object-fit: cover;
  will-change: transform;
}
.r-band-cap{
  margin: 14px auto 0;
  max-width: var(--max);
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Asymmetric photo pair */
.r-pair{
  padding: 60px 0 100px;
}
/* Cascading masonry gallery */
.r-gallery{
  columns: 3;
  column-gap: 10px;
}
.r-gallery .r-gal-img{
  break-inside: avoid;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
}
.r-gallery .r-gal-img img{
  width: 100%;
  display: block;
}
/* stagger the columns so the grid reads as cascading rather than flush */
.r-gallery .r-gal-col-offset{ margin-top: 44px; }
@media (max-width: 900px){
  .r-gallery{ columns: 3; }
  .r-gallery .r-gal-col-offset{ margin-top: 24px; }
}
@media (max-width: 560px){
  .r-gallery{ columns: 2; column-gap: 8px; }
  .r-gallery .r-gal-img{ margin-bottom: 8px; }
  .r-gallery .r-gal-col-offset{ margin-top: 0; }
}
.r-pair-grid{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(24px, 5vw, 70px);
  align-items: start;
}
.r-pair-img{
  overflow: hidden;
  position: relative;
}
.r-pair-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.r-pair-tall{ aspect-ratio: 3 / 4; }
.r-pair-short{
  aspect-ratio: 4 / 5;
  margin-top: 100px;
}
.r-pair-img .cap{
  margin-top: 14px;
  display: block;
}

@media (max-width: 800px){
  .r-pair-grid{ grid-template-columns: 1fr; gap: 28px; }
  .r-pair-short{ margin-top: 0; }
}

/* Press-quote card */
.r-quote-card{
  padding: 100px 0;
  background: var(--cream);
  position: relative;
}
.r-quote-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
}
/* Full-bleed variant — photo flush to top/bottom/right edges, text floats left */
.r-quote-fullbleed{
  padding: 0;
}
.r-quote-fullbleed .wrap{
  max-width: none;
  padding: 0;
}
.r-quote-fullbleed .r-quote-grid{
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: clamp(210px, 28vh, 315px);
}
.r-quote-fullbleed .r-quote-text{
  align-self: center;
  padding: 45px clamp(32px, 5.5vw, 98px);
  max-width: 35ch;
  margin: 0 auto;
}
.r-quote-fullbleed .r-quote-mark{
  font-size: clamp(90px, 10.5vw, 165px);
  margin-bottom: -6px;
}
.r-quote-fullbleed .r-quote-text p{
  font-size: clamp(21px, 2.5vw, 33px);
  margin: 0 0 21px;
}
.r-quote-fullbleed .r-quote-slideshow{
  height: 100%;
  aspect-ratio: auto;
}
@media (max-width: 800px){
  .r-quote-fullbleed .r-quote-grid{
    grid-template-columns: 1fr;
    min-height: 0;
    /* Base rule (line ~1946) sets gap:0 for the desktop side-by-side
       layout. On mobile a separate rule below forces the photo to always
       render before the text (order:-1), for every section regardless of
       variant — so any grid gap here only ever adds space ABOVE the text
       (between photo and text), never below it. Kept at 0 and left to the
       text's own top/bottom padding (below) to provide EQUAL space on both
       sides, since some sections are immediately followed by another
       flush, zero-padding section with nothing to buffer the bottom. */
    gap: 0;
  }
  .r-quote-fullbleed .r-quote-slideshow{
    height: clamp(360px, 60vh, 520px);
    order: -1;
  }
  .r-quote-fullbleed .r-quote-text{
    padding: 48px var(--gutter);
  }
  .r-q-centered .r-quote-grid{ min-height: 0; grid-template-columns: 1fr; }
}

/* ============================================================
   Press-quote DISPLAY VARIANTS (add one to the <section>)
   ============================================================ */

/* --- Variant B: text overlaid on the photo (one full-bleed image) --- */
.r-q-overlay .r-quote-grid{
  grid-template-columns: 1fr;
  position: relative;
  min-height: clamp(340px, 48vh, 520px);
}
.r-q-overlay .r-quote-slideshow{ grid-column: 1; grid-row: 1; height: 100%; }
.r-q-overlay .r-quote-grid::after{
  content: "";
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 1;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--ink-night) 86%, transparent) 0%,
    color-mix(in oklch, var(--ink-night) 66%, transparent) 40%,
    transparent 80%);
}
.r-q-overlay .r-quote-text{
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 2;
  align-self: center; justify-self: start;
  max-width: 30ch;
  padding: 0 clamp(36px, 6vw, 110px);
}
.r-q-overlay .r-quote-mark{ color: color-mix(in oklch, var(--brass) 82%, white); }
.r-q-overlay .r-quote-text p{ color: var(--cream); }
.r-q-overlay .r-quote-text cite{ color: color-mix(in oklch, var(--brass) 78%, white); }
.r-q-overlay .r-quote-text cite::before{ background: color-mix(in oklch, var(--brass) 78%, white); }

/* --- Variant C: ink text panel + mono kicker, no oversized mark --- */
.r-q-ink .r-quote-grid{ min-height: clamp(300px, 40vh, 440px); }
.r-q-ink .r-quote-text{
  background: var(--ink-deep);
  color: var(--cream);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  margin: 0;
  padding: clamp(40px, 5vw, 78px) clamp(34px, 5vw, 80px);
}
.r-q-ink .r-quote-kicker{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--brass) 82%, white);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.r-q-ink .r-quote-kicker::before{
  content: "";
  width: 34px; height: 1px;
  background: currentColor;
}
.r-q-ink .r-quote-text p{
  color: var(--cream);
  font-size: clamp(22px, 2.6vw, 38px);
  max-width: 24ch;
  margin: 0 0 22px;
}
.r-q-ink .r-quote-text cite{ color: color-mix(in oklch, var(--brass) 80%, white); }
.r-q-ink .r-quote-text cite::before{ background: color-mix(in oklch, var(--brass) 80%, white); }

/* --- Variant D: centered & serene, brass hairline instead of mark --- */
.r-q-centered .r-quote-grid{
  min-height: 700px;
  grid-template-columns: 1fr 1fr;
}
.r-q-centered .r-quote-text{
  text-align: center;
  align-items: center;
  max-width: 60ch;
  /* Vertical clamp floor raised again, to 88px, for real breathing room
     around the quote/hours text on mobile, where the vw component is
     tiny and the padding sits at this floor. Desktop is unaffected since
     its width pushes past the floor via the vw scaling. */
  padding: clamp(88px, 9vw, 112px) clamp(40px, 7vw, 120px);
}
.r-q-centered .r-quote-rule{
  display: block;
  width: 50px; height: 1px;
  background: var(--brass-deep);
  margin: 0 auto 28px;
}
.r-q-centered .r-quote-text p{
  font-size: clamp(22px, 2.7vw, 38px);
  line-height: 1.25;
  max-width: 44ch;
  margin: 0 auto 18px;
}
.r-q-centered .r-quote-text cite{ justify-content: center; }


/* Photos-first variant of the centered band */
.r-q-flip .r-quote-slideshow{ order: -1; }

/* Opening-hours set inside the photos-first band */
.r-q-flip .r-hours-group{ width: 100%; max-width: 30ch; }
.r-q-flip .r-hours-title{
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: 0.22em;
  margin: 0 0 40px;
}
.r-q-flip .r-hours-title::after{
  content: "";
  display: block;
  width: 50px; height: 1px;
  background: var(--brass-deep);
  margin: 22px auto 0;
}
.r-q-flip .r-hours-grid{ gap: 26px; }
.r-q-flip .r-hours-grid li{
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: 0.14em;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.r-q-flip .r-hours-grid li .day{
  color: var(--ink-deep);
  font-weight: 500;
}
.r-q-flip .r-hours-grid li .day::after{ content: none; }
.r-q-flip .r-hours-grid li .time{
  color: var(--brass-deep);
  letter-spacing: 0.18em;
}

.r-quote-text{
  margin: 0;
}
.r-quote-mark{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(120px, 14vw, 220px);
  line-height: 0.6;
  color: color-mix(in oklch, var(--brass) 75%, transparent);
  margin-bottom: -8px;
}
.r-quote-text p{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink-deep);
  margin: 0 0 28px;
  max-width: 22ch;
  text-wrap: pretty;
}
.r-quote-text cite{
  font-family: var(--mono);
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.r-quote-text cite::before{
  content: "";
  width: 34px;
  height: 1px;
  background: var(--brass-deep);
}
.r-quote-img{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  align-self: center;
}
.r-quote-img img{ width: 100%; height: 100%; object-fit: cover; }

/* Crossfade slideshow — 4s per photo */
.r-quote-slideshow{
  position: relative;
  aspect-ratio: auto;
  height: clamp(440px, 76vh, 760px);
}
.r-quote-slideshow img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}
.r-quote-slideshow img.is-active{ opacity: 1; }
/* Manual next-photo arrow, tucked on the right edge */
.r-quote-nav{
  position: absolute;
  top: 50%;
  right: clamp(10px, 1.6vw, 20px);
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid oklch(1 0 0 / 0.7);
  border-radius: 50%;
  background: oklch(0.22 0.02 250 / 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: oklch(1 0 0 / 0.95);
  cursor: pointer;
  opacity: 0.5;
  box-shadow: 0 2px 10px oklch(0.15 0.02 250 / 0.35);
  transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.r-quote-nav svg{ width: 21px; height: 21px; }
.r-quote-slideshow:hover .r-quote-nav{ opacity: 0.85; }
.r-quote-nav:hover{
  opacity: 1;
  background: oklch(0.22 0.02 250 / 0.75);
  border-color: oklch(1 0 0 / 1);
}
.r-quote-nav:focus-visible{
  outline: 2px solid oklch(1 0 0 / 0.9);
  outline-offset: 2px;
  opacity: 1;
}
/* fallback before JS runs (and if JS fails): show the first photo */
.r-quote-slideshow:not(.js-ready) img:first-child{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .r-quote-slideshow img{ transition: none; }
}
@media (prefers-reduced-motion: reduce){
  .r-quote-slideshow img{ animation: none; }
  .r-quote-slideshow img:nth-child(1){ opacity: 1; }
}

@media (max-width: 800px){
  .r-quote-grid{ grid-template-columns: 1fr; gap: 32px; }
  .r-quote-img{ aspect-ratio: 4 / 3; order: -1; }
  .r-quote-slideshow{ height: clamp(320px, 56vh, 480px); aspect-ratio: auto; }
  .r-q-centered .r-quote-grid{ grid-template-columns: 1fr; min-height: 0; }
  .r-q-flip .r-quote-grid{ grid-template-columns: 1fr; }
}

/* =========== Standalone "Make a Booking" CTA =========== */
.r-cta-book{
  background: var(--cream);
  padding: 70px var(--gutter) 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.r-cta-link.alt{
  color: var(--ink-deep);
  border-color: color-mix(in oklch, var(--ink-deep) 35%, transparent);
}
.r-cta-link.alt::before{ background: var(--ink-deep); }
.r-cta-book::before{ display: none; }
.r-cta-book::after{ display: none; }

.r-cta-link{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-deep);
  border: 1px solid var(--ink-deep);
  padding: 20px 38px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s ease;
}
.r-cta-link::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink-deep);
  transform: translateY(101%);
  transition: transform 0.5s cubic-bezier(.7,0,.3,1);
  z-index: -1;
}
.r-cta-link:hover{ color: var(--cream); }
.r-cta-link:hover::before{ transform: translateY(0); }
.r-cta-link svg{
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}
.r-cta-link:hover svg{ transform: translateX(4px); }

/* Booking block placed under the hours band — seamless, no divider */
.r-cta-book.book-footer{
  padding: 0 var(--gutter);
}
.r-cta-book.book-footer::before,
.r-cta-book.book-footer::after{ display: none; }

/* =========== Standalone Reservations signal =========== */
.r-book{
  background: var(--ink-deep);
  color: var(--cream);
  position: relative;
  padding: 70px var(--gutter) 80px;
  overflow: hidden;
  /* Tucks UP into the prior section for overlap */
  margin-top: -60px;
  z-index: 2;
}
.r-book::before,
.r-book::after{
  content:"";
  position:absolute;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: color-mix(in oklch, var(--brass) 75%, transparent);
}
.r-book::before{ top: 18px; }
.r-book::after { bottom: 18px; }
.r-book-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
}
.r-book-mark{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.r-book-mark .eyebrow{
  color: var(--brass);
  margin: 0;
}
.r-book-mark .eyebrow::before{ background: var(--brass); }
.r-book-mark h2{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.r-book-mark h2 em{
  font-style: normal;
  color: var(--brass);
}

/* Stylized standalone reservation button */
.r-book-action{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--serif);
  font-style: italic;
  isolation: isolate;
  transition: transform 0.35s ease;
}
.r-book-action:hover{ transform: translateY(-3px); }
.r-book-action .tag{
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
}
.r-book-action .tag::before,
.r-book-action .tag::after{
  content:"";
  flex:1;
  height:1px;
  background: color-mix(in oklch, var(--brass) 55%, transparent);
}
.r-book-action .main{
  border: 1px solid var(--brass);
  background: transparent;
  padding: 26px 44px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s ease;
}
.r-book-action .main::before{
  content:"";
  position: absolute;
  inset: 0;
  background: var(--brass);
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(.7,0,.3,1);
  z-index:-1;
}
.r-book-action:hover .main{ color: var(--ink-deep); }
.r-book-action:hover .main::before{ transform: translateY(0); }
.r-book-action .main .word{
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.005em;
}
.r-book-action .main .word em{
  color: var(--brass);
  font-weight: 500;
  transition: color 0.45s ease;
}
.r-book-action:hover .main .word em{ color: var(--ink-deep); }
.r-book-action .main svg{
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}
.r-book-action:hover .main svg{ transform: translateX(6px); }
.r-book-action .foot{
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--cream) 55%, transparent);
  padding-top: 10px;
  text-align: right;
}

@media (max-width: 800px){
  .r-book-inner{ grid-template-columns: 1fr; gap: 36px; }
  .r-book-action .foot{ text-align: left; }
}

/* =========== Hours band — sits just before the footer =========== */
.r-hours{
  background: var(--cream);
  color: var(--ink-deep);
  padding: 100px var(--gutter) 36px;
  position: relative;
  z-index: 2;
  text-align: center;
}
/* Tighten the gap between the hours band and the wavy footer */
.r-hours + .footer{ margin-top: 0; }
/* Menu flows straight into the wavy footer */
.menu-section + .footer{ margin-top: 0; }
/* Tighten the gap between the homepage CTA buttons and the footer waves */
.cta-block + .footer{ margin-top: -20px; }
.menu-section:has(+ .footer){ padding-bottom: 24px; }
.r-hours-inner{
  max-width: 760px;
  margin: 0 auto;
}
.r-hours-group + .r-hours-group{
  margin-top: 64px;
}
.r-hours-title{
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(19px, 2.4vw, 28px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-deep);
  margin: 0 0 34px;
}
.r-hours-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.r-hours-grid li{
  font-family: var(--mono);
  font-size: clamp(14px, 1.7vw, 19px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--sea) 90%, var(--ink-deep));
}
.r-hours-grid li .day{
  font-family: var(--mono);
}
.r-hours-grid li .time{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.r-hours-grid li .day::after{
  content: " ";
  white-space: pre;
}
.r-hours-grid li.closed .time{
  letter-spacing: 0.24em;
  color: var(--brass-deep);
}
@media (max-width: 600px){
  .r-hours-grid li{ font-size: 13px; letter-spacing: 0.08em; }
}

/* =========== Condensed menu (restaurant pages) =========== */
.menu-section{
  padding: 90px 0 70px;
}
.menu-section .menu-head{
  margin-bottom: 40px;
  padding-bottom: 24px;
}
.menu-section h3.course{
  font-size: 22px;
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.menu-section h3.course-wide{
  font-size: clamp(28px, 3.5vw, 44px);
  margin-top: 36px;
}
.menu-section h3.course + .menu-item{ margin-top: 10px; }
.menu-cols{
  gap: clamp(28px, 4vw, 64px);
}
.menu-item{
  padding: 11px 0;
}
.menu-item .row1{
  gap: 20px;
  margin-bottom: 2px;
}
.menu-item .name{
  font-size: 19px;
  line-height: 1.2;
}
.menu-item .price{
  font-size: 12px;
  letter-spacing: 0.08em;
}
.menu-item .desc{
  font-size: 13.5px;
  line-height: 1.45;
  color: color-mix(in oklch, var(--ink) 62%, transparent);
  max-width: 54ch;
  margin: 0;
}
.menu-pull{ margin: 40px 0; }
.menu-pull blockquote{
  font-size: clamp(20px, 2.2vw, 28px);
}

/* (footer-hours moved into its own .r-hours band above the footer) */

/* Make footer flow tighter on restaurant pages so hours fit */
@media (max-width: 1100px){
  .footer-inner{ gap: clamp(36px, 6vw, 72px); }
}
@media (max-width: 720px){
  .footer-inner{ flex-direction:column; gap:28px; text-align:center; }
  .footer-inner .col ul{ align-items:center; }
}

/* =========== Guest reviews (Tripadvisor) =========== */
.ta-reviews{
  padding: 96px 0 24px;
  background: var(--cream);
}
@media (max-width: 800px){
  /* The hours band directly above (.r-q-flip) now has the same full,
     symmetric top/bottom padding as the plain quote band (see
     .r-q-centered .r-quote-text) — no more special-casing there, so the
     two bands read consistently with each other. That means the space
     between the hours text and this section would otherwise stack the
     hours band's own bottom padding on top of THIS section's 96px top
     padding. Trimming it here, scoped to only when it directly follows
     the hours band, keeps that stacked total close to the hours band's
     own top gap instead of doubling it — without touching .ta-reviews's
     top padding in any other context. */
  .r-q-flip + .ta-reviews{ padding-top: 24px; }
}
.ta-reviews-head{
  max-width: 640px;
  margin: 0 0 52px;
}
.ta-reviews-head .eyebrow{ color:var(--brass-deep); }
.ta-reviews-head h2{
  font-size: clamp(36px, 4.75vw, 64px);
  font-weight: 300;
  margin: 18px 0 0;
}
.ta-reviews-head h2 em{ font-style:italic; color:var(--brass-deep); }
.ta-reviews-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ta-card{
  background: var(--paper);
  color: var(--ink-deep);
  padding: 32px 30px 28px;
  border: 1px solid color-mix(in oklch, var(--gold) 34%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--cream) 30%, transparent), 0 18px 40px -28px rgba(20,16,8,.16);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition: transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s ease;
}
.ta-card:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -28px rgba(20,16,8,.22); }
.ta-stars{
  color: var(--brass);
  font-size: 15px;
  letter-spacing: 0.16em;
}
.ta-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--ink-deep);
  margin: -4px 0 0;
}
.ta-text{
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: color-mix(in oklch, var(--ink) 94%, transparent);
  text-wrap: pretty;
  flex: 1;
}
.ta-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink) 60%, transparent);
  border-top: 1px solid color-mix(in oklch, var(--gold) 25%, transparent);
  padding-top: 14px;
}
.ta-name{ color:var(--ink-deep); }
@media (max-width: 900px){
  .ta-reviews-grid{ grid-template-columns: 1fr; }
}

/* =========== Brief about band (dark blue, header serif) =========== */
.about-band{
  background: var(--ink-deep);
  color: var(--cream);
  padding: clamp(96px, 13vh, 168px) var(--gutter);
}
.about-band .about-inner{
  max-width: 1180px;
  margin: 0 auto;
}
.about-band .about-kicker{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--brass) 82%, white);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin: 0 0 40px;
}
.about-band .about-kicker::before{
  content: "";
  width: 44px; height: 1px;
  background: currentColor;
}
/* Featured house designation (No. 01 / The Original) */
.about-band .about-feature{
  text-align:center; margin:0 0 44px;
}
.about-band .about-no{
  display:inline-flex; align-items:center; gap:14px;
  margin:0 0 18px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:color-mix(in oklch, var(--brass) 82%, white);
}
.about-band .about-no::before,
.about-band .about-no::after{
  content:""; width:34px; height:1px; background:currentColor; opacity:0.55;
}
.about-band .about-title{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(32px, 4.2vw, 58px); line-height:0.98; letter-spacing:-0.02em;
  color:var(--cream); margin:0;
}
.about-band p{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2.15vw, 31px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 auto;
  max-width: 52ch;
  text-align: center;
  text-wrap: pretty;
}
.about-band p em{
  font-style: italic;
  color: color-mix(in oklch, var(--brass) 88%, white);
}
.about-band p + p{ margin-top: 0.7em; }
@media (max-width: 600px){
  .about-band p{ max-width: none; }
}
@media (min-width: 1001px){
  /* Desktop-only: header/paragraph sized halfway between the original
     (58px / 31px) and the first pass, which read too small (44px / 24px).
     Paragraph box widened past its original 52ch too — a wider line
     wraps to fewer lines, which is what actually shortens the block,
     rather than shrinking the padding further. Mobile is untouched — it
     sits on the clamp() floor values above regardless of this, since the
     vw components here never get close to those floors at mobile widths. */
  .about-band{
    padding: clamp(72px, 9vh, 120px) var(--gutter);
  }
  .about-band .about-title{
    font-size: clamp(30px, 3.9vw, 54px);
  }
  .about-band p{
    font-size: clamp(19px, 2vw, 29px);
    max-width: 62ch;
  }
  .about-band .about-feature{ margin-bottom: 32px; }
}

/* =========== Overlap / cohesion utilities =========== */
.r-band.bleed-down{ padding-bottom: 0; }
.r-band.bleed-up{ padding-top: 0; }
.r-quote-card.bleed-up{ padding-top: 60px; margin-top: -100px; z-index: 2; position: relative; }
.r-pair.bleed-up{ padding-top: 30px; }
.r-pair.bleed-down{ padding-bottom: 30px; }
.menu-section.bleed-up{ padding-top: 80px; }
.cta-block.bleed-up{ padding-top: 100px; margin-top: -40px; }
.r-band.no-cap-gap > .r-band-cap{ display: none; }
.r-band.overhang{
  margin-bottom: -120px;
  z-index: 1;
  position: relative;
}
.r-band.overhang + section{ position: relative; z-index: 2; }
.menu-item{
  padding:18px 0;
  border-bottom:1px solid color-mix(in oklch, var(--rule) 50%, transparent);
}
.menu-item .row1{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:24px;
  align-items:baseline;
  margin-bottom:4px;
}
.menu-item .name{
  font-family:var(--serif);
  font-size:22px;
  line-height:1.2;
  color:var(--ink-deep);
}
.menu-item .price{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.1em;
  color:var(--brass-deep);
}
.menu-item .desc{
  font-size:14.5px;
  line-height:1.55;
  color: color-mix(in oklch, var(--ink) 70%, transparent);
  max-width:48ch;
}
.menu-item .tag{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--brass-deep);
  margin-left:8px;
  vertical-align:middle;
  border:1px solid currentColor;
  padding:2px 6px;
  white-space:nowrap;
}

/* Featured steak block */
.steak-feature{
  border:0;
  border-top:1px solid color-mix(in oklch, var(--rule) 70%, transparent);
  background: transparent;
  padding: 18px 0 4px;
  margin-bottom: 8px;
}
.steak-feature .steak-title{
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink-deep);
  margin: 0 0 6px;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  padding: 0;
}
.steak-feature .steak-note{
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: color-mix(in oklch, var(--ink-deep) 78%, transparent);
  margin: 0 0 18px;
  max-width: 42ch;
}
.steak-feature .steak-cuts{
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in oklch, var(--rule) 60%, transparent);
}
.steak-feature .steak-cut{
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.steak-feature .cut-name{
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink-deep);
}
.steak-feature .cut-price{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--brass-deep);
}
.steak-feature .steak-adds{
  margin-top: 16px;
}
.steak-feature .adds-label{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 10px;
}
.steak-feature .steak-adds ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.steak-feature .steak-adds li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.steak-feature .add-name{
  font-size: 13px;
  line-height: 1.4;
  color: color-mix(in oklch, var(--ink-deep) 82%, transparent);
}
.steak-feature .add-price{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--brass-deep);
  white-space: nowrap;
}

/* Asymmetric pull image inside menu */
.menu-pull{
  margin:60px 0;
  display:grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap:24px;
  align-items:center;
}
.menu-pull .img{
  aspect-ratio: 4 / 5;
  overflow:hidden;
}
.menu-pull .img img{ width:100%; height:100%; object-fit:cover; }
.menu-pull blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(22px, 2.5vw, 34px);
  line-height:1.3;
  color:var(--ink-deep);
  margin:0;
  padding:0 20px;
}
.menu-pull blockquote cite{
  display:block;
  margin-top:18px;
  font-family:var(--mono);
  font-style:normal;
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--brass-deep);
}

/* =========== Events / What's On (restaurant pages) =========== */
.events-section{
  padding: 100px 0 60px;
  background: var(--cream);
}
.events-head{
  text-align: center;
  margin-bottom: 56px;
}
.events-head .eyebrow{ justify-content: center; margin-bottom: 18px; }
.events-head h2{
  font-size: clamp(38px, 5.5vw, 72px);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.events-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.event{
  padding: 36px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  text-align: center;
}
.event:nth-child(2n){ border-right: none; }
.event-date{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: block;
  margin-bottom: 14px;
}
.event h3{
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-deep);
  margin: 0 0 10px;
}
.event p{
  font-size: 14.5px;
  line-height: 1.55;
  color: color-mix(in oklch, var(--ink) 64%, transparent);
  margin: 0 auto;
  max-width: 38ch;
}
@media (max-width: 700px){
  .events-list{ grid-template-columns: 1fr; }
  .event{ border-right: none; }
}

/* ---------- Closing CTA ---------- */
.cta-block{
  padding:140px 0;
  background:var(--cream);
  text-align:center;
}

/* Whisky-backed variant — full-bleed image with hero-style grain + vignette */
.cta-whisky{
  position: relative;
  overflow: hidden;
  color: var(--cream);
  background: var(--ink-night);
}
.cta-whisky .cta-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink-night);
}
.cta-whisky .cta-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.cta-whisky .cta-scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCUyM24pJyBvcGFjaXR5PScwLjUnLz48L3N2Zz4="),
    linear-gradient(180deg,
      color-mix(in oklch, var(--ink-night) 62%, transparent) 0%,
      color-mix(in oklch, var(--ink-night) 48%, transparent) 45%,
      color-mix(in oklch, var(--ink-night) 66%, transparent) 100%);
  background-size: 180px 180px, cover;
}
.cta-whisky .cta-scrim::after{
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoJTIzZyknIG9wYWNpdHk9JzAuNicvPjwvc3ZnPg==");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.16;
}
.cta-whisky .wrap{ position: relative; z-index: 2; }
.cta-whisky h2{ color: var(--cream); }
.cta-block.cta-whisky h2 em{ color: var(--cream); }
.cta-whisky .eyebrow{ color: color-mix(in oklch, var(--brass) 85%, white); }
.cta-whisky .eyebrow::before{ background: color-mix(in oklch, var(--brass) 85%, white); }
.cta-whisky .btn{
  color: var(--cream);
  border-color: color-mix(in oklch, var(--cream) 75%, transparent);
}
.cta-whisky .btn::before{ background: var(--cream); }
.cta-whisky .btn:hover{ color: var(--ink-deep); }
.cta-whisky .btn.solid{
  background: var(--cream);
  color: var(--ink-deep);
  border-color: var(--cream);
}
.cta-whisky .btn.solid::before{ background: var(--brass); }
.cta-whisky .btn.solid:hover{ color: var(--cream); }
.cta-whisky .btn.brass{
  color: color-mix(in oklch, var(--brass) 90%, white);
  border-color: color-mix(in oklch, var(--brass) 90%, white);
}
.cta-whisky .btn.brass::before{ background: color-mix(in oklch, var(--brass) 90%, white); }
.cta-block .eyebrow{ margin-bottom:24px; justify-content:center; }
.cta-block h2{
  font-size:clamp(48px, 8vw, 128px);
  font-style:italic;
  font-weight:300;
  margin-bottom:36px;
  letter-spacing:-0.02em;
}
.cta-block h2 em{ color:var(--brass-deep); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
  .nav{
    display:flex;
    position:fixed; inset:0;
    height:100vh; height:100dvh;
    flex-direction:column; align-items:center; justify-content:center;
    gap:34px;
    background:var(--cream);
    /* Opaque at all times — only slide via transform. Previously this also
       transitioned opacity 0→1, which meant for ~0.3s while opening/closing
       the full-screen overlay was semi-transparent, letting the page
       underneath show through and visually collide with the nav links. */
    transform:translateY(-100%);
    /* Extra guarantee on top of the transform: visibility:hidden doesn't
       depend on transform/viewport-height math at all, so even if the
       slide-up amount is ever slightly off, nothing can show through or
       be tapped while closed. Delayed on the way out so the slide-up
       animation still plays; instant on the way in. */
    visibility:hidden;
    pointer-events:none;
    transition:transform .45s cubic-bezier(.2,.6,.2,1), visibility 0s linear .45s;
    z-index:65;
  }
  .site-header.nav-open .nav{
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .45s cubic-bezier(.2,.6,.2,1), visibility 0s linear 0s;
  }
  .nav a{ font-size:26px; color:var(--ink-deep) !important; }
  .hero-meta{ grid-template-columns: repeat(2, 1fr); gap:24px; }
  .hero-tag{ display:none; }
  .houses-list{ grid-template-columns: 1fr; border-top:1px solid var(--rule); }
  .house{
    border-right:none;
    border-bottom: 1px solid var(--rule);
    padding: 32px 24px;
    gap: 14px;
    min-height: 0;
  }
  .house:last-child{ border-bottom:none; }
  .house .ghost{ font-size:72px; top:6px; right:16px; }
  .house .descr{ display:none; }
  .house:hover{ transform: none; }
  .quotecar-crown{ gap:18px; margin-bottom:48px; }
  .qc-seal{ width:74px; height:74px; }
  .qc-mark{ font-size:52px; }
  .quotecar-stage{ gap:14px; }
  .qc-arrow{ width:38px; }
  .folio-clip{ flex-basis: 100%; }
  .folio-track{ gap:18px; }
  .map-grid{ grid-template-columns: 1fr; }
  .map-section{ display:none; }
  .story-grid{ grid-template-columns: 1fr; min-height:0; }
  .story-text{ padding:56px var(--gutter); order:2; }
  .story-img{ order:1; min-height:85vw; }
  .footer-inner{ grid-template-columns: 1fr auto 1fr; }
  .r-hero-title{ grid-template-columns: 1fr; }
  .descr-grid{ grid-template-columns: 1fr; }
  .descr-side{ position:relative; top:0; }
  .menu-cols{ grid-template-columns: 1fr; }
  .menu-pull{ grid-template-columns: 1fr; }
  .book-grid{ grid-template-columns: 1fr; }
  .collage-grid{ grid-auto-rows: 60px; }
}

@media (max-width: 720px){
  .hero{ padding-top:100px; }
  .hero-title{ font-size: clamp(48px, 14vw, 80px); }
  .hero-meta{ grid-template-columns: 1fr 1fr; }
}

/* =========== Stacked-band restaurant hero =========== */
/* Dark header over the light hero band (overrides the global hero auto-darken) */
body[data-page="leith"] .site-header:not(.scrolled),
body[data-page="city"] .site-header:not(.scrolled),
body[data-page="shore"] .site-header:not(.scrolled){ color:var(--ink-deep); }
body[data-page="leith"] .site-header:not(.scrolled) .nav a,
body[data-page="city"] .site-header:not(.scrolled) .nav a,
body[data-page="shore"] .site-header:not(.scrolled) .nav a{ color:var(--ink-deep); }
body[data-page="leith"] .site-header:not(.scrolled) .nav a.active,
body[data-page="city"] .site-header:not(.scrolled) .nav a.active,
body[data-page="shore"] .site-header:not(.scrolled) .nav a.active{ color:var(--brass-deep); }
body[data-page="leith"] .site-header:not(.scrolled) .header-mark,
body[data-page="city"] .site-header:not(.scrolled) .header-mark,
body[data-page="shore"] .site-header:not(.scrolled) .header-mark{ color:var(--ink-deep); }
body[data-page="leith"] .site-header:not(.scrolled) .header-mark img,
body[data-page="city"] .site-header:not(.scrolled) .header-mark img,
body[data-page="shore"] .site-header:not(.scrolled) .header-mark img{ filter:none; }

.r-stack-hero{
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--warm-paper);
}
.r-stack-top{
  padding:130px var(--gutter) 34px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
}
.r-stack-title{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(48px, 7vw, 104px); line-height:0.84; letter-spacing:-0.03em;
  color:var(--ink-deep); margin:0; white-space:nowrap;
}
.r-stack-title em{ font-style:italic; color:var(--brass-deep); }
.r-stack-num{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(20px, 2.4vw, 34px); line-height:1.15;
  color:var(--brass-deep); white-space:nowrap; text-align:right;
}
.r-stack-band{
  position:relative; flex:1;
  min-height:clamp(560px, 74vh, 900px);
  overflow:hidden;
}
.r-stack-band img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.r-stack-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    color-mix(in oklch, var(--ink-night) 30%, transparent) 0%,
    transparent 30%,
    color-mix(in oklch, var(--ink-night) 72%, transparent) 100%);
}
.r-stack-foot{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:40px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
}
.r-stack-actions{ display:flex; gap:16px; }
.r-stack-btn{
  font-family:var(--mono); font-size:13px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--cream);
  border:1px solid color-mix(in oklch, var(--cream) 78%, transparent);
  padding:21px 36px; display:inline-flex; align-items:center; gap:16px;
  text-decoration:none; background:transparent; white-space:nowrap;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color 0.45s ease;
}
.r-stack-btn::before{
  content:""; position:absolute; inset:0;
  background:var(--cream);
  transform:translateY(101%);
  transition:transform 0.5s cubic-bezier(.7,0,.3,1);
  z-index:-1;
}
.r-stack-btn:hover{ color:var(--ink-deep); }
.r-stack-btn:hover::before{ transform:translateY(0); }
.r-stack-btn svg{ width:19px; height:19px; flex-shrink:0; transition:transform 0.3s ease; }
.r-stack-btn:hover svg{ transform:translateX(4px); }
.r-stack-addr{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.26em; text-transform:uppercase;
  color:color-mix(in oklch, var(--cream) 82%, transparent);
  text-align:right; line-height:1.9; margin:0;
}
@media (max-width: 1080px){
  .r-stack-top{ gap:28px; }
  .r-stack-title{ font-size:clamp(40px, 6.4vw, 72px); }
  .r-stack-num{ font-size:clamp(15px, 2.1vw, 22px); }
}
@media (max-width: 760px){
  .r-stack-top{ flex-direction:column; align-items:flex-start; gap:12px; padding:104px var(--gutter) 26px; }
  .r-stack-title{ white-space:normal; font-size:clamp(40px, 12vw, 64px); }
  .r-stack-num{ text-align:left; }
  .r-stack-foot{ flex-direction:column; align-items:flex-start; gap:22px; }
  .r-stack-addr{ text-align:left; }
  .r-stack-actions{ flex-wrap:wrap; gap:10px; }
  .r-stack-btn{ padding:14px 18px; font-size:10px; letter-spacing:0.18em; }
}

/* =========== Full-bleed house hero (logo over photo) =========== */
.r-fullhero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:var(--ink-deep);
}
.r-fullhero-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position:center 52%;
  z-index:0;
}
/* light bottom-only gradient, just enough to seat the buttons + address */
.r-fullhero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    transparent 52%,
    color-mix(in oklch, var(--ink-night) 38%, transparent) 100%);
}
/* gentle, even darkening for brighter photos (keeps the cream logo legible) */
.r-fullhero-scrim.even{
  background:linear-gradient(180deg,
    color-mix(in oklch, var(--ink-night) 34%, transparent) 0%,
    color-mix(in oklch, var(--ink-night) 20%, transparent) 45%,
    color-mix(in oklch, var(--ink-night) 52%, transparent) 100%);
}
.r-fullhero-content{
  position:relative; z-index:3;
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:150px var(--gutter) 64px;
}
.r-fullhero-logo{
  width:clamp(150px, 20vw, 320px);
  height:auto;
  filter:var(--logo-cream)
         drop-shadow(0 4px 30px color-mix(in oklch, var(--ink-night) 60%, transparent));
}
.r-fullhero-sub{
  margin:6px 0 0;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(16px, 1.9vw, 24px);
  line-height:1; letter-spacing:0.38em; text-transform:uppercase;
  text-indent:0.38em;
  white-space:nowrap;
  color:var(--cream);
  text-shadow:0 2px 18px color-mix(in oklch, var(--ink-night) 60%, transparent);
}
.r-fullhero-foot{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:42px;
  z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
}
.r-fullhero-addr{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.26em; text-transform:uppercase;
  color:color-mix(in oklch, var(--cream) 86%, transparent);
  text-align:right; line-height:1.9; margin:0;
}
@media (max-width: 760px){
  .r-fullhero-foot{ position:static; flex-direction:column; align-items:center; gap:22px; margin-top:36px; margin-bottom:34px; }
  .r-fullhero-addr{ text-align:center; }
  .r-fullhero-content{ padding-top:120px; padding-bottom:40px; }
  .r-fullhero-foot .r-stack-actions{ flex-wrap:wrap; justify-content:center; gap:10px; }
  .r-fullhero-foot .r-stack-btn{ padding:14px 18px; font-size:10px; letter-spacing:0.18em; }
}

/* =========== Floating "Book Now" button =========== */
.float-book{
  position: fixed;
  right: clamp(18px, 3vw, 40px);
  bottom: clamp(18px, 3vw, 40px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 19px 30px;
  background: var(--cream);
  color: var(--ink-deep);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: 1px solid var(--cream);
  box-shadow: 0 18px 50px color-mix(in oklch, var(--ink-night) 50%, transparent);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(.2,.6,.2,1),
              background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.float-book.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: floatBob 3.6s ease-in-out infinite;
}
.float-book:hover{
  background: var(--sea);
  color: var(--cream);
  border-color: var(--sea);
}
.float-book svg{
  width: 17px; height: 17px;
  color: var(--brass-deep);
  transition: color 0.4s ease;
}
.float-book:hover svg{ color: var(--cream); }
@keyframes floatBob{
  0%, 100%{ transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce){
  .float-book{ transition: opacity 0.4s ease; }
  .float-book.show{ animation: none; transform: translateY(0); }
}
@media (max-width: 560px){
  .float-book{ padding: 14px 20px; font-size: 10px; letter-spacing: 0.22em; gap: 10px; }
}

@media (max-width: 640px){
  :root{ --gutter: 18px; }
  .header-mark .est{ display:none; }
  .hero-meta{ grid-template-columns: 1fr 1fr; gap:18px; }
  .houses-head{ grid-template-columns: 1fr; gap:18px; }
  .reviews-head{ grid-template-columns: 1fr; gap:24px; }
  .qc-text{ max-width: 100%; }
  .footer-inner{ grid-template-columns: 1fr; gap:28px; }
  .menu-head{ grid-template-columns: 1fr; gap:18px; }
  .collage-grid > .tile{ grid-column: span 12 !important; grid-row: span 4 !important; margin-top:0 !important; }
}

/* ============================================================
   RUSTIC PASS — committed treatments 3 (display face) + 4 (hand-set marks)
   ============================================================ */

/* ---- 3 · Display face: warm old-style Goudy on the big headlines ----
   (class-level so it wins over the homepage's tweak-driven h1–h4 rule;
   delicate italic accents stay in Cormorant for contrast) */
.hero-title,
.houses-head h2,
.map-text h2,
.descr-text h2,
.menu-head h2,
.story-text h2,
.ig-head h2,
.reviews h2,
.cta-block h2,
.house .name,
.r-stack-title,
.about-band .about-title,
.r-book-mark h2,
.event h3,
.ta-reviews-head h2{
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.cta-block h2{ letter-spacing: 0; }

/* ---- 4 · Hand-set marks: inky rules, hand-stamped badges, seals ---- */
/* eyebrow rules become short inked strokes */
.eyebrow{ letter-spacing: 0.18em; }
.eyebrow::before{
  height: 2px; width: 34px;
  background: var(--brass-deep); border-radius: 1px;
  transform: rotate(-0.6deg);
}
/* house badges look hand-stamped: slight rotate + double ring */
.house .badge{
  border-width: 2px;
  border-color: var(--brass-deep);
  box-shadow: 0 0 0 1px oklch(0.50 0.075 65 / 0.35), inset 0 0 0 3px oklch(0.985 0.008 85 / 0.6);
  transform: rotate(-2.2deg);
}
.house:nth-child(3) .badge{ transform: rotate(1.8deg); }
.house:nth-child(4) .badge{ transform: rotate(-1.2deg); }
/* story stamp reads like an ink stamp pressed onto the photo */
.story-stamp{
  border: 1.5px solid var(--cream);
  border-radius: 2px;
  padding: 8px 14px;
  transform: rotate(-3deg);
  box-shadow: 0 0 0 3px oklch(0.985 0.008 85 / 0.18);
}
/* CTA buttons get a letterpress / stamped feel */
.cta-block .btn{
  border-width: 2px;
  border-radius: 2px;
}
/* a hand-pressed circular seal, pressed into the lower corner opposite the signature */
.story-text{ position: relative; }
.story-text::after{
  content: "EST · 1991 · LEITH";
  position: absolute;
  top: auto; bottom: clamp(40px, 6vw, 92px);
  right: clamp(32px, 4vw, 64px);
  width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em;
  color: var(--brass-deep);
  border: 2.5px solid var(--brass-deep);
  transform: rotate(6deg);
  opacity: 0.82;
  mix-blend-mode: multiply;
  /* worn-ink distress: a noise-texture PNG mask punches irregular gaps in
     the stroke + text. The circular boundary comes from border-radius
     above, not mask compositing. Previously this used an inline SVG
     feTurbulence filter as a data-URI mask — mathematically it produced a
     reasonable alpha spread, but relying on a hand-authored SVG filter as
     a CSS mask source is fragile (luminance-vs-alpha mask-mode ambiguity,
     inconsistent SVG filter support as mask images) and it wasn't
     rendering the distress at all in practice. A real PNG with the pattern
     baked into both RGB (for luminance-mode UAs) and alpha (for
     alpha-mode UAs) sidesteps that ambiguity entirely. */
  -webkit-mask-image: url("seal-distress.png");
  mask-image: url("seal-distress.png");
  -webkit-mask-size: 150px 150px;
  mask-size: 150px 150px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}
/* On desktop, shift the seal down and to the left (southwest) so it isn't
   crowded right up against the paragraph text — landing closer to the
   "— The Millars" signature line instead. Scoped to desktop only so the
   mobile position (tuned separately) is untouched. */
@media (min-width: 1001px){
  .story-text::after{
    /* Fixed px (not clamp/vw) — at normal desktop widths 1vw sat inside
       both the old and new clamp bounds, so tweaking the bounds alone
       produced zero visible change. A flat value moves predictably. */
    bottom: 34px;
    right: clamp(120px, 14vw, 220px);
  }
}
/* footer waves: drop the too-perfect brass glint lines */
.footer-waves path[stroke]{ display: none; }

/* ============================================================
   COMPACT RESTAURANT MENUS — tighter type + spacing so menus
   take up less vertical room. Scoped to .menu-section to win
   over the earlier generic .menu-item rules.
   ============================================================ */
.menu-section{ padding: 80px 0 62px; }
.menu-section .menu-head{ margin-bottom: 36px; padding-bottom: 22px; }
.menu-section h3.course{ font-size: 20px; padding-bottom: 10px; margin-bottom: 4px; }
.menu-section h3.course-wide{ font-size: 20px; margin-top: 33px; margin-bottom: 21px !important; }
.menu-section .menu-cols{ gap: clamp(27px, 3.7vw, 60px); }
.menu-section .menu-cols + .menu-cols{ margin-top: clamp(39px, 4.5vw, 68px); }

.menu-section .menu-item{ padding: 13px 0; }
.menu-section h3.course + .menu-item{ margin-top: 9px; }
.menu-section .menu-item .row1{ gap: 21px; margin-bottom: 2px; }
.menu-section .menu-item .name{ font-size: 19.5px; line-height: 1.2; }
.menu-section .menu-item .price{ font-size: 12px; letter-spacing: 0.09em; }
.menu-section .menu-item .desc{ font-size: 13.75px; line-height: 1.5; margin-top: 2px; }

/* serving-options list (oysters / scallops) */
.menu-section .menu-serves{ gap: 7px; margin-top: 9px; }
.menu-section .menu-serves .s-name{ font-size: 15px; }
.menu-section .menu-serves .s-price{ font-size: 11.5px; }

/* sub-headers within a column (From the kitchen, Oysters, etc.) */
.menu-section h4.course-sub{ margin-bottom: 11px; }