/* ══════════════════════════════════════════════════════════════════════
   PORTRAITS  ·  page-scoped

   A picture on the room's own dark ground: no frame, no moulding, no mat
   colour of its own. The detail page is height-bound (the whole portrait is
   visible without scrolling on a desktop); the index is a quiet wall that
   centres however few there are.
   ══════════════════════════════════════════════════════════════════════ */
.portraits, .portrait{ max-width:1040px; margin-inline:auto; }
.portraitsHead{ max-width:62ch; }
.portraitsHead .pageLede{ max-width:62ch; }

/* ── The wall ───────────────────────────────────────────────────── */
.portraitWall{
  display:flex; flex-wrap:wrap; justify-content:flex-start;
  gap:clamp(28px,4vw,52px) clamp(20px,3vw,40px);
  margin-top:clamp(36px,6vh,72px);
}
.portraitCard{
  flex:0 1 320px; width:320px; min-width:0; display:block;
  color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.portraitMat{ display:block; background:#080a0e; box-shadow:0 22px 44px -26px rgba(0,0,0,.9); }
.portraitMat img{
  display:block; width:100%; height:auto;
  filter:brightness(.92); transition:filter .6s ease;
}
.portraitCard:hover .portraitMat img,
.portraitCard:focus-visible .portraitMat img{ filter:brightness(1); }
.portraitCard:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:6px; }
.portraitName{
  display:block; margin-top:clamp(12px,1.5vh,16px);
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(19px,1.5vw,24px); line-height:1.2; color:var(--warm-gold);
}
.portraitPov{
  display:block; margin-top:5px;
  font-family:var(--font-display); font-style:italic;
  font-size:16px; line-height:1.4; color:rgba(232,200,154,.62);
}

/* ── The portrait ───────────────────────────────────────────────── */
.portraitPlate{ margin:0; display:flex; justify-content:center; }
.portraitBtn{
  display:block; padding:0; border:0; background:none; cursor:zoom-in; max-width:100%;
  -webkit-tap-highlight-color:transparent;
}
.portraitBtn:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:6px; }
.portraitBtn img{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:85vh; object-fit:contain;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95);
}
@media (max-width:700px){
  .portraitBtn{ width:100%; }
  .portraitBtn img{ width:100%; max-height:none; }
}

.portraitHead{
  max-width:62ch; margin:clamp(30px,5vh,56px) auto 0; text-align:center;
}
.portraitHead .pageSub em{ font-style:italic; }
.portraitCaption{
  margin-top:clamp(16px,2.3vh,26px);
  font-family:var(--font-display); font-size:19.5px; line-height:1.6;
  color:rgba(232,228,221,.8); text-wrap:pretty;
}
.portraitCaption:empty{ display:none; }

.portraitSec{ max-width:62ch; margin:clamp(40px,6vh,72px) auto 0; }
.portraitH{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,1.9vw,30px); line-height:1.2; color:var(--warm-gold);
  margin-bottom:clamp(14px,2vh,22px);
}
.portraitSec p{
  font-family:var(--font-display); font-size:19px; line-height:1.65;
  color:rgba(232,228,221,.82);
}
.portraitSec .portraitFilms{ color:rgba(232,228,221,.55); }
.portraitSec p + p{ margin-top:1em; }
.portraitQuote{
  margin:0; padding:.15em 0 .15em 1.15em;
  border-left:1px solid rgba(201,168,117,.4);
}
.portraitQuote + .portraitQuote{ margin-top:clamp(18px,2.6vh,28px); }
.portraitQuote p{ font-style:italic; color:rgba(232,200,154,.86); }
.portraitQuote cite{
  display:block; margin-top:.6em; font-style:normal;
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.2em; color:rgba(139,155,180,.86);
}

.portrait .sourceBook{ max-width:62ch; margin-inline:auto; }
.portraitFacts{
  max-width:62ch; margin:clamp(32px,5vh,56px) auto 0;
  font-family:var(--font-display); font-size:15px; line-height:1.5;
  color:rgba(232,228,221,.5);
}
.portraitFacts:empty{ display:none; }

/* Below 1000px the page is one column: the text column's lower half
   (episodes, signup, link back) keeps its centred 760px measure. */
.portraitText .workAligned{ max-width:760px; margin-inline:auto; }
.portraitText .letterSignup{ max-width:62ch; }

/* ── Desktop: a two-column plate ─────────────────────────────────
   The picture holds the left column, sticky as the text scrolls past, and
   leans toward the gutter so the gap to the words never changes. Everything
   else reads down the right. The site band is not sticky (it scrolls away),
   so the stick offset is just 24px of air. The grid ends where the article
   ends, before the footer, so the picture can never ride over it. */
@media (min-width:1000px){
  .portrait{
    max-width:1240px;
    display:grid; align-items:start;
    grid-template-columns:minmax(0,54fr) minmax(0,46fr);
    column-gap:clamp(48px,5vw,72px);
  }
  .portraitPlate{
    position:sticky; top:24px; align-self:start;
    justify-content:flex-end;
  }
  .portraitBtn img{ max-height:calc(100vh - 120px); }

  .portraitText{ min-width:0; container-type:inline-size; }
  .portraitHead{ max-width:58ch; margin:0; text-align:left; }
  .portraitHead .pageTitle{ margin-top:-.1em; text-wrap:pretty; }
  .portraitSec, .portraitFacts, .portrait .sourceBook{
    max-width:58ch; margin-inline:0;
  }
  .portraitSec{ margin-top:clamp(32px,4.5vh,52px); }
  .portraitText .workAligned{ max-width:none; margin-inline:0; }
  .portraitText .letterSignup{ max-width:58ch; }
}
/* Episode cards sit two across only when the column can hold them. */
@container (min-width:560px){
  .portraitText .workGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container (max-width:559px){
  .portraitText .workGrid{ grid-template-columns:1fr; }
}

@media (max-width:700px){
  .room{ padding-inline:16px; }
  .portraitCard{ flex:1 1 100%; width:auto; max-width:360px; }
  .portraitText .workGrid{ grid-template-columns:1fr; }
  .portraitSec, .portraitHead, .portraitFacts{ max-width:100%; }
  .portraitSec p, .portraitCaption{ font-size:18px; }
}