/* ============================================================
   ETHEREAL — Global Stylesheet
   Design system: Antiquarian Botanical
   ============================================================ */

/* === TOKENS ===
   Palette: "Opulent Botanical Nocturne" — warm darkness, emerald velvet,
   gold & bronze, candlelight. Sampled from the built interior. See DESIGN_SYSTEM.md. */
:root {
  /* Foundation — warm near-black */
  --ink:          #0a0807;
  --shadow:       #050403;
  --char:         #161210;

  /* Emerald — the signature velvet material */
  --emerald:      #234a3f;
  --emerald-deep: #15302a;
  --emerald-lit:  #356457;

  /* Gold & bronze — the metal */
  --brass:        #c49140;
  --brass-light:  #dcb06a;
  --brass-dark:   #8a6428;
  --bronze:       #a87b4a;

  /* Warm accents */
  --terracotta:   #a3603c;
  --mosaic-teal:  #4f8a88;
  --mosaic-rust:  #9e6040;
  --blush:        #cf9ca0;
  --amber:        #e0a85a;

  /* Text & light */
  --ivory:        #f1e8d4;
  --ivory-dark:   #dccaa2;  /* brightened for legibility on near-black */

  /* Legacy aliases (kept so older rules resolve to the new world) */
  --sage:         var(--emerald);
  --sage-dark:    var(--emerald-deep);
  --teal:         var(--mosaic-teal);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --ease:         cubic-bezier(0.25, 0.1, 0.1, 1);
  --transition:   600ms cubic-bezier(0.25, 0.1, 0.1, 1);
  --transition-fast: 400ms cubic-bezier(0.25, 0.1, 0.1, 1);

  --container:    1320px;
  --nav-height:   112px;
  --section-v:    110px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The [hidden] attribute is meant to always hide an element, but any author rule that
   sets its own `display` (e.g. `.contact-form { display: flex }`) silently wins over the
   browser's default [hidden] styling since both are equal-specificity author-vs-UA rules —
   author styles always beat the UA stylesheet. Without this, toggling `el.hidden = true`
   on a flex/grid element does nothing visually. */
[hidden] { display: none !important; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Mobile rubber-band/elastic overscroll let you scroll past the real end of
     the document (past the footer/copyright) into whatever's behind the page.
     overscroll-behavior-y: none stops that on Chrome/Android + desktop Safari,
     but iOS Safari/Chrome (WebKit) only honor overscroll-behavior on nested
     scroll containers, not the root html/body scroller — the bounce still gets
     through there. main.js's touchmove guard is the actual fix on iOS; this is
     defense-in-depth for everywhere else, plus what color shows if any bounce
     still slips through. */
  background: var(--ink);
  overscroll-behavior-y: none;
}

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.85;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

/* Set by opening-sequence.js for the intro's duration, and by main.js's mobile
   nav toggle — belt-and-suspenders alongside the touchmove guard above (that
   guard alone handles iOS; this covers wheel/keyboard scroll on desktop). */
body.is-scroll-locked { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
address { font-style: normal; }

/* === ACCESSIBILITY === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.1em;
  border-radius: 2px;
  z-index: 9999;
  transition: top 200ms;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 1.5px solid var(--brass);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === LAYOUT UTILITIES === */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: var(--section-v) 0;
}

/* Emerald velvet feature section — light falling across fabric */
.section--sage,
.section--emerald {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(53, 100, 87, 0.55) 0%, transparent 70%),
    linear-gradient(to bottom, var(--emerald) 0%, var(--emerald-deep) 100%);
  position: relative;
}

.section--deep {
  background: var(--shadow);
}

/* === TYPOGRAPHY UTILITIES === */
.label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--brass-light);
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.1rem;
}

.display-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.08;
  color: var(--ivory);
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 3.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  color: var(--ivory);
}

.body-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.25vw, 21px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--ivory-dark);
}

/* === ORNAMENTAL DIVIDER === */
.ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--brass-dark);
}
/* Brand ornament — echoes the dotted "ė": a ringed dot with a tittle above */
.ornament-glyph {
  position: relative;
  width: 9px;
  height: 9px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  flex-shrink: 0;
}
.ornament-glyph::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--brass);
}

/* === BUTTONS === */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 32px;
  border: 1px solid var(--brass);
  color: var(--brass);
  background: transparent;
  border-radius: 2px;
  transition: background var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast);
  cursor: pointer;
}
.btn:hover {
  background: var(--brass);
  color: var(--ink);
  box-shadow: 0 0 28px rgba(196, 145, 64, 0.28);
}
.btn--ghost {
  border-color: var(--brass-dark);
  color: var(--ivory-dark);
}
.btn--ghost:hover {
  border-color: var(--brass);
  color: var(--brass);
  background: transparent;
}
.btn--filled {
  /* Real brass doesn't read as a flat swatch — it catches light unevenly: a soft glint
     where the light source hits it, then a brushed sheen that runs light-dark-light-dark
     across the surface. Two layers: a small warm highlight (the "блик") placed upper-left
     like a light source, over a diagonal metallic gradient standing in for the brushed
     surface. Scoped to this button only; --brass itself is unchanged for nav/hairline/text. */
  background:
    radial-gradient(ellipse 55% 45% at 28% 20%, rgba(255, 250, 235, 0.55) 0%, transparent 60%),
    linear-gradient(155deg, #e2a95a 0%, #d98e26 28%, #b67820 52%, #c78323 72%, #a96f1e 100%);
  border-color: #a96f1e;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn--filled:hover {
  /* Same construction, shifted brighter — the light source reads as if it moved closer. */
  background:
    radial-gradient(ellipse 55% 45% at 28% 20%, rgba(255, 250, 235, 0.7) 0%, transparent 60%),
    linear-gradient(155deg, #eecda0 0%, #e2a95a 28%, #c78323 52%, #d98e26 72%, #b67820 100%);
  border-color: #d98e26;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.15),
              0 0 32px rgba(217, 142, 38, 0.4);
}

/* === IMAGE PLACEHOLDER === */
.img-ph {
  background: rgba(196, 145, 64, 0.04);
  border: 1px solid var(--brass-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 240px;
}
.img-ph svg {
  opacity: 0.3;
  color: var(--brass);
}
.img-ph span {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--brass-dark);
  text-transform: uppercase;
}

/* === CONTENT PLACEHOLDER === */
.content-ph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--ivory-dark);
  border-left: 2px solid var(--brass);
  padding: 0.3rem 0 0.3rem 1rem;
  margin: 0.75rem 0;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
/* Shared partials wrappers — collapse so they don't affect layout */
site-header, site-footer { display: contents; }

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above #mobile-nav (z-index 150) so the header — logo, hamburger/X toggle — stays
     exactly where it is, on top of the overlay, when the mobile menu opens. Previously
     the overlay had its own separate (left-aligned) logo, so opening the menu visibly
     jumped the wordmark from centered to the side; keeping the same header element in
     place throughout removes the jump entirely and the existing hamburger-to-X toggle
     doubles as the close control, since it's now actually visible above the overlay. */
  z-index: 160;
  height: var(--nav-height);
  /* Transparent by default so the homepage hero can run edge-to-edge behind the nav.
     The solid bar comes from either .nav-solid (subpages render with it permanently —
     their content is ink-on-ink and would scroll illegibly under a transparent header)
     or .is-scrolled (added by main.js past 80px on every page). The homepage's top-of-
     hero legibility over the bright mural is handled in home.css: a top-weighted scrim
     gradient plus per-element insurance on the nav links / Reserve pill / hamburger. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
  /* iOS Safari bug: a `position: fixed` element that gains `backdrop-filter` (added
     below by .is-scrolled) can visually detach from the top of the viewport mid-scroll
     — it renders at a stale scroll offset, reading as if the header jumped down the
     page, until the compositor catches up. Forcing this onto its own GPU layer up
     front (before the blur ever applies, so there's no layer-promotion pop either)
     is the standard fix. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#site-header.nav-solid,
#site-header.is-scrolled {
  background: rgba(13, 11, 9, 0.92);
  border-bottom-color: var(--brass-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#site-header.nav-hidden {
  opacity: 0;
  pointer-events: none;
}

#site-header.nav-visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 900ms var(--ease);
}

.nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0.5rem 2rem;
  max-width: var(--container);
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.nav-logo:hover { opacity: 0.8; }
.nav-logo .logo-img {
  height: auto;
  /* Sized against the fixed masthead: at the 320px cap the ~4.76:1 wordmark is
     ~67px tall — with the links row + gap that's ~109px of the 112px bar, i.e.
     the practical ceiling. Don't raise the cap without raising --nav-height. */
  width: clamp(240px, 25vw, 320px);
  display: block;
  mix-blend-mode: screen;
}

#nav-links {
  display: flex;
  align-items: center;
}

#nav-links ul {
  display: flex;
  align-items: center;
  gap: 2.75rem;
}

#nav-links a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-dark);
  transition: color var(--transition-fast);
  position: relative;
}
#nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}
#nav-links a:hover { color: var(--ivory); }
#nav-links a:hover::after { transform: scaleX(1); }

.nav-reserve {
  border: 1px solid var(--brass-dark);
  padding: 7px 18px;
  border-radius: 2px;
  color: var(--brass) !important;
  transition: background var(--transition-fast), border-color var(--transition-fast) !important;
}
.nav-reserve:hover {
  background: var(--brass) !important;
  border-color: var(--brass) !important;
  color: var(--ink) !important;
}
.nav-reserve::after { display: none !important; }

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 200;
}
.hamburger-line {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ivory);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile fullscreen nav overlay */
#mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 3, 0.98);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
#mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}
#mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ivory-dark);
  transition: color var(--transition-fast);
  text-align: center;
}
#mobile-nav a:hover { color: var(--ivory); }

#mobile-nav .mobile-reserve {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-style: normal;
  color: var(--brass) !important;
  border: 1px solid var(--brass-dark);
  padding: 12px 32px;
  margin-top: 1rem;
}
#mobile-nav .mobile-reserve:hover {
  background: var(--brass);
  color: var(--ink) !important;
}

/* ============================================================
   PAGE HEADER (subpages)
   ============================================================ */
.page-header {
  padding-top: calc(var(--nav-height) + 80px);
  padding-bottom: 64px;
  text-align: center;
  border-bottom: 1px solid var(--brass-dark);
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(138, 100, 40, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-header .label { justify-content: center; }
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ivory);
  margin-top: 0.5rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: var(--shadow);
  border-top: 1px solid var(--brass-dark);
  padding: 48px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.25rem;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 1rem;
  transition: opacity var(--transition-fast);
}
.footer-logo:hover { opacity: 0.8; }
/* logo-wordmark.png here, not logo.png — the latter is a 3:2 canvas where the wordmark
   only occupies the middle band, so it rendered as a ~190px-tall mostly-empty box that
   pushed the tagline far below the visible logo and inflated the whole footer. The
   tightly-cropped wordmark keeps the brand block compact. */
.footer-logo .logo-img {
  height: auto;
  width: clamp(170px, 18vw, 240px);
  display: block;
  mix-blend-mode: screen;
}

/* Was a flat 18px regardless of viewport — next to a wordmark that scales with the
   viewport, that read as an afterthought rather than a signature line. Scales with
   the same logic as the logo above it; letter-spacing gives it a touch more presence
   at the larger sizes. */
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.375rem);
  letter-spacing: 0.015em;
  color: var(--ivory);
  margin-bottom: 1.25rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
}
.footer-social a {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--brass-dark);
  text-transform: uppercase;
  transition: color var(--transition-fast);
}
.footer-social a:hover { color: var(--brass); }

.footer-nav h3,
.footer-visit h3,
.footer-contact h3 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.25rem;
}

.footer-nav ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav a {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  color: var(--ivory-dark);
  transition: color var(--transition-fast);
}
.footer-nav a:hover { color: var(--ivory); }

.footer-visit p,
.footer-contact p {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  color: var(--ivory-dark);
  line-height: 1.75;
}
.footer-contact a {
  transition: color var(--transition-fast);
}
/* :not() here matters — .footer-reserve-link is an <a> inside .footer-contact, so
   without this exclusion this rule's extra `a` type selector out-specifies
   .footer-reserve-link:hover's own color, silently winning and leaving brass-on-brass
   (invisible) text once the link's background also turns gold on hover. */
.footer-contact a:hover:not(.footer-reserve-link) { color: var(--brass); }

/* Same metallic brass gradient as the landing hero's primary button (.btn--filled) —
   a small warm highlight standing in for a light source, over a diagonal gradient
   that runs light-dark-light-dark like brushed metal, rather than a flat fill. */
.footer-reserve-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  background:
    radial-gradient(ellipse 55% 45% at 28% 20%, rgba(255, 250, 235, 0.55) 0%, transparent 60%),
    linear-gradient(155deg, #e2a95a 0%, #d98e26 28%, #b67820 52%, #c78323 72%, #a96f1e 100%);
  border: 1px solid #a96f1e;
  padding: 9px 22px;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition: box-shadow var(--transition-fast);
}
.footer-reserve-link:hover {
  background:
    radial-gradient(ellipse 55% 45% at 28% 20%, rgba(255, 250, 235, 0.7) 0%, transparent 60%),
    linear-gradient(155deg, #eecda0 0%, #e2a95a 28%, #c78323 52%, #d98e26 72%, #b67820 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.15),
              0 0 32px rgba(217, 142, 38, 0.4);
}

.footer-bottom {
  border-top: 1px solid rgba(138, 100, 40, 0.2);
  padding-top: 1.5rem;
  text-align: center;
}
.footer-bottom p {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--brass-dark);
  text-transform: uppercase;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1500px) {
  :root {
    --container:  1440px;
    --section-v:  128px;
    --nav-height: 120px;
  }
}

@media (max-width: 900px) {
  :root {
    --section-v: 64px;
    --nav-height: 64px;
  }

  /* Mobile bar reverts to a single row, logo centered — the hamburger is pulled out of
     flow and pinned to the right edge so the logo can sit truly centered in the bar
     rather than sharing a space-between row with it. */
  .nav-inner {
    position: relative;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 0 1.25rem;
  }
  /* 60vw keeps ~19px clearance to the hamburger on a 375px phone; the 250px cap
     does the same on wider phones. ~47px tall in the 64px bar. */
  .nav-logo .logo-img { width: clamp(190px, 60vw, 250px); }

  .nav-toggle {
    display: flex;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
  }
  #nav-links { display: none; }
  #mobile-nav { display: flex; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --section-v: 48px; }

  .container { padding: 0 1.25rem; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .page-header {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: 40px;
  }
}

/* ============================================================
   COMING SOON — links to pages that aren't live yet (Menu's
   Toast embed and Reservations' Resy widget are both still
   placeholders — see docs/DESIGN_SYSTEM.md). Reads as normal,
   inviting UI at rest; only on interaction does it reveal itself
   as not-yet-available, rather than sitting permanently greyed
   out and looking broken. The real href stays in the markup for
   direct access; main.js blocks the click. */
.is-coming-soon {
  position: relative;
  cursor: not-allowed;
}
.is-coming-soon:hover,
.is-coming-soon:focus-visible,
.is-coming-soon.is-touched {
  filter: grayscale(1) brightness(0.8);
}
.coming-soon-badge {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 6px);
  white-space: nowrap;
  background: rgba(13, 11, 9, 0.97);
  /* The badge only ever shows while its parent link is greyed out by the
     hover/touch filter above — and a filter paints the whole subtree, so the
     badge is inevitably grayscaled with it. Ivory text and a mid-brass border
     are chosen for how they look AFTER grayscale(1) brightness(0.8): light-grey
     text and a visible grey outline, legible both over the bright hero mural
     and against the near-black mobile-nav overlay (where a dark pill alone
     disappears entirely). Don't "fix" these back to brass-on-dark without
     re-checking the post-filter result. */
  color: var(--ivory);
  border: 1px solid var(--brass);
  border-radius: 3px;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  z-index: 30;
}
.coming-soon-badge::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--brass);
}
.is-coming-soon:hover .coming-soon-badge,
.is-coming-soon:focus-visible .coming-soon-badge,
.is-coming-soon.is-touched .coming-soon-badge {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* In the desktop masthead the nav row sits directly beneath the wordmark, so a
   tooltip above the link lands on the logo. Flip it below the link there —
   it drops over the mural/page instead. Footer and mobile keep the default. */
#nav-links .coming-soon-badge {
  bottom: auto;
  top: calc(100% + 12px);
  transform: translate(-50%, -6px);
}
#nav-links .coming-soon-badge::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--brass);
}
/* The ID selector above out-specifies the class-based visible-state rule's
   transform, so the settled position needs restating at the same specificity. */
#nav-links .is-coming-soon:hover .coming-soon-badge,
#nav-links .is-coming-soon:focus-visible .coming-soon-badge,
#nav-links .is-coming-soon.is-touched .coming-soon-badge {
  transform: translate(-50%, 0);
}