/* ==========================================================================
   CALTECH ALPINE CLUB
   One stylesheet, organized top to bottom. No framework, no build step.

     1. Design tokens        the colors, type sizes and spacing, all in one
     2. Reset and base       sensible defaults
     3. Typography           headings, lede, prose
     4. Layout               wrap, section, grids
     5. Buttons and links
     6. Masthead and nav
     7. Hero
     8. Event cards
     9. Resource cards
    10. Credibility, sponsors, officers
    11. Join steps
    12. Footer
    13. Utilities, motion, print

   CHANGING THE LOOK: almost everything worth changing is in section 1.
   Edit a token there and it updates consistently across the whole site.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------
     Written in HSL rather than hex so the shades are readable and derivable:
     same hue, walk the lightness. Granite and warm paper, with alpenglow
     doing all the pointing. Used sparingly on purpose — when everything is
     accented, nothing is.

     TWO ACCENTS, and the difference is not cosmetic:
       --alpenglow    fills, buttons, icons, large text, decoration
       --accent-text  accent TEXT at small sizes. The bright accent reaches
                      only 4.4:1 on paper and 4.0:1 on the tint, both under
                      the WCAG AA floor of 4.5:1, so small accent text uses
                      the darker one (6.1:1 and 5.6:1). Adding accent text
                      anywhere? Use --accent-text.                           */
  --ink:            hsl(200 13%  9%);   /* near-black, very slightly cool  */
  --ink-soft:       hsl(195 12% 13%);
  --ink-line:       hsl(196 11% 20%);

  --paper:          hsl( 38 44% 96%);   /* warm off-white page background  */
  --paper-2:        hsl( 35 41% 92%);   /* tinted band                     */
  --white:          hsl(  0  0% 100%);

  --line:           hsl( 37 25% 86%);
  --line-strong:    hsl( 36 21% 77%);

  --text:           hsl(195 11% 14%);
  --text-mute:      hsl(197  7% 41%);
  --on-dark:        hsl( 40 28% 90%);
  --on-dark-mute:   hsl(130  3% 65%);

  --alpenglow:      hsl( 15 62% 46%);   /* the accent — late light on rock */
  --alpenglow-dark: hsl( 16 69% 37%);
  --alpenglow-tint: hsl( 22 58% 92%);
  --accent-text:    var(--alpenglow-dark);
  /* HOVER for accent TEXT. Four hover rules used to brighten to --alpenglow,
     which is 4.43:1 on paper and only 4.07:1 on the tinted band — i.e. the
     link got HARDER to read at the moment of interaction, and broke the rule
     stated three lines above. This is the brightest the accent can go and
     still clear 4.5:1 everywhere it appears (4.94 paper / 4.54 tint /
     5.33 card), while staying visibly lighter than --alpenglow-dark. */
  --alpenglow-hover: hsl( 15 62% 43%);
  /* On the ink background the accent has to go LIGHTER, not darker: the base
     accent only manages 3.3:1 against ink, so hovers and eyebrows on dark
     use this (6.5:1) instead. */
  --accent-on-dark: hsl( 18 68% 64%);
  --glacier:        hsl(190 42% 32%);

  /* --- Type --------------------------------------------------------------
     One family. Character comes from weight, scale and spacing rather than
     from collecting fonts. If Archivo fails to load, the stack below is a
     close enough grotesque that nothing reflows badly.                      */
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
  --step-2:  clamp(1.40rem, 1.22rem + 0.85vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.40rem + 1.60vw, 2.70rem);
  --step-4:  clamp(2.15rem, 1.55rem + 2.90vw, 3.80rem);
  --step-5:  clamp(2.70rem, 1.60rem + 5.00vw, 5.40rem);

  /* --- Space and shape --------------------------------------------------- */
  --wrap:      1220px;
  --gutter:    clamp(1.15rem, 4vw, 2.75rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  --r-sm: 3px;
  --r:    6px;
  --r-lg: 10px;

  /* Cards are white on warm paper, so they already separate themselves. A soft
     shadow finishes the job a border used to do, without drawing a hard line
     around every element on the page. */
  --shadow:      0 1px 2px hsl(200 13% 9% / .05);
  --shadow-card: 0 1px 2px hsl(200 13% 9% / .04), 0 4px 14px -6px hsl(200 13% 9% / .10);
  --shadow-up:   0 2px 4px hsl(200 13% 9% / .05), 0 14px 32px -12px hsl(200 13% 9% / .20);

  --speed: 160ms;
  --ease:  cubic-bezier(.2, .6, .3, 1);

  /* --- Background artwork -------------------------------------------------
     The faint contour lines behind dark sections. This is a real topographic
     map of Mount Wilson and the Mt Wilson Trail, computed from public-domain
     USGS elevation data by tools/make_topo.py — not a stock texture.

     Point it at anywhere else the club goes by editing the coordinates in
     that script and re-running it. */
  --topo-image: url('../images/mt-wilson-topo.svg');
}


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Anchored sections must not hide under the sticky masthead. */
:target { scroll-margin-top: 6rem; }
[id]    { scroll-margin-top: 6rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* A visible, high-contrast focus ring everywhere. Never remove this. */
:focus-visible {
  outline: 3px solid var(--alpenglow);
  outline-offset: 2px;
  border-radius: 2px;
}
.masthead :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--accent-on-dark);
}

/* The icon sprite itself is never seen. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.15em; height: 1.15em;
  flex: none;
  vertical-align: -0.18em;
}
.icon--xs { width: .8em;  height: .8em; }
.icon--lg { width: 1.6em; height: 1.6em; }
.icon--xl { width: 2.4em; height: 2.4em; }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.display {
  font-size: var(--step-5);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.038em;
}

.h1 { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.h4 { font-size: var(--step-1); letter-spacing: -0.012em; }

/* The small capitalised label above a heading. Used a lot; keep it quiet. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .9rem;
}
.section--dark .eyebrow { color: var(--accent-on-dark); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 46ch;
  text-wrap: pretty;
}
/* Any dark ground. This used to key off `.on-dark`, which left every .lede
   inside a .section--dark at 3.3:1 — gray text on near-black, under the AA
   floor. `.on-dark` is gone now: no template ever set it. */
.section--dark .lede,
.section--dark .step__hint { color: var(--on-dark-mute); }

.prose { max-width: 62ch; }
.prose > * + * { margin-top: 1.1em; }
.prose a { color: var(--accent-text); text-underline-offset: .2em; }
.prose a:hover { color: var(--alpenglow-hover); }
.prose strong { font-weight: 600; }
.prose h3 { font-size: var(--step-1); margin-top: 2em; }
.prose ul { margin-top: 1em; }
.prose ul li {
  list-style: none;
  position: relative;
  padding-left: 1.4em;
  margin-top: .5em;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: .25em; top: .72em;
  width: .45em; height: .45em;
  background: var(--alpenglow);
  border-radius: 50%;
}

/* --- long-form prose ---------------------------------------------------- */

.prose h2 {
  font-size: var(--step-2);
  margin-top: 1.8em;
  padding-top: .4em;
}
.prose h2 + * { margin-top: .7em; }
.prose h3 + * { margin-top: .6em; }

.prose ol {
  margin-top: 1em;
  padding-left: 1.5em;
}
.prose ol li {
  list-style: decimal;
  margin-top: .5em;
  padding-left: .2em;
}

.prose img {
  margin-block: 1.6em;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.prose blockquote {
  margin-block: 1.5em;
  padding-left: 1.15rem;
  border-left: 3px solid var(--line-strong);
  color: var(--text-mute);
}

/* Guides were written over many years by different people; some open with a
   heading and some with a paragraph. Kill the leading gap either way. */




/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }

.section--tint { background: var(--paper-2); }

.section--dark {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }

/* Section heading block: eyebrow + title on the left, a link on the right. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.section-head__text { max-width: 42ch; }
.section-head p.lede { margin-top: .85rem; }

/* The drawn contour map. Tinted by `color`, so it works on any background.
   Hidden entirely where CSS masks are unsupported rather than showing a
   solid block. */
.topo {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .topo {
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--topo-image) center / cover no-repeat;
            mask: var(--topo-image) center / cover no-repeat;
  }
}
.section--dark .topo { color: #ffffff; opacity: .055; }
.section--dark > .wrap { position: relative; }


/* ==========================================================================
   5. BUTTONS AND LINKS
   ========================================================================== */

.btn {
  --btn-bg:     var(--ink);
  --btn-fg:     var(--white);
  --btn-border: var(--ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;

  padding: .82em 1.5em;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);

  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;

  transition: background var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--alpenglow);
  --btn-border: var(--alpenglow);
}
.btn--primary:hover {
  --btn-bg: var(--alpenglow-dark);
  --btn-border: var(--alpenglow-dark);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--line-strong);
}
.btn--ghost:hover { --btn-border: var(--ink); --btn-bg: var(--white); }

/* On dark backgrounds. */
.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-border: rgba(255, 255, 255, .38);
}
.btn--light:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-border: #fff; }

.btn--sm { padding: .58em 1.05em; font-size: var(--step--1); }
.btn--lg { padding: .95em 1.9em; font-size: var(--step-1); }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Click-to-copy address. site.js swaps every printed email address for one of
   these; it has to sit inside a sentence without looking like a control, so it
   inherits everything from the link it replaced and only announces itself on
   hover. */
.copy {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  word-break: break-all;
  transition: color var(--speed) var(--ease);
}
.copy::after {
  content: '';
  display: inline-block;
  width: .82em;
  height: .82em;
  margin-left: .38em;
  vertical-align: -.06em;
  opacity: .45;
  background: currentColor;
  transition: opacity var(--speed) var(--ease);
  /* two offset rounded squares — the usual copy glyph */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* A button that carries its own eligibility warning, on the assumption that a
   visitor reads the buttons and nothing else. The restriction has to travel
   WITH the control it restricts — a paragraph further up the page is not read
   by the person about to click. Stacks the label over the gate line, so the
   gate is legible rather than a parenthesis nobody parses.

   No opacity on the gate line: white on the accent fill is 4.77:1, and fading
   it would drop that under the AA floor at the exact size where it matters. */
.btn--gated { flex-direction: column; gap: .3em; padding-block: .72em; }
.btn__label { display: inline-flex; align-items: center; gap: .55em; }
.btn__gate {
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.copy:hover { color: var(--alpenglow-hover); }
.copy:hover::after { opacity: .9; }

/* The variant that sits NEXT TO a surviving mailto link rather than replacing
   it — see the "copyable emails" section of site.js. It is the glyph alone, so
   it needs a hit area of its own and must not inherit the link's underline. */
.copy--beside {
  margin-left: .1em;
  padding: .35em;
  text-decoration: none;
  vertical-align: -.25em;
}
.copy--beside::after { margin-left: 0; }
.copy--beside.is-copied::after { opacity: 1; }
.copy--beside.is-copied { color: var(--glacier); }

.copy.is-copied {
  color: #1d7a4c;
  text-decoration: none;
}
.copy.is-copied::after {
  opacity: 1;
  /* a tick, while the confirmation is showing */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

/* On dark ground (the footer) it has to read as light text, not accent. */
.site-footer .copy { color: var(--white); text-decoration-color: #46504f; }
.site-footer .copy:hover { color: var(--accent-on-dark); }
.site-footer .copy.is-copied { color: #7fd0a3; }

/* An "email us" BUTTON used to live here. It was removed: a mailto button is
   the wrong shape for the job, because plenty of people read mail in a browser
   tab where the link does nothing, and everything you asked them to say was
   hidden inside it. The replacement writes the instructions out as text —
   see .write-to in section 10. */

/* A quiet text link with a moving arrow. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-text);
  white-space: nowrap;
}
.arrow-link .icon { transition: transform var(--speed) var(--ease); }
.arrow-link:hover { color: var(--alpenglow-hover); }
.arrow-link:hover .icon { transform: translateX(3px); }
.on-dark .arrow-link, .section--dark .arrow-link { color: var(--accent-on-dark); }


/* ==========================================================================
   6. MASTHEAD AND NAVIGATION
   ========================================================================== */

.skip-link {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--alpenglow);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--r) var(--r);
  transition: transform var(--speed) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--on-dark);
  border-bottom: 1px solid var(--ink-line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.4rem;
}

/* --- brand --- */
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--white);
  margin-right: auto;
  padding-block: .55rem;
}
.brand__logo { width: 2.1rem; height: 2.1rem; }
/* The mark's color lives in assets/images/ice-axe.svg, not here: it is loaded
   with <img>, so it cannot inherit anything from this stylesheet. */
.brand__logo--placeholder { opacity: .95; }
.brand__text { display: grid; line-height: 1.05; }
.brand__caltech {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.brand__name {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- desktop nav --- */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: .15rem; }
.nav__item { display: flex; align-items: center; }

.nav__link {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  color: var(--on-dark);
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.nav__link:hover { color: var(--white); background: rgba(255, 255, 255, .07); }
.nav__link.is-current { color: var(--white); }
.nav__link.is-current::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: .3rem;
  background: var(--alpenglow);
  border-radius: 2px;
}



.masthead__cta { display: none; }

/* --- mobile toggle + panel --- */
.masthead__toggle {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  margin-right: -.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.masthead__toggle-close { display: none; }
.masthead__toggle[aria-expanded="true"] .masthead__toggle-open  { display: none; }
.masthead__toggle[aria-expanded="true"] .masthead__toggle-close { display: block; }

.mobile-nav {
  position: fixed;
  inset: 4.4rem 0 0;
  z-index: 99;
  overflow-y: auto;
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding-block: 1.5rem 3rem;
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { margin-bottom: 1.75rem; }
.mobile-nav__list > li + li {
  margin-top: .25rem;
  padding-top: .25rem;
  border-top: 1px solid var(--ink-line);
}
.mobile-nav__top {
  display: block;
  padding: .8rem 0 .55rem;
  color: var(--white);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mobile-nav__sub {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  padding-bottom: .9rem;
}
.mobile-nav__sub a {
  display: block;
  padding: .34rem .7rem;
  border: 1px solid var(--ink-line);
  border-radius: 100px;
  color: var(--on-dark-mute);
  font-size: .86rem;
  text-decoration: none;
}
.mobile-nav__sub a:hover { color: var(--white); border-color: #4a5457; }

body.nav-open { overflow: hidden; }

@media (min-width: 1060px) {
  .nav { display: block; }
  .masthead__cta { display: inline-flex; }
  .masthead__toggle { display: none; }
  .mobile-nav { display: none !important; }
}


/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}

/* The photograph, when there is one. */
.hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 42%;
  z-index: -2;
}

/* Darkening scrim so text stays legible over any photo we are handed. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(14,17,19,.90) 0%, rgba(14,17,19,.62) 48%, rgba(14,17,19,.35) 100%),
    linear-gradient(to top,   rgba(14,17,19,.75) 0%, rgba(14,17,19,0) 55%);
}

.hero__topo { z-index: -1; color: #fff; opacity: .075; }

.hero__inner {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(30rem, 76vh, 46rem);
  padding-block: clamp(4rem, 10vw, 7rem);
  max-width: 60rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: 1.4rem;
}
.hero__eyebrow::before {
  content: '';
  width: 2.2rem; height: 1px;
  background: var(--alpenglow);
}

.hero__title {
  color: var(--white);
  margin-bottom: 1.1rem;
}
.hero__title em {
  display: block;
  font-style: normal;
  color: var(--alpenglow);
}

.hero__text {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-dark);
  opacity: .92;
  max-width: 44ch;
  margin-bottom: 2.2rem;
  text-wrap: pretty;
}

.hero__actions { gap: .8rem; }

/* Small print under the hero buttons — the "no experience needed" reassurance. */
.hero__note {
  margin-top: 1.5rem;
  font-size: var(--step--1);
  color: var(--on-dark-mute);
  display: flex;
  align-items: center;
  gap: .5em;
}

/* Compact hero for interior pages. */
.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.25rem);
}
.page-hero .topo { color: #fff; opacity: .06; }
.page-hero__inner { position: relative; max-width: 52rem; }
.page-hero h1 { color: var(--white); margin-bottom: .9rem; }
.page-hero .lede { color: var(--on-dark-mute); max-width: 52ch; }


/* ==========================================================================
   8. EVENT CARDS
   ========================================================================== */

.events-grid {
  display: grid;
  gap: 1.1rem;
  /* auto-FIT, not auto-fill: fill leaves the empty tracks in place, so a
     single upcoming event sat in one column with two thirds of the row blank
     beside it — which reads as "nothing is happening" on the one section
     meant to prove the opposite. fit collapses the unused tracks. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* A lone card should not stretch the full width either; cap it so it still
   looks like a card rather than a banner. */
.events-grid > .event-card:only-child { max-width: 34rem; }

.event-card {
  display: flex;
  gap: 1.15rem;
  padding: 1.35rem;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.event-card:hover {
  box-shadow: var(--shadow-up);
  transform: translateY(-2px);
}
.section--dark .event-card {
  background: var(--ink-soft);
  border-color: var(--ink-line);
}
.section--dark .event-card:hover { border-color: #46504f; }

/* The date block. Reads at a glance, which is the whole point. */
.event-card__date {
  flex: none;
  display: grid;
  place-content: center start;
  width: 3.6rem;
  padding-top: .1rem;
  border-right: 1px solid var(--line);
  padding-right: 1rem;
}
.section--dark .event-card__date { border-right-color: var(--ink-line); }

.event-card__month {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.event-card__day {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--text);
}
.section--dark .event-card__day { color: var(--white); }
.event-card__year {
  font-size: .7rem;
  color: var(--text-mute);
  letter-spacing: .04em;
}
.section--dark .event-card__year { color: var(--on-dark-mute); }

.event-card__body { min-width: 0; display: flex; flex-direction: column; }

.event-card__tag {
  display: flex;
  align-items: center;
  gap: .4em;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .5rem;
}
.section--dark .event-card__tag { color: var(--on-dark-mute); }

.event-card__title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .55rem;
}
.section--dark .event-card__title { color: var(--white); }

.event-card__meta {
  display: flex;
  align-items: flex-start;
  gap: .45em;
  font-size: .89rem;
  color: var(--text-mute);
  margin-bottom: .2rem;
}
.section--dark .event-card__meta { color: var(--on-dark-mute); }
.event-card__meta .icon { margin-top: .18em; opacity: .7; }

/* "Weekly on Tuesdays" — marks a card as the next of a repeating series. */
.event-card__repeat {
  display: inline-block;
  margin-top: .3rem;
  padding: .1rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-mute);
  white-space: nowrap;
}
.section--dark .event-card__repeat { border-color: #46504f; color: var(--on-dark-mute); }

.event-card__excerpt {
  margin-top: .7rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-mute);
}
.section--dark .event-card__excerpt { color: var(--on-dark-mute); }

.event-card__foot {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.1rem;
}

/* Cards that have more to show become clickable. The button below is the real
   control; this just makes the obvious gesture work too. */
.event-card--openable { cursor: pointer; }

.event-card__details {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .89rem;
  font-weight: 600;
  color: var(--accent-text);
  cursor: pointer;
  white-space: nowrap;
}
.event-card__details .icon { transition: transform var(--speed) var(--ease); }
.event-card__details:hover { color: var(--alpenglow-hover); }
.event-card__details:hover .icon { transform: translateX(3px); }
.section--dark .event-card__details { color: var(--accent-on-dark); }

.event-card__cal { font-size: .89rem; font-weight: 500; color: var(--text-mute); }
.event-card__cal:hover { color: var(--accent-text); }
.section--dark .event-card__cal { color: var(--on-dark-mute); }

/* --- the event dialog --- */
.event-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(85vh, 44rem);
  padding: 0;
  border-radius: var(--r);
  background: var(--white);
  color: var(--text);
  box-shadow: 0 24px 60px -18px rgba(20, 24, 26, .5);
  overflow: visible;
}
.event-dialog::backdrop { background: rgba(14, 17, 19, .62); }

.event-dialog__close-form { position: absolute; top: .6rem; right: .6rem; margin: 0; }
.event-dialog__close {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-mute);
  cursor: pointer;
}
.event-dialog__close:hover { background: var(--paper-2); color: var(--ink); }

.event-dialog__body {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  overflow-y: auto;
  max-height: min(85vh, 44rem);
}
/* A <p>, not a heading — see alpine_event_dialog() for why — so it has to
   restate the weight and tracking it used to inherit from the h1-h4 rule. */
.event-dialog__title {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin-bottom: .9rem;
}
.event-dialog__meta {
  display: flex;
  align-items: flex-start;
  gap: .45em;
  font-size: .94rem;
  color: var(--text-mute);
  margin-bottom: .3rem;
}
.event-dialog__meta .icon { margin-top: .2em; opacity: .7; }
.event-dialog__text {
  margin-top: 1.4rem;
  font-size: .95rem;
}
.event-dialog__text:empty { display: none; }
.event-dialog__text + .btn-row { margin-top: 1.6rem; }

.event-card--cancelled { opacity: .72; }
.event-card__cancelled {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .12rem .5rem;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b4402c;
}
.event-card--cancelled .event-card__title { text-decoration: line-through; }

/* Full-width row variant, used on the events page archive. */
.event-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}
.event-row:last-child { border-bottom: 1px solid var(--line); }
.event-row__when {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: .02em;
  padding-top: .18rem;
}
.event-row__title { font-size: var(--step-1); font-weight: 600; line-height: 1.25; }
.event-row__tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .3rem;
}
.event-row__meta { font-size: .88rem; color: var(--text-mute); margin-top: .3rem; }

/* Rows with a description open the same pop-up the cards do. */
.event-row--openable { cursor: pointer; }
.event-row--openable:hover .event-row__title { color: var(--accent-text); }
.event-row__details {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-top: .45rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--accent-text);
  cursor: pointer;
  white-space: nowrap;
}
.event-row__details .icon { transition: transform var(--speed) var(--ease); }
.event-row__details:hover .icon { transform: translateX(3px); }

/* The state that matters most on launch day: nothing scheduled yet. */
.empty-state {
  padding: clamp(2rem, 5vw, 3.25rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--white);
  text-align: center;
}
.section--dark .empty-state {
  background: rgba(255, 255, 255, .03);
  border-color: #3a4346;
}
.empty-state__icon { margin: 0 auto .9rem; color: var(--line-strong); }
.section--dark .empty-state__icon { color: #4d5658; }
.empty-state h3 { font-size: var(--step-2); margin-bottom: .6rem; }
.empty-state p {
  max-width: 46ch;
  margin: 0 auto 1.4rem;
  color: var(--text-mute);
}
.section--dark .empty-state p { color: var(--on-dark-mute); }
.empty-state .btn-row { justify-content: center; }

/* Calendar embed — only ever a fallback / a convenience, never the main event. */
.calendar-embed {
  position: relative;
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--white);
}
.calendar-embed iframe {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
}
@media (max-width: 600px) {
  .calendar-embed iframe { min-height: 480px; }
}

.subscribe-note {
  margin-top: .9rem;
  margin-bottom: 1.5rem;
  font-size: .9rem;
  color: var(--text-mute);
}


/* ==========================================================================
   9. RESOURCE CARDS
   ========================================================================== */



/* ==========================================================================
   10. CREDIBILITY, SPONSORS, OFFICERS
   ========================================================================== */

.stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  overflow: hidden;
}
.stat { padding: 1.6rem 1.4rem; background: var(--ink); }
.stat__num {
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--white);
  margin-bottom: .4rem;
}
.stat__label { font-size: .88rem; color: var(--on-dark-mute); line-height: 1.45; }

/* Light variant for use on paper. */
.stats--light { background: var(--line); border-color: var(--line); }
.stats--light .stat { background: var(--white); }
.stats--light .stat__num { color: var(--ink); }
.stats--light .stat__label { color: var(--text-mute); }

.pillars {
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pillar__icon { color: var(--alpenglow); margin-bottom: .8rem; }
.pillar h3 { font-size: var(--step-1); margin-bottom: .45rem; }
.pillar p { font-size: .94rem; color: var(--text-mute); line-height: 1.6; }
.section--dark .pillar p { color: var(--on-dark-mute); }

/* --- sponsors --- */
.sponsors {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: stretch;
}
.sponsor {
  display: grid;
  place-items: center;
  gap: .5rem;
  min-height: 7.5rem;
  padding: 1.25rem;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.sponsor:hover { box-shadow: var(--shadow-up); transform: translateY(-2px); }
.sponsor img { max-height: 3.4rem; width: auto; object-fit: contain; }
.sponsor__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; }
.sponsor__tier {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
}


/* --- gear inventory --- */
.inventory {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.inventory__source {
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.inventory__title {
  font-size: var(--step-1);
  font-weight: 700;
  margin-bottom: .4rem;
}
.inventory__blurb {
  font-size: .9rem;
  color: var(--text-mute);
  line-height: 1.55;
  margin-bottom: 1.4rem;
}
.inventory__group {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 1.3rem;
  margin-bottom: .5rem;
}
.inventory__group:first-of-type { margin-top: 0; }
.inventory__list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .35rem;
  font-size: .92rem;
  line-height: 1.5;
}
.inventory__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: .35em; height: .35em;
  border-radius: 50%;
  background: var(--line-strong);
}

.inventory__foot {
  margin-top: 1.25rem;
  font-size: .88rem;
  color: var(--text-mute);
  max-width: 60ch;
}

/* --- officers --- */
.officer-group + .officer-group { margin-top: 2.75rem; }
.officer-group__title {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-bottom: .7rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.officers {
  display: grid;
  gap: 1.75rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.officer__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--paper-2);
  margin-bottom: .8rem;
}

/* No headshot? Draw their initials. Nobody should be left off the page just
   because they have not sent a photo, and an empty frame looks like a bug. */
.officer__initials {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  margin-bottom: .8rem;
  background: var(--ink);
  color: var(--white);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .04em;
}

/* --- past officers ------------------------------------------------------
   A plain list. It grows every year, so it has to stay cheap to read. */
.alumni { margin-top: 3rem; }
.alumni__year + .alumni__year { margin-top: 1.75rem; }
.alumni__heading {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .7rem;
}
.alumni__list {
  display: grid;
  gap: .3rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.alumni__list li {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.alumni__name { font-weight: 600; }
.alumni__role { color: var(--text-mute); }

.officer__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; line-height: 1.25; }
.officer__role { font-size: .88rem; color: var(--accent-text); font-weight: 600; margin-top: .1rem; }
.officer__handles { font-size: .85rem; color: var(--text-mute); line-height: 1.45; margin-top: .35rem; }
.officer__mail { display: inline-block; margin-top: .35rem; font-size: .84rem; color: var(--text-mute); }
.officer__mail:hover { color: var(--accent-text); }

/* A quiet framed aside used for the mission line and similar. */
.pull {
  border-left: 3px solid var(--alpenglow);
  padding-left: clamp(1rem, 3vw, 1.75rem);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
}

/* Contact details as a definition list, addresses shown in full so they can
   be copied. */
.contact-list { display: grid; gap: 0; margin: 0; }
.contact-list > div {
  display: grid;
  gap: .15rem .5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}
.contact-list > div:last-child { border-bottom: 1px solid var(--line); }
.contact-list dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.contact-list dd { margin: 0; font-size: var(--step-1); font-weight: 600; }
.contact-list dd a { color: var(--accent-text); text-underline-offset: .2em; word-break: break-all; }
.contact-list__note {
  display: block;
  margin-top: .2rem;
  font-size: .88rem;
  font-weight: 400;
  color: var(--text-mute);
}
.contact-list__note a { font-weight: 500; }

/* An email instruction, written out: address, subject line and what to say,
   all as readable text. See alpine_write_to() in includes/partials.php for why
   none of it hides inside a mailto: link. Borrows the contact list's hairline
   rows so it reads as the same object as the addresses on the About page. */
.write-to { margin-top: 1.5rem; max-width: 34rem; }
.write-to > div { padding: .85rem 0; }
.write-to__addr { font-size: var(--step-1); }
.write-to__plain { font-size: var(--step-0); font-weight: 400; color: var(--text); }
.write-to__list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .3rem;
  font-size: .94rem;
  line-height: 1.5;
}
.write-to__list li::marker { color: var(--alpenglow); }

/* The one restriction on this page that decides whether any of it applies to
   you. Louder than a .note on purpose: it was a sentence inside a paragraph,
   which is exactly where a scanning reader misses it. */
.gate {
  padding: 1.15rem 1.35rem;
  border-left: 4px solid var(--alpenglow);
  background: var(--alpenglow-tint);
  border-radius: 0 var(--r) var(--r) 0;
}
.gate__headline {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.gate__detail {
  margin-top: .5rem;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--text);
}

.note {
  display: flex;
  gap: .7rem;
  padding: 1rem 1.15rem;
  background: var(--alpenglow-tint);
  border-radius: var(--r);
  font-size: .92rem;
  line-height: 1.55;
}
.note .icon { color: var(--accent-text); margin-top: .15em; }
.note a { color: var(--accent-text); }


/* ==========================================================================
   11. JOIN STEPS
   ========================================================================== */

/* Two columns, not three: step 1 forks into 1a/1b, and the pair has to land
   side by side on the same row or the fork reads as two separate steps. */
.steps { display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.step__num {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
}
.step--primary { box-shadow: 0 0 0 2px var(--alpenglow), var(--shadow-card); }
.step--primary .step__num { background: var(--alpenglow); }
.step h2 { font-size: var(--step-2); margin-bottom: .6rem; }
.step p { color: var(--text-mute); line-height: 1.6; }
.step > p + p { margin-top: .7rem; }
.step__hint { font-size: .84rem; }
/* A card's standing, above its heading: "Optional", "Any time". */
.step__who {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .35rem;
}
.step:not(.step--primary) .step__who { color: var(--text-mute); }

/* The 1a/1b fork. Both cards print the SAME line here, which is the signal
   that they are one step and not two — so it must stay identical in both,
   and stay quieter than the heading below it, which is the audience. */
.step__same {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
/* The audience is what the reader is scanning for, so it gets the accent and
   a size of its own rather than inheriting the ordinary card heading. */
.step--fork h2 { color: var(--accent-text); }

/* The buttons must line up across all three cards, whatever the text above
   them does. That means the action block holds ONLY the button and is pushed
   to the bottom; explanatory notes flow with the paragraphs above it. */
.step__action { margin-top: auto; padding-top: 1.5rem; }

.faq { display: grid; gap: 0; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
}
.faq__q .icon { color: var(--text-mute); transition: transform var(--speed) var(--ease); }
.faq__q[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq__a { padding-bottom: 1.35rem; max-width: 62ch; color: var(--text-mute); }
.faq__a[hidden] { display: none; }
.faq__a > * + * { margin-top: .8em; }
.faq__a a { color: var(--accent-text); }


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--ink);
  color: var(--on-dark-mute);
  overflow: hidden;
  padding-top: clamp(3rem, 7vw, 5rem);
}
.site-footer__topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .site-footer__topo {
    display: block;
    background-color: #fff;
    opacity: .04;
    -webkit-mask: var(--topo-image) center / cover no-repeat;
            mask: var(--topo-image) center / cover no-repeat;
  }
}

.site-footer__inner {
  position: relative;
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  padding-bottom: 3rem;
}
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 22rem 1fr; }
}

.site-footer__mark { width: 2rem; height: 2rem; margin-bottom: 1rem; }
.site-footer__blurb { font-size: .94rem; line-height: 1.65; max-width: 34ch; }

/* Contact details, spelled out. The footer is on every page, so this is where
   somebody looks when they want to reach a human. */
.site-footer__contact { margin-top: 1.75rem; }
.site-footer__contact dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: .25rem;
}
.site-footer__contact dd {
  margin: 0 0 .9rem;
  font-size: .95rem;
}
.site-footer__contact a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid #46504f;
  word-break: break-all;
}
.site-footer__contact a:hover { border-bottom-color: var(--accent-on-dark); color: var(--accent-on-dark); }
.site-footer__contact .note-small {
  display: block;
  font-size: .82rem;
  color: var(--on-dark-mute);
  margin-top: .15rem;
}

.site-footer__nav {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.site-footer__heading {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.site-footer__heading a { color: var(--white); text-decoration: none; }
.site-footer__heading a:hover { color: var(--accent-on-dark); }
.site-footer__col li + li { margin-top: .35rem; }
.site-footer__col a {
  font-size: .9rem;
  text-decoration: none;
  color: var(--on-dark-mute);
}
.site-footer__col a:hover { color: var(--white); }

.site-footer__legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--ink-line);
  font-size: .84rem;
}
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.site-footer__legal a { color: var(--on-dark-mute); text-decoration: none; }
.site-footer__legal a:hover { color: var(--white); text-decoration: underline; }

/* Keep the footer at the bottom on short pages. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main  { flex: 1 0 auto; }


/* ==========================================================================
   13. UTILITIES, MOTION, PRINT
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }
.center .lede, .center .section-head__text { margin-inline: auto; }
.center .btn-row { justify-content: center; }

.stack    > * + * { margin-top: 1.35rem; }
.stack-lg > * + * { margin-top: 2.5rem; }

.mt-lg { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   Touch targets.

   On a mouse a 22px-tall "Details" link is fine; on a phone it is a miss
   waiting to happen. Rather than inflate everything for everyone, grow the
   small controls only where the pointer is coarse — measured at 375px, the
   offenders were the footer nav (16px), the Details buttons (22px) and the
   copyable addresses (24px).
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .site-footer__col a,
  .site-footer__legal a,
  .site-footer__contact a,
  .site-footer__heading a { display: inline-block; padding-block: .68rem; }
  .site-footer__col li + li { margin-top: 0; }
  .site-footer__heading { margin-bottom: .3rem; }

  .event-card__details,
  .event-row__details,
  .event-card__cal,
  .arrow-link { padding-block: .6rem; }

  .copy { padding-block: .5rem; }

  .mobile-nav__sub a { padding: .6rem .85rem; }
}

/* Anyone who has asked their system to calm down gets a calm site. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead, .mobile-nav, .site-footer, .calendar-embed, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .section--dark h1, .section--dark h2, .hero__title, .page-hero h1 { color: #000 !important; }
  .topo, .hero__topo, .hero__media { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}