/* KIAC Sponsor a Family — values transcribed from
   design/Sponsor a Family.dc.html (locked). DECISIONS system replaces the
   prototype's raw gutters/hovers: 56px --gutter rail + 1450px cap, motion
   tokens, arrow-as-::after, right-aligned section-header summaries.
   Form primitives (.ffield/.flabel/.chip/.fcheck + input styling) were
   lifted to site.css 2026-08-06 when Church/Veteran needed them. */

/* ---------- Split hero ---------- */

/* Text column starts on the rail (padding-inline-start on the full-width
   container so the %-based --gutter resolves correctly); the photo column
   bleeds to the right viewport edge (hero photos stay full-bleed per the
   1450-cap decision). Column ratio puts the seam at the prototype's
   x≈742 @1280 after the rail replaces the prototype's 52px inset. */
.shero { display: grid; grid-template-columns: 1.275fr 1fr; min-height: 560px; background: #FAF9F7; padding-inline-start: var(--gutter); }
.shero__copy { padding: 72px 52px 60px 0; display: flex; flex-direction: column; justify-content: center; }
.shero .eyebrow { gap: 12px; margin-bottom: 24px; }
.shero .eyebrow .rule { width: 34px; }
.shero .eyebrow .label { color: var(--deep-teal); }
.shero h1 { margin: 0; font-family: var(--font-condensed); font-weight: 700; font-size: 68px; line-height: .94; letter-spacing: -.015em; text-transform: uppercase; color: var(--ink); }
.shero__h1-band { display: inline-block; align-self: flex-start; padding: 0 10px; background: var(--deep-teal); font-family: var(--font-condensed); font-weight: 700; font-size: 68px; line-height: 1; letter-spacing: -.015em; text-transform: uppercase; color: #fff; }
.shero__lede { margin: 24px 0 0; max-width: 470px; font: 400 17px/1.6 var(--font-serif); color: var(--ink); }
.shero__lede--follow { margin-top: 14px; }
.shero__ctas { display: flex; align-items: center; gap: 26px; margin-top: 32px; }

.shero__photo { position: relative; background: var(--photo-ink); }
/* hero photo stays B&W — no hover reveal (matches Home's hero) */
.shero__img { position: absolute; inset: 0; background: url('/assets/photos/kiac-113-ms6h6003-q16l.jpg') 55% center/cover no-repeat; filter: var(--photo-filter); }
.shero__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 40px 20px; background: linear-gradient(to top, rgba(20, 21, 30, .9), rgba(20, 21, 30, 0)); font: 600 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }

/* ---------- Stat strip ---------- */

/* On the rail (DECISIONS: no full-bleed content grids); the 1px gap hack is
   fine inside a gutter-padded section. Stat cards get the promise-style
   hover tint (rule-colored, threshold of perception). */
.sstats { padding: 0 var(--gutter-scope); background: var(--paper); position: relative; }
.sstats::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--ink); z-index: 1; }
.sstats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(41, 42, 60, .18); }
.sstat { background: var(--paper); padding: 26px 26px 24px; border-top: 3px solid var(--ink); transition: background-color var(--t-med) var(--ease); z-index: 2; }
.sstat:hover { background-color: color-mix(in srgb, var(--paper) 97%, var(--ink)); }
.sstat__label { font: 500 10.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(41, 42, 60, .74); margin-bottom: 12px; }
.sstat__numeral { font-family: var(--font-serif); font-weight: 500; font-size: 48px; line-height: .9; color: var(--ink); }
.sstat__body { margin-top: 6px; font: 400 15.5px/1.5 var(--font-serif); color: var(--ink); }
.sstat--teal { background: rgba(47, 157, 143, .14); border-top-color: var(--deep-teal); }
.sstat--teal:hover { background-color: color-mix(in srgb, rgba(47, 157, 143, .14) 94%, var(--deep-teal)); }
.sstat--teal .sstat__label, .sstat--teal .sstat__numeral { color: var(--deep-teal); }

@media (min-width: 1033px) and (max-width: 1577px) { 
   .sstat:first-child { padding-left: 56px }
   .sstat:last-child { padding-right: 56px }
}

/* ---------- "The year, in order" timeline ledger ---------- */

.year { padding: 76px var(--gutter) 66px; background: #fff; }
.year .section-header { margin-bottom: 38px; gap: 48px; }
.year .section-header h2 { font-size: 48px; line-height: 1.06; letter-spacing: -.015em; max-width: 620px; }
.year .section-header .summary { max-width: 330px; font-size: 16px; color: rgba(41, 42, 60, .74); }
.year__row { display: grid; grid-template-columns: 118px 1fr 1.15fr 150px; gap: 26px; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(41, 42, 60, .16); }
.year__row:last-child { border-bottom: 1px solid rgba(41, 42, 60, .16); }
.year__phase { font-family: var(--font-condensed); font-weight: 700; font-size: 19px; line-height: normal; color: var(--deep-teal); }
.year__title { font-family: var(--font-condensed); font-weight: 700; font-size: 22px; line-height: normal; color: var(--ink); }
.year__desc { font: 400 15.5px/1.5 var(--font-serif); color: rgba(41, 42, 60, .8); }
.year__who { font: 600 11px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .6); }

/* ---------- Roles split band ---------- */

/* Band backgrounds bleed full width; the rail applies to the band's content
   (docs/DECISIONS.md 2026-08-06). The gutters are real grid tracks — the
   %-based --gutter resolves correctly as a track on a full-width grid — so
   the KIAC wash can run from the center divide to the right viewport edge:
   it paints the third track plus the trailing gutter track (::after). */
.roles { background: var(--paper); }
.roles__grid { display: grid; grid-template-columns: var(--gutter) 1fr 1fr var(--gutter); }
.roles__col--team { grid-column: 2; padding: 60px 48px 58px 0; border-right: 1px solid rgba(41, 42, 60, .16); }
.roles__col--kiac { grid-column: 3; padding: 60px 48px 58px; background: #2F9D8F19; }
.roles__grid::after { content: ""; grid-column: 4; grid-row: 1; background: #2F9D8F19; }
.roles__kicker { font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--deep-teal); margin-bottom: 16px; }
.roles__kicker--teal { font-weight: 700; color: var(--teal); }
.roles__list { display: grid; gap: 0; }
.roles__list div { font: 400 17px/1.5 var(--font-serif); color: var(--ink); padding: 11px 0; border-top: 1px solid rgba(41, 42, 60, .16); }
.roles__list div:last-child { border-bottom: 1px solid rgba(41, 42, 60, .16); }
.roles__note { margin-top: 24px; font: italic 400 16px/1.5 var(--font-serif); color: var(--ink); }

/* ---------- Quote band ---------- */

/* full-bleed photo band — backgrounds fill the width, content centers */
.squote { background: var(--photo-ink); }
.squote__photo { position: relative; min-height: 480px; display: flex; align-items: end; justify-content: start; background: var(--photo-ink); overflow: hidden; padding: 0 var(--gutter); }
.squote__img { position: absolute; inset: 0; background: url('/assets/photos/KIAC_Sponsor_Family.jpg') center 30%/cover no-repeat; filter: var(--photo-filter); transition: filter var(--t-slow) var(--ease); }
.squote__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 21, 30, .7) 0%, rgba(20, 21, 30, .90) 72%); }
.squote__content { position: relative; padding: 0 0 44px; max-width: 725px; }
.squote__content blockquote { margin: 0; font: italic 400 32px/1.35 var(--font-serif); color: #fff; text-align: left; }
.squote__attr { margin-top: 16px; font: 600 11px var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--light-teal); text-align: left; }

/* ---------- Application ---------- */

.apply { padding: 76px var(--gutter) 80px; background: #fff; }
.apply__grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 56px; align-items: start; }
.apply__main .eyebrow-plain { margin-bottom: 14px; }
.apply__main h2 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 300; font-size: 44px; line-height: 1.06; letter-spacing: -.015em; color: var(--ink); }
.apply__lede { margin: 0 0 30px; max-width: 520px; font: 400 16px/1.6 var(--font-serif); color: rgba(41, 42, 60, .74); }

/* Numbered step rail */
.apply__rail { display: flex; align-items: stretch; margin-bottom: 30px; }
.rail-step { flex: 1; padding: 12px 14px; border-top: 3px solid rgba(41, 42, 60, .25); background: #FAF9F7; transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.rail-step__num { font-family: var(--font-condensed); font-weight: 700; font-size: 13px; line-height: normal; }
.rail-step__name { margin-top: 3px; font: 600 12px var(--font-sans); }
.rail-step__num, .rail-step__name { color: rgba(41, 42, 60, .5); transition: color var(--t-med) var(--ease); }
.rail-step.is-current { background: var(--ink); border-top-color: var(--deep-teal); }
.rail-step.is-current .rail-step__num, .rail-step.is-current .rail-step__name { color: #fff; }
.rail-step.is-done { background: rgba(47, 157, 143, .14); border-top-color: var(--deep-teal); }
.rail-step.is-done .rail-step__num, .rail-step.is-done .rail-step__name { color: var(--deep-teal); }

/* Form card */
.apply__card { margin: 0; border: 1px solid rgba(41, 42, 60, .18); background: #FAF9F7; padding: 34px 34px 28px; }
.apply__card[hidden], .fstep[hidden], .apply__done[hidden] { display: none; }

.fstep { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.fstep__title { grid-column: 1 / -1; font-family: var(--font-condensed); font-weight: 700; font-size: 24px; line-height: normal; color: var(--ink); }
/* Review rows */
.fstep--review { grid-template-columns: 1fr; gap: 0; }
.fstep--review .fstep__title { margin-bottom: 14px; }
.rv { display: flex; justify-content: space-between; gap: 26px; padding: 11px 0; border-top: 1px solid rgba(41, 42, 60, .16); }
.rv:last-of-type { border-bottom: 1px solid rgba(41, 42, 60, .16); }
.rv__label { font: 600 11px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .62); }
.rv__val { font: 400 15px var(--font-serif); color: var(--ink); }
.rv__val--wrap { text-align: right; max-width: 340px; }
.rv__note { margin-top: 16px; font: 400 14.5px/1.55 var(--font-serif); color: rgba(41, 42, 60, .7); }

/* Card footer: Back · hint · Continue */
.apply__nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(41, 42, 60, .16); }
.apply__back { padding: 0 0 3px; border: 0; border-radius: 0; border-bottom: 1.5px solid rgba(41, 42, 60, .3); background: none; font: 600 12px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .7); cursor: pointer; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.apply__back:hover { color: var(--deep-teal); border-color: var(--deep-teal); }
/* the hint is transient guidance, not this screen's clay accent (the
   sidebar callout owns that) — prototype colors both; kept verbatim */
.apply__hint { font: 500 12px var(--font-sans); color: var(--clay); }
.apply__next { padding: 14px 30px; border: 0; border-radius: 0; background: rgba(41, 42, 60, .28); color: #fff; font-family: var(--font-condensed); font-weight: 700; font-size: 16px; line-height: normal; text-transform: uppercase; cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.apply__next.is-ready { background: var(--deep-teal); }
.apply__next.is-ready:hover { background-color: color-mix(in srgb, var(--deep-teal) 86%, black); }
.apply__next.is-ready:active { background-color: color-mix(in srgb, var(--deep-teal) 78%, black); transition-duration: 40ms; }

/* Success panel */
.apply__done { border: 1px solid var(--deep-teal); background: rgba(47, 157, 143, .1); padding: 44px 40px; }
.apply__done-kicker { font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--deep-teal); }
.apply__done-title { margin-top: 14px; font-family: var(--font-serif); font-weight: 300; font-size: 34px; line-height: 1.1; color: var(--ink); }
.apply__done-body { margin: 16px 0 0; max-width: 520px; font: 400 16px/1.6 var(--font-serif); color: rgba(41, 42, 60, .78); }
.apply__done-ctas { display: flex; gap: 14px; margin-top: 26px; }
.apply__film { padding: 14px 26px; }
.apply__restart { padding: 14px 26px; border: 1px solid rgba(41, 42, 60, .3); border-radius: 0; background: none; color: var(--ink); font-family: var(--font-condensed); font-weight: 700; font-size: 15px; line-height: normal; text-transform: uppercase; cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.apply__restart:hover { border-color: var(--ink); }

/* Sidebar: "Before you apply" */
.apply__aside { border-top: 3px solid var(--ink); background: var(--paper); padding: 30px 28px 28px; }
.aside-card__title { font-family: var(--font-condensed); font-weight: 700; font-size: 22px; line-height: normal; color: var(--ink); }
.aside-card__list { margin-top: 16px; display: grid; gap: 0; }
.aside-card__row { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid rgba(41, 42, 60, .16); font: 400 15px/1.45 var(--font-serif); color: var(--ink); }
.aside-card__row:last-child { border-bottom: 1px solid rgba(41, 42, 60, .16); }
.aside-card__check { color: var(--deep-teal); font-weight: 600; }
/* the screen's clay accent */
.aside-card__callout { margin-top: 20px; padding: 16px 18px; background: rgba(193, 85, 58, .1); border-left: 3px solid var(--clay); }
.aside-card__callout-kicker { font: 600 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--clay); }
.aside-card__callout-body { margin-top: 6px; font: 400 14.5px/1.5 var(--font-serif); color: var(--ink); }
.aside-card__contact { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(41, 42, 60, .16); }
.aside-card__contact-kicker { font: 600 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .62); }
.aside-card__contact-body { margin-top: 8px; font: 400 15px/1.5 var(--font-serif); color: var(--ink); }
.aside-card__contact-body a { color: var(--deep-teal); border-bottom: 1px solid rgba(31, 110, 102, .45); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.aside-card__contact-body a:hover { color: var(--ink); border-color: rgba(41, 42, 60, .45); }

/* ---------- FAQ ---------- */

.faq { padding: 66px var(--gutter) 12px; background: #FAF9F7; }
.faq__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.faq__head h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 40px; line-height: 1.06; color: var(--ink); }
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 56px; }
.faq__q { font-family: var(--font-condensed); font-weight: 700; font-size: 19px; line-height: normal; color: var(--ink); }
.faq__a { margin-top: 7px; font: 400 16px/1.55 var(--font-serif); color: rgba(41, 42, 60, .78); }

/* ==================== Responsive collapse ====================
   Two breakpoints (docs/DECISIONS.md 2026-08-04): tablet ≤1032px restacks,
   mobile ≤767px densifies. Display type scales with clamp(); every clamp
   reaches its max below 1032px so the locked desktop render is untouched. */

@media (max-width: 1032px) {
   /* Hero → single column, text first; the photo becomes a full-bleed band
      below the copy (README: side element moves under the h1/CTAs) */
   .shero { grid-template-columns: 1fr; min-height: 0; padding-inline-start: 0; }
   .shero__copy { padding: 56px var(--gutter) 44px; }
   .shero h1, .shero__h1-band { font-size: clamp(40px, 8.5vw, 68px); }
   .shero__ctas { flex-wrap: wrap; }
   .shero__photo { min-height: 420px; }

   .sstats { padding: 0 0; }
   .sstats__grid { grid-template-columns: 1fr 1fr; }
   .sstat__numeral { font-size: clamp(38px, 6vw, 48px); }

   .year .section-header h2 { font-size: clamp(34px, 5.5vw, 48px); }
   /* ledger rows restack: phase + who share the top line */
   .year__row { grid-template-columns: 1fr auto; grid-template-areas: "phase who" "title title" "desc desc"; gap: 4px 26px; }
   .year__phase { grid-area: phase; }
   .year__who { grid-area: who; align-self: center; }
   .year__title { grid-area: title; }
   .year__desc { grid-area: desc; }

   /* Stacked: team list on the rail, then the wash as its own full-bleed
      band (content keeps the rail via --gutter padding — the item spans the
      full grid width, so the % still resolves correctly) */
   .roles__grid { grid-template-columns: var(--gutter) 1fr var(--gutter); }
   .roles__grid::after { content: none; }
   .roles__col--team { grid-column: 2; padding: 44px 0 40px; border-right: 0; }
   .roles__col--kiac { grid-column: 1 / -1; padding: 40px var(--gutter) 44px; }

   .squote__content blockquote { font-size: clamp(26px, 4vw, 40px); }

   /* Apply grid stacks form-first; sidebar follows */
   .apply__grid { grid-template-columns: 1fr; gap: 40px; }
   .apply__main h2 { font-size: clamp(32px, 5vw, 44px); }

   .faq__head h2 { font-size: clamp(30px, 5vw, 40px); }
}

@media (max-width: 767px) {
   .shero__copy { padding: 48px var(--gutter) 40px; }
   .shero__photo { min-height: 340px; }
   .shero__caption { padding: 48px 20px 16px; }

   .sstats__grid { grid-template-columns: 1fr; }

   .year { padding-block: 48px 40px; }

   .roles__col--team { padding: 36px 0 32px; }
   .roles__col--kiac { padding: 32px var(--gutter) 36px; }

   .squote__photo { min-height: 340px; }
   .squote__content { padding: 0 20px 36px; }

   .apply { padding-block: 52px 56px; }
   .apply__card { padding: 24px 20px 22px; }
   .fstep { grid-template-columns: 1fr; }
   .rail-step { padding: 10px 8px; }
   .rail-step__name { font-size: 11px; }

   .apply__nav { gap: 12px; }
   .apply__next { padding: 14px 22px; }
   .apply__done { padding: 32px 24px; }
   .apply__done-title { font-size: clamp(26px, 6vw, 34px); }
   .apply__done-ctas { flex-wrap: wrap; }
   .apply__aside { padding: 24px 20px; }

   .faq { padding-block: 48px 52px; }
   .faq__head { flex-direction: column; align-items: flex-start; gap: 12px; }
   .faq__grid { grid-template-columns: 1fr; gap: 28px; }

   /* body copy floors at 16px on phones (README) */
   .sstat__body, .year__desc, .faq__a { font-size: 16px; }
}