/* ==========================================================================
   ROBLE BLANCO — main stylesheet
   Modern Puerto Rican Cuisine · San Juan, PR

   Layout is fluid end to end: every size is a clamp(), and every multi-column
   grid uses auto-fit + minmax(min(100%, Npx), 1fr) so it collapses on its own.
   There are deliberately NO media queries in this file apart from
   prefers-reduced-motion and prefers-contrast.

   TABLE OF CONTENTS
     1.  Design tokens
     2.  Reset & base
     3.  Keyframes
     4.  Motion gate (loader -> hero choreography)
     5.  Shared primitives (buttons, links, eyebrows, ornaments)
     6.  Decorative frame
     7.  Loader
     8.  Hero
     9.  Concept
     10. Table (photo diptych)
     11. Facade
     12. Visit
     13. Reserve + footer
     14. Sticky reserve pill
     15. Menu page
     16. Reduced motion & forced colors
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Brand surface ------------------------------------------------
     The entire site is retoned from these four triplets: every background,
     scrim and gradient below is composed from them, so no surface colour is
     hard-coded further down.

       --rb-surface       primary background (hero, reserve, loader, /menu)
       --rb-surface-deep  photo sections, map tint, dark end of the scrims
       --rb-surface-ink   text and rules on the cream Visit panel
       --rb-shadow        the sticky pill's drop shadow

     Ink is a separate token deliberately. The original navy was dark enough
     to serve as background AND as ink on cream; a mid-tone surface is not,
     so the two roles are split and can be tuned independently. */
  --rb-surface: 31 55 35;         /* #1F3723 */
  --rb-surface-deep: 23 41 26;    /* #17291A */
  --rb-surface-ink: 31 55 35;     /* #1F3723 */
  --rb-shadow: 8 16 9;

  /* Hue applied to the Google Maps embed so it reads in the brand palette.
     Not derivable from the surface — the value is found by eye against the
     inverted map. 185deg was the navy tuning; 120deg greens the chrome. */
  --rb-map-hue: 120deg;

  --rb-bg: rgb(var(--rb-surface));
  --rb-bg-deep: rgb(var(--rb-surface-deep));
  --rb-ink: rgb(var(--rb-surface-ink));
  --rb-oxblood: #381210;       /* concept section, link hover on cream   */
  --rb-stone: #CDC5BA;         /* body text on surface, cream panel bg      */
  --rb-stone-light: #F2EEE8;   /* outlined-button text                   */
  --rb-gold: #C99E4F;          /* hairlines, frames, ornaments           */
  --rb-gold-bright: #E4C88A;   /* focus rings, link hover on surface        */

  /* Gold at the exact alphas the design uses. */
  --rb-gold-62: rgba(201, 158, 79, 0.62);
  --rb-gold-60: rgba(201, 158, 79, 0.60);
  --rb-gold-55: rgba(201, 158, 79, 0.55);
  --rb-gold-50: rgba(201, 158, 79, 0.50);
  --rb-gold-45: rgba(201, 158, 79, 0.45);
  --rb-gold-40: rgba(201, 158, 79, 0.40);
  --rb-gold-34: rgba(201, 158, 79, 0.34);
  --rb-gold-30: rgba(201, 158, 79, 0.30);
  --rb-gold-18: rgba(201, 158, 79, 0.18);

  /* Stone-light overlays used by the outlined buttons. */
  --rb-outline-border: rgba(232, 226, 216, 0.72);
  --rb-outline-fill: rgba(232, 226, 216, 0.14);
  --rb-outline-fill-hover: rgba(232, 226, 216, 0.24);

  /* Ink on the cream Visit panel. */
  --rb-ink-70: rgb(var(--rb-surface-ink) / 0.70);
  --rb-ink-55: rgb(var(--rb-surface-ink) / 0.55);
  --rb-ink-30: rgb(var(--rb-surface-ink) / 0.30);
  --rb-ink-25: rgb(var(--rb-surface-ink) / 0.25);
  --rb-ink-20: rgb(var(--rb-surface-ink) / 0.20);

  /* --- Type --------------------------------------------------------- */
  /* Cormorant Garamond carries every display line; its high contrast is
     matched to the Didone wordmark. Archivo is micro-UI only. Do not
     substitute — the pairing is a brand decision. */
  --rb-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --rb-font-ui: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- Geometry ----------------------------------------------------- */
  /* The 38px horizontal minimum is intentional: it was raised from 26px
     to give phone layouts breathing room. */
  --rb-pad-x: clamp(38px, 7vw, 64px);
  --rb-frame-inset: clamp(13px, 2.4vw, 26px);
  --rb-corner: 44px;   /* frame corner arc box; the arc circle is 2x this */

  /* Border radius is 0 everywhere by design. The only curves in the whole
     site are the decorative corner arcs and the rotated ornaments. */
  --rb-radius: 0;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  background: var(--rb-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--rb-bg);
  color: var(--rb-stone);
  font-family: var(--rb-font-ui);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
  /* The width/height attributes are presentational hints, i.e. real CSS
     declarations. A rule that only sets `width` leaves the attribute's height
     in force, so the box keeps its intrinsic pixel height while the image
     scales inside it. `height: auto` is what lets the aspect ratio win; the
     attributes still do their job of reserving space against layout shift.
     Sections that need a fixed height (diptych, facade, tree layers) set it
     explicitly and override this. */
  height: auto;
}

a {
  color: var(--rb-stone);
  text-decoration: none;
}

a:hover {
  color: var(--rb-gold-bright);
}

/* One focus treatment for the whole site. Panels that sit flush to the
   viewport edge pull the ring inward instead (see .rb-diptych__panel). */
:focus-visible {
  outline: 1px solid var(--rb-gold-bright);
  outline-offset: 4px;
}

.rb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3. KEYFRAMES

   rbGrowA…rbGrowE drive the signature tree reveal. Each expands a
   clip-path circle whose origin sits at the root (50% 97%), so the tree
   fills upward from the base. The five layers start and end at offset
   radii with falling opacity, which feathers the growth edge instead of
   producing one hard wipe. All five are required.
   ========================================================================== */

@keyframes rbGrowA {
  0%   { clip-path: circle(1.5% at 50% 97%); }
  20%  { clip-path: circle(30.0% at 50% 97%); }
  45%  { clip-path: circle(59.0% at 50% 97%); }
  70%  { clip-path: circle(76.0% at 50% 97%); }
  100% { clip-path: circle(101.0% at 50% 97%); }
}

@keyframes rbGrowB {
  0%   { clip-path: circle(4.0% at 50% 97%); }
  20%  { clip-path: circle(32.5% at 50% 97%); }
  45%  { clip-path: circle(61.5% at 50% 97%); }
  70%  { clip-path: circle(78.5% at 50% 97%); }
  100% { clip-path: circle(103.5% at 50% 97%); }
}

@keyframes rbGrowC {
  0%   { clip-path: circle(6.5% at 50% 97%); }
  20%  { clip-path: circle(35.0% at 50% 97%); }
  45%  { clip-path: circle(64.0% at 50% 97%); }
  70%  { clip-path: circle(81.0% at 50% 97%); }
  100% { clip-path: circle(106.0% at 50% 97%); }
}

@keyframes rbGrowD {
  0%   { clip-path: circle(9.0% at 50% 97%); }
  20%  { clip-path: circle(37.5% at 50% 97%); }
  45%  { clip-path: circle(66.5% at 50% 97%); }
  70%  { clip-path: circle(83.5% at 50% 97%); }
  100% { clip-path: circle(108.5% at 50% 97%); }
}

@keyframes rbGrowE {
  0%   { clip-path: circle(12.0% at 50% 97%); }
  20%  { clip-path: circle(40.5% at 50% 97%); }
  45%  { clip-path: circle(69.5% at 50% 97%); }
  70%  { clip-path: circle(86.5% at 50% 97%); }
  100% { clip-path: circle(111.5% at 50% 97%); }
}

@keyframes rbSettle {
  from { transform: scale(0.952); }
  to   { transform: scale(1); }
}

@keyframes rbSway {
  0%, 100% { transform: rotate(-0.32deg); }
  50%      { transform: rotate(0.32deg); }
}

@keyframes rbSheen {
  0%   { transform: translateX(-70%) rotate(13deg); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(290%) rotate(13deg); opacity: 0; }
}

@keyframes rbUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rbIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rbBreathe {
  0%, 100% { opacity: 0.34; }
  50%      { opacity: 0.9; }
}

@keyframes rbTrack {
  from { transform: scaleX(0.04); }
  to   { transform: scaleX(1); }
}

@keyframes rbOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* ==========================================================================
   4. MOTION GATE

   The whole point of the loader is that the logo reveal is never missed on
   a slow connection. So the hero choreography must not start until the
   loader is leaving.

   `html.rb-preload` is set by an inline script in <head>, which means it is
   never set when JavaScript is unavailable. While it is present every
   animation is paused — pausing also freezes the delay countdown, so a
   paused animation with `fill-mode: both` renders its `from` state and the
   full 5.9s choreography still runs from zero once the class is removed.

   Without JavaScript: no `.rb-preload`, so nothing is paused, the loader is
   hidden (section 7), and the page renders as a normal static document.
   ========================================================================== */

.rb-preload .rb-anim {
  animation-play-state: paused;
}


/* ==========================================================================
   5. SHARED PRIMITIVES
   ========================================================================== */

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

.rb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--rb-radius);
  font-family: var(--rb-font-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  /* Uppercase + wide tracking leaves a visual gap on the right; the indent
     pushes the string back to optical centre. */
  text-indent: 0.2em;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, filter 0.25s ease;
}

/* Primary: the client-supplied gold-leaf texture. */
.rb-btn--gold {
  min-height: 54px;
  background-color: var(--rb-gold);
  background-image: image-set(
    url('../img/bg-button-gold-760.avif') type('image/avif'),
    url('../img/bg-button-gold-760.webp') type('image/webp'),
    url('../img/bg-button-gold.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
  color: var(--rb-ink);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

.rb-btn--gold:hover {
  color: var(--rb-ink);
  filter: brightness(1.12);
}

/* Outlined, on navy. */
.rb-btn--outline {
  border: 1px solid var(--rb-outline-border);
  background: var(--rb-outline-fill);
  color: var(--rb-stone-light);
}

.rb-btn--outline:hover {
  border-color: #FFFFFF;
  background: var(--rb-outline-fill-hover);
  color: #FFFFFF;
}

/* Outlined, on the cream Visit panel. */
.rb-btn--ink {
  align-self: flex-start;
  min-height: 50px;
  padding: 0 clamp(26px, 4vw, 42px);
  border: 1px solid rgb(var(--rb-surface-ink) / 0.55);
  background: transparent;
  color: var(--rb-ink);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

.rb-btn--ink:hover {
  border-color: var(--rb-ink);
  background: rgb(var(--rb-surface-ink) / 0.07);
  color: var(--rb-ink);
}

.rb-btn--ink:focus-visible {
  outline-color: var(--rb-ink);
}

/* --- Text links ----------------------------------------------------- */

.rb-link-ink {
  color: var(--rb-ink);
  border-bottom: 1px solid var(--rb-ink-25);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.rb-link-ink:hover {
  color: var(--rb-oxblood);
  border-color: var(--rb-oxblood);
}

.rb-link-ink:focus-visible {
  outline-color: var(--rb-ink);
}

/* Micro-link on cream — "View in Maps". */
.rb-link-micro {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--rb-ink-70);
  border-bottom: 1px solid var(--rb-ink-30);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.rb-link-micro:hover {
  color: var(--rb-oxblood);
  border-color: var(--rb-oxblood);
}

.rb-link-micro:focus-visible {
  outline-color: var(--rb-ink);
}

/* Social links in the footer. */
.rb-social {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 6px;
  color: rgba(205, 197, 186, 0.85);
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0.24em;
  transition: color 0.25s ease;
}

.rb-social:hover {
  color: var(--rb-gold-bright);
}

.rb-social svg {
  flex: none;
}

/* --- Labels --------------------------------------------------------- */

.rb-eyebrow {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* --- Ornaments ------------------------------------------------------ */
/* Rotated squares, not hairlines: the client rejected plain rules here. */

.rb-diamond {
  /* Positioned so the ornaments stack above the Concept watermark. */
  position: relative;
  width: 7px;
  height: 7px;
  background: rgba(201, 158, 79, 0.85);
  transform: rotate(45deg);
}

.rb-diamond--sm {
  width: 4px;
  height: 4px;
  background: var(--rb-gold-50);
}

.rb-ornament-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* --- Hairline ------------------------------------------------------- */

.rb-rule {
  position: relative;
  width: 46px;
  height: 1px;
  background: var(--rb-gold-40);
}


/* ==========================================================================
   6. DECORATIVE FRAME

   Gold hairlines inset 44px from each corner, with a concave quarter-circle
   arc filling each corner. The arc is an 88x88 circle pushed -44px on both
   axes inside a 44x44 overflow-hidden box — a client-specified brand detail.
   It must not be approximated with border-radius on the frame itself.
   ========================================================================== */

.rb-frame {
  --frame-line: var(--rb-gold-62);
  --frame-inner: var(--rb-gold-30);

  position: absolute;
  inset: var(--rb-frame-inset);
  z-index: 3;
  pointer-events: none;
}

/* Softer variant used by the Reserve/footer block. */
.rb-frame--soft {
  --frame-line: var(--rb-gold-34);
  --frame-inner: var(--rb-gold-18);
}

/* All four straight hairlines in a single painted layer. */
.rb-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--frame-line), var(--frame-line)),
    linear-gradient(var(--frame-line), var(--frame-line)),
    linear-gradient(var(--frame-line), var(--frame-line)),
    linear-gradient(var(--frame-line), var(--frame-line));
  background-repeat: no-repeat;
  background-size:
    calc(100% - var(--rb-corner) * 2) 1px,
    calc(100% - var(--rb-corner) * 2) 1px,
    1px calc(100% - var(--rb-corner) * 2),
    1px calc(100% - var(--rb-corner) * 2);
  background-position:
    var(--rb-corner) 0,
    var(--rb-corner) 100%,
    0 var(--rb-corner),
    100% var(--rb-corner);
}

/* Second, straight-cornered frame. */
.rb-frame::after {
  content: '';
  position: absolute;
  inset: 13px;
  border: 1px solid var(--frame-inner);
}

.rb-frame__corner {
  position: absolute;
  width: var(--rb-corner);
  height: var(--rb-corner);
  overflow: hidden;
}

.rb-frame__corner::before {
  content: '';
  position: absolute;
  width: calc(var(--rb-corner) * 2);
  height: calc(var(--rb-corner) * 2);
  border: 1px solid var(--frame-line);
  border-radius: 50%;
}

.rb-frame__corner--tl { left: 0; top: 0; }
.rb-frame__corner--tr { right: 0; top: 0; }
.rb-frame__corner--bl { left: 0; bottom: 0; }
.rb-frame__corner--br { right: 0; bottom: 0; }

.rb-frame__corner--tl::before { left: calc(var(--rb-corner) * -1); top: calc(var(--rb-corner) * -1); }
.rb-frame__corner--tr::before { right: calc(var(--rb-corner) * -1); top: calc(var(--rb-corner) * -1); }
.rb-frame__corner--bl::before { left: calc(var(--rb-corner) * -1); bottom: calc(var(--rb-corner) * -1); }
.rb-frame__corner--br::before { right: calc(var(--rb-corner) * -1); bottom: calc(var(--rb-corner) * -1); }


/* ==========================================================================
   7. LOADER
   ========================================================================== */

.rb-loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;             /* only shown when JS has set .rb-preload */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--rb-bg);
  pointer-events: none;
}

.rb-preload .rb-loader,
.rb-loader.is-leaving {
  display: flex;
}

.rb-loader.is-leaving {
  animation: rbOut 0.75s ease-out both;
}

.rb-loader__mark {
  width: 62px;
  animation: rbBreathe 2.4s ease-in-out infinite;
}

.rb-loader__track {
  width: 122px;
  height: 1px;
  background: var(--rb-gold-55);
  transform-origin: left center;
  animation: rbTrack 2.6s cubic-bezier(0.3, 0.9, 0.2, 1) both;
}

/* On the way out the loader freezes into a static copy and fades, so the
   breathing mark does not flicker underneath the fade. */
.rb-loader.is-leaving .rb-loader__mark,
.rb-loader.is-leaving .rb-loader__track {
  animation: none;
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   8. HERO
   ========================================================================== */

.rb-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.8vh, 42px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(54px, 9vh, 96px) var(--rb-pad-x);
  background: var(--rb-bg);
  text-align: center;
  overflow: hidden;
}

/* Layer 1 — stone texture. */
.rb-hero__texture {
  position: absolute;
  inset: 0;
  background-color: var(--rb-ink);
  background-image: image-set(
    url('../img/bg-stone-1920.avif') type('image/avif'),
    url('../img/bg-stone-1920.webp') type('image/webp'),
    url('../img/bg-stone.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  pointer-events: none;
}

/* Layer 2 — scrim. */
.rb-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(120% 80% at 50% 30%,
      rgb(var(--rb-surface) / 0.18) 0%,
      rgb(var(--rb-surface) / 0.62) 48%,
      rgb(var(--rb-surface-deep) / 0.95) 100%),
    linear-gradient(to top,
      rgb(var(--rb-surface-deep) / 0.96) 0%,
      rgb(var(--rb-surface) / 0.80) 32%,
      rgb(var(--rb-surface) / 0.24) 66%,
      rgb(var(--rb-surface) / 0.10) 100%);
}

.rb-hero .rb-frame {
  animation: rbIn 1.2s ease-out 0.5s both;
}

/* --- Tree reveal ---------------------------------------------------- */

.rb-tree {
  position: relative;
  z-index: 2;
  flex: none;
  height: min(38svh, 44vw, 340px);
  width: auto;
  max-width: 84vw;
  aspect-ratio: 1044 / 702;
  transform-origin: 50% 100%;
  animation: rbSway 15s ease-in-out 5.9s infinite;
}

.rb-tree__settle {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: rbSettle 4.8s cubic-bezier(0.2, 0.9, 0.15, 1) both;
}

.rb-tree__layer {
  position: absolute;
  inset: 0;
}

.rb-tree__layer img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rb-tree__layer--a { animation: rbGrowA 4.6s linear both; }
.rb-tree__layer--b { animation: rbGrowB 4.6s linear both; opacity: 0.32; }
.rb-tree__layer--c { animation: rbGrowC 4.6s linear both; opacity: 0.22; }
.rb-tree__layer--d { animation: rbGrowD 4.6s linear both; opacity: 0.14; }
.rb-tree__layer--e { animation: rbGrowE 4.6s linear both; opacity: 0.07; }

/* The mask lives on the clipping container, never on the bar itself —
   otherwise the highlight escapes the tree silhouette. */
.rb-tree__sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: url('../img/tree-white.svg');
          mask-image: url('../img/tree-white.svg');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.rb-tree__sheen span {
  position: absolute;
  left: 0;
  top: -25%;
  width: 24%;
  height: 150%;
  background-image: linear-gradient(90deg,
    rgba(255, 248, 224, 0) 0%,
    rgba(255, 250, 232, 0.9) 50%,
    rgba(255, 248, 224, 0) 100%);
  animation: rbSheen 2.3s ease-in-out 3.6s both;
}

/* --- Wordmark & tagline --------------------------------------------- */

.rb-hero__lockup {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 22px);
}

.rb-wordmark {
  position: relative;
  width: clamp(250px, 76vw, 520px);
  aspect-ratio: 1550 / 103;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* One whole-logo fade. Per-letter stagger and scale were both tried and
   rejected — do not reintroduce them. */
.rb-wordmark img {
  width: 100%;
  animation: rbIn 1.3s ease-out 3.5s both;
}

.rb-hero__tagline {
  font-size: clamp(10px, 2.5vw, 12.5px);
  font-weight: 200;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  text-transform: uppercase;
  color: rgba(214, 206, 195, 0.96);
  animation: rbUp 1s cubic-bezier(0.16, 1, 0.3, 1) 4.6s both;
}

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

.rb-hero__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  animation: rbUp 1s cubic-bezier(0.16, 1, 0.3, 1) 4.9s both;
}

.rb-hero__actions-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rb-hero__actions-pair .rb-btn {
  padding: 0 12px;
}


/* ==========================================================================
   9. CONCEPT
   ========================================================================== */

.rb-concept {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(34px, 6vh, 56px);
  padding: clamp(104px, 20vh, 210px) clamp(28px, 8vw, 80px);
  background: var(--rb-oxblood);
  text-align: center;
  overflow: hidden;
}

.rb-concept__watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1100px, 150vw);
  aspect-ratio: 1044 / 702;
  transform: translate(-50%, -50%);
  background: var(--rb-stone);
  opacity: 0.045;
  pointer-events: none;
  -webkit-mask-image: url('../img/tree-white.svg');
          mask-image: url('../img/tree-white.svg');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.rb-concept__quote {
  position: relative;
  max-width: 21ch;
  font-family: var(--rb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(29px, 6.8vw, 54px);
  line-height: 1.32;
  letter-spacing: 0.004em;
  color: var(--rb-stone);
  text-wrap: pretty;
}


/* ==========================================================================
   10. TABLE — PHOTO DIPTYCH
   ========================================================================== */

.rb-diptych {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  background: var(--rb-bg-deep);
}

.rb-diptych__panel {
  position: relative;
  display: block;
  min-height: clamp(360px, 64svh, 680px);
  overflow: hidden;
}

/* Pulled inward so the ring is not clipped by the panel edge. */
.rb-diptych__panel:focus-visible {
  outline-offset: -3px;
}

.rb-diptych__panel picture,
.rb-diptych__panel img {
  width: 100%;
  height: 100%;
}

.rb-diptych__panel img {
  object-fit: cover;
}

/* Both source photos are portrait; these offsets keep the subject centred
   in a landscape-ish cell. Retune if the cell ratio changes. */
.rb-diptych__panel--food img { object-position: 50% 46%; }
.rb-diptych__panel--bar img  { object-position: 50% 42%; }

/* The gold seam between the two panels. */
.rb-diptych__panel--bar {
  border-left: 1px solid var(--rb-gold-45);
}

.rb-diptych__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg,
    rgb(var(--rb-surface-deep) / 0.30) 0%,
    rgb(var(--rb-surface-deep) / 0) 34%,
    rgb(var(--rb-surface-deep) / 0.10) 58%,
    rgb(var(--rb-surface-deep) / 0.82) 100%);
}

.rb-diptych__caption {
  position: absolute;
  left: clamp(20px, 3vw, 38px);
  right: clamp(20px, 3vw, 38px);
  bottom: clamp(22px, 3.6vh, 40px);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.rb-diptych__caption .rb-eyebrow {
  color: rgba(242, 238, 232, 0.9);
}

.rb-diptych__cta {
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(232, 226, 216, 0.4);
  color: rgba(242, 238, 232, 0.68);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.rb-diptych__panel:hover .rb-diptych__cta {
  color: #FFFFFF;
  border-color: #FFFFFF;
}


/* ==========================================================================
   11. FACADE
   ========================================================================== */

.rb-facade {
  position: relative;
  background: var(--rb-bg-deep);
  overflow: hidden;
}

.rb-facade img {
  width: 100%;
  height: clamp(340px, 62svh, 660px);
  object-fit: cover;
  object-position: 50% 60%;   /* keeps the signage in frame */
}

/* Top scrim only, so the photo blends out of the dark diptych above. */
.rb-facade__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    rgb(var(--rb-surface-deep) / 0.34) 0%,
    rgb(var(--rb-surface-deep) / 0) 20%);
}


/* ==========================================================================
   12. VISIT
   ========================================================================== */

.rb-visit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  min-height: 92svh;
  background: var(--rb-stone);
  color: var(--rb-ink);
}

.rb-visit__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(26px, 4vh, 40px);
  padding: clamp(56px, 9vh, 108px) clamp(28px, 5vw, 68px);
}

.rb-visit__rows {
  display: flex;
  flex-direction: column;
}

.rb-visit__row {
  display: grid;
  grid-template-columns: minmax(96px, 0.32fr) 1fr;
  gap: clamp(14px, 2.4vw, 30px);
  align-items: baseline;
  padding: clamp(22px, 3.4vh, 32px) 0;
  border-top: 1px solid var(--rb-ink-20);
}

.rb-visit__row:last-child {
  border-bottom: 1px solid var(--rb-ink-20);
}

.rb-visit__row .rb-eyebrow {
  color: var(--rb-ink-55);
}

.rb-visit__value {
  font-family: var(--rb-font-display);
  font-weight: 400;
  font-size: clamp(19px, 4.2vw, 22px);
  line-height: 1.5;
  color: var(--rb-ink);
}

.rb-visit__stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.rb-visit__stack--tight {
  gap: 6px;
}

.rb-visit__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-family: var(--rb-font-display);
  font-weight: 400;
  font-size: clamp(18px, 4vw, 21px);
  line-height: 1.45;
  color: var(--rb-ink);
  /* Without nowrap "11am – midnight" wraps and breaks the row rhythm. */
  white-space: nowrap;
}

.rb-visit__hours .is-closed {
  opacity: 0.45;
}

.rb-visit__map {
  position: relative;
  min-height: clamp(320px, 46svh, 100%);
  line-height: 0;
  border-left: 1px solid var(--rb-gold-60);
}

.rb-visit__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* Tints Google's default map into the brand palette. */
  filter: invert(0.9) hue-rotate(var(--rb-map-hue)) saturate(0.4) brightness(0.8) contrast(0.9);
}

.rb-visit__map-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg,
    rgb(var(--rb-surface-deep) / 0.42) 0%,
    rgb(var(--rb-surface-deep) / 0) 34%);
}


/* ==========================================================================
   13. RESERVE + FOOTER

   Deliberately one block: there is no separate footer bar.
   ========================================================================== */

.rb-reserve {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vh, 38px);
  padding: clamp(84px, 15vh, 160px) clamp(38px, 7vw, 72px) clamp(60px, 10vh, 110px);
  background: var(--rb-bg);
  text-align: center;
  overflow: hidden;
}

.rb-reserve__title {
  position: relative;
  font-family: var(--rb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 8.8vw, 68px);
  line-height: 1.08;
  color: var(--rb-stone);
}

.rb-reserve__sub {
  position: relative;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 200;
  letter-spacing: 0.16em;
  color: rgba(216, 209, 199, 0.95);
}

.rb-reserve__cta {
  position: relative;
  width: 100%;
  max-width: 340px;
  min-height: 54px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

.rb-reserve .rb-rule {
  margin-top: clamp(26px, 5vh, 52px);
}

.rb-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.rb-footer__mark {
  width: 52px;
}

.rb-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
}

.rb-footer__divider {
  width: 1px;
  height: 15px;
  background: var(--rb-gold-40);
}

.rb-footer__meta {
  font-size: 10.5px;
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(205, 197, 186, 0.42);
}


/* ==========================================================================
   14. STICKY RESERVE PILL

   Appears once the hero has been scrolled past and retires as the footer
   CTA arrives, so the two never compete. Toggled by main.js.
   ========================================================================== */

.rb-sticky {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 3vh, 32px);
  z-index: 40;
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.rb-sticky.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.rb-sticky__link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  padding: 0 clamp(20px, 3vw, 28px);
  background: rgb(var(--rb-surface) / 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid var(--rb-gold-55);
  box-shadow: 0 14px 40px rgb(var(--rb-shadow) / 0.5);
  color: var(--rb-stone-light);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.24em;
  white-space: nowrap;
  text-transform: uppercase;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.rb-sticky__link:hover {
  border-color: rgba(228, 200, 138, 0.95);
  background: rgb(var(--rb-surface) / 0.9);
  color: var(--rb-stone-light);
}

.rb-sticky__link img {
  width: 15px;
  opacity: 0.85;
}

/* Without backdrop blur the translucent fill reads as muddy, so go opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rb-sticky__link {
    background: rgb(var(--rb-surface) / 0.96);
  }
}


/* ==========================================================================
   15. MENU PAGE (/menu/)
   ========================================================================== */

.rb-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 5vh, 48px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(72px, 12vh, 130px) var(--rb-pad-x);
  background: var(--rb-bg);
  text-align: center;
  overflow: hidden;
}

.rb-page__texture {
  position: absolute;
  inset: 0;
  background-color: var(--rb-ink);
  background-image: image-set(
    url('../img/bg-stone-1920.avif') type('image/avif'),
    url('../img/bg-stone-1920.webp') type('image/webp'),
    url('../img/bg-stone.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  pointer-events: none;
}

.rb-page__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(120% 80% at 50% 34%,
    rgb(var(--rb-surface) / 0.3) 0%,
    rgb(var(--rb-surface) / 0.72) 48%,
    rgb(var(--rb-surface-deep) / 0.96) 100%);
}

.rb-page__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 4.4vh, 44px);
  width: 100%;
  max-width: 420px;
}

/* Logo lockup.
   The tree and the wordmark were cropped out of one master logo file and their
   viewBoxes kept the original coordinates, so their relationship is measured,
   not eyeballed. Against the wordmark's width:
     tree width      67.51%   (1043.3 / 1545.4 ink units)
     vertical gap     4.64%   (71.7 units between tree baseline and cap line)
     the tree centre sits 1.40% right of the wordmark centre
   Percentage margins resolve against the container's width, so the whole
   lockup scales from the single width below and stays true at any size.
   The hero does NOT use this — there the tree is a large standalone element
   with its own reveal, which is the intended composition there. */
.rb-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(230px, 64vw, 340px);
}

.rb-logo__tree {
  width: 67.51%;
  margin-bottom: 4.64%;
  /* 1.40% of the lockup width, expressed against the tree's own width. */
  transform: translateX(2.07%);
}

.rb-logo__wordmark {
  width: 100%;
}

.rb-page__title {
  font-family: var(--rb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 8.4vw, 56px);
  line-height: 1.1;
  color: var(--rb-stone);
}

.rb-page__lead {
  max-width: 30ch;
  font-family: var(--rb-font-display);
  font-weight: 400;
  font-size: clamp(18px, 4vw, 21px);
  line-height: 1.5;
  color: rgba(205, 197, 186, 0.86);
  text-wrap: pretty;
}

.rb-page__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.rb-page__back {
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(205, 197, 186, 0.55);
  transition: color 0.25s ease;
}

.rb-page__back:hover {
  color: var(--rb-gold-bright);
}


/* ==========================================================================
   16. REDUCED MOTION & FORCED COLORS
   ========================================================================== */

/* The reveal resolves instantly and the sway/breathe loops stop, but every
   element still lands on its final state because fill-mode is `both`. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  .rb-btn--outline {
    border-color: #FFFFFF;
    background: rgba(232, 226, 216, 0.22);
  }

  .rb-diptych__cta {
    color: #FFFFFF;
  }

  .rb-footer__meta {
    color: rgba(205, 197, 186, 0.7);
  }
}