/* ========================================================================
   SOUTHERN OHIO SOLES | kraft-contour.css
   ------------------------------------------------------------------------
   "Kraft & Contour" design language for the public site. Public pages only:
   no portal page loads this file, and it does not load or depend on
   landing.css, main.css or portals.css.

   It is a standalone sheet (the homepage loads it in place of
   public-site.css), so nothing here has to out-specify the older layers.

   Structure
     1. Tokens
     2. Base + type
     3. Shared controls (buttons, links, focus)
     4. Site chrome (header, dropdowns, mobile overlay, footer, fab, game)
     5. Homepage sections (scoped to .kc-home)
     6. Motion (reveals, hero settle, contour drift), reduced-motion off

   Signature elements, used sparingly:
     A) Shoebox end-label: 1.5px ink frame split by hairlines into cells.
        Our Work steps and the donation widget ONLY.
     B) Contour lines: assets/images/contours.svg, on dark bands only
        (hero overlay, Where We Serve, footer).
     C) Stitch rule: dashed hairline, footer column dividers and under
        headings on kraft bands.
     D) Band textures, one per homepage band, all abstracted from a shoe
        and pressed tone-on-tone in black at low opacity: outsole tread
        (Advocate, clay), toe-box perforations (Our Work), honeycomb
        outsole (Student Representatives), midsole waves (Who We Are).
   ======================================================================== */

/* ------------------------------------------------------------------ 1 */
:root {
  --hollow:     #1C2420;
  --hollow-2:   #26302A;
  --paper:      #F6F1E8;
  --kraft:      #E6D7BE;
  --kraft-line: #CDB998;
  --ink:        #1D1A16;
  --ink-soft:   #5B544B;
  --clay:       #C8643A;
  --clay-deep:  #A24E28;
  --clay-press: #8C4120;
  --clay-light: #D98057;   /* small clay text on hollow: 5.43:1 (clay itself is 4.04:1) */
  --cream:      #F6F1E8;
  --cream-soft: rgba(246, 241, 232, 0.8);
  --cream-line: rgba(246, 241, 232, 0.2);
  --stitch:     rgba(246, 241, 232, 0.34);
  --error:      #8E2F1C;
  --ok:         #2F4A3E;
  --muted:      var(--ink-soft);   /* referenced by inline styles in pages.js and sos-news */

  --serif: 'League Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* 4pt scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  --gutter: 20px;
  --wrap: 1200px;
  --band-y: clamp(64px, 8vw, 112px);
  --header-h: 68px;
  --rule: 1.5px;
  --radius: 2px;

  --t-ui: 180ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 640px) {
  :root { --gutter: 40px; }
}
@media (min-width: 1024px) {
  :root { --header-h: 80px; }
}

/* ------------------------------------------------------------------ 2 */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.kc {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.kc img {
  max-width: 100%; display: block;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.kc a { color: inherit; }
.kc :is(button, input, select, textarea) { font-family: var(--sans); }
.kc :is(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: inherit;
}
.kc h2 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; }
.kc h3 { font-size: 1.375rem; line-height: 1.1; }
.kc p { margin: 0; max-width: 62ch; }
.kc figure { margin: 0; }
.kc [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.kc .sos-shell {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* "Shoebox label" voice: small caps-locked League Spartan. */
.kc .kc-label,
.kc .sos-county-label,
.kc .sos-representatives__status-label,
.kc .ln-footer__h,
.kc .ln-mobile__label,
.kc .sos-mobile-title {
  font-family: var(--serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.kc .sos-skip {
  position: fixed; top: -100px; left: var(--gutter); z-index: 300;
  padding: 10px 16px; background: var(--paper); color: var(--ink);
  border: var(--rule) solid var(--ink); font-weight: 600; text-decoration: none;
}
.kc .sos-skip:focus { top: 12px; }
.kc main:focus { outline: none; }

/* ------------------------------------------------------------------ 3 */
/* Focus: 2px clay ring, 3px offset. Swapped per band where clay would
   disappear (kraft: clay-deep; clay-deep band: cream). */
.kc :focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.kc .donate-card :focus-visible { outline-color: var(--clay-deep); }
.kc .sos-advocate :focus-visible { outline-color: var(--cream); }

.kc .ln-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  border: var(--rule) solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease, color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}
.kc .ln-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kc .ln-btn--lg { min-height: 52px; padding: 14px 28px; font-size: 1.125rem; }
.kc .ln-btn--sm { min-height: 44px; padding: 10px 18px; font-size: 1rem; }
.kc .ln-btn--block { width: 100%; }
.kc .ln-btn--clay { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--cream); }
.kc .ln-btn--clay:hover { background: var(--clay-press); border-color: var(--clay-press); }
.kc .ln-btn--ghost-light { background: transparent; border-color: var(--cream); color: var(--cream); }
.kc .ln-btn--ghost-light:hover { background: var(--cream); color: var(--ink); }
/* Pressed: a slight inset, no bounce. */
.kc .ln-btn:active { box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.22); transform: translateY(1px); }

/* Text links: underline draws in from the left on hover / focus. */
.kc .sos-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: var(--s6);
  font-family: var(--serif); font-size: 1.125rem; font-weight: 700; letter-spacing: 0;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat;
  transition: background-size 220ms var(--ease-out), color var(--t-ui) ease;
}
.kc .sos-link:hover, .kc .sos-link:focus-visible { background-size: calc(100% - 26px) 1.5px; }
.kc .sos-link span { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
.kc .sos-link:hover span { transform: translateX(6px); }

/* ------------------------------------------------------------------ 4 */
/* Header */
.kc .sos-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid rgba(29, 26, 22, 0.14);
  color: var(--ink);
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}
.kc .sos-header__inner {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  min-height: var(--header-h);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
}
.kc .ln-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; min-height: 44px; }
.kc .sos-header .ln-logo img { width: 44px; height: 44px; object-fit: contain; }
.kc .ln-logo__name { font-family: var(--serif); font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
@media (max-width: 1023px) {
  .kc .sos-header .ln-logo__name {
    white-space: nowrap;
    font-size: clamp(1.125rem, 5.6vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 0.005em;
    line-height: 0.92;
  }
  .kc .sos-header__inner { gap: 12px; }
  .kc .ln-burger { flex-shrink: 0; }
}
.kc .sos-header__links { display: none; align-items: center; gap: 2px; margin-inline: auto; }
.kc .ln-navitem { position: relative; }
.kc .ln-navlink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 14px;
  background: none; border: 0; border-radius: var(--radius);
  color: inherit; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 14px calc(100% - 8px); background-size: 0 1.5px;
  transition: background-size 220ms var(--ease-out);
}
.kc .ln-navlink:hover, .kc .ln-navitem.open > .ln-navlink { background-size: calc(100% - 28px) 1.5px; }
.kc .ln-navlink[aria-current="page"] { background-size: calc(100% - 28px) 1.5px; }
.kc .ln-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-ui) ease; }
.kc .ln-navitem.open .ln-chev { transform: rotate(180deg); }

.kc .ln-drop {
  position: absolute; top: calc(100% + 10px); left: 50%;
  min-width: 300px; padding: 6px;
  background: var(--paper); color: var(--ink);
  border: var(--rule) solid var(--ink); border-radius: var(--radius);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity var(--t-ui) ease, transform var(--t-ui) ease, visibility var(--t-ui);
}
.kc .ln-drop::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.kc .ln-navitem.open .ln-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.kc .ln-drop__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 12px;
  text-decoration: none; border-radius: var(--radius);
  transition: background-color var(--t-ui) ease;
}
.kc .ln-drop__item + .ln-drop__item { border-top: 1px solid rgba(29, 26, 22, 0.12); }
.kc .ln-drop__item:hover { background: var(--kraft); }
.kc .ln-drop__ic { display: flex; flex: 0 0 auto; }
.kc .ln-drop__ic svg { width: 18px; height: 18px; fill: none; stroke: var(--clay-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kc .ln-drop__t { font-weight: 600; font-size: 0.9375rem; }

.kc .sos-header__actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.kc .sos-nav-contact,
.kc .sos-nav-portal {
  display: none; align-items: center; gap: 7px;
  min-height: 44px; padding: 10px 10px;
  color: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 10px calc(100% - 8px) / 0 1.5px no-repeat;
  transition: background-size 220ms var(--ease-out);
}
.kc .sos-nav-contact:hover, .kc .sos-nav-portal:hover { background-size: calc(100% - 20px) 1.5px; }
.kc .sos-nav-contact svg, .kc .sos-nav-portal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kc .sos-nav-donate { display: none; margin-left: 8px; }

.kc .ln-burger {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: var(--rule) solid currentColor; border-radius: var(--radius);
  color: inherit; cursor: pointer;
}
.kc .ln-burger span { width: 18px; height: 2px; background: currentColor; transition: transform var(--t-ui) ease, opacity var(--t-ui) ease; }

@media (min-width: 1024px) {
  .kc .sos-header .ln-logo img { width: 52px; height: 52px; }
  .kc .ln-logo__name { font-size: 1.1875rem; }
  .kc .sos-header__links { display: flex; }
  .kc .sos-nav-contact, .kc .sos-nav-portal { display: inline-flex; }
  .kc .sos-nav-donate { display: inline-flex; }
  .kc .ln-burger { display: none; }
}
@media (min-width: 1024px) and (max-width: 1159px) {
  .kc .sos-header__inner { gap: 8px; }
  .kc .ln-navlink { padding-inline: 10px; background-position-x: 10px; }
  .kc .ln-navlink:hover, .kc .ln-navitem.open > .ln-navlink, .kc .ln-navlink[aria-current="page"] { background-size: calc(100% - 20px) 1.5px; }
  .kc .sos-nav-contact span { display: none; }
}

/* Mobile menu: full-screen hollow overlay, large League Spartan links. */
.kc .ln-mobile {
  position: fixed; inset: 0; z-index: 120;
  width: 100%;
  padding: 24px var(--gutter) 48px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--hollow); color: var(--cream);
  /* Opens as a circle growing out of the menu button and closes back into
     it. Visible at once on open (so focus can move to the close button),
     hidden only after the circle has shrunk on close. */
  --menu-origin: calc(100% - var(--gutter) - 22px) calc(var(--header-h) / 2);
  clip-path: circle(0 at var(--menu-origin));
  visibility: hidden;
  transition: clip-path 360ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 360ms;
}
.kc .ln-mobile.open {
  clip-path: circle(150vmax at var(--menu-origin));
  visibility: visible;
  transition: clip-path 560ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}
/* The title, labels and links rise in one after another once the circle is
   under way, and drop back out together (no stagger) on close. */
.kc .ln-mobile :is(.sos-mobile-title, .sos-mobile-close, .ln-mobile__links > *) {
  opacity: 0; transform: translateY(14px);
  transition: opacity 160ms ease, transform 160ms ease, color var(--t-ui) ease, background-color var(--t-ui) ease, border-color var(--t-ui) ease;
}
.kc .ln-mobile.open :is(.sos-mobile-title, .sos-mobile-close, .ln-mobile__links > *) {
  opacity: 1; transform: none;
  transition: opacity 380ms ease, transform 460ms var(--ease-out), color var(--t-ui) ease, background-color var(--t-ui) ease, border-color var(--t-ui) ease;
  transition-delay: calc(140ms + var(--i, 0) * 32ms), calc(140ms + var(--i, 0) * 32ms), 0s, 0s, 0s;
}
.kc .ln-mobile__links > :nth-child(1) { --i: 1; }
.kc .ln-mobile__links > :nth-child(2) { --i: 2; }
.kc .ln-mobile__links > :nth-child(3) { --i: 3; }
.kc .ln-mobile__links > :nth-child(4) { --i: 4; }
.kc .ln-mobile__links > :nth-child(5) { --i: 5; }
.kc .ln-mobile__links > :nth-child(6) { --i: 6; }
.kc .ln-mobile__links > :nth-child(7) { --i: 7; }
.kc .ln-mobile__links > :nth-child(8) { --i: 8; }
.kc .ln-mobile__links > :nth-child(9) { --i: 9; }
.kc .ln-mobile__links > :nth-child(10) { --i: 10; }
.kc .ln-mobile__links > :nth-child(11) { --i: 11; }
.kc .ln-mobile__links > :nth-child(12) { --i: 12; }
.kc .ln-mobile__links > :nth-child(13) { --i: 13; }
.kc .ln-mobile__links > :nth-child(14) { --i: 14; }
.kc .sos-mobile-title { margin: 0 0 32px; min-height: 44px; display: flex; align-items: center; color: var(--cream-soft); }
.kc .sos-mobile-close {
  position: absolute; top: 24px; right: var(--gutter);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: var(--rule) solid var(--cream-line); border-radius: var(--radius);
  color: var(--cream); font-size: 28px; line-height: 1; cursor: pointer;
}
.kc .sos-mobile-close:hover { border-color: var(--cream); }
.kc .ln-mobile__links { display: flex; flex-direction: column; }
.kc .ln-mobile__label { margin: 32px 0 8px; color: var(--clay-light); }
.kc .ln-mobile__label:first-child { margin-top: 0; }
.kc .ln-mobile__links a {
  display: block; padding: 10px 0;
  font-family: var(--serif); font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid var(--cream-line);
  transition: color var(--t-ui) ease;
}
.kc .ln-mobile__links a:hover, .kc .ln-mobile__links a[aria-current="page"] { color: var(--clay); }
.kc .ln-mobile__links .sos-mobile-donate {
  margin-top: 32px; padding: 16px 20px; border: 0;
  background: var(--clay-deep); color: var(--cream); text-align: center;
  border-radius: var(--radius);
}
.kc .ln-mobile__links .sos-mobile-donate:hover { background: var(--clay-press); color: var(--cream); }
.kc .ln-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(28, 36, 32, 0.4); }

/* Footer: hollow with contours, big wordmark, stitch rules between columns. */
.kc .ln-footer {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(64px, 8vw, 112px) 32px;
  background: var(--hollow); color: var(--cream-soft);
}
.kc .ln-footer::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('../assets/images/contours.svg') center / cover no-repeat;
}
.kc .ln-footer__card { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.kc .ln-footer__top { display: grid; gap: 48px; padding-bottom: 48px; border-bottom: 1px dashed var(--stitch); }
.kc .ln-logo--footer { gap: clamp(16px, 2vw, 24px); }
.kc .ln-logo--footer img { width: clamp(96px, 12vw, 148px); height: auto; aspect-ratio: 1008 / 1080; flex: 0 0 auto; }
.kc .ln-logo--footer .ln-logo__name {
  color: var(--cream); white-space: normal;
  font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.92;
}
.kc .ln-footer__mission { margin: 24px 0 0; max-width: 46ch; color: var(--cream-soft); font-size: 1rem; line-height: 1.6; }
.kc .ln-footer__contact { margin-top: 28px; }
.kc .ln-footer__contact svg { width: 16px; height: 16px; }
.kc .ln-footer__social { display: flex; gap: 8px; margin-top: 24px; }
.kc .ln-footer__social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--cream-line); border-radius: var(--radius);
  transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease;
}
.kc .ln-footer__social a:hover { border-color: var(--cream); }
.kc .ln-footer__social svg { width: 18px; height: 18px; fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kc .ln-footer__nav { display: grid; grid-template-columns: 1fr; }
.kc .ln-footer__nav > div { padding-block: 24px; border-top: 1px dashed var(--stitch); }
.kc .ln-footer__nav > div:first-child { border-top: 0; padding-top: 0; }
.kc .ln-footer__h { margin: 0 0 12px; color: var(--clay-light); }
.kc .ln-footer__nav a,
.kc .ln-footer__bottom a {
  color: var(--cream); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 220ms var(--ease-out);
}
.kc .ln-footer__nav a { display: block; width: fit-content; padding-block: 10px; font-size: 1rem; background-position: 0 calc(100% - 8px); }
.kc .ln-footer__nav a:hover, .kc .ln-footer__bottom a:hover { background-size: 100% 1px; }
.kc .ln-footer__bottom {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 28px;
  font-size: 0.875rem; line-height: 1.6; color: var(--cream-soft);
}
.kc .ln-footer__legalline, .kc .ln-footer__links { margin: 0; max-width: none; }
.kc .ln-footer__links a { display: inline-flex; align-items: center; min-height: 44px; background-position: 0 calc(100% - 10px); }
.kc .ln-legal__sep { margin-inline: 8px; opacity: 0.5; }
.kc .ln-footer :focus-visible { outline-color: var(--clay); }
@media (min-width: 640px) {
  .kc .ln-footer__nav { grid-template-columns: repeat(3, 1fr); }
  .kc .ln-footer__nav > div,
  .kc .ln-footer__nav > div:first-child { padding: 0 24px; border-top: 0; border-left: 1px dashed var(--stitch); }
  .kc .ln-footer__nav > div:first-child { padding-left: 0; border-left: 0; }
  .kc .ln-footer__bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; }
}
@media (min-width: 1024px) {
  .kc .ln-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; }
  .kc .ln-footer__brand { padding-right: 48px; }
  .kc .ln-footer__nav { padding-left: 48px; border-left: 1px dashed var(--stitch); align-content: start; }
}

/* Floating donate: square-cornered, no glow. */
.kc .ln-fab {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 95;
  display: none; align-items: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  background: var(--clay-deep); color: var(--cream);
  border: var(--rule) solid var(--clay-deep); border-radius: var(--radius);
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 700; text-decoration: none;
  transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease, opacity 250ms ease, visibility 250ms, transform 250ms ease;
}
.kc .ln-fab:hover { background: var(--clay-press); }
/* Over a clay band (toggled in kraft-contour.js): hollow, so it never sits
   clay-on-clay. Cream on hollow is 14.11:1. */
.kc .ln-fab--on-clay { background: var(--hollow); border-color: var(--hollow); color: var(--cream); }
.kc .ln-fab--on-clay:hover { background: var(--ink); border-color: var(--ink); }
.kc .ln-fab svg { width: 16px; height: 16px; fill: currentColor; }
.kc .ln-fab--hidden { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }

/* Hidden county game overlay (Franklin County easter egg in landing.js). */
.kc .ln-game { position: fixed; inset: 0; z-index: 1000; display: none; }
.kc .ln-game.is-open { display: block; }
.kc .ln-game__backdrop { position: absolute; inset: 0; background: rgba(28, 36, 32, 0.9); }
.kc .ln-game__panel { position: absolute; inset: 2.5vh 2.5vw; background: #0e1512; border: var(--rule) solid var(--cream-line); overflow: hidden; }
.kc .ln-game__frame { width: 100%; height: 100%; border: 0; display: block; background: #0e1512; }
.kc .ln-game__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--hollow); border: var(--rule) solid var(--cream-line); border-radius: var(--radius);
  color: var(--cream); font-size: 1.75rem; line-height: 1; cursor: pointer;
}
@media (max-width: 820px) { .kc .ln-game__panel { inset: 0; border: 0; } }

/* ------------------------------------------------------------------ 5 */
/* Homepage. Header floats transparent over the hero, then turns paper. */
.kc-home .sos-header { position: fixed; left: 0; right: 0; }
.kc-home .sos-header:not(.kc-solid) {
  background: transparent; border-bottom-color: transparent; color: var(--cream);
}
.kc-home .sos-header:not(.kc-solid) .ln-btn--clay { border-color: var(--clay-deep); }
@media (max-width: 1023px) {
  .kc .sos-header {
    transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
  }
  body.kc .sos-header.kc-scrolled {
    background: var(--paper);
    color: var(--ink);
    border-bottom-color: rgba(29, 26, 22, 0.1);
    box-shadow: 0 2px 4px rgba(29, 26, 22, 0.05), 0 8px 20px rgba(29, 26, 22, 0.12);
  }
}

.kc-home .sos-section { padding-block: var(--band-y); }
.kc-home .sos-section h2 { margin-bottom: var(--s6); }
.kc-home .sos-section p + p { margin-top: var(--s4); }

/* 1. Hero. The grid wrapper is flattened (display: contents) so the photo,
   its contour overlay and the copy stack in one grid cell. */
.kc-home .sos-hero {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(88vh, auto);
  grid-template-rows: minmax(88svh, auto);
  background: var(--hollow);
}
.kc-home .sos-hero__grid { display: contents; }
.kc-home .sos-hero__background {
  grid-area: 1 / 1; position: relative; display: block; overflow: hidden;
  background: var(--hollow);
}
.kc-home .sos-hero__background img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 40% 60%;
  transform-origin: 40% 60%;
}
.kc-home .sos-hero__background::after {
  /* Scrim, measured against hero-autumn-road.jpg at 375, 768, 1024, 1440
     and 1920:
     every hero text run keeps >= 3:1 at its 5th-percentile pixel (display
     type; the clay "Together" is the binding case, ~3.4:1, since clay tops
     out at 4.04:1 even on pure hollow), the paragraph and the ghost button
     >= 4.5:1. Below 1024 the copy spans the full width and fills the lower
     two thirds, so the scrim is weighted to the bottom; from 1024 the copy
     sits left, so it is weighted left and lighter (never bare) over the
     foliage on the right. Re-measure before changing either. */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(28, 36, 32, 0.55) 0, rgba(28, 36, 32, 0) 140px),
    linear-gradient(to top, rgba(28, 36, 32, 0.92) 0%, rgba(28, 36, 32, 0.9) 64%, rgba(28, 36, 32, 0.6) 84%, rgba(28, 36, 32, 0.45) 100%);
}
@media (min-width: 1024px) {
  /* The left-to-right stops are anchored to where the copy starts (the
     container's left edge), not to the viewport, so the darkest part always
     ends just past the text at any screen width. The ramp never drops below
     0.4 on the right, so the whole photo shares one tint instead of
     splitting into a dark half and a bare half. */
  .kc-home .sos-hero__background::after {
    --copy-l: max(var(--gutter), (100% - var(--wrap)) / 2);
    background:
      linear-gradient(to bottom, rgba(28, 36, 32, 0.5) 0, rgba(28, 36, 32, 0) 160px),
      linear-gradient(to top, rgba(28, 36, 32, 0.4) 0%, rgba(28, 36, 32, 0) 50%),
      linear-gradient(to right,
        rgba(28, 36, 32, 0.9) 0,
        rgba(28, 36, 32, 0.86) calc(var(--copy-l) + 480px),
        rgba(28, 36, 32, 0.6) calc(var(--copy-l) + 820px),
        rgba(28, 36, 32, 0.45) calc(var(--copy-l) + 1180px),
        rgba(28, 36, 32, 0.4) 100%);
  }
}
/* Homepage keeps its photography and section textures without contour lines. */
body.kc-home .sos-hero::before,
body.kc-home .sos-service-area::before,
body.kc-home .ln-footer::before {
  content: none;
}
.kc-home .sos-hero__content {
  grid-area: 1 / 1; z-index: 2; align-self: end;
  width: min(100% - 2 * var(--gutter), var(--wrap)); justify-self: center;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: clamp(48px, 9vw, 120px);
  color: var(--cream);
}
.kc-home .sos-hero h1 {
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0 0 var(--s8);
  font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.03em;
  color: var(--cream);
  overflow-wrap: break-word;
}
.kc-home .sos-hero h1 span:last-child { color: var(--clay); }
.kc-home .kc-portrait-break { display: none; }
@media (max-width: 767px) and (orientation: portrait) {
  .kc-home .sos-hero h1 {
    font-size: clamp(3.5rem, 18vw, 6rem);
    line-height: 0.94;
    margin-bottom: var(--s6);
  }
  .kc-home .kc-portrait-break { display: block; }
}
.kc-home .sos-hero__content p { max-width: 34em; color: var(--cream); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; }
.kc-home .sos-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s8); }
@media (max-width: 479px) {
  .kc-home .sos-actions .ln-btn { flex: 1 1 100%; }
}

/* Make a Donation: its own kraft band, after Who We Are. */
.kc-home .sos-donate { background: var(--kraft); }

/* A. Shoebox end-label: donation widget frame. */
.kc .donate-card {
  --cell: clamp(20px, 3vw, 32px);
  background: var(--paper); color: var(--ink);
  border: var(--rule) solid var(--ink); border-radius: 0;
}
.kc-home .donate-card { display: grid; grid-template-columns: minmax(0, 1fr); }
.kc-home .donate-card > * { margin-inline: var(--cell); }
.kc-home .donate-card .sos-donate-title {
  margin: 0; padding: var(--cell);
  font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800;
  border-bottom: var(--rule) dashed var(--ink); /* tear line on the label */
}
.kc-home .donate-card > .ln-freq { margin-top: var(--cell); }
.kc-home .donate-card > .ln-give-card__fine { margin-bottom: var(--cell); }

.kc .donate-card .ln-freq { display: grid; grid-template-columns: 1fr 1fr; border: var(--rule) solid var(--ink); }
.kc .donate-card .freq-btn {
  min-height: 52px; padding: 8px 12px;
  background: transparent; border: 0; border-radius: 0; color: var(--ink);
  font-family: var(--serif); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background-color var(--t-ui) ease, color var(--t-ui) ease;
}
.kc .donate-card .freq-btn + .freq-btn { border-left: var(--rule) solid var(--ink); }
.kc .donate-card .freq-btn:hover { background: var(--kraft); }
.kc .donate-card .freq-btn.active { background: var(--clay-deep); color: var(--cream); }

.kc .donate-card .amount-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s4);
  border-top: var(--rule) solid var(--ink); border-left: var(--rule) solid var(--ink);
}
.kc .donate-card .amount-btn {
  position: relative; min-height: 64px; padding: 8px;
  background: transparent; color: var(--ink);
  border: 0; border-right: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); border-radius: 0;
  font-family: var(--serif); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; transition: background-color var(--t-ui) ease, color var(--t-ui) ease;
}
.kc .donate-card .amount-btn:hover { background: var(--kraft); }
.kc .donate-card .amount-btn.selected { background: var(--clay-deep); color: var(--cream); }
.kc .donate-card .amount-btn:focus-visible, .kc .donate-card .freq-btn:focus-visible { z-index: 2; }
.kc .donate-card .amount-btn:active, .kc .donate-card .freq-btn:active { box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.18); }

.kc .donate-card .ln-custom { position: relative; margin-top: var(--s4); }
.kc .donate-card .ln-custom .currency {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-weight: 700; font-size: 1.125rem; color: var(--ink-soft); pointer-events: none;
}
.kc .donate-card .custom-amount-input {
  width: 100%; min-height: 56px; padding: 12px 16px 12px 34px;
  background: var(--paper); color: var(--ink);
  border: var(--rule) solid var(--ink); border-radius: 0;
  font-size: 1.0625rem; font-family: var(--sans);
  -moz-appearance: textfield;
}
.kc .donate-card .custom-amount-input::placeholder { color: var(--ink-soft); opacity: 1; }
.kc .donate-card .custom-amount-input:focus { outline: none; }
.kc .donate-card .custom-amount-input:focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 3px; }

.kc .donate-card .ln-check {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: var(--s4); padding-block: 4px;
  color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.5; cursor: pointer;
}
.kc .donate-card .ln-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--ink); cursor: pointer; }
.kc .donate-card .donate-card__submit { margin-top: var(--s5); width: auto; }
.kc .donate-card .donate-error { margin-top: var(--s3); color: var(--error); font-size: 0.9375rem; font-weight: 600; }
.kc .donate-card .ln-give-card__fine { margin-top: var(--s3); color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.5; max-width: none; }

@media (min-width: 640px) and (max-width: 1023px) {
  .kc-home .donate-card { max-width: 720px; }
}
@media (min-width: 1024px) {
  /* Two cells under the heading: choose an amount | complete the gift. */
  .kc-home .donate-card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto 1fr;
  }
  .kc-home .donate-card::before {
    content: ''; grid-column: 2; grid-row: 2 / -1;
    border-left: var(--rule) solid var(--ink);
  }
  .kc-home .donate-card .sos-donate-title { grid-column: 1 / -1; grid-row: 1; }
  .kc-home .donate-card > .ln-freq { grid-column: 1; grid-row: 2; }
  .kc-home .donate-card > .amount-grid { grid-column: 1; grid-row: 3 / span 4; align-self: start; margin-bottom: var(--cell); }
  .kc-home .donate-card > .ln-custom { grid-column: 2; grid-row: 2; margin-top: var(--cell); }
  .kc-home .donate-card > .ln-check { grid-column: 2; grid-row: 3; }
  .kc-home .donate-card > .donate-card__submit { grid-column: 2; grid-row: 4; }
  .kc-home .donate-card > .donate-error { grid-column: 2; grid-row: 5; }
  .kc-home .donate-card > .ln-give-card__fine { grid-column: 2; grid-row: 6; align-self: end; }
  .kc-home .amount-btn { min-height: 76px; }
}

/* Desktop hero uses a compact version of the same donation card. */
.kc-home .sos-hero-donate { display: none; }
@media (min-width: 1024px) {
  .kc-home .sos-hero__grid {
    grid-area: 1 / 1; z-index: 2; justify-self: center;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    align-items: center; gap: clamp(32px, 4vw, 64px);
    padding-block: calc(var(--header-h) + 40px) 48px;
  }
  .kc-home .sos-hero__content {
    grid-area: auto; width: 100%; padding: 0; align-self: center;
  }
  .kc-home .sos-hero h1 { font-size: clamp(4rem, 5.8vw, 5.75rem); }
  .kc-home .sos-hero-donate {
    --cell: 24px;
    display: flex; flex-direction: column;
  }
  .kc-home .sos-hero-donate::before { content: none; }
  .kc-home .sos-hero-donate .sos-donate-title { font-size: 2rem; }
  .kc-home .sos-hero-donate > .amount-grid { margin-bottom: 0; align-self: stretch; }
  .kc-home .sos-hero-donate > .ln-custom { margin-top: 16px; }
  .kc-home .sos-hero-donate .amount-btn { min-height: 48px; font-size: 1.25rem; }
  .kc-home .sos-hero-donate .freq-btn { min-height: 44px; }
  .kc-home .sos-hero-donate .custom-amount-input { min-height: 48px; }
}

/* 3. Our Work (paper). Copy left, photo bleeding to the right edge. */
.kc-home .sos-work { position: relative; isolation: isolate; background: var(--paper); overflow: hidden; }
/* Toe-box perforations (assets/images/perforation.svg): the staggered
   holes punched in a sneaker's toe, tilted like the Advocate tread and
   pressed faintly across the whole band, lightest behind the intro copy.
   The step labels are paper-filled, so the texture never runs through them. */
.kc-home .sos-work::before {
  content: ''; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: url('../assets/images/perforation.svg') 0 0 / 24px 20.8px repeat;
  opacity: 0.07;
  transform: rotate(-8deg);
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.45) 30%, #000 70%);
          mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.45) 30%, #000 70%);
}
.kc-home .sos-process__intro { display: grid; gap: var(--s10); }
.kc-home .sos-process__photo { margin: 0; }
.kc-home .sos-process__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%; }
@media (min-width: 1024px) {
  .kc-home .sos-process__intro { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .kc-home .sos-process__copy { padding-block: 24px; }
  .kc-home .sos-process__photo {
    margin-right: calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 100vw) / 2);
  }
  .kc-home .sos-process__photo img { aspect-ratio: 16 / 11; }
}

/* A. Shoebox end-label: the three steps, lined up on a shelf. */
.kc-home .sos-process__steps {
  position: relative;
  list-style: none; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
.kc-home .sos-process__steps > li {
  position: relative;
  display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr;
  background: var(--paper); border: var(--rule) solid var(--ink);
}
.kc-home .sos-process__steps > li > div { display: contents; }
.kc-home .sos-step-number {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 8px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-family: var(--serif); font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: var(--clay);
}
.kc-home .sos-process__steps h3 {
  grid-column: 2; grid-row: 1; align-self: stretch;
  display: flex; align-items: center;
  margin: 0; padding: 16px 20px;
  border-bottom: 1px solid var(--ink);
  font-size: 1.375rem; line-height: 1.1;
}
.kc-home .sos-process__steps p {
  grid-column: 1 / -1; grid-row: 2;
  padding: 20px; max-width: none;
  color: var(--ink-soft); font-size: 1rem; line-height: 1.6;
}
/* Mobile: a short vertical rule joins each stacked label to the next. */
.kc-home .sos-process__steps > li + li::before {
  content: ''; position: absolute; top: calc(-16px - var(--rule)); left: 43px;
  width: var(--rule); height: 16px; background: var(--ink);
}
@media (min-width: 1024px) {
  .kc-home .sos-process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-bottom: 0; }
  .kc-home .sos-process__steps > li + li::before { display: none; }
  /* The shelf: one rule under all three, carried through the gaps. */
  .kc-home .sos-process__steps::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: var(--rule); background: var(--ink);
  }
  .kc-home .sos-step-number { font-size: 3.25rem; }
}

/* 4. Where We Serve (hollow + contours). */
.kc-home .sos-service-area {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hollow); color: var(--cream);
}
.kc-home .sos-service-area::before {
  content: ''; position: absolute; inset: -8%; z-index: -1; pointer-events: none;
  background: url('../assets/images/contours.svg') center / cover no-repeat;
}
.kc-home .sos-map-layout { display: grid; gap: var(--s12); }
.kc-home #ln-map-copy { order: -1; }
/* Hovering a county swaps this paragraph for that county's school list
   (landing.js), 1 to 4 lines. Reserve the tallest so the column never changes
   height; otherwise the map shifts under the cursor, fires mouseleave, snaps
   back and loops. */
.kc-home #ln-map-sub { color: var(--cream-soft); min-height: 6.4em; }
@media (max-width: 639px) { .kc-home #ln-map-sub { min-height: 8em; } }
.kc-home #ln-map-sub span { display: block; }
.kc-home .sos-service-area .sos-county-label { margin: var(--s12) 0 var(--s3); color: var(--clay-light); }
.kc-home .sos-counties { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cream-line); }
.kc-home .sos-counties li { border-bottom: 1px solid var(--cream-line); }
.kc-home .sos-counties a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 14px 0;
  font-family: var(--serif); font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  color: var(--cream); text-decoration: none;
  transition: color var(--t-ui) ease;
}
.kc-home .sos-counties a span { flex: 0 0 auto; font-family: var(--sans); font-weight: 400; font-size: 0.6em; transition: transform var(--t-ui) var(--ease-out); }
.kc-home .sos-counties a:hover, .kc-home .sos-counties a:focus-visible { color: var(--clay); }
.kc-home .sos-counties a:hover span, .kc-home .sos-counties a:focus-visible span { transform: translateX(6px); }
.kc-home .sos-map-image { width: 100%; max-width: 520px; }
.kc-home .sos-map-image svg { display: block; width: 100%; height: auto; max-height: 56vh; overflow: visible; }
.kc-home .sos-map-image .ln-county {
  fill: var(--hollow-2); stroke: rgba(246, 241, 232, 0.22); stroke-width: 0.75; vector-effect: non-scaling-stroke;
  transition: fill var(--t-ui) ease;
}
.kc-home .sos-map-image .ln-county--on { fill: var(--clay); stroke: var(--cream); stroke-width: 1.5; cursor: pointer; }
.kc-home .sos-map-image .ln-county--on:hover { fill: #D9784D; }
@media (min-width: 1024px) {
  .kc-home .sos-map-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
  .kc-home #ln-map-copy { grid-column: 1; grid-row: 1; order: 0; }
  .kc-home .sos-map-image { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  .kc-home .sos-map-image svg { max-height: 70vh; }
}

/* 5. Student Representatives (paper). Photo left, copy right. */
.kc-home .sos-home-reps { position: relative; isolation: isolate; background: var(--paper); overflow: hidden; }
/* Honeycomb outsole (assets/images/honeycomb.svg): the hexagonal lugs on
   the sole of a running or court shoe, tilted the opposite way to Our
   Work's perforations and pressed across the whole band, lightest behind
   the copy column on the right. */
.kc-home .sos-home-reps::before {
  content: ''; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: url('../assets/images/honeycomb.svg') 0 0 / 24.249px 42px repeat;
  opacity: 0.065;
  transform: rotate(6deg);
  -webkit-mask-image: linear-gradient(80deg, #000 30%, rgba(0, 0, 0, 0.45) 70%);
          mask-image: linear-gradient(80deg, #000 30%, rgba(0, 0, 0, 0.45) 70%);
}
/* Below 1024 the copy runs full width over it, so it steps back a little. */
@media (max-width: 1023px) { .kc-home .sos-home-reps::before { opacity: 0.05; } }
.kc-home .sos-representatives { display: grid; gap: var(--s10); }
.kc-home .sos-representatives > figure { order: 2; }
.kc-home .sos-representatives img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 45%; }
/* "Applications closed" as a label line: label cell | message cell. */
.kc-home .sos-representatives__status { margin-top: var(--s10); max-width: 62ch; }
.kc-home .sos-representatives__status-icon { display: none; }
.kc-home .sos-representatives__status-copy {
  display: grid; grid-template-columns: minmax(0, 1fr);
  border: var(--rule) solid var(--ink);
}
.kc-home .sos-representatives__status-label {
  display: flex; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--ink);
  color: var(--ink);
}
.kc-home .sos-representatives__status-detail { padding: 14px 16px; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.5; }
@media (min-width: 640px) {
  .kc-home .sos-representatives__status-copy { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .kc-home .sos-representatives__status-label { border-bottom: 0; border-right: 1px solid var(--ink); }
}
@media (min-width: 1024px) {
  .kc-home .sos-representatives { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
  .kc-home .sos-representatives > figure { order: 0; }
}

/* 6. Become an Advocate: the one full clay band, set like a poster.
   The heading runs the full width over a cream hairline; the two
   paragraphs and the button sit in an asymmetric row beneath. The role
   wrapper is flattened (display: contents) so the heading, its paragraph
   and the qualify column share one grid. */
.kc-home .sos-advocate {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--clay-deep); color: var(--cream);
}
/* Herringbone outsole tread pressed into the clay (assets/images/tread.svg):
   the grip pattern under a court shoe, tilted like a footprint, strongest at
   the right edge and fading out behind the heading so the type stays clean.
   Tone-on-tone only: black at low opacity, never cream. */
.kc-home .sos-advocate::before {
  content: ''; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background: url('../assets/images/tread.svg') 0 0 / 44px 18px repeat;
  opacity: 0.13;
  transform: rotate(-8deg);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
          mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
}
.kc-home .sos-advocate__layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.kc-home .sos-advocate__role { display: contents; }
.kc-home .sos-advocate h2 {
  margin: 0; padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid rgba(246, 241, 232, 0.4);
  font-size: clamp(3.5rem, 10vw, 9rem); font-weight: 800; line-height: 0.86; letter-spacing: -0.035em;
}
.kc-home .sos-advocate__role p {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--cream);
}
.kc-home .sos-advocate__qualify { margin-top: var(--s8); }
.kc-home .sos-advocate__qualify p { color: var(--cream); } /* full cream: 80% would be 3.86:1 on clay-deep */
.kc-home .sos-advocate__qualify .ln-btn {
  margin-top: var(--s6);
  background: var(--cream); border-color: var(--cream); color: var(--ink);
  white-space: normal; text-align: left;
}
.kc-home .sos-advocate__qualify .ln-btn:hover { background: transparent; color: var(--cream); }
.kc-home .sos-advocate__qualify .ln-btn span { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
.kc-home .sos-advocate__qualify .ln-btn:hover span { transform: translateX(6px); }
@media (min-width: 1024px) {
  .kc-home .sos-advocate__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .kc-home .sos-advocate h2 { grid-column: 1 / -1; grid-row: 1; }
  .kc-home .sos-advocate__role p { grid-column: 1 / span 6; grid-row: 2; }
  .kc-home .sos-advocate__qualify { grid-column: 8 / -1; grid-row: 2; margin-top: clamp(32px, 4vw, 48px); padding-top: 6px; }
}

/* 7. Who We Are (paper). The mirror of Our Work: the founders photo bleeds
   off the left edge (Our Work's bleeds right), stitched frame inset. The
   mission line becomes the section's statement, set in League Spartan
   under a rule. */
.kc-home .sos-who { position: relative; isolation: isolate; background: var(--paper); overflow: hidden; }
/* Midsole waves (assets/images/waves.svg): the rippled profile of a
   running shoe's midsole, which also reads as Appalachian ridgelines,
   stacked across the whole band and lightest behind the copy. */
.kc-home .sos-who::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../assets/images/waves.svg') 0 0 / 120px 26px repeat;
  opacity: 0.06;
  -webkit-mask-image: linear-gradient(90deg, #000 25%, rgba(0, 0, 0, 0.45) 75%);
          mask-image: linear-gradient(90deg, #000 25%, rgba(0, 0, 0, 0.45) 75%);
}
.kc-home .sos-who__layout { display: grid; gap: var(--s10); }
.kc-home .sos-who__copy p + p {
  margin-top: var(--s8); padding-top: var(--s6);
  border-top: var(--rule) solid var(--ink);
  font-family: var(--serif); font-size: clamp(1.375rem, 1.05rem + 1vw, 1.875rem); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); max-width: 30ch;
}
.kc-home .sos-who .sos-link { color: var(--ink); }
.kc-home .sos-who__photo { position: relative; margin-inline: calc(-1 * var(--gutter)); }
/* Landscape crop of the portrait photo: the four founders, not the whole sky and sand. */
.kc-home .sos-who__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; }
.kc-home .sos-who__photo::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1.5px dashed rgba(246, 241, 232, 0.85);
}
@media (min-width: 640px) and (max-width: 1023px) {
  .kc-home .sos-who__photo { margin-inline: 0; max-width: 560px; }
}
@media (min-width: 1024px) {
  .kc-home .sos-who__layout { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
  .kc-home .sos-who__photo {
    grid-column: 1; grid-row: 1;
    margin-inline: 0;
    margin-left: calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 100vw) / 2);
  }
  .kc-home .sos-who__copy { grid-column: 2; grid-row: 1; }
  .kc-home .sos-who__photo img { aspect-ratio: 4 / 3; }
}

/* 8. Our Sponsors (clay, after the kraft donation band). One calm two-column
   block: heading, paragraph and link stacked on the left; the three tiers
   as one framed list of equal rows on the right, both columns starting on
   the same line. Each row: tier name, a small SPONSORS label, an arrow.
   Rows invert to ink on hover. Stacks in order on small screens. */
.kc-home .sos-sponsors { display: grid; gap: var(--s10); align-items: start; }
.kc-home .sos-sponsors > div:first-child h2 { margin: 0 0 var(--s5); }
.kc-home .sos-sponsors > div:first-child .sos-link { margin-top: var(--s5); }
.kc-home .sos-sponsor-tiers {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--paper); border: var(--rule) solid var(--ink);
}
.kc-home .sos-sponsor-tiers a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 96px; padding: 20px clamp(20px, 2.5vw, 32px);
  color: var(--ink); text-decoration: none;
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease;
}
.kc-home .sos-sponsor-tiers a + a { border-top: 1px solid var(--ink); }
.kc-home .sos-sponsor-tiers a > span:first-child {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 4px;
  font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
}
.kc-home .kc-tier__kind {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
}
.kc-home .sos-sponsor-tiers a > span:last-child {
  flex: 0 0 auto; font-family: var(--sans); font-size: 1.5rem; font-weight: 400; line-height: 1;
  transition: transform var(--t-ui) var(--ease-out);
}
.kc-home .sos-sponsor-tiers a:hover,
.kc-home .sos-sponsor-tiers a:focus-visible { background: var(--ink); color: var(--cream); }
.kc-home .sos-sponsor-tiers a:hover > span:last-child,
.kc-home .sos-sponsor-tiers a:focus-visible > span:last-child { transform: translateX(6px); }
.kc-home .sos-sponsor-tiers a:focus-visible { outline-offset: -4px; outline-color: var(--clay); }
/* On the clay band: cream type (5.10:1 on clay-deep). The tier list stays a
   paper card with clay-deep type (the same 5.10:1), divided by clay
   hairlines; rows fill clay-deep on hover with cream type (5.10:1, so the
   small SPONSORS label passes too, which brighter --clay would not). */
.kc-home .sos-home-sponsors { background: var(--clay-deep); color: var(--cream); }
.kc-home .sos-home-sponsors :is(h2, p, .sos-link) { color: var(--cream); }
.kc-home .sos-home-sponsors .sos-sponsor-tiers { background: var(--paper); border-color: var(--paper); }
.kc-home .sos-home-sponsors .sos-sponsor-tiers a { color: var(--clay-deep); }
.kc-home .sos-home-sponsors .sos-sponsor-tiers a + a { border-top-color: rgba(162, 78, 40, 0.35); }
.kc-home .sos-home-sponsors .sos-sponsor-tiers a:hover,
.kc-home .sos-home-sponsors .sos-sponsor-tiers a:focus-visible { background: var(--clay-deep); color: var(--cream); }
.kc-home .sos-home-sponsors :focus-visible { outline-color: var(--cream); }
.kc-home .sos-home-sponsors .sos-sponsor-tiers a:focus-visible { outline-color: var(--clay); }
.kc-home #sponsor-wall { grid-column: 1 / -1; }
.kc-home #sponsor-wall:empty { display: none; }
@media (min-width: 1024px) {
  .kc-home .sos-sponsors { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; }
  .kc-home .sos-sponsor-tiers a { min-height: 112px; }
}

/* ------------------------------------------------------------------ 5b */
/* Interior pages. Same bands, same three signature elements, same rules:
   the shoebox label stays on the donation widget only, contours only on
   hollow, stitch rules only in the footer and under headings on kraft. */

/* Page hero: hollow band with contours, big left-aligned type. The header
   floats over it on .kc-overlay pages. The markup varies page to page (bare
   h1 + p, or wrapped in __inner / __copy / .ln-wrap), so the band supplies
   the container width through its own inline padding and the wrappers reset. */
.kc .ln-page-hero,
.kc .sos-reps-hero,
.kc .sos-adv-reg-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hollow); color: var(--cream);
  padding-block: clamp(64px, 9vw, 128px);
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}
.kc-overlay main > section:first-of-type { padding-top: calc(var(--header-h) + clamp(56px, 8vw, 112px)); }
.kc .ln-page-hero::before,
.kc .sos-reps-hero::before,
.kc .sos-adv-reg-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../assets/images/contours.svg') center / cover no-repeat;
}
.kc :is(.ln-page-hero, .sos-reps-hero, .sos-adv-reg-hero) :is(.sos-work-hero__inner, .sos-team-intro__inner, .sos-sponsor-hero__inner, .sos-sponsor-hero__copy, .sos-work-hero__copy, .sos-adv-reg__wrap, .ln-wrap, .ln-section__head) {
  width: auto; max-width: none; margin: 0; padding: 0; display: block; text-align: left;
}
.kc :is(.ln-page-hero, .sos-reps-hero, .sos-adv-reg-hero) h1 {
  margin: 0 0 var(--s6);
  font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.03em;
  color: var(--cream);
}
.kc :is(.ln-page-hero, .sos-reps-hero, .sos-adv-reg-hero) p {
  max-width: 40em; color: var(--cream-soft);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55;
}
.kc-overlay .sos-header:not(.kc-solid) {
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; color: var(--cream);
}
.kc-overlay .sos-header { position: fixed; left: 0; right: 0; }

/* Bands and containers */
.kc .ln-section,
.kc .sos-reps-section,
.kc .sos-adv-reg-section { padding-block: var(--band-y); background: var(--paper); }
.kc .ln-section--surface { background: var(--kraft); }
.kc .ln-wrap,
.kc .sos-reps-wrap,
.kc .sos-adv-reg__wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.kc .ln-section__head { margin-bottom: clamp(40px, 5vw, 64px); }
.kc .ln-section__head h2 { margin-bottom: var(--s5); }
.kc .ln-section--surface .ln-section__head h2 { padding-bottom: var(--s6); border-bottom: 1.5px dashed rgba(29, 26, 22, 0.5); }
.kc .ln-lead { color: var(--ink-soft); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.kc .ln-h2 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; }

/* Buttons used on interior pages */
.kc .ln-btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.kc .ln-btn--ghost:hover { background: var(--ink); color: var(--cream); }
.kc .ln-btn--pine { background: var(--hollow); border-color: var(--hollow); color: var(--cream); }
.kc .ln-btn--pine:hover { background: var(--ink); border-color: var(--ink); }

/* The clay band: one per page at most. Buttons inside become cream outlines. */
.kc .kc-clay,
.kc .sos-team-reps,
.kc .sos-sponsor-contact,
.kc .sos-reps-eligibility { background: var(--clay-deep); color: var(--cream); }
.kc :is(.sos-team-reps, .sos-sponsor-contact, .sos-reps-eligibility) :is(h2, h3, p, li) { color: var(--cream); }
.kc :is(.sos-team-reps, .sos-sponsor-contact, .sos-reps-eligibility) .ln-btn {
  background: transparent; border-color: var(--cream); color: var(--cream); white-space: normal;
}
.kc :is(.sos-team-reps, .sos-sponsor-contact, .sos-reps-eligibility) .ln-btn:hover { background: var(--cream); color: var(--clay-deep); }
.kc :is(.sos-team-reps, .sos-sponsor-contact, .sos-reps-eligibility) :focus-visible { outline-color: var(--cream); }
.kc :is(.sos-team-reps__inner, .sos-sponsor-contact__inner) { display: grid; gap: var(--s8); }
.kc :is(.sos-team-reps__inner, .sos-sponsor-contact__inner) .ln-btn { justify-self: start; }
.kc :is(.sos-team-reps, .sos-sponsor-contact) h2 { margin-bottom: var(--s5); }
@media (min-width: 1024px) {
  .kc :is(.sos-team-reps__inner, .sos-sponsor-contact__inner) { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: end; }
}

/* Numbered rows: the editorial cousin of the shoebox steps. A big clay
   numeral, a title, the body, hairline rules between. No frames. */
.kc .ln-steplist,
.kc .sos-reps-steps,
.kc .sos-adv-reg__next ol { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ink); }
.kc .ln-steplist__item,
.kc .sos-reps-steps > li,
.kc .sos-adv-reg__next li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s4) var(--s6);
  padding-block: var(--s8); border-top: 1px solid var(--ink);
}
.kc :is(.ln-steplist__n, .sos-reps-steps__num, .sos-adv-reg__next li > span) {
  font-family: var(--serif); font-size: clamp(2.5rem, 4.5vw, 3.75rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.04em;
  color: var(--clay);
}
.kc :is(.ln-steplist__t, .sos-reps-steps h3) {
  margin: 0 0 var(--s3);
  font-family: var(--serif); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
}
.kc :is(.ln-steplist__d, .sos-reps-steps p) { color: var(--ink-soft); }
@media (max-width: 639px) {
  .kc .ln-steplist__item, .kc .sos-reps-steps > li { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-block: var(--s6); }
}
.kc .sos-adv-reg__next li { padding-block: var(--s5); align-items: center; }
.kc .sos-adv-reg__next li > span { font-size: 2.25rem; }
@media (min-width: 1024px) {
  .kc .ln-steplist__item { grid-template-columns: 120px minmax(0, 4fr) minmax(0, 6fr); gap: 32px; }
  .kc .ln-steplist__item > div { display: contents; }
  .kc .ln-steplist__t { margin: 0; }
}

/* -- Our Work ---------------------------------------------------------- */
.kc .sos-work-county-grid { display: grid; gap: var(--s10) 32px; }
.kc .ln-county-card { padding-top: var(--s5); border-top: var(--rule) solid var(--ink); }
.kc .ln-county-card__name {
  margin-bottom: var(--s4);
  font-family: var(--serif); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1;
}
.kc .ln-county-card__list { list-style: none; margin: 0; padding: 0; }
.kc .ln-county-card__list li { padding-block: 10px; border-top: 1px solid rgba(29, 26, 22, 0.25); }
@media (min-width: 640px) { .kc .sos-work-county-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kc .sos-work-county-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -- Student Representatives ------------------------------------------ */
.kc .sos-reps-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
.kc .sos-reps-hero__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 1024px) {
  .kc .sos-reps-hero__inner { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 64px; align-items: end; }
}
/* Deliveries and Leadership each carry one photo, on opposite sides. On
   desktop the photo fills the full height of its text column (the image is
   absolutely positioned so the text, not the photo, sets the row height),
   which leaves no dead space above or below either. Sources are the full
   3:4 frames so the cover crop has room at any column height. */
.kc :is(.sos-reps-process__photo, .sos-reps-opportunity__photo) img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
}
.kc .sos-reps-process__photo img { object-position: 50% 25%; }
.kc .sos-reps-opportunity__photo img { object-position: 50% 15%; }
@media (min-width: 640px) and (max-width: 1023px) {
  .kc :is(.sos-reps-process__photo, .sos-reps-opportunity__photo) img { aspect-ratio: 3 / 2; }
}
@media (min-width: 1024px) {
  .kc :is(.sos-reps-process__photo, .sos-reps-opportunity__photo) { position: relative; min-height: 420px; }
  .kc :is(.sos-reps-process__photo, .sos-reps-opportunity__photo) img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* Deliveries: below 1024 the body wrapper dissolves so the photo can sit
   between the intro and the steps. */
.kc .sos-reps-process__grid { display: grid; }
.kc .sos-reps-process__body { display: contents; }
.kc .sos-reps-section__intro { order: 1; display: grid; gap: var(--s4); margin-bottom: var(--s10); }
.kc .sos-reps-section__intro h2 { margin: 0; }
.kc .sos-reps-process__photo { order: 2; margin-bottom: var(--s10); }
.kc .sos-reps-steps { order: 3; }

/* Step rows: the numeral and the title share the first row, centered on
   each other; the description sits under the title in the second row. The
   text wrapper is flattened (display: contents) so the title, not the whole
   text block, is what the numeral lines up with. The numeral column is sized
   off the numeral's own font size, so "02" always fits and the text starts
   at the same x on every row. Never stacked, at any width. */
.kc .sos-reps-steps { --step-num: clamp(2.5rem, 4.5vw, 3.75rem); }
.kc .sos-reps-steps > li {
  grid-template-columns: calc(var(--step-num) * 1.4) minmax(0, 1fr);
  column-gap: var(--s4); row-gap: var(--s2); align-items: center;
}
.kc .sos-reps-steps > li > div { display: contents; }
.kc .sos-reps-steps__num { grid-column: 1; grid-row: 1; font-size: var(--step-num); line-height: 1; }
/* -0.1em: the title's line box carries a little more space under its caps
   than the numeral's does, so this lands the two optical centers together. */
.kc .sos-reps-steps h3 { grid-column: 2; grid-row: 1; margin: 0; position: relative; top: -0.1em; }
.kc .sos-reps-steps p { grid-column: 2; grid-row: 2; }
@media (min-width: 640px) { .kc .sos-reps-steps > li { column-gap: var(--s6); } }
@media (min-width: 1024px) {
  .kc .sos-reps-process__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .kc .sos-reps-process__body { display: block; }
  .kc .sos-reps-process__photo { order: 0; margin: 0; }
  .kc .sos-reps-section__intro { margin-bottom: var(--s8); }
  .kc .sos-reps-section__intro p { max-width: 52ch; }
  .kc .sos-reps-steps > li { padding-block: 28px; }
  .kc .sos-reps-steps p { max-width: 48ch; }
}

.kc .sos-reps-opportunity { background: var(--kraft); }
.kc .sos-reps-opportunity h2 { margin-bottom: var(--s6); padding-bottom: var(--s6); border-bottom: 1.5px dashed rgba(29, 26, 22, 0.5); }
.kc .sos-reps-opportunity__grid,
.kc .sos-reps-eligibility__inner { display: grid; gap: var(--s10); }
@media (min-width: 1024px) {
  .kc .sos-reps-opportunity__grid,
  .kc .sos-reps-eligibility__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; }
}
@media (min-width: 1024px) {
  .kc .sos-reps-opportunity__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
}
.kc .sos-reps-benefits { margin-top: var(--s10); }
.kc .sos-reps-benefits h3 { margin-bottom: var(--s4); }
.kc .sos-reps-benefits ul,
.kc .sos-reps-eligibility__list { list-style: none; margin: 0; padding: 0; }
.kc .sos-reps-benefits li { padding-block: 14px; border-top: 1px solid var(--ink); }
.kc .sos-reps-benefits li:last-child { border-bottom: 1px solid var(--ink); }
.kc .sos-reps-eligibility h2 { margin-bottom: var(--s8); }
.kc .sos-reps-eligibility__list li {
  padding-block: 16px; border-top: 1px solid var(--cream-line);
  font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
}
.kc .sos-reps-eligibility__list li:last-child { border-bottom: 1px solid var(--cream-line); }
/* "Applications are closed." as a label line on the clay band: the <strong>
   is the label cell, the sentence after it the message cell. */
.kc .sos-reps-application-status {
  display: grid; grid-template-columns: minmax(0, 1fr);
  max-width: 62ch; margin-top: var(--s8); padding: 0 16px 14px;
  border: var(--rule) solid var(--cream);
  font-size: 0.9375rem; line-height: 1.5;
}
.kc .sos-reps-application-status > strong {
  margin: 0 -16px 14px; padding: 14px 16px; border-bottom: 1px solid var(--cream);
  font-family: var(--serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
@media (min-width: 640px) {
  .kc .sos-reps-application-status { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 14px 16px 14px 0; }
  .kc .sos-reps-application-status > strong { align-self: stretch; display: flex; align-items: center; margin: -14px 0; border-bottom: 0; border-right: 1px solid var(--cream); }
}

/* Roster: a team sheet. County label, district, then names with class year. */
.kc .ln-roster-group + .ln-roster-group { margin-top: clamp(64px, 8vw, 112px); }
.kc .ln-roster-group__head { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s10); }
.kc .ln-roster-group__title { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.kc .ln-roster-group__rule { flex: 1; height: var(--rule); background: var(--ink); }
.kc .ln-roster-counties { display: grid; gap: var(--s10) 32px; }
@media (min-width: 640px) { .kc .ln-roster-counties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kc .ln-roster-counties { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kc .ln-roster-county__label {
  padding-bottom: var(--s3); border-bottom: var(--rule) solid var(--ink);
  font-family: var(--serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--clay-deep);
}
.kc .ln-roster-district { margin-top: var(--s5); }
.kc .ln-roster-district__label { display: block; margin-bottom: var(--s1); color: var(--ink-soft); font-size: 0.875rem; font-weight: 600; }
.kc .ln-rep__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-block: 8px; border-bottom: 1px solid rgba(29, 26, 22, 0.18); }
.kc .ln-rep__name { font-family: var(--serif); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.kc .ln-rep__year { font-family: var(--serif); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--clay-deep); }
.kc.sos-page-student-reps .ln-section--surface { background: var(--paper); }
.kc.sos-page-student-reps .ln-section--surface .ln-section__head h2 { padding-bottom: 0; border-bottom: 0; }

/* -- Advocate registration + contact forms ----------------------------- */
.kc .sos-adv-reg__layout { display: grid; gap: clamp(48px, 6vw, 80px); }
@media (min-width: 1024px) { .kc .sos-adv-reg__layout { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.kc .sos-adv-reg__info h2 { margin-bottom: var(--s5); font-size: clamp(1.875rem, 3.5vw, 2.75rem); }
.kc .sos-adv-reg__info p + p { margin-top: var(--s4); }
.kc .sos-adv-reg__next { margin-top: clamp(48px, 6vw, 72px); }
.kc .sos-adv-reg__next li p { color: var(--ink); }

/* Form panel: kraft board, square, no shadow. */
.kc .ln-form-card,
.kc .sos-contact-form-card { background: var(--kraft); padding: clamp(24px, 4vw, 48px); }
.kc .ln-form-card h2,
.kc .sos-contact-form-heading h2 {
  margin: 0 0 var(--s8); padding-bottom: var(--s5);
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  border-bottom: 1.5px dashed rgba(29, 26, 22, 0.5);
}
.kc .ln-form-card :focus-visible,
.kc .sos-contact-form-card :focus-visible { outline-color: var(--clay-deep); }
.kc .ln-field { margin-bottom: var(--s5); }
.kc .ln-field-row { display: grid; gap: 0 var(--s5); }
@media (min-width: 640px) { .kc .ln-field-row { grid-template-columns: 1fr 1fr; } }
.kc .ln-label {
  display: block; margin-bottom: var(--s2);
  font-family: var(--serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.kc .ln-input,
.kc .ln-select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--paper); color: var(--ink);
  border: var(--rule) solid var(--ink); border-radius: 0;
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
.kc .ln-input::placeholder { color: var(--ink-soft); opacity: 1; }
.kc .ln-input:focus, .kc .ln-select:focus { outline: none; }
.kc .ln-input:focus-visible, .kc .ln-select:focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 3px; }
.kc .ln-input:disabled { color: var(--ink-soft); cursor: not-allowed; }
.kc .ln-textarea { min-height: 160px; resize: vertical; }
.kc .ln-select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1A16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.kc .ln-combobox { position: relative; }
.kc .ln-combobox__list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--paper); border: var(--rule) solid var(--ink);
}
.kc .ln-combobox__option { padding: 10px 12px; min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 1rem; }
.kc .ln-combobox__option + .ln-combobox__option { border-top: 1px solid rgba(29, 26, 22, 0.12); }
.kc .ln-combobox__option:hover, .kc .ln-combobox__option.is-active { background: var(--kraft); }
.kc .ln-combobox__option.is-selected { font-weight: 700; }
.kc .ln-combobox__empty { padding: 10px 12px; color: var(--ink-soft); font-size: 0.9375rem; }
.kc .ln-form-card .ln-btn,
.kc .sos-contact-form-card .ln-btn { margin-top: var(--s3); }
.kc .ln-submit-msg { margin-top: var(--s4); font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.kc .ln-submit-msg.ok { color: var(--ok); }
.kc .ln-submit-msg.err { color: var(--error); }
.kc .ln-adv-thanks { text-align: left !important; }
.kc .ln-adv-thanks > div[aria-hidden] { border-radius: 0 !important; margin-left: 0 !important; }

/* Contact: hollow panel bleeding to the left edge, form on the right. */
.kc .sos-contact-layout { display: grid; }
.kc .sos-contact-panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(56px, 8vw, 112px) var(--gutter);
  background: var(--hollow); color: var(--cream);
}
.kc .sos-contact-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../assets/images/contours.svg') center / cover no-repeat;
}
.kc .sos-contact-panel h1 { margin-bottom: var(--s6); font-size: clamp(2.75rem, 6vw, 5rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.03em; }
.kc .sos-contact-intro { color: var(--cream-soft); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.kc .sos-contact-detail { display: grid; gap: var(--s2); margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--cream-line); }
.kc .sos-contact-detail__label { font-family: var(--serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-light); }
.kc .sos-contact-detail a {
  width: fit-content; min-height: 44px; display: inline-flex; align-items: center;
  font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; color: var(--cream); text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1.5px no-repeat;
  transition: background-size 220ms var(--ease-out);
}
.kc .sos-contact-detail a:hover { background-size: 100% 1.5px; }
.kc .sos-contact-form-card { padding: clamp(48px, 7vw, 96px) var(--gutter); }
@media (min-width: 1024px) {
  .kc .sos-contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - var(--header-h)); }
  .kc .sos-contact-panel { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-right: 64px; }
  .kc .sos-contact-form-card { padding-left: 64px; padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); align-self: stretch; }
}

/* -- Our Team + bios ---------------------------------------------------- */
.kc .ln-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12) var(--s5); }
@media (min-width: 768px) { .kc .ln-team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; } }
@media (min-width: 1024px) { .kc .ln-team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kc .ln-member { display: flex; flex-direction: column; }
.kc .ln-member__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.kc .ln-member__body { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--s4); border-top: var(--rule) solid var(--ink); margin-top: var(--s4); }
.kc .ln-member__name { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.kc .ln-member__role { margin-top: var(--s2); font-family: var(--serif); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.35; }
.kc .ln-member .ln-btn {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink);
  font-size: 1rem; justify-content: flex-start; gap: 8px;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 calc(100% - 8px); background-size: 0 1.5px;
  transition: background-size 220ms var(--ease-out);
}
.kc .ln-member .ln-btn::after { content: '\2192'; font-family: var(--sans); font-weight: 400; transition: transform var(--t-ui) var(--ease-out); }
.kc .ln-member .ln-btn:hover { background-size: calc(100% - 24px) 1.5px; color: var(--ink); }
.kc .ln-member .ln-btn:hover::after { transform: translateX(4px); }
.kc .ln-member .ln-btn:active { box-shadow: none; }

/* Bio pages: kraft band, portrait left, stitch rule under the name. */
.kc .ln-bio { display: grid; gap: var(--s10); }
.kc main > .ln-section:first-child:has(.ln-bio) { background: var(--kraft); }
.kc .ln-bio__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.kc .ln-bio__portrait { max-width: 480px; }
.kc .ln-bio__back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: var(--s8);
  font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 26px calc(100% - 8px) / 0 1.5px no-repeat;
  transition: background-size 220ms var(--ease-out);
}
.kc .ln-bio__back:hover { background-size: calc(100% - 26px) 1.5px; }
.kc .ln-bio__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kc .ln-bio__name { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.03em; padding-bottom: var(--s6); border-bottom: 1.5px dashed rgba(29, 26, 22, 0.5); }
.kc .ln-bio__role { margin-top: var(--s5); font-family: var(--serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.kc .ln-bio__text { margin-top: var(--s8); }
.kc .ln-bio__text p:empty { display: none; }
.kc .ln-bio__text p + p { margin-top: var(--s4); }
@media (min-width: 1024px) {
  .kc .ln-bio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
}

/* -- Sponsors ------------------------------------------------------------ */
.kc .sos-sponsor-level-list { display: grid; border: var(--rule) solid var(--ink); }
.kc .sos-sponsor-level { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(20px, 3vw, 32px); }
.kc .sos-sponsor-level + .sos-sponsor-level { border-top: 1px solid var(--ink); }
.kc .sos-sponsor-level h3 { margin-bottom: var(--s5); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; }
.kc .sos-sponsor-level p { color: var(--ink-soft); }
.kc .sos-sponsor-level > a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; padding-top: var(--s6);
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 700; color: var(--ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat;
  transition: background-size 220ms var(--ease-out);
}
.kc .sos-sponsor-level > a span { display: inline-block; font-family: var(--sans); font-weight: 400; transition: transform var(--t-ui) var(--ease-out); }
.kc .sos-sponsor-level > a:hover { background-size: calc(100% - 26px) 1.5px; }
.kc .sos-sponsor-level > a:hover span { transform: translateX(6px); }
.kc .sos-sponsor-tax { margin-top: var(--s8); color: var(--ink-soft); font-size: 0.9375rem; }
@media (min-width: 1024px) {
  .kc .sos-sponsor-level-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kc .sos-sponsor-level { min-height: 340px; padding: 32px; }
  .kc .sos-sponsor-level + .sos-sponsor-level { border-top: 0; border-left: 1px solid var(--ink); }
}

/* Tier directories: rows of entries under top rules, no boxes. */
.kc .ln-sponsor-grid,
.kc .ln-grid-3 { display: grid; gap: var(--s10) 32px; }
@media (min-width: 640px) { .kc .ln-sponsor-grid, .kc .ln-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kc .ln-sponsor-grid, .kc .ln-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc .ln-sponsor,
.kc .ln-grid-3 > .ln-card { padding-top: var(--s5); border-top: var(--rule) solid var(--ink); }
.kc .ln-sponsor__logo { display: flex; align-items: center; justify-content: flex-start; height: 140px; margin-bottom: var(--s5); }
/* Logos ship on white plates; multiply drops the white into the paper. */
.kc .ln-sponsor__logo img { width: auto; max-width: 78%; max-height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.kc .ln-sponsor__fallback { display: none; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--ink-soft); }
/* Sponsors without a usable logo: the name is set as a wordmark in the logo
   slot (so every card's top lines up) and is not repeated beneath it. */
.kc .ln-sponsor__wordmark {
  max-width: 92%;
  font-family: var(--serif); font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--ink);
}
.kc :is(.ln-sponsor__name, .ln-card__t) { margin-bottom: var(--s2); font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.kc :is(.ln-sponsor__d, .ln-card__d) { color: var(--ink-soft); font-size: 1rem; }
.kc .ln-card { background: none; border: 0; padding: 0; }
.kc .ln-namelist { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--ink); }
.kc .ln-namelist li {
  padding-block: 16px; border-bottom: 1px solid rgba(29, 26, 22, 0.25);
  font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em;
}
@media (min-width: 640px) { .kc .ln-namelist { columns: 2; column-gap: 48px; } .kc .ln-namelist li { break-inside: avoid; } }
.kc .ln-sponsor-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: clamp(56px, 7vw, 96px); padding-top: var(--s8); border-top: var(--rule) solid var(--ink); }
@media (max-width: 479px) { .kc .ln-sponsor-actions .ln-btn { flex: 1 1 100%; } }
/* Bronze ships an inline max-width on its wrap; keep the narrow column but
   line it up with the hero text instead of centering it. */
.kc.sos-page-sponsors-bronze .ln-section .ln-wrap { margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }

/* -- Donate + confirmation ----------------------------------------------- */
.kc.sos-page-donate main > .ln-section { background: var(--kraft); }
.kc .ln-split { display: grid; gap: var(--s10); align-items: start; }
.kc .ln-split__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) { .kc .ln-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.kc #donate-form-inner { padding: var(--cell); }
.kc .ln-donate { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.kc .ln-split .ln-donate { width: auto; }
.kc .ln-success { text-align: left; }
.kc .donate-card .ln-success { padding: var(--cell); }
.kc .ln-success__ic {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s6);
  border: var(--rule) solid var(--ink); color: var(--ink);
}
.kc .ln-success__ic svg { width: 28px; height: 28px; }
.kc .ln-success__h { margin-bottom: var(--s5); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; }
.kc .donate-card .ln-success__h { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.kc .ln-success__p { color: var(--ink-soft); max-width: 52ch; }
.kc .ln-success > div[style] { justify-content: flex-start !important; gap: 12px !important; margin-top: var(--s8) !important; }
.kc .ln-success .ln-give-card__fine { color: var(--ink-soft); font-size: 0.875rem; }
.kc.sos-page-donate-success .ln-give-card { max-width: 760px; padding-top: var(--s8); border-top: var(--rule) solid var(--ink); }

/* -- Privacy ---------------------------------------------------------------- */
.kc .ln-legal { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.kc .ln-legal > * { max-width: 760px; }
.kc .ln-legal__meta { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s8); align-items: stretch; margin-bottom: var(--s12); padding-block: var(--s5); border-block: var(--rule) solid var(--ink); }
.kc .ln-legal__meta-div { width: 1px; background: var(--ink); }
.kc .ln-legal__meta-k { font-family: var(--serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.kc .ln-legal__meta-v { font-weight: 600; }
.kc .ln-legal__sec, .kc .ln-legal__contact { margin-bottom: var(--s12); }
.kc .ln-legal__sec p + p { margin-top: var(--s4); }
.kc .ln-legal__h { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s4); padding-top: var(--s5); border-top: 1px solid rgba(29, 26, 22, 0.25); }
.kc .ln-legal__num { flex: 0 0 auto; font-family: var(--serif); font-size: 1.25rem; font-weight: 800; color: var(--clay-deep); }
.kc .ln-legal h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); font-weight: 800; line-height: 1.05; }
.kc .ln-legal a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.kc .ln-legal a:hover { color: var(--clay-deep); }

/* -- SOS News (no dark hero: the cards share the section) ------------------- */
.kc.sos-page-news .ln-page-hero { background: var(--paper); color: var(--ink); padding-block: clamp(64px, 9vw, 128px) var(--band-y); }
.kc.sos-page-news .ln-page-hero::before { display: none; }
.kc.sos-page-news .ln-page-hero h1 { color: var(--ink); }
.kc.sos-page-news .ln-page-hero .ln-lead { color: var(--ink-soft); }
.kc.sos-page-news #nl-public-grid { margin-top: clamp(48px, 6vw, 80px); padding-top: var(--s8); border-top: var(--rule) solid var(--ink); }
.kc.sos-page-news #nl-public-grid > p { text-align: left !important; padding: 0 !important; color: var(--ink-soft) !important; }
.kc .nl-pub-grid { display: grid; gap: var(--s12) 32px; }
@media (min-width: 640px) { .kc .nl-pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kc .nl-pub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kc .nl-pub-cover, .kc .nl-pub-cover-placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kc .nl-pub-cover-placeholder {
  display: grid; place-items: center; background: var(--hollow) url('../assets/images/contours.svg') center / cover no-repeat;
  color: var(--cream); font-family: var(--serif); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em;
}
.kc .nl-pub-body { padding-top: var(--s4); }
.kc .nl-pub-title { font-family: var(--serif); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.kc .nl-pub-date { margin-top: var(--s2); font-family: var(--serif); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.kc .nl-pub-toggle {
  min-height: 44px; margin-top: var(--s3); padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 calc(100% - 8px); background-size: 100% 1.5px;
}
.kc .nl-pub-expand { display: none; margin-top: var(--s4); }
.kc .nl-pub-expand.open { display: block; }
.kc .nl-pub-expand > * + * { margin-top: var(--s4); }
.kc .nl-pub-expand h2 { font-size: 1.5rem; }
.kc .nl-pub-expand blockquote { margin-inline: 0; padding-left: var(--s4); border-left: var(--rule) solid var(--ink); font-family: var(--serif); font-size: 1.25rem; }
.kc .nl-callout { padding: var(--s4); background: var(--kraft); }
.kc .nl-pub-expand hr { border: 0; border-top: 1px dashed rgba(29, 26, 22, 0.5); }
.kc .nl-pub-expand-btn-wrap a { font-weight: 700; color: var(--ink); }

/* Phone layouts: readable headings, reachable controls, and compact spacing. */
@media (max-width: 639px) {
  :root { --band-y: 56px; }
  .kc :is(.ln-page-hero, .sos-reps-hero, .sos-adv-reg-hero) h1 {
    font-size: clamp(2.5rem, 10vw, 3rem);
    overflow-wrap: anywhere;
  }
  .kc .ln-section__head { margin-bottom: 32px; }
  .kc .ln-btn { white-space: normal; text-align: center; line-height: 1.2; }
  .kc :is(.ln-form-card, .sos-contact-form-card) .ln-btn { width: 100%; }
  .kc .donate-card .ln-check { min-height: 44px; align-items: center; }
  .kc .ln-footer__contact { overflow-wrap: anywhere; }
  .kc .ln-mobile {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .kc .sos-mobile-title { margin-bottom: 16px; }
  .kc .sos-mobile-close { top: max(16px, env(safe-area-inset-top)); }
  .kc .ln-mobile__label { margin-top: 20px; }
  .kc .ln-mobile__links a { font-size: 1.5rem; min-height: 44px; }
  .kc .ln-mobile__links .sos-mobile-donate { margin-top: 20px; }
  .kc .ln-fab { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
  .kc .ln-team { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ 6 */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveals: fade + 16px rise, only once kc-js is confirmed. */
  .kc-js [data-reveal] { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
  .kc-js [data-reveal]:not([data-reveal="stagger"]):not(.is-in) { opacity: 0; transform: translateY(16px); }
  .kc-js [data-reveal="stagger"] > * { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
  .kc-js [data-reveal="stagger"]:not(.is-in) > * { opacity: 0; transform: translateY(16px); }
  [data-reveal="stagger"] > :nth-child(2) { --i: 1; }
  [data-reveal="stagger"] > :nth-child(3) { --i: 2; }
  [data-reveal="stagger"] > :nth-child(4) { --i: 3; }
  [data-reveal="stagger"] > :nth-child(5) { --i: 4; }

  /* Hero photo settles from 1.06 to 1.0 on load. */
  .kc-home .sos-hero__background img { animation: kc-settle 1800ms var(--ease-out) both; }

  /* Contours drift very slowly on Where We Serve only. */
  .kc-home .sos-service-area::before { animation: kc-drift 90s ease-in-out infinite alternate; }
}
@keyframes kc-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes kc-drift { from { transform: translate3d(-2%, -1.5%, 0); } to { transform: translate3d(2%, 1.5%, 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kc *, .kc *::before, .kc *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Phones: Stepping / Forward / Together, one word per line. */
@media (max-width: 639px) { .kc-home .sos-hero h1 span:first-child { word-spacing: 100vw; } }