/* Final design pass. Presentation only: approved content, identities and map
   gestures remain in index.html / data.js / app.js. */

:root {
  --text-section: clamp(2rem, 1.35rem + 2vw, 3rem);
  --text-feature: clamp(2.6rem, 1.7rem + 3.2vw, 4.5rem);
  --shadow-card: 0 4px 16px rgba(9, 42, 69, .035);
}

.display { line-height: 1.04; letter-spacing: -.035em; }
.h2 { font-size: var(--text-section); font-weight: 700; text-wrap: balance; }
.lede { line-height: 1.6; text-wrap: pretty; }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-head--split { align-items: start; gap: clamp(1.5rem, 5vw, 4rem); }
.section-head .kicker { margin-bottom: var(--s3); }
.section-head--split .lede { max-width: 48ch; padding-top: var(--s1); }
.btn--primary { box-shadow: none; }
.btn { transition: background .2s, color .2s, transform .2s; }
a { text-underline-offset: .2em; }
:focus-visible, .logo-link:focus-visible, .sponsor__link:focus-visible { outline-color: var(--accent); }
.nav { --accent: var(--aqua-light); }
.brand__tag { font-size: .75rem; letter-spacing: .11em; }
.nav__links a { min-height: 44px; display: flex; align-items: center; }

/* An editorial opening: words and the original cup artwork share the stage.
   The essential locations form a single, quieter information strip. */
.hero { background: var(--navy); }
.hero__grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(6rem, 10vw, 9rem);
}
.hero__copy { min-width: 0; }
.hero__copy > .kicker { font-size: var(--text-xs); letter-spacing: .12em; }
.hero__title { font-size: var(--text-feature); max-width: 13ch; margin-block: var(--s5) var(--s6); }
.hero .lede { font-size: var(--text-base); max-width: 56ch; line-height: 1.65; color: rgba(251, 243, 226, .8); }
.hero__cta { margin-top: var(--s8); gap: var(--s3); }
.hero__visual { display: flex; align-items: center; justify-content: center; min-width: 0; }
.hero__logo-link { display: block; width: 100%; }
.hero__logo { width: 100%; max-width: 430px; margin: 0 auto; filter: none; }
.hero__cta .btn--primary::after { content: '↗'; font-size: 1.15em; margin-left: var(--s2); }
.facts {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(251, 243, 226, .22);
  padding-top: var(--s6);
}
.facts li {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: 0 var(--s6); border: 0; border-radius: 0;
  background: none; backdrop-filter: none;
  line-height: 1.55; color: rgba(251, 243, 226, .78);
}
.facts li:first-child { padding-left: 0; }
.facts li:last-child { padding-right: 0; }
.facts li + li { border-left: 1px solid rgba(251, 243, 226, .16); }
.facts__k { font-family: var(--font-body); color: var(--aqua-light); letter-spacing: .12em; }
.hero__shore { height: clamp(48px, 6vw, 88px); }
.hero__shore .w-aqua { fill: rgba(140, 207, 210, .18); }
.hero__shore .w-aqua2 { fill: rgba(140, 207, 210, .32); }
.mapsec::before { display: none; }

/* The map stays the primary tool. Changes are deliberately outside its pan,
   zoom and sticky positioning implementation. */
.tour__head .h2 { font-size: clamp(2rem, 2.8vw, 2.65rem); }
.tour__hint { line-height: 1.65; }
.tour__card { border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.tour__card::before { width: 3px; }
.tour__card.is-active { box-shadow: 0 8px 28px rgba(9, 42, 69, .09); border-color: rgba(18, 92, 102, .3); }
.tour__card h3 { font-weight: 700; line-height: 1.12; }
.tour__card .kicker { font-size: var(--text-xs); letter-spacing: .1em; }
.tour__list button { min-height: 40px; }
.find__box { border-width: 1px; box-shadow: var(--shadow-card); }
.chip { box-shadow: 0 2px 6px rgba(9, 42, 69, .06); }
.detail { border-top-width: 3px; }
.detail__body li { align-items: center; }

/* Consistent card architecture, with actions anchored rather than floating
   under different-length descriptions. */
.stops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.stop { padding: var(--s6); gap: var(--s3); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.stop > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.stop__logo { height: 56px; margin-bottom: var(--s4); }
.stop__logo .logo { max-width: 100%; }
.stop h3 { line-height: 1.25; }
.stop__beer { margin-block: var(--s4) var(--s2); }
.stop__n { width: 34px; height: 34px; font-family: var(--font-body); font-size: var(--text-base); }
.stop__actions { margin-top: auto; padding-top: var(--s5); }
.stop__actions button { min-height: 42px; }
.progress { padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, .32); }
.progress__bar { height: 8px; }
.progress__mark i { top: -8px; height: 8px; }
.progress__fill { background: var(--teal); }
.presenter { box-shadow: var(--shadow-card); }
.presenter--pair { grid-template-columns: minmax(0, 1fr) minmax(140px, 46%); min-height: 112px; padding: var(--s5) var(--s6); }
.presenter--pair small { white-space: normal; font-size: var(--text-xs); letter-spacing: .075em; line-height: 1.5; }
.presenter--pair .logo { width: 100%; max-width: 250px; height: 68px; max-height: 68px; }
.presenter__logo { min-width: 0; }

.floors { margin-bottom: var(--s6); }
.table-card { border-top-width: 3px; background: var(--navy); }
.table-card__name { line-height: 1.15; }
.directory button { min-height: 44px; }
.up-card { border-radius: var(--r-md); padding: var(--s6); gap: var(--s4); }
.up-card li { padding-block: var(--s2); }
.members li { border-left-width: 1px; padding: var(--s5); gap: var(--s4); box-shadow: var(--shadow-card); }
.members li .logo-tile--md { height: 68px; padding: 0; border: 0; border-radius: 0; }
.members li.has-logo { grid-template-rows: 72px 1fr; }
.stopcard { padding: var(--s6); border-radius: var(--r-md); }

/* Music gets a distinct visual pace: three equal film-preview cards, followed
   by a compact running order, instead of a narrow stack beside empty space. */
.section--navy { background: var(--navy); }
.lineup__grid { grid-template-columns: 1fr; gap: var(--s12); }
.bands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.band { grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: var(--r-md); background: rgba(255, 255, 255, .035); }
.band__media { aspect-ratio: 16 / 10; min-height: 0; }
.band__media img, .band__media video { position: absolute; inset: 0; }
.band__play span { width: 56px; height: 56px; box-shadow: 0 0 0 7px rgba(251, 243, 226, .14); }
.band__body { padding: var(--s6); gap: var(--s3); }
.band__time { font-size: var(--text-xl); }
.band__time small { font-size: var(--text-xs); letter-spacing: .06em; }
.band h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 700; line-height: 1.15; }
.band__tag, .timeline li.is-band b { color: var(--aqua-light); }
.band p { line-height: 1.65; }
.timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s8); }
.timeline li { grid-template-columns: 1fr; gap: var(--s3); border-bottom: 0; border-top: 1px solid var(--line); padding-block: var(--s5); }
.timeline .t { font-size: var(--text-xl); }
.timeline .t small { display: inline; margin-left: var(--s2); font-size: var(--text-xs); }

.info { gap: var(--s5); }
.info__card { flex-basis: 30%; max-width: calc(33.333% - var(--s5) * 2 / 3); padding: var(--s6); border-radius: var(--r-md); border-top: 1px solid var(--line); gap: var(--s4); box-shadow: var(--shadow-card); }
.info__card:nth-child(n) { border-top-color: var(--line); }
.info__card h3 { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; }
.info__card p { line-height: 1.65; overflow-wrap: anywhere; }
.info__card:last-child { flex-basis: 100%; max-width: 680px; text-align: center; background: none; border: 0; box-shadow: none; padding-top: var(--s8); }
.sponsor-grid { gap: var(--s3); }
.sponsor { padding: var(--s5) var(--s4); border-radius: var(--r-md); }
.sponsor__link { gap: var(--s4); }
.sponsor__name { line-height: 1.5; font-weight: 600; }
.sponsor__name em { font-size: .75rem; letter-spacing: .06em; margin-top: var(--s2); }
.footer__links { padding-top: var(--s6); border-top: 1px solid rgba(251, 243, 226, .16); }
.footer__cup img { width: 120px; height: auto; }
.logo-link:hover { box-shadow: none; }

@media (min-width: 761px) and (max-width: 1060px) {
  .nav__inner { gap: var(--s2); }
  .brand__tag { display: none; }
  .nav__links a { padding-inline: .65em; font-size: .8125rem; }
  .presenter--pair { grid-template-columns: 1fr; gap: var(--s3); }
  .presenter--pair > span:first-child { text-align: center; }
  .presenter--pair .logo { max-width: 250px; }
  .stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .hero__title { font-size: clamp(2.6rem, 5vw, 3.8rem); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) 0; }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts li:nth-child(2) { padding-right: 0; }
  .bands { gap: var(--s3); }
  .band__body { padding: var(--s5); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .stops-head__meta--tight .presenter { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 58%); }
  .stops-head__meta--tight .presenter .logo { width: 100%; max-width: 100%; }
  .section-head--split { gap: var(--s5); }
  .section-head .kicker { margin-bottom: var(--s2); }
  .nav__inner { padding-top: var(--s2); padding-bottom: var(--s1); }
  .nav__links { gap: var(--s1); mask-image: linear-gradient(to right, #000 94%, transparent); }
  .nav__links a { padding-block: var(--s2); }
  .brand__mark { height: 42px; }
  .brand__tag { font-size: .75rem; }
  .hero__grid { grid-template-columns: 1fr; padding-top: var(--s8); row-gap: var(--s8); }
  .hero__visual { grid-row: 1; justify-content: flex-start; }
  .hero__logo-link { width: 168px; }
  .hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
  .hero__title { font-size: clamp(2.45rem, 8.8vw, 3.7rem); max-width: 14ch; margin-block: var(--s4) 0; }
  .hero__copy > .kicker { font-size: .75rem; letter-spacing: .08em; max-width: 36ch; }
  .hero__cta { order: 1; margin-top: var(--s6); gap: var(--s2); }
  .hero__cta .btn { min-height: 48px; font-size: .8125rem; padding-inline: var(--s4); }
  .hero .lede { order: 2; margin-top: var(--s6); font-size: var(--text-base); }
  .facts { gap: var(--s6) 0; }
  .facts li { padding-inline: var(--s4); font-size: var(--text-sm); }
  .facts__k { font-size: var(--text-xs); letter-spacing: .08em; }
  .tour__head { padding-top: var(--s8); padding-bottom: var(--s6); }
  .stops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .stop { padding: var(--s4); grid-template-columns: 1fr; }
  .stop__actions { flex-direction: column; }
  .stop__actions button { justify-content: center; }
  .stop__beer { flex-wrap: wrap; }
  .presenter--pair { min-height: 100px; padding: var(--s4); grid-template-columns: minmax(0, 1fr) minmax(130px, 46%); gap: var(--s3); }
  .presenter__logo { height: 60px; }
  .presenter--pair .logo { height: 60px; max-height: 60px; max-width: 100%; }
  .presenter--pair small { font-size: .75rem; letter-spacing: .04em; }
  .progress { padding: var(--s5); }
  .bands { grid-template-columns: 1fr; gap: var(--s6); }
  .band__media { aspect-ratio: 16 / 9; }
  .band__body { padding: var(--s6); }
  .band h3 { font-size: 1.75rem; }
  .info__card { flex-basis: calc(50% - var(--s5)); max-width: calc(50% - var(--s5) / 2); }
  .footer__cup img { width: 96px; }
}
@media (max-width: 480px) {
  .stops { grid-template-columns: 1fr; }
  .stop { grid-template-columns: auto minmax(0, 1fr); padding: var(--s5); gap: var(--s4); }
  .stop__actions { flex-direction: row; }
  .stop__actions button { flex: 1; }
  .stop__beer { flex-wrap: nowrap; }
  .info__card { flex-basis: 100%; max-width: 100%; }
  .timeline { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 64px 1fr; gap: var(--s4); }
  .timeline .t small { display: block; margin-left: 0; margin-top: var(--s1); }
  .sponsor { padding: var(--s4); }
}

/* Water meets the map's sand. Photographic texture is decorative and static;
   no overlays intercept map gestures or obscure the approved hero content. */
.hero {
  background-color: var(--navy);
  background-image: linear-gradient(90deg, rgba(9, 42, 69, .67), rgba(9, 42, 69, .35)),
    url('./assets/deep-ocean.webp');
  background-size: cover;
  background-position: center;
}
.hero__grid { z-index: 1; padding-bottom: clamp(15rem, 24vw, 22rem); }
.hero__shore {
  height: clamp(240px, 29vw, 380px);
  background-image: linear-gradient(180deg, transparent 65%, var(--sand) 100%),
    url('./assets/ocean-shoreline.webp');
  background-size: cover;
  background-position: center bottom;
  mask-image: linear-gradient(180deg, transparent, #000 25%);
  pointer-events: none;
}
.hero .lede, .facts li { color: rgba(251, 243, 226, .88); }
.facts { border-top-color: rgba(251, 243, 226, .3); }
.facts li + li { border-left-color: rgba(251, 243, 226, .24); }
.upstairs-logo-pair { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.upstairs-logo-pair .logo-link { flex-shrink: 0; }
.upstairs-logo-pair .logo-tile--beer { width: 96px; height: 48px; }
/* Repeat the hero's water treatment on the later full-width dark sections.
   Interior information cards stay quieter than the surrounding water. */
.section--dark, .section--navy, .footer {
  background-color: var(--navy);
  background-image: linear-gradient(90deg, rgba(9, 42, 69, .76), rgba(9, 42, 69, .5)),
    url('./assets/deep-ocean.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  --fg-muted: rgba(251, 243, 226, .86);
}
.section--dark .up-card { background: rgba(9, 42, 69, .68); }
.section--dark .up-card--prize { background: rgba(40, 66, 69, .9); }
.section--navy .band { background: rgba(9, 42, 69, .8); }
.section--navy .timeline { padding-inline: var(--s4); border-radius: var(--r-md); background: rgba(9, 42, 69, .46); }
.footer { background-position: center 60%; }
@media (max-width: 760px) {
  .hero { background-position: 60% center; background-size: cover; background-repeat: no-repeat; }
  .hero__grid { padding-bottom: 240px; }
  .hero__shore { height: 250px; }
  .facts li:nth-child(3) { border-left: 0; }
}