/* costapopchoir.com — this site's own look, on top of the standard sheet.
 *
 * Loaded automatically by the layout when assets/site/site.css exists, and
 * never touched by an update.
 *
 * The opening panel's heading. The house setting is deliberately smaller, so
 * this is not a fix to take back to the base — it is this site's choice, and
 * it is here rather than edited into paper.css so an update cannot lose it.
 */
.lede-title {
  font-size: clamp(2.6rem, 1.2rem + 5.6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

/* ---------------------------------------------------------------------------
   The choir theme's own remainder.

   assets/css/themes/choir.css is a STANDARD file and an update replaces it.
   Between v1.49.2 and v1.85.0 it was slimmed from 12,910 bytes to 3,240, and
   26 of its rules went with it — including .theme-choir .nbar, which is why
   the promo band across the top is the sun from the logo rather than navy.

   Those rules are this site's look, so they live here, where an update cannot
   reach them. site.css is loaded after the theme, so these win.
   -------------------------------------------------------------------------- */

:root {
  --pop:            #f8c000;   /* the sun in the logo, exactly */
  --pop-ink:        #0a2e6b;   /* what sits on it: 7.8:1 */
  --open-tint:      #e4f2ff;   /* the logo's sky, washed out */
  --sky:            #2098f8;
  --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;
    --pop-orange: #f0923a; --pop-orange-ink: #f0923a;
  }
}
:root[data-theme="dark"] {
  --pop: #ffcf2e; --pop-ink: #0b1a2e; --sky: #64a8ff; --open-tint: #15283f;
  --pop-orange: #f0923a; --pop-orange-ink: #f0923a;
}

.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;
}
.theme-choir .lede-accent {
  color: var(--pop-orange);
  font-style: italic;
  font-weight: 600;
}
.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;
}
.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;
}
.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 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%;
}
.theme-choir .way-badge {
  background: var(--pop);
  color: var(--pop-ink);
}
.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);
}
.theme-choir .menu > li > a:not(.nav-feature) {
  color: var(--ink);
  font-weight: 500;
  font-size: .97rem;
  padding: .5rem .72rem;
}
.theme-choir .menu > li:focus-within > a:not(.nav-feature) {
  background: var(--open-tint);
  color: var(--accent);
}
.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);
}
.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);
}
.theme-choir .bar-word {
  font-family: var(--heading-font);
  font-weight: 620;
  letter-spacing: -.02em;
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem);
}
.theme-choir .menubar {
  background: color-mix(in srgb, var(--paper-raised) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent);
}