/* =========================================================================
   THE BEAR — thebear.club
   Design system + component library
   Live-fire Sri Lankan fusion catering, Paris
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=Parisienne&display=swap');
/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Colour: warm charcoal + burnished gold + Ceylon terracotta */
  --ink:            #15120F;
  --ink-soft:       #2B2420;
  --ink-mute:       #5B534B;
  --cream:          #FAF6EE;
  --cream-deep:     #F1E7D3;
  --cream-line:     #E4D8BF;
  --paper:          #FFFDF9;
  --gold:           #C08A3E;
  --gold-light:     #E7C287;
  --gold-dim:       #8C6A31;
  --terracotta:     #B0472C;
  --terracotta-deep:#7E3220;
  --forest:         #445939;
  --ink-rgb: 21,18,15;
  --gold-rgb: 192,138,62;
  --cream-rgb: 250,246,238;
  /* Surfaces (mapped so components can be reused on light/dark sections) */
  --bg:             var(--cream);
  --bg-alt:         var(--cream-deep);
  --surface:        var(--paper);
  --text:           var(--ink);
  --text-soft:      var(--ink-mute);
  --line:           var(--cream-line);
  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:  'Parisienne', 'Brush Script MT', cursive;
  --step--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.88rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1:  clamp(1.1rem, 1.04rem + 0.3vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.6vw, 1.7rem);
  --step-3:  clamp(1.7rem, 1.5rem + 1vw, 2.3rem);
  --step-4:  clamp(2.2rem, 1.85rem + 1.7vw, 3.3rem);
  --step-5:  clamp(2.8rem, 2.2rem + 2.8vw, 4.6rem);
  --step-6:  clamp(3.4rem, 2.5rem + 4.2vw, 6.2rem);
  /* Space */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.8rem;
  --sp-5: 2.6rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 9rem;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 20px 50px -25px rgba(21,18,15,0.35);
  --shadow-lift: 0 30px 70px -20px rgba(21,18,15,0.45);
  --ease: cubic-bezier(.22,.68,.12,.98);
  --container: 1240px;
  --container-narrow: 820px;
}
/* ---------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }
button{ cursor: pointer; }
svg{ display:block; }
::selection{ background: var(--gold); color: var(--paper); }
.container{ max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.container--narrow{ max-width: var(--container-narrow); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
section{ position: relative; }
/* ---------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------- */
.h-display{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--text);
}
.h-xl{ font-size: var(--step-6); }
.h-lg{ font-size: var(--step-5); }
.h-md{ font-size: var(--step-4); }
.h-sm{ font-size: var(--step-3); }
.h-xs{ font-size: var(--step-2); font-weight: 600;}
.italic{ font-style: italic; font-weight: 400; }
.script{
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.eyebrow::before{
  content:'';
  width: 28px; height: 1px;
  background: currentColor;
  opacity:.7;
}
.on-dark .eyebrow{ color: var(--gold-light); }
.lede{
  font-size: var(--step-1);
  color: var(--text-soft);
  max-width: 46ch;
  font-weight: 400;
}
.body-copy{ color: var(--text-soft); max-width: 60ch; }
.body-copy p + p{ margin-top: 1em; }
.section-head{ margin-bottom: var(--sp-6); max-width: 62ch; }
.section-head .h-display{ margin-top: var(--sp-2); }
.section-head--center{ margin-inline: auto; text-align: center; }
.section-head--split{
  display:flex; justify-content: space-between; align-items:flex-end; gap: var(--sp-5); flex-wrap: wrap;
}
/* ---------------------------------------------------------------------
   4. LAYOUT UTILITIES
   --------------------------------------------------------------------- */
.section-pad{ padding-block: var(--sp-8); }
.section-pad-sm{ padding-block: var(--sp-7); }
.on-dark{ background: var(--ink); color: var(--cream); }
.on-dark .text-soft, .on-dark .lede, .on-dark .body-copy{ color: rgba(250,246,238,.68); }
.on-dark .h-display{ color: var(--cream); }
.grid{ display: grid; gap: var(--sp-5); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){
  .grid-3, .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}
.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; align-items:center; }
.rule{ height:1px; background: var(--line); border:0; margin: var(--sp-6) 0; }
.rule--gold{ background: linear-gradient(90deg, transparent, var(--gold), transparent); height:1px; border:0; }
/*
 * Scroll-reveal is progressive enhancement only: elements are fully visible
 * by default so content never depends on JavaScript running (blocked
 * script, slow parse, JS error, non-JS crawler). The .js class is added by
 * an inline, synchronous script in <head> the instant JS is confirmed
 * alive — only then do .reveal elements start hidden and animate in.
 *
 * Two engines can drive that reveal, layered as enhancement on enhancement:
 *   1. Plain CSS transition below (opacity/transform + .is-visible) — the
 *      baseline whenever JS is on but GSAP/ScrollTrigger didn't load
 *      (network block, ad-blocker, CDN hiccup).
 *   2. GSAP (assets/js/animations.js), once it confirms
 *      `prefers-reduced-motion: no-preference` and finishes loading — it
 *      takes over the same elements with real stagger/easing and marks
 *      <html class="gsap-ready">, at which point the CSS transition below
 *      is switched off so the two engines never fight over the same
 *      opacity/transform values.
 */
.reveal{ transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal{ opacity: 0; transform: translateY(28px); }
.js .reveal.is-visible{ opacity: 1; transform: none; }
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }
.gsap-ready .reveal{ transition: none; }

/*
 * Reduced motion: belt-and-suspenders. animations.js already never touches
 * these elements when the user has "reduce motion" on (it's wrapped in a
 * gsap.matchMedia("(prefers-reduced-motion: no-preference)") block), but
 * this rule guarantees full, instant visibility even in the moment before
 * JS finishes evaluating, or if JS never runs at all.
 */
html.reduced-motion .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }

/*
 * Global catch-all: the theme also has several decorative CSS keyframe
 * loops that predate this animation pass (hero emblem rings, steam,
 * pulsing dots, the marquee scroll) and weren't gated before. A single
 * OS-level media query — not a JS class, so it works even if JS never
 * runs — is the correct fix for all of them at once rather than editing
 * each keyframe individually. Content stays fully present, just static.
 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html{ scroll-behavior: auto; }
}

/*
 * Word-mask split (assets/js/animations.js → splitWords()), used on the
 * hero title. Overflow:hidden on the outer span is the mask; the inner
 * span is what GSAP actually translates. The small padding/margin swap
 * keeps descenders (g, p, y…) from being clipped by the mask.
 */
.word{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.15em; margin-bottom: -0.15em; }
.word-inner{ display: inline-block; will-change: transform; }

/* Magnetic buttons + image-frame zoom (animations.js) animate transform
   directly via GSAP; will-change hints the browser to keep them on their
   own compositor layer without promoting every button on the page. */
.gsap-ready .btn-primary{ will-change: transform; }
.frame.has-image .frame-img{ will-change: transform; }
/* ---------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content:center;
  gap: .6em;
  padding: 1em 1.9em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  white-space: nowrap;
}
.btn svg{ width: 1em; height:1em; }
.btn-primary{
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover{ background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.on-dark .btn-primary{ background: var(--gold); color: var(--ink); }
.on-dark .btn-primary:hover{ background: var(--cream); }
.btn-outline{
  background: transparent;
  border-color: rgba(var(--ink-rgb),.28);
  color: var(--text);
}
.btn-outline:hover{ border-color: var(--ink); background: rgba(var(--ink-rgb),.05); transform: translateY(-2px); }
.on-dark .btn-outline{ border-color: rgba(250,246,238,.32); color: var(--cream); }
.on-dark .btn-outline:hover{ background: rgba(250,246,238,.08); border-color: var(--cream); }
.btn-ghost{
  padding: .3em 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: var(--step-0);
  border-bottom: 1px solid currentColor;
}
.btn-ghost:hover{ color: var(--gold); }
.btn-block{ width: 100%; }
.btn[disabled], .btn.is-disabled{ opacity:.45; pointer-events:none; }
/* ---------------------------------------------------------------------
   6. SITE HEADER / NAV
   --------------------------------------------------------------------- */
.announce{
  background: var(--ink);
  color: var(--cream);
  text-align:center;
  font-size: var(--step--1);
  letter-spacing: .08em;
  padding: .6em 1em;
}
.announce strong{ color: var(--gold-light); font-weight:700; }
.site-header{
  position: sticky; top:0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease, box-shadow .4s ease;
}
/*
 * The translucent blur lives on a ::before layer rather than directly on
 * .site-header. backdrop-filter/filter on an element creates a new
 * containing block for any position:fixed descendant (e.g. the mobile
 * .nav-main overlay), which would otherwise clip that overlay to the
 * header's own height instead of the full viewport.
 */
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: rgba(250,246,238,.86);
  backdrop-filter: blur(14px);
}
.site-header.is-scrolled{ border-color: var(--line); box-shadow: 0 10px 30px -22px rgba(21,18,15,.4); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); padding-block: .9rem; }
.brand{ display:flex; align-items:center; gap: .7rem; }
.brand img{ height: 46px; width:auto; }
.brand-word{ font-family: var(--font-display); font-size: 1.25rem; font-weight:600; letter-spacing:.01em; }
.brand-word em{ display:block; font-style: normal; font-family: var(--font-body); font-weight:700; font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; color: var(--gold-dim); }
.nav-main{ display:flex; align-items:center; gap: var(--sp-5); }
.nav-main a{
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-soft);
  position: relative;
  padding-bottom: 4px;
}
.nav-main a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--gold);
  transition: right .35s var(--ease);
}
.nav-main a:hover{ color: var(--text); }
.nav-main a:hover::after, .nav-main a.is-active::after{ right:0; }
.nav-main a.is-active{ color: var(--text); }
.header-actions{ display:flex; align-items:center; gap: var(--sp-3); }
.nav-toggle{ display:none; background:none; border:0; width:34px; height:26px; position:relative; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:''; position:absolute; left:0; right:0; height:2px; background: var(--ink); transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle::before{ top:0; }
.nav-toggle span{ top:50%; transform: translateY(-50%); }
.nav-toggle::after{ bottom:0; }
.nav-toggle.is-open::before{ top:50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle.is-open::after{ bottom:50%; transform: translateY(50%) rotate(-45deg); }
.nav-toggle.is-open span{ opacity:0; }
@media (max-width: 900px){
  .nav-main{
    position: fixed; inset: 0; top: 0;
    background: var(--ink);
    flex-direction: column; justify-content:center; align-items:flex-start;
    gap: var(--sp-4); padding: var(--sp-6) 8vw;
    transform: translateX(100%); transition: transform .5s var(--ease);
  }
  .nav-main.is-open{ transform: translateX(0); }
  .nav-main a{ color: var(--cream); font-size: var(--step-2); font-family: var(--font-display); text-transform:none; font-weight:500; letter-spacing:0; }
  .nav-toggle{ display:block; }
  .header-actions .btn-primary{ display:none; }
  .nav-main .btn{ margin-top: var(--sp-4); }
}
/* ---------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------- */
.hero{
  background:
    radial-gradient(ellipse 60% 55% at 85% 8%, rgba(var(--gold-rgb),.16), transparent 60%),
    var(--cream);
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--sp-8);
  overflow: hidden;
}
.hero .container{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items:center;
}
@media (max-width: 980px){ .hero .container{ grid-template-columns: 1fr; } }
.hero-eyebrow{ margin-bottom: var(--sp-3); }
.hero-title{ margin-bottom: var(--sp-4); }
.hero-title .script{ font-size: 1.15em; }
.hero-actions{ display:flex; gap: var(--sp-3); flex-wrap:wrap; margin-top: var(--sp-5); }
.hero-meta{ display:flex; gap: var(--sp-5); margin-top: var(--sp-6); flex-wrap:wrap; }
.hero-meta div{ font-size: var(--step--1); color: var(--text-soft); }
.hero-meta strong{ display:block; font-family: var(--font-display); font-size: var(--step-2); color: var(--text); font-weight:600; }
/* the emblem / plate visual replacing a hero photo */
.hero-emblem{ position:relative; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; }
.hero-emblem::before{
  content:''; position:absolute; inset:6%;
  border-radius:50%;
  background: radial-gradient(circle at 50% 38%, rgba(var(--gold-rgb),.22), transparent 68%);
  filter: blur(4px);
}
.emblem-ring{
  position:absolute; border-radius:50%; border:1px dashed rgba(var(--ink-rgb),.22);
  animation: spin 60s linear infinite;
}
.emblem-ring.r1{ inset: 0; }
.emblem-ring.r2{ inset: 9%; border-style: solid; border-color: rgba(var(--gold-rgb),.35); animation-duration: 90s; animation-direction: reverse; }
.emblem-ring.r3{ inset: 18%; border-color: rgba(var(--ink-rgb),.14); animation-duration: 120s; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.emblem-plate{
  position:absolute; inset: 24%;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--paper), var(--cream-deep));
  box-shadow: var(--shadow-lift), inset 0 0 0 1px rgba(var(--ink-rgb),.06);
  display:flex; align-items:center; justify-content:center;
}
.emblem-plate img{ width: 42%; opacity: .9; }
.emblem-tag{
  position:absolute; bottom: 4%; left:50%; transform: translateX(-50%);
  background: var(--ink); color: var(--cream);
  font-size: var(--step--1); font-weight:700; letter-spacing:.04em;
  padding: .6em 1.3em; border-radius: var(--radius-pill);
  display:flex; align-items:center; gap:.6em;
  box-shadow: var(--shadow-soft);
  white-space:nowrap;
}
.emblem-tag .dot{ width:7px; height:7px; border-radius:50%; background: var(--gold); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.15);} }
.steam{ position:absolute; top:-6%; left:50%; transform:translateX(-50%); width:70px; height:90px; opacity:.55; }
.steam path{ stroke: var(--gold); stroke-width:2; fill:none; stroke-linecap:round; }
.steam path.p1{ animation: rise 4.2s ease-in-out infinite; }
.steam path.p2{ animation: rise 4.2s ease-in-out .7s infinite; }
.steam path.p3{ animation: rise 4.2s ease-in-out 1.4s infinite; }
@keyframes rise{ 0%{ opacity:0; transform: translateY(6px) scaleY(.9);} 30%{opacity:.7;} 100%{ opacity:0; transform: translateY(-22px) scaleY(1.05);} }
/* ---------------------------------------------------------------------
   8. MARQUEE
   --------------------------------------------------------------------- */
.marquee{
  background: var(--ink); color: var(--gold-light);
  overflow:hidden; white-space:nowrap;
  border-block: 1px solid rgba(var(--gold-rgb),.25);
}
.marquee-track{ display:inline-flex; align-items:center; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track span{
  font-family: var(--font-display); font-style:italic; font-weight:400;
  font-size: var(--step-1);
  padding: .9em 1.6em;
  display:inline-flex; align-items:center; gap:1.6em;
}
.marquee-track span::after{ content:'✦'; font-style:normal; color: var(--gold); font-size:.7em; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform: translateX(-50%);} }
/* ---------------------------------------------------------------------
   9. IMAGE / VIDEO PLACEHOLDER FRAMES  (until real photography is supplied)
   --------------------------------------------------------------------- */
.frame{
  position:relative; border-radius: var(--radius-m); overflow:hidden;
  background: linear-gradient(155deg, var(--ink-soft), var(--ink));
  color: rgba(250,246,238,.82);
  display:flex; align-items:flex-end;
  min-height: 220px;
  isolation:isolate;
}
.frame::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(var(--gold-rgb),.25), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(var(--terracotta),.2), transparent 50%);
  opacity:.8;
}
.frame::after{
  content:''; position:absolute; inset:10px; border:1px solid rgba(250,246,238,.18); border-radius: calc(var(--radius-m) - 4px); pointer-events:none;
}
.frame-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); width:34px; height:34px; opacity:.55; }
.frame-label{
  position:relative; z-index:1; padding: 1.1rem 1.3rem;
  font-size: var(--step--1); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  display:flex; align-items:center; gap:.6em; width:100%;
}
.frame-label small{ display:block; font-weight:500; text-transform:none; letter-spacing:0; opacity:.65; font-size: .92em; margin-top:.15em; }
.frame.square{ aspect-ratio: 1/1; }
.frame.wide{ aspect-ratio: 16/10; }
.frame.tall{ aspect-ratio: 3/4; }
.frame.video .frame-icon{ width:44px; height:44px; }
/* Once a client uploads a real photo (Customizer or a Gallery Photo post)
   the placeholder icon/gradient step aside for the image + a caption scrim. */
.frame.has-image::before{ background: linear-gradient(to top, rgba(15,12,10,.78), rgba(15,12,10,0) 55%); z-index:1; }
.frame.has-image .frame-icon{ display:none; }
.frame-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.frame.has-image .frame-label{ z-index:2; display:none; }
/* ---------------------------------------------------------------------
   10. CARDS
   --------------------------------------------------------------------- */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--sp-5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: rgba(var(--gold-rgb),.4); }
.icon-badge{
  width:52px; height:52px; border-radius:50%;
  background: var(--cream-deep);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--sp-3);
}
.icon-badge svg{ width:24px; height:24px; stroke: var(--gold-dim); }
.feature-card h3{ font-family:var(--font-display); font-size: var(--step-2); font-weight:600; margin-bottom:.4em; }
.feature-card p{ color: var(--text-soft); }
/* menu item card */
.dish-card{ display:flex; flex-direction:column; height:100%; }
.dish-card .frame{ margin-bottom: var(--sp-4); }
.dish-card h3{ font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; }
.dish-card .price{ font-family: var(--font-display); color: var(--gold-dim); font-weight:600; white-space:nowrap; }
.dish-card-head{ display:flex; justify-content:space-between; gap: var(--sp-3); align-items:baseline; margin-bottom:.5em; }
.dish-card p{ color: var(--text-soft); }
.dish-tags{ display:flex; flex-wrap:wrap; gap:.4em; margin-top: var(--sp-3); }
.tag{
  font-size: .72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding: .35em .8em; border-radius: var(--radius-pill);
  background: var(--cream-deep); color: var(--ink-mute);
  border: 1px solid var(--line);
}
/* pricing / package tier card */
.tier-card{ display:flex; flex-direction:column; position:relative; }
.tier-card.is-featured{ border-color: var(--gold); box-shadow: var(--shadow-soft); }
.tier-card.is-featured::before{
  content:'Most Booked'; position:absolute; top:-13px; left: var(--sp-5);
  background: var(--gold); color: var(--ink);
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:.4em .9em; border-radius: var(--radius-pill);
}
.tier-card .eyebrow{ margin-bottom: var(--sp-2); }
.tier-card h3{ font-family: var(--font-display); font-size: var(--step-3); font-weight:600; margin-bottom:.3em; }
.tier-card .tier-price{ font-family:var(--font-display); font-size: var(--step-2); color: var(--gold-dim); margin-bottom: var(--sp-3); }
.tier-card .tier-price span{ font-family: var(--font-body); font-size: var(--step--1); color: var(--text-soft); font-weight:500;}
.tier-list{ display:flex; flex-direction:column; gap:.7em; margin: var(--sp-4) 0; flex:1; }
.tier-list li{ display:flex; gap:.7em; align-items:flex-start; color: var(--text-soft); font-size: var(--step--1); }
.tier-list svg{ flex:none; width:16px; height:16px; margin-top:.2em; stroke: var(--gold); }
/* testimonial */
.quote-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: var(--sp-6); position:relative;
}
.quote-card .mark{ font-family: var(--font-display); font-size: 3.6rem; color: var(--gold-light); line-height:1; display:block; margin-bottom:.1em; }
.quote-card blockquote{ font-family: var(--font-display); font-size: var(--step-1); font-style:italic; color: var(--text); font-weight:400; }
.quote-card figcaption{ margin-top: var(--sp-4); font-size: var(--step--1); color: var(--text-soft); font-weight:700; letter-spacing:.02em; }
.quote-card figcaption span{ display:block; font-weight:500; color: var(--gold-dim); text-transform:uppercase; letter-spacing:.08em; font-size:.85em; margin-top:.15em;}
/* numbered timeline item (about / process) */
.num-item{ display:flex; gap: var(--sp-4); }
.num-item .num{ font-family: var(--font-display); font-size: var(--step-3); color: var(--gold-light); font-weight:500; }
/* ---------------------------------------------------------------------
   11. FORMS
   --------------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:.5em; margin-bottom: var(--sp-4); }
.field label{ font-size: var(--step--1); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--text-soft); }
.field input, .field select, .field textarea{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .9em 1em;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb),.15);
}
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 640px){ .field-row{ grid-template-columns: 1fr; } .frame{ min-height: 170px !important;}  }
.form-note{ font-size: var(--step--1); color: var(--text-soft); }
.stepper{ display:flex; align-items:center; gap: .8em; }
.stepper button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background: var(--surface); font-size:1.1rem; font-weight:700; color: #e1ad51 !important; }
.stepper button:hover{ border-color: var(--gold); color: var(--gold-dim); }
.stepper output{ font-family: var(--font-display); font-size: var(--step-1); min-width: 1.4ch; text-align:center; }
/* builder preview (dynamic menu builder placeholder) */
.builder{
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius-l);
  padding: var(--sp-6);
  position:relative; overflow:hidden;
}
.builder::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 90% 0%, rgba(var(--gold-rgb),.22), transparent 55%);
  /* Decorative only. Without this, an absolutely-positioned, z-index:auto
     pseudo-element paints ABOVE normal in-flow content per the CSS stacking
     spec — regardless of how transparent it looks — silently swallowing
     every click on anything inside .builder (the availability calendar,
     its inputs, etc). Harmless while this box held no interactive content;
     became a real bug the moment the Custom Booking Engine became live. */
  pointer-events: none;
}
.builder-row{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  padding: var(--sp-3) 0; border-bottom: 1px solid rgba(250,246,238,.14);
  gap: var(--sp-3); flex-wrap:wrap;
}
.builder-row:last-of-type{ border-bottom:0; }
.builder-row-name{ font-family: var(--font-display); font-size: var(--step-1); }
.builder-row-name small{ display:block; font-family: var(--font-body); font-weight:400; color: rgba(250,246,238,.6); font-size: var(--step--1); margin-top:.2em; }
.builder-badge{
  display:inline-flex; align-items:center; gap:.5em; margin-top: var(--sp-5);
  font-size: var(--step--1); color: var(--gold-light); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.builder-badge .dot{ width:7px; height:7px; border-radius:50%; background: var(--gold); animation: pulse 2.4s ease-in-out infinite; }
/* Availability calendar ("Custom Booking Engine", Booking & Contact) */
.avail-layout{ display:grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-5); align-items:start; }
@media (max-width: 780px){ .avail-layout{ grid-template-columns: 1fr; } }
.avail-cal{ background: rgba(250,246,238,.04); border:1px solid rgba(250,246,238,.14); border-radius: var(--radius-m); padding: var(--sp-4); }
.avail-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--sp-3); font-family: var(--font-display); font-size: var(--step-1); color: var(--cream); }
.avail-nav{ background:none; border:1px solid rgba(250,246,238,.25); color: var(--cream); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: border-color .3s ease, background .3s ease; }
.avail-nav:hover{ border-color: var(--gold); background: rgba(250,246,238,.06); }
.avail-cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:.35rem; }
.avail-cal-grid .avail-dow{ font-size: .68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: rgba(250,246,238,.45); text-align:center; padding-bottom:.3rem; }
.avail-day{
  aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
  border-radius: 8px; font-size: var(--step--1); color: var(--cream);
  background: rgba(250,246,238,.05); border:1px solid transparent;
  cursor:pointer; transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.avail-day:hover{ border-color: rgba(var(--gold-rgb),.5); }
.avail-day.is-muted{ opacity:.28; pointer-events:none; }
.avail-day.is-past{ opacity:.32; cursor:not-allowed; text-decoration: line-through; text-decoration-color: rgba(250,246,238,.25); }
.avail-day.is-past:hover{ border-color: transparent; }
.avail-day.is-booked{ background: rgba(176,71,44,.32); color: rgba(250,246,238,.7); cursor:not-allowed; box-shadow: inset 0 0 0 1px rgba(176,71,44,.45); }
.avail-day.is-booked:hover{ border-color: rgba(176,71,44,.6); }
.avail-day.is-selected{ background: var(--gold); color: var(--ink); font-weight:700; border-color: var(--gold); }
.avail-cal-legend{ display:flex; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--step--1); color: rgba(250,246,238,.6); flex-wrap:wrap; }
.avail-cal-legend span{ display:inline-flex; align-items:center; gap:.4em; }
.avail-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.avail-dot--open{ background: rgba(250,246,238,.35); }
.avail-dot--booked{ background: var(--terracotta); }
.avail-dot--selected{ background: var(--gold); }
.avail-summary{ background: rgba(250,246,238,.04); border:1px solid rgba(250,246,238,.14); border-radius: var(--radius-m); padding: var(--sp-4); }
.avail-summary .field label{ color: rgba(250,246,238,.6); }
.avail-summary .field input:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb),.2); }
/* ---------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------- */
.site-footer{ background: var(--ink); color: rgba(250,246,238,.78); padding-top: var(--sp-8); }
.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var(--sp-6); padding-bottom: var(--sp-7); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand img{ height:44px; margin-bottom: var(--sp-3); }
.footer-brand p{ max-width: 32ch; color: rgba(250,246,238,.6); }
.footer-social{ display:flex; gap:.8em; margin-top: var(--sp-4); }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(250,246,238,.25); display:flex; align-items:center; justify-content:center; transition: background .3s ease, border-color .3s ease; }
.footer-social a:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer-social svg{ width:16px; height:16px; }
.footer-heading{ font-size: var(--step--1); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-light); margin-bottom: var(--sp-3); }
.footer-links{ display:flex; flex-direction:column; gap:.7em; }
.footer-links a:hover{ color: var(--gold-light); }
.footer-newsletter form{ display:flex; margin-top: var(--sp-3); border-bottom:1px solid rgba(250,246,238,.3); padding-bottom:.6em; }
.footer-newsletter input{ background:none; border:0; color:var(--cream); flex:1; padding:.4em 0; }
.footer-newsletter input::placeholder{ color: rgba(250,246,238,.45); }
.footer-newsletter button{ background:none; border:0; color: var(--gold-light); font-weight:700; }
.footer-bottom{
  border-top: 1px solid rgba(250,246,238,.14);
  margin-top: var(--sp-6);
  padding-block: var(--sp-4);
  display:flex; justify-content:space-between; gap: var(--sp-3); flex-wrap:wrap;
  font-size: var(--step--1); color: rgba(250,246,238,.5);
}
/* ---------------------------------------------------------------------
   13. MISC PAGE BITS
   --------------------------------------------------------------------- */
.page-hero{
  padding-block: clamp(3.5rem, 8vw, 6rem) var(--sp-7);
  background: linear-gradient(180deg, var(--cream-deep), var(--cream));
  text-align:center;
}
.page-hero .eyebrow{ justify-content:center; }
.page-hero .eyebrow::before{ display:none; }
.breadcrumb{ font-size: var(--step--1); color: var(--text-soft); margin-bottom: var(--sp-3); }
.breadcrumb a:hover{ color: var(--gold-dim); }
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } }
.split.reverse .split-media{ order: 2; }
@media (max-width: 900px){ .split.reverse .split-media{ order:0; } }
.stat-row{ display:flex; gap: var(--sp-6); flex-wrap:wrap; }
.stat{ min-width: 120px; }
.stat strong{ display:block; font-family: var(--font-display); font-size: var(--step-3); color: var(--gold-dim); }
.stat span{ font-size: var(--step--1); color: var(--text-soft); }
.table-clean{ width:100%; border-collapse: collapse; }
.table-clean th, .table-clean td{ text-align:left; padding: 1em .5em; border-bottom: 1px solid var(--line); }
.table-clean th{ font-size: var(--step--1); text-transform:uppercase; letter-spacing:.05em; color: var(--text-soft); font-weight:700; }
.cta-band{
  /*background: linear-gradient(135deg, var(--ink), var(--ink-soft));*/
  background: linear-gradient(135deg, #cbb7a3, #712900);
  color: var(--cream); border-radius: var(--radius-l);
  padding: var(--sp-7) clamp(1.5rem,5vw,4rem);
  text-align:center; position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 15% 20%, rgba(var(--gold-rgb),.25), transparent 45%), radial-gradient(circle at 85% 90%, rgba(176,71,44,.3), transparent 50%);
}
.cta-band > *{ position:relative; }
.cta-band .btn-row{ display:flex; justify-content:center; gap: var(--sp-3); flex-wrap:wrap; margin-top: var(--sp-5); }
.badge-row{ display:flex; gap: var(--sp-3); flex-wrap:wrap; margin-top: var(--sp-4); }
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid var(--line); border-radius: var(--radius-pill);
  padding:.5em 1em; font-size: var(--step--1); color: var(--text-soft); background: var(--surface);
}
.pill svg{ width:14px; height:14px; stroke: var(--gold-dim); }
.accordion-item{ border-bottom: 1px solid var(--line); }
.accordion-trigger{
  width:100%; background:none; border:0; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding: var(--sp-4) 0; font-family: var(--font-display); font-size: var(--step-1); font-weight:500;
}
.accordion-trigger .plus{ width:18px; height:18px; position:relative; flex:none; }
.accordion-trigger .plus::before, .accordion-trigger .plus::after{ content:''; position:absolute; background: var(--gold-dim); transition: transform .3s ease; }
.accordion-trigger .plus::before{ left:0; right:0; top:50%; height:2px; transform: translateY(-1px); }
.accordion-trigger .plus::after{ top:0; bottom:0; left:50%; width:2px; transform: translateX(-1px); }
.accordion-item.is-open .plus::after{ transform: translateX(-1px) rotate(90deg); opacity:0; }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.accordion-panel-inner{ padding-bottom: var(--sp-4); color: var(--text-soft); max-width: 62ch; }
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.gallery-grid .frame:nth-child(3n+1){ grid-row: span 2; }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } .gallery-grid .frame:nth-child(3n+1){ grid-row: span 1; } }
.socialstrip{ display:flex; align-items:center; gap: var(--sp-4); overflow-x:auto; padding-bottom: .5rem; }
.socialstrip .frame{ flex: none; width: 220px; }
/* utility */
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-0{ margin-top:0 !important; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.inline-icon{ width:1em; height:1em; vertical-align:-0.15em; margin-left:.2em; }
.is-disabled, [disabled]{ opacity:.45; pointer-events:none; }
code{ background: var(--cream-deep); padding:.15em .45em; border-radius:4px; font-size:.9em; }
@media (max-width: 640px){
  .section-pad{ padding-block: var(--sp-6); }
  .section-pad-sm{ padding-block: var(--sp-5); }
}