/* ==========================================================================
   founder.css — page-specific rules for founder.html
   Loaded after assets/styles.css. Nothing here belongs to a shared component.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opener
   -------------------------------------------------------------------------- */

.founder-opener {
  padding-top: 56px;
}

.founder-opener .spread__media img {
  aspect-ratio: 4 / 5;
  object-position: 50% 18%;
}

.founder-opener h1 {
  font-size: clamp(3rem, 6vw, 5.4rem);
  margin-top: 4px;
}

.founder-opener .breadcrumb {
  margin-bottom: 20px;
}

.founder-role {
  margin-top: 16px;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

.founder-opener .lead {
  margin-top: 20px;
  max-width: 46ch;
}

.founder-facts {
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   2. Body column and section rhythm
   -------------------------------------------------------------------------- */

.founder-body {
  padding-top: 72px;
}

.founder-main > .founder-sec + .founder-sec,
.founder-main > .founder-wide + .founder-sec {
  margin-top: 68px;
  padding-top: 62px;
  border-top: 1px solid var(--line);
}

.founder-sec {
  scroll-margin-top: 100px;
}

.founder-sec > h2 {
  max-width: 22ch;
}

.founder-main .prose {
  max-width: 72ch;
  margin-top: 26px;
}

.founder-main .prose + .prose {
  margin-top: 20px;
}

.founder-list {
  margin-top: 34px;
}

.founder-sec > .actions {
  margin-top: 36px;
}

/* Sub-heading inside section 04 */
.founder-submarker {
  margin-top: 62px;
  margin-bottom: 14px;
}

.founder-sec h3 {
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   3. Run-in lists (fields of study, countries) — replaces the v3 tag chips
   -------------------------------------------------------------------------- */

.runin {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--body);
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
  max-width: 72ch;
}

/* the whitespace between the spans in the markup is the line-break
   opportunity, so the middot hangs on the end of a line, never orphans */
.runin span:not(:last-child)::after {
  content: "\00B7";
  color: var(--saffron);
  padding-left: .5em;
}

.runin span + span { padding-left: .3em; }

/* --------------------------------------------------------------------------
   4. Books section — floated portrait, note block, three-column text
   -------------------------------------------------------------------------- */

.founder-flow {
  display: flow-root;
  margin-top: 26px;
}

.founder-inset img {
  aspect-ratio: 3 / 4;
}

.notebox {
  display: flow-root;
  position: relative;
  margin-top: 34px;
  padding-top: 22px;
  max-width: 46ch;
}

.notebox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 4px;
  background: var(--saffron);
}

.notebox__label {
  font-family: var(--body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.notebox h4 {
  margin-top: 10px;
}

.notebox__text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.founder-books {
  margin-top: 42px;
}

.colblock {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}

.colblock__col {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.colblock__col p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   5. Role lists (service roles, positions of responsibility)
   -------------------------------------------------------------------------- */

.deflist--role .deflist__body .deflist__note {
  margin-top: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   6. Photographs
   -------------------------------------------------------------------------- */

.founder-wide {
  margin-top: 62px;
}

.founder-wide img {
  aspect-ratio: 4 / 5;
  object-position: 50% 14%;
}

.founder-wide.founder-wide--land img {
  aspect-ratio: 3 / 2;
  object-position: 50% 50%;
}

/* --------------------------------------------------------------------------
   7. Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 720px) {
  .deflist--role .deflist__item { grid-template-columns: 172px 1fr; }
}

@media (min-width: 900px) {
  .founder-opener { padding-top: 72px; }
  .founder-body { padding-top: 88px; }

  /* the portrait runs the full height of the opening column */
  .founder-opener .spread { align-items: stretch; }
  .founder-opener .spread__media img {
    height: 100%;
    min-height: 560px;
    aspect-ratio: auto;
    object-position: 50% 20%;
  }

  .colblock {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0;
  }
  .colblock__col {
    padding: 26px 28px;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }
  .colblock__col:first-child { padding-left: 0; border-left: 0; }
  .colblock__col:last-child { padding-right: 0; }

  .founder-wide img {
    aspect-ratio: 3 / 2;
    object-position: 50% 8%;
  }
}

@media (min-width: 1100px) {
  .founder-books .deflist__item:nth-child(odd) { padding-right: 24px; }
  .founder-body .deflist--2col .deflist__item { align-content: start; }
}

/* --------------------------------------------------------------------------
   Book covers in section 03. These are photographs of jackets, not flat
   scans, so each tile shows the whole cover instead of cropping it, and the
   title stays under the cover instead of appearing on hover. The lightbox in
   assets/script.js binds to .photo, which every tile also carries.
   -------------------------------------------------------------------------- */

.book-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 22px;
  margin-top: 38px;
}
.book {
  background: transparent;
  overflow: visible;
}
.book img {
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 10px 20px rgba(30, 39, 33, .22));
  transition: transform .25s ease;
}
.book:hover img,
.book:focus-within img { transform: translateY(-5px); }
.book figcaption {
  position: static;
  transform: none;
  background: none;
  color: var(--ink);
  padding: 14px 0 0;
  font-size: 1.05rem;
}
.book__year {
  display: block;
  margin-bottom: 4px;
  font-family: var(--body);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--saffron-ink);
}
.book-note { margin-top: 22px; }
.book-note + .deflist { margin-top: 34px; }

/* Three columns hold the nine covers in a clean 3 x 3 block. */
@media (min-width: 900px) {
  .book-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 30px; }
}