/* portrait-reveal.css — one portrait behaviour for the whole site.

   Every chapter styles its own medallion card inline (they were written at
   different times and drifted), so this file deliberately only adds the parts
   that must be identical everywhere:

     1. the hover/focus affordance that tells the reader a portrait opens,
     2. the reveal overlay that shows the museum original it was restored from,
     3. the compact name-tag used for figures no ancient likeness survives for.

   It must be linked *after* the chapter's own <style> so the shared rules win.
   Driven by js/portrait-reveal.js; data from js/portrait-registry.js. */

/* ---------- 1. the affordance on the medallion ---------- */

figure.portrait .frame[data-reveal]{
  cursor:zoom-in;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
figure.portrait .frame[data-reveal]:focus-visible{
  outline:2px solid var(--accent,#8a3324);
  outline-offset:3px;
}

/* The hint sits inside the frame's inner rule, so it reads as part of the
   plate rather than as a browser tooltip. Hidden until hover/focus. */
figure.portrait .frame[data-reveal] .reveal-hint{
  position:absolute;
  left:8px;right:8px;bottom:8px;
  z-index:3;
  display:block;
  padding:5px 4px;
  background:rgba(43,33,25,.84);
  color:var(--parch,#efe6d2);
  font-family:var(--disp,Georgia,serif);
  font-size:9.5px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  text-align:center;
  line-height:1.3;
  opacity:0;
  transform:translateY(100%);
  transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;
}
figure.portrait .frame[data-reveal]:hover .reveal-hint,
figure.portrait .frame[data-reveal]:focus-visible .reveal-hint,
figure.portrait .frame[data-reveal].is-open .reveal-hint{
  opacity:1;
  transform:none;
}

/* ---------- 2. the compact tag for figures with no surviving likeness ----------

   A blank card that says "portrait forthcoming" promises something that will
   never arrive: for these people no coin, bust or mosaic survives to restore
   from (PROJECT_PLAN.md §6.4, the Zero Guesswork Policy). The person still
   deserves a marker in the margin, so the card collapses to a small labelled
   tag instead of a picture frame. */

figure.portrait.no-likeness,
figure.portrait.missing{
  float:right;
  width:auto;
  max-width:min(15rem,42%);
  margin:6px 0 16px 26px;
  clear:none;
}
figure.portrait.no-likeness .frame,
figure.portrait.missing .frame,
figure.portrait.no-likeness img,
figure.portrait.missing img,
figure.portrait.no-likeness .ph,
figure.portrait.missing .ph{
  display:none !important;
}
figure.portrait.no-likeness figcaption,
figure.portrait.missing figcaption{
  display:block;
  margin:0;
  padding:9px 13px;
  text-align:left;
  background:var(--panel,#f6efdd);
  border:1px solid var(--line,#c9b48f);
  border-left:3px solid var(--gold,#9c7a3c);
  font-size:12px;
  line-height:1.4;
  color:var(--ink-soft,#6b5d4c);
}
figure.portrait.no-likeness figcaption b,
figure.portrait.missing figcaption b{
  display:block;
  font-size:13.5px;
  color:var(--ink,#2b2119);
  font-variant:small-caps;
  letter-spacing:.5px;
}
figure.portrait.no-likeness figcaption span,
figure.portrait.missing figcaption span{
  display:block;
  font-style:italic;
  color:var(--ink-faint,#8a7961);
}
figure.portrait.no-likeness figcaption .src-hint,
figure.portrait.missing figcaption .src-hint{
  margin-top:5px;
  font-style:normal;
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--ink-faint,#8a7961);
  opacity:.9;
}

/* ---------- 3. the reveal overlay ---------- */

.pv-overlay{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,44px);
  background:rgba(24,18,13,.965);
  backdrop-filter:blur(2px);
}
.pv-overlay.is-open{display:flex}
.pv-overlay *{box-sizing:border-box}

.pv-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  width:min(46rem,100%);
  max-height:100%;
  color:#efe6d2;
  font-family:var(--serif,Georgia,serif);
  text-align:center;
}

.pv-close{
  position:absolute;
  top:-6px;right:-4px;
  z-index:2;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(43,33,25,.75);
  border:1px solid rgba(201,180,143,.5);
  color:#efe6d2;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.pv-close:hover{background:#8a3324;border-color:#8a3324}
.pv-close:focus-visible{outline:2px solid #efe6d2;outline-offset:2px}

.pv-stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pv-stage img{
  display:block;
  max-width:100%;
  max-height:62vh;
  width:auto;height:auto;
  background:#fbf6e9;
  border:1px solid #000;
  padding:8px;
  box-shadow:0 22px 60px -14px rgba(0,0,0,.75);
}

.pv-switch{
  display:flex;
  justify-content:center;
  gap:0;
  flex:0 0 auto;
}
.pv-switch button{
  background:rgba(43,33,25,.55);
  border:1px solid rgba(201,180,143,.45);
  color:#d9c8a4;
  font-family:var(--disp,Georgia,serif);
  font-size:10.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:7px 16px;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.pv-switch button + button{border-left:none}
.pv-switch button[aria-pressed="true"]{background:#8a3324;border-color:#8a3324;color:#f6efdd}
.pv-switch button:focus-visible{outline:2px solid #efe6d2;outline-offset:2px}

.pv-meta{
  flex:0 0 auto;
  font-size:13.5px;
  line-height:1.55;
  color:#d9c8a4;
  max-width:42rem;
  margin:0 auto;
}
.pv-meta .pv-name{
  display:block;
  font-family:var(--disp,Georgia,serif);
  font-size:16px;
  letter-spacing:1px;
  font-variant:small-caps;
  color:#f6efdd;
}
.pv-meta .pv-src{display:block;font-style:italic;margin-top:3px}
.pv-meta .pv-notes{display:block;margin-top:5px;font-size:12.5px;color:#bda98a}
.pv-meta .pv-link{display:block;margin-top:6px;font-size:12.5px}
.pv-meta .pv-src:empty,
.pv-meta .pv-notes:empty{display:none}
.pv-meta a{color:#e0b8a6}

.pv-dismiss{
  flex:0 0 auto;
  font-size:10.5px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#9a8a70;
}

@media (max-width:760px){
  figure.portrait.no-likeness,
  figure.portrait.missing{float:none;max-width:none;width:auto;margin:18px 0}
  .pv-stage img{max-height:50vh}
  .pv-close{top:0;right:0}
}
@media (prefers-reduced-motion:reduce){
  figure.portrait .frame[data-reveal] .reveal-hint{transition:none}
}

/* ---------- 4. the opening portrait band ----------

   Several map-study chapters open with a short section — a couple of hundred
   words — carrying three or four medallions. Floated right they stack far past
   the end of the prose and spill into the map below. Where a section's
   portraits belong together as the cast of the chapter rather than beside a
   particular paragraph, they run as a band instead. */

.portrait-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:18px;
  margin:18px 0 28px;
  clear:both;
}
/* Sized so four cards still fit across the 44rem column before wrapping. */
.portrait-row figure.portrait{
  float:none;
  width:clamp(120px,13vw,158px);
  margin:0;
}
.portrait-row figure.portrait.no-likeness,
.portrait-row figure.portrait.missing{
  float:none;
  width:auto;
  max-width:16rem;
  margin:0;
  align-self:flex-start;
}
@media (max-width:640px){
  .portrait-row{gap:14px;justify-content:center}
  .portrait-row figure.portrait{width:clamp(110px,38%,150px)}
}