/* ==========================================================================
   INVESTED LEADERSHIP — investedleaders.com
   Design system per "Brand Theme - Invested Leadership" (Palette & Type).

   Non-negotiable rules from the brand sheet:
     - One gradient per surface, always full-bleed. Never inside a card or button.
     - Light corner top-left, indigo corner bottom-right. Do not flip the axis.
     - Gold appears once per surface: a rule, a numeral, a single mark. Never a wash,
       never a background, never type under 14px.
     - Body copy on the field sits on the darker two-thirds, at 18px+.
     - No glassmorphism, no glow effects. The bulb is the only light source.
     - No third typeface. No serif for body copy. No display weight over 600.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --il-azure:     #3484c6;
  --il-blue:      #2a66ac;
  --il-royal:     #34509a;
  --il-indigo:    #312d77;
  --il-midnight:  #221f52;

  --il-gold:      #f5b335;
  --il-glow:      #b5def4;

  --il-paper:     #f2f5f9;
  --il-ink:       #1b1d2a;
  --il-muted:     #5e5f5f;

  --il-rule:      rgba(27, 29, 42, .12);
  --il-rule-dark: rgba(255, 255, 255, .18);
  --il-radius:    6px;

  --il-font-display:   'Oswald', 'Arial Narrow', sans-serif;
  --il-font-body:      'Cabin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --il-font-editorial: 'Newsreader', Georgia, serif;

  --il-field: linear-gradient(118deg, #3484c6 0%, #2a66ac 34%, #34509a 62%, #312d77 100%);

  --il-shell: 1180px;
  --il-gut:   clamp(20px, 5vw, 48px);
  --il-header-h: 72px;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--il-header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: #fff;
  color: var(--il-ink);
  font-family: var(--il-font-body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--il-blue); text-underline-offset: .18em; }
a:hover { color: var(--il-indigo); }

::selection { background: var(--il-glow); color: var(--il-ink); }

:focus-visible {
  outline: 2px solid var(--il-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--il-midnight); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--il-radius) 0;
  font-family: var(--il-font-display); letter-spacing: .1em; text-transform: uppercase;
  font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Layout --------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--il-shell);
  margin-inline: auto;
  padding-inline: var(--il-gut);
}
.shell--narrow { max-width: 820px; }

.section { padding-block: clamp(64px, 9vw, 112px); }
.section--tight { padding-block: clamp(48px, 6vw, 72px); }
.section--paper { background: var(--il-paper); }
.section--ink { background: var(--il-midnight); color: #fff; }
.section--field { background: var(--il-field); color: #fff; }   /* full-bleed only */

.section--ink a,
.section--field a { color: #fff; }
.section--ink .lead,
.section--field .lead { color: rgba(255, 255, 255, .88); }
.section--ink p,
.section--field p { color: rgba(255, 255, 255, .84); }

/* Body copy on the field must sit at 18px+ per the brand sheet. */
.section--field p, .section--field li { font-size: 18px; }

.rule { height: 1px; background: var(--il-rule); border: 0; margin: 0; }
.section--ink .rule, .section--field .rule { background: var(--il-rule-dark); }

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--il-font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.005em;
}

.display-xl {
  font-size: clamp(44px, 7.4vw, 76px);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.title {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: .98;
  text-transform: uppercase;
}
.section-head {
  font-family: var(--il-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 32px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0;
}
.sub-head {
  font-family: var(--il-font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
}

.eyebrow {
  font-family: var(--il-font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--il-blue);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* The single gold mark per surface: the eyebrow's filament rule. */
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--il-gold);
  flex: none;
}
.section--ink .eyebrow, .section--field .eyebrow { color: rgba(255, 255, 255, .78); }

.lead {
  font-size: 21px;
  line-height: 1.55;
  color: var(--il-ink);
  margin: 0 0 22px;
  max-width: 62ch;
}
p { margin: 0 0 20px; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

.pull {
  font-family: var(--il-font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(23px, 3vw, 28px);
  line-height: 1.4;
  color: var(--il-indigo);
  margin: 0;
  max-width: 26ch;
}
.section--ink .pull, .section--field .pull { color: #fff; }

.caption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--il-muted);
  margin: 0;
  max-width: 60ch;
}
.section--ink .caption, .section--field .caption { color: rgba(255, 255, 255, .66); }

.numeral {
  font-family: var(--il-font-display);
  font-weight: 600;
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1;
  color: var(--il-gold);           /* gold as a numeral — the sanctioned use */
  display: block;
  margin-bottom: 14px;
}

/* --- Buttons (solid fills only — never a gradient) ------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--il-font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: var(--il-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--il-indigo); color: #fff; }
.btn--primary:hover { background: var(--il-midnight); color: #fff; }

.btn--ghost { background: transparent; color: var(--il-indigo); border-color: var(--il-rule); }
.btn--ghost:hover { background: var(--il-paper); color: var(--il-indigo); border-color: rgba(27,29,42,.28); }

/* On dark surfaces */
.on-dark .btn--primary, .section--ink .btn--primary, .section--field .btn--primary {
  background: #fff; color: var(--il-indigo);
}
.on-dark .btn--primary:hover, .section--ink .btn--primary:hover, .section--field .btn--primary:hover {
  background: var(--il-glow); color: var(--il-midnight);
}
.on-dark .btn--ghost, .section--ink .btn--ghost, .section--field .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.42);
}
.on-dark .btn--ghost:hover, .section--ink .btn--ghost:hover, .section--field .btn--ghost:hover {
  background: rgba(255,255,255,.1); color: #fff; border-color: #fff;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--il-header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.site-header.is-solid,
.site-header.is-open { background: var(--il-midnight); border-bottom-color: var(--il-rule-dark); }

.site-header .shell {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%;
}

.brand {
  font-family: var(--il-font-display);
  font-weight: 600; font-size: 18px; line-height: 1;
  letter-spacing: .13em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  display: flex; align-items: baseline; gap: 9px;
}
.brand:hover { color: #fff; }
.brand span { color: rgba(255,255,255,.62); font-weight: 400; letter-spacing: .18em; font-size: 13px; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-family: var(--il-font-display);
  font-weight: 400; font-size: 14px;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.84); text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--il-gold); }
/* Six labels plus the CTA need ~985px beside the wordmark. Without this the CTA
   broke onto two lines and pushed past the 72px header. Paired with the 1020px
   breakpoint below — the two numbers must move together. */
.nav a, .nav .nav-cta { white-space: nowrap; }

/* Specificity note: `.nav a` (0,1,1) outranks a bare `.nav-cta` (0,1,0) and was
   painting this white-on-white. Keep the `.nav` prefix on both rules. */
.nav .nav-cta {
  font-family: var(--il-font-display);
  font-weight: 500; font-size: 14px; letter-spacing: .11em; text-transform: uppercase;
  background: #fff; color: var(--il-indigo); text-decoration: none;
  padding: 11px 20px; border-radius: var(--il-radius);
  border-bottom: 0;
}
.nav .nav-cta:hover { background: var(--il-glow); color: var(--il-midnight); }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid rgba(255,255,255,.42);
  border-radius: var(--il-radius); color: #fff;
  font-family: var(--il-font-display); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; padding: 10px 16px; cursor: pointer;
}

@media (max-width: 1020px) {
  .nav, .nav-cta { display: none; }
  .nav-toggle { display: inline-block; }

  .site-header.is-open .nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; inset: var(--il-header-h) 0 auto 0;
    background: var(--il-midnight);
    border-bottom: 1px solid var(--il-rule-dark);
    padding: 8px var(--il-gut) 24px;
    max-height: calc(100dvh - var(--il-header-h));
    overflow-y: auto;
  }
  .site-header.is-open .nav a {
    width: 100%; padding: 16px 0; font-size: 17px;
    border-bottom: 1px solid var(--il-rule-dark);
  }
  .site-header.is-open .nav a[aria-current="page"] { border-bottom-color: var(--il-gold); }
  .site-header.is-open .nav .nav-cta { display: inline-block; margin-top: 22px; }
}

/* --- Hero (every page opens on the field) --------------------------------- */

.hero {
  background: var(--il-field);
  color: #fff;
  padding-top: calc(var(--il-header-h) + clamp(56px, 8vw, 96px));
  padding-bottom: clamp(56px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}
.hero .eyebrow { color: rgba(255,255,255,.82); }
.hero .lead { color: rgba(255,255,255,.9); font-size: clamp(19px, 2.2vw, 22px); }
.hero p { color: rgba(255,255,255,.88); font-size: 18px; }

.hero--home { padding-bottom: clamp(64px, 9vw, 104px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
}

.hero-cover {
  border-radius: var(--il-radius);
  box-shadow: 0 24px 60px rgba(27, 29, 42, .38);
  width: 100%;
  max-width: 380px;
  justify-self: center;
}

.hero-quote {
  font-family: var(--il-font-editorial);
  font-style: italic;
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.45;
  color: #fff;
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--il-gold);   /* the one gold mark on the hero surface */
  max-width: 34ch;
}
.hero .eyebrow::before { display: none; }  /* gold is spent on the quote rule here */

/* --- Cards ---------------------------------------------------------------- */

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--il-rule);
  /* A hairline on paper is near-invisible. The blue top edge gives the card an
     actual shoulder without turning it into a box. */
  border-top: 3px solid var(--il-blue);
  border-radius: var(--il-radius);
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column;
}
.card p { font-size: 16px; margin-bottom: 16px; }
.card .sub-head { margin-bottom: 12px; }
.card__foot { margin-top: auto; padding-top: 18px; }

.card--link { text-decoration: none; color: inherit; transition: border-color .16s ease; }
.card--link:hover {
  border-color: rgba(27, 29, 42, .3);
  border-top-color: var(--il-indigo);   /* keep the edge, deepen it */
  color: inherit;
}

.section--paper .card { background: #fff; }
.section--ink .card, .section--field .card {
  background: rgba(255,255,255,.06);
  border-color: var(--il-rule-dark);
  border-top-color: var(--il-glow);     /* blue would vanish on a blue ground */
}

/* Numbered chapter / step list */
.steps { display: grid; gap: 1px; background: var(--il-rule); border-block: 1px solid var(--il-rule); }
.step { background: #fff; padding: clamp(22px, 3vw, 32px) 0; display: grid;
        grid-template-columns: 76px minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.section--paper .step { background: var(--il-paper); }
.step__n {
  font-family: var(--il-font-display); font-weight: 600; font-size: 34px; line-height: 1;
  color: var(--il-gold); letter-spacing: .02em;
}
.step__body p { margin-bottom: 0; font-size: 16px; color: var(--il-muted); }
.step__body .sub-head { margin-bottom: 8px; }
@media (max-width: 620px) {
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step__n { font-size: 26px; }
}

/* --- Quotes / praise ------------------------------------------------------ */

.quote { display: flex; flex-direction: column; height: 100%; }
.quote blockquote {
  font-family: var(--il-font-editorial);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 22px;
  color: var(--il-ink);
}
.section--ink .quote blockquote, .section--field .quote blockquote { color: #fff; }
.quote cite {
  font-style: normal;
  margin-top: auto;
  display: block;
  border-top: 1px solid var(--il-rule);
  padding-top: 16px;
}
.section--ink .quote cite, .section--field .quote cite { border-top-color: var(--il-rule-dark); }
.quote__name {
  font-family: var(--il-font-display); font-weight: 500; font-size: 16px;
  letter-spacing: .09em; text-transform: uppercase; display: block; margin-bottom: 5px;
}
.quote__role { font-size: 13px; line-height: 1.45; color: var(--il-muted); display: block; }
.section--ink .quote__role, .section--field .quote__role { color: rgba(255,255,255,.66); }

.stars { color: var(--il-gold); letter-spacing: .18em; font-size: 14px; margin-bottom: 14px; }

/* --- Stats ---------------------------------------------------------------- */

.stat__n {
  font-family: var(--il-font-display); font-weight: 600;
  font-size: clamp(40px, 5.4vw, 58px); line-height: 1; display: block; margin-bottom: 10px;
}
.stat__label { font-size: 15px; line-height: 1.5; margin: 0; max-width: 30ch; }
.section--field .stat__n { color: #fff; }

/* --- Buy panel ------------------------------------------------------------ */

.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--il-rule); }
@media (max-width: 620px) { .formats { grid-template-columns: 1fr; } }
.format { background: #fff; padding: 26px 24px; text-align: center; }
.section--paper .format { background: var(--il-paper); }
.format__name {
  font-family: var(--il-font-display); font-weight: 400; font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--il-muted); display: block; margin-bottom: 10px;
}
.format__price {
  font-family: var(--il-font-display); font-weight: 600; font-size: 34px; line-height: 1;
  color: var(--il-indigo); display: block;
}

/* Replaced the hardcoded price figure: retailer prices go stale and this one did.
   Sized down from the old 34px price -- it is a link now, not a headline number. */
.format__link {
  font-family: var(--il-font-display); font-weight: 600; font-size: 19px; line-height: 1.3;
  color: var(--il-indigo); display: block; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.format__link:hover, .format__link:focus-visible { color: var(--il-blue); }

/* --- Forms ---------------------------------------------------------------- */

.form { display: grid; gap: 20px; max-width: 720px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 8px; }
.field > label {
  font-family: var(--il-font-display); font-weight: 400; font-size: 14px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--il-muted);
}
.field input, .field select, .field textarea {
  font-family: var(--il-font-body); font-size: 16px; line-height: 1.5;
  color: var(--il-ink); background: #fff;
  border: 1px solid var(--il-rule); border-radius: var(--il-radius);
  padding: 13px 14px; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--il-blue); box-shadow: 0 0 0 3px rgba(42,102,172,.14);
}
.field select { appearance: none; background-image: none; }

.form-note { font-size: 13px; line-height: 1.5; color: var(--il-muted); max-width: 60ch; margin: 0; }

/* Honeypot — hidden from people, visible to bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Detail list ---------------------------------------------------------- */

.spec { display: grid; gap: 0; margin: 0; }
.spec div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px;
            padding: 14px 0; border-bottom: 1px solid var(--il-rule); }
.spec dt { font-family: var(--il-font-display); font-weight: 400; font-size: 14px;
           letter-spacing: .13em; text-transform: uppercase; color: var(--il-muted); }
.spec dd { margin: 0; font-size: 16px; }
@media (max-width: 620px) { .spec div { grid-template-columns: 1fr; gap: 4px; } }

/* --- Tick list ------------------------------------------------------------ */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; max-width: 62ch; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--il-blue);
}
.section--ink .ticks li::before, .section--field .ticks li::before { background: var(--il-glow); }
.section--field .ticks li { font-size: 18px; }

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

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         gap: clamp(32px, 6vw, 72px); align-items: start; }
.split--aside { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
@media (max-width: 860px) { .split, .split--aside { grid-template-columns: 1fr; gap: 36px; } }

.head-block { max-width: 42ch; margin-bottom: clamp(36px, 5vw, 56px); }
.head-block p:last-child { margin-bottom: 0; }

/* --- Footer --------------------------------------------------------------- */

.site-footer { background: var(--il-midnight); color: #fff; padding-block: clamp(56px, 7vw, 80px) 32px; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-head {
  font-family: var(--il-font-display); font-weight: 400; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.56);
  margin: 0 0 16px;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 15px; }

.footer-bottom {
  margin-top: clamp(40px, 5vw, 60px); padding-top: 24px;
  border-top: 1px solid var(--il-rule-dark);
  display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center;
}
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,.56); margin: 0; max-width: none; }

.site-footer .brand { margin-bottom: 16px; }
.site-footer .caption { color: rgba(255,255,255,.62); }

/* --- Utility -------------------------------------------------------------- */

.mt-0  { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: clamp(32px, 4vw, 48px); }
.mb-0  { margin-bottom: 0; }
.center { text-align: center; }
.center .lead, .center p, .center .ticks li { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .site-header, .site-footer, .btn-row, .nav-toggle { display: none !important; }
  .hero, .section--field, .section--ink { background: #fff !important; color: #000 !important; }
  .hero *, .section--field *, .section--ink * { color: #000 !important; }
}

/* Surfaces whose single gold mark is a numeral, a star row, or a quote rule
   suppress the eyebrow's gold hairline — gold appears once per surface. */
.eyebrow--plain::before { display: none; }

/* Author pages ------------------------------------------------------------- */

.bio-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
            gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 780px) { .bio-grid { grid-template-columns: 1fr; } }

.monogram {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--il-field); border-radius: var(--il-radius); color: #fff;
  font-family: var(--il-font-display); font-weight: 600; font-size: 84px;
  letter-spacing: .06em; line-height: 1;
}
.bio-photo { border-radius: var(--il-radius); width: 100%; }

.bio-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.bio-facts li { padding: 12px 0; border-bottom: 1px solid var(--il-rule); font-size: 15px; line-height: 1.5; }
.bio-facts li:first-child { border-top: 1px solid var(--il-rule); }
.section--ink .bio-facts li, .section--field .bio-facts li { border-color: var(--il-rule-dark); }

/* Photo figures and galleries ---------------------------------------------- */

.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--il-radius); }
.figure figcaption {
  font-size: 13px; line-height: 1.5; color: var(--il-muted);
  margin-top: 12px; max-width: 46ch;
}
.section--ink .figure figcaption,
.section--field .figure figcaption { color: rgba(255, 255, 255, .66); }

.gallery {
  display: grid; gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
}
/* One image box for mixed source ratios, so the captions align. Anchored to the
   top because these are photographs of people — a centered crop beheads the
   portrait-orientation frame. */
.gallery .figure img {
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center top;
}
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

/* Chapter pages ------------------------------------------------------------ */

/* The chapter number is the gold mark on the hero surface, so the hero eyebrow
   there carries .eyebrow--plain. */
.chapter-num {
  font-family: var(--il-font-display);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 104px);
  line-height: .9;
  color: var(--il-gold);
  display: block;
  margin-bottom: 10px;
  letter-spacing: .01em;
}

.epigraph {
  font-family: var(--il-font-editorial);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.45;
  margin: 0;
  max-width: 34ch;
}
.epigraph cite {
  display: block;
  font-family: var(--il-font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 16px;
  opacity: .78;
}

/* Chapter index cards */
.chapter-list { display: grid; gap: 1px; background: var(--il-rule); border-block: 1px solid var(--il-rule); }
.chapter-row {
  background: #fff;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  padding: clamp(22px, 3vw, 30px) 0;
  text-decoration: none;
  color: inherit;
  transition: background-color .16s ease;
}
.section--paper .chapter-row { background: var(--il-paper); }
.chapter-row:hover { background: var(--il-glow); color: inherit; }
.chapter-row__n {
  font-family: var(--il-font-display); font-weight: 600; font-size: 34px; line-height: 1;
  color: var(--il-gold);
}
.chapter-row__body p { margin: 6px 0 0; font-size: 16px; color: var(--il-muted); max-width: 62ch; }
.chapter-row__go {
  font-family: var(--il-font-display); font-weight: 500; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--il-indigo); white-space: nowrap;
}
@media (max-width: 700px) {
  .chapter-row { grid-template-columns: 56px minmax(0, 1fr); }
  .chapter-row__n { font-size: 26px; }
  .chapter-row__go { display: none; }
}

/* Previous / next chapter */
.chapter-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--il-rule); border-block: 1px solid var(--il-rule);
}
@media (max-width: 620px) { .chapter-nav { grid-template-columns: 1fr; } }
.chapter-nav a {
  background: #fff; padding: clamp(20px, 3vw, 28px) clamp(16px, 3vw, 28px);
  text-decoration: none; color: inherit; display: block;
  transition: background-color .16s ease;
}
.chapter-nav a:hover { background: var(--il-paper); color: inherit; }
.chapter-nav a:last-child { text-align: right; }
.chapter-nav a:only-child { text-align: left; }
.chapter-nav__dir {
  font-family: var(--il-font-display); font-weight: 400; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--il-muted);
  display: block; margin-bottom: 8px;
}
.chapter-nav__title {
  font-family: var(--il-font-display); font-weight: 500; font-size: 19px; line-height: 1.15;
  text-transform: uppercase; color: var(--il-ink);
}