/* ============================================================
   WALNUT FRAMES — speaker portraits in carved-walnut + gilt liner
   ============================================================
   Applied via .plate-portrait[data-frame="…"][data-frame-finish="…"].
   The host element is .plate-portrait (already position:relative,
   overflow:hidden). The frame is built from:
     • box-shadow rings (project OUTWARD past overflow:hidden — fine)
     • ::before  → outer carved bevel (sits inside, clipped)
     • ::after   → inner gilt liner / sight-edge
   No HTML changes needed beyond the two data attrs.
   ============================================================ */

/* ---------- finish tokens ---------- */
.plate-portrait[data-frame-finish="walnut"] {
  --frame-wood-1:   #4a2e18;   /* outer rim — deep walnut shadow */
  --frame-wood-2:   #6a4528;   /* mid wood — burl */
  --frame-wood-3:   #8a5e36;   /* highlight stripe */
  --frame-wood-4:   #2a1808;   /* deepest crevice */
  --frame-gilt-1:   #b68a3e;   /* primary gilt */
  --frame-gilt-2:   #e6c777;   /* gilt highlight */
  --frame-gilt-3:   #7a5a24;   /* gilt shadow / antique tarnish */
  --frame-paper:    #f4ecda;   /* page color, for sight-edge join */
}
.plate-portrait[data-frame-finish="oak"] {
  --frame-wood-1:   #8a6f4c;
  --frame-wood-2:   #a8896a;
  --frame-wood-3:   #c9b393;
  --frame-wood-4:   #6a5238;
  --frame-gilt-1:   #9a6f3a;
  --frame-gilt-2:   #c69856;
  --frame-gilt-3:   #6a4c20;
  --frame-paper:    #f4ecda;
}

/* ============================================================
   FRAME · GALLERY  — straight rectangular walnut + gilt slip.
   Museum-default. Three rings outward:
   1. inner gilt liner   (the "slip")
   2. walnut moulding    (the wood face)
   3. outermost shadow   (cast on the wall)
   ============================================================ */
.plate-portrait[data-frame="gallery"] {
  /* leave room for the frame so the photo isn't clipped under it */
  margin: 22px;
  /* Layered box-shadows = the carved frame projecting outward */
  box-shadow:
    /* 1) thin gilt sight-edge — touches the photo */
    0 0 0 2px var(--frame-gilt-1),
    /* 2) inner shadow against the gilt (depth) */
    0 0 0 3px var(--frame-gilt-3),
    /* 3) walnut moulding face */
    0 0 0 14px var(--frame-wood-2),
    /* 4) walnut highlight ridge */
    0 0 0 15px var(--frame-wood-3),
    /* 5) walnut outer rim */
    0 0 0 18px var(--frame-wood-1),
    /* 6) cast shadow on the wall */
    0 6px 14px -2px rgba(26,18,8,0.32),
    0 14px 28px -6px rgba(26,18,8,0.18);
}
/* Subtle wood grain inside the moulding — overlay across the rings */
.plate-portrait[data-frame="gallery"]::before {
  content: '';
  position: absolute;
  inset: -18px;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
  /* faux grain — tight horizontal-ish noise lines */
  background:
    repeating-linear-gradient(
      92deg,
      transparent 0 3px,
      rgba(0,0,0,0.05) 3px 4px,
      transparent 4px 9px,
      rgba(255,255,255,0.04) 9px 10px
    );
  /* clip to the moulding ring only (between -18px and 0) */
  -webkit-mask:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  -webkit-mask-clip: padding-box, content-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /* Fallback: just dim the grain so it doesn't blow over the photo */
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* ============================================================
   FRAME · SALON  — multi-stepped ogee moulding, more ornate.
   Five concentric rings: gilt sight, walnut bead, gilt fillet,
   carved walnut ogee, walnut outer rim.
   ============================================================ */
.plate-portrait[data-frame="salon"] {
  margin: 30px;
  box-shadow:
    /* 1 gilt sight-edge */
    0 0 0 2px var(--frame-gilt-1),
    /* 2 dark crevice */
    0 0 0 3px var(--frame-wood-4),
    /* 3 inner walnut bead */
    0 0 0 7px var(--frame-wood-2),
    /* 4 gilt fillet */
    0 0 0 9px var(--frame-gilt-1),
    /* 5 deep crevice */
    0 0 0 10px var(--frame-wood-4),
    /* 6 outer walnut ogee — the wide face */
    0 0 0 22px var(--frame-wood-2),
    /* 7 highlight ridge */
    0 0 0 23px var(--frame-wood-3),
    /* 8 outer rim */
    0 0 0 26px var(--frame-wood-1),
    /* 9 final crevice */
    0 0 0 27px var(--frame-wood-4),
    /* cast shadow */
    0 8px 18px -2px rgba(26,18,8,0.36),
    0 18px 38px -8px rgba(26,18,8,0.22);
}
/* Acanthus corner ornaments — gilt rosettes at each corner of the moulding */
.plate-portrait[data-frame="salon"]::before {
  content: '';
  position: absolute;
  inset: -26px;
  pointer-events: none;
  z-index: 6;
  background:
    /* four corner rosettes — small radial gilt pips */
    radial-gradient(circle 6px at 12px 12px,           var(--frame-gilt-2) 0 3px, var(--frame-gilt-3) 4px 5px, transparent 6px),
    radial-gradient(circle 6px at calc(100% - 12px) 12px,           var(--frame-gilt-2) 0 3px, var(--frame-gilt-3) 4px 5px, transparent 6px),
    radial-gradient(circle 6px at 12px calc(100% - 12px),           var(--frame-gilt-2) 0 3px, var(--frame-gilt-3) 4px 5px, transparent 6px),
    radial-gradient(circle 6px at calc(100% - 12px) calc(100% - 12px),           var(--frame-gilt-2) 0 3px, var(--frame-gilt-3) 4px 5px, transparent 6px);
}
/* fluting along long edges */
.plate-portrait[data-frame="salon"]::after {
  content: '';
  position: absolute;
  inset: -10px -26px;
  pointer-events: none;
  z-index: 5;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 6px,
      rgba(0,0,0,0.18) 6px 7px,
      transparent 7px 13px,
      rgba(255,255,255,0.10) 13px 14px
    );
  /* only show on the wide outer ogee — top/bottom strips */
  -webkit-mask:
    linear-gradient(#000,#000) top    / 100% 16px no-repeat,
    linear-gradient(#000,#000) bottom / 100% 16px no-repeat;
          mask:
    linear-gradient(#000,#000) top    / 100% 16px no-repeat,
    linear-gradient(#000,#000) bottom / 100% 16px no-repeat;
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* ============================================================
   FRAME · CARTOUCHE — gilt-only escutcheon. No walnut.
   Ornamental shaped frame, scrollwork at top + bottom, gilt only.
   We approximate with: clip-path shield + thick gilt border via
   stacked box-shadow + decorative gilt scroll ::before.
   ============================================================ */
.plate-portrait[data-frame="cartouche"] {
  margin: 26px 26px 34px;
  /* shield/escutcheon clip — the photo itself takes the cartouche shape */
  clip-path: polygon(
    50% 0%,
    78% 4%,
    96% 14%,
    100% 36%,
    100% 70%,
    92% 88%,
    72% 98%,
    50% 100%,
    28% 98%,
    8% 88%,
    0% 70%,
    0% 36%,
    4% 14%,
    22% 4%
  );
  box-shadow:
    0 0 0 2px var(--frame-gilt-3),
    0 0 0 4px var(--frame-gilt-1),
    0 0 0 6px var(--frame-gilt-2),
    0 0 0 8px var(--frame-gilt-3),
    0 0 0 12px var(--frame-gilt-1),
    0 0 0 14px var(--frame-gilt-3),
    0 10px 22px -4px rgba(26,18,8,0.30),
    0 22px 44px -10px rgba(26,18,8,0.22);
  /* The clip-path will clip the box-shadow too (browser behavior).
     Workaround: drop the box-shadow rings and use ::before for the gilt border instead. */
  box-shadow: 0 10px 22px -4px rgba(26,18,8,0.30), 0 22px 44px -10px rgba(26,18,8,0.22);
}
/* Cartouche border — drawn via outline-like SVG-stroke approach using ::before w/ same clip */
.plate-portrait[data-frame="cartouche"]::before {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(135deg, var(--frame-gilt-3) 0%, var(--frame-gilt-1) 30%, var(--frame-gilt-2) 50%, var(--frame-gilt-1) 70%, var(--frame-gilt-3) 100%);
  clip-path: polygon(
    50% 0%, 78% 4%, 96% 14%, 100% 36%, 100% 70%, 92% 88%, 72% 98%, 50% 100%,
    28% 98%, 8% 88%, 0% 70%, 0% 36%, 4% 14%, 22% 4%
  );
  /* punch out the inner area — cut by a same-shape mask offset inward */
  -webkit-mask:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  -webkit-mask-clip: padding-box, content-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 8px;
}
/* Top scroll ornament — a small gilt cartouche cap */
.plate-portrait[data-frame="cartouche"]::after {
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 24px;
  pointer-events: none;
  z-index: 6;
  background:
    radial-gradient(ellipse 30px 12px at 50% 100%, var(--frame-gilt-1) 0 60%, var(--frame-gilt-3) 60% 70%, transparent 72%),
    radial-gradient(ellipse 6px 4px at 18% 60%, var(--frame-gilt-2) 0 80%, transparent 90%),
    radial-gradient(ellipse 6px 4px at 82% 60%, var(--frame-gilt-2) 0 80%, transparent 90%);
}

/* ============================================================
   FRAME · DIPTYCH — two-panel icon-style. Walnut hinged edges +
   vertical gilt rule splitting the portrait. Read as a folding
   panel from a Bohemian altarpiece.
   ============================================================ */
.plate-portrait[data-frame="diptych"] {
  margin: 16px;
  box-shadow:
    /* gilt sight-edge */
    0 0 0 2px var(--frame-gilt-1),
    /* dark crevice */
    0 0 0 3px var(--frame-wood-4),
    /* walnut hinge frame */
    0 0 0 9px var(--frame-wood-2),
    0 0 0 10px var(--frame-wood-3),
    0 0 0 12px var(--frame-wood-1),
    /* shadow */
    0 6px 14px -2px rgba(26,18,8,0.30),
    0 14px 30px -8px rgba(26,18,8,0.18);
}
/* Vertical gilt seam down the middle */
.plate-portrait[data-frame="diptych"]::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(90deg, var(--frame-wood-4) 0%, var(--frame-gilt-3) 25%, var(--frame-gilt-1) 45%, var(--frame-gilt-2) 50%, var(--frame-gilt-1) 55%, var(--frame-gilt-3) 75%, var(--frame-wood-4) 100%);
  box-shadow:
    -1px 0 2px rgba(26,18,8,0.4),
    1px 0 2px rgba(26,18,8,0.4);
}
/* Top + bottom gilt clasps centered on the seam */
.plate-portrait[data-frame="diptych"]::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 6;
  width: 18px;
  height: 100%;
  top: 0;
  background:
    radial-gradient(ellipse 9px 5px at 50% 8px,            var(--frame-gilt-1) 0 60%, var(--frame-gilt-3) 60% 75%, transparent 78%),
    radial-gradient(ellipse 9px 5px at 50% calc(100% - 8px), var(--frame-gilt-1) 0 60%, var(--frame-gilt-3) 60% 75%, transparent 78%);
}

/* ============================================================
   GILT NAMEPLATE — engraved cartouche under the frame
   Uses .plate-name as the engraved name (shown only when frame!=none)
   We do NOT repaint .plate-name; instead drop a thin gilt rule + mono
   "ATTRIBUTED TO" eyebrow above it — purely decorative, via ::before
   on .plate-body in the editorial layout when a frame is active.
   ============================================================ */
.plate[data-layout="editorial"]:has(.plate-portrait[data-frame]:not([data-frame="none"])) .plate-body::before {
  content: '— attributed —';
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--frame-gilt-3, #7a5a24);
  margin: -4px 0 8px;
  text-align: left;
}

/* ============================================================
   FRAME · NONE — no-op so the radio toggle works cleanly
   ============================================================ */
.plate-portrait[data-frame="none"] {
  /* fall back to existing behavior */
}

/* ============================================================
   When a frame is active, suppress the existing card border on
   the portrait edge so the frame stands free.
   ============================================================ */
.plate[data-layout="editorial"]:has(.plate-portrait[data-frame]:not([data-frame="none"])) {
  /* lift the card so the frame moulding doesn't fight a border */
  border-color: transparent;
  background: transparent;
}
.plate[data-layout="editorial"]:has(.plate-portrait[data-frame]:not([data-frame="none"])) .plate-portrait {
  border: none !important;
  border-bottom: none !important;
}

/* Density-list mode: don't apply heavy frames to tiny circular thumbs */
.plate-grid[data-density="list"] .plate-portrait[data-frame] {
  margin: 0;
  box-shadow: 0 0 0 2px var(--frame-gilt-1, #b68a3e), 0 0 0 4px var(--frame-wood-1, #4a2e18) !important;
  clip-path: none !important;
}
.plate-grid[data-density="list"] .plate-portrait[data-frame]::before,
.plate-grid[data-density="list"] .plate-portrait[data-frame]::after {
  display: none !important;
}