/* Local Business Rewired, the Nov 9 remake: the parts built around the Nov 6 stage photos. Loaded after rewired.css,
   which still carries the tokens, the bar, the buttons, the clients, the tickets and everything else. Here: the
   opening (the three hosts on stage, the word over the dark side of the photo), one section per host, the photo above
   the close, and the photo on the tickets page. The stage photos stay in colour: the wall is the colour. */

/* ---------- the opening ---------- */
.hero { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; min-height: max(700px, min(100svh, 1040px)); overflow: hidden; background: var(--ground); }
.hero__pic { position: absolute; inset: 0 0 0 auto; z-index: -1; display: block; width: 66%; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; filter: brightness(0.88) contrast(1.06) saturate(0.94); }
.hero__pic::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--ground) 0%, rgba(6, 6, 7, 0.78) 12%, rgba(6, 6, 7, 0) 36%),
  linear-gradient(0deg, var(--ground) 0%, rgba(6, 6, 7, 0.5) 12%, rgba(6, 6, 7, 0) 32%),
  linear-gradient(180deg, rgba(6, 6, 7, 0.78) 0%, rgba(6, 6, 7, 0) 20%); }
.hero__top { position: relative; display: grid; align-items: end; }
.hero__body { padding-block: 128px clamp(36px, 5vw, 60px); }
.hero__body > * { max-width: min(35rem, 41vw); }
.hero__when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: clamp(28px, 4vw, 52px); font: 400 12px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
.hero__when i, .host__part i { width: 18px; height: 1px; background: currentColor; opacity: 0.55; }
.hero h1 { max-width: none; }
.hero .t-small { padding-left: 0; }
.hero .t-big { font-size: clamp(5rem, 10.8vw, 10.6rem); white-space: nowrap; text-shadow: 0 2px 40px rgba(6, 6, 7, 0.55); }
.hero__pre { margin-top: clamp(28px, 3vw, 40px); font: 400 clamp(1.06rem, 1.32vw, 1.24rem)/1.5 var(--sans); letter-spacing: -0.012em; color: var(--text-2); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
.hero .seats { margin-top: 26px; }
.hero__cap { position: absolute; right: var(--gutter); bottom: 18px; max-width: 24em; font: 400 11px/1.4 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; text-align: right; color: var(--text-3); }
.hero__bill { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; padding-block: 0 clamp(28px, 3vw, 40px); }
.hero__bill::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: 20px; background: linear-gradient(90deg, var(--gold), var(--ember) 28%, var(--rose) 56%, var(--violet) 82%, rgba(141, 121, 201, 0)); }
.hero__bill dt { font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.hero__bill dd { margin-top: 8px; font: 600 clamp(1rem, 1.5vw, 1.32rem)/1.2 var(--sans); letter-spacing: -0.03em; }

@media (max-width: 999px) {
  .hero { display: block; min-height: 0; }
  .hero__pic { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; max-height: 62svh; }
  .hero__pic img { object-position: 50% 70%; }
  .hero__pic::after { background:
    linear-gradient(0deg, var(--ground) 0%, rgba(6, 6, 7, 0.55) 20%, rgba(6, 6, 7, 0) 48%),
    linear-gradient(180deg, rgba(6, 6, 7, 0.8) 0%, rgba(6, 6, 7, 0) 26%); }
  .hero__top { margin-top: -20px; }
  .hero__body { padding-block: 0 36px; }
  .hero__body > * { max-width: 36rem; }
  .hero .t-big { font-size: clamp(4.3rem, 21.5vw, 9.5rem); }
  .hero__cap { position: static; margin: 0 var(--gutter) 28px; max-width: none; text-align: left; }
  .hero__bill { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .hero__bill::before { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .hero__cta { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero__cta .textlink { align-self: flex-start; }
}

/* the opening's entrance: the photo settles, the letters fade in one by one, the rest rises after them */
.js .hero__pic img { animation: settle 2s var(--ease) both; }
@keyframes settle { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.js .hero__when, .js .hero__pre, .js .hero__cta, .js .hero .seats, .js .hero__cap, .js .hero__bill { animation: rise 1.2s var(--ease) both; }
.js .hero__when { animation-delay: 0.15s; }
.js .hero__pre { animation-delay: 0.9s; }
.js .hero__cta { animation-delay: 1.05s; }
.js .hero .seats { animation-delay: 1.18s; }
.js .hero__cap, .js .hero__bill { animation-delay: 1.3s; }
.js .hero:not(.on) .hero__when, .js .hero:not(.on) .hero__pre, .js .hero:not(.on) .hero__cta, .js .hero:not(.on) .seats, .js .hero:not(.on) .hero__cap, .js .hero:not(.on) .hero__bill, .js .hero:not(.on) .dot { animation-play-state: paused; }
.js .hero:not(.on) .t-big .ch { opacity: 0; }
.js .hero.on .t-big .ch { opacity: 1; transition: opacity 0.55s ease; transition-delay: calc(0.32s + var(--i) * 34ms); }

/* ---------- a photo that keeps its colour ---------- */
.why__pic--color img { filter: none; }

/* ---------- the hosts, one section each ---------- */
.hosts2 { display: grid; gap: clamp(80px, 10vw, 152px); }
.host { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px clamp(28px, 4.4vw, 72px); align-items: center; }
.host--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.host--flip .host__shot { order: 2; }
.host__shot { position: relative; }
.host__shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.host__shot figcaption { margin-top: 12px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.host--flip .host__shot figcaption { text-align: right; }
.host__body { position: relative; isolation: isolate; }
.host__num { position: absolute; z-index: -1; right: -0.04em; top: -0.5em; font: 800 clamp(9rem, 17vw, 17rem)/1 var(--sans); letter-spacing: -0.07em; color: transparent; -webkit-text-stroke: 1px rgba(244, 239, 231, 0.13); user-select: none; }
.host__part { display: flex; align-items: center; gap: 12px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
.host h3 { margin-top: 16px; font: 800 clamp(2.5rem, 4.5vw, 4.3rem)/0.92 var(--sans); letter-spacing: -0.06em; }
.host__role { margin-top: 14px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); }
.host__sig { width: auto; height: clamp(40px, 3.8vw, 54px); margin-top: 22px; opacity: 0.92; }
#cam .host__sig { height: clamp(30px, 2.9vw, 40px); margin-block: 28px 6px; }  /* Cam's wordmark is wider and heavier */
.host__topic { margin-top: 24px; font-size: clamp(1.04rem, 1.28vw, 1.2rem); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.host__topic b { font-weight: 600; color: var(--paper); }
.host__creds { list-style: none; margin-top: 26px; border-top: 1px solid var(--rule-2); }
.host__creds li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.45; color: var(--text-2); }
.host__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.host__more img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.host__screen img { object-position: 0 0; }
@media (max-width: 900px) {
  .host, .host--flip { grid-template-columns: minmax(0, 1fr); }
  .host--flip .host__shot { order: 0; }
  .host--flip .host__shot figcaption { text-align: left; }
  .host__num { top: -0.28em; }
}

/* ---------- the photo above the close ---------- */
.close { padding-top: clamp(72px, 8vw, 112px); }
.finale { position: relative; margin-bottom: clamp(72px, 9vw, 128px); }
.finale img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 62%; border-radius: 3px; }
.finale::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(242, 194, 123, 0), var(--gold) 18%, var(--ember) 40%, var(--rose) 62%, var(--violet) 84%, rgba(141, 121, 201, 0)); }
@media (max-width: 700px) { .finale img { aspect-ratio: 4 / 3; } }

/* ---------- the tickets page: the hosts beside "Pick your seat." ---------- */
.tpage__head--pic .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 var(--gutter); align-items: end; }
.tpage__head--pic .wrap > * { grid-column: 1; }
.tpage__head--pic .tpage__pic { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
.tpage__pic img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; border-radius: 3px; }
.tpage__pic figcaption { margin-top: 12px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
@media (max-width: 900px) {
  .tpage__head--pic .wrap { grid-template-columns: minmax(0, 1fr); }
  .tpage__head--pic .tpage__pic { grid-column: 1; grid-row: auto; margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__pic img, .js .hero__when, .js .hero__pre, .js .hero__cta, .js .hero .seats, .js .hero__cap, .js .hero__bill { animation: none; opacity: 1; }
  .js .hero .t-big .ch { opacity: 1; transition: none; }
}