/* Generated by scripts/42-party-states.py: the party panel's look per event */
/* The party's name takes the accent from its flyer; the label and the facts stay ink */
.party h2 { color: var(--accent); }
.party .kicker .script { color: var(--ink); }

/* The facts: four fixed cells, a small label over each value, under a rule, the same for every event */
.facts {
  display: grid; grid-template-columns: 6.2em 4.2em minmax(0, 1fr) 2.6em; gap: 0 1.3em;
  max-width: 620px; margin-top: 1.8rem; padding-top: 1rem; border-top: 1.5px solid var(--ink);
  color: var(--ink); text-transform: uppercase; font-weight: 700;
}
.facts dt { letter-spacing: .14em; opacity: .55; margin-bottom: .55em; }
.facts { font-size: clamp(18px, 1.7vw, 24px); }
.facts dd { line-height: 1.05; letter-spacing: .02em; }
.facts dt { font-size: max(11px, .5em); }

/* Every flyer is 4:5 (Kingsley: "all flyers should be 4:5 ratio"), so one width sizes them all alike */
.party .flyer { width: 50%; left: 5%; top: 9%; }
.party .flyer img { width: 100%; height: auto; }
/* the phone held up in front of the flyer, over its edge, so the two read as one
   (Kingsley: "the ohone and flyer feel to apart looking disconnected") */
.party .phone { right: 5%; }

/* The words and the stage sit together in the middle of the panel, the same space either side
   (Kingsley: "content together doesnt look centered on panel") */
.party { grid-template-columns: minmax(0, 620px) minmax(0, 660px); justify-content: center; column-gap: clamp(32px, 6vw, 96px); }

/* The flyer and phone bigger (Kingsley, 2026-10-24: "increase size of the flyer/phone pairing"), sized by the screen's
   height so the panel still fills one screen: the stage is up to 76% of the screen tall, the phone 92% of that, the
   flyer half of it wide, a tenth of the phone's width behind it (a fifth hid the flyer's name); the panel's own padding shrinks to make room */
@media (min-width: 761px) {
  /* and by the stage column's width, so the pair never pokes out of it into the name: the pair needs about the
     stage's height in width; the column is what's left of the screen after the gutters, the gap and the words
     (620 px, or half when the screen is narrow) */
  .party:not(.flyer-only) { --avail: calc(100vw - 2 * var(--gutter) - clamp(32px, 6vw, 96px));
    --sh: min(76svh, 780px, max(var(--avail) - 620px, var(--avail) / 2) * .96); --pw: calc(var(--sh) * .92 * 9 / 16);
    padding-block: var(--flow) calc(var(--flow) * .5); grid-template-columns: minmax(0, 620px) minmax(0, 760px); }
  .party:not(.flyer-only) .last-stage { aspect-ratio: auto; height: var(--sh); }
  .party:not(.flyer-only) .phone { height: calc(var(--sh) * .92); width: var(--pw); right: 3%; top: 3%; }
  .party:not(.flyer-only) .flyer { width: calc(var(--sh) * .5); left: auto; right: calc(3% + var(--pw) * .9); top: 12%; }
  /* the words set from the flyer's top edge rather than centred, so "last party" lines up with it and the room left
     over goes to the bottom, where the stamp is (Kingsley: "ill try #1") */
  .party:not(.flyer-only) .last-head { align-self: start; margin-top: calc(var(--sh) * .1); }
}
/* the flyer alone also sized by the screen's height, so its panel fits one screen on a short laptop too */
@media (min-width: 761px) {
  .party.flyer-only { padding-block: var(--flow) calc(var(--flow) * .5); }
  .party.flyer-only .last-stage .flyer { width: min(100%, 58svh); }   /* outranks the flyer-only width set below */
}
/* the name's lines are the ones set; party.js sizes it to fill its column (Kingsley: "test #2") */
.party .last-head h2 { white-space: nowrap; }

/* No recap beside it (not happened yet, or none on file): the flyer alone, bigger, its column as wide as it is */
.party.flyer-only { grid-template-columns: minmax(0, 620px) minmax(0, 500px); }
.party.flyer-only .last-stage { aspect-ratio: auto; padding: 3% 0 1%; }
.party.flyer-only .flyer { position: relative; left: 0; top: 0; width: 100%; transform: rotate(-3deg); }

/* Get tickets: a bar as wide as the facts (Kingsley: "D - wide bar") */
.tickets {
  display: block; max-width: 620px; margin-top: 1.6rem; padding: .62em 0 .58em; text-align: center;
  background: var(--accent); color: #fff; text-decoration: none;
  font: 700 clamp(20px, 2vw, 30px)/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 4px 5px 0 rgba(43, 37, 35, .3);
}
@supports (text-box: trim-both cap alphabetic) { .tickets { text-box: trim-both cap alphabetic; padding: .8em 0; } }
.tickets:hover { filter: brightness(1.1); }

@media (max-width: 760px) {
  .party, .party.flyer-only { grid-template-columns: 1fr; }
  .party .flyer { width: 52%; left: 0; }
  .party .phone { width: 52%; right: 0; }
  /* room between the facts and the flyer and phone, now the panel no longer fills a screen to give it */
  .party .last-stage { margin-top: clamp(18px, 6vw, 30px); }
  .party.flyer-only .flyer { width: 80%; margin: 0 auto; }
  .facts { font-size: 15px; gap: 0 1em; }
}