/* =====================================================================
   A Different Day Foundation: "Blue Hour" design system.
   The Texas sky just after sunset: midnight navy for the cinematic
   moments, warm cream for the page, terracotta for giving, forest green
   for impact, brushed gold only as a hairline.

   Colors and fonts mirror tailwind.config.js (in the project folder,
   beside public/). The design spec lives in docs/superpowers/specs/.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Brand palette: every color the site may use, as RGB channels (so
      opacity can be added: rgb(var(--gold-500) / .4)). Components never
      use these directly; they use the theme roles below.
   --------------------------------------------------------------------- */
:root {
  --navy-950: 9 13 22;       /* #090D16 */
  --navy-900: 14 20 32;      /* #0E1420 */
  --navy-875: 16 23 35;      /* #101723 */
  --navy-850: 18 28 46;      /* #121C2E  midnight */
  --navy-800: 21 29 43;      /* #151D2B */
  --navy-750: 27 37 54;      /* #1B2536 */
  --navy-700: 34 53 90;      /* #22355A  dusk */
  --navy-600: 58 74 102;     /* #3A4A66 */
  --cream-50: 255 253 249;   /* #FFFDF9 */
  --cream-100: 251 248 242;  /* #FBF8F2  ivory */
  --cream-200: 245 239 228;  /* #F5EFE4  cream */
  --cream-300: 242 235 223;  /* #F2EBDF */
  --cream-400: 230 218 198;  /* #E6DAC6  sand */
  --stone-300: 217 210 198;  /* #D9D2C6 */
  --charcoal-900: 38 40 44;  /* #26282C */
  --umber-900: 26 24 20;     /* #1A1814 */
  --forest-700: 47 67 54;    /* #2F4336 */
  --forest-800: 34 48 42;    /* #22302A */
  --forest-900: 22 35 28;    /* #16231C */
  --gold-400: 200 173 120;   /* #C8AD78 */
  --gold-500: 176 154 107;   /* #B09A6B  brushed gold */
  --gold-600: 138 109 59;    /* #8A6D3B */
  --gold-700: 115 90 48;     /* #735A30  antique gold, for text by day */
  --terracotta-500: 180 86 58;  /* #B4563A */
  --terracotta-600: 156 71 48;  /* #9C4730 */
  --clay-400: 201 154 126;   /* #C99A7E */
  --sage-400: 127 163 138;   /* #7FA38A */
  --red-700: 155 44 31;      /* #9B2C1F */
  --red-300: 242 166 142;    /* #F2A68E */
  --white: 255 255 255;

  /* Motion: slow, settling curves. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* Fine film grain, drawn by the browser (no image file to download). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.11 0 0 0 0 0.18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   2. Theme roles. Light ("day") is the default; dark ("after sundown")
      applies when js/theme.js sets <html data-theme="dark">.
      Tailwind classes (text-heading, bg-surface, border-line/15…) read
      these same variables; see tailwind.config.js.
   --------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Backgrounds */
  --page: var(--cream-200);          /* page */
  --surface: var(--cream-100);       /* cards, panels, forms */
  --raised: var(--cream-50);         /* dropdown lists, floating panels */
  --field: var(--cream-100);         /* inside form boxes */
  --warm: var(--cream-400);          /* warm storytelling band */
  --band: var(--navy-850);           /* dark bands: footer, menu, photo covers */
  --band-forest: var(--forest-700);  /* impact band */

  /* Text */
  --heading: var(--navy-850);        /* headlines, strong text */
  --copy: var(--charcoal-900);       /* body text (lighter via opacity, never below 70%) */
  --on-band: var(--cream-200);       /* text on dark bands and photos */
  --on-band-accent: var(--cream-400);/* labels on dark bands and photos */

  /* Lines and accents */
  --line: var(--navy-850);           /* hairlines, used at 8–30% */
  --hairline: var(--gold-500);       /* the gold horizon line and rules */
  --accent: var(--gold-700);         /* gold for text: labels, numerals, hovers */
  --progress: var(--gold-600);       /* progress bars */
  --horizon-under: var(--navy-850);  /* home headline, below the horizon */

  /* Buttons */
  --cta: var(--terracotta-500);      /* giving */
  --cta-hover: var(--terracotta-600);
  --cta-text: var(--cream-100);
  --strong: var(--navy-850);         /* strong neutral button, selected chip */
  --strong-hover: var(--navy-700);
  --strong-text: var(--cream-200);

  /* States */
  --error: var(--red-700);
  --alert: var(--red-300);           /* errors on dark bands (both themes) */
  --success: var(--forest-700);
  --shade: var(--navy-850);          /* the navy fade laid over photos (both themes) */
  --focus: rgb(var(--heading));
  --selection: rgb(var(--clay-400) / .55);

  /* Depth */
  --edge: rgb(var(--navy-850) / .08);                          /* borders of cards and panels */
  --shadow-card: 0 30px 60px -44px rgb(var(--navy-850) / .5);
  --shadow-float: 0 40px 80px -40px rgb(var(--navy-850) / .55);
  --shadow-pop: 0 24px 48px -24px rgb(var(--navy-850) / .45);
  --page-glow: none;

  /* Photos and icons */
  --photo-filter: saturate(.92) contrast(1.02);
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23121C2E' stroke-width='1.6'/%3E%3C/svg%3E");
  --icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.5l3.5 3.5L11 1.5' fill='none' stroke='%23735A30' stroke-width='1.8'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  color-scheme: dark;

  --page: var(--navy-900);
  --surface: var(--navy-800);
  --raised: var(--navy-750);
  --field: var(--navy-875);
  --warm: var(--umber-900);
  --band: var(--navy-950);
  --band-forest: var(--forest-900);

  --heading: var(--cream-300);
  --copy: var(--stone-300);
  --on-band: var(--cream-300);
  --on-band-accent: var(--gold-400);

  --line: var(--cream-300);
  --hairline: var(--gold-500);
  --accent: var(--gold-400);
  --progress: var(--gold-400);
  --horizon-under: var(--gold-400);  /* cream in the sky, gold on the land */

  --cta: var(--terracotta-500);
  --cta-hover: var(--terracotta-600);
  --cta-text: var(--cream-100);
  --strong: var(--cream-300);
  --strong-hover: var(--white);
  --strong-text: var(--navy-900);

  --error: var(--red-300);
  --alert: var(--red-300);
  --success: var(--sage-400);
  --shade: var(--navy-850);
  --focus: rgb(var(--gold-400));
  --selection: rgb(var(--gold-500) / .4);

  --edge: rgb(var(--gold-500) / .16);
  --shadow-card: 0 40px 80px -44px rgb(0 0 0 / .75);
  --shadow-float: 0 50px 100px -40px rgb(0 0 0 / .8), 0 0 0 1px rgb(var(--gold-500) / .1);
  --shadow-pop: 0 28px 56px -20px rgb(0 0 0 / .75);
  --page-glow: radial-gradient(120% 44rem at 50% -8rem, rgb(var(--gold-500) / .08), transparent 70%);

  --photo-filter: brightness(.86) saturate(.88) contrast(1.05);
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F2EBDF' stroke-width='1.6'/%3E%3C/svg%3E");
  --icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.5l3.5 3.5L11 1.5' fill='none' stroke='%23C8AD78' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* "hidden" must always win. Without this, a layout class such as Tailwind's
   "grid" or "flex" would override it and keep hidden things on screen. */
[hidden] { display: none !important; }

/* Dark bands switch the focus ring and labels to light colors. A light
   panel inside a dark band (data-surface="light") switches them back. */
[data-surface="dark"] { --focus: rgb(var(--on-band-accent)); }
[data-surface="light"] { --focus: rgb(var(--heading)); color: rgb(var(--copy)); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-image: var(--page-glow); /* a faint warm glow at the top, at night */
  background-repeat: no-repeat;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); color: rgb(var(--heading)); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: rgb(var(--cta));
  color: rgb(var(--cta-text));
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Soft cross-fade between pages, in browsers that support it. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease-soft); }


/* ---------------------------------------------------------------------
   Type
   Newsreader for headlines and figures; Instrument Sans for everything
   you read or press. Headlines are light and large, never heavy.
   --------------------------------------------------------------------- */

.font-display,
.display-hero, .display-xl, .display-lg, .display-md, .display-sm,
.section-title, .numeral {
  font-family: Newsreader, Georgia, serif;
  font-optical-sizing: auto;
}

/* The home hero. */
.display-hero {
  font-size: clamp(3.4rem, 9.6vw, 10rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.04em;
}
/* Page titles and the biggest section statements. */
.display-xl {
  font-size: clamp(2.8rem, 6.4vw, 6rem);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.035em;
}
/* Section titles. */
.display-lg,
.section-title {
  font-size: clamp(2.2rem, 4.2vw, 3.9rem);
  font-weight: 330;
  line-height: 1.02;
  letter-spacing: -.028em;
  text-wrap: balance; /* evens out line lengths, so no word sits alone */
}
/* Supporting headlines: card and row titles. */
.display-md {
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  font-weight: 380;
  line-height: 1.12;
  letter-spacing: -.018em;
}
.display-sm {
  font-size: 1.35rem;
  font-weight: 420;
  line-height: 1.22;
  letter-spacing: -.01em;
}
.display-hero em, .display-xl em, .display-lg em, .display-md em,
.section-title em { font-style: italic; font-weight: inherit; }

/* Impact figures: very light, very large, steady digits. */
.numeral {
  font-weight: 200;
  line-height: .86;
  letter-spacing: -.045em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Lead paragraph under a headline. */
.lead {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.6;
}

/* Small uppercase labels above headlines ("Our mission", "Program 01"). */
.eyebrow {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  font-stretch: 80%;
  letter-spacing: .2em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgb(var(--accent));
}
[data-surface="dark"] .eyebrow { color: rgb(var(--on-band-accent)); }
[data-surface="light"] .eyebrow { color: rgb(var(--accent)); }

/* A label with a short gold rule in front of it. */
.eyebrow--ruled { display: inline-flex; align-items: center; gap: .85rem; }
.eyebrow--ruled::before { content: ""; width: 2.25rem; height: 1px; background: rgb(var(--hairline)); }


/* ---------------------------------------------------------------------
   Buttons and links
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--sm { min-height: 2.5rem; padding: 0 1.05rem; font-size: .82rem; }
.btn--lg { min-height: 3.6rem; padding: 0 2rem; font-size: .95rem; }

/* Giving: the one warm, filled button. The arrow slides on hover. */
.btn--give { background: rgb(var(--cta)); color: rgb(var(--cta-text)); }
.btn--give::after { content: "→"; font-weight: 400; transition: transform .45s var(--ease); }
.btn--give:hover { background: rgb(var(--cta-hover)); }
.btn--give:hover::after { transform: translateX(4px); }
.btn--give.btn--plain::after { content: none; }

/* Strong neutral button (Register, Subscribe…): navy by day, off-white at night. */
.btn--strong { background: rgb(var(--strong)); color: rgb(var(--strong-text)); }
.btn--strong:hover { background: rgb(var(--strong-hover)); }

.btn--outline { border-color: rgb(var(--line) / .3); color: rgb(var(--heading)); }
.btn--outline:hover { border-color: rgb(var(--strong)); background: rgb(var(--strong)); color: rgb(var(--strong-text)); }

.btn--outline-light { border-color: rgb(var(--on-band) / .4); color: rgb(var(--on-band)); }
.btn--outline-light:hover { border-color: rgb(var(--on-band)); background: rgb(var(--on-band)); color: rgb(var(--navy-850)); }

.btn:disabled { opacity: .6; cursor: progress; }

/* Text link with a gold underline that redraws on hover. */
.link-line {
  padding-bottom: .2em;
  background: linear-gradient(rgb(var(--hairline)), rgb(var(--hairline))) 0 100% / 100% 1px no-repeat;
  font-weight: 600;
}
.link-line:hover { animation: line-redraw .8s var(--ease); }
@keyframes line-redraw {
  0%      { background-size: 100% 1px; background-position: 100% 100%; }
  45%     { background-size: 0 1px;    background-position: 100% 100%; }
  45.01%  { background-size: 0 1px;    background-position: 0 100%; }
  100%    { background-size: 100% 1px; background-position: 0 100%; }
}

/* "Learn more →": the arrow moves when the link (or its card) is hovered. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  font-weight: 600;
  color: rgb(var(--heading));
}
.link-arrow::after { content: "→"; font-weight: 400; transition: transform .45s var(--ease); }
.link-arrow:hover::after,
.group:hover .link-arrow::after { transform: translateX(5px); }
[data-surface="dark"] .link-arrow { color: rgb(var(--on-band)); }
[data-surface="light"] .link-arrow { color: rgb(var(--heading)); }

/* "← All programs" style links back to a list. */
.link-back::after { content: none; }
.link-back::before { content: "←"; font-weight: 400; transition: transform .45s var(--ease); }
.link-back:hover::before { transform: translateX(-5px); }


/* ---------------------------------------------------------------------
   Surfaces, photos and texture
   --------------------------------------------------------------------- */

.band-dark   { background: rgb(var(--band)); color: rgb(var(--on-band)); }
.band-forest { background: rgb(var(--band-forest)); color: rgb(var(--on-band)); }
.band-warm   { background: rgb(var(--warm)); }

.grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .45;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* The gold horizon: the site's divider. */
.horizon { height: 1px; background: rgb(var(--hairline)); border: 0; }
.horizon--fade { background: linear-gradient(90deg, transparent, rgb(var(--hairline)) 12%, rgb(var(--hairline)) 88%, transparent); }

/* A photo in a frame that crops it. The image zooms slowly on hover. */
.frame { position: relative; overflow: hidden; background: rgb(var(--warm)); }
.frame > img,
.frame > .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter .8s var(--ease);
}
.frame > img { filter: var(--photo-filter); }
.group:hover .frame > img,
.group:focus-visible .frame > img { transform: scale(1.045); }
/* A navy fade from the bottom, where type sits on the photo. */
.frame--shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--shade) / 0) 40%, rgb(var(--shade) / .78));
  pointer-events: none;
}

/* Stand-in for a photo that hasn't been supplied. It names the shot it
   needs, so the placeholders double as a shot list for the foundation. */
.ph {
  position: relative;
  overflow: hidden;
  background-color: rgb(var(--navy-700));
  background-image:
    var(--grain),
    radial-gradient(120% 90% at 85% 110%, rgb(var(--clay-400) / .55), transparent 60%),
    linear-gradient(170deg, rgb(var(--navy-850)) 0%, rgb(var(--navy-700)) 70%, rgb(var(--navy-600)) 100%);
}
.ph[data-tone="2"] {
  background-image:
    var(--grain),
    radial-gradient(110% 80% at 10% 100%, rgb(var(--gold-500) / .45), transparent 62%),
    linear-gradient(200deg, rgb(var(--forest-700)) 0%, rgb(var(--forest-800)) 100%);
}
.ph[data-tone="3"] {
  background-image:
    var(--grain),
    radial-gradient(120% 90% at 50% 115%, rgb(var(--terracotta-500) / .5), transparent 60%),
    linear-gradient(180deg, rgb(var(--navy-700)) 0%, rgb(var(--navy-850)) 100%);
}
.ph__note {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  max-width: 30ch;
  padding-left: .7rem;
  border-left: 1px solid rgb(var(--hairline));
  font-size: .66rem;
  font-weight: 600;
  font-stretch: 85%;
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--on-band) / .75);
}
.ph--avatar {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
}

/* Loading shimmer while content arrives. */
.skeleton {
  min-height: 22rem;
  background: linear-gradient(100deg, rgb(var(--line) / .04) 30%, rgb(var(--line) / .09) 50%, rgb(var(--line) / .04) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -150% 0; } }
/* Smaller shapes (see js/lib/loading.js): a line of text, a heading, a list
   row, a big figure. Same shimmer; each use sets its own width. */
.skeleton--line { min-height: 0; height: .9rem; }
.skeleton--title { min-height: 0; height: clamp(2.25rem, 5vw, 4rem); }
.skeleton--row { min-height: 5.5rem; }
.skeleton--figure { min-height: 0; height: clamp(4.5rem, 12vw, 10rem); }
/* On the dark bands a light shimmer (the one above is dark on light). */
[data-surface="dark"] .skeleton {
  background-image: linear-gradient(100deg, rgb(var(--on-band) / .05) 30%, rgb(var(--on-band) / .12) 50%, rgb(var(--on-band) / .05) 70%);
}

/* "This is taking longer than usual…" (js/loading-watch.js): a small bar at
   the bottom of the screen, which goes away once the page has filled in. */
.loading-note {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: .8rem 1.1rem;
  border: 1px solid var(--edge);
  background: rgb(var(--raised));
  box-shadow: var(--shadow-float);
  color: rgb(var(--heading));
  font-size: .9rem;
  line-height: 1.5;
}
.loading-note__retry { font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.loading-note__retry:hover { color: rgb(var(--accent)); }

/* A plain card, where one is still needed (e.g. panels on the Donate page). */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgb(var(--surface));
  border: 1px solid var(--edge);
}


/* ---------------------------------------------------------------------
   Header
   Transparent over a hero photo, solid cream once the page scrolls.
   --------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  color: rgb(var(--heading));
  --nav-line: rgb(var(--accent));
  --focus: currentColor; /* the focus ring follows the text: cream over photos, navy when solid */
  transition: color .5s var(--ease);
}
/* The background is its own layer so it can fade in. (Effects like
   backdrop-filter on the header itself would trap the full-screen phone
   menu inside the header.) */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(var(--page) / .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgb(var(--line) / .08);
  transition: opacity .5s var(--ease);
}
.site-header[data-variant="overlay"] { position: fixed; inset-inline: 0; }
.site-header[data-variant="overlay"]:not(.is-solid):not(.menu-open) { color: rgb(var(--on-band)); --nav-line: rgb(var(--hairline)); }
.site-header[data-variant="overlay"]:not(.is-solid)::before { opacity: 0; }
/* A soft shade at the very top of the photo keeps the menu readable. */
.site-header[data-variant="overlay"]::after {
  content: "";
  position: absolute;
  inset: 0 0 -3rem;
  z-index: -2;
  background: linear-gradient(180deg, rgb(var(--shade) / .45), transparent);
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.site-header.is-solid::after,
.site-header.menu-open::after { opacity: 0; }
/* The phone menu is midnight, so the bar above it turns light too. */
.site-header.menu-open { color: rgb(var(--on-band)); --nav-line: rgb(var(--hairline)); }
.site-header.menu-open::before { opacity: 1; background: rgb(var(--band)); box-shadow: none; }

.site-header__bar { height: 5rem; }
@media (min-width: 1024px) { .site-header__bar { height: 5.5rem; } }

.wordmark { display: inline-flex; align-items: center; gap: .625rem; }
/* The COJO Music logo, drawn in the text color. The file is a shape only;
   the mask cuts it out of a block of color. */
.wordmark__logo {
  flex: none; /* keeps its size even when a long name wraps */
  width: 3.75rem;
  aspect-ratio: 354 / 145; /* the logo's own proportions */
  background-color: currentColor;
  -webkit-mask: url(../images/logo/cojo-music.svg) center / contain no-repeat;
  mask: url(../images/logo/cojo-music.svg) center / contain no-repeat;
}
/* The name in condensed capitals, on two lines ("A Different Day" /
   "Foundation"), to match the logo's blocky capitals. */
.wordmark__name {
  box-sizing: content-box; /* so max-width measures the text alone, not the padding */
  max-width: 9.5em;
  padding-left: .625rem;
  border-left: 1px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 35%, transparent);
  font-size: .68rem;
  font-weight: 600;
  font-stretch: 78%;
  line-height: 1.25;
  letter-spacing: .16em;
  text-transform: uppercase;
}
@media (min-width: 640px) {
  .wordmark { gap: .875rem; }
  .wordmark__logo { width: 5rem; }
  .wordmark__name { padding-left: .875rem; font-size: .74rem; }
}
/* Very small phones: the header shows the logo alone, so the Donate and
   menu buttons still fit. The link still announces the name to screen readers. */
@media (max-width: 359.98px) {
  .site-header .wordmark__name { display: none; }
}

.nav-link {
  position: relative;
  padding: .5rem 0;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .82;
  transition: opacity .3s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2rem;
  height: 1px;
  background: var(--nav-line);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease);
}
.nav-link:hover,
.nav-link[aria-current="page"] { opacity: 1; }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 1.5rem;
  height: 1.5px;
  background: currentColor;
  transition: transform .45s var(--ease), background-color .3s ease;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; width: 1rem; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { width: 1.5rem; transform: translateY(-6px) rotate(-45deg); }

/* The theme switch (js/lib/theme.js): a track with a sun and a moon, and a
   gold knob that slides to whichever is on. It takes the header's text
   color, so it works over the hero photo and on the solid header alike. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .3rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}
.theme-toggle__track {
  position: relative;
  flex: none;
  width: 3.4rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.theme-toggle:hover .theme-toggle__track { border-color: color-mix(in srgb, currentColor 60%, transparent); }
.theme-toggle__knob {
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgb(var(--accent));
  box-shadow: 0 2px 8px rgb(0 0 0 / .25);
  transition: transform .6s var(--ease), background-color .4s var(--ease);
}
.theme-toggle[aria-checked="true"] .theme-toggle__knob { transform: translateX(1.55rem); }
.theme-toggle__icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: .8rem;
  height: .8rem;
  translate: 0 -50%;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  opacity: .55;
  transition: opacity .4s var(--ease), background-color .4s var(--ease), transform .6s var(--ease);
}
.theme-toggle__icon--sun {
  left: .475rem;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 1v1.6M8 13.4V15M1 8h1.6M13.4 8H15M3.05 3.05l1.13 1.13M11.82 11.82l1.13 1.13M3.05 12.95l1.13-1.13M11.82 4.18l1.13-1.13'/%3E%3C/svg%3E");
}
.theme-toggle__icon--moon {
  right: .475rem;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M13.6 10.2A6 6 0 0 1 5.8 2.4a6 6 0 1 0 7.8 7.8z'/%3E%3C/svg%3E");
}
/* The icon for the theme that's on sits on the knob, in the page color. */
.theme-toggle[aria-checked="false"] .theme-toggle__icon--sun,
.theme-toggle[aria-checked="true"] .theme-toggle__icon--moon { opacity: 1; background-color: rgb(var(--page)); }
.theme-toggle[aria-checked="true"] .theme-toggle__icon--sun { transform: rotate(-45deg); }
.theme-toggle[aria-checked="false"] .theme-toggle__icon--moon { transform: rotate(20deg); }

/* Phone and tablet menu: the whole screen, midnight, large serif links. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 6.5rem 1.25rem 2rem;
  background: rgb(var(--band));
  color: rgb(var(--on-band));
}
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .4;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.mobile-link {
  display: block;
  padding: .45rem 0;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.mobile-link[aria-current="page"] { font-style: italic; color: rgb(var(--on-band-accent)); }
.mobile-menu:not([hidden]) .mobile-menu__item {
  animation: menu-in .8s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

.footer-sign {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(2.4rem, 6.2vw, 5.6rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.035em;
}
.footer-sign em { font-style: italic; color: rgb(var(--on-band-accent)); }
.footer-link { opacity: .72; transition: opacity .3s var(--ease); }
.footer-link:hover { opacity: 1; }

/* "Follow Cody": each network's own logo (Simple Icons, free to use), drawn
   in the footer's text color inside a thin ring, turning gold on hover. The
   logo file is a mask, so the color comes from the CSS, not the file. */
.social-link {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(var(--on-band) / .22);
  border-radius: 999px;
  color: rgb(var(--on-band) / .85);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.social-link:hover { color: rgb(var(--on-band-accent)); border-color: rgb(var(--on-band-accent)); }
.social-link:focus-visible { outline: 2px solid rgb(var(--on-band-accent)); outline-offset: 3px; }
.social-link__icon {
  width: 1.15rem;
  height: 1.15rem;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
@media (forced-colors: active) {
  .social-link__icon { background-color: LinkText; }
}

/* Partners & sponsors: a centered row of logos, all drawn in white (any
   logo on a transparent background becomes a white silhouette), softened
   until hovered. Wide logos are capped so no brand dominates. */
.partner-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
}
@media (min-width: 1024px) { .partner-list { gap: 2.5rem 4.5rem; } }
.partner-logo {
  display: block;
  width: auto;
  height: 2.75rem;
  max-width: 10rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .72;
  transition: opacity .3s var(--ease);
}
.partner-name {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(var(--on-band) / .72);
  transition: color .3s var(--ease);
}
.partner-link { display: block; }
.partner-link:hover .partner-logo { opacity: 1; }
.partner-link:hover .partner-name { color: rgb(var(--on-band)); }
.partner-link:focus-visible { outline: 2px solid rgb(var(--on-band-accent)); outline-offset: 6px; }


/* ---------------------------------------------------------------------
   Page openings (the tops of inner pages)
   --------------------------------------------------------------------- */

/* A photo that fills the opening of a page, with a navy fade for the type. */
.cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgb(var(--band));
  color: rgb(var(--on-band));
}
.cover__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cover__photo > .ph { position: absolute; inset: 0; }
.cover__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
}
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(var(--shade) / .55) 0%, rgb(var(--shade) / .1) 34%, rgb(var(--shade) / .4) 60%, rgb(var(--shade) / .9) 100%),
    linear-gradient(90deg, rgb(var(--shade) / .6), rgb(var(--shade) / .15) 55%, transparent 75%);
}


/* ---------------------------------------------------------------------
   Home hero: "the horizon"
   The headline sits across the line where the photograph meets the page:
   cream over the photo, navy below it, with the gold horizon between.
   --------------------------------------------------------------------- */

.hero {
  --horizon: 60svh;                         /* where the photo ends and the page begins */
  --hero-size: clamp(3rem, 16vw, 10rem);   /* the headline's size */
  --cut: 1.42;                              /* how much of the headline sits above the horizon, in lines */
  position: relative;
  isolation: isolate;
  background: rgb(var(--page));
}
@media (min-width: 768px) {
  .hero { --horizon: 70svh; --hero-size: clamp(4rem, 9.4vw, 10rem); }
}
.hero__sky {
  position: absolute;
  inset: 0 0 auto;
  height: var(--horizon);
  overflow: hidden;
  background: rgb(var(--band));
}
.hero__sky img {
  position: absolute;
  inset: -8% 0 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 70% 78%;
  filter: var(--photo-filter);
  animation: settle 2.6s var(--ease) both;
}
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
.hero__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--shade) / .6), rgb(var(--shade) / 0) 42%),
    linear-gradient(90deg, rgb(var(--shade) / .55), rgb(var(--shade) / 0) 62%);
}
/* The gold horizon line where photo meets page. */
.hero__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizon);
  z-index: 1;
  height: 1px;
  background: rgb(var(--hairline));
  transform-origin: left;
  animation: draw 1.8s .5s var(--ease) both;
}
@keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
.hero__head { position: relative; z-index: 2; padding-top: calc(var(--horizon) - var(--cut) * var(--hero-size)); }
/* The headline is written twice, stacked: the copy over the photo is
   clipped to stop at the horizon; the copy on the page starts there.
   Screen readers get the words once, from a hidden copy. */
.hero__title { position: relative; font-size: var(--hero-size); }
.hero__title-over,
.hero__title-under { display: block; }
.hero__title-over { color: rgb(var(--on-band)); clip-path: inset(0 0 calc(100% - var(--cut) * 1em) 0); }
.hero__title-under { position: absolute; inset: 0; color: rgb(var(--horizon-under)); clip-path: inset(calc(var(--cut) * 1em) 0 0 0); }
/* Lines slide up into view on page load. */
.hero__word { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__word > span { display: block; animation: line-up 1.4s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes line-up { from { transform: translateY(108%); } to { transform: none; } }

/* The four audiences, along the foot of the hero. */
.audiences { display: grid; }
.audiences a { transition: color .35s var(--ease); }
.audiences a:hover { color: rgb(var(--accent)); }


/* ---------------------------------------------------------------------
   Programs: an editorial index
   --------------------------------------------------------------------- */

.index-row {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgb(var(--line) / .14);
  transition: color .4s var(--ease);
}
.index-row:last-child { border-bottom: 1px solid rgb(var(--line) / .14); }
.index-row__num {
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgb(var(--accent));
}
.index-row__text { transition: transform .6s var(--ease); }
.index-row:hover .index-row__text,
.index-row:focus-visible .index-row__text { transform: translateX(.6rem); }
.index-row__summary {
  margin-top: .4rem;
  font-size: .92rem;
  line-height: 1.5;
  color: rgb(var(--copy) / .72);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.index-row__arrow { transition: transform .5s var(--ease), opacity .5s var(--ease); opacity: .35; }
.index-row:hover .index-row__arrow,
.index-row:focus-visible .index-row__arrow { transform: translateX(4px); opacity: 1; }
@media (min-width: 768px) {
  .index-row { grid-template-columns: 4.5rem 1fr auto; padding: 1.9rem 0; }
}

/* The homepage program index. Phones: a sideways swipe of tall photo cards
   (number and title under each photo). Larger screens: numbered rows, with
   the photo shown in the frame beside the list instead. */
.program-index__photo { display: none; }
@media (max-width: 1023.98px) {
  .program-index {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 74%);
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    padding: 0 1rem .75rem;
    margin-inline: -1rem;
    scrollbar-width: none;
  }
  .program-index::-webkit-scrollbar { display: none; }
  .program-index__item { scroll-snap-align: start; }
  .program-index .index-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "photo photo" "num text";
    align-items: baseline;
    gap: .9rem .75rem;
    padding: 0;
    border: 0;
  }
  .program-index .index-row:last-child { border: 0; }
  .program-index__photo { display: block; grid-area: photo; aspect-ratio: 4 / 5; }
  .program-index .index-row__num { grid-area: num; }
  .program-index .index-row__text { grid-area: text; }
  .program-index .index-row__title { font-size: 1.5rem; }
  .program-index .index-row__summary { display: none; }
  .program-index .index-row__arrow { display: none; }
  .program-index .index-row:hover .index-row__text { transform: none; }
  .group:hover .program-index__photo > img { transform: scale(1.03); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .program-index { grid-auto-columns: minmax(16rem, 40%); padding-inline: 1.5rem; margin-inline: -1.5rem; scroll-padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
  .program-index__item:last-child .index-row { border-bottom: 1px solid rgb(var(--line) / .14); }
}

/* The frame beside the index that shows the hovered program's photo. */
.index-preview { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: rgb(var(--warm)); }
.index-preview img { filter: var(--photo-filter); }
.index-preview img,
.index-preview .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .8s var(--ease), transform 1.6s var(--ease);
}
.index-preview .is-shown { opacity: 1; transform: none; }

/* Sideways-swiping cards (programs on phones, "more programs"). */
.swipe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 78%);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  padding-inline: 1rem;
  margin-inline: -1rem;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.swipe::-webkit-scrollbar { display: none; }
.swipe > * { scroll-snap-align: start; }
@media (min-width: 640px) { .swipe { grid-auto-columns: minmax(18rem, 42%); } }
@media (min-width: 1024px) { .swipe { grid-auto-columns: calc(25% - .75rem); } }


/* ---------------------------------------------------------------------
   Impact figures
   --------------------------------------------------------------------- */

.figures { display: grid; gap: 0; }
.figure {
  display: flex;
  flex-direction: column-reverse; /* the number reads first; the label is its <dt> */
  gap: .9rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgb(var(--hairline) / .45);
}
.figure__value { font-size: clamp(3.4rem, 7vw, 6rem); color: rgb(var(--on-band)); }
.figure__label {
  max-width: 22ch;
  font-size: .8rem;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: .14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: rgb(var(--on-band) / .72);
}
/* The first figure leads, very large, across the full width; the others
   sit in a row beneath it. */
.figures--lead > .figure:first-child { grid-column: 1 / -1; border-top: 0; padding-top: 0; padding-bottom: 2.5rem; }
.figures--lead > .figure:first-child .figure__value { font-size: clamp(5rem, 14vw, 12.5rem); }
/* The lead figure spans the page, so its label can run wider (and read in two lines, not four). */
.figures--lead > .figure:first-child .figure__label { max-width: 40ch; }
.figures--lead > .figure:not(:first-child) .figure__value { font-size: clamp(3rem, 5vw, 4.6rem); }
/* On a light background. */
.figures--light .figure { border-top-color: rgb(var(--line) / .14); }
.figures--light .figure__value { color: rgb(var(--heading)); }
.figures--light .figure__label { color: rgb(var(--copy) / .72); }

.progress {
  height: 3px;
  overflow: hidden;
  background: rgb(var(--line) / .12);
}
[data-surface="dark"] .progress { background: rgb(var(--on-band) / .16); }
.progress__bar {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  background: rgb(var(--progress));
  transition: width 2s var(--ease);
}
[data-surface="dark"] .progress__bar { background: rgb(var(--on-band-accent)); }
[data-surface="light"] .progress { background: rgb(var(--line) / .12); }
[data-surface="light"] .progress__bar { background: rgb(var(--progress)); }


/* ---------------------------------------------------------------------
   Events
   --------------------------------------------------------------------- */

/* The date block: month in small capitals, the day in the big serif. */
.date-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: .9rem 1rem .75rem;
  background: rgb(var(--raised));
  color: rgb(var(--heading));
}
.date-block__month {
  font-size: .7rem;
  font-weight: 600;
  font-stretch: 80%;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgb(var(--accent));
}
.date-block__day {
  font-family: Newsreader, Georgia, serif;
  font-size: 3.2rem;
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.04em;
}
.date-block--lg .date-block__day { font-size: clamp(3.6rem, 6vw, 5.2rem); }

/* One event as a row: date, name and place, type, arrow. */
.event-row {
  display: grid;
  grid-template-columns: 4.25rem 1fr auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgb(var(--line) / .14);
}
.event-row:last-child { border-bottom: 1px solid rgb(var(--line) / .14); }
.event-row__date { text-align: center; }
.event-row__date .date-block__day { font-size: 2.5rem; }
.event-row__title { transition: color .35s var(--ease); }
.event-row:hover .event-row__title { color: rgb(var(--accent)); }
@media (min-width: 768px) {
  .event-row { grid-template-columns: 5.5rem 1fr 12rem auto; gap: 2rem; padding: 1.75rem 0; }
}


/* ---------------------------------------------------------------------
   Stories
   --------------------------------------------------------------------- */

.story-feature__panel {
  position: relative;
  background: rgb(var(--surface)); /* the same as the Stories section, so it reads as cut into the photo */
}
@media (min-width: 1024px) {
  /* The headline panel overlaps the photo's edge. */
  .story-feature__panel { margin-top: -7rem; margin-right: 18%; padding: 2.25rem 2.5rem 0 0; }
}
.story-card__title { transition: color .35s var(--ease); }
.group:hover .story-card__title { color: rgb(var(--accent)); }

/* Stories page: filter tabs, understated. */
.filter-tab {
  display: inline-block;
  padding: .9rem 0;
  border-bottom: 1px solid transparent;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: .62;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.filter-tab:hover { opacity: 1; }
.filter-tab[aria-current="page"] { opacity: 1; border-bottom-color: rgb(var(--heading)); color: rgb(var(--heading)); }

/* Stories page grid in mixed sizes: two large, then three smaller, repeating. */
.story-grid { display: grid; gap: 4rem 2.5rem; }
@media (min-width: 640px) { .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .story-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5rem 2.5rem; }
  .story-grid > li { grid-column: span 2; }
  .story-grid > li:nth-child(5n + 1),
  .story-grid > li:nth-child(5n + 2) { grid-column: span 3; }
}

/* Pull quotes in articles and on the homepage. */
.pull-quote {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -.015em;
}


/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

/* On dark backgrounds (footer newsletter). */
.field {
  width: 100%;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid rgb(var(--on-band) / .28);
  border-radius: 2px;
  background: rgb(var(--on-band) / .05);
  color: rgb(var(--on-band));
  transition: border-color .3s var(--ease);
}
.field::placeholder { color: rgb(var(--on-band) / .5); }
.field:hover { border-color: rgb(var(--on-band) / .5); }
.field[aria-invalid="true"] { border-color: rgb(var(--alert)); }

/* On light backgrounds (registration, sponsorship, Get Involved…). */
.label { display: block; font-size: .88rem; font-weight: 600; color: rgb(var(--heading)); }
.label-optional { font-weight: 400; color: rgb(var(--copy) / .72); }
.input {
  width: 100%;
  min-height: 3rem;
  padding: .6rem .9rem;
  border: 1px solid rgb(var(--line) / .2);
  border-radius: 2px;
  background: rgb(var(--field));
  color: rgb(var(--copy));
  line-height: 1.5;
  transition: border-color .3s var(--ease);
}
.input::placeholder { color: rgb(var(--copy) / .68); }
.input:hover { border-color: rgb(var(--line) / .4); }
.input:focus-visible { outline: 2px solid rgb(var(--heading)); outline-offset: 0; border-color: rgb(var(--heading)); }
.input[aria-invalid="true"] { border-color: rgb(var(--error)); }

.form-status[data-state="error"] { color: rgb(var(--error)); }
[data-surface="dark"] .form-status[data-state="error"] { color: rgb(var(--alert)); }

/* A panel that holds a form. */
.form-panel {
  background: rgb(var(--surface));
  border: 1px solid var(--edge);
  padding: 1.5rem;
}
@media (min-width: 640px) { .form-panel { padding: 2.5rem; } }

/* "Screenshot of your payment": the browser's own file picker, with its
   button drawn like the site's outline buttons, then a small preview. */
.file-input {
  display: block;
  width: 100%;
  font-size: .88rem;
  color: rgb(var(--copy) / .75);
}
.file-input::file-selector-button {
  margin-right: 1rem;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid rgb(var(--line) / .3);
  border-radius: 2px;
  background: rgb(var(--surface));
  color: rgb(var(--heading));
  font: 600 .85rem/1 "Instrument Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.file-input:hover::file-selector-button { border-color: rgb(var(--strong)); background: rgb(var(--strong)); color: rgb(var(--strong-text)); }
.file-input:focus-visible { outline: 2px solid rgb(var(--heading)); outline-offset: 3px; }
.file-input[aria-invalid="true"]::file-selector-button { border-color: rgb(var(--error)); }
.field-problem { font-size: .88rem; font-weight: 600; color: rgb(var(--error)); }
.shot-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .9rem;
  padding: .75rem;
  border: 1px solid rgb(var(--line) / .15);
  background: rgb(var(--raised));
}
.shot-preview img {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  object-position: top;
  background: rgb(var(--warm));
}

/* Hidden trap field: people never see it, spam bots fill it in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ---------------------------------------------------------------------
   Articles, galleries, video, sponsorship levels, key facts
   --------------------------------------------------------------------- */

/* Text typed in the admin. Single line breaks are kept as typed. */
.prose-body { font-size: 1.125rem; line-height: 1.8; color: rgb(var(--copy) / .9); white-space: pre-line; }
.prose-body p + p { margin-top: 1.2em; }
/* Large first letter, only for real articles (two paragraphs or more). */
.prose-body:has(> p + p) > p:first-child::first-letter {
  float: left;
  margin: .06em .1em 0 0;
  font-family: Newsreader, Georgia, serif;
  font-size: 4.1em;
  font-weight: 300;
  line-height: .78;
  color: rgb(var(--accent));
}

/* Questions and answers (faq.html). Each is a <details>, so it opens with a
   click, a tap or the keyboard, and screen readers announce it, without any
   script. */
.faq { border-top: 1px solid rgb(var(--line) / .14); }
.faq__item { border-bottom: 1px solid rgb(var(--line) / .14); }
.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.3;
  color: rgb(var(--heading));
  cursor: pointer;
  list-style: none; /* hides the browser's own triangle */
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: none;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: rgb(var(--accent));
  transition: transform .3s var(--ease);
}
.faq__item[open] > .faq__q::after { transform: rotate(45deg); } /* + turns into × */
.faq__q:hover { color: rgb(var(--accent)); }
.faq__a { max-width: 62ch; padding-bottom: 1.6rem; line-height: 1.75; color: rgb(var(--copy) / .85); }
.faq__a p + p { margin-top: .9em; }
.faq__a a,
.legal a {
  color: rgb(var(--heading));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgb(var(--accent));
}
.faq__a strong,
.legal strong { font-weight: 600; color: rgb(var(--heading)); }

/* The FAQ's topic links, beside the questions on wide screens. */
.faq-topics { display: grid; gap: .25rem; border-left: 1px solid rgb(var(--line) / .14); }
.faq-topics a {
  display: block;
  padding: .45rem 0 .45rem 1.1rem;
  color: rgb(var(--copy) / .75);
  transition: color .2s ease;
}
.faq-topics a:hover { color: rgb(var(--heading)); }

/* Long legal text (privacy.html). */
.legal { max-width: 68ch; font-size: 1.05rem; line-height: 1.8; color: rgb(var(--copy) / .88); }
.legal__date { font-size: .9rem; color: rgb(var(--copy) / .7); }
.legal h2 {
  margin-top: 2.75rem;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  font-weight: 400;
  line-height: 1.25;
  color: rgb(var(--heading));
}
.legal p,
.legal ul { margin-top: 1rem; }
.legal ul { padding-left: 1.25rem; list-style: disc; }
.legal li + li { margin-top: .5rem; }
.legal li::marker { color: rgb(var(--accent)); }

@media (prefers-reduced-motion: reduce) {
  .faq__q::after, .faq-topics a { transition: none; }
}

/* "More ways to give" cards (Donate page). Text typed in the admin keeps
   its line breaks; the legal name, EIN and address sit in a ruled block. */
.way-card {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.75rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line) / .12);
}
.way-card__text { white-space: pre-line; line-height: 1.7; color: rgb(var(--copy) / .85); }
.way-card__details {
  white-space: pre-line;
  padding-left: 1rem;
  border-left: 2px solid rgb(var(--accent));
  font-size: .95rem;
  line-height: 1.6;
  color: rgb(var(--heading));
  font-variant-numeric: tabular-nums;
}

/* Ratings and seals (Impact page, Accountability): the badges as their
   organizations supply them, each linking to its public profile. */
.seal-list { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.seal { display: inline-flex; align-items: center; min-height: 3rem; font-weight: 600; color: rgb(var(--heading)); }
.seal img { max-height: 5.5rem; width: auto; }

/* In the news (About page): outlet, headline link, date. */
.press-list { border-top: 1px solid rgb(var(--line) / .14); }
.press-item { display: grid; gap: .5rem; padding: 1.6rem 0; border-bottom: 1px solid rgb(var(--line) / .14); }
.press-item__headline {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.3;
  color: rgb(var(--heading));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: rgb(var(--accent) / .6);
  transition: text-decoration-color .2s ease;
}
.press-item__headline:hover { text-decoration-color: rgb(var(--accent)); }

/* Photos from the day, in uneven columns. */
.gallery { columns: 2 12rem; column-gap: .75rem; }
.gallery img { width: 100%; margin-bottom: .75rem; break-inside: avoid; }

.video { width: 100%; aspect-ratio: 16 / 9; border: 0; background: rgb(var(--band)); }

/* Sponsorship levels as a clean price table. */
.tiers { border-top: 1px solid rgb(var(--line) / .14); }
.tier {
  display: grid;
  gap: .5rem 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgb(var(--line) / .14);
}
@media (min-width: 768px) { .tier { grid-template-columns: 10rem 1fr 12rem; align-items: baseline; } }
.tier__amount {
  font-family: Newsreader, Georgia, serif;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  color: rgb(var(--heading));
}

/* Label/value list for an event's date, time and place. */
.facts { display: grid; gap: 0; }
.facts > div { padding: 1.1rem 0; border-top: 1px solid rgb(var(--line) / .14); }
.facts dt {
  font-size: .7rem;
  font-weight: 600;
  font-stretch: 80%;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(var(--accent));
}
.facts dd { margin-top: .3rem; font-size: 1.05rem; color: rgb(var(--heading)); }
/* On an event's page the facts run across the page in a row. */
@media (min-width: 1024px) {
  .facts--row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); column-gap: 2.5rem; }
}


/* ---------------------------------------------------------------------
   Donate page
   --------------------------------------------------------------------- */

/* Amount choices: real radio buttons, drawn as chips. */
.chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 3.4rem;
  padding: 0 1.2rem;
  border: 1px solid rgb(var(--line) / .22);
  border-radius: 2px;
  background: rgb(var(--surface));
  font-family: Newsreader, Georgia, serif;
  font-size: 1.6rem;
  font-weight: 350;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.chip:hover { border-color: rgb(var(--heading)); }
.chip-input:checked + .chip { background: rgb(var(--strong)); border-color: rgb(var(--strong)); color: rgb(var(--strong-text)); }
.chip-input:focus-visible + .chip { outline: 2px solid rgb(var(--heading)); outline-offset: 3px; }

/* The Donate page's amounts, in full rows: 6 across when they fit, otherwise
   3, and 2 on the narrowest phones. (Left to wrap on their own, "Other" ended
   up alone on a row at some widths.) The rows follow the room the chips have,
   not the screen width: on large screens the form shares the width with the
   sidebar, so it's narrower there than on a tablet. */
.amount-chips { container-type: inline-size; }
.amount-chips__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.amount-chips__row .chip { min-width: 0; padding-inline: .5rem; }
@container (min-width: 18rem) { .amount-chips__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 37.5rem) { .amount-chips__row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* "Choose where it goes": a compact picker matching the amount chips. The
   browser's own arrow is swapped for a thin one in the ink color. */
.cause-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 22rem;
  min-height: 2.75rem;
  padding: .45rem 2.4rem .45rem .85rem;
  border: 1px solid rgb(var(--line) / .25);
  border-radius: 2px;
  background: rgb(var(--field)) var(--icon-chevron) no-repeat right .85rem center / .7rem;
  font-size: 1rem; /* phones: anything smaller makes iPhones zoom in when it's tapped */
  font-weight: 500;
  color: rgb(var(--heading));
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.cause-select:hover { border-color: rgb(var(--heading)); }
.cause-select:focus-visible { outline: 2px solid rgb(var(--heading)); outline-offset: 3px; }
@media (min-width: 640px) {
  .cause-select { font-size: .9rem; }
}

/* The site's own dropdown (js/lib/picker.js). The box copies the classes of
   the <select> it replaces; these rules add the list that opens under it. */
.picker { position: relative; max-width: 22rem; }
.picker__box {
  display: flex;
  align-items: center;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* a very long name ends in "…" rather than spilling out */
  user-select: none;
}
.picker__box[aria-expanded="true"] { border-color: rgb(var(--heading)); }
/* In a form, the dropdown is as wide as the other boxes, with a thin arrow. */
.picker:has(> .input) { max-width: none; }
.input.picker__box {
  padding-right: 2.4rem;
  background: rgb(var(--field)) var(--icon-chevron) no-repeat right .9rem center / .7rem;
  cursor: pointer;
}
.input.picker__box:focus-visible { outline: 2px solid rgb(var(--heading)); outline-offset: 0; border-color: rgb(var(--heading)); }
.picker__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  max-height: min(22rem, 60vh); /* longer lists scroll */
  overflow-y: auto;
  padding: .35rem 0;
  border: 1px solid rgb(var(--line) / .18);
  border-radius: 2px;
  background: rgb(var(--surface));
  box-shadow: var(--shadow-pop);
}
.picker__group-label {
  padding: .75rem .85rem .25rem;
  font-size: .66rem;
  font-weight: 600;
  font-stretch: 80%;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(var(--accent));
}
.picker__option {
  position: relative;
  padding: .45rem .85rem .45rem 2rem; /* room on the left for the tick */
  font-size: .9rem;
  line-height: 1.35;
  cursor: pointer;
}
.picker__option.is-active { background: rgb(var(--line) / .06); }
.picker__option[aria-selected="true"] { font-weight: 600; color: rgb(var(--heading)); }
.picker__option[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: .8rem;
  top: 50%;
  width: .7rem;
  height: .7rem;
  translate: 0 -50%;
  background: var(--icon-tick) center / contain no-repeat;
}
/* Fingers need bigger targets than a mouse pointer. */
@media (pointer: coarse) {
  .picker__option { padding-block: .65rem; }
}
/* Windows high-contrast mode drops background colors, so outline instead. */
@media (forced-colors: active) {
  .picker__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* The numbered steps on the Donate page (they really are a sequence). */
.step-number {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgb(var(--hairline));
  border-radius: 999px;
  font-family: Newsreader, Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 400;
  color: rgb(var(--accent));
}

.pay-card {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem;
  background: rgb(var(--surface));
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
  .pay-card { grid-template-columns: 11rem 1fr; align-items: start; padding: 2rem; }
  .pay-card--wide { grid-template-columns: 1fr; } /* no QR code (wire transfer) */
}
.qr {
  width: 11rem;
  max-width: 100%;
  padding: .5rem;
  background: rgb(var(--white)); /* stays white in both themes, so it scans */
  box-shadow: inset 0 0 0 1px rgb(var(--line) / .12);
}
.qr svg { display: block; width: 100%; height: auto; }
.handle {
  font-family: Newsreader, Georgia, serif;
  font-size: 1.9rem;
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: rgb(var(--heading));
  word-break: break-all;
}
.handle--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
  line-height: 1.5;
  letter-spacing: 0;
}
/* Payment logos: the official shape, filled with the brand's color. */
.brand-logo {
  display: inline-block;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--brand);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
[data-theme="dark"] .brand-logo { background-color: var(--brand-night, var(--brand)); }
.brand-logo--sm { width: 1.2rem; height: 1.2rem; }
/* Word logos (Venmo) keep their own proportions, about 5 to 1. */
.brand-logo--wordmark { width: 4.4rem; height: .84rem; }
.brand-logo--sm.brand-logo--wordmark { width: 3.2rem; height: .61rem; }

/* Coin picker on the Crypto card. */
.coin-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: 0 .9rem;
  border: 1px solid rgb(var(--line) / .2);
  border-radius: 999px;
  background: rgb(var(--surface));
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.coin-chip:hover { border-color: rgb(var(--heading)); }
.coin-chip small { font-weight: 500; color: rgb(var(--copy) / .72); }
.chip-input:checked + .coin-chip { border-color: rgb(var(--heading)); box-shadow: inset 0 0 0 1px rgb(var(--heading)); background: rgb(var(--raised)); }
.chip-input:focus-visible + .coin-chip { outline: 2px solid rgb(var(--heading)); outline-offset: 3px; }

.network-warning {
  margin-top: 1rem;
  padding: .75rem .9rem;
  border-left: 2px solid rgb(var(--error));
  background: rgb(var(--error) / .07);
  font-size: .9rem;
  line-height: 1.5;
}

/* "Payment methods": one tile per way to pay. Real radio buttons (the
   .chip-input before each tile), drawn as tiles with a round marker. */
.method-tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: .4rem;
  height: 100%;
  padding: 1.1rem 3rem 1.15rem 1.15rem;
  border: 1px solid rgb(var(--line) / .2);
  border-radius: 2px;
  background: rgb(var(--surface));
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.method-tile:hover { border-color: rgb(var(--heading)); }
.method-tile::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  right: 1.1rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid rgb(var(--line) / .4);
  border-radius: 999px;
}
.method-tile__name {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 1.75rem;
  font-weight: 600;
  color: rgb(var(--heading));
}
.method-tile__hint { font-size: .88rem; line-height: 1.45; color: rgb(var(--copy) / .72); }
.chip-input:checked + .method-tile { border-color: rgb(var(--heading)); box-shadow: inset 0 0 0 1px rgb(var(--heading)); background: rgb(var(--raised)); }
/* The chosen one: the marker fills, with a ring of the tile's color inside. */
.chip-input:checked + .method-tile::after { border-color: rgb(var(--heading)); background: rgb(var(--heading)); box-shadow: inset 0 0 0 .24rem rgb(var(--raised)); }
.chip-input:focus-visible + .method-tile { outline: 2px solid rgb(var(--heading)); outline-offset: 3px; }
@media (forced-colors: active) {
  .chip-input:checked + .method-tile::after { background: Highlight; }
}

/* "Sent it?" under the payment card on step 2. */
.sent-check {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem;
  background: rgb(var(--surface));
  border: 1px solid var(--edge);
  border-top: 2px solid rgb(var(--hairline));
}
.sent-check__question { display: grid; gap: 1.25rem; }
.sent-check__question:not([hidden]) + .sent-check__other { padding-top: 1.5rem; border-top: 1px solid rgb(var(--line) / .15); }
@media (min-width: 640px) {
  .sent-check { padding: 2rem; }
  .sent-check__question { grid-template-columns: 1fr auto; align-items: center; }
}

/* "You're giving $50 to…", set like a receipt line. */
.receipt {
  border-top: 1px solid rgb(var(--line) / .18);
  border-bottom: 1px solid rgb(var(--line) / .18);
  padding: 1rem 0;
  font-family: Newsreader, Georgia, serif;
  font-size: 1.3rem;
  font-weight: 350;
  line-height: 1.35;
  color: rgb(var(--heading));
}
.receipt strong { font-weight: 500; }


/* ---------------------------------------------------------------------
   About page
   --------------------------------------------------------------------- */

/* Mission areas: small cards with a gold rule, two across from tablet up.
   An odd one out at the end spans the full width. */
.mission-areas { display: grid; gap: .75rem; }
@media (min-width: 640px) {
  .mission-areas { grid-template-columns: 1fr 1fr; }
  .mission-areas li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.mission-areas li {
  padding: 1rem 1.25rem;
  background: rgb(var(--surface));
  border: 1px solid var(--edge);
  border-left: 2px solid rgb(var(--hairline));
  font-family: Newsreader, Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.3;
  color: rgb(var(--heading));
}

/* "Family. Hard work. Community…": the values, set large. */
.values-line {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 350;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: rgb(var(--heading));
}
.values-line em { color: rgb(var(--accent)); }

/* Causes supported, on the dark band: a gold rule on top of each card. */
.cause-card {
  display: grid;
  align-content: start;
  gap: .75rem;
  padding: 1.75rem;
  border: 1px solid rgb(var(--on-band) / .15);
  border-top: 2px solid rgb(var(--on-band-accent));
  background: rgb(var(--on-band) / .04);
}
.cause-card p { line-height: 1.6; color: rgb(var(--on-band) / .8); }

/* "We believe…": one statement per row, between hairlines. */
.belief {
  padding: 2rem 0;
  border-bottom: 1px solid rgb(var(--line) / .2);
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 350;
  line-height: 1.3;
  color: rgb(var(--heading));
}
.belief em { color: rgb(var(--accent)); }

/* "Give. Volunteer. Attend an event…": one sentence, as the copy reads,
   with the ways that have a page of their own underlined as links. */
.ways {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 350;
  line-height: 1.4;
}
.ways li { display: inline; }
.ways li::after { content: ". "; }
/* The spam check (lib/spam-check.js). It keeps running but takes no room
   until Cloudflare needs the visitor to click it; then it shows as a box
   above the form's status line. */
.spam-check:not(.is-shown) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.spam-check.is-shown { margin-block: .25rem; }

/* "Share a campaign" is a button (about.js); it looks like the links beside it. */
.ways a,
.ways button {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgb(var(--on-band-accent));
  transition: color .3s var(--ease);
}
.ways a:hover,
.ways button:hover { color: rgb(var(--on-band-accent)); }

/* The country music community (About page): the names beside the copy,
   artists above record labels, or side by side on tablets, where there's
   room. */
.community-names { display: grid; align-content: start; gap: 3rem; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .community-names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}

/* The artists, set like a bill: one name per row between hairlines, with
   the surname in gold italic as in the founder's heading. */
.artist-bill { border-top: 1px solid rgb(var(--line) / .2); }
.artist-bill li {
  padding: 1rem 0;
  border-bottom: 1px solid rgb(var(--line) / .2);
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 330;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: rgb(var(--heading));
}
.artist-bill em { color: rgb(var(--accent)); }

/* The record labels: small labels with a hairline border, like the credits
   on a record sleeve. */
.record-credits { display: flex; flex-wrap: wrap; gap: .5rem; }
.record-credits li {
  padding: .6rem .9rem;
  border: 1px solid rgb(var(--line) / .2);
  border-radius: 2px;
  background: rgb(var(--heading) / .04);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgb(var(--heading));
}

/* Its closing line, in even lines, so no word sits alone at the end. */
.community-close { text-wrap: balance; }


/* ---------------------------------------------------------------------
   Motion
   Slow and settling. All of it is switched off for visitors whose
   devices ask for reduced motion (at the end of this section).
   --------------------------------------------------------------------- */

/* Lines rise in on page load, one after another. */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.rise {
  animation: rise 1.1s var(--ease) both;
  animation-delay: var(--d, 0s);
}

/* Added by JavaScript to content that should appear as it scrolls in. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Photos unveil upward and settle as they scroll in (lib/motion.js). */
.unveil { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease); }
.unveil > img, .unveil > .ph { transform: scale(1.12); transition: transform 2s var(--ease); }
.unveil.is-in { clip-path: inset(0 0 0 0); }
.unveil.is-in > img, .unveil.is-in > .ph { transform: none; }

/* Elements moved by the parallax helper. */
[data-parallax] { will-change: transform; }

/* Printing: show everything that normally waits to animate in as it
   scrolls into view, or printed pages would have blank gaps. */
@media print {
  .rise, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .unveil { clip-path: none !important; transition: none !important; }
  .unveil > img, .unveil > .ph { transform: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .rise, .hero__word > span, .hero__sky img, .hero__rule, .mobile-menu:not([hidden]) .mobile-menu__item, .skeleton { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .unveil, .unveil.is-in { clip-path: none; transition: none; }
  .unveil > img, .unveil > .ph { transform: none; transition: none; }
  .frame > img, .index-preview img, .index-preview .ph,
  .progress__bar, .nav-link::after, .link-arrow::after, .btn--give::after,
  .index-row__text, .index-row__arrow, .theme-toggle__knob, .theme-toggle__icon, .theme-toggle__track { transition: none; }
  .group:hover .frame > img { transform: none; }
  .link-line:hover { animation: none; }
  [data-parallax] { transform: none !important; }
}