/* css/page-dr-mamoun.css : dr-mamoun.html. Owner: wave B.
   Body composition: humphries-int/07 doctor-bio-card + mvendo-int/02 hairline rows (bibliography).
   Adapted spec: v2-specs/interiors-spec-dr-mamoun.md (delta ids DM1-DM12 cited inline).
   Loaded LAST, after tokens.css + site.css + interior.css. Every selector is scoped to this
   page's own .dm-* classes inside .sheet-body; the chassis (.sheet, .sheet-title, .pill,
   .sheet-h2/.sheet-h3, .caption) is used as is, never restyled. */

/* ------------------------------------------------------------------ 1 the split (humphries top split)
   Recipe 1060x563: two ~515 halves of the card's 1030 inner width, the 400x533 portrait centred
   and top-aligned in the left half, the text column padded 15 (500 measure). Here the chassis
   well is the card: two equal halves of the well (563 at 1440), fixed-px portrait. */
.dm-split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.dm-col { display: flex; flex-direction: column; align-items: center; }
.dm-portrait { margin: 0; width: var(--portrait-w); }
.dm-portrait img { width: var(--portrait-w); height: var(--portrait-h); object-fit: cover; border-radius: 0; }
.dm-portrait .caption { margin-top: 10px; }             /* DM3: the T1 caption (chassis caption face) */

.dm-bio { padding: 0 15px; }
/* name: humphries H3 32px centred -> Gelasio 400 32 pale (family law: display paler than body,
   contrast from face and colour, never weight); h2 because the chassis owns the h1 (DM4) */
.dm-name { font: 400 32px/1.2 var(--font-display); color: var(--steel-pale); text-align: center; text-wrap: balance; }
.dm-cred { margin-top: 6px; font: 600 15px/22px var(--font-body); color: var(--steel); text-align: center; }   /* DM2 */
/* bio: humphries 18px at a 25.3 pitch, paragraph gap 18. The whole biography stays in this
   column at the recipe's own bio measure (533 here, 500 on humphries) instead of running on as a
   1030-wide band under the split: that band would be ~120 characters a line, and capped at a
   readable 70ch it left a 400px dead strip beside it (DM5) */
.dm-text { margin-top: 18px; font: 400 18px/25.2px var(--font-body); color: var(--body-ink); }
.dm-cred + .dm-text { margin-top: 20px; }
.dm-text a { color: var(--steel); text-decoration: underline; text-underline-offset: 2px; }
.dm-text a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ 2 pull-quotes (the family-photo slot, DM6)
   Under the portrait, on the portrait's own 400 width, so the left column carries his words while
   the right carries his story. Gelasio in full --steel (18px is not large text, so the pale ink is
   not allowed), the FLAVOR sun rule on the left, verbatim text, a quiet attribution */
.dm-quotes { width: var(--portrait-w); margin-top: 40px; }
.dm-quote { margin: 0; }
.dm-quote + .dm-quote { margin-top: 32px; }
.dm-quote blockquote { border-left: 3px solid var(--sun); padding-left: 21px; font: 400 18px/28px var(--font-display); color: var(--steel); }
.dm-quote figcaption { margin-top: 8px; padding-left: 24px; font: 600 14px/20px var(--font-body); color: var(--grey-text); }

/* ------------------------------------------------------------------ 4 publications (mvendo-int/02 rows, DM7)
   Row = 340 / 20 / 640 of a 1000 row (the 1 : 1.88 signature) -> 34fr 2fr 64fr of the well; the
   year takes the thumb slot; hairline between rows (recipe 1px black -> the sheet's own --steel),
   28 above and below it (recipe 45 against a 191px thumb) */
.dm-pubs { margin-top: 56px; }
.dm-pubs .sheet-h2 { margin: 0 0 12px; }
.dm-pubs__lead { font: 400 16px/27.2px var(--font-body); color: var(--body-ink); }
.dm-years { margin: 28px 0 0; padding: 0; list-style: none; }
.dm-year { display: grid; grid-template-columns: 34fr 2fr 64fr; align-items: baseline; padding: 28px 0; }
.dm-year + .dm-year { border-top: 1px solid var(--steel); }
.dm-year:first-child { padding-top: 0; }
.dm-year:last-child { padding-bottom: 0; }
.dm-year__h { grid-column: 1; font: 400 27.424px/1.25 var(--font-display); color: var(--steel-pale); }
.dm-list { grid-column: 3; margin: 0; padding: 0; list-style: none; }
.dm-pub + .dm-pub { margin-top: 16px; }
.dm-pub__title { font: 400 20px/24px var(--font-display); color: var(--steel); }
.dm-pub__meta { margin-top: 4px; font: 400 15px/22px var(--font-body); color: var(--grey-text); }
/* the one source link (DM8), on the list column's left edge */
.dm-src {
  display: inline-flex; align-items: center; min-height: 44px; margin: 20px 0 0 36%;
  font: 600 16px/1.3 var(--font-body); color: var(--steel); text-decoration: underline; text-underline-offset: 3px;
}
.dm-src:hover { color: var(--ink); }

/* ------------------------------------------------------------------ 5 the lecture (document pill, DM8) */
.dm-lecture { margin-top: 56px; }
.dm-lecture .sheet-h3 { margin: 0 0 10px; }
.dm-lecture__title { max-width: var(--measure); font: 400 20px/26px var(--font-display); color: var(--steel); }
.dm-lecture .pill { margin-top: 20px; }
.dm-lecture__note { margin-top: 10px; font: 400 14px/20px var(--font-body); color: var(--grey-text); }

/* ------------------------------------------------------------------ stack (recipe @media max-width:1119, image first)
   The left column dissolves so the order is portrait, name + bio, then the quotes */
@media (max-width: 1119px) {
  .dm-split { grid-template-columns: 1fr; }
  .dm-col { display: contents; }
  .dm-portrait { order: 1; justify-self: center; }
  .dm-portrait .caption { max-width: var(--portrait-w); }
  .dm-bio { order: 2; padding: 0; margin-top: 24px; }
  .dm-text { max-width: var(--measure); }
  .dm-quotes { order: 3; width: auto; max-width: var(--measure); }
}

/* ------------------------------------------------------------------ phone (<= 600, house system) */
@media (max-width: 600px) {
  /* DM10: the portrait runs to the sheet's inner edges; the caption stays in the well */
  .dm-portrait { width: auto; justify-self: stretch; }
  .dm-portrait img {
    width: var(--sheet-inner); max-width: none; height: auto; aspect-ratio: 400 / 533;
    margin-inline: calc(50% - var(--sheet-inner) / 2);
  }
  .dm-portrait .caption { max-width: none; }
  /* DM11: explicit display sizes (mobile.md 28-36 band x0.80-0.87; the chassis deck value) */
  .dm-name { font-size: 27px; }
  /* the two credentials take a line each instead of wrapping at the dot */
  .dm-cred > span:not(.dm-cred__sep) { display: block; }
  .dm-cred__sep { display: none; }
  .dm-year__h { font-size: 24px; }
  /* DM12: house rhythm x0.6 */
  .dm-bio { margin-top: 18px; }
  .dm-quotes { margin-top: 24px; }
  .dm-quote + .dm-quote { margin-top: 24px; }
  .dm-quote blockquote { padding-left: 16px; }
  .dm-quote figcaption { padding-left: 19px; }
  .dm-pubs, .dm-lecture { margin-top: 34px; }
  .dm-years { margin-top: 17px; }
  .dm-year { grid-template-columns: 1fr; padding: 17px 0; }
  .dm-year__h { margin-bottom: 8px; }
  .dm-list { grid-column: 1; }
  .dm-src { margin-left: 0; }
}