/* Trimmed + scoped scroll styles (generated from ancestral.css): demo-page globals
   (body, .eyebrow, .stage, masthead, shelf) removed and :root tokens scoped to .scroll
   so nothing bleeds into the host site. Loaded statically by LoremasterScroll.astro;
   its id (ancestral-css) makes the engine skip its own bleeding injection. */
/* ancestral.css — optional; the engine already injects these styles. Link this only if you want to edit/override them. */
  /* ============================================================
     ANCESTRAL — design tokens
     ============================================================ */
  .scroll{
    --void:        #0c0a09;   /* warm near-black desk */
    --void-deep:   #060505;
    --ink:         #241a12;   /* sepia ink on parchment */
    --ink-soft:    #4a3826;
    --parch-hi:    #e0c88c;   /* lit parchment   (lighter tint of base) */
    --parch-mid:   #c1a462;   /* base scroll hue */
    --parch-lo:    #9c8048;   /* shadowed parchment (darker shade) */
    --burn:        #5b3a1d;   /* scorched edge */
    --burn-deep:   #25160b;
    --ox:          #7a1f1a;   /* oxblood wax */
    --ox-hi:       #a8392f;
    --gilt:        #c79a4a;   /* old gold, used with restraint */
    --gilt-soft:   #8d6c34;

    --rod:         #3a2a1b;   /* finial / dowel wood */
    --rod-hi:      #6b4f31;
    --rod-lo:      #1c130b;

    --shadow:      0 30px 60px -20px rgba(0,0,0,.85);

    /* type system */
    --font-title:   "Cinzel Decorative", "Cinzel", serif;   /* hero wordmark / main title (700, 900) */
    --font-display: "Cinzel", serif;                          /* headings, nav, badges, numbers, buttons (400–600) */
    --font-body:    "EB Garamond", Georgia, serif;           /* prose / reading text (400, 500, italic 400) */
  }

  /* paper styles — per-scroll palette overrides (default = aged) */
  .scroll[data-paper="vellum"]{    --parch-hi:#f4ead0; --parch-mid:#e6d6ad; --parch-lo:#c9b483; --ink:#3a2c18; --ink-soft:#5c4a30; --burn:#6b4a26; --burn-deep:#3a2814; }
  .scroll[data-paper="sepia"]{     --parch-hi:#cba874; --parch-mid:#a5834e; --parch-lo:#7c5f34; --ink:#2a1c0e; --ink-soft:#4a3620; --burn:#4a2c12; --burn-deep:#1c1006; }
  .scroll[data-paper="ash"]{       --parch-hi:#cfc9bd; --parch-mid:#a8a294; --parch-lo:#807a6c; --ink:#262420; --ink-soft:#46433c; --burn:#3e3a30; --burn-deep:#1a1814; }
  .scroll[data-paper="bloodwrit"]{ --parch-hi:#e0c0a0; --parch-mid:#c09070; --parch-lo:#96603f; --ink:#2e120c; --ink-soft:#52281c; --burn:#6e1e12; --burn-deep:#300a06; }
  .scroll[data-paper="verdigris"]{ --parch-hi:#d0cf9e; --parch-mid:#a8ab77; --parch-lo:#7e824f; --ink:#232616; --ink-soft:#43492a; --burn:#3e5220; --burn-deep:#182008; }
  .scroll[data-paper="midnight"]{  --parch-hi:#3a3630; --parch-mid:#2a2620; --parch-lo:#171410; --ink:#e8dcc0; --ink-soft:#c2b48e; --burn:#b98a3e; --burn-deep:#0c0a07; }
  .scroll[data-paper="royal"]{     --parch-hi:#cdd2cf; --parch-mid:#a2acaa; --parch-lo:#778380; --ink:#1c2422; --ink-soft:#3a4644; --burn:#2e4a52; --burn-deep:#12181a; }
  .scroll[data-paper="papyrus"]{   --parch-hi:#ecd9a0; --parch-mid:#d4bb6e; --parch-lo:#a8904a; --ink:#3a2c12; --ink-soft:#5c4824; --burn:#7a5a24; --burn-deep:#382806; }
  .scroll[data-paper="charred"]{   --parch-hi:#b89a68; --parch-mid:#8f7040; --parch-lo:#5e4526; --ink:#1e1408; --ink-soft:#3c2c16; --burn:#431f0c; --burn-deep:#140a04; }
  .scroll[data-paper="bone"]{      --parch-hi:#f8f4e8; --parch-mid:#ece5d2; --parch-lo:#d0c6ac; --ink:#2e281c; --ink-soft:#524a38; --burn:#6a5a3c; --burn-deep:#3c3222; }

  
/* ============================================================
     SCROLL — structural shell (the engine paints into this)
     ============================================================ */
  .scroll{
    --w: 320px;          /* paper width  (overridden per scroll) */
    --rod-h: 30px;       /* finial thickness */
    --p: 0;              /* unroll progress 0..1, set by JS */
    position:relative;
    width:var(--w); max-width:100%;
    margin:0 auto;
    perspective:1400px;
    cursor:pointer;
    outline:none;
  }
  .scroll[data-lead="solo"]{ --w: 560px; }

  .scroll-inner{
    position:relative;
    transform-style:preserve-3d;            /* lets the bottom rod sit forward */
    filter: drop-shadow(0 22px 30px rgba(0,0,0,.6));
  }

  /* ---- rolled rod with ornate brass finials (used at top AND bottom) ---- */
  .rod{
    position:relative; z-index:5;
    width:calc(var(--w) + 100px);          /* finials overhang the paper */
    left:50%; transform:translateX(-50%);  /* symmetric overhang, true center */
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .rod .bar{                                /* the rolled parchment cylinder */
    flex:1 1 auto; position:relative;
    height:34px; margin:0 -12px;            /* tuck under the brass collars */
    border-radius:34px;
    background:
      linear-gradient(180deg,
        rgba(255,242,210,.55) 0%,
        var(--parch-hi) 16%,
        var(--parch-mid) 50%,
        var(--parch-lo) 82%,
        var(--burn-deep) 100%);
    box-shadow:
      inset 0 3px 5px rgba(255,238,205,.5),
      inset 0 -7px 12px rgba(0,0,0,.55),
      0 9px 18px rgba(0,0,0,.5);
  }
  .rod .bar::before{                        /* wound-paper seam highlight */
    content:""; position:absolute; left:7%; right:7%; top:28%; height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,245,215,.55), transparent);
    border-radius:2px;
  }
  /* bar materials (selected per rod design) */
  .rod .bar.bar-wood { background:linear-gradient(180deg,#8a6238,#6b4a2a 40%,#43301a 80%,#1c1006); }
  .rod .bar.bar-ebony{ background:linear-gradient(180deg,#473a31,#2a1f16 45%,#150e08 85%,#000); }
  .rod .bar.bar-iron { background:linear-gradient(180deg,#b6bcc6,#7c818c 45%,#3a3d44 82%,#14161a); }
  .rod .bar.bar-bone { background:linear-gradient(180deg,#f4ecd6,#ddcfa8 45%,#b6a576 82%,#6c5d3a); }
  .rod .bar.bar-gold { background:linear-gradient(180deg,#fff0b8,#e7c25a 45%,#a87f2c 82%,#4a370f); }

  /* destructive / wear overlays on the rod bars */
  .bar-dmg{ position:absolute; inset:0; border-radius:inherit; overflow:visible; pointer-events:none; z-index:1; }
  /* paper damage overlay — over the sheet, clipped to it */
  .sheet > .paper-dmg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:6; border-radius:inherit; }
  .pdmg-el{ position:absolute; pointer-events:none; }
  .pdmg-el.wet{ background:radial-gradient(circle at 50% 42%, rgba(72,46,20,.30), rgba(72,46,20,.15) 52%, rgba(96,62,26,.26) 72%, rgba(96,62,26,0) 82%); mix-blend-mode:multiply; }
  .pdmg-el.wither{ background:radial-gradient(circle, rgba(156,128,64,.36), rgba(126,100,48,.18) 56%, rgba(106,84,42,0) 80%); mix-blend-mode:multiply; }
  .pdmg-el.wither-spot{ background:radial-gradient(circle, rgba(74,56,26,.6), rgba(74,56,26,0) 72%); mix-blend-mode:multiply; }
  .pdmg-el.scorch{ background:radial-gradient(circle at 50% 50%, rgba(14,7,3,.93) 0%, rgba(44,22,8,.76) 26%, rgba(86,46,16,.5) 50%, rgba(122,70,30,.28) 70%, rgba(122,70,30,0) 84%); mix-blend-mode:multiply; }
  .pdmg-el.stain-black{ background:radial-gradient(circle, rgba(20,13,7,.8), rgba(20,13,7,.32) 56%, rgba(20,13,7,0) 78%); mix-blend-mode:multiply; }
  .pdmg-el.stain-red{ background:radial-gradient(circle, rgba(122,22,14,.74), rgba(96,18,11,.3) 56%, rgba(96,18,11,0) 78%); mix-blend-mode:multiply; }
  .pdmg-el.torn svg, .pdmg-el.splat svg, .pdmg-el.hole-rim svg{ display:block; }
  .pdmg-el.torn{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
  .pdmg-el.splat{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
  .dmg-el{ position:absolute; }
  .crk{ overflow:visible; }
  .crk .d{ fill:none; stroke:rgba(16,8,3,.92); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .crk .h{ fill:none; stroke:rgba(255,242,214,.35); stroke-width:.5; stroke-linecap:round; transform:translate(.6px,-.4px); }
  .scorch{ border-radius:50%; background:radial-gradient(closest-side,#120904 28%,#2c1408 50%,rgba(120,52,14,.45) 70%,transparent 88%); }
  .ember{ border-radius:50%; background:#ffb24a; box-shadow:0 0 4px 1px rgba(255,140,40,.85); }
  .rot{ border-radius:50%; background:radial-gradient(closest-side,rgba(28,26,16,.72) 35%,rgba(58,64,38,.5) 60%,transparent 85%); }
  .hole{ border-radius:50%; background:radial-gradient(closest-side,#0a0704 56%,#261d14 74%,rgba(255,240,210,.32) 82%,transparent 92%); }
  .rust{ border-radius:50%; background:radial-gradient(closest-side,#5e2f0e 26%,#8a4a18 48%,#b06a26 66%,rgba(150,80,30,.25) 84%,transparent 92%); }
  .pit{ border-radius:50%; background:#2a160a; }
  .gouge{ background:linear-gradient(180deg,transparent,rgba(14,7,3,.92) 18%,rgba(14,7,3,.92) 82%,transparent); box-shadow:1px 0 0 rgba(255,240,210,.25); border-radius:2px; }
  .blood{ border-radius:50%; background:radial-gradient(closest-side,#2c0506 32%,#560a0c 52%,#7a1416 68%,rgba(90,12,14,.3) 84%,transparent 92%); }
  .blood-drip{ background:linear-gradient(180deg,#560a0c,#3a0708 70%,transparent); border-radius:0 0 3px 3px; }
  .bar.dmg-burn{ filter:brightness(.92) contrast(1.05); }
  .bar.dmg-wither{ filter:saturate(.5) brightness(.84); }
  .bar.dmg-corrode{ filter:contrast(1.06); }
  .rod .cap{ flex:0 0 auto; width:62px; height:46px; z-index:2;
    filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
  .rod .cap.left{ transform:scaleX(-1); }

  /* curl shadow: top rod casts down onto the sheet, bottom rod casts up */
  .rod-top .bar::after, .rod-bottom .bar::after{
    content:""; position:absolute; left:5%; right:5%; height:13px;
    filter:blur(2px); border-radius:50%;
  }
  .rod-top .bar::after{ bottom:-11px; background:linear-gradient(180deg, rgba(0,0,0,.3), transparent); }
  .rod-bottom .bar::after{ top:-11px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.3)); }

  /* viewport that the paper reveals through */
  .paper-window{
    position:relative; z-index:2;
    width:var(--w); margin:-6px auto 0;
    height:0;                              /* set by JS = revealed length */
    overflow:hidden;
    will-change:height;
  }

  /* the parchment sheet itself (full content height) */
  .sheet{
    position:relative;
    width:100%;
    padding:26px 30px 40px;
    color:var(--ink);
    font-size:1.02rem; line-height:1.66;
    background:
      radial-gradient(140% 120% at 50% 0%, var(--parch-hi) 0%, var(--parch-mid) 52%, var(--parch-lo) 100%);
    background-blend-mode:multiply;
  }
  .sheet::before{                          /* procedural fibre / grain */
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:var(--parchment-image, none);
    background-size:cover; background-position:center;
    mix-blend-mode:multiply; opacity:var(--parchment-image-opacity, .6);
    filter:url(#parch-grain);
  }
  .sheet::after{                           /* burnt vignette + edge scorch */
    content:""; position:absolute; inset:0; pointer-events:none;
    box-shadow:
      inset 0 0 30px rgba(91,58,29,.55),
      inset 0 0 90px rgba(37,22,11,.55);
    background:
      linear-gradient(90deg, rgba(37,22,11,.5), transparent 6%, transparent 94%, rgba(37,22,11,.5)),
      linear-gradient(180deg, rgba(37,22,11,.45), transparent 8%);
  }
  .sheet > *{ position:relative; z-index:1; }

  /* content typography inside a scroll */
  .sheet .kicker{
    font-family:"IM Fell English SC", serif; letter-spacing:.26em;
    text-transform:uppercase; font-size:.66rem; color:var(--ox);
    margin:0 0 6px; display:flex; align-items:center; gap:10px;
  }
  .sheet .kicker .num{
    font-family:var(--font-display); font-weight:600; color:var(--burn);
    font-size:.8rem; letter-spacing:.05em;
  }
  .sheet h2{
    font-family:var(--font-display); font-weight:600; letter-spacing:.04em;
    font-size:1.5rem; line-height:1.1; margin:.1rem 0 .5rem; color:var(--ink);
  }
  .sheet h2.big{ font-family:var(--font-title); font-weight:700; font-size:2.2rem; letter-spacing:.12em; text-align:center; }
  .sheet p{ margin:.55rem 0; font-family:var(--font-body); }
  .sheet p.lead{ font-style:italic; color:var(--ink-soft); text-align:center; }
  .sheet .divider{
    width:60%; height:1px; margin:16px auto;
    background:linear-gradient(90deg, transparent, var(--burn), transparent);
  }
  .sheet ul.index{ list-style:none; margin:.6rem 0 0; padding:0;
    columns:2; column-gap:26px; font-size:.94rem; }
  .sheet ul.index li{ padding:3px 0; border-bottom:1px dotted rgba(74,56,38,.4); break-inside:avoid; }

  /* image plate — an illustration aged INTO the parchment, not pasted on it */
  .plate{
    position:relative; margin:14px -8px 6px;
    /* reusable soft-edge mask, shared by the image and the grain overlay */
    --feather-mask:
      linear-gradient(to right,  transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  }
  .plate img, .plate svg{
    display:block; width:100%; height:auto; border-radius:2px;
    position:relative; z-index:0;
    mix-blend-mode:multiply;                 /* lets fibre + tone bleed through */
    transition:filter .35s ease;
    /* each option fills its own slot, so dark + tone + torn all stack */
    filter: var(--fx-dark, ) var(--fx-tone, ) var(--fx-deckle, );
  }
  .plate::after{                              /* foxing / sepia wash over the image */
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:2px;
    box-shadow: inset 0 0 26px rgba(91,58,29,.6), inset 0 0 70px rgba(37,22,11,.45);
    background:
      radial-gradient(120% 100% at 70% 20%, transparent 40%, rgba(37,22,11,.28)),
      linear-gradient(0deg, rgba(91,58,29,.16), transparent 30%);
  }
  .plate-cap{
    text-align:center; font-family:"IM Fell English SC", serif;
    letter-spacing:.2em; text-transform:uppercase; font-size:.6rem;
    color:var(--ink-soft); margin-top:8px;
  }

  /* full = the image is already a finished aged page: mount it clean */
  .plate.full img, .plate.full svg{ mix-blend-mode:normal; }
  .plate.full::after{                        /* only a faint seat, no sepia wash */
    box-shadow: inset 0 0 34px rgba(37,22,11,.3);
    background:none;
  }
  .sheet.mounted{ padding:10px; }            /* thin parchment frame around the plate */
  .sheet.mounted .plate{ margin:6px; }
  .sheet.mounted .kicker{ padding:4px 6px 0; }

  /* ===== image blend options — each independent, all stackable ===== */

  /* DARK — deepen + multiply the image into the moody background */
  .plate.dark img, .plate.dark svg{ mix-blend-mode:multiply; --fx-dark: brightness(.7) contrast(1.08) saturate(.9); }
  .plate.dark::after{                        /* heavy vignette, candlelit-from-center */
    box-shadow: inset 0 0 60px rgba(4,3,2,.7), inset 0 0 130px rgba(8,5,4,.6);
    background:
      radial-gradient(120% 100% at 50% 32%, transparent 28%, rgba(6,5,4,.6)),
      linear-gradient(180deg, rgba(6,5,4,.3), transparent 22%, transparent 78%, rgba(6,5,4,.4));
  }

  /* AGED TONE — pull the image's whites toward cream and blacks toward warm-dark */
  .plate.toned img, .plate.toned svg{ --fx-tone: sepia(.42) saturate(.82) contrast(.9) brightness(1.05); }
  .plate.toned::before{                      /* warm colour wash keyed to the scroll hue */
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:2px;
    background:var(--parch-mid); mix-blend-mode:soft-light; opacity:.35;
  }

  /* PAPER GRAIN — lay the scroll's own fibre noise over the image */
  .plate .grain{ position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:2px; opacity:0; }
  .plate.grainy .grain{ filter:url(#parch-grain); opacity:.42; mix-blend-mode:multiply; }

  /* TORN EDGE — wobble the rectangular edge into ragged deckle paper */
  .plate.torn img, .plate.torn svg{ --fx-deckle: url(#deckle); }

  /* SOFT EDGES — dissolve the image and every overlay into the parchment */
  .plate.feather img, .plate.feather svg,
  .plate.feather::after,
  .plate.feather.toned::before,
  .plate.feather.grainy .grain{
    -webkit-mask: var(--feather-mask);
    -webkit-mask-composite: source-in;       /* intersect: all four edges fade */
    mask: var(--feather-mask);
    mask-composite: intersect;
  }

  /* live blend toggle that sits under an image (doesn't open/close the scroll) */
  .plate-controls{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
  .blend-toggle{
    font-family:"IM Fell English SC", serif; letter-spacing:.16em;
    text-transform:uppercase; font-size:.6rem; color:var(--ink-soft);
    background:rgba(255,240,210,.45); border:1px solid rgba(74,56,38,.45);
    border-radius:3px; padding:5px 12px; cursor:pointer; transition:all .2s ease;
  }
  .blend-toggle:hover{ background:rgba(255,240,210,.7); }
  .blend-toggle[aria-pressed="true"]{
    background:var(--ink); color:var(--parch-hi); border-color:var(--burn-deep);
  }
  .blend-toggle:focus-visible{ outline:2px solid var(--gilt); outline-offset:2px; }

  /* bottom rod travels down as the scroll unrolls (see .rod above) */
  .rod-bottom{ position:relative; z-index:4; will-change:transform; }

  /* wax seal — polished oxblood wax, centred on the closed bundle, cracks when opened.
     Appended last inside .scroll-inner so it paints on top in the preserve-3d stack. */
  .seal{
    position:absolute; z-index:7; left:50%; top:calc(50% - 2px);
    width:66px; height:66px; transform:translate(-50%,-50%);
    pointer-events:none;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.55));
  }
  .seal .half{
    position:absolute; top:0; width:50%; height:100%; overflow:hidden;
    transition:transform .6s cubic-bezier(.34,1.2,.5,1), opacity .5s ease;
  }
  .seal .half.l{ left:0; }
  .seal .half.r{ right:0; }
  .seal .blob{
    position:absolute; top:0; width:66px; height:66px;
    border-radius:49% 51% 47% 53% / 52% 47% 53% 48%;     /* organic wax splat */
    background:
      radial-gradient(ellipse 120% 70% at 50% -6%, rgba(255,175,150,.26), rgba(255,175,150,0) 40%),  /* top lip sheen */
      radial-gradient(circle at 50% 46%, #5f110e, #560f0d 58%, #400b09 84%, #280606 100%);            /* matte wax lip */
    box-shadow:
      inset 0 3px 4px rgba(255,175,155,.3),     /* raised lip catches light on top */
      inset 0 -9px 14px rgba(0,0,0,.5),          /* lip falls into shadow at base */
      inset 0 0 0 1px rgba(0,0,0,.3);
  }
  .seal .half.l .blob{ left:0; }
  .seal .half.r .blob{ right:0; }
  /* recessed inner face — the stamp impression. Shaded OPPOSITE a ball (dark top / lit bottom) so it reads concave */
  .seal .face{
    position:absolute; top:10px; width:46px; height:46px; border-radius:50%;
    background:
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 44%, rgba(255,146,120,0) 76%, rgba(255,146,120,.24) 100%), /* curved inner wall */
      radial-gradient(circle at 50% 80%, #63150f 0%, #430d0b 52%, #2c0807 88%, #230606 100%);                                /* concave field, lit low */
    box-shadow:
      0 0 0 2px rgba(255,184,159,.22),          /* bright lip inner edge (the step down) */
      inset 0 7px 11px rgba(0,0,0,.6),           /* deepens the concave top */
      inset 0 0 0 1px rgba(0,0,0,.4);
  }
  .seal .half.l .face{ left:10px; }
  .seal .half.r .face{ left:-23px; }
  .seal .sigil{
    position:absolute; inset:0; display:grid; place-items:center;
    font-family:"Cinzel", serif; font-weight:700; font-size:1.4rem; line-height:1;
    color:#220605;                                       /* emblem pressed into the recess */
    text-shadow: 0 -1.5px 1px rgba(0,0,0,.62), 0 1px 0 rgba(255,165,145,.3);
  }
  .seal .half.l .sigil{ width:200%; }
  .seal .half.r .sigil{ width:200%; right:0; left:auto; }
  /* cracked state */
  .scroll.is-open .seal .half.l{ transform:translateX(-44px) rotate(-22deg); opacity:0; }
  .scroll.is-open .seal .half.r{ transform:translateX(44px) rotate(22deg); opacity:0; }
  /* on (re)build, snap to the current open/closed state without replaying the break */
  .scroll.booting .seal .half{ transition:none !important; }
  .scroll.booting .seal-flash{ animation:none !important; }

  /* sigil sweep — a light circles from 12 o'clock then vanishes, just before the break */
  @property --sweep{ syntax:'<angle>'; inherits:true; initial-value:0deg; }
  .seal-flash{ position:absolute; inset:10px; border-radius:50%; pointer-events:none; opacity:0; z-index:9; --sweep:0deg; }
  .seal-flash .trail{
    position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(from -90deg, rgba(255,224,150,.95), rgba(255,190,90,.18) var(--sweep), transparent var(--sweep));
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
            mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
    filter:drop-shadow(0 0 3px rgba(255,190,90,.8));
  }
  .seal-flash .glint{ position:absolute; inset:0; transform:rotate(var(--sweep)); }
  .seal-flash .glint::before{
    content:""; position:absolute; top:-3px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%;
    background:#fff8e0; box-shadow:0 0 8px 3px rgba(255,228,155,.95), 0 0 16px 7px rgba(255,175,70,.55);
  }
  .seal.flashing .seal-flash{ animation:sealSweep .5s ease-out forwards; }
  @keyframes sealSweep{
    0%{ opacity:0; --sweep:0deg; }
    12%{ opacity:1; }
    88%{ opacity:1; }
    100%{ opacity:0; --sweep:360deg; }
  }
  @media (prefers-reduced-motion: reduce){ .seal-flash{ display:none; } }

  .scroll:focus-visible .scroll-inner{
    outline:2px solid var(--gilt); outline-offset:8px; border-radius:6px;
  }

  /* close (fade-out) button, on the paper top-right — only while fully open */
  .scroll-close{
    position:absolute; top:9px; right:11px; z-index:8;
    width:26px; height:26px; padding:0; border:0; cursor:pointer;
    background:rgba(50,24,12,.14); border-radius:50%;
    display:grid; place-items:center;
    opacity:0; pointer-events:none;
    transition:opacity .18s ease-out, background .2s ease;
  }
  .scroll.is-full .scroll-close{ opacity:.32; pointer-events:auto; }
  .scroll.is-full .scroll-close:hover{ opacity:.95; background:rgba(70,26,16,.34); }
  .scroll-close svg{ width:14px; height:14px; display:block; }
  .scroll-close svg path{ stroke:#3a1810; stroke-width:2.4; stroke-linecap:round; fill:none; }
  .editing .scroll-close{ display:none; }        /* runtime close hidden while editing; use the delete handle */
  /* editing delete handle — sits above the drag shield so it is always clickable */
  .scroll .del-handle{
    position:absolute; top:50px; right:10px; z-index:64;
    width:26px; height:26px; padding:0; border:0; cursor:pointer;
    background:rgba(70,22,14,.55); border-radius:50%;
    display:grid; place-items:center;
    opacity:0; pointer-events:none;
    transition:opacity .18s ease-out, background .15s ease;
  }
  .scroll.is-full .del-handle{ opacity:.75; pointer-events:auto; }
  .scroll.is-full .del-handle:hover{ opacity:1; background:rgba(128,32,22,.75); }
  .scroll .del-handle svg{ width:13px; height:13px; display:block; }
  .scroll .del-handle svg path{ stroke:#f2ddd0; stroke-width:2.6; stroke-linecap:round; fill:none; }
  .scroll-cap{
    text-align:center; margin-top:18px;
    font-family:"IM Fell English SC", serif; letter-spacing:.16em;
    text-transform:uppercase; font-size:.64rem; color:#6f5838;
  }
  .scroll-cap b{ color:var(--gilt-soft); font-weight:400; }

  @media (max-width:640px){
    .scroll[data-lead="solo"]{ --w: 100%; }
    .sheet ul.index{ columns:1; }
    .rod{ width:calc(var(--w) + 64px); }
    .rod .cap{ width:50px; height:38px; }
  }

  @media (prefers-reduced-motion: reduce){
    .seal .half{ transition:none; }
  }