/* PG Biography — scoped to .pg-biography. Ported from the DRobb #bio plate.
   Portrait + caption are editable; body is WYSIWYG (first letter auto-dropcaps). */

.pg-biography{ padding:140px 56px 180px; position:relative; }
.pg-biography .plate-wrap{ max-width:1340px; margin:0 auto; }

.pg-biography .plate-strip{ display:flex; justify-content:space-between; align-items:baseline; padding:0 0 24px; margin-bottom:24px; border-bottom:1px solid var(--pg-ink-hair); font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.32em; font-size:10.5px; color:var(--pg-ink-pale); }
.pg-biography .plate-strip .center{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:0; font-size:14px; color:var(--pg-terracotta); }

.pg-biography .plate-shell{ background:var(--pg-bone-deep); border:1px solid rgba(26,21,18,.10); border-radius:6px; padding:10px; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 60px 100px -50px rgba(26,21,18,.18), 0 4px 12px -4px rgba(26,21,18,.06); }
.pg-biography .plate{ position:relative; background:var(--pg-bone-warm); border-radius:3px; overflow:hidden; display:grid; grid-template-columns:1fr 1.2fr; min-height:720px; box-shadow:inset 0 1px 1px rgba(255,255,255,.4); }
.pg-biography .plate::before,.pg-biography .plate::after,.pg-biography .plate-inner-bl,.pg-biography .plate-inner-br{ content:""; position:absolute; width:18px; height:18px; pointer-events:none; z-index:5; }
.pg-biography .plate::before{ top:18px; left:18px; border-top:1px solid rgba(26,21,18,.20); border-left:1px solid rgba(26,21,18,.20); }
.pg-biography .plate::after{ top:18px; right:18px; border-top:1px solid rgba(26,21,18,.20); border-right:1px solid rgba(26,21,18,.20); }
.pg-biography .plate-inner-bl{ bottom:18px; left:18px; border-bottom:1px solid rgba(26,21,18,.20); border-left:1px solid rgba(26,21,18,.20); }
.pg-biography .plate-inner-br{ bottom:18px; right:18px; border-bottom:1px solid rgba(26,21,18,.20); border-right:1px solid rgba(26,21,18,.20); }

.pg-biography .plate-left{ position:relative; padding:56px 40px 56px 56px; border-right:1px solid rgba(26,21,18,.12); display:flex; flex-direction:column; justify-content:space-between; }
.pg-biography .portrait-tag{ font-family:var(--pg-font-sans); font-weight:400; text-transform:uppercase; letter-spacing:.32em; font-size:10px; color:var(--pg-ink-pale); margin-bottom:24px; }
.pg-biography .portrait-frame{ position:relative; aspect-ratio:4/4.6; border-radius:2px; overflow:hidden; background:var(--pg-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -32px rgba(26,21,18,.30); }
.pg-biography .portrait-image{ position:absolute; inset:0; background-size:cover; filter:saturate(.92) contrast(1.06) brightness(.97); transform:scale(1.04); transition:transform 2400ms var(--pg-ease); }
.pg-biography .portrait-image::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(60,40,32,.18) 100%); }
.pg-biography .plate-shell.pg-in .portrait-image{ transform:scale(1); }
.pg-biography .portrait-noise{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.7; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.4  0 0 0 0 0.32  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.pg-biography .portrait-caption{ margin-top:24px; padding-top:18px; border-top:1px solid var(--pg-ink-hair); font-family:var(--pg-font-italic); font-style:italic; font-size:14px; color:var(--pg-ink-soft); line-height:1.5; }
.pg-biography .portrait-caption .meta{ margin-top:6px; font-family:var(--pg-font-sans); font-style:normal; text-transform:uppercase; letter-spacing:.22em; font-size:9.5px; color:var(--pg-ink-pale); }
.pg-biography .portrait-caption .meta .place{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:0; font-size:13px; color:var(--pg-terracotta); }

.pg-biography .plate-right{ position:relative; padding:56px 64px; display:flex; flex-direction:column; }
.pg-biography .right-eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:48px; font-family:var(--pg-font-sans); font-weight:400; text-transform:uppercase; letter-spacing:.32em; font-size:11px; color:var(--pg-ink-soft); }
.pg-biography .right-eyebrow .rule{ width:28px; height:1px; background:var(--pg-ink-hair); }
.pg-biography .right-eyebrow .diamond{ width:4px; height:4px; background:var(--pg-terracotta); transform:rotate(45deg); }
.pg-biography .bio-heading{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(54px,6.4vw,96px); line-height:.96; letter-spacing:-.024em; color:var(--pg-ink); margin:0 0 48px; }
.pg-biography .bio-heading em{ font-style:italic; color:var(--pg-terracotta); }
/* Accent style = Plain: the client's preferred "faux italic" — the UPRIGHT Fraunces
   mechanically slanted (skewX), NOT the true cursive Fraunces italic. Deterministic:
   it does NOT depend on whether the page happens to load a real Fraunces italic face
   (some of her pages load italic, some don't — THAT was the whole inconsistency; and
   on the live site Fraunces is STATIC, so opsz/variation-settings do nothing). The
   heading normal (upright) Fraunces IS loaded everywhere, so this always renders.
   display:inline-block is REQUIRED — `transform` on an inline <em> is ignored.
   "A life" stays display; only the {accent} word(s) change. */
.pg-biography .bio-heading.accent-plain em{ font-style:normal; font-synthesis:none; font-variation-settings:normal; font-weight:300; display:inline-block; transform:skewX(-11deg); }
.pg-biography .bio-body{ font-family:var(--pg-font-italic); font-size:clamp(19px,1.4vw,22px); line-height:1.55; color:var(--pg-ink); max-width:540px; }
.pg-biography .bio-body p{ margin:0 0 24px; }
.pg-biography .bio-body p:last-of-type{ margin-bottom:0; }
.pg-biography .bio-body em{ font-style:italic; color:var(--pg-terracotta); }
.pg-biography .bio-body p:first-of-type::first-letter{ float:left; font-family:var(--pg-font-display); font-variation-settings:"opsz" 144; font-weight:300; font-size:92px; line-height:.82; color:var(--pg-terracotta); margin:4px 12px -4px 0; }

.pg-biography .bio-cta-row{ margin-top:56px; padding-top:32px; border-top:1px solid var(--pg-ink-hair); display:flex; justify-content:space-between; align-items:center; gap:24px; }
.pg-biography .bio-cta{ display:inline-flex; align-items:center; gap:0; background:var(--pg-ink); border:1px solid var(--pg-ink); border-radius:999px; padding:6px 6px 6px 28px; text-decoration:none; color:var(--pg-bone); font-family:var(--pg-font-sans); font-weight:400; text-transform:uppercase; letter-spacing:.22em; font-size:11.5px; transition:transform 700ms var(--pg-ease); }
.pg-biography .bio-cta:hover{ transform:translate3d(0,-2px,0); }
.pg-biography .bio-cta:active{ transform:scale(.98); }
.pg-biography .bio-cta .label{ padding:8px 18px 8px 0; }
.pg-biography .bio-cta .icon-wrap{ width:36px; height:36px; border-radius:999px; background:var(--pg-terracotta); display:inline-flex; align-items:center; justify-content:center; transition:transform 700ms var(--pg-ease); }
.pg-biography .bio-cta:hover .icon-wrap{ transform:translate3d(2px,-1px,0) scale(1.05); }
.pg-biography .bio-cta .icon-wrap svg{ width:12px; height:12px; stroke:var(--pg-bone); fill:none; stroke-width:1.5; }
.pg-biography .cta-note{ font-family:var(--pg-font-italic); font-style:italic; font-size:14px; color:var(--pg-ink-pale); text-align:right; line-height:1.5; }

@media (max-width:1100px){
  .pg-biography{ padding:100px 32px 140px; }
  .pg-biography .plate-left{ padding:40px 32px 40px 40px; }
  .pg-biography .plate-right{ padding:40px; }
  .pg-biography .bio-body p:first-of-type::first-letter{ font-size:72px; }
}
@media (max-width:880px){
  .pg-biography .plate{ grid-template-columns:1fr; min-height:0; }
  .pg-biography .plate-left{ padding:32px 28px; border-right:none; border-bottom:1px solid rgba(26,21,18,.12); }
  .pg-biography .plate-right{ padding:32px 28px; }
  .pg-biography .plate::after,.pg-biography .plate-inner-bl{ display:none; }
  .pg-biography .bio-heading{ margin-bottom:32px; }
  .pg-biography .right-eyebrow{ margin-bottom:28px; }
  .pg-biography .bio-cta-row{ flex-direction:column; align-items:flex-start; gap:20px; }
  .pg-biography .cta-note{ text-align:left; }
  .pg-biography .bio-body p:first-of-type::first-letter{ font-size:60px; }
  .pg-biography .plate-strip{ font-size:9.5px; letter-spacing:.22em; flex-wrap:wrap; gap:8px; }
}