/* plate.css — the antique-plate map & artifact figure, plus the lightbox they open into.
   Extracted verbatim from the inline blocks the long chapters carry (chapter-21 is the
   reference copy) so that short chapters can use identical figures with two includes:

     <link rel="stylesheet" href="css/plate.css">
     ... <div class="lb" id="lb" ...> markup before </body> ...
     <script src="js/plate-lightbox.js"></script>
     <script src="js/plate-zoom.js"></script>

   Do NOT add this to a chapter that already defines figure.map/.lb inline — it would
   duplicate the rules. Relies on the house variables (--ink, --parch, --line, --gold,
   --accent, --shadow, --disp) that every chapter's :root already defines. */

/* ---------- Map figure ---------- */
figure.map{margin:36px 0;clear:both}
figure.map .plate{position:relative;background:#fbf6e9;border:1px solid var(--ink);padding:10px;
  box-shadow:0 14px 40px -18px var(--shadow);cursor:zoom-in;overflow:hidden}
figure.map .plate::after{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none;z-index:2}
figure.map img{display:block;width:100%;height:auto}
figure.map .tag{position:absolute;top:14px;left:14px;z-index:3;background:rgba(43,33,25,.82);color:var(--parch);
  font-family:var(--disp);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:5px 10px}
figure.map .zoomhint{position:absolute;bottom:16px;right:16px;z-index:3;background:rgba(251,246,233,.9);
  border:1px solid var(--line);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);padding:4px 9px}
figure.map figcaption{margin-top:12px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;
  padding-left:14px;border-left:2px solid var(--gold)}
figure.map figcaption b{color:var(--ink);font-variant:small-caps;letter-spacing:.4px}
figure.map figcaption .cite{display:block;font-size:11.5px;color:var(--ink-faint);font-style:italic;margin-top:5px}

/* ---------- Archaeology & Artifact figure ---------- */
figure.artifact{margin:36px 0;clear:both}
figure.artifact .plate{position:relative;background:#fbf6e9;border:1px solid var(--ink);padding:10px;
  box-shadow:0 14px 40px -18px var(--shadow);cursor:zoom-in;overflow:hidden;text-align:center}
figure.artifact .plate::after{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none;z-index:2}
figure.artifact img{display:inline-block;max-width:100%;height:auto;max-height:480px;object-fit:contain}
figure.artifact .tag{position:absolute;top:14px;left:14px;z-index:3;background:rgba(138,51,36,.88);color:var(--parch);
  font-family:var(--disp);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:5px 10px}
figure.artifact .zoomhint{position:absolute;bottom:16px;right:16px;z-index:3;background:rgba(251,246,233,.9);
  border:1px solid var(--line);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);padding:4px 9px}
figure.artifact figcaption{margin-top:12px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;
  padding-left:14px;border-left:2px solid var(--accent)}
figure.artifact figcaption b{color:var(--ink);font-variant:small-caps;letter-spacing:.4px}
figure.artifact figcaption .cite{display:block;font-size:11.5px;color:var(--ink-faint);font-style:italic;margin-top:5px}

/* A short chapter's column is narrower than its page; let a plate breathe a little past it. */
@media (min-width:1000px){
  figure.map.bleed,
  figure.artifact.bleed{width:min(54rem,calc(100vw - 96px));margin-left:calc((var(--measure) - min(54rem,100vw - 96px))/2)}
}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(28,22,16,.9);display:none;align-items:center;justify-content:center;
  z-index:80;padding:24px;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:96vw;max-height:88vh;width:auto;height:auto;border:1px solid #000;
  box-shadow:0 20px 60px -12px rgba(0,0,0,.7)}
.lb .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:var(--parch);font-size:14px;
  font-style:italic;padding:0 24px}
.lb .x{position:absolute;top:18px;right:24px;color:var(--parch);font-size:30px;line-height:1;cursor:pointer;opacity:.75}
.lb .x:hover{opacity:1}