/* Typography and photographic compositing. Main geometry stays in styles.css. */
:root {
  --font-ui: 'Manrope', Arial, sans-serif;
  --ink-secondary: #c1c2c5;
  --ink-quiet: #999ca2;
  --portrait-grade: brightness(.91) contrast(1.025) saturate(.88);
}

body { font-family: var(--font-ui); font-weight: 450; letter-spacing: -.015em; }
button { font-family: inherit; }
.nav-link { font-size: 11px; font-weight: 650; letter-spacing: .12em; color: var(--ink-secondary); }
.section-title { font-size: 20px; font-weight: 650; letter-spacing: .17em; }
.event-name, .event-city { letter-spacing: -.035em; line-height: 1.08; }
.event-name { font-weight: 800; }
.event-city { font-weight: 750; }
.event-card { text-shadow: 0 3px 18px #0006; }
.event-meta {
  align-items: baseline;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: .005em;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin-bottom: 7px;
}
.event-meta time { font-weight: 650; font-variant-numeric: tabular-nums; color: #e2e2e4; }
.follow-button { font-size: 10px; font-weight: 650; letter-spacing: .12em; }
.site-footer small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: #d4d4d7; }
.follow-menu p { font-size: 10px; font-weight: 650; letter-spacing: .18em; color: var(--ink-quiet); }
.follow-menu a, .follow-menu button { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.end-mark { font-weight: 500; letter-spacing: .2em; color: #96989d; }
.back-button { font-size: 10px; font-weight: 600; letter-spacing: .11em; color: var(--ink-secondary); }
.detail-kicker { font-size: 10px; font-weight: 650; letter-spacing: .18em; color: var(--ink-secondary); }
.detail-content h2 { font-weight: 800; letter-spacing: -.05em; line-height: 1.04; }
.detail-city { font-weight: 700; letter-spacing: -.025em; }
.detail-facts > div { font-size: 13px; line-height: 1.6; border-bottom-color: #ffffff1c; }
.detail-facts dt { color: var(--ink-quiet); font-weight: 450; }
.detail-facts dd { color: #ededee; font-weight: 500; font-variant-numeric: tabular-nums; }
.detail-facts .unannounced { color: var(--ink-quiet); font-weight: 450; }
.ticket-button { font-size: 11px; font-weight: 750; letter-spacing: .065em; }
.calendar-button { font-size: 12px; font-weight: 550; letter-spacing: -.01em; }
.ticket-note { font-size: 11px; font-weight: 450; letter-spacing: 0; line-height: 1.75; color: #b1b2b6; }
.contacts-intro { font-weight: 450; line-height: 1.8; }
.contact-link { font-weight: 550; letter-spacing: -.025em; }
.contact-link small { font-weight: 450; letter-spacing: 0; }
.toast { font-family: var(--font-ui); font-weight: 500; }

/* A dark backing shadow and a broad lower fade anchor the cutouts in the arena. */
.portrait-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 12% -5% -5% -8%;
  background: radial-gradient(ellipse at 55% 72%, #000a 0, #0006 34%, transparent 71%);
  filter: blur(28px);
}
.artist-portrait {
  filter: var(--portrait-grade) drop-shadow(-20px 14px 24px #0008);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, #000e 83%, #0006 94%, transparent 100%);
}
.artist-portrait[data-position='instasamka'] { width: 106%; right: -3%; height: 101%; }
.artist-portrait[data-position='icegergert'] { width: 105%; right: -4%; height: 100%; }
.detail-portrait { mask-image: linear-gradient(to bottom, #000 0%, #000 74%, #000a 89%, transparent 100%); }
.detail-portrait > img { filter: var(--portrait-grade) drop-shadow(-24px 12px 26px #0009); transition: opacity .45s var(--ease); }
.detail-background { background-image: linear-gradient(90deg, #000e 0%, #000a 38%, #0005 70%, #0007 100%), url('assets/arena.webp'); }

/* Secret Guests use the same portrait space and transitions as announced artists. */
.secret-portrait {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .65s var(--ease), transform .9s var(--ease);
  pointer-events: none;
}
.secret-figure { position: relative; height: 100%; aspect-ratio: 2 / 3; max-width: 100%; }
.secret-figure > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(.95) drop-shadow(-20px 12px 24px #000a); }
.secret-question {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: 1;
  color: #d8dadd;
  text-shadow: 0 7px 22px #000c;
}
.secret-question--center { left: 51%; top: 34%; font-size: clamp(64px, 7.5vw, 116px); }
.secret-question--left { left: 23%; top: 26%; font-size: clamp(36px, 4.1vw, 64px); color: #9b9ea4; }
.secret-question--right { left: 80%; top: 39%; font-size: clamp(36px, 4.1vw, 64px); color: #9b9ea4; }
.portrait-stage.is-secret { opacity: 1; }
.portrait-stage.is-secret > .artist-portrait { opacity: 0; }
.portrait-stage.is-secret > .secret-portrait, .detail-portrait.is-secret > .secret-portrait { opacity: 1; transform: translateX(0); }
.detail-portrait.is-secret { display: block; }
.detail-portrait.is-secret > #detail-image { opacity: 0; }
.detail-layout:has(.detail-portrait.is-secret) { grid-template-columns: 56% 44%; max-width: none; margin: 0; }
.soon .section-title { font-size: 20px; }
.secret-card .event-name { font-weight: 750; letter-spacing: -.025em; }

@media (max-width: 700px) {
  .nav-link { font-size: 9.5px; letter-spacing: .08em; }
  .section-title { font-size: 15px; letter-spacing: .16em; }
  .event-name, .event-city { font-size: clamp(22px, 6.55vw, 41px); letter-spacing: -.035em; line-height: 1.1; }
  .event-meta { font-size: 12px; gap: 9px; margin-bottom: 7px; }
  .portrait-stage { opacity: .77; right: -4%; width: 80vw; mask-image: linear-gradient(transparent, #000 13%); }
  .artist-portrait { mask-image: linear-gradient(#000 68%, #000b 84%, transparent 100%); }
  .portrait-stage::before { filter: blur(20px); background: radial-gradient(ellipse at 60% 70%, #0007, transparent 72%); }
  .portrait-stage.is-secret { opacity: .92; }
  .secret-question--center { font-size: 64px; }
  .secret-question--left, .secret-question--right { font-size: 34px; }
  .detail-portrait { opacity: .24; }
  .detail-portrait.is-secret { opacity: .42; width: 80vw; height: 56vh; right: -7%; top: 30px; }
  .detail-content > .back-button { font-size: 9px; letter-spacing: .08em; }
  .detail-content h2 { font-size: clamp(34px, 9.6vw, 62px); }
  .detail-city { font-size: clamp(19px, 5.2vw, 28px); }
  .detail-kicker { font-size: 9px; }
  .detail-facts > div { font-size: 12px; padding-block: 13px; }
  .ticket-button { font-size: 10px; }
  .calendar-button { font-size: 11px; }
  .ticket-note { font-size: 10px; }
  .site-footer small { font-size: 10px; }
  .follow-button { font-size: 9px; letter-spacing: .1em; }
  .soon .section-title { font-size: 16px; }
  .secret-card .event-name { font-size: clamp(25px, 7vw, 40px); }
}

@media (prefers-reduced-motion: reduce) { .secret-portrait { transform: none; transition: none; } }