/* =========================================================
   v6.css — the info site in the teaser's language
   =========================================================
   Scoped to 6.html. Loads last: styles.css -> brand.css -> phase3.css ->
   phase4.css -> /lab/layouts/three-acts.css -> v6.css.

   The teaser (the live home page) reads as a poster: full-bleed white, black
   and red panels, big left-aligned display type, uppercase tracked meta, the
   dotted red route. This sheet carries that past the hero:
     - every section is a colour block (.blk-white / -grey / -black / -red)
     - section heads are display type with a route-cube index
     - bordered cards and fact lists become ruled, typographic rows
   Nothing here touches the teaser's files; three-acts.css is reused as is.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* the header carries a seven-item nav beside the lockup (as on v5), so the
     lockup stays at v5's size rather than the teaser's */
  --logo-h: clamp(40px, 3.4vw, 52px);
  --header-h: calc(var(--logo-h) + 28px);
  /* three-acts.css turns the tab bar off for the launch wave; this page has
     the full section list, so it comes back on phones */
  --tabbar-h: 62px;
  --blk-pad: clamp(72px, 9vw, 136px);
  --display: clamp(2.75rem, 6.4vw, 6.5rem);
  --display-sm: clamp(2rem, 3.6vw, 3.25rem);
  --on-dark-muted: #a3a3a3;   /* 8.4:1 on black */
  --on-dark-line: rgba(255, 255, 255, 0.22);
}
@media (max-width: 860px) {
  body { padding-bottom: var(--tabbar-h); }
}

/* ---------- 2. Header ---------- */
.nav { gap: clamp(14px, 1.8vw, 28px); }
.nav a { letter-spacing: 0.1em; }
.nav .btn-sm { letter-spacing: 0.04em; }

/* ---------- 3. Colour blocks ---------- */
.blk { position: relative; padding-block: var(--blk-pad); }
.blk-white { background: var(--white); color: var(--black); }
.blk-grey  { background: var(--grey-bg); color: var(--black); }
.blk-black { background: var(--black); color: var(--white); }
/* on red, small type is black (5.3:1); white only at display size (4:1, large) */
.blk-red   { background: var(--red); color: var(--black); }

.blk-black .text-muted { color: var(--on-dark-muted); }
.blk-red .text-muted { color: var(--black); }

/* ---------- 4. Section heads ---------- */
.sec-head { margin-bottom: clamp(44px, 6vw, 88px); }

/* the index: a route cube, a number, a name */
.sec-index {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: clamp(18px, 2.2vw, 30px);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
}
.sec-index::before { content: ""; width: 12px; height: 12px; background: currentColor; flex: none; }
.sec-index .sec-num { font-variant-numeric: tabular-nums; }
.sec-index .sec-num::after { content: "\2014"; margin-left: 12px; opacity: 0.6; }
.blk-red .sec-index { color: var(--black); }

.display {
  font-size: var(--display);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 12em;
}
.display-sm {
  font-size: var(--display-sm);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.blk-red .display, .blk-red .display-sm { color: var(--white); }

/* lede on the left, meta lines on the right, under the headline */
.sec-sub {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 64px; align-items: start;
  margin-top: clamp(28px, 3.4vw, 52px);
}
.sec-lede { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; max-width: 34em; }

/* the teaser's meta: bold, uppercase, tracked, one line each */
.sec-facts {
  display: flex; flex-direction: column; gap: 0.45em;
  font-size: clamp(1rem, 1.35vw, 1.25rem); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3;
}
.sec-facts .is-accent { color: var(--red); }
.blk-red .sec-facts .is-accent { color: var(--white); }

.label {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}

/* ---------- 5. Buttons on colour ---------- */
.blk-red .btn-white:focus-visible { outline-color: var(--black); }
.blk-black .btn-outline { color: var(--white); border-color: var(--white); }
.blk-black .btn-outline:hover { background: var(--white); color: var(--black); }

/* ---------- 6. Intro ---------- */
.intro6 .intro-photo { margin: 0 0 clamp(56px, 7vw, 104px); }
.intro6 .sec-head { margin-bottom: 0; }

/* ---------- 7. Map ---------- */
.map-wrap { gap: clamp(32px, 4vw, 64px); }
.map-frame { border: 0; padding: 0; background: var(--white); }
.map-svg text { font-family: var(--font); letter-spacing: 0.1em; }
.legend { border-top: 2px solid var(--black); margin-top: 12px; }
.legend li {
  border-bottom-color: #d6d6d6; padding: 14px 12px 14px 0;
  transition: padding 0.15s ease, color 0.15s ease;
}
.legend li:hover, .legend li.is-active { background: none; padding-left: 10px; box-shadow: inset 3px 0 0 var(--red); }
.legend li.is-active .legend-name { color: var(--red); }
.legend-swatch.is-closure { background: rgba(255, 0, 0, 0.08); border: 2px dashed var(--red); }

/* ---------- 8. Passport (red) ---------- */
.passport6 {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.blk-red .passport-figure { border: 0; padding: 14px; background: var(--white); }
.blk-red .passport-figure figcaption { color: var(--black); }
.stamps6 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--black); margin-top: 14px;
}
.stamps6 li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 16px 26px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.stamp-n {
  font-size: clamp(3rem, 5.4vw, 5.25rem); line-height: 0.9; letter-spacing: -0.04em;
  color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.stamp-name { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.stamp-desc { font-size: var(--step--1); line-height: 1.45; }

/* ---------- 9. Music (black) ---------- */
.blk-black .music-stage + .music-stage { margin-top: clamp(56px, 6vw, 88px); }
.blk-black .music-stage > .h3 {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px;
}
.blk-black .music-stage > p { color: var(--on-dark-muted); }
.blk-black .lineup { border-top: 2px solid var(--white); padding: 0; list-style: none; }
.blk-black .act {
  grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 28px;
  padding: clamp(20px, 2.4vw, 32px) 0; border-bottom-color: var(--on-dark-line);
}
.blk-black .act-time {
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem); letter-spacing: 0.06em; text-transform: uppercase;
}
.blk-black .act-name {
  font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -0.025em;
  transition: color 0.15s ease;
}
.blk-black .act:hover .act-name { color: var(--red); }
.blk-black .act-tag {
  display: inline-block; margin-top: 8px;
  color: var(--on-dark-muted); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.blk-black .act > .act-tag { margin-top: 0; }
.blk-black .text-muted { color: var(--on-dark-muted); }

/* ---------- 10. Schedule ---------- */
.tab { font-size: 0.875rem; letter-spacing: 0.12em; padding: 14px 22px; }
.chip { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; }
.allday-head h3 { letter-spacing: 0.08em; text-transform: uppercase; font-size: 1rem; }

/* ---------- 11. Activities (grey): ruled columns, no boxes ---------- */
.activity-grid { gap: 0 clamp(24px, 3vw, 48px); }
.activity-card {
  flex-direction: column; gap: 20px;
  padding: 28px 0 48px;
  background: none; border: 0; border-top: 2px solid var(--black);
}
.activity-icon { flex: none; }
.activity-icon svg { width: 56px; height: 56px; }
.activity-card .h4 {
  font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.08; letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.activity-card p { font-size: 1.0625rem; }
/* chips read as one tracked meta line */
.activity-card .chips { gap: 6px 18px; margin-top: 16px; }
/* each chip carries its own route cube, so a wrapped line never starts on a separator */
.chip-meta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; background: none; border: 0;
  font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.chip-meta::before { content: ""; width: 6px; height: 6px; background: var(--red); flex: none; }
.chip-meta.is-tbd { color: var(--grey-text); }

/* ---------- 12. Art (black) ---------- */
.blk-black .cube-grid { gap: clamp(40px, 4vw, 64px) clamp(20px, 2.4vw, 36px); }
.blk-black .cube-card { background: none; border: 0; }
.blk-black .cube-card-media img { background: #111; }
.blk-black .cube-card-body { padding: 20px 0 0; border-top: 0; }
.blk-black .cube-card .cube-name { font-size: clamp(1.375rem, 1.9vw, 1.75rem); letter-spacing: -0.015em; }
.blk-black .cube-card .artist-name { color: var(--white); }
.blk-black .cube-card .cube-loc {
  color: var(--on-dark-muted); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.blk-black .cube-statement { color: #cfcfcf; }
.blk-black .cube-link { color: var(--white); }
.blk-black .cube-link-tbd { color: var(--on-dark-muted); border-bottom-color: #444; }

/* ---------- 13. Partners: one ruled grid ---------- */
.partner-grid-logos {
  gap: 0;
  border-top: 2px solid var(--black); border-left: 1px solid var(--black);
}
.partner-tile {
  border: 0; border-right: 1px solid var(--black); border-bottom: 1px solid var(--black);
  padding: 20px;
}
a.partner-tile:hover, a.partner-tile:focus-visible { background: var(--grey-bg); }
.partner-tile-text { font-size: 1.0625rem; letter-spacing: -0.005em; }

/* ---------- 14. Visit + FAQ (grey) ---------- */
.visit6 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
.transit6 { border-top: 2px solid var(--black); margin-top: 32px; }
.transit6 li { padding: 16px 0; border-bottom: 1px solid #d6d6d6; }
.transit6 strong { display: block; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9375rem; }
.faq summary { font-size: clamp(1.125rem, 1.4vw, 1.3125rem); }
.faq details { border-bottom-color: #d6d6d6; }

/* ---------- 15. Closing band (red) ---------- */
.closer { padding-block: clamp(88px, 12vw, 176px); overflow: hidden; }
.closer-inner { position: relative; }
.closer .display { font-size: clamp(3.25rem, 9vw, 9rem); max-width: none; }
.closer-when {
  margin-top: clamp(28px, 3.4vw, 48px);
  font-size: clamp(1.125rem, 1.9vw, 1.75rem); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1.3;
}
.closer-when span { margin: 0 0.35em; opacity: 0.55; }
.closer-when .nw { white-space: nowrap; }
.closer .btn { margin-top: 28px; }
/* the route: a line of cubes along the band's foot, as on the teaser map */
.closer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 28px; height: 8px;
  background: repeating-linear-gradient(to right, var(--white) 0 8px, transparent 8px 20px);
  opacity: 0.9;
}

/* ---------- 16. Footer ---------- */
.footer { padding-block: 64px; }

/* ---------- 17. Responsive ---------- */
@media (max-width: 1024px) {
  .passport6 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sec-sub, .visit6 { grid-template-columns: 1fr; }
  .display { font-size: clamp(2.5rem, 12vw, 4rem); }
  .blk-black .act { grid-template-columns: 1fr; gap: 6px; }
  .blk-black .act > .act-tag { display: none; } /* the stage name is already the block's heading */
  .activity-card { padding: 22px 0 32px; flex-direction: row; gap: 16px; }
  .activity-icon svg { width: 44px; height: 44px; }
  .stamps6 li { padding-right: 12px; }
  .closer::after { bottom: 18px; }
}

/* ---------- 18. Late additions ---------- */
.eat-head { margin: clamp(64px, 7vw, 104px) 0 24px; }
.transit6 .text-muted { display: block; margin-top: 2px; }