:root {
  /* Everything below is overridable at runtime -- theme.js swaps these
     for a built-in preset or lets a custom stylesheet (pasted in as a
     URL through the theme picker) redeclare them, or bypass them
     entirely. Values here are the "Midnight" preset, i.e. today's
     look, and also the fallback if a custom theme leaves a variable
     unset. See theme.js for the preset list and the picker UI.

     Gold system: retired the purple accent -- brand gold
     (#C9A063) with dark text clears WCAG AA at 7.4:1, where the old
     white-on-purple was drifting. Neutrals warmed to match (near-black
     bg/border instead of the old cool slate) so gold doesn't clash
     with what surrounds it. */
  --bg: #0b0d10;
  --card-bg: #14161a;
  --text: #f2ede4;
  --muted: #8b857b;
  --accent: #c9a063;
  --accent-hover: #ddb578;
  /* Darker than a "typical" success green so white badge text clears
     WCAG AA's 4.5:1 contrast ratio. */
  --success: #1e8449;
  --border: #3a3226;
  --border-subtle: #23262c;
  /* Gold is mid-luminance -- white text on it fails WCAG AA (2.5:1).
     Dark text on gold clears 7.4:1. */
  --on-accent: #14100a;
  /* Drives native control chrome (checkboxes, <select>, scrollbars),
     not page colors -- those are the explicit vars above regardless of
     this setting. Was a hardcoded "light dark" (browser/OS picks),
     which let native controls go light-chrome against an always-dark
     page and broke contrast (see community/site/style.css's git
     history for the axe-core-caught bug this caused). Themed so
     presets/custom CSS can keep native chrome matching their own
     colors instead of the visitor's OS setting. */
  color-scheme: var(--color-scheme, dark);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 1.5rem;
}

.page {
  max-width: 34rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.5rem 0;
}

.hero {
  text-align: center;
}

/* The gold ə mark. Sized in CSS rather than by the width/height
   attributes -- those carry the intrinsic 402x440 so the browser can
   reserve space and avoid layout shift before the PNG loads.
   Transparent PNG, so it sits on --bg directly; the icon variants under
   brand/ are opaque tiles instead, because a transparent favicon washes
   out to nothing on a light browser tab.
   44px tall -- was 104px, which read as a hero graphic competing with
   the h1 rather than a mark sitting next to it. */
.hero-mark {
  display: block;
  width: auto;
  height: 44px;
  margin: 0 auto 0.75rem;
}

/* The gold mark is designed against near-black (see docs/brand/README.md's
   "Usage rules") and washes out on a light preset's --bg. brightness(0)
   flattens the PNG's opaque pixels to solid black while leaving its alpha
   channel alone -- a pure-CSS stand-in for swapping to logo-flat.svg with
   a dark color, without a second asset or a DOM src-swap that would need
   to wait for the image element to exist. theme.js sets this attribute on
   <html> for presets that opt in (currently just Daylight); custom CSS
   themes get the untouched gold mark and can override this themselves. */
[data-theme-logo="flat"] .hero-mark {
  filter: brightness(0);
}

/* This page's lockup: the mark sits inline with "School of Music" on
   one line instead of stacked above it, standing in for the dropped
   word "SwaCo" (see the HTML comment above the h1 for the accessible-
   name reasoning). Scoped to .hero-title specifically -- not a change
   to the base .hero-mark rule -- because community/site/index.html
   still uses the original stacked layout (mark above "Community") and
   shares this same class name; a global change here would break that
   page's centering instead of just this one's. */
.hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hero-title .hero-mark {
  height: 34px;
  margin: 0;
}

/* The TM belongs to the schwa mark, not to "School of Music" -- which is
   generic for a music school, cannot be registered, and so cannot be claimed.
   Wrapping the mark and the symbol in one flex item is what keeps them
   together: as direct children of .hero-title the symbol would take the
   0.5rem gap on both sides and drift into the middle of the lockup, reading
   as a claim on the words instead. In flow rather than position:absolute so
   it cannot overhang the hero once .hero-title wraps on a narrow viewport. */
.hero-title .hero-lockup {
  display: inline-flex;
  align-items: flex-start;
}

/* Inherits the h1's color rather than the mark's gold. The gold asset is
   designed against near-black and [data-theme-logo="flat"] flattens it with a
   filter that applies to .hero-mark alone -- a hardcoded gold here would
   survive into exactly the light presets that filter exists to fix. */
.hero-title .hero-tm {
  font-size: 0.38em;
  line-height: 1.15;
  margin-left: 0.1em;
}

/* The hero's "Augmented intelligence" line (billing/site homepage only).
   The word is gold through --accent so the light presets recolor it with
   everything else. The caret is a border on the word itself and exists
   only once index.html's script adds .is-typing, which it never does
   under reduced motion -- so those visitors get no caret and no blink. */
.hero-slogan {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  margin: 0.25rem 0 0.75rem;
}

.hero-slogan-word {
  color: var(--accent);
}

.hero-slogan-word.is-typing {
  border-right: 2px solid var(--accent);
  padding-right: 2px;
  animation: hero-caret 0.9s step-end infinite;
}

@keyframes hero-caret {
  50% { border-right-color: transparent; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.card {
  width: 100%;
  background: var(--card-bg);
  border-radius: 0.75rem;
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.footnote {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.footnote .text-link {
  margin-top: 0.75rem;
}

.footnote p {
  font-size: 0.75rem;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

/* The slogan's one TM-bearing appearance. Larger than the footnote body
   and set apart from it, but still footer-sized: the hero is where the
   line is meant to be noticed. */
.footnote p.footnote-slogan {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
  /* Breaks at the comma on a phone instead of stranding
     "intelligence.(TM)" alone on a second line. */
  text-wrap: balance;
}

.badge {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin: 0 0 0.75rem;
}

.thank-you-badge {
  background: var(--success);
}

.text-link {
  display: block;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.text-link:hover {
  color: var(--text);
  text-decoration: underline;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s ease;
}

.button:hover {
  background: var(--accent-hover);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fine-print {
  margin: 1.25rem 0 0;
  font-size: 0.8rem;
  min-height: 1.1em;
}

form {
  text-align: left;
}

.field {
  display: block;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
}

.field[hidden] {
  display: none;
}

.field input[type="email"],
.field input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  box-sizing: border-box;
}

.field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.instruments {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1rem;
}

.instruments legend {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
  margin: 0 0 0.75rem;
  grid-column: 1 / -1;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: normal;
  cursor: pointer;
}

.checkbox input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  /* accent-color only themes the checked state -- unchecked boxes still
     fell back to the OS's native (light) chrome. */
  color-scheme: dark;
}

@media (max-width: 30rem) {
  .instruments {
    grid-template-columns: 1fr;
  }
}

/* The guitar apps on the home page's apps-card: one tile per app, a
   name that is the link and a description under it. auto-fit with a
   13rem floor gives four across in the full-width card on a wide screen,
   two in the 34rem single-column page, and one on a phone, with no
   breakpoints of its own to keep in step with the page's. */
.app-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  text-align: left;
}

.app-tile {
  position: relative;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  transition: border-color 0.15s ease;
}

.app-tile:hover {
  border-color: var(--accent);
}

.app-tile h3 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.app-tile a {
  color: var(--text);
  text-decoration: none;
}

/* Stretches the name's link over the whole tile, so the description is
   clickable too without being part of the link's accessible name (see the
   HTML comment above the card). The focus ring goes on this overlay, not
   the link text, so keyboard focus outlines the tile the mouse would
   click. */
.app-tile a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.app-tile a:focus-visible {
  outline: none;
}

.app-tile a:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-tile p {
  margin: 0;
  font-size: 0.9rem;
}

/* Home page only (.page--home, set on billing/site/index.html's <main>;
   see the HTML comment there for why this isn't the shared .page class).
   Below this width the page is the same single stacked column as
   always. Above it, the guitar apps take a full-width row of their own,
   and the three short cards -- community, donate, and the giveaway's
   roadmap note -- sit in a row under it instead of stacking. */
@media (min-width: 60rem) {
  .page.page--home {
    max-width: 64rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  /* Full-width rows: the intro, the guitar apps, and the footer.
     Everything else (initiatives-card/support-card/m3c-card)
     auto-places into the three columns in source order.

     The apps card was one of the three short cards until 2026-10-01,
     when it went from one app to four -- four tiles in a third of the
     row would each have been a few words wide. The giveaway card went
     the other way: it was full-width while it held an entry form, then a
     three-line note in the third column, and since 2026-10-04 the m3c
     card has that column. If the giveaway form comes back, give it a
     full-width row. The Blues Encyclopedia card (2026-10-15) holds three
     tiles, so it takes a full row too. */
  .page--home > .hero,
  .page--home > .blues-feature,
  .page--home > .encyclopedia-card,
  .page--home > .apps-card,
  .page--home > .footnote {
    grid-column: 1 / -1;
  }

  .page--home .instruments {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Floyd's School of Blues, the homepage's featured card (billing/site
   only; the community copy of this file has no homepage). Centered text,
   no photo. The gold border is what sets it apart from every other card
   on the page. */
.blues-feature {
  position: relative;
  display: grid;
  gap: 1.5rem;
  border: 1px solid var(--accent);
  text-align: center;
}
.blues-feature h2 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem;
}
.blues-feature h2 a {
  color: var(--text);
  text-decoration: none;
}
/* The heading link covers the whole card, so a tap anywhere opens /blues. */
.blues-feature h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.blues-feature .button {
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
  padding: 0.9rem 2.25rem;
}
.blues-feature-lede {
  color: var(--text);
  font-size: 1.1rem;
}
.blues-feature-meter {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Legal links in page footers, and the registration clickwrap.
   Same block appended to billing/site and community/site
   verbatim -- these two files are hand-synced, so keep it identical. */
.legal-links {
  font-size: 0.8rem;
  margin: 0 0 0.5rem;
}
.legal-links a {
  color: var(--muted);
  text-decoration: none;
}
.legal-links a:hover {
  color: var(--text);
  text-decoration: underline;
}
.legal-agree {
  margin: 0 0 1rem;
  line-height: 1.5;
}
.legal-agree a {
  color: var(--text);
  text-decoration: underline;
}

/* The homepage donation's amount picker (2026-10-11). The blues page draws
   the same picker with its own inline copy of these rules; scoped to
   .support-card here so the two never fight. The radio stays in the
   accessibility tree and keyboard order; only its circle is hidden, and
   the label is drawn as the button. */
.support-card .amounts {
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
}
.support-card .amounts legend {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 auto 0.75rem;
}
.support-card .amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.support-card .amount input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.support-card .amount span {
  display: block;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0.7rem 0;
}
.support-card .amount input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.support-card .amount input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.support-card .other-amount {
  margin-top: 1rem;
  text-align: left;
}
.support-card .other-amount[hidden] {
  display: none;
}
.support-card .other-amount label {
  color: var(--muted);
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.support-card .other-amount-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  padding: 0 0.85rem;
}
.support-card .other-amount-field span {
  color: var(--muted);
}
.support-card .other-amount-field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 1rem;
  padding: 0.7rem 0;
}
.support-card .other-amount-field input:focus {
  outline: none;
}
.support-card .other-amount-field:focus-within {
  outline: 2px solid var(--accent);
}

/* Above a translated legal page (2026-10-28): that it is a convenience
   translation and the English governs, with a link to the English. Generated
   by scripts/i18n/site-i18n.mjs build into billing/site/<lang>/ only. */
.legal-translation-note {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border, #3a3226);
  border-left: 3px solid var(--accent, #c9a063);
  border-radius: 8px;
  background: var(--card-bg, transparent);
  font-size: 0.95rem;
}