/* Public site components. Tokens live in base.css.
   Shared public components live here once: header, preview band, footer,
   hero, small labels, the card, the pulled quote and the number strip.
   Page files (home.css, events.css, ...) only lay them out. */

.site-header {
  background: var(--color-pond);
  color: var(--color-pond-text);
}
.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-nav { display: contents; }
.site-nav .nav-list { flex-basis: 100%; }
.site-nav .nav-list li + li { border-top: 1px solid rgb(255 255 255 / 0.15); }
.site-nav .button--primary { justify-content: flex-start; padding-left: var(--space-2); }
.site-nav .nav-link:not(.button):hover { text-decoration: underline; text-underline-offset: 0.3em; }

@media (min-width: 768px) {
  .site-nav .nav-list { flex-basis: auto; }
  .site-nav .nav-list li + li { border-top: 0; }
  .site-nav .button--primary { padding: var(--space-2) var(--space-4); margin-left: var(--space-2); }
}

.site-main { padding: var(--space-7) 0 var(--space-8); }
/* Short pages: the footer sits at the bottom of the window (inspection row 46). */
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }

/* The preview notice (Site Settings, Home: "Preview notice"); gone when emptied.
   Quiet: a creek-stone band in small type, not a warning. */
.preview-banner {
  background: var(--color-stone);
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.preview-banner__text {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2) var(--gutter);
}

/* Footer: a deep-water band that closes the page as the header opens it.
   The legal sentence is set at reading size, not in fine print. */
.site-footer {
  border-top: 4px solid var(--color-wood);
  background: var(--color-pond);
  color: var(--color-pond-text);
  padding: var(--space-7) 0 var(--space-6);
  font-size: var(--text-sm);
}
.site-footer .legal {
  color: var(--color-pond-text);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  max-width: var(--measure);
}
.site-footer address { color: var(--color-hero-muted); }
.site-footer a { color: var(--color-pond-text); }
.site-footer :focus-visible { outline-color: var(--color-focus-on-dark); }
.footer-links {
  list-style: none;
  padding: var(--space-3) 0 0;
  margin: var(--space-5) 0 0;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.footer-links a { display: inline-flex; align-items: center; min-height: var(--tap-target); }
.address-inline { white-space: pre-line; }

@media print {
  .site-header, .skip-link, .nav-toggle-label, .button, .footer-links, .preview-banner, .edit-link { display: none; }
  body { background: #fff; color: #000; }
  .site-main { padding: 0; }
  .site-footer { border-top: 1px solid #000; background: #fff; color: #000; padding: 0.5cm 0 0; }
  .site-footer .legal, .site-footer address { color: #000; }
  a { color: #000; }
  .hero { margin: 0 0 0.5cm; background: #fff; color: #000; }
  .hero::after, .hero__text::before { display: none; }
  .hero__img { position: static; max-height: 9cm; }
  .hero__body { min-height: 0; padding: 0.3cm 0 0; }
  .hero__eyebrow, .hero__sub, .hero__mission { color: #000; text-shadow: none; }
  .hero__text { text-shadow: none; }
  .card, .initiative-card, .event-card__link, .program-card__link, .impact-card, .support-card { box-shadow: none; break-inside: avoid; }
}

/* Banner at the top of Home and Our Story (templates/_hero.html).
   Phones: the photo stands on its own, whole and unshaded, and the words
   sit under it on deep water (the spec: text under photos on phones).
   From 768px: the words sit on the photo over the strong scrim. */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--space-7));
  margin-bottom: var(--space-7);
  color: var(--color-hero-text);
  background: var(--color-hero-deep);
  overflow: hidden;
}
.hero--water {
  background:
    repeating-linear-gradient(180deg, transparent 0 22px, var(--color-ripple) 22px 23px),
    radial-gradient(120% 80% at 80% 110%, var(--color-hero-shallow) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-hero-deep) 0%, var(--color-hero-mid) 100%);
}
.hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* A landscape photo loses only its sides; a typed page keeps its top. */
  object-position: center top;
}
.hero__text { position: relative; }
.hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}
.hero--water .hero__body { min-height: 22rem; padding-top: var(--space-8); }

@media (min-width: 768px) {
  .hero__img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: center;
  }
  .hero--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--color-scrim-soft) 0%, var(--color-scrim) 100%);
  }
  /* Behind the words themselves, wherever they start: full scrim from just
     above the first line to the bottom edge, fading in over --space-8. */
  .hero--photo .hero__text { text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
  .hero--photo .hero__text::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(-1 * var(--space-8)) -100vw calc(-1 * var(--space-7));
    background: linear-gradient(180deg, transparent 0, var(--color-scrim) var(--space-8));
  }
  .hero__body { min-height: 22rem; padding-top: var(--space-8); }
  .hero--photo .hero__body { min-height: min(78vh, 40rem); }
}

/* The small line over a hero title: the club's typed-history voice, in
   the serif italic rather than tracked capitals. */
.hero__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--color-hero-muted);
}
.hero__title {
  color: inherit;
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
  max-width: 16em;
}
.hero__sub { margin: 0; font-size: var(--text-lg); color: var(--color-hero-muted); max-width: 32em; }
.hero__mission {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-hero-text);
  max-width: 34em;
}

/* Small labels above a section ("Next event", "The short version", an
   era's years): serif italic in clubhouse wood, sentence case. */
.kicker {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-wood);
  margin-bottom: var(--space-3);
}
.edit-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.edit-link::before { content: "\270E\00a0"; }
.edit-link--on-dark { color: var(--color-hero-muted); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.button--on-dark { color: var(--color-hero-text); }

/* The card: one style for every public card (event, initiative, impact,
   the Support and Sponsors boxes). White on stone, a thin edge, small
   corners, a soft shadow. Photos on top at 3:2. A card with no photo gets
   a deep-water top edge instead of an empty banner. */
.card,
.initiative-card,
.home-event .event-card,
.event-card__link,
.program-card__link,
.impact-card,
.support-card,
.sponsor-talk,
.sponsorable-events a {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
}
a.initiative-card:hover,
.home-event a.event-card:hover,
.event-card__link:hover,
.program-card__link:hover,
.sponsorable-events a:hover { border-color: var(--color-link); }
.initiative-card img,
.event-card__photo,
.program-card__photo,
.impact-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-stone);
}
.initiative-card__title,
.event-card__title,
.program-card__title,
.impact-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  color: var(--color-text);
}
.initiative-card:hover .initiative-card__title,
.event-card__link:hover .event-card__title,
.home-event .event-card:hover .event-card__title,
.program-card__link:hover .program-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
/* The when line on every card: clubhouse wood, bold, small. */
.event-card__date,
.event-card__when,
.program-card__meta { color: var(--color-wood); font-weight: 700; font-size: var(--text-sm); line-height: 1.4; }
.event-card__summary, .initiative-card__summary, .program-card__summary { color: var(--color-text); }
.event-card--no-photo .event-card__link,
.event-card__link:not(:has(img)),
.program-card__link--no-photo,
.initiative-card:not(:has(img)),
.home-event .event-card:not(:has(img)) { border-top: 4px solid var(--color-pond); }

/* The pulled quote: the club's own words, large serif italic on a wood
   rule, with who said it underneath in the body face. */
.pull-quote,
.story blockquote,
.program-body blockquote,
.event-body blockquote,
.longevity__quote {
  margin: var(--space-6) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 4px solid var(--color-wood);
  background: none;
  box-shadow: none;
  max-width: var(--measure);
}
.pull-quote p:first-child,
.story blockquote p:first-child,
.program-body blockquote p:first-child,
.event-body blockquote p:first-child,
.longevity__quote p:first-child {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.pull-quote p:only-child,
.story blockquote p:only-child,
.program-body blockquote p:only-child,
.event-body blockquote p:only-child,
.longevity__quote p:only-child { margin-bottom: 0; }
.pull-quote p:last-child:not(:first-child),
.story blockquote p:last-child:not(:first-child),
.program-body blockquote p:last-child:not(:first-child),
.event-body blockquote p:last-child:not(:first-child) {
  margin: 0;
  font-family: var(--font-body);
  font-style: normal;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.pull-quote p:last-child:not(:first-child)::before,
.story blockquote p:last-child:not(:first-child)::before,
.program-body blockquote p:last-child:not(:first-child)::before,
.event-body blockquote p:last-child:not(:first-child)::before { content: "\2014\00a0"; }

/* The number strip: a few real figures, large, each on a short wood rule. */
.numbers__list {
  list-style: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}
@media (min-width: 768px) {
  .numbers__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.numbers__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 3px solid var(--color-wood);
}
.numbers__value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-pond);
}
.numbers__label { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.35; }
@media (prefers-color-scheme: dark) {
  .numbers__value { color: var(--color-link); }
}

/* Public forms: the honeypot field is off screen for people, visible to bots. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form { margin: var(--space-6) 0 var(--space-7); }
.contact-address { font-size: var(--text-lg); }
.page-text p, .page-text li { max-width: var(--measure); }