/* ============================================================
   Concerto — Alignment System  (v2)
   Single source of truth for page-to-page layout rhythm.
   Derived from bags.html (the reference page).

   Loaded LAST in <head>, after each page's inline <style>, so it
   normalizes drift through cascade order (later wins at equal
   specificity). Remove the <link> to fully revert a page.

   Body class contract:
     .page-content  standard content page (no breadcrumb)
     .page-venue    venue detail page (breadcrumb inside hero)
     .page-tour     tour detail page (breadcrumb above hero)

   Vertical contract @ desktop:
     hero block top edge ............ 128px  (nav 68 + 60)
     h1, pages without breadcrumb ... 161px
     h1, detail pages w/ breadcrumb . 197px
   ============================================================ */

:root {
  --nav-h:        68px;   /* fixed nav height */
  --nav-total:    68px;   /* offset content must clear */
  --hero-space:   60px;   /* nav -> hero block top edge */
  --hero-bottom:  60px;   /* hero block -> first section */
  --measure:      860px;  /* hero / prose column */
  --container:    1280px; /* full content column */
  --gutter:       4%;     /* page side padding */
  --rhythm:       1.1rem; /* eyebrow / breadcrumb bottom margin */
}

/* ── 0. The hero owns the nav offset ───────────────────────────
   Several pages ALSO pad <main>, double-counting the offset and
   pushing headlines 48-128px down. The hero is the single source. */
body.page-content main,
body.page-venue   main,
body.page-tour    main { padding-top: 0; }

/* ── 1. Hero block: identical top edge on every page ─────────── */
.page-hero,
.venue-hero,
.tour-hero,
.policy-hero,
.pp-hero,
.keepsake-hero,
body.page-content .hero,
body.page-content .editorial-container {
  padding-top: calc(var(--nav-total) + var(--hero-space));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: var(--hero-bottom);
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Editorial pages (about/faq/privacy/terms) flow their body copy in
   the same wrapper, so keep the generous bottom padding and let the
   prose read left-aligned below the centered masthead. */
body.page-content .editorial-container { padding-bottom: 100px; text-align: left; }
body.page-content .editorial-container > .eyebrow,
body.page-content .editorial-container > .page-title { text-align: center; }

/* Shop uses a viewport-centered hero; drop the vertical centering so
   its headline obeys the same rhythm as every other page. */
body.page-content .hero { min-height: 0; justify-content: flex-start; }

/* Tour pages put the breadcrumb ABOVE the hero, so the breadcrumb is
   the top of the hero block and the hero itself starts flush. */
body.page-tour .breadcrumb {
  padding: calc(var(--nav-total) + var(--hero-space)) var(--gutter) 0;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
body.page-tour .tour-hero { padding-top: 0; }

/* ── 2. Breadcrumb: one consistent row ──────────────────────── */
.breadcrumb {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-xdim);
  margin: 0 0 var(--rhythm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  text-align: center;
}
.breadcrumb a { color: var(--text-xdim); text-decoration: none; transition: color .25s; }
.breadcrumb a:hover { color: var(--text); }

/* ── 3. Eyebrow: identical treatment everywhere ─────────────── */
body.page-content .eyebrow,
body.page-content .hero-eyebrow,
body.page-content .page-eyebrow,
body.page-venue   .eyebrow,
body.page-tour    .eyebrow,
body.page-content .editorial-container > .eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--rhythm);
}

/* Tour heroes carry an extra artist row. Fold it onto the eyebrow
   line ("TOUR GUIDE · BTS") so tours keep every piece of information
   while landing their headline on the same baseline as venues. */
body.page-tour .tour-eyebrow,
body.page-tour .tour-artist-name {
  display: inline;
  margin: 0;
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
body.page-tour .tour-artist-name::before {
  content: "\00B7";
  margin: 0 0.6em;
  color: var(--text-xdim);
  letter-spacing: 0;
}
body.page-tour .tour-hero { line-height: 0; }
body.page-tour .tour-eyebrow,
body.page-tour .tour-artist-name { line-height: 1.6; }
body.page-tour .tour-hero h1 { margin-top: var(--rhythm); line-height: 1.08; }
body.page-tour .tour-meta,
body.page-tour .tour-hero > p { line-height: 1.6; }

/* ── 4. Headline: one type scale, one position ──────────────── */
.page-hero h1,
.venue-hero h1,
.tour-hero h1,
.policy-hero h1,
.pp-hero h1,
.keepsake-hero h1,
body.page-content .hero h1,
body.page-content .hero .hero-title,
body.page-content .editorial-container > .page-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text);
  margin: 0 0 1.2rem;
  font-style: normal;
}

/* ── 5. Hero description ────────────────────────────────────── */
.page-hero > p,
.venue-hero > p:not(.breadcrumb),
.tour-hero > p,
.policy-hero > p,
.pp-hero > p,
body.page-content .hero > p,
body.page-content .hero .hero-desc {
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.75;
  letter-spacing: 0.01em;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}
.page-hero > p:last-child,
.venue-hero > p:last-child,
.tour-hero > p:last-child { margin-bottom: 0; }

/* Hero action buttons and tour meta sit centered under the headline */
.page-hero .hero-actions,
body.page-content .hero .hero-actions,
body.page-tour .tour-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
}

/* ── 6. Shared content column ───────────────────────────────── */
.container { max-width: var(--container); margin-left: auto; margin-right: auto;
             padding-left: var(--gutter); padding-right: var(--gutter); }
.seo-intro { max-width: var(--measure); margin-left: auto; margin-right: auto; margin-bottom: 3rem; }
.footer-inner,
.footer-bottom { max-width: var(--container); margin-left: auto; margin-right: auto; }

/* A hero nested inside .container must not double the side gutter */
.container > .page-hero,
.container > .hero { padding-left: 0; padding-right: 0; }

/* ── 7. Mobile nav menu ─────────────────────────────────────────
   Tour pages ship the .nav-mobile-menu markup with no CSS for it,
   so the hamburger links render as raw text at the top of the page
   and push all content down. Restore the reference behaviour. */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  background: rgba(248, 249, 249, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 999;
  flex-direction: column;
  padding: 2rem 6%;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-link {
  font-family: var(--body);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s;
}
.nav-mobile-link:hover { color: var(--text); }
.nav-mobile-cta { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }

/* ── 8. Responsive: mirrors the reference page ──────────────── */
@media (max-width: 768px) {
  :root {
    --nav-h:       58px;
    --nav-total:   58px;
    --hero-space:  40px;
    --hero-bottom: 40px;
    --gutter:      5%;
  }
  body.page-content .editorial-container { padding-bottom: 64px; }
}
