/* ============================================
   Batmandir Theatre — shared stylesheet
   Light, editorial — white / orange / black
   ============================================ */

/* iOS safe-area handling — when wrapped in WKWebView (Capacitor) or
   installed as a PWA, content can extend behind the notch / home
   indicator. These rules push interactive chrome away from those zones
   while letting backgrounds bleed all the way to the edges. */
@supports (padding: max(0px)) {
  .site-header {
    padding-top:   env(safe-area-inset-top);
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .site-footer {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
  }
  .bottom-tabs,
  #bottom-tabs,
  .tab-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Drawers and modals that slide from the right need the inset on the
     right edge so content isn't clipped by the curved corner. */
  .nav.is-open,
  .drawer-panel {
    padding-right: env(safe-area-inset-right);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,300;9..144,0,400;9..144,0,500;9..144,1,300;9..144,1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --bg: #ffffff;
  --bg-alt: #faf7f2;
  --bg-elevated: #ffffff;
  --ink: #0a0a0a;
  --ink-muted: #6b6b6b;
  --rule: rgba(10, 10, 10, 0.10);
  --rule-strong: rgba(10, 10, 10, 0.22);
  --accent: #ff6b35;
  --accent-warm: #ff8551;
  --max: 1280px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

/* ========== Layout ========== */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
}

/* Edge-to-edge horizontal rule utility. Any element inside .wrap can
   render a full-bleed 1px line at its top OR bottom by adding a class:
     .rule-top    → line at top, full viewport width
     .rule-bottom → line at bottom, full viewport width
   Useful for section dividers that should ignore .wrap's max-width and
   side padding so all rules across the site read consistently. */
.rule-top, .rule-bottom { position: relative; }
.rule-top::before, .rule-bottom::after {
  content: '';
  position: absolute;
  left: calc(-50vw + 50%);
  width: 100vw;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}
.rule-top::before    { top: 0; }
.rule-bottom::after  { bottom: 0; }

/* Replace native <hr> with the same full-bleed line. Standard <hr>
   rendering varies across browsers and was inconsistent with the rest
   of the site. */
hr {
  position: relative;
  border: 0;
  height: 1px;
  background: transparent;
  margin: 24px 0;
}
hr::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-50vw + 50%);
  width: 100vw;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}

/* ========== Header ========== */

/* Member chrome was rolled back — kept only the .member-header/footer
   selectors as no-op stubs so any leftover injected elements don't
   show up. The marketing .site-header now serves all users. */
.member-header, .member-footer { display: none !important; }

/* Inline header sign-in form — visible to signed-out visitors on every
   page. data-auth-only="out" toggles the [hidden] attr; the
   [hidden] rule below hides it for signed-in users. */

/* Site-wide hamburger-left + Reserve-right header arrangement. Injected
   by /app/site-chrome.js so all pages share the same chrome. The
   hamburger toggle inside .header-actions is hidden — the canonical
   instance lives in #hamburger-left at the start of the wrap.

   No margin-right: auto here — .films-link already carries that, which
   pushes .header-actions to the far right. With this slot un-flexed
   the hamburger sits flush against the brand mark on the left. */
.site-header .wrap { position: relative; }
#hamburger-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.header-actions > .nav-icon-btn.toggle { display: none !important; }
.header-actions .reserve-cta {
  height: 36px;
  padding: 0 18px;
  letter-spacing: 0.18em;
  font-size: 11px;
}
@media (max-width: 720px) {
  .header-actions .reserve-cta { padding: 0 12px; font-size: 10px; height: 32px; }
}

/* iPhone-fit header: at <=480px the row carries up to six elements
   (hamburger, brand mark, films camera, today/admin pill, R, star pill).
   Collapse the Reserve CTA from a wide pill ("Reserve") to a single
   character ("R") in a compact square — visually a sibling of the
   star/films icon rather than a pill — so the whole row fits inside
   the iPhone safe-area width without horizontal overflow. */
@media (max-width: 480px) {
  .site-header .wrap { gap: 6px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .brand svg { height: 26px !important; }
  .brand-mark .star { width: 12px !important; }
  .brand-mark { gap: 6px !important; }
  .films-link { width: 28px !important; height: 28px !important; }
  .films-link svg { width: 18px !important; height: 18px !important; }
  .header-actions { gap: 6px !important; }
  .header-actions .reserve-cta {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    justify-content: center !important;
  }
  .auth-icon.is-signed-out, .auth-icon.is-signed-in {
    min-height: 32px !important;
  }
  .auth-icon.is-signed-out { width: 32px !important; height: 32px !important; }
  .auth-icon.is-signed-out svg { width: 18px !important; height: 18px !important; }
  .auth-icon.is-signed-in { padding: 2px 8px !important; }
  .auth-icon.is-signed-in svg.auth-rainbow-star { width: 18px !important; height: 18px !important; }
  /* Today / Admin pills are hidden by default for normal members; when
     they show for staff/admin, shrink their padding so they stay
     compact alongside the R + star. */
  .today-pill, .admin-pill {
    padding: 4px 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }
  .nav-icon-btn { width: 32px !important; height: 32px !important; }
  .nav-icon-btn svg { width: 18px !important; height: 18px !important; }
}

/* Small video-camera link injected by nav.js next to the BATMANDIR
   wordmark. The site-header .wrap is justify-content: space-between, so
   without a push we'd land in the middle of the header. margin-right:
   auto pushes everything after us (header-actions) to the far right,
   keeping the films link snug next to the brand mark on the left. */
.films-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  /* margin-left removed — the wrap gap handles spacing now. The
     auto-margin-right still pushes .header-actions to the far right. */
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.films-link svg { width: 22px; height: 22px; }
.films-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 480px) {
  .films-link { width: 30px; height: 30px; }
  .films-link svg { width: 20px; height: 20px; }
}

.site-header {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  /* Sticky-pin site-wide. -webkit-sticky kept as a fallback for
     legacy iOS WKWebView; modern iOS treats it as an alias. The
     env(safe-area-inset-top) lets the header anchor below the
     Dynamic Island in Capacitor without depending on pwa.js
     running first (defensive — if pwa.js fails to load due to
     stale SW cache, this base rule still works). !important
     guards against any per-page CSS that accidentally re-sets
     position to relative/static. */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: env(safe-area-inset-top, 0) !important;
  background: #ffffff;
  /* No backdrop-filter — it creates a containing block for fixed
     descendants and breaks the drawer's hit testing. */
  z-index: 50;
}

/* ── PWA / iOS-standalone footer trim ─────────────────────────────
   Native-feeling apps don't need a column-nav footer or a push-
   notifications upsell card — both are reachable via the hamburger
   drawer + bottom tab bar instead. Hide them when the shell is
   installed/Capacitor; web visitors at batmandir.com still see
   the full footer + push-diag upsell. Achir 2026-05-05. */
html.pwa-standalone .footer-grid,
html.pwa-standalone #push-diag,
html.pwa-standalone .pd-strip {
  display: none !important;
}

/* ── PWA / iOS-standalone bottom-fixed clearance ─────────────────
   The bottom tab bar is rendered fixed at bottom: 0 with height
   ~64px + safe-area-inset-bottom. Sticky-to-bottom modals and
   floating panels (the request-room confirm bar, the food cart
   panel + pill, etc.) need to sit ABOVE the tab bar or the user
   sees their Confirm/Continue button clipped. Single rule that
   targets every known fixed-bottom UI element. Achir 2026-05-05. */
html.pwa-standalone .confirm-bar,
html.pwa-standalone .cart-panel,
html.pwa-standalone .cart-pill {
  bottom: calc(64px + env(safe-area-inset-bottom)) !important;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  /* Tight packing on the left — hamburger | brand | films sit close.
     .films-link's margin-right: auto pushes .header-actions to the
     far right regardless of auth state. */
  gap: 8px;
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  color: var(--ink);
  flex-shrink: 0;
}

/* overflow: visible lets the wordmark text extend slightly beyond
   the viewBox if the fallback font (Georgia) is wider than Fraunces,
   so the leading B never gets clipped. flex-shrink: 0 prevents the
   header siblings from squeezing the brand mark. */
.brand svg { height: 38px; width: auto; flex-shrink: 0; overflow: visible; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-mark .star {
  width: 18px;
  height: auto;
  flex-shrink: 0;
  display: inline-block;
}

.brand-mark .star img { display: block; width: 100%; height: auto; }

/* Brand-mark star pulses gently for members with an active villa
   stay. The body.has-active-stay class is set by app/auth-icon.js
   after it confirms the member has a confirmed/requested booking
   that overlaps today. We only animate the inner <img> so the parent
   span layout doesn't shift. Single smooth grow-and-shrink — no
   opacity flicker — at a relaxed pace (5.5s, ease-in-out). */
body.has-active-stay .brand .star img,
body.has-active-stay .brand-mark .star img {
  animation: brand-star-pulse 5.5s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
@keyframes brand-star-pulse {
  0%   { transform: scale(1);    }
  25%  { transform: scale(1.45); }
  75%  { transform: scale(0);    }
  100% { transform: scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  body.has-active-stay .brand .star img,
  body.has-active-stay .brand-mark .star img { animation: none; }
}

/* Unified drawer — slides in from the LEFT (matches hamburger
   button position), capped width, white bg. On mobile, the cap is
   the viewport width minus a thin gap. The .drawer-grid inside is a
   flex-column with role-grouped sections.
   Flipped right→left 2026-05-04 per Achir. */
.nav {
  display: none;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: auto;
  width: min(440px, calc(100vw - 24px));
  background: var(--bg);
  z-index: 90;
  box-shadow: 16px 0 40px rgba(0, 0, 0, 0.18);
  border-right: 1px solid var(--rule);
  padding: calc(96px + env(safe-area-inset-top, 0px)) 28px calc(48px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* PWA / iOS standalone: the bottom tab bar (64px + safe-area-inset-
   bottom) sits over the drawer's bottom edge, so we need to reserve
   that space in the drawer's padding-bottom — otherwise the last
   items (Contact us, FAQ) are hidden behind the tabs and the drawer
   doesn't scroll past them. Standalone-only because web browsers
   without the tab bar don't need the extra clearance. Achir
   2026-05-06. */
html.pwa-standalone .nav {
  padding-bottom: calc(64px + 48px + env(safe-area-inset-bottom, 0px));
}
.nav.open { display: block; }
@media (max-width: 540px) {
  /* Narrow phones: 92vw panel, left-anchored. */
  .nav { width: 92vw !important; padding-left: 22px; padding-right: 22px; }
}

.nav a {
  color: var(--ink-muted);
  transition: color 0.2s ease;
  position: relative;
  white-space: nowrap;
}

/* Hide the in-nav signout link on desktop — logged-in users use the
   AK auth pill (which leads to /me where signout lives). The link
   stays in the mobile drawer for tap access. */
@media (min-width: 901px) {
  .nav a[data-action="signout"] { display: none !important; }
}

.nav a:hover,
.nav a.active {
  color: var(--ink);
}

.nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--accent);
}

.nav-cta {
  padding: 10px 20px;
  background: var(--accent);
  color: var(--bg) !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}

.nav-cta:hover { background: var(--accent-warm); color: var(--bg) !important; }

/* Dropdown */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown > .nav-trigger {
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.nav-dropdown > .nav-trigger.active,
.nav-dropdown:hover > .nav-trigger {
  color: var(--ink);
}
.nav-dropdown > .nav-trigger.active::after {
  content: '';
  position: absolute;
  left: 0; right: 16px; bottom: 0;
  height: 1px;
  background: var(--accent);
}
.nav-dropdown .caret {
  font-size: 10px;
  opacity: 0.7;
}
.nav-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 8px 0;
  margin-top: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.nav-menu a:hover {
  color: var(--ink);
  background: var(--bg-alt);
}
.nav-menu a.active {
  color: var(--ink);
}
.nav-menu a.active::after { display: none; }
.nav-menu .menu-divider {
  height: 1px;
  background: var(--rule);
  margin: 6px 0;
}

/* Header tools — date is always visible; hamburger toggle only on mobile */
.nav-tools {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.header-date {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  opacity: 0.7;
}
.nav-icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-icon-btn svg { width: 22px; height: 22px; }
.nav-icon-btn.toggle .icon-x { display: none; }
.nav-icon-btn.toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Auth pill — separate from main nav. Always visible (mobile + desktop).
   Logged out → "Sign in" with accent (orange) background.
   Logged in  → bordered pill with user icon + initials.
   Pinned to the right of the header via .nav-tools order below. */
.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  min-width: 40px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.auth-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Star fills most of the pill in BOTH states (rainbow when signed in,
   solid orange when signed out) so the silhouette is consistent. */
.auth-icon svg.auth-rainbow-star { width: 28px; height: 28px; }
.auth-icon.is-signed-in svg.auth-rainbow-star { width: 28px; height: 28px; }
.auth-icon .auth-initials {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
}
/* Category name (e.g. "Orion", "Betelgeuse") shown next to the
   rainbow star. Override the parent .auth-icon uppercase so the
   label reads mixed-case ("Orion" not "ORION") — uppercase + the
   parent letter-spacing was making "Orion" overflow the pill at
   iPhone width and rendering as "ORIO". Mixed case is also closer
   to the profile-page pill treatment for visual consistency. */
.auth-icon .auth-tier-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
}

/* Logged-out: transparent pill — the orange star itself is the CTA. */
.auth-icon.is-signed-out {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}
.auth-icon.is-signed-out:hover {
  border-color: var(--accent);
}
.auth-icon.is-signed-out .auth-label { display: none; }

/* Active-stay pulse — both star and pill pulse so the cue is visible
   from across the room. Respects prefers-reduced-motion. */
@keyframes auth-icon-pulse {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.10); opacity: 0.85; }
  100% { transform: scale(1);    opacity: 1; }
}
.auth-icon.has-active-stay svg.auth-rainbow-star {
  animation: auth-icon-pulse 1.6s ease-in-out infinite;
  transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
  .auth-icon.has-active-stay svg.auth-rainbow-star {
    animation: none;
  }
}

/* Logged-in: subtle bordered pill */
.auth-icon.is-signed-in {
  background: transparent;
  color: var(--ink);
}
.auth-icon.is-signed-in:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Admin pill — sits next to the auth pill in nav-tools, only when admin. */
.admin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-pill:hover {
  background: var(--accent);
  color: var(--bg);
}

/* Staff pill — green-tinted, sits next to Admin (or alone for staff users). */
.staff-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid #1e7a34;
  color: #1e7a34;
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.staff-pill:hover {
  background: #1e7a34;
  color: #ffffff;
}
.staff-pill[hidden] { display: none !important; }

/* Chef pill — purple-tinted, sits next to Staff/Admin. Visible to chefs. */
.chef-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid #6b3fa0;
  color: #6b3fa0;
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.chef-pill:hover {
  background: #6b3fa0;
  color: #ffffff;
}
.chef-pill[hidden] { display: none !important; }

/* Today pill — operational dashboard for kitchen-staff/chef/admin. */
.today-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.today-pill:hover {
  background: var(--ink);
  color: #ffffff;
}
.today-pill[hidden] { display: none !important; }

/* Auth dropdown — opens under the auth icon when logged-in user clicks. */
#auth-dropdown {
  /* 2026-05-08: bumped 1000 -> 10020 to clear the sticky bottom-tabs
     (z-index 1001 on iOS PWA) and the pull-to-refresh overlay
     (10010). At 1000 the dropdown opened but rendered BEHIND those
     fixed elements on mobile, so tapping the AR chip looked like a
     no-op even though the menu was technically present in the DOM. */
  z-index: 10020;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
#auth-dropdown[hidden] { display: none !important; }
#auth-dropdown .auth-dd-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
  transition: background 0.12s ease;
}
#auth-dropdown .auth-dd-item:hover {
  background: rgba(255, 107, 53, 0.06);
}
#auth-dropdown .auth-dd-label {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -0.005em;
  font-weight: 400;
}
#auth-dropdown .auth-dd-sub {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
#auth-dropdown .auth-dd-signout {
  border-top: 1px solid var(--rule);
  margin-top: 4px;
  color: var(--accent);
  font-weight: 600;
}
#auth-dropdown .auth-dd-signout:hover {
  background: rgba(255, 107, 53, 0.10);
}

/* Push nav-tools to the right on desktop, after the nav links. */
.site-header .wrap .nav-tools { order: 2; margin-left: auto; }
.site-header .wrap .nav { order: 1; }

/* Author rules with explicit display: ___ override the user-agent default
   for the [hidden] attribute. Restore it globally so el.hidden = true works. */
[hidden] { display: none !important; }

/* ── Hero CTA: logged-out stack and logged-in status ─────────────────── */
.hero-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.btn.btn-hero {
  padding: 22px 44px !important;
  font-size: 16px !important;
  letter-spacing: 0.14em;
}
.hero-cta-secondary {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.hero-cta-secondary span {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

.hero-status .hero-status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 540px;
}
.hero-status-card {
  padding: 20px 22px;
  border: 1px solid var(--rule);
  background: rgba(255, 107, 53, 0.05);
}
.hero-status-card .label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.hero-status-card .value {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 4px;
}
.hero-status-card .sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .hero-status .hero-status-row { grid-template-columns: 1fr; }
  .btn.btn-hero { padding: 18px 32px !important; font-size: 15px !important; }
}

@media (max-width: 820px) {
  .nav-icon-btn { display: inline-flex; }
  .header-date { font-size: 10px; letter-spacing: 0.14em; }

  /* Tighten header so brand + date + auth-icon + hamburger all fit on iPhone. */
  .site-header { padding: 14px 0 !important; }
  .site-header .wrap { gap: 10px !important; }
  .nav-tools { gap: 8px !important; }
  .brand svg { height: 32px !important; }
  .brand-mark { gap: 8px !important; }
  .brand-mark .star { width: 14px !important; }
  /* Mobile auth-icon: signed-out keeps the compact 38x38 square so it
     looks like a single icon button. Signed-in needs to fit BOTH the
     rainbow star AND the tier label (S0…S4.3) — let it auto-size in
     width with a min-height for tap target. */
  .auth-icon.is-signed-out { width: 38px !important; height: 38px !important; padding: 0 !important; }
  .auth-icon.is-signed-out svg { width: 22px !important; height: 22px !important; }
  .auth-icon.is-signed-in {
    width: auto !important;
    min-height: 38px !important;
    padding: 4px 12px !important;
    gap: 6px !important;
  }
  .auth-icon.is-signed-in svg.auth-rainbow-star { width: 22px !important; height: 22px !important; }
  .auth-icon .auth-tier-label { font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; }
  /* On mobile, collapse the signed-out pill to a circular icon so the
     "Sign in" label can't overflow the header. The signed-in pill keeps
     its initials + icon — they fit naturally. */
  .auth-icon.is-signed-out {
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .auth-icon.is-signed-out .auth-label { display: none !important; }
  .nav-icon-btn { width: 38px !important; height: 38px !important; }
  .nav-icon-btn svg { width: 20px !important; height: 20px !important; }

  /* On very narrow phones, hide the date label to keep the icons visible. */
  @media (max-width: 380px) {
    .header-date { display: none !important; }
  }

  /* Sticky header on mobile, with the backdrop blur removed so a
     position:fixed-or-overflow drawer below isn't trapped by it. */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg) !important;
    z-index: 100;
  }

  /* Mobile nav: LEFT-side slide-in panel — never full-width.
     Flipped right→left 2026-05-04 per Achir (matches the
     hamburger button's top-left position). */
  .nav {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 380px !important;
    max-width: 92vw !important;
    max-height: none !important;
    background: var(--bg) !important;
    border-right: 1px solid var(--rule) !important;
    border-left: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    /* Push content below the sticky header (~80px on mobile + safe-area). */
    padding: calc(80px + env(safe-area-inset-top, 0px)) 24px calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 90;
    box-shadow: 12px 0 36px rgba(0, 0, 0, 0.20);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav.open { display: flex !important; }

  /* Plain links inside the drawer */
  .nav > a:not(.nav-cta) {
    display: block !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink) !important;
  }
  .nav a.active::after { display: none; }
  .nav > a.active:not(.nav-cta) { color: var(--accent) !important; }

  /* Stay-with-Us dropdown becomes a flat group on mobile */
  .nav-dropdown {
    display: block !important;
    position: static !important;
  }
  .nav-dropdown > .nav-trigger {
    display: block !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink) !important;
  }
  .nav-dropdown > .nav-trigger .caret { display: none; }
  .nav-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .nav-menu a {
    padding: 14px 0 14px 20px !important;
    font-size: 16px;
    color: var(--ink-muted) !important;
    border-bottom: 1px solid var(--rule);
  }
  .nav-menu .menu-divider { display: none; }

  /* Join CTA inside drawer */
  .nav a.nav-cta {
    display: block !important;
    margin-top: 24px !important;
    padding: 18px 24px !important;
    background: var(--accent) !important;
    color: var(--bg) !important;
    text-align: center;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
  }

  /* Hamburger ↔ X icon swap when open (.menu-open is set on body by nav.js) */
  body.menu-open .nav-icon-btn.toggle .icon-bars { display: none; }
  body.menu-open .nav-icon-btn.toggle .icon-x { display: block; }

  body.menu-open { overflow: hidden; }
}

/* ========== Typography ========== */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* ========== Hero ========== */

.hero {
  padding: 140px 0 120px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255, 107, 53, 0.08), transparent 60%),
    var(--bg);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}

.hero h1 {
  font-size: clamp(56px, 9vw, 132px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: 36px;
  font-weight: 300;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}

.hero-meta .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.hero-meta .value {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
}

@media (max-width: 640px) {
  .hero { padding: 88px 0 72px; }
  .hero-meta { grid-template-columns: 1fr; gap: 28px; }
}

/* ========== Page Header ==========
   Top padding tightened 100px → 20px on 2026-05-04 per Achir — the
   ~100px gap between the sticky site-header and the eyebrow/headline
   was empty whitespace on every content page (films, stay, contact,
   etc.). Bottom padding stays 80px so the headline still has breathing
   room above the page body. Single source — applies to all 47 pages
   that use this class. */

.page-head {
  padding: 20px 0 80px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255, 107, 53, 0.06), transparent 55%),
    var(--bg);
}

.page-head h1 {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

/* ========== Section ========== */

/* Editorial top-level page sections get the 100px hero padding. */
section { padding: 100px 0; }

/* Compact bucket-list sections (admin tables, directory groupings,
   anything that's a list-of-rows under a small header) opt out of
   the editorial hero padding. These nest deep inside .ta-page /
   .tm-page and need to butt against each other tightly.
   ADD ANY NEW COMPACT SECTION CLASS HERE so the global rule above
   doesn't reintroduce 100px gaps. (Bug history: Achir hit this on
   /t-admin 2026-05-05 — sections rendered with ~100px between the
   last row and the next header.) */
section.tm-section,
section.ta-section { padding: 0; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.section-head p {
  max-width: 40ch;
  color: var(--ink-muted);
}

/* ========== Pillar grid ========== */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pillar {
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  padding: 40px 32px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.pillar:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.pillar .num {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.pillar h3 {
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 12px;
}

.pillar p {
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ========== Marquee strip ========== */

.marquee {
  background: var(--bg);
  padding: 88px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

/* Tiny s1-orange star tile — reusable across decorative strips
   (marquee borders, footer top, etc). 50x14 viewBox with one ~7x9px
   star centered. URL-encoded SVG so it works as a CSS background. */
:root {
  --star-tile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 14'><g transform='translate(21.47 2.5) scale(0.01755)'><polygon fill='%23ff6b35' points='402.44,195.87 196.49,195.87 132.85,0 69.2,195.87 0,195.87 0,295.22 29.87,316.92 0,408.86 0,488.26 132.85,391.74 299.46,512.79 235.82,316.92 402.44,195.87'/></g></svg>");
}

.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background: var(--star-tile) 0 50% / 50px 14px repeat-x;
  opacity: 0.9;
}

.marquee::before { top: 0; }
.marquee::after { bottom: 0; }

.marquee h2 {
  color: var(--ink);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 300;
  max-width: 24ch;
  margin-bottom: 20px;
}

.marquee p {
  max-width: 56ch;
  color: var(--ink-muted);
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
}

/* ========== Villa gallery ========== */

.villa-section {
  padding: 0;
  background: var(--bg);
}

.villa-hero {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 460px;
  overflow: hidden;
}

.villa-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.villa-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, 0.7));
  pointer-events: none;
}

.villa-hero-text {
  position: absolute;
  left: 0; right: 0; bottom: 56px;
  z-index: 2;
  color: var(--bg);
}

.villa-hero-text .eyebrow {
  color: var(--accent);
  margin-bottom: 16px;
}

.villa-hero-text .eyebrow::before {
  background: var(--accent);
}

.villa-hero-text h2 {
  color: var(--bg);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 16ch;
}

.villa-hero-text h2 em { font-style: italic; color: var(--accent); }

.villa-meta {
  padding: 80px 0 48px;
  background: var(--bg);
}

.villa-meta-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.villa-meta-grid .lede {
  max-width: 100%;
}

.villa-meta-grid ul {
  list-style: none;
  padding: 0;
  margin-top: 32px;
}

.villa-meta-grid li {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}

.villa-meta-grid li span:first-child {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.villa-meta-grid li span:last-child {
  font-family: var(--serif);
  color: var(--ink);
}

.villa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-bottom: 96px;
}

.villa-grid figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-alt);
}

.villa-grid figure.span-2 {
  grid-column: span 2;
}

.villa-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.villa-grid figure:hover img {
  transform: scale(1.04);
}

@media (max-width: 820px) {
  .villa-meta-grid { grid-template-columns: 1fr; gap: 32px; }
  .villa-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}

/* ========== Villa page ========== */

.villa-gallery-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 0;
}

.villa-gallery-full figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-alt);
}

.villa-gallery-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.villa-gallery-full figure:hover img {
  transform: scale(1.04);
}

@media (max-width: 720px) {
  .villa-gallery-full { grid-template-columns: repeat(2, 1fr); gap: 3px; }
}

.villa-detail {
  padding: 96px 0;
}

.villa-detail .split {
  align-items: start;
}

.villa-detail h2 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 24px;
}

.villa-detail h2 em { font-style: italic; color: var(--accent); }

.villa-detail dl {
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}

.villa-detail dl > div {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.villa-detail dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.villa-detail dd {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}

/* Villa preview cards on home page */
.villa-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.villa-cards a.villa-card {
  display: block;
  color: inherit;
  transition: opacity 0.2s ease;
}

.villa-cards a.villa-card:hover { opacity: 0.92; }

.villa-cards .thumb {
  aspect-ratio: 4/3;
  background: var(--bg-alt);
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
}

.villa-cards .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.villa-cards a.villa-card:hover .thumb img { transform: scale(1.03); }

.villa-cards h3 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.villa-cards h3 em { font-style: italic; color: var(--accent); }

.villa-cards .villa-meta-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.villa-cards p {
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 50ch;
}

.villa-cards .arrow-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

@media (max-width: 720px) {
  .villa-cards { grid-template-columns: 1fr; gap: 56px; }
}

/* ========== Programming list ========== */

.program-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.program-row {
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: padding 0.2s ease;
}

.program-row:hover { padding-left: 12px; }

.program-row .date {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent);
  font-weight: 400;
}

.program-row .title-block h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 4px;
}

.program-row .title-block .meta {
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
}

.program-row .runtime {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.program-row .ticket-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink-muted);
}

@media (max-width: 720px) {
  .program-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .program-row .ticket-pill { justify-self: start; }
}

/* ========== CTA / Buttons ========== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  background: var(--accent-warm);
  transform: translateY(-1px);
}

.btn.outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}

.btn.outline:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn .arr {
  width: 14px; height: 14px;
  transition: transform 0.2s ease;
}

.btn:hover .arr { transform: translate(2px, -2px); }

/* ========== Info grid ========== */

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.info-block .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.info-block h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 10px;
  color: var(--ink);
}

.info-block p, .info-block li {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.7;
}

.info-block ul { list-style: none; }
.info-block li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--rule);
}

@media (max-width: 820px) {
  .info-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ========== Waitlist form ========== */

.waitlist {
  background: var(--bg-alt);
  padding: 96px 0;
  border-top: 1px solid var(--rule);
}

.waitlist-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  padding: 56px 48px;
}

.form-field { margin-bottom: 20px; }

.form-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(138, 146, 163, 0.6);
}

@media (max-width: 640px) {
  .waitlist-card { padding: 40px 24px; }
}

/* ========== FAQ ========== */

.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

.faq-item h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 10px;
  color: var(--ink);
}

.faq-item p { color: var(--ink-muted); }

/* ========== About / story ========== */

.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.story h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.story p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

.story p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  float: left;
  margin: 4px 12px 0 0;
  color: var(--accent);
}

@media (max-width: 820px) {
  .story { grid-template-columns: 1fr; gap: 32px; }
}

/* ========== Footer ========== */

.site-footer {
  /* Top of footer = row of tiny orange stars (no grey rule, no
     empty whitespace band beneath). The pseudo-element below
     paints just the stars; padding-top is kept tight so the star
     ribbon flows directly into the BATMANDIR brand mark below.
     (Achir 2026-05-06 — the previous design had a grey hairline
     through the middle of the ribbon plus 28px of empty space
     beneath it which made the home page look unfinished.) */
  border-top: 0;
  padding: 18px 0 18px;
  font-size: 13px;
  color: var(--ink-muted);
  background: var(--bg);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  pointer-events: none;
  background:
    /* Tiny orange stars repeating across full width — no grey rule */
    var(--star-tile) 0 50% / 50px 14px repeat-x;
}

/* Single-line footer brand row — wordmark on the left, italic blurb to
   its right. Sits above the link-column grid with a clean rule
   separating it from the body of the page. */
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.footer-brand-row .brand-mark { flex-shrink: 0; }
.footer-brand-row p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-muted);
  line-height: 1.45;
}
@media (max-width: 720px) {
  .footer-brand-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 12px;
  }
  .footer-brand-row p { font-size: 12px; }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 18px;
}

.footer-grid h4 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.footer-grid a { display: block; padding: 2px 0; }
.footer-grid a:hover { color: var(--ink); }

.footer-brand p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 300;
  max-width: 38ch;
  margin-top: 18px;
  color: var(--ink-muted);
}

.footer-bottom {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  /* Full-bleed top rule that extends viewport-edge to viewport-edge,
     even though .footer-bottom sits inside .site-footer .wrap with its
     max-width/padding. Pseudo-element trick: position absolute, span
     100vw centered on the element. */
  position: relative;
}
.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-50vw + 50%);
  width: 100vw;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}

.footer-bottom .copyright-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  gap: 24px;
}
.footer-bottom .copyright-row > :first-child { justify-self: start; }
.footer-bottom .copyright-row > :last-child  { justify-self: end; }

.star-strip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  text-decoration: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.star-strip:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.star-strip img {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .star-strip { gap: 10px; }
  .star-strip img { height: 18px; }
  .footer-bottom .copyright-row {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
    justify-items: center;
  }
  /* Override the desktop justify-self: start/end so EVERY child centres
     when the row collapses to a single column — including the star-strip
     in the middle slot. */
  .footer-bottom .copyright-row > :first-child,
  .footer-bottom .copyright-row > :last-child,
  .footer-bottom .copyright-row > .star-strip { justify-self: center; }
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ─── Footer brand block (bottom — replaces the old top brand row +
   bottom copyright row, consolidating into one centered block at
   the very bottom of the footer per the 2026-05-04 reorg). ────── */
.footer-brand-bottom {
  margin-top: 36px;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  position: relative;
}
.footer-brand-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-50vw + 50%);
  width: 100vw;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}
.footer-brand-bottom .footer-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.footer-brand-bottom .footer-brand-mark .star {
  width: 18px;
  height: auto;
  flex-shrink: 0;
  display: inline-block;
}
.footer-brand-bottom .footer-brand-mark .star img {
  width: 100%;
  height: auto;
  display: block;
}
.footer-brand-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 56ch;
  margin: 0;
}

/* Five-star nomeimporta link — restored 2026-05-04. Sits between the
   centered BATMANDIR wordmark and the © copyright line. Same orange
   s1 star artwork used everywhere; subtle hover lift. */
.footer-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 12px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.footer-stars img {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform 220ms ease, opacity 220ms ease;
}
.footer-stars:hover img,
.footer-stars:focus-visible img {
  transform: translateY(-1px);
  opacity: 0.85;
}
.footer-brand-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.footer-brand-meta .dot,
.footer-brand-legal .dot {
  opacity: 0.4;
}
.footer-brand-legal {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 2px;
}
.footer-brand-legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  transition: color 180ms ease, border-color 180ms ease;
}
.footer-brand-legal a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
@media (max-width: 480px) {
  .footer-brand-tagline { font-size: 13px; }
}

/* ========== Utilities ========== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
}

.rule { border-top: 1px solid var(--rule); margin: 64px 0; }

.muted { color: var(--ink-muted); }

/* ========== Membership tiers ========== */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.tier {
  border: 1px solid var(--rule);
  padding: 36px 28px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.tier:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.tier.featured {
  background: var(--bg-alt);
  border-color: var(--accent);
}

.tier.featured .tier-name {
  color: var(--accent);
}

.tier-code {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.tier-code .tier-star {
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
}

.tier-table .th-code .tier-star {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 8px;
}

.tier-name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

.tier-price {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}

.tier-price .dollar {
  font-size: 20px;
  vertical-align: top;
  color: var(--ink-muted);
  margin-right: 2px;
}

.tier-price .per {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.tier-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}

.tier-perks li {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
  padding: 8px 0 8px 18px;
  position: relative;
}

.tier-perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.tier .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 1100px) {
  .tier-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 560px) {
  .tier-grid { grid-template-columns: 1fr; }
}

/* ========== Membership comparison table ========== */

.tier-compare {
  margin-top: 80px;
}

.tier-compare-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tier-compare-head h3 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.tier-compare-head p {
  color: var(--ink-muted);
  font-size: 14px;
  max-width: 36ch;
}

.tier-table-wrap {
  border: 1px solid var(--rule);
  background: var(--bg);
  overflow-x: auto;
}

.tier-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
}

.tier-table thead th {
  text-align: center;
  padding: 24px 20px;
  background: var(--bg-alt);
  font-weight: 400;
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
}

.tier-table thead th:first-child {
  text-align: left;
  background: var(--bg);
  width: 32%;
}

.tier-table .th-code {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  font-weight: 300;
}

.tier-table .th-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.tier-table .th-price {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  font-weight: 400;
}

.tier-table .th-price .dollar {
  font-size: 12px;
  vertical-align: top;
  color: var(--ink-muted);
}

.tier-table .th-price .per {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.tier-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
  vertical-align: middle;
  color: var(--ink-muted);
}

.tier-table tbody td:first-child {
  text-align: left;
  color: var(--ink);
  font-weight: 500;
  padding-left: 24px;
}

.tier-table tbody tr:last-child td {
  border-bottom: none;
}

.tier-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.tier-table .check {
  color: var(--accent);
  font-size: 15px;
}

.tier-table .none {
  color: var(--rule);
  font-size: 16px;
}

.tier-table thead th.featured-col {
  background: rgba(255, 107, 53, 0.08);
}

.tier-table tbody td.featured-col {
  background: rgba(255, 107, 53, 0.04);
}

.tier-table tbody tr:hover td.featured-col {
  background: rgba(255, 107, 53, 0.08);
}

/* ---- 1.43 archive: film list ---- */
.year-group {
  margin-bottom: 48px;
}

.year-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}

.year-header .year-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}

.year-header .year-count {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================================
   Blackberry Farm-inspired full-screen drawer nav
   ============================================ */

/* Header right-side cluster: Reserve CTA, auth pill, admin pill, Menu */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.reserve-cta {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  background: var(--accent);
  color: #ffffff !important;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.reserve-cta:hover {
  background: var(--ink);
  color: #ffffff !important;
}

/* Stay CTA — sibling of Show (cinema). Both filled-orange so the two
   primary actions read as equally available to members. */
.stay-cta {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  background: var(--accent);
  color: #ffffff !important;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.stay-cta:hover {
  background: var(--ink);
  color: #ffffff !important;
}
.stay-cta[hidden] { display: none !important; }
.reserve-cta[hidden] { display: none !important; }
@media (max-width: 720px) {
  .stay-cta { padding: 0 12px; font-size: 10px; }
}

/* ── Inline sign-in form in the header ─────────────────────────────
   Editorial styling: underline-only inputs (no boxes), comfortable
   spacing between fields, ghost text submit with arrow. Visible only
   when signed-out (toggled by [data-auth-only="out"]). On narrow
   screens we hide it and the existing auth-icon Sign-in pill takes
   over. */
/* Header sign-in: boxed inputs (thick + elegant), icon-only enter
   button to the right. The form sits inside .header-actions, so it
   shares its right-aligned layout. */
.header-signin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  position: relative;
}
.header-signin input {
  height: 36px;
  width: 160px;
  padding: 0 12px;
  border: 1.5px solid var(--rule-strong);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 0.18s ease;
  box-sizing: border-box;
}
.header-signin input::placeholder {
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.header-signin input:focus,
.header-signin input:hover { border-color: var(--ink); }
.header-signin input:focus { border-color: var(--accent); }
/* Icon-only submit — square button with an enter / arrow glyph. */
.header-signin button[type="submit"] {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease;
  font-size: 0; /* hide any text label so only the icon shows */
}
.header-signin button[type="submit"] .arr {
  width: 16px;
  height: 16px;
  display: inline-block;
  transition: transform 0.18s ease;
}
.header-signin button[type="submit"]:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.header-signin button[type="submit"]:hover .arr { transform: translateX(2px); }
.header-signin button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.header-signin.error input { border-bottom-color: #d43f3f; }
.header-signin .header-signin-error {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #d43f3f;
  white-space: nowrap;
  z-index: 5;
}
.header-signin[hidden] { display: none !important; }

/* Desktop only: the inline form replaces the signed-out "Sign in" pill.
   Below 820px we hide the form and let the auth-icon pill render. */
@media (min-width: 821px) {
  .auth-icon.is-signed-out { display: none !important; }
}
@media (max-width: 820px) {
  .header-signin { display: none !important; }
}
/* Tighter inputs on smaller desktops so the header still fits. */
@media (max-width: 1080px) and (min-width: 821px) {
  .header-signin { gap: 12px; }
  .header-signin input { width: 120px; font-size: 12px; }
  .header-signin button[type="submit"] { font-size: 10px; letter-spacing: 0.18em; }
}

/* Menu trigger — always visible at all widths (overrides mobile-only default).
   Icon-only square button so the hamburger reads as a single glyph paired
   with the auth pill on its right. */
.nav-icon-btn.toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-icon-btn.toggle .icon-bars { width: 20px; height: 20px; display: inline-block; }
.nav-icon-btn.toggle .icon-x    { width: 20px; height: 20px; display: none; }
.nav-icon-btn.toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
body.menu-open .nav-icon-btn.toggle .icon-bars { display: none; }
body.menu-open .nav-icon-btn.toggle .icon-x    { display: inline-block; }

/* When the drawer is open it's a 100vw overlay at z-index 200, which
   would normally cover the toggle button (z-index 50, inside the
   header). Hoist the toggle onto a higher layer and position it as a
   fixed close-X in the top-right so the user can always close. */
body.menu-open .nav-icon-btn.toggle {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 300;
  background: transparent;
  border-color: rgba(244, 237, 225, 0.3);
  color: #f4ede1;
}
body.menu-open .nav-icon-btn.toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Drawer — LEFT-side slide-in panel (matches the hamburger button
   in the top-left of the header). Reuses existing .nav class so the
   nav.js toggle (adds/removes .open) keeps working.
   Flipped right→left 2026-05-04 per Achir. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: auto;
  width: 440px;
  max-width: 92vw;
  height: 100vh;
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 200;
  padding: 96px 36px 60px;
  display: block;
  gap: 0;
  font-size: inherit;
  border-right: 1px solid var(--rule);
  box-shadow: 16px 0 40px rgba(0, 0, 0, 0.10);
}
.nav.open { transform: translateX(0); }
body.menu-open { overflow: hidden; }

/* Hide drawer's child anchors from picking up old nav-link styles */
.nav a { white-space: normal; }

/* ─── Drawer: flat single-column, white background, orange text ───
   One vertical list; section headers (drawer-eyebrow) act as dividers
   between role-grouped link clusters. Mobile and desktop both use the
   same layout — this drawer is identical at every width. */
.drawer-grid {
  max-width: 540px;
  margin: 0 auto;
  display: block;
}
.drawer-cols {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.drawer-col {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.drawer-col:last-child { border-bottom: 0; }

.drawer-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.drawer-list { list-style: none; padding: 0; margin: 0; }
.drawer-list li { margin: 0; padding: 4px 0; }
.nav .drawer-list a {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--accent) !important;
  text-decoration: none;
  transition: color 200ms ease;
  padding: 8px 0;
  pointer-events: auto !important;
  cursor: pointer;
  position: relative;
  z-index: 210;
}
.nav .drawer-list a:hover {
  color: var(--ink) !important;
}

/* ─── Drawer (bm-drawer-* — clean rebuild 2026-05-04) ─────────────
   Replaces the old <ul>/<details>-based markup that was leaking
   default list bullets and an oversized native disclosure marker.
   Plain <div>/<a> elements only; large tappable rows; "Stay with
   us" parent renders as a small uppercase eyebrow with the four
   property links permanently nested below it (no accordion). Sign
   out + copyright sit in their own footer block separated by a
   divider. Sized for 44pt+ touch targets. */
.bm-drawer {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
  font-family: var(--sans);
  /* Reset anything inherited from .nav defaults that might add
     vertical padding or strange line-height. */
  padding: 0;
  line-height: 1.2;
}
.bm-drawer-group {
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--rule);
}
.bm-drawer-group:last-of-type { border-bottom: 0; }
.bm-drawer-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 6px 4px 12px;
  margin: 0;
  /* Not interactive — purely a section label. */
  pointer-events: none;
}
/* Tappable menu row — at least 48px tall so touch targets clear iOS
   guidelines. Plain serif type, no underline, orange-on-hover. */
.nav .bm-drawer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 12px 4px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  background: transparent;
  transition: color 180ms ease;
  /* Defeat any inherited .nav rules that suppressed pointer events
     or layered the drawer underneath a stacking context. */
  pointer-events: auto !important;
  position: relative;
  z-index: 210;
}
.nav .bm-drawer-row:hover,
.nav .bm-drawer-row:focus {
  color: var(--accent) !important;
}
.bm-drawer-row-label {
  flex: 1 1 auto;
  min-width: 0;
}
/* Sub-row indented under the parent eyebrow. Slightly smaller,
   muted weight, but same hover treatment. */
.nav .bm-drawer-row.bm-drawer-sub {
  font-size: 18px;
  padding-left: 16px;
  min-height: 44px;
  color: var(--ink) !important;
}
.nav .bm-drawer-row.bm-drawer-sub:hover { color: var(--accent) !important; }
/* Forward chevron on top-level rows. Small, muted; orange on hover.
   Hidden on sub-rows (cleaner — the link affordance is the row). */
.bm-drawer-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: color 180ms ease, transform 180ms ease;
}
.nav .bm-drawer-row:hover .bm-drawer-arrow {
  color: var(--accent);
  transform: translateX(2px);
}
.bm-drawer-row.bm-drawer-sub .bm-drawer-arrow { display: none; }
/* Coming-Soon pill — small grey rounded tag, italic accent. Sits to
   the right of the property name. */
.bm-drawer-tag {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 8px;
  padding: 3px 8px 4px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 999px;
  line-height: 1;
  vertical-align: middle;
}
/* Footer block — sign out (when signed in) + copyright, separated
   from the menu by extra whitespace. Sign out gets a subdued
   text-button treatment so it reads as tertiary, not primary. */
.bm-drawer-foot {
  margin-top: auto;
  padding: 28px 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nav .bm-drawer-signout {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-muted) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
  pointer-events: auto !important;
  position: relative;
  z-index: 210;
}
.nav .bm-drawer-signout:hover {
  color: var(--accent) !important;
  border-color: var(--accent);
}
.bm-drawer-copyright {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (min-width: 720px) {
  .nav .bm-drawer-row { font-size: 28px; }
  .nav .bm-drawer-row.bm-drawer-sub { font-size: 22px; }
}

/* Belt-and-braces: every descendant inside the open drawer must be
   click-receiving and on the same stacking layer. Some past CSS rules
   set pointer-events: none on .nav under certain breakpoints. */
.nav.open,
.nav.open * {
  pointer-events: auto !important;
}

/* Sign-in + Sign-out rows: tighten the click target to the TEXT only
   (with a small comfortable hit area around it) instead of the full
   row width. Members were accidentally signing out by tapping the
   surrounding whitespace as they scrolled past. The visual row layout
   stays the same — we just shrink the actual <a> to inline-flex sized
   to its content. (Achir 2026-05-06.)
   Specificity has to beat the broader `.nav .bm-drawer-row` rule
   which sets display:flex + justify-content:space-between + min-height,
   so we mark these properties !important. */
.nav .bm-drawer-row.bm-drawer-signin,
.nav .bm-drawer-row.bm-drawer-signout-row {
  display: inline-flex !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: 8px 12px !important;
  margin: 4px 0 !important;
  width: auto !important;
  border-radius: 6px;
}
/* Hide the trailing chevron arrow on these rows since we no longer
   want them to read as "tap the whole row" affordances. */
.nav .bm-drawer-row.bm-drawer-signin .bm-drawer-arrow,
.nav .bm-drawer-row.bm-drawer-signout-row .bm-drawer-arrow {
  display: none;
}

/* CRITICAL: kill the header's backdrop-filter while the menu is open.
   Per CSS spec, any non-none backdrop-filter on an ancestor creates a
   containing block for position:fixed descendants — which means our
   drawer (.nav with position:fixed) was being anchored to the header's
   box instead of the viewport, and click regions ended up misaligned
   from their visual rendering. Clearing it lets the drawer escape to
   the viewport so links land where you expect. */
body.menu-open .site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}

/* Right-side feature panel */
.drawer-feature {
  padding: 8px 0 0 40px;
  border-left: 1px solid var(--rule);
}
.drawer-feature h3 {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 14px 0 18px;
  line-height: 1.05;
  color: var(--ink);
}
.drawer-feature h3 em { font-style: italic; color: var(--accent); }
.drawer-feature p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin-bottom: 28px;
  max-width: 36ch;
}
.drawer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.drawer-cta-btn:hover {
  background: var(--accent);
  color: #0a0a0a;
}

/* Drawer footnote (sign out + tiny links live here when logged in) */
.drawer-footnote {
  max-width: 1200px;
  margin: 64px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.drawer-footnote a {
  color: var(--ink);
  text-decoration: none;
}
.drawer-footnote a:hover { color: var(--accent); }

/* Backdrop layer (rendered separately under the drawer; nav.js doesn't
   need to know about it — it animates purely off body.menu-open) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 150;
}
body.menu-open .drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile drawer adjustments */
@media (max-width: 900px) {
  .nav { padding: 96px 24px 60px; }
  .drawer-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .drawer-cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .drawer-list a { font-size: 22px; }
  .drawer-feature {
    padding: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 32px;
  }
  .drawer-feature h3 { font-size: 40px; }
  .nav-icon-btn.toggle { padding: 0; }
  .header-date { display: none; }
}

/* ========== Member status badge (me.html) ========== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  background: var(--bg-alt);
  font-family: var(--sans);
}
.status-badge[hidden] { display: none; }
.status-badge .star-rainbow {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.status-badge .status-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.status-badge .status-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
}

.rumored-star {
  color: var(--accent);
  font-weight: 500;
  margin-left: 4px;
}

.chart-wrap {
  padding: 24px 0 8px;
  max-width: 100%;
  overflow-x: auto;
}
.chart-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.chart-stats {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.chart-stat {
  min-width: 220px;
}
.chart-stat-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.chart-stat-value {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1.1;
}
.chart-stat-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* New row layout: chart on the left, stat list on the right */
.chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 32px;
  align-items: center;
  padding: 24px 0 8px;
}
.chart-row .chart-cell {
  min-width: 0;
  overflow-x: auto;
}
.chart-stats-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 24px;
  border-left: 1px solid var(--rule);
}
.chart-stats-list .stat-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chart-stats-list .stat-key {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.chart-stats-list .stat-val {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--accent);
  line-height: 1.1;
}

@media (max-width: 880px) {
  .chart-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .chart-stats-list {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 36px;
  }
}

.film-list {
  display: flex;
  flex-direction: column;
}

.film-row {
  display: grid;
  grid-template-columns: 70px 1fr 1.4fr 160px 24px;
  align-items: center;
  gap: 24px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: background 200ms ease, padding 200ms ease;
}

.film-row .film-date {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.film-row:hover {
  background: rgba(255, 107, 53, 0.04);
  padding-left: 16px;
  padding-right: 16px;
}

.film-row .film-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.film-row .film-camera {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.film-row .film-minutes {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  text-align: right;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.film-row .film-arrow {
  width: 20px;
  height: 20px;
  color: var(--accent);
  opacity: 0.6;
  transition: transform 200ms ease, opacity 200ms ease;
}

.film-row:hover .film-arrow {
  transform: translateX(4px);
  opacity: 1;
}

@media (max-width: 720px) {
  .year-header .year-num { font-size: 28px; }
  .film-row {
    grid-template-columns: 1fr 16px;
    grid-template-areas:
      "date arrow"
      "title title"
      "camera camera"
      "minutes minutes";
    gap: 4px 16px;
    padding: 16px 4px;
  }
  .film-row .film-date { grid-area: date; }
  .film-row .film-title { grid-area: title; font-size: 18px; }
  .film-row .film-camera { grid-area: camera; font-size: 12px; }
  .film-row .film-minutes { grid-area: minutes; text-align: left; font-size: 11px; }
  .film-row .film-arrow { grid-area: arrow; }
}

/* Last updated stamp under the footer */
.last-updated {
  text-align: center;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted, #888);
  padding: 18px 0 4px;
  margin: 0;
}

/* ========== Role-tailored UI (kitchen staff / chef) ==========
   auth-icon.js stamps <body> with `role-staff`, `role-chef`,
   `role-admin`, `role-member`, or `role-orion`. Workers shouldn't see
   member-side marketing on the home page — hide it. */

/* Hide marketing sections on every page for worker roles. */
body.role-staff main > section.hero,
body.role-staff main > section#today,
body.role-staff main > section.contact-strip,
body.role-staff main > section.last-section,
body.role-staff footer.site-footer,
body.role-chef main > section.hero,
body.role-chef main > section#today,
body.role-chef main > section.contact-strip,
body.role-chef main > section.last-section,
body.role-chef footer.site-footer {
  display: none !important;
}

/* ── Header simplification for kitchen staff ────────────────────────
   Kitchen staff doesn't need the STAY / SHOW header buttons, the TODAY
   pill, or the ADMIN pill. All they need is their initials (auth pill)
   and the MENU button. Today/Staff/etc. live inside the drawer.
   `data-staff-only` items stay visible — those are the staff-relevant
   ones (TODAY pill in the header, kitchen links in the drawer). */
body.role-staff .site-header .stay-cta,
body.role-staff .site-header .reserve-cta,
body.role-staff .site-header .today-pill,
body.role-staff .site-header .admin-pill {
  display: none !important;
}

/* In the menu drawer, kitchen staff only sees kitchen-relevant links.
   The drawer-cols groups for "The Theatre", "Stay with Us", and
   "Programs" are member content — hide them. The 4th column ("Connect")
   contains member items + staff/admin links; we keep the column but
   hide its member-only entries. */
body.role-staff .drawer-col:nth-child(1),
body.role-staff .drawer-col:nth-child(2),
body.role-staff .drawer-col:nth-child(3),
body.role-staff .drawer-feature {
  display: none !important;
}
/* In the surviving "Connect" column, hide member-only items by href.
   Keep "My Account" (auth-only, sign-out access), "Today" (staff), and
   any kitchen-relevant admin links. */
body.role-staff .drawer-col:nth-child(4) a[href="contact.html"],
body.role-staff .drawer-col:nth-child(4) a[href="book.html"] {
  display: none !important;
}
/* Hide the "Connect" eyebrow once everything member-side is gone — let
   the staff column read as a clean list. */
body.role-staff .drawer-col:nth-child(4) .drawer-eyebrow {
  display: none !important;
}

/* ── Staying-member home: buttons-only experience ─────────────────
   When body.has-active-stay is set (services-hub.js stamps it), the
   home page strips down to email + service buttons + active-orders
   footer. Stay banner + install prompt + sticky order-status banner
   stay hidden so the page reads as a clean in-villa control panel.
   The full greeting (name, profile link, member quick actions) is
   suppressed — only the email survives as a tiny identity anchor. */
body.has-active-stay #stay-banner,
body.has-active-stay #install-prompt,
body.has-active-stay #order-status-banner-host,
body.has-active-stay .home-greeting-name,
body.has-active-stay .home-greeting-profile-link,
body.has-active-stay .home-quick-actions {
  display: none !important;
}
/* Tighten the spacing left behind once the name+actions are gone —
   the email shouldn't sit alone with 48px of dead air below it. */
body.has-active-stay .home-greeting { margin-bottom: 24px !important; }
body.has-active-stay .home-greeting-email { margin-top: 0 !important; }
/* Footer stays visible — user wants it back. */
/* Pad the body bottom so the active-orders footer doesn't crowd the
   bottom-tabs / iOS home indicator. */
body.has-active-stay main { padding-bottom: 32px; }

/* ── iOS auth-first gate (Build 11) ───────────────────────────────
   When the iOS Capacitor shell or installed PWA is running and the
   user is unauthenticated, hide every chrome surface that hints at a
   public app: bottom tabs, drawer button, footer. The login.html page
   becomes the entire surface area until the member signs in.

   The .bm-ios-unauthed class is added by app/ios-auth-first-gate.js
   on auth state changes; .bm-ios-shell is added once on detection of
   the standalone client. */
html.bm-ios-shell.bm-ios-unauthed .bottom-tabs,
html.bm-ios-shell.bm-ios-unauthed #bottom-tabs,
html.bm-ios-shell.bm-ios-unauthed .tab-bar,
html.bm-ios-shell.bm-ios-unauthed .pwa-bottom-tabs,
html.bm-ios-shell.bm-ios-unauthed .site-footer,
html.bm-ios-shell.bm-ios-unauthed .header-hamburger,
html.bm-ios-shell.bm-ios-unauthed .auth-icon,
html.bm-ios-shell.bm-ios-unauthed .header-actions .reserve,
html.bm-ios-shell.bm-ios-unauthed .header-actions .auth {
  display: none !important;
}
/* On the brand-forward login screen, even the header chrome should
   recede so the brand block + sign-in CTAs are the entire view. */
html.bm-ios-shell.bm-ios-unauthed .site-header {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ── Native iOS UX Phase 1 (Build 11) ────────────────────────────
   Goal: when running inside the Capacitor iOS shell or installed PWA,
   the WebView should not feel like Safari. Drop the visual tells of
   "we're in a browser":
   • Tap-highlight blue flash on link/button taps → kill it.
   • Default focus-ring on touch → keyboard-only.
   • Browser's text-selection on chrome → only on real content.
   • Default font stack falling back to Times → SF Pro everywhere on
     iOS (the Fraunces serif stays for editorial display headings;
     SF Pro takes over for body + UI text inside .pwa-standalone /
     .bm-ios-shell where the brief is "feels like Apple built it").
   • iOS spacing rhythm: 8 / 16 / 24 px scale (already mostly there).
   • iOS corner radii: 10–14 px on cards, 22 px on bottom sheets.
   The .bm-ios-shell class is added by app/ios-auth-first-gate.js on
   detection of the standalone client. CSS scopes prevent these rules
   from leaking to web visitors, who get the editorial look unchanged. */

html.bm-ios-shell,
html.bm-ios-shell body {
  /* SF Pro for body/UI on iOS; Fraunces still drives .serif headlines
     where we intentionally want editorial display type. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.bm-ios-shell *,
html.bm-ios-shell *::before,
html.bm-ios-shell *::after {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;     /* no long-press call-out on chrome */
}
/* Long-press selection should still work on actual content text — not
   on buttons / nav / chrome. Restore for the canonical content
   containers so a member can still copy a phone number, address,
   booking ID, etc. */
html.bm-ios-shell main p,
html.bm-ios-shell main h1,
html.bm-ios-shell main h2,
html.bm-ios-shell main h3,
html.bm-ios-shell main li,
html.bm-ios-shell main td,
html.bm-ios-shell main pre,
html.bm-ios-shell main code,
html.bm-ios-shell main blockquote,
html.bm-ios-shell main .selectable,
html.bm-ios-shell main address {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}
/* Hide scrollbars on the native shell — iOS hides them by default,
   but some pages add `overflow-x:auto` containers with visible bars. */
html.bm-ios-shell ::-webkit-scrollbar { display: none; }
html.bm-ios-shell { scrollbar-width: none; }

/* Focus rings only on keyboard users — not finger taps. */
html.bm-ios-shell button:focus:not(:focus-visible),
html.bm-ios-shell a:focus:not(:focus-visible),
html.bm-ios-shell input:focus:not(:focus-visible),
html.bm-ios-shell select:focus:not(:focus-visible),
html.bm-ios-shell textarea:focus:not(:focus-visible) {
  outline: none;
}

/* Native iOS link styling: don't underline links by default unless
   they're inline in body copy. Buttons and CTAs are already styled
   with their own backgrounds; navigation links should look like text
   with the accent color rather than underlined web links. */
html.bm-ios-shell a {
  text-decoration: none;
}
html.bm-ios-shell main p a,
html.bm-ios-shell main li a,
html.bm-ios-shell main td a,
html.bm-ios-shell .with-link-underline a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}

/* Native iOS corner radii. Anything we class as a card / surface gets
   the 12-px radius iOS uses. Bottom sheets get 22 px. */
html.bm-ios-shell .card,
html.bm-ios-shell .me-card,
html.bm-ios-shell .tile,
html.bm-ios-shell .order-card,
html.bm-ios-shell .booking-card,
html.bm-ios-shell .stay-card,
html.bm-ios-shell .channel,
html.bm-ios-shell .pf-section {
  border-radius: 12px;
}
html.bm-ios-shell button,
html.bm-ios-shell .btn,
html.bm-ios-shell .btn-apple {
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}

/* iOS-style "Sign in with Apple" button — full-width, black, rounded.
   The existing .btn-apple already approximates this; tighten the
   radius + height to match Apple's HIG-recommended dimensions. */
html.bm-ios-shell .btn-apple {
  height: 50px;
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ── Sticky footer (Achir 2026-05-06) ─────────────────────────────
   Classic flex-column trick. Without this, on short pages (like
   /contact when there's not much body), the .site-footer floats
   in the middle of the viewport with empty space beneath it.
   Apply to body so it covers every page that uses the standard
   header/main/footer chrome. */
html, body {
  min-height: 100vh;
  min-height: 100dvh; /* iOS safari with URL bar */
}
body {
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
}
body > .site-footer {
  flex-shrink: 0;
  margin-top: auto;
}
/* Pages that mark themselves as "no chrome" (kiosk marquees) opt out
   so the body stays a normal block. */
body[data-no-chrome="true"] {
  display: block;
}

/* ── Drawer full-height + opaque background ───────────────────────
   Earlier .nav rule already set position:fixed top:0 bottom:0, but
   on iOS Safari with the URL bar in/out, 100vh ≠ visible viewport
   and the drawer ends short of the bottom — the underlying page
   footer (BATMANDIR + 5 stars) bleeds through below the drawer's
   content. Force the drawer panel to use the dynamic viewport
   (100dvh) so it always covers the actual visible area. The
   background is already var(--bg); reinforce !important so no
   later style accidentally makes it transparent. */
.nav {
  /* 100dvh handles iOS dynamic viewport correctly — when the URL
     bar collapses, the drawer grows; when it expands, the drawer
     shrinks. Keeps the footer below the fold instead of poking
     through the drawer's bottom edge. */
  height: 100vh;
  height: 100dvh;
  background: var(--bg) !important;
}
/* Backdrop also needs to fully cover (under-drawer bleed-through fix). */
.bm-drawer-backdrop,
.nav-backdrop {
  height: 100vh;
  height: 100dvh;
}

/* ── Sticky footer + PWA bottom-tabs interaction ─────────────────
   On PWA standalone / iOS Capacitor shell, the bottom-tabs bar is
   position:fixed bottom:0. The bar's content area is ~56px and it
   stamps env(safe-area-inset-bottom) padding-bottom on itself for
   the home indicator — total visible height ~56 + safe-area.
   Body needs MORE padding-bottom than just the tab-bar height so
   the footer's brand block (BATMANDIR + © + Privacy/Terms) doesn't
   sit flush against the tab bar — it should land with breathing room.

   --bm-tab-bar-h = 64 (bar) + 24 (breathing room) so the brand
   block is clearly above the bar at scroll end. Single source —
   bottom-tabs.js inline CSS reads the same calc.

   Updated 2026-05-06 from 64px to 88px after Achir reported the
   footer's BATMANDIR mark was hidden behind the tab bar on /me. */
html.pwa-standalone {
  --bm-tab-bar-h: 64px;
  --bm-tab-bar-clear: 24px;  /* extra breathing room above the bar */
}
html.pwa-standalone body,
html.bm-ios-shell body {
  padding-bottom: calc(var(--bm-tab-bar-h, 64px) + var(--bm-tab-bar-clear, 24px) + env(safe-area-inset-bottom, 0px));
}

/* ═════════════════════════════════════════════════════════════════
   SITE-WIDE DARK THEME (iOS PWA standalone only)
   ═════════════════════════════════════════════════════════════════
   Active when html.pwa-standalone is set (Capacitor iOS shell +
   installed PWA). Web visitors keep the editorial light theme.
   pwa.js also sets html[data-theme="dark"] for any future selector
   needs — both classes are interchangeable for the dark gate.

   Approach: override the token vars at the html.pwa-standalone
   scope so every var(--bg) / var(--ink) / etc. usage across the
   site flips together. A second wave of overrides catches the
   most common hardcoded patterns (background:#fff on inputs,
   rgba(0,0,0,*) on borders) so legacy CSS that didn't go through
   the tokens still flips.

   Brand --accent (#ff6b35) is unchanged — orange reads great on
   dark and Achir wants brand continuity across themes.

   Built 2026-05-06.
   ═════════════════════════════════════════════════════════════ */
html.pwa-standalone {
  --bg: #0E0E0E;
  --bg-alt: #161616;
  --bg-elevated: #1A1A1A;
  --ink: #ffffff;
  --ink-muted: rgba(255, 255, 255, 0.65);
  --rule: rgba(255, 255, 255, 0.10);
  --rule-strong: rgba(255, 255, 255, 0.22);
  /* --accent stays #ff6b35 — brand orange works on dark */
  color-scheme: dark;
}

/* Body + base ink already use vars, but be explicit so direct
   style="background:#fff" inline patterns get overridden.
   ALSO set html bg — otherwise the iOS WKWebView's underlying
   view shows through in the safe-area-top zone (white above the
   header). The Capacitor config backgroundColor is #ffffff and
   bleeds through unless html paints over it. With html { bg:
   #0E0E0E } the WebView's outer surface is dark, so the status
   bar zone renders dark even when we extend INTO the safe-area
   via viewport-fit=cover. Achir 2026-05-06 critical blocker. */
html.pwa-standalone,
html.pwa-standalone html,
html.pwa-standalone body {
  background: var(--bg) !important;
  color: var(--ink);
}

/* Header/footer chrome — site-chrome.js inlines `background: #fff`
   for the iOS sticky header pin. Override here so the chrome reads
   dark. The wordmark SVG already uses currentColor so it inherits
   the new white ink.
   ALSO LOCK THE POSITIONING RULES HERE in styles.css instead of
   relying on pwa.js's runtime-injected style block — Achir
   2026-05-06: "header is not sticky/fixed" persisted because the
   pwa.js inline style was either being beaten by a media-query
   sticky rule OR the inline style block injection raced against
   first paint. position:fixed in styles.css guarantees it's
   applied as part of the initial stylesheet pass. */
html.pwa-standalone .site-header,
html.pwa-standalone .site-header.is-pinned {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147483647 !important;
  background: var(--bg) !important;
  color: var(--ink);
  border-bottom-color: var(--rule);
  padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important;
  /* NO transform on this element. Round 4 (2026-05-07): the previous
     `transform: translateZ(0)` "GPU hint" was actively breaking
     position:fixed on iOS WKWebView — Apple's WebKit promotes the
     element to its own layer but then ATTACHES that layer to the
     scrolling container instead of the visual viewport, so the bar
     scrolls with content. Same anti-pattern was the bottom-tabs
     sticky-bug root cause. JS scroll polyfill in app/sticky-header.js
     re-pins via top:scrollY on every scroll event as a safety net. */
}
@media (max-width: 480px) {
  html.pwa-standalone .site-header,
  html.pwa-standalone .site-header.is-pinned {
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  }
}
html.pwa-standalone .site-footer {
  background: var(--bg) !important;
  color: var(--ink-muted);
  border-top-color: var(--rule);
}
html.pwa-standalone .site-header *,
html.pwa-standalone .site-footer *,
html.pwa-standalone .site-header svg text {
  color: inherit;
  fill: currentColor;
}
/* Footer link columns — restore brand-orange accents on H4s. */
html.pwa-standalone .site-footer h4 { color: var(--ink); }
html.pwa-standalone .site-footer a { color: var(--ink-muted); }
html.pwa-standalone .site-footer a:hover { color: var(--accent); }

/* Hamburger drawer — site-chrome.js inlines color: #0a0a0a /
   rgba(0,0,0,*) borders. Sweep them dark. The .nav panel itself
   was already set to `background: var(--bg) !important` in the
   block above, so it picks up the dark token automatically. */
html.pwa-standalone .nav { color: var(--ink); }
html.pwa-standalone .nav .bm-drawer-row { color: var(--ink) !important; }
html.pwa-standalone .nav .bm-drawer-row:hover,
html.pwa-standalone .nav .bm-drawer-row:focus { color: var(--accent) !important; }
html.pwa-standalone .nav .bm-drawer-group { border-bottom-color: var(--rule); }
html.pwa-standalone .nav .bm-drawer-eyebrow,
html.pwa-standalone .nav .bm-drawer-copyright { color: var(--ink-muted); }
html.pwa-standalone .nav .bm-drawer-tag {
  color: var(--ink-muted);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
html.pwa-standalone .nav .bm-drawer-close { color: var(--ink-muted); }
html.pwa-standalone .nav .bm-drawer-close:hover,
html.pwa-standalone .nav .bm-drawer-close:focus-visible {
  color: var(--accent);
  background: rgba(255, 107, 53, 0.08);
}
html.pwa-standalone .nav .bm-drawer-row.bm-drawer-signout-row .bm-drawer-row-label {
  color: var(--ink-muted) !important;
}

/* Form inputs — most pages hardcode `background: #fff`. Override
   to a dark elevated surface with subtle white border + white text.
   Targets inputs WITHOUT a more-specific page-scoped rule (the lux
   onboarding/login styles win because they're !important). */
html.pwa-standalone input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.pwa-standalone select,
html.pwa-standalone textarea {
  background: var(--bg-elevated) !important;
  color: var(--ink) !important;
  border-color: var(--rule-strong) !important;
}
html.pwa-standalone input::placeholder,
html.pwa-standalone textarea::placeholder { color: rgba(255, 255, 255, 0.40) !important; }
html.pwa-standalone input:focus,
html.pwa-standalone select:focus,
html.pwa-standalone textarea:focus { border-color: var(--accent) !important; }
/* Kill the iOS yellow autofill background. */
html.pwa-standalone input:-webkit-autofill,
html.pwa-standalone select:-webkit-autofill,
html.pwa-standalone textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset !important;
  caret-color: var(--ink);
}

/* Generic "card" / "panel" / "tile" classes on member-facing pages
   typically use `background: #fff` or `background: var(--bg-elevated)`
   (which we just remapped). Make sure the surface is the slightly-
   lighter dark tone so cards stand out from body. */
html.pwa-standalone .card,
html.pwa-standalone .panel,
html.pwa-standalone .tile,
html.pwa-standalone .ap-section,
html.pwa-standalone .order-card,
html.pwa-standalone .booking-card,
html.pwa-standalone .request-card,
html.pwa-standalone .stay-card,
html.pwa-standalone [class*="-card"],
html.pwa-standalone [class*="-panel"],
html.pwa-standalone [class*="-tile"] {
  background: var(--bg-elevated);
  color: var(--ink);
  border-color: var(--rule);
}

/* Hamburger button + drawer — hidden in pwa-standalone. The
   bottom tab bar (HOME · RIDE · STAY · WATCH · WALLET) provides
   primary navigation on iOS; the hamburger is redundant and adds
   clutter. Web browsers still see it (no bottom-tabs there).
   Achir 2026-05-06: "remove the top-left hamburger button on iOS."
   Drawer destinations not lost: Stay-with-us → STAY tab; Member
   directory + Contact + FAQ → /me account; Sign out → /me Danger
   zone (already there). */
html.pwa-standalone #hamburger-left,
html.pwa-standalone .nav-icon-btn.toggle {
  display: none !important;
}

/* (Header polish for PWA was rolled back 2026-05-07 — Achir clarified
   the pulsating brand star, films-link, tier badge, and AR initials
   chip are ALL intentional. The original bug was that the tier badge
   and AR chip rendered as EMPTY circles, not that they were extras.
   Fix lives upstream in auth-icon.js / tier-star module — not here.)

   Native-header takeover (round 5, 2026-05-07): when running inside
   the Capacitor iOS shell (ios-app/.../MainViewController.swift adds
   a UIKit native header overlay above the WKWebView), hide the web
   .site-header entirely and remove its top padding. The native bar
   handles its own contentInset on the WebView's scrollView, so the
   page's content already starts below it.

   `body.bm-native-header` is set by app/site-chrome.js after it
   detects window.Capacitor?.isNativePlatform()). On the web (no
   Capacitor), the class is NOT set, so the web header keeps
   rendering as before. */
/* SURGICAL — match the top web header ONLY. Direct child of body
   to avoid hitting the bottom-tabs bar or anything else nested. */
body.bm-native-header > header.site-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
}
/* (Old 8px buffer rule moved to the SINGLE GLOBAL RULE below at
   16px after Achir 3:07 — kept as breadcrumb so the next person
   doesn't redo this micro-tuning.) */

/* Achir 2026-05-07 (post-Build-31): the legacy marketing .site-footer
   was leaking into authenticated WebView pages — between page content
   and the native UIView bottom bar on iOS. Achir's IMG_6559 on /wallet
   showed the white-bg ACCOUNT/STAY/PROGRAMS/FOLLOW columns + the
   BATMANDIR/star-row/© 2026 BOCA CHAVÓN block hanging below the new
   wallet content. Same suspect for the recurring "empty black space"
   reports on home/me/etc. — duplicate chrome, not padding.
   Hide it the same way the header is hidden in native-shell mode.
   `body.bm-native-header` is set by app/site-chrome.js on detection
   of Capacitor iOS, so this fires for the iOS shell only — web visits
   keep the full marketing footer untouched.

   Same surgical pattern as the header rule above: zero out every
   dimension so it can't reserve a sliver of layout. Direct child of
   body so it never accidentally hits a footer-like element nested
   inside a page's own content. */
body.bm-native-header > footer.site-footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
}

/* Defensive: never let html.bm-pagetrans-init or any other class
   leave the document at opacity:0. The page-transition fade is
   meant to last 320ms — if the browser pauses or the cleanup
   setTimeout doesn't fire, we don't want a permanently faded
   page. Achir 2:17pm flagged a "washed out" home greeting that
   looked suspicious. This rule guarantees html, body, and the
   user-info-block render at full opacity once the transition
   classes are off. */
html:not(.bm-pagetrans-init):not(.bm-pagetrans-on),
body,
.user-info-block,
.uib-name,
.uib-name em,
.uib-name em a {
  opacity: 1 !important;
}
/* Build 25 — native bottom tabs (UIView in MainViewController.swift)
   replace the web bottom-tabs.js bar. The native bar can't lose the
   position-fixed cascade fight because it's drawn at the UIKit
   layer. Hide the web bar entirely and clear its body padding-
   bottom (the WebView's contentInset.bottom in Swift gives the
   page room to scroll above the native bar). */
body.bm-native-tabs .bottom-tabs,
body.bm-native-tabs #bottom-tabs,
body.bm-native-tabs .pwa-bottom-tabs {
  display: none !important;
}
body.bm-native-tabs {
  padding-bottom: 0 !important;
}

/* Bottom-tabs bar — pwa-only, defined inline in app/bottom-tabs.js.
   Force-pin to viewport bottom + solid dark surface so it never
   blends into the page bg. translateZ forces GPU compositing —
   without it, iOS WebView occasionally lets the bar scroll with
   the page (Achir 2026-05-06 "it scrolls all the way to the
   bottom. it's not sticky at all"). The element ALSO sets
   position/translateZ via inline `style="..."` in buildBar() so
   nothing in the cascade can override. */
html.pwa-standalone .bottom-tabs {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 9500 !important;
  background: #1A1A1A !important;          /* slightly lighter than body for visual separation */
  border-top: 1px solid var(--rule) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}
html.pwa-standalone .bottom-tabs > a { color: var(--ink-muted); }
html.pwa-standalone .bottom-tabs > a.is-active { color: var(--accent); }

/* iOS WebView quirk: position:fixed children of a body that's a
   flex container with min-height:100dvh sometimes get treated as
   in-flow (the bar scrolls with content). Override the sticky-
   footer flex pattern in pwa-standalone — kill display:flex on
   body, kill the min-height that triggers the bug. The web
   sticky-footer pattern stays for browser visits.

   Footers in the iOS app already render below the bottom-tabs
   bar's body padding-bottom reservation, so we don't need flex
   to push them down. The page IS its content — content shorter
   than viewport just leaves clear body bg below it, which is
   what we want anyway.
   2026-05-06 — second bottom-tabs sticky fix. */
html.pwa-standalone html,
html.pwa-standalone body {
  min-height: 0 !important;
  height: auto !important;
}
html.pwa-standalone body {
  display: block !important;
}
html.pwa-standalone body > main { flex: none !important; }

/* SINGLE GLOBAL RULE for the gap below the native bar.
   Achir 3:07pm: every page had a huge empty black band between
   the native UIKit header and the first content element. Cause:
   I'd been stacking padding-top across body + main + user-info-
   block + home-greeting + uib-name, summing to 30-50px on top of
   the WebView's already-correct contentInset.top.

   Reset: ONE rule on body.bm-native-header. The WebView's content-
   Inset.top in MainViewController.swift already reserves space for
   the native bar — page content starts at the bar's bottom edge.
   This rule adds ONLY a small breathing buffer (16px) so italic
   ascenders never quite touch the bar's hairline. Per-page rules
   are removed. .uib-name's own line-height handles ascender
   headroom internally. */
body.bm-native-header {
  padding-top: 16px !important;
}
html.pwa-standalone body > .site-footer { margin-top: 0 !important; }

/* Common utility classes used across pages. */
html.pwa-standalone .muted,
html.pwa-standalone .lede,
html.pwa-standalone .hint,
html.pwa-standalone .eyebrow { color: var(--ink-muted); }
html.pwa-standalone hr { background: var(--rule); }
html.pwa-standalone hr::before { background: var(--rule); }

/* Buttons — primary (.btn) keeps orange, secondary (.btn-secondary
   or [class*="-secondary"]) gets the outlined-on-dark treatment. */
html.pwa-standalone .btn-secondary,
html.pwa-standalone .btn-outline,
html.pwa-standalone [class*="-secondary"]:not(.btn):not(.btn-cta) {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.30);
}

/* Drawer backdrop — keep semi-transparent dark, no extra tint. */
html.pwa-standalone .drawer-backdrop { background: rgba(0, 0, 0, 0.65); }

/* Section dividers + .rule-top/.rule-bottom helpers already use
   var(--rule); they pick up the dark token automatically. */

/* Tier-pill backgrounds (rgba(255,107,53,0.08)) read fine on dark
   — orange-tinted pill against dark body. No override needed. */

/* ============================================================
   iOS-NATIVE COMPONENTS (2026-05-07 — Achir polish wave)
   ============================================================
   Shared, reusable classes for action tiles, pill buttons, and
   status pills that match Apple's iOS visual language. Use
   instead of bespoke per-page card/button CSS so the whole app
   levels up at once. SF Symbol-style icons live in
   /app/ios-icons.js — `<span class="ios-icon">${iconHtml(name)}</span>`.

   Color/typography tokens deliberately separate from the marketing
   --bg / --ink set so this system reads consistently in both light
   and dark contexts. Inside .pwa-standalone (dark iOS shell), the
   page background is already #0E0E0E; tile fill #1C1C1E reads
   as one elevation level above the canvas (matches iOS
   systemGroupedBackground). On light marketing surfaces, tiles
   render with the same dark fill — intentional, gives the action
   surface a distinctive treatment from the surrounding editorial.
*/

:root {
  --ios-tile-bg: #1C1C1E;
  --ios-tile-border: rgba(255, 255, 255, 0.06);
  --ios-tile-fg: #FFFFFF;
  --ios-tile-fg-secondary: rgba(255, 255, 255, 0.62);
  --ios-tile-chev: rgba(255, 255, 255, 0.30);
  --ios-radius: 12px;
  --ios-radius-pill: 999px;
  --ios-accent: #ff6b35;
  --ios-success: #34c759;
  --ios-warning: #ffcc00;
  --ios-danger:  #ff453a;
  --ios-grey:    rgba(255, 255, 255, 0.30);
  --ios-sf-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --ios-sf-text:    -apple-system, BlinkMacSystemFont, 'SF Pro Text',    'Inter', system-ui, sans-serif;
}

/* ── Action tile — iOS UITableViewCell-style row ──────────── */
.ios-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ios-tile-bg);
  border: 1px solid var(--ios-tile-border);
  border-radius: var(--ios-radius);
  color: var(--ios-tile-fg);
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.ios-tile:hover    { background: #232325; }
.ios-tile:active   { transform: scale(0.97); background: #2A2A2C; }
.ios-tile.is-disabled,
.ios-tile:disabled { opacity: 0.4; pointer-events: none; }

.ios-tile-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255, 107, 53, 0.16);
  color: var(--ios-accent);
}
.ios-tile-icon svg { width: 22px; height: 22px; display: block; }
/* Variant: solid orange on white-ish glyph (used on home services) */
.ios-tile-icon.is-solid {
  background: var(--ios-accent);
  color: #fff;
}

.ios-tile-body {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ios-tile-title {
  font-family: var(--ios-sf-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ios-tile-fg);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-tile-sub {
  font-family: var(--ios-sf-text);
  font-size: 13px;
  font-weight: 400;
  color: var(--ios-tile-fg-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-tile-chev {
  flex: 0 0 auto;
  color: var(--ios-tile-chev);
  display: flex; align-items: center;
}
.ios-tile-chev svg { width: 14px; height: 14px; }

/* Compact (square) variant used in 2-up grids on the home page */
.ios-tile.is-compact {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  min-height: 96px;
}
.ios-tile.is-compact .ios-tile-body { width: 100%; }
.ios-tile.is-compact .ios-tile-chev { display: none; }
.ios-tile.is-compact .ios-tile-title { font-size: 15px; font-weight: 600; }
.ios-tile.is-compact .ios-tile-sub   { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; }

/* ── Pill button ──────────────────────────────────────────── */
.ios-pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  min-height: 44px;
  border-radius: var(--ios-radius-pill);
  border: 0;
  background: var(--ios-accent);
  color: #0E0E0E;
  font-family: var(--ios-sf-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.15s ease, background 0.15s ease;
}
.ios-pill:active { transform: scale(0.97); background: #ff7a48; }
.ios-pill:disabled,
.ios-pill.is-disabled { opacity: 0.30; pointer-events: none; }

.ios-pill.is-outline {
  background: transparent;
  color: var(--ios-accent);
  border: 1.5px solid var(--ios-accent);
}
.ios-pill.is-outline:active {
  background: rgba(255, 107, 53, 0.10);
  transform: scale(0.97);
}
.ios-pill.is-block { width: 100%; }
.ios-pill.is-large { padding: 16px 28px; min-height: 52px; font-size: 14px; }

/* ── Status pill ──────────────────────────────────────────── */
.ios-status {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ios-radius-pill);
  font-family: var(--ios-sf-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  color: var(--ios-tile-fg-secondary);
  background: rgba(255, 255, 255, 0.04);
}
.ios-status.is-active   { color: var(--ios-accent);   background: rgba(255, 107, 53, 0.10); }
.ios-status.is-success  { color: var(--ios-success);  background: rgba(52, 199, 89, 0.12); }
.ios-status.is-warning  { color: var(--ios-warning);  background: rgba(255, 204, 0, 0.12); }
.ios-status.is-danger   { color: var(--ios-danger);   background: rgba(255, 69, 58, 0.12); }
.ios-status.is-pending  { color: var(--ios-grey);     background: rgba(255, 255, 255, 0.05); }
.ios-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Light surface override ──────────────────────────────────
   On marketing pages (no .pwa-standalone, light editorial body),
   the dark tiles can feel too heavy. Adjust them to a softer
   #F5F2EB-on-rule treatment when sitting on a pure-white surface.
   Limited to bodies that explicitly opt in via .ios-tiles-light. */
body.ios-tiles-light .ios-tile {
  background: #FAF7F2;
  border-color: rgba(0, 0, 0, 0.06);
  color: #0E0E0E;
}
body.ios-tiles-light .ios-tile:hover  { background: #F0EBE0; }
body.ios-tiles-light .ios-tile:active { background: #E8E2D5; }
body.ios-tiles-light .ios-tile-title { color: #0E0E0E; }
body.ios-tiles-light .ios-tile-sub   { color: rgba(0, 0, 0, 0.55); }
body.ios-tiles-light .ios-tile-chev  { color: rgba(0, 0, 0, 0.25); }
body.ios-tiles-light .ios-tile-icon  { background: rgba(255, 107, 53, 0.14); color: var(--ios-accent); }