.experience {
  padding: 80px 6%;
  scroll-margin-top: 95px;
  background: var(--ink-1);
  color: var(--ink-7);
}
.experience-light {
  background: var(--paper-1);
  color: var(--ink-1);
}
.exp-heading {
  max-width: 850px;
  margin-bottom: 36px;
}
.exp-heading .eyebrow {
  margin-bottom: 25px;
  color: var(--ink-5);
}
.experience-light .eyebrow {
  color: var(--ink-5);
}
.exp-heading h2 {
  font-size: var(--t-h2);
  margin-bottom: 22px;
}
.exp-heading > p:last-child {
  max-width: 650px;
  font-size: var(--t-body);
  color: var(--ink-6);
}
.experience-light .exp-heading > p:last-child {
  color: var(--ink-6);
}
.exp-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 35px;
}
.exp-controls button {
  cursor: pointer;
  min-height: 52px;
  padding: 13px 18px;
  border: 1px solid var(--paper-2);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--t-small);
  text-align: left;
  display: flex;
  gap: 15px;
  align-items: center;
}
.exp-controls button span {
  font-size: var(--t-eyebrow);
  opacity: 0.65;
}
.exp-controls button[aria-pressed="true"] {
  background: var(--paper-0);
  color: var(--ink-1);
  border-color: var(--paper-0);
}
.experience-light .exp-controls button[aria-pressed="true"] {
  background: var(--ink-2);
  color: var(--ink-7);
  border-color: var(--ink-2);
}
.exp-controls button:hover {
  border-color: currentColor;
}
.exp-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 6%;
  align-items: center;
  padding: 0 0 35px;
}
.exp-panel + .exp-panel {
  border-top: 1px solid var(--ink-4);
  padding-top: 35px;
}
.is-interactive .exp-panel {
  border: 0;
  padding: 0;
  animation: exp-enter 0.35s ease both;
}
.exp-visual {
  min-width: 0;
  overflow: hidden;
  background: var(--ink-2);
}
.exp-copy {
  padding: 24px 0;
}
.exp-count {
  font-size: var(--t-small);
  color: var(--ink-5);
}
.experience-light .exp-count {
  color: var(--ink-5);
}
.exp-copy h3 {
  font-size: var(--t-h2);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.04em;
  margin: 18px 0 24px;
}
.exp-copy > p:not(.exp-count) {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-6);
}
.experience-light .exp-copy > p:not(.exp-count) {
  color: var(--ink-6);
}
.exp-copy ul {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.exp-copy li {
  padding: 12px 0;
  border-top: 1px solid var(--paper-2);
  color: var(--ink-6);
  font-size: var(--t-body);
}
.experience-light .exp-copy li {
  color: var(--ink-6);
  border-color: var(--paper-2);
}
.exp-copy .action-link {
  font-size: var(--t-body);
  min-height: 44px;
}
.exp-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.exp-photo {
  margin: 0;
  position: relative;
  min-height: 460px;
}
.exp-photo img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
}
.exp-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 22px 16px;
  background: linear-gradient(transparent, var(--veil-3));
  color: var(--ink-7);
  font-size: var(--t-eyebrow);
}
.route-art {
  padding: 25px 30px;
  background: radial-gradient(
    ellipse at top right,
    var(--paper-2),
    var(--ink-2) 65%
  );
}
.route-art > p,
.launch-art > p,
.case-art > p {
  /* mismo estilo que .eyebrow: tamaño --t-small, sin versales ni tracking */
  font-size: var(--t-small);
  /* Estos paneles tienen fondo --paper-2 (gris medio); --ink-5 daba 1.7:1 de
     contraste. Blanco es el único tono del sistema que llega a 4.5:1 ahí. */
  color: var(--ink-7);
}
.route-art svg {
  display: block;
  width: 100%;
  max-height: 390px;
  font-family: "DM Sans", Arial, sans-serif;
}
.route-art small,
.launch-art small,
.case-art small {
  font-size: var(--t-eyebrow);
  color: var(--ink-7);
  display: block;
  margin-top: 20px;
}
.package-stage {
  position: relative;
}
.package-stage img {
  height: 510px;
  object-fit: cover;
}
.package-marker {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--ink-7);
  color: var(--ink-0);
  border-radius: 50%;
  box-shadow: 0 0 0 8px var(--veil-light-1);
  font-size: var(--t-eyebrow);
}
.marker-0 {
  left: 32%;
  top: 64%;
}
.marker-1 {
  left: 70%;
  top: 45%;
}
.marker-2 {
  left: 62%;
  top: 67%;
}
.marker-3 {
  left: 35%;
  top: 25%;
}
.store-art {
  background: var(--paper-1);
  color: var(--ink-1);
  padding: 28px;
}
.store-chrome,
.store-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 15px;
}
.store-chrome {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--ink-5);
}
/* Literal a propósito: cifra decorativa del panel, fuera de la escala --t-*. */
.store-title {
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.05em;
  margin: 35px 0 20px;
}
.store-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.store-product {
  aspect-ratio: 1.125;
  background: url("/collection-cutout.webp") 0 0/400% 300% no-repeat;
}
.store-product.second {
  background-position: 100% 0;
}
.store-meta {
  margin: 20px 0;
}
.store-art small {
  font-size: var(--t-eyebrow);
  display: block;
  margin-top: 20px;
  /* --store-art tiene fondo claro (--paper-1); --ink-5 es para fondo
     oscuro y daba 2.4:1 de contraste. */
  color: var(--ink-4);
}
.launch-art,
.case-art {
  padding: 35px;
  min-height: 465px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper-2);
}
.launch-art h4,
/* Literal a propósito: cifra decorativa del panel, fuera de la escala --t-*. */
.case-art h4 {
  font-size: clamp(36px, 4vw, 62px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.055em;
  margin: 25px 0;
}
.launch-art ol {
  padding-left: 22px;
}
.launch-art li {
  padding: 8px;
  border-bottom: 1px solid var(--ink-4);
  color: var(--ink-6);
}
.case-art span {
  font-size: var(--t-h3);
  color: var(--paper-1);
}
.touring-page .hero {
  background:
    linear-gradient(90deg, #121212ed, #121212c9),
    url("/venue-delivery.webp") center 45% / cover;
}
.shopify-page .hero {
  background: var(--paper-2);
}
.section-index a.is-current {
  text-decoration: underline;
  text-underline-offset: 7px;
}
@keyframes exp-enter {
  from {
    opacity: 0.5;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 1051px) and (max-width: 1200px) {
  header nav {
    gap: 16px;
    font-size: var(--t-eyebrow);
  }
  header {
    gap: 18px;
  }
}
@media (max-width: 800px) {
  .experience {
    padding: 48px 20px;
    scroll-margin-top: 85px;
  }
  .exp-heading h2 {
    font-size: var(--t-h2);
  }
  .exp-heading > p:last-child {
    line-height: 1.6;
  }
  .exp-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .exp-controls button {
    line-height: 1.4;
    min-height: 56px;
    padding: 12px;
    gap: 10px;
  }
  .exp-panel {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .exp-copy {
    padding: 0;
  }
  .exp-copy h3 {
    font-size: var(--t-h2);
  }
  .exp-copy > p:not(.exp-count),
  .exp-visual {
    max-height: 370px;
  }
  .exp-photo,
  .launch-art,
  .case-art {
    min-height: 320px;
  }
  .exp-photo img,
  .package-stage img {
    height: 350px;
  }
  .route-art {
    padding: 20px;
  }
  .route-art svg {
    height: 270px;
  }
  .route-art small {
    margin-top: 0;
  }
  .store-art {
    padding: 20px;
  }
  .store-title {
    font-size: 30px;
    margin: 20px 0 10px;
  }
  .store-products {
    max-width: 260px;
    margin: auto;
  }
  .store-chrome {
    font-size: 15px;
  }
  .store-meta {
    font-size: 15px;
    margin: 10px 0;
  }
  .store-art small {
    margin-top: 12px;
  }
  .launch-art,
  .case-art {
    padding: 25px;
  }
  .launch-art h4,
  .case-art h4 {
    font-size: 42px;
    margin: 15px 0;
  }
  .launch-art ol {
    margin: 0;
  }
  .exp-heading {
    margin-bottom: 25px;
  }
  .exp-controls {
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-interactive .exp-panel {
    animation: none;
  }
}
.catalog-art {
  background: var(--paper-1);
  color: var(--ink-1);
  padding: 30px;
  min-height: 465px;
}
.catalog-art > p {
  font-size: var(--t-small);
  color: var(--ink-1);
}
/* Literal a propósito: cifra decorativa del panel, fuera de la escala --t-*. */
.catalog-art h4 {
  font-size: 36px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.04em;
  margin: 25px 0;
}
.catalog-row {
  display: flex;
  align-items: center;
  gap: 25px;
  border-top: 1px solid var(--ink-5);
  padding: 14px 0;
}
.catalog-row span {
  display: block;
  font-size: var(--t-eyebrow);
  color: var(--ink-5);
}
.catalog-row strong {
  font-size: var(--t-body);
  font-weight: 400;
}
.catalog-product {
  width: 100px;
  aspect-ratio: 1.125;
  background: url("/collection-cutout.webp") 0 0/400% 300% no-repeat;
  flex-shrink: 0;
}
.catalog-product.hoodie {
  background-position: 100% 0;
}
.catalog-art small {
  display: block;
  font-size: var(--t-eyebrow);
  color: var(--ink-5);
  margin-top: 22px;
}
@media (max-width: 800px) {
  .catalog-art {
    padding: 20px;
    min-height: 350px;
  }
  .catalog-art h4 {
    font-size: 28px;
    margin: 14px 0;
  }
  .catalog-product {
    width: 65px;
  }
  .catalog-row {
    padding: 8px 0;
    gap: 15px;
  }
  .catalog-art small {
    margin-top: 12px;
  }
}