/* Option 1 — Poster Wall */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  color: var(--lilac);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { transform: scale(1.12); transition: transform 2.4s var(--ease); }
.is-loaded .hero-media img { transform: scale(1.02); }

/* Keeps the manifesto legible wherever the photo crops to bright smoke */
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, color-mix(in srgb, var(--red) 70%, transparent) 0%, transparent 55%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: calc(var(--nav-h) + clamp(24px, 6vh, 72px)) var(--gutter) 0;
  max-width: 1100px;
}
.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.85;
}
.hero-manifesto {
  font-family: var(--f-display);
  font-size: clamp(38px, 4.6vw, 76px);
  line-height: 0.92;
  text-transform: uppercase;
  max-width: 15ch;
  text-wrap: balance;
}
.hero-sub { margin-top: 22px; max-width: 34ch; font-size: clamp(15px, 1.2vw, 18px); }

.hero-copy > * { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.is-loaded .hero-copy > * { opacity: 1; transform: none; }
.is-loaded .hero-copy > :nth-child(2) { transition-delay: 0.15s; }
.is-loaded .hero-copy > :nth-child(3) { transition-delay: 0.3s; }

.hero-word {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 calc(var(--gutter) * 0.5);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: min(33vw, 64vh);
  line-height: 0.74;
  letter-spacing: -0.01em;
  color: var(--lilac);
  transform: translateY(4%);
}
.hero-word span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
.is-loaded .hero-word span { transform: translateY(0); }
.is-loaded .hero-word span:nth-child(2) { transition-delay: 0.06s; }
.is-loaded .hero-word span:nth-child(3) { transition-delay: 0.12s; }
.is-loaded .hero-word span:nth-child(4) { transition-delay: 0.18s; }
.is-loaded .hero-word span:nth-child(5) { transition-delay: 0.24s; }
.is-loaded .hero-word span:nth-child(6) { transition-delay: 0.3s; }

/* ---------- Section heads ---------- */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(64px, 10vw, 140px) var(--gutter) clamp(24px, 3vw, 40px);
}
.sec-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 180px);
  line-height: 0.85;
  text-transform: uppercase;
}
.sec-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: pulse 1.6s var(--ease-in-out) infinite; }
@keyframes pulse { 50% { transform: scale(0.5); opacity: 0.4; } }

/* ---------- Events accordion ---------- */
.acc {
  display: flex;
  gap: 6px;
  height: calc(100svh - var(--nav-h) - 24px);
  min-height: 560px;
  padding: 0 var(--gutter);
}
.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--lilac);
  cursor: pointer;
  outline: none;
  transition: flex-grow 0.9s var(--ease);
}
.panel.is-open { flex-grow: 4.2; cursor: default; }
.panel:focus-visible { box-shadow: inset 0 0 0 3px var(--lilac); }

.panel-media { position: absolute; inset: 0; }
.panel-media img { transform: scale(1.15); transition: transform 1.4s var(--ease); }
.panel.is-open .panel-media img { transform: scale(1); }
/* Open panel loses the duotone and shows the photo in colour */
.panel.is-open .panel-media::before,
.panel.is-open .panel-media::after { opacity: 0; }
.panel.is-open .panel-media img { filter: grayscale(0) contrast(1.05); transition: transform 1.4s var(--ease), filter 0.9s var(--ease); }
.panel-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--red) 0%, color-mix(in srgb, var(--red) 70%, transparent) 30%, transparent 62%);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.panel.is-open .panel-shade { opacity: 1; }

.panel-rail {
  position: absolute;
  inset: 20px 0 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.5s var(--ease);
}
.panel.is-open .panel-rail { opacity: 0; }
.panel-num { font-family: var(--f-display); font-size: 15px; letter-spacing: 0.08em; }
.panel-rail-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-display);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.panel-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 3vw, 44px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 8px clamp(20px, 3vw, 44px);
  min-width: 560px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.panel.is-open .panel-body { opacity: 1; transform: none; transition: opacity 0.8s var(--ease) 0.35s, transform 0.8s var(--ease) 0.35s; }
.panel-date {
  grid-row: span 4;
  font-family: var(--f-display);
  font-size: clamp(80px, 10vw, 168px);
  line-height: 0.8;
  text-transform: uppercase;
}
.panel-date small { display: block; font-size: 0.42em; line-height: 1; margin-top: 0.1em; }
.panel-tag {
  justify-self: start;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 10px;
}
.panel-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3vw, 48px); line-height: 0.95; text-transform: uppercase; }
.panel-venue { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.panel-desc { max-width: 44ch; font-size: 15px; }

/* ---------- Merch ---------- */
.merch { padding-bottom: clamp(64px, 9vw, 120px); }
.merch-side { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.merch-status { font-family: var(--f-display); font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; }
.merch-arrows { display: flex; gap: 10px; }

.track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding: 4px var(--gutter) 8px;
  scrollbar-width: none;
  cursor: grab;
}
.track::-webkit-scrollbar { display: none; }
.track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.track .product { width: clamp(250px, 27vw, 400px); }
.track::after { content: ""; flex: 0 0 18vw; }

.product { opacity: 0; transform: translateX(60px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.merch.is-in .product { opacity: 1; transform: none; }
.merch.is-in .product:nth-child(2) { transition-delay: 0.08s; }
.merch.is-in .product:nth-child(3) { transition-delay: 0.16s; }
.merch.is-in .product:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Small screens: accordion goes vertical ---------- */
@media (max-width: 820px) {
  .hero-word { font-size: 31vw; }
  .acc { flex-direction: column; height: auto; min-height: 0; gap: 6px; }
  .panel { flex: none; height: 88px; transition: height 0.8s var(--ease); }
  .panel.is-open { height: min(76svh, 620px); }
  .panel-rail { inset: 0 20px; flex-direction: row; }
  .panel-rail-title { writing-mode: horizontal-tb; transform: none; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 16px; flex: 1; }
  .panel-body { min-width: 0; grid-template-columns: 1fr; }
  .panel-date { grid-row: auto; font-size: 72px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .merch-side { align-items: flex-start; }
  .track .product { width: 74vw; }
}