/* ==========================================================================
   Welcome Partners Map — shared design system
   Reused by every page (map today; chicago-guide/tips/venue-rules later).
   ========================================================================== */

@font-face {
  font-family: "Antihero";
  src: url("../font/antihero/Antihero.otf") format("opentype"),
    url("../font/antihero/Antihero.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --purple-900: #2f1a57;
  --purple-800: #422a7a;
  --purple-700: #4e2a94;
  --purple-600: #6640b8;
  --gold-500: #f4bd1f;
  --gold-400: #ffd54a;
  --magenta-500: #e0245e;
  --green-600: #2f9e44;
  --cream-50: #faf6ef;
  --cream-100: #f1e9d8;
  --ink-900: #1f1330;
  --ink-700: #3a2b52;

  --header-height: 96px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 8px 24px rgba(47, 26, 87, 0.25);

  /* Body copy */
  --font-body: "Big Shoulders", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  /* Headlines / emphasis */
  --font-display: "Antihero", var(--font-body);

  /* Extra flat boost for body copy (on top of the sitewide --font-scale
     multiplier below) — see the --body-font-boost comment further down for
     why this is 0 now instead of Bebas Neue's old 2pt. */
  --body-font-boost: 0pt;

  /* Single lever for sitewide font size, applied to every font-size rule
     (headlines included) — bump this one value to rescale the whole site. */
  --font-scale: 1.1;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  /* rem-based sizes (almost everything) scale from this automatically. */
  font-size: calc(100% * var(--font-scale));
}

body {
  font-family: var(--font-body);
  color: var(--ink-900);
  min-height: 100vh;
}

/* Map-based apps are full-viewport tools, not scrolling content pages. */
body[data-page="map"],
body[data-page="pilgrimage"] {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

/* ---------------------------------------------------------------------- */
/* Header / nav — shared shell for every page                             */
/* ---------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  background: url("/images/site/BG.jpg") center/cover no-repeat, var(--purple-900);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

.site-header__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--cream-50);
}

.site-header__brand img {
  height: 38px;
  width: auto;
}

.site-nav--desktop {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Nav is exempt from the sitewide Big Shoulders swap — keeps its original
   Bebas Neue look regardless of what --font-body is set to. */
.site-nav__link {
  padding: 8px 12px;
  border-radius: 999px;
  font-family: "Bebas Neue", var(--font-body);
  font-size: calc(1rem + var(--body-font-boost));
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--cream-100);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-nav__link[aria-current="page"] {
  background: var(--gold-500);
  color: var(--purple-900);
}

.site-nav__link:not([aria-current="page"]):hover {
  background: rgba(255, 255, 255, 0.14);
}

.site-nav__link--featured {
  font-weight: 700;
  border: 1.5px solid rgba(244, 189, 31, 0.55);
}

.site-nav__link--featured[aria-current="page"] {
  border-color: transparent;
}

.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.site-header__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream-50);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.site-header__hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav--mobile {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--purple-900);
  display: none;
  flex-direction: column;
  padding: 6px 24px 18px;
  z-index: 999;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-nav--mobile.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-nav--mobile .site-nav__link {
  padding: 13px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
}

@media (max-width: 860px) {
  .site-nav--desktop {
    display: none;
  }

  .site-header__hamburger {
    display: flex;
  }

  .site-nav--mobile {
    display: flex;
  }
}

/* ---------------------------------------------------------------------- */
/* Footer — shared shell for every page                                   */
/* ---------------------------------------------------------------------- */

.site-footer {
  background: url("/images/site/BG.jpg") center/cover no-repeat, var(--purple-900);
  color: var(--cream-50);
  padding: 52px 6vw 32px;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.3fr;
  gap: 32px;
}

.site-footer__nav nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Same Bebas Neue exemption as .site-nav__link — footer repeats the same
   menu, so it should look the same. */
.site-footer__link {
  text-decoration: none;
  color: var(--cream-100);
  font-family: "Bebas Neue", var(--font-body);
  font-size: calc(1.05rem + var(--body-font-boost));
  letter-spacing: 0.02em;
}

.site-footer__link:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__link--featured {
  font-weight: 700;
  color: var(--gold-400);
}

.site-footer__contact {
  text-align: center;
}

.site-footer__cta {
  font-weight: 700;
  font-size: calc(1.25rem + var(--body-font-boost));
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin: 0 0 20px;
}

.site-footer__socials {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.site-footer__socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.15s ease;
}

.site-footer__socials a:hover {
  background: rgba(255, 255, 255, 0.26);
}

.site-footer__socials svg {
  width: 20px;
  height: 20px;
}

.site-footer__disclaimer h3 {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: calc(1.3rem + var(--body-font-boost));
  letter-spacing: 0.02em;
}

.site-footer__disclaimer p {
  margin: 0 0 12px;
  font-size: calc(0.84rem + var(--body-font-boost));
  line-height: 1.55;
  color: var(--cream-100);
}

.site-footer__copyright {
  font-size: calc(0.78rem + var(--body-font-boost));
  opacity: 0.75;
  margin: 0 !important;
}

@media (max-width: 860px) {
  .site-footer {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 36px;
  }

  .site-footer__nav nav {
    align-items: center;
  }
}

/* ---------------------------------------------------------------------- */
/* Homepage — hero                                                         */
/* ---------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 10vh) 0 10vh;
  background: url("/images/hero/BG.jpg") center/cover no-repeat, var(--purple-800);
}

.hero__watermark {
  position: absolute;
  top: calc(var(--header-height) + 18px);
  right: 4vw;
  width: clamp(90px, 11vw, 160px);
  height: auto;
  opacity: 0.55;
  pointer-events: none;
  z-index: 3;
}

/* The "stage" is the visible banner box, spanning the middle 80% of the
   hero (10% margin either side). Paper bleeds past its top/bottom edge and
   gets clipped here; skyline fills it top-to-bottom. The two images stay
   fully independent elements — skyline sits in front (z-index above) and
   its left portion naturally covers paper's right/torn edge. */
.hero__stage {
  position: relative;
  width: 80%;
  height: clamp(300px, 27vw, 560px);
  margin: 0 auto;
  overflow: hidden;
}

.hero__paper-layer {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 56%;
  min-width: 380px;
  aspect-ratio: 2537 / 1607;
  z-index: 1;
}

.hero__paper-bg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__skyline-layer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 2;
}

.hero__skyline-layer img {
  height: 100%;
  width: auto;
  display: block;
}

@media (max-width: 880px) {
  .hero {
    padding: calc(var(--header-height) + 6vh) 0 6vh;
  }

  .hero__watermark {
    top: calc(var(--header-height) + 6px);
    right: 5vw;
    width: clamp(64px, 20vw, 100px);
    opacity: 0.5;
  }

  .hero__stage {
    width: auto;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 6vw;
  }

  .hero__paper-layer {
    position: static;
    transform: none;
    width: min(94vw, 620px);
    min-width: 0;
    order: 1;
  }

  .hero__skyline-layer {
    position: static;
    height: auto;
    width: min(90vw, 500px);
    order: 2;
  }

  .hero__skyline-layer img {
    height: auto;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------- */
/* Homepage — "For You, ARMY"                                              */
/* ---------------------------------------------------------------------- */

.army-section {
  display: flex;
  align-items: stretch;
  background: url("/images/site/white-background.png") center/cover no-repeat;
}

.army-section__text {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 6vw;
}

.army-section__text-inner {
  max-width: 480px;
  margin: 0 auto;
}

.army-section__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: clamp(calc(28px * var(--font-scale)), calc(3vw * var(--font-scale)), calc(44px * var(--font-scale)));
  letter-spacing: 0.02em;
}

.army-section__body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: clamp(calc((15px + var(--body-font-boost)) * var(--font-scale)), calc(1.3vw * var(--font-scale)), calc((19px + var(--body-font-boost)) * var(--font-scale)));
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.army-section__image {
  flex: 1 1 50%;
  min-height: clamp(340px, 40vw, 540px);
  overflow: hidden;
}

.army-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

@media (max-width: 880px) {
  .army-section {
    flex-direction: column;
  }

  .army-section__text {
    padding: 40px 8vw 20px;
  }

  .army-section__text-inner {
    max-width: 480px;
  }

  .army-section__image {
    min-height: 320px;
  }
}

/* ---------------------------------------------------------------------- */
/* Homepage — marquee divider                                              */
/* ---------------------------------------------------------------------- */

.marquee {
  background: #956caa;
  overflow: hidden;
  padding: 10px 0;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}

.marquee__group {
  display: flex;
  flex-shrink: 0;
}

.marquee__item {
  font-family: var(--font-body);
  color: #fff;
  font-size: calc(1rem + var(--body-font-boost));
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0 22px;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------------- */
/* Homepage — icon grid                                                    */
/* ---------------------------------------------------------------------- */

.icon-grid {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 10vh 6vw;
  background: url("/images/site/white-background.png") center/cover no-repeat;
}

.icon-grid__inner {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 16px;
}

.icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  gap: 8px;
  padding: 6px;
  border-radius: var(--radius-md);
  transition: transform 0.15s ease;
}

.icon-card:hover,
.icon-card:focus-visible {
  transform: translateY(-3px);
}

.icon-card__img {
  width: clamp(144px, 19vw, 224px);
  height: clamp(144px, 19vw, 224px);
  object-fit: contain;
}

.icon-card__label {
  font-family: var(--font-body);
  color: #000;
  font-size: calc(1.15rem + var(--body-font-boost));
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .icon-grid__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
  }
}

@media (max-width: 420px) {
  .icon-card__img {
    width: 128px;
    height: 128px;
  }
}

/* Icon animations — each runs continuously and pauses on hover/focus. */
@keyframes icon-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(7deg);
  }
  60% {
    transform: rotate(-5deg);
  }
  80% {
    transform: rotate(4deg);
  }
}

@keyframes icon-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes icon-squash {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.12, 0.88);
  }
}

@keyframes icon-tilt {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

@keyframes icon-bounce {
  0%,
  100%,
  80% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-16px);
  }
  50% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(-6px);
  }
}

@keyframes icon-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.icon-anim--wiggle {
  animation: icon-wiggle 2.2s ease-in-out infinite;
}

.icon-anim--float {
  animation: icon-float 3s ease-in-out infinite;
}

.icon-anim--squash {
  animation: icon-squash 1.8s ease-in-out infinite;
  transform-origin: bottom center;
}

.icon-anim--tilt {
  animation: icon-tilt 2.6s ease-in-out infinite;
  transform-origin: bottom center;
}

.icon-anim--bounce {
  animation: icon-bounce 1.8s ease-in-out infinite;
}

.icon-anim--pulse {
  animation: icon-pulse 2.2s ease-in-out infinite;
}

.icon-card:hover .icon-card__img,
.icon-card:focus-visible .icon-card__img {
  animation-play-state: paused;
}

/* ---------------------------------------------------------------------- */
/* Map page                                                                */
/* ---------------------------------------------------------------------- */

.map-page {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  padding-top: var(--header-height);
  background: url("/images/site/map_BG.jpg") center/cover no-repeat, var(--purple-800);
}

.map-stage {
  position: relative;
  flex: 1 1 auto;
  margin: 28px;
  border-radius: var(--radius-lg);
  overflow: visible;
  box-shadow: var(--shadow-card);
  --panel-offset: 0px;
}

#map {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  background: var(--cream-100);
}

.leaflet-container {
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
}

/* Custom vendor pin icon */
.vendor-pin {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
  cursor: pointer;
  transition: transform 0.12s ease;
}

.vendor-pin:hover {
  transform: scale(1.08);
}

/* Pilgrimage map pin — the shared map-pin.png recolored per group via its
   alpha channel as a CSS mask, so one source image covers every hex color. */
.pilgrimage-pin__shape {
  width: 34px;
  height: 49px;
  -webkit-mask-image: url("/images/site/map-pin.png");
  mask-image: url("/images/site/map-pin.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
  cursor: pointer;
  transition: transform 0.12s ease;
}

.pilgrimage-pin__shape:hover {
  transform: scale(1.08);
}

/* Always-visible button to reopen the "All Partners" list after it's been
   closed — desktop only, since the list itself only ever exists there. */
.map-list-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 500;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  background: var(--purple-700);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(0.85rem + var(--body-font-boost));
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.map-list-btn:hover {
  background: var(--purple-800);
}

@media (max-width: 860px) {
  .map-list-btn {
    display: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Off-screen vendor badges                                                */
/* ---------------------------------------------------------------------- */

.badge-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 480;
}

.badge-slot {
  position: absolute;
  display: flex;
  gap: 6px;
  pointer-events: none;
  transition: left 0.2s ease;
}

.badge-slot > * {
  pointer-events: auto;
}

.slot-n {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: row;
}

.slot-s {
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: row;
}

.slot-e {
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  align-items: flex-end;
}

.slot-w {
  left: calc(14px + var(--panel-offset, 0px));
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  align-items: flex-start;
}

.slot-ne {
  top: 14px;
  right: 14px;
  flex-direction: column;
  align-items: flex-end;
}

.slot-nw {
  top: 14px;
  left: calc(14px + var(--panel-offset, 0px));
  flex-direction: column;
  align-items: flex-start;
}

/* Raised above the bottom-right zoom control so the two can never overlap. */
.slot-se {
  bottom: 92px;
  right: 14px;
  flex-direction: column-reverse;
  align-items: flex-end;
}

.slot-sw {
  bottom: 14px;
  left: calc(14px + var(--panel-offset, 0px));
  flex-direction: column-reverse;
  align-items: flex-start;
}

.offscreen-badge {
  display: inline-flex;
  align-items: center;
  background: var(--purple-900);
  color: var(--cream-50);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: calc(0.9rem + var(--body-font-boost));
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.offscreen-badge:hover {
  background: var(--purple-700);
}

/* ---------------------------------------------------------------------- */
/* Detail panel                                                            */
/* ---------------------------------------------------------------------- */

.panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 40, 0.35);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.panel-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.detail-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(33vw, 460px);
  min-width: 320px;
  background: var(--cream-50);
  z-index: 950;
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.35);
  transform: translateX(-105%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-panel.is-open {
  transform: translateX(0);
}

/* The fixed site header (z-index 1000) sits above this panel (950) — its
   close button would otherwise render right where the header covers it, so
   it's pushed down to sit just below the header instead. */
.detail-panel__close {
  position: absolute;
  top: calc(var(--header-height) + 12px);
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 10, 40, 0.55);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* Same header-clearing reasoning as the close button above — this panel's
   own content (whatever renders inside it: a vendor's carousel, the
   partner list, a pilgrimage spot with no photo) would otherwise start
   underneath the fixed header instead of below it. Individual content
   types only need to add their own extra breathing room on top of this,
   not re-clear the header themselves. */
.detail-panel__scroll {
  overflow-y: auto;
  flex: 1 1 auto;
  padding-top: var(--header-height);
}

/* Carousel — square slide, same on desktop panel and mobile sheet. Images
   are letterboxed (never cropped) against a brand-purple background. */
.carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--purple-900);
  overflow: hidden;
}

.carousel--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--purple-800), var(--purple-900));
}

.carousel__placeholder-icon {
  font-size: 44px;
  opacity: 0.55;
}

.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.25s ease;
}

.carousel__slide {
  flex: 0 0 100%;
  height: 100%;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 10, 40, 0.55);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel__arrow--prev {
  left: 10px;
}

.carousel__arrow--next {
  right: 10px;
}

.carousel__dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  padding: 0;
  cursor: pointer;
}

.carousel__dot.is-active {
  background: #fff;
}

/* Panel body */
.panel-body {
  padding: 20px 22px 28px;
}

/* Pilgrimage's panel has no photo above it (unlike the Welcome Partners Map's
   vendor panel, which always keeps its carousel) — a bit of extra top
   padding on top of .detail-panel__scroll's own header-clearing padding
   (mobile-sheet doesn't add that, since it never overlaps the header
   regardless of content, so this is the only padding that applies there). */
.panel-body--no-photo {
  padding-top: 24px;
}

.panel-body__category {
  display: inline-block;
  font-size: calc(0.72rem + var(--body-font-boost));
  font-weight: 700;
  color: var(--purple-700);
  background: rgba(78, 42, 148, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.panel-body__name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: normal;
  color: var(--ink-900);
}

.panel-body__location-label {
  font-weight: 700;
  color: var(--purple-700);
}

.panel-body__address {
  margin: 0 0 16px;
  font-size: calc(0.92rem + var(--body-font-boost));
  color: var(--ink-700);
}

.panel-body__website {
  display: block;
  margin: 0 0 18px;
  font-size: calc(0.88rem + var(--body-font-boost));
  color: var(--purple-700);
  text-decoration: none;
  word-break: break-all;
}

.panel-body__website:hover {
  text-decoration: underline;
}

.panel-body__offer {
  background: var(--cream-100);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.panel-body__offer-tag {
  display: inline-block;
  font-size: calc(0.7rem + var(--body-font-boost));
  font-weight: 700;
  color: #fff;
  background: var(--magenta-500);
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.panel-body__offer-text {
  margin: 0;
  font-size: calc(0.9rem + var(--body-font-boost));
  line-height: 1.55;
  color: var(--ink-900);
  white-space: pre-line;
}

.panel-body__cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 16px;
  border-radius: 999px;
  background: var(--purple-700);
  color: #fff;
  font-weight: 700;
  font-size: calc(0.95rem + var(--body-font-boost));
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.panel-body__cta:hover {
  background: var(--purple-600);
}

.panel-body__cta + .panel-body__cta {
  margin-top: 10px;
}

.panel-body__cta--secondary {
  background: transparent;
  border: 2px solid var(--purple-700);
  color: var(--purple-700);
}

.panel-body__cta--secondary:hover {
  background: rgba(78, 42, 148, 0.08);
}

.panel-body__content {
  margin: 0 0 18px;
  font-size: calc(0.9rem + var(--body-font-boost));
  line-height: 1.55;
  color: var(--ink-900);
}

.panel-body__disclaimer {
  margin: 16px 0 0;
  font-size: calc(0.7rem + var(--body-font-boost));
  font-style: italic;
  color: var(--ink-700);
  opacity: 0.7;
}

/* Returns from a vendor's detail view back to the partner list — same
   outlined-pill treatment as .panel-body__cta--secondary, appended only
   when the panel has a list to go back to (desktop only). */
.panel-body__go-to-list {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 16px;
  margin-top: 14px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--purple-700);
  color: var(--purple-700);
  font-weight: 700;
  font-size: calc(0.95rem + var(--body-font-boost));
  cursor: pointer;
}

.panel-body__go-to-list:hover {
  background: rgba(78, 42, 148, 0.08);
}

/* Desktop-only default panel view: every partner, one box each, before any
   pin is clicked. Only ever rendered inside .detail-panel__scroll, which
   already clears the header on its own — no extra top padding needed here. */
.partner-list {
  padding: 24px 22px 28px;
}

.partner-list__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 1.5rem;
  color: var(--ink-900);
}

.partner-list__item {
  background: var(--cream-100);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.partner-list__item-name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 1.15rem;
  color: var(--ink-900);
}

.partner-list__item-location-label {
  font-weight: 700;
  color: var(--purple-700);
}

.partner-list__item-address {
  margin: 0 0 8px;
  font-size: calc(0.85rem + var(--body-font-boost));
  color: var(--ink-700);
}

.partner-list__item-offer {
  display: inline-block;
  font-size: calc(0.7rem + var(--body-font-boost));
  font-weight: 700;
  color: #fff;
  background: var(--magenta-500);
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.partner-list__more-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--purple-700);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: calc(0.85rem + var(--body-font-boost));
  cursor: pointer;
}

.partner-list__more-btn:hover {
  background: var(--purple-600);
}

/* ---------------------------------------------------------------------- */
/* Mobile bottom sheet (shares panel-body/carousel markup + classes)       */
/* Fully independent of the map — no code here ever touches the map's      */
/* center/zoom, so opening/closing it can never move the map.              */
/* ---------------------------------------------------------------------- */

.mobile-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66.6667vh;
  background: var(--cream-50);
  z-index: 950;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
  transform: translateY(105%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-sheet.is-open {
  transform: translateY(0);
}

.mobile-sheet__handle {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(31, 19, 48, 0.25);
  z-index: 2;
}

.mobile-sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 10, 40, 0.55);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-sheet__scroll {
  overflow-y: auto;
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------- */
/* Coming soon page                                                        */
/* ---------------------------------------------------------------------- */

.coming-soon-page {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: calc(var(--header-height) + 34px) 6vw 80px;
  background: url("/images/site/BG.jpg") center/cover no-repeat, var(--purple-800);
}

/* Nested below a page's own nav/back-link instead of sitting flush
   under the header, e.g. K-pop Store List's Coming Soon block. */
.coming-soon-page--inline {
  min-height: 40vh;
  padding-top: 40px;
}

.coming-soon__art {
  width: clamp(180px, 26vw, 320px);
  height: auto;
}

.coming-soon__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: normal;
  color: #fff;
  font-size: clamp(calc(40px * var(--font-scale)), calc(8vw * var(--font-scale)), calc(96px * var(--font-scale)));
  letter-spacing: 0.02em;
}

.coming-soon__subtext {
  margin: 0;
  font-family: var(--font-body);
  color: var(--cream-100);
  font-size: clamp(calc((14px + var(--body-font-boost)) * var(--font-scale)), calc(1.6vw * var(--font-scale)), calc((20px + var(--body-font-boost)) * var(--font-scale)));
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------- */
/* Stadium Info (and future data-driven content pages)                     */
/* ---------------------------------------------------------------------- */

.info-page {
  background: url("/images/site/white-background.png") center/cover no-repeat;
}

.info-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
  flex-wrap: wrap;
  padding: calc(var(--header-height) + 40px) 6vw 40px;
  background: url("/images/site/BG.jpg") center/cover no-repeat, var(--purple-800);
}

.info-hero__art {
  width: clamp(160px, 20vw, 260px);
  height: auto;
}

/* About & Contact's hero art at 2/3 the usual size. */
.info-hero__art--small {
  width: clamp(107px, 13.3vw, 173px);
}

.info-hero__text {
  max-width: 520px;
}

.info-hero__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: normal;
  color: #fff;
  font-size: clamp(calc(34px * var(--font-scale)), calc(5vw * var(--font-scale)), calc(64px * var(--font-scale)));
  letter-spacing: 0.02em;
}

.info-hero__subtitle {
  margin: 0;
  font-family: var(--font-body);
  color: var(--cream-100);
  font-size: calc((1.05rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.4;
}

/* ---------------------------------------------------------------------- */
/* Official Welcome — big, always-expanded content blocks (no accordion)   */
/* ---------------------------------------------------------------------- */

.ow-blocks {
  display: flex;
  flex-direction: column;
}

/* Each block is a full-bleed section (so the tint/divider span edge to
   edge) with generous vertical padding — content itself stays centered
   and constrained via .ow-block__inner. */
.ow-block {
  width: 100%;
  padding: clamp(56px, 8vw, 110px) 0;
  border-top: 1px solid rgba(78, 42, 148, 0.15);
}

.ow-block:first-child {
  border-top: none;
}

.ow-block--tint {
  background: var(--cream-100);
}

.ow-block__inner {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
}

/* Bigger and more prominent than a .tips-accordion__title (1.5rem) on
   other info pages, but still clearly under the page's own hero title. */
.ow-block__heading {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: clamp(calc(1.9rem * var(--font-scale)), calc(3.2vw * var(--font-scale)), calc(2.6rem * var(--font-scale)));
  letter-spacing: 0.02em;
  text-align: center;
}

/* Media (video/image/Instagram) on the left, copy on the right — stacks
   on mobile. The media column has a fixed-ish basis so a tall image can't
   stretch the row; height is separately capped on the image/video itself. */
.ow-block__row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.ow-block__media {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.ow-block__copy {
  flex: 1 1 380px;
  min-width: 0;
}

.ow-block__text {
  margin: 0 0 16px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1.15rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.6;
  text-align: left;
}

.ow-block__text:last-child {
  margin-bottom: 0;
}

.ow-video {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 0;
  padding-bottom: 56.25%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--purple-900);
}

/* content_type "video" gets the big, full-width treatment instead of the
   media-left/copy-right split used by image/Instagram blocks. */
.ow-video--full {
  max-width: 100%;
  margin: 0 0 24px;
}

.ow-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ow-block__copy--center {
  max-width: 720px;
  margin: 0 auto;
}

.ow-block__copy--center .ow-block__text {
  text-align: center;
}

.ow-block__copy--center .ow-block__btn {
  margin-left: auto;
  margin-right: auto;
}

/* max-height keeps a tall (e.g. portrait document) image from stretching
   the whole row — width and height both cap out, whichever binds first. */
.ow-image-block__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.ow-block__media .instagram-media {
  max-width: 100% !important;
}

/* Left-aligned by default, tracking the copy column's own text alignment —
   .ow-block__copy--center re-centers it for the full-width video layout. */
.ow-block__btn {
  display: block;
  width: max-content;
  margin: 20px 0 0;
}

@media (max-width: 700px) {
  .ow-block {
    padding: clamp(40px, 10vw, 64px) 0;
  }

  .ow-block__inner {
    width: 90%;
  }

  .ow-block__row {
    flex-direction: column;
  }

  .ow-block__media {
    width: 100%;
  }

  .ow-block__text {
    text-align: center;
    font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  }

  .ow-block__heading {
    font-size: calc(1.7rem * var(--font-scale));
  }
}

.info-toc {
  position: sticky;
  top: var(--header-height);
  z-index: 100;
  background: rgba(250, 246, 239, 0.96);
  box-shadow: 0 2px 10px rgba(47, 26, 87, 0.12);
}

/* When there's no hero above it to push it below the fixed header (e.g.
   the K-pop Store List placeholder), its normal-flow position would
   otherwise start under the header, at odds with where it visually
   sticks — which shifts every element after it up to match, overlapping
   the header and the toc bar itself. */
.info-page > .info-toc:first-child {
  margin-top: var(--header-height);
}

.info-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 6vw;
  cursor: pointer;
  list-style: none;
  color: var(--purple-700);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
  letter-spacing: 0.02em;
}

.info-toc__toggle::-webkit-details-marker {
  display: none;
}

.info-toc__toggle-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--purple-700);
  border-bottom: 2px solid var(--purple-700);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.info-toc[open] .info-toc__toggle-chevron {
  transform: rotate(-135deg);
}

.info-toc__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 6vw 14px;
}

.info-toc__link {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(78, 42, 148, 0.08);
  color: var(--purple-700);
  font-family: var(--font-body);
  font-size: calc((0.9rem + var(--body-font-boost)) * var(--font-scale));
  text-decoration: none;
  white-space: nowrap;
}

.info-toc__link:hover {
  background: var(--purple-700);
  color: #fff;
}

.info-sections {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 6vw 90px;
}

.info-section {
  padding-top: 26px;
  scroll-margin-top: calc(var(--header-height) + var(--info-toc-height, 100px) + 16px);
}

.info-section + .info-section {
  margin-top: 34px;
  border-top: 1px solid rgba(78, 42, 148, 0.15);
}

.info-section__heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.info-section__icon {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: var(--shadow-card);
}

.info-section__heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.9rem * var(--font-scale));
  letter-spacing: 0.02em;
}

.info-text {
  margin: 0 0 10px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.55;
}

.info-text strong {
  color: var(--purple-700);
}

.info-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.info-bullet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.45;
  border-bottom: 1px solid rgba(78, 42, 148, 0.1);
}

.info-bullet strong {
  color: var(--purple-700);
}

.info-bullet__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex: 0 0 auto;
}

.info-bullet--warning {
  background: rgba(244, 189, 31, 0.18);
  border: 1px solid rgba(244, 189, 31, 0.6);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-weight: 700;
}

.info-link-btn {
  display: inline-block;
  margin: 4px 8px 24px 0;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--purple-700);
  color: #fff;
  font-family: var(--font-body);
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
  text-decoration: none;
}

.info-link-btn:hover {
  background: var(--purple-600);
}

.info-error {
  text-align: center;
  padding: 60px 6vw;
  font-family: var(--font-body);
  color: var(--ink-700);
}

@media (max-width: 700px) {
  .info-hero {
    flex-direction: column;
    text-align: center;
    padding-top: calc(var(--header-height) + 30px);
  }

  .info-hero__text {
    max-width: 100%;
  }

  .info-toc__links {
    justify-content: center;
  }

  .info-section__heading {
    gap: 12px;
  }

  .info-section__icon {
    width: 64px;
    height: 64px;
  }

  .info-section__heading h2 {
    font-size: calc(1.5rem * var(--font-scale));
  }
}

/* ---------------------------------------------------------------------- */
/* Fan Event Hub                                                           */
/* ---------------------------------------------------------------------- */

.event-page {
  background: url("/images/hero/BG.jpg") center/cover no-repeat, var(--purple-800);
  padding-bottom: 80px;
}

.event-hero {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: calc(var(--header-height) + 40px) 6vw 36px;
}

.event-hero__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: normal;
  color: #fff;
  font-size: clamp(calc(34px * var(--font-scale)), calc(5vw * var(--font-scale)), calc(60px * var(--font-scale)));
  letter-spacing: 0.02em;
}

.event-hero__subtitle {
  margin: 0;
  font-family: var(--font-body);
  color: var(--cream-100);
  font-size: calc((1.05rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.4;
}

.event-filters {
  max-width: 1180px;
  margin: 0 auto 32px;
  padding: 0 6vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.event-filter-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--cream-100);
  font-family: var(--font-body);
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.event-filter-btn:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.14);
}

.event-filter-btn.is-active {
  background: var(--gold-500);
  color: var(--purple-900);
}

.event-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 6vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch;
}

.event-card.is-hidden {
  display: none;
}

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: url("/images/site/white-background.png") center/cover no-repeat;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px 20px;
  overflow-wrap: break-word;
}

.event-card__category {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(78, 42, 148, 0.1);
  color: var(--purple-700);
  font-family: var(--font-body);
  font-size: calc((0.78rem + var(--body-font-boost)) * var(--font-scale));
  letter-spacing: 0.02em;
}

.event-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.event-card__date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--purple-900);
  color: #fff;
  font-family: var(--font-display);
  line-height: 1;
}

.event-card__date--fallback {
  font-size: calc(1.1rem * var(--font-scale));
  font-weight: normal;
}

.event-card__date-month {
  font-size: calc(0.75rem * var(--font-scale));
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.event-card__date-day {
  font-size: calc(1.7rem * var(--font-scale));
  margin-top: 2px;
}

.event-card__head-text {
  min-width: 0;
}

.event-card__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.35rem * var(--font-scale));
  line-height: 1.15;
}

.event-card__time {
  margin: 0;
  font-family: var(--font-body);
  color: var(--purple-700);
  font-size: calc((0.85rem + var(--body-font-boost)) * var(--font-scale));
  white-space: pre-line;
  line-height: 1.3;
}

.event-card__divider {
  border: none;
  border-top: 1px solid rgba(47, 26, 87, 0.18);
  margin: 16px 0;
}

.event-card__row {
  margin: 0 0 8px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.4;
}

.event-card__row-icon {
  margin-right: 2px;
}

.event-card__summary {
  margin: 10px 0 0;
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-card__notice {
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--cream-100);
  border-left: 3px solid var(--purple-700);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: calc((0.82rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.4;
}

.event-card__notice strong {
  color: var(--purple-700);
}

.event-card__link {
  align-self: flex-end;
  margin-top: 14px;
  color: var(--purple-700);
  font-family: var(--font-body);
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
  text-decoration: underline;
}

.event-card__link:hover {
  color: var(--purple-900);
}

@media (max-width: 760px) {
  .event-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Essentials & Tips                                                       */
/* ---------------------------------------------------------------------- */

.tips-sections {
  max-width: 760px;
}

.tips-accordion {
  padding-top: 0;
}

.tips-accordion + .tips-accordion {
  margin-top: 18px;
  border-top: none;
}

.tips-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  list-style: none;
}

.tips-accordion__summary::-webkit-details-marker {
  display: none;
}

.tips-accordion__summary-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.tips-accordion__summary-emoji {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  background: rgba(78, 42, 148, 0.08);
  border-radius: var(--radius-md);
}

.tips-accordion__title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.5rem * var(--font-scale));
  letter-spacing: 0.02em;
}

.tips-accordion__chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--purple-700);
  border-bottom: 2px solid var(--purple-700);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.tips-accordion[open] .tips-accordion__chevron {
  transform: rotate(-135deg);
}

.tips-accordion__body {
  padding: 22px 22px 6px;
}

.tips-accordion__media {
  margin-bottom: 16px;
}

.tips-accordion__image {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.tips-accordion__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  font-size: 56px;
  background: rgba(78, 42, 148, 0.08);
  border-radius: var(--radius-md);
}

.tips-list {
  margin-bottom: 18px;
}

/* Short checklist-style bullets (Essentials & Tips, Safety in Chicago,
   Transportation Guide) keep the bold-uppercase punch Bebas Neue gave them
   for free — Big Shoulders needs it spelled out explicitly, plus a size
   bump, so a single short line doesn't read thin next to the rest of the
   page. */
.tips-list li {
  padding: 8px 4px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1.05rem + var(--body-font-boost)) * var(--font-scale));
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.5;
  border-bottom: 1px solid rgba(78, 42, 148, 0.1);
}

/* Bold "Label:" prefixes get the same purple emphasis as .info-text/
   .info-bullet's bold labels elsewhere on the site — used by Essentials &
   Tips, Safety in Chicago, and the Press Media Guide. */
.tips-list li strong {
  color: var(--purple-700);
}

.tips-subhead {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-700);
  font-size: calc(1.3rem * var(--font-scale));
  letter-spacing: 0.02em;
}

.tips-subhead:first-child {
  margin-top: 0;
}

.tips-dodont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

/* Instagram embed tucked into the Public Transit (CTA) accordion — centered
   like the rest of this section's content, "Watch on Instagram" styled the
   same as the section's other CTA button. */
.tg-instagram-embed {
  margin-top: 8px;
  text-align: center;
}

.tg-instagram-embed .info-link-btn {
  margin: 4px 0 16px;
}

/* CTA route map — sits at the very end of the Public Transit (CTA)
   accordion, right after the Watch on Instagram button, spaced/centered
   the same way as the embed above it. */
.tg-cta-map {
  margin: 16px 0 0;
  text-align: center;
}

.tg-cta-map__img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.tg-cta-map__caption {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: calc(0.8rem + var(--body-font-boost));
  color: var(--ink-700);
  text-align: center;
}

.tips-dodont--single {
  grid-template-columns: 1fr;
}

.tips-dodont__col {
  padding: 16px 18px;
  border-radius: var(--radius-md);
}

.tips-dodont__col--do {
  background: rgba(47, 158, 68, 0.1);
  border: 1px solid rgba(47, 158, 68, 0.35);
}

.tips-dodont__col--dont {
  background: rgba(224, 36, 94, 0.08);
  border: 1px solid rgba(224, 36, 94, 0.3);
}

.tips-dodont__heading {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: calc((1.05rem + var(--body-font-boost)) * var(--font-scale));
  letter-spacing: 0.04em;
}

.tips-dodont__col--do .tips-dodont__heading {
  color: var(--green-600);
}

.tips-dodont__col--dont .tips-dodont__heading {
  color: var(--magenta-500);
}

.tips-dodont__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tips-dodont__list li {
  padding-left: 20px;
  position: relative;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.4;
}

.tips-dodont__col--do .tips-dodont__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green-600);
  font-weight: 700;
}

.tips-dodont__col--dont .tips-dodont__list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--magenta-500);
  font-weight: 700;
}

.tips-checklist {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.tips-checklist__item label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.4;
  border-bottom: 1px solid rgba(78, 42, 148, 0.1);
  cursor: pointer;
}

.tips-checklist__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--purple-700);
  cursor: pointer;
}

@media (max-width: 700px) {
  .tips-accordion__title {
    font-size: calc(1.2rem * var(--font-scale));
  }

  .tips-dodont {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Welcome popup (first-visit, per page)                                   */
/* ---------------------------------------------------------------------- */

.welcome-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(31, 19, 48, 0.6);
}

.welcome-popup {
  width: min(420px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--cream-50);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 26px 24px;
}

.welcome-popup__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.5rem * var(--font-scale));
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.welcome-popup__subtitle {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--purple-700);
  font-size: calc(1rem + var(--body-font-boost));
}

.welcome-popup__body {
  margin: 0 0 16px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc(0.95rem + var(--body-font-boost));
  line-height: 1.5;
}

.welcome-popup__legend {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.welcome-popup__legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc(0.88rem + var(--body-font-boost));
}

.welcome-popup__swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.welcome-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.welcome-popup__btn {
  padding: 12px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: calc(0.9rem + var(--body-font-boost));
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: center;
}

.welcome-popup__btn--primary {
  background: var(--purple-700);
  color: #fff;
}

.welcome-popup__btn--primary:hover {
  background: var(--purple-600);
}

.welcome-popup__btn--ghost {
  background: transparent;
  border: 2px solid rgba(78, 42, 148, 0.3);
  color: var(--purple-700);
}

.welcome-popup__btn--ghost:hover {
  background: rgba(78, 42, 148, 0.08);
}

/* ---------------------------------------------------------------------- */
/* Chicago Trip Guide                                                      */
/* ---------------------------------------------------------------------- */

.tg-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 6vw 90px;
}

/* On Press, the hub grid isn't the last thing on the page — the contact
   section below supplies its own closing padding instead. */
body[data-page="press"] .tg-hub-grid {
  padding-bottom: 20px;
}

.tg-hub-card {
  display: block;
  padding: 28px 26px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.tg-hub-card:hover {
  transform: translateY(-4px);
}

/* Icon on the left (reusing .info-section__icon's exact box style from
   stadium-info.html), title + subtitle stacked to its right — the subtitle
   lines up under the title's own text start (not the icon), and nothing
   renders below the icon itself. */
.tg-hub-card__heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.tg-hub-card__heading-text {
  min-width: 0;
}

.tg-hub-card__heading .tg-hub-card__title {
  margin-bottom: 4px;
}

.tg-hub-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.5rem * var(--font-scale));
  letter-spacing: 0.02em;
}

.tg-hub-card__subtitle {
  margin: 0;
  font-family: var(--font-body);
  color: var(--purple-700);
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
}

.tg-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 6vw 90px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: start;
}

.tg-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.tg-card__embed {
  display: flex;
  justify-content: center;
  background: var(--cream-100);
  padding: 12px 12px 0;
}

.tg-card__embed :is(iframe, blockquote) {
  max-width: 100%;
}

.tg-card__body {
  padding: 20px 22px 24px;
}

.tg-card__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.35rem * var(--font-scale));
  letter-spacing: 0.02em;
}

.tg-card__address {
  margin: 0 0 10px;
  font-family: var(--font-body);
  color: var(--purple-700);
  font-size: calc((0.85rem + var(--body-font-boost)) * var(--font-scale));
}

.tg-card__content {
  margin: 0 0 16px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.5;
}

.tg-card__cta {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--purple-700);
  color: #fff;
  font-family: var(--font-body);
  font-size: calc((0.9rem + var(--body-font-boost)) * var(--font-scale));
  text-decoration: none;
}

.tg-card__cta:hover {
  background: var(--purple-600);
}

.tg-back-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 6vw 24px;
  text-align: center;
}

/* Every page using this pattern renders two of these — one above the
   content, one below, right before the footer. Only the second (last)
   one needs extra bottom room so the button doesn't sit flush against
   the footer. */
.tg-back-wrap:last-of-type {
  padding-bottom: 70px;
}

.tg-back-link {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  border: 2px solid var(--purple-700);
  color: var(--purple-700);
  font-family: var(--font-body);
  font-size: calc((0.9rem + var(--body-font-boost)) * var(--font-scale));
  text-decoration: none;
}

.tg-back-link:hover {
  background: rgba(78, 42, 148, 0.08);
}

.tg-safety-disclaimer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 6vw 60px;
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: calc(0.75rem + var(--body-font-boost));
  font-style: italic;
  opacity: 0.75;
  text-align: center;
}

/* Generic small-print note, same muted style as .tg-safety-disclaimer —
   used wherever a page needs a low-emphasis aside above the footer. */
.tg-note {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 6vw 60px;
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: calc(0.75rem + var(--body-font-boost));
  font-style: italic;
  opacity: 0.75;
  text-align: center;
}

.tg-note a {
  color: inherit;
  text-decoration: underline;
}

.kpop-store-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 6vw 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.kpop-store-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
}

.kpop-store-card__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.2rem * var(--font-scale));
  letter-spacing: 0.02em;
}

.kpop-store-card__address {
  margin: 0 0 12px;
  font-family: var(--font-body);
  color: var(--purple-700);
  font-size: calc((0.85rem + var(--body-font-boost)) * var(--font-scale));
}

.kpop-store-card__link {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--purple-700);
  color: #fff;
  font-family: var(--font-body);
  font-size: calc((0.85rem + var(--body-font-boost)) * var(--font-scale));
  text-decoration: none;
}

.kpop-store-card__link:hover {
  background: var(--purple-600);
}

.kpop-store-fallback {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 6vw 90px;
  text-align: center;
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.55;
}

@media (max-width: 760px) {
  .tg-grid {
    grid-template-columns: 1fr;
  }

  .kpop-store-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Partner Toolkit                                                         */
/* ---------------------------------------------------------------------- */

.info-text__link {
  color: var(--purple-700);
  text-decoration: underline;
}

.pt-ig-card {
  max-width: 420px;
  margin: 0 auto 20px;
}

.tg-card__photo {
  display: block;
  width: 100%;
  height: auto;
}

.pt-idea-card {
  scroll-margin-top: calc(var(--header-height) + var(--info-toc-height, 100px) + 16px);
}

.pt-idea-group {
  scroll-margin-top: calc(var(--header-height) + var(--info-toc-height, 100px) + 16px);
}

/* A few Idea Reference rows have wide/landscape product photos and read
   better as a single full-width card instead of following the 2-column
   grid. */
.pt-idea-card--wide {
  grid-column: 1 / -1;
}

/* The do/don't columns are a fixed 2-column grid regardless of container
   width — inside a narrower grid card that leaves too little room per
   column, so it collapses to one column there specifically. */
.tg-card__body .tips-dodont {
  grid-template-columns: 1fr;
}

.pt-idea-groups {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 6vw 90px;
}

.pt-idea-group + .pt-idea-group {
  margin-top: 48px;
}

.pt-idea-group__heading {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.9rem * var(--font-scale));
  letter-spacing: 0.02em;
}

/* Nested inside .pt-idea-groups, which already provides the outer
   max-width/margin/padding once for the whole page. */
.pt-idea-group__grid {
  max-width: none;
  margin: 0;
  padding: 0;
}

.pt-gate {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + 40px) 6vw 60px;
  background: url("/images/site/BG.jpg") center/cover no-repeat, var(--purple-800);
}

.pt-gate__card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 34px 30px;
  text-align: center;
}

.pt-gate__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.9rem * var(--font-scale));
  letter-spacing: 0.02em;
}

.pt-gate__text {
  margin: 0 0 20px;
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: calc((0.95rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.5;
}

.pt-gate__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  margin: 0 0 14px;
  border: 2px solid rgba(78, 42, 148, 0.25);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  color: var(--ink-900);
}

.pt-gate__input:focus {
  outline: none;
  border-color: var(--purple-700);
}

.pt-gate__submit {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: var(--purple-700);
  color: #fff;
  font-family: var(--font-body);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  letter-spacing: 0.02em;
  cursor: pointer;
}

.pt-gate__submit:hover {
  background: var(--purple-600);
}

.pt-gate__error {
  margin: 14px 0 0;
  font-family: var(--font-body);
  color: var(--magenta-500);
  font-size: calc((0.9rem + var(--body-font-boost)) * var(--font-scale));
}

/* ---------------------------------------------------------------------- */
/* Press                                                                   */
/* ---------------------------------------------------------------------- */

.press-quote {
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 20px 24px;
  border-left: 4px solid var(--purple-700);
  background: var(--cream-100);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-900);
  font-size: calc((1.05rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.6;
}

/* Media Guide's label+content rows are full sentences, not short checklist
   bullets — read naturally in mixed case (unlike .tips-list li) with the
   same bold-purple label treatment as the rest of the site. */
.press-label-list li {
  padding: 8px 4px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.5;
  border-bottom: 1px solid rgba(78, 42, 148, 0.1);
}

.press-label-list li strong {
  color: var(--purple-700);
}

.press-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.press-news-item {
  padding: 14px 4px;
  border-bottom: 1px solid rgba(78, 42, 148, 0.1);
}

.press-news-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.press-news-item__title {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink-900);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  text-decoration: none;
}

a.press-news-item__title:hover {
  text-decoration: underline;
  color: var(--purple-700);
}

.press-news-item__meta {
  font-family: var(--font-body);
  color: var(--purple-700);
  font-size: calc((0.8rem + var(--body-font-boost)) * var(--font-scale));
  white-space: nowrap;
}

.press-news-item__summary {
  margin: 6px 0 0;
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: calc((0.92rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.5;
}

/* ---------------------------------------------------------------------- */
/* About & Contact                                                         */
/* ---------------------------------------------------------------------- */

.ac-section {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  width: min(92vw, 1600px);
  margin: 0 auto;
  padding: clamp(50px, 8vw, 120px) 0;
}

.ac-section--reverse {
  flex-direction: row-reverse;
}

.ac-section__image {
  flex: 0 1 clamp(220px, 22vw, 380px);
}

.ac-section__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* This accent art is a transparent PNG with a lot of empty space around
   the figure — no card edge, just let it sit on the page background. */
.ac-section__image--plain img {
  border-radius: 0;
  box-shadow: none;
}

.ac-section__text {
  flex: 1 1 480px;
  min-width: 0;
  max-width: 760px;
}

.ac-section__heading {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(2rem * var(--font-scale));
  letter-spacing: 0.02em;
}

.ac-section__text p {
  margin: 0 0 14px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.6;
}

.ac-section__text p:last-child {
  margin-bottom: 0;
}

.ac-contact-item + .ac-contact-item {
  margin-top: 20px;
}

.ac-contact-item__q {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--purple-700);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.4;
}

.ac-contact-item__a {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.4;
}

.ac-contact-item__a a {
  color: var(--purple-700);
  text-decoration: underline;
}

.ac-quick-note {
  max-width: 760px;
  margin: 10px auto 0;
  padding: 24px 6vw 70px;
  font-family: var(--font-body);
  color: var(--ink-700);
  font-size: calc(0.8rem + var(--body-font-boost));
  line-height: 1.5;
  opacity: 0.75;
  text-align: center;
}

.ac-quick-note strong {
  color: var(--ink-700);
}

@media (max-width: 700px) {
  .ac-section,
  .ac-section--reverse {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 40px 6vw;
  }

  .ac-section__image {
    width: clamp(140px, 50vw, 220px);
  }
}

/* About section card grid — typography/spacing only, no images or icons
   inside the cards themselves. A text label sits above the grid, matching
   the "Contact" heading's font/color for a symmetric page composition. */
.ac-about-label {
  width: min(92vw, 1600px);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 0 0;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(2rem * var(--font-scale));
  letter-spacing: 0.02em;
  text-align: center;
}

.ac-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  width: min(92vw, 1600px);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 60px) 0 clamp(50px, 8vw, 120px);
}

.ac-card {
  background: var(--cream-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw, 36px);
}

.ac-card--full {
  grid-column: 1 / -1;
}

/* IP guidance card reads as a callout, not just another card. */
.ac-card--principles {
  background: var(--purple-700);
}

.ac-card__heading {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--purple-900);
  font-size: calc(1.6rem * var(--font-scale));
  letter-spacing: 0.02em;
}

.ac-card--principles .ac-card__heading {
  color: var(--cream-50);
}

.ac-card__body p {
  margin: 0 0 14px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.6;
}

.ac-card__body p:last-child {
  margin-bottom: 0;
}

.ac-card--principles .ac-card__body p {
  color: var(--cream-50);
}

.ac-card__checklist,
.ac-card__arrow-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-card__checklist li,
.ac-card__arrow-list li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 26px;
  font-family: var(--font-body);
  color: var(--ink-900);
  font-size: calc((1rem + var(--body-font-boost)) * var(--font-scale));
  line-height: 1.5;
}

.ac-card__checklist li:last-child,
.ac-card__arrow-list li:last-child {
  margin-bottom: 0;
}

.ac-card__checklist li::before,
.ac-card__arrow-list li::before {
  position: absolute;
  left: 0;
  color: var(--purple-700);
  font-weight: 700;
}

.ac-card__checklist li::before {
  content: "\2713";
}

.ac-card__arrow-list li::before {
  content: "\2192";
}

@media (max-width: 700px) {
  .ac-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Loading / error state                                                   */
/* ---------------------------------------------------------------------- */

.map-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  background: rgba(250, 246, 239, 0.9);
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: var(--ink-700);
  text-align: center;
  padding: 20px;
}

.map-status[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 860px) {
  .map-stage {
    margin: 16px;
  }

  .detail-panel {
    width: 88vw;
    min-width: 0;
  }
}