/* shared ribbon menu, extracted from the book (index.html) */
/* ===== silver ribbon menu ===== */
.ribbon { position: fixed; top: 0; left: 3.2vw; z-index: 8; width: 46px; cursor: pointer; filter: drop-shadow(2px 6px 6px rgba(0,0,0,.5)); }
.ribbon .band { position: relative; width: 46px; height: 120px; transition: height .9s cubic-bezier(.4,1.4,.5,1);
  background: linear-gradient(90deg, #7d8495 0%, #e8ebf2 22%, #b4bac8 45%, #f4f6fa 62%, #8e95a6 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 18px), 0 100%); }
.ribbon .band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px); }
.ribbon .lbl { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); writing-mode: vertical-rl; font: italic 600 19px 'EB Garamond', serif; color: #2e2842; letter-spacing: .14em; }
.ribbon:hover .band { height: 136px; }
.ribbon.open .band { height: 420px; }
.menu { position: fixed; top: 0; left: 0; bottom: 0; width: min(420px, 40vw); padding: 70px 0 0 calc(3.2vw + 110px); z-index: 7; background: linear-gradient(90deg, rgba(18,15,28,.96) 60%, rgba(18,15,28,0)); box-sizing: border-box; opacity: 0; transform: translateX(-10px); pointer-events: none; transition: opacity .6s .25s, transform .6s .25s; }
.ribbon.open + .menu { opacity: 1; transform: none; pointer-events: auto; }
.menu a { display: block; font: italic 500 26px/1 'EB Garamond', serif; color: #e6e9f2; text-decoration: none; padding: 12px 4px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.menu a small { display: block; font: normal 500 12px/1.4 'EB Garamond'; letter-spacing: .2em; text-transform: uppercase; color: #9aa1b8; margin-top: 4px; }
.menu a:hover { color: #fff; }
.menu a:hover::before { content: "\2726  "; color: #c9cfdc; font-size: 14px; }
/* ===== image ribbon (?ribbon=1..3) ===== */
.ribbon .band { display: none !important; }
.ribbon { width: 58px; height: 230px; overflow: visible; }
.ribbon.open { height: 600px; }
.ribbon .rib { position: absolute; top: 0; left: 0; width: 58px; height: 230px; overflow: hidden; transition: height 1s cubic-bezier(.35,1.35,.45,1); transform-origin: 50% 0; }
.ribbon .rib img { position: absolute; left: 0; bottom: 0; width: 100%; }
.ribbon .rib img { top: auto; }
.ribbon .rib .sheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%) 0 -300% / 100% 300% no-repeat; mix-blend-mode: screen; animation: sheen 6s ease-in-out 2s infinite; }
@keyframes sheen { 0%, 70% { background-position: 0 -300%; } 100% { background-position: 0 300%; } }
.ribbon:hover .rib { height: 256px; }
.ribbon.open .rib { height: 520px; }
@keyframes sway { 50% { transform: rotate(1.2deg); } }
.ribbon .lbl { display: none; }
.ribbon .tip { position: absolute; left: 58px; top: 150px; font: italic 500 16px 'EB Garamond', serif; color: #c9cfdc; opacity: 0; white-space: nowrap; transition: opacity .5s; }
.ribbon:hover .tip { opacity: .9; }
.ribbon.open .tip { opacity: 0; }
/* ===== choose your charm (inside the ribbon menu) ===== */
.charms { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(201,207,220,.25); width: 300px; }
.charms .t { font: normal 500 12px/1.4 'EB Garamond'; letter-spacing: .2em; text-transform: uppercase; color: #9aa1b8; margin: 0 0 12px; }
.charms .row { display: grid; grid-template-columns: repeat(4, 58px); gap: 10px; }
.charms button { width: 58px; height: 70px; overflow: hidden; border-radius: 10px; border: 1px solid rgba(201,207,220,.2); background: rgba(255,255,255,.04); cursor: pointer; display: grid; place-items: center; padding: 4px; transition: border-color .3s, background .3s, transform .3s; }
.charms button img { width: auto; height: auto; max-width: 50px; max-height: 60px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.charms button:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); }
.charms button[aria-pressed="true"] { border-color: #dfe4ee; background: rgba(226,234,250,.12); box-shadow: 0 0 16px rgba(226,234,250,.25); }
.charms .nm { margin-top: 10px; font: italic 500 16px 'Cormorant Garamond', 'EB Garamond', serif; color: #d4d8e8; min-height: 1.3em; }
.ribbon .rib img { transition: opacity .35s; }
/* charm ribbon v2: one ribbon, charms hung from the same point; image is 440 wide with the 240-wide ribbon centred, ribbon end at y=2000 */
.ribbon { width: 72px !important; }
.ribbon .rib { --end: 160px; width: 154px !important; left: -41px !important; height: 0 !important; overflow: visible !important; --end: 150px; transition: none !important; }
.ribbon .rib img { top: calc(var(--end) - 529px) !important; bottom: auto !important; width: 154px !important; transition: top 1s cubic-bezier(.35,1.35,.45,1), opacity .35s !important; }
.ribbon:hover .rib { --end: 182px; }
.ribbon { height: 300px !important; }
.ribbon.open { height: 600px !important; }
.ribbon.open .rib { --end: 400px; }
.ribbon .rib .sheen { display: none; }
/* menu panel: solid enough to read over busy paintings */
.menu { background: linear-gradient(90deg, #120f1c 0%, #120f1c 62%, rgba(18,15,28,.85) 74%, rgba(18,15,28,.4) 88%, rgba(18,15,28,0) 100%) !important; width: min(640px, 55vw) !important;
  }