/* ==========================================================================
   Highland Rim Bicycle Club — custom theme
   Built on top of Bootstrap 5. Mobile-first.
   ========================================================================== */

:root {
  /* Anchor color: slate blue, the complement of the warm sepia/amber
     photo tones used in the Hero/CTA/News sections — replaces the
     original green. Variable names below stay as --hrbc-green /
     --hrbc-green-dark (and the .text-hrbc-green / .bg-hrbc-green utility
     classes stay too, since js/script.js references those class names
     directly) to avoid a much larger rename across every future page;
     only the color values themselves change. */
  --hrbc-green: #3f6a84;
  --hrbc-green-dark: #2c4a5e;
  --hrbc-amber: #e8871e;
  --hrbc-amber-dark: #c96f0f;
  --hrbc-slate: #2b3238;
  --hrbc-light: #f6f8f6;
  --hrbc-footer-gray: #e3e5e4;
  --bs-primary: #3f6a84;
  --bs-primary-rgb: 63, 106, 132;
}

body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--hrbc-slate);
  background-color: #ffffff;
}

h1, h2, h3, h4, h5, .navbar-brand {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}

a {
  color: var(--hrbc-green);
}
a:hover {
  color: var(--hrbc-green-dark);
}

/* ---------- Navbar ---------- */
.navbar-hrbc .nav-link {
  color: var(--hrbc-slate) !important;
  font-weight: 500;
}
.navbar-hrbc .nav-link:hover,
.navbar-hrbc .nav-link:focus {
  color: var(--hrbc-green-dark) !important;
}
.navbar-hrbc .dropdown-menu {
  border: none;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.navbar-hrbc .navbar-toggler {
  border-color: rgba(43,50,56,.35);
}

/* ---------- Hero ----------
   Background/color/padding now come from the .parallax-section system
   (see below) — this block only carries hero-specific typography. */
.hero h1 {
  font-size: 2.1rem;
}
@media (min-width: 768px) {
  .hero h1 {
    font-size: 3rem;
  }
}
.hero .lead {
  color: #e5f6ec;
}
.btn-amber {
  background-color: var(--hrbc-amber);
  border-color: var(--hrbc-amber);
  color: #fff;
  font-weight: 600;
}
.btn-amber:hover {
  background-color: var(--hrbc-amber-dark);
  border-color: var(--hrbc-amber-dark);
  color: #fff;
}
/* Custom outline button matching the site's slate-blue anchor color.
   Bootstrap's built-in .btn-outline-success is hardcoded to Bootstrap's
   own green regardless of our --bs-primary override, so it kept showing
   up green even after the palette switch — this replaces it everywhere
   a blue outline button is wanted. */
.btn-outline-hrbc {
  color: var(--hrbc-green);
  border-color: var(--hrbc-green);
}
.btn-outline-hrbc:hover,
.btn-outline-hrbc:focus {
  background-color: var(--hrbc-green);
  border-color: var(--hrbc-green);
  color: #fff;
}

/* Decorative "wheel" icon block used in place of photography */
.icon-tile {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: #fff;
  margin-bottom: .75rem;
}
.icon-tile.on-light {
  background-color: rgba(63,106,132,.1);
  color: var(--hrbc-green);
}

/* ---------- Section spacing ---------- */
.section {
  /* top/bottom only: a "padding: 3rem 0" shorthand zeroed the .container side
     gutters, so rows ran 12px off the edge on phones */
  padding-block: 3rem;
}
.section-alt {
  background-color: var(--hrbc-light);
}
.section-title {
  color: var(--hrbc-green-dark);
  margin-bottom: 1.5rem;
}

/* ---------- Long-form applications (membership form, review page) ---------- */
.form-legend {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--hrbc-green-dark);
  background-color: rgba(63,106,132,.12);
  border-left: 4px solid var(--hrbc-green);
  border-radius: .35rem;
  padding: .55rem .9rem;
  margin-bottom: 1.25rem;
  width: 100%;
}
/* Breathing room between the sections of the application */
#membership > fieldset { margin-bottom: 2.5rem !important; }
.waiver-box {
  max-height: 260px;
  overflow-y: auto;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .5rem;
  background-color: var(--hrbc-light);
  font-size: .9rem;
}
.waiver-box p {
  margin-bottom: .75rem;
}
.waiver-box p:last-child {
  margin-bottom: 0;
}

/* ---------- PHORM message box ----------
   PHORM (the contact-form backend) fills its {{showPhormMessages}}
   placeholder with a <p class="collapse ... li-err ..."> and reveals it
   by adding an "in" class -- the old Bootstrap 3/4 convention for
   un-hiding a .collapse element. Bootstrap 5 renamed that trigger class
   to "show", so ".collapse.in" means nothing to it and the message
   would stay display:none even though PHORM filled it in correctly.
   This override restores the old behavior without touching PHORM
   itself (which still needs to work as-is on Bootstrap-3 sites). */
.collapse.in {
  display: block !important;
}
.li-err {
  padding: .75rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid #f1aeb5;
  border-radius: .5rem;
  background-color: #f8d7da;
  color: #842029;
}

/* ---------- Cards ---------- */
.card-hrbc {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .6rem;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12);
  height: 100%;
}
.card-hrbc .card-title {
  color: var(--hrbc-green-dark);
}

.badge-alert {
  background-color: var(--hrbc-amber);
}

/* ---------- Officer / ride-partner people cards ---------- */
.people-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--hrbc-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Footer ----------
   Solid light gray now (no wood texture) so it reads as a clean, distinct
   band under the photo CTA section above it — dark photo, then a clear
   break into light gray, instead of two textured/dark areas blending
   together. Text colors flipped to dark since the background is light now. */
footer.site-footer {
  background-color: var(--hrbc-footer-gray);
  color: var(--hrbc-slate);
  padding: 2.5rem 0 1.5rem;
}
footer.site-footer a {
  color: var(--hrbc-green-dark);
}
footer.site-footer a:hover {
  color: var(--hrbc-green);
}
footer.site-footer h6 {
  color: var(--hrbc-slate);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .06em;
  margin-bottom: .9rem;
}
footer.site-footer hr {
  border-color: rgba(43,50,56,.15);
}
.footer-bottom {
  font-size: .85rem;
  color: #5b6368;
}

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  background-color: var(--hrbc-green-dark);
  color: #fff;
  padding: 2.25rem 0;
}
.page-header h1 {
  font-size: 1.9rem;
  margin-bottom: .25rem;
}
.page-header .breadcrumb {
  /* Was a mint-green tint left over from the original green theme;
     switched to a light slate-blue tint to match the current palette. */
  --bs-breadcrumb-divider-color: #9fb9c8;
  margin-bottom: 0;
}
.page-header .breadcrumb-item a { color: #cde0ea; }
.page-header .breadcrumb-item.active { color: #fff; }

/* ---------- Anchor / jump nav ---------- */
.jump-nav {
  background-color: var(--hrbc-light);
  border-radius: .5rem;
  padding: .9rem 1.1rem;
}
.jump-nav a {
  font-weight: 600;
}

/* ---------- Table styling for tool loan / dues ---------- */
.table-hrbc thead {
  background-color: var(--hrbc-green);
  color: #fff;
}

/* ---------- Alert banner (e.g. ERV cancellation) ---------- */
.alert-hrbc {
  background-color: #fdf0e2;
  border-left: 4px solid var(--hrbc-amber);
  color: #7a4a0c;
}

/* ---------- Utility ---------- */
.text-hrbc-green { color: var(--hrbc-green); }
.bg-hrbc-green { background-color: var(--hrbc-green); }
.rounded-hrbc { border-radius: .6rem; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 2000;
  background: #fff;
  padding: .5rem 1rem;
  border-radius: .3rem;
}

/* ==========================================================================
   Scroll-fade parallax system (index.html only)
   Each .parallax-section owns a fixed/cover background image layer
   (.parallax-bg) plus a color overlay for legibility. An IntersectionObserver
   in js/script.js toggles ".in-view" on both the section and any ".fade-in"
   elements inside it, which drives the actual fade in CSS below. This keeps
   the effect GPU-friendly (opacity/transform only) instead of recalculating
   on every scroll tick.
   ========================================================================== */

.parallax-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.hero.parallax-section {
  padding: 4.5rem 0 4rem;
}

.parallax-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s ease, transform 1.8s ease;
  z-index: 0;
}
/* The CTA section is much wider than it is tall on desktop (a typical
   full-width band), while the source photo is a normal 3:2 shot — so on a
   wide screen the "contain"-fit photo ends up fairly small in the middle
   with a lot of blurred backdrop on either side. Giving the section extra
   vertical padding (beyond the standard .section 3rem) makes it less
   extremely wide-relative-to-tall, which lets the contain-fit photo render
   noticeably larger before it runs out of width to grow into — more photo,
   less backdrop, with no change needed to the image itself. */
.cta-section {
  padding: 5rem 0;
}
@media (min-width: 768px) {
  .cta-section {
    padding: 7.5rem 0;
  }
}

.parallax-section.in-view .parallax-bg {
  opacity: 1;
  transform: scale(1);
}

.parallax-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(44,74,94,.88) 0%, rgba(63,106,132,.72) 55%, rgba(44,74,94,.88) 100%);
}
.parallax-overlay.overlay-light {
  background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(246,248,246,.9) 100%);
}
.parallax-overlay.overlay-dark {
  background: linear-gradient(135deg, rgba(20,24,20,.82) 0%, rgba(20,24,20,.6) 60%, rgba(20,24,20,.85) 100%);
}
/* The hero's and the "You're Invited" band's black-and-white
   photos read a little murky under the full dark overlay, so both get a
   lighter one (Oct 4, 2026). The text keeps a soft shadow so it stays
   easy to read on bright photos. */
.hero .parallax-overlay.overlay-dark,
.cta-section .parallax-overlay.overlay-dark {
  background: linear-gradient(135deg, rgba(20,24,20,.68) 0%, rgba(20,24,20,.44) 60%, rgba(20,24,20,.7) 100%);
}
.hero h1, .hero .lead,
.cta-section .section-title, .cta-section p { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
/* The "You're Invited" band's heading and paragraph (light text on the photo). */
.cta-section .section-title { color: #fff; }
.cta-section .cta-lead { max-width: 40rem; color: #e5e9e6; }

.parallax-content {
  position: relative;
  z-index: 2;
}

/* Fade-in elements: headings, lead text, cards — anything tagged .fade-in */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
}
.in-view .fade-in,
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children slightly for a more dramatic reveal. Two selector forms
   are needed: ".in-view .fade-in.delay-*" covers a .fade-in nested inside a
   .parallax-section (which is what gets "in-view" toggled on it), while
   ".fade-in.in-view.delay-*" covers a .fade-in with no parallax-section
   ancestor, which is observed and toggled directly on itself. */
.in-view .fade-in.delay-1,
.fade-in.in-view.delay-1 { transition-delay: .12s; }
.in-view .fade-in.delay-2,
.fade-in.in-view.delay-2 { transition-delay: .24s; }
.in-view .fade-in.delay-3,
.fade-in.in-view.delay-3 { transition-delay: .36s; }

/* On light-overlay sections, headings/body need dark text instead of white */
.parallax-section.on-light,
.parallax-section.on-light .text-muted {
  color: var(--hrbc-slate);
}
.parallax-section.on-light .section-title {
  color: var(--hrbc-green-dark);
}

/* Mobile Safari/older browsers choke on background-attachment:fixed —
   fall back to normal scroll attachment below tablet width. */
@media (max-width: 991.98px) {
  .parallax-bg {
    background-attachment: scroll;
  }
}

/* Hero on desktop: show the MIDDLE of the photo, same as phones, so one
   rule covers every background photo ("keep the subject in the middle
   third"). The fixed attachment above would size the photo to the whole
   screen and show only its upper-middle behind the hero. Instead the hero
   covers just its own band, and a scroll-driven drift (browsers that
   support it) keeps the gentle parallax feel as the page scrolls away. */
@media (min-width: 992px) {
  .hero .parallax-bg { background-attachment: scroll; }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero .parallax-bg {
        animation: hrbc-hero-drift linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 400px;
      }
    }
  }
}
@keyframes hrbc-hero-drift {
  from { background-position: center 50%; }
  to   { background-position: center 25%; }
}

/* Respect reduced-motion preference: show everything immediately, no motion. */
@media (prefers-reduced-motion: reduce) {
  .parallax-bg,
  .fade-in {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Nav treatment: solid light gray, matching the footer's --hrbc-footer-gray,
   for a clean, simple bar instead of the wood-plank texture. Text/link
   colors switch to dark-on-light (see .navbar-hrbc .nav-link above) and the
   logo reverts to its original coloring (dark "BICYCLE CLUB" text), since
   the previously white-recolored version was made specifically for the
   dark wood background and would disappear here.

   The nav is deliberately kept "quiet" — a thin brand-green edge and a
   subtle shadow give it just enough definition to separate it from the
   Hero below, without competing with it for attention. The logo is sized
   down from its original 92px so it reads as a wordmark, not a headline. */
.navbar-hrbc {
  position: relative;
  background-color: var(--hrbc-footer-gray);
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  border-bottom: 3px solid var(--hrbc-green);
}
.navbar-hrbc .navbar-brand img {
  height: 60px;
  width: auto;
  display: block;
}
.navbar-hrbc {
  padding-top: .25rem;
  padding-bottom: .25rem;
}
/* Quiet hover/focus indicator on nav links: a thin amber underline that
   slides in, echoing the amber buttons/badges elsewhere on the site
   instead of introducing a new accent color just for the nav. */
.navbar-hrbc .nav-link {
  position: relative;
  padding-bottom: .35rem !important;
}
.navbar-hrbc .nav-link::after {
  content: '';
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: -2px;
  height: 2px;
  background: var(--hrbc-amber);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.navbar-hrbc .nav-link:hover::after,
.navbar-hrbc .nav-link:focus::after {
  transform: scaleX(1);
}

/* ---------- Today's calendar box (index.html) ---------- */
.today-card {
  max-width: 720px;
  padding: 1.75rem;
}
@media (min-width: 768px) {
  .today-card {
    padding: 2.5rem;
  }
}
.today-card-frame-wrap {
  border: 1px solid rgba(63,106,132,.15);
  border-radius: .5rem;
  overflow: hidden;
  background-color: var(--hrbc-light);
}
.today-card-frame {
  display: block;
  width: 100%;
  height: 260px;
}

/* ---------- Upcoming rides carousel (index.html) ---------- */
.rides-carousel-wrap {
  position: relative;
  /* Arrows sit on the left and right edges of the card row (see
     .rides-carousel-nav), so no extra room is needed below. */
  padding: 0;
}

.rides-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Room on every side for the cards' soft shadow; the negative margin
     keeps the cards lined up with the heading. (With only a sliver of
     padding the scroller clipped the shadow into a hard grey slab.) */
  padding: .75rem .75rem 1.75rem;
  margin: -.75rem -.75rem 0;
  /* Snap cards to the padded edge, so "the first card" means scrollLeft 0.
     (Without this the first card snapped 12px in, and the back arrow
     thought you'd already scrolled.) */
  scroll-padding-inline: .75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--hrbc-green) var(--hrbc-light);
  /* Center the ride cards when they don't fill the row (e.g. only one
     or two events); "safe" keeps them scrollable/reachable from the
     start if there are ever enough cards to overflow. The plain
     "center" line is a fallback for browsers that don't understand
     the safe/unsafe keywords — they'll just ignore the second rule. */
  justify-content: center;
  justify-content: safe center;
}
.rides-carousel::-webkit-scrollbar {
  height: 8px;
}
.rides-carousel::-webkit-scrollbar-track {
  background: var(--hrbc-light);
  border-radius: 4px;
}
.rides-carousel::-webkit-scrollbar-thumb {
  background-color: var(--hrbc-green);
  border-radius: 4px;
}

.ride-card {
  /* About a third of the row (a touch wider than a Latest News card), so
     roughly 2.7 cards show at once. The partly visible card hints there's
     more to scroll, and the ride cards don't stack in lockstep with the
     three news cards below ("rows of corn"). Never narrower than 300px,
     never wider than 480px, and never wider than a phone screen. */
  flex: 0 0 min(clamp(300px, 36%, 480px), 88vw);
  scroll-snap-align: start;
}

/* Fixed-height card with a scrollable body: the title/time/location stay
   put at the top, and only the (potentially long) description scrolls,
   so every card in the row lines up the same height no matter how much
   detail an individual ride's description has. */
.ride-card-inner {
  display: flex;
  flex-direction: column;
  height: 205px;
  padding: 1rem;
  /* Anchor point for the bottom-edge "more below" hint. */
  position: relative;
  /* card-hrbc normally relies on a soft shadow alone (border: none), but
     that reads as almost invisible against this section's white
     background — a visible border keeps each card from blending in. */
  border: 2px solid var(--hrbc-green);
}
.ride-card-header {
  flex: 0 0 auto;
}
.ride-card-body {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-top: .35rem;
  padding-right: .35rem;
  padding-bottom: .25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--hrbc-green) var(--hrbc-light);
}
.ride-card-body::-webkit-scrollbar {
  width: 6px;
}
.ride-card-body::-webkit-scrollbar-track {
  background: var(--hrbc-light);
  border-radius: 4px;
}
.ride-card-body::-webkit-scrollbar-thumb {
  background-color: var(--hrbc-green);
  border-radius: 4px;
}
.ride-card-desc {
  /* Respect the description's own line breaks instead of collapsing them
     into one run-on paragraph, while still wrapping long lines normally. */
  white-space: pre-line;
  word-break: break-word;
}
.ride-card-link {
  color: var(--hrbc-green-dark);
  text-decoration: underline;
  word-break: break-all;
}
.ride-card-link:hover {
  color: var(--hrbc-green);
}

/* The location line, made clickable through to Google Maps — keep it
   looking like plain text (not obviously a link) until hovered, since
   it's paired with its own map-pin icon. */
.ride-card-location-link {
  color: inherit;
  text-decoration: none;
}
.ride-card-location-link:hover {
  color: var(--hrbc-green-dark);
  text-decoration: underline;
}

/* "More below" scroll hint: a soft fade plus a small chevron over the
   bottom edge of a card's description, shown only via JS (setupRideCard
   ScrollHints in script.js) when that card's content actually overflows
   and hasn't been scrolled to the bottom yet. Safari — and any browser
   set to auto-hide scrollbars — gives no other visual sign that a box is
   scrollable, so this is the cue that there's more to see. */
.ride-card-more {
  position: absolute;
  left: 1rem;
  right: 1.35rem;
  bottom: 1rem;
  height: 1.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%);
  color: var(--hrbc-green);
  font-size: .8rem;
  opacity: 0;
  transition: opacity .15s ease;
}
.ride-card-more.is-visible {
  opacity: 1;
}

.rides-carousel-status {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  text-align: center;
  color: var(--hrbc-slate);
}

/* Arrow pair, docked bottom-right of the carousel section rather than
   straddling its left/right edges. */
.rides-carousel-nav {
  /* A full-size overlay that lets clicks through, with one small arrow
     docked on each side, vertically centered on the cards. */
  position: absolute;
  top: 0; right: 0; bottom: 1.75rem; left: 0;   /* match the carousel's bottom padding */
  pointer-events: none;
}
.rides-carousel-nav .rides-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}
/* Hang the arrows just outside the cards, but never further than the
   page's side margin allows (100% here is the card row's width). */
#rides-arrow-left  { left:  calc(-1 * min(2.1rem, (100vw - 100%) / 2 - .35rem)); }
#rides-arrow-right { right: calc(-1 * min(2.1rem, (100vw - 100%) / 2 - .35rem)); }

.rides-carousel-arrow {
  z-index: 5;
  background-color: var(--hrbc-green);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 .25rem .6rem rgba(0,0,0,.18);
  transition: background-color .15s ease, opacity .15s ease;
}
.rides-carousel-arrow:hover {
  background-color: var(--hrbc-green-dark);
}
.rides-carousel-arrow:disabled {
  opacity: .35;
  cursor: default;
  background-color: var(--hrbc-slate);
}

/* ---- Membership type chooser (membership-application.html) ---- */
.membership-choice {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  height: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid rgba(0,0,0,.15);
  border-radius: .6rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.membership-choice:hover { border-color: var(--hrbc-green); }
.membership-choice-title { font-weight: 600; font-size: 1.1rem; color: var(--hrbc-green-dark); }
.membership-choice-price { font-size: 1.6rem; font-weight: 700; color: var(--hrbc-green); }
.membership-choice-price small { font-size: .85rem; font-weight: 400; color: #6c757d; }
.membership-choice-desc { font-size: .9rem; color: #495057; }
.btn-check:checked + .membership-choice {
  border-color: var(--hrbc-green);
  background-color: rgba(63,106,132,.10);
  box-shadow: 0 0 0 .2rem rgba(63,106,132,.25);
}
.membership-choice { position: relative; padding-right: 3.25rem; }
.membership-choice-radio {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid #6c757d;
  border-radius: 50%;
  background: #fff;
}
.btn-check:checked + .membership-choice .membership-choice-radio {
  border-color: var(--hrbc-green);
  background: radial-gradient(circle, var(--hrbc-green) 0 50%, #fff 55%);
}
.needs-choice .membership-choice-radio { border-color: #dc3545; }

/* Per-person waiver question */
.waiver-question {
  padding: .85rem 1.1rem;
  border: 1px solid #e6cf8a;
  border-radius: .5rem;
  background-color: #fffbee;
}
.waiver-question-text { font-weight: 600; font-size: 1.05rem; color: #4a3b10; }
.waiver-question .form-check-input { width: 1.35em; height: 1.35em; margin-top: 0; border-width: 2px; }
.waiver-question .form-check-label { font-size: 1rem; margin-left: .25rem; }
/* A "No" answer: a friendly note, not a red alarm. */
.waiver-no-msg {
  padding: .5rem .75rem;
  border-left: 3px solid #c98a1b;
  background: #fff4d6;
  border-radius: .25rem;
  color: #5a4210;
}
/* "Read the waiver first" nudge, shown when Yes is clicked too early */
.waiver-read-nudge { color: #5a4210; font-weight: 600; }
/* Under the waiver: "please read to the end" -> "Thanks for reading" */
.waiver-box:focus-visible { outline: 3px solid var(--hrbc-green); outline-offset: 2px; }
.waiver-end { height: 1px; }
.waiver-read-status { margin: -.25rem 0 .75rem; color: #6b5a2a; font-weight: 600; }
.waiver-read-status.is-read { color: #2f6b3a; }
.btn-check:focus-visible + .membership-choice {
  outline: 3px solid var(--hrbc-green-dark);
  outline-offset: 2px;
}
.needs-choice .membership-choice {
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.25);
}
.rider-block[hidden] { display: none !important; }

/* Bootstrap's g-5 rows pull 1.5rem past a container that only pads .75rem,
   so they ran off the edge on phones. Columns stack there anyway; use the
   normal gutter until the large breakpoint. */
@media (max-width: 991.98px) {
  .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* Contact page: "Reach a Club Officer" list with a little rural mailbox.
   Flag is down (grey) until the link is clicked or that officer is chosen,
   then it swings up and turns red: outgoing mail! */
.officer-list li + li { margin-top: .3rem; }
.officer-general { display: inline-block; margin-top: .5rem; }   /* not a d-* class, so [hidden] still wins */
.officer-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--hrbc-green-dark);
  text-decoration: none;
}
.officer-link span { border-bottom: 1px solid transparent; }
.officer-link:hover span,
.officer-link:focus-visible span { border-bottom-color: currentColor; }
.officer-link.is-selected { font-weight: 600; }

.mailbox { width: 1.9rem; height: 1.9rem; flex: none; overflow: visible; }
.mailbox .mbx-body { fill: rgba(63,106,132,.12); stroke: var(--hrbc-green-dark); stroke-width: 1.6; stroke-linejoin: round; }
.mailbox .mbx-door { fill: none; stroke: var(--hrbc-green-dark); stroke-width: 1.2; opacity: .6; }
.mailbox .mbx-post { fill: var(--hrbc-green-dark); }
.mailbox .mbx-pivot { fill: var(--hrbc-green-dark); }
.mailbox .mbx-flag {
  fill: #9aa5ad;
  transform-box: view-box;
  transform-origin: 23px 15px;
  transform: rotate(-90deg);             /* flag down, lying along the box */
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), fill .2s ease;
}
.officer-link:hover .mbx-flag,
.officer-link:focus-visible .mbx-flag { transform: rotate(-60deg); }  /* a little tease */
.officer-link.is-selected .mbx-flag {
  transform: rotate(0deg);               /* flag up */
  fill: #d32f2f;
}
@media (prefers-reduced-motion: reduce) {
  .mailbox .mbx-flag { transition: none; }
}

/* Character countdown under limited textareas (contact form message) */
.char-count { text-align: right; font-variant-numeric: tabular-nums; }
.char-count.is-low { color: #8a5a00; }
.char-count.is-over { color: #b02a37; font-weight: 600; }

/* Tullahoma Re-Cycle photo carousel. Photos keep their own shape
   (contain, never cropped) on a dark slate stage, so no one loses their head. */
.recycle-carousel {
  max-width: 820px;
  border-radius: .6rem;
  overflow: hidden;
  background-color: var(--hrbc-green-dark);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.18);
}
.recycle-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.recycle-carousel .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; }
.recycle-carousel .carousel-control-prev-icon,
.recycle-carousel .carousel-control-next-icon { filter: drop-shadow(0 0 3px rgba(0,0,0,.7)); }
.recycle-carousel .carousel-indicators [data-bs-target] { box-shadow: 0 0 3px rgba(0,0,0,.6); }

/* ---------- Latest News cards (index.html + news.html) ----------
   Filled in by loadLatestNews() in js/script.js from the club's Google
   Sheet. The optional image sits on a light band and is "contained," not
   cropped, so both small icons (pdf.png) and full photos look right. The
   footer row (posted date + link) is pushed to the bottom of each card so
   a row of cards lines up no matter how long each summary runs. */
.news-card {
  overflow: hidden;
}
.news-card-img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  padding: .75rem;
  background-color: var(--hrbc-light);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.news-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.5rem;
}
.news-card-summary {
  /* Keep the editor's own line breaks from the sheet cell. */
  white-space: pre-line;
  word-break: break-word;
}
.news-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.news-card-link {
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.news-card-link:hover {
  text-decoration: underline;
}
.news-card:hover {
  box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.2);
}
.news-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  text-align: center;
}

/* =====================================================================
   Latest News as a club bulletin (index.html dark band, news.html light)
   ===================================================================== */
.bulletin { --b-text:#fff; --b-soft:rgba(255,255,255,.88); --b-muted:rgba(255,255,255,.65);
  --b-rule:rgba(255,255,255,.25); --b-accent:#f0c27a; --b-stamp:rgba(255,255,255,.7); color:var(--b-text); }
.bulletin.on-light { --b-text:var(--hrbc-green-dark); --b-soft:#3d4750; --b-muted:#6c757d;
  --b-rule:rgba(0,0,0,.12); --b-accent:#a35f00; --b-stamp:var(--hrbc-green); }
.bulletin-kicker { display:block; text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; color:var(--b-accent); }
.bulletin-kicker.small { font-size:.68rem; margin-bottom:.15rem; }
.bulletin-pin { margin-right:.35em; }
.bulletin-lead h3 { font-size:2rem; font-weight:700; line-height:1.15; margin:.35rem 0 .75rem; text-wrap:balance; color:var(--b-text); }
.bulletin p { color:var(--b-soft); white-space:pre-line; word-break:break-word; margin:0; }
.bulletin-scroll { line-height:1.5; max-height:9em; overflow-y:auto; padding-right:.5rem;
  scrollbar-width:thin; scrollbar-color:var(--b-muted) transparent; }
.bulletin-scroll.has-more { -webkit-mask-image:linear-gradient(#000 calc(100% - 2.25em), transparent);
  mask-image:linear-gradient(#000 calc(100% - 2.25em), transparent); }
.bulletin-foot { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; margin-top:.9rem; }
.bulletin-meta { font-size:.85rem; color:var(--b-muted); }
.bulletin a.read { color:var(--b-text); font-weight:600; text-decoration:none; border-bottom:2px solid var(--b-accent); }
.bulletin a.read:hover, .bulletin a.read:focus-visible { border-bottom-color:currentColor; }
.bulletin-thumb { float:right; width:96px; height:96px; object-fit:contain; margin:0 0 .75rem 1rem;
  padding:.5rem; background:#fff; border-radius:.5rem; box-shadow:0 .25rem .75rem rgba(0,0,0,.2); }
.bulletin-list { border-left:1px solid var(--b-rule); padding-left:1.75rem; }
.bulletin-item { display:flex; gap:1rem; padding:1rem 0; }
.bulletin-item:first-child { padding-top:0; }
.bulletin-item + .bulletin-item { border-top:1px solid var(--b-rule); }
.bulletin-item-text { min-width:0; flex:1; }
.bulletin-item h4 { font-size:1.1rem; font-weight:700; margin:0 0 .3rem; color:var(--b-text); }
.bulletin-item .bulletin-scroll { max-height:4.5em; font-size:.92rem; margin-bottom:.35rem; }
.datestamp { flex:none; align-self:flex-start; width:3.6rem; text-align:center; border:2px solid var(--b-stamp);
  border-radius:.4rem; line-height:1; padding:.35rem 0 .45rem; color:var(--b-text); }
.datestamp .m { display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--b-accent); font-weight:700; }
.datestamp .d { display:block; font-size:1.6rem; font-weight:700; margin-top:.15rem; }
.datestamp-blank { padding:.7rem 0; font-size:1.3rem; }
.bulletin-solo { max-width:46rem; margin:0 auto; text-align:center; }
.bulletin-solo .bulletin-scroll { text-align:left; }
.bulletin-solo .bulletin-foot { justify-content:center; }
.bulletin-solo .bulletin-thumb { float:none; display:block; margin:0 auto 1rem; }
.bulletin-empty { text-align:center; max-width:36rem; margin:0 auto; }
.bulletin-empty i { font-size:2.4rem; color:var(--b-accent); }
.bulletin-empty p { font-size:1.1rem; margin:.5rem 0 1.25rem; }
/* News page: lead on top, then everything else as one readable column */
.bulletin-page-lead { padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid var(--b-rule); }
.bulletin-list.bulletin-list-page { border-left:0; padding-left:0; }
.bulletin-list-page .bulletin-item .bulletin-scroll { max-height:9em; }
@media (max-width: 991.98px) {
  .bulletin-list { border-left:0; padding-left:0; margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--b-rule); }
  .bulletin-list.bulletin-list-page { margin-top:0; padding-top:0; border-top:0; }
}

/* =====================================================================
   Get Involved: four stops along a paved road (index.html)
   The road is one SVG stretched across the row; vector-effect keeps the
   stroke widths (asphalt, edge lines, center stripe) from stretching.
   ===================================================================== */
.route { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:2.5rem; }
.route-road { position:absolute; left:0; right:0; top:-1.1rem; height:6.2rem; width:100%; pointer-events:none; }
.route-road-v { display:none; }
.stop { position:relative; text-align:center; text-decoration:none; color:inherit; }
.stop-marker { width:4rem; height:4rem; margin:0 auto 1rem; border-radius:50%; background:#fff;
  border:3px solid var(--hrbc-green-dark); display:grid; place-items:center; font-size:1.6rem;
  color:var(--hrbc-green-dark); position:relative; z-index:1; box-shadow:0 .25rem .6rem rgba(0,0,0,.25);
  transition:transform .2s ease, background-color .2s ease, color .2s ease; }
.stop:hover .stop-marker, .stop:focus-visible .stop-marker { transform:translateY(-4px); background:var(--hrbc-green); color:#fff; }
.stop h3 { font-size:1.15rem; font-weight:700; color:var(--hrbc-green-dark); margin-bottom:.35rem; }
.stop p { color:#5b6670; font-size:.92rem; max-width:16rem; margin:0 auto .5rem; }
.stop .go { font-weight:600; font-size:.9rem; color:var(--hrbc-green); }
.stop:hover h3, .stop:focus-visible h3 { text-decoration:underline; }
.route-start { position:absolute; width:2.9rem; height:3.1rem; top:-1.4rem; z-index:2; pointer-events:none; overflow:visible;
  left:calc(.1rem - var(--start-room, 0px)); }   /* the sandwich board, in the room kept at the road's start */
@media (max-width: 767.98px) {
  .route { grid-template-columns:1fr; gap:2rem; }
  .route-road { display:none; }
  .route-road-v { display:block; position:absolute; left:1.15rem; top:.5rem; bottom:.5rem; width:1.7rem; border-radius:.85rem;
    background:linear-gradient(90deg,#fff 0 2px,#4b5157 2px calc(100% - 2px),#fff calc(100% - 2px)),#4b5157; }
  .route-road-v::after { content:""; position:absolute; left:50%; top:.6rem; bottom:.6rem; width:2px; margin-left:-1px;
    background:repeating-linear-gradient(#f2c230 0 10px, transparent 10px 18px); }
  .stop { display:grid; grid-template-columns:4rem 1fr; gap:0 1rem; text-align:left; }
  .stop-marker { grid-row:span 3; margin:0; }
  .stop p { margin:0 0 .25rem; max-width:none; }
  .route-start { left:.55rem; top:-3.2rem; }   /* above the first stop, at the top of the road */
}
@media (prefers-reduced-motion: reduce) { .stop-marker { transition:none; } }

/* Ride cards: a softer, tighter shadow than the general card style */
.ride-card-inner { box-shadow: 0 .35rem .9rem rgba(0,0,0,.12); }

/* ---------- Page rhythm (index.html) ---------- */
.section-tight { padding-block: 2.5rem 3.25rem; }

/* Elevation-profile edge on the top of the "You're Invited" band, traced from the
   ERV 100 route profile. The SVG is filled with the color of the section
   above, so the band's top edge reads as a real ridge line. */
.hill-edge { position: absolute; left: 0; top: -1px; width: 100%; height: 5.5rem; z-index: 2; pointer-events: none; }
.hill-edge path { fill: #fff; }
.hill-edge.edge-light path { fill: var(--hrbc-light); }
@media (max-width: 767.98px) {
  .hill-edge { height: 3rem; }
}
.cta-section.has-hill-edge { padding-top: calc(5rem + 3rem); }
@media (min-width: 768px) { .cta-section.has-hill-edge { padding-top: calc(7.5rem + 3rem); } }

/* Easter egg: a broken-down bike on the road's shoulder (index.html) */
.road-egg { position:absolute; left:calc(var(--start-room, 0px) + (100% - var(--start-room, 0px) - var(--finish-room, 0px)) * .75 - 2rem); top:-2.75rem; width:4rem; z-index:2; line-height:0;
  border-radius:.4rem; opacity:.9; transition:opacity .2s ease, transform .2s ease; }
.road-egg svg { width:100%; height:auto; overflow:visible; }
.road-egg:hover, .road-egg:focus-visible { opacity:1; transform:translateY(-2px); }
.road-egg .egg-wrench { transform-box:fill-box; transform-origin:15% 85%; }
.road-egg:hover .egg-wrench, .road-egg:focus-visible .egg-wrench { animation:egg-wiggle .6s ease-in-out 2; }
@keyframes egg-wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-18deg)} 75%{transform:rotate(14deg)} }
@media (max-width: 767.98px) {
  /* Phones: no flat-tire bike (below the finish arch it looked like a crash at the finish). */
  .road-egg { display:none; }
}
@media (prefers-reduced-motion: reduce) { .road-egg:hover .egg-wrench { animation:none; } }

/* Section heights: shorter Upcoming Rides, roomier Latest News */
.rides-section { padding-block: 2.25rem 1.5rem; }
.news-section { padding-block: 4.5rem 5rem; }
/* Phones swipe the ride cards; no side margin for arrows there */
@media (max-width: 575.98px) { .rides-carousel-nav { display: none; } }

/* The little cyclist that rides the Get Involved road (placed by script.js) */
.road-rider { position:absolute; left:0; top:0; width:2.9rem; z-index:0; pointer-events:none;
  transform-origin:0 0; will-change:transform; }
.road-rider svg { display:block; width:100%; height:auto; overflow:visible; transform-origin:50% 100%; }
.road-rider.is-riding svg { animation:rider-bob .35s ease-in-out infinite alternate; }
.road-rider .rider-legs { transform-box:fill-box; transform-origin:30% 0; }
.road-rider.is-riding .rider-legs { animation:rider-pedal .35s ease-in-out infinite alternate; }
@keyframes rider-bob { from { transform:translateY(0); } to { transform:translateY(-1px); } }
@keyframes rider-pedal { from { transform:rotate(-10deg); } to { transform:rotate(12deg); } }
.route .road-rider { transform-origin:50% 100%; }

/* Soft focus: as a section scrolls away under the menu bar its content
   blurs and fades a little, like a camera racking focus to what's next.
   Uses scroll-driven animations; browsers without them simply skip it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The timeline is named on the section and read by its content: the
       photo bands clip their overflow, which would otherwise make each one
       its own (non-scrolling) scroll box for an anonymous view(). */
    main > section { view-timeline: --hrbc-section block; }
    /* Timed by how much of the section is still on screen: the blur only
       starts once less than about half a screen of it is left (or its
       last 75% for short sections), so a tall section on a narrow screen
       never blurs content that's still in front of you. ("exit" alone
       starts as soon as a tall section's bottom edge begins moving up.) */
    main > section > .container {
      animation: hrbc-soft-exit linear both;
      animation-timeline: --hrbc-section;
      animation-range: exit-crossing max(25%, 100% - 45vh) exit-crossing 100%;
    }
    /* A page's last section never fully scrolls away (the footer is below
       it), so it never gets the soft focus at all. */
    main > section:last-of-type > .container { animation: none; }
    @keyframes hrbc-soft-exit {
      from { filter: blur(0); opacity: 1; }
      to   { filter: blur(4px); opacity: .25; }
    }
  }
}
/* No ride cards (loading, none this week, or an error)? No arrows. */
.rides-carousel:not(:has(.ride-card)) + .rides-carousel-nav { display: none; }

/* Section seams: a thin band in the menu bar's slate-blue at the top and
   bottom of each home page section (2px each, so a 4px seam where two
   meet). They ride the same scroll timeline as the soft focus: a section's
   bottom band blurs as it scrolls away, and the next section's top band
   arrives soft and sharpens, so the edge itself goes out of focus. */
.home-sections > section { position: relative; }
.home-sections > section::before,
.home-sections > section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hrbc-green);
  z-index: 3;
  pointer-events: none;
}
.home-sections > section::before { top: 0; }
.home-sections > section::after  { bottom: 0; }
.home-sections > section:first-child::before { display: none; }  /* the menu bar already has one */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-sections > section::after {
      animation: hrbc-seam-out linear both;
      animation-timeline: --hrbc-section;
      animation-range: exit 0% exit 100%;
    }
    .home-sections > section::before {
      animation: hrbc-seam-in linear both;
      animation-timeline: --hrbc-section;
      animation-range: entry 0% entry 70%;
    }
    @keyframes hrbc-seam-out {
      from { filter: blur(0); opacity: 1; transform: scaleY(1); }
      to   { filter: blur(6px); opacity: .3; transform: scaleY(3.5); }
    }
    @keyframes hrbc-seam-in {
      from { filter: blur(5px); opacity: .35; transform: scaleY(3); }
      to   { filter: blur(0); opacity: 1; transform: scaleY(1); }
    }
  }
}

/* Rider poses after the finish: sit up, drink, cheer (set by script.js) */
.road-rider .pose { opacity: 0; transition: opacity .22s ease; }
.road-rider .pose-ride { opacity: 1; }
.road-rider.pose-is-up .pose-ride,
.road-rider.pose-is-drink .pose-ride,
.road-rider.pose-is-cheer .pose-ride { opacity: 0; }
.road-rider.pose-is-up .pose-up,
.road-rider.pose-is-drink .pose-drink,
.road-rider.pose-is-cheer .pose-cheer { opacity: 1; }
.road-rider .rider-bottle-frame { transition: opacity .22s ease; }
.road-rider.pose-is-drink .rider-bottle-frame { opacity: 0; }
.road-rider .rider-head.tipped { transform-box: fill-box; transform-origin: 40% 95%; transform: rotate(-24deg); }
.road-rider.pose-is-cheer .pose-cheer { animation: rider-cheer-hop .45s ease-in-out 3 alternate; }
.road-rider .shout-lines { opacity: 0; }
.road-rider.pose-is-cheer .shout-lines { animation: rider-shout-lines .5s ease-in-out infinite alternate; }
@keyframes rider-cheer-hop { from { transform: translateY(0); } to { transform: translateY(-.6px); } }
@keyframes rider-shout-lines { from { opacity: .3; } to { opacity: 1; } }
.road-rider .rider-shout {
  position: absolute; left: 62%; top: -1.55rem; white-space: nowrap;
  font: 700 .62rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em;
  color: #c0392b; background: #fff; border: 1.5px solid #c0392b; border-radius: .6rem .6rem .6rem .1rem;
  padding: .18rem .38rem; box-shadow: 0 .15rem .35rem rgba(0,0,0,.18);
  opacity: 0; transform: scale(.4); transform-origin: 0 100%;
  transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.road-rider.pose-is-cheer .rider-shout { opacity: 1; transform: scale(1); }

/* Upcoming Rides: soft edges. script.js sets --fade-l / --fade-r (and the
   .fade-start / .fade-end classes): a full fade where a card is cut off, a
   narrow one where only a card's shadow would be clipped, none otherwise. */
.rides-carousel { --fade-l: 0px; --fade-r: 0px; }
.rides-carousel.fade-start, .rides-carousel.fade-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}

/* =====================================================================
   News board (news.html): paper notes nailed and pinned to a barn-wood
   wall. js/script.js renderNewsBoard() builds each note and sets its
   --tilt, --nudge-x/-y, --tack-x, --stamp-tilt and --photo-tilt.
   ===================================================================== */
.news-board-section {
  position: relative;
  padding-block: 3rem 4.5rem;
  /* The barn-wood photo repeats at 520px wide; past a 1280px screen the
     boards widen along with the screen (up to 1000px per tile), so a wide
     screen shows wider planks instead of more of them. */
  background: #5f5f5a url("../images/news-board.jpg") repeat center top / clamp(520px, 40.625vw, 1000px) auto;
  /* Shade the wall a touch at the top and bottom, like it's under an eave. */
  box-shadow: inset 0 18px 24px -14px rgba(0,0,0,.55), inset 0 -18px 24px -14px rgba(0,0,0,.45);
}
.news-board {
  --ink: #2a2a28;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr));
  /* Short rows + script.js packNewsBoard() = masonry. The space between
     notes vertically is each note's bottom margin. */
  grid-auto-rows: 8px;
  column-gap: 2.25rem;
  align-items: start;
  padding: .5rem .25rem 1rem;
}
.news-board > .col-12, .news-board > .news-status { grid-column: 1 / -1; grid-row: auto / span 30; }
.news-board .news-status { color: #f1f1ec; min-height: 220px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.news-board .news-status .btn { text-shadow: none; }

/* The wrapper carries the tilt (its own stacking layer), so the curl
   shadows below can sit BEHIND the paper. */
.note-wrap {
  position: relative;
  z-index: 0;
  width: var(--note-w, 100%);
  margin-bottom: 2.75rem;
  transform: translate(var(--nudge-x, 0), var(--nudge-y, 0)) rotate(var(--tilt, 0deg));
  transition: transform .25s ease;
}
.note {
  position: relative;
  padding: 1.6rem 1.25rem 1.25rem;
  color: var(--ink);
  background-color: #fbfaf5;
  /* A gentle sag: paper catches a little light at the top, shades lower. */
  background-image: linear-gradient(170deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.05) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.18);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 1.05rem;
  line-height: 1.5;
}
/* Curled bottom corners: two skewed shadows peeking out from under the
   corners make them look lifted off the wood. */
.note::before, .note::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 12px;
  width: 46%;
  height: 26%;
  max-height: 110px;
  box-shadow: 0 16px 13px rgba(0,0,0,.6);
}
.note::before { left: 8px;  transform: skew(-10deg) rotate(-5deg); }
.note::after  { right: 8px; transform: skew(10deg)  rotate(5deg); }

/* --- Papers ------------------------------------------------------------ */
.note-title {
  margin: 0 0 .5rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink);
}
.note-text { margin: 0 0 .75rem; white-space: pre-line; overflow-wrap: anywhere; }

/* Index card: blue-ink handwriting on ruled lines, red line under the title. */
.note-index { --ink: #1d3570; background-color: #fdfdf9; }
.note-index .note-title { padding-bottom: .35rem; border-bottom: 2px solid rgba(214,74,74,.65); }
.note-index .note-text {
  line-height: 1.75rem;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(1.75rem - 1px), rgba(84,132,196,.35) calc(1.75rem - 1px) 1.75rem);
}

/* Sticky notes: square-ish, marker headline, shadow heavier at the bottom
   where they curl away from the wall. */
.note-sticky, .note-sticky-pink {
  min-height: 15rem;
  background-image: linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,.07) 100%);
}
.note-sticky      { background-color: #fff27a; }
.note-sticky-pink { background-color: #ffc9d9; }
.note-sticky .note-title, .note-sticky-pink .note-title {
  font-family: "Permanent Marker", "Marker Felt", cursive;
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: .01em;
}
.note-sticky::before, .note-sticky::after,
.note-sticky-pink::before, .note-sticky-pink::after { box-shadow: 0 18px 14px rgba(0,0,0,.6); }

/* Typed sheet: typewriter headline, plain body. */
.note-typed { background-color: #ffffff; font-family: var(--bs-body-font-family); font-size: .98rem; }
.note-typed .note-title { font-family: "Special Elite", "Courier New", monospace; font-weight: 400; font-size: 1.3rem; }
.note-typed .note-date { font-family: "Special Elite", "Courier New", monospace; }

/* Manila tag and blue memo. */
.note-manila    { background-color: #e9d4a1; --ink: #3b2f1c; }
.note-memo-blue { background-color: #d9ebf8; --ink: #1f3346; }
.note-memo-blue .note-title { font-family: "Special Elite", "Courier New", monospace; font-weight: 400; }

/* --- Date, tag stamp, photo, link ------------------------------------- */
.note-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
  min-height: 1.4rem;
}
.note-date { font-size: .9rem; opacity: .75; white-space: nowrap; }
/* The Tag looks like a rubber stamp. */
.note-stamp {
  margin-left: auto;
  padding: .05rem .45rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  color: rgba(176,38,38,.82);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(var(--stamp-tilt, -5deg));
  mix-blend-mode: multiply;
}
/* An optional picture, mounted like a snapshot. */
.note-photo {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin: .35rem 0 .85rem;
  padding: 6px 6px 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transform: rotate(var(--photo-tilt, 0deg));
}
.note-link {
  display: inline-block;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.note-link:hover, .note-link:focus { color: #b02626; }

/* --- Fasteners --------------------------------------------------------- */
.note-tack {
  position: absolute;
  top: -9px;
  left: var(--tack-x, 50%);
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  z-index: 2;
}
/* Plastic pushpins: a glossy round head with a cast shadow. */
.tack-pin-red, .tack-pin-blue, .tack-pin-green, .tack-pin-yellow, .tack-pin-white {
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 2px, rgba(255,255,255,0) 5px),
    radial-gradient(circle at 40% 36%, var(--pin-hi) 0%, var(--pin) 55%, var(--pin-lo) 100%);
  box-shadow: 3px 5px 5px rgba(0,0,0,.45), inset -1px -2px 3px rgba(0,0,0,.25);
}
.tack-pin-red    { --pin-hi: #ff8a7a; --pin: #d32a1f; --pin-lo: #7d120b; width: 28px; height: 28px; margin-left: -14px; top: -12px; }
.tack-pin-blue   { --pin-hi: #8fc1ff; --pin: #2a6fd1; --pin-lo: #123a78; }
.tack-pin-green  { --pin-hi: #9fe3a3; --pin: #2f9a3a; --pin-lo: #155a1d; }
.tack-pin-yellow { --pin-hi: #fff3a3; --pin: #f0c419; --pin-lo: #8a6a05; }
.tack-pin-white  { --pin-hi: #ffffff; --pin: #e9e9e4; --pin-lo: #9a9a94; }
/* Brass thumbtack: flat, wide, with a raised rim. */
.tack-brass {
  width: 18px; height: 18px; margin-left: -9px; top: -7px;
  background: radial-gradient(circle at 38% 34%, #fff6c9 0 1.5px, #e2bd52 3px, #b88a1d 7px, #e5c160 8px, #8e6610 9px);
  box-shadow: 2px 3px 3px rgba(0,0,0,.45);
}
/* Nail: a small dull steel head driven in flush. */
.tack-nail {
  width: 11px; height: 11px; margin-left: -5.5px; top: 8px;
  background: radial-gradient(circle at 38% 34%, #f2f2f0 0 1px, #a3a39e 3px, #5d5d58 5.5px);
  box-shadow: 1px 2px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.18);
}
/* A nail is driven through the paper itself, so give it a little room. */
.note:has(.tack-nail) { padding-top: 1.85rem; }

/* Pinned notes sit a hair proud of the rest. */
.note.is-pinned { box-shadow: 0 2px 3px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.25); }

/* Pick a note up a little on hover. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .note-wrap:hover, .note-wrap:focus-within {
    z-index: 3;
    transform: translate(var(--nudge-x, 0), calc(var(--nudge-y, 0) - 4px)) rotate(calc(var(--tilt, 0deg) * .4)) scale(1.02);
  }
}

/* Phones: one column, calmer tilt, no sideways nudge. */
@media (max-width: 575.98px) {
  .news-board { padding-inline: .5rem; }
  .note-wrap { margin-bottom: 2rem; }
  .note-wrap { width: 100%; justify-self: stretch !important; transform: translateY(calc(var(--nudge-y, 0) * .3)) rotate(calc(var(--tilt, 0deg) * .5)); }
  .note-sticky, .note-sticky-pink { min-height: 0; }
}

/* Home page: a mini version of the board. The newest (or pinned) note is
   the big feature on the left; the next two stack on the right. Text that
   doesn't fit is cut off after a few lines, and script.js adds a
   "Read the whole note" link that opens it full size. */
.news-board-title { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.65); }
.news-board-mini {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-auto-rows: auto;
  column-gap: 2.75rem;
  max-width: 66rem;
  margin-inline: auto;
  margin-bottom: -.75rem;   /* the notes' own bottom margin already spaces the button */
}
.news-board-mini .note-wrap { width: 100%; margin-bottom: 2.25rem; justify-self: stretch !important; }
.news-board-mini .note-lead { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.news-board-mini .note-side { grid-column: 2; }
.news-board-mini.has-one { grid-template-columns: minmax(0, 38rem); justify-content: center; }
.news-board-mini.has-one .note-lead { grid-row: auto; }
/* Home page: the news board at 90% so it doesn't outweigh the rest of
   the page (Oct 4, 2026). zoom scales the notes, writing and tacks
   together; browsers without it just show the full size. Phones keep
   full size (one column, already compact). */
@media (min-width: 768px) {
  .news-board-mini { zoom: .9; }
  .news-board-section:has(.news-board-mini) { padding-block: 2.5rem 3.75rem; }
}

/* The feature note: bigger paper, bigger writing, a gentler tilt. */
.news-board-mini .note-lead {
  transform: translate(var(--nudge-x, 0), calc(var(--nudge-y, 0) * .4)) rotate(calc(var(--tilt, 0deg) * .55));
}
.note-lead .note { padding: 2.1rem 1.9rem 1.7rem; font-size: 1.15rem; }
.note-lead .note-title { font-size: 1.85rem; }
.note-lead .note-sticky .note-title, .note-lead .note-sticky-pink .note-title { font-size: 2rem; }
.note-lead .note-index .note-text { line-height: 1.9rem; background-size: 100% 1.9rem;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.9rem - 1px), rgba(84,132,196,.35) calc(1.9rem - 1px) 1.9rem); }
.news-board-mini .note-sticky, .news-board-mini .note-sticky-pink { min-height: 0; }

/* Cut long text off after a few lines. */
.news-board-mini .note-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.news-board-mini .note-lead .note-text { -webkit-line-clamp: 7; line-clamp: 7; }
.news-board-mini .is-clamped .note-text { cursor: pointer; }
.note-more {
  display: inline-block;
  margin: 0 1rem .35rem 0;
  font-weight: 700;
  font-size: .95em;
  color: var(--ink);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.note-more:hover, .note-more:focus { color: #b02626; }

/* Pictures on the home page notes: a small snapshot tucked to the right,
   so it decorates the note instead of taking it over. */
.news-board-mini .note-photo {
  float: right;
  width: 36%;
  max-height: 150px;
  margin: .15rem 0 .6rem 1rem;
  padding: 4px 4px 12px;
}
.news-board-mini .note-side .note-photo { width: 84px; max-height: 84px; margin-left: .75rem; }

/* Phones and small tablets: one column. */
@media (max-width: 767.98px) {
  .news-board-mini { grid-template-columns: minmax(0, 1fr); }
  .news-board-mini .note-lead, .news-board-mini .note-side { grid-column: 1; grid-row: auto; }
  .note-lead .note { padding: 1.7rem 1.3rem 1.3rem; font-size: 1.05rem; }
  .note-lead .note-title { font-size: 1.45rem; }
  .note-lead .note-sticky .note-title, .note-lead .note-sticky-pink .note-title { font-size: 1.55rem; }
  .news-board-mini .note-lead .note-photo { width: 32%; }
  .news-board-mini .note-lead .note-text { -webkit-line-clamp: 6; line-clamp: 6; }
}

/* The note, taken off the wall and opened full size (home page). */
.note-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-width: none;
  padding: 18px 0 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.note-dialog::backdrop { background: rgba(18, 20, 18, .62); backdrop-filter: blur(2px); }
.note-dialog-body { position: relative; z-index: 0; }
.note-dialog .note { padding: 2.1rem 1.9rem 1.7rem; font-size: 1.15rem; }
.note-dialog .note-title { font-size: 1.85rem; }
.note-dialog .note-text { max-height: 60vh; overflow: auto; }
.note-dialog .note-photo { max-height: 200px; }
.note-dialog-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.note-dialog-close:hover, .note-dialog-close:focus-visible { background: #f0c419; }
@media (prefers-reduced-motion: no-preference) {
  .note-dialog[open] .note-dialog-body { animation: note-pop .28s cubic-bezier(.2, .9, .3, 1.2); }
  @keyframes note-pop { from { opacity: 0; transform: scale(.8) rotate(-4deg) translateY(30px); } }
}

/* news.html#note-...: the linked note lifts and glows for a moment. */
.note-wrap.is-spotlight { z-index: 4; }
.note-wrap.is-spotlight .note { box-shadow: 0 0 0 4px rgba(240,196,25,.9), 0 8px 24px rgba(0,0,0,.45); transition: box-shadow .3s ease; }
.note-wrap { scroll-margin-top: 7rem; }

/* =====================================================================
   Tool Loan (tool-loan-program.html): a real bike-shop workbench photo
   across the top (images/tool-bench-*.jpg, Tom Conway on Unsplash) that
   fades into a dark shop floor, with one paper work order laid on the
   bench: intro, how to borrow, and the list of loaner tools.
   ===================================================================== */
.shop-scene {
  --shop-floor: #26231f;
  background: var(--shop-floor);
  padding-bottom: 4rem;
}
.shop-photo {
  position: relative;
  margin: 0;
  height: clamp(240px, 46vw, 620px);
  overflow: hidden;
}
.shop-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
/* The bottom of the photo fades into the shop floor the sheet lies on. */
.shop-photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(38,35,31,0), var(--shop-floor));
  pointer-events: none;
}
.shop-credit {
  position: absolute;
  top: .6rem;
  right: .8rem;
  z-index: 1;
  margin: 0;
  padding: .1rem .5rem;
  border-radius: .25rem;
  background: rgba(0,0,0,.35);
  font-size: .72rem;
  color: rgba(255,255,255,.85);
}
.shop-credit a { color: inherit; }

/* The work order: one sheet of paper, held by a clip at the top. */
.shop-order {
  position: relative;
  z-index: 2;
  max-width: 50rem;
  margin: clamp(-7rem, -9vw, -2.5rem) auto 0;
  padding: 2.4rem 2.5rem 2.2rem;
  color: #2a2a28;
  background: #fffdf8;
  box-shadow: 0 2px 3px rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.45);
  transform: rotate(-.4deg);
}
.order-clip {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  border-radius: 5px 5px 8px 8px;
  background: linear-gradient(180deg, #9aa1a7, #5d646a 55%, #3e444a);
  box-shadow: 0 2px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.order-clip::after {   /* the clip's wire handle */
  content: "";
  position: absolute;
  left: 22px; right: 22px; top: -9px;
  height: 14px;
  border: 3px solid #7d858c;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.order-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid #2a2a28;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.order-intro { margin-bottom: 1.6rem; font-size: 1.05rem; }
.shop-order a { color: var(--hrbc-green-dark); font-weight: 600; text-underline-offset: 2px; }
.shop-order a:hover, .shop-order a:focus { color: #b02626; }
.order-title {
  margin: 0 0 .75rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 1.15rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.order-steps { margin: 0 0 2rem; padding-left: 1.4rem; line-height: 1.7; }
.order-steps li { padding-left: .2rem; }

.order-table-wrap { overflow-x: auto; }
.order-tools { width: 100%; border-collapse: collapse; }
.order-tools th, .order-tools td {
  padding: .55rem .5rem;
  border-bottom: 1px solid rgba(0,0,0,.12);
  vertical-align: top;
  text-align: left;
}
.order-tools thead th {
  border-bottom: 2px solid #2a2a28;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.order-tools tbody th { font-weight: 400; }
.tool-name { display: block; font-weight: 600; }
.tool-model {
  display: block;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .82rem;
  color: #5a5a55;
}
.order-tools .tool-dep, .order-tools .tool-val { text-align: right; white-space: nowrap; }
.order-tools td.tool-dep { font-weight: 700; color: #a3221a; }
.order-tools td.tool-val { font-family: "Special Elite", "Courier New", monospace; color: #5a5a55; }
.order-tools tbody tr:last-child > * { border-bottom: 0; }

@media (max-width: 575.98px) {
  .shop-order { padding: 2rem 1.1rem 1.6rem; transform: none; }
  .order-head { font-size: .72rem; }
  .order-tools th, .order-tools td { padding-inline: .3rem; }
  .shop-credit { font-size: .66rem; }
}

/* Print: just the work order. */
@media print {
  .shop-scene { background: none; padding: 0; }
  .shop-photo { display: none; }
  .shop-order { margin-top: 0; box-shadow: none; transform: none; }
  .order-clip { display: none; }
}

/* Tool Loan: checkboxes to pick tools (shown only once script.js is
   running, see initToolLoan), the print bar, and the printable Tool Loan
   Agreement. A picked row gets a highlighter-yellow wash. */
.tool-pick { display: flex; gap: .6rem; align-items: flex-start; margin: 0; cursor: pointer; }
.tool-check { display: none; flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: #a3221a; cursor: pointer; }
.order-tools.is-pickable .tool-check { display: inline-block; }
.order-tools.is-pickable tbody td { cursor: pointer; }
.order-tools tbody tr.is-picked > * { background: #fff3b8; }
.order-print { margin-top: 1.6rem; text-align: center; }
.order-picked {
  margin: 0 0 .75rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .95rem;
}

.loan-agreement { display: none; }

@media print {
  .order-print, .tool-check { display: none !important; }
  .order-tools tbody tr.is-picked > * { background: none; }

  /* The button adds .print-agreement to <html>: then ONLY the agreement prints. */
  html.print-agreement body > *:not(main),
  html.print-agreement main > *:not(.loan-agreement) { display: none !important; }
  html.print-agreement .loan-agreement {
    display: block;
    color: #000;
    font-family: Calibri, Carlito, "Helvetica Neue", Arial, sans-serif;
    font-size: 11pt;
  }
  .la-logo { display: block; width: 3.4in; height: auto; margin: 0 auto .18in; }
  .la-title { margin: 0 0 .12in; font-size: 14pt; font-weight: 700; text-align: center; }
  .la-tools, .la-who { width: 100%; border-collapse: collapse; }
  .la-tools th, .la-tools td, .la-who th, .la-who td {
    height: .27in;
    padding: 0 .07in;
    border: 1px solid #000;
    vertical-align: middle;
  }
  .la-tools thead th { text-align: center; }
  .la-tools .la-num { width: 1.05in; text-align: right; white-space: nowrap; }
  .la-tools thead .la-num { text-align: center; }
  .la-tools tfoot th { border-width: 0 1px 0 0; }
  .la-payable { margin: .05in 0 .25in; text-align: center; }
  .la-who { width: 6in; margin: 0 auto; }
  .la-who th { width: 1.15in; text-align: right; background: #d9d9d9; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .la-terms { margin: .35in 0 .7in; line-height: 1.5; text-align: justify; }
  .la-sign {
    display: flex;
    gap: 1.25in;
    margin: 0;
    padding-top: 2pt;
    border-top: 1px solid #000;
    font-size: 9pt;
    font-weight: 700;
  }
}

/* Tool Loan: the online request box at the bottom of the work order, and
   the "Request Sent" page (data/forms/toolloan/templates/ack.html). */
.order-request { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 2px dashed rgba(0,0,0,.25); }
.order-request .form-label { font-weight: 600; margin-bottom: .25rem; }
.order-date { margin: 0; padding: 0; border: 0; min-width: 0; }
.order-date legend { float: none; width: auto; font-size: 1rem; }
.order-date-row { display: grid; grid-template-columns: 1.6fr 1fr 1.15fr; gap: .4rem; }
.order-date-words { min-height: 1.3em; }
.order-date-words.is-bad { color: #a3221a; font-weight: 600; }
.order-subtitle {
  margin: 1.6rem 0 .5rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.order-agreement {
  margin: 0 0 .9rem;
  padding: .8rem 1rem;
  border-left: 3px solid rgba(0,0,0,.2);
  background: rgba(0,0,0,.03);
  font-size: .9rem;
  line-height: 1.55;
}
.order-agree { margin-bottom: 1rem; font-weight: 600; }
.order-agree .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; accent-color: #a3221a; }
.order-agree .form-check-label { padding-left: .35rem; }
.order-need { margin: 0 0 .8rem; color: #a3221a; font-weight: 600; }
.order-send { text-align: center; }
.order-errors { margin-bottom: 1rem; }

.order-sent .order-title { margin-top: .4rem; }
.order-sent .sent-stamp { top: 3.6rem; right: 2rem; }
@media (max-width: 575.98px) {
  .order-sent .sent-stamp { position: static; display: table; margin: 0 auto 1rem; }
}
.ack-tools { list-style: none; margin: 1.2rem 0; padding: 0; }
.ack-tools li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.ack-tools .ack-dep { font-weight: 700; color: #a3221a; white-space: nowrap; }
.ack-tools .ack-total { border-bottom: 0; border-top: 2px solid #2a2a28; font-weight: 700; }

@media print {
  .order-request { display: none !important; }
}

/* =====================================================================
   Find a Ride: "Pick your pace". The ride contacts as US-style road signs
   along a road, easiest pace on the left to fastest on the right. Each
   stop has its own piece of road, so the pieces join into one road on
   wide screens and each sign keeps its own road on phones.
   ===================================================================== */
.pace-section { padding-block: .5rem 1rem; }
.pace-scale {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-family: "Overpass", var(--bs-body-font-family);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hrbc-green-dark, #2c4a5e);
  opacity: .7;
}
.pace-stops {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pace-stop { display: flex; flex-direction: column; min-width: 0; }

/* Sign + post, standing on the roadside. */
.pace-sign-wrap {
  position: relative;
  height: 205px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.sign-post {
  order: 3;
  width: 9px;
  flex: 1 1 auto;
  min-height: 24px;
  background: linear-gradient(90deg, #6f767c, #c9ced2 45%, #868d93);
  border-radius: 2px 2px 0 0;
  box-shadow: 2px 0 3px rgba(0,0,0,.2);
}
.sign {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Overpass", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0,0,0,.28);
  transform-origin: 50% 100%;
  transition: transform .4s cubic-bezier(.3, 1.8, .5, 1);
}
.sign-big { font-size: 1.15rem; letter-spacing: .02em; }
.sign-small { font-size: .68rem; letter-spacing: .05em; margin-top: .3rem; }

/* Green guide sign (white border inset). */
.sign-guide {
  width: 160px;
  padding: .8rem .7rem .9rem;
  background: #006b45;
  color: #fff;
  border-radius: 12px;
  box-shadow: inset 0 0 0 4px #006b45, inset 0 0 0 6.5px #fff, 0 4px 10px rgba(0,0,0,.28);
}
.sign-guide .bi { font-size: 1.65rem; line-height: 1; margin-bottom: .25rem; }

/* Yellow warning diamond with a hill, and a yellow plaque under it. */
.sign-warning {
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
  background: #ffcc00;
  border-radius: 10px;
  box-shadow: inset 0 0 0 4px #ffcc00, inset 0 0 0 7px #111, 0 4px 10px rgba(0,0,0,.28);
  transform: rotate(45deg);
}
.sign-warning svg { width: 62px; transform: rotate(-45deg); }
.sign-plaque {
  position: relative;
  z-index: 1;
  order: 2;
  margin-top: -14px;
  padding: .35rem .6rem .3rem;
  background: #ffcc00;
  color: #111;
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px #ffcc00, inset 0 0 0 5px #111, 0 3px 8px rgba(0,0,0,.25);
  font-family: "Overpass", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pace-sign-wrap .sign-warning { order: 1; }

/* Brown recreation sign. */
.sign-rec {
  width: 160px;
  padding: .7rem .7rem .9rem;
  background: #6a3f1f;
  color: #fff;
  border-radius: 12px;
  box-shadow: inset 0 0 0 4px #6a3f1f, inset 0 0 0 6.5px #fff, 0 4px 10px rgba(0,0,0,.28);
}
.sign-icons { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.sign-icons .bi { font-size: 1.6rem; line-height: 1; }
.sign-100 { padding: .05rem .35rem 0; border: 2px solid #fff; border-radius: 4px; font-size: 1rem; }

/* Blue roadside-services sign (the "food / coffee ahead" kind). */
.sign-service {
  width: 160px;
  padding: .8rem .7rem .9rem;
  background: #1d4f91;
  color: #fff;
  border-radius: 12px;
  box-shadow: inset 0 0 0 4px #1d4f91, inset 0 0 0 6.5px #fff, 0 4px 10px rgba(0,0,0,.28);
}
.sign-service .bi { font-size: 1.65rem; line-height: 1; margin-bottom: .2rem; }
.sign-service .sign-big { font-size: 1.5rem; letter-spacing: .08em; }

/* White regulatory sign (speed limit style). */
.sign-speed {
  width: 110px;
  padding: .8rem .5rem 1rem;
  background: #fff;
  color: #111;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #111, 0 4px 10px rgba(0,0,0,.28);
}
.sign-speed .sign-small { order: -1; margin: 0 0 .35rem; font-size: .82rem; letter-spacing: .02em; line-height: 1.05; }
.sign-speed .sign-big { font-size: 1.8rem; line-height: .95; }

/* Give a sign a nudge and it wobbles on its post. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pace-stop:hover .sign { transform: rotate(-3deg); }
  .pace-stop:hover .sign-warning { transform: rotate(42deg); }
}

/* The road: asphalt with white edge lines and a dashed yellow center. */
.pace-road {
  height: 46px;
  background:
    repeating-linear-gradient(90deg, #f2c200 0 26px, transparent 26px 46px) 0 50% / 100% 4px no-repeat,
    linear-gradient(#3b3e41, #34373a);
  box-shadow: inset 0 3px 0 #e6e6e2, inset 0 -3px 0 #e6e6e2, 0 3px 6px rgba(0,0,0,.2);
}
.pace-card .people-avatar { width: 52px; height: 52px; font-size: 1.15rem; flex: none; }

/* Wide screens: one unbroken road under all five signs (the per-stop
   pieces just hold the space). */
@media (min-width: 992px) {
  .pace-stops { position: relative; }
  .pace-stops::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 205px;
    height: 46px;
    border-radius: 23px;
    background:
      repeating-linear-gradient(90deg, #f2c200 0 26px, transparent 26px 46px) 23px 50% / calc(100% - 46px) 4px no-repeat,
      linear-gradient(#3b3e41, #34373a);
    box-shadow: inset 0 3px 0 #e6e6e2, inset 0 -3px 0 #e6e6e2, 0 3px 6px rgba(0,0,0,.2);
  }
  .pace-road { visibility: hidden; }
}

.pace-card {
  flex: 1 1 auto;
  margin: 1.4rem .4rem 0;
  padding: 1rem 1rem 1.1rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  border-top: 4px solid var(--stop-color, #006b45);
}
.pace-card p { font-size: .92rem; color: #555; }
/* Last names on their own line whenever the cards sit side by side, so
   short names (Dave Bond) match the ones that wrap anyway. Phones, with
   one wide card, keep the name on one line. */
@media (min-width: 576px) {
  .pace-card .pace-last { display: block; }
}
.pace-stop:nth-child(1) { --stop-color: #006b45; }
.pace-stop:nth-child(2) { --stop-color: #1d4f91; }
.pace-stop:nth-child(3) { --stop-color: #ffcc00; }
.pace-stop:nth-child(4) { --stop-color: #6a3f1f; }
.pace-stop:nth-child(5) { --stop-color: #111; }

/* Tablets: three on top, two centered below (a 6-column grid, each stop
   2 columns wide); each sign stands by its own bit of road. */
@media (max-width: 991.98px) {
  /* The road is in pieces now, so "Easy does it ... Hammer time" no longer
     spans it: hide the scale. */
  .pace-scale { display: none; }
  .pace-stops { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 2.5rem; }
  .pace-stop { grid-column: span 2; }
  .pace-stop:nth-child(4) { grid-column: 2 / span 2; }
  .pace-road { border-radius: 23px; margin-inline: .5rem; }
}
/* Small tablets: two across, the fifth centered on its own row. */
@media (max-width: 767.98px) {
  .pace-stops { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pace-stop:nth-child(4) { grid-column: auto / span 2; }
  .pace-stop:nth-child(5) { grid-column: 2 / span 2; }
}
/* Phones: one sign at a time, each beside its own bit of road. */
@media (max-width: 575.98px) {
  .pace-stops { grid-template-columns: minmax(0, 1fr); }
  .pace-stop, .pace-stop:nth-child(4), .pace-stop:nth-child(5) { grid-column: auto; }
  .pace-sign-wrap { height: 190px; }
  .pace-scale { font-size: .75rem; }
}

/* Find a Ride: small green road-sign plaques linking to the Facebook ride
   group and the club's RideWithGPS routes. */
.pace-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
}
.mini-sign {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 1.1rem .55rem .9rem;
  background: #006b45;
  color: #fff;
  border-radius: 9px;
  box-shadow: inset 0 0 0 3px #006b45, inset 0 0 0 5px #fff, 0 3px 8px rgba(0,0,0,.22);
  font-family: "Overpass", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mini-sign .bi { font-size: 1.6rem; line-height: 1; }
/* RideWithGPS's own badge (images/ridewithgps-icon.png, from their logo pack). */
/* Same size as the Facebook plaque's round "f" (1.6rem across), so the two match. */
.mini-sign-logo { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; padding: 1px; border-radius: 50%; background: #fff; }
.mini-sign-big { display: block; font-size: 1rem; letter-spacing: .03em; }
.mini-sign-small { display: block; margin-top: .15rem; font-size: .7rem; letter-spacing: .08em; opacity: .9; }
.mini-sign:hover, .mini-sign:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 3px #006b45, inset 0 0 0 5px #fff, 0 6px 14px rgba(0,0,0,.28);
}

/* =====================================================================
   Wall calendar (calendar.html): a paper calendar hanging on a nail on a
   beadboard wall. Photo page on top (the month's photo), spiral binding,
   then the month. js/script.js initWallCalendar() builds the days.
   ===================================================================== */
.cal-wall-section, .parch-case, .member-wall, .contact-wall, .legal-wall, .laws-wall, .res-wall, .class-wall, .evform-wall, .thanks-wall {
  padding-block: 2.5rem 3.5rem;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0) 30px, rgba(0,0,0,0) calc(100% - 30px), rgba(0,0,0,.08)),
    repeating-linear-gradient(90deg, #ece6d9 0 54px, #d8d0c0 54px 56px, #f4efe4 56px 58px);
}
.wall-cal {
  --ink: #1d3570;                 /* blue ballpoint, like the index cards */
  --paper: #fffdf8;
  --rule: #ddd5c5;
  --logo-fade: .08;               /* the faded club logo under the days: 0 = off, .15 = bold */
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 0 2px 3px rgba(0,0,0,.18), 0 14px 32px rgba(60,45,20,.28);
}
/* The bottom of the sheet lifts off the wall a little at the corners. */
.wall-cal::before, .wall-cal::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 14px;
  width: 45%;
  height: 30px;
  box-shadow: 0 18px 16px rgba(60,45,20,.45);
}
.wall-cal::before { left: 10px;  transform: skew(-8deg) rotate(-3deg); }
.wall-cal::after  { right: 10px; transform: skew(8deg)  rotate(3deg); }

/* Photo page */
.wall-cal-photo {
  position: relative;
  /* The photo is 891 x 254; this keeps that shape at full width and only
     lets it get a bit taller (cropping the sides) on phones. */
  height: clamp(120px, 28.5vw, 285px);
  border-radius: 3px 3px 0 0;
  background: #d9d6ce;   /* empty frame until the photo arrives: neutral stone, not sepia (an old sepia tan here looked like a photo flashing) */
}
/* The month's photo (images/cal-<month>.jpg, else cal-default.jpg) on its
   own layer under the caption and nail. No picture is set here on purpose:
   script.js loads the month's photo first, then fades it in on a second
   layer (.wall-cal-photo-next) over the one before, so nothing blank or
   white flashes in between. The first photo after the page loads simply
   appears. Until then the frame shows a neutral stone gray. */
.wall-cal-photo-img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  background: center 60% / cover no-repeat;
}
.wall-cal-photo-next { opacity: 0; }
.wall-cal-photo-next.is-in { opacity: 1; transition: opacity .6s ease; }
@media (prefers-reduced-motion: reduce) { .wall-cal-photo-next.is-in { transition: none; } }
/* Punched hole and the 10-penny nail it hangs on. The hole is plain wall
   color (shaded where the page overhangs it). The nail is a small SVG:
   a broad head out in front, then the shank angling back to where it
   enters the wall near the top of the hole, which is where the page
   rests on it. Its shadow (drop-shadow filter) falls on the paper. */
.wall-cal-nail {
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 2;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 22%, rgba(40,28,10,.45) 0 2px, rgba(40,28,10,0) 6px),   /* where the nail goes into the wall */
    linear-gradient(180deg, rgba(60,40,15,.28), rgba(60,40,15,0) 50%),                   /* the page shades the wall below its edge */
    #e6dfd1;                                                                             /* the wall */
  box-shadow: inset 0 3px 4px rgba(60,40,15,.45), 0 0 0 1px rgba(90,60,25,.4), 0 1.5px 0 1px rgba(255,255,255,.55);
}
.wall-cal-nail::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 17px;              /* the shank's point lands near the top of the hole */
  width: 30px;
  height: 60px;
  margin-left: -15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='60' viewBox='0 0 30 60'%3E %3Cdefs%3E %3ClinearGradient id='s' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23454540'/%3E%3Cstop offset='.3' stop-color='%23dcdcd6'/%3E%3Cstop offset='.55' stop-color='%23a2a29c'/%3E%3Cstop offset='1' stop-color='%233a3a36'/%3E%3C/linearGradient%3E %3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%231e1a12' stop-opacity='.45'/%3E%3C/linearGradient%3E %3ClinearGradient id='e' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%233a3a36'/%3E%3Cstop offset='.4' stop-color='%2392928c'/%3E%3Cstop offset='1' stop-color='%2330302c'/%3E%3C/linearGradient%3E %3CradialGradient id='h' cx='.38' cy='.34' r='.8'%3E%3Cstop offset='0' stop-color='%23fbfbf9'/%3E%3Cstop offset='.3' stop-color='%23cdcdc7'/%3E%3Cstop offset='.75' stop-color='%2380807a'/%3E%3Cstop offset='1' stop-color='%2356564f'/%3E%3C/radialGradient%3E %3C/defs%3E %3Cpath d='M11.6 12 L18.4 12 L17.4 55.5 Q15 58.6 12.6 55.5 Z' fill='url%28%23s%29'/%3E %3Cpath d='M11.6 12 L18.4 12 L17.4 55.5 Q15 58.6 12.6 55.5 Z' fill='url%28%23g%29'/%3E %3Cg stroke='%232c2c28' stroke-opacity='.3' stroke-width='.6'%3E%3Cpath d='M11.8 16.2h6.4M11.85 18.4h6.3M11.9 20.6h6.2M11.95 22.8h6.1'/%3E%3C/g%3E %3Cellipse cx='15' cy='11.6' rx='12' ry='6' fill='url%28%23e%29'/%3E %3Cellipse cx='15' cy='9.2' rx='12' ry='6' fill='url%28%23h%29'/%3E %3Cellipse cx='15' cy='9.2' rx='12' ry='6' fill='none' stroke='%233a3a36' stroke-opacity='.5' stroke-width='.7'/%3E %3Cellipse cx='11.4' cy='7' rx='4.2' ry='1.7' fill='%23fff' fill-opacity='.5'/%3E %3C/svg%3E") center / 30px 60px no-repeat;
  /* A slight lean, pivoting where it enters the wall, and a long shadow
     on the paper: both say "this sticks a good ways out of the wall". */
  transform: rotate(-11deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(7px 9px 3px rgba(40,28,10,.4));
}
/* The hole and nail shrink with the photo as the screen narrows (the photo
   strip is 28.5% of the screen width, so a full-size nail swamps it on a
   phone). Scaled from the top, so the hole stays near the photo's edge. */
.wall-cal-nail { transform-origin: 50% 0; }
@media (max-width: 991.98px) { .wall-cal-nail { top: 20px; transform: scale(.78); } }
@media (max-width: 767.98px) { .wall-cal-nail { top: 15px; transform: scale(.62); } }
@media (max-width: 575.98px) { .wall-cal-nail { top: 10px; transform: scale(.5); } }
@media (max-width: 399.98px) { .wall-cal-nail { top: 8px;  transform: scale(.42); } }
.wall-cal-photo .wall-cal-nail { z-index: 2; }

/* Spiral binding: wire loops through holes in both pages. */
.wall-cal-binding {
  position: relative;
  z-index: 2;
  height: 30px;
  margin: -15px 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='30'%3E%3Crect x='4' y='4' width='8' height='4' rx='2' fill='%233a342b'/%3E%3Crect x='4' y='22' width='8' height='4' rx='2' fill='%233a342b'/%3E%3Cpath d='M5.5 6C1.2 9 1.2 21 5.5 24' fill='none' stroke='%234d4d4d' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M10.5 6C6.2 9 6.2 21 10.5 24' fill='none' stroke='%234d4d4d' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M5 7.2C2.4 10 2.4 20 5 22.8' fill='none' stroke='%23e6e6e6' stroke-width='.7' stroke-linecap='round'/%3E%3Cpath d='M10 7.2C7.4 10 7.4 20 10 22.8' fill='none' stroke='%23e6e6e6' stroke-width='.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 30px repeat-x;
}

/* Month page */
.wall-cal-page {
  padding: 1.6rem 1.25rem 1.4rem;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0) 14px), var(--paper);
  border-radius: 0 0 3px 3px;
  /* The rest of the year's months hanging underneath: each sheet's bottom
     edge peeks out a little below the one above, a touch darker and not
     quite lined up, like a real stack of pages. Each sheet is a paper-
     colored shadow with a thin darker edge shadow under it. */
  box-shadow:
    0 1px 0 rgba(60,45,20,.3),
    2px 4px 0 0 #f6f0e2,   2px 5px 0 0 rgba(60,45,20,.3),
    -2px 8px 0 0 #f1e9d9,  -2px 9px 0 0 rgba(60,45,20,.3),
    1px 12px 0 0 #ece3d0,  1px 13px 0 0 rgba(60,45,20,.32),
    -1px 16px 0 0 #e6dcc7, -1px 17px 0 0 rgba(60,45,20,.34),
    0 19px 6px -2px rgba(60,45,20,.35);
}
.wall-cal-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}
.wall-cal-month {
  margin: 0;
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hrbc-green-dark);
}
.wall-cal-month-year { color: var(--hrbc-amber-dark); letter-spacing: .06em; }
.wall-cal-nav {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--hrbc-green);
  font-weight: 600;
  justify-self: start;
}
.wall-cal-head .wall-cal-nav:last-child { justify-self: end; }
.wall-cal-nav:hover, .wall-cal-nav:focus-visible { background: var(--hrbc-light); border-color: var(--rule); color: var(--hrbc-green-dark); }
/* Small print just under the spiral binding (ride count / Google notes). */
.wall-cal-subhead {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem 1rem;
  min-height: 1.4rem;
  margin: -.3rem 0 .35rem;
  font-size: .76rem;
  line-height: 1.35;
  text-align: center;
}
.wall-cal-status { color: #6c757d; font-style: italic; }
.wall-cal-status.is-problem { color: #8a4b00; font-style: normal; }
.wall-cal-status.is-loading::before {
  content: "";
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .4em;
  vertical-align: -.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wall-cal-spin .8s linear infinite;
}
@keyframes wall-cal-spin { to { transform: rotate(360deg); } }
/* Under the month name. The row always keeps its height, so showing or
   hiding the button never shifts the calendar grid. */
.wall-cal-today-row {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1.85rem;
  margin: .2rem 0 .7rem;
}
.wall-cal-today {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--hrbc-green);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.wall-cal-today[hidden] { display: none; }
.wall-cal-today:hover, .wall-cal-today:focus-visible { background: var(--hrbc-light); color: var(--hrbc-green-dark); }
.wall-cal-month:focus { outline: none; }

.wall-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--hrbc-green-dark);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}
.wall-cal-weekdays span { padding: .35rem 0; }

.wall-cal-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-left: 1px solid var(--rule);
}
/* The faded club logo printed under the days. */
.wall-cal-grid::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: url("../images/logo.png") center / min(70%, 560px) auto no-repeat;
  opacity: var(--logo-fade);
  pointer-events: none;
}
.cal-day {
  position: relative;
  min-width: 0;
  min-height: 6.6rem;
  padding: .3rem .35rem .4rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cal-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  margin: -.15rem 0 0 -.15rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--hrbc-slate);
}
.cal-day.is-sunday .cal-num { color: #b3261e; }
.cal-day.is-other { background: rgba(120,100,70,.05); }
.cal-day.is-other .cal-num, .cal-day.is-other .cal-evs { opacity: .45; }
/* Today: circled in red marker. */
.cal-day.is-today .cal-num {
  border: 2px solid rgba(204,37,37,.82);
  border-radius: 52% 46% 55% 45% / 47% 55% 45% 53%;
  transform: rotate(-9deg);
}
/* A day linked as calendar.html?09/21/2026: a loose red marker loop
   around the whole square, drawn on once (stroke dash animation), the
   way someone circles a date on a wall calendar. */
.cal-mark {
  position: absolute;
  /* Bigger than the square, so the loop goes around the day's rides
     instead of through them (it spills a little onto the neighbors). */
  top: -11px; left: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 22px);
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.cal-mark path {
  fill: none;
  stroke: rgba(204,37,37,.85);
  stroke-width: 2.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .cal-mark.is-drawing path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: cal-mark-draw 1.1s ease-in-out .5s forwards;
  }
}
@keyframes cal-mark-draw { to { stroke-dashoffset: 0; } }
/* The linked day's red loop is drawn a little past the square, so let it show
   (the desktop day squares otherwise clip anything outside them). Oct 18, 2026. */
.cal-day.is-marked { overflow: visible; }
@media (max-width: 767.98px) {
  .cal-mark path { stroke-width: 2px; }
}

/* Past days get a light pencil slash, the way people cross them off. */
.cal-day.is-past::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top right, transparent calc(50% - .7px), rgba(70,70,70,.13) 50%, transparent calc(50% + .7px));
  pointer-events: none;
}
.cal-day.is-past .cal-evs { opacity: .72; }

.cal-evs { list-style: none; margin: .15rem 0 0; padding: 0; }
.cal-evs li + li { margin-top: .12rem; }
.cal-ev, .cal-more {
  display: block;
  width: 100%;
  padding: 0 .2rem;
  border: 0;
  background: none;
  text-align: left;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: .88rem;
  line-height: 1.22;
  cursor: pointer;
}
.cal-ev {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--ink);
  border-radius: 3px;
}
.cal-ev-time { font-weight: 700; }
.cal-ev-cont { opacity: .6; }
.cal-ev.is-allday { font-weight: 700; }
/* Colored in Google Calendar = a highlighter swipe behind the words. */
.cal-ev.is-hl {
  color: #2a2a28;
  background: linear-gradient(100deg, transparent 0 1px, var(--hl) 4px calc(100% - 5px), transparent calc(100% - 1px));
  border-radius: 2px 7px 3px 6px;
}
.cal-ev:hover, .cal-ev:focus-visible { background-color: rgba(29,53,112,.09); text-decoration: underline; }
.cal-ev.is-hl:hover, .cal-ev.is-hl:focus-visible { filter: saturate(1.4) brightness(.97); }
.cal-more { color: var(--hrbc-amber-dark); font-weight: 700; text-decoration: underline; }
.cal-dots { display: none; }
/* Two or more rides: a little bike count in the square's corner. */
.cal-count {
  position: absolute;
  top: .3rem;
  right: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(63,106,132,.12);
  color: var(--hrbc-green-dark);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
}
.cal-count .bi { font-size: .9rem; }
/* The whole square is clickable when it has rides. */
.cal-day.has-events { cursor: pointer; transition: background-color .15s ease; }
.cal-day.has-events:hover { background-color: rgba(255,226,122,.18); }
.cal-day.has-events:focus-visible { outline: 3px solid var(--hrbc-amber); outline-offset: -3px; }

/* List view (always shown on phones; a "Show as a list" toggle on desktop). */
/* "All rides weather permitting": small red print tucked under the
   bottom-right corner of the month grid. */
.wall-cal-weather {
  margin: .45rem .1rem 0;
  text-align: right;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b3261e;
}
.wall-cal-weather .bi { margin-right: .2em; }
@media (max-width: 575.98px) {
  .wall-cal-weather { text-align: center; font-size: .74rem; }
}
.wall-cal-list { margin-top: 1rem; }
.wall-cal-list > summary {
  width: max-content;
  margin: 0 auto;
  color: var(--hrbc-green);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.wall-cal-list[open] > summary { margin-bottom: .75rem; }
.wall-cal-agenda, .agenda-evs { list-style: none; margin: 0; padding: 0; }
.agenda-day {
  display: flex;
  gap: .9rem;
  padding: .65rem .25rem;
  border-bottom: 1px dashed var(--rule);
  scroll-margin-top: 6rem;
}
.agenda-date { flex: 0 0 3rem; text-align: center; }
.agenda-dow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6c757d; }
.agenda-num { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--hrbc-green-dark); }
.agenda-day.is-today .agenda-num { color: #c42525; }
.agenda-day.is-past { opacity: .6; }
.agenda-evs { flex: 1; min-width: 0; }
.agenda-ev {
  display: block;
  width: 100%;
  padding: .2rem .45rem;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 4px;
  background: none;
  text-align: left;
}
.agenda-ev.is-hl { border-left-color: var(--hl); }
.agenda-ev:hover, .agenda-ev:focus-visible { background: var(--hrbc-light); }
.agenda-title { display: block; font-family: "Kalam", "Comic Sans MS", cursive; font-size: 1.12rem; line-height: 1.25; color: var(--ink); }
.agenda-meta { display: block; font-size: .85rem; color: #5c6670; }
.wall-cal-empty { margin: .5rem 0; text-align: center; font-family: "Kalam", "Comic Sans MS", cursive; font-size: 1.15rem; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .agenda-day.is-flash { animation: agenda-flash 1.6s ease-out; }
  @keyframes agenda-flash { 0%, 30% { background: rgba(255,226,122,.75); } 100% { background: transparent; } }
}

/* The ride, copied onto an index card (uses the news board's pop-up). */
.note-dialog .cal-card { max-height: calc(100vh - 5rem); overflow: auto; }
.cal-card-day {
  margin: 0 0 .7rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a6d3b;
}
.cal-card-ev.is-picked { margin-inline: -.6rem; padding-inline: .6rem; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .cal-card-ev.is-picked { animation: agenda-flash 1.8s ease-out; }
}
.cal-card-ev.is-picked + .cal-card-ev, .cal-card-ev + .cal-card-ev.is-picked { padding-top: 1rem; }
.cal-card-ev + .cal-card-ev { margin-top: 1.2rem; padding-top: 1rem; border-top: 2px dashed rgba(84,132,196,.35); }
.cal-card-meta { margin: 0 0 .2rem; font-size: 1.02rem; }
.cal-card-meta a { color: var(--ink); }
.cal-card-desc { margin-top: .6rem; }
.note-dialog .cal-card .note-text { max-height: none; }

/* Phones: dots instead of titles, the list underneath does the talking. */
@media (max-width: 767.98px) {
  .cal-wall-section { padding-block: 1.25rem 2.25rem; }
  .wall-cal-page { padding: 1.3rem .55rem 1rem; }
  .wall-cal-nav { padding: .45rem .6rem; }
  .wall-cal-nav span { display: none; }
  .wall-cal-month { letter-spacing: .08em; }
  .wall-cal-weekdays { font-size: .66rem; letter-spacing: .04em; }
  .cal-day { min-height: 3.2rem; padding: .25rem .1rem; text-align: center; }
  .cal-day.has-events { cursor: pointer; }
  .cal-num { margin: 0; font-size: .9rem; }
  .cal-evs { display: none; }
  .cal-dots { display: flex; justify-content: center; gap: 3px; margin-top: .1rem; }
  .cal-count { display: none; }
  .cal-dot-more { margin-left: 1px; font-size: .7rem; font-weight: 800; line-height: 7px; color: var(--ink); }
  .cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hl, var(--ink)); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
  .wall-cal-grid::before { background-size: 85% auto; }
  .wall-cal-list > summary { display: none; }
}

/* The small print along the bottom of the calendar page: subscribe links
   and the Ride Captain, quiet enough not to compete with the month. */
.wall-cal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  margin-top: 1.1rem;
  padding-top: .7rem;
  border-top: 1px solid var(--rule);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .78rem;
  letter-spacing: .03em;
  color: #8a6d3b;
}
.wall-cal-footer-group { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem; }
.wall-cal-footer-label { text-transform: uppercase; letter-spacing: .08em; }
.wall-cal-footer a { color: var(--hrbc-green-dark); text-decoration: underline; text-decoration-color: rgba(44,74,94,.35); text-underline-offset: 3px; }
.wall-cal-footer a:hover, .wall-cal-footer a:focus-visible { color: var(--hrbc-amber-dark); text-decoration-color: currentColor; }
@media (max-width: 767.98px) {
  .wall-cal-footer { justify-content: center; text-align: center; }
  .wall-cal-footer-group { justify-content: center; }
}

/* =====================================================================
   Heritage (about.html): the club's story as a printed keepsake on aged
   paper. Serif faces (Playfair Display, Libre Baskerville) load only on
   this page; the rest of the site keeps its sans-serif.
   ===================================================================== */
.heritage {
  --h-ink: #2e2a24;
  --h-soft: #5b5246;
  --h-accent: #8a5a1c;          /* aged brass */
  --h-rule: rgba(110,85,50,.28);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at 50% 100%, rgba(150,110,60,.10), rgba(150,110,60,0) 55%),
    #f5eedf;
  color: var(--h-ink);
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-variant-numeric: lining-nums;     /* full-height 1974, not Playfair's old-style figures */
}
.heritage-page { max-width: 860px; padding-block: 3rem 4rem; }
.heritage-h, .heritage-plaque h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--hrbc-green-dark);
}
.heritage-h {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0 1.5rem;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}
.heritage-h::after { content: ""; flex: 1; height: 1px; background: var(--h-rule); }
.heritage p { font-size: 1.02rem; line-height: 1.85; }

/* Seal and opening line */
.heritage-intro { text-align: center; }
.heritage-seal { width: 170px; height: 170px; display: block; margin: 0 auto 1.4rem; }
.seal-ring { fill: none; stroke: var(--h-accent); stroke-width: 2.2; }
.seal-ring.thin { stroke-width: 1; }
.seal-arc { fill: var(--h-accent); font-family: "Playfair Display", Georgia, serif; font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }
.seal-est { fill: var(--h-soft); font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 17px; }
.seal-year { fill: var(--hrbc-green-dark); font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 40px; letter-spacing: 1px; }
.heritage .heritage-lede {
  max-width: 34rem;
  margin: 0 auto;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.55;
  color: var(--h-soft);
}

/* Story */
.dropcap::first-letter {
  float: left;
  margin: .32rem .55rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: 4.6rem;
  line-height: .78;
  color: var(--hrbc-green-dark);
}
/* The 1974 clipping, newsprint-toned, held in four photo corners. */
.heritage-clipping {
  position: relative;
  float: right;
  width: min(44%, 330px);
  margin: .4rem 0 1.4rem 2rem;
  padding: 10px 10px 12px;
  background: #fbf7ee;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 24px rgba(80,60,30,.18);
  transform: rotate(1.2deg);
}
.heritage-clipping img { display: block; width: 100%; height: auto; filter: sepia(.28) contrast(1.02); }
.heritage-clipping figcaption {
  margin-top: .6rem;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: .85rem;
  line-height: 1.35;
  text-align: center;
  color: var(--h-soft);
}
.heritage-clipping .clip-note { font-size: .8rem; opacity: .85; }
.clip-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #2f2a24 0 50%, transparent 50%);
  opacity: .85;
}
.clip-corner.tl { top: -3px; left: -3px; }
.clip-corner.tr { top: -3px; right: -3px; transform: rotate(90deg); }
.clip-corner.br { bottom: -3px; right: -3px; transform: rotate(180deg); }
.clip-corner.bl { bottom: -3px; left: -3px; transform: rotate(270deg); }
.heritage-quote {
  clear: none;
  margin: 2.2rem 0;
  padding: 1.2rem 0;
  border-top: 1px solid var(--h-rule);
  border-bottom: 1px solid var(--h-rule);
  text-align: center;
}
.heritage .heritage-quote p {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  line-height: 1.45;
  color: var(--hrbc-green-dark);
}
.heritage-quote p::before { content: "\201C"; color: var(--h-accent); }
.heritage-quote p::after  { content: "\201D"; color: var(--h-accent); }
.heritage-story::after { content: ""; display: block; clear: both; }

/* Milestones */
.heritage-timeline { list-style: none; margin: 0; padding: 0 0 0 1.6rem; position: relative; }
.heritage-timeline::before {
  content: "";
  position: absolute;
  top: .6rem;
  bottom: .6rem;
  left: .45rem;
  width: 2px;
  background: linear-gradient(var(--h-accent), rgba(138,90,28,.25));
}
.heritage-timeline li { position: relative; padding: 0 0 1.6rem 1.4rem; }
.heritage-timeline li::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: .35rem;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: .45rem;
  transform: translateX(-45%);
  border-radius: 50%;
  background: #f5eedf;
  border: 2px solid var(--h-accent);
  box-shadow: 0 0 0 4px #f5eedf;
}
.heritage-timeline li.is-now::before { background: var(--hrbc-amber); border-color: var(--hrbc-amber-dark); }
.tl-year {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--h-accent);
}
.heritage-timeline h3 { margin: .1rem 0 .25rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; font-weight: 600; color: var(--hrbc-green-dark); }
.heritage .heritage-timeline p { margin: 0; font-size: .97rem; line-height: 1.7; color: var(--h-soft); }
@media (min-width: 768px) {
  /* Wider screens: years on the left of the line, the story on the right. */
  .heritage-timeline { padding-left: 9.5rem; }
  .heritage-timeline::before { left: 8.35rem; }
  .heritage-timeline li { padding-left: 1.6rem; }
  .heritage-timeline li::before { left: -1.6rem; margin-left: .55rem; }
  .tl-year { position: absolute; left: -9.5rem; top: .3rem; width: 7.6rem; text-align: right; }
}

/* Charter purposes on an engraved plaque */
.heritage-plaque {
  position: relative;
  margin: 3.5rem 0 0;
  padding: 2.4rem clamp(1.25rem, 5vw, 3rem) 2rem;
  background: linear-gradient(180deg, #fffdf7, #f7f0e1);
  border: 1px solid rgba(138,90,28,.45);
  box-shadow: inset 0 0 0 6px #fffdf7, inset 0 0 0 7px rgba(138,90,28,.35), 0 8px 22px rgba(80,60,30,.12);
  text-align: center;
}
.heritage-plaque h2 { margin: 0 0 .9rem; font-size: 1.7rem; }
.heritage .plaque-intro { margin: 0 auto 1rem; max-width: 36rem; font-style: italic; color: var(--h-soft); }
.plaque-list { list-style: none; margin: 0 auto 1.4rem; padding: 0; max-width: 36rem; }
.plaque-list li { padding: .45rem 0; font-size: 1rem; line-height: 1.6; border-bottom: 1px dotted var(--h-rule); }
.plaque-list li:last-child { border-bottom: 0; }
.plaque-link { font-family: "Playfair Display", Georgia, serif; font-weight: 600; color: var(--h-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.plaque-link:hover { color: var(--hrbc-green-dark); }

/* Recognized by the City (2025): the City Hall photo in a white mat
   frame, then the story with the proclamation as a small framed document. */
.heritage-recognition { scroll-margin-top: 6rem; }
.recognition-photo {
  margin: 0 0 1.6rem;
  padding: 12px 12px 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 12px 26px rgba(80,60,30,.18);
}
.recognition-photo img { display: block; width: 100%; height: auto; }
.recognition-photo figcaption {
  margin-top: .6rem;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: .9rem;
  text-align: center;
  color: var(--h-soft);
}
.recognition-doc {
  float: right;
  width: min(36%, 190px);
  margin: .3rem 0 1rem 1.6rem;
  text-align: center;
  text-decoration: none;
}
.recognition-doc img {
  display: block;
  width: 100%;
  height: auto;
  border: 6px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 18px rgba(80,60,30,.2);
  transform: rotate(1.5deg);
  transition: transform .2s ease;
}
.recognition-doc:hover img, .recognition-doc:focus-visible img { transform: rotate(0) scale(1.03); }
.recognition-doc span {
  display: block;
  margin-top: .7rem;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--h-accent);
}
.recognition-body::after { content: ""; display: block; clear: both; }
@media (max-width: 575.98px) {
  .recognition-doc { float: none; width: min(60%, 220px); margin: 0 auto 1.2rem; display: block; }
}

.heritage-close { margin-top: 3.25rem; text-align: center; }
.heritage .heritage-close p { margin-bottom: 1rem; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.35rem; color: var(--hrbc-green-dark); }

@media (max-width: 575.98px) {
  .heritage-page { padding-block: 2rem 3rem; }
  .heritage-clipping { float: none; width: min(100%, 340px); margin: .5rem auto 1.8rem; }
  .heritage-seal { width: 140px; height: 140px; }
}

/* =====================================================================
   Constitution parchment (constitution.html): one aged sheet with
   hand-cut edges on the club's slate blue, like a document in a case.
   ===================================================================== */
/* The parchment hangs on the same beadboard wall as the calendar
   (background shared with .cal-wall-section above). */
.parch-case { padding-block: 3rem 4rem; }
.parchment {
  --p-ink: #3a2c1c;
  --p-brown: #7a5223;
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.4rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
  color: var(--p-ink);
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.35), rgba(255,255,255,0) 45%),
    radial-gradient(ellipse at 80% 85%, rgba(160,110,50,.18), rgba(160,110,50,0) 50%),
    radial-gradient(ellipse at 50% 50%, #f8eed8 60%, #efdfbd 100%);
  box-shadow: inset 0 0 50px rgba(140,95,40,.22);
  clip-path: polygon(0.00% 0.052%, 1.25% 0.033%, 2.50% 0.045%, 3.75% 0.027%, 5.00% 0.006%, 6.25% 0.017%, 7.50% 0.036%, 8.75% 0.031%, 10.00% 0.010%, 11.25% 0.050%, 12.50% 0.038%, 13.75% 0.031%, 15.00% 0.008%, 16.25% 0.028%, 17.50% 0.023%, 18.75% 0.018%, 20.00% 0.027%, 21.25% 0.010%, 22.50% 0.005%, 23.75% 0.014%, 25.00% 0.038%, 26.25% 0.028%, 27.50% 0.008%, 28.75% 0.003%, 30.00% 0.038%, 31.25% 0.001%, 32.50% 0.028%, 33.75% 0.019%, 35.00% 0.023%, 36.25% 0.046%, 37.50% 0.052%, 38.75% 0.039%, 40.00% 0.012%, 41.25% 0.010%, 42.50% 0.037%, 43.75% 0.024%, 45.00% 0.027%, 46.25% 0.002%, 47.50% 0.050%, 48.75% 0.050%, 50.00% 0.041%, 51.25% 0.019%, 52.50% 0.041%, 53.75% 0.012%, 55.00% 0.010%, 56.25% 0.018%, 57.50% 0.046%, 58.75% 0.039%, 60.00% 0.025%, 61.25% 0.038%, 62.50% 0.016%, 63.75% 0.023%, 65.00% 0.016%, 66.25% 0.025%, 67.50% 0.037%, 68.75% 0.015%, 70.00% 0.045%, 71.25% 0.011%, 72.50% 0.040%, 73.75% 0.034%, 75.00% 0.052%, 76.25% 0.014%, 77.50% 0.002%, 78.75% 0.023%, 80.00% 0.012%, 81.25% 0.053%, 82.50% 0.014%, 83.75% 0.046%, 85.00% 0.030%, 86.25% 0.043%, 87.50% 0.005%, 88.75% 0.023%, 90.00% 0.003%, 91.25% 0.019%, 92.50% 0.016%, 93.75% 0.002%, 95.00% 0.052%, 96.25% 0.024%, 97.50% 0.035%, 98.75% 0.012%, 100.00% 0.027%, 99.81% 2.000%, 99.61% 4.000%, 99.99% 6.000%, 99.81% 8.000%, 99.71% 10.000%, 99.57% 12.000%, 99.90% 14.000%, 99.83% 16.000%, 99.83% 18.000%, 99.78% 20.000%, 99.67% 22.000%, 99.66% 24.000%, 99.66% 26.000%, 99.98% 28.000%, 99.88% 30.000%, 99.59% 32.000%, 99.70% 34.000%, 99.82% 36.000%, 99.87% 38.000%, 99.63% 40.000%, 99.89% 42.000%, 99.91% 44.000%, 99.60% 46.000%, 99.95% 48.000%, 99.59% 50.000%, 99.89% 52.000%, 99.70% 54.000%, 99.65% 56.000%, 99.82% 58.000%, 99.56% 60.000%, 99.94% 62.000%, 99.97% 64.000%, 99.82% 66.000%, 99.58% 68.000%, 99.77% 70.000%, 99.76% 72.000%, 99.76% 74.000%, 99.70% 76.000%, 99.83% 78.000%, 99.65% 80.000%, 99.91% 82.000%, 100.00% 84.000%, 99.73% 86.000%, 99.94% 88.000%, 99.84% 90.000%, 99.66% 92.000%, 99.93% 94.000%, 99.70% 96.000%, 99.76% 98.000%, 99.66% 100.000%, 98.75% 99.982%, 97.50% 99.990%, 96.25% 99.968%, 95.00% 99.979%, 93.75% 99.990%, 92.50% 99.976%, 91.25% 99.960%, 90.00% 99.954%, 88.75% 99.965%, 87.50% 99.991%, 86.25% 99.959%, 85.00% 99.989%, 83.75% 99.986%, 82.50% 99.973%, 81.25% 99.973%, 80.00% 99.986%, 78.75% 99.988%, 77.50% 99.969%, 76.25% 99.962%, 75.00% 99.987%, 73.75% 99.973%, 72.50% 99.981%, 71.25% 99.958%, 70.00% 99.994%, 68.75% 99.985%, 67.50% 99.959%, 66.25% 99.952%, 65.00% 99.959%, 63.75% 99.961%, 62.50% 99.993%, 61.25% 99.999%, 60.00% 99.985%, 58.75% 99.989%, 57.50% 99.957%, 56.25% 99.995%, 55.00% 99.996%, 53.75% 99.985%, 52.50% 99.978%, 51.25% 99.978%, 50.00% 99.965%, 48.75% 99.958%, 47.50% 99.951%, 46.25% 99.967%, 45.00% 99.958%, 43.75% 99.968%, 42.50% 99.963%, 41.25% 99.992%, 40.00% 99.979%, 38.75% 99.976%, 37.50% 99.965%, 36.25% 99.962%, 35.00% 99.979%, 33.75% 99.972%, 32.50% 99.981%, 31.25% 99.972%, 30.00% 99.963%, 28.75% 99.985%, 27.50% 99.960%, 26.25% 99.980%, 25.00% 99.960%, 23.75% 99.990%, 22.50% 99.973%, 21.25% 99.978%, 20.00% 99.953%, 18.75% 99.979%, 17.50% 99.965%, 16.25% 99.966%, 15.00% 99.965%, 13.75% 99.984%, 12.50% 99.979%, 11.25% 99.954%, 10.00% 99.959%, 8.75% 99.965%, 7.50% 99.994%, 6.25% 99.984%, 5.00% 99.999%, 3.75% 99.988%, 2.50% 99.988%, 1.25% 99.967%, 0.00% 99.968%, 0.14% 98.000%, 0.44% 96.000%, 0.26% 94.000%, 0.39% 92.000%, 0.34% 90.000%, 0.42% 88.000%, 0.41% 86.000%, 0.30% 84.000%, 0.40% 82.000%, 0.02% 80.000%, 0.39% 78.000%, 0.08% 76.000%, 0.01% 74.000%, 0.07% 72.000%, 0.15% 70.000%, 0.23% 68.000%, 0.09% 66.000%, 0.40% 64.000%, 0.31% 62.000%, 0.21% 60.000%, 0.39% 58.000%, 0.13% 56.000%, 0.13% 54.000%, 0.35% 52.000%, 0.15% 50.000%, 0.30% 48.000%, 0.20% 46.000%, 0.20% 44.000%, 0.31% 42.000%, 0.42% 40.000%, 0.18% 38.000%, 0.32% 36.000%, 0.06% 34.000%, 0.02% 32.000%, 0.31% 30.000%, 0.36% 28.000%, 0.30% 26.000%, 0.27% 24.000%, 0.17% 22.000%, 0.35% 20.000%, 0.25% 18.000%, 0.12% 16.000%, 0.31% 14.000%, 0.07% 12.000%, 0.44% 10.000%, 0.43% 8.000%, 0.08% 6.000%, 0.25% 4.000%, 0.01% 2.000%);
}
/* The clip-path cuts off box shadows, so the sheet's shadow on the case
   comes from a filter on its wrapper instead. */
.parch-case .container { filter: drop-shadow(0 2px 3px rgba(60,45,20,.2)) drop-shadow(0 14px 24px rgba(60,45,20,.28)); }
.parch-head { text-align: center; margin-bottom: 2rem; }
.parch-the { margin: 0; font-family: "IM Fell English", Georgia, serif; font-style: italic; font-size: 1.3rem; color: var(--p-brown); }
.parch-title {
  margin: 0;
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--p-ink);
}
.parch-of { margin: .5rem 0 0; font-family: "IM Fell English", Georgia, serif; font-style: italic; font-size: clamp(1.1rem, 2.6vw, 1.4rem); color: var(--p-brown); }
.parch-rule { display: flex; align-items: center; gap: .9rem; max-width: 22rem; margin: 1.2rem auto 0; color: var(--p-brown); }
.parch-rule::before, .parch-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .5; }
.parch-rule span { font-size: 1.3rem; line-height: 1; }
.parchment p, .parchment li { font-size: 1rem; line-height: 1.85; }
.parch-preamble::first-letter {
  float: left;
  margin: .3rem .5rem 0 0;
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  font-size: 4.4rem;
  line-height: .78;
  color: #8b2a1d;
}
.parch-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .3rem .9rem;
  margin: 2rem 0 .5rem;
  padding: .8rem 0;
  border-top: 1px solid rgba(122,82,35,.35);
  border-bottom: 1px solid rgba(122,82,35,.35);
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  font-size: 1.05rem;
}
.parch-index-label { font-style: italic; color: var(--p-brown); margin-right: .3rem; }
.parch-index a { color: var(--p-ink); text-decoration: none; }
.parch-index a:hover, .parch-index a:focus-visible { color: #8b2a1d; text-decoration: underline; }
.parch-article { margin-top: 2.2rem; scroll-margin-top: 6.5rem; }
.parch-article h3 { margin: 0 0 .7rem; text-align: center; font-weight: 400; }
.parch-art-num { display: block; font-family: "IM Fell English SC", "IM Fell English", Georgia, serif; font-size: 1.05rem; letter-spacing: .12em; color: var(--p-brown); }
.parch-art-title { display: block; font-family: "IM Fell English", Georgia, serif; font-style: italic; font-size: 1.55rem; color: var(--p-ink); }
.parch-article ol { padding-left: 1.6rem; margin-bottom: 0; }
.parch-article ol ol { padding-left: 1.4rem; margin: .3rem 0 .4rem; }
.parch-article ol ol li { line-height: 1.6; }
.parch-article li::marker { font-family: "IM Fell English", Georgia, serif; color: var(--p-brown); }
.parch-article:target h3 .parch-art-title { text-decoration: underline; text-decoration-color: rgba(139,42,29,.5); text-underline-offset: 6px; }
.parch-foot { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; margin-top: 3rem; }
.parch-amended { margin: 0; font-family: "IM Fell English", Georgia, serif; font-style: italic; font-size: 1.1rem; line-height: 1.4; text-align: left; color: var(--p-brown); }
/* Red wax seal. */
.parch-seal {
  display: grid;
  place-items: center;
  align-content: center;
  width: 84px;
  height: 84px;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 36% 30%, #d0574a 0, #a32a1f 38%, #741810 75%, #5e120c 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 0 0 6px rgba(0,0,0,.08), inset 0 0 0 8px rgba(255,255,255,.08);
  color: rgba(255,225,210,.82);
  text-shadow: 0 -1px 0 rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.18);
  transform: rotate(-8deg);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* The seal links to the History page: it lifts a little on hover. */
.parch-seal:hover, .parch-seal:focus-visible {
  color: rgba(255,235,222,.95);
  transform: rotate(-4deg) translateY(-3px) scale(1.04);
  box-shadow: 0 6px 12px rgba(0,0,0,.35), inset 0 0 0 6px rgba(0,0,0,.08), inset 0 0 0 8px rgba(255,255,255,.08);
}
.parch-seal:focus-visible { outline: 3px solid var(--hrbc-amber); outline-offset: 4px; }
.parch-seal span { font-family: "IM Fell English SC", Georgia, serif; font-size: 1.15rem; letter-spacing: .06em; line-height: 1; }
.parch-seal small { font-family: "IM Fell English", Georgia, serif; font-size: .72rem; letter-spacing: .1em; line-height: 1.2; }
@media (max-width: 575.98px) {
  .parch-case { padding-block: 1.5rem 2.5rem; }
  .parch-case .container { padding-inline: .6rem; }
  .parch-foot { justify-content: center; }
}

/* Tooltips (data-bs-toggle="tooltip" data-bs-custom-class="hrbc-tooltip"):
   club slate blue, a little wider and roomier than Bootstrap's default. */
.hrbc-tooltip {
  --bs-tooltip-bg: var(--hrbc-green-dark);
  --bs-tooltip-max-width: 260px;
  --bs-tooltip-padding-x: .75rem;
  --bs-tooltip-padding-y: .5rem;
  --bs-tooltip-font-size: .8rem;
  --bs-tooltip-opacity: .97;
}
.hrbc-tooltip .tooltip-inner { text-align: left; line-height: 1.4; box-shadow: 0 4px 12px rgba(0,0,0,.2); }

/* =====================================================================
   Membership page (membership.html): on the beadboard wall (background
   shared with .cal-wall-section). Benefit tiles, the dues on a vintage
   paper membership card, and the by-mail note.
   ===================================================================== */
.member-wall { padding-block: 3rem 4rem; }
.member-sheet {
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background: #fffdf8;
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(60,45,20,.14), 0 12px 28px rgba(60,45,20,.16);
}
.member-lede { font-size: 1.18rem; line-height: 1.6; margin-bottom: 1.25rem; }
/* Dues page, November and December only: this year or next, member's choice. */
.member-late { margin: -.5rem 0 1.25rem; padding: .6rem .85rem; border-left: 3px solid var(--hrbc-amber-dark); background: rgba(255,255,255,.5); border-radius: 0 6px 6px 0; }
/* Benefits: one tidy list, a small icon per line, thin rules between. */
.perks { list-style: none; margin: 0; padding: 0; }
.perk {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .75rem 0;
  border-top: 1px solid rgba(110,85,50,.16);
  line-height: 1.5;
  color: #4a535b;
}
.perk:last-child { border-bottom: 1px solid rgba(110,85,50,.16); }
.perk strong { color: var(--hrbc-green-dark); }
.perk-icon {
  flex: 0 0 auto;
  width: 1.6rem;
  margin-top: .05rem;
  text-align: center;
  color: var(--hrbc-amber-dark);
  font-size: 1.15rem;
}
.perks-more { margin: .7rem 0 0 2.45rem; font-style: italic; color: #6c757d; }
.member-math {
  display: flex;
  gap: .65rem;
  align-items: center;
  margin-top: 1.1rem;
  padding: .55rem .85rem;
  border-left: 3px solid var(--hrbc-amber);
  border-radius: 0 4px 4px 0;
  background: rgba(232,135,30,.06);
  font-size: .9rem;
  color: #4a535b;
}
.member-math .bi { font-size: 1.15rem; color: var(--hrbc-amber-dark); }
.member-math strong { color: var(--hrbc-amber-dark); }
.member-math p { margin: 0; line-height: 1.5; }

/* The dues on an old-style paper membership card. */
@media (min-width: 992px) { .member-side { position: sticky; top: 6rem; } }
.member-card {
  position: relative;
  max-width: 400px;
  margin: 0 auto 1.25rem;
  padding: 1.1rem 1.3rem 1rem;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #fbf6ea, #f1e6cc);
  box-shadow:
    inset 0 0 0 5px #fbf6ea, inset 0 0 0 6.5px var(--hrbc-green-dark),
    0 2px 3px rgba(60,45,20,.2), 0 14px 28px rgba(60,45,20,.22);
  transform: rotate(-1.2deg);
}
.member-card-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .2rem .2rem .7rem; border-bottom: 1px dashed rgba(44,74,94,.35); }
.member-card-top img { width: 150px; height: auto; }
.member-card-badge {
  padding: .25rem .6rem;
  border: 2px solid #b02626;
  border-radius: 4px;
  color: #b02626;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .95rem;
  letter-spacing: .14em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(4deg);
}
.member-card-badge small { font-size: .62rem; letter-spacing: .1em; }
.member-card-title {
  margin: .8rem 0 .4rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-weight: 400;
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6b5a3a;
  text-align: center;
}
.member-card-dues { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 .9rem; }
.member-card-dues > div { padding: .5rem .4rem; text-align: center; border: 1px solid rgba(44,74,94,.25); border-radius: 6px; background: rgba(255,255,255,.45); }
.member-card-dues dt { font-family: "Special Elite", "Courier New", monospace; font-weight: 400; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #6b5a3a; }
.member-card-dues dd { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--hrbc-green-dark); }
.member-card-dues dd small { font-size: .8rem; font-weight: 400; color: #6c757d; }
/* "Good January 1 - December 31": the membership year, typed on the card. */
.member-card-valid { margin: -.35rem 0 .9rem; text-align: center; font-family: "Special Elite", "Courier New", monospace; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #6b5a3a; }
.member-card-sign { position: relative; padding-top: 1.3rem; border-top: 0; }
.member-card-ink {
  position: absolute;
  left: .5rem;
  top: -.1rem;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 1.45rem;
  color: #1d3570;
  transform: rotate(-2deg);
}
.member-card-label {
  display: block;
  padding-top: .2rem;
  border-top: 1px solid rgba(44,74,94,.45);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b5a3a;
}
.member-join { max-width: 400px; display: block; margin: 0 auto 1.5rem; }
.member-mail {
  max-width: 400px;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  border-radius: 6px;
  background: #fffdf8;
  box-shadow: 0 2px 3px rgba(60,45,20,.12), 0 8px 18px rgba(60,45,20,.1);
  font-size: .92rem;
}
.member-mail h3 { font-size: 1.05rem; font-weight: 700; color: var(--hrbc-green-dark); margin-bottom: .5rem; }
.member-mail p { margin-bottom: .6rem; line-height: 1.55; color: #4a535b; }
.member-mail address { margin: 0; padding-left: .8rem; border-left: 3px solid rgba(63,106,132,.35); line-height: 1.5; }
@media (max-width: 575.98px) {
  .member-wall { padding-block: 2rem 3rem; }
  .member-lede { font-size: 1.08rem; }
}

/* =====================================================================
   Membership application (membership-application.html) and its dues page
   (PHORM's data/forms/membership/templates/ack.html): on the beadboard
   wall (.member-wall), printed on one sheet like a club form, with a
   typewriter letterhead and section headings. The two choices are small
   paper membership cards that get a red CHOSEN stamp; the dues page shows
   the applicant's own card stamped RECEIVED. All scoped to .app-sheet /
   the dues classes so other forms are untouched.
   ===================================================================== */
.app-sheet { max-width: 920px; margin: 0 auto; }
.app-letterhead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 1rem;
  margin: 0 0 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--hrbc-green-dark);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hrbc-green-dark);
}
.app-lede { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.6rem; color: #4a535b; }
/* Section headings: typed, with a rule, like a printed form */
.app-sheet .form-legend {
  float: none;
  margin-bottom: 1.1rem;
  padding: 0 0 .4rem;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(44,74,94,.35);
  border-radius: 0;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hrbc-green-dark);
}
.app-sheet .form-legend [data-rider-name] {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
  color: #1d3570 !important;   /* the name, "written in" by hand */
}
.app-sheet .form-label { font-weight: 600; color: var(--hrbc-green-dark); }
.app-sheet .form-control { background-color: #fff; border-color: rgba(110,85,50,.3); }
.app-sheet .form-control:focus { border-color: var(--hrbc-green); box-shadow: 0 0 0 .2rem rgba(63,106,132,.18); }
.app-sheet .form-text, .app-sheet .text-muted { color: #6b6250 !important; }
.app-sheet .rider-block + .rider-block { padding-top: .4rem; }

/* The two choices as little paper membership cards */
.app-sheet .membership-choice {
  padding: 1rem 3.25rem 1rem 1.2rem;
  border: 0;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #fbf6ea, #f1e6cc);
  box-shadow:
    inset 0 0 0 4px #fbf6ea, inset 0 0 0 5.5px rgba(44,74,94,.55),
    0 2px 3px rgba(60,45,20,.18), 0 8px 18px rgba(60,45,20,.14);
  transform: rotate(-.8deg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.app-sheet .col-md-6:last-child .membership-choice { transform: rotate(.8deg); }
.app-sheet .membership-choice:hover { transform: rotate(0) translateY(-2px); }
.app-sheet .membership-choice-title {
  font-family: "Special Elite", "Courier New", monospace;
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b5a3a;
}
.app-sheet .membership-choice-price { font-size: 2rem; font-weight: 800; line-height: 1.15; color: var(--hrbc-green-dark); }
.app-sheet .membership-choice-desc { color: #6b6250; }
.app-sheet .btn-check:checked + .membership-choice {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #fbf6ea, #f1e6cc);
  box-shadow:
    inset 0 0 0 4px #fbf6ea, inset 0 0 0 6px var(--hrbc-green-dark),
    0 3px 5px rgba(60,45,20,.22), 0 14px 26px rgba(60,45,20,.22);
  transform: rotate(0) translateY(-2px);
}
/* the red rubber stamp on the chosen card */
.app-sheet .membership-choice::after {
  content: "Chosen";
  position: absolute;
  right: 1.2rem;
  top: 2.6rem;           /* beside the price, clear of the description */
  padding: .05rem .5rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  color: rgba(176,38,38,.8);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-10deg) scale(1.6);
  opacity: 0;
  transition: opacity .15s ease, transform .2s ease;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.app-sheet .btn-check:checked + .membership-choice::after { opacity: 1; transform: rotate(-10deg) scale(1); }
.app-sheet .membership-choice-radio { border-color: rgba(107,90,58,.6); background: #fffdf8; }
.app-sheet .btn-check:checked + .membership-choice .membership-choice-radio {
  border-color: var(--hrbc-green-dark);
  background: radial-gradient(circle, var(--hrbc-green-dark) 0 50%, #fffdf8 55%);
}
.app-sheet .needs-choice .membership-choice { box-shadow: inset 0 0 0 4px #fbf6ea, inset 0 0 0 6px #dc3545, 0 0 0 .2rem rgba(220,53,69,.2); }

/* The waiver: fine print on a slightly darker paper */
.app-sheet .waiver-box {
  background: #f7f1e3;
  border-color: rgba(110,85,50,.25);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .86rem;
  line-height: 1.55;
  color: #3f3a2e;
  box-shadow: inset 0 1px 4px rgba(60,45,20,.1);
}
/* The running summary: an amber note like "Do the math" on Membership */
.app-sheet #membershipSummary {
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .6rem .9rem;
  border: 0;
  border-left: 3px solid var(--hrbc-amber);
  border-radius: 0 4px 4px 0;
  background: rgba(232,135,30,.07);
  color: #4a535b;
}
.app-sheet #membershipSummary.alert-warning { border-left-color: #c98a1b; }
.app-sheet .li-err { border-radius: 4px; }
@media (max-width: 575.98px) {
  .app-letterhead span:last-child { width: 100%; }
  .app-sheet .membership-choice::after { right: 1rem; font-size: .85rem; }
}

/* ---- The dues page (ack.html) ---- */
.dues-title { font-size: 1.5rem; font-weight: 700; color: var(--hrbc-green-dark); margin: .4rem 0 .6rem; }
.pay-list .perk { align-items: flex-start; }
/* Pay online: the club's preferred way, gently set apart */
.pay-list .perk.pay-best {
  margin: 0 -.75rem;
  padding: .9rem .75rem;
  border-top-color: transparent;
  border-radius: 6px;
  background: rgba(232,135,30,.08);
  box-shadow: inset 3px 0 0 var(--hrbc-amber);
}
.pay-list .perk.pay-best + .perk { border-top-color: transparent; }
.pay-list .perk-icon { font-size: 1.35rem; }
.pay-address { margin: .5rem 0 0; padding-left: .8rem; border-left: 3px solid rgba(63,106,132,.35); line-height: 1.5; color: #2b3238; }
.pay-questions { margin: 1.1rem 0 0; font-size: .92rem; color: #6c757d; }
.dues-card { overflow: visible; }
.member-card-dues.is-one { grid-template-columns: 1fr; max-width: 240px; margin-inline: auto; }
.dues-card .member-card-ink { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 1rem); }
.dues-card .dues-stamp {
  top: auto;
  bottom: 3.3rem;
  right: .6rem;
  z-index: 1;
  font-size: 1.35rem;
  color: rgba(176,38,38,.72);
  transform: rotate(-14deg);
}
@media (max-width: 575.98px) {
  .dues-card .dues-stamp { right: .2rem; font-size: 1.1rem; }
}

/* =====================================================================
   Contact page (contact.html) and its "Message Sent" page (PHORM's
   ack.html): the beadboard wall (background shared with
   .cal-wall-section), the form on stationery, the address on an
   envelope, and the officers' mailboxes on a card.
   ===================================================================== */
.contact-wall { padding-block: 3rem 4rem; }
.contact-sheet {
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background: #fffdf8;
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(60,45,20,.14), 0 12px 28px rgba(60,45,20,.16);
}
.contact-letterhead {
  margin: 0 0 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--hrbc-green-dark);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hrbc-green-dark);
}
.contact-lede { font-size: 1.12rem; line-height: 1.6; margin-bottom: 1.4rem; }
.contact-form .form-control { background-color: #fff; border-color: rgba(110,85,50,.3); }
.contact-form .form-control:focus { border-color: var(--hrbc-green); box-shadow: 0 0 0 .2rem rgba(63,106,132,.18); }
.contact-form .form-label { font-weight: 600; color: var(--hrbc-green-dark); }
#contactToNote:not([hidden]) {
  display: inline-block;
  padding: .3rem .7rem;
  border-left: 3px solid var(--hrbc-amber);
  background: rgba(232,135,30,.08);
  color: #4a535b !important;
}
@media (min-width: 992px) { .contact-side { position: sticky; top: 6rem; } }

/* The mailing address on an envelope, with a stamp and a postmark. */
.envelope {
  position: relative;
  max-width: 420px;
  margin: 0 auto 1.6rem;
  padding: 5.6rem 1.5rem 2rem;
  border-radius: 4px;
  background: linear-gradient(170deg, #fdfaf2, #f3ead6);
  box-shadow: 0 2px 3px rgba(60,45,20,.18), 0 12px 26px rgba(60,45,20,.18);
  transform: rotate(1deg);
}
/* The stamp: a square of paper with a perforated edge, as if torn off a
   sheet of stamps, and the club logo (images/stamp-logo.jpg) printed on
   it. The perforations are half-round bites cut by a mask (little circles
   around the edge; "round" spaces them evenly, one on each corner). The
   shadow sits on the outer span, because a mask also cuts away any shadow
   on the element it's on. */
.envelope-stamp {
  position: absolute;
  top: 16px;
  right: 18px;
  line-height: 0;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.28));
  transform: rotate(3deg);
}
.envelope-stamp-face {
  --perf: 2.6px;                  /* perforation hole radius */
  display: block;
  width: 64px;
  height: 64px;
  padding: 7px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%),
    #f8f3e6;
  -webkit-mask:
    radial-gradient(var(--perf), #0000 96%, #000) round calc(-1.5 * var(--perf)) calc(-1.5 * var(--perf)) / calc(3 * var(--perf)) calc(3 * var(--perf)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--perf)) calc(100% - 3 * var(--perf));
          mask:
    radial-gradient(var(--perf), #0000 96%, #000) round calc(-1.5 * var(--perf)) calc(-1.5 * var(--perf)) / calc(3 * var(--perf)) calc(3 * var(--perf)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--perf)) calc(100% - 3 * var(--perf));
}
/* The printed picture, with a thin printed frame line around it. */
.envelope-stamp-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(120,20,20,.35);
}
.envelope-postmark {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 128px;
  height: 75px;
  color: rgba(40,40,60,.45);
  font-family: "Special Elite", "Courier New", monospace;
  transform: rotate(-9deg);
  pointer-events: none;
}
.envelope-address {
  margin: 0 0 0 18%;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 1.35rem;
  line-height: 1.45;
  color: #1d3570;
}

/* The officers' mailboxes, on a paper card. */
.officer-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 1.2rem 1.35rem;
  border-radius: 6px;
  background: #fffdf8;
  box-shadow: 0 2px 3px rgba(60,45,20,.12), 0 8px 18px rgba(60,45,20,.1);
}
.officer-card h2 { font-size: 1.15rem; font-weight: 700; color: var(--hrbc-green-dark); margin-bottom: .35rem; }
.officer-card > p { font-size: .9rem; color: #6c757d; margin-bottom: .6rem; }

/* "Message Sent" page: one sheet with a red SENT rubber stamp. */
.contact-sent { position: relative; max-width: 640px; margin: 0 auto; text-align: center; }
.contact-sent h2 { font-size: 1.6rem; font-weight: 700; color: var(--hrbc-green-dark); margin: .6rem 0 .8rem; }
.contact-sent p { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; }
.sent-icon { font-size: 3rem; color: var(--hrbc-green); }
.sent-stamp {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  padding: .15rem .7rem;
  border: 3px solid currentColor;
  border-radius: 6px;
  color: rgba(176,38,38,.75);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: rotate(-12deg);
  mix-blend-mode: multiply;
}
@media (max-width: 575.98px) {
  .contact-wall { padding-block: 2rem 3rem; }
  .envelope-address { margin-left: 4%; font-size: 1.2rem; }
  .sent-stamp { font-size: 1.05rem; top: .8rem; right: .8rem; }
}

/* =====================================================================
   Privacy & Terms page (privacy.html): one quiet sheet on the beadboard
   wall (background shared with .cal-wall-section).
   ===================================================================== */
.legal-wall { padding-block: 3rem 4rem; }
.legal-sheet {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(1.4rem, 5vw, 3rem);
  background: #fffdf8;
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(60,45,20,.14), 0 12px 28px rgba(60,45,20,.16);
  line-height: 1.7;
}
.legal-updated { font-size: .85rem; font-style: italic; color: #6c757d; margin-bottom: 1.2rem; }
.legal-short {
  padding: 1.1rem 1.3rem;
  border-left: 4px solid var(--hrbc-green);
  border-radius: 0 6px 6px 0;
  background: rgba(63,106,132,.07);
}
.legal-short h2 { font-size: 1.1rem; font-weight: 700; color: var(--hrbc-green-dark); margin-bottom: .4rem; }
.legal-short ul { margin: 0; padding-left: 1.2rem; }
.legal-toc { margin: 1.4rem 0 .5rem; font-weight: 600; text-align: center; }
.legal-toc span { margin: 0 .5rem; color: #adb5bd; }
.legal-part { scroll-margin-top: 6rem; }
.legal-part-title {
  margin: 2.2rem 0 .3rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--hrbc-green-dark);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--hrbc-green-dark);
}
.legal-sheet h3 { margin: 1.5rem 0 .4rem; font-size: 1.08rem; font-weight: 700; color: var(--hrbc-green-dark); }
.legal-sheet p, .legal-sheet li { color: #3d4750; }
.legal-sheet ul { padding-left: 1.3rem; }
/* The small "how we handle your information" line under each form's button. */
.form-privacy-note { margin: .8rem 0 0; font-size: .82rem; color: #6c757d; }
@media (max-width: 575.98px) { .legal-wall { padding-block: 1.5rem 2.5rem; } }
/* Footer: the Privacy & Terms link beside the copyright line. */
.footer-privacy { color: inherit; white-space: nowrap; }

/* Spam guard: the PHORM forms' hidden "website" box (a honeypot only
   robots fill in). Off-screen rather than display:none, which some robots
   skip; tabindex="-1" and aria-hidden keep people from landing in it. */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   Laws & Advocacy page (laws-advocacy.html): the beadboard wall
   (background shared with .cal-wall-section), Tennessee's 3-foot law as
   a white regulatory road sign, and two sheets of paper.
   ===================================================================== */
.laws-wall { padding-block: 3rem 4rem; }
.law-sign-wrap { margin: 0 0 2rem; text-align: center; }
/* The yellow diamond "3 FEET / IT'S THE LAW" sign (inline SVG in the page). */
.law-sign {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto -6px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.25));
}
.law-sign-post {
  display: block;
  width: 14px;
  height: 46px;
  margin: 0 auto;
  background: linear-gradient(90deg, #8f9499, #d8dbde 45%, #9aa0a5);
  box-shadow: 0 6px 6px -4px rgba(0,0,0,.35);
}
.law-sign-wrap figcaption {
  max-width: 28rem;
  margin: 1rem auto 0;
  font-size: .92rem;
  line-height: 1.55;
  color: #4a535b;
}
.law-sheet {
  margin-bottom: 2rem;
  padding: clamp(1.3rem, 4vw, 2.1rem);
  background: #fffdf8;
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(60,45,20,.14), 0 12px 28px rgba(60,45,20,.16);
}
.law-sheet h2 {
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--hrbc-green-dark);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--hrbc-green-dark);
}
.law-sheet-lede { color: #4a535b; margin-bottom: .6rem; }
.law-list, .advo-list { list-style: none; margin: 0; padding: 0; }
.law-item { display: flex; gap: .8rem; padding: .8rem 0; border-top: 1px solid rgba(110,85,50,.16); }
.law-item:first-child { border-top: 0; padding-top: .2rem; }
.law-icon { flex: 0 0 auto; margin-top: .1rem; font-size: 1.25rem; color: var(--hrbc-amber-dark); }
.law-item h3, .advo-item h3 { margin: 0 0 .2rem; font-size: 1.02rem; font-weight: 700; color: var(--hrbc-green-dark); }
.law-item p, .advo-item p { margin: 0; font-size: .93rem; line-height: 1.55; color: #4a535b; }
.advo-item { padding: .95rem 0; border-top: 1px solid rgba(110,85,50,.16); }
.advo-item:first-child { border-top: 0; padding-top: .3rem; }
.advo-item > a { display: inline-block; margin-top: .35rem; font-size: .9rem; font-weight: 600; }
/* The 6 Rules for Cycling Safety: one sheet across the page, the rules in
   a grid, each number in a small yellow diamond like the 3 FEET sign. */
.rules-sheet { margin-top: .5rem; }
.rules-list {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.1rem 2.2rem;
  counter-reset: rule;
}
.rules-list li {
  position: relative;
  padding-left: 3rem;
  counter-increment: rule;
}
.rules-list li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: -.15rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background: #f5c400;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: Overpass, "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #1a1a1a;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.rules-list h3 { margin: 0 0 .2rem; font-size: 1.02rem; font-weight: 700; color: var(--hrbc-green-dark); }
.rules-list p { margin: 0; font-size: .93rem; line-height: 1.55; color: #4a535b; }
.rules-credit { margin: 1.2rem 0 0; font-size: .82rem; font-style: italic; color: #6c757d; }
@media (max-width: 575.98px) { .laws-wall { padding-block: 2rem 3rem; } }

/* Find a Ride: a sky-to-meadow backdrop, pale sky behind the intro easing
   down to soft meadow green, with faint rolling hills along the bottom,
   so the road of signs sits out in the countryside. */
.ride-country {
  position: relative;
  padding-bottom: 1rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220' preserveAspectRatio='none'%3E%3Cpath d='M0 150 C 180 90 320 120 480 100 S 820 60 980 95 S 1300 70 1600 110 V220 H0 Z' fill='%23cddcb4' fill-opacity='.55'/%3E%3Cpath d='M0 185 C 220 140 420 170 640 150 S 1040 120 1260 150 S 1480 140 1600 160 V220 H0 Z' fill='%23bfd2a2' fill-opacity='.6'/%3E%3C/svg%3E") center bottom / 100% 190px no-repeat,
    linear-gradient(180deg, #dcecf6 0%, #e9f2f6 30%, #f2f4ec 55%, #e7eedb 78%, #dbe6c6 100%);
}
.ride-country .pace-card { box-shadow: 0 2px 4px rgba(40,60,30,.10), 0 10px 22px rgba(40,60,30,.10); }

/* =====================================================================
   Resources page (resources.html): the beadboard wall (background shared
   with .cal-wall-section). Bike shops as a page torn from the Yellow
   Pages, with member-discount shops boxed like display ads; clubs and
   online links on plain sheets.
   ===================================================================== */
.res-wall { padding-block: 2.2rem 4rem; }
.res-jump { margin: 0 0 1.4rem; text-align: center; font-weight: 600; color: #5b5246; }
.res-jump span { margin: 0 .45rem; color: #a99b84; }
#shops, #clubs, #online { scroll-margin-top: 6rem; }

/* The Yellow Pages page */
.yp-page {
  margin-bottom: 2.5rem;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  background: linear-gradient(180deg, #fbf1b8, #f7e9a2);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(60,45,20,.16), 0 14px 30px rgba(60,45,20,.18);
  color: #1e1c16;
}
.yp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .45rem .8rem;
  background: #1e1c16;
  color: #fbf1b8;
}
.yp-head h2 {
  margin: 0;
  font-family: "Overpass", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: inherit;
}
.yp-region { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.yp-intro { margin: .9rem 0 1.1rem; font-size: .95rem; line-height: 1.55; }
.yp-columns { column-count: 2; column-gap: 2.2rem; column-rule: 1px solid rgba(30,28,22,.25); }
.yp-area {
  break-after: avoid;
  margin: 0 0 .5rem;
  padding: .15rem 0;
  border-top: 2px solid #1e1c16;
  border-bottom: 1px solid #1e1c16;
  font-family: "Overpass", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.yp-area:not(:first-child) { margin-top: 1.2rem; }
.yp-listing { break-inside: avoid; padding: .3rem 0 .45rem; }
.yp-line { display: flex; align-items: baseline; gap: .3rem; margin: 0; }
.yp-name { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: .92rem; }
.yp-name a, .yp-phone { color: #1e1c16; text-decoration: none; }
.yp-name a:hover, .yp-phone:hover { text-decoration: underline; }
.yp-dots { flex: 1; min-width: 1rem; border-bottom: 2px dotted rgba(30,28,22,.45); transform: translateY(-.25em); }
.yp-phone { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.yp-addr { margin: 0; font-size: .85rem; color: #4a4434; }
/* Member-discount shops, boxed like a phone-book display ad. */
.yp-ad {
  margin: .4rem 0 .6rem;
  padding: .55rem .7rem .6rem;
  border: 2px solid #1e1c16;
  background: #fff8cf;
  box-shadow: 3px 3px 0 rgba(30,28,22,.85);
}
.yp-ad .yp-name { font-size: 1.02rem; }
.yp-save { margin: .25rem 0 0; font-size: .82rem; font-weight: 700; color: #a3261c; }
.yp-save a { color: inherit; }
.yp-foot { margin: 1.2rem 0 0; padding-top: .7rem; border-top: 1px solid rgba(30,28,22,.3); font-size: .88rem; }

/* Clubs and online links on plain sheets */
.res-sheet {
  margin-bottom: 2rem;
  padding: clamp(1.3rem, 4vw, 2.1rem);
  background: #fffdf8;
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(60,45,20,.14), 0 12px 28px rgba(60,45,20,.16);
}
.res-sheet h2 {
  margin: 0 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--hrbc-green-dark);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--hrbc-green-dark);
}
.res-sheet-lede { color: #4a535b; font-size: .95rem; }
.res-state {
  margin: 1.2rem 0 .4rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hrbc-amber-dark);
}
.club-list, .tour-list, .link-group ul { list-style: none; margin: 0; padding: 0; }
.club-row { display: flex; align-items: baseline; gap: .3rem; padding: .22rem 0; font-size: .93rem; }
.club-row .yp-dots { border-bottom-color: rgba(110,85,50,.35); }
.club-city { white-space: nowrap; color: #5c6670; }
.club-row.is-us { margin: .3rem -.5rem 0; padding: .3rem .5rem; border-radius: 4px; background: rgba(232,135,30,.12); font-weight: 700; }
.club-row.is-us .club-city { color: var(--hrbc-amber-dark); }
.link-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem 1.4rem; }
.link-group h3 { margin: .9rem 0 .35rem; font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hrbc-amber-dark); }
.link-group li { padding: .15rem 0; font-size: .92rem; }
.tour-list li { padding: .4rem 0; border-top: 1px solid rgba(110,85,50,.14); font-size: .93rem; }
.tour-list li:first-child { border-top: 0; }
.tour-list a { font-weight: 600; }
.tour-list span { display: block; font-size: .85rem; color: #5c6670; }
.res-foot { margin: 1.1rem 0 0; font-size: .88rem; color: #5c6670; }
@media (max-width: 767.98px) {
  .yp-columns { column-count: 1; }
  .yp-head { flex-direction: column; gap: .1rem; }
}
@media (max-width: 575.98px) { .res-wall { padding-block: 1.5rem 3rem; } }

/* =====================================================================
   Tullahoma Re-Cycle page (tullahoma-re-cycle.html): a classroom on the
   beadboard wall (background shared with .cal-wall-section). Chalkboard,
   composition-notebook paper, a sticky note, small taped-up prints.
   ===================================================================== */
.class-wall { padding-block: 2.5rem 4rem; }
.chalkboard {
  max-width: 920px;
  margin: 0 auto 2.8rem;
  padding: 16px 16px 0;
  border-radius: 6px;
  background: linear-gradient(135deg, #a8723f, #7c4f27 55%, #9a6634);   /* oak frame */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 3px 4px rgba(0,0,0,.2), 0 16px 32px rgba(60,40,15,.3);
}
.chalk-surface {
  position: relative;
  padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.2rem, 4vw, 2.8rem) 1.6rem;
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    radial-gradient(ellipse at 75% 80%, rgba(255,255,255,.05), rgba(255,255,255,0) 50%),
    #2f4a3b;
  box-shadow: inset 0 0 40px rgba(0,0,0,.45);
  color: #f2f1ea;
  font-family: "Kalam", "Comic Sans MS", cursive;
  text-shadow: 0 0 1px rgba(255,255,255,.55), 0 0 6px rgba(255,255,255,.15);
}
.chalk-kicker { margin: 0; font-size: 1.15rem; opacity: .85; }
.chalk-title { margin: 0 0 1rem; font-family: inherit; font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15; color: #fffbe6; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: rgba(255,240,170,.6); }
.chalk-body { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.chalk-list { list-style: none; margin: 0; padding: 0; font-size: 1.3rem; line-height: 1.7; }
.chalk-list li::before { content: "\2713"; display: inline-block; width: 1.6rem; color: #ffe27a; }
.chalk-bike { width: min(220px, 45%); height: auto; color: rgba(255,255,255,.82); filter: drop-shadow(0 0 2px rgba(255,255,255,.35)); }
.chalk-note { margin: 1rem 0 0; font-size: 1rem; color: #cfe3d4; }
.chalk-tray { position: relative; height: 16px; margin: 0 -16px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #8a5a2e, #6a421f); box-shadow: 0 3px 4px rgba(0,0,0,.25); }
.chalk-stick { position: absolute; top: 2px; left: 18%; width: 46px; height: 8px; border-radius: 3px; background: #f4f2ea; box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.chalk-stick.s2 { left: 24%; width: 30px; background: #ffe27a; transform: rotate(-4deg); }
.chalk-eraser { position: absolute; top: -8px; right: 16%; width: 78px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #5b4a3a 0 55%, #d9d4c6 55%); box-shadow: 0 2px 2px rgba(0,0,0,.3); }

/* The story on composition-notebook paper: blue rules, red margin line. */
.notebook {
  --rule: 1.9rem;
  position: relative;
  padding: 1.6rem 1.6rem 1.4rem 3.6rem;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 2.6rem, rgba(214,74,74,.55) 2.6rem, rgba(214,74,74,.55) calc(2.6rem + 2px), transparent calc(2.6rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 1px), rgba(84,132,196,.28) calc(var(--rule) - 1px) var(--rule)),
    #fffefa;
  background-position: 0 0, 0 1.6rem, 0 0;
  box-shadow: 0 2px 3px rgba(60,45,20,.14), 0 12px 28px rgba(60,45,20,.16);
}
.notebook p { margin: 0 0 var(--rule); line-height: var(--rule); color: #2f3640; }
.notebook p:first-child { font-size: 1.12rem; font-weight: 600; color: var(--hrbc-green-dark); }
.notebook p:last-child { margin-bottom: 0; }
.help-note { width: min(100%, 320px); margin: .5rem auto 0; }
@media (min-width: 992px) { .help-note { position: sticky; top: 7rem; } }

/* Small prints taped to the wall */
.snaps { margin-top: 3rem; text-align: center; }
.snaps-title { font-size: 1.5rem; font-weight: 800; color: var(--hrbc-green-dark); margin-bottom: .4rem; }
.snaps-lede { max-width: 40rem; margin: 0 auto 1.6rem; color: #4a535b; }
.snap-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 1.4rem; }
.snap {
  position: relative;
  display: block;
  width: 160px;
  padding: 7px 7px 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 6px 14px rgba(60,45,20,.18);
  transform: rotate(var(--snap-tilt, 0deg));
  transition: transform .2s ease, box-shadow .2s ease;
}
.snap img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* a strip of tape across the top */
.snap::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 62px;
  height: 18px;
  margin-left: -31px;
  background: rgba(255,250,225,.75);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  transform: rotate(-3deg);
}
.snap:hover, .snap:focus-visible { transform: rotate(0) translateY(-4px) scale(1.06); box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 12px 24px rgba(60,45,20,.25); z-index: 1; }

/* Full-size photo pop-up (initPhotoLightbox in js/script.js) */
.photo-dialog { width: min(1000px, calc(100vw - 2rem)); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.photo-dialog::backdrop { background: rgba(18,20,18,.78); backdrop-filter: blur(2px); }
.photo-dialog-body { position: relative; margin: 0; padding: 10px 10px 8px; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.photo-dialog-body img { display: block; width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; background: #111; }
.photo-dialog-body figcaption { padding: .5rem .25rem 0; font-size: .92rem; color: #3d4750; text-align: center; }
.photo-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #222;
  font-size: 1.3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.photo-nav.prev { left: -14px; }
.photo-nav.next { right: -14px; }
.photo-nav:hover, .photo-nav:focus-visible { background: #f0c419; }
@media (max-width: 575.98px) {
  .class-wall { padding-block: 1.6rem 3rem; }
  .notebook { padding-left: 2.6rem; background-position: -1rem 0, 0 1.6rem, 0 0; }
  .snap { width: 140px; }
  .photo-nav.prev { left: 4px; } .photo-nav.next { right: 4px; }
}


/* =====================================================================
   Photos (photos.html): an art museum. A deep gallery-green wall with a
   picture rail at the top and an oak floor at the bottom. The lobby
   hangs one gilt-framed cover per album on a wire, with a brass museum
   placard; an album's room is a wall of black-framed, matted prints.
   Built by js/script.js initPhotoGallery() from gallery/list.php.
   A scene page (like News and Tool Loan): no beadboard here.
   ===================================================================== */
.gallery-hall {
  --wall: #2e3d37;
  --brass-ink: #2d230f;
  --cream: #efe6cf;
  position: relative;
  overflow-x: clip;             /* the frames' spotlights spill past the edges on phones */
  padding-block: 3.4rem 6.5rem;
  color: var(--cream);
  background:
    radial-gradient(ellipse 60% 40% at 50% 0, rgba(255,240,205,.10), transparent 70%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.025) 0 1px, transparent 2px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.05) 0 1px, transparent 2px) 0 0 / 9px 9px,
    var(--wall);
}
/* picture rail molding */
.gallery-hall::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: auto; left: 0;
  height: 16px;
  background: linear-gradient(#6b4a2b, #8a6238 35%, #5a3d22 70%, #3d2915);
  box-shadow: 0 4px 8px rgba(0,0,0,.45);
}
/* baseboard and oak floor */
.gallery-hall::after {
  content: "";
  position: absolute;
  top: auto; right: 0; bottom: 0; left: 0;
  height: 54px;
  background:
    linear-gradient(#e9e2cf, #cfc6ae 10px, #2a1d10 10px, rgba(0,0,0,0) 15px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 118px),
    linear-gradient(#a9764a, #8c5d36 60%, #6e4625);
}
.gallery-hall > .container { position: relative; z-index: 1; }
.gallery-hall a:not(.exhibit):not(.print):not(.gallery-sign):not(.btn) { color: #f0d89a; }

.gallery-status {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  font-family: "Libre Baskerville", Georgia, serif;
}
.gallery-status p { margin: 0; }

/* ---- Lobby: one exhibit per album ---- */
.gallery-lobby {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 3.2rem 3rem;
}
.exhibit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 44px;            /* room for the hanging wire */
  color: inherit;
  text-decoration: none;
}
/* the spotlight from above */
.exhibit::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  left: -14%;
  right: -14%;
  height: 85%;
  /* centered low enough that it fades out before the box's top edge */
  background: radial-gradient(ellipse 48% 42% at 50% 42%, rgba(255,240,205,.15), transparent 100%);
  pointer-events: none;
  transition: opacity .25s;
  opacity: .8;
}
.exhibit-wire {
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 46px;
  overflow: visible;
}
.exhibit-wire path { fill: none; stroke: #b9ab83; stroke-width: 1.4; }
.exhibit-wire circle { fill: #c9a85a; stroke: #5b4720; stroke-width: 1; }
.exhibit-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #7d5f26, #e2c675 22%, #9b7a35 46%, #ecd690 70%, #85652a);
  box-shadow: inset 0 0 0 2px rgba(60,40,10,.55), inset 0 0 7px rgba(0,0,0,.5), 0 14px 22px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.exhibit-mat {
  display: block;
  padding: 15px;
  background: #f6f2e7;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 2px 2px 6px rgba(0,0,0,.25);
}
.exhibit-mat img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #d9d3c3;
}
.exhibit:hover::before, .exhibit:focus-visible::before { opacity: 1.4; }
.exhibit:hover .exhibit-frame, .exhibit:focus-visible .exhibit-frame {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 2px rgba(60,40,10,.55), inset 0 0 7px rgba(0,0,0,.5), 0 20px 30px rgba(0,0,0,.5);
}
.exhibit:focus-visible { outline: 2px solid #f0d89a; outline-offset: 6px; }

/* ---- The lobby: a changeable-letter directory board (white plastic
   letters pressed into black grooved felt, in an oak frame), one line
   per wing. Built by initPhotoGallery() lobby(). ---- */
.letterboard {
  position: relative;
  max-width: 780px;
  margin: 1.5rem auto 0;
  padding: 16px;
  background: linear-gradient(135deg, #8a5f36, #b07c4a 30%, #7d532d 55%, #a87444 80%, #6f4826);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(40,25,10,.6), inset 0 2px 3px rgba(255,230,190,.35), 0 18px 30px rgba(0,0,0,.5);
}
/* the spotlight on it */
.letterboard::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -4rem;
  height: 70%;
  background: radial-gradient(ellipse 50% 45% at 50% 45%, rgba(255,240,205,.13), transparent 100%);
  pointer-events: none;
}
.letterboard-felt {
  position: relative;
  padding: 1.6rem 2rem 1.4rem;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    #18181a;
  box-shadow: inset 0 0 18px rgba(0,0,0,.9), inset 0 0 0 2px #0c0c0d;
  color: #f3f0e8;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.letterboard-head {
  margin: 0 0 1.1rem;
  text-align: center;
  font-size: 1.35rem;
  letter-spacing: .32em;
  color: #e8b04a;
}
.letterboard-list { list-style: none; margin: 0; padding: 0; }
.letterboard-list a {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .7rem .4rem;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid rgba(243,240,232,.07);
  transition: color .15s;
}
.letterboard-list li:first-child a { border-top: 0; }
.lb-name { font-size: 1.12rem; line-height: 1.3; }
.lb-dots { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted rgba(243,240,232,.3); transform: translateY(-.3em); }
.lb-info { text-align: right; font-size: .8rem; white-space: nowrap; }
.lb-sub { display: block; font-size: .66rem; opacity: .65; }
.lb-arrow { font-size: .9rem; transition: transform .15s; }
.letterboard-list a:hover, .letterboard-list a:focus-visible { color: #e8b04a; }
.letterboard-list a:hover .lb-arrow, .letterboard-list a:focus-visible .lb-arrow { transform: translateX(4px); }
.letterboard-list a:focus-visible { outline: 2px solid #e8b04a; outline-offset: 2px; }
@media (max-width: 575.98px) {
  .letterboard { padding: 10px; }
  .letterboard-felt { padding: 1.2rem 1rem 1rem; }
  .letterboard-head { font-size: 1.05rem; letter-spacing: .22em; }
  .letterboard-list a { flex-wrap: wrap; row-gap: .2rem; }
  .lb-name { flex: 1 1 calc(100% - 2rem); font-size: 1rem; }
  .lb-dots { display: none; }
  .lb-info { order: 3; flex: 1 1 100%; text-align: left; white-space: normal; }
  .lb-arrow { order: 2; }
}

/* A wing: a folder of albums, named on the wall in gallery lettering. */
.gallery-wing {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 1.4rem;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .9;
}
.gallery-wing::before, .gallery-wing::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239,230,207,.45), transparent);
}

/* ---- Brass museum placard ---- */
.placard {
  position: relative;
  display: block;
  min-width: 72%;
  margin-top: 1.1rem;
  padding: .5rem 1.3rem .55rem;
  text-align: center;
  color: var(--brass-ink);
  font-family: "Libre Baskerville", Georgia, serif;
  font-variant-numeric: lining-nums;
  text-shadow: 0 1px 0 rgba(255,250,225,.45);   /* engraved look */
  background: linear-gradient(160deg, #dcc480, #b9984b 42%, #e5d196 68%, #a8873f);
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.25);
}
/* two little screws */
.placard::before, .placard::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3e3b0, #7a5e25 70%);
  box-shadow: 0 0 0 1px rgba(70,50,15,.4);
}
.placard::before { left: 6px; }
.placard::after { right: 6px; }
.placard-title { display: block; margin: 0; font-family: inherit; font-size: .98rem; font-weight: 700; line-height: 1.3; color: inherit; }
.placard-date { display: block; font-size: .82rem; font-style: italic; }
.placard-count { display: block; margin-top: .15rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.placard-lg {
  max-width: 540px;
  margin: 0 auto 2.75rem;
  padding: .95rem 2.4rem 1rem;
}
.placard-lg .placard-title { font-size: 1.45rem; }
.placard-lg .placard-date { font-size: 1rem; margin-top: .15rem; }
.placard-text { display: block; margin: .55rem 0 .1rem; font-size: .9rem; line-height: 1.5; }
.placard-lg::before { left: 10px; } .placard-lg::after { right: 10px; }

/* ---- An album's room ---- */
.gallery-sign {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  color: var(--cream);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: .85rem;
  text-decoration: none;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(239,230,207,.35);
  border-radius: 2px;
  transition: background .2s, color .2s;
}
.gallery-sign:hover, .gallery-sign:focus-visible { background: rgba(0,0,0,.45); color: #f0d89a; }
.gallery-sign b { font-weight: 700; }
.gallery-sign-lobby { margin-bottom: 1.6rem; }
.print-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 2.4rem 1.8rem;
  align-items: center;
  justify-items: center;
}
.print {
  display: block;
  max-width: 100%;
  padding: 9px;
  background: #f6f2e7;
  border: 7px solid #1c1a17;
  box-shadow: 0 9px 15px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.print img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 230px;
  background: #d9d3c3;
}
.print:hover, .print:focus-visible { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 24px rgba(0,0,0,.5); }
.print:focus-visible { outline: 2px solid #f0d89a; outline-offset: 4px; }
/* Back / Next between pages: a lobby wing's albums, an album's prints */
.gallery-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.4rem;
}
.gallery-pager .gallery-sign.is-off { opacity: .28; pointer-events: none; }
.gallery-pager-at {
  min-width: 5.5em;
  text-align: center;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: .85rem;
  font-style: italic;
  color: rgba(239,230,207,.85);
}
.gallery-pager.is-top { margin: -1.2rem 0 2.2rem; }
.gallery-wing + .gallery-pager.is-top { margin: 0 0 2rem; }

.gallery-next {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
}
.gallery-sign-next { margin-left: auto; text-align: right; }

.gallery-note {
  max-width: 46rem;
  margin: 3.75rem auto 0;
  text-align: center;
  font-size: .88rem;
  color: rgba(239,230,207,.82);
}
@media (max-width: 575.98px) {
  .gallery-hall { padding-block: 2.6rem 5.5rem; }
  .gallery-lobby { gap: 2.6rem; }
  .print-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .print { padding: 6px; border-width: 5px; }
  .print img { max-height: 170px; }
  .placard-lg { padding-inline: 1.6rem; }
  .placard-lg .placard-title { font-size: 1.2rem; }
}

/* ------------------------------------------------------------------
   "As of ..." note under Google-fed boxes (Upcoming Rides, News).
   Shown only when Google isn't answering and the site is showing its
   saved copy (see feed.php). The wall calendar uses its own status line.
   ------------------------------------------------------------------ */
.feed-stale-note {
  margin: .5rem auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: .85rem;
  font-style: italic;
  color: #6c757d;
}
.feed-stale-note[hidden] { display: none; }
/* On the barn wood: light text, like the board's other messages. */
.news-board-section .feed-stale-note {
  margin-bottom: 1rem;
  color: #f1f1ec;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* Home page "All News" link: a small scrap of paper tacked to the barn
   wood, handwritten like the notes above it, so it reads as part of the
   board instead of a button on top of it. Lifts a little on hover. */
.news-more-tag {
  position: relative;
  display: inline-block;
  padding: .7rem 1.2rem .5rem;
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  color: #2a2a28;
  text-decoration: none;
  background: #ebe4d2;
  background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.05));
  box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.2);
  transform: rotate(-2deg);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.news-more-tag .note-tack { left: 50%; }
.news-more-tag:hover,
.news-more-tag:focus-visible {
  color: #b02626;
  transform: rotate(-1deg) translateY(-2px);
  box-shadow: 0 3px 4px rgba(0,0,0,.4), 0 8px 14px rgba(0,0,0,.25);
}
.news-more-tag:focus-visible { outline: 2px solid #f1c27d; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .news-more-tag, .news-more-tag:hover, .news-more-tag:focus-visible { transition: none; transform: rotate(-2deg); }
}

/* Barn-wood news board (index.html + news.html): side-view push pins,
   like the push-pin emoji, instead of the round tack heads used on the
   other boards. Same color mix; the brass and nail picks become a gold and
   a steel pin. Pinned stories keep the red one. Each pin stands fairly
   upright with most of its needle in the board; its shadow is drawn in
   the picture and starts at the needle tip, so the pin looks stuck in.
   The tip lands just inside the paper's top edge, at --tack-x. */
.news-board-section .note-tack {
  width: 40px; height: 40px; top: -26px; margin-left: -10px;
  border-radius: 0; box-shadow: none;
  background-repeat: no-repeat; background-size: 100% 100%;
}
.news-board-section .note-tack.tack-pin-red { width: 45px; height: 45px; top: -30px; margin-left: -11px; }
.news-board-section .note:has(.tack-nail) { padding-top: 1.6rem; }
.news-board-section .tack-pin-red { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ff8a7a'/%3E%3Cstop offset='.45' stop-color='%23d32a1f'/%3E%3Cstop offset='1' stop-color='%237d120b'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f4f4f2'/%3E%3Cstop offset='.5' stop-color='%23b9b9b4'/%3E%3Cstop offset='1' stop-color='%236e6e69'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(10 32) rotate(122) scale(.62 .9)' opacity='.42' filter='url(%23b)'%3E%3Cpath d='M0 .5L-1.4-3.4h2.8z' fill='%23000'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='%23000'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='%23000'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='%23000'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(10 32) rotate(24)'%3E%3Crect x='-.65' y='-3' width='1.3' height='3' rx='.6' fill='url(%23n)'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='url(%23c)'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='url(%23c)'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='url(%23c)'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.news-board-section .tack-pin-blue { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238fc1ff'/%3E%3Cstop offset='.45' stop-color='%232a6fd1'/%3E%3Cstop offset='1' stop-color='%23123a78'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f4f4f2'/%3E%3Cstop offset='.5' stop-color='%23b9b9b4'/%3E%3Cstop offset='1' stop-color='%236e6e69'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(10 32) rotate(122) scale(.62 .9)' opacity='.42' filter='url(%23b)'%3E%3Cpath d='M0 .5L-1.4-3.4h2.8z' fill='%23000'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='%23000'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='%23000'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='%23000'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(10 32) rotate(24)'%3E%3Crect x='-.65' y='-3' width='1.3' height='3' rx='.6' fill='url(%23n)'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='url(%23c)'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='url(%23c)'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='url(%23c)'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.news-board-section .tack-pin-green { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%239fe3a3'/%3E%3Cstop offset='.45' stop-color='%232f9a3a'/%3E%3Cstop offset='1' stop-color='%23155a1d'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f4f4f2'/%3E%3Cstop offset='.5' stop-color='%23b9b9b4'/%3E%3Cstop offset='1' stop-color='%236e6e69'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(10 32) rotate(122) scale(.62 .9)' opacity='.42' filter='url(%23b)'%3E%3Cpath d='M0 .5L-1.4-3.4h2.8z' fill='%23000'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='%23000'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='%23000'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='%23000'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(10 32) rotate(24)'%3E%3Crect x='-.65' y='-3' width='1.3' height='3' rx='.6' fill='url(%23n)'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='url(%23c)'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='url(%23c)'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='url(%23c)'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.news-board-section .tack-pin-yellow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff3a3'/%3E%3Cstop offset='.45' stop-color='%23f0c419'/%3E%3Cstop offset='1' stop-color='%238a6a05'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f4f4f2'/%3E%3Cstop offset='.5' stop-color='%23b9b9b4'/%3E%3Cstop offset='1' stop-color='%236e6e69'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(10 32) rotate(122) scale(.62 .9)' opacity='.42' filter='url(%23b)'%3E%3Cpath d='M0 .5L-1.4-3.4h2.8z' fill='%23000'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='%23000'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='%23000'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='%23000'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(10 32) rotate(24)'%3E%3Crect x='-.65' y='-3' width='1.3' height='3' rx='.6' fill='url(%23n)'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='url(%23c)'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='url(%23c)'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='url(%23c)'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.news-board-section .tack-pin-white { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.45' stop-color='%23e2e2dc'/%3E%3Cstop offset='1' stop-color='%238f8f89'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f4f4f2'/%3E%3Cstop offset='.5' stop-color='%23b9b9b4'/%3E%3Cstop offset='1' stop-color='%236e6e69'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(10 32) rotate(122) scale(.62 .9)' opacity='.42' filter='url(%23b)'%3E%3Cpath d='M0 .5L-1.4-3.4h2.8z' fill='%23000'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='%23000'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='%23000'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='%23000'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(10 32) rotate(24)'%3E%3Crect x='-.65' y='-3' width='1.3' height='3' rx='.6' fill='url(%23n)'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='url(%23c)'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='url(%23c)'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='url(%23c)'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.news-board-section .tack-brass { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23d9a92e'/%3E%3Cstop offset='1' stop-color='%237a560c'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f4f4f2'/%3E%3Cstop offset='.5' stop-color='%23b9b9b4'/%3E%3Cstop offset='1' stop-color='%236e6e69'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(10 32) rotate(122) scale(.62 .9)' opacity='.42' filter='url(%23b)'%3E%3Cpath d='M0 .5L-1.4-3.4h2.8z' fill='%23000'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='%23000'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='%23000'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='%23000'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(10 32) rotate(24)'%3E%3Crect x='-.65' y='-3' width='1.3' height='3' rx='.6' fill='url(%23n)'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='url(%23c)'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='url(%23c)'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='url(%23c)'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.news-board-section .tack-nail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23e9eef2'/%3E%3Cstop offset='.45' stop-color='%238d9aa5'/%3E%3Cstop offset='1' stop-color='%2347525c'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f4f4f2'/%3E%3Cstop offset='.5' stop-color='%23b9b9b4'/%3E%3Cstop offset='1' stop-color='%236e6e69'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(10 32) rotate(122) scale(.62 .9)' opacity='.42' filter='url(%23b)'%3E%3Cpath d='M0 .5L-1.4-3.4h2.8z' fill='%23000'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='%23000'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='%23000'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='%23000'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(10 32) rotate(24)'%3E%3Crect x='-.65' y='-3' width='1.3' height='3' rx='.6' fill='url(%23n)'/%3E%3Cg transform='translate(0 1.6)'%3E%3Crect x='-6.5' y='-8' width='13' height='3.6' rx='1.8' fill='url(%23c)'/%3E%3Cpath d='M-3.4 -7.9h6.8l-.9-7.2h-5z' fill='url(%23c)'/%3E%3Crect x='-6.2' y='-21' width='12.4' height='6.2' rx='3' fill='url(%23c)'/%3E%3Crect x='-4.8' y='-20.2' width='3.2' height='1.6' rx='.8' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

/* =====================================================================
   Officers' event form (event-form.php, event-confirm.php): a sheet of
   paper on a ride captain's clipboard, on the beadboard wall (background
   shared with .cal-wall-section). Not linked from the menus.
   ===================================================================== */
.evform-wall { padding-block: 3rem 4rem; }
.evform-clipboard {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 2.9rem 1.1rem 1.2rem;
  border-radius: 14px;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 3px, rgba(0,0,0,.03) 3px 7px),
    linear-gradient(160deg, #9c6f45, #7d5532);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.18), 0 14px 30px rgba(60,40,20,.35);
}
/* The metal clip across the top. */
.evform-clip {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 190px;
  height: 52px;
  margin-left: -95px;
  border-radius: 10px 10px 16px 16px;
  background: linear-gradient(180deg, #f2f3f4, #b7bcc1 55%, #8d9399);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.35);
  z-index: 2;
}
.evform-clip::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 46px;
  height: 14px;
  margin-left: -23px;
  border-radius: 7px;
  background: #7d5532;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5);
}
.evform-clip::after {
  content: "";
  position: absolute;
  bottom: 9px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: rgba(0,0,0,.18);
}
.evform-sheet {
  position: relative;
  padding: clamp(1.2rem, 4vw, 2.3rem);
  border-radius: 3px;
  background: #fffdf8;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 6px 14px rgba(40,25,10,.2);
  color: #3d4750;
}
.evform-quiet { color: #6c757d; font-weight: normal; }
.evform-hint { margin: .35rem 0 0; font-size: .85rem; color: #6c757d; }

/* List of upcoming events */
.evform-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1rem; }
.evform-title { margin: 0; font-family: "Special Elite", "Courier New", monospace; font-weight: 400; font-size: 1.6rem; color: var(--hrbc-green-dark); }
.evform-howto { margin: .9rem 0 0; padding-left: 1.2rem; color: #5b646c; }
.evform-howto li + li { margin-top: .15rem; }
.evform-howto strong { color: var(--hrbc-green-dark); }
.evform-month {
  margin: 1.8rem 0 .3rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--hrbc-green-dark);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hrbc-green-dark);
}
.evform-list { list-style: none; margin: 0; padding: 0; }
.evform-item {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: .2rem 1rem;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(110,85,50,.16);
}
.evform-when { display: flex; flex-direction: column; line-height: 1.25; }
.evform-day { font-weight: 700; color: var(--hrbc-green-dark); }
.evform-time { font-size: .85rem; color: #6c757d; }
.evform-what { font-weight: 600; overflow-wrap: anywhere; }
.evform-repeat {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .4rem;
  border: 1px solid rgba(201,111,15,.4);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--hrbc-amber-dark);
  white-space: nowrap;
  cursor: help;
}
.evform-item.is-canceled .evform-what, .evform-item.is-canceled .evform-day { color: #8f969c; }
.evform-actions { display: flex; gap: 1rem; white-space: nowrap; font-weight: 600; }
.evform-cancel-link { color: #a51d2d; }
.evform-cancel-link:hover { color: #7a1520; }
.evform-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.6rem 0 0; }

/* The form */
.evform-group { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px dashed rgba(110,85,50,.3); }
.evform-group:first-of-type { margin-top: .4rem; border-top: 0; padding-top: 0; }
.evform-group legend {
  float: none;
  width: auto;
  margin-bottom: .55rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hrbc-green-dark);
}
.evform .form-label { margin-bottom: .25rem; font-weight: 600; font-size: .92rem; }
.evform .form-control, .evform .form-select { background-color: #fff; }
.evform-inline { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; }
.evform-inline .form-check-inline { margin-right: 0; }
.evform-preview { margin: .8rem 0 0; font-size: .88rem; color: #6c757d; }
.evform-preview strong { color: var(--hrbc-green-dark); }
.evform-buttons { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.8rem; }
.evform-buttons .btn-link { padding-left: 0; font-weight: 600; text-decoration: none; }
.evform-note, .evform-alert {
  margin: 0 0 1.2rem;
  padding: .75rem 1rem;
  border-radius: 0 6px 6px 0;
}
.evform-note { border-left: 4px solid var(--hrbc-green); background: rgba(63,106,132,.08); }
.evform-alert { border-left: 4px solid #a51d2d; background: rgba(165,29,45,.07); color: #7a1520; font-weight: 600; }

/* Review and confirm */
.evform-summary { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 1rem; }
.evform-summary dt { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6c757d; padding-top: .15rem; }
.evform-summary dd { margin: 0; font-weight: 600; color: var(--hrbc-green-dark); overflow-wrap: anywhere; }
.evform-label { margin: 1.2rem 0 .4rem; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6c757d; }
.evform-changes { margin: 0; padding-left: 1.2rem; }
.evform-warn {
  margin: 1.2rem 0;
  padding: .85rem 1.1rem;
  border-left: 4px solid var(--hrbc-amber);
  border-radius: 0 6px 6px 0;
  background: rgba(232,135,30,.09);
}
.evform-warn-head { margin: 0 0 .4rem; font-weight: 700; color: #8a4b00; }
.evform-warn ul { margin: 0; padding-left: 1.2rem; }
.evform-warn li + li { margin-top: .3rem; }
.evform-card {
  padding: 1rem 1.2rem .4rem;
  border: 1px solid #ddd5c5;
  border-top: 3px solid #c0392b;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, #fff 0 1.55rem, #e7eef6 1.55rem calc(1.55rem + 1px));
  font-family: "Kalam", cursive;
  color: #1d3570;
  line-height: 1.55rem;
}
.evform-card p { margin: 0 0 .6rem; }
.evform-card-title { font-weight: 700; font-size: 1.1rem; }
.evform-card a { color: #1d3570; }
.evform-nudge { margin: .9rem 0 0; font-size: .92rem; color: #5b646c; }
.evform-nudge .bi { color: var(--hrbc-amber-dark); }
.evform-understand {
  margin-top: 1.4rem;
  padding: .75rem 1rem .75rem 2.6rem;
  border: 1px solid rgba(232,135,30,.45);
  border-radius: 6px;
  background: rgba(232,135,30,.06);
}
.evform-sent { margin-bottom: 1.4rem; text-align: center; }
.evform-sent > .bi { display: block; font-size: 3rem; line-height: 1; color: var(--hrbc-amber-dark); }
.evform-sent.is-done > .bi { color: #26703a; }
.evform-sent-head { margin: .6rem 0 .5rem; font-size: 1.2rem; font-weight: 700; color: var(--hrbc-green-dark); }

@media (max-width: 575.98px) {
  .evform-wall { padding-block: 2rem 2.5rem; }
  .evform-clipboard { padding: 2.4rem .45rem .6rem; border-radius: 10px; }
  .evform-clip { width: 150px; margin-left: -75px; height: 46px; }
  .evform-item { grid-template-columns: minmax(0, 1fr) auto; }
  .evform-when { grid-column: 1 / -1; flex-direction: row; gap: .6rem; align-items: baseline; }
  .evform-summary { grid-template-columns: 1fr; gap: 0; }
  .evform-summary dd { margin-bottom: .5rem; }
  .evform-buttons { flex-direction: column-reverse; align-items: stretch; }
  .evform-buttons .btn-amber { width: 100%; }
}
.evform-loading { margin: 1.6rem 0 .5rem; padding: 1.2rem 0; text-align: center; color: #6c757d; font-style: italic; }
.evform-loading .spinner-border { margin-right: .4rem; vertical-align: -.15em; color: var(--hrbc-amber-dark); }
.evform-sheet .is-busy { pointer-events: none; opacity: .85; }
.evform-diag { margin-top: .5rem; font-size: .8rem; font-weight: normal; color: #6c757d; overflow-wrap: anywhere; }
.evform-diag summary { cursor: pointer; }
.evform-version { margin: 1rem 0 0; font-size: .75rem; color: #8f969c; text-align: right; }
.evform-version.is-old { color: #8a4b00; font-weight: 600; text-align: left; }
/* Month / Day / Year menus, and the date in words underneath */
.evform-date-wrap { margin-top: .2rem; }
.evform-date { display: flex; flex-wrap: wrap; gap: .5rem; }
.evform-date .form-select { width: auto; }
.evform-date [name$="_m"] { min-width: 9.5rem; }
.evform-date [name$="_d"] { min-width: 5.2rem; }
.evform-date [name$="_y"] { min-width: 6.4rem; }
.evform-weekday { min-height: 1.35rem; margin-top: .3rem; font-size: .9rem; font-weight: 600; color: var(--hrbc-green-dark); }
.evform-weekday.is-bad { color: #a51d2d; }
.evform-sent p { font-size: 1.02rem; }
/* "What to do next" steps on the Check Your Email page: left-aligned so the
   numbers line up, in a soft box so they read as the thing to do. */
.evform-steps-head { margin: 1rem 0 .3rem; }
.evform-steps { display: inline-block; max-width: 34rem; margin: 0 auto .8rem; padding: .8rem 1rem .8rem 2.4rem;
  text-align: left; background: rgba(255, 255, 255, .55); border: 1px solid rgba(0, 0, 0, .12); border-radius: 8px; }
.evform-steps li { margin: .3rem 0; font-size: 1.02rem; }
/* Live "Shows on the calendar as: Map: RideWithGPS" line under the map box. */
.evform-map-shows { font-weight: 600; color: #26703a; }
.evform-map-shows.is-bad { color: #a51d2d; }
/* Two or more events on one day: the date as a small header, the day's
   events indented under it with an amber bar tying them together. */
.evform-dayhead { padding: .75rem 0 .25rem; font-weight: 700; color: var(--hrbc-green-dark); }
.evform-item.is-grouped {
  margin-left: 1.4rem;
  padding: .4rem 0 .4rem .8rem;
  border-left: 3px solid rgba(232,135,30,.55);
  border-bottom-style: dotted;
}
.evform-more { margin: 1.1rem 0 0; font-size: .92rem; color: #5b646c; }
.evform-more a { font-weight: 600; white-space: nowrap; }

/* =====================================================================
   No orphans: keep a lone word from dangling on its own line.
   Headings and short labels get evenly balanced lines; paragraphs and
   list items avoid a single word on their last line. Browsers that
   don't know these rules just wrap the way they always have.
   ===================================================================== */
h1, h2, h3, h4, h5, h6, .btn, .section-title, figcaption, blockquote { text-wrap: balance; }
p, li, dd, dt, td, th, label, .form-text, address { text-wrap: pretty; }
/* Footer links are short two-liners on phones: split them evenly. */
footer.site-footer li { text-wrap: balance; }

/* =====================================================================
   Wide screens (index.html): the content stops widening at about 1320px,
   but the bands keep stretching sideways and start to look like thin
   ribbons. So past 1280px every home page section grows a little taller
   along with the screen width, up to a limit. Phones, tablets and normal
   laptops are unchanged.
   - Photo bands (hero, "You're Invited"): a minimum height that is a share
     of the screen width (30% / 28%), never above 40rem / 38rem; the text
     stays centered top to bottom.
   - Upcoming Rides, Latest News, Get Involved: extra room above and below,
     6% of whatever width is past 1280px, at most 3rem each side.
   ===================================================================== */
.home-sections { --wide-grow: clamp(0px, (100vw - 1280px) * .06, 3rem); }
.hero.parallax-section, .cta-section {
  display: flex; flex-direction: column; justify-content: center;
}
.hero.parallax-section { min-height: clamp(26rem, 30vw, 40rem); }
.cta-section { min-height: clamp(26rem, 28vw, 38rem); }
.home-sections .rides-section { padding-block: calc(2.25rem + var(--wide-grow)) calc(1.25rem + var(--wide-grow)); }
@media (min-width: 768px) {
  .home-sections .news-board-section:has(.news-board-mini) { padding-block: calc(2.5rem + var(--wide-grow)) calc(3.75rem + var(--wide-grow)); }
}
.home-sections .section-tight { padding-block: calc(2.5rem + var(--wide-grow)) calc(3.25rem + var(--wide-grow)); }

/* =====================================================================
   Upcoming Rides (index.html): paper ride tickets on a painted wall.
   Each card is a cream ticket with a tear-off stub on the left (day /
   date / month, stamped in red and slate), a dotted perforation with
   notches top and bottom, and a slight tilt. renderRideCards() in
   js/script.js builds the stub (span.ride-stub > .t-dow .t-day .t-mon).
   ===================================================================== */
.rides-section {
  /* A plain painted wall (soft light and shadow, no boards), so it doesn't
     echo the barn-wood planks of Latest News right below it. */
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0) 28px, rgba(0,0,0,0) calc(100% - 28px), rgba(0,0,0,.07)),
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(190,175,145,.25), transparent 60%),
    #ece6d9;
}
.rides-carousel { padding-top: 1.4rem; scrollbar-color: #b8ab92 transparent; }
.rides-carousel::-webkit-scrollbar-track { background: transparent; }
.rides-carousel::-webkit-scrollbar-thumb { background-color: #b8ab92; }
/* The shadow sits on the outer card so the notches (a mask) don't cut it off. */
.ride-card { filter: drop-shadow(0 1px 1px rgba(60,45,20,.25)) drop-shadow(0 6px 10px rgba(60,45,20,.18)); }
.ride-card:nth-child(odd)  .ride-card-inner { transform: rotate(-.6deg); }
.ride-card:nth-child(even) .ride-card-inner { transform: rotate(.5deg); }
.ride-card-inner {
  --stub: 3.4rem;
  border: none; border-radius: 4px; box-shadow: none;
  background: linear-gradient(90deg, #f6ecd2 0 var(--stub), transparent var(--stub)), #fffdf8;
  padding: .9rem 1rem .9rem calc(var(--stub) + .85rem);
  -webkit-mask: radial-gradient(circle .45rem at var(--stub) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle .45rem at var(--stub) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle .45rem at var(--stub) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle .45rem at var(--stub) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ride-card-inner::after {   /* the perforation */
  content: ""; position: absolute; left: var(--stub); top: .8rem; bottom: .8rem;
  border-left: 2px dotted #c9b98f;
}
.ride-stub {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--stub);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "Special Elite", monospace; letter-spacing: .06em; color: #b3261e;
}
.ride-stub .t-dow, .ride-stub .t-mon { font-size: .7rem; text-transform: uppercase; }
.ride-stub .t-day { font-family: "Overpass", sans-serif; font-weight: 800; font-size: 1.55rem; line-height: 1; margin: .15rem 0 .05rem; color: var(--hrbc-green-dark); }
.ride-card-inner .card-title { font-family: "Kalam", cursive; font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: #1d3570; }
.ride-card-inner .bi { color: #b3261e !important; }
.ride-card-inner .ride-card-desc { color: #5b5346 !important; }
.ride-card-more { left: calc(var(--stub) + 1rem); background: linear-gradient(to bottom, rgba(255,253,248,0), #fffdf8 70%); color: #b3261e; }
.rides-carousel-arrow { background-color: var(--hrbc-green-dark); }
.rides-carousel-status { color: #5b5346; }

/* =====================================================================
   Footer: Tennessee map (every page's footer, Oct 2026). Three columns
   of club info and links, then a little Tennessee map (.map-art) on the
   right on big screens, under the links on smaller ones. The red star
   (.map-star) opens Tullahoma in Google Maps; Nashville and Chattanooga
   (.map-city) show at 992px and wider only.
   ===================================================================== */
.map-art-col { display: flex; align-items: center; }
.map-art { display: block; width: 100%; height: auto; overflow: visible; }
.map-art .tn-big { fill: #e4e3bf; stroke: #8f9f80; stroke-width: 1.4; stroke-linejoin: round; }
.map-city circle { fill: var(--hrbc-slate); }
.map-city text, .map-home { font: 700 10px/1 "Overpass", sans-serif; letter-spacing: .06em; fill: #4a4f53; }
.map-star { text-decoration: none; }
.map-home { font-size: 10.5px; fill: #8f1022; }
.map-star .tn-star { fill: #c8102e; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.map-star:hover .tn-star, .map-star:focus-visible .tn-star { transform: scale(1.25); }
.map-star:focus-visible { outline: none; }
.map-star:focus-visible circle { stroke: var(--hrbc-green-dark); stroke-width: 1.5; }
@media (max-width: 991.98px) {
  .map-city { display: none; }
  .map-art { max-width: 15rem; }
}
@media (prefers-reduced-motion: reduce) { .map-star .tn-star { transition: none; } }

/* =====================================================================
   Get Involved: the start board, the finish arch and the porta-potty
   (index.html). On the curvy road (768px and up) the row keeps extra room
   at its left end (--start-room, for the "Ride starts here!" sandwich
   board, .route-start) and its right end (--finish-room): the four stops
   sit between, and script.js (initRoadRider) stretches the road into both. The finish
   arch stands there across the road, one leg on each shoulder: the far
   leg (.finish-arch-back) is drawn behind the little rider and the near
   leg + top (.finish-arch-front) in front of him, so he rides through
   and parks under the banner. Phones get a straight-on arch
   (.finish-arch-v) at the bottom of the road down the left side.
   .road-potty: a rest stop on the far shoulder at the dip in the road
   (half way along the four stops); curvy road only.
   ===================================================================== */
.route { --finish-room: 0px; --start-room: 0px; }
.finish-arch, .finish-arch-v, .road-potty { position: absolute; pointer-events: none; height: auto; }
.finish-arch { display: none; }
.finish-arch-v { z-index: 0; width: 3.6rem; left: .2rem; bottom: .3rem; }
@media (min-width: 768px) {
  .route { --finish-room: 7rem; --start-room: 4rem; padding-right: var(--finish-room); padding-left: var(--start-room); }
  /* Until script.js stretches the road (or without it), the road covers
     just the four stops. */
  .route-road { left: var(--start-room); right: var(--finish-room); }
  .route.road-extended .route-road { left: 0; right: 0; }
  .route.road-extended .finish-arch { display: block; }
  .finish-arch { width: 100px; top: -80px; left: calc(100% - var(--finish-room) + .25rem); }
  /* While he cheers, the rider (and his "Woo-hoo!") comes in front of the arch. */
  .route.road-extended .road-rider.pose-is-cheer { z-index: 2; }
  .finish-arch-back { z-index: 0; }
  .finish-arch-front { z-index: 1; }
  .finish-arch-v { display: none; }
}
@media (max-width: 767.98px) {
  .route { padding-bottom: 3.6rem; }
}
.road-potty { z-index: 0; width: 1.6rem; left: calc(var(--start-room) + (100% - var(--start-room) - var(--finish-room)) * .5 - .8rem); top: calc(2.8rem - 1.6rem * 44 / 26); }
@media (max-width: 767.98px) { .road-potty { display: none; } }
/* Keep each stop's little link ("Read our story →") on one line. */
.stop .go { white-space: nowrap; }

/* Membership page: how to pay online, right under "Join or Renew Online". */
.member-pay-note { max-width: 400px; margin: -.85rem auto 1.5rem; text-align: center; font-size: .9rem; line-height: 1.4; color: #4a5258; }

/* Upcoming Rides: a click or tap anywhere on a ticket opens the whole ride
   on a pop-up index card (wireRideCardClicks in script.js). The title is
   also a link to that day on the full calendar. */
.ride-card-inner { cursor: pointer; }
.ride-card-open { color: inherit; text-decoration: none; }
.ride-card-open:hover, .ride-card-open:focus-visible { text-decoration: underline; }
.cal-card-more { margin: 1.1rem 0 0; font-weight: 600; }
.cal-card-more a { color: var(--hrbc-green-dark); }

/* =====================================================================
   Footer v2 (every page's footer since Oct 11 2026): footer.footer-v2.
   Column 1: club address, then "Connect" with icon links (Facebook,
   RideWithGPS; Bootstrap tooltips name them). Column 2: Quick Links incl.
   Contact Us, nudged right on big screens. Then the Tennessee map, on
   screens 992px and wider only.
   ===================================================================== */
.footer-v2 .footer-connect-title { margin-bottom: .55rem; }
.footer-v2 .footer-social { display: flex; align-items: center; gap: .85rem; }
.footer-v2 .footer-social a { display: inline-flex; line-height: 0; border-radius: .4rem; transition: transform .15s ease, opacity .15s ease; }
.footer-v2 .footer-social a:hover, .footer-v2 .footer-social a:focus-visible { transform: translateY(-2px); }
.footer-v2 .footer-social .bi-facebook { font-size: 1.75rem; color: #1877f2; }
.footer-v2 .footer-social img { width: 1.75rem; height: 1.75rem; border-radius: .35rem; }
/* The map shows only where it has its own column on the right (992px and
   up, with Nashville and Chattanooga). Narrower than that it would be too
   small to read, so it's left out. */
@media (max-width: 991.98px) {
  .footer-v2 .map-art-col { display: none; }
  /* Quick Links sits centered in the space right of the club column
     (its own lines still left-aligned). */
  .footer-v2 .footer-ql-col > .row { justify-content: center; }
  .footer-v2 .footer-ql-col > .row > div:first-child { flex: 0 0 auto; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .footer-v2 .footer-social a { transition: none; } }
/* Bottom line: the copyright runs the full width of the footer, and
   Privacy & Terms floats at the right end of its LAST line (it's placed
   after the text, so it lands on whatever line the text ends on, or drops
   to the next line at the right if that line is too full). */
.footer-v2 .footer-bottom::after { content: ""; display: block; clear: both; }
.footer-v2 .footer-privacy { float: right; margin-left: 1.25rem; text-align: right; }
/* Privacy & Terms and the site-design credit: same quiet gray as the
   copyright; each link stays whole, the pair may wrap on narrow phones. */
.footer-privacy a { color: inherit; white-space: nowrap; }

/* =====================================================================
   Upcoming Rides tickets, Oct 12 2026 (index.html):
   - No scroll box: the description shows what fits, the last line fades,
     and "More ->" (.ride-card-more, shown by markCutOffRides in script.js
     only when the text is cut off) says "tap for the rest". A tap
     anywhere on the ticket opens the pop-up card.
   - The ticket has no map or description links (plain text); those live
     on the pop-up card.
   - Events (not rides; looksLikeRide in script.js) get a slate-blue stub
     and an EVENT rubber stamp, on the ticket and on its pop-up card.
   ===================================================================== */
.ride-card-body { overflow: hidden; padding-right: 0; }
.ride-card-more {
  justify-content: flex-end; align-items: flex-end;
  height: 2.1rem; right: 1rem; padding: 0;
  font-family: "Kalam", cursive; font-weight: 700; font-size: .9rem; line-height: 1;
  color: #b3261e;
}
.ride-card-loc { color: inherit; }
.ride-card.is-event .ride-card-inner {
  background: linear-gradient(90deg, #dce5ef 0 var(--stub), transparent var(--stub)), #fffdf8;
}
.ride-card.is-event .ride-card-inner::after { border-left-color: #9fb3c8; }
.ride-card.is-event .ride-stub { color: #2c4a5e; }
.ride-card.is-event .ride-stub .t-day { color: #b3261e; }
.ride-card-stamp { position: absolute; top: .6rem; right: .75rem; z-index: 1; font-size: .7rem; --stamp-tilt: 6deg; }
.ride-card.is-event .card-title { padding-right: 3.8rem; }
.note-dialog .cal-card { position: relative; }
.cal-card-stamp { position: absolute; top: 1rem; right: 1.1rem; --stamp-tilt: 6deg; }

/* =====================================================================
   Membership application: the League's Minor Release inside the waiver
   box (shown only while someone listed is under 18; script.js), and the
   paper application (section.paper-app): hidden on screen, it is what
   prints from this page once script.js has filled in the waiver text
   (body.has-paper-app). Page 1 = the application, page 2 = the waiver laid
   out like the League's PDF with signature lines.
   ===================================================================== */
.waiver-minor { margin-top: 1rem; padding-top: .9rem; border-top: 2px dashed rgba(60,45,20,.25); }
.waiver-minor-title { text-align: center; }
.paper-app { display: none; }
@media print {
  body.has-paper-app > *:not(.paper-app) { display: none !important; }
  body.has-paper-app { background: #fff !important; }
  body.has-paper-app .paper-app { display: block; color: #000; font: 10pt/1.35 Georgia, "Times New Roman", serif; }
  @page { size: letter; margin: .5in; }
  .paper-page { page-break-after: always; break-after: page; }
  .paper-page:last-child { page-break-after: auto; break-after: auto; }
  .paper-head { display: flex; align-items: center; gap: 1rem; border-bottom: 2px solid #000; padding-bottom: .4rem; margin-bottom: .6rem; }
  .paper-head img { height: 44px; width: auto; }
  .paper-app h2 { font: 700 11pt/1.2 Georgia, serif; margin: .9rem 0 .35rem; text-transform: uppercase; letter-spacing: .04em; }
  .paper-note { border: 1px solid #000; padding: .35rem .5rem; font-size: 9pt; margin: .4rem 0; }
  .paper-small { font-size: 8.5pt; margin: .2rem 0; }
  .paper-choice { display: flex; gap: 2.5rem; font-size: 11pt; margin: .2rem 0; }
  .paper-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .paper-table th, .paper-table td { border: 1px solid #000; padding: .15rem .3rem; text-align: left; }
  /* Seven members (two adults and five kids fit), each row tall enough
     for two lines of handwriting; most room for the email. */
  .paper-table { table-layout: fixed; }
  .paper-table td { height: 3.3em; }
  .paper-table .c-num { width: 1.6em; }
  .paper-table .c-name { width: 28%; }
  .paper-table .c-birth { width: 16%; }
  .paper-table .c-phone { width: 16%; }
  .paper-table th { font-size: 8pt; overflow-wrap: anywhere; }
  .paper-table td:first-child, .paper-table th:first-child { width: 1.6em; text-align: center; }
  .pl { display: flex; align-items: flex-end; gap: .4rem; margin: .55rem 0 0; font-size: 8pt; font-weight: 700; }
  .pl .ln { flex: 1 1 auto; border-bottom: 1px solid #000; min-height: 1.1em; }
  .pl .ln-short { flex: 0 0 9rem; }
  .pl-l, .pl-r { white-space: nowrap; }
  .pl-cap { display: flex; justify-content: space-around; font-size: 6.5pt; margin-left: 4.5rem; }
  .paper-waiver { font-size: 7.6pt; line-height: 1.28; }
  .paper-waiver .paper-note { font-size: 8pt; }
  .paper-wtitle, .paper-mtitle { text-align: center; font-weight: 700; margin: 0 0 .35rem; }
  .paper-wtitle span, .paper-mtitle span { font-weight: 400; }
  .paper-mtitle { margin-top: .8rem; }
  .paper-wtext p { margin: 0 0 .3rem; }
  .paper-foot { margin-top: .6rem; font-size: 7pt; text-align: right; }
}

/* ===== Donation thank-you page (donation-thanks.html) =====================
   PayPal's Donate button sends donors here. A handwritten thank-you card
   pinned to the beadboard wall (.thanks-wall is in the shared beadboard
   rule), with a small bicycle flying a THANKS! pennant. The wheels spin
   once and the bike rolls in when the page opens; visitors who turn off
   motion in their device settings see it standing still. */
.thanks-wall { overflow-x: clip; }   /* the lifted panel's shadow may spill past a phone's edge */
.thanks-card {
  --ink: #1d3570;                       /* blue ballpoint, like the index cards */
  position: relative;
  isolation: isolate;                   /* keeps the paper layers below behind the writing */
  display: grid;
  grid-template-rows: 1fr 1fr;          /* both halves always the same height */
  max-width: 720px;
  margin: 1.5rem auto 0;
  transform: rotate(-.6deg);
  text-align: center;
}
/* Folded like a greeting card opened on the wall. The card itself paints
   no paper: ::before is the flat lower panel (the letter), and
   .thanks-front is the upper panel (bike + title), hinged at the crease
   and lifted off the wall toward its top edge. Its sides stay parallel;
   what sells the lift is the shadow (.thanks-front::after): it peeks out
   on the right and grows longer and darker toward the top, where the
   panel stands farthest off the wall, and fades to nothing at the crease.
   Tune --lift: bigger = the panel looks lifted higher. */
.thanks-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 4px;
  background: #fffdf8;
  box-shadow: 0 2px 3px rgba(60,45,20,.14), 0 10px 22px rgba(60,45,20,.14);
}
.thanks-front {
  --lift: 6deg;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;              /* bike + title centered on the front */
  padding: 2.4rem 3rem 1.6rem;
}
.thanks-inside { display: flex; flex-direction: column; justify-content: center; padding: 1.8rem 3rem 2rem; }
.thanks-front::before {                 /* the paper */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 4px 4px 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,135,30,.07), rgba(232,135,30,0) 60%),
    linear-gradient(180deg, #fffffd 0%, #fffdf8 calc(100% - 26px), #f4eddd calc(100% - 8px), #e9dfc8 100%);  /* bright up top, shading into the crease */
  box-shadow: 0 1px 1px rgba(60,45,20,.12);
}
.thanks-front::after {                  /* its shadow on the wall and the lower panel */
  content: "";
  position: absolute;
  inset: 6px 2px 0 6px;
  z-index: -2;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(50,36,14,.5) 0%, rgba(50,36,14,.28) 50%, rgba(50,36,14,0) 100%);
  transform-origin: 50% 100%;
  transform: skewX(calc(var(--lift) * -1)) scaleY(1.02);
  filter: blur(7px);
}
.thanks-bike { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto .4rem; overflow: visible; }
.thanks-bike .tb-tire   { fill: none; stroke: var(--hrbc-slate); stroke-width: 6; }
.thanks-bike .tb-rim    { fill: none; stroke: #9aa3aa; stroke-width: 1.5; }
.thanks-bike .tb-spokes { fill: none; stroke: #9aa3aa; stroke-width: 1.2; }
.thanks-bike .tb-hub    { fill: var(--hrbc-slate); }
.thanks-bike .tb-frame  { fill: none; stroke: var(--hrbc-amber); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.thanks-bike .tb-parts  { fill: none; stroke: var(--hrbc-slate); stroke-width: 5; stroke-linecap: round; }
.thanks-bike .tb-crank  { fill: #fffdf8; stroke: var(--hrbc-slate); stroke-width: 3; }
.thanks-bike .tb-heart  { fill: #d32a1f; }
.thanks-bike .tb-pole   { stroke: #6b5a3a; stroke-width: 2.5; stroke-linecap: round; }
.thanks-bike .tb-flag   { fill: #d32a1f; }
.thanks-bike .tb-flag-text { fill: #fffdf8; font-family: "Permanent Marker", "Kalam", cursive; font-size: 19px; letter-spacing: .04em; }
.thanks-bike .tb-finial { fill: #c9a227; }
.thanks-title {
  margin: .2rem 0 .8rem;
  font-family: "Kalam", cursive;
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--ink);
}
.thanks-letter {
  max-width: 34rem;
  margin: 0 auto;
  font-family: "Kalam", cursive;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
}
.thanks-letter p { margin-bottom: .9rem; }
.thanks-sign { margin-top: 1.2rem; text-align: right; }
.thanks-sign span { display: inline-block; font-weight: 700; }
.thanks-records {                      /* a typed tag tacked to the wall under the card */
  position: relative;
  max-width: 30rem;
  margin: 2.2rem auto 0;
  padding: 1.1rem 1.3rem .9rem;
  background: #fdfdf9;
  box-shadow: 0 2px 3px rgba(60,45,20,.14), 0 6px 14px rgba(60,45,20,.1);
  transform: rotate(.8deg);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .9rem;
  line-height: 1.55;
  color: #4a535b;
  text-align: left;
}
.thanks-records p { margin-bottom: .5rem; }
.thanks-next {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.6rem;
}
.thanks-next a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .95rem;
  border: 2px solid rgba(63,106,132,.35);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--hrbc-green-dark);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.thanks-next a:hover, .thanks-next a:focus-visible { background: #eef2f5; border-color: var(--hrbc-green); }

@media (prefers-reduced-motion: no-preference) {
  .thanks-bike { animation: thanks-roll-in 1.6s cubic-bezier(.2,.7,.3,1) both; }
  .thanks-bike .tb-wheel { transform-box: fill-box; transform-origin: center; animation: thanks-spin 1.6s cubic-bezier(.2,.7,.3,1) both; }
  .thanks-bike .tb-pennant { transform-box: view-box; transform-origin: 50px -9px; animation: thanks-flutter 1.2s ease-in-out 1.4s 3; }
}
@keyframes thanks-roll-in { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes thanks-spin { from { transform: rotate(-540deg); } to { transform: rotate(0); } }
@keyframes thanks-flutter { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(-4deg); } }

@media (max-width: 575.98px) {
  .thanks-card { transform: none; }
  .thanks-front { --lift: 4deg; padding: 2rem 1.5rem 1.2rem; }
  .thanks-inside { padding: 1.5rem 1.5rem 1.6rem; }
  .thanks-title { font-size: 2.1rem; }
  .thanks-letter { font-size: 1.15rem; }
}

/* Spam-check pop-up (contact.html; initSpamPopup() in js/script.js):
   a slip of the contact page's letter paper, placed over the form. */
.modal-hrbc { background: #fffdf8; border: 0; border-top: 4px solid var(--hrbc-green-dark); border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.modal-hrbc .modal-footer { border-top: 1px dashed #d9d2c3; }
.modal-title-hrbc { font-size: 1.5rem; color: var(--hrbc-green-dark); margin-bottom: .6rem; }
#spamCheck .modal-dialog { transition: none; }
#spamCheck.fade .modal-dialog { transform: none; }

/* Upcoming Rides: a couple of lines' more room under the tickets before
   the next section (Oct 15, 2026). */
.rides-section { padding-bottom: calc(1.5rem + 1.5em); }
.home-sections .rides-section { padding-bottom: calc(1.25rem + var(--wide-grow) + 1.5em); }

/* Upcoming Rides ticket: time at the left and the place's name at the
   right on one line (Oct 14, 2026), leaving more room for the ride details.
   A long name is cut short with "..." (the full name shows on hover and on
   the pop-up card). */
.ride-card-when { display: flex; align-items: baseline; gap: .75rem; }
.ride-card-when .ride-card-time { flex: 0 0 auto; white-space: nowrap; }
.ride-card-when .ride-card-loc { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

/* Ticket: "Distance:", "Average Speed:", "Ride Leader:", "Map:" a shade
   darker and a touch heavier than the text after them. */
.ride-card-inner .ride-card-desc .ride-card-label { color: #2f2a22; font-weight: 600; }

/* A ticket keeps its set width: without this, a long unbroken line (a
   long place or map name) would stretch the ticket instead of ending in
   "..." (flex items won't shrink below their content unless told). */
.ride-card { min-width: 0; }
.ride-card-inner, .ride-card-header, .ride-card-body { min-width: 0; }

/* Spam-check pop-up: never wider than the screen minus a margin, so on a
   phone it can sit centered over the form. */
#spamCheck .modal-dialog { width: min(300px, calc(100vw - 16px)); max-width: none; }

/* Ticket title on one line; a long one ends in "..." like the place and
   map names (full title on hover and on the pop-up card). Oct 15, 2026. */
.ride-card-header .card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: .12em; }   /* room for the script font's descenders (g, y) */

/* Ticket: the ride's facts in two lines (ticketCompactStats() in
   js/script.js): Ride Leader, then Distance (+ "Map...") at the left and
   Avg Speed at the right, matching the time/place line above. On a very
   narrow screen Avg Speed drops to its own line. */
.ride-card-stats { display: block; margin-bottom: .55em; }
.ride-card-statrow { display: flex; flex-wrap: wrap; column-gap: .75rem; }
.ride-card-statright { margin-left: auto; white-space: nowrap; }
.ride-card-mapflag { margin-left: .6em; color: #2f2a22; font-weight: 600; }
.ride-card-statright.is-wrapped { margin-left: 0; }   /* dropped a line: under Distance (alignWrappedSpeed()) */

/* Ticket, Oct 15, 2026: the last line is "Click for more info" (on touch
   screens "Tap for more info"), centered, on every ticket; the text above
   stops short of it and fades out when cut off. Replaces the old
   bottom-right "More ->" that only showed over cut-off text. */
.ride-card-body { margin-bottom: 1.35rem; }
.ride-card-body.is-cut {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent);
}
.ride-card-more {
  height: auto; bottom: .7rem; left: calc(var(--stub) + 1rem); right: 1rem;
  justify-content: center; align-items: center; background: none;
  font-family: "Kalam", cursive; font-weight: 700; font-size: .95rem; line-height: 1.2;
  color: #b3261e;
}
.ride-card-more .more-tap { display: none; }
@media (hover: none) {
  .ride-card-more .more-click { display: none; }
  .ride-card-more .more-tap { display: inline; }
}

/* Calendar day squares keep one size (Oct 15, 2026): a day with two or
   more rides shows each on one line (full title on hover; the pop-up has
   everything), up to three fit, four or more show two plus "+N more", so no row
   grows taller than the others. Phones show dots instead, as before. */
@media (min-width: 768px) {
  .cal-day { height: 6.6rem; overflow: hidden; }
  .cal-day.is-busy .cal-ev { -webkit-line-clamp: 1; }
}

/* Pop-up ride card titles (calendar and home page): fill each line before
   wrapping. Headings site-wide use text-wrap: balance, which splits a long
   ride title into two half-empty lines. A bit smaller, too. Oct 15, 2026. */
.note-dialog .cal-card .note-title { text-wrap: wrap; font-size: 1.6rem; }

/* =====================================================================
   Ride with GPS page (ride-with-gps.html, Oct 15, 2026): the steps as a
   paper cue sheet (mileage | turn | what to do), typewritten, on a pale
   road-map backdrop; "Good to know" on an index card beside it.
   ===================================================================== */
.rwgps-wall { padding-block: 2.5rem 3.5rem; background: linear-gradient(180deg, #eef2ec, #e4ebe2); }
.cue-sheet {
  background: #fffef8; border-radius: 3px; padding: 1.4rem 1.4rem 1.1rem;
  box-shadow: 0 2px 3px rgba(60,45,20,.14), 0 14px 30px rgba(60,45,20,.16);
  transform: rotate(-.4deg);
}
.cue-head {
  display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--hrbc-slate);
  font-family: "Special Elite", "Courier New", monospace; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
}
.cue-title {
  margin: 0 0 .35rem; text-align: center;
  font-family: "Special Elite", "Courier New", monospace; font-size: 1.25rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--hrbc-slate);
}
.cue-list { list-style: none; margin: 0; padding: 0; }
.cue-head span:first-child { font-size: 1rem; letter-spacing: .04em; }
.cue-head .cue-total { font-weight: 700; color: #b3261e; }
/* Leg | Dir | Notes | Total, like a printed cue sheet. Columns are placed
   explicitly so the DOM can stay in reading order. */
.cue-cols, .cue {
  display: grid; grid-template-columns: 3rem 3.6rem 1fr 4.2rem; gap: .2rem .75rem; align-items: baseline;
  margin: 0 -1.4rem; padding-inline: 1.4rem;
}
.cue-cols {
  padding-block: .45rem; border-bottom: 1px solid #b3ab98;
  font-family: "Special Elite", "Courier New", monospace; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hrbc-slate);
}
.cue-cols span:nth-child(1), .cue-cols span:nth-child(4) { text-align: right; }
.cue { padding-block: .75rem; }
.cue:nth-child(even) { background: #efede4; }
.cue-leg { grid-column: 1; grid-row: 1; }
.cue-dir { grid-column: 2; grid-row: 1; }
.cue-text { grid-column: 3; grid-row: 1; }
.cue-mi { grid-column: 4; grid-row: 1; }
.cue-leg, .cue-mi { text-align: right; }
.cue-leg, .cue-mi, .cue-dir { font-family: "Special Elite", "Courier New", monospace; color: #6b6150; }
.cue-mi { font-weight: 700; color: var(--hrbc-slate); }
.cue-dir { font-weight: 700; color: #b3261e; white-space: nowrap; }
.cue-text { line-height: 1.5; }
.cue-text strong { color: var(--hrbc-slate); }
.cue-end { border-bottom: 0; }
.cue-foot { margin: .9rem 0 0; font-size: .95rem; text-align: center; }
.rwgps-facts {
  background: #fdfdf9; border-radius: 3px; padding: 1.4rem 1.5rem;
  box-shadow: 0 2px 3px rgba(60,45,20,.12), 0 10px 24px rgba(60,45,20,.12);
  border-top: 4px solid var(--hrbc-green-dark);
}
.rwgps-facts dt { margin-top: .9rem; color: var(--hrbc-green-dark); }
.rwgps-facts dt:first-child { margin-top: .2rem; }
.rwgps-facts dd { margin: .2rem 0 0; }
@media (max-width: 575.98px) {
  .cue, .cue-cols { grid-template-columns: 2.3rem 2.8rem 1fr 3.1rem; gap: .2rem .5rem; margin-inline: -1rem; padding-inline: 1rem; }
  .cue-sheet { transform: none; padding: 1.1rem 1rem .9rem; }
}
.rwgps-perks { margin: .35rem 0 .4rem; padding-left: 1.2rem; }