/* KIAC Hub Events — values transcribed from design/Hub Events.dc.html
   (locked) with the DECISIONS system in place of raw prototype gutters/
   hovers: 56px --gutter rail + 1450px cap (gutter-track recipes on the split
   bands), motion tokens, arrow-as-::after, .eyebrow-plain kickers, form
   primitives from site.css. Deviations (rail normalization, contact-grid
   normalization, omitted 0px section, contact sweep) are logged in
   docs/DECISIONS.md 2026-08-06. Events data: src/_data/hubEvents.js — the
   ledger renders when it has entries, the empty state otherwise. */

/* ---------- Split hero: ink + photo underlay left, "Host a hub" paper panel
   right. Gutter tracks (roles-band recipe — item-% padding misresolves above
   the cap); ratio puts the seam at the prototype's x=736 @1280 with the copy
   starting on the 56px rail (prototype inset: 48px). ---------- */

.hhero { display: grid; grid-template-columns: var(--gutter) 1.3934fr 1fr var(--gutter); background: var(--ink); }
.hhero__media { grid-column: 1 / 3; grid-row: 1; position: relative; overflow: hidden; }
/* hero photo stays B&W — no hover reveal (matches the other heroes) */
.hhero__img { position: absolute; inset: 0; background: url('/assets/img/kiac-113-ms6h6003-q16l-1920w.jpeg') center 30%/cover no-repeat; background-image: image-set(url('/assets/img/kiac-113-ms6h6003-q16l-1920w.webp') type('image/webp'), url('/assets/img/kiac-113-ms6h6003-q16l-1920w.jpeg') type('image/jpeg')); filter: var(--photo-filter); opacity: .34; }
.hhero__grad { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(41, 42, 60, .96) 0%, rgba(41, 42, 60, .72) 100%); }
.hhero__copy { grid-column: 2; grid-row: 1; position: relative; padding: 78px 48px 70px 0; --focus-ring: var(--light-teal); }
.hhero .eyebrow { gap: 12px; margin-bottom: 22px; }
.hhero .eyebrow .rule { width: 34px; }
.hhero h1 { margin: 0; font-family: var(--font-condensed); font-weight: 700; font-size: 66px; line-height: .94; letter-spacing: -.015em; text-transform: uppercase; color: #fff; max-width: 600px; }
.hhero__h1-band { display: inline-block; margin-top: 12px; padding: 4px 14px 7px; background: var(--deep-teal); font-family: var(--font-condensed); font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.hhero__lede { margin: 26px 0 0; max-width: 520px; font: 400 17px/1.6 var(--font-serif); color: rgba(255, 255, 255, .86); }

.hhero__stats { display: grid; grid-template-columns: repeat(3, auto); gap: 0; margin-top: 38px; justify-content: start; }
.hhero__stat { padding: 0 30px; border-right: 1px solid rgba(255, 255, 255, .2); }
.hhero__stat:first-child { padding-left: 0; }
.hhero__stat:last-child { padding-right: 0; border-right: 0; }
.hhero__stat-num { font-family: var(--font-serif); font-weight: 500; font-size: 38px; line-height: 1; color: #fff; }
.hhero__stat-label { margin-top: 7px; font: 600 10.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }

/* Host panel — paper surface runs to the right viewport edge (::after paints
   the trailing gutter track); content ends on the rail (prototype: 44px
   inset off the edge). */
.hhero__host { grid-column: 3; grid-row: 1; background: var(--paper); padding: 78px 0 70px 44px; }
.hhero::after { content: ""; grid-column: 4; grid-row: 1; background: var(--paper); }
.hhero__host-kicker { font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--deep-teal); margin-bottom: 12px; }
.hhero__host-title { font-family: var(--font-serif); font-weight: 300; font-size: 34px; line-height: 1.14; color: var(--ink); }
.hhero__host-rows { display: grid; gap: 0; margin-top: 26px; }
.hhero__host-row { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(41, 42, 60, .18); }
.hhero__host-row:last-child { border-bottom: 1px solid rgba(41, 42, 60, .18); }
.hhero__host-num { font-family: var(--font-condensed); font-weight: 700; font-size: 19px; line-height: normal; color: var(--deep-teal); }
.hhero__host-item { font-family: var(--font-condensed); font-weight: 700; font-size: 19px; line-height: normal; color: var(--ink); }
.hhero__host-body { margin-top: 4px; font: 400 15px/1.5 var(--font-serif); color: rgba(41, 42, 60, .76); }
.hhero__host .btn { margin-top: 26px; }

/* ---------- "This year's hub events" calendar ---------- */

.hevents { padding: 72px var(--gutter) 66px; background: #fff; }
.hevents .section-header { margin-bottom: 36px; gap: 48px; }
.hevents .section-header h2 { font-size: 46px; line-height: 1.07; letter-spacing: -.015em; }

.etable__head { display: grid; grid-template-columns: 170px 1fr 1.05fr 210px; gap: 26px; padding: 0 0 10px; border-bottom: 1px solid rgba(41, 42, 60, .5); }
.etable__col { font: 600 10.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(41, 42, 60, .6); }
.etable__row { display: grid; grid-template-columns: 170px 1fr 1.05fr 210px; gap: 26px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(41, 42, 60, .16); }
.etable__date { font-family: var(--font-condensed); font-weight: 700; font-size: 20px; line-height: normal; color: var(--ink); }
.etable__year { margin-top: 3px; font: 500 12px var(--font-sans); color: rgba(41, 42, 60, .6); }
.etable__city { font-family: var(--font-condensed); font-weight: 700; font-size: 22px; line-height: normal; color: var(--ink); }
.etable__venue { font: 400 16px/1.45 var(--font-serif); color: var(--ink); }
.etable__note { margin-top: 3px; font: 400 14.5px/1.45 var(--font-serif); color: rgba(41, 42, 60, .66); }
/* line-height: normal on the pill cell — the site body's 1.6 would tax the
   baseline-aligned row (accountability-ledger gotcha) */
.etable__status { line-height: normal; }
.epill { display: inline-block; padding: 5px 11px; font: 600 10.5px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.epill--confirmed { background: rgba(47, 157, 143, .16); color: var(--deep-teal); }
.epill--hold { background: rgba(41, 42, 60, .08); color: rgba(41, 42, 60, .66); }
/* semantic negative (Veteran-clay precedent) — never decorative */
.epill--need { background: rgba(168, 69, 45, .1); color: var(--clay); }
.etable__foot { margin-top: 26px; font: 400 15.5px/1.6 var(--font-serif); color: rgba(41, 42, 60, .74); }
/* inline link — sponsor aside-card / involved .plink recipe */
.etable__foot a, .hform__done 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); }
.etable__foot a:hover, .hform__done a:hover { color: var(--ink); border-color: rgba(41, 42, 60, .45); }

/* Empty state — ships pre-launch (hubEvents.js is empty) */
.hempty { padding: 46px 0 10px; border-top: 1px solid rgba(41, 42, 60, .5); }
.hempty__title { font-family: var(--font-serif); font-weight: 300; font-size: 30px; line-height: 1.2; color: var(--ink); max-width: 520px; }
.hempty p { margin: 12px 0 0; max-width: 480px; font: 400 16px/1.6 var(--font-serif); color: rgba(41, 42, 60, .74); }
.hempty .btn { margin-top: 22px; }

/* ---------- "The shape of the day" split band: photo bleeds left, ledger
   right ends on the rail (trailing gutter track). Seam x=589 @1280. ---------- */

.hday { display: grid; grid-template-columns: .9276fr 1fr var(--gutter); background: var(--paper); border-top: 1px solid rgba(41, 42, 60, .16); }
.hday__photo { min-height: 520px; }
.hday__img { background-image: url('/assets/img/kiac-127-ms6vljjs-191c-1440w.jpeg'); background-image: image-set(url('/assets/img/kiac-127-ms6vljjs-191c-1440w.webp') type('image/webp'), url('/assets/img/kiac-127-ms6vljjs-191c-1440w.jpeg') type('image/jpeg')); }
.hday__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 21, 30, 0) 0%, rgba(20, 21, 30, .52) 52%, rgba(20, 21, 30, .93) 100%); }
.hday__capbar { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 36px 36px; }
/* margin-top preserved from the prototype's (empty) quote slot above it */
.hday__caption { margin-top: 14px; font: 600 10.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #FFFFFFB4; }

.hday__copy { padding: 66px 0 62px 48px; }
.hday__copy h2 { margin: 0 0 26px; font-family: var(--font-serif); font-weight: 300; font-size: 40px; line-height: 1.09; letter-spacing: -.015em; color: var(--ink); }
.hday__rows { display: grid; gap: 0; }
.hday__row { display: grid; grid-template-columns: 132px 1fr; gap: 22px; padding: 15px 0; border-top: 1px solid rgba(41, 42, 60, .18); }
.hday__row:last-child { border-bottom: 1px solid rgba(41, 42, 60, .18); }
.hday__term { font-family: var(--font-condensed); font-weight: 700; font-size: 17px; line-height: normal; color: var(--deep-teal); }
.hday__def { font: 400 15.5px/1.55 var(--font-serif); color: var(--ink); }

/* The prototype's empty ink 2-col section between this band and the contact
   section renders 0px tall (empty default branch) — omitted, see
   docs/DECISIONS.md 2026-08-06. */

/* ---------- Contact: info + interactive-mock form (#contact-b) ----------
   Gutter tracks; the prototype's hand-dragged fixed form box (794×575) is
   normalized to the declared .98fr/1.02fr split (docs/DECISIONS.md
   2026-08-06). ---------- */

.hcontact { display: grid; grid-template-columns: var(--gutter) .98fr 1.02fr var(--gutter); background: var(--paper-light); border-top: 1px solid rgba(41, 42, 60, .16); }
.hcontact__info { grid-column: 2; grid-row: 1; padding: 72px 48px 66px 0; }
.hcontact__info h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 46px; line-height: 1.07; letter-spacing: -.015em; color: var(--ink); max-width: 460px; }
.hcontact__info p { margin: 18px 0 0; max-width: 430px; font: 400 16px/1.6 var(--font-serif); color: rgba(41, 42, 60, .76); }
.hcontact__ledger { margin-top: 32px; display: grid; gap: 0; max-width: 440px; }
.hcontact__lrow { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(41, 42, 60, .16); }
.hcontact__lrow:last-child { border-bottom: 1px solid rgba(41, 42, 60, .16); }
.hcontact__lterm { font: 600 11px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .7); padding-top: 3px; }
.hcontact__lval { font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: normal; color: var(--deep-teal); }
.hcontact__lval a { color: var(--deep-teal); }
.hcontact__lval a:hover { color: var(--ink); }
.hcontact__ldef { font: 400 16px/1.5 var(--font-serif); color: var(--ink); }

/* Form — static interactive mock (sponsor-stepper precedent): validation,
   hint, and the sent panel run client-side; nothing is submitted. Fields are
   the site.css primitives. */
.hform { grid-column: 3; grid-row: 1; padding: 72px 0 50px 44px; }
.hform__role-head { margin-bottom: 10px; }
.hform__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.hform__role { justify-content: center; padding: 12px 14px; font-family: var(--font-condensed); font-weight: 700; font-size: 16px; }
.hform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hform__msg { margin-top: 14px; }
.hform__opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: rgba(41, 42, 60, .66); } /* .5 → .66: AA contrast (Wave A5) */
/* submit gates on validity (sponsor .apply__next recipe) */
.hform__submit { display: block; width: 100%; margin-top: 22px; padding: 15px 30px; border: 0; border-radius: 0; background: rgba(41, 42, 60, .28); color: #fff; font-family: var(--font-condensed); font-weight: 700; font-size: 15px; line-height: normal; text-transform: uppercase; cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.hform__submit.is-ready { background: var(--deep-teal); }
.hform__submit.is-ready:hover { background-color: color-mix(in srgb, var(--deep-teal) 86%, black); }
.hform__submit.is-ready:active { background-color: color-mix(in srgb, var(--deep-teal) 78%, black); transition-duration: 40ms; }
/* the hint is transient guidance, not the screen's clay accent (sponsor
   precedent) — clay while the form is incomplete */
.hform__hint { margin-top: 10px; font: 500 12px/1.5 var(--font-sans); color: rgba(41, 42, 60, .62); }
.hform__hint.is-invalid { color: var(--clay); }

/* Sent panel */
.hform__done[hidden], .hform__form[hidden] { display: none; }
.hform__done-kicker { font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--deep-teal); margin-bottom: 14px; }
.hform__done-title { font-family: var(--font-condensed); font-weight: 700; font-size: 30px; line-height: 1.08; color: var(--ink); }
.hform__done p { margin: 14px 0 0; font: 400 16px/1.6 var(--font-serif); color: var(--ink); }
/* text-link recipe on a button (a.text-link hovers don't reach buttons) */
.hform__restart { margin-top: 24px; background: none; border: 0; border-bottom: 1.5px solid var(--teal); cursor: pointer; }
.hform__restart:hover, .hform__restart:focus-visible { color: var(--deep-teal); border-color: var(--deep-teal); }
.hform__restart:hover::after, .hform__restart:focus-visible::after { transform: translateX(2px); }

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

@media (max-width: 1032px) {
   /* Hero → single column: copy over the photo, host panel becomes its own
      full-width paper band below (README: side card moves under the copy) */
   .hhero { grid-template-columns: 1fr; }
   .hhero__media { grid-column: 1; grid-row: 1; }
   .hhero__copy { grid-column: 1; grid-row: 1; padding: 56px var(--gutter) 44px; }
   .hhero h1 { font-size: clamp(40px, 8.5vw, 66px); }
   .hhero__h1-band { font-size: clamp(24px, 3.6vw, 36px); }
   .hhero__host { grid-column: 1; grid-row: 2; padding: 44px var(--gutter) 48px; }
   .hhero::after { content: none; }
   .hhero__host-title { font-size: clamp(28px, 3.4vw, 34px); }

   .hevents .section-header h2 { font-size: clamp(34px, 5.5vw, 46px); }
   .etable__head, .etable__row { grid-template-columns: 150px 1fr 1fr 170px; }

   /* Photo drops under the copy (church .aziz recipe — headline reads first) */
   .hday { grid-template-columns: 1fr; }
   .hday__copy { order: 1; padding: 56px var(--gutter) 44px; }
   .hday__copy h2 { font-size: clamp(30px, 5vw, 40px); }
   .hday__photo { order: 2; min-height: 420px; }

   /* Contact stacks in DOM order — the intro + ledger introduce the form */
   .hcontact { grid-template-columns: 1fr; }
   .hcontact__info { grid-column: 1; grid-row: 1; padding: 56px var(--gutter) 40px; }
   .hcontact__info h2 { font-size: clamp(34px, 5.5vw, 46px); }
   .hform { grid-column: 1; grid-row: 2; padding: 0 var(--gutter) 52px; }
}

@media (max-width: 743px) {
   .hhero__copy { padding: 48px var(--gutter) 40px; }
   /* the 3-up measure tightens so the strip still fits a 375px screen */
   .hhero__stat { padding: 0 18px; }
   .hhero__stat-num { font-size: clamp(26px, 7vw, 38px); }
   .hhero__host { padding: 40px var(--gutter) 44px; }
   .hhero__host-body { font-size: 16px; }

   .hevents { padding-block: 48px 44px; }
   .hempty__title { font-size: clamp(26px, 7vw, 30px); }

   /* Event rows restack: date + status share the top line (year-row recipe);
      the header row disappears with the columns (accountability precedent) */
   .etable__head { display: none; }
   .etable__row { grid-template-columns: 1fr auto; grid-template-areas: "when status" "city city" "where where"; gap: 4px 26px; }
   .etable__when { grid-area: when; }
   .etable__status { grid-area: status; align-self: center; }
   .etable__city { grid-area: city; }
   .etable__where { grid-area: where; }
   .etable__note, .etable__foot { font-size: 16px; }

   .hday__copy { padding: 48px var(--gutter) 40px; }
   .hday__photo { min-height: 340px; }
   .hday__capbar { padding: 0 20px 28px; }
   /* term/def rows stack below ~600px per the README's needs-list intent */
   .hday__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
   .hday__def { font-size: 16px; }

   .hcontact__info { padding-block: 48px 36px; }
   .hform { padding-bottom: 48px; }
   .hform__grid { grid-template-columns: 1fr; }
}

/* Image pipeline (docs/DECISIONS.md 2026-08-11): phones take the 1080w tier;
   position/size stay inherited from the base rules above. */
@media (max-width: 743px) {
  .hhero__img { background-image: url('/assets/img/kiac-113-ms6h6003-q16l-1080w.jpeg'); background-image: image-set(url('/assets/img/kiac-113-ms6h6003-q16l-1080w.webp') type('image/webp'), url('/assets/img/kiac-113-ms6h6003-q16l-1080w.jpeg') type('image/jpeg')); }
  .hday__img { background-image: url('/assets/img/kiac-127-ms6vljjs-191c-1080w.jpeg'); background-image: image-set(url('/assets/img/kiac-127-ms6vljjs-191c-1080w.webp') type('image/webp'), url('/assets/img/kiac-127-ms6vljjs-191c-1080w.jpeg') type('image/jpeg')); }
}