/* Layout · Bands (round 33): every section on its own full-width block of colour, in a repeating run of four:
   the design's page colour, a tint of its accent, its ink (inverted: light type on dark), then the accent itself. Big
   uppercase titles, the kicker as a pill, square cards, the programme as tiles. The reply form always sits on the
   tint, so the fields stay easy to read. Colours come from the design (and its palette), so every design gets its own
   bands. Loaded after the design's CSS. */
html.l-bands { --b-bg: var(--bg); --b-ink: var(--ink); --b-paper: var(--paper); --b-acc: var(--accent); --b-acc-ink: var(--accent-ink); --b-muted: var(--muted); }
html.l-bands .inv > .s:not(.s-hero):not(.has-sp) { position: relative; padding: 70px var(--gutter) 64px; text-align: center; border: 0; box-shadow: none; background-image: none !important; background-color: var(--bg) !important; color: var(--ink); }
html.l-bands .inv > .s:not(.s-hero):not(.has-sp)::before, html.l-bands .inv > .s:not(.s-hero):not(.has-sp)::after { display: none; }

/* the four tones (set as variables, so everything inside follows) */
html.l-bands .inv > .s:not(.s-hero):not(.has-sp):not(.s-rsvp):nth-of-type(4n+2), html.l-bands .inv > .s.b-paper { --bg: var(--b-bg); --ink: var(--b-ink); }
html.l-bands .inv > .s:not(.s-hero):not(.has-sp):nth-of-type(4n+3), html.l-bands .inv > .s.s-rsvp, html.l-bands .inv > .s.b-tint {
  --bg: color-mix(in srgb, var(--b-acc) 13%, var(--b-bg)); --ink: var(--b-ink); --line: color-mix(in srgb, var(--b-acc) 30%, transparent); }
html.l-bands .inv > .s:not(.s-hero):not(.has-sp):not(.s-rsvp):nth-of-type(4n), html.l-bands .inv > .s.b-dark {
  --bg: var(--b-ink); --ink: var(--b-bg); --muted: color-mix(in srgb, var(--b-bg) 72%, var(--b-ink));
  --line: color-mix(in srgb, var(--b-bg) 22%, transparent); --accent: color-mix(in srgb, var(--b-acc) 62%, var(--b-bg)); --accent-ink: var(--b-ink); }
html.l-bands .inv > .s:not(.s-hero):not(.has-sp):not(.s-rsvp):nth-of-type(4n+1), html.l-bands .inv > .s.b-acc {
  --bg: var(--b-acc); --ink: var(--b-acc-ink); --muted: color-mix(in srgb, var(--b-acc-ink) 78%, var(--b-acc));
  --line: color-mix(in srgb, var(--b-acc-ink) 30%, transparent); --accent: var(--b-acc-ink); --accent-ink: var(--b-acc); }
html.l-bands .inv > .s.s-closing:not(.s-hero):not(.s-rsvp):nth-of-type(n) {--bg: var(--b-ink); --ink: var(--b-bg); --muted: color-mix(in srgb, var(--b-bg) 72%, var(--b-ink)); --accent: color-mix(in srgb, var(--b-acc) 62%, var(--b-bg)); --line: color-mix(in srgb, var(--b-bg) 22%, transparent); }
/* text that designs colour with their own variables follows the band */
html.l-bands .inv > .s:not(.s-hero):not(.has-sp) :is(.sh-t, .vn-n, .pp-h, .pp-l, .cd-u b, .cl-line, .cl-sign, .story-body, .tml-t, .bio-n, .faq summary, .rs-done-t, .dr-text, .gl-n) { color: var(--ink); -webkit-text-fill-color: currentColor; background-image: none; text-shadow: none; }
html.l-bands .inv > .s:not(.s-hero):not(.has-sp) :is(.sh-k, .vn-l, .cd-u span, .tml-d, .bio-r, .dr-roles dt) { color: var(--accent); -webkit-text-fill-color: currentColor; }
html.l-bands .inv > .s:not(.s-hero):not(.has-sp) :is(.vn-a, .vn-t, .vn-note, .pp-intro, .faq p, .tml-x, .bio-t, .rs-by, .cl-tag) { color: var(--muted); }

/* headings: pill kicker, big uppercase title */
html.l-bands .inv .sh { margin-bottom: 34px; }
html.l-bands .inv .sh > :not(.sh-k):not(.sh-t) { display: none; }
html.l-bands .inv .sh::before, html.l-bands .inv .sh::after, html.l-bands .inv .sh-t::before, html.l-bands .inv .sh-t::after { content: none; display: none; }
html.l-bands .inv .sh-k { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px; font-size: .68rem; letter-spacing: .2em; }
html.l-bands .inv .sh-t { font-size: clamp(2.3rem, 11vw, 3.6rem); line-height: .98; text-transform: uppercase; letter-spacing: .01em; }

/* buttons follow the band */
html.l-bands .inv > .s .btn-line { border-radius: 0; border-width: 2px; color: var(--ink); border-color: var(--ink); background: transparent; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; }
html.l-bands .inv > .s .btn-line:hover { background: var(--ink); color: var(--bg); }

/* countdown: giant digits, no boxes */
html.l-bands .inv .cd { gap: 4px; }
html.l-bands .inv .cd-u { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.l-bands .inv .cd-u b { font-size: clamp(2.2rem, 12.5vw, 4.2rem); line-height: .95; }

/* programme: tiles */
html.l-bands .inv:not([class*="dz-s-"]) .tl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; background: none; }
html.l-bands .inv:not([class*="dz-s-"]) .tl::before, html.l-bands .inv:not([class*="dz-s-"]) .tl::after { display: none; }
html.l-bands .inv:not([class*="dz-s-"]) .tl-i { display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; margin: 0; border: 2px solid var(--ink); border-radius: 0; background: none; box-shadow: none; text-align: left; }
html.l-bands .inv:not([class*="dz-s-"]) .tl-i::before, html.l-bands .inv:not([class*="dz-s-"]) .tl-i::after, html.l-bands .inv:not([class*="dz-s-"]) .tl-i .dz-dot { display: none; }
html.l-bands .inv:not([class*="dz-s-"]) .tl-i:last-child:nth-child(odd) { grid-column: 1 / -1; }
html.l-bands .inv:not([class*="dz-s-"]) .tl-time { padding: 0; font-family: var(--display); font-size: 1.5rem; line-height: 1; text-align: left; }
html.l-bands .inv:not([class*="dz-s-"]) .tl-title { font-size: 1rem; }

/* cards: square, outlined, on the band */
html.l-bands .inv :is(.vn-c, .dr-roles > div, .gl-it, .gl-c, .pp-g) { border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: none; transform: none; }
html.l-bands .inv .vn-c::before, html.l-bands .inv .vn-c::after, html.l-bands .inv .vn-c > svg { display: none; }
html.l-bands .inv .vn { gap: 12px; }
html.l-bands .inv .pp { gap: 12px; }
html.l-bands .inv .pp-g { padding: 18px 16px; }
html.l-bands .inv .tml::before { background: currentColor; opacity: .3; }
html.l-bands .inv .tml-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }

/* gallery: square tiles edge to edge */
html.l-bands .inv .gal { gap: 4px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); max-width: none; }
html.l-bands .inv .gal-i img, html.l-bands .inv .gal-f, html.l-bands .inv .gal-ph { aspect-ratio: 1; border-radius: 0; }
@media (min-width: 720px) { html.l-bands .inv .gal { max-width: var(--maxw); margin-left: auto; margin-right: auto; } }

/* reply: a paper card on the tint */
html.l-bands .inv .rs, html.l-bands .inv .rs-done { border: 2px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: none; text-align: left; }
html.l-bands .inv .f-in, html.l-bands .inv .ch span { border-radius: 0; background: var(--bg); }
html.l-bands .inv .rs-btn { border-radius: 0; background: var(--ink); color: var(--bg); letter-spacing: .16em; text-transform: uppercase; font-size: .84rem; }

/* questions */
html.l-bands .inv .faq { text-align: left; }
html.l-bands .inv .faq details { border-bottom-color: var(--line); }

html.l-bands .inv:not([class*="dz-s-"]) .tl-i > .tl-time { order: 0; grid-column: auto; }
html.l-bands .inv:not([class*="dz-s-"]) .tl-i > .tl-body { order: 1; grid-column: auto; }

html.l-bands .inv .vn-c .dz-pin, html.l-bands .inv .vn-c .dz-tab { display: none; }

/* the design may colour its countdown digits for its own boxes; the layout's countdown has none */
html.l-bands .inv .cd-u b { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; text-shadow: none; }
html.l-bands .inv .cd-u span { color: var(--muted); }
html.l-bands .inv .cd { background: none; border: 0; box-shadow: none; }

/* every band's cards are made from the band itself, so card and type always match (a dark design's "paper" is often a light card) */
:where(html.l-bands .inv > .s:not(.s-hero):not(.has-sp)) * { --paper: color-mix(in srgb, var(--bg) 90%, var(--ink)); }
/* a design with its own programme style (departure board, film strip…): that section keeps the design's own colours */
html.l-bands .inv[class*="dz-s-"] > .s.s-schedule:not(.has-sp):nth-of-type(n) { --bg: var(--b-bg); --ink: var(--b-ink); --paper: var(--b-paper); --accent: var(--b-acc); --accent-ink: var(--b-acc-ink); --muted: var(--b-muted); --line: color-mix(in srgb, var(--b-ink) 14%, transparent); }
html.l-bands .inv .f-in, html.l-bands .inv .ch span { color: var(--ink); -webkit-text-fill-color: currentColor; }
html.l-bands .inv .s .f-in.f-in, html.l-bands .inv .s .ch.ch span { background-color: var(--bg); color: var(--ink); }   /* some designs paint their fields white with light type */
html.l-bands.t-loft { --b-acc-ink: #171514; }   /* Loft's amber accent reads better with dark type */