/* KIAC Aziz's Story — values transcribed from design/Aziz's Story.dc.html
   (locked) with the DECISIONS system: 56px --gutter rail + 1450px cap,
   motion tokens, arrow-as-::after. The book card comes from about.css
   (.bookcard--story) — this page links about.css first (pair sheet). */

/* whole page sits on one paper-light band */
.story { padding: 0 0 20px; background: var(--paper-light); }

/* ---------- Masthead: newspaper rules + centered serif h1 ---------- */

.mast { padding: 44px var(--gutter) 0; }
.mast__top { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid rgba(41, 42, 60, .22); font: 600 10.5px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(41, 42, 60, .7); }
.mast__bar { height: 3px; background: var(--ink); margin-top: 3px; }
.mast__center { text-align: center; padding: 40px 0 0; }
.mast h1 { margin: 20px auto 0; max-width: 960px; font-family: var(--font-serif); font-weight: 400; font-size: 58px; line-height: 1.02; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; text-transform: uppercase; }
.mast__lede { margin: 20px auto 0; max-width: 760px; font: italic 400 18px/1.55 var(--font-serif); color: rgba(41, 42, 60, .82); text-wrap: pretty; }
.mast__byline { display: flex; align-items: baseline; justify-content: space-between; margin-top: 34px; padding: 9px 0; border-top: 1px solid rgba(41, 42, 60, .2); border-bottom: 1px solid rgba(41, 42, 60, .2); font: 600 10.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(41, 42, 60, .72); }

/* ---------- Chapters ---------- */

.chapter { padding: 50px var(--gutter) 0; }
.chapter--first { padding-top: 56px; }
/* head: roman numeral · label · rule · dateline */
.chead { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.chead__num { font-family: var(--font-serif); font-weight: 300; font-size: 34px; line-height: 1; color: var(--teal); }
.chead__label { font: 600 11px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.chead__rule { flex: 1; height: 1px; background: rgba(41, 42, 60, .18); }
.chead__date { font: 600 11px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(41, 42, 60, .7); }
/* chapter II carries the screen's clay accent (numeral + dateline) */
.chead__num--clay, .chead__date--clay { color: var(--clay); }

/* scoped to the body containers so the rule can't leak onto the book card */
.chapter__flow > p, .chapter__cols p, .chapter__copy p { margin: 15px 0 0; font: 400 17px/1.66 var(--font-serif); color: var(--ink); text-align: justify; }
.chapter__flow > p:first-of-type, .chapter__cols p:first-of-type, .chapter__copy p:first-of-type { margin-top: 0; }
.dropcap { float: left; font-family: var(--font-serif); font-weight: 400; font-size: 78px; line-height: .78; padding: 6px 10px 0 0; color: var(--ink); }

/* chapter I: photo floats right, copy wraps, record strip clears below */
.chapter__flow { overflow: hidden; }
.chapter__photo { float: right; width: 47%; height: 496px; margin: 4px 0 30px 48px; }
.chapter__img { background-image: url('/assets/img/KIAC-134-1440w.jpeg'); background-image: image-set(url('/assets/img/KIAC-134-1440w.webp') type('image/webp'), url('/assets/img/KIAC-134-1440w.jpeg') type('image/jpeg')); }
.chapter__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 22px 14px; background: linear-gradient(to top, rgba(20, 21, 30, .9), rgba(20, 21, 30, 0)); font: 600 11px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }

/* two-column newspaper body (chapters II + IV) */
.chapter__cols { columns: 2; column-gap: 52px; column-rule: 1px solid rgba(41, 42, 60, .12); }

/* chapter III: copy + book card */
.chapter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }

/* ---------- "The record" stat strip ---------- */

.record { margin: 30px 0 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--grid-gap-ink); }
.record__cell { padding: 22px 20px 20px; background: var(--paper-light); }
.record__numeral { font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: .92; color: var(--ink); }
.record__label { margin-top: 9px; font: 600 10.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(41, 42, 60, .72); }

/* ---------- Kicker ---------- */

.skicker { margin: 52px var(--gutter) 0; padding: 36px 0 0; border-top: 3px solid var(--ink); text-align: center; }
.skicker p { margin: 0 auto; max-width: 840px; font: italic 300 26px/1.44 var(--font-serif); color: var(--ink); text-wrap: pretty; }

/* ==================== 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. */

@media (max-width: 1032px) {
   .mast h1 { font-size: clamp(34px, 5.7vw, 58px); }

   /* photo leaves the float and leads the chapter as a full-width block */
   .chapter__photo { float: none; width: 100%; height: 420px; margin: 0 0 26px; }

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

   .record { grid-template-columns: 1fr 1fr; }
   .record__numeral { font-size: clamp(32px, 4vw, 38px); }

   .skicker p { font-size: clamp(20px, 3vw, 26px); }
}

@media (max-width: 743px) {
   .story { padding-bottom: 48px; }
   .mast { padding-top: 32px; }
   .mast__byline { flex-wrap: wrap; gap: 4px 16px; }

   .chapter { padding-top: 40px; }
   .chapter--first { padding-top: 44px; }
   .chapter__photo { height: 320px; }
   .chapter__cap { padding: 44px 16px 12px; }
   .dropcap { font-size: 64px; }

   .record { grid-template-columns: 1fr; margin-block: 32px; }

   .skicker { margin-top: 44px; padding-top: 28px; }
}

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