/* ═══════════════════════════════════════════════════════════════
   FREDMUND MALIK BIO PAGE
   Loaded only on the "Fredmund Malik — Bio" page template.
   Builds on the shared tokens/components in style.css + malik-main.css.
═══════════════════════════════════════════════════════════════ */

/* Forced desktop-only line breaks — see malik_person_break_lines() in functions.php */
@media (max-width: 900px) {
  .malik-lb { display: none; }
}

.malik-person-h2 {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.125rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* Recurring "narrow column, pushed right" body text block */
.malik-person-col-right {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  max-width: 738px;
  margin-inline-start: auto;
  font-size: 1.1875rem;
  line-height: 22px;
  color: #000000;
  /* opacity: 1; */
  margin-bottom: 100px;
}
.malik-person-sciences .malik-person-sciences__body {
    max-width: 413px;
}
.malik-person-sciences .malik-person-sciences__body:nth-of-type(1) {
    /* Figma node 222:1201: the two paragraphs are one text block split by a
       single blank line, not a full card-spacing gap — override the shared
       47px .malik-person-col-right margin down to one line-height (19px/117.3%). */
    margin-bottom: 22px;
}
/* Recurring "centered paragraph" block */
.malik-person-centered {
  font-family: var(--malik-font-ubuntu);
  font-size: 19px;
  line-height: 1.173; /* Figma body text spec: 19px/117.3% — overrides .malik-body's 1.65 */
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  opacity: 0.85;
}
.malik-person-centered + .malik-person-centered { margin-top: 1.5rem; }

/* This page's Figma frame (1440px) uses a 1280px content / 80px inset grid
   throughout — confirmed by raw node x-coordinates: hero title/media, the
   legacy section's col-right paragraphs and quote, cybernetics' closing body
   paragraph, and the principles columns all sit flush to x=80/x=1360, not
   the sitewide 1344px/48px .malik-container default (which the sciences
   full-bleed panel and cyber tile grid already special-case around). Centered
   blocks (`margin-inline:auto`) render identically either way since padding
   is symmetric — only left/right-flush content (`.malik-person-col-right`,
   `.malik-person-quote--right`, hero title/media) was actually 32px off.
   Scoped to the sections that use a plain `.malik-container` grid; sciences
   already has its own override, and systems-at-work's media grid is an
   intentionally different full-bleed/overlapping layout (see its own
   comments), so both are excluded here. */
@media (min-width: 901px) {
  .malik-person-hero .malik-container,
  .malik-person-legacy .malik-container,
  .malik-person-cyber .malik-container,
  .malik-person-principles .malik-container,
  .malik-person-system .malik-container,
  .malik-person-detail .malik-container,
  .malik-person-letter .malik-container {
    padding-inline: 80px;
  }
}

.malik-person-centered-label {
  text-align: center;
  font-size: 1.1875rem;
  line-height: 1; /* Figma "subtitles & CTA" style: 19px/100% */
  /* opacity: 0.7; */
  margin-top: 0.75rem;
  letter-spacing: normal;
}

/* Pull quotes — Figma uses the same flat 19px Ubuntu Mono as body copy, not an enlarged serif treatment */
.malik-person-quote {
  max-width: 780px;
  margin: clamp(2rem, 5vw, 3.5rem) auto;
  text-align: center;
  font-family: var(--malik-font-ubuntu);
}
.malik-person-quote p {
  font-size: 1.1875rem;
  line-height: 1.1732;
  /* Figma (222:1183, 222:1225): quote-to-cite gap is one blank line
     (19px/117.3% ≈ 22.3px), not a smaller fixed 12px — same "single
     blank line" pattern used elsewhere on this page. */
  margin-bottom: 22px;
}
.malik-person-quote cite {
  font-style: normal;
  font-weight: 700;
  font-size: 1.1875rem;
}
.malik-person-quote--left { text-align: left; margin: 0; }
/* Figma (222:1225): the quote shares its parent .malik-person-col-right's
   630px Figma box exactly. Previously the parent column was narrowed to
   520px so the *institute paragraph* would hit its exact Figma line breaks,
   which forced the quote to need its own width:630px + negative-margin
   override just to reach the real box width without misaligning against the
   institute paragraph above it. Now that the parent column is correctly
   630px (see .malik-person-letter .malik-person-col-right — the 520px value
   was only ever needed because the institute paragraph was wrongly
   rendering at 16px instead of 19px, which no longer applies), the quote
   inherits 630px for free via flex's default align-items:stretch, and both
   blocks share the same left/right edges exactly as in Figma. */
.malik-person-quote--right {
  max-width: 738px;
  margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3.5rem) auto;
  text-align: left;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.malik-person-hero { padding-block: clamp(2rem, 6vw, 4rem) 0; }

.malik-person-hero__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  /* Sticky-header clearance now lives on .malik-person-back below (it's
     the first in-flow element under the header on mobile) instead of here
     — this used to carry its own 90px margin-top for that, which stacked
     on top of the back button's own spacing once the button was added
     above it, doubling the gap before the eyebrow. */
  margin-top: 0;
}

/* "Back" to home — Figma (494:1284): a plain outline pill, Ubuntu Mono
   Regular 19px/uppercase, 36px tall, 10px/25px padding, 1px border (base
   .malik-btn is 500-weight/1.5px — both overridden here to match). Mobile:
   normal in-flow element above the eyebrow, sitting just under the sticky
   header (its own 32px section padding-block already provides clearance —
   the old .malik-person-hero__head margin-top:90px this replaced was
   sized for a full heading block, not a small pill, and left a large bare
   gap under the header once the button took that spot instead). Desktop
   gets pulled out of flow below (see @media 901px), matching its own
   frame-relative spot. */
.malik-person-back {
  display: inline-flex;
  margin-top: 24px;
  margin-bottom: 1.5rem;
  height: 36px;
  padding: 10px 25px;
  border-width: 1px;
  font-weight: 400;
}

/* Desktop only: `.malik-header` is `position: fixed` here, so this section
   alone is responsible both for clearing it and for matching Figma's
   actual gap before the eyebrow. Figma (222:1169): the eyebrow text sits
   at frame y=248 — the vw-scaled `padding-block` above tops out at just
   64px at 1440px (and shrinks further on narrower desktop widths, crowding
   the fixed header even more), so it undershoots by ~94px at every desktop
   size. Overriding to the flat Figma value here and zeroing the head's own
   margin-top (folded into this) fixes it uniformly instead of only at one
   width. Placed after the base `.malik-person-hero__head` rule above so it
   actually wins the cascade (same specificity — a media query alone
   doesn't out-rank a later unconditional rule). Mobile/tablet keep the vw
   clamp + 90px, since the header is `position: sticky` there and already
   occupies real flow space. */
@media (min-width: 901px) {
  .malik-person-hero { padding-top: 248px; }
  .malik-person-hero__head { margin-top: 0; }

  /* Figma (494:1284): back button sits at frame y=167/x=80 — inside the
     248px header-clearance gap above, well clear of the eyebrow at y=248
     (45px to spare), so pulling it out of flow here doesn't need its own
     extra spacing accounted for elsewhere.

     top is 167-248=-81, not a plain 167: .malik-person-back is a child of
     .malik-container, which carries its own sitewide `position: relative`
     (malik-main.css) — that makes .malik-container the actual containing
     block for this absolutely-positioned link, not .malik-person-hero, so
     `top` resolves against .malik-container's own padding-box top (i.e.
     already past the section's 248px padding-top), not the section's. */
  .malik-person-back {
    position: absolute;
    top: -81px;
    left: 80px;
    margin-bottom: 0;
  }
}
.malik-person-hero__head-left { max-width: 413px; }
.malik-person-hero__eyebrow {
  font-family: var(--malik-font-ubuntu);
  font-size: 1.1875rem;
  line-height: 1.05;
  text-transform: uppercase;
  /* opacity: 0.55; */
  max-width: 210px;
}
.malik-person-hero__title {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.125rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-block: 0.6rem;
  /* Figma width 413px; measured safe range at 1440px is [389.3, 451) so
     "Fredmund Malik" wraps onto its own line instead of splitting further. */
  max-width: 413px;
}
.malik-person-hero__subtitle { 
  max-width: 305px; 
  /* opacity: 0.55;  */
  margin-top: 2rem; 
}
.malik-person-hero__head-right {
  max-width: 738px;
  margin-top: 0;
}
.malik-person-hero__body {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.17;
  letter-spacing: 0;
  opacity: 1;
}

.malik-person-hero__media {
  display: grid;
  /* Figma: the circle (433px) and photo (847px) share one 538px-tall row
     whose widths sum to exactly the 1280px content width (433+847=1280) —
     a proportional split, not two independently aspect-ratio'd columns.
     The old `minmax(220px, 32%) 1fr` only approximated that (32% vs the
     real 433/1280 = 33.83%), leaving each column free to size itself via
     its own `aspect-ratio` + default grid `stretch` — browsers resolve
     that conflict by deriving width from the stretched row height, so the
     circle over/underflowed its track by the rounding error (an overlap
     in some browsers, a visible gap in others, worse at some viewport
     widths than others). Sizing the tracks with the exact 433/847 fr
     ratio — same pattern as `.malik-person-work__inner` below — makes the
     track width equal each item's natural aspect-ratio width at the
     shared row height, so stretch and aspect-ratio agree at every width
     instead of merely by coincidence at one. */
  grid-template-columns: 433fr 847fr;
  gap: 0;
  align-items: stretch;
}
.malik-person-hero__media-circle {
  aspect-ratio: 433 / 538;
  border-radius: 999px;
  overflow: hidden;
  background: var(--malik-cream-2);
  min-width: 0;
}
.malik-person-hero__media-circle video,
.malik-person-hero__media-circle img { width: 100%; height: 100%; object-fit: cover; }

.malik-person-hero__media-photo {
  aspect-ratio: 847 / 538;
  border-radius: 0;
  overflow: hidden;
  background: var(--malik-cream-2);
  min-width: 0;
}
.malik-person-hero__media-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.4) translateY(64px); }

@media (max-width: 720px) {
  .malik-person-hero__media { grid-template-columns: 1fr; }
  .malik-person-hero__media-circle { aspect-ratio: 4/3; border-radius: var(--malik-radius-lg); }
  /* The desktop scale(1.4) translateY(64px) crop is tuned against the 538px-tall
     desktop photo box (to match a specific Figma framing) — on the much shorter
     stacked mobile box that same 64px vertical shift pushes the image down far
     enough to expose ~64px of the box's own cream placeholder background above
     it (a visible gap between the circle and photo). object-fit:cover alone
     already frames the mobile box correctly, so drop the extra transform here. */
  .malik-person-hero__media-photo img { transform: none; }
}

/* ── LEGACY ───────────────────────────────────────────────────── */
.malik-person-legacy { padding-block: clamp(2rem, 5vw, 4rem); }
/* Stafford Beer paragraph uses forced <br class="malik-lb"> breaks (see functions.php);
   width just needs to comfortably clear the longest forced line (~826.5px measured). */
.malik-person-legacy .malik-person-centered { max-width: 860px; }
/* Figma: body_1 (222:1182, ends y=1234) to the Stafford Beer paragraph
   (222:1184, starts y=1294) is 60px, not the 47px generic card-spacing that
   falls out of the shared .malik-person-col-right margin-bottom. */
.malik-person-legacy .malik-person-col-right { margin-bottom: 60px; }

/* ── MANAGEMENT CYBERNETICS ──────────────────────────────────── */
.malik-person-cyber { padding-block: clamp(2rem, 5vw, 4rem); }
.malik-person-cyber__head { text-align: center; margin-bottom: 1.5rem; }

.malik-person-cyber__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* Figma: 305px tiles across an 1280px row = exactly 20px gaps */
  max-width: 1280px;
  margin-inline: auto;
  margin-block: clamp(2rem, 5vw, 3rem);
}
.malik-person-cyber__gap { display: block; }
.malik-person-cyber__tile {
  aspect-ratio: 305 / 409;
  border-radius: var(--malik-radius-lg);
  background: #d9d9d9;
  overflow: hidden;
}
.malik-person-cyber__tile img,
.malik-person-cyber__tile video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 720px) {
  .malik-person-cyber__grid { grid-template-columns: 1fr 1fr; }
  .malik-person-cyber__gap { display: none; }
}
@media (max-width: 480px) {
  .malik-person-cyber__grid { grid-template-columns: 1fr; }
}

/* ── THREE SCIENCES (dark video panel) ───────────────────────── */
.malik-person-sciences {
  min-height: clamp(480px, 60vw, 810px);
  display: flex;
  align-items: center;
  color: var(--malik-white);
}
.malik-person-sciences__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.malik-person-sciences .malik-container {
  position: relative;
  z-index: 1;
  width: 100%;
}
/* Desktop-only (matches this file's 900px desktop/mobile split, see .malik-lb
   above) — mobile keeps the sitewide .malik-container padding/width instead. */
@media (min-width: 901px) {
  /* Figma node 222:1201 sits at y=318 within an 809.75px-tall frame (39.28%
     down), well below true vertical center — not the flex-centered ~193px
     this used to render at. Scaled by the same ratio as the section's own
     min-height clamp so it stays proportional instead of centering. */
  .malik-person-sciences { align-items: flex-start; }
  .malik-person-sciences .malik-container {
    /* Figma's page grid for this full-bleed panel is 1280px content / 80px
       insets (matches the cyber grid's fixed max-width:1280 treatment),
       not the sitewide 1344px/48px .malik-container default. */
    max-width: 1280px;
    padding-inline: 0;
    padding-top: clamp(188px, 23.56vw, 318px);
  }
}
.malik-person-sciences__body { color: var(--malik-white); opacity: 0.92; }

/* ── PRINCIPLES ───────────────────────────────────────────────── */
.malik-person-principles { padding-block: clamp(7rem, 5vw, 4rem); }
/* measured against Figma's exact line breaks at 1440px (safe range 826.5-864.5px) */
.malik-person-principles .malik-person-centered { max-width: 846px; }
/* Figma node 222:1185: the Grundsätze paragraph immediately after the quote
   sits 60px below it (222:1186 ends y=3800.75, 222:1185 starts y=3861), not
   the ~0px gap that falls out of .malik-person-centered/.malik-person-col-right
   having no margin between different block types. And 222:1185 is itself one
   text node (738x242) holding both Grundsätze paragraphs split by a single
   blank line — same "one line-height, not full card-spacing" pattern as the
   Sciences panel body — so its 47px default .malik-person-col-right
   margin-bottom is overridden down to 22px. */
.malik-person-principles__quote + .malik-person-col-right {
  margin-top: 60px;
  margin-bottom: 22px;
}

/* ── THE MALIK MANAGEMENT SYSTEM (photo bg) ──────────────────── */
/* Figma node 222:1210 "Message from malik": 1440x982 frame (68.19vw at
   1440px), not the 810px generic full-bleed-panel height used elsewhere
   on this page (that's the Sciences panel's own, unrelated, spec).
   The 982px cap alone only reproduces Figma's frame at the *design*
   canvas's own aspect ratio — on a real browser window taller than
   982/68.19% implies (any moderately tall monitor), it renders visibly
   shorter than "full screen". The Figma *prototype* preview auto-scales
   this frame to fill whatever window it's shown in, so `max(...,100vh)`
   matches that fill-the-viewport behavior instead of capping at the raw
   design-canvas pixel height. */
.malik-person-system {
  min-height: max(clamp(480px, 68.19vw, 1050px), 100vh);
  display: flex;
  align-items: center;
  color: var(--malik-white);
}
.malik-person-system .malik-video-bg {
  /* Figma (222:1212): image layer is placed at x=-492 y=0, w=2424 h=1515
     inside the 1440x982 frame — NOT a plain object-fit:cover box (that would
     be w=109.1% h=100%, 0 vertical crop). It's scaled ~1.54x past minimal
     cover, cropping the closest/largest foreground buildings off the bottom
     and more off the sides, so the skyline reads smaller/more distant with
     open sky above. Reproduce the exact box instead of relying on cover.

     Sized in vw (against the 1440px Figma frame width), NOT % of the
     section's own box: .malik-person-system's min-height can be forced to
     100vh on tall/wide monitors (real desktops routinely exceed the 982px
     clamp cap), and a %-of-height box would then scale unevenly vs. the
     %-of-width box, distorting the aspect and over-cropping. vw keeps both
     axes tied to the same 1440px reference so the crop stays uniform. */
  position: absolute;
  left: -34.1667vw;
  top: 0;
  right: auto;
  bottom: auto;
  width: 168.3333vw;
  max-width: none; /* theme's global img{max-width:100%} would otherwise cap this back down */
  height: 105.2083vw;
  object-position: center top;
}
/* The vw-sized box above reproduces Figma's exact desktop crop, but its height
   is tied to viewport WIDTH while the section's own min-height is forced to
   100vh on this section specifically (see min-height above). On a mobile
   portrait viewport (tall relative to width) 105.2083vw falls far short of
   100vh, so the image ran out well before the section's bottom edge, leaving
   the flat overlay/background color exposed as a large gap above the dots.
   No dedicated Figma mobile frame exists for this section, so fall back to a
   plain full-cover box that always fills the section regardless of aspect. */
@media (max-width: 900px) {
  .malik-person-system .malik-video-bg {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}
.malik-person-system__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5));
}
.malik-person-system__inner { position: relative; z-index: 1; }

/* Figma: heading (222:1213, x=514 w=413) and body (222:1214, x=947 w=413)
   sit side by side on the same row — a 20px gap between them, flush against
   the container's right inset (body's right edge = container's right edge)
   — not stacked heading-above-body like every other section on this page. */
.malik-person-system__row {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.malik-person-system__heading {
  text-align: center;
  color: var(--malik-white);
  margin: 0;
  /* Figma's 413px box forces the 3-line wrap "The Malik" / "Management" / "System" */
  max-width: 413px;
}
.malik-person-system .malik-person-col-right {
  color: var(--malik-white);
  /* left-aligned ragged-right, not centered like the heading beside it */
  opacity: 0.92;
  margin: 0;
  /* measured against Figma's exact line breaks at 1440px (safe range 389.5-427.5px) */
  max-width: 409px;
}

@media (max-width: 900px) {
  .malik-person-system__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .malik-person-system .malik-person-col-right {
    text-align: center;
    max-width: 460px;
  }
}

/* Figma Group 83 (222:1215): 6 dot shapes (not the shared homepage tagline-
   banner's 7-dot pattern), spread 5.56%-93.19% across the full section
   width, sitting 66.75px above the section's bottom edge at 1440px (vs. the
   shared component's 46px default) — both overridden here at higher
   specificity than the generic .malik-tagline-banner__dot rules. */
.malik-person-system .malik-tagline-banner__dot {
  bottom: clamp(1.5rem, 4.635vw, 66.75px);
}
.malik-person-system .malik-tagline-banner__dot:nth-child(1) { left: 5.56%; border-radius: 4.65px; }
.malik-person-system .malik-tagline-banner__dot:nth-child(2) { left: 6.81%; border-radius: 50%; }
.malik-person-system .malik-tagline-banner__dot:nth-child(3) { left: 25.49%; border-radius: 4.65px; }
.malik-person-system .malik-tagline-banner__dot:nth-child(4) { left: 40.56%; border-radius: 4.65px; }
.malik-person-system .malik-tagline-banner__dot:nth-child(5) { left: 65.76%; border-radius: 4.65px; }
.malik-person-system .malik-tagline-banner__dot:nth-child(6) { left: 93.19%; border-radius: 50%; }

/* ── SYSTEM DETAIL ────────────────────────────────────────────── */
.malik-person-detail { padding-block: clamp(9rem, 5vw, 4rem); }
.malik-person-detail__col {
  font-family: var(--malik-font-ubuntu);
  /* Figma node width is 630px (222:1222/1223); at the correct 19px font size
     (see `.malik-person-detail__col p` below) this reproduces Figma's exact
     line breaks for both paragraphs — measured safe range 580-640px. The old
     532px value was tuned around the wrong 16px fallback font-size. */
  max-width: 630px;
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
  /* Figma (222:1223 -> 222:1222): 60px gap between the two paragraphs, not
     generic 20px card spacing. */
  gap: 60px;
  /* Figma (222:1222 -> 222:1224): 60px gap to the centered paragraph below. */
  margin-bottom: 60px;
}
/* The bare `.malik-body` class these paragraphs also carry sets 1rem/1.65 —
   Figma's spec here is the same 19px/117.3% Ubuntu Mono body style used by
   `.malik-person-col-right` elsewhere on this page, not the sitewide default. */
.malik-person-detail__col p {
  font-size: 1.1875rem;
  line-height: 22px;
  color: #000000;
}
.malik-person-detail .malik-person-centered { max-width: 851px; }

/* ── THE MALIK SYSTEMS AT WORK ───────────────────────────────── */
/* Figma (245:1109, a 1440×1343 group): a true full-bleed section, same
   pattern as the Sciences/Management-System panels elsewhere on this page.
   The media column starts at the true viewport edge (x=0 — not inside the
   sitewide 1344px/48px `.malik-container`) and its two images span the
   section's FULL height edge-to-edge (0 to 1343, no vertical padding
   anywhere); only the circle+text panel content is inset from there.
   `.malik-container`'s max-width/padding is zeroed below so the grid spans
   the true viewport instead of being capped to 1344px and squeezed by the
   88px padding-block this used to have (which was insetting the media
   images on all four sides — not a Figma spec, just wrong). */
.malik-person-work { background: #efefef; }
.malik-person-work .malik-container {
  max-width: none;
  padding-inline: 0;
}
.malik-person-work__inner {
  display: grid;
  /* Figma: media column is 405px wide, panel takes the remaining 1035px of
     the 1440px frame — not an even 1fr/1fr split, flush with no gap. */
  grid-template-columns: 405fr 1035fr;
  gap: 0;
  align-items: stretch;
  /* Figma group height 1343px at a 1440px frame width = 93.26vw */
  min-height: clamp(480px, 93.26vw, 1343px);
}
/* min-width:0 defeats the default grid-item min-width:auto, which was
   otherwise sizing this track to the <video>'s native intrinsic width
   (2160px, portrait-shot) and overflowing the section on narrow viewports. */
.malik-person-work__media { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.malik-person-work__media-video {
  /* Figma (222:1252): video block occupies 855 of the group's 1343px total
     height (63.66%); the video asset itself is authored 481px wide
     (76px wider than the 405px column) and gets cover-cropped to fit. */
  flex: 0 0 63.66%;
  overflow: hidden;
  background: #d9d9d9;
}
.malik-person-work__media-video video { width: 100%; height: 100%; object-fit: cover; }
.malik-person-work__media-photo {
  position: relative;
  /* Figma (222:1253): the remaining ~36.34% of the column height */
  flex: 1 1 auto;
  overflow: hidden;
  background: #d9d9d9;
}
/* Figma (222:1253): an off-center, asymmetric crop — not a plain centered
   object-fit:cover — so the source rect is positioned exactly as authored
   rather than approximated via object-position. Figma's own authored values
   are top:0.97%/height:98.98%, which is 0.05% short of full coverage — an
   imperceptible sub-pixel rounding artifact at Figma's canvas scale, but a
   visible grey (#d9d9d9, this box's placeholder background) sliver at the
   video/photo seam once rendered at real size. Recentered to top:0%/
   height:100% (same ~50% vertical center, so the visible framing is
   unchanged) to guarantee full coverage instead. */
.malik-person-work__media-photo img {
  position: absolute;
  left: -46.53%;
  top: 0%;
  width: 180.73%;
  height: 100%;
  max-width: none;
}

/* Figma (222:1257 group -> panel): the 846px content column sits inside
   the 1035px panel with an asymmetric inset — 109px from the panel's left
   edge, 80px from its right edge — not centered, hence a margin-left
   percentage rather than margin-inline:auto. Vertically it's centered
   within the panel's full 1343px height (166px top / 167px bottom
   breathing room falls out of that centering, not an explicit gap). */
.malik-person-work__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 846px;
  max-width: 100%;
  height: 100%;
  margin-left: 10.53%;
  /* same grid-item min-width:auto overflow trap as .malik-person-work__media
     above — the circle's explicit 630px width otherwise forces this track
     wide on narrow viewports even though max-width:100% is set. */
  min-width: 0;
}
.malik-person-work__circle {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 630px;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.malik-person-work__circle-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--malik-black);
  border-radius: 50%;
}
.malik-person-work__heading { position: relative; }
.malik-person-work__body-left {
  font-family: var(--malik-font-ubuntu);
  font-size: 1.1875rem;
  line-height: 1.17;
  text-align: center;
  /* Figma (222:1255): full width of the 846px aside column, 100px below the circle */
  margin-top: 100px;
}
.malik-person-work__body-right {
  font-family: var(--malik-font-ubuntu);
  font-size: 1.1875rem;
  line-height: 1.17;
  text-align: left;
  /* Figma (222:1256): narrower column pushed right, flush with the aside's
     right edge, 60px below the previous paragraph */
  max-width: 630px;
  margin-left: auto;
  margin-top: 60px;
}

@media (max-width: 900px) {
  .malik-person-work .malik-container { padding-inline: var(--malik-container-pad-sm); }
  .malik-person-work__inner { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); min-height: auto; }
  .malik-person-work__media { height: auto; }
  .malik-person-work__media-video { flex: none; aspect-ratio: 481 / 855; }
  .malik-person-work__media-photo { flex: none; aspect-ratio: 405 / 492; }
  .malik-person-work__aside { width: 100%; height: auto; margin-left: 0; align-items: center; }
  /* No separate cap needed here — the circle's own base-rule max-width:100%
     already shrinks it to the aside's real (now-correct) track width; a
     flat 479px here would overflow narrower viewports. */
  .malik-person-work__body-right { margin-inline: auto; }
}

/* ── THE MALIK LETTER ─────────────────────────────────────────── */
.malik-person-letter { padding-block: clamp(6rem, 5vw, 4rem) clamp(7rem, 7vw, 5rem); }
.malik-person-letter .malik-person-col-right {
  /* Figma (222:1226 -> 222:1225): 60px gap below the centered letter-body
     paragraph, not the clamp's 48px ceiling at 1440px. */
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  /* Figma: institute paragraph and the quote block below it are one
     combined text node split by a single blank line (one line-height,
     ≈22.3px), not generic 20px card spacing. */
  gap: 22px;
  /* Figma's real box is 630px (222:1225). Previously narrowed to 520px because
     the institute paragraph's line-break was tuned while its font-size was
     still wrongly inheriting 16px (see the > p rule below, fixed alongside
     this) — at the correct 19px Ubuntu Mono, 630px is itself squarely inside
     the safe range (599-636px) for hitting Figma's exact 5-line break, so
     the real value can be used directly. This also lets the quote block
     below share the same 630px box via flex's default align-items:stretch,
     instead of needing its own width/negative-margin override to reach 630px
     independently — see the (now-unnecessary) override this replaced. */
  max-width: 630px;
}
/* Unlike other .malik-person-col-right sections, this one puts the class on
   the wrapping div (it also wraps the quote block below), not directly on
   the <p> — so the institute paragraph's own `.malik-body` class (font-size
   1rem, declared directly on that element) wins over the ancestor's
   inherited 19px, same bug class as .malik-person-detail__col p above.
   Figma spec: 19px/117.3% (22px) Ubuntu Mono, same as elsewhere on this page. */
.malik-person-letter .malik-person-col-right > p {
  font-size: 1.1875rem;
  line-height: 22px;
  color: #000000;
}
.malik-person-letter .malik-person-centered {
  /* measured against Figma's exact line breaks at 1440px (safe range 826.5-931px) */
  max-width: 879px;
}