/* ============================================================
   person.css — Inner Circle profile pages
   ============================================================ */
.person-head{padding:var(--s-12) 0 var(--s-8)}
@media(min-width:900px){.person-head{padding:var(--s-16) 0 var(--s-8)}}
.ph-grid{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media(min-width:860px){.ph-grid{grid-template-columns:280px 1fr;gap:var(--s-12);align-items:start}}
.ph-portrait{max-width:280px;margin:0;overflow:hidden;background:var(--eerie);aspect-ratio:1/1}
.ph-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:grayscale(1) contrast(1.02);display:block}
/* Reserved, as above. Not currently applied. */
.ph-portrait--group{aspect-ratio:3/2;max-width:100%}
.ph-portrait--group img{object-fit:contain}
@media(max-width:859px){.ph-portrait{max-width:220px}}
.ph-meta h1{font-family:var(--serif);font-weight:300;font-size:var(--t-h1);line-height:1.04;letter-spacing:-.015em;margin:var(--s-3) 0 var(--s-3)}
.ph-identity{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);line-height:1.4;color:var(--dim);max-width:26em;margin-bottom:var(--s-6)}
.facts{display:grid;grid-template-columns:1fr;max-width:34em}
.facts > div{display:grid;grid-template-columns:1fr;gap:2px;padding:var(--s-2) 0;border-top:1px solid var(--platinum)}
@media(min-width:600px){.facts > div{grid-template-columns:9em 1fr;gap:var(--s-3);align-items:baseline}}
.facts dt{font-size:var(--t-caption);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.facts dd{font-size:0.94rem;line-height:1.55}
.person-body{padding:0 0 var(--s-16)}
.person-body .prose,.person-body .sources,.person-body .shared{margin-left:auto;margin-right:auto}
.shared{max-width:var(--measure);margin-top:var(--s-12)}
.shared p.label{margin-bottom:var(--s-2)}
.shared ul{list-style:none;border-top:1px solid var(--eerie)}
.shared li{padding:var(--s-2) 0;border-bottom:1px solid var(--platinum);display:grid;grid-template-columns:4.2em 1fr;gap:var(--s-3);font-size:0.96rem;align-items:baseline}
.shared .yr{font-family:var(--serif);color:var(--dim);font-variant-numeric:tabular-nums}
.shared a{color:inherit}
/* Hub groups */
.group{padding:var(--s-12) 0 0;border-top:1px solid var(--platinum);margin-top:var(--s-12)}
.group-head h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1.15;letter-spacing:-.01em;margin:var(--s-2) 0 var(--s-3)}
.group-head p{color:var(--dim);max-width:38em;margin-bottom:var(--s-8)}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-8) var(--s-6)}
.pcard{text-decoration:none;color:inherit;display:block}
/* 4:5. The archival portraits are all taller than wide; a 1:1 crop cut
   heads off. The one landscape image is a group photograph and is handled
   by .pimg--group below. */
/* Square. The replacement portraits are all 1:1, so a 4:5 frame would crop
   them for no reason. They now display uncropped. */
.pcard .pimg{aspect-ratio:1/1;margin-bottom:var(--s-2);overflow:hidden;background:var(--eerie);position:relative}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:grayscale(1) contrast(1.02);
  transition:transform 600ms var(--ease),filter var(--dur-base) var(--ease)}
.pcard:hover .pimg img{transform:scale(1.03);filter:grayscale(1) contrast(1.06)}
/* Reserved for a wide ensemble photograph, if one is ever supplied:
   contain rather than cover, so nobody is cropped out of frame.
   Currently unused — the Panca Sitara image is a square portrait. */
.pcard .pimg--group img{object-fit:contain;object-position:50% 50%;background:var(--eerie)}
.pcard .pimg span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--platinum);font-size:var(--t-caption);letter-spacing:.12em;text-transform:uppercase;padding:var(--s-2)}
.pcard .pname{font-family:var(--serif);font-size:var(--t-lead);line-height:1.25}
.pcard .prole{font-size:var(--t-caption);color:var(--dim);margin-top:2px;line-height:1.5}
.pcard .pcount{font-size:var(--t-caption);color:var(--dim);letter-spacing:.1em;margin-top:4px}

/* Bad Latiff's portrait is the one non-square file in the set. */
.pcard .pimg img[src*="batlatiff"],
.ph-portrait img[src*="batlatiff"]{object-position:50% 25%}

/* ---------- STILL WITH US — living collaborators not separately profiled ---------- */
.living-block{padding-top:var(--s-12)}
.living-list{list-style:none;margin-top:var(--s-4)}
.lv-item{display:grid;grid-template-columns:1fr;gap:var(--s-2);
  padding:var(--s-6) 0;border-bottom:1px solid var(--platinum)}
@media(min-width:820px){
  .lv-item{grid-template-columns:15em minmax(0,1fr);gap:var(--s-8);align-items:baseline}
}
.lv-name{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:1.2;
  letter-spacing:-.005em}
.lv-name a{color:inherit;text-decoration:none;border-bottom:1px solid var(--platinum)}
.lv-name a:hover{border-bottom-color:var(--eerie)}
.lv-alt{font-family:var(--serif);font-style:italic;font-size:0.98rem;color:var(--dim);
  margin-top:2px;line-height:1.4}
.lv-born{font-size:var(--t-caption);color:var(--dim);letter-spacing:.02em;margin-top:var(--s-2)}
.lv-body p{font-size:1rem;line-height:1.75;max-width:38em}
.lv-body p + p{margin-top:var(--s-3)}

.lv-portrait{margin:0 0 var(--s-2);max-width:130px;aspect-ratio:4/5;overflow:hidden;background:var(--eerie)}
.lv-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;filter:grayscale(1) contrast(1.03)}

/* ---------- PEER RAIL ----------
   FLOATING. The rail lives inside .person-head, which is a short section, so
   position:sticky would release the moment that section scrolled past. It is
   therefore genuinely fixed to the viewport, pinned to the left column of the
   page measure and offset downward so it begins BELOW the portrait.

   Twenty names run taller than a laptop viewport, so the rail scrolls
   internally and its heading stays put while it does. */
.peer-rail{display:none}
@media(min-width:1000px){
  .peer-rail{
    display:block;
    position:fixed;
    /* Clears the portrait. Measured, not guessed: site header 4.2rem +
       .person-head padding-top (--s-16 = 8rem) + portrait 280px square
       (17.5rem) + a gap = 31rem. */
    top:31rem;
    left:calc(50% - (var(--page) / 2) + var(--s-3));
    width:280px;
    max-height:calc(100vh - 33rem);
    overflow-y:auto;overscroll-behavior:contain;
    padding-right:var(--s-2);
    z-index:30;
  }
  .peer-rail::-webkit-scrollbar{width:2px}
  .peer-rail::-webkit-scrollbar-thumb{background:var(--platinum)}
  .pr-head{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
    text-transform:uppercase;color:var(--dim);padding-bottom:var(--s-2);
    border-bottom:1px solid var(--platinum);margin-bottom:var(--s-2);
    position:sticky;top:0;background:var(--white)}
  .pr-list{display:flex;flex-direction:column}
  .pr-item{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);
    padding:.36em 0;text-decoration:none;color:var(--dim);
    transition:color var(--dur-fast) var(--ease)}
  .pr-item:hover{color:var(--eerie)}
  .pr-item.is-current{color:var(--eerie)}
  .pr-n{font-family:var(--serif);font-size:.86rem;line-height:1.25}
  .pr-item.is-current .pr-n{font-style:italic}
  .pr-y{font-size:9px;letter-spacing:.06em;color:var(--platinum);
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .pr-item.is-current .pr-y{color:var(--dim)}
  .pr-item:focus-visible{outline:2px solid var(--eerie);outline-offset:2px}
  /* The fixed rail is out of flow: reserve its space so the portrait column
     does not collapse and the download block keeps its position. */
  .ph-side{min-height:22rem}
}

/* ---------- DOWNLOAD BLOCK (Jins monograph) ----------
   Sits under the facts list in the left column. Quiet by default; the
   language is the link, the format is the annotation. */
.dl-block{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--platinum)}
.dl-label{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-2)}
.dl-note{font-size:var(--t-caption);line-height:1.6;color:var(--dim);margin-bottom:var(--s-3)}
.dl-links{display:flex;flex-direction:column;gap:var(--s-2)}
.dl{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  font-family:var(--serif);font-size:1rem;line-height:1.3;
  text-decoration:none;color:var(--eerie);
  padding-bottom:var(--s-1);border-bottom:1px solid var(--platinum);
  transition:border-color var(--dur-fast) var(--ease)}
.dl:hover{border-bottom-color:var(--eerie)}
.dl:focus-visible{outline:2px solid var(--eerie);outline-offset:3px}
.dl-meta{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}

/* Lists recovered from the monograph's ASCII diagrams — chronologies and
   filmographies. Set as a quiet indented list, never as a bordered box. */
.jl{list-style:none;margin:var(--s-4) 0;padding-left:var(--s-4);
  border-left:1px solid var(--platinum);max-width:var(--measure)}
.jl li{font-size:.96rem;line-height:1.7;color:var(--dim);padding:.18em 0}
.jl li strong{color:var(--eerie);font-weight:500}

/* ---------- PEERS HERO ----------
   A four-panel composite: two women, each shown twice, decades apart. It runs
   wider than the reading measure because the point is the four faces side by
   side; the caption stays at measure so it remains readable. */
.peers-hero{margin:var(--s-8) auto var(--s-12);max-width:var(--page);padding:0 var(--s-3)}
.peers-hero img{width:100%;height:auto;display:block}
.peers-hero figcaption{font-family:var(--sans);font-size:var(--t-caption);line-height:1.6;
  color:var(--dim);margin-top:var(--s-2);max-width:46em}
.peers-hero figcaption a{color:var(--eerie);text-decoration:none;border-bottom:1px solid var(--platinum)}
.peers-hero figcaption a:hover{border-bottom-color:var(--eerie)}

/* Inline figure inside a profile article (Jins monograph). */
.inline-fig{margin:var(--s-8) 0;max-width:var(--measure)}
.inline-fig img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.03)}
.inline-fig figcaption{font-family:var(--sans);font-size:var(--t-caption);line-height:1.6;
  color:var(--dim);margin-top:var(--s-2)}