/* KVCN public-site polish layer. Loaded after page-local styles. */
:root {
  /* --container-max lives in tokens.css (1240px). Redefining it here shadowed
     the token and pinned every .wrap to 1080 no matter what tokens.css said. */
  --space-16: 72px;
  --space-20: 96px;
  --surface-hover: #f0f4f9;
}

html { overflow-x: hidden; }
body { overflow-x: hidden; }
.wrap { max-width: var(--container-max); padding-inline: var(--space-5); }

/* One calm type hierarchy and reading measure. */
body { font-size: var(--text-base); line-height: var(--leading-body); }
h1 { line-height: var(--leading-tight); }
h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); }
.sub, .mission-grid p, .card p { max-width: 68ch; line-height: var(--leading-body); }

/* Replace the generic gradient treatment with a single solid brand plane. */
/* FELT, and Kiwanis blue rather than near-black. --blue-deep is navy-900
   (#071d40), relative luminance 0.007, which is the 'overtly dark' ruled out
   across the estate on 2026-09-04. #12406F is still club blue: white measures
   10.56:1 on it and the Kiwanis gold 6.77:1. The woven nap lives here too,
   because this rule uses the `background` shorthand and loads last, so setting
   the nap anywhere else was silently reset. */
.hero {
  background-color: #12406F;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
}
section { padding-block: clamp(56px, 7vw, var(--space-16)); }

/* Shared component language. */
.card, .platform, .endorse {
  border-radius: var(--radius-md);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.card:hover, .platform:hover, .endorse:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}
.btn {
  min-height: var(--tap-target-min);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navlinks a, .btn, .platform { transition: all var(--dur-fast) var(--ease-out); }
.navlinks a:focus-visible, .btn:focus-visible, .platform:focus-visible,
.lightbox .close:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.navlinks a { min-height: var(--tap-target-min); display: inline-flex; align-items: center; }

@media (max-width: 760px) {
  .wrap { padding-inline: var(--space-4); }
  .hero { padding-block: 64px 72px; }
  .hero h1 { font-size: clamp(36px, 11vw, 52px); }
  .hero p.lead { font-size: var(--text-md); }
  .navlinks { margin-inline: -var(--space-4); padding-inline: var(--space-4); }
}


/* THE HERO WAS ONE LEFT COLUMN WITH AN EMPTY RIGHT HALF (2026-09-04).
   Grid placement only, so the markup is untouched. The crest is heraldry and
   belongs opposite the wordmark, not stacked above it, and moving it right
   fills the fold instead of leaving half the banner blank. */
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  column-gap: 48px;
  align-items: center;
}
.hero .wrap > * { grid-column: 1; }
.hero .hero-crest {
  grid-column: 2;
  grid-row: 1 / span 6;
  justify-self: center;
  align-self: center;
  margin: 0;
}
.hero .hero-crest img { width: min(300px, 100%); height: auto; }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .hero-crest { grid-column: 1; grid-row: auto; justify-self: start; }
  .hero .hero-crest img { width: 190px; }
}


/* ---------------------------------------------------------------------------
   THE PENNANTS GET STITCHED (added 2026-09-05)
   Direction 5: charter date, district and headquarters set as stitched pennant
   text. Stitching is a process, so the three pennants arrive in sequence and
   the crest settles onto the felt rather than being printed there.
   --------------------------------------------------------------------------- */
.hero .pill { opacity: 0; transform: translateX(-10px);
  animation: kv-stitch .5s ease-out forwards; }
.hero .pill:nth-of-type(1) { animation-delay: .75s; }
.hero .pill:nth-of-type(2) { animation-delay: 1.05s; }
.hero .pill:nth-of-type(3) { animation-delay: 1.35s; }
@keyframes kv-stitch { to { opacity: 1; transform: translateX(0); } }

.hero .charter { opacity: 0; animation: kv-fade .5s ease-out .5s forwards; }
@keyframes kv-fade { to { opacity: 1; } }

.hero .hero-crest { opacity: 0; transform: translateY(-8px) rotate(-2deg);
  animation: kv-settle .7s cubic-bezier(.2,1.2,.35,1) .2s forwards; }
@keyframes kv-settle { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero .pill, .hero .charter, .hero .hero-crest {
    opacity: 1; transform: none; animation: none; }
}