/* ==========================================================================
   Skyline Lounge & Bar — Design System
   Palette: Charcoal #17161A · Raised #1F1E21 · Cognac #8C4526
            Humidor #E4B36B · Ash #E4DED4 · Glass #B8C6C9 · Ember #E0512A
   Rules:   no gold/humidor lines anywhere · Ember is never a fill behind text
   ========================================================================== */

:root {
  --charcoal: #17161A;
  --raised:   #1F1E21;
  --raised-2: #26242A;
  --cognac:   #8C4526;
  --cognac-lt:#A95834;
  --humidor:  #E4B36B;
  --ash:      #E4DED4;
  --glass:    #B8C6C9;
  --ember:    #E0512A;

  --line:      rgba(228, 222, 212, .12);
  --line-soft: rgba(228, 222, 212, .07);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- type scale ---------- */
/* Floors are the phone sizes, maxima the desktop sizes. At >=1040px every one of
   these is pinned to its max, so lowering a floor cannot move desktop. */
.display   { font-size: clamp(2.25rem, 8.2vw, 6.1rem); letter-spacing: -.03em; }
.h1        { font-size: clamp(1.95rem, 5.6vw, 4rem); }
.h2        { font-size: clamp(1.45rem, 4vw, 2.9rem); }
.h3        { font-size: clamp(1.15rem, 2.1vw, 1.6rem); }
.lede      { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--glass); line-height: 1.7; max-width: 60ch; }
.muted     { color: var(--glass); }
.small     { font-size: .875rem; }

.eyebrow {
  font-size: .715rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--humidor);
  font-weight: 500;
  margin: 0 0 1.1rem;
  display: block;
}
.eyebrow--glass { color: var(--glass); }

.serif-em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--humidor); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 10vw, 140px); }
.section--tight { padding-block: clamp(52px, 7vw, 92px); }
.section--raised { background: var(--raised); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.grid { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 860px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--split { grid-template-columns: 0.92fr 1.08fr; align-items: center; }
  .grid--aside { grid-template-columns: 1fr 1.35fr; align-items: start; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .92em 1.7em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .8rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  cursor: pointer; transition: all .28s var(--ease);
  text-align: center;
}
.btn--primary { background: var(--cognac); color: #FBF7F1; }
.btn--primary:hover { background: var(--cognac-lt); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line); color: var(--ash); background: transparent; }
.btn--ghost:hover { border-color: rgba(228,222,212,.34); background: rgba(228,222,212,.05); }
.btn--ember { background: transparent; color: var(--ember); border-color: rgba(224,81,42,.45); }
.btn--ember:hover { border-color: var(--ember); background: rgba(224,81,42,.08); }
.btn--block { width: 100%; }
.btn--lg { padding: 1.1em 2.2em; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--ash); padding-bottom: 4px;
  border-bottom: 1px solid rgba(228,222,212,.25);
  transition: border-color .25s var(--ease), color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow:hover { color: #fff; border-color: rgba(228,222,212,.7); gap: .85em; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(23, 22, 26, .88);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line-soft);
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand__logo { display: block; height: 60px; width: auto; }
@media (max-width: 1039px) { .brand__logo { height: 44px; } }
.site-footer .brand__logo { height: 90px; }

.nav__links { display: none; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav__links a {
  font-size: .775rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 500;
  color: var(--glass); transition: color .22s var(--ease); position: relative; padding-block: 6px;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ash); }
.nav__links a { white-space: nowrap; }
.nav__cta { display: none; white-space: nowrap; }

.nav__toggle {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}

@media (min-width: 1000px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__toggle { display: none; }
}
.nav__toggle span { display: block; width: 17px; height: 1.5px; background: var(--ash); transition: transform .3s var(--ease), opacity .2s; }
.nav__toggle span + span { margin-top: 4px; }
@media (min-width: 1000px) { .nav__toggle { display: none; } }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 78px 0 0 0; z-index: 89;
  background: var(--charcoal);
  padding: 34px var(--gut) 40px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* A refined list, not a stack of headlines: small display serif, open tracking,
   and the 44px tap target comes from padding rather than type size. */
.mobile-menu a {
  font-family: var(--font-display); font-size: 1.12rem; line-height: 1.3;
  letter-spacing: .06em; padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
/* .mobile-menu a would otherwise win over .btn on specificity and render the
   CTA at display size, which wrapped it onto two lines. */
.mobile-menu .btn {
  margin-top: 26px; font-size: .78rem; line-height: 1.65;
  letter-spacing: .13em; min-height: 48px;
}
@media (min-width: 1000px) { .mobile-menu { display: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding-top: 120px; padding-bottom: clamp(48px, 7vw, 92px);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* Layer 1: always-present CSS atmosphere so the page is beautiful even before photos are added.
   Layer 2: optional photo — drop a file at assets/img/hero.jpg and it fades in on top. */
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 78% at 78% 8%,  rgba(140,69,38,.44) 0%, transparent 58%),
    radial-gradient(85% 60% at 12% 92%,  rgba(228,179,107,.13) 0%, transparent 62%),
    radial-gradient(60% 45% at 50% 40%,  rgba(224,81,42,.10) 0%, transparent 70%),
    linear-gradient(180deg, #1B1A1F 0%, #17161A 52%, #121115 100%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("../img/hero.jpg");
  background-size: cover; background-position: center;
  opacity: .42; mix-blend-mode: luminosity;
}
.hero__smoke {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 30%, rgba(228,222,212,.055), transparent 62%),
    radial-gradient(30% 38% at 76% 62%, rgba(184,198,201,.05), transparent 64%);
  filter: blur(22px);
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, 1%, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.08); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(18,17,21,.72) 0%, rgba(18,17,21,.18) 34%, rgba(18,17,21,.86) 100%);
}
.hero__inner { position: relative; z-index: 3; width: 100%; }
.hero__title { margin-bottom: 1.1rem; max-width: 15ch; }
.hero__title em { font-style: italic; color: var(--humidor); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--glass);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.1rem; }
.hero__actions .btn { min-width: 176px; }

@media (prefers-reduced-motion: reduce) {
  .hero__smoke { animation: none; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- page header (interior pages) ---------- */
/* padding-top must clear the fixed header: 173px on desktop since the restack, 102px on
   mobile. Keep a comfortable margin above it, not a hairline. */
.page-head {
  position: relative; padding-top: 214px; padding-bottom: clamp(44px, 6vw, 76px);
  background:
    radial-gradient(90% 120% at 82% 0%, rgba(140,69,38,.30) 0%, transparent 60%),
    linear-gradient(180deg, #1C1B20 0%, var(--charcoal) 100%);
  border-bottom: 1px solid var(--line-soft);
}
.page-head__title { max-width: 18ch; margin-bottom: 1rem; }

/* ---------- cards ---------- */
.card {
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 38px);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { border-color: rgba(228,222,212,.2); transform: translateY(-3px); }
.card__num {
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .2em;
  color: var(--cognac-lt); margin-bottom: 1.5rem; display: block;
}
.card__title { margin-bottom: .7rem; }
.card__foot { margin-top: auto; padding-top: 1.6rem; }

.lounge-card { position: relative; overflow: hidden; }
.lounge-card__img {
  aspect-ratio: 4 / 3; border-radius: var(--radius); margin-bottom: 1.6rem; position: relative; overflow: hidden;
  background:
    radial-gradient(75% 70% at 30% 22%, rgba(228,179,107,.15), transparent 62%),
    radial-gradient(85% 80% at 82% 88%, rgba(140,69,38,.4), transparent 66%),
    linear-gradient(145deg, #2E2730 0%, #1C1A1F 58%, #241C18 100%);
}
.lounge-card__img::after {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .9;
}
.lounge-card__img::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(70% 70% at 50% 40%, transparent 30%, rgba(18,17,21,.45) 100%);
}
.price {
  font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--ash);
}
.price span { font-family: var(--font-body); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--glass); margin-left: .45em; }

.badge {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  padding: .42em .85em; border-radius: 100px;
  border: 1px solid rgba(184,198,201,.28); color: var(--glass); background: transparent;
}
.badge--ember { color: var(--ember); border-color: rgba(224,81,42,.42); }
.badge--cognac { color: #D9A188; border-color: rgba(169,88,52,.5); }

/* ---------- feature strip ---------- */
.strip { border-block: 1px solid var(--line-soft); }
.strip__grid { display: grid; gap: 0; }
@media (min-width: 760px) { .strip__grid { grid-template-columns: repeat(3, 1fr); } }
.strip__item { padding: clamp(28px, 3.6vw, 46px) clamp(0px, 2.6vw, 34px); }
@media (min-width: 760px) {
  .strip__item + .strip__item { border-left: 1px solid var(--line-soft); }
}
@media (max-width: 759px) {
  .strip__item + .strip__item { border-top: 1px solid var(--line-soft); }
}
.strip__icon { color: var(--cognac-lt); margin-bottom: 1.1rem; }

/* ---------- editorial split ---------- */
.figure {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(70% 55% at 26% 18%, rgba(228,179,107,.16), transparent 60%),
    radial-gradient(90% 70% at 80% 92%, rgba(140,69,38,.42), transparent 64%),
    linear-gradient(160deg, #302830 0%, #1C1A1E 55%, #261D18 100%);
}
.figure::after {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center; opacity: .92;
}
.figure--room::after { background-image: url("../img/room.jpg"); }
.figure--bar::after { background-image: url("../img/bar.jpg"); }
.figure--coffee::after { background-image: url("../img/coffee.jpg"); }
.figure--humidor::after { background-image: url("../img/humidor.jpg"); }
.figure--member::after { background-image: url("../img/member-room.jpg"); }
.figure--social::after { background-image: url("../img/social-ps5.jpg"); }
.figure--cafe::after { background-image: url("../img/cafe-cup.jpg"); }
.figure__glow {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(60% 50% at 70% 25%, rgba(228,179,107,.16), transparent 68%);
}

/* ---------- menu list ---------- */
.menu-group + .menu-group { margin-top: clamp(40px, 5vw, 68px); }
.menu-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; flex-wrap: wrap; }
.menu-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.menu-item__name { font-family: var(--font-display); font-size: 1.08rem; color: var(--ash); }
.menu-item__desc { grid-column: 1 / -1; color: var(--glass); font-size: .9rem; max-width: 62ch; margin: 0; }
.menu-item__price { font-size: .95rem; color: var(--humidor); font-variant-numeric: tabular-nums; }

/* ---------- menu jump bar ---------- */
/* --hdr matches the fixed header. Mobile: utility 34 + nav 68 = 102. Desktop is two rows
   since the restack (logo above the nav) and measures 173px. If the header height changes,
   change this: the sticky jump bar's top and every scroll-margin-top on menu.html derive
   from it. */
:root { --hdr: 102px; --jumpbar-h: 46px; }
@media (min-width: 1040px) { :root { --hdr: 173px; } }

.jumpbar {
  position: sticky; top: var(--hdr); z-index: 80;
  background: rgba(23, 22, 26, .94);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
/* the rail spans the viewport, not the 1180px content wrapper — otherwise the last
   four names sit outside it even on a 1920px screen */
.jumpbar .wrap { max-width: none; }
.jumpbar__in {
  display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap;
  gap: 6px;
  height: var(--jumpbar-h);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.jumpbar__in::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* the scrollbar is hidden by design, so fade the edge when there really is more */
.jumpbar.is-scrollable .jumpbar__in {
  -webkit-mask-image: linear-gradient(90deg, #000 0 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 calc(100% - 34px), transparent 100%);
}
.jumpbar a {
  flex: 0 0 auto; white-space: nowrap;
  position: relative; padding: 0 10px; line-height: var(--jumpbar-h);
  font-size: .645rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
  color: var(--glass); transition: color .22s var(--ease);
}
.jumpbar a:hover { color: var(--ash); }
.jumpbar a.is-current { color: var(--ash); }
.jumpbar a.is-current::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px;
  height: 2px; border-radius: 2px; background: var(--cognac-lt);
}
/* group divider — muted line token, never humidor */
.jumpbar__sep { flex: 0 0 auto; width: 1px; height: 14px; background: var(--line); margin-inline: 7px; }

/* ---------- gallery ----------
   Editorial rather than a contact sheet: a six-column grid tiles span unevenly, with
   full-bleed frames breaking it between blocks. No borders, no shadows, no hover zoom. */
.gallery { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.6vw, 30px); }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(6, 1fr); align-items: start; } }

.g {
  display: block; width: 100%; padding: 0; border: 0; background: var(--raised-2);
  overflow: hidden; cursor: zoom-in; position: relative;
}
.g img { display: block; width: 100%; height: auto; }
.g:focus-visible { outline: 2px solid var(--cognac-lt); outline-offset: 3px; }

/* phone: one column, but the shapes still vary so it never reads as a stack */
.g--tall img     { aspect-ratio: 2 / 3;  object-fit: cover; }
.g--square img   { aspect-ratio: 1 / 1;  object-fit: cover; }
.g--wide img     { aspect-ratio: 16 / 9; object-fit: cover; }
.g--threetwo img { aspect-ratio: 3 / 2;  object-fit: cover; }

@media (min-width: 720px) {
  .g--tall     { grid-column: span 2; }
  .g--square   { grid-column: span 2; }
  .g--threetwo { grid-column: span 3; }
  .g--wide     { grid-column: span 4; }
  .g--six      { grid-column: span 6; }
  /* nudge a few tiles down so rows do not line up like a sheet */
  .g--drop     { margin-top: clamp(28px, 5vw, 86px); }
}

.gallery-bleed { display: block; width: 100%; padding: 0; border: 0; background: var(--raised-2); cursor: zoom-in; }
.gallery-bleed img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 719px) { .gallery-bleed img { aspect-ratio: 4 / 3; } }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  padding: clamp(14px, 4vw, 54px);
  background: rgba(12, 11, 14, .95);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__btn {
  position: absolute; background: transparent; border: 1px solid var(--line);
  color: var(--ash); border-radius: 999px; cursor: pointer;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.lightbox__btn:hover { border-color: rgba(228,222,212,.55); color: #fff; }
.lightbox__btn:focus-visible { outline: 2px solid var(--cognac-lt); outline-offset: 2px; }
.lightbox__close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lightbox__prev  { left: clamp(10px, 2.5vw, 26px); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: clamp(10px, 2.5vw, 26px); top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute; bottom: clamp(12px, 3vw, 28px); left: 50%; transform: translateX(-50%);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--glass);
}
body.has-lightbox { overflow: hidden; }

/* ---------- drinks lists ----------
   One item per line, centred, no markers. The bulleted .tier__list centred each
   line independently, so the dots landed at different x positions. */
.drinklist {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: .8rem;
  width: auto; max-width: none; text-align: center;
}
.drinklist li {
  margin: 0; padding: 0; position: static; list-style: none;
  font-family: var(--font-body); font-size: .95rem; line-height: 1.5; color: var(--ash);
}
.drinklist li::before, .drinklist li::marker { content: none; display: none; }
/* categories read as distinct blocks, one after another, in one centred column */
.has-jumpbar .menu-group {
  max-width: 44rem; margin-inline: auto;
  margin-top: clamp(64px, 8vw, 100px);
}
.has-jumpbar .menu-group__head { justify-content: center; }

/* jump targets clear the fixed header AND the sticky bar */
.has-jumpbar .menu-group[id],
.has-jumpbar .section[id] { scroll-margin-top: calc(var(--hdr) + var(--jumpbar-h) + 14px); }

/* ---------- membership tiers ---------- */
.tier { position: relative; }
.tier--featured { background: linear-gradient(170deg, #2A2126 0%, var(--raised) 46%); border-color: rgba(169,88,52,.4); }
.tier__price { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; margin: 1rem 0 .3rem; }
.tier__price span { font-family: var(--font-body); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--glass); }
.tier__list { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .75rem; }
.tier__list li { position: relative; padding-left: 1.55rem; font-size: .93rem; color: var(--glass); }
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cognac-lt);
}

/* ---------- forms ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: .5rem; align-content: start; }
.field--half { grid-column: span 1; }
@media (min-width: 680px) {
  .form--2 { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}
.label {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--glass); font-weight: 600;
}
.label .req { color: var(--ember); margin-left: .25em; }
.input, .select, .textarea {
  width: 100%;
  background: rgba(23,22,26,.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .82em 1em;
  color: var(--ash);
  font-size: .95rem;
  transition: border-color .22s var(--ease), background .22s var(--ease);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: rgba(184,198,201,.45); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: rgba(169,88,52,.75); background: rgba(31,30,33,.9);
  box-shadow: 0 0 0 3px rgba(140,69,38,.16);
}
.textarea { min-height: 120px; resize: vertical; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23B8C6C9' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.6em;
}
.select option { background: var(--raised); color: var(--ash); }

.choice-grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }
.choice {
  display: flex; align-items: flex-start; gap: .75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1rem; cursor: pointer; background: rgba(23,22,26,.5);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.choice:hover { border-color: rgba(228,222,212,.28); }
.choice input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  margin: .22rem 0 0; width: 17px; height: 17px; flex-shrink: 0; cursor: pointer;
  border: 1px solid rgba(228,222,212,.34); border-radius: 3px;
  background: rgba(23,22,26,.8);
  display: grid; place-content: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.choice input[type="checkbox"]::before {
  content: ""; width: 9px; height: 9px; transform: scale(0);
  transition: transform .15s var(--ease);
  background: #FBF7F1;
  clip-path: polygon(14% 45%, 0 60%, 39% 100%, 100% 22%, 84% 8%, 37% 70%);
}
.choice input[type="checkbox"]:checked { background: var(--cognac); border-color: var(--cognac-lt); }
.choice input[type="checkbox"]:checked::before { transform: scale(1); }
.choice:has(input:checked) { border-color: rgba(169,88,52,.7); background: rgba(140,69,38,.1); }
.choice__label { font-size: .9rem; line-height: 1.4; }
.choice__meta { display: block; font-size: .78rem; color: var(--glass); }

.form-note { font-size: .82rem; color: var(--glass); }
.form-status { border-radius: var(--radius); padding: 1rem 1.15rem; font-size: .92rem; display: none; }
.form-status.is-visible { display: block; }
.form-status--ok { background: rgba(140,69,38,.16); border: 1px solid rgba(169,88,52,.5); color: var(--ash); }
.form-status--err { background: rgba(224,81,42,.1); border: 1px solid rgba(224,81,42,.45); color: #F2A98F; }

/* ---------- reserve layout ---------- */
/* the summary column stays in view on wide screens only — on phones it would slide over the form */
@media (min-width: 900px) { .sticky-aside { position: sticky; top: 104px; } }
/* Below 860px the form and the summary stack. Left alone, the summary sits ABOVE the fields
   (the aside comes first visually via its inline order), so the price is out of sight when the
   guest commits. Here the form and aside dissolve into the grid (display: contents) and their
   children are ordered: fields → "Your reservation" → submit → Questions. Visual only — the
   DOM order, tab order and screen-reader order are unchanged. Desktop is not touched. */
@media (max-width: 859px) {
  .res-layout { gap: 20px; }
  .res-layout > .form, .res-layout > aside { display: contents; }
  .res-layout > .form > * { order: 1; }
  .res-layout > aside > .summary { order: 2; }
  .res-layout > .form > .field--submit { order: 3; }
  .res-layout > aside > .card { order: 4; margin-top: 0 !important; }
}
/* 680–859px: the form's two-column field pairs live on the outer grid now */
@media (min-width: 680px) and (max-width: 859px) {
  .res-layout { grid-template-columns: 1fr 1fr; }
  .res-layout > aside > *, .res-layout .form-status { grid-column: 1 / -1; }
}
.summary {
  background: var(--raised); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
}
.summary__row { display: flex; justify-content: space-between; gap: 16px; padding: .6rem 0; font-size: .92rem; border-bottom: 1px solid var(--line-soft); }
.summary__row:last-of-type { border-bottom: 0; }
.summary__row span:first-child { color: var(--glass); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.summary__total strong { font-family: var(--font-display); font-size: 1.85rem; font-weight: 500; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-soft); }
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 1.35rem 0; text-align: left;
  font-family: var(--font-display); font-size: 1.08rem; color: var(--ash);
}
.faq__q::after { content: "+"; font-size: 1.35rem; color: var(--glass); flex-shrink: 0; transition: transform .3s var(--ease); font-family: var(--font-body); }
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__a { display: none; padding-bottom: 1.5rem; color: var(--glass); max-width: 70ch; }
.faq__item.is-open .faq__a { display: block; }

/* ---------- CTA band ---------- */
.band {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2B1D18 0%, #1C1A1E 55%, #241A16 100%);
  border-block: 1px solid var(--line-soft);
}
.band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 20% 50%, rgba(140,69,38,.4), transparent 62%);
}
.band > * { position: relative; }

/* ---------- footer ---------- */
.site-footer { background: #121115; padding-block: clamp(56px, 7vw, 84px) 0; border-top: 1px solid var(--line-soft); }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 780px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__h { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--glass); margin: 0 0 1.1rem; font-family: var(--font-body); font-weight: 600; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .92rem; }
.footer__list a { color: var(--glass); transition: color .2s; }
.footer__list a:hover { color: var(--ash); }
.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px); padding-block: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: .8rem; color: rgba(184,198,201,.65);
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- utilities ---------- */
.stack-sm > * + * { margin-top: .75rem; }
.stack > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 2.6rem; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.max-60 { max-width: 60ch; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--cognac); color: #fff; padding: .7em 1.2em; border-radius: var(--radius);
  transition: top .2s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--humidor); outline-offset: 3px; border-radius: 2px; }

/* ==========================================================================
   v2 — Sip'Stroke-pattern components
   ========================================================================== */

:root {
  --cream: #EFE9DE;
  --cream-2: #E4DED4;
  --ink: #17161A;
}

/* ---------- utility bar ---------- */
.utility {
  background: #121115;
  border-bottom: 1px solid var(--line-soft);
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--glass);
}
.utility__in { display: flex; align-items: center; justify-content: center; gap: 10px 26px; height: 34px; flex-wrap: wrap; }
.utility__in > * { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.utility a:hover { color: var(--ash); }
.utility__hide { display: none; }
@media (min-width: 760px) { .utility__hide { display: inline-flex; } }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--glass); flex-shrink: 0; }
.dot--open { background: #7FD1A8; box-shadow: 0 0 0 3px rgba(127,209,168,.16); }
.dot--closed { background: var(--ember); box-shadow: 0 0 0 3px rgba(224,81,42,.14); }

/* ---------- centred header ---------- */
.site-header--center .utility { position: relative; z-index: 2; }
.site-header--center.is-stuck .utility { background: transparent; border-bottom-color: transparent; }
.site-header--center .nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; gap: 18px;
}
.nav__side { display: none; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.nav__side--right { justify-content: flex-end; }
.nav__side a {
  font-size: .745rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
  color: var(--glass); white-space: nowrap; transition: color .22s var(--ease);
}
.nav__side a:hover, .nav__side a[aria-current="page"] { color: var(--ash); }
.brand--center { justify-content: center; grid-column: 2; }
.nav__mobile { display: flex; justify-content: flex-end; grid-column: 3; }
@media (min-width: 1040px) {
  .nav__side { display: flex; }
  .nav__mobile { display: none; }
  /* Desktop only: logo centred on its own row, navigation centred beneath it.
     Below 1040px the mobile header is untouched. */
  .site-header--center .nav {
    grid-template-columns: auto auto;
    grid-template-areas:
      "brand brand"
      "left  right";
    justify-content: center;
    align-items: center;
    height: auto;
    padding-block: 16px 14px;
    row-gap: 12px;
    column-gap: clamp(14px, 1.9vw, 30px);
  }
  .site-header--center .brand--center { grid-area: brand; justify-content: center; }
  .site-header--center .nav__side:not(.nav__side--right) { grid-area: left;  justify-content: flex-end; }
  .site-header--center .nav__side--right { grid-area: right; justify-content: flex-start; }
}
@media (max-width: 1039px) {
  .site-header--center .nav { grid-template-columns: auto 1fr auto; height: 68px; }
  .brand--center { grid-column: 1; justify-content: flex-start; }
  .nav__mobile { grid-column: 3; }
}
.mobile-menu { inset-block-start: 102px; }
@media (min-width: 1040px) { .mobile-menu { inset-block-start: 173px; } }

/* ---------- hero caption ---------- */
.hero__caption {
  margin-top: 1.8rem; font-size: .69rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(184,198,201,.72);
}
.hero__caption strong { color: var(--humidor); font-weight: 500; }

/* ---------- announcement strip ---------- */
.announce { background: var(--raised); border-bottom: 1px solid var(--line-soft); }
.announce__in { padding-block: clamp(26px, 3.4vw, 44px); }
.announce__line {
  font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.72rem);
  line-height: 1.3; margin: 0 0 .6rem; max-width: 46ch;
}
.announce__line em { font-style: italic; color: var(--humidor); }
.announce__fine { font-size: .78rem; color: rgba(184,198,201,.7); margin: 0; max-width: 62ch; }
.announce__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.4rem; }
.btn--pill { border-radius: 100px; padding: .55em 1.15em; font-size: .7rem; }

/* ---------- full-bleed quote band ---------- */
.quoteband {
  position: relative; min-height: clamp(360px, 46vw, 560px);
  display: grid; place-items: center; overflow: hidden; text-align: center;
}
.quoteband__bg { position: absolute; inset: 0; }
.quoteband__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 70% at 24% 20%, rgba(228,179,107,.16), transparent 62%),
    radial-gradient(90% 80% at 78% 84%, rgba(140,69,38,.5), transparent 66%),
    linear-gradient(150deg, #2C2430 0%, #1A181C 56%, #281E18 100%);
}
.quoteband__bg::after {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center; opacity: .66;
}
.quoteband--one .quoteband__bg::after { background-image: url("../img/band-quote.jpg"); }
.quoteband--late .quoteband__bg::after { background-image: url("../img/band-late.jpg"); }
.quoteband--rooms .quoteband__bg::after { background-image: url("../img/band-rooms.jpg"); }
.quoteband--whatson .quoteband__bg::after { background-image: url("../img/band-whatson.jpg"); }
.quoteband--pour .quoteband__bg::after { background-image: url("../img/band-pour.jpg"); }
.quoteband--home .quoteband__bg::after { background-image: url("../img/band-home.jpg"); }
.quoteband--cafe .quoteband__bg::after { background-image: url("../img/band-cafe.jpg"); }
.quoteband__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,17,21,.62), rgba(18,17,21,.46) 50%, rgba(18,17,21,.74));
}
.quoteband__in { position: relative; z-index: 2; padding-block: clamp(54px, 7vw, 92px); }
.quoteband__q {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 3.2vw, 2.5rem); line-height: 1.32;
  max-width: 21ch; margin-inline: auto; letter-spacing: -.01em;
}
.quoteband__who {
  margin-top: 1.6rem; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(184,198,201,.75);
}
.quoteband__title { font-family: var(--font-display); font-size: clamp(1.6rem, 4.6vw, 3.4rem); line-height: 1.1; }
.quoteband__title em { font-style: italic; color: var(--humidor); }

/* ---------- 3-up photo showcase ---------- */
.showcase { display: grid; gap: 16px; }
@media (min-width: 820px) { .showcase { grid-template-columns: repeat(3, 1fr); } }
.shot {
  position: relative; display: block; overflow: hidden; border-radius: 6px;
  aspect-ratio: 3 / 4; isolation: isolate;
  background:
    radial-gradient(70% 55% at 28% 18%, rgba(228,179,107,.16), transparent 60%),
    radial-gradient(90% 70% at 80% 92%, rgba(140,69,38,.45), transparent 64%),
    linear-gradient(160deg, #302830 0%, #1C1A1E 55%, #261D18 100%);
}
.shot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  transition: transform .8s var(--ease);
}
.shot:hover::before { transform: scale(1.045); }
.shot--social::before    { background-image: url("../img/room-social.jpg"); }
.shot--private::before   { background-image: url("../img/room-private.jpg"); }
.shot--signature::before { background-image: url("../img/room-signature.jpg"); }
.shot--private-2::before { background-image: url("../img/room-private-2.jpg"); }
.shot--humidor::before   { background-image: url("../img/humidor.jpg"); }
.shot--bar::before       { background-image: url("../img/bar.jpg"); }
.shot--coffee::before    { background-image: url("../img/coffee.jpg"); }
.shot--detail::before    { background-image: url("../img/detail-pour.jpg"); }
.shot--lockers::before   { background-image: url("../img/lockers.jpg"); }
.shot__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(16,15,18,.5) 66%, rgba(16,15,18,.9) 100%);
}
.shot__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 2vw, 24px); }
.shot__cap h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin-bottom: .3rem; }
.shot__cap p { font-size: .82rem; color: rgba(228,222,212,.78); margin: 0; }
.shot__tag {
  position: absolute; top: clamp(14px, 1.8vw, 20px); left: clamp(14px, 1.8vw, 20px);
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  padding: .38em .8em; border-radius: 100px;
  background: rgba(18,17,21,.6); border: 1px solid rgba(228,222,212,.2); color: var(--ash);
  backdrop-filter: blur(6px);
}

/* ---------- cream section ---------- */
.section--light {
  background: var(--cream);
  color: var(--ink);
}
.section--light .lede,
.section--light .muted { color: #5A5450; }
.section--light .eyebrow { color: var(--cognac); }
.section--light .h2, .section--light .h3 { color: var(--ink); }
.section--light .serif-em, .section--light .h2 em { color: var(--cognac); font-style: italic; }
.section--light .tier__list li { color: #5A5450; }
.section--light .tier__list li::before { background: var(--cognac); }
.section--light .btn--ghost { border-color: rgba(23,22,26,.26); color: var(--ink); }
.section--light .btn--ghost:hover { border-color: var(--ink); background: rgba(23,22,26,.05); }
.section--light .link-arrow { color: var(--ink); border-bottom-color: rgba(23,22,26,.3); }
.section--light .link-arrow:hover { color: var(--cognac); border-bottom-color: var(--cognac); }
.section--light .figure {
  background: linear-gradient(160deg, #D8CFC2 0%, #C4B8A8 55%, #C9B49F 100%);
}
.section--light .figure__glow { background: radial-gradient(60% 50% at 70% 25%, rgba(255,255,255,.4), transparent 68%); }

/* ---------- menu teaser cards ---------- */
.teaser { display: grid; gap: 16px; }
@media (min-width: 820px) { .teaser { grid-template-columns: repeat(3, 1fr); } }
.teaser__card {
  border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(228,222,212,.022);
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.teaser__card:hover { border-color: rgba(228,222,212,.26); background: rgba(228,222,212,.045); }
.teaser__num { font-size: .64rem; letter-spacing: .2em; color: var(--cognac-lt); margin-bottom: 1.4rem; }
.teaser__card h3 { font-size: 1.16rem; margin-bottom: .6rem; }
.teaser__card p { font-size: .87rem; color: var(--glass); }
.teaser__meta {
  margin-top: auto; padding-top: 1.4rem;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(184,198,201,.72);
}

/* ---------- centred pull quote ---------- */
.pull { text-align: center; }
.pull__q {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 1.95rem); line-height: 1.42;
  max-width: 28ch; margin: 0 auto; color: var(--ash);
}
.pull__who {
  margin-top: 1.5rem; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(184,198,201,.7);
}

/* ---------- location block ---------- */
.locale { display: grid; gap: 0; align-items: stretch; }
@media (min-width: 900px) { .locale { grid-template-columns: 1.05fr 1fr; } }
.locale__map { position: relative; overflow: hidden; min-height: 320px; background: var(--raised-2); }
.locale__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05) brightness(.82); }

/* The map iframe is injected by IntersectionObserver shortly before the block scrolls
   into view (see main.js, v2 IIFE). Until then this is just a dark panel — no placeholder
   graphic, no prompt. */

.locale__panel { background: var(--raised); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.locale__addr { font-family: var(--font-display); font-size: clamp(1.3rem, 2.8vw, 2.15rem); line-height: 1.16; }
.locale__city { display: block; font-style: italic; color: var(--humidor); }
.hourlist, .eventlist { list-style: none; margin: 1.9rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .55rem; }
.hourlist li, .eventlist li { display: flex; justify-content: space-between; gap: 18px; font-size: .88rem; }
.hourlist li span:first-child, .eventlist li span:first-child { color: var(--glass); }
.hourlist li[data-today] span { color: var(--humidor); }
.locale__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2rem; }

/* ---------- newsletter ---------- */
.signup { text-align: center; }
.signup__form { max-width: 520px; margin: 2rem auto 0; display: grid; gap: 14px; text-align: left; }
.signup__row { display: grid; gap: 10px; }
@media (min-width: 560px) { .signup__row { grid-template-columns: 1fr 1fr; } }
.signup .choice { background: transparent; }
.signup .btn { justify-self: center; min-width: 190px; }

/* ---------- misc v2 ---------- */
.section--flush { padding-block: 0; }
.wide { max-width: 1340px; }
.head-center { text-align: center; max-width: 54ch; margin: 0 auto clamp(34px, 4.4vw, 56px); }
.head-center .lede { margin-inline: auto; }
.h2 em { font-style: italic; color: var(--humidor); }

/* ---------- photographic page heads ---------- */
.page-head--photo { position: relative; overflow: hidden; padding-top: 232px; padding-bottom: clamp(56px, 7vw, 92px); }
@media (max-width: 1039px) {
  .page-head { padding-top: 150px; }
  .page-head--photo { padding-top: 168px; }
}
.page-head--photo::before {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center; opacity: .5;
}
.page-head--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,17,21,.82) 0%, rgba(18,17,21,.42) 46%, rgba(18,17,21,.9) 100%);
}
.page-head--photo > * { position: relative; z-index: 2; }
.ph-lounges::before    { background-image: url("../img/head-lounges.jpg"); }
.ph-social::before     { background-image: url("../img/head-social.jpg"); }
.ph-membership::before { background-image: url("../img/head-membership.jpg"); }
.ph-menu::before       { background-image: url("../img/head-menu.jpg"); }
.ph-reserve::before    { background-image: url("../img/head-reserve.jpg"); }
.ph-contact::before    { background-image: url("../img/head-contact.jpg"); }
.ph-events::before     { background-image: url("../img/head-events.jpg"); }
.ph-whatson::before    { background-image: url("../img/head-whatson.jpg"); }
.ph-cafe::before       { background-image: url("../img/head-cafe.jpg"); }

/* ---------- centred text (site-wide) ----------
   Public pages centre their text. Forms, the menu list, the reservation summary,
   the FAQ rows and the header/nav stay left. /admin uses admin.css, not this file. */
body { text-align: center; }

/* centred paragraphs keep a ~60ch measure and sit in the middle of their column */
p { max-width: 60ch; margin-inline: auto; }
.lede, .max-60, .hero__title, .page-head__title, .announce__line, .announce__fine { margin-inline: auto; }

/* flex rows don't follow text-align (the unclassed button rows are inline-styled flex-wrap divs) */
.hero__actions, .hero__meta, .announce__acts, .locale__acts,
div[style*="flex-wrap:wrap"], .site-footer .brand { justify-content: center; }

/* bulleted lists: centre the list as a block, keep bullets and text aligned */
.tier__list { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }

/* stay left — centring breaks these */
.site-header, .mobile-menu,
.form, .menu-group, .summary, .faq { text-align: left; }
.form p, .menu-group p, .summary p, .faq p { margin-inline: 0; }

/* ---------- four lounge cards: one row on desktop, 2×2 on tablets, stacked on phones ---------- */
@media (min-width: 600px) { .showcase--4, .teaser--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .showcase--4, .teaser--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- private events ---------- */
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(28px, 5vw, 64px); margin: 2.6rem 0 0; }
.stats div { display: flex; flex-direction: column; align-items: center; }
.stats dt { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 2.2rem); line-height: 1; color: var(--ash); }
.stats dd { margin: .55rem 0 0; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--glass); }
.steps { display: grid; gap: 16px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step__num { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--humidor); margin-bottom: 1rem; }
.step .h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.form-note--warn { color: var(--ember); }

/* ---------- phones: display type that carries no clamp ----------
   These sizes are fixed, so they can only come down for phones inside a media
   query. Appended last so it wins the cascade over the base rules above.
   Nothing here applies at >=600px, so desktop is untouched. */
@media (max-width: 599px) {
  .tier__price { font-size: 1.95rem; }
  .summary__total strong { font-size: 1.5rem; line-height: 1.15; }
  .price { font-size: 1.6rem; }
  .step__num { font-size: 1.4rem; }
  /* display serif inheriting body's 1.65 reads loose at phone sizes */
  .faq__q, .menu-item__name { line-height: 1.35; }
}

/* ---------- gallery rhythm on phones ----------
   One column of identical full-width tiles read as a single-file stack. Below
   720px the grid becomes two columns so a tile can take one of three roles:
   full (span 2), pair (span 1, two to a row) and inset (span 2 with margin
   either side), repeating full -> pair -> inset -> full. Gaps are tight inside
   a pair and wide between groups so it reads as sections rather than a list.
   The two .gallery-bleed frames already sit outside .wrap and run edge to edge.
   Desktop is untouched: every rule here is inside the max-width query. */
@media (max-width: 719px) {
  .gallery { grid-template-columns: repeat(2, 1fr); column-gap: 8px; row-gap: 16px; }
  .gallery > .g { grid-column: span 2; }
  .gallery > .g--m-pair { grid-column: span 1; }
  /* a pair needs one shared ratio or the two tiles end at different heights */
  .g--m-pair img { aspect-ratio: 3 / 4; }
  /* .g sets width:100%, which keeps the full column width and pushes the tile
     over the right gutter, so an inset has to size to its area minus the margins */
  .gallery > .g--m-inset { margin-inline: 40px; width: auto; }
  /* both members of a paired group carry this, or the row would sit crooked */
  .g--m-group { margin-top: 30px; }
}

/* ---------- member card (membership.html; reused by the member portal) ----------
   Credit-card proportions on a 3D stage. Its hue follows the day of the week (--card-hue,
   set by main.js). The edge is Cognac, never Humidor. Under reduced motion it is still. */
.mcard-stage {
  --card-hue: 28;
  container-type: inline-size;
  width: min(100%, 420px); margin-inline: auto; perspective: 1100px;
}
.mcard-float { animation: mcard-float 7s ease-in-out infinite; }
.mcard {
  --rx: 0deg; --ry: 0deg;
  position: relative; overflow: hidden; aspect-ratio: 1.586; border-radius: 4.4cqi;
  padding: 6cqi 6.5cqi; color: var(--ash); text-align: left; font-size: 14px; font-size: 3.5cqi;
  background:
    radial-gradient(110% 90% at 88% 6%, hsl(var(--card-hue) 46% 34% / .85), transparent 62%),
    radial-gradient(80% 70% at 0% 100%, rgba(140,69,38,.28), transparent 70%),
    linear-gradient(140deg, hsl(var(--card-hue) 28% 17%), var(--charcoal) 78%);
  border: 1px solid rgba(169,88,52,.55);
  box-shadow: 0 34px 60px -24px rgba(0,0,0,.75), 0 12px 24px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(228,222,212,.08);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background 1.2s ease;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; column-gap: 4cqi;
}
.mcard::after {   /* the slow shine */
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(228,222,212,.13) 50%, transparent 58%);
  transform: translateX(-70%); animation: mcard-shine 8s ease-in-out infinite;
}
.mcard > * { position: relative; z-index: 1; }
.mcard__top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.mcard__logo { height: 11cqi; width: auto; }
.mcard__live { display: inline-flex; align-items: center; gap: .5em; font-size: .72em; letter-spacing: .18em; text-transform: uppercase; color: var(--glass); }
.mcard__dot { width: .6em; height: .6em; border-radius: 50%; background: #7FD1A8; box-shadow: 0 0 0 0 rgba(127,209,168,.6); animation: mcard-pulse 2s ease-out infinite; }
.mcard__now { align-self: end; }
.mcard__time { font-family: var(--font-display); font-size: 2.15em; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mcard__day { margin-top: .35em; font-size: .78em; letter-spacing: .2em; text-transform: uppercase; color: var(--humidor); }
.mcard__qr { grid-column: 2; grid-row: 2 / 4; align-self: end; width: 29cqi; aspect-ratio: 1; border-radius: 1.6cqi; overflow: hidden; background: var(--ash); }
.mcard__qr svg { display: block; width: 100%; height: 100%; }
.mcard__qr rect { fill: var(--ash); }
.mcard__qr path { fill: var(--charcoal); }
.mcard__who { align-self: end; padding-top: 1em; }
.mcard__name { display: block; font-family: var(--font-display); font-size: 1.32em; line-height: 1.15; }
.mcard__meta { display: block; margin-top: .4em; font-size: .68em; letter-spacing: .16em; text-transform: uppercase; color: var(--glass); }
.mcard__code { display: block; margin-top: .25em; font-size: .78em; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ash); }
.mcard-caption { max-width: 46ch; margin: 2.2rem auto 0; color: var(--glass); }
.mcard-demo { display: inline-block; margin-top: .9rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--glass); opacity: .75; }
@keyframes mcard-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mcard-shine { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
@keyframes mcard-pulse { 0% { box-shadow: 0 0 0 0 rgba(127,209,168,.55); } 70%, 100% { box-shadow: 0 0 0 .6em rgba(127,209,168,0); } }
@media (prefers-reduced-motion: reduce) {
  .mcard-float, .mcard__dot { animation: none; }
  .mcard::after { display: none; }
  .mcard { transform: none; transition: none; }
}

/* ---------- membership benefits: the three reasons to join, then the extras ---------- */
.perks { display: grid; gap: 16px; }
@media (min-width: 860px) { .perks { grid-template-columns: repeat(3, 1fr); } }
.perk { text-align: center; align-items: center; }
.perk__num { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--humidor); margin-bottom: 1rem; }
.perk .h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.perk p { color: var(--glass); margin: 0; }
.perk p + p { margin-top: .6rem; }
.extras { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 680px) { .extras { grid-template-columns: repeat(3, 1fr); } }
.extra { text-align: center; padding: 1.2rem 1rem; border-radius: var(--radius-lg); background: rgba(31,30,33,.6); border: 1px solid var(--line-soft); }
.extra strong { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; color: var(--ash); }
.extra span { font-size: .88rem; color: var(--glass); }
.extras-note { text-align: center; margin-top: 1.4rem; }

/* ---------- member portal (member.php) and member scan (v.php) ---------- */
.portal-body { background: var(--charcoal); }
.portal-top { display: flex; justify-content: center; padding: 18px 16px 0; }
.portal-top img { height: 52px; width: auto; }
.portal-foot { text-align: center; color: var(--glass); font-size: .8rem; padding: 32px 16px 44px; }
.portal-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .portal-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.portal-h { margin-bottom: 1rem; text-align: center; }
.portal-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.portal-facts div { background: var(--charcoal); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 16px; text-align: center; }
.portal-facts span { display: block; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--glass); margin-bottom: .4rem; }
.portal-facts strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(.98rem, 4.2vw, 1.12rem); white-space: nowrap; }
.portal-facts .is-ok { color: #7FD1A8; }
.portal-facts .is-off { color: var(--ember); }
.portal-bks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.portal-bk { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); text-align: left; font-size: .9rem; }
.portal-bk__when { font-variant-numeric: tabular-nums; }
.portal-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.4rem; }
.portal-acts form { margin: 0; }
.portal-cancel { width: 100%; max-width: 440px; }
.portal-cancel summary { list-style: none; cursor: pointer; }
.portal-cancel summary::-webkit-details-marker { display: none; }
.portal-cancel[open] summary { margin-bottom: 1rem; }
.portal-cancel p { margin: 0 0 1rem; }

/* the verification view — shown to anyone scanning a live card, and to staff with more */
.verify { text-align: center; }
.verify__state { font-family: var(--font-display); font-size: clamp(3rem, 16vw, 4.6rem); line-height: 1; margin: .2rem 0 1rem; letter-spacing: .02em; text-transform: uppercase; }
.verify__state--ok { color: #7FD1A8; }
.verify__state--off { color: var(--ember); }
.verify__name { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; margin: 0; }
.verify__code { color: var(--glass); margin: .5rem 0 1.4rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.verify__perks { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 8px; max-width: 420px; text-align: left; }
.verify__perks li { padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--raised); font-size: .92rem; }
.verify__staff { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); text-align: left; }
.verify__staff-h { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--glass); margin: 0 0 .6rem; }
.verify__staff dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 0 0 1rem; font-size: .9rem; }
.verify__staff dt { color: var(--glass); }
.verify__staff dd { margin: 0; }
.verify__visits { list-style: none; margin: 0; padding: 0; font-size: .86rem; color: var(--glass); }
.verify__visits span { opacity: .7; }
.verify__more { margin: 1rem 0 0; font-size: .86rem; }
/* member states — RENEWAL DUE must read differently from ACTIVE and LAPSED at a glance */
.verify__state--active { color: #7FD1A8; }
.verify__state--due { color: var(--humidor); }
.verify__state--lapsed, .verify__state--cancelled { color: var(--ember); }
.portal-facts .is-active { color: #7FD1A8; }
.portal-facts .is-due { color: var(--humidor); }
.portal-facts .is-lapsed, .portal-facts .is-cancelled { color: var(--ember); }
.mcard__live--due .mcard__dot { background: var(--humidor); animation: none; box-shadow: none; }
.mcard__live--lapsed .mcard__dot, .mcard__live--cancelled .mcard__dot { background: var(--ember); animation: none; box-shadow: none; }