/* Gilded museum frame for photographs. Shared by index.html and john-paul-ii.html.
   Structure: .hung > figure.gilt > .gilt-mat > .gilt-fillet > picture/img, then an optional .brass label.
   Size it with --fw (moulding width), --mat (mat width) and --w (picture width). */
.hung{--fw:22px;--mat:18px;--w:300px;position:relative;display:flex;flex-direction:column;align-items:center;margin:0}
.hung::before{content:"";position:absolute;left:50%;top:calc(-1 * var(--fw) * 2.2);width:calc(var(--w) * 1.5);height:calc(var(--w) * 1.1);transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,rgba(255,236,170,.16),rgba(255,236,170,.05) 40%,transparent 70%);pointer-events:none}
.gilt{position:relative;display:block;box-sizing:border-box;max-width:100%;width:calc(var(--w) + 2 * var(--fw) + 2 * var(--mat) + 6px);margin:0;padding:var(--fw);border-radius:3px;
  background:
    linear-gradient(135deg,rgba(255,246,210,.55),transparent 22%,transparent 78%,rgba(40,26,2,.45)),
    repeating-linear-gradient(45deg,rgba(255,240,190,.07) 0 2px,rgba(80,56,8,.07) 2px 4px),
    linear-gradient(160deg,#F4DE8E 0%,#C59E36 16%,#7E5D14 30%,#E9CB6C 46%,#B08A27 58%,#6A4C0E 74%,#D3B04E 90%,#F0D688 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,242,196,.85),
    inset 0 0 0 2px #5A400A,
    inset 0 0 0 calc(var(--fw) - 2px) rgba(0,0,0,0),
    0 1px 0 1px rgba(40,26,2,.55),
    0 3px 6px rgba(0,0,0,.45),
    0 calc(var(--fw) * 1.1) calc(var(--fw) * 2.2) calc(var(--fw) * -.2) rgba(0,0,0,.7),
    0 calc(var(--fw) * 2.4) calc(var(--fw) * 3.6) calc(var(--fw) * -1) rgba(0,0,0,.45)}
/* raised inner moulding: lit from the upper left */
.gilt::before{content:"";position:absolute;inset:calc(var(--fw) * .28);border:calc(var(--fw) * .26) solid;border-color:#F7E39C #8A6716 #4E3707 #D4B24F;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(60,40,4,.55),0 0 0 1px rgba(255,240,190,.35);pointer-events:none}
/* beaded sight edge where the moulding meets the mat */
.gilt::after{content:"";position:absolute;inset:calc(var(--fw) - 3px);border-radius:1px;pointer-events:none;
  background:radial-gradient(circle,#F6E3A0 0 32%,#6E500F 46%,transparent 52%) 0 0/4px 4px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:3px;opacity:.9}
.gilt-mat{display:block;position:relative;z-index:1;padding:var(--mat);background:radial-gradient(ellipse at 50% 30%,#1A2846,#0E1830 60%,#0A1222);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 2px 3px 8px rgba(0,0,0,.75),inset -1px -1px 0 rgba(255,255,255,.04)}
.gilt-fillet{display:block;padding:3px;background:linear-gradient(135deg,#F2D987,#9C7C1E 35%,#E7CB6B 60%,#8A6A18);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.6)}
.gilt-fillet picture,.gilt-fillet img{display:block;width:var(--w);max-width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.gilt-fillet img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);filter:saturate(.92) contrast(1.02)}
/* engraved brass placard */
.brass{position:relative;margin-top:calc(var(--fw) * .9);padding:8px 26px 9px;max-width:calc(var(--w) + 2 * var(--fw));box-sizing:border-box;text-align:center;border-radius:2px;color:#2B1E04;
  background:linear-gradient(180deg,#F1DC92 0%,#D2AE4C 42%,#B48E2C 58%,#DDBF67 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(70,48,6,.5),0 0 0 1px #6B4E0E,0 6px 12px rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(255,244,205,.55);font-family:var(--serif,Georgia,serif);line-height:1.3}
.brass::before,.brass::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF4C8,#9C7C1E 60%,#5A400A);box-shadow:0 1px 1px rgba(0,0,0,.4)}
.brass::before{left:9px}.brass::after{right:9px}
.brass .t{display:block;font-family:var(--display,Cinzel,serif);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.brass .d{display:block;font-family:var(--display,Cinzel,serif);font-size:11px;letter-spacing:.24em;color:#4A3608}
.brass .c{display:block;margin-top:4px;font-style:italic;font-size:13px;color:#3A2A06}
.brass .c a{color:inherit;text-decoration:underline;text-decoration-color:rgba(58,42,6,.5);text-underline-offset:2px}
.brass .c a:hover{text-decoration-color:currentColor}
.brass.mini{padding:4px 18px 5px;margin-top:calc(var(--fw) * .8)}
.brass.mini::before{left:6px}.brass.mini::after{right:6px}
.brass.mini::before,.brass.mini::after{width:4px;height:4px;margin-top:-2px}
.brass.mini .c{margin:0;font-size:11px;line-height:1.25}

/* Placements */
/* Home: the open niche hangs a small framed portrait in place of its emblem */
.niche .arch{container-type:inline-size}
.niche-portrait{--w:40cqw;--fw:clamp(5px,2.9cqw,11px);--mat:clamp(4px,2.3cqw,9px);position:absolute;left:50%;top:15%;transform:translateX(-50%);transition:transform .6s var(--ease),filter .6s}
.niche-portrait::before{display:none}
.niche-portrait .gilt::after{display:none}
.niche.open .niche-link:hover .niche-portrait,.niche.open .niche-link:focus-visible .niche-portrait{transform:translateX(-50%) scale(1.04);filter:drop-shadow(0 0 14px rgba(231,203,107,.35))}
.plaque .credit{display:block;margin:-6px 0 8px;font-style:italic;font-size:12.5px;line-height:1.3;color:#6d6250}
/* Exhibit entrance: a small portrait hung on the doors above the title */
.entrance-portrait{--w:clamp(40px,min(5.4vw,calc(56vh - 364px)),84px);--fw:8px;--mat:6px;margin:6px 0 16px;cursor:pointer}
.entrance-credit{display:none;margin:-6px 0 0;font-style:italic;font-size:13px;color:var(--mist-2)}
.entrance-credit a{color:inherit}
@media (min-width:641px) and (max-height:820px){.entrance-portrait{margin-top:2px;margin-bottom:8px}.entrance-portrait .brass.mini{margin-top:5px;padding:3px 16px 4px}.entrance-portrait{--w:clamp(40px,min(5.4vw,calc(56vh - 370px)),84px)}}
@media (min-width:641px) and (max-height:700px){.entrance-portrait .brass{display:none}.entrance-portrait{--w:clamp(40px,calc(33vh - 160px),84px);margin-bottom:12px}.entrance-credit{display:block}}
.entrance-portrait .brass.mini{max-width:none;white-space:nowrap;margin-top:7px}
.entrance-portrait .brass.mini .c{font-size:10.5px}
@media (min-width:641px) and (min-height:980px){.entrance-portrait{--w:96px;--fw:9px;--mat:7px}}
.entrance-portrait::before{display:none}
.entrance-portrait .gilt::after{inset:5px}
/* Gallery II: the main framed portrait under the room heading */
.life-portrait{--w:clamp(200px,18vw,260px);--fw:22px;--mat:18px;margin:calc(-1 * clamp(10px,2vw,30px)) auto clamp(44px,5vw,64px);max-width:100%}
@media (max-width:640px){
  .entrance-portrait{--w:clamp(56px,calc(20vh - 60px),92px);--fw:9px;--mat:6px;margin-bottom:12px}
  .entrance-portrait .brass.mini{white-space:normal;max-width:270px}
  .life-portrait{--w:min(56vw,230px);--fw:16px;--mat:12px}
  .brass .t{font-size:13px}
  .brass .c{font-size:12.5px}
}
@media (max-width:560px){
  .plaque .credit{font-size:11px;margin:-4px 0 6px}
}