/* 04 My king: a love-story scrapbook. Three polaroids fan out of a stack as the section arrives (flat
   rotations only) with washi tape, handwritten captions, doodles drawn in, a lipstick kiss and a
   date-night ticket. 05 The book: her book in 3D rises off a launch-night pedestal under spotlights
   and paparazzi flashes, in front of a step-and-repeat wall, with sticky notes, the back-cover line
   and a pink title ribbon to close. */
.king, .book { --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive; overflow: hidden; }

/* ---------------- 04 My king */
.king { display: grid; grid-template-columns: minmax(300px, 0.74fr) 1.3fr; align-items: center; gap: clamp(20px, 3vw, 56px); min-height: 100vh; min-height: 100svh; padding: clamp(100px, 12vh, 140px) var(--pad) clamp(28px, 4vh, 48px);
  background: linear-gradient(var(--bg), rgba(11, 6, 8, 0) 14%, rgba(11, 6, 8, 0) 86%, var(--bg)), radial-gradient(80% 70% at 68% 48%, #44102a 0%, #220a15 46%, var(--bg) 80%); }
.kg-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.kg-glow { position: absolute; left: 64%; top: 48%; width: 76vmin; height: 76vmin; margin: -38vmin 0 0 -38vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 46, 136, 0.38), rgba(255, 46, 136, 0.09) 45%, transparent 70%); animation: kg-breathe 7s ease-in-out infinite; }
@keyframes kg-breathe { 50% { transform: scale(1.12); opacity: 0.75; } }
.kg-giant { position: absolute; left: 0; top: 50%; margin: 0; white-space: nowrap; font: 400 clamp(150px, 21vw, 340px) / 0.8 var(--display); letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 150, 190, 0.26); transform: translate3d(var(--gx, 2vw), -50%, 0); will-change: transform; }
.kg-giant em { font: italic 400 0.86em/1 var(--serif); -webkit-text-stroke-color: rgba(255, 46, 136, 0.34); }

.kg-copy { position: relative; z-index: 40; }
.kg-copy::before { content: ""; position: absolute; inset: -80px -100px -70px -90px; z-index: -1; background: radial-gradient(closest-side, rgba(11, 6, 8, 0.86), rgba(11, 6, 8, 0.55) 60%, rgba(11, 6, 8, 0)); pointer-events: none; }
.kg-title { margin: 16px 0 20px -0.03em; font-size: clamp(66px, 8vw, 132px); }
.kg-sign { position: relative; display: inline-block; margin: 30px 0 0; font: 700 clamp(36px, 3.1vw, 48px) / 1 var(--hand); color: var(--blush); }
.js .kg-sign.rv.in { transform: rotate(-3deg); }
.kg-sign svg { position: absolute; left: -4%; width: 108%; bottom: -18px; height: 20px; overflow: visible; }
.kg-sign path { fill: none; stroke: var(--hot); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.js .kg-sign path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease) 0.7s; }
.js .kg-sign.in path { stroke-dashoffset: 0; }
.kg-link { margin: 40px 0 0; }

/* the scrapbook */
.kg-board { position: relative; z-index: 10; height: clamp(580px, 82vh, 800px); }
.kg-pol { --x: 0%; --y: 0%; --w: 36%; --r: 0deg; container-type: inline-size; position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; padding: 12px 12px 62px; border-radius: 3px; color: var(--ink-dark); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(165deg, #fffdfa 0%, #f7f1eb 58%, #ede3da 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 36px 64px -28px rgba(0, 0, 0, 0.95), 0 14px 24px -14px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--r)); transform-origin: 50% 45%; will-change: transform; transition: box-shadow 0.5s var(--ease); }
.kg-pol:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 50px 80px -30px rgba(0, 0, 0, 0.95), 0 0 60px -16px rgba(255, 46, 136, 0.55); }
.kg-pol.is-drag { cursor: grabbing; }
.kg-p1 { --x: 0%; --y: 47%; --w: 35%; --r: -7deg; z-index: 2; }
.kg-p2 { --x: 27%; --y: 1%; --w: 40%; --r: 2.5deg; z-index: 1; }
.kg-p3 { --x: 62%; --y: 35%; --w: 36%; --r: 6deg; z-index: 3; }
.kg-shot { position: relative; display: block; overflow: hidden; border-radius: 2px; background: #1a0d13; }
.kg-shot img { width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.kg-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 0 22px rgba(0, 0, 0, 0.22); background: linear-gradient(125deg, rgba(255, 255, 255, 0.2), transparent 26%, transparent 74%, rgba(255, 200, 225, 0.1)); }
.kg-pol figcaption { position: absolute; left: 18px; right: 18px; bottom: 13px; font: 700 clamp(25px, 2.3vw, 34px) / 1 var(--hand); color: #2c0f1c; white-space: nowrap; }
.kg-pol figcaption span { color: var(--hot); }
.kg-p2 figcaption { text-align: center; }
.kg-p2 .kg-tape { left: 86%; top: -6px; width: 34%; --tr: 36deg; }

/* washi tape */
.kg-tape { position: absolute; z-index: 2; top: -16px; left: 50%; width: 40%; max-width: 124px; height: 30px; transform: translateX(-50%) rotate(var(--tr, -4deg)); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); opacity: 0.94;
  clip-path: polygon(0 10%, 4% 0, 96% 0, 100% 12%, 97% 30%, 100% 50%, 97% 70%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 3% 70%, 0 50%, 3% 30%); }
.tp-dots { background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1.6px, transparent 2.2px) 0 0 / 9px 9px, linear-gradient(rgba(255, 128, 178, 0.9), rgba(255, 104, 160, 0.9)); }
.tp-gold { background: repeating-linear-gradient(-45deg, rgba(233, 195, 138, 0.95) 0 6px, rgba(255, 244, 222, 0.92) 6px 12px); }
.tp-plum { background: repeating-linear-gradient(90deg, rgba(74, 15, 38, 0.92) 0 9px, rgba(255, 190, 215, 0.92) 9px 11px); }

/* doodles (drawn in as the polaroids fan out: --draw 1 → 0) */
.kg-crown, .kg-stars, .kg-scribble, .kg-arrow { position: absolute; z-index: 3; overflow: visible; pointer-events: none; }
.kg-crown path, .kg-stars path, .kg-scribble path, .kg-arrow path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: var(--draw, 0); }
.kg-crown { left: calc(2px + 30cqw); top: calc(10px - 11cqw); width: 26cqw; filter: drop-shadow(0 0 6px rgba(255, 207, 110, 0.6)); }
.kg-crown path { stroke: #ffcf6e; stroke-width: 5; }
.kg-crown circle { fill: #ffcf6e; opacity: calc(1 - var(--draw, 0)); }
.kg-mk { position: absolute; z-index: 3; left: calc(14px + 2cqw); top: calc(14px + 6cqw); font: 700 9.5cqw/1 var(--hand); color: var(--hot); transform: rotate(-9deg); text-shadow: 0 0 2px #fff, 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 255, 255, 0.5); opacity: calc(1 - var(--draw, 0)); pointer-events: none; }
.kg-arrow { left: calc(12px + 17cqw); top: calc(6px - 1cqw); width: 13cqw; }
.kg-arrow path { stroke: var(--hot); stroke-width: 4; filter: drop-shadow(0 0 3px #fff); }
.kg-stars { right: -12cqw; bottom: 4cqw; width: 26cqw; }
.kg-stars path { stroke: var(--gold); stroke-width: 2.6; }
.kg-scribble { right: -11cqw; top: -10cqw; width: 28cqw; }
.kg-scribble path { stroke: var(--hot); stroke-width: 3.4; }

/* ticket and kiss */
.kg-ticket { position: absolute; z-index: 5; left: 33%; top: 81%; display: flex; height: 76px; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.6));
  transform: translateY(calc(var(--drift, 0) * -40px)) rotate(-6deg) scale(calc((0.6 + 0.4 * var(--pop, 1)) * var(--tks, 1))); opacity: var(--pop, 1); }
.kg-ticket > span { background: linear-gradient(160deg, #fbe7c6, #e9c38a); }
.kg-tk-l { display: grid; place-items: center; width: 54px; font-size: 24px; color: var(--hot); border-radius: 7px 0 0 7px; border-right: 2px dashed rgba(110, 50, 30, 0.35);
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 100% 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat; }
.kg-tk-r { display: flex; flex-direction: column; justify-content: center; padding: 10px 22px 10px 18px; border-radius: 0 7px 7px 0; box-shadow: inset 0 0 0 4px rgba(255, 250, 240, 0.35);
  -webkit-mask: radial-gradient(circle at 0 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat; }
.kg-tk-r small { font: 700 9.5px/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: #8a3a52; }
.kg-tk-r b { margin-top: 7px; font: 400 27px/1 var(--display); color: #2c0f1c; white-space: nowrap; }
.kg-kiss { position: absolute; z-index: 4; left: 20%; top: 81%; width: clamp(80px, 7.4vw, 116px); transform: translateY(calc(var(--drift, 0) * -90px)) rotate(-14deg) scale(calc(0.4 + 0.6 * var(--pop, 1))); opacity: calc(0.92 * var(--pop, 1)); }
/* ---------------- 05 The book */
.book { display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-rows: auto 1fr auto; grid-template-areas: "stage head" "stage body" "strip strip"; column-gap: clamp(24px, 4vw, 72px); padding: clamp(16px, 2.5vh, 30px) var(--pad) 0;
  background: linear-gradient(var(--bg), rgba(11, 6, 8, 0) 12%, rgba(11, 6, 8, 0) 80%, var(--bg)), radial-gradient(60% 70% at 26% 46%, #3e0c25 0%, #1d0911 50%, var(--bg) 82%); }
.bk-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bk-wall { position: absolute; left: -6%; right: 46%; top: -6%; bottom: -30%; display: flex; flex-direction: column; gap: 26px; will-change: transform;
  -webkit-mask: radial-gradient(ellipse 60% 52% at 50% 42%, #000 20%, rgba(0, 0, 0, 0.35) 62%, transparent 82%); mask: radial-gradient(ellipse 60% 52% at 50% 42%, #000 20%, rgba(0, 0, 0, 0.35) 62%, transparent 82%); }
.bk-wall div { display: flex; align-items: center; gap: 34px; white-space: nowrap; font: 400 30px/1 var(--display); color: rgba(255, 214, 228, 0.13); }
.bk-wall div:nth-child(even) { margin-left: -120px; }
.bk-wall em { font: italic 400 0.86em/1 var(--serif); color: rgba(255, 46, 136, 0.28); }
.bk-wall i { font-style: normal; font-size: 0.5em; color: rgba(233, 195, 138, 0.3); }
.bk-beam { position: absolute; top: -16%; left: 26%; width: 44vw; height: 120%; margin-left: -22vw; transform-origin: 50% 0; mix-blend-mode: screen; filter: blur(6px); animation: bk-sweep 10s ease-in-out infinite alternate;
  background: conic-gradient(from 180deg at 50% 0, transparent 0 171deg, rgba(255, 214, 228, 0.14) 176deg, rgba(255, 255, 255, 0.2) 180deg, rgba(255, 214, 228, 0.14) 184deg, transparent 189deg); }
.bb1 { --a: -26deg; --b: -4deg; }
.bb2 { --a: 18deg; --b: -6deg; animation-duration: 12s; }
.bb3 { --a: 4deg; --b: 30deg; animation-duration: 14s; opacity: 0.6; left: 40%; }
@keyframes bk-sweep { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }

.bk-head { grid-area: head; position: relative; z-index: 40; align-self: end; padding-top: clamp(60px, 12vh, 120px); }
.bk-title { margin: 16px 0 16px -0.02em; font-size: clamp(50px, 5.4vw, 92px); text-wrap: balance; }
.bk-title em { display: inline-block; }
.bk-by { margin: 0; font: 500 11.5px/1.4 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.bk-by i { font-style: normal; color: var(--hot); letter-spacing: 0; margin: 0 6px; }

.bk-stage { grid-area: stage; position: relative; height: clamp(600px, 90vh, 820px); }
.bk-halo { position: absolute; left: 50%; top: 44%; width: min(64vh, 620px); height: min(64vh, 620px); margin: calc(min(64vh, 620px) / -2) 0 0 calc(min(64vh, 620px) / -2); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 46, 136, 0.5), rgba(255, 46, 136, 0.14) 42%, transparent 68%); animation: kg-breathe 6s ease-in-out infinite; }
.bk-book { --bh: min(64vh, 580px); position: absolute; z-index: 8; left: 50%; top: 44%; height: var(--bh); aspect-ratio: 1000 / 1635; transform: translate(-50%, -50%); will-change: transform; }
.bk-book [data-prop] { inset: 0; }
.bk-flat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px 6px 6px 2px; box-shadow: -6px 0 0 #e9e3da, 0 50px 80px -30px #000, 0 0 90px -20px rgba(255, 46, 136, 0.6); transition: opacity 0.4s; }
.book.has-3d .bk-flat { opacity: 0; }
.bk-pedestal { position: absolute; z-index: 6; left: 50%; top: calc(44% + min(32vh, 290px) + 6px); width: min(30vw, 400px); height: 86px; margin-left: calc(min(30vw, 400px) / -2); border-radius: 0 0 50% 50% / 0 0 26px 26px; pointer-events: none;
  background: linear-gradient(90deg, #120709, #2a0e1b 30%, #3a1426 50%, #2a0e1b 70%, #120709); box-shadow: 0 40px 70px -20px #000; }
.bk-pedestal i { position: absolute; left: 0; right: 0; top: -26px; height: 52px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #2b1019, #0c0508 70%); box-shadow: inset 0 0 0 1.5px rgba(255, 140, 190, 0.55), inset 0 -10px 20px rgba(255, 46, 136, 0.25), 0 0 40px -6px rgba(255, 46, 136, 0.6); }
.bk-pedestal::after { content: ""; position: absolute; left: 6%; right: 6%; top: 24px; height: 2px; background: linear-gradient(90deg, transparent, rgba(233, 195, 138, 0.7), transparent); }
.bk-rope { position: absolute; z-index: 20; left: 50%; bottom: 0; width: min(50vw, 660px); transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.55)); }

.bk-note { position: absolute; z-index: 45; margin: 0; padding: 12px 18px 14px; font: 700 clamp(22px, 1.9vw, 30px) / 1 var(--hand); color: #2a0e1a; white-space: nowrap; transform: rotate(var(--r)); pointer-events: none;
  background: linear-gradient(170deg, #ffe6f0, #ffc6da); box-shadow: 0 20px 30px -16px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.25); border-radius: 2px; }
.bk-note::before { content: ""; position: absolute; left: 50%; top: -11px; width: 58px; height: 20px; margin-left: -29px; background: rgba(255, 255, 255, 0.55); transform: rotate(-3deg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.bk-note span { color: var(--hot); }
.bn1 { --r: -6deg; left: 2%; top: 6%; }
.bn2 { --r: 5deg; right: 2%; top: 20%; background: linear-gradient(170deg, #fff6dc, #f6dfae); }
.bn3 { --r: 4deg; left: 0; top: 58%; background: linear-gradient(170deg, #ffffff, #efe8e2); }
.bn4 { --r: -4deg; right: 0; top: 64%; color: #fff; background: linear-gradient(170deg, #ff5a9d, #e8136a); }
.bn4 span { color: #fff; }
.bk-body { grid-area: body; position: relative; z-index: 40; padding-bottom: 30px; }
.bk-body::before { content: ""; position: absolute; inset: -60px -80px -20px -80px; z-index: -1; background: radial-gradient(closest-side, rgba(11, 6, 8, 0.7), rgba(11, 6, 8, 0)); pointer-events: none; }
.bk-quote { position: relative; margin: clamp(26px, 4vh, 44px) 0 26px; padding-top: 50px; }
.bk-quote::before { content: "\201C"; position: absolute; left: -6px; top: -26px; font: 400 150px/1 var(--display); color: var(--hot); text-shadow: 0 0 40px rgba(255, 46, 136, 0.5); }
.bk-quote p { margin: 0; max-width: 22ch; font: italic 400 clamp(28px, 2.5vw, 42px) / 1.14 var(--serif); color: var(--ink); text-wrap: balance; }
.bk-quote mark { color: inherit; background: linear-gradient(100deg, rgba(255, 46, 136, 0) 0.4%, rgba(255, 46, 136, 0.55) 2%, rgba(255, 46, 136, 0.42) 96%, rgba(255, 46, 136, 0)) 0 88% / 100% 40% no-repeat; padding: 0 2px; }
.js .bk-quote mark { background-size: 0 40%; transition: background-size 1.2s var(--ease) 0.6s; }
.js .bk-quote.in mark { background-size: 100% 40%; }
.bk-quote footer { margin-top: 14px; font: 500 10.5px/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); }
.bk-auth { display: flex; align-items: center; gap: 20px; margin: 30px 0 32px; }
.bk-auth-ph { display: flex; flex: none; padding-left: 4px; }
.bk-auth-ph img { width: 70px; height: 88px; object-fit: cover; border-radius: 10px; box-shadow: 0 16px 26px -12px #000, 0 0 0 2px #140a0e, 0 0 0 3px rgba(255, 255, 255, 0.22); transition: transform 0.6s var(--ease); }
.bk-auth-ph img + img { margin-left: -16px; }
.bk-auth-ph img:nth-child(1) { transform: rotate(-7deg) translateY(4px); }
.bk-auth-ph img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-4px); }
.bk-auth-ph img:nth-child(3) { transform: rotate(7deg) translateY(4px); }
.bk-auth:hover .bk-auth-ph img:nth-child(1) { transform: rotate(-8deg) translate(-10px, 2px); }
.bk-auth:hover .bk-auth-ph img:nth-child(3) { transform: rotate(8deg) translate(10px, 2px); }
.bk-auth p { margin: 0; font: 700 30px/1 var(--hand); color: var(--blush); }
.bk-auth p span { display: block; margin-top: 8px; font: 500 10.5px/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.bk-cta { margin: 0; }

/* the closing title ribbon */
.bk-strip { grid-area: strip; position: relative; z-index: 36; height: clamp(150px, 12.5vw, 190px); margin: 0 calc(var(--pad) * -1); pointer-events: none; }
.bk-ribbon { position: absolute; z-index: 2; left: -6%; right: -6%; top: 42%; overflow: hidden; padding: 15px 0 13px; transform: translateY(-50%) rotate(-2deg); background: linear-gradient(90deg, #ff2e88, #ff73ad 50%, #ff2e88); box-shadow: 0 18px 34px -16px rgba(255, 46, 136, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(120, 0, 50, 0.35); }
.bk-ribbon-track { display: flex; width: max-content; will-change: transform; }
.bk-grp { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font: 400 clamp(26px, 2.6vw, 42px) / 1 var(--display); color: #19060e; }
.bk-grp i { font-style: normal; font-size: 0.55em; }
/* ---------------- smaller laptops: a smaller ticket keeps clear of the "On the road" caption */
@media (min-width: 821px) and (max-width: 1360px) { .kg-ticket { --tks: 0.86; } }

/* ---------------- phones and narrow screens */
@media (max-width: 820px) {
  .king { display: block; min-height: 0; padding: 96px var(--pad) 36px; }
  .kg-giant { top: 150px; font-size: 42vw; }
  .kg-copy::before { inset: -40px -30px -40px -30px; }
  .kg-title { font-size: clamp(62px, 19vw, 96px); margin: 12px 0 14px; }
  .kg-sign { margin-top: 22px; font-size: 38px; }
  .kg-link { margin-top: 32px; }
  .kg-board { height: min(176vw, 720px); margin-top: 34px; }
  .kg-pol { padding: 9px 9px 46px; }
  .kg-pol figcaption { left: 12px; bottom: 10px; font-size: 25px; }
  .kg-tape { top: -12px; height: 24px; }
  .kg-p1 { --x: 0%; --y: 51.5%; --w: 50%; --r: -6deg; }
  .kg-p2 { --x: 17%; --y: 3%; --w: 60%; --r: 2.5deg; }
  .kg-p3 { --x: 49%; --y: 57%; --w: 51%; --r: 6deg; }
  .kg-ticket { left: 3%; top: 86.5%; height: 62px; }
  .kg-tk-l { width: 44px; font-size: 20px; }
  .kg-tk-r { padding: 8px 16px 8px 14px; }
  .kg-tk-r b { font-size: 22px; }
  .kg-kiss { left: 57%; top: 37%; width: 66px; }

  .book { display: flex; flex-direction: column; padding: 48px var(--pad) 0; }
  .bk-head { order: 1; padding-top: 0; }
  .bk-title { font-size: clamp(44px, 12.5vw, 64px); }
  .bk-stage { order: 2; height: min(132vw, 560px); margin-top: 6px; }
  .bk-body { order: 3; }
  .bk-strip { order: 4; height: 132px; }
  .bk-wall { left: -30%; right: -30%; }
  .bk-wall div { font-size: 22px; gap: 22px; }
  .bk-beam { width: 90vw; margin-left: -45vw; left: 50%; }
  .bk-halo { --hs: min(96vw, 420px); width: var(--hs); height: var(--hs); margin: calc(var(--hs) / -2) 0 0 calc(var(--hs) / -2); top: 44%; }
  .bk-book { --bh: min(84vw, 360px); top: 43%; }
  .bk-pedestal { top: calc(43% + min(42vw, 180px) + 4px); width: min(64vw, 280px); margin-left: calc(min(64vw, 280px) / -2); height: 60px; border-radius: 0 0 50% 50% / 0 0 18px 18px; }
  .bk-pedestal i { top: -18px; height: 36px; }
  .bk-pedestal::after { top: 16px; }
  .bk-rope { width: 96vw; }
  .bk-note { font-size: 20px; padding: 9px 12px 10px; }
  .bk-note::before { width: 40px; margin-left: -20px; height: 16px; top: -9px; }
  .bn1 { left: -1%; top: 3%; }
  .bn2 { right: -1%; top: 14%; }
  .bn3 { left: -2%; top: 53%; }
  .bn4 { right: -2%; top: 81%; }
  .bk-quote { padding-top: 40px; }
  .bk-quote::before { font-size: 120px; top: -22px; }
  .bk-quote p { font-size: clamp(27px, 7.6vw, 34px); }
  .bk-ribbon { padding: 11px 0 10px; }
  .bk-grp { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .kg-glow, .bk-halo, .bk-beam { animation: none; }
  .js .kg-sign path { transition: none; stroke-dashoffset: 0; }
  .js .bk-quote mark { transition: none; background-size: 100% 40%; }
}