/* KIAC About — values transcribed from design/About.dc.html (locked) with the
   DECISIONS system in place of raw prototype gutters/hovers: 56px --gutter
   rail + 1450px cap, motion tokens, arrow-as-::after, .eyebrow--deep for the
   teal-rule/deep-label eyebrows, right-aligned section-header summaries.
   Doubles as the About/Aziz's-Story pair sheet: .bookcard (both pages) lives
   here and aziz-story.html links this file before aziz.css. The give band +
   ways/paths fork are site.css components (partials/ways-fork.njk). */

/* section-header refinements shared by this page pair — same duplicate-with-
   attribution recipe involved.css used for sponsor's (kept per-sheet so the
   rules can't leak onto other pages' headers) */
.section-header h2 { font-size: 50px; line-height: 1.1; letter-spacing: -.02em; max-width: 700px; }
.section-header .summary { max-width: 360px; }
/* prototype headers that top-align the summary instead of the default flex-end */
.section-header--top { align-items: flex-start; }

/* ---------- Opening: serif h1 + facts ledger card ---------- */

.opening { padding: 78px var(--gutter) 58px; background: #fff; }
.opening .eyebrow { gap: 12px; margin-bottom: 26px; }
.opening .eyebrow .rule { width: 34px; }
.opening__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 70px; align-items: start; }
/* Newsreader h1 — the one interior page that opens serif, not condensed */
.opening h1 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 60px; line-height: 1.06; letter-spacing: -.022em; color: var(--ink); text-wrap: pretty; }
.opening__lede { margin: 28px 0 0; max-width: 600px; font: 400 18px/1.6 var(--font-serif); color: var(--ink); }
.opening__lede--follow { margin-top: 18px; }
.opening .text-link { margin-top: 30px; padding-bottom: 5px; }

/* Facts card — deliberately not involved.css's .lcard: row padding 18px,
   gap 22px, term min-width 88px per the prototype */
.facts { border-top: 3px solid var(--ink); background: var(--paper-alpha); padding: 4px 26px 8px; }
.facts__row { display: grid; grid-template-columns: auto 1fr; gap: 0 22px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(41, 42, 60, .14); }
.facts__row:last-child { border-bottom: 0; }
.facts__term { font: 500 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .7); min-width: 88px; }
.facts__def { font: 400 16px/1.45 var(--font-serif); color: var(--ink); }

/* ---------- Quote band: photo contained on the rail, caption only ----------
   The prototype's quote slot is an empty default branch — caption-only is
   the approved render, and the photo is contained like Home's quoteband
   instead of the prototype's full-bleed band (Colin, 2026-08-06 preview
   review). White wash + 68px gap below are Colin's refinement (3f8524d). ---------- */

.aquote { padding: 0 var(--gutter); background: #FFF; margin-bottom: 68px; }
.aquote__photo { height: 500px; }
.aquote__img { background-image: url('/assets/img/kiac-101-ms7jr6vg-x8pf-1440w.jpeg'); background-image: image-set(url('/assets/img/kiac-101-ms7jr6vg-x8pf-1440w.webp') type('image/webp'), url('/assets/img/kiac-101-ms7jr6vg-x8pf-1440w.jpeg') type('image/jpeg')); background-position: center 40%; }
.aquote__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 22px; background: linear-gradient(to top, rgba(20, 21, 30, .94) 0%, rgba(20, 21, 30, .82) 46%, rgba(20, 21, 30, 0) 100%); }
/* margin-top preserved from the prototype's (empty) quote slot above it */
.aquote__caption { margin-top: 9px; font: 600 10.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--light-teal); }

/* ---------- "What we believe": centered head + four commitment cards ---------- */

.believe { padding: 90px var(--gutter) 86px; background: #F5F3EE80; }
.believe__eyebrow { text-align: center; font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--deep-teal); }
.believe h2 { margin: 16px 0 0; text-align: center; font-family: var(--font-serif); font-weight: 300; font-size: 50px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.believe__summary { margin: 18px auto 0; max-width: 560px; text-align: center; font: 400 17px/1.6 var(--font-serif); color: rgba(41, 42, 60, .78); }
.believe__wrap { position: relative; margin-top: 56px; }
/* connector hairline behind the icon tiles — single-row layout only */
.believe__line { position: absolute; left: 40px; right: 40px; top: 40px; height: 1px; background: rgba(41, 42, 60, .2); }
.believe__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.commit { display: flex; flex-direction: column; align-items: center; text-align: center; }
.commit__tile { width: 68px; height: 70px; border: 1px solid rgba(41, 42, 60, .28); border-radius: 999px 999px 0 0; background: var(--paper); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.commit__title { margin-top: 26px; font: 400 22px/1.25 var(--font-serif); color: var(--ink); }
.commit__body { margin: 12px 0 0; max-width: 250px; font: 400 15px/1.55 var(--font-serif); color: rgba(41, 42, 60, .72); }

/* ---------- "Who we are": founder copy + book card ---------- */

.who { padding: 80px var(--gutter) 76px; background: #fff; }
.who__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
.who__copy p { margin: 0; font: 400 18px/1.62 var(--font-serif); color: var(--ink); }
.who__copy p + p { margin-top: 18px; }
.who .text-link { margin-top: 26px; padding-bottom: 5px; }

/* Book card — pair-shared (About "Who we are" + Aziz's Story chapter III) */
.bookcard { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: start; border-top: 3px solid var(--ink); background: var(--paper-alpha); padding: 26px 26px 28px; }
.bookcard__cover { width: 150px; height: auto; box-shadow: 0 3px 12px rgba(41, 42, 60, .22); opacity: .9; }
.bookcard__kicker { font: 500 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .7); }
.bookcard__title { margin-top: 10px; font-family: var(--font-condensed); font-weight: 700; font-size: 28px; line-height: 1.02; color: var(--ink); }
.bookcard__body { margin: 12px 0 0; font: 400 15.5px/1.5 var(--font-serif); color: var(--ink); }
.bookcard .text-link { margin-top: 18px; }
/* story variant (Aziz's Story): smaller cover/title, solid paper */
.bookcard--story { grid-template-columns: 132px 1fr; padding: 24px 24px 26px; background: var(--paper); }
.bookcard--story .bookcard__cover { width: 132px; opacity: .92; }
.bookcard--story .bookcard__title { font-size: 24px; }
.bookcard--story .bookcard__body { font-size: 16px; line-height: 1.55; }

/* ---------- Pillars: 3-up gap-hack grid ---------- */

.tri { padding: 86px var(--gutter) 92px; background: var(--paper-light); }
.tri__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--grid-gap-ink); border: 1px solid transparent; }
.tri__card { border-top: 3px solid var(--ink); padding: 32px 30px 34px; background: var(--paper-light); transition: background-color var(--t-med) var(--ease); }
/* hover tint matches each card's rule color at the threshold of perception
   (promise/scope-cell recipe — Colin, 2026-08-06 preview review) */
.tri__card:hover { background-color: color-mix(in srgb, var(--paper-light) 97%, var(--ink)); }
.tri__card--teal { border-top-color: var(--teal); }
.tri__card--teal:hover { background-color: color-mix(in srgb, var(--paper-light) 97%, var(--deep-teal)); }
.tri__kicker { font: 600 10.5px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(41, 42, 60, .68); }
.tri__card--teal .tri__kicker { color: var(--deep-teal); }
.tri__title { margin-top: 14px; font-family: var(--font-condensed); font-weight: 700; font-size: 30px; line-height: 1; color: var(--ink); }
.tri__body { margin: 14px 0 0; font: 400 16px/1.55 var(--font-serif); color: var(--ink); }
.tri .text-link { margin-top: 20px; }

/* ---------- Board: 5-up portraits ----------
   Half-tone treatment kept from the prototype (grayscale .5 at rest → color
   on hover; deviation from the blanket grayscale(1) rule — Colin 2026-08-06),
   with motion tokens replacing the prototype's raw .5s ease. ---------- */

.board { padding: 70px var(--gutter) 66px; background: var(--paper); }
.board .section-header { margin-bottom: 38px; }
.board__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.member__photo { aspect-ratio: 4/5; background-color: var(--ink); background-repeat: no-repeat; filter: grayscale(.5) contrast(1.06); transition: filter var(--t-slow) var(--ease); }
.member__photo:hover { filter: grayscale(0) contrast(1); }
.member__photo--aziz { background-image: url('/assets/img/KIAC-107-1080w.jpeg'); background-image: image-set(url('/assets/img/KIAC-107-1080w.webp') type('image/webp'), url('/assets/img/KIAC-107-1080w.jpeg') type('image/jpeg')); background-position: 65% center; background-size: cover; }
.member__photo--chad { background-image: url('/assets/img/kiac-128-ms7nf7qg-0zna-1080w.jpeg'); background-image: image-set(url('/assets/img/kiac-128-ms7nf7qg-0zna-1080w.webp') type('image/webp'), url('/assets/img/kiac-128-ms7nf7qg-0zna-1080w.jpeg') type('image/jpeg')); background-position: 65% 35%; background-size: 150%; }
.member__photo--jeremy { background-image: url('/assets/img/kiac-129-ms7nq4ln-h66a-1080w.jpeg'); background-image: image-set(url('/assets/img/kiac-129-ms7nq4ln-h66a-1080w.webp') type('image/webp'), url('/assets/img/kiac-129-ms7nq4ln-h66a-1080w.jpeg') type('image/jpeg')); background-position: 67% 35%; background-size: 290%; }
.member__name { margin-top: 16px; font-family: var(--font-condensed); font-weight: 700; font-size: 22px; line-height: 1.04; color: var(--ink); }
.member__role { margin-top: 7px; font: 600 10.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(41, 42, 60, .68); }
.member__role--founder { color: var(--deep-teal); }
.member__bio { margin: 12px 0 0; font: 400 15.5px/1.5 var(--font-serif); color: var(--ink); }
/* open seats */
.member--open .member__photo { aspect-ratio: 4/5; background: none; border: 1px dashed rgba(41, 42, 60, .3); display: flex; align-items: center; justify-content: center; filter: none; }
.member--open .member__photo:hover { filter: none; }
/* open-seat de-emphasis, lifted to AA minimums (Wave A5, Colin-approved):
   name is large text (3.0 floor) so it stays lightest; the 9.5px mono label
   and 10.5px role need the full 4.5 → .66 on paper */
.member__open-label { font: 500 9.5px/1.5 ui-monospace, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .66); }
.member--open .member__name { color: rgba(41, 42, 60, .62); }
.member--open .member__role { color: rgba(41, 42, 60, .66); }
.member--open .member__bio { color: rgba(41, 42, 60, .7); }

/* ---------- Accountability ledger ---------- */

.acct { padding: 66px var(--gutter) 62px; background: #FFFFFF7F; border-bottom: 1px solid var(--hairline); }
.acct__table { background: #fff; border-top: 3px solid var(--ink); }
.acct__row { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: 0 32px; padding: 20px 30px; border-bottom: 1px solid rgba(41, 42, 60, .1); align-items: baseline; }
.acct__row:last-child { border-bottom: 0; }
.acct__row--head { padding: 16px 30px; border-bottom: 1px solid rgba(41, 42, 60, .2); }
.acct__col { font: 600 10.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(41, 42, 60, .7); }
.acct__line { font-family: var(--font-condensed); font-weight: 700; font-size: 20px; line-height: 1; color: var(--ink); }
/* line-height: normal on the cell — the site body's 1.6 would tax the
   baseline row by ~1.2px (transcription gotcha: prototype body sets none) */
.acct__pill-cell { line-height: normal; }
.acct__pill { display: inline-block; padding: 5px 11px; background: var(--deep-teal); color: #fff; font: 600 10.5px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.acct__pill--soft { background: rgba(41, 42, 60, .1); color: var(--ink); }
.acct__detail { font: 400 16px/1.5 var(--font-serif); color: var(--ink); }
.acct__foot { margin-top: 22px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.acct__foot .text-link { padding-bottom: 4px; }
.acct__note { font: 400 15.5px/1.5 var(--font-serif); color: rgba(41, 42, 60, .72); }
/* inline tel link — sponsor aside-card / involved .plink recipe */
.acct__note a, .facts__def 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); }
.acct__note a:hover, .facts__def a:hover { color: var(--ink); border-color: rgba(41, 42, 60, .45); }

/* About's fork is Home's, verbatim — partials/ways-fork.njk; styles in
   site.css (Colin, 2026-08-06 preview review; supersedes the prototype's
   doors-variant fork) */

/* ==================== 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;
   give band + doors collapses are site.css. */

@media (max-width: 1032px) {
   /* Opening → single column, facts card under the copy (README side-card rule) */
   .opening__grid { grid-template-columns: 1fr; gap: 44px; }
   .opening h1 { font-size: clamp(36px, 6vw, 60px); }

   .aquote__photo { height: 420px; }

   .believe h2 { font-size: clamp(34px, 5.5vw, 50px); }
   /* 4-up → 2×2; the single-row connector line can't follow the wrap */
   .believe__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
   .believe__line { display: none; }

   .section-header h2 { font-size: clamp(34px, 5.5vw, 50px); }

   .who__grid { grid-template-columns: 1fr; gap: 40px; }

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

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

   /* ledger rows restack: line + status share the top line (year__row recipe) */
   .acct__row { grid-template-columns: 1fr auto; grid-template-areas: "line pill" "detail detail"; gap: 8px 26px; }
   .acct__row--head { display: none; }
   .acct__line { grid-area: line; }
   .acct__pill-cell { grid-area: pill; }
   .acct__detail { grid-area: detail; }
}

@media (max-width: 743px) {
   .opening { padding-block: 52px 44px; }
   .opening__lede { font-size: 17px; }

   .aquote__photo { height: 340px; }
   .aquote__bar { padding: 48px 20px 16px; }

   .believe { padding-block: 56px 52px; }
   .believe__grid { grid-template-columns: 1fr; gap: 36px; }
   .commit__body { font-size: 16px; max-width: 340px; }

   .who { padding-block: 52px 48px; }
   .who__copy p { font-size: 17px; }
   .bookcard { padding: 22px 20px 24px; }
   .bookcard__body { font-size: 16px; }

   .tri { padding-block: 52px 56px; }
   .tri__card { padding: 28px 24px 30px; }
   .tri__body { font-size: 16px; }

   .board { padding-block: 48px 44px; }
   .board__grid { grid-template-columns: 1fr; gap: 34px; }
   .member__bio { font-size: 16px; }

   .acct { padding-block: 48px 44px; }
   .acct__row { padding: 18px 20px; }
   .acct__foot { gap: 16px; }
   .acct__note { font-size: 16px; }
}

/* 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) {
  .aquote__img { background-image: url('/assets/img/kiac-101-ms7jr6vg-x8pf-1080w.jpeg'); background-image: image-set(url('/assets/img/kiac-101-ms7jr6vg-x8pf-1080w.webp') type('image/webp'), url('/assets/img/kiac-101-ms7jr6vg-x8pf-1080w.jpeg') type('image/jpeg')); }
}