/* ==========================================================================
   The Noteworthy Project — design system
   Palette "Concert": ink #14110F, brass #B08A46, warm ivory #F7F3EA.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Palette — "Concert". Ink, warm ivory, and brass.
     Every colour in the site comes from here and nowhere else, so a
     rethemed site is this block and nothing more. Alternates live in
     palette-*.css; load one after this file to try it.
     ------------------------------------------------------------------ */
  --deep:        #100f0d;   /* warm near-black: dark sections, headings   */
  --deep-700:    #241e1a;
  --deep-500:    #4d423a;

  --accent:      #ba924d;   /* the logo's gold, sampled from the artwork  */
  --accent-600:  #8a6829;   /* darker gold — accent TEXT on light grounds  */
  --accent-100:  #f4ead6;

  --ground:      #f7f3ea;   /* warm ivory page                            */
  --ground-200:  #efe7d7;
  --paper:       #fffdf8;
  --ink:         #100f0d;
  --ink-muted:   #6b6158;
  --rule:        #e3dac9;

  --ok:          #3d6b4f;
  --hold:        #8a6d3b;
  --tint:        #fdf8ea;   /* warm highlight panels */
  --tint-rule:   #e8dcc0;

  --wrap:        1160px;
  --gap:         clamp(1.25rem, 3vw, 2.5rem);
  --radius:      14px;
  --radius-lg:   22px;
  --shadow:      0 1px 2px rgba(20,17,15,.05), 0 8px 28px -12px rgba(20,17,15,.20);
  --shadow-lg:   0 2px 4px rgba(20,17,15,.07), 0 24px 60px -24px rgba(20,17,15,.34);

  /* The wordmark is a geometric sans, so the headings are too. Inter carries
     the body text, where it is easier to read at small sizes than Poppins. */
  --serif: "Poppins", "Avenir Next", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--deep);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.8vw, 4.3rem); letter-spacing: -.035em; font-weight: 600; }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p  { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--deep-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-600); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--paper { background: var(--paper); }
.section--ground { background: var(--ground-200); }
.section--deep  { background: var(--deep); color: #ded5c6; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep a:not(.btn) { color: var(--accent); }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .8rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; flex: 0 0 auto;
  background: var(--accent); border-radius: 2px;
}
.center .eyebrow { justify-content: center; }
.section--deep .eyebrow,
.hero .eyebrow,
.band .eyebrow { color: var(--accent); }

.lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--ink-muted); line-height: 1.6; }
.section--deep .lede { color: #b5aa99; }

.skip {
  position: absolute; left: -9999px;
  background: var(--deep); color: #fff; padding: .75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,243,234,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 92px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 56px; width: auto; display: block; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.45rem; }
.nav a {
  font-size: .82rem; font-weight: 600; color: var(--deep);
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; padding: .4rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-600); border-bottom-color: var(--accent); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .site-header__inner { min-height: 76px; }
  .brand img { height: 44px; }
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: 1px solid var(--rule);
    border-radius: 10px; padding: .5rem .7rem; font: inherit; color: var(--deep); cursor: pointer;
  }
  .nav {
    position: absolute; inset: 100% 0 auto; margin: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--rule); box-shadow: var(--shadow); padding: .5rem 1.25rem 1rem;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--rule); }
  .nav .btn { margin-top: .75rem; text-align: center; }
}

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 .98rem/1 var(--sans);
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn__arrow { transition: transform .18s ease; display: inline-block; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: #14110f; box-shadow: 0 6px 18px -10px rgba(176,138,70,.95); }
.btn--primary:hover { background: var(--accent-600); color: #fffdf8; }
.btn--deep { background: var(--deep); color: #fff; }
.btn--deep:hover { background: var(--deep-700); color: #fff; }
.btn--ghost { border-color: currentColor; color: var(--deep); }
.section--deep .btn--ghost,
.hero .btn--ghost,
.band .btn--ghost { color: #efe7d9; border-color: #efe7d9; }
.section--deep .btn--ghost:hover,
.hero .btn--ghost:hover,
.band .btn--ghost:hover { background: #efe7d9; color: var(--deep); }
.btn--sm { padding: .6rem 1.05rem; font-size: .88rem; }
/* The header call to action is the one button people read at a glance —
   it needs room around the words, not the compact treatment. */
.nav .btn { padding: .72rem 1.45rem; font-size: .8rem; letter-spacing: .04em; }

/* --- hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--deep); color: #ebe3d6; overflow: hidden; }
.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: 1.05fr .95fr;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { color: #fff; }
.hero h1 span,
.hero h1 em {
  display: block; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); font-weight: 600; }
.hero__lede { font-size: clamp(1.1rem, 1.9vw, 1.32rem); color: #bcb1a0; max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__art { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* The drawn keyboard stand-in, used until there are photographs of our own. */
.hero__art--drawn {
  background: var(--deep-700);
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
}
.hero__art--drawn .keys { display: block; width: 100%; height: auto; }
.hero__art figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 3.5rem 1.6rem 1.4rem;
  background: linear-gradient(to top, rgba(16,15,13,.88), rgba(16,15,13,0));
  color: #fff;
  font-family: var(--serif); font-weight: 500;
  letter-spacing: -.02em;
  font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.15;
}
.hero__credit {
  margin-top: .7rem; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* Two arrows, opposite directions — the whole thesis as a graphic. */
.flow { display: grid; gap: 1rem; margin-top: 2.5rem; }
.flow__row { display: flex; align-items: center; gap: .85rem; font-size: .97rem; color: #cdc3b2; }
.flow__arrow {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(176,138,70,.18); color: var(--accent); font-size: 1.05rem;
}

/* --- stats -------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; }
.stat__n {
  font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.1rem);
  line-height: 1; color: var(--accent); font-weight: 600;
}
.stat__l { font-size: .9rem; color: var(--ink-muted); margin-top: .4rem; }
.section--deep .stat__l { color: #a99d8b; }

/* --- pillars ------------------------------------------------------------- */
/* The image bleeds to the card edge. An image inset inside a card with padding
   around it is the single most template-looking thing a page can do. */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap); }
.pillar {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.pillar .media {
  border-radius: 0;
  margin: 0;
  aspect-ratio: 16 / 9;
}

.pillar__body {
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex; flex-direction: column; flex: 1;
}

/* Cards with no bleeding image pad themselves, so a page that does not use
   .pillar__body still looks right. Padding lives in exactly one of the two
   places, never both and never neither. */
.pillar:not(:has(.pillar__body)) {
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
}
@supports not selector(:has(*)) {
  .pillar { padding: clamp(1.5rem, 2.6vw, 2.1rem); }
  .pillar:has(.pillar__body) { padding: 0; }
  .pillar .media { margin: calc(-1 * clamp(1.5rem, 2.6vw, 2.1rem)); margin-bottom: 1.4rem; }
}

.pillar__tag {
  align-self: flex-start;
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-600);
  padding: 0; background: none;
  margin-bottom: .55rem;
}
.pillar h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin-bottom: .7rem; }
.pillar > .pillar__body > p { color: var(--ink-muted); }

/* A gold rule per item instead of a bullet dot. */
.pillar ul {
  list-style: none; margin: 1.4rem 0 1.75rem; padding: 0;
  border-top: 1px solid var(--rule);
}
.pillar li {
  position: relative;
  margin: 0; padding: .72rem 0 .72rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted); font-size: .96rem; line-height: 1.5;
}
.pillar li::before {
  content: ""; position: absolute; left: 0; top: 1.12rem;
  width: 9px; height: 2px; background: var(--accent); border-radius: 2px;
}
.pillar li strong { color: var(--ink); }
.pillar .btn { margin-top: auto; align-self: flex-start; }

/* --- steps -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); counter-reset: s; }
.step { counter-increment: s; }
.step::before {
  content: counter(s); display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--deep); color: var(--accent);
  font: 600 1.05rem/1 var(--serif); margin-bottom: 1.1rem;
}
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-muted); font-size: .97rem; }

/* --- listing cards ------------------------------------------------------ */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filters a {
  font: 500 .9rem/1 var(--sans); padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--deep); text-decoration: none;
}
.filters a:hover { border-color: var(--accent); }
.filters a[aria-current="page"] { background: var(--deep); border-color: var(--deep); color: #fff; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: 1.5rem; }
.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card__media { aspect-ratio: 4 / 3; background: var(--ground-200); display: grid; place-items: center; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media svg { width: 42%; height: auto; opacity: .55; color: var(--deep-500); }
.card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.card__meta { font-size: .88rem; color: var(--ink-muted); margin: 0 0 .9rem; }
.card__body .btn { margin-top: auto; align-self: flex-start; }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  align-self: flex-start;   /* card bodies are flex columns; without this the pill spans the card */
  font: 600 .72rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: .38rem .7rem; border-radius: 999px; margin-bottom: .7rem;
}
.badge--ready { background: #e6efe7; color: var(--ok); }
.badge--lead  { background: var(--accent-100); color: var(--accent-600); }
.badge--held  { background: #f1e9d6; color: var(--hold); }
.badge--movers{ background: var(--ground-200); color: var(--ink-muted); text-transform: none; letter-spacing: 0; }

/* --- forms -------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .92rem; color: var(--deep); }
.field .hint { font-size: .85rem; color: var(--ink-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; padding: .75rem .9rem;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper); color: var(--ink); width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--deep-500); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .field--row { grid-template-columns: 1fr; } }
.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; }
.check input { width: auto; margin-top: .25rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.panel {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.75rem); box-shadow: var(--shadow);
}

.flash { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.75rem; font-weight: 500; }
.flash--ok   { background: #e8f0e9; color: #2c5540; border: 1px solid #c6dccb; }
.flash--err  { background: #fbeaea; color: #8a2b2b; border: 1px solid #eecccc; }

/* --- events ------------------------------------------------------------- */
.events { display: grid; gap: 1rem; }
.event {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.15rem 1.35rem;
}
.event__when {
  font: 600 .85rem/1.4 var(--sans); color: var(--accent-600);
  text-align: center; padding-right: 1.25rem; border-right: 1px solid var(--rule); min-width: 108px;
}
.event__what h3 { font-size: 1.1rem; margin-bottom: .15rem; }
.event__what p { font-size: .92rem; color: var(--ink-muted); margin: 0; }

/* --- quote -------------------------------------------------------------- */
.quote {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 500; line-height: 1.3; letter-spacing: -.02em;
  color: var(--deep); text-wrap: balance;
}
.section--deep .quote { color: #fff; }
.quote cite { display: block; font: 500 .95rem/1.5 var(--sans); color: var(--ink-muted); font-style: normal; margin-top: 1.25rem; }
.section--deep .quote cite { color: #a99d8b; }

/* --- prose -------------------------------------------------------------- */
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }

/* --- footer ------------------------------------------------------------- */
.site-footer { background: var(--deep); color: #a89c8b; padding-block: 3.5rem 2.5rem; font-size: .93rem; }
.site-footer a:not(.btn) { color: #ded5c6; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: var(--gap); }
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__grid h4 { color: #fff; font-family: var(--sans); font-size: .8rem; letter-spacing: .14em;
                   text-transform: uppercase; margin-bottom: .9rem; }
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: .5rem; }
.footer__logo { height: 54px; width: auto; margin-bottom: 1.1rem; }
.footer__legal {
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; color: #8a7f6f;
}

.muted { color: var(--ink-muted); }
.center { text-align: center; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.empty {
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 3rem 1.5rem; text-align: center; color: var(--ink-muted);
}

/* --- disclosure list (FAQ) ---------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 3rem 1.25rem 1.35rem;
  font-family: var(--serif); font-weight: 500; letter-spacing: -.015em;
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--deep); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.35rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--accent-600); border-bottom: 2px solid var(--accent-600);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { background: var(--ground-200); }
.faq .answer { padding: 0 3rem 1.4rem 1.35rem; color: var(--ink-muted); }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer a { color: var(--deep-500); }

/* --- legal prose --------------------------------------------------------- */
.legal { font-size: .98rem; }
.legal h2 { font-size: 1.3rem; margin-top: 2.25rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.5rem; font-family: var(--sans); font-weight: 600; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .45rem; }
.legal .updated {
  font-size: .85rem; color: var(--ink-muted); letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 2rem;
}

/* --- scroll reveal ------------------------------------------------------- */
/* Transform only, never opacity.
 *
 * A fade-in hides content until a script un-hides it, and if that script does
 * not run — or the reveal logic is wrong in some browser I could not test — the
 * page is silently blank. That is a catastrophic failure mode in exchange for a
 * small flourish, so this animates position alone. Worst case, an element sits
 * 18px lower than it should and every word is still readable. */
.js-reveal .reveal {
  transform: translateY(18px);
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.js-reveal .reveal.is-in { transform: none; }
.js-reveal .reveal:nth-child(2) { transition-delay: .06s; }
.js-reveal .reveal:nth-child(3) { transition-delay: .12s; }
.js-reveal .reveal:nth-child(4) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { transform: none !important; transition: none !important; }
}

/* --- keyboard divider ---------------------------------------------------- */
/* The identity, used as punctuation between sections. */
.divider { height: 34px; overflow: hidden; background: var(--deep); }
.divider svg { display: block; width: 100%; height: 100%; opacity: .9; }

/* --- section headings get a little more room to breathe ------------------ */
.section > .wrap > .eyebrow + h2,
.section > .wrap-narrow > .eyebrow + h2 { margin-bottom: .6rem; }

/* --- media slots --------------------------------------------------------- */
/* A photograph when we have one, a drawing when we do not. Both occupy the
   same box, so a section never reflows when a real picture arrives. */
.media {
  aspect-ratio: var(--media-ratio, 4 / 3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ground-200);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--drawn {
  background: var(--deep-700);
  display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.media--drawn svg { width: 100%; height: auto; max-height: 100%; }
.media--drawn .media__mark {
  width: 42%; height: auto; opacity: .3; object-fit: contain;
}
.pillar .media { margin-bottom: 1.4rem; }

/* --- pull quote ---------------------------------------------------------- */
/* For long reading pages, where a picture is not always the right answer. */
.pull {
  margin: 2.75rem 0;
  padding: 0 0 0 1.6rem;
  border-left: 3px solid var(--accent);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.35;
  letter-spacing: -.02em; color: var(--deep);
  text-wrap: balance;
}
.figure { margin: 2.5rem 0; }
.figure figcaption {
  margin-top: .7rem; font-size: .85rem; color: var(--ink-muted);
}

/* --- full-bleed band ----------------------------------------------------- */
/* One moment of scale. Every section on the page is a padded box of the same
   width, which is orderly and monotonous; this breaks the rhythm once. */
.band {
  position: relative;
  min-height: clamp(360px, 52vw, 560px);
  display: grid; align-items: end;
  background: var(--deep);
  overflow: hidden;
}
.band__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82);
}
/* A scrim, not just a brightness filter. A filter darkens the bright parts and
   the dark parts equally, so white type still fails over a sunlit window; a
   gradient guarantees a dark ground exactly where the words are. */
.band::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to top, rgba(16,15,13,.92) 0%, rgba(16,15,13,.72) 38%, rgba(16,15,13,.18) 72%, rgba(16,15,13,.05) 100%),
    linear-gradient(to right, rgba(16,15,13,.55) 0%, rgba(16,15,13,0) 62%);
}
.band__inner {
  position: relative; z-index: 1;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.band__quote {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2.9rem);
  line-height: 1.15; letter-spacing: -.03em;
  color: #fff; max-width: 20ch; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.band__quote em { font-style: normal; color: var(--accent); }
.band__by {
  margin-top: 1.1rem; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: #d8cdb9;
}

/* --- steps, given more presence ------------------------------------------ */
.steps { counter-reset: s; }
.step { position: relative; padding-top: 1.1rem; border-top: 2px solid var(--rule); }
.step::before {
  content: counter(s, decimal-leading-zero);
  counter-increment: s;
  display: block; width: auto; height: auto;
  background: none; border-radius: 0;
  color: var(--accent-600);
  font: 600 .82rem/1 var(--sans); letter-spacing: .14em;
  margin-bottom: .9rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: .4rem; }

/* --- cards and panels: crisper edges to match a geometric mark ------------ */
.pillar { border-radius: 18px; }
.card { border-radius: 12px; }

/* --- founder panel ------------------------------------------------------- */
.founder {
  display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 680px) { .founder { grid-template-columns: 1fr; } }
.founder .media { border-radius: var(--radius); }
.founder__name { font-size: 1.5rem; margin: 0 0 .15rem; }
.founder__role {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-600); margin: 0 0 1.1rem;
}
.founder p { color: var(--ink-muted); }
.founder p:first-of-type { color: var(--ink); }

/* --- sign-off ------------------------------------------------------------ */
/* The mark at a size where it can actually be seen. Everywhere else it is
   working at 42px in a header; here it gets to be the thing on the page. */
.signoff {
  background: var(--deep);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  text-align: center;
}
.signoff img {
  width: min(78%, 480px); height: auto; margin: 0 auto;
}
.signoff__slogan {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  letter-spacing: -.035em; line-height: 1;
  color: var(--accent) !important;
  margin: 1.9rem auto .4rem !important; max-width: none !important;
}
.signoff p {
  margin: 1.1rem auto 0; max-width: 34ch;
  color: #b5aa99; font-size: clamp(1rem, 1.6vw, 1.15rem);
}
.signoff .btn { margin-top: 1.75rem; }

/* --- full-bleed hero ----------------------------------------------------- */
/* The boxed hero put a small picture beside a column of text. This gives the
   photograph the full width and sets the words over it, which is the single
   biggest difference between a page that looks careful and one that looks
   commissioned. */
.hero--full {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: grid; align-items: end;
  padding: 0; overflow: hidden;
}
.hero--full .hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9);
}
.hero--full::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to top,   rgba(16,15,13,.94) 8%, rgba(16,15,13,.70) 42%, rgba(16,15,13,.22) 78%, rgba(16,15,13,.10) 100%),
    linear-gradient(to right, rgba(16,15,13,.78) 0%, rgba(16,15,13,.25) 55%, rgba(16,15,13,0) 85%);
}
.hero--full .wrap { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero--full .eyebrow,
.hero--full h1,
.hero--full .hero__lede { text-shadow: 0 2px 20px rgba(0,0,0,.55); }
.hero--full h1 { max-width: 19ch; font-size: clamp(2.2rem, 5vw, 3.8rem); }
/* A two-word title sits on one line rather than stacking. */
.hero--full h1.one-line span, .hero--full h1.one-line em { display: inline; }
.hero--full .hero__lede { font-size: clamp(1.2rem, 2.1vw, 1.5rem); }
.hero--full .hero__lede { max-width: 44ch; color: #d5cbbb; }
.hero--full .flow { max-width: 46ch; margin-top: 2rem; }
.hero--full .flow__row { color: #cdc3b2; }
.hero--full .hero__cta { margin-top: 2.25rem; }

/* --- three truths -------------------------------------------------------- */
/* The rest of the site is deliberately concrete. This is the one place it is
   allowed to simply say what music is for. Each claim is followed by something
   specific, so the lift never floats free of the work. */
.truths { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (max-width: 820px) { .truths { grid-template-columns: 1fr; } }
.truth { border-top: 2px solid rgba(186,146,77,.45); padding-top: 1.4rem; }
.truth h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -.03em; line-height: 1.05;
  color: var(--accent); margin-bottom: .8rem;
}
.section--deep .truth h3 { color: var(--accent); }
.truth p { color: #b5aa99; font-size: 1rem; margin: 0; }

/* --- a signed statement -------------------------------------------------- */
/* Set apart from the surrounding prose, because it is somebody speaking rather
   than the site describing them. */
.statement p {
  font-size: clamp(1.02rem, 1.5vw, 1.12rem);
  line-height: 1.62;
  color: var(--ink);
}
.statement p:first-of-type::before {
  content: "\201C";
  float: left; margin: .06em .12em 0 -.42em;
  font-family: var(--serif); font-weight: 600;
  font-size: 3.2em; line-height: .78; color: var(--accent);
}
.statement__sig {
  margin-top: 1.4rem !important; padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .82rem !important; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted) !important;
}

/* The first and last lines of the statement carry it; set them larger so the
   eye lands on them even if somebody only skims. */
.statement__hook {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.28rem, 2.2vw, 1.6rem) !important;
  line-height: 1.28; letter-spacing: -.022em;
  color: var(--deep) !important;
  text-wrap: balance;
}
.statement__hook--close { margin-top: 1.6rem !important; }

/* Leadership posts — /volunteer.php. Six cards, evenly weighted: no post is
   presented as more senior than another, because on a team this size none is. */
.roles { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.role  { padding:1.25rem 1.35rem; background:var(--paper); border:1px solid var(--rule);
         border-radius:var(--radius); box-shadow:var(--shadow); }
.role h3 { margin:0 0 .4rem; font-size:1.05rem; letter-spacing:.01em; }
.role p  { margin:0 0 .5rem; font-size:.95rem; }
.role__learn { margin-bottom:0 !important; color:var(--ink-muted); font-style:italic; font-size:.9rem !important; }