/* proartsproductions.com: ProArts Productions and ProArts Hub (every page with <body class="pa">).
   The pages continue the entrance page: black, the real posters and photographs, tickets.
   The posters do the shouting, so the page speaks quietly: plain Archivo in modest sizes. The narrow heavy letters of the
   logo are used only where a ProArts name is set as a name (the header, the three small tickets in the foot).
   A concert is never shown without its poster, and every concert picture is 4:5 (tools/build.py makes them so). */

@font-face { font-family: "League Spartan"; src: url("../fonts/leaguespartan-var-latin.woff2?v=00a36799f1") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

.pa { --lime: #dadd4c; background: #000; color: #fff; overflow-x: clip; }
/* The pages are black. White is used sparingly: at most one band on a page, for the part people read (the story, the
   facts), marked with the class "light". Every colour a component needs comes from these two sets, so the same component
   is right on both. A dark panel inside a white band (the concert strip, say) takes the dark set again. */
.pa, .pa .pair-black, .pa .pitch-in, .pa .news, .pa .cstrip {
  --soft: #d6d6d6; --mute: #a3a3a3; --rule: #2b2b2b; --raise: #131313; --raise-2: #1f1f1f; --hair: rgba(255, 255, 255, .12); --ring: #3a3a3a;
  --orange-text: var(--orange); --field: #000; --field-line: #404040;
  --btn-solid: #fff; --btn-solid-ink: #000; --btn-line: rgba(255, 255, 255, .42); --btn-ink: #fff; --btn-over: #fff; --btn-over-ink: #000;
  --accent: var(--orange); --focus: 0 0 0 3px #000, 0 0 0 6px var(--orange); --field-ring: rgba(255, 127, 48, .38); color-scheme: dark; }
.pa .light {
  --soft: #333; --mute: #666; --rule: #e2e2e2; --raise: #f3f3f3; --raise-2: #e8e8e8; --hair: rgba(0, 0, 0, .14); --ring: #cfcfcf;
  --orange-text: var(--orange-deep); --field: #fff; --field-line: #bdbdbd;
  --btn-solid: #000; --btn-solid-ink: #fff; --btn-line: rgba(0, 0, 0, .45); --btn-ink: #000; --btn-over: #000; --btn-over-ink: #fff;
  --accent: var(--orange-deep); --focus: 0 0 0 3px #fff, 0 0 0 6px var(--orange-deep); --field-ring: rgba(194, 65, 12, .32);
  background: #fff; color: #000; color-scheme: light; }
.pa .pair-black, .pa .pitch-in, .pa .news, .pa .cstrip { color: #fff; }
.pa ::selection { background: var(--orange); color: #000; }
/* a plain link in the text (:where keeps this rule weak, so every component can dress its own links) */
.pa main :where(a:not([class])) { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .pa main :where(a:not([class])):hover { color: var(--orange-text); } }

/* ---------- logo: the real files, which carry their own white disc ---------- */
.logo-badge { flex: none; display: inline-block; width: 50px; height: 50px; }
.logo-badge img { display: block; width: 100%; height: 100%; }
/* the Hub logo: its disc is the same size as the ProArts one, and the "HUB" tag hangs a little below and to the right */
.logo-badge-hub img { width: 101%; max-width: none; height: auto; }

/* ---------- header: black. Desktop: the menu with a sliding orange line; phones: a menu that slides in from the left ---------- */
.pa-head { position: sticky; top: 0; z-index: 40; background: #000; color: #fff; transition: box-shadow .3s ease; }
.pa-head.scrolled { box-shadow: 0 1px 0 #1f1f1f, 0 18px 30px -22px #000; }
.pa-head-in { display: flex; align-items: center; gap: 22px; min-height: 84px; }
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; line-height: 1; white-space: nowrap; }
.mark-words { display: grid; gap: 5px; }
.mark-words b { font-weight: 850; font-stretch: 62%; font-size: 29px; letter-spacing: -.005em; line-height: .9; }
/* the mark's second line (Productions, Hub, and the footer's words): spaced capitals in a soft grey, his choice of 12 November 2026 */
.mark-words span { font-weight: 560; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: #c9c9c9; }
.pa-nav { position: relative; margin-left: auto; }
.pa-nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pa-nav a { position: relative; display: block; padding: 12px 12px; border-radius: 6px; font-size: 15.5px; font-weight: 600; color: #e2e2e2; text-decoration: none; white-space: nowrap; transition: color .2s; }
.pa-nav a[aria-current="page"] { color: #fff; }
.pa-nav:not(.ink-ready) a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; }
.pa-ink { position: absolute; left: 0; bottom: 5px; width: 1px; height: 2px; background: var(--orange); transform-origin: 0 50%; opacity: 0; pointer-events: none;
  transition: transform .42s cubic-bezier(.3, .8, .2, 1), opacity .25s ease; }
.pa-ink.on { opacity: 1; }
.pa-nav.no-anim .pa-ink { transition: none; }
@media (hover: hover) and (pointer: fine) { .pa-nav a:hover { color: #fff; } }
.pa .pa-cta { min-height: 46px; padding: 0 20px; }
.pa-cta .lbl-s { display: none; }
.pa-head .menu-btn { order: 3; border: 1.5px solid rgba(255, 255, 255, .34); border-radius: 50%; width: 46px; height: 46px; background: none; color: #fff; }
@media (hover: hover) and (pointer: fine) { .pa-head .menu-btn:hover { border-color: var(--orange); } }
@media (max-width: 1060px) {
  .pa-head-in { gap: 10px; min-height: 72px; }
  .menu-btn { display: inline-flex; }
  .pa-nav { display: none; }
  .pa-cta { margin-left: auto; }
  .pa .pa-cta { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
}
/* ProArts Hub's menu has longer words: it folds into the menu button a little earlier */
@media (max-width: 1200px) {
  .pa-head-hub .pa-head-in { gap: 10px; min-height: 72px; }
  .pa-head-hub .menu-btn { display: inline-flex; }
  .pa-head-hub .pa-nav { display: none; }
  .pa-head-hub .pa-cta { margin-left: auto; }
}
@media (max-width: 420px) { .logo-badge { width: 42px; height: 42px; } .mark { gap: 10px; } .mark-words b { font-size: 25px; } .mark-words span { font-size: 8.5px; letter-spacing: .2em; } .pa-cta .ic { display: none; } }
@media (max-width: 350px) { .pa-cta .lbl-l { display: none; } .pa-cta .lbl-s { display: inline; } }

/* the phone menu (assets/css/family.css) in the quiet letters of these pages; the concert in it shows its real poster */
.pa .menu-links a { font-stretch: 100%; font-weight: 750; font-size: clamp(24px, 6.6vw, 28px); letter-spacing: -.02em; padding: 15px 0 14px; }
.pa .menu-feature { grid-template-columns: 62px minmax(0, 1fr) auto; }
.pa .mf-poster { display: block; width: 62px; height: auto; aspect-ratio: 4 / 5; padding: 0; border-radius: 6px; object-fit: cover; background: #000; }
.pa .mf-text b { font-stretch: 100%; font-weight: 800; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
.pa .mf-go { border-radius: 999px; padding: 10px 14px; }

/* ---------- type ---------- */
.display { font-weight: 800; font-size: clamp(40px, 4.9vw, 64px); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.display-md { font-size: clamp(36px, 4.3vw, 56px); line-height: 1.05; }
.h2 { font-weight: 750; font-size: clamp(25px, 2.4vw, 32px); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; }
.h2-lg { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.028em; line-height: 1.08; }
.h2-sm { font-size: clamp(22px, 2vw, 26px); }
.hero-sub { margin-top: 10px; font-size: clamp(18.5px, 1.7vw, 22px); font-weight: 600; line-height: 1.25; letter-spacing: -.008em; }
.lead { max-width: 33em; font-size: clamp(17px, 1.4vw, 18.5px); line-height: 1.5; color: var(--soft); }
.now { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14.5px; font-weight: 700; color: var(--orange-text); }
.now i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 127, 48, .24); }
.note { margin-top: 16px; font-size: 14px; color: var(--mute); }
.pa .note a { font-weight: 650; white-space: nowrap; }
.more-link { display: inline-block; padding: 9px 0; font-size: 15.5px; font-weight: 650; color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.more-link .ic { display: inline-block; vertical-align: -2px; margin-left: 5px; }
@media (hover: hover) and (pointer: fine) { .more-link:hover { color: var(--orange-text); } }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 26px; }
.crumbs { padding: 6px 0 0; font-size: 14px; color: var(--mute); }
.pa .crumbs a { color: var(--soft); text-decoration-color: #555; text-decoration-thickness: 1px; }
.nb { white-space: nowrap; }

/* buttons on black: orange is the one that sells; white and outlined are the quieter ones */
.pa .btn { min-height: 48px; padding: 0 22px; border-width: 1.5px; border-radius: 999px; font-size: 15.5px; font-weight: 700; }
.pa .btn .ic { width: 19px; height: 19px; }
.pa .btn-solid { background: var(--btn-solid); color: var(--btn-solid-ink); }
.pa .btn-line, .pa .btn-light { border-color: var(--btn-line); color: var(--btn-ink); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .pa .btn-orange:hover { background: var(--btn-over); color: var(--btn-over-ink); }
  .pa .btn-solid:hover { background: var(--orange); color: #000; }
  .pa .btn-line:hover, .pa .btn-light:hover { border-color: var(--btn-over); background: var(--btn-over); color: var(--btn-over-ink); }
}

/* ---------- sections ---------- */
.section { padding: clamp(46px, 6.4vw, 84px) 0; }
.section-flush { padding-top: 0; }   /* a white band that continues the white band before it */

/* ---------- frames ----------
   The pages are black from top to bottom, so every black part stands in its own frame: where one part ends and the next
   begins is drawn, not coloured. Four things need no frame. The photo bands (the stage, the top of a page, the last
   band before the foot) and the white band end by themselves. A part made of boxes only (class "unframed": one panel, a
   row of cards) has its boxes take the same edge, instead of standing in a second box. And the tickets of a concert and
   the past shows stand open on the page (class "open"): a ticket and a poster are frames already and need the whole
   width of the column, so a box around a row of them was one line too many and squeezed them.
   Black parts follow each other at one distance (--stack); next to the white band and to an open part the distance is
   larger (--band-gap). */
.pa { --frame: rgba(255, 255, 255, .2); --stack: clamp(14px, 2.2vw, 28px); --band-gap: clamp(34px, 5vw, 64px); --frame-pad: clamp(16px, 3.8vw, 52px); }
.pa main > .section:not(.light), .pa main > .pitch, .pa main > .tour-only > .pitch { padding: var(--stack) 0 0; }
.pa main > .section:not(.light):not(.unframed):not(.open) > .wrap { padding: var(--frame-pad); border: 1px solid var(--frame); border-radius: 20px; }
.pa .pitch-in, .pa .unframed :is(.news, .panel, .pair-black, .pair-soft, .next a) { border: 1px solid var(--frame); }
.pa main > .section:not(.light) + .light { margin-top: var(--band-gap); }
/* a little more air under the stage, whose tickets or buttons end just above (not when that stage is the hidden one) */
.pa main > .stage + .section:not(.light) { padding-top: clamp(18px, 3vw, 42px); }
html:not(.tour-over) .pa main > .stage.after-only + .section:not(.light) { padding-top: var(--stack); }
/* the black part after a white band: also when the concert strip that stood between them is gone, after the tour */
.pa main > .light + .section:not(.light), .pa main > .light + .pitch, .pa main > .light + .tour-only > .pitch:first-child,
html.tour-over .pa main > .light + .tour-only + .section:not(.light) { padding-top: var(--band-gap); }
.pa main > .section:not(.light):last-child, .pa main > .pitch:last-child { padding-bottom: var(--band-gap); }
/* an open part, and the part after it; right under the top of a page it starts where that top's own space ends */
.pa main > .section.open, .pa main > .open + .section:not(.light) { padding-top: var(--band-gap); }
.pa main > .mast + .section.open { padding-top: clamp(22px, 3vw, 40px); }
.pa main > .show + .section.open { padding-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 40px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.6vw, 30px); }
.section-head p { max-width: 34em; color: var(--mute); }
.section-head .tour-line { margin-top: 6px; color: var(--soft); }
.tour-line span { color: var(--orange-text); font-weight: 650; }

/* ---------- a concert picture: always 4:5 ---------- */
.post { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #111; box-shadow: 0 0 0 1px var(--hair); }
.post img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-none { display: grid; place-items: center; padding: 12%; background: #161616; text-align: center; font-weight: 800; font-size: clamp(18px, 2vw, 26px); line-height: 1.1; letter-spacing: -.02em; text-decoration: none; color: #fff; }

/* ---------- two or more concerts ahead: the top of the Concerts page is a list, one row per concert in the order they
   start. Each row: the poster, the dates and the name, the cities as tickets, the way to the concert's own page. On a phone
   the poster and the name sit side by side and the tickets take the whole width under them. ---------- */
.season { padding: clamp(36px, 4.6vw, 60px) 0 clamp(26px, 3.4vw, 44px); }
.season-head { max-width: 640px; margin-bottom: clamp(26px, 3vw, 40px); }
.season-head .lead { margin-top: 14px; max-width: 30em; color: var(--soft); }
.sl { display: grid; gap: clamp(28px, 3.4vw, 44px); margin: 0; padding: 0; list-style: none; }
.sl-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px clamp(22px, 3vw, 40px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--rule); }
.sl-post { border-radius: 10px; }
.sl-post.post-none { font-size: 22px; }
.sl-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sl-head { display: flex; flex-direction: column; gap: 4px; }
.sl-when { font-size: 14.5px; font-weight: 700; color: var(--orange-text); }
.sl-title { font-size: clamp(34px, 3.6vw, 48px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.pa .sl-title a { color: inherit; text-decoration: none; }
.sl-tour { font-size: 18px; font-weight: 600; }
.sl-main .tks { margin-top: 16px; }
.sl-main .tk-in { --stub: 70px; }
.sl-main .tk-city { font-size: 24px; overflow-wrap: normal; }
.sl-main .more-link { align-self: flex-start; margin-top: 6px; }
.sl-post img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .sl-post:hover img { transform: scale(1.035); }
  .pa .sl-title a:hover { color: var(--orange-text); }
}
@media (max-width: 760px) {
  .sl-row { grid-template-columns: 96px minmax(0, 1fr); }
  .sl-row > .sl-main { display: contents; }
  .sl-head { grid-column: 2; align-self: center; }
  .sl-title { font-size: 28px; }
  .sl-tour { font-size: 15.5px; }
  .sl-post.post-none { font-size: 14px; }
  .sl-row > .sl-main > .tks, .sl-row > .sl-main > .more-link { grid-column: 1 / -1; }
}

/* ======================================================================
   THE TOP OF THE CONCERTS PAGE: the entrance page, continued. The artist's photograph stands on the right like a stage,
   the words are on the left on black, and the cities lie along the bottom as orange tickets (assets/css/events.css).
   When no concert is ahead the same stage carries a ProArts photograph and the way to hear about the next one.
   ====================================================================== */
/* The stage is as tall as what stands on it, never as tall as the screen: on a large monitor the next part of the page
   is in sight. The photograph belongs to the column of the page (it does not run off to the edge of a wide screen). */
.stage { --over: 80px; position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: clamp(540px, 47vw, 650px); }
.stage-pic { position: absolute; z-index: -1; top: 0; right: max(0px, (100% - var(--wrap)) / 2 - var(--over)); width: min(62%, 780px); height: calc(100% - 92px); object-fit: cover; object-position: 50% 8%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 93%, transparent 100%), linear-gradient(0deg, transparent 2%, #000 34%), linear-gradient(180deg, transparent 0, #000 9%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 93%, transparent 100%), linear-gradient(0deg, transparent 2%, #000 34%), linear-gradient(180deg, transparent 0, #000 9%); mask-composite: intersect; }
/* a concert without a photograph of its own: its poster stands there instead */
.stage-pic-poster { top: 6%; right: max(var(--gut), (100% - var(--wrap)) / 2); width: auto; height: 64%; border-radius: 8px; -webkit-mask-image: none; mask-image: none; }
.stage-words { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 4.6vw, 60px) 0 clamp(30px, 4vw, 50px); }
.stage-words > * { max-width: 440px; }
.stage-words .lead { margin-top: 14px; max-width: 24.5em; }
.stage-words .lead b { color: #fff; font-weight: 700; white-space: nowrap; }
.stage .tks { padding-bottom: clamp(16px, 2vw, 26px); }
.stage-idle { min-height: clamp(460px, 40vw, 560px); }
.stage-idle .stage-pic { height: 100%; }
.stage-idle .stage-words > * { max-width: 600px; }
.stage-idle .stage-words .lead { max-width: 28em; }
@media (max-width: 1360px) { .stage-pic { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(0deg, transparent 2%, #000 34%), linear-gradient(180deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(0deg, transparent 2%, #000 34%), linear-gradient(180deg, transparent 0, #000 9%); } }
@media (max-width: 900px) {
  .stage, .stage-idle { min-height: 0; }
  .stage-pic, .stage-idle .stage-pic { position: static; width: 100%; height: auto; max-height: 62vh; margin-bottom: -15vw;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 97%); mask-image: linear-gradient(180deg, #000 58%, transparent 97%); }
  .stage-pic-poster { width: min(100% - 2 * var(--gut), 440px); height: auto; margin: 0 auto 18px; -webkit-mask-image: none; mask-image: none; }
  .stage-words { flex: none; padding-top: 0; padding-bottom: 22px; }
  .stage-idle .stage-words { padding-bottom: 40px; }
}
/* ProArts Hub's top: the same stage, with the festival's lime ticket (the one from the entrance page) at its foot */
.stage-hub { min-height: clamp(540px, 46vw, 620px); }
.stage-hub .stage-pic { height: calc(100% - 40px); object-position: 50% 40%; }
.stage-hub .stage-words > * { max-width: 520px; }
.stage-hub .stage-words .lead { max-width: 28em; }
.stage-foot { padding-bottom: clamp(16px, 2vw, 26px); }
.con-card { --c: var(--lime); position: relative; isolation: isolate; display: flex; width: min(100%, 520px); border-radius: 18px; color: #000; text-decoration: none; transition: transform .32s cubic-bezier(.2, .8, .25, 1); }
.con-card-in { --stub: 92px; --bite: 11px; position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); border-radius: 16px; background: var(--c);
  -webkit-mask-image: radial-gradient(circle var(--bite) at calc(100% - var(--stub)) 0, transparent 96%, #000 100%), radial-gradient(circle var(--bite) at calc(100% - var(--stub)) 100%, transparent 96%, #000 100%); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle var(--bite) at calc(100% - var(--stub)) 0, transparent 96%, #000 100%), radial-gradient(circle var(--bite) at calc(100% - var(--stub)) 100%, transparent 96%, #000 100%); mask-composite: intersect; }
.con-card-in::after { content: ""; position: absolute; top: 18px; bottom: 18px; left: calc(100% - var(--stub) - 1px); border-left: 2px dashed rgba(0, 0, 0, .34); }
.con-card-body { display: grid; gap: 10px; min-width: 0; padding: 18px 16px 18px 20px; }
.con-card-top { display: flex; align-items: center; gap: 12px; }
.con-card-top img { flex: none; width: 52px; height: 52px; }
.con-card-top small { display: block; font-size: 13px; font-weight: 700; }
.con-card-top b { display: block; margin-top: 2px; font-family: "League Spartan", "Archivo", sans-serif; font-weight: 800; font-size: clamp(22px, 2.1vw, 27px); line-height: .96; letter-spacing: -.02em; }
.con-card-text { font-size: 14.5px; line-height: 1.4; }
.con-card-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 750; }
.con-card-stub i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #000; color: var(--c); transition: transform .28s cubic-bezier(.3, .8, .2, 1); }
.con-card-stub .ic { width: 22px; height: 22px; }
.pa .con-card:focus-visible { box-shadow: none; outline: 3px solid #fff; outline-offset: 4px; border-radius: 18px; }
@media (hover: hover) and (pointer: fine) { .con-card:hover { transform: translateY(-8px) rotate(-.8deg); } .con-card:hover .con-card-stub i { transform: scale(1.1); } }
@media (max-width: 900px) { .stage-hub .stage-words { padding-bottom: 20px; } .con-card { width: 100%; } }
@media (max-width: 420px) { .con-card-in { --stub: 72px; } .con-card-stub i { width: 46px; height: 46px; } .con-card-body { padding: 16px 12px 16px 16px; } .con-card-top img { width: 44px; height: 44px; } }

/* the concert's poster and a few words about it */
.about { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(28px, 5.4vw, 76px); align-items: center; }
.about-poster { margin: 0; }
.about-text p { margin-top: 16px; max-width: 37em; color: var(--soft); }
.about-text .about-credit { font-size: 15px; color: var(--mute); }
.about-text p:last-child { margin-top: 24px; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about-poster { width: min(100%, 420px); } }

/* ======================================================================
   A CONCERT'S TOP: the poster on the left, the words and what to do on the right
   (the concert on now on the Concerts page, the concert's own page, a past concert's page)
   ====================================================================== */
.show { padding: clamp(4px, 1vw, 12px) 0 clamp(36px, 5vw, 64px); }
.show-home { padding-top: clamp(8px, 1.6vw, 22px); }
.show-grid { display: grid; grid-template-columns: minmax(0, 448px) minmax(0, 1fr); grid-template-areas: "poster head" "poster body"; grid-template-rows: auto auto; column-gap: clamp(30px, 5.2vw, 72px); margin-top: clamp(10px, 1.6vw, 18px); }
.show-home .show-grid { margin-top: 0; }
.show-poster { grid-area: poster; align-self: center; margin: 0; }
.show-head { grid-area: head; align-self: end; }
.show-body { grid-area: body; padding-top: 14px; }
.show-facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 22px 0 0; }
.show-facts div { display: grid; gap: 2px; }
.show-facts dt { font-size: 13.5px; color: var(--mute); }
.show-facts dd { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.show-by { margin-top: 22px; max-width: 36em; font-size: 14.5px; color: var(--mute); }
.show-over { display: flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--soft); }
.show-over .ic { color: var(--orange-text); }
/* the photos of a concert or a past show (Admin: Concerts and tickets, Past shows): 4:5 like the posters. A click opens
   the photo large in the page (assets/js/media.js); the pointer over a photo is the ProArts mark. */
.show-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; }
.show-photos a { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #111; box-shadow: 0 0 0 1px var(--hair);
  cursor: url("../img/proarts/proarts-photo-cursor.png?v=d56d853829") 28 28, zoom-in;
  cursor: image-set(url("../img/proarts/proarts-photo-cursor.png?v=d56d853829") 1x, url("../img/proarts/proarts-photo-cursor-2x.png?v=9d89654e74") 2x) 28 28, zoom-in; }
.show-photos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.show-photos a:focus-visible { outline: none; box-shadow: var(--focus); }
#photos .h2 { margin-bottom: clamp(20px, 2.6vw, 30px); }
@media (hover: hover) and (pointer: fine) { .show-photos a:hover img { transform: scale(1.035); } }
@media (max-width: 980px) { .show-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .show-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .show-photos img { transition: none; } }

/* the photo viewer (assets/js/media.js): the photograph large, in the page */
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.lb[hidden] { display: none; }
.lb:focus { outline: none; }
.lb-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lb-stage { position: relative; display: grid; justify-items: center; width: 100%; max-height: 100svh; padding: max(16px, env(safe-area-inset-top)) 16px 16px; pointer-events: none; }
.lb-fig { position: relative; display: grid; justify-items: center; width: min-content; margin: 0; pointer-events: auto; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 48px; margin-bottom: 10px; color: #fff; }
.lb-count { padding: 5px 13px 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-x, .lb-go { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #000; color: #fff; cursor: pointer; pointer-events: auto; transition: background-color .15s, color .15s, border-color .15s; }
.lb-x .ic, .lb-go .ic { width: 24px; height: 24px; }
.lb-x:focus-visible, .lb-go:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.lb-img { display: block; width: auto; height: auto; max-width: min(92vw, 1600px); max-height: calc(100svh - 190px); border-radius: 10px; background: #222; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
.lb-cap { width: 100%; margin-top: 14px; color: #f2f2f2; font-size: 16.5px; line-height: 1.45; text-align: center; }
.lb-go { position: fixed; top: 50%; margin-top: -26px; }
.lb-prev { left: calc(50% - var(--lb-reach, 45vw) - 52px); }
.lb-next { left: calc(50% + var(--lb-reach, 45vw)); }
.lb-prev .ic { transform: rotate(180deg); }
.lb-go[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .lb-x:hover, .lb-go:hover { background: var(--orange); border-color: var(--orange); color: #000; } }
@media (max-width: 760px) {
  .lb-stage { align-content: center; min-height: 100svh; padding-bottom: 96px; }
  .lb-img { max-width: calc(100vw - 24px); max-height: calc(100svh - 250px); }
  .lb-go { position: absolute; top: auto; bottom: 28px; margin-top: 0; left: auto; }
  .lb-prev { right: calc(50% + 10px); }
  .lb-next { left: calc(50% + 10px); }
}
@media (max-width: 860px) {
  .show-grid { grid-template-columns: 1fr; grid-template-areas: "head" "poster" "body"; grid-template-rows: auto; row-gap: 18px; }
  .show-poster { width: min(100%, 440px); }
  .show-body { padding-top: 0; }
}

/* ---------- "tell me about the next one": a photograph on one side, the form on the other ---------- */
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: stretch; overflow: hidden; border-radius: 20px; background: var(--raise); }
.news-pic { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: 50% 46%; }
.news-text { align-self: center; padding: clamp(24px, 3.6vw, 48px); }
.news-text > p { margin-top: 10px; max-width: 31em; font-size: 16px; color: var(--soft); }
.signup { display: grid; grid-template-columns: minmax(0, 1fr) 158px; gap: 12px; align-items: end; margin-top: 22px; }
.signup label, .cform label { display: grid; gap: 7px; align-content: start; font-size: 13.5px; font-weight: 600; color: var(--soft); }
.signup input, .signup select, .cform input:not([type="checkbox"]), .cform select, .cform textarea { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--field-line); border-radius: 12px; background: var(--field); color: inherit; font: 400 16px/1.5 "Archivo", sans-serif; }
.signup input::placeholder { color: #8a8a8a; }
.pa .signup :is(input, select):focus-visible, .pa .cform :is(input, select, textarea):focus-visible, .pa .faq-search input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--field-ring); border-radius: 12px; }
.signup .btn { grid-column: 1 / -1; justify-self: start; min-height: 50px; padding: 0 26px; }
.news-text > .news-foot { margin-top: 14px; font-size: 13.5px; color: var(--mute); }
.pa .news-foot a { color: #fff; font-weight: 600; white-space: nowrap; }
.pa .form-note { margin-top: 4px; border-width: 1.5px; border-radius: 12px; border-color: var(--orange-text); font-size: 15px; }
@media (max-width: 860px) { .news { grid-template-columns: 1fr; } .news-pic { min-height: 0; aspect-ratio: 16 / 10; } }
@media (max-width: 480px) { .signup { grid-template-columns: 1fr; } .signup .btn { justify-self: stretch; } }

/* ---------- past shows: the newest one large, the others around it; every poster 4:5 ---------- */
.past { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 24px; margin: 0; padding: 0; list-style: none; }
.past li { min-width: 0; }
.past .post { border-radius: 6px; }
.past .post img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.past-big { grid-column: span 2; grid-row: span 2; }
.past-cap { display: grid; gap: 3px; margin-top: 12px; }
.pa .past-cap a { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.005em; color: inherit; text-decoration: none; }
.past-cap small { font-size: 13.5px; line-height: 1.4; color: var(--mute); }
.past-big .past-cap { gap: 5px; margin-top: 16px; }
.pa .past-big .past-cap a { font-size: clamp(21px, 2vw, 26px); font-weight: 750; letter-spacing: -.018em; }
.past-big .past-cap small { font-size: 15px; }
.past-desc { margin-top: 5px; max-width: 34em; font-size: 15.5px; line-height: 1.5; color: var(--soft); }
/* the show that is the newest only until the concert on now joins the list: then it is a tile like the others */
html.tour-over .past-big-now { grid-column: auto; grid-row: auto; }
html.tour-over .past-big-now .past-cap { gap: 3px; margin-top: 12px; }
html.tour-over .pa .past-big-now .past-cap a { font-size: 16.5px; font-weight: 700; letter-spacing: -.005em; }
html.tour-over .past-big-now .past-cap small { font-size: 13.5px; }
html.tour-over .past-big-now .past-desc { display: none; }
/* with two or more concerts ahead the same for each of them: a show stays the large one until a newer one has ended */
html.over-1 .pa .big-until-1, html.over-2 .pa .big-until-2, html.over-3 .pa .big-until-3, html.over-4 .pa .big-until-4, html.over-5 .pa .big-until-5, html.over-6 .pa .big-until-6, html.over-7 .pa .big-until-7, html.over-8 .pa .big-until-8 { grid-column: auto; grid-row: auto; }
html.over-1 .pa .big-until-1 .past-cap, html.over-2 .pa .big-until-2 .past-cap, html.over-3 .pa .big-until-3 .past-cap, html.over-4 .pa .big-until-4 .past-cap, html.over-5 .pa .big-until-5 .past-cap, html.over-6 .pa .big-until-6 .past-cap, html.over-7 .pa .big-until-7 .past-cap, html.over-8 .pa .big-until-8 .past-cap { gap: 3px; margin-top: 12px; }
html.over-1 .pa .big-until-1 .past-cap a, html.over-2 .pa .big-until-2 .past-cap a, html.over-3 .pa .big-until-3 .past-cap a, html.over-4 .pa .big-until-4 .past-cap a, html.over-5 .pa .big-until-5 .past-cap a, html.over-6 .pa .big-until-6 .past-cap a, html.over-7 .pa .big-until-7 .past-cap a, html.over-8 .pa .big-until-8 .past-cap a { font-size: 16.5px; font-weight: 700; letter-spacing: -.005em; }
html.over-1 .pa .big-until-1 .past-cap small, html.over-2 .pa .big-until-2 .past-cap small, html.over-3 .pa .big-until-3 .past-cap small, html.over-4 .pa .big-until-4 .past-cap small, html.over-5 .pa .big-until-5 .past-cap small, html.over-6 .pa .big-until-6 .past-cap small, html.over-7 .pa .big-until-7 .past-cap small, html.over-8 .pa .big-until-8 .past-cap small { font-size: 13.5px; }
html.over-1 .pa .big-until-1 .past-desc, html.over-2 .pa .big-until-2 .past-desc, html.over-3 .pa .big-until-3 .past-desc, html.over-4 .pa .big-until-4 .past-desc, html.over-5 .pa .big-until-5 .past-desc, html.over-6 .pa .big-until-6 .past-desc, html.over-7 .pa .big-until-7 .past-desc, html.over-8 .pa .big-until-8 .past-desc { display: none; }
/* the last place of the wall: a standing orange ticket that leads to every past show */
.vt { display: block; aspect-ratio: 4 / 5; border-radius: 16px; color: #000; text-decoration: none; transition: transform .32s cubic-bezier(.2, .8, .25, 1); }
.vt-in { --stub: 31%; --bite: 11px; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) var(--stub); height: 100%; border-radius: 14px; background: var(--orange);
  -webkit-mask-image: radial-gradient(circle var(--bite) at 0 calc(100% - var(--stub)), transparent 96%, #000 100%), radial-gradient(circle var(--bite) at 100% calc(100% - var(--stub)), transparent 96%, #000 100%); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle var(--bite) at 0 calc(100% - var(--stub)), transparent 96%, #000 100%), radial-gradient(circle var(--bite) at 100% calc(100% - var(--stub)), transparent 96%, #000 100%); mask-composite: intersect; }
.vt-in::after { content: ""; position: absolute; left: 20px; right: 20px; top: calc(100% - var(--stub) - 1px); border-top: 2px dashed rgba(0, 0, 0, .34); }
.vt-body { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 0; padding: 20px 20px 18px; }
.vt-body .ic { width: 30px; height: 30px; margin-bottom: auto; }
.vt-body b { font-size: clamp(24px, 2.5vw, 34px); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.vt-body > span { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.vt-stub { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px; font-size: 14.5px; font-weight: 750; }
.vt-stub i { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: #000; color: var(--orange); transition: transform .28s cubic-bezier(.3, .8, .2, 1); }
.vt-stub .ic { width: 22px; height: 22px; }
.pa .vt:focus-visible { box-shadow: none; outline: 3px solid #fff; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .vt:hover { transform: translateY(-8px) rotate(-1deg); }
  .vt:hover .vt-stub i { transform: scale(1.1); }
  .past li:hover .post img { transform: scale(1.035); }
  .pa .past li:hover .past-cap a { color: var(--orange-text); }
}
@media (max-width: 860px) { .past { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } .past-big { grid-row: auto; } }
@media (max-width: 480px) { .past { gap: 24px 14px; } .pa .past-cap a { font-size: 15.5px; } .vt-body { padding: 14px 14px 12px; } .vt-body > span { font-size: 13px; } .vt-stub { padding: 0 14px; font-size: 13px; } .vt-stub i { width: 40px; height: 40px; } .vt-in::after { left: 14px; right: 14px; } }
/* the page with every past show: all the same size */
/* the Past shows page: the newest concert large (poster beside its name), then a wall of the others, three across */
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.feat .post { border-radius: 10px; }
.feat-name { font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.pa .feat-name a { color: inherit; text-decoration: none; }
.feat-where { margin-top: 14px; font-size: 17.5px; font-weight: 650; }
.feat-desc { margin-top: 12px; max-width: 30em; font-size: 17px; line-height: 1.55; color: var(--soft); }
.feat .btn { margin-top: 26px; }
.past-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.6vw, 46px) 24px; }
.past-wall .post { border-radius: 8px; }
.pa .past-wall .past-cap a { font-size: 19px; }
.past-wall .past-cap small { font-size: 14.5px; }
.go-wide { --stub: 84px; margin-top: clamp(40px, 5vw, 68px); min-height: 104px; }
.go-wide .go-body { padding: 18px 16px 18px 26px; gap: 6px; }
.go-wide .go-body b { font-size: clamp(21px, 2.2vw, 27px); }
.go-wide .go-body > span { max-width: 44em; font-size: 15.5px; }
.go-wide .go-stub i { width: 46px; height: 46px; }
@media (hover: hover) and (pointer: fine) { .pa .feat:hover .feat-name a { color: var(--orange-text); } .feat .post img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .feat:hover .post img { transform: scale(1.03); } }
/* on a phone the ticket at the end of the wall lies across both columns */
@media (max-width: 860px) { .past-wall .past-all { grid-column: 1 / -1; } .past-wall .vt { aspect-ratio: auto; } .past-wall .vt-in { --stub: 64px; grid-template-rows: auto var(--stub); } .past-wall .vt-body { gap: 6px; padding-top: 18px; } .past-wall .vt-body .ic { margin-bottom: 8px; } }
@media (max-width: 860px) { .feat { grid-template-columns: 1fr; gap: 20px; } .feat .post { max-width: 440px; } .past-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } .pa .past-wall .past-cap a { font-size: 16.5px; } .past-wall .past-cap small { font-size: 13.5px; } }
@media (max-width: 480px) { .go-wide { --stub: 62px; } .go-wide .go-body { padding: 14px 10px 14px 18px; } .go-wide .go-body > span { font-size: 13.5px; } .go-wide .go-stub i { width: 38px; height: 38px; } }

/* ---------- who we are, with the photographs ---------- */
.pro { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: clamp(26px, 4.6vw, 64px); align-items: center; }
.pro-text p { margin-top: 14px; max-width: 30em; color: var(--soft); }
.bento { display: grid; grid-template-columns: 1.55fr 1fr .78fr; grid-template-rows: repeat(2, clamp(120px, 14vw, 186px)); gap: 10px; }
.bento img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.bento .b1 { grid-row: span 2; object-position: 62% 50%; }
.bento .b4 { grid-column: 3; grid-row: 1 / span 2; object-position: 50% 70%; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; max-width: 30em; margin: 22px 0 0; }
.fact dd { display: grid; gap: 2px; max-width: 15em; }
.fact b { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--orange-text); }
.fact span { font-size: 14.5px; line-height: 1.35; color: var(--soft); }
@media (max-width: 900px) { .pro { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 46vw 30vw 30vw; } .bento .b1 { grid-column: 1 / -1; grid-row: auto; } .bento .b4 { grid-column: 2; grid-row: 2 / span 2; } }

/* ---------- two panels side by side that lead somewhere (artists and crew, donate and sponsor) ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pair > li:only-child { grid-column: 1 / -1; max-width: 760px; }   /* sponsoring alone, while the Hub has no donation page */
.pair > li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3.2vw, 38px); border-radius: 20px; }
.pair h3 { font-size: clamp(21px, 2vw, 25px); font-weight: 750; line-height: 1.15; letter-spacing: -.018em; }
.pair p { max-width: 32em; }
.pair small { font-size: 14px; }
.pair .btn { margin-top: auto; }
.pair p + .btn, .pair p:last-of-type + .btn { margin-top: 8px; }
.pair-orange { background: var(--orange); color: #000; }
.pair-orange .btn-solid { background: #000; color: #fff; }
.pair-black { background: #111; }
.pair-black p { color: var(--soft); }
.pair-soft { background: var(--raise-2); }
.pair-soft p { color: var(--soft); }
.pair-orange :focus-visible { box-shadow: 0 0 0 3px var(--orange), 0 0 0 6px #000; }
@media (hover: hover) and (pointer: fine) { .pair-orange .btn-solid:hover { background: #fff; color: #000; } }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* ---------- become a sponsor: one quiet panel ---------- */
.pitch-in { padding: clamp(26px, 4vw, 52px); border-radius: 20px; background: var(--raise); }
.pitch-lead { margin-top: 12px; max-width: 36em; font-size: clamp(17px, 1.4vw, 18.5px); color: var(--soft); }
.pitch-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0; list-style: none; }
.pitch-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1.5px solid var(--ring); border-radius: 50%; color: var(--orange-text); }
.pitch-cols h3 { margin-top: 14px; font-size: 18.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.pitch-cols p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--soft); }
.pitch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(26px, 3.4vw, 38px); }
.pitch-acts small { font-size: 14.5px; color: var(--mute); }
@media (max-width: 980px) { .pitch-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pitch-cols { grid-template-columns: 1fr; gap: 20px; }
  .pitch-cols li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; }
  .pitch-ic { grid-row: span 2; }
  .pitch-cols h3 { margin-top: 2px; }
  .pitch-acts .btn { flex: 1 1 100%; }
}

/* ---------- a title on the left, the content on the right (questions, the text about a concert) ---------- */
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 22px clamp(28px, 5vw, 72px); align-items: start; }
.split > div:first-child > p { margin-top: 10px; max-width: 24em; color: var(--mute); }
.split > div:first-child > .more-link { margin-top: 7px; }
.prose p { max-width: 38em; color: var(--soft); }
/* About the show: the band beside the words, an orange block behind the photo; the first paragraph leads */
.about-show { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5.5vw, 84px); align-items: center; }
.about-show:not(:has(.about-show-pic)) { grid-template-columns: minmax(0, 1fr); }
.about-show-pic { position: relative; margin: 0 14px 14px 0; }
.about-show-pic::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: 22px; background: var(--orange); }
.about-show-pic img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1587 / 1250; object-fit: cover; border-radius: 22px; background: #000; }
.about-show-text .h2 { margin-bottom: 18px; }
.about-show-text .prose p { max-width: 36em; }
.about-show-text .about-lead { color: var(--ink); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; font-weight: 500; }
.about-show-text .about-by { margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--orange); font-size: 15.5px; color: var(--mute); }
.about-show-text .more-link { margin-top: 14px; }
@media (max-width: 860px) { .about-show { grid-template-columns: minmax(0, 1fr); } .about-show-pic { max-width: 560px; } }
.prose p + p { margin-top: 16px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* questions: each page shows the ones chosen for it in Admin → FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; font-size: 17px; font-weight: 650; line-height: 1.35; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { flex: none; width: 34px; height: 34px; padding: 7px; border: 1.5px solid var(--ring); border-radius: 50%; color: var(--orange-text); transition: transform .25s ease, background-color .2s, color .2s; }
.faq details[open] summary .ic { transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: #000; }
.faq details > p { max-width: 40em; padding: 0 50px 20px 0; color: var(--soft); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--orange-text); } }

/* ---------- next steps: a row of links ---------- */
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.next a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 22px 24px; border-radius: 16px; background: var(--raise); color: inherit; text-decoration: none; transition: background-color .2s; }
.next b { font-size: 18.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.next span { font-size: 15px; color: var(--mute); }
.next b .ic { display: none; }
@media (hover: hover) and (pointer: fine) { .next a:hover { background: var(--raise-2); } .next a:hover b { color: var(--orange-text); } }
@media (max-width: 760px) { .next { grid-template-columns: 1fr; } }

/* ======================================================================
   A PAGE THAT IS NOT A CONCERT: a photograph and the page's name, then its content
   ====================================================================== */
.mast { position: relative; isolation: isolate; overflow: hidden; }
.mast-pic { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
/* a tall photograph: the band of it with the crowd in the haze */
.mast-pic-haze { object-position: 50% 57%; }
.mast::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .64) 38%, rgba(0, 0, 0, .14) 74%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 54%), linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 24%); }
.mast-in { padding: clamp(92px, 11vw, 160px) 0 clamp(22px, 2.8vw, 36px); }
.mast .display { max-width: 15em; }
.mast .lead { margin-top: 12px; color: #ececec; text-shadow: 0 1px 14px rgba(0, 0, 0, .8); }
.mast-plain::before { display: none; }
.mast-plain .mast-in { padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 7vw, 96px); }
.mast-short .mast-in { padding: clamp(6px, 1vw, 12px) 0 clamp(26px, 3.4vw, 40px); }
.mast-short .display { margin-top: clamp(18px, 2.6vw, 30px); }
@media (max-width: 700px) {
  .mast-pic { height: 66%; object-position: 50% 30%; }
  .mast::before { background: linear-gradient(0deg, #000 0%, #000 34%, rgba(0, 0, 0, .5) 58%, rgba(0, 0, 0, .05) 82%), linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 20%); }
  .mast-in { padding-top: 44vw; }
  .mast-plain .mast-in { padding-top: 48px; }
  .mast-short .mast-in { padding-top: 6px; }
}

/* words beside a photograph */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px clamp(28px, 5vw, 72px); align-items: center; }
.duo p { margin-top: 14px; max-width: 34em; color: var(--soft); }
.duo figure { margin: 0; }
.duo figure img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 14px; }
@media (min-width: 861px) { .duo-flip > figure { order: -1; } }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .duo figure { order: -1; } }

/* three or four things in a row, each with its icon */
.row-4, .row-3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 26px; margin: 0; padding: 0; list-style: none; }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(30px, 4vw, 48px); }
.row-4 li, .row-3 li { padding-top: 20px; border-top: 1px solid var(--rule); }
.row-4 .ic, .row-3 .ic { width: 26px; height: 26px; color: var(--orange-text); }
.row-4 h3, .row-3 h3 { margin-top: 14px; font-size: 18.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.row-4 p, .row-3 p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--soft); }
@media (max-width: 900px) { .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .row-3 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .row-4 { grid-template-columns: 1fr; } }

/* steps that really follow one another: the number is the order */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding: 24px; border-radius: 16px; background: var(--raise); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #000; font-size: 17px; font-weight: 800; }
.steps h3 { margin-top: 16px; font-size: 18.5px; font-weight: 700; line-height: 1.25; }
.steps p { margin-top: 6px; font-size: 15.5px; color: var(--soft); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* the concert that is on (each one, when two or more are ahead), in one strip: poster, name, one button (ProArts Hub, Sponsors, About) */
.cstrip { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 16px clamp(18px, 3vw, 34px); align-items: center; padding: clamp(16px, 2.2vw, 22px); border-radius: 20px; background: var(--raise); }
.cstrip .post { border-radius: 6px; }
.cstrip + .cstrip { margin-top: 14px; }
.cstrip .post-none { font-size: 15px; }
.cstrip .now { margin-bottom: 8px; }
.cstrip h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -.028em; }
.pa .cstrip h3 a { color: inherit; text-decoration: none; }
.cstrip p { margin-top: 5px; font-size: 16.5px; font-weight: 600; }
.cstrip .cstrip-where { font-size: 15px; font-weight: 400; color: var(--mute); }
@media (max-width: 720px) {
  .cstrip { grid-template-columns: 96px minmax(0, 1fr); }
  .cstrip .btn { grid-column: 1 / -1; }
}

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: clamp(24px, 4.4vw, 60px); align-items: start; }
.panel { padding: clamp(22px, 3.2vw, 40px); border-radius: 20px; background: var(--raise); }
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.cform label i { font-style: normal; font-weight: 400; color: var(--mute); }
.cform .full { grid-column: 1 / -1; }
.cform textarea { height: auto; min-height: 150px; padding: 12px 14px; resize: vertical; }
.cform .check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--soft); }
.cform .check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.cform-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.cform-foot .btn { min-height: 50px; padding: 0 24px; }
.cform-foot small { flex: 1; min-width: 230px; font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.contact-grid aside { padding-top: clamp(0px, 1vw, 12px); }
.direct { margin: 14px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.direct a { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.direct i { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--ring); border-radius: 50%; color: var(--orange-text); }
.direct small { display: block; font-size: 13px; color: var(--mute); }
.direct b { display: block; font-size: 17.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.side-title { margin-top: clamp(26px, 3vw, 36px); }
.gos { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
@media (hover: hover) and (pointer: fine) { .direct a:hover b { color: var(--orange-text); } }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cform { grid-template-columns: 1fr; } .cform-foot .btn { width: 100%; } }

/* small tickets that take you somewhere: the three ProArts sites in the foot, shortcuts on a page */
.go { --c: var(--orange); --stub: 62px; --bite: 8px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); min-height: 80px; border-radius: 13px; background: var(--c); color: #000; text-decoration: none; transition: transform .28s cubic-bezier(.2, .8, .25, 1);
  -webkit-mask-image: radial-gradient(circle var(--bite) at calc(100% - var(--stub)) 0, transparent 96%, #000 100%), radial-gradient(circle var(--bite) at calc(100% - var(--stub)) 100%, transparent 96%, #000 100%); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle var(--bite) at calc(100% - var(--stub)) 0, transparent 96%, #000 100%), radial-gradient(circle var(--bite) at calc(100% - var(--stub)) 100%, transparent 96%, #000 100%); mask-composite: intersect; }
.go::after { content: ""; position: absolute; top: 13px; bottom: 13px; left: calc(100% - var(--stub) - 1px); border-left: 2px dashed rgba(0, 0, 0, .34); }
.go-body { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 12px 10px 12px 18px; }
.go-body b { font-size: 19px; font-weight: 800; line-height: 1.1; letter-spacing: -.016em; }
.go-body > span { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.go-stub { display: grid; place-items: center; }
.go-stub i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #000; color: var(--c); }
.go-stub .ic { width: 18px; height: 18px; }
.go-hub { --c: #fff; }
.go-con { --c: var(--lime); }
.go-dark { --c: #242424; color: #fff; }
.go-dark::after { border-left-color: rgba(255, 255, 255, .24); }
.go-dark .go-stub i { background: #fff; color: #000; }
/* a mask would cut the focus ring off, so the ring is drawn inside the ticket */
.pa .go:focus-visible { box-shadow: inset 0 0 0 3px #000, inset 0 0 0 5px #fff; border-radius: 13px; }
.pa .go-dark:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); }
@media (hover: hover) and (pointer: fine) { .go:hover { transform: translateY(-4px); } }

/* ======================================================================
   FAQ PAGE
   ====================================================================== */
.faq-search { position: relative; display: block; max-width: 520px; margin-top: 22px; }
.faq-search .ic { position: absolute; left: 16px; top: 50%; margin-top: -10px; color: var(--mute); pointer-events: none; }
.faq-search input { width: 100%; height: 54px; padding: 0 18px 0 46px; border: 1.5px solid #4a4a4a; border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff; font: 400 16.5px/1 "Archivo", sans-serif; }
.faq-search input::placeholder { color: #9a9a9a; }
.faq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 72px); align-items: start; }
.faq-topics { position: sticky; top: 108px; }
.faq-topics > b { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 650; color: var(--mute); }
.faq-topics ul { margin: 0; padding: 0; list-style: none; }
.faq-topics a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); color: inherit; font-size: 15.5px; font-weight: 600; text-decoration: none; }
.faq-topics small { font-size: 13px; font-weight: 400; color: var(--mute); }
.faq-group + .faq-group { margin-top: clamp(34px, 4vw, 52px); }
.faq-group h2 { margin-bottom: 12px; font-size: clamp(22px, 2vw, 26px); font-weight: 750; letter-spacing: -.018em; }
.faq-empty { padding: 16px 18px; border: 1.5px solid var(--orange-text); border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .faq-topics a:hover { color: var(--orange-text); } }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-topics { position: static; }
  .faq-topics ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .faq-topics a { padding: 8px 14px; border: 1.5px solid var(--ring); border-radius: 999px; }
}

/* ======================================================================
   PROARTS HUB: its programs, ways to help, who it is, thanks
   ====================================================================== */
.quote-line { margin-top: clamp(30px, 4vw, 48px); padding-left: 20px; border-left: 3px solid var(--orange); max-width: 46em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; }
.involve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.involve li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 2.6vw, 30px); border-radius: 18px; background: var(--raise); }
.involve h3 { font-size: 20px; font-weight: 750; line-height: 1.2; letter-spacing: -.014em; }
.involve p { font-size: 15.5px; color: var(--soft); }
.involve .btn { margin-top: auto; }
.involve p + .btn { margin-top: 8px; }
@media (max-width: 900px) { .involve { grid-template-columns: 1fr; } }
/* "What we do" (.programs) is in events.css: the admin's preview of Programs uses the same rules. */
/* "Who we are", "With thanks" and the notes to ProArts are in events.css: the admin's preview uses the same rules. */

/* ======================================================================
   THE END OF EVERY PAGE: a last word on a stage, the links, the three ProArts sites as small tickets
   ====================================================================== */
.cta-band { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(10px, 2vw, 24px); }
.cta-pic { position: absolute; z-index: -2; top: 0; right: 0; width: 60%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, .8) 52%, rgba(0, 0, 0, .3) 72%, rgba(0, 0, 0, .2) 100%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 32%), linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 30%); }
.cta-band-in { padding: clamp(60px, 8vw, 104px) 0; }
.cta-band h2 { max-width: 14em; font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; }
.cta-band p { margin-top: 12px; max-width: 30em; color: var(--soft); }
.cta-band .cta-row { margin-top: 24px; }
@media (max-width: 760px) {
  .cta-pic { width: 100%; height: 58%; }
  .cta-band::before { background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .1) 22%, rgba(0, 0, 0, .5) 42%, #000 58%); }
  .cta-band-in { padding-top: 44vw; padding-bottom: 40px; }
}
.pa-foot { padding: clamp(34px, 4.6vw, 56px) 0 0; border-top: 1px solid #1c1c1c; }
.pa-foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 30px clamp(24px, 4vw, 56px); }
.pa-foot-top > div:first-child p { margin-top: 16px; max-width: 26em; font-size: 15px; color: var(--mute); }
/* the footer's mark is larger than the header's (his call, 12 November 2026): the badge and its words grow together */
.pa-foot .mark { gap: 14px; }
.pa-foot .logo-badge { width: 66px; height: 66px; }
.pa-foot .mark-words { gap: 8px; }
.pa-foot .mark-words b { font-size: 38px; }
.pa-foot .mark-words span { font-size: 11.5px; letter-spacing: .2em; }
@media (max-width: 420px) {
  .pa-foot .logo-badge { width: 58px; height: 58px; }
  .pa-foot .mark { gap: 12px; }
  .pa-foot .mark-words b { font-size: 33px; }
  .pa-foot .mark-words span { font-size: 10.5px; }
}
.contact-lines { display: grid; justify-items: start; gap: 2px; margin-top: 12px; }
.contact-lines a { padding: 5px 0; color: #fff; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pa-foot h3 { margin-bottom: 8px; font-size: 14px; font-weight: 650; color: var(--mute); }
.pa-foot ul { margin: 0; padding: 0; list-style: none; }
.pa-foot-top li a { display: inline-block; padding: 6px 0; font-size: 15.5px; color: #e2e2e2; text-decoration: none; }
.pa-foot .fam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(30px, 4vw, 44px); }
.fam .go-body b { font-weight: 850; font-stretch: 62%; font-size: 24px; line-height: .95; letter-spacing: 0; }
.fam .go-con .go-body b { font-family: "League Spartan", "Archivo", sans-serif; font-stretch: normal; font-weight: 800; font-size: 19.5px; letter-spacing: -.02em; }
.pa .legal { padding: 14px 0 22px; color: var(--mute); }
.legal nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pa .legal a { color: #d6d6d6; }
@media (hover: hover) and (pointer: fine) { .contact-lines a:hover, .pa-foot-top li a:hover { color: var(--orange); } }
@media (max-width: 860px) { .pa-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pa-foot-top > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .pa-foot .fam { grid-template-columns: 1fr; gap: 10px; } .go { min-height: 70px; } }
@media (max-width: 340px) { .pa-foot-top { grid-template-columns: 1fr; } }

/* ======================================================================
   THE CONCERT'S OWN PAGE
   ====================================================================== */
.tickets-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; max-width: 52em; font-size: 14.5px; color: var(--mute); }
.tickets-note .ic { flex: none; margin-top: 2px; color: var(--orange-text); }
/* phones: a bar with the ticket button stays at the bottom while the cities are out of sight */
.ticket-bar { display: none; }
@media (max-width: 760px) {
  .ticket-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .94); border-top: 1px solid #2a2a2a; color: #fff; transition: transform .3s ease; }
  .ticket-bar.away { transform: translateY(110%); }
  .ticket-bar > div { display: grid; min-width: 0; }
  .ticket-bar b { font-size: 16.5px; font-weight: 750; line-height: 1.2; letter-spacing: -.01em; }
  .ticket-bar span { font-size: 13px; color: var(--mute); }
  .has-bar .pa-foot { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) { .pa *, .pa *::before, .pa *::after { transition: none !important; animation: none !important; } }

/* ---------- the policy pages (Privacy, Accessibility): one readable column in the white band ---------- */
.policy > * { max-width: 46rem; }   /* the column starts where the heading does */
.policy-date { margin-bottom: 6px; color: var(--soft); font-size: 15px; }
.policy .h2 { margin-top: clamp(32px, 4vw, 46px); }
.policy .h2 + p, .policy .h2 + ul { margin-top: 12px; }
.policy p, .policy li { font-size: 18px; line-height: 1.6; }
.policy p + p { margin-top: 14px; }
.policy ul { display: grid; gap: 12px; margin-bottom: 0; padding-left: 1.25em; }
.policy li::marker { color: var(--mute); }
.policy a { text-decoration: underline; text-underline-offset: 3px; }