/* ==========================================================================
   PULSE — the header and the phone menu.

   Transparent over the hero photograph, and a compact dark bar once the page
   has entered the event system. Not a floating pill: a full-width rule that
   thickens, which is what the brief asks for and what keeps the wordmark on the
   same left edge as every headline underneath it.

   core/header.js owns the state (.is-compact, the menu's focus trap and scroll
   lock). This file owns only what those states look like — which is the whole
   point of the core being parameterised rather than forked.
   ========================================================================== */
.head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.2vw, 1.6rem) var(--gut);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--snap), border-color var(--snap),
              padding var(--snap);
}
.head.is-compact {
  padding-block: 0.7rem;
  background: color-mix(in srgb, var(--night) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}

/* --- the wordmark ----------------------------------------------------------
   One subtle interruption in the letter-spacing rather than a heartbeat glyph:
   a 2px bar sits in the gap between PULSE and CURAÇAO and grows by 4px when the
   header compacts. That is the beat, and it is the only thing in the mark. */
.head__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.head__cut {
  width: 2px;
  height: 0.85em;
  background: var(--glow);
  transition: height var(--snap), background-color var(--snap);
}
.head.is-compact .head__cut { height: 1.15em; }
.head__place {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.2em;
  color: var(--ink-dim);
}

/* --- navigation ------------------------------------------------------------ */
.head__nav {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}
.head__nav a {
  position: relative;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-block: 0.4rem;
  transition: color var(--cut);
}
.head__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--glow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--snap);
}
.head__nav a:hover, .head__nav a:focus-visible { color: var(--ink); }
.head__nav a:hover::after, .head__nav a:focus-visible::after { transform: scaleX(1); }

/* --- the ticket button ----------------------------------------------------- */
.head__ticket {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--bone);
  cursor: pointer;
  transition: background-color var(--cut), color var(--cut);
}
.head__ticket:hover, .head__ticket:focus-visible {
  background: var(--acid);
}
.head__arrow { transition: transform var(--snap); }
.head__ticket:hover .head__arrow { transform: translateX(3px); }

/* --- the toggle ------------------------------------------------------------ */
.head__toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 0.2rem 0.6rem 0.9rem;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.head__toggleClose { display: none; }
.is-menu-open .head__toggleOpen { display: none; }
.is-menu-open .head__toggleClose { display: inline; }

/* --- tone ------------------------------------------------------------------
   core/header.js mirrors the [data-head-tone] of whatever is under the header
   onto the header itself. Over a photograph the bar keeps a soft dark wash so
   the wordmark survives a bright sunset; over ink it needs nothing. */
.head[data-tone="photo"]:not(.is-compact) {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--night) 62%, transparent), transparent);
}

/* --- the phone menu --------------------------------------------------------
   A full-screen event index, not a drawer. No animation gimmicks: it cuts in. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 6rem var(--gut) 3rem;
  background: var(--night);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--cut), visibility 0s linear var(--cut);
}
.is-menu-open .menu {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--cut), visibility 0s;
}
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(1.9rem, 9vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.menu__no {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--glow);
}
.menu__descriptor { color: var(--ink-faint); }

@media (max-width: 899px) {
  .head { grid-template-columns: 1fr auto auto; }
  .head__nav { display: none; }
  .head__toggle { display: inline-flex; align-items: center; }
  .head__ticket { padding-inline: 0.9rem; }
  .head__arrow { display: none; }
}
/* CURAÇAO still fits beside PULSE at 390px, and the beat bar without it reads
   as a stray mark; below 360 both go rather than just the word. */
@media (max-width: 359px) {
  .head__place, .head__cut { display: none; }
}