/* Ornament: the .illum frame on chapter cards and parchment sheets.
   ornament.js injects one aria-hidden .illum__deco as the first child of each .illum and adds
   .illum--narrow to cards under 520 px wide.
   .illum isolates its own stacking, so the deco (z -1) paints above the card background and
   below all content; pointer-events are off, so buttons and inputs always get the click. */

/* :where keeps specificity at zero, so chapter and sheet layout rules (position, sticky, absolute) still win. */
:where(.illum) {
  position: relative;
  isolation: isolate;
}

.illum__deco {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: -1;
  pointer-events: none;
  color: var(--gold, #b8955a);
}

/* Outer rule: 1.5px gilt ring. v22 perf: the foil gradient is a border-image (it paints only the border band), not a
   gradient background cut to a ring by a mask, so a card repaint needs no mask pass. Same gradient over the same
   border box; the only difference is the 2px corner rounding of a 1.5px line, which border-image drops. */
.illum__rule {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  top: 10px; right: 10px; bottom: 10px; left: 10px; inset: 10px;
  border: 1.5px solid transparent;
  border-image: var(--foil-grad, linear-gradient(135deg, #8c6a3a 0%, #d9bf8a 35%, #b8955a 55%, #f3e6c4 75%, #8c6a3a 100%)) 1;
  opacity: .9;
}

/* Inner hairline: gold-lo at 0.6, 4px inside the outer rule. */
.illum__hair {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  top: 14px; right: 14px; bottom: 14px; left: 14px; inset: 14px;
  border: 1px solid rgba(140, 106, 58, .6);
  border-radius: 2px;
}

/* Sheen: a light band on the outer rule only (mask keeps the border ring, not the interior).
   Animated by background-position from ornament.js (WAAPI, once per visit). */
.illum__sheen {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  top: 10px; right: 10px; bottom: 10px; left: 10px; inset: 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  background-image: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  background-position: 100% 0;
  mix-blend-mode: screen;
  mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) content-box;
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) content-box;
  -webkit-mask-composite: xor;
}

/* Corner fleurons: the glyph points into the corner, so each corner rotates it. Soft shadow for depth. */
.illum__fl {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: .9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.illum__fl--tl { top: 3px; left: 3px; }
.illum__fl--tr { top: 3px; right: 3px; transform: rotate(90deg); }
.illum__fl--br { bottom: 3px; right: 3px; transform: rotate(180deg); }
.illum__fl--bl { bottom: 3px; left: 3px; transform: rotate(270deg); }

/* Narrow cards (under 520 px): double rule pulled in to 6 px, smaller fleurons. */
.illum--narrow .illum__rule,
.illum--narrow .illum__sheen { top: 6px; right: 6px; bottom: 6px; left: 6px; inset: 6px; }
.illum--narrow .illum__hair { top: 10px; right: 10px; bottom: 10px; left: 10px; inset: 10px; }
.illum--narrow .illum__fl { width: 18px; height: 18px; }

/* v22 perf: the sheen exists only while it sweeps (ornament.js adds .is-on for the 1.6 s animation). At rest its band
   is off the ring, so hiding it changes nothing visible, and the card carries no blend group or mask between sweeps. */
.illum__sheen:not(.is-on) { display: none; }

/* Still mode: no sweep at all. */
html.still .illum__sheen { display: none; }