/* ============================================================================
   THE SITE HEADER, and the only copy of it.

   Lifted out of site.css on 2026-09-11 so /offer/ could have the nav. That
   page is a deliberate standalone: it declares its own tokens, its own type
   and its own app button, and it does NOT load site.css. Linking site.css
   into it was tried and measured first, and it restyled 217 of the page's
   764 elements (the column narrowed 48px, the trust grid dropped to 324px
   columns, the lede lost its margins), so that route was closed. Copying the
   nav into it instead would have meant ~250 duplicated lines, which is how
   the homepage's own private copy of these rules ended up without the hover
   glow every other page had.

   So the rules moved here, once, and every page with a header links this file
   NEXT TO site.css rather than instead of it. site.css keeps the a.app-cta
   rules, which are the page-level app band and not nav chrome; the two used
   to share a selector list and are now split, which is why appSheen and
   appBreathe are declared in both files.

   Depends on the tokens --navy, --line, --white, --muted, --gold,
   --gold-bright and --display, which every page carrying a nav already
   declares. Needs assets/nav.js for the phone drawer; without it the header
   falls back to a wrapping row, which is the behaviour the phone block below
   is written around.
   ========================================================================= */

/* ---------- Navigation ---------- */

/* The row carries its own link reset rather than borrowing the host page's.
   site.css has `a { color: inherit; text-decoration: none }` near the top, so
   every page that loads it was quietly supplying this; /offer/ declares its
   own reset, never zeroes text-decoration, and the nav arrived underlined. A
   stylesheet that travels has to bring what it depends on. */
.nav a { color: inherit; text-decoration: none; }

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  /* Wider than the page column since 2026-09-05, when "Our app" became the
     seventh link: at 1020px the row wrapped and dropped the app button to a
     second line on a 1440px screen. The bar is full width anyway, so the
     column it centres in can be the wide one the blog index already uses. */
  max-width: 1140px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}
/* Animated lockup logo (site-wide) — passive shine at rest, active glow on hover.
   The passive/active WebP files (canvas 1057x889) are ~73% transparent headroom, so the
   artwork is scaled up inside a fixed layout box: the visible logo stays large while the
   nav bar height (85px) is untouched. The glow is baked into the active file, so the old
   brightness/drop-shadow hover is dropped. */
/* The clickable area is the anchor box. It used to run well past the wordmark
   and hang below the nav bar into the page, so the box is shrunk and the art is
   scaled up by the same factor: 62 x 3.6852 = 96 x 2.38, so the rendered logo is
   pixel-identical and only the hit area changes. Negative margins re-tuned to keep
   the same 60px flow footprint and the same centre. */
/* THE BOX IS THE MARK, NOT THE CANVAS IT SITS ON.
 *
 * logo-text-passive.webp is 1057x889 and the artwork occupies only
 * (335,326)-(721,562) of that: about a third of the width and a quarter of the
 * height, the rest transparent. This used to size the anchor to the whole
 * canvas and then enlarge the image with transform: scale(3.6852). A transform
 * moves pixels, never the layout box or the hit area, so the link stayed a
 * 74x62 rectangle while the picture spilled to 272x228 around it. Two things
 * followed: the link answered clicks well away from anything visible, and the
 * mark hung outside the nav column rather than sitting flush in it.
 *
 * Everything now derives from --ink-h, the height the mark should appear at,
 * using the measured crop (Pillow, on the source WebP's alpha):
 *   canvas w/h = ink-h * 1057/236 and 889/236
 *   offset x/y = ink-h * 335/236 and 326/236
 *   box width  = ink-h * 386/236
 * 60px keeps the previous 60px flow footprint exactly.
 *
 * The image still overflows its anchor and must: the hover artwork carries a
 * glow reaching past the mark on every side (its alpha runs to y=281..654
 * against the resting 326..562), so overflow: hidden would shear it. What
 * bounds the hit area instead is pointer-events: none on the image, leaving
 * only the anchor's own box, which is now the mark and nothing else. */
.nav-logo {
  --ink-h: 60px;
  position: relative; display: block;
  height: var(--ink-h);
  width: calc(var(--ink-h) * 386 / 236);
  margin-right: auto;
  transition: transform 0.35s ease;
}
.nav-logo img {
  position: absolute;
  width: calc(var(--ink-h) * 1057 / 236);
  height: calc(var(--ink-h) * 889 / 236);
  /* The image is DELIBERATELY wider than its container, so the global
     img { max-width: 100% } has to be lifted here or it clamps the canvas back
     to the box and the mark shrinks to a third of its size. */
  max-width: none;
  left: calc(var(--ink-h) * -335 / 236);
  top: calc(var(--ink-h) * -326 / 236);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.nav-logo:hover { transform: scale(1.12); filter: none; }
/* The active (hover) lockup is a background inside @media (hover: hover), not a
   second <img>. It used to be an image parked at opacity 0, so every touch device
   downloaded 606 KB it could never display: hover is the only thing that reveals
   it, and touch has no hover. A background declared inside an unmatched media
   query is never fetched, which is why this is not display:none on an <img>
   (browsers fetch those anyway). Geometry matches the old .logo-b exactly, same
   box and same scale, painted above .logo-a on z-index. */
@media (hover: hover) {
  .nav-logo::before {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    width: calc(var(--ink-h) * 1057 / 236);
    height: calc(var(--ink-h) * 889 / 236);
    left: calc(var(--ink-h) * -335 / 236);
    top: calc(var(--ink-h) * -326 / 236);
    background: url("https://pub-28cfe172b1c242d6a5eaa66498cd2559.r2.dev/logo/logo-text-active.webp") center / 100% 100% no-repeat;
    opacity: 0; transition: opacity 0.35s ease;
  }
  .nav-logo:hover::before { opacity: 1; }
  /* The IMAGE, not a class on it. This was .logo-a, and the homepage's markup
     carries no class at all on its <img>, so the resting mark never faded there
     and the glow stacked on top of it instead of replacing it. */
  .nav-logo:hover img { opacity: 0; }
}
/* The /home/ click-area hack that used to sit here is gone. It set the whole
   .nav-logo to pointer-events: none and then handed a 118x112 invisible
   ::after back, to shrink a hit area that was far larger than the mark. The
   rule above solves that at the source by making the anchor the mark, and
   98x60 is a tighter and more honest target than the 118x112 patch was. */

.nav a.nav-link {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease, text-shadow 0.25s ease;
}
.nav a.nav-link:hover { color: var(--white); border-color: var(--gold); text-shadow: 0 0 14px rgba(240, 166, 33, 0.55); }
.nav a.nav-link[aria-current="page"] { color: var(--gold); border-color: var(--gold); }
.nav a.nav-cta {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 7px 12px 6px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.nav a.nav-cta:hover { background: var(--gold-bright); color: var(--navy); border-color: var(--gold-bright); box-shadow: 0 0 22px rgba(255, 216, 43, 0.45); transform: translateY(-1px); }
.nav a.nav-cta:active { background: var(--gold); border-color: var(--gold-bright); transform: translateY(0); }
/* Sticky chrome earns its keep only as one slim row. Below ~960px the
   nav wraps: two rows from about 945px down (137px tall), three on a
   phone (183px, over a fifth of an 812px viewport), and sticky meant
   that chrome covered every scroll position on every page. So under
   980px the nav stays at the top of the page and scrolls away with it;
   from 980px up it is the single 85px row and keeps riding. Measured on
   the pages whose nav carries the Book a Night item, which is all of
   them except three blog posts: one row at 970px, two at 945px. Those
   three posts hold one row down to below 845px, so on them the nav
   scrolls away a little earlier than it strictly needs to. */
@media (max-width: 979px) {
  .nav { position: static; }
}
/* Musicians became the eighth link on 2026-09-11, and an eighth link costs
   about 97px of row. Measured on /venues/ in headless Chrome: one row held to
   993px before it and only to 1090px after, which would have left the band
   from 980px to 1090px carrying a sticky bar two rows tall, riding every
   scroll position on a 1024px screen. That is the exact thing the rule above
   was written to prevent, so rather than surrender the stickiness the row
   tightens through that band and gets the width back: a smaller gap, less
   side padding, and a little off the size and letter-spacing of the links and
   the two buttons. Re-measured after: the tightened row holds one line down to
   928px, so the whole sticky band is a single row again with about 50px spare.
   Adding a ninth item means measuring this again. */
@media (min-width: 980px) and (max-width: 1160px) {
  .nav-inner { gap: 9px; padding-left: 14px; padding-right: 14px; }
  .nav a.nav-link { font-size: 0.71rem; letter-spacing: 0.055em; }
  .nav a.nav-cta { font-size: 0.76rem; letter-spacing: 0.09em; padding: 7px 9px 6px; }
  .nav a.nav-app { font-size: 0.76rem; letter-spacing: 0.09em; padding: 8px 11px 7px; }
  .nav a.nav-app .app-arrow { margin-left: 5px; }
}
@media (max-width: 760px) {
  .nav-inner { gap: 14px; }
  .nav a.nav-link { font-size: 0.74rem; letter-spacing: 0.1em; }
}

/* ---------- The venue app, nav version ----------
   The a.app-cta half of these rules stayed in site.css with the app band. */
.nav a.nav-app {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  box-shadow: 0 0 0 rgba(240, 166, 33, 0);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.nav a.nav-app:hover {
  background: var(--gold-bright);
  box-shadow: 0 0 26px rgba(255, 216, 43, 0.5), 0 0 0 1px rgba(255, 216, 43, 0.35) inset;
  transform: translateY(-1px);
}
.nav a.nav-app:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
.nav a.nav-app::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: -1;
  pointer-events: none;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: appSheen 4.6s ease-in-out infinite;
}
.nav a.nav-app .app-arrow {
  display: inline-block;
  margin-left: 7px;
  transition: transform 0.25s ease;
}
.nav a.nav-app:hover .app-arrow { transform: translateX(4px); }
/* The nav version: compact, and on every page because the nav is. */
.nav a.nav-app {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  padding: 8px 15px 7px;
  animation: appBreathe 3.4s ease-in-out infinite;
}

@keyframes appSheen {
  0%, 62% { left: -60%; }
  88%, 100% { left: 125%; }
}
@keyframes appBreathe {
  0%, 100% { box-shadow: 0 0 0 rgba(240, 166, 33, 0); }
  50% { box-shadow: 0 0 20px rgba(240, 166, 33, 0.55); }
}

@media (max-width: 760px) {
  .nav a.nav-app { font-size: 0.74rem; letter-spacing: 0.1em; padding: 7px 12px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav a.nav-app::after { display: none; }
}

/* ---------- The header on a phone ----------------------------------------
   Three lines until you open it, then a drawer that travels in from the right.
   See /assets/nav.js, which builds the button and the drawer from the links
   already in the nav.

   EVERY RULE HERE IS GATED ON [data-nav="enhanced"], which that script sets
   only once the drawer exists. Without JavaScript the header is exactly what it
   was: a nav that wraps onto three rows. Hiding the links unconditionally and
   trusting a script to give them back is how a blocked script becomes a site
   nobody can navigate.

   760px is the existing breakpoint in this file, reused rather than invented:
   it is where the row was already being squeezed to 0.74rem to fit. */

.nav-burger { display: none; }

@media (max-width: 760px) {
  .nav[data-nav="enhanced"] .nav-inner > .nav-link,
  .nav[data-nav="enhanced"] .nav-inner > .nav-cta,
  .nav[data-nav="enhanced"] .nav-inner > .nav-app {
    display: none;
  }
  .nav[data-nav="enhanced"] .nav-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .nav[data-nav="enhanced"] .nav-burger {
    display: grid;
    place-items: center;
    /* 44px square: a control smaller than a thumb is a control pressed twice. */
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--white);
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease;
  }
  .nav[data-nav="enhanced"] .nav-burger:hover,
  .nav[data-nav="enhanced"] .nav-burger:focus-visible {
    border-color: var(--gold);
    color: var(--gold);
  }
}

.nav-burger-bars {
  display: block;
  position: relative;
  width: 19px;
  height: 13px;
}
.nav-burger-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.26s ease, opacity 0.18s ease, top 0.26s ease;
}
.nav-burger-bars span:nth-child(1) { top: 0; }
.nav-burger-bars span:nth-child(2) { top: calc(50% - 1px); }
.nav-burger-bars span:nth-child(3) { top: calc(100% - 2px); }
/* Three lines fold into a cross: the outer two travel to the middle and cross,
   the middle one fades out under them. */
.nav-burger[aria-expanded="true"] .nav-burger-bars span:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger-bars span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-bars span:nth-child(3) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(3, 7, 18, 0.66);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.26s ease;
}
.nav-scrim.is-open { opacity: 1; }

.nav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  display: flex;
  flex-direction: column;
  background: var(--navy, #0f172a);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(3, 7, 18, 0.55);
  padding: 18px 22px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-scrim.is-open .nav-drawer { transform: translateX(0); }

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.nav-drawer-title {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-drawer-close {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 13px;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.nav-drawer-close:hover,
.nav-drawer-close:focus-visible { border-color: var(--gold); color: var(--gold); }

.nav-drawer-links { display: flex; flex-direction: column; padding: 6px 0; }
.nav-drawer-link {
  display: block;
  padding: 15px 2px;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.25s ease;
}
.nav-drawer-link:last-child { border-bottom: 0; }
.nav-drawer-link:hover,
.nav-drawer-link:focus-visible { color: var(--gold); }
.nav-drawer-link[aria-current="page"] { color: var(--gold); }
/* The two calls to action keep their weight without keeping their fill: a
   stacked list of solid gold buttons reads as three equal shouts. */
.nav-drawer-link-cta { color: var(--gold); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .nav-scrim,
  .nav-drawer,
  .nav-burger-bars span { transition: none; }
}