/* ==========================================================================
   CALIGOBI 2026 — global.css
   Shared design system: tokens, type, ornaments, header, footer, buttons.
   Page-specific rules live in css/<page>.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Webfont
   BobbiTheHippie is the festival's display face — the one the posters are set
   in. The kit ships .woff alongside .eot/.svg; only the .woff is referenced,
   as the other two target browsers (IE8, iOS 4 Safari) this site never sees.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "BobbiTheHippie";
  src: url("../assets/webfonts_BobbiTheHippie/BobbiTheHippie.ttf.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Desert sand — the festival's base warmth */
  --sand-50:  #faf6ee;
  --sand-100: #f4ece0;
  --sand-200: #e9dbc6;
  --sand-300: #d9c3a2;
  --sand-400: #c2a67e;
  --sand-500: #a4855d;

  /* Night sky over the Gobi */
  --navy-950: #070d18;
  --navy-900: #0b1526;
  --navy-800: #102038;
  --navy-700: #16304f;
  --navy-600: #1d4370;
  --navy-500: #275a94;

  /* Bluebugs Entertainment — the company blue, now the pack blue */
  --bluebugs:      #0e3db4;
  --bluebugs-deep: #0a2c83;
  --bluebugs-mist: #e7ecf9;

  /* Burgundy — deel silk, dried earth */
  --wine-900: #3d1116;
  --wine-800: #57191f;
  --wine-700: #6e1f27;
  --wine-600: #8a2f33;
  --wine-500: #a8514a;

  /* Gold — brass, brocade, low sun */
  --gold-600: #8c6516;
  --gold-500: #b48524;
  --gold-400: #c9a227;
  --gold-300: #e0c063;
  --gold-200: #f0dda2;

  /* Dark warm brown — the footer's ground */
  --brown-950: #2b2018;

  /* --- Brand pack ------------------------------------------------------ */
  --pack-white:  #ffffff;
  --pack-cream:  #f0e7cf;
  --pack-red:    #f35027;
  --pack-blue:   #0e3db4;
  --pack-black:  #000000;

  --black: var(--pack-black);
  --white: var(--pack-white);

  /* Semantic */
  --bg:        var(--sand-50);
  --bg-deep:   var(--navy-950);
  --ink:        var(--pack-black);          /* body copy on light */
  --ink-soft:   rgba(0, 0, 0, 0.66);        /* secondary copy on light */
  --ink-invert: var(--pack-cream);          /* copy on dark */
  --heading:    var(--pack-blue);           /* headings on light */
  --heading-invert: var(--pack-cream);      /* headings on dark */
  --accent:     var(--pack-red);            /* eyebrows, kickers, links */
  --line:      rgba(11, 21, 38, 0.14);
  --line-invert: rgba(240, 221, 162, 0.22);

  /* Gradients */
  --grad-dune:   linear-gradient(165deg, var(--sand-100) 0%, var(--sand-200) 45%, var(--sand-300) 100%);
  --grad-dusk:   linear-gradient(180deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--wine-900) 100%);
  --grad-ember:  linear-gradient(135deg, var(--wine-800) 0%, var(--wine-600) 50%, var(--gold-500) 140%);
  --grad-brass:  linear-gradient(100deg, var(--gold-600) 0%, var(--gold-300) 42%, var(--gold-200) 55%, var(--gold-400) 78%, var(--gold-600) 100%);
  --grad-veil:   linear-gradient(180deg, rgba(7,13,24,0) 0%, rgba(7,13,24,0.55) 55%, rgba(7,13,24,0.94) 100%);

  /* Type */
  /* BobbiTheHippie is self-hosted and leads the display stack, in place of the
     licensed Ars Nova / Modesto. Cormorant Garamond and Cinzel load from
     Google Fonts and carry the body copy and the fallbacks. */
  --font-display: "BobbiTheHippie", "Cinzel", "Cormorant Garamond", Georgia, serif;
  --font-label:   "BobbiTheHippie", "Cinzel", Georgia, serif;
  --font-body:    "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* Rhythm */
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);

  --radius: 2px;
  --radius-card: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  /* Cormorant Garamond sets small and light, so body copy is a step larger
     and a weight heavier than a sans would need at the same measure. */
  font-size: clamp(1.15rem, 1.06rem + 0.34vw, 1.3rem);
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

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

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

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.05; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

::selection { background: var(--gold-400); color: var(--ink); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.display,
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}

h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0;
}

/* Headings take the brand blue on the light surfaces only. Everywhere dark —
   the hero, the night sections, the footer — they inherit the cream from the
   surface, so the blue never lands on a dark ground where it cannot be read. */
.tone-sand :is(h1, h2, h3, h4),
.tone-dune :is(h1, h2, h3, h4) { color: var(--heading); }

/* BobbiTheHippie carries much deeper descenders and taller ascenders than the
   Cinzel these were first set against, so the display lines need more leading
   than they did. Measured on the tightest pairs on the site — "Feel the pulse /
   of the CaliGobi" and "Three days. One desert. / One unforgettable gathering."
   — 0.98–1.0 put the descenders 2px INTO the caps below. 1.15 clears both. */
.t-hero    { font-size: clamp(3rem, 10.5vw, 8.75rem); line-height: 1.15; }
.t-section { font-size: clamp(2.1rem, 5.4vw, 4.25rem); line-height: 1.15; }
.t-sub     { font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.18; }
.t-card    { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.2; }

/* Eyebrow / kicker labels — the condensed voice of the brand */
.eyebrow {
  font-family: var(--font-label);
  font-size: clamp(0.78rem, 1.05vw, 0.94rem);
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.7;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.7;
}
.eyebrow--bare::before, .eyebrow--bare::after { display: none; }

/* Meta line: dates / venue strips */
.meta {
  font-family: var(--font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  line-height: 1.35;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
}

.gold-text { color: var(--accent); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide   { max-width: 1560px; }

/* The UA sheet hides [hidden] already, but any author rule that sets
   `display` would beat it. This keeps the attribute reliable as an
   on/off switch for whole sections. */
[hidden] { display: none !important; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { text-align: center; }
.section-head--center .lede { margin-inline: auto; }

/* Tone surfaces */
.tone-sand  { background: var(--bg); color: var(--ink); }
.tone-dune  { background: var(--grad-dune); color: var(--ink); }
.tone-night { background: var(--navy-950); color: var(--ink-invert); }
.tone-dusk  { background: var(--grad-dusk); color: var(--ink-invert); }
.tone-wine  { background: var(--wine-900); color: var(--ink-invert); }

.tone-night .eyebrow, .tone-dusk .eyebrow, .tone-wine .eyebrow { color: var(--accent); }
.tone-night .lede,     .tone-dusk .lede,     .tone-wine .lede   { color: rgba(244, 236, 224, 0.78); }

/* --------------------------------------------------------------------------
   5. Ornaments — Mongolian cloud scroll (üülen khee), horn pattern, ulzii
   Masked SVGs so any element can be tinted by `background`.
   -------------------------------------------------------------------------- */
.orn {
  --orn-color: var(--gold-400);
  /* These are sized decorative boxes — as inline spans their width and
     height would be ignored outside a flex or absolute context. */
  display: block;
  background: var(--orn-color);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Divider rules (assets/img/line1-3.png) — a plain rule carrying ulzii
   medallions: one cluster, three, or seven. These separate the sections.
   Cropped to their ink box, then painted as masks so each surface can tint
   them; the supplied artwork is already the pack terracotta, which is what
   --accent resolves to by default.
   -------------------------------------------------------------------------- */
.orn-line {
  --orn-color: var(--accent);
  width: 100%;
  aspect-ratio: 3150 / 86;
  background: var(--orn-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

.orn-line--1 {
  -webkit-mask-image: url("../assets/img/line1-rule.png");
  mask-image: url("../assets/img/line1-rule.png");
}
.orn-line--2 {
  -webkit-mask-image: url("../assets/img/line2-rule.png");
  mask-image: url("../assets/img/line2-rule.png");
}
.orn-line--3 {
  -webkit-mask-image: url("../assets/img/line3-rule.png");
  mask-image: url("../assets/img/line3-rule.png");
}

/* On a phone the full rule is only ~11px tall, which shrinks the medallions to
   specks — seven of them across 390px reads as clutter rather than ornament.
   Below 760px the height is fixed instead and the mask scales to it, so the
   line still runs edge to edge but only the middle few medallions show, at
   their proper size. 22px matches the natural height at the breakpoint, so the
   handover is invisible. */
@media (max-width: 760px) {
  .orn-line {
    aspect-ratio: auto;
    height: 22px;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
  }
}


/* Tribal rule — diamond + step band, seamless 96x24 */
.orn-rule {
  height: 20px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M0 12 H8 L14 6 L20 12 L14 18 Z M20 12 H28'/%3E%3Cpath d='M28 6 H36 V12 H44 V18 H52 V12 H60 V6 H68'/%3E%3Cpath d='M68 12 H74 L80 6 L86 12 L80 18 Z M86 12 H96'/%3E%3Ccircle cx='14' cy='12' r='1.6' fill='%23000' stroke='none'/%3E%3Ccircle cx='80' cy='12' r='1.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M0 12 H8 L14 6 L20 12 L14 18 Z M20 12 H28'/%3E%3Cpath d='M28 6 H36 V12 H44 V18 H52 V12 H60 V6 H68'/%3E%3Cpath d='M68 12 H74 L80 6 L86 12 L80 18 Z M86 12 H96'/%3E%3Ccircle cx='14' cy='12' r='1.6' fill='%23000' stroke='none'/%3E%3Ccircle cx='80' cy='12' r='1.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
}

/* Ulzii knot + horn corner — fixed-size marks */
.orn-ulzii {
  width: 72px; height: 72px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M40 16 V40 H16 V56 H40 V80 H56 V104 H72 V80 H96 V64 H72 V40 H56 V16 Z'/%3E%3Cpath d='M60 30 V60 H30' opacity='0.55'/%3E%3Cpath d='M60 90 V60 H90' opacity='0.55'/%3E%3Crect x='6' y='6' width='108' height='108' rx='10' stroke-width='2' opacity='0.35'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M40 16 V40 H16 V56 H40 V80 H56 V104 H72 V80 H96 V64 H72 V40 H56 V16 Z'/%3E%3Cpath d='M60 30 V60 H30' opacity='0.55'/%3E%3Cpath d='M60 90 V60 H90' opacity='0.55'/%3E%3Crect x='6' y='6' width='108' height='108' rx='10' stroke-width='2' opacity='0.35'/%3E%3C/svg%3E");
}

.orn-horn {
  width: 92px; height: 92px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4 H60'/%3E%3Cpath d='M4 4 V60'/%3E%3Cpath d='M4 22 C36 22 60 34 68 60 C74 80 66 96 50 98 C38 99 30 91 30 80 C30 71 36 65 44 65 C50 65 55 70 55 76'/%3E%3Cpath d='M22 4 C22 30 30 46 50 56' opacity='0.6'/%3E%3Ccircle cx='47' cy='76' r='2.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4 H60'/%3E%3Cpath d='M4 4 V60'/%3E%3Cpath d='M4 22 C36 22 60 34 68 60 C74 80 66 96 50 98 C38 99 30 91 30 80 C30 71 36 65 44 65 C50 65 55 70 55 76'/%3E%3Cpath d='M22 4 C22 30 30 46 50 56' opacity='0.6'/%3E%3Ccircle cx='47' cy='76' r='2.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.orn-horn--tr { transform: scaleX(-1); }
.orn-horn--bl { transform: scaleY(-1); }
.orn-horn--br { transform: scale(-1); }

/* A centered divider: rule — ulzii — rule */
.divider {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  color: var(--accent);
}
.divider .orn-rule { flex: 1; --orn-color: currentColor; opacity: 0.55; }
.divider .orn-ulzii { --orn-color: currentColor; width: 46px; height: 46px; flex: none; }

/* Corner-framed block */
.framed { position: relative; }
.framed > .orn-horn {
  position: absolute;
  --orn-color: var(--gold-400);
  opacity: 0.45;
  width: 68px; height: 68px;
}
.framed > .orn-horn:nth-of-type(1) { top: 0; left: 0; }
.framed > .orn-horn:nth-of-type(2) { top: 0; right: 0; }
.framed > .orn-horn:nth-of-type(3) { bottom: 0; left: 0; }
.framed > .orn-horn:nth-of-type(4) { bottom: 0; right: 0; }

/* Grain overlay for photographic sections */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-950);
  --btn-fg: var(--sand-100);
  --btn-line: var(--navy-950);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  padding: 1.05em 2.3em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(0.86rem, 1.05vw, 0.98rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

/* Sweep fill on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-brass);
  transform: translateY(101%);
  transition: transform 0.42s var(--ease);
  z-index: -1;
}

.btn:hover, .btn:focus-visible {
  color: var(--ink);
  border-color: var(--gold-400);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn .btn-arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Variants */
.btn--gold {
  --btn-bg: var(--gold-400);
  --btn-fg: var(--navy-950);
  --btn-line: var(--gold-400);
}
.btn--gold::before { background: var(--navy-950); }
.btn--gold:hover, .btn--gold:focus-visible { color: var(--accent); border-color: var(--navy-950); }

.btn--wine {
  --btn-bg: var(--wine-700);
  --btn-fg: var(--sand-100);
  --btn-line: var(--wine-700);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-line: currentColor;
}
.btn--ghost { border-color: rgba(240, 221, 162, 0.5); }
.tone-sand .btn--ghost, .tone-dune .btn--ghost { border-color: rgba(11, 21, 38, 0.28); }

.btn--sm { padding: 0.8em 1.5em; letter-spacing: 0.16em; font-size: 0.9rem; }
.btn--lg { padding: 1.25em 3em; }
.btn--block { display: flex; width: 100%; }

/* Text link with animated underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.98rem;
  padding-bottom: 0.25em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
}
.link:hover { color: var(--accent); background-size: 0% 1px; }
.tone-night .link:hover, .tone-dusk .link:hover, .tone-wine .link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Scrim that keeps the nav legible over hero imagery before it sticks */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(7,13,24,0.72) 0%, rgba(7,13,24,0) 100%);
  opacity: 1;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

/* The stuck background and blur live on their own layer rather than on
   .site-header itself. An element with backdrop-filter becomes the containing
   block for its position:fixed descendants — putting it on the header would
   trap the mobile nav drawer inside the header's own 66px box the moment the
   page is scrolled, instead of letting it fill the screen. */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(7, 13, 24, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.site-header.is-stuck { border-bottom-color: rgba(240, 221, 162, 0.16); }
.site-header.is-stuck::before { opacity: 0; }
.site-header.is-stuck::after  { opacity: 1; }

.header-inner {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  position: relative;
  z-index: 1;   /* above the header's scrim and blur layers */
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
}

/* The Bluebugs beetle is navy artwork on transparency. Painting it as a mask
   rather than an <img> lets it stay legible on the dark header, and lets it
   pick up the gold on hover. */
.brand-mark {
  width: 52px;
  height: 52px;
  flex: none;
  background: var(--sand-100);
  -webkit-mask-image: url("../assets/img/logo-bluebugs-alpha.png");
  mask-image: url("../assets/img/logo-bluebugs-alpha.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background 0.35s var(--ease);
}

.brand:hover .brand-mark { background: var(--gold-300); }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.1vw, 2.1rem); }

.nav a {
  font-family: var(--font-label);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-invert);
  position: relative;
  padding-block: 0.4rem;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav a:hover { color: var(--accent); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--accent); }

.header-cta { flex: none; }

/* The in-drawer ticket button only exists for the mobile menu */
.nav .nav-cta { display: none; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid rgba(240, 221, 162, 0.35);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  place-items: center;
  flex: none;
}

.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--sand-100);
  position: relative;
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 1.5px;
  background: var(--sand-100);
  transition: transform 0.35s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--brown-950);
  color: var(--ink-invert);
  position: relative;
  padding-top: 0;
  overflow: hidden;
}

/* The ger-camp line art from the poster, sitting on the rule above the
   copyright row and centred on it — it lives inside .wrap for that.
   Cropped to the artwork's ink box (1105x188) so one instance carries the
   whole camp with no tiling and no empty canvas margin. Painted as a mask
   rather than an <img> so the dark artwork can be tinted light enough to read
   against the brown. */
.footer-doodle {
  /* One instance, sitting at 90% of the rule's width and centred on it. The
     aspect ratio is the cropped artwork's own, so height follows width and the
     drawing is never squashed. */
  width: 90%;
  margin-inline: auto;
  aspect-ratio: 1105 / 188;
  background: var(--sand-200);
  opacity: 0.34;
  -webkit-mask-image: url("../assets/img/poster-doodle-strip.png");
  mask-image: url("../assets/img/poster-doodle-strip.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

.footer-line {
  --orn-color: var(--accent);
  opacity: 0.75;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.footer-mark {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 0.95;
  margin-bottom: 0.6rem;
  color: var(--ink-invert);
}

.footer-tagline {
  font-family: var(--font-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.86rem;
  color: var(--accent);
  margin-bottom: 1.4rem;
  line-height: 1.6;
}

.footer-address {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(233, 219, 198, 0.72);
}

.footer-col h4 {
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
  font-weight: 400;
}

.footer-col li { margin-bottom: 0.55rem; }
.footer-col a {
  font-size: 0.98rem;
  color: rgba(233, 219, 198, 0.82);
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.footer-col a:hover { color: var(--accent); padding-left: 5px; }

.footer-bottom {
  border-top: 1px solid rgba(240, 221, 162, 0.14);
  padding-block: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
  color: rgba(233, 219, 198, 0.55);
}

.footer-social { display: flex; gap: 1.3rem; }
.footer-social a {
  font-family: var(--font-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease);
}
.footer-social a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   9. Shared components
   -------------------------------------------------------------------------- */

/* Image card with hover reveal — used on lineup & home */
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-900);
  isolation: isolate;
}

.card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.card-media img, .card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.92) contrast(1.04);
}

/* For a tall portrait dropped into a wide cell, a centred crop lands on the
   subject's body and cuts their head off. Bias the crop towards the top. */
.card-media--top img, .card-media--top video { object-position: 50% 16%; }

.card:hover .card-media img, .card:hover .card-media video {
  transform: scale(1.07);
  filter: saturate(1.08) contrast(1.06);
}

.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-veil);
  transition: opacity 0.5s var(--ease);
}

.card-body {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  /* Above the placeholder cards' centred ulzii (2) and their "Photo coming"
     pill (3). On a short card the mark reaches into the copy, and the copy
     has to win. */
  z-index: 4;
  color: var(--ink-invert);
}

.card-kicker {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}

.card-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  /* Card titles wrap ("Morin Khuur & Shanz"), so they need the same extra
     leading the rest of the display scale does. */
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.card-note {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(244, 236, 224, 0.78);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin-top 0.5s var(--ease);
}

.card:hover .card-note, .card:focus-within .card-note {
  max-height: 7rem;
  opacity: 1;
  margin-top: 0.3rem;
}

/* Split row: media one side, copy the other. Used on Home and Experience. */
.split-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.split--reverse .split-media { order: 2; }

.split-media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
}

.split-media img,
.split-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.split-media:hover img { transform: scale(1.04); }

.split-mark {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  --orn-color: var(--gold-200);
  width: 58px; height: 58px;
  opacity: 0.75;
  mix-blend-mode: overlay;
}

.split-body .lede { margin-bottom: 1.75rem; }
.split-body .keywords { margin-top: 0.5rem; }

@media (max-width: 900px) {
  .split-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .split--reverse .split-media { order: 0; }
  .split-media { aspect-ratio: 4 / 3; max-height: none; }
}

/* --------------------------------------------------------------------------
   Placeholder cards — acts whose photography has not arrived yet.
   Rather than a washed-out stock image, these get a woven treatment: a warm
   ground, a tiled cloud scroll and a centred ulzii. Each one is tinted a
   little differently so a row of them still reads as designed.
   -------------------------------------------------------------------------- */
.card--placeholder .card-media {
  --ph-a: var(--wine-800);
  --ph-b: var(--gold-600);
  background: linear-gradient(150deg, var(--ph-a) 0%, var(--ph-b) 130%);
}

.card--placeholder .card-media img {
  opacity: 0.3;
  mix-blend-mode: luminosity;
  filter: contrast(1.2) brightness(0.85);
}

/* A single divider rule beneath the centred mark, in place of the tiled
   cloud weave this card used to carry. */
.card--placeholder .card-media::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 63%;
  z-index: 1;
  aspect-ratio: 3150 / 86;
  opacity: 0.5;
  background: var(--sand-100);
  -webkit-mask-image: url("../assets/img/line1-rule.png");
  mask-image: url("../assets/img/line1-rule.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Centred mark */
.card--placeholder .card-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  --orn-color: var(--gold-200);
  width: 44%;
  height: 44%;
  max-width: 128px;
  max-height: 128px;
  opacity: 0.5;
  -webkit-mask-position: center;
  mask-position: center;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}

.card--placeholder:hover .card-mark { opacity: 0.72; transform: rotate(45deg); }

/* "Photo coming" tag */
.card--placeholder::after {
  content: "Photo coming";
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 3;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(240, 221, 162, 0.4);
  padding: 0.3em 0.7em;
  border-radius: 100px;
  background: rgba(7, 13, 24, 0.5);
}

/* Rotate the tint so a row of placeholders never repeats itself */
.card--placeholder:nth-of-type(3n + 2) .card-media {
  --ph-a: var(--navy-800);
  --ph-b: var(--wine-600);
}
.card--placeholder:nth-of-type(3n) .card-media {
  --ph-a: var(--sand-500);
  --ph-b: var(--wine-800);
}

/* Pill / tag */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 1em;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.pill--solid { background: var(--gold-400); border-color: var(--gold-400); color: var(--ink); }
.pill--wine  { background: var(--wine-700); border-color: var(--wine-700); color: var(--ink-invert); }

/* Keyword row: MUSIC · FIRE · DANCE */
.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-family: var(--font-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: clamp(0.85rem, 1.15vw, 1.02rem);
  color: var(--accent);
}
.keywords li { display: flex; align-items: center; gap: 1.4rem; }
.keywords li:not(:last-child)::after { content: "·"; opacity: 0.6; }
.tone-night .keywords, .tone-dusk .keywords, .tone-wine .keywords { color: var(--accent); }

/* --------------------------------------------------------------------------
   10. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(0.94); }

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background: var(--gold-400);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack-sm > * + * { margin-top: 0.75rem; }
.stack   > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 2.5rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
}
.actions--center { justify-content: center; }

/* Page hero shared by inner pages */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(4rem, 9vw, 8rem));
  padding-bottom: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
  background: var(--grad-dusk);
  color: var(--ink-invert);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: saturate(0.85);
}
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,13,24,0.82) 0%, rgba(7,13,24,0.55) 50%, rgba(7,13,24,0.95) 100%);
}

.page-hero .wrap { position: relative; z-index: 1; }

.page-hero__meta {
  font-family: var(--font-label);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 1.1vw, 0.95rem);
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.page-hero h1 { margin-bottom: 1.2rem; }

.page-hero .lede { color: rgba(244, 236, 224, 0.8); }

/* Bottom cloud edge on page heroes */
.page-hero .orn-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  --orn-color: var(--accent);
  opacity: 0.8;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --header-h: 66px; }

  .nav-toggle { display: grid; order: 3; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    background: var(--navy-950);
    padding: 2rem var(--gutter) 4rem;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
    overflow-y: auto;
  }

  body.nav-open .nav { transform: translateX(0); }

  .nav a {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    letter-spacing: 0.1em;
    padding-block: 0.7rem;
    border-bottom: 1px solid rgba(240, 221, 162, 0.12);
    width: 100%;
  }
  .nav a::after { display: none; }

  .header-cta { display: none; }

  .nav .nav-cta {
    display: block;
    margin-top: 2rem;
    border: 0;
    color: var(--ink);
    background: var(--grad-brass);
    text-align: center;
    padding: 1rem;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
  }
}

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Sideways reveals become vertical once the layout stacks — on a narrow
   screen the horizontal offset is both pointless and wider than the page. */
@media (max-width: 720px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(26px); }
}

@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}