@font-face {
    font-family: "Alegreya";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/fonts/alegreya-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Alegreya";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("/fonts/alegreya-latin-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    --ds-ink: #00231A;
    --ds-bg: #FFFFFF;
    --ds-surface: #F7F6F2;
    --ds-text: #222222;
    --ds-text-muted: #616B66;
    --ds-text-strong: #00382A;
    --ds-on-ink: #EDF2EE;
    --ds-on-ink-muted: #A8BDB3;
    --ds-border: #DCDED7;
    --ds-hairline: #E9EAE4;
    --ds-accent: #00543D;
    --ds-keyline: #8DC63F;
    --ds-focus-ring: #00543D;
    --ds-font-display: "Alegreya", Georgia, "Times New Roman", serif;
    --ds-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ds-text-2xs: 0.6875rem;
    --ds-text-sm: 0.875rem;
    --ds-text-base: 1.0625rem;
    --ds-text-lg: 1.375rem;
    --ds-text-5xl: clamp(2.5rem, 7vw, 4rem);
    --ds-leading-tight: 1.06;
    --ds-leading-normal: 1.65;
    --ds-maxw: 50rem;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      /* Keep --ds-bg and --ds-surface neutral here. The masthead band is the only
         colored mass in either theme; tinting the page ground green as well makes
         the band disappear into it. */
      --ds-bg: #121212;
      --ds-surface: #1B1B1B;
      --ds-ink: #06301F;
      --ds-text: #E4E4E4;
      --ds-text-muted: #9C9C9C;
      --ds-text-strong: #F2F2F2;
      --ds-on-ink: #EDF2EE;
      --ds-on-ink-muted: #A8BDB3;
      --ds-border: #2E2E2E;
      --ds-hairline: #242424;
      --ds-accent: #8DC63F;
      --ds-focus-ring: #8DC63F;
    }
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--ds-bg); color: var(--ds-text);
    font: 400 var(--ds-text-base)/var(--ds-leading-normal) var(--ds-font-body);
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: var(--ds-maxw); margin: 0 auto; padding: 0 1.5rem; }
  a { color: var(--ds-accent); text-underline-offset: 2px; }
  a:hover { text-decoration: none; }
  :focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 3px; }

  .band { background: var(--ds-ink); color: var(--ds-on-ink); padding: 4.5rem 0 4rem; }
  .band .place {
    font-size: var(--ds-text-2xs); letter-spacing: 0.24em; text-transform: uppercase;
    font-weight: 600; color: var(--ds-on-ink-muted); margin: 0 0 1.5rem;
  }
  .band h1 {
    font-family: var(--ds-font-display); font-weight: 500;
    font-size: var(--ds-text-5xl); line-height: var(--ds-leading-tight);
    letter-spacing: -0.005em; margin: 0; max-width: 17ch;
  }
  .keyline { height: 4px; background: var(--ds-keyline); }

  .lead { padding: 3rem 0 0; }
  .lead p {
    font-family: var(--ds-font-display); font-style: italic; font-weight: 400;
    font-size: var(--ds-text-lg); line-height: 1.5; color: var(--ds-text-strong);
    margin: 0; max-width: 46ch;
  }

  main { padding: 2.5rem 0 0; }
  section { padding: 2.25rem 0 0; }
  h2 {
    font-size: var(--ds-text-2xs); letter-spacing: 0.24em; text-transform: uppercase;
    font-weight: 700; color: var(--ds-text-muted);
    margin: 0 0 1.35rem; padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--ds-accent);
  }
  p { margin: 0 0 1.15rem; max-width: 66ch; }

  .clubs { margin: 1.5rem 0 0; border-top: 1px solid var(--ds-border); }
  .club {
    display: flex; flex-wrap: wrap; gap: 0.15rem 1.5rem;
    align-items: baseline; justify-content: space-between;
    padding: 1.1rem 0; border-bottom: 1px solid var(--ds-border);
  }
  .club a {
    font-family: var(--ds-font-display); font-weight: 700; font-size: 1.1875rem;
    color: var(--ds-text-strong); text-decoration: none;
  }
  .club a:hover { color: var(--ds-accent); text-decoration: underline; }
  .club .meta { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }

  .more { margin-top: 1.5rem; }

  footer {
    background: var(--ds-surface); border-top: 4px solid var(--ds-ink);
    margin-top: 3.5rem; padding: 2.25rem 0 4rem;
    color: var(--ds-text-muted); font-size: var(--ds-text-sm);
  }
  footer p { margin: 0 0 0.4rem; max-width: 62ch; }
  footer .org {
    font-family: var(--ds-font-display); font-weight: 700; font-size: 1.0625rem;
    color: var(--ds-text-strong);
  }
  footer .disclaimer { margin-top: 1.15rem; }
  footer .tm { font-size: 0.8125rem; }

/* --- Navigation, added 2026-10-01 with the Organization page --- */
.band nav { margin: 1.75rem 0 0; }
.band nav a {
  color: var(--ds-on-ink-muted); text-decoration: none;
  font-size: var(--ds-text-sm); font-weight: 600;
  letter-spacing: 0.04em; margin-right: 1.5rem;
}
.band nav a:hover,
.band nav a[aria-current="page"] { color: var(--ds-on-ink); text-decoration: underline; }

/* --- Organization record table --- */
.record { width: 100%; border-collapse: collapse; margin: 1.5rem 0 0; }
.record th, .record td {
  text-align: left; vertical-align: top; padding: 0.7rem 0;
  border-bottom: 1px solid var(--ds-hairline); font-size: var(--ds-text-sm);
}
.record th {
  font-weight: 600; color: var(--ds-text-muted); width: 16rem;
  padding-right: 1.5rem;
}
.record td { color: var(--ds-text); }
@media (max-width: 36rem) {
  .record th, .record td { display: block; width: auto; border-bottom: 0; padding: 0.15rem 0; }
  .record th { color: var(--ds-text-muted); }
  .record tr { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--ds-hairline); }
}

/* --- Condensed organization block on the home page --- */
.orgblock { margin: 1.5rem 0 0; }
.orgblock dl { margin: 0; display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem 1.5rem; }
.orgblock dt { color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
.orgblock dd { margin: 0; font-size: var(--ds-text-sm); }
@media (max-width: 36rem) {
  .orgblock dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .orgblock dd { margin-bottom: 0.7rem; }
}
