/* The Choir theme.
 *
 * Only what the Look settings cannot already say. Paper, ink, accent, corners,
 * air and the heading face are all ordinary settings written by Themes::wear(),
 * so they are not repeated here — a theme that restated them would fight the
 * owner the first time they nudged one.
 *
 * What is left is a second colour, a tinted opening, and how a few panels are
 * painted. Every value is a token first, so the dark theme redefines rather
 * than overrides.
 */
:root {
  /* The highlight. Not the accent — the accent is the one filled button on a
     screen, and this is for the thing that wants a wink rather than a press:
     a "most popular" tag, the button on a coloured panel. */
  --pop:          #f8c000;   /* the sun in the logo, exactly */
  --pop-ink:      #0a2e6b;   /* what sits on it: 7.8:1 */
  /* The opening. A wash the hero sits in, falling away to the page colour. */
  --open-tint:    #e4f2ff;   /* the logo's sky, washed out */
  --sky:          #2098f8;   /* and the sky itself, for backing a photograph */
  /* Panels that carry the accent as a full-bleed band. */
  --band:         var(--accent);
  --band-ink:     #fffaf2;

  /* The sand in the logo, darkened until it clears 3:1 as large text on the
     paper. The logo's own #f09030 measures 2.31, which would have made the
     headline's accent word the least readable thing on the page. */
  --pop-orange:     #d2690a;
  --pop-orange-ink: #9a4e00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pop:       #ffcf2e;
    --pop-ink:   #0b1a2e;
    --sky:       #64a8ff;
    --open-tint: #15283f;
    --band:      #123a73;
    --band-ink:  #eaf2ff;
    --pop-orange:     #f0923a;
    --pop-orange-ink: #f0923a;
  }
}
:root[data-theme="dark"] {
  --pop:       #ffcf2e;
  --pop-ink:   #0b1a2e;
  --sky:       #64a8ff;
  --open-tint: #15283f;
  --band:      #123a73;
  --band-ink:  #eaf2ff;
  --pop-orange:     #f0923a;
  --pop-orange-ink: #f0923a;
}

/* The opening. A gradient rather than a flat band, so the hero does not end on
   a hard line halfway down the page. */
.theme-choir .hero,
.theme-choir .block-hero {
  background: linear-gradient(180deg, var(--open-tint) 0%, var(--paper) 100%);
}

/* The display face wants to be bigger and set tighter than a sans would. A
   serif at the same size as Poppins reads smaller, which is why the theme also
   nudges the heading scale. */
.theme-choir h1 { line-height: 1.02; }
.theme-choir .hero h1 { letter-spacing: -.022em; }

/* A call-to-action panel on its accent tone becomes the full-bleed coloured
   band this look is known for, with the highlight carrying its button. */
.theme-choir .cta-panel.is-accent {
  background: var(--band);
  color: var(--band-ink);
  border-radius: 0;
  margin-inline: calc(var(--space-5) * -1);
  padding-inline: var(--space-5);
}
.theme-choir .cta-panel.is-accent .btn-on-colour {
  background: var(--pop);
  color: var(--pop-ink);
  border-color: var(--pop);
}

/* The small tag on a card — "most popular" — in the highlight rather than the
   accent, so it does not compete with the button underneath it. */
.theme-choir .offer-badge,
.theme-choir .badge-accent {
  background: var(--pop);
  color: var(--pop-ink);
  border-color: color-mix(in srgb, var(--pop) 60%, transparent);
}

/* Cards sit on the warm raised tone the preset sets; this only softens the
   hairline so the warmth is what separates them from the page, not a line. */
.theme-choir .offer,
.theme-choir .event-card,
.theme-choir .card {
  border-color: color-mix(in srgb, var(--ink) 9%, transparent);
}

/* An eyebrow set the way this look sets it: small, wide, and in the ink rather
   than the accent, so the heading under it is still the first thing read. */
.theme-choir .eyebrow {
  letter-spacing: .2em;
  font-size: .69rem;
  color: var(--ink);
  opacity: .8;
}

/* ==========================================================================
   The old site's own colours, back where they belong. (v1.49.0)

   Two colours beyond the navy and the blue, used exactly as the site that
   earned them used them:

   YELLOW  #F5C400  never as text. It is a shape behind something — a pill, a
                    badge, a disc — with navy on top, which is 9:1 and reads
                    in bright sun on a phone, which is where this choir's
                    audience actually reads it.
   ORANGE           the one word in the headline, and nothing else.

   The orange is NOT the old site's #E8811C. That measures 2.59:1 on cream and
   large text needs 3:1, so the headline's own accent word was the least
   readable thing on the page. #D2690A is 3.41:1, still unmistakably orange,
   and the dark-mode cut goes back to the brighter value because it has a dark
   ground under it.
   ========================================================================== */
/* ---- the opening panel -------------------------------------------------- */

/* The headline is this site's one big design move, and it is allowed to be
   enormous. These are the numbers the old site used, down to the word-spacing:
   at 13.4vw it fills the column on a phone and tops out at 132px so it cannot
   run away on a wide screen. */
.theme-choir .lede-title {
  font-size: clamp(2.75rem, 13.4vw, 8.25rem);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.05em;
  word-spacing: .09em;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
}
/* One word, italic, orange. The whole point of the line. */
.theme-choir .lede-accent {
  color: var(--pop-orange);
  font-style: italic;
  font-weight: 600;
}

/* The small pill above it: yellow with navy on top, never yellow text. */
.theme-choir .lede-pill {
  background: var(--pop);
  color: var(--pop-ink);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .55rem 1.1rem;
}

/* The figures, in the display face, the way the old site set them. */
.theme-choir .lede-stats .stat-value {
  font-family: var(--heading-font);
  font-weight: 600;
  letter-spacing: -.035em;
}
.theme-choir .lede-stats .stat-label {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* The photograph, with the yellow disc tucked behind its top-left corner.
   The disc is the one piece of pure decoration on the site and it is what
   makes the panel look drawn rather than laid out. Hidden from anybody who
   asked for less motion? No — it does not move. It is simply a shape. */
.theme-choir .lede-figure {
  position: relative;
  overflow: visible;             /* or the disc is clipped away */
  border-radius: var(--radius-lg);
}
.theme-choir .lede-figure::before {
  content: "";
  position: absolute;
  top: -1.75rem; left: -1.75rem;
  width: 8rem; height: 8rem;
  border-radius: 50%;
  background: var(--pop);
  z-index: 0;
}
.theme-choir .lede-figure img,
.theme-choir .lede-figure picture,
.theme-choir .lede-figure iframe {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
}
.theme-choir .lede-figure img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 45%;
}
/* On a phone the disc would hang off the edge of the screen and make the page
   scroll sideways, so it tucks in rather than disappearing. */
@media (max-width: 48rem) {
  .theme-choir .lede-figure::before { top: -1rem; left: -1rem; width: 5rem; height: 5rem; }
}

/* ---- the hint of yellow everywhere else --------------------------------- */

/* A corner tag on a card — "Most popular" — was the other place the old site
   put it, and it is the right place: the one thing on the row you are meant
   to look at first. */
.theme-choir .way-badge {
  background: var(--pop);
  color: var(--pop-ink);
}
/* An eyebrow on a coloured panel, where navy ink would disappear. */
.theme-choir .cta-panel.is-accent .eyebrow,
.theme-choir .cta-panel.is-dark .eyebrow,
.theme-choir .offerpanel-quote .eyebrow { color: var(--pop); }

/* Selecting text, which is a small thing nobody asks for and everybody
   notices. */
.theme-choir ::selection { background: var(--pop); color: var(--pop-ink); }

/* And the keyboard outline on a coloured panel, where the site colour would
   be invisible against itself. */
.theme-choir .cta-panel.is-accent :focus-visible,
.theme-choir .block-ways.is-tint :focus-visible { outline-color: var(--pop); }

/* ==========================================================================
   The bar across the top, and the menu under it. (v1.49.0)
   ========================================================================== */

/* The announcement band is yellow with the ink on top — which is what the old
   site did, and it is the right call: it is the one thing on the page asking
   to be read before anything else, and a navy band simply reads as more
   chrome above the chrome. 7.8:1, so it is loud and legible rather than loud
   and decorative. */
.theme-choir .nbar {
  background: var(--pop);
  color: var(--pop-ink);
  border-bottom: none;
  font-weight: 500;
  letter-spacing: .01em;
}
.theme-choir .nbar .nbar-link { color: var(--pop-ink); }
.theme-choir .nbar button,
.theme-choir .nbar .nbar-close { color: var(--pop-ink); }

/* At night the sun is too much — it becomes the brightest thing on a dark
   page and pulls the eye off the words underneath. A raised band with a
   hairline says "not the page" without shouting, and the sun moves to the
   left edge where it still signs the band as this site's. */
:root[data-theme="dark"] .theme-choir .nbar {
  background: var(--paper-raised);
  color: var(--ink);
  border-bottom: 1px solid var(--paper-edge);
  box-shadow: inset 4px 0 0 var(--pop);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-choir .nbar {
    background: var(--paper-raised);
    color: var(--ink);
    border-bottom: 1px solid var(--paper-edge);
    box-shadow: inset 4px 0 0 var(--pop);
  }
}

/* ---- the page links ----------------------------------------------------- */

/* They were set like small print: 500 weight, muted, the same as a policy
   link in a footer. On a site whose whole job is to get somebody to a Tuesday
   they are the second most important thing on the page, so they are given the
   ink, a little more size, and room to breathe. */
/* :not(.nav-feature) matters. Without it these two rules tie with the house
   rules for the filled pill — same specificity, and this file loads second —
   so the theme quietly repainted the pill's white text in the ink colour,
   which is 2.9:1 on the blue and effectively unreadable. The pill is a
   button, not a page link, and is left alone here. */
.theme-choir .menu > li > a:not(.nav-feature) {
  color: var(--ink);
  font-weight: 500;
  font-size: .97rem;
  padding: .5rem .72rem;
}
.theme-choir .menu > li > a:not(.nav-feature):hover,
.theme-choir .menu > li:focus-within > a:not(.nav-feature) {
  background: var(--open-tint);
  color: var(--accent);
}

/* The page you are on, marked with the sun rather than a colour change alone.
   Colour by itself is not a marker — somebody who cannot separate the accent
   from the ink gets no signal at all — so it is a shape as well. */
.theme-choir .menu > li > a[aria-current="page"]:not(.nav-feature) {
  color: var(--accent);
  font-weight: 600;
  background: transparent;
  position: relative;
}
.theme-choir .menu > li > a[aria-current="page"]:not(.nav-feature)::after {
  content: "";
  position: absolute;
  left: .72rem; right: .72rem; bottom: .18rem;
  height: 3px; border-radius: 2px;
  background: var(--pop);
}

/* The featured item keeps its filled pill, but wears the site's own blue with
   the sun on hover rather than a darker blue — the two logo colours doing the
   work between them. */
.theme-choir .menu > li > a.nav-feature {
  /* Said again rather than inherited, so no later rule in this file can take
     it back by accident. White on this blue is 7.2:1. */
  color: var(--on-accent);
  font-weight: 600;
  letter-spacing: .005em;
}
.theme-choir .menu > li > a.nav-feature svg { color: currentColor; }
.theme-choir .menu > li > a.nav-feature:hover,
.theme-choir .menu > li > a.nav-feature:focus-visible {
  background: var(--pop);
  color: var(--pop-ink);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--pop) 50%, transparent);
}

/* The name in the bar, in the display face — it is a name, not a label. */
.theme-choir .bar-word {
  font-family: var(--heading-font);
  font-weight: 620;
  letter-spacing: -.02em;
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem);
}

/* And the bar itself sits on the warm paper rather than a cool translucent
   white, so the band above it and the page below it are the same site. */
.theme-choir .menubar {
  background: color-mix(in srgb, var(--paper-raised) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent);
}