/* KIAC Request Aziz to Speak — values transcribed from
   design/Request Aziz to Speak.dc.html (locked; added 2026-08-10). DECISIONS
   system replaces the prototype's raw gutters/hovers/off-token colors: 56px
   --gutter rail + 1450px cap, motion tokens, arrow-as-::after, right-aligned
   section summaries, site.css form primitives (incl. the site's first native
   <select>). All classes sp*-namespaced (nav-collision rule). */

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

/* Text column starts on the rail (padding-inline-start on the full-width
   container); the photo bleeds to the right viewport edge. Column ratio puts
   the seam at the prototype's x≈691 @1280 (1280 × 1.08/2) after the rail
   replaces the prototype's 52px inset: (691.2−56)/(1280−691.2) = 1.0788. */
.sphero { display: grid; grid-template-columns: 1.0788fr 1fr; min-height: 600px; background: var(--paper-alpha); padding-inline-start: var(--gutter); }
.sphero__copy { padding: 72px 52px 60px 0; display: flex; flex-direction: column; justify-content: center; }
.sphero__eyebrow { gap: 12px; margin-bottom: 24px; }
.sphero__eyebrow .rule { width: 34px; }
.sphero__eyebrow .label { color: var(--deep-teal); }
.sphero h1 { margin: 0 0 4px; font-family: var(--font-condensed); font-weight: 700; font-size: 68px; line-height: .96; letter-spacing: -.015em; text-transform: uppercase; color: var(--ink); max-width: 600px; }
.sphero__h1-band { display: inline-block; align-self: flex-start; margin: 0; padding: 0 10px; font-family: var(--font-condensed); font-weight: 700; font-size: 68px; line-height: 1; letter-spacing: -.015em; text-transform: uppercase; color: #fff; background: var(--deep-teal); }
.sphero__lede { margin: 26px 0 0; max-width: 520px; font: 400 17px/1.62 var(--font-serif); color: var(--ink); }
.sphero__lede--follow { margin-top: 14px; }
.sphero__ctas { display: flex; align-items: center; gap: 24px; margin-top: 34px; }

.sphero__photo { position: relative; background: var(--photo-ink); }
/* hero photo stays B&W — no hover reveal (matches Home's hero) */
.sphero__img { position: absolute; inset: 0; background: url('/assets/img/kiac-127-ms6vljjs-191c-1920w.jpeg') 44% 20%/cover no-repeat; background-image: image-set(url('/assets/img/kiac-127-ms6vljjs-191c-1920w.webp') type('image/webp'), url('/assets/img/kiac-127-ms6vljjs-191c-1920w.jpeg') type('image/jpeg')); filter: var(--photo-filter); }
.sphero__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 28px 20px; background: linear-gradient(to top, rgba(20, 21, 30, .9), rgba(20, 21, 30, 0)); font: 500 11px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }

/* ---------- Event-types strip ----------
   The shared .scope component (site.css — lifted from involved.css when this
   page became its third consumer, 2026-08-10). No page rules needed. */

/* ---------- Speaker reel ---------- */

.spreel { padding: 70px var(--gutter) 64px; background: #fff; border-top: 1px solid rgba(41, 42, 60, .12); }
.spreel__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.spreel h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 50px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.spreel__body { margin: 20px 0 0; font: 400 17px/1.62 var(--font-serif); color: var(--ink); }
.spreel__link { margin-top: 26px; }

/* interim real clip in the tile (docs/DECISIONS.md 2026-08-10) — .photo
   supplies the B&W-to-color reveal; the shared lightbox partial arms it */
.spreel__tile { aspect-ratio: 16/9; }
.spreel__tile:focus-visible .photo__img { filter: grayscale(0) contrast(1.02); } /* mirror hover on keyboard focus */
.spreel__img { background-image: url('/assets/img/KIAC-147-1440w.jpeg'); background-image: image-set(url('/assets/img/KIAC-147-1440w.webp') type('image/webp'), url('/assets/img/KIAC-147-1440w.jpeg') type('image/jpeg')); }
.spreel__playchip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); background: rgba(20, 21, 30, .45); display: flex; align-items: center; justify-content: center; transition: border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease); }
.spreel__playchip svg { display: block; }
.spreel__tile:hover .spreel__playchip, .spreel__tile:focus-visible .spreel__playchip { border-color: var(--light-teal); background: rgb(20, 21, 30); }

/* ---------- Speaking topics ---------- */

.sptopics { padding: 66px var(--gutter) 60px; background: var(--paper-alpha); border-top: 1px solid rgba(41, 42, 60, .12); }
.sptopics__head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 34px; }
.sptopics__eyebrow .rule { background: var(--ink); }
.sptopics__eyebrow .label { color: rgba(41, 42, 60, .7); }
.sptopics h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 50px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
/* summary right-aligned per the section-header rule (docs/DECISIONS.md 2026-08-03) */
.sptopics__summary { margin: 0; font: 400 17px/1.62 var(--font-serif); color: var(--ink); text-align: right; }

.sptopics__row { display: grid; grid-template-columns: 72px 380px 1fr; gap: 32px; align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(41, 42, 60, .18); }
.sptopics__row:last-child { border-bottom: 1px solid rgba(41, 42, 60, .18); }
.sptopics__num { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: .9; color: var(--deep-teal); }
.sptopics__title { font-family: var(--font-condensed); font-weight: 700; font-size: 21px; line-height: 1; color: var(--ink); }
.sptopics__def { font: 400 16px/1.55 var(--font-serif); color: rgba(41, 42, 60, .86); }

/* ---------- Speaking request form ---------- */

.spform { padding: 64px var(--gutter) 66px; background: #fff; border-top: 1px solid rgba(41, 42, 60, .12); }
.spform__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 72px; align-items: start; }

/* teal-keyline form grammar (Refer precedent) */
.spform__main { border-left: 2px solid var(--teal); padding-left: 34px; }
.spform__kicker { font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--deep-teal); margin-bottom: 16px; }
.spform h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 44px; line-height: 1.06; letter-spacing: -.02em; color: var(--ink); }
.spform__lede { margin: 14px 0 30px; max-width: 560px; font: 400 18px/1.55 var(--font-serif); color: rgba(41, 42, 60, .82); }

.spform__divider { font: 600 12px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 20px; }
.spform__divider--follow { margin-top: 34px; }
.spform__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.spform__format { margin-top: 18px; }
.spform__about-field { margin-top: 20px; }

/* the site's first native <select> — .ffield supplies geometry/focus; this
   swaps the platform chrome for the prototype's chevron */
.spform__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23292A3C' fill='none' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-inline-end: 36px; cursor: pointer; }

.spform__actions { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
/* real but inert <button> (Get Help precedent) — no hover until wired */
.spform__submit { padding: 16px 44px; border: 0; border-radius: 0; background: var(--deep-teal); color: #fff; font-family: var(--font-condensed); font-weight: 700; font-size: 17px; text-transform: uppercase; cursor: pointer; }
.spform__fine { max-width: 340px; font: 400 13.5px/1.5 var(--font-serif); color: rgba(41, 42, 60, .66); }

/* ----- practical-notes aside ----- */

.spcard { border: .5px solid #292A3C1A; border-top: 3px solid var(--ink); background: var(--paper-alpha); padding: 28px 26px; }
.spcard__kicker { font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(41, 42, 60, .7); margin-bottom: 16px; }
.spcard__title { font-family: var(--font-condensed); font-weight: 700; font-size: 24px; line-height: 1.04; color: var(--ink); }
.spcard__rows { margin-top: 18px; }
.spcard__row { padding: 14px 0; border-top: 1px solid rgba(41, 42, 60, .14); font: 400 15.5px/1.55 var(--font-serif); color: var(--ink); }

.spform__photo { margin-top: 26px; aspect-ratio: 4/3; }
.spform__photo-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')); background-position: 50% 30%; }
.spform__photo-caption { padding: 54px 18px 16px; }

/* ---------- Saving Aziz band ---------- */

.spbook { padding: 66px var(--gutter) 0px; background: var(--paper-alpha); border-top: 1px solid rgba(41, 42, 60, .12); }
.spbook__grid { display: grid; grid-template-columns: 150px 1fr auto; gap: 48px; align-items: start; }
.spbook__cover { width: 150px; box-shadow: 0 16px 36px -14px rgba(41, 42, 60, .5); }
.spbook__cover img { display: block; width: 100%; height: auto; }
.spbook__eyebrow { margin-bottom: 18px; }
.spbook h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 42px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.spbook h2 em, .spbook__body em { font-style: italic; }
.spbook__body { margin: 18px 0 0; max-width: 600px; font: 400 16.5px/1.6 var(--font-serif); color: var(--ink); }

.spbook__facts { display: flex; flex-direction: column; min-width: 280px; }
.spbook__fact { padding: 14px 0; border-top: 1px solid rgba(41, 42, 60, .18); }
.spbook__fact:last-of-type { border-bottom: 1px solid rgba(41, 42, 60, .18); }
.spbook__fact-label { font: 600 10.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(41, 42, 60, .66); }
.spbook__fact-val { margin-top: 5px; font: 400 15.5px var(--font-serif); color: var(--ink); }
.spbook__links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; }

/* ==================== Responsive ====================
   Two breakpoints site-wide (docs/DECISIONS.md 2026-08-04). Display clamps
   live inside the tablet query with coefficients that reach the desktop max
   below 1032px — the ≥1100px locked reference renders from base rules only. */

@media (max-width: 1032px) {
   /* Hero → single column, text first; photo becomes a band below the copy */
   .sphero { grid-template-columns: 1fr; min-height: 0; padding-inline-start: 0; }
   .sphero__copy { padding: 56px var(--gutter) 44px; }
   .sphero h1, .sphero__h1-band { font-size: clamp(44px, 6.6vw, 68px); }
   .sphero__ctas { flex-wrap: wrap; }
   .sphero__photo { min-height: 400px; }

   /* strip collapses via the lifted .scope rules in site.css */

   .spreel__grid { grid-template-columns: 1fr; gap: 40px; }
   .spreel h2, .sptopics h2 { font-size: clamp(34px, 4.85vw, 50px); }

   .sptopics__head { grid-template-columns: 1fr; gap: 14px; }
   .sptopics__summary { text-align: left; }
   /* rows: numeral + title on the lead line, definition below */
   .sptopics__row { grid-template-columns: 56px 1fr; gap: 10px 20px; }
   .sptopics__def { grid-column: 2; }

   /* form first, aside after (README form-grid rule) */
   .spform__grid { grid-template-columns: 1fr; gap: 48px; }
   .spform h2 { font-size: clamp(32px, 4.27vw, 44px); }

   .spbook__grid { grid-template-columns: 150px 1fr; gap: 36px 48px; }
   .spbook h2 { font-size: clamp(32px, 4.07vw, 42px); }
   .spbook__facts { grid-column: 1 / -1; min-width: 0; }
}

@media (max-width: 743px) {
   .sphero__copy { padding-block: 44px 40px; }
   .sphero__photo { min-height: 320px; }

   .spreel__playchip { width: 64px; height: 64px; }

   .spform__main { padding-left: 18px; }
   .spform__fields { grid-template-columns: 1fr; }
   .spform__actions { flex-direction: column; align-items: stretch; gap: 14px; }
   .spform__submit { width: 100%; padding: 14px 16px; }
   .spform__fine { max-width: none; }

   .spbook__grid { grid-template-columns: 1fr; }
   .spbook__cover { width: 120px; }
}

/* 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) {
  .sphero__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')); }
  .spreel__img { background-image: url('/assets/img/KIAC-147-1080w.jpeg'); background-image: image-set(url('/assets/img/KIAC-147-1080w.webp') type('image/webp'), url('/assets/img/KIAC-147-1080w.jpeg') type('image/jpeg')); }
}