/* J.P. Presents - Liquid Glass text box (the "Text Box Liquid Glass Template"): title bar with neon arrows, secondary
   title bar, body panel, blog meta row. Same glass contract as the header/menu/tab: clear tinted body, 1.5 px bevelled
   refracting rim, white black-stroked type. Laser + liquid intro, flipboard title, neon arrows, mouse light: jp-glass-box.js.
   Needs jp-liquid-glass.css for the shared tokens (--accent, --accent-2, --jp-tint, fonts); has fallbacks for standalone use. */

/* v8 (Duane, 16 Oct 00:55 - "For pages like At Worlds End, the glass panel and font are not able to be seen. Adjust the glass with a
   frost and a slight blur."): desktops blur the page behind the glass a little (5 px) - v7 had taken the blur off them completely, and
   the busy damask read straight through the panels. Phones keep each rule's own, stronger radius. Every backdrop blur in the site's
   stylesheets reads var(--jp-bblur, <its own radius>); desktops set the variable to 5px, phones leave it unset (initial). Phone = the
   site's html[data-device="phone"], a window up to 760 px wide, or a touch screen up to 500 px tall (a phone on its side). The glass also
   gets a frost (--jp-frost: a milky layer over the blurred page) and a soft inner highlight (--jp-frost-hi: a lit top edge, a fine rim,
   a glow just inside the edge). The pieces drawn as clear glass (THE WORD / HAUS tabs, the rolodex rails and caps) keep their own .6 px;
   the logo's own lens (--jp-blur) is the artwork, not a panel, and is unchanged. */
:root { --jp-bblur: 5px;
  --jp-frost: linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.1) 42%, rgba(255,255,255,.08) 100%);
  --jp-frost-hi: inset 0 1px 0 rgba(255,255,255,.46), inset 0 0 0 1px rgba(255,255,255,.13), inset 0 0 26px rgba(255,255,255,.09); }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { :root { --jp-bblur: initial; } }
html[data-device="phone"] { --jp-bblur: initial; }
.jp-box {
  --box-w: 60%;                                   /* the template: "this entire setup always spans the 60% field of all web pages" */
  --box-r: 18px;                                  /* outer corner radius */
  --box-tint: var(--jp-tint, #ffd2d6);            /* the glass tint (the page style's) */
  --box-accent: var(--accent, #e5202d);           /* laser, neon arrows, lights: the page's colourway */
  --box-accent-2: var(--accent-2, #ffb347);
  --box-glow: color-mix(in srgb, var(--box-accent) 70%, #fff);
  --box-fg: #fff;                                 /* headings: white with a black stroke, they read on anything */
  --box-text: #fff; --box-text-dim: rgba(255,255,255,.84); --box-text-shadow: 0 1px 2px rgba(0,0,0,.55);   /* body + meta type: swapped by data-on */
  position: relative; width: var(--box-w); max-width: 100%; margin-inline: auto; box-sizing: border-box; color: var(--box-fg);
  font-family: var(--font-body, "Manrope", system-ui, sans-serif); isolation: isolate;
}
html[data-device="phone"] .jp-box { --box-w: calc(100% - 28px); }
html[data-device="phone"] .jp-pill { min-width: 128px; }
.jp-box[data-on="light"] { --box-text: #121318; --box-text-dim: rgba(18,19,24,.84); --box-text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.jp-box[data-on="light"] h2, .jp-box[data-on="light"] h3, .jp-box[data-on="light"] .jp-box__floor { color: #121318; -webkit-text-stroke: 1px rgba(255,255,255,.7); text-shadow: 0 1px 0 rgba(255,255,255,.6); }   /* headings flip too: dark with a white stroke */   /* a light backdrop: dark type (jp-glass-box.js sets data-on from what is behind the panel) */

/* ---------- the glass surfaces (body, title bar, secondary bar) ---------- */
.jp-glass { position: relative; border-radius: var(--r, var(--box-r)); isolation: isolate;
  background: var(--jp-frost), linear-gradient(180deg, color-mix(in srgb, var(--box-tint) 16.5%, transparent) 0%, color-mix(in srgb, var(--box-tint) 6%, transparent) 38%, color-mix(in srgb, #000 10%, transparent) 100%);   /* v8: the frost over the template's top-lit gradient body, translucent */
  -webkit-backdrop-filter: blur(var(--jp-bblur, 7.5px)) saturate(1.3) brightness(1.04); backdrop-filter: blur(var(--jp-bblur, 7.5px)) saturate(1.3) brightness(1.04);
  box-shadow: var(--jp-frost-hi), 0 14px 40px rgba(0,0,0,.35); }
.jp-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;            /* the 1.5 px bevelled rim */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  -webkit-backdrop-filter: brightness(1.6) contrast(1.2) saturate(1.5); backdrop-filter: brightness(1.6) contrast(1.2) saturate(1.5);
  background: linear-gradient(160deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.3) 28%, rgba(255,255,255,.1) 50%, rgba(0,0,0,.3) 72%, rgba(255,255,255,.45) 100%); }
.jp-glass::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 1.5px; height: 34%; border-radius: inherit; pointer-events: none; z-index: 1;   /* a sheen along the top edge of each bar - edge to edge, so it reads as light, not as a panel inside */
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 60%, transparent); opacity: var(--band, 1); }

/* ---------- layout ---------- */
.jp-box__frame { --r: var(--box-r); --band: 0; padding: 10px; display: grid; gap: 10px; overflow: hidden; }   /* no bright band on the frame: nothing shows behind the title and secondary bars */
.jp-box__title { --r: calc(var(--box-r) - 6px); --band: 1; display: block; padding: 10px 18px 26px; min-height: 52px; overflow: hidden; }   /* room below the type for the reflective floor (one row, whatever the title's length) */
.jp-box__sub   { --r: calc(var(--box-r) - 6px); --band: .7; padding: 10px 18px 12px; }
.jp-box__body  { --r: calc(var(--box-r) - 6px); --band: 0; padding: 18px 20px 20px; min-height: 160px; font-size: 17px; line-height: 1.5; color: var(--box-text); text-shadow: var(--box-text-shadow); }
.jp-box__body > :first-child { margin-top: 0; } .jp-box__body > :last-child { margin-bottom: 0; }
.jp-box__body img, .jp-box__body video { max-width: 100%; border-radius: 10px; display: block; }
.jp-box__frame > * { position: relative; z-index: 1; }

/* type: white with a black stroke (reads on any background), display face for titles */
.jp-box h2, .jp-box h3, .jp-box__floor { margin: 0; font-family: var(--font-display, "Chakra Petch", sans-serif); text-transform: uppercase; letter-spacing: .04em; color: var(--box-fg); -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.jp-box h2, .jp-box__floor { font-size: 24px; line-height: 1.5; font-weight: 700; position: relative; display: block; white-space: normal; padding-right: 2.8em; }
.jp-box__floor { padding-right: 0; }   /* one size on every device; a long title wraps to the next row (room on the right for the arrows). Depth for the flips is in each card's own transform */   /* room on the right for the parked arrows; depth for the flips */
.jp-box h3 { font-size: clamp(16px, 1.8vw, 22px); font-weight: 700; }
.jp-box__sub p { margin: 2px 0 0; font-size: 12.5px; color: var(--box-text-dim); text-shadow: var(--box-text-shadow); }

/* flipboard title: each letter is a split-flap card that flips (rotates on its horizontal axis) as the arrows pass */
.jp-word { display: inline-block; white-space: nowrap; }                                                              /* a word's cards stay together on one row */
/* each letter is a split-flap card: an outlined dark card with the hinge line across its middle */
.jp-flip { display: inline-block; position: relative; transform-origin: 50% 50%; width: .92em; padding: 0; margin: 0 .04em; text-align: center; border-radius: .12em; box-sizing: border-box; overflow: hidden; letter-spacing: 0;   /* every card the same width: rows line up block to block, like a grid */
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0 50%, rgba(0,0,0,.58) 50% 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.45); }
.jp-flip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.7); box-shadow: 0 1px 0 rgba(255,255,255,.08); pointer-events: none; }   /* the split between the two flaps */
.jp-flip.is-space { background: linear-gradient(180deg, rgba(0,0,0,.12) 0 50%, rgba(0,0,0,.18) 50% 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }   /* a space is a blank card: the outline stays, for the look */
.jp-flip.is-space::after { background: rgba(0,0,0,.35); box-shadow: none; }
.jp-flip.is-blank { visibility: hidden; }
.jp-box[data-on="light"] .jp-flip { background: linear-gradient(180deg, rgba(255,255,255,.55) 0 50%, rgba(255,255,255,.4) 50% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2); }
.jp-box[data-on="light"] .jp-flip::after { background: rgba(0,0,0,.35); }
.jp-box[data-on="light"] .jp-flip.is-space { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); }

/* the reflective floor: a mirror copy of the letters and arrows hangs below the baseline, flipped, fading away from the floor line */
.jp-box__floor { position: absolute; pointer-events: none; margin-top: 1px; padding-right: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 45%, transparent 80%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 45%, transparent 80%); }   /* a one-row window under the title (placed by the JS); each card and the arrows are mirrored on their own */
.jp-box__floor-in { position: absolute; left: 0; top: 0; display: block; white-space: normal; padding-right: 2.8em; }                                  /* the full copy, lifted so its last row shows in the window */
.jp-box__floor .jp-flip, .jp-box__floor .jp-neon { transform: scaleY(-1); }
.jp-box__floor .jp-neon path { filter: none; animation: none; opacity: .8; }                                                    /* the reflection of the arrows is a plain soft copy: no per-frame glow filters in the mirror */
.jp-box h2::after { content: ""; position: absolute; left: -18px; right: -18px; top: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45) 20%, rgba(255,255,255,.45) 80%, transparent); pointer-events: none; }   /* the floor line */
.jp-box[data-on="light"] h2::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.25) 20%, rgba(0,0,0,.25) 80%, transparent); }

/* neon arrows (decoration): three chevrons in the page's accent, lit in sequence like the neon clip; they run along the title as it flips in,
   stop after the last character, and run again every 7 s (jp-glass-box.js) */
.jp-neon { position: absolute; top: 0; left: 0; height: 1.1em; width: 2.6em; transform: translate(0, 0); pointer-events: none; z-index: 3; opacity: 0; }   /* placed by the JS: x along the row, y at the row's middle */
.jp-neon.is-on { opacity: 1; }
.jp-box__title { contain: paint; }                                                              /* the arrows fly off inside the bar */
.jp-neon svg { width: 100%; height: 100%; overflow: visible; display: block; }
.jp-neon path { fill: none; stroke: var(--box-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px var(--box-accent)) drop-shadow(0 0 6px var(--box-accent)) drop-shadow(0 0 14px color-mix(in srgb, var(--box-accent) 60%, transparent));
  animation: jp-neon-chase 1.1s ease-in-out infinite; animation-delay: calc(var(--k) * -.3s); }
.jp-neon .core { stroke: #fff; stroke-width: .9; filter: none; mix-blend-mode: screen; }
@keyframes jp-neon-chase { 0%, 100% { opacity: .35; } 28% { opacity: 1; } 56% { opacity: .55; } }

/* blog meta row: posted UTC + viewer local (24 h), 8-digit date, live views, source app logo */
.jp-box__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 6px 18px; padding: 10px 18px 12px; font: 600 11.5px/1.4 var(--font-display, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--box-text-dim); text-shadow: var(--box-text-shadow); }   /* the posted details centred... */
.jp-box__meta b { color: var(--box-text); font-weight: 700; }
.jp-box__meta .jp-box__src { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }          /* ...and the "from" details centred on their own line */
.jp-src-logo { --brand: var(--box-accent); display: inline-block; width: 22px; height: 22px; flex: none; background: currentColor; color: var(--box-text);   /* the logo, the size of the old placeholder: a silhouette pressed into the glass... */
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; opacity: .3; cursor: default;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 -1px 1px rgba(0,0,0,.6)); transition: opacity .25s, color .25s, filter .25s; }
.jp-box[data-on="light"] .jp-src-logo { filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 -1px 1px rgba(0,0,0,.35)); }
/* the Jammin' Products Presents logo is its own artwork, not a silhouette: the red logo on a dark backdrop, the blue logo on a light one, pressed into the glass at rest, lit on hover */
.jp-src-logo[data-platform="jammin"] { -webkit-mask: none; mask: none; background: var(--logo-dark) center / contain no-repeat; opacity: .78; --brand: #f00000;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.45)) drop-shadow(0 -1px 1px rgba(0,0,0,.55)) saturate(.85); }
.jp-box[data-on="light"] .jp-src-logo[data-platform="jammin"] { background-image: var(--logo-light); --brand: #0000f0; filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)) drop-shadow(0 -1px 1px rgba(0,0,0,.3)) saturate(.85); }
.jp-src-logo[data-platform="jammin"]:hover, .jp-src-logo[data-platform="jammin"]:focus-visible { opacity: 1; filter: saturate(1.15) drop-shadow(0 0 4px var(--brand)) drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 60%, transparent)); }
a.jp-src-logo { cursor: pointer; }
.jp-src-logo:hover, .jp-src-logo:focus-visible { color: var(--brand); opacity: 1; filter: drop-shadow(0 0 4px var(--brand)) drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 60%, transparent)); outline: none; animation: jp-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; }   /* ...that lights up in its brand colour */
.jp-box__src a:not(.jp-src-logo) { color: inherit; text-decoration: none; } .jp-box__src a:not(.jp-src-logo):hover { text-decoration: underline; }
.jp-box__meta .jp-stat { white-space: nowrap; }
.jp-box__body .jp-media { display: grid; gap: 10px; margin: 0 0 14px; } .jp-box__body .jp-media img, .jp-box__body .jp-media video { width: 100%; }

/* ---------- the social panel (the Subscribe-and-bell clip): a glass bar like the others, its buttons spaced evenly and centred ---------- */
.jp-box__social { --r: calc(var(--box-r) - 6px); --band: .6; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 14px 18px; }   /* the Subscribe pill and the bell: centred in the panel at every size */
.jp-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 164px; height: 46px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent;
  font: 500 17px/1 var(--font-body, "Manrope", system-ui, sans-serif); letter-spacing: .01em; text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.06) 50%, rgba(255,255,255,.1));                       /* the clip's clear grey glass */
  box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.62), inset 0 0 14px rgba(255,255,255,.2), inset 0 -8px 14px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(var(--jp-bblur, 8px)) saturate(1.2); backdrop-filter: blur(var(--jp-bblur, 8px)) saturate(1.2); }
.jp-pill::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;                                      /* the light sweeping through the glass, as in the clip */
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.26) 45%, rgba(255,255,255,.06) 52%, transparent 64%); background-size: 260% 100%; animation: jp-sweep 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.jp-pill::after { content: ""; position: absolute; left: 10%; right: 10%; top: 1px; height: 46%; border-radius: inherit; pointer-events: none; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent); }
.jp-pill__txt { display: inline-block; }
@media (hover: hover) { .jp-pill:hover .jp-pill__txt { animation: jp-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; font-weight: 700; } } .jp-pill:focus-visible .jp-pill__txt { animation: jp-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; font-weight: 700; }   /* the word beats, bold, only under the mouse */
.jp-pill { --brand: var(--box-accent); --brand-2: var(--box-accent-2); transition: background .25s, box-shadow .25s, color .25s; }
@media (hover: hover) { .jp-pill:hover, .jp-pill:focus-visible, .jp-box[data-on="light"] .jp-pill:hover, .jp-box[data-on="light"] .jp-pill:focus-visible { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45);                                                                    /* under the mouse: the platform's colour, its second colour glowing behind */
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, #fff), var(--brand) 55%, color-mix(in srgb, var(--brand) 80%, #000));
  box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.75), inset 0 0 14px rgba(255,255,255,.25), inset 0 -8px 14px rgba(0,0,0,.2), 0 0 18px color-mix(in srgb, var(--brand-2) 85%, transparent), 0 0 42px color-mix(in srgb, var(--brand-2) 55%, transparent), 0 6px 16px rgba(0,0,0,.35); } }
@media (hover: hover) { .jp-pill--bell:hover .jp-pill__txt, .jp-box[data-on="light"] .jp-pill--bell:hover .jp-pill__txt { background: #fff; } }
.jp-pill:focus-visible { outline: none; box-shadow: inset 0 0 0 1.6px #fff, inset 0 0 14px rgba(255,255,255,.3), 0 6px 16px rgba(0,0,0,.35); }
.jp-pill--bell { min-width: 46px; width: 46px; padding: 0; }
.jp-pill--bell .jp-pill__txt { width: 20px; height: 21px; background: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));          /* the white bell */
  clip-path: polygon(50% 0, 60% 6%, 64% 14%, 78% 24%, 82% 62%, 100% 76%, 100% 84%, 62% 84%, 58% 100%, 42% 100%, 38% 84%, 0 84%, 0 76%, 18% 62%, 22% 24%, 36% 14%, 40% 6%); }
.jp-box[data-on="light"] .jp-pill { color: #121318; text-shadow: 0 1px 0 rgba(255,255,255,.5); background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.22) 50%, rgba(255,255,255,.3)); box-shadow: inset 0 0 0 1.2px rgba(0,0,0,.35), inset 0 0 14px rgba(255,255,255,.5), 0 6px 16px rgba(0,0,0,.18); }
.jp-box[data-on="light"] .jp-pill--bell .jp-pill__txt { background: #121318; }
@keyframes jp-sweep { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.jp-src-logo.is-beat { color: var(--brand); opacity: 1; animation: jp-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; }   /* v7: a finger held on it (site.js: the haptic on every beat) */
@media (prefers-reduced-motion: reduce) { .jp-src-logo.is-beat { animation: none; } }
@keyframes jp-beat {                                                                 /* THE WORD's lub-dub (0.86 s): swells 4% then 2.5% and flares */
  0% { scale: 1; filter: brightness(1); } 11% { scale: 1.04; filter: brightness(1.45); } 24% { scale: 1; filter: brightness(1); }
  34% { scale: 1.025; filter: brightness(1.25); } 50% { scale: 1; filter: brightness(1); } 100% { scale: 1; filter: brightness(1); } }

/* ---------- the play button (the close-up clip): a clear disc, dark smoky interior with drifting bands of refraction and their rainbow fringes, a bright chromatic rim, a white triangle ---------- */
.jp-box__actions { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 2px 8px 0; min-height: 48px; position: relative; --lvl: 0; }
.jp-disc { --d: 44px; --lvl: 0; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jp-disc__label { font: 600 12px/1.2 var(--font-display, sans-serif); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: opacity 1.2s; }
.jp-play__label { display: inline-flex; perspective: 300px; }
.jp-play__label i { display: inline-block; font-style: normal; opacity: 0; transform-origin: 50% 100%; }
.jp-play__label.is-rolling i { animation: jp-roll-in .42s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 42ms); }   /* the letters roll out one after another */
@keyframes jp-roll-in { 0% { opacity: 0; transform: rotateX(-100deg) translateY(.5em); } 60% { opacity: 1; transform: rotateX(18deg) translateY(0); } 100% { opacity: 1; transform: rotateX(0) translateY(0); } }
.jp-play__label.is-faded { opacity: 0 !important; transition: opacity 2.4s; pointer-events: none; }   /* after 17 s the line fades out; a mouse over the row rolls it out again */
.jp-disc__glass { position: relative; width: var(--d); height: var(--d); border-radius: 50%; flex: none; isolation: isolate; overflow: hidden; transform: scale(calc(1 + var(--lvl) * .14)); transition: transform .08s;
  background: radial-gradient(circle at 50% 50%, #4a4a50 0%, #2a2a30 60%, #141418 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.88), inset 0 0 6px 2px rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.45); }
/* the drifting bands, their fringes and the shine live in a wrapper that is clipped three ways (overflow, clip-path, mask): on iOS a rounded
   overflow clip alone lets blurred, blended or animated children paint outside the disc */
.jp-disc__in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; clip-path: circle(50% at 50% 50%); -webkit-mask-image: -webkit-radial-gradient(#fff, #000); pointer-events: none; }
.jp-disc__in::before { content: ""; position: absolute; inset: -30%; pointer-events: none; filter: blur(3px); opacity: .9;      /* the dark bands of refraction, drifting */
  background: radial-gradient(28% 55% at 30% 40%, rgba(0,0,0,.75), transparent 70%), radial-gradient(40% 30% at 72% 68%, rgba(0,0,0,.7), transparent 70%), radial-gradient(22% 40% at 60% 20%, rgba(0,0,0,.6), transparent 70%);
  animation: jp-disc-drift 9s ease-in-out infinite alternate; }
.jp-disc__in::after { content: ""; position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: screen; filter: blur(1.2px); opacity: .85;   /* their rainbow fringes */
  background: radial-gradient(28% 55% at 30% 40%, transparent 62%, rgba(255,90,40,.55) 68%, rgba(255,220,60,.4) 72%, rgba(60,200,255,.5) 78%, transparent 84%), radial-gradient(40% 30% at 72% 68%, transparent 62%, rgba(90,120,255,.55) 68%, rgba(255,120,60,.4) 74%, transparent 82%), radial-gradient(22% 40% at 60% 20%, transparent 60%, rgba(255,70,70,.45) 68%, rgba(80,220,255,.45) 76%, transparent 84%);
  animation: jp-disc-drift 9s ease-in-out infinite alternate; animation-delay: -.25s; }
.jp-disc__shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: calc(.6 + var(--lvl) * .4); overflow: hidden;   /* a third layer: specular highlights and a caustic sweeping through on their own clock */
  background: radial-gradient(18% 30% at 28% 26%, rgba(255,255,255,.55), transparent 70%), radial-gradient(40% 14% at 60% 78%, rgba(255,255,255,.28), transparent 70%);
  animation: jp-disc-shine 5.5s ease-in-out infinite alternate; }
.jp-disc__shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%; pointer-events: none; will-change: transform;   /* v12: the caustic is a band moved by a transform (composited), not a background re-painted every frame */
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.22) 46%, rgba(170,220,255,.18) 50%, transparent 60%); animation: jp-disc-caustic 7s linear infinite; }
@keyframes jp-disc-shine { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(-28deg) scale(1.12); } }
@keyframes jp-disc-caustic { from { transform: translateX(-100%); } to { transform: translateX(100%); } }   /* the band crosses left to right in 7 s, as v11's background did */
.jp-disc__in::after { animation-duration: 7s; animation-direction: alternate-reverse; }                                        /* the fringes drift on a different clock from the bands */
.jp-disc__rim { position: absolute; inset: 0; border-radius: 50%; padding: 2.5px; pointer-events: none; opacity: .7; z-index: 1;      /* the chromatic rim */
  background: conic-gradient(from 20deg, #ff3b3b, #ffb84d, #7dff8a, #4dc9ff, #b36bff, #ff3b3b); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: jp-disc-turn 14s linear infinite reverse; }
.jp-disc__glyph { position: absolute; left: 50%; top: 50%; width: 38%; height: 36%; translate: -50% -50%; background: #fff; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.jp-disc__glyph--play { clip-path: polygon(12% 0, 100% 50%, 12% 100%); left: 55%; }
.jp-disc__label { opacity: .85; text-shadow: var(--box-text-shadow); color: var(--box-text); white-space: nowrap; display: inline-block; }
@media (hover: hover) { .jp-play:hover ~ .jp-play__label, .jp-play__label:hover { animation: jp-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; } }                     /* the label beats with the disc under the mouse */
@media (hover: hover) { .jp-box__actions:has(.jp-play__label:hover) .jp-play { animation: jp-lvl-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; } }
.jp-disc:focus-visible { outline: none; }
.jp-disc.is-reading .jp-disc__glyph { animation: none; clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0); left: 50%; }   /* reading: the pause bars */
.jp-play.is-reading ~ .jp-play__label { opacity: 0 !important; transition: opacity .5s; }                                     /* not shown while a story plays */
.jp-play.is-reading .jp-disc__glass { filter: url(#jp-warp); }                                                                 /* the voice warps the disc */
.jp-disc.is-reading .jp-disc__glass { box-shadow: inset 0 0 0 2px rgba(255,255,255,.88), inset 0 -6px 12px rgba(0,0,0,.5), 0 0 calc(4px + var(--lvl) * 18px) rgba(255,255,255,.55), 0 4px 14px rgba(0,0,0,.45); }
/* the interior pulses with the button: --lvl is the beat (hover) or the voice (playing) - the bands swell and brighten, the rim and glyph with them */
@property --lvl { syntax: "<number>"; inherits: true; initial-value: 0; }
.jp-disc__in::before, .jp-disc__in::after { scale: calc(1 + var(--lvl) * .32); }
.jp-disc__in::before { filter: blur(3px) brightness(calc(1 + var(--lvl) * .5)); }
.jp-disc__in::after { opacity: calc(.85 + var(--lvl) * .15); filter: blur(calc(1.2px - var(--lvl) * .6px)) saturate(calc(1 + var(--lvl) * .8)); }
.jp-disc__rim { opacity: calc(.7 + var(--lvl) * .3); }
.jp-disc__glyph { scale: calc(1 + var(--lvl) * .14); }
@media (hover: hover) { .jp-disc:hover { animation: jp-lvl-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; } } .jp-disc:focus-visible { animation: jp-lvl-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; }                            /* the heartbeat drives --lvl, so everything inside moves with it */
@keyframes jp-lvl-beat { 0% { --lvl: 0; } 11% { --lvl: 1; } 24% { --lvl: 0; } 34% { --lvl: .6; } 50% { --lvl: 0; } 100% { --lvl: 0; } }
.jp-play:not(.is-reading):hover .jp-disc__glass, .jp-play:not(.is-reading):hover ~ .jp-play__label { filter: invert(1) hue-rotate(180deg); }   /* hover on the play button: the colourway inverts */
.jp-play.is-reading .jp-disc__glyph { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 calc(2px + var(--lvl) * 8px) rgba(255,255,255,.8)); }   /* playing: the pause bars, white... */
.jp-play.is-reading .jp-disc__glyph { transition: background .7s ease, filter .7s ease; }
.jp-play.is-reading:hover .jp-disc__glyph { background: #39ff88; filter: drop-shadow(0 0 3px #39ff88) drop-shadow(0 0 12px #15d862); }   /* ...and under the mouse the bars turn green, gradually */
.jp-play.is-reading:hover .jp-disc__glass { box-shadow: inset 0 0 0 2px rgba(255,255,255,.88), inset 0 0 8px 2px rgba(80,255,150,.45), inset 0 -6px 12px rgba(0,0,0,.5), 0 0 16px rgba(40,230,110,.6), 0 4px 14px rgba(0,0,0,.45); }
.jp-play.is-paused .jp-disc__glyph { clip-path: polygon(12% 0, 100% 50%, 12% 100%); left: 55%; }                                                                    /* paused: the triangle, press to resume */
.jp-disc__glyph--stop { clip-path: inset(6% round 12%); width: 32%; height: 32%; }
.jp-stop { margin-right: 2px; }
.jp-stop, .jp-stop:hover, .jp-stop:focus-visible { animation: none; }                                                                                           /* the stop button holds still */
.jp-stop:hover .jp-disc__glass { filter: invert(1) hue-rotate(180deg); }                                                                                       /* ...but under the mouse its colourway inverts like the play button's */
.jp-stop .jp-disc__glyph { scale: 1; background: #fff; filter: drop-shadow(0 0 2px rgba(255,74,74,.6)) drop-shadow(0 0 6px rgba(255,31,31,.5)); transition: background .7s ease, filter .7s ease; }   /* its square: white with a red halo... */
.jp-stop:hover .jp-disc__glyph { background: #ff2a2a; filter: drop-shadow(0 0 3px #ff4a4a) drop-shadow(0 0 12px #ff1f1f) drop-shadow(0 0 20px rgba(255,30,30,.7)); }   /* ...turning red, gradually, under the mouse */
.jp-stop:hover .jp-disc__glass { box-shadow: inset 0 0 0 2px rgba(255,255,255,.88), inset 0 0 8px 2px rgba(255,80,80,.45), inset 0 -6px 12px rgba(0,0,0,.5), 0 0 16px rgba(255,40,40,.65), 0 4px 14px rgba(0,0,0,.45); }
.jp-stop .jp-disc__in::before, .jp-stop .jp-disc__in::after, .jp-stop .jp-disc__rim { scale: 1; }
.jp-disc.is-hidden .jp-disc__glass { visibility: hidden; }
.jp-disc.jp-jelly .jp-disc__glass { animation: jp-jelly .6s cubic-bezier(.3, .1, .3, 1) both; }
.jp-drip { position: absolute; pointer-events: none; z-index: 3; filter: url(#jp-goo); }                                                                            /* the liquid between the two discs while they part or merge */
.jp-drip i { position: absolute; left: 0; top: 0; width: var(--d, 44px); height: var(--d, 44px); border-radius: 50%; transform-origin: 50% 50%; will-change: transform, filter; background: radial-gradient(circle at 40% 35%, #5a5a62 0%, #2a2a30 55%, #141418 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.88), inset 0 -6px 12px rgba(0,0,0,.5), inset 0 4px 8px rgba(255,255,255,.12); }
.jp-drip i.jp-drip__neck { left: 0; top: 18%; width: var(--d, 44px); height: 64%; border-radius: 50%; background: #2a2a30; box-shadow: none; }   /* the neck is solid liquid: no rim of its own */
/* clear glass: while the stop button is out, the discs lose their smoky colour and become clear glass - the backdrop shows through, only the rim and the glyph stay; the colours flow back when the drop rejoins */
.jp-disc .jp-disc__glass, .jp-disc .jp-disc__in::before, .jp-disc .jp-disc__in::after, .jp-disc .jp-disc__shine, .jp-disc .jp-disc__rim { transition: opacity .6s, background .6s, box-shadow .6s; }
.jp-disc.is-clear .jp-disc__glass { background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 55%, rgba(255,255,255,.12)); -webkit-backdrop-filter: blur(var(--jp-bblur, 6px)) saturate(1.2); backdrop-filter: blur(var(--jp-bblur, 6px)) saturate(1.2);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8), inset 0 0 10px rgba(255,255,255,.3), inset 0 -5px 10px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.3); }
.jp-disc.is-clear .jp-disc__in::before, .jp-disc.is-clear .jp-disc__in::after, .jp-disc.is-clear .jp-disc__shine { opacity: 0; }
.jp-disc.is-clear .jp-disc__rim { opacity: .35; }
/* on the move the liquid is clear glass with no colour at all: a body the shade of what is behind it (the goo needs solid shapes), a bevelled rim, a soft inner light */
.jp-drip.is-clear i { background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--box-tint) 14%, #2a282c), color-mix(in srgb, var(--box-tint) 10%, #141316) 70%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.78), inset 0 0 12px rgba(255,255,255,.22), inset 0 -4px 8px rgba(0,0,0,.25); }
.jp-box[data-on="light"] .jp-drip.is-clear i { background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--box-tint) 28%, #fbf9fa), color-mix(in srgb, var(--box-tint) 22%, #e9e5e8) 70%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.95), inset 0 0 12px rgba(255,255,255,.5), inset 0 -4px 8px rgba(0,0,0,.12); }
.jp-drip.is-clear i.jp-drip__neck { background: color-mix(in srgb, var(--box-tint) 10%, #1a191c); box-shadow: none; }
.jp-box[data-on="light"] .jp-drip.is-clear i.jp-drip__neck { background: color-mix(in srgb, var(--box-tint) 22%, #ece8eb); }
.jp-drip.is-clear i:not(.jp-drip__neck)::after { content: ""; position: absolute; left: 18%; top: 10%; width: 46%; height: 26%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent); }   /* the glass's catch-light */
.jp-disc.is-clear .jp-disc__rim { opacity: 0; }                                                                                    /* no colour anywhere while it moves back and forth */
.jp-disc.is-clear .jp-disc__glyph { filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.jp-play.is-reading.is-clear:hover .jp-disc__glyph { filter: drop-shadow(0 0 3px #39ff88) drop-shadow(0 0 12px #15d862); }
.jp-stop.is-clear:hover .jp-disc__glyph { filter: drop-shadow(0 0 3px #ff4a4a) drop-shadow(0 0 12px #ff1f1f); }
@keyframes jp-disc-turn { to { transform: rotate(360deg); } }
@keyframes jp-disc-drift { 0% { transform: translate(-6%, -4%) rotate(0deg) scale(1); } 50% { transform: translate(5%, 6%) rotate(40deg) scale(1.08); } 100% { transform: translate(-4%, 5%) rotate(85deg) scale(1); } }
.jp-reader-choice { --r: 14px; position: absolute; left: 12px; bottom: calc(100% + 8px); z-index: 6; padding: 12px 14px; display: grid; gap: 8px; font: 600 12px/1.3 var(--font-display, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #fff; -webkit-text-stroke: .6px #000; paint-order: stroke fill; }
.jp-reader-choice p { margin: 0 0 2px; opacity: .85; }
.jp-reader-choice__opt { border: 1.5px solid rgba(255,255,255,.6); background: rgba(0,0,0,.35); color: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.jp-reader-choice__opt:hover { background: rgba(255,255,255,.85); color: #000; -webkit-text-stroke: 0; }
.jp-box__actions { position: relative; }
@media (prefers-reduced-motion: reduce) { .jp-disc__in::before, .jp-disc__in::after, .jp-disc__rim, .jp-pill::before, .jp-disc:hover *, .jp-pill:hover *, .jp-src-logo:hover { animation: none; } }

/* ---------- each panel's own light: a screen-blended glow inside the frame that reacts to the mouse (mode per panel, see JS) ---------- */
/* v12: the light is a fixed picture carried by a transform (jp-glass-box.js writes only transform and opacity): nothing is painted while it moves */
.jp-box__frame > .jp-box__light, .jp-box__light { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: .55; transition: opacity .4s; contain: strict; }
.jp-box__spot { position: absolute; left: -260px; top: -260px; width: 520px; height: 520px; will-change: transform; transform: translate(50%, 50%);
  background: radial-gradient(circle 260px at 50% 50%, color-mix(in srgb, var(--box-accent) 70%, #fff) 0%, color-mix(in srgb, var(--box-accent) 45%, transparent) 30%, transparent 59%); }   /* the 220 px glow of v11, drawn once at 260 px */
.jp-box__spot--2 { opacity: 0; background: radial-gradient(circle 260px at 50% 50%, color-mix(in srgb, var(--box-accent-2) 70%, #fff) 0%, color-mix(in srgb, var(--box-accent-2) 45%, transparent) 30%, transparent 59%); }   /* pulse: the second accent, faded in and out over the first */
.jp-box__band { position: absolute; top: 0; bottom: 0; left: 0; width: 280px; will-change: transform; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--box-accent) 55%, #fff) 50%, transparent); }   /* sweep: the beam, 140 px either side */
.jp-box__win { position: absolute; left: 0; top: 0; width: 480px; height: 480px; will-change: transform; overflow: hidden; -webkit-mask: radial-gradient(circle 240px at 50% 50%, #000, transparent 100%); mask: radial-gradient(circle 240px at 50% 50%, #000, transparent 100%); }
.jp-box__ring { position: absolute; left: 0; top: 0; will-change: transform; border-radius: inherit; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--box-accent) 80%, #fff), inset 0 0 40px color-mix(in srgb, var(--box-accent) 40%, transparent); }   /* rim: the bevel ring, sized to the frame by the script */
.jp-box[data-light="rim"] .jp-box__light { background: none; }

/* ---------- intro (jp-glass-box.js): a laser shot across the field, a drop grows from the laser's centre into the frame with a jelly bounce
   (the clip's Subscribe pill), then each section drops in and swells into its bar the same way ---------- */
.jp-box[data-intro]:not([data-intro="frame"]):not([data-intro="done"]) .jp-box__frame { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* the real frame waits for the liquid */
.jp-box[data-intro]:not([data-intro="frame"]):not([data-intro="done"]) .jp-box__frame::before, .jp-box[data-intro]:not([data-intro="frame"]):not([data-intro="done"]) .jp-box__frame::after { opacity: 0; }
.jp-box[data-intro]:not([data-intro="done"]) .jp-box__frame > :not(.is-in) { visibility: hidden; }                                               /* each section waits for its own drop (height is kept: no layout jump) */
@keyframes jp-jelly { 0% { transform: scale(1, 1); } 22% { transform: scale(1.045, .91); } 46% { transform: scale(.968, 1.045); } 70% { transform: scale(1.016, .984); } 86% { transform: scale(.995, 1.006); } 100% { transform: scale(1, 1); } }
.jp-box .is-in.jp-jelly { animation: jp-jelly .6s cubic-bezier(.3, .1, .3, 1) both; transform-origin: 50% 50%; }                                  /* the liquid wobble on the real glass once it has taken over */
.jp-box__laser { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 5; mix-blend-mode: screen; }          /* canvas: the pack's beam, tinted with the accent */
.jp-box__liquid { position: absolute; inset: -40px; pointer-events: none; z-index: 3; filter: url(#jp-goo); opacity: .9; transition: opacity .35s; }   /* goo: the shapes merge and split like liquid */
.jp-box__liquid.is-done { opacity: 0; }
.jp-box__blob { position: absolute; border-radius: 999px; transform-origin: 50% 50%; background: radial-gradient(120% 90% at 50% 10%, #fff, color-mix(in srgb, var(--box-tint) 70%, #fff) 40%, color-mix(in srgb, var(--box-tint) 55%, #3a1a1e) 100%);   /* opaque: the goo threshold keys off alpha */
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75), inset 0 -10px 24px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.3); transform-origin: 50% 50%; will-change: transform, width, height, left, top; }
@media (prefers-reduced-motion: reduce) { .jp-box__liquid, .jp-box__laser { display: none; } .jp-box[data-intro] .jp-box__frame > * { visibility: visible; } .jp-neon path { animation: none; } }

/* ---------- v9 (Duane, 16 Oct 11:17 - "On the mobile device, the play button mask around the button is missing and the square animation is
   showing outside the round edge of the button."): Safari (WebKit) does not clip a child that is transformed, filtered, blended or animated on
   its own layer through a rounded overflow clip, and a clip-path or the opaque-gradient mask trick on a wrapper that is not a layer itself
   can be skipped too. Every disc interior is now clipped by a wrapper that is its own layer, with a real circular mask (the circle, soft by
   a quarter pixel) as well as the circle clip-path and the rounded overflow, so the drifting square bands, their fringes and the shine stay
   inside the round edge whatever the browser; the chromatic rim is held to the circle the same way. The disc's white ring is drawn inside
   the circle, and its shadow and its glow while it reads stay outside the clip, so the round edge looks exactly as it did. ---------- */
.jp-disc__in { -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); isolation: isolate; transform: translateZ(0);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 calc(100% - .25px), transparent 100%); mask-image: radial-gradient(circle closest-side at 50% 50%, #000 calc(100% - .25px), transparent 100%); }
.jp-disc__rim { -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); }