/* Jammin' Products Presents - site layer. Sits on jp-liquid-glass.css (tokens, header, menu, chat) and jp-glass-box.css (glass panels).
   Pages are generated from content/master.json by build-site.py; this file never changes per page.
   Layout: 20 / 60 / 20 - sponsor rails left and right (desktop), the field in the middle. The floral runs behind everything. */

/* v8 (Duane, 16 Oct 00:55 - "Adjust the glass with a frost and a slight blur"): desktops blur the page behind the glass a little (5 px;
   v7 had set 0 and the damask read straight through the panels). 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), so each rule's own (stronger)
   radius applies there. 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 frost itself (a milky layer and a soft inner highlight on every glass surface) is at the end of this file. */
:root { --jp-bblur: 5px; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { :root { --jp-bblur: initial; } }
html[data-device="phone"] { --jp-bblur: initial; }
html[data-handoff="still"] jp-liquid-logo#logo:not(:defined)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; mix-blend-mode: screen; opacity: var(--jp-spill); filter: blur(26px);
  background: radial-gradient(circle at 26.9% 30.9%, color-mix(in srgb, var(--jp-rim-a) 70%, var(--accent)) 0%, color-mix(in srgb, var(--jp-rim-b) 40%, transparent) 22%, transparent 44%); }   /* v7: and its light spill (.jp-glow at the light's starting angle) until the logo's script has put up its own */
html[data-handoff="still"] jp-liquid-logo#logo::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: var(--jp-logo-still) 50% 50% / 100% 100% no-repeat; }   /* v7: the sign-up's still of this logo, until it draws itself (index.html, jp-liquid-glass.js) */
/* ---------- tokens the site layer adds ---------- */
:root {
  --box-tint: var(--jp-tint);                 /* lets .jp-glass work outside a .jp-box (cards, buttons, footer) */
  --box-r: 18px;
  --field: 60%;
  --rail: 20%;
  --gap: clamp(28px, 4vw, 56px);
  --ease: cubic-bezier(.2, .9, .3, 1);
  --jelly: cubic-bezier(.34, 1.56, .64, 1);
  --gold: #d4a017;
  --fg-soft: color-mix(in srgb, var(--fg) 72%, transparent);
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html[data-text="large"] { font-size: 112.5%; }
html[data-text="large"] body { font-size: 18px; }

body { position: relative; min-height: 100vh; overflow-x: hidden; }
/* ---------- the background: houndstooth at the back, the logo-shaped light that follows the pointer (and beats at 77 bpm at rest),
   the floral it shines through, and the edges blurring and fading to black (night) or white (day) ---------- */
:root { --edge: #000; }
html[data-mode="day"] { --edge: #fff; }
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #070405; }
.bg__hound { position: absolute; inset: 0; background: #0e0a0b url("../images/bg-houndstooth.jpg") center / cover no-repeat; opacity: .9; filter: brightness(.68); }
.bg__light { position: absolute; left: 0; top: 0; width: 28vmin; height: 28vmin; margin: -14vmin 0 0 -14vmin; transform: translate(50vw, 50vh); will-change: transform; }   /* behind the floral, in front of the houndstooth: the glass panels blur and refract it, the rails let a little through */
.bg__light-in { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .18;                                                                                           /* the light: 27 % brought down by a third */
  background: radial-gradient(circle, color-mix(in srgb, var(--jp-tint) 85%, #fff) 0 28%, color-mix(in srgb, var(--accent-2) 60%, #fff) 58%, color-mix(in srgb, var(--accent) 50%, transparent) 100%);
  -webkit-mask: url("../images/jp-signature-glow.png") center / contain no-repeat; mask: url("../images/jp-signature-glow.png") center / contain no-repeat; }
.bg__spill { position: absolute; left: 50%; top: 50%; width: 300%; height: 300%; transform: translate(-50%, -50%); mix-blend-mode: screen; opacity: .2;                     /* the spill: a wide soft pool around the logo light */
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 55%, #fff) 0%, color-mix(in srgb, var(--accent) 45%, transparent) 30%, transparent 68%); }
/* light rays: the light breaking through the open parts of the damask in front of it. A box around the light holds seven copies of the
   "openings" tile (images/bg-rays.webp: warm light where the damask is open, soft-edged), each scaled a little more about the light and a
   little fainter - the openings smear outward from the light like shafts through a stencil. The tile is positioned so the stencil stays
   registered with the damask (page origin 0 0) wherever the box goes; a soft radial mask keeps the shafts to the glow and a few millimetres past it. */
.bg__rays { position: absolute; left: 0; top: 0; width: 44vmin; height: 44vmin; margin: -22vmin 0 0 -22vmin; --lx: 50vw; --ly: 50vh; --lxg: 50vw; --lyg: 50vh; --r: 14vmin; --tile: 700px;
  transform: translate(var(--lx), var(--ly)); will-change: transform; mix-blend-mode: screen; opacity: .5; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.55) calc(var(--r) * .35), #000 calc(var(--r) * .6), #000 calc(var(--r) * .78), rgba(0,0,0,.35) var(--r), transparent calc(var(--r) + 12px));
  mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.55) calc(var(--r) * .35), #000 calc(var(--r) * .6), #000 calc(var(--r) * .78), rgba(0,0,0,.35) var(--r), transparent calc(var(--r) + 12px)); }
.bg__rays i { position: absolute; inset: 0; opacity: var(--a); background: url("../images/bg-rays.webp") 0 0 / calc(var(--tile) * var(--k)) auto repeat;
  background-position: calc(22vmin - var(--lxg) * var(--k)) calc(22vmin - var(--lyg) * var(--k)); }
.bg__rays i:first-child { background-position: calc(22vmin - var(--lx)) calc(22vmin - var(--ly)); }   /* the shaft at the damask's own scale is registered every frame (--lx/--ly); the scaled ones may follow a frame late (--lxg/--lyg) - v13b */
.bg__rays i:nth-child(1) { --k: 1; --a: 0.6; }   .bg__rays i:nth-child(2) { --k: 1.024; --a: 0.52; }   .bg__rays i:nth-child(3) { --k: 1.048; --a: 0.45; }
.bg__rays i:nth-child(4) { --k: 1.072; --a: 0.38; }   .bg__rays i:nth-child(5) { --k: 1.096; --a: 0.32; }   .bg__rays i:nth-child(6) { --k: 1.12; --a: 0.27; }
.bg__rays i:nth-child(7) { --k: 1.145; --a: 0.22; }   .bg__rays i:nth-child(8) { --k: 1.17; --a: 0.18; }   .bg__rays i:nth-child(9) { --k: 1.195; --a: 0.14; }
.bg__rays i:nth-child(10) { --k: 1.22; --a: 0.11; }
html[data-device="phone"] .bg__rays { --tile: 460px; }
/* v13 (Duane, 18 Oct 00:53 "roll back to the original background lighting effect - it was more natural"): the heartbeat flows as it did
   before v12 (v12 moved it in steps and dropped the three faintest shafts; both are back). The light's cost at rest is this beat under the
   frosted glass; everything else v12 took out of the light (the time-based follow, the layers carried by transforms, the footer's spot) looks
   the same as before and stays. */
.bg__light.is-rest ~ .bg__rays { animation: bg-rays-beat .779s ease-in-out infinite; }               /* the shafts brighten with the heartbeat */
@keyframes bg-rays-beat { 0% { opacity: .5; } 12% { opacity: .7; } 24% { opacity: .5; } 36% { opacity: .6; } 50%, 100% { opacity: .5; } }
.bg__light.is-rest .bg__light-in { animation: bg-beat .779s ease-in-out infinite; }                     /* 77 bpm: lub, dub, rest */
@keyframes bg-beat { 0% { transform: scale(1); } 12% { transform: scale(1.055); } 24% { transform: scale(1); } 36% { transform: scale(1.03); } 50%, 100% { transform: scale(1); } }
.bg__floral { position: absolute; inset: 0; background: url("../images/bg-floral.webp") 0 0 / 700px auto repeat; opacity: .62; filter: brightness(.85) drop-shadow(0 7px 9px rgba(0,0,0,.6)); }   /* one exact repeat of the damask, every tile the same way up; the pattern casts a soft shadow onto the houndstooth */
html[data-device="phone"] .bg__floral { background-image: url("../images/bg-floral-half.webp"); background-size: 460px auto; }
.bg__soft { position: absolute; inset: -24px; background: url("../images/bg-floral.webp") 24px 24px / 700px auto repeat, #0e0a0b url("../images/bg-houndstooth.jpg") center / cover no-repeat; filter: blur(12px) brightness(.7); opacity: .9;
  -webkit-mask: radial-gradient(ellipse 72% 64% at 50% 50%, transparent 0 58%, #000 92%); mask: radial-gradient(ellipse 72% 64% at 50% 50%, transparent 0 58%, #000 92%); }   /* the same picture, blurred, shown only at the edges */
html[data-device="phone"] .bg__soft { background-image: url("../images/bg-floral-half.webp"), url("../images/bg-houndstooth-700.jpg"); background-size: 460px auto, cover; }
.bg__edge { position: absolute; inset: 0; background: radial-gradient(ellipse 72% 64% at 50% 50%, transparent 0 52%, color-mix(in srgb, var(--edge) 55%, transparent) 80%, var(--edge) 100%); transition: background .8s; }
html[data-mode="day"] .bg__hound { filter: brightness(1.35) contrast(.9); opacity: .8; }
html[data-mode="day"] .bg__soft { filter: brightness(1.35) contrast(.9) blur(12px); }
html[data-mode="day"] .bg__floral { opacity: .8; filter: drop-shadow(0 7px 9px rgba(0,0,0,.35)); }
html[data-mode="day"] .bg { background: #f3ecec; }
html[data-device="phone"] .bg__edge { background: radial-gradient(ellipse 100% 70% at 50% 50%, transparent 0 55%, color-mix(in srgb, var(--edge) 55%, transparent) 82%, var(--edge) 100%); }
html[data-device="phone"] .bg__soft { -webkit-mask: radial-gradient(ellipse 100% 70% at 50% 50%, transparent 0 60%, #000 94%); mask: radial-gradient(ellipse 100% 70% at 50% 50%, transparent 0 60%, #000 94%); }
.jp-menu__bg .hound { background-image: url("../images/bg-houndstooth.jpg"); }
.jp-menu__bg .floral { background-image: url("../images/bg-floral-half.webp"); }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 20 / 60 / 20 ---------- */
.site { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); align-items: start; min-height: 60vh; padding-top: 30px; }   /* a 30 px band under the header for the hint marquee; the sponsor rails and the column start level below it */
.rail { position: sticky; top: calc(var(--h-min) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--h-min) - env(safe-area-inset-top, 0px)); overflow: hidden;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* The feather is a real one: an SVG mask the size of the rail - the shape eroded 3.5 px and blurred 1.75 px (what a 7 px feather is in Photoshop),
   so the top edge, the edge facing the column and the 28 px curve between them all fade over 7 px. The screen edge and the bottom stay hard.
   One image, not stacked gradients: stacked gradients need mask-composite, which the mask shorthand resets and Safari composites differently
   (that was the hard edge and bevel). */
.rail--l { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-40' y='-40' width='150%25' height='150%25'%3E%3CfeMorphology operator='erode' radius='3.5'/%3E%3CfeGaussianBlur stdDeviation='1.75'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='100%25' height='100%25' rx='28'/%3E%3Crect x='-60' y='0' width='60%25' height='110%25'/%3E%3Crect x='0' y='50%25' width='100%25' height='60%25'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-40' y='-40' width='150%25' height='150%25'%3E%3CfeMorphology operator='erode' radius='3.5'/%3E%3CfeGaussianBlur stdDeviation='1.75'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='100%25' height='100%25' rx='28'/%3E%3Crect x='-60' y='0' width='60%25' height='110%25'/%3E%3Crect x='0' y='50%25' width='100%25' height='60%25'/%3E%3C/g%3E%3C/svg%3E"); }
.rail--r { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-40' y='-40' width='150%25' height='150%25'%3E%3CfeMorphology operator='erode' radius='3.5'/%3E%3CfeGaussianBlur stdDeviation='1.75'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='100%25' height='100%25' rx='28'/%3E%3Crect x='40%25' y='0' width='100%25' height='110%25'/%3E%3Crect x='0' y='50%25' width='150%25' height='60%25'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-40' y='-40' width='150%25' height='150%25'%3E%3CfeMorphology operator='erode' radius='3.5'/%3E%3CfeGaussianBlur stdDeviation='1.75'/%3E%3C/filter%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='100%25' height='100%25' rx='28'/%3E%3Crect x='40%25' y='0' width='100%25' height='110%25'/%3E%3Crect x='0' y='50%25' width='150%25' height='60%25'/%3E%3C/g%3E%3C/svg%3E"); }
.rail a { display: block; height: 100%; position: relative; }
.rail__frame { position: absolute; inset: 0; overflow: hidden; }   /* v12: was .rail__ad - EasyList (Brave Shields, Opera's blocker, uBlock) hides any element of that class, so the sponsorship frames were blank there */
.rail__frame img { position: absolute; top: 0; width: 100vw; max-width: none; height: 100%; object-fit: cover; object-position: center; opacity: .82; transition: opacity .4s; }   /* one creative the width of the page: the left rail shows its left end, the right rail its right end; a little of the light comes through */
.rail--l .rail__frame img { left: 0; }
.rail--r .rail__frame img { right: 0; }
.rail a:hover img { opacity: .94; }
.rail__tag { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 600 9px var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); pointer-events: none; }
.field { grid-column: 2; position: relative; padding: 0 clamp(16px, 2.5vw, 40px) 80px; display: grid; gap: var(--gap); min-width: 0; }   /* no top padding: section 1 (the live window / the slideshow) sits level with the top of the sponsor rails */
.field > * { min-width: 0; max-width: 100%; }                                          /* grid items never widen the field (a slideshow track would otherwise) */
.field .jp-box { --box-w: 100%; }
.jp-show__track, .stage, .jp-show { width: 100%; }
.stage, .jp-show, .field .jp-box, .row, .cta, .page-media { margin-inline: auto; }
html[data-device="tablet"] .site { grid-template-columns: 1fr; }
html[data-device="tablet"] .rail { display: none; }
html[data-device="tablet"] .field { grid-column: 1; max-width: 1040px; margin-inline: auto; width: 100%; }
html[data-device="phone"] .site { grid-template-columns: 1fr; }
html[data-device="phone"] .rail { display: none; }
html[data-device="phone"] .field { grid-column: 1; padding: 0 16px 72px; gap: 36px; }
.rail-strip { display: none; }                                                 /* phones + tablets: the sponsor set as a strip above the footer */
html[data-device="phone"] .rail-strip, html[data-device="tablet"] .rail-strip { display: block; padding: 0 16px 40px; max-width: 1040px; margin-inline: auto; }
.rail-strip a { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-40' y='-40' width='150%25' height='150%25'%3E%3CfeMorphology operator='erode' radius='3.5'/%3E%3CfeGaussianBlur stdDeviation='1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' rx='20' filter='url%28%23f%29'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-40' y='-40' width='150%25' height='150%25'%3E%3CfeMorphology operator='erode' radius='3.5'/%3E%3CfeGaussianBlur stdDeviation='1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' rx='20' filter='url%28%23f%29'/%3E%3C/svg%3E"); }   /* phones + tablets: the whole creative, 20 px corners, the same 7 px feather on all four edges */
.rail-strip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; line-height: 1.1; text-wrap: balance; }
.kicker { font: 600 11px var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sec__head h2 { font-size: clamp(18px, 2vw, 26px); color: var(--fg); }
.sec__head a { font: 600 11px var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-dim); text-decoration: none; white-space: nowrap; }
.sec__head a:hover { color: var(--accent-2); }
.lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--fg-soft); max-width: 62ch; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- liquid glass buttons + the X ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 12px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #fff; text-decoration: none; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 22%, rgba(20,14,12,.55)), color-mix(in srgb, var(--jp-tint) 8%, rgba(20,14,12,.6)) 55%, rgba(0,0,0,.5));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.5), 0 10px 30px rgba(0,0,0,.35);
  transition: transform .5s var(--jelly), box-shadow .3s, background .3s, color .3s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--ease); }
@media (hover: hover) { .btn:hover::before { transform: translateX(120%); } } .btn:focus-visible::before { transform: translateX(120%); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px) scale(1.03); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.6), 0 14px 36px rgba(0,0,0,.4), 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); } }   /* hover looks only where there is a mouse: on a touch screen a tap would leave them stuck */
.btn:active { transform: scale(.97); transition-duration: .12s; }
.btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.55), 0 12px 32px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn--primary:hover { color: #fff; }
.btn--ghost { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.jp-x, .live__fs { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; display: grid; place-items: center; isolation: isolate; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 26%, transparent), color-mix(in srgb, var(--jp-tint) 8%, transparent) 60%, rgba(0,0,0,.25));
  -webkit-backdrop-filter: blur(var(--jp-bblur, 10px)) saturate(1.4) brightness(1.05); backdrop-filter: blur(var(--jp-bblur, 10px)) saturate(1.4) brightness(1.05);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -6px 12px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.4);
  transition: transform .5s var(--jelly), box-shadow .3s; }
.jp-x::before, .jp-x::after { content: ""; position: absolute; width: 18px; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 .6px #000, 0 1px 2px rgba(0,0,0,.6); transform: rotate(45deg); transition: transform .4s var(--jelly), background .3s; }
.jp-x::after { transform: rotate(-45deg); }
@media (hover: hover) { .jp-x:hover, .live__fs:hover { transform: scale(1.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.7), 0 10px 28px rgba(0,0,0,.45), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent); } }
.jp-x:hover::before { transform: rotate(135deg); background: var(--accent-2); }
.jp-x:hover::after { transform: rotate(45deg); background: var(--accent-2); }
.jp-x:active, .live__fs:active { transform: scale(.92); }
.jp-chat__close, .jp-x--chat { width: 36px; height: 36px; }
.jp-chat__close { border: 0 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 26%, transparent), color-mix(in srgb, var(--jp-tint) 8%, transparent) 60%, rgba(0,0,0,.25)) !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(var(--jp-bblur, 10px)) saturate(1.4); backdrop-filter: blur(var(--jp-bblur, 10px)) saturate(1.4); }   /* the chat's close becomes the liquid glass X */
.jp-chat__close:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent)) !important; }

/* ---------- the marquee under the logo (home only: runs twice) ---------- */
.hint-marquee { position: absolute; left: 0; right: 0; top: -30px; overflow: hidden; height: 26px; margin: 0 auto; max-width: 100%; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hint-marquee span { position: absolute; left: 100%; top: 0; white-space: nowrap; font: 600 11px/26px var(--font-display); letter-spacing: .28em; text-transform: uppercase; color: var(--fg-dim); animation: hint-run 14s linear 2; }
.hint-marquee span b { color: var(--accent); font-weight: 600; }
@keyframes hint-run { to { transform: translateX(calc(-100% - 100vw)); } }
.hint-marquee.is-done { display: none; }

/* ---------- home hero: the loop, the headline, the CTA ---------- */
.hero { position: relative; border-radius: 24px; overflow: hidden; min-height: clamp(380px, 52vh, 620px); display: grid; align-content: end; padding: clamp(24px, 4vw, 56px); isolation: isolate; box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.14); }
.hero__loop { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }   /* no filter on the still: a filtered child escapes a rounded overflow clip on iOS */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35) 45%, rgba(5,3,3,.82)); }
.hero h1 { font-size: clamp(30px, 4.6vw, 64px); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); max-width: 18ch; }
.hero h1 i { font-style: normal; color: var(--accent-2); }
.hero .lede { color: rgba(255,255,255,.82); margin-top: 14px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__tag { position: absolute; top: 20px; left: 24px; font: 600 10px var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ---------- the live window (section 1) + the slideshow (section 2) ---------- */
.stage { position: relative; display: grid; gap: 0; }
.live { position: relative; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .6s var(--ease), margin .6s var(--ease); margin-bottom: 0; }   /* the screen rises in .6 s, the slideshow sliding down under it (and back up) */
.live[data-open="true"] { grid-template-rows: 1fr; margin-bottom: 18px; }
.live__in { min-height: 0; }
.live__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.18); }
.live__frame video, .live__frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.live__static { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); background-size: auto, 120px; mix-blend-mode: screen; }
.live__static.is-on { opacity: 1; animation: static-jitter .08s steps(2) infinite; }
@keyframes static-jitter { 50% { background-position: 0 0, 40px 60px; } }
.live__bar { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; z-index: 2; }
.live__ctl { display: flex; flex-direction: column; align-items: center; gap: 8px; }                                     /* the x, and the full-screen toggle under it */
.live__bar .jp-x, .live__fs { width: 32px; height: 32px; }                                                               /* smaller than the site's other x buttons */
.live__bar .jp-x::before, .live__bar .jp-x::after { width: 12px; height: 1.8px; }
.live__fs svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); transition: transform .4s var(--jelly); }
.live__fs .fs-in { display: none; } .live__fs[data-full="true"] .fs-in { display: block; } .live__fs[data-full="true"] .fs-out { display: none; }
@media (hover: hover) { .live__fs:hover svg { transform: scale(1.15); stroke: var(--accent-2); } }
/* full screen: the frame fills the screen (the browser's own full screen where it has one; otherwise the frame is pinned over the page) */
.live__frame:fullscreen, .live__frame.is-full { border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.live__frame.is-full { position: fixed; inset: 0; z-index: 95; will-change: transform; }
.live__frame:fullscreen video, .live__frame:fullscreen iframe, .live__frame.is-full video, .live__frame.is-full iframe { object-fit: contain; }
html[data-livefull="1"] { overflow: hidden; }
.live__label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.45); font: 700 10px var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.live__label i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; animation: live-dot 1.2s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .35; } }

.jp-show { position: relative; }   /* not isolated: the sparks and the opener are screen-blended over the page itself, so their black is simply invisible where they overhang the frame */
.jp-show__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 24px; clip-path: inset(0 round 24px); -webkit-overflow-scrolling: touch; }   /* clip-path as well as the radius: the slides are composited (will-change) and iOS would paint their corners square */
.jp-show__track::-webkit-scrollbar { display: none; }
.slide { position: relative; scroll-snap-align: start; aspect-ratio: 16 / 9; min-height: 300px; overflow: hidden; display: grid; align-content: end; padding: clamp(20px, 3.2vw, 44px); color: #fff; text-decoration: none; isolation: isolate; }
.slide img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; transition: transform .9s var(--ease); will-change: transform; }
.slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(5,3,3,.78)); }
@media (hover: hover) { .slide:hover img { transform: scale(1.04); } }
.slide__kind { font: 600 10px var(--font-display); letter-spacing: .32em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 10px; }
.slide h2 { font-size: clamp(22px, 3vw, 40px); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); max-width: 22ch; }
.slide p { margin: 10px 0 0; max-width: 52ch; color: rgba(255,255,255,.82); font-size: clamp(14px, 1.1vw, 17px); }
.slide__go { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: #fff; }
.slide__go b { transition: transform .4s var(--jelly); }
@media (hover: hover) { .slide:hover .slide__go b { transform: translateX(6px); } }
.slide--product img { transform: perspective(1400px) rotateY(calc((var(--p, .5) - .5) * -16deg)) scale(calc(1.04 + (.5 - abs(var(--p, .5) - .5)) * .08)); transition: transform .2s linear; }   /* product-led motion: the angle follows the scroll */
.slide__detail { position: absolute; right: clamp(16px, 3vw, 40px); top: clamp(16px, 3vw, 40px); width: clamp(110px, 16%, 190px); aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.35); transform: translateY(14px) scale(.9); opacity: 0; transition: transform .8s var(--jelly) .25s, opacity .5s .25s; }
.slide__detail img { position: static; width: 100%; height: 100%; transform: scale(2.4); transform-origin: var(--fx, 50%) var(--fy, 45%); transition: none; }
.slide__detail small { position: absolute; left: 10px; bottom: 8px; font: 600 8px var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000; }
.slide.is-in .slide__detail { transform: none; opacity: 1; }
.jp-show__nav { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.jp-show__btn { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font: 700 18px var(--font-display); display: grid; place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 24%, rgba(20,14,12,.6)), color-mix(in srgb, var(--jp-tint) 8%, rgba(20,14,12,.65)) 60%, rgba(0,0,0,.6));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px rgba(0,0,0,.4); transition: transform .5s var(--jelly), box-shadow .3s; }
@media (hover: hover) { .jp-show__btn:hover { transform: scale(1.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5), 0 10px 28px rgba(0,0,0,.45), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent); } }
.jp-show__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }                              /* clear of the star hanging on the edge */
/* v12 (Duane, 17 Oct 12:56): the rooms' slideshows - the home component in a room's hero slot (.show, build-site.py page_show). A room with no
   picture gets a glass title card the stylesheet draws: the page's colourway, the damask, the mark and the headline - nothing to download. */
.show, .show .jp-show { margin-inline: auto; width: 100%; }
.show .jp-show__dots { margin-top: 16px; }
.slide--card { background: linear-gradient(calc(118deg + var(--i, 0) * 23deg), color-mix(in srgb, var(--accent) 34%, #120b0c), #0b0708 55%, color-mix(in srgb, var(--accent-2) 22%, #0d0809)); }
.slide--card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background: url("../images/bg-floral.webp") calc(var(--i, 0) * -90px) 0 / 700px auto repeat; filter: brightness(1.3); }   /* the damask, faint, shifted per card */
html[data-device="phone"] .slide--card::before { background-image: url("../images/bg-floral-half.webp"); background-size: 460px auto; }
.slide__art { position: absolute; right: -4%; top: -8%; height: 118%; aspect-ratio: 1; z-index: -1; display: grid; place-items: center; pointer-events: none; }
.slide__art img { position: static; width: 72%; height: 72%; object-fit: contain; opacity: .22; transform: rotate(calc(-9deg + var(--i, 0) * 1.5deg)); filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); will-change: auto; transition: transform .9s var(--ease); }   /* the mark, large and quiet */
@media (hover: hover) { .slide--card:hover .slide__art img { transform: rotate(calc(-9deg + var(--i, 0) * 1.5deg)) scale(1.05); } }
.slide--card::after { background: linear-gradient(180deg, rgba(5,3,3,.1), rgba(5,3,3,.72)); }
.slide--card h2 { max-width: 18ch; }
.jp-show__dots button { width: 22px; height: 6px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.22); transition: background .3s, width .4s var(--ease); }
.jp-show__dots button[aria-current="true"] { width: 44px; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); }

/* the star: flashes at the bottom middle, liquefies into two 2 px lines that race across the bottom and up the sides of the frame to meet at the top as the badge */
.star { position: absolute; left: 50%; bottom: -20px; z-index: 5; width: 32px; height: 32px; margin-left: -16px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 1; -webkit-tap-highlight-color: transparent; transition: transform .5s var(--jelly), opacity .3s;   /* the star button: the way into section 1 - 32 px, hung on the slideshow's bottom edge by its two upper points (37 % down the star) */
  filter: drop-shadow(0 0 8px #8a2be2) drop-shadow(0 0 16px rgba(36,87,230,.75)); }
.star svg { width: 100%; height: 100%; display: block; }
.star.is-spin svg { animation: star-spin 1.5s cubic-bezier(.3, .1, .2, 1) 1 both; }                        /* one turn when the page shows, and again when the star re-forms (site.js sets the class); site.js turns the colour inside it at random */
@keyframes star-spin { to { rotate: 360deg; } }
@media (hover: hover) { .star:hover { transform: scale(1.12); } }
.star:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 50%; }
.star.is-gone { opacity: 0; pointer-events: none; }                                                          /* liquefied: gone until the window has closed and it re-forms */
.star.is-flash { animation: star-flash 1.2s var(--ease) forwards; pointer-events: none; }
@keyframes star-flash { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); } 30% { opacity: 1; transform: scale(1.3) rotate(0); } 55% { transform: scale(1); } 80% { opacity: 1; transform: translateY(-2px) scaleX(2.2) scaleY(.12); } 100% { opacity: 0; transform: translateY(-2px) scaleX(3) scaleY(.05); } }   /* it goes flat 2 px up from its centre: level with the lines, which start on the frame's bottom edge */
.star.is-reform { animation: star-flash 1.2s var(--ease) reverse forwards; pointer-events: none; }
.race { position: absolute; inset: -2px; z-index: 5; pointer-events: none; overflow: visible; opacity: 0; }
.race.is-on { opacity: 1; }
.race path { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--accent-2)) drop-shadow(0 0 12px var(--accent)); stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.race.is-on path { animation: race-draw 1.3s var(--ease) forwards; }
.race.is-back path { animation: race-draw 1.1s var(--ease) reverse forwards; }
@keyframes race-draw { to { stroke-dashoffset: 0; } }
/* the sparks: a canvas over the frame (site.js draws them: thrown from each line's head, bending down under gravity; meeting in the middle at the top) */
.race__fx { position: absolute; left: -72px; top: -72px; z-index: 6; pointer-events: none; display: none; }
.race__fx.is-on { display: block; }
.badge { position: absolute; left: 50%; top: -34px; z-index: 6; width: 68px; height: 68px; margin-left: -34px; pointer-events: none; opacity: 0; transform: scale(.2); transition: transform .5s var(--jelly), opacity .3s; }
.badge img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(0,0,0,.6)); }
.badge::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, var(--blink, transparent) 0 40%, transparent 72%); opacity: 0; z-index: -1; }
.badge.is-in { opacity: 1; transform: scale(1); }
.badge.is-blink::before { animation: badge-blink 1.3s steps(1) forwards; }
@keyframes badge-blink { 0% { --blink: #ff2b2b; opacity: .9; } 16% { opacity: 0; } 32% { --blink: #ff2b2b; opacity: .9; } 48% { opacity: 0; } 64% { --blink: #36ff7a; opacity: .95; } 100% { --blink: #36ff7a; opacity: 0; } }
.badge.is-small { transform: scale(.3) translateY(-40px); }
.badge.is-blink img { animation: badge-tint 1.3s steps(1) forwards; }
.stage[data-live="true"] .jp-show { transform: translateY(8px); }
.stage .jp-show { transition: transform .6s var(--ease); }
@keyframes badge-tint { 0%, 32% { filter: drop-shadow(0 0 14px #ff2b2b) brightness(1.3); } 16%, 48% { filter: drop-shadow(0 0 10px rgba(0,0,0,.6)); } 64%, 100% { filter: drop-shadow(0 0 14px #36ff7a) brightness(1.2); } }

/* ---------- rows of cards (the Kick-style framework) ---------- */
.row { position: relative; }
.row__track { --fade-l: 0px; --fade-r: 44px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); transition: --fade-l .25s, --fade-r .25s; }   /* the tiles fade out at the edges instead of being cut: no fade on the left while the row sits at its start, it comes in with the scroll (site.js); the right one goes at the end */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 44px; }
.row__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 29%); gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 14px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 60%, transparent) transparent; }
html[data-device="phone"] .row__track { grid-auto-columns: 78%; }
.card { position: relative; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; min-height: 200px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 12%, rgba(12,8,9,.86)), color-mix(in srgb, var(--jp-tint) 4%, rgba(12,8,9,.9)) 40%, rgba(6,4,4,.94));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.35), 0 12px 32px rgba(0,0,0,.35); transition: transform .55s var(--jelly), box-shadow .35s; }
@media (hover: hover) { .card:hover { transform: translateY(-4px) scale(1.015); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.5), 0 18px 40px rgba(0,0,0,.45), 0 0 30px color-mix(in srgb, var(--accent) 35%, transparent); } }
.card__media { aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.06); } }
.card__body { padding: 14px 16px 16px; display: grid; align-content: start; gap: 6px; }
.card__kicker { font: 600 9px var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-2); }
.card h3 { font-size: 15px; letter-spacing: .06em; line-height: 1.2; }
.card p { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.7); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__tag { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.55); font: 700 9px var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.card--soon .card__tag { color: var(--accent-2); }
.card__state { position: absolute; top: 10px; right: 10px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 75%, #000); font: 700 9px var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: #fff; }

/* ---------- generic page ---------- */
.page-media { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.14); aspect-ratio: 16 / 9; isolation: isolate; }
.page-media img, .page-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02) rotate(calc((var(--p, .5) - .5) * 2deg)); transition: transform .2s linear; }
.page-media figcaption { position: absolute; left: 18px; bottom: 14px; font: 600 10px var(--font-display); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.7); text-shadow: 0 1px 3px #000; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.grid .card { min-height: 150px; }
.text { max-width: 68ch; }
.text p { font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.65; color: var(--fg-soft); }
.text h3 { font-size: 15px; letter-spacing: .14em; color: var(--fg); margin: 22px 0 8px; }
.cta { display: grid; justify-items: center; text-align: center; gap: 14px; padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 10%, rgba(12,8,9,.8)), rgba(6,4,4,.9)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16), 0 20px 50px rgba(0,0,0,.35); }
.cta h2, .cta h1 { font-size: clamp(20px, 2.4vw, 32px); color: #fff; }
.cta p { color: var(--fg-soft); max-width: 50ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font: 600 10px var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-dim); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs b { color: var(--fg); font-weight: 600; }
.notice { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); font-size: 14px; color: var(--fg); }
.notice b { font: 700 10px var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--accent-2); white-space: nowrap; }
.construct { display: grid; justify-items: center; text-align: center; gap: 16px; padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 48px); border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 12%, rgba(12,8,9,.82)), rgba(6,4,4,.92)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2), 0 30px 80px rgba(0,0,0,.45); }
.construct h2 { font-size: clamp(22px, 3vw, 40px); color: #fff; }
.construct p { color: var(--fg-soft); max-width: 48ch; }
.clock { display: flex; gap: 10px; }
.clock span { display: grid; min-width: 66px; padding: 10px 8px; border-radius: 14px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); font: 700 24px var(--font-display); color: #fff; }
.clock span small { font: 600 9px var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--fg-dim); margin-top: 4px; }

/* ---------- rules pages ---------- */
.rules-hero { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.deck-badge { display: grid; justify-items: center; gap: 4px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 45%, #000), color-mix(in srgb, var(--gold) 20%, #000)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 70%, #fff), 0 10px 30px rgba(0,0,0,.4); color: #fff; text-align: center; }
.deck-badge b { font: 700 22px var(--font-display); letter-spacing: .04em; }
.deck-badge small { font: 600 8px var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--gold) 70%, #fff); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font: 600 10px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--fg); }
.facts span b { color: var(--accent-2); font-weight: 600; }
.rules { display: grid; gap: 14px; }
.rule { padding: 22px 24px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 9%, rgba(12,8,9,.8)), rgba(6,4,4,.88)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16), 0 14px 36px rgba(0,0,0,.3); }
.rule h2 { font-size: 15px; letter-spacing: .2em; color: var(--accent-2); margin-bottom: 10px; }
.rule p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--fg); margin: 0; }
.video-slot { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.16); display: grid; place-items: center; isolation: isolate; }
.video-slot img, .video-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.video-slot .btn { pointer-events: none; }
.video-slot small { position: absolute; left: 16px; bottom: 12px; font: 600 9px var(--font-display); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.7); text-shadow: 0 1px 3px #000; }
.table-line { text-align: center; font: 600 11px var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--fg-dim); }
.family { display: grid; gap: 14px; }
.family__head h2 { font-size: 20px; color: var(--fg); }
.family__head p { color: var(--fg-soft); font-size: 15px; margin: 6px 0 0; max-width: 62ch; }

/* ---------- the footer (Apple-style directory) ---------- */
.foot { grid-column: 1 / -1; margin-top: 40px; padding: 40px clamp(16px, 4vw, 56px) calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 12px; line-height: 1.5; }   /* brushed gold: see the footer block at the end of the file */
.foot__in { max-width: 1180px; margin-inline: auto; display: grid; gap: 28px; }
.foot__dirs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px 18px; }
.foot__dir h4 { font: 700 11px var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--fg); margin-bottom: 10px; }
.foot__dir h4 a { text-decoration: none; }
.foot__dir h4 a:hover { color: var(--accent-2); }
.foot__dir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.foot__dir li[data-depth="2"] { padding-left: 10px; }
.foot__dir li[data-depth="3"] { padding-left: 20px; }
.foot__dir li[data-depth="4"] { padding-left: 30px; }
.foot__dir li[data-depth="5"] { padding-left: 40px; }
.foot__dir a { color: inherit; text-decoration: none; }
.foot__dir a:hover { color: var(--fg); text-decoration: underline; }
.foot__dir li.is-off a { opacity: .5; }
.foot__line { padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.foot__extras { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 11px var(--font-display); letter-spacing: .2em; text-transform: uppercase; }
.foot__extras a { text-decoration: none; color: var(--fg); }
.foot__extras a:hover { color: var(--accent-2); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot__legal a { text-decoration: none; }
.foot__legal a:hover { text-decoration: underline; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: center; padding-right: 270px; }
html[data-device="phone"] .foot__bottom { padding-right: 0; padding-bottom: 60px; }
.foot__social { display: flex; gap: 10px; }
.foot__social a { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--fg); text-decoration: none; font: 700 11px var(--font-display); transition: background .3s, color .3s; }
.foot__social a:hover { background: var(--accent); color: #fff; }
.foot__games { text-align: center; font: 600 11px var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-dim); }
.foot__lang { display: inline-flex; align-items: center; gap: 8px; }
.foot__lang select { background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font: 600 11px var(--font-display); }

/* ---------- accessibility pill: hand, hearing, text size, language ---------- */
.a11y { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 65; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 22%, rgba(20,14,12,.78)), color-mix(in srgb, var(--jp-tint) 7%, rgba(20,14,12,.82)) 60%, rgba(0,0,0,.84));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.55), 0 12px 32px rgba(0,0,0,.45); opacity: .34; transition: opacity .45s; touch-action: none; user-select: none; -webkit-user-select: none; }   /* left alone it sits at 34 %; it can be dragged anywhere */
.a11y:hover, .a11y:focus-within, .a11y.is-awake { opacity: 1; }
.a11y.is-placed { right: auto !important; bottom: auto !important; }   /* once dragged, it sits where it was put (left/top set by site.js) */
.a11y.is-dragging { cursor: grabbing; opacity: 1; transition: none; }
.a11y { cursor: grab; }                                                                /* full while it is being used, and for a moment after a touch */
.a11y button, .a11y select { height: 36px; min-width: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; font: 700 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; display: inline-grid; place-items: center; transition: background .25s, color .25s; }
.a11y button:hover, .a11y select:hover { background: rgba(255,255,255,.14); }
.a11y button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); }
.a11y select { appearance: none; -webkit-appearance: none; padding-right: 10px; }
.a11y select option { color: #000; }
.a11y__label { font: 600 9px var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6); padding: 0 6px 0 10px; }
html[data-device="phone"] .a11y { right: 10px; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); padding: 4px; }   /* above THE WORD tab on the bottom edge */
html[data-device="phone"] .a11y__label { display: none; }
html[data-device="phone"] .a11y button, html[data-device="phone"] .a11y select { height: 34px; min-width: 34px; padding: 0 8px; }

/* handedness: left-handed players get the controls on the left */
html[data-hand="left"] .a11y { right: auto; left: 16px; }
html[data-hand="left"] .jp-chat-tab { left: auto !important; right: 0 !important; transform: scaleX(-1); }
html[data-hand="left"] .jp-chat-tab__txt { transform: scaleX(-1); display: inline-block; }
html[data-hand="left"] .jp-chat { left: auto; right: 0; transform: translateX(100%); border-right: 0; border-left: 1px solid rgba(255,255,255,.14); }
html[data-hand="left"][data-chat="open"] .jp-chat { transform: none; }
html[data-hand="left"]:not([data-device="phone"]) body { padding-left: 0; padding-right: var(--jp-chat-w); }
html[data-hand="left"] .jp-box__actions { flex-direction: row-reverse; }
html[data-hand="left"] .jp-show__nav { flex-direction: row-reverse; }
html[data-hand="left"] .hero__cta, html[data-hand="left"] .cta { justify-items: end; justify-content: flex-end; text-align: right; }
html[data-hand="left"] .sec__head { flex-direction: row-reverse; }

/* hearing mode: sound cues become visual; videos show their captions */
html[data-hearing="on"] .jp-box__title { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
html[data-hearing="on"] .jp-box[data-intro="running"] .jp-box__title { animation: title-cue 1.1s ease-in-out infinite; }
@keyframes title-cue { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 50%, transparent); } }
html[data-hearing="on"] video::cue { background: rgba(0,0,0,.75); color: #fff; font: 600 16px var(--font-body); }
html[data-hearing="on"] .live__label i { animation: none; background: #36ff7a; box-shadow: 0 0 10px #36ff7a; }
.cue { position: fixed; left: 50%; top: 10px; z-index: 80; transform: translate(-50%, -20px); opacity: 0; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font: 600 11px var(--font-display); letter-spacing: .22em; text-transform: uppercase; pointer-events: none; transition: transform .3s, opacity .3s; }
.cue.is-on { transform: translate(-50%, 0); opacity: 1; }

/* rolodex sections on phones: sections tilt by their distance from the centre as the page scrolls; snap settles them */
html[data-device="phone"][data-rolodex="on"] { scroll-snap-type: y proximity; }
html[data-device="phone"][data-rolodex="on"] .field > .sec:not(.jp-box) { scroll-snap-align: center; scroll-snap-stop: normal; transform-origin: 50% 50%; transform: perspective(900px) rotateX(calc(var(--d, 0) * -12deg)) scale(calc(1 - abs(var(--d, 0)) * .05)); opacity: calc(1 - abs(var(--d, 0)) * .35); transition: none; will-change: transform; }

/* the overall-off state (Master & Qommander): the menu words and buttons hide, the field shows the message */
html[data-site="off"] .jp-nav-item, html[data-site="off"] .jp-menu, html[data-site="off"] .jp-chat-tab, html[data-site="off"] .jp-wing--left, html[data-site="off"] .foot__dirs, html[data-site="off"] .rail, html[data-site="off"] .rail-strip { display: none !important; }
html[data-site="off"] .field > :not(.construct) { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .star svg, .hint-marquee span, .live__static.is-on, .slide img, .card, .btn, .jp-x { animation: none !important; transition: none !important; }
  .slide--product img, .page-media img, .page-media video { transform: none !important; }
  html[data-device="phone"][data-rolodex="on"] .field > .sec:not(.jp-box) { transform: none; opacity: 1; }
  .bg__light.is-rest .bg__light-in, .bg__light.is-rest ~ .bg__rays { animation: none; }
}

/* ---------- the deeper menu (slide buttons beside sub-items that have pages of their own) + search results ---------- */
.jp-sub__group { position: relative; }
.jp-sub__more { width: 26px; height: 26px; margin-left: -4px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: #fff; font: 700 16px/1 var(--font-display); cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; transition: background .2s, transform .3s var(--jelly); }
.jp-sub__more:hover { background: var(--accent); transform: scale(1.1); }
.jp-sub__more:disabled { opacity: .22; cursor: default; transform: none; background: rgba(255,255,255,.06); }
.jp-sub__deep { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 12px; border-radius: inherit; background: color-mix(in srgb, var(--hero-d) 92%, transparent); -webkit-backdrop-filter: blur(var(--jp-bblur, 12px)); backdrop-filter: blur(var(--jp-bblur, 12px)); transform: translateX(24px); opacity: 0; transition: transform .4s var(--jelly), opacity .3s; overflow: auto; }
.jp-sub__deep.is-on { transform: none; opacity: 1; }
.jp-sub__deep .jp-sub__group { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.search-hits { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 90; display: grid; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--hero-d) 94%, transparent); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2), 0 20px 50px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(var(--jp-bblur, 14px)); backdrop-filter: blur(var(--jp-bblur, 14px)); text-transform: none; letter-spacing: 0; }
.search-hits:empty { display: none; }
.search-hits a { display: grid; gap: 2px; padding: 10px 14px; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.search-hits a:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.search-hits b { font: 700 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.search-hits span { font: 400 12px var(--font-body); color: rgba(255,255,255,.7); }
.search-hits i { padding: 10px 14px; font: 400 12px var(--font-body); color: rgba(255,255,255,.7); }
.jp-search { position: relative; }

/* ---------- Master & Qommander ---------- */
.mq .rule h2 { margin-bottom: 12px; }
.mq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mq__row { display: grid; gap: 6px; margin: 0 0 10px; font: 600 10px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); }
.mq__row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.mq__row:has(input[type="checkbox"]) { grid-template-columns: auto 1fr; align-items: center; }
.mq__row input:not([type="checkbox"]), .mq__row textarea, .mq__row select, .mq__tools input, #mq-role { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--fg); font: 500 14px var(--font-body); letter-spacing: 0; text-transform: none; }
#mq-role { width: auto; padding: 4px 8px; font: 600 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; margin-left: 6px; }
.mq__note { font-size: 12px; color: var(--fg-dim); margin: 8px 0 0; letter-spacing: 0; text-transform: none; }
.mq__note code, .mq__steps code { font: 500 12px ui-monospace, Menlo, monospace; color: var(--accent-2); }
.mq__tools { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.mq__tools .btn { min-height: 40px; padding: 0 18px; white-space: nowrap; }
.mq__table { max-height: 420px; overflow: auto; }
.mq__t { width: 100%; border-collapse: collapse; font-size: 13px; }
.mq__t th, .mq__t td { text-align: left; padding: 7px 10px 7px 0; border-top: 1px solid rgba(255,255,255,.08); vertical-align: middle; }
.mq__t th { font: 700 10px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); border-top: 0; }
.mq__t a { color: var(--fg); text-decoration: none; }
.mq__t a:hover { color: var(--accent-2); }
.mq__t input[type="datetime-local"] { padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--fg); font: 500 12px var(--font-body); }
.mq__t input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.mq__t code { font: 500 11px ui-monospace, Menlo, monospace; word-break: break-all; color: var(--fg-dim); }
.mq__t .ok { color: #39ff88; font-weight: 700; } .mq__t .bad { color: #ff4a4a; font-weight: 700; }
.mq__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.mq__log { list-style: none; margin: 10px 0 0; padding: 0; max-height: 220px; overflow: auto; font-size: 13px; }
.mq__log li { padding: 5px 0; border-top: 1px solid rgba(255,255,255,.08); }
.mq__log b { font: 700 10px var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.mq__log time { color: var(--fg-dim); font-size: 11px; }
.mq__steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--fg-soft); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); }
.kpi b { display: block; font: 700 28px/1 var(--font-display); margin-top: 4px; color: #fff; } .kpi span { font: 600 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.dash__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.tile { padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand, var(--accent)) 50%, transparent); }
.tile__top { font: 600 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.tile__n { font: 700 26px/1.1 var(--font-display); color: #fff; }
.jp-sub__opt.is-current { background: var(--accent); border-color: var(--accent); }

/* ---------- the HAUS tab: the chat tab's twin on the right edge, back to the home page. It glides with the chat tab (same --jp-tab-y) and
   tucks away with it when the menu opens; on phones the chat tab sits bottom left and the HAUS tab bottom right ---------- */
.jp-haus-tab { left: auto; right: 0; border-radius: 16px 0 0 16px; transform-origin: 100% 50%; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--jp-tab-len, 0px); }   /* the chat tab's length (site.js measures it), the word centred along it */
.jp-haus-tab .jp-chat-tab__txt { rotate: 180deg; }                                                           /* the letters' tops face the page, as the chat tab's do */
html[data-menu="open"]:not([data-chat="open"]) .jp-haus-tab { transform: translate(110%, -50%); box-shadow: none; }
html[data-menu="open"] .jp-haus-tab { transform: translate(110%, -50%); box-shadow: none; }
html[data-chat="open"]:not([data-menu="open"]) .jp-haus-tab { z-index: 69; transform: translate(0, -50%); border-radius: 16px 0 0 16px; }
html[data-touch="1"] .jp-haus-tab { clip-path: inset(0 round 16px 0 0 16px); }
html[data-device="phone"] .jp-chat-tab { left: 10px; right: auto; transform: none; transform-origin: 0 100%; }
html[data-device="phone"] .jp-haus-tab { left: auto; right: 10px; transform: none; transform-origin: 100% 100%; min-height: 0; min-width: var(--jp-tab-len, 0px); }
html[data-device="phone"] .jp-haus-tab .jp-chat-tab__txt { rotate: 0deg; }
html[data-device="phone"][data-menu="open"]:not([data-chat="open"]) .jp-chat-tab, html[data-device="phone"][data-menu="open"] .jp-haus-tab { transform: translate(0, 110%); }
html[data-device="phone"][data-chat="open"] .jp-chat-tab { transform: none; border-radius: 16px 16px 0 0; }
html[data-device="phone"][data-chat="open"]:not([data-menu="open"]) .jp-haus-tab { transform: none; border-radius: 16px 16px 0 0; }
html[data-device="phone"] .jp-haus-tab, html[data-device="phone"][data-chat="open"] .jp-haus-tab { clip-path: inset(0 round 16px 16px 0 0); }
html[data-site="off"] .jp-haus-tab { display: none !important; }

/* ---------- living glass: the play disc's interior on every button (site.js adds the layers; the button keeps its own colour and label) ----------
   bands of refraction drifting with their rainbow fringes, a shine and a caustic on their own clocks, a chromatic rim turning, and the
   heartbeat under the mouse (--lvl, as on the disc) */
[data-lg] { isolation: isolate; --lg-red: #e5202d; --lg-gold: #d4a017; --lg-gold-2: #ffb347; --lg-blue: #2457e6; --lg-white: #fff; transition: filter .25s; }   /* the logo's palette */
.lg-rel { position: relative; }
.lg { position: absolute; inset: 0; z-index: -1; border-radius: var(--lg-r, 999px); overflow: hidden; pointer-events: none; }   /* v12: the rounded clip is the corner radius with overflow hidden (a quad clip in the compositor) - the clip-path and the mask it carried were two more offscreen passes per button on every frame */
.lg__in { position: absolute; inset: 0; }
.lg__in::before { content: ""; position: absolute; inset: -30%; pointer-events: none; opacity: .4;   /* v12: no blur filter on the moving bands (a blur pass per button per frame); the bands' own soft edges carry the look */ scale: calc(1 + var(--lvl) * .32); background-size: var(--lg-tile, 100%) 100%; background-repeat: repeat-x;
  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; }
.lg__in::after { content: ""; position: absolute; inset: -30%; pointer-events: none; opacity: calc(.7 + var(--lvl) * .3);   /* v12: plain blending, a little more opaque (screen blending was an offscreen pass per button per frame; over the dark bands the picture is the same) */ background-size: var(--lg-tile, 100%) 100%; background-repeat: repeat-x; filter: saturate(calc(1 + var(--lvl) * .8)); scale: calc(1 + var(--lvl) * .32);
  background: radial-gradient(28% 55% at 30% 40%, transparent 62%, color-mix(in srgb, var(--lg-red) 60%, transparent) 68%, color-mix(in srgb, var(--lg-gold-2) 45%, transparent) 72%, color-mix(in srgb, var(--lg-white) 40%, transparent) 78%, transparent 84%), radial-gradient(40% 30% at 72% 68%, transparent 62%, color-mix(in srgb, var(--lg-blue) 55%, transparent) 68%, color-mix(in srgb, var(--lg-gold) 45%, transparent) 74%, transparent 82%), radial-gradient(22% 40% at 60% 20%, transparent 60%, color-mix(in srgb, var(--lg-red) 45%, transparent) 68%, color-mix(in srgb, var(--lg-white) 40%, transparent) 76%, transparent 84%);
  animation: jp-disc-drift 7s ease-in-out infinite alternate-reverse; animation-delay: -.25s; }   /* the fringes: red, gold, white and blue */
/* v12 (Duane, 17 Oct 12:56 "fast, clean animations"): the sheen's caustic and the rim's turning colours are fixed pictures MOVED by a transform
   (composited), where v9-v11 re-painted them every frame (a background-position animation; a conic gradient re-drawn at a new angle) */
.lg__shine { position: absolute; inset: 0; pointer-events: none; opacity: calc(.62 + var(--lvl) * .38); overflow: hidden;   /* v12: plain blending (see .lg__in::after) */
  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; }
.lg__shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%; pointer-events: none; will-change: transform;
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.22) 46%, color-mix(in srgb, var(--lg-gold-2) 30%, transparent) 50%, transparent 60%); background-size: 100% 100%;
  animation: lg-caustic-slide 7s linear infinite; }   /* the caustic: a band three widths wide sliding through */
@keyframes lg-caustic-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.lg__rim { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: calc(.6 + var(--lvl) * .4); overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.lg__rim::before { content: ""; position: absolute; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; pointer-events: none; will-change: transform;
  background: conic-gradient(from 20deg, var(--lg-red), var(--lg-gold-2), var(--lg-white), var(--lg-gold), var(--lg-blue), var(--lg-red));   /* the rim: the logo's colours turning (a square, turned about the centre) */
  animation: lg-rim-turn 14s linear infinite reverse; }
@keyframes lg-rim-turn { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (hover: hover) { [data-lg]:hover { animation: jp-lvl-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; filter: invert(1) hue-rotate(180deg); } }   /* under the mouse: the heartbeat drives --lvl (the bands swell, the fringes and rim brighten) and the button inverts - animation and font colours - as the play disc does */
[data-lg]:focus-visible { animation: jp-lvl-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; }
.jp-x, .live__fs { --lg-r: 50%; } .jp-nav-item { --lg-r: 0; } .jp-show__btn { --lg-r: 50%; }
.btn, .jp-pill, .jp-nav-item, .jp-sub__opt, .jp-sub__back, .jp-chat__btn, .jp-chat__form button, .jp-reader-choice__opt, .jp-fullsub__back, .jp-fullsub__opt, .jp-chat__teamsbtn, .a11y button { --lg-tile: 38%; }   /* wide buttons: the bands repeat along the pill at the disc's own scale instead of stretching */
@media (prefers-reduced-motion: reduce) { .lg__in::before, .lg__in::after, .lg__shine, .lg__shine::after, .lg__rim, .lg__rim::before, [data-lg]:hover, [data-lg]:focus-visible { animation: none !important; } }

.jp-box__cta { margin: 16px 0 0; text-align: center; }                                                      /* the panel's Join button: centred at every size */

/* ---------- the menu: a box with several selections opens them full screen, Back at the top centre (site.js) ----------
   v8 (Duane, 16 Oct 01:51): the box zooms to full screen - the pane is the box's own frost, grown from the box's rectangle (its clip-path)
   while its contents scale up out of the box's centre and the box's label (.jp-fullsub__ghost) rides along and fades; Back plays it in
   reverse. The pane is milky frosted glass like the menu's boxes (v8): a black title with a white glow, the options on dark smoked glass
   with white type (the living glass inside them, each on its own random clock). site.js animates it (clip-path, transform, opacity). */
.jp-fullsub { position: fixed; inset: 0; z-index: 60; display: block; overflow: auto; overscroll-behavior: contain; color: #120d0e;
  background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.5) 46%, rgba(255,255,255,.56) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.35) brightness(1.04); backdrop-filter: blur(22px) saturate(1.35) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.42), inset 0 0 70px rgba(255,255,255,.32); }
.jp-fullsub__in { min-height: 100%; box-sizing: border-box; display: grid; grid-template-rows: auto auto 1fr; align-content: start; justify-items: center; gap: 18px; transform-origin: 0 0;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
.jp-fullsub__ghost { position: fixed; z-index: 2; display: grid; align-content: center; justify-items: center; gap: 6px; pointer-events: none; text-align: center; box-sizing: border-box; padding: 10px 14px; transform-origin: 50% 50%;
  font: 600 clamp(11px, 1.4vw, 20px)/1.12 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #120d0e; text-shadow: 0 0 7px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.9); }
.jp-fullsub__ghost small { font: 500 clamp(8px, .8vw, 12px) var(--font-display); letter-spacing: .18em; color: rgba(18,13,14,.84); }
.jp-fullsub__back { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.6); background: rgba(18,13,14,.8); color: #fff; cursor: pointer; font: 700 12px var(--font-display); letter-spacing: .22em; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px rgba(0,0,0,.25); }
.jp-fullsub__back b { font-size: 18px; line-height: 0; }
.jp-fullsub__title { margin: 0; font: 700 clamp(22px, 3vw, 34px) var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #120d0e; text-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 2px #fff; text-align: center; text-wrap: balance; }
.jp-fullsub__title small { display: block; margin-top: 6px; font: 600 11px var(--font-display); letter-spacing: .28em; color: rgba(18,13,14,.84); text-shadow: 0 0 6px rgba(255,255,255,.9); }
.jp-fullsub__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; width: min(100%, 920px); align-content: start; }
.jp-fullsub__opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 20px 0 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: rgba(18,13,14,.76); color: #fff; text-decoration: none; font: 600 13px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s, border-color .25s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px rgba(0,0,0,.22); }
.jp-fullsub__opt:hover, .jp-fullsub__opt:focus-visible { background: color-mix(in srgb, var(--accent) 62%, rgba(18,13,14,.8)); border-color: var(--accent); }
.jp-fullsub__back:focus-visible, .jp-fullsub__opt:focus-visible, .jp-fullsub__more:focus-visible { outline: 2px solid #120d0e; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(255,255,255,.85); }
.jp-fullsub__opt .jp-fullsub__more { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1); color: #fff; font: 700 18px/1 var(--font-display); display: grid; place-items: center; cursor: pointer; }
.jp-fullsub__opt .jp-fullsub__more:hover { background: var(--accent); border-color: var(--accent); }
.jp-fullsub__opt .jp-fullsub__more[disabled] { opacity: .28; cursor: default; }
/* measured with the menu's light under them (v8 report): at .76-.8 smoke over the milky pane, and with the living glass's fringes and
   shine crossing the words, Back and the options' white type came to 2.3-4.4:1 - the smoke is deeper and the living glass in them
   quieter; a keyboard focus keeps the dark glass (the outline, the white halo and the accent rim mark it); under the mouse they invert,
   as every liquid-glass button does: black type on the light glass */
.jp-fullsub__back, .jp-fullsub__opt { background: rgba(12,8,9,.9); }
.jp-fullsub__opt:focus-visible:not(:hover) { background: rgba(12,8,9,.92); border-color: var(--accent); }
.jp-fullsub :is(.jp-fullsub__back, .jp-fullsub__opt) .lg__in::after { opacity: calc(.26 + var(--lvl) * .3); }
.jp-fullsub :is(.jp-fullsub__back, .jp-fullsub__opt) .lg__shine { opacity: calc(.2 + var(--lvl) * .3); }
html[data-fullsub="open"] { overflow: hidden; }
html[data-fullsub="open"] .a11y { opacity: 0; pointer-events: none; }
/* while the pane is up, the engine's own in-place expansion of the box is not drawn: the box keeps its label (and on phones its place in
   the rolodex), so the pane grows out of it and shrinks back into it exactly as it looks in the menu */
html[data-fullsub] .jp-menu__tile[data-expanded="true"] .jp-sub { visibility: hidden !important; opacity: 0 !important; transition: none !important; }
html[data-fullsub] .jp-menu__tile[data-expanded="true"] > span, html[data-fullsub] .jp-menu__tile[data-expanded="true"] > small { opacity: 1 !important; transition: none !important; }
html[data-device="phone"][data-fullsub] .jp-menu__tile[data-expanded="true"] { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; z-index: auto !important; min-height: 72px !important; }
/* v8 (Duane, 16 Oct 01:51 - "Randomize all the background animations in the menu"): the living glass of the menu's buttons runs on each
   button's own random clocks (site.js randomGlass: --lr-t* pace, --lr-d* phase, --lr-r* direction, --lr-sx / --lr-sy the pattern mirrored) */
.jp-menu [data-lg] .lg__in, .jp-fullsub [data-lg] .lg__in { scale: var(--lr-sx, 1) var(--lr-sy, 1); }
.jp-menu [data-lg] .lg__in::before, .jp-fullsub [data-lg] .lg__in::before { animation-duration: var(--lr-t1, 9s); animation-delay: var(--lr-d1, 0s); animation-direction: var(--lr-r1, alternate); }
.jp-menu [data-lg] .lg__in::after, .jp-fullsub [data-lg] .lg__in::after { animation-duration: var(--lr-t2, 7s); animation-delay: var(--lr-d2, -.25s); animation-direction: var(--lr-r2, alternate-reverse); }
.jp-menu [data-lg] .lg__shine, .jp-fullsub [data-lg] .lg__shine { animation-duration: var(--lr-t3, 5.5s); animation-delay: var(--lr-d3, 0s); animation-direction: var(--lr-r3, alternate); }
.jp-menu [data-lg] .lg__shine::after, .jp-fullsub [data-lg] .lg__shine::after { animation-duration: var(--lr-t4, 7s); animation-delay: var(--lr-d4, 0s); animation-direction: var(--lr-r4, normal); }   /* v12: the caustic has its own layer */
.jp-menu [data-lg] .lg__rim::before, .jp-fullsub [data-lg] .lg__rim::before { animation-duration: var(--lr-t5, 14s); animation-delay: var(--lr-d5, 0s); animation-direction: var(--lr-r5, reverse); }   /* v12: the rim turns as a layer */


/* ---------- the footer: brushed gold, the page's light shining through it at 17 % ---------- */
.foot { position: relative; isolation: isolate; overflow: hidden; color: #3a2810;
  background:
    linear-gradient(180deg, rgba(255,252,236,.42) 0%, rgba(255,255,255,0) 14%, rgba(0,0,0,0) 72%, rgba(64,38,6,.3) 100%),          /* lit along the top edge, a little shade at the foot */
    repeating-linear-gradient(180deg, rgba(255,250,228,.10) 0 1px, rgba(90,58,12,.07) 1px 2px, rgba(255,255,255,0) 2px 3px),       /* the brushing: fine horizontal grain... */
    repeating-linear-gradient(180deg, rgba(110,72,18,.06) 0 2px, rgba(255,240,200,.07) 2px 5px, rgba(110,72,18,0) 5px 11px),      /* ...over a coarser, offset grain so it never reads as stripes */
    linear-gradient(100deg, #b4852c 0%, #e2bf68 21%, #c6973a 40%, #efd388 57%, #bf8c32 77%, #dab45c 100%);                       /* the gold, with broad soft highlights across it */
  box-shadow: inset 0 1px 0 rgba(255,250,225,.8), inset 0 2px 0 rgba(150,104,30,.35); }
/* the light, where it sits behind the footer: v12 - a spot carried by a transform (site.js makes and moves it), nothing painted as it moves; v11's ::after gradient was re-drawn at every move */
.foot__light { position: absolute; left: -34vmin; top: -34vmin; width: 68vmin; height: 68vmin; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .17; will-change: transform; transform: translate(-100vmax, -100vmax);
  background: radial-gradient(circle 34vmin at 50% 50%, #fff 0%, rgba(255,246,214,.92) 18%, rgba(255,214,130,.5) 42%, rgba(255,190,90,0) 72%); }
.foot.is-rest .foot__light { animation: foot-beat .779s ease-in-out infinite; }   /* the light's 77 bpm heartbeat, through the gold */
@keyframes foot-beat { 0% { opacity: .17; } 12% { opacity: .23; } 24% { opacity: .17; } 36% { opacity: .2; } 50%, 100% { opacity: .17; } }
.foot__in { position: relative; z-index: 1; }
/* v12: the numbers (Systems > Show the numbers): one small line, bottom left, over everything, never in the way of a tap */
.jp-stats { position: fixed; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 95; max-width: calc(100vw - 20px); padding: 5px 10px; border-radius: 8px; pointer-events: auto; cursor: default; user-select: none;
  font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; color: #f6efe6; background: rgba(8,5,5,.82); box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); white-space: normal; }
html[data-device="phone"] .jp-stats { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); font-size: 10px; }   /* above the phone's chat tab */
.foot__dirs { gap: 26px 22px; }
.foot__dir h4 { font-weight: 800; color: #1b1206; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(70,44,8,.35); text-shadow: 0 1px 0 rgba(255,246,214,.45); }
.foot__dir h4 a:hover { color: #000; }
.foot__dir ul { gap: 6px; }
.foot__dir a { color: #2e1f0b; }
.foot { font-weight: 600; }
.foot__dir li a { font-weight: 600; }
.foot__extras { font-weight: 800; }
.foot__legal a { font-weight: 600; }
.foot__dir--stack h4 { margin-bottom: 14px; }   /* the stacked titles: one column of main titles, evenly spaced */
.foot__dir--stack h4:last-child { margin-bottom: 0; }
.foot__dir a:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.foot__line { border-top-color: rgba(70,44,8,.38); }
.foot__extras a { color: #1b1206; } .foot__extras a:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.foot__legal a { color: #3a2810; } .foot__legal a:hover { color: #000; }
.foot__games { color: #3a2810; }
.foot__social a { background: rgba(26,18,6,.88); color: #f3d68c; box-shadow: inset 0 0 0 1px rgba(255,236,180,.35); }
.foot__social a:hover { background: #000; color: #fff; }
.foot__lang select { background: rgba(26,18,6,.88); color: #f3d68c; border-color: rgba(70,44,8,.5); }
@media (prefers-reduced-motion: reduce) { .foot.is-rest .foot__light { animation: none; } }

/* ---------- Master & Qommander: every section a Liquid Glass panel, dark enough for the type to read on any background ---------- */
.field--mq [hidden] { display: none !important; }
.field--mq .crumbs { justify-self: start; padding: 8px 16px; border-radius: 999px; color: #efe3cf; background: rgba(8,5,5,.74); -webkit-backdrop-filter: blur(var(--jp-bblur, 10px)); backdrop-filter: blur(var(--jp-bblur, 10px)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.field--mq .crumbs b { color: #fff; }
.mq-panel.jp-glass { --r: 22px; --band: .5; padding: clamp(18px, 2.4vw, 30px); color: #f6efe6; scroll-margin-top: calc(var(--h-min) + 84px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 13%, rgba(18,12,11,.80)) 0%, rgba(11,8,8,.85) 36%, rgba(5,3,3,.91) 100%);
  -webkit-backdrop-filter: blur(var(--jp-bblur, 16px)) saturate(1.25) brightness(.9); backdrop-filter: blur(var(--jp-bblur, 16px)) saturate(1.25) brightness(.9); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
.mq-panel > *, .mq-bar > *, .mq-menu > * { position: relative; z-index: 3; }   /* above the glass's sheen and rim */
.mq-panel > * + * { margin-top: 14px; }
.mq-panel > .sec__head { margin-bottom: 4px; }
.mq-panel .sec__head h2 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.mq-bar.jp-glass { --r: 16px; --band: .3; padding: 18px 20px; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.3)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.32); }
.mq-bar.jp-glass::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.mq-panel .mq__grid > .mq-bar { margin: 0; }
.mq-bar h2, .mq .rule h2 { color: var(--accent-2); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.mq-h1 { font-size: clamp(26px, 3vw, 44px); color: #fff; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.mq-h1 span { color: var(--accent); }
.mq-lede { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: #efe6da; max-width: 70ch; margin: 10px 0 0; }
.mq-facts span { background: rgba(0,0,0,.45); color: #f6efe6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.mq-facts select { margin-left: 6px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.6); color: #fff; font: 600 11px var(--font-display); letter-spacing: .1em; }
.mq-tier { font: 600 10px var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-2); }
.field--mq .mq__row { color: #efe3cf; }
.field--mq .mq__row input:not([type="checkbox"]), .field--mq .mq__row textarea, .field--mq .mq__tools input { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.26); color: #fff; }
.field--mq .mq__row input::placeholder, .field--mq .mq__tools input::placeholder, .field--mq textarea::placeholder { color: rgba(255,255,255,.5); }
.field--mq .mq__row input:focus-visible, .field--mq .mq__row textarea:focus-visible, .field--mq .mq__tools input:focus-visible, .mq-pick__btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.field--mq .mq__row input[type="color"] { height: 40px; padding: 3px; cursor: pointer; }
.field--mq .mq__note { color: rgba(246,239,230,.84); }
.field--mq .mq__t th { color: #e9dcc6; }
.field--mq .mq__t td { color: #f6efe6; }
.field--mq .mq__t a { color: #fff; }
.field--mq .mq__t td, .field--mq .mq__t th { border-top-color: rgba(255,255,255,.12); }
.field--mq .kpi { background: rgba(0,0,0,.42); } .field--mq .kpi span { color: #e9dcc6; }
.mq-top-title a { font-weight: 700; }
.mq-okay { color: #5dff9b; } .mq-warn { color: #ffb08a; }
.mq-used { font: 500 13px var(--font-body); letter-spacing: 0; text-transform: none; color: #f6efe6; }
.mq-new { margin-left: 8px; }

/* the top menu: one entry per section, and Add New */
.mq-menu.jp-glass { --r: 999px; --band: .6; position: sticky; top: calc(var(--h-min) + 10px); z-index: 20; display: flex; flex-wrap: nowrap; justify-content: safe center; align-items: center; gap: 2px; padding: 6px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(180deg, rgba(22,15,13,.84), rgba(6,4,4,.92)); -webkit-backdrop-filter: blur(var(--jp-bblur, 14px)) saturate(1.3); backdrop-filter: blur(var(--jp-bblur, 14px)) saturate(1.3); }
.mq-menu__a { flex: none; padding: 9px 8px; border-radius: 999px; font: 700 9.5px var(--font-display); letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: #f1e6d4; text-decoration: none; transition: background .2s, color .2s; }
.mq-menu__a:hover { background: rgba(255,255,255,.12); color: #fff; }
.mq-menu__a.is-here { color: #fff; background: color-mix(in srgb, var(--accent) 32%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent); }
.mq-menu__add { flex: none; min-height: 32px; padding: 0 12px; margin-left: 4px; white-space: nowrap; }
html[data-device="phone"] .mq-menu.jp-glass { --r: 18px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; top: calc(var(--h-min) + 6px); }
html[data-device="phone"] .mq-menu__a, html[data-device="phone"] .mq-menu__add { flex: none; }

/* the scrolling dropdown */
.mq-pick { position: relative; }
.mq-pick__native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.mq-pick__btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.26); background: rgba(0,0,0,.55); color: #fff; font: 500 14px var(--font-body); letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer; }
.mq-pick__btn:hover { border-color: rgba(255,255,255,.45); }
.mq-pick__btn::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.mq-pick.is-open .mq-pick__btn::after { transform: translateY(2px) rotate(225deg); }
.mq-pick__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-pick__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; padding: 6px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(32,22,19,.98), rgba(10,7,7,.98)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.35), 0 18px 44px rgba(0,0,0,.6); }
.mq-pick__q { width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.5); color: #fff; font: 500 13px var(--font-body); }
.mq-pick__items { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 60%, transparent) transparent; }
.mq-pick__opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: #ece2d2; font: 500 13px var(--font-body); letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer; }
.mq-pick__opt.is-top { margin-top: 4px; color: #fff; font: 700 11px var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.mq-pick__opt.is-deep { color: #cdbfac; font-size: 12px; }
.mq-pick__opt:hover, .mq-pick__opt:focus-visible { background: rgba(255,255,255,.1); color: #fff; outline: none; }
.mq-pick__opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 34%, transparent); color: #fff; }
.mq-pick__opt em, .mq-new { flex: none; padding: 2px 7px; border-radius: 999px; background: var(--accent-2); color: #1a1208; font: 700 9px var(--font-display); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.mq-panel:has(.mq-pick.is-open), .mq-panel > :has(.mq-pick.is-open), .mq-bar > :has(.mq-pick.is-open), .mq-creatives > :has(.mq-pick.is-open) { z-index: 30; }
.mq-pick.is-open { z-index: 41; }
.mq-pick.is-up .mq-pick__list { top: auto; bottom: calc(100% + 6px); }   /* near the foot of the screen the list opens upward */   /* an open list sits over the panels below it */

/* sponsorship spaces */
.mq-creatives { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 8px 0 4px; }
.mq-cre.jp-glass { --r: 16px; padding: 12px; display: grid; gap: 2px; align-content: start; }
.mq-cre__pic { position: relative; aspect-ratio: 16 / 9; margin-bottom: 8px; border-radius: 10px; overflow: hidden; background: #000; }
.mq-cre__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-cre__mid { position: absolute; top: 0; bottom: 0; left: 21%; right: 21%; display: grid; place-items: center; text-align: center; background: rgba(0,0,0,.64); border-inline: 1px dashed rgba(255,255,255,.45); font: 700 9px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.8); }   /* the middle sits behind the column */
.mq-cre__tag { position: absolute; bottom: 6px; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.66); color: #fff; font: 700 8px var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.mq-cre__tag--l { left: 6px; } .mq-cre__tag--r { right: 6px; }
.mq-cre__miss { position: absolute; inset: 0; display: none; place-items: center; padding: 14px; text-align: center; font: 600 12px var(--font-body); color: #ffc2b4; background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px), #140b0b; }
.mq-cre__pic.is-bad .mq-cre__miss { display: grid; } .mq-cre__pic.is-bad .mq-cre__mid, .mq-cre__pic.is-bad .mq-cre__tag { display: none; }
.mq-cre .mq__actions { margin-top: 4px; gap: 8px; } .mq-cre .btn { min-height: 34px; padding: 0 12px; }
.mq-swatch { display: flex; gap: 8px; margin: 2px 0 6px; } .mq-swatch i { width: 48px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }

/* the live window: a FaceTime call opens in FaceTime - the poster, with the way in */
.live__join { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; background: #000 center / cover no-repeat; }
.live__join::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,0,0,.3), rgba(0,0,0,.78)); }
.live__join > * { position: relative; }
.live__join p { margin: 0; max-width: 36ch; color: #fff; font: 500 13px var(--font-body); text-shadow: 0 1px 3px #000; }
#mq-role { width: auto; }
@media (min-width: 1200px) {   /* nine columns across on a wide screen: the rooms, Tha Shop, J.P. Business, the stacked titles, Legal */
  html:not([data-device="phone"]):not([data-device="tablet"]) .foot__in { max-width: 1400px; }
  html:not([data-device="phone"]):not([data-device="tablet"]) .foot__dirs { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 24px 16px; }
  html:not([data-device="phone"]):not([data-device="tablet"]) .foot__dir h4 { letter-spacing: .14em; }
}


/* ---------- the logo tip - v8 (Duane, 16 Oct 01:51): "DOUBLE TAP FOR MENU AND SEARCH." rolls in under the logo once the page has fully
   loaded (after the load sequence), stays 7 s, then rolls out (site.js runs it, once on every page load). The smoked frosted strip unrolls
   from its middle, each letter turns over into place on its hinge one after another (32 ms apart), and at the end they turn away again
   letter by letter (26 ms apart) before the strip rolls up. Reduced / calm motion: a plain fade in and out. ---------- */
.logo-tip { position: absolute; left: 50%; top: calc(100% + 4px); z-index: 3; transform: translateX(-50%); pointer-events: none; visibility: hidden; white-space: nowrap;
  padding: 8px 18px; perspective: 420px; font: 700 11px/1 var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.logo-tip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; opacity: 0; transform: scaleX(.06);
  background: linear-gradient(var(--jp-frost-veil), var(--jp-frost-veil)), rgba(10,6,6,.76); -webkit-backdrop-filter: blur(var(--jp-bblur, 10px)); backdrop-filter: blur(var(--jp-bblur, 10px));
  box-shadow: var(--jp-frost-hi), 0 8px 22px rgba(0,0,0,.45); }
.logo-tip__line { display: inline-block; transform-style: preserve-3d; }
.logo-tip i { display: inline-block; font-style: normal; opacity: 0; transform-origin: 50% 50% -.4em; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.logo-tip.is-in { visibility: visible; }
.logo-tip.is-in::before { animation: tip-bar-in .42s cubic-bezier(.2, .8, .2, 1) both; }
.logo-tip.is-in i { animation: tip-roll-in .52s cubic-bezier(.2, .9, .3, 1.12) calc(.12s + var(--k) * 32ms) both; }
.logo-tip.is-in.is-out i { animation: tip-roll-out .44s cubic-bezier(.55, 0, .8, .2) calc(var(--k) * 26ms) both; }
.logo-tip.is-in.is-out::before { animation: tip-bar-out .42s cubic-bezier(.5, 0, .7, .2) calc(var(--n, 31) * 26ms) both; }
@keyframes tip-roll-in { 0% { opacity: 0; transform: rotateX(-96deg) translateY(.35em); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes tip-roll-out { 0% { opacity: 1; transform: none; } 65% { opacity: 1; } 100% { opacity: 0; transform: rotateX(96deg) translateY(-.35em); } }
@keyframes tip-bar-in { from { opacity: 0; transform: scaleX(.06); } to { opacity: 1; transform: none; } }
@keyframes tip-bar-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scaleX(.06); } }
@keyframes tip-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tip-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* v9 (Duane, 16 Oct 11:17 - "give its background the liquid glass of the other buttons"): the smoked strip is gone; under the words is a
   liquid-glass pill like the site's buttons - their dark tinted glass, the fine ring and lit top edge, and the living glass inside (the
   drifting bands, the fringes in the logo's colours, the shine, the rim turning; site.js gives it the same .lg layers as every button).
   It unrolls from its middle and rolls up at the end exactly as the strip did, with the same 7 s between. Behind the words the glass is a
   little deeper and its fringes and shine quieter (as in the menu's options), so the white type reads on the day and the night looks. */
.logo-tip::before { content: none; }
.logo-tip__glass { position: absolute; inset: 0; z-index: -1; border-radius: 999px; opacity: 0; transform: scaleX(.06); pointer-events: none; overflow: hidden; --lg-tile: 38%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 18%, rgba(14,9,9,.8)), color-mix(in srgb, var(--jp-tint) 7%, rgba(14,9,9,.82)) 55%, rgba(0,0,0,.8));
  -webkit-backdrop-filter: blur(var(--jp-bblur, 10px)) brightness(.6); backdrop-filter: blur(var(--jp-bblur, 10px)) brightness(.6);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px rgba(0,0,0,.45); }
.logo-tip.is-in .logo-tip__glass { animation: tip-bar-in .42s cubic-bezier(.2, .8, .2, 1) both; }
.logo-tip.is-in.is-out .logo-tip__glass { animation: tip-bar-out .42s cubic-bezier(.5, 0, .7, .2) calc(var(--n, 31) * 26ms) both; }
.logo-tip .lg__in::before { opacity: .34; } .logo-tip .lg__in::after { opacity: .38; } .logo-tip .lg__shine { opacity: .3; }
.logo-tip i { text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.55); }
.logo-tip:not(.is-in) .lg__in::before, .logo-tip:not(.is-in) .lg__in::after, .logo-tip:not(.is-in) .lg__shine, .logo-tip:not(.is-in) .lg__shine::after, .logo-tip:not(.is-in) .lg__rim, .logo-tip:not(.is-in) .lg__rim::before { animation-play-state: paused; }   /* nothing runs while it is away */
html[data-menu="open"] .logo-tip { display: none; }
.jp-header[data-wings="open"] .logo-tip { opacity: 0; transition: opacity .2s; }                          /* the wings are out: the tip has done its job */
html[data-device="phone"] .logo-tip { font-size: 10px; letter-spacing: .2em; padding: 7px 14px; top: calc(100% + 2px); }
@media (prefers-reduced-motion: reduce) { .logo-tip.is-in::before, .logo-tip.is-in .logo-tip__glass, .logo-tip.is-in i { animation: tip-fade-in .3s ease both; transform: none; } .logo-tip.is-in.is-out::before, .logo-tip.is-in.is-out .logo-tip__glass, .logo-tip.is-in.is-out i { animation: tip-fade-out .3s ease both; } }
html[data-motion="reduce"] .logo-tip.is-in::before, html[data-motion="reduce"] .logo-tip.is-in .logo-tip__glass, html[data-motion="reduce"] .logo-tip.is-in i { animation: tip-fade-in .3s ease both !important; transform: none; }
html[data-motion="reduce"] .logo-tip.is-in.is-out::before, html[data-motion="reduce"] .logo-tip.is-in.is-out .logo-tip__glass, html[data-motion="reduce"] .logo-tip.is-in.is-out i { animation: tip-fade-out .3s ease both !important; }

/* ---------- calm motion (Systems): the visitor's own switch, as strong as the device setting ---------- */
html[data-motion="reduce"] *:not(.jp-header), html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* ---------- the corner menu: the tip switch, the way to every setting, and hidden when the visitor says so ---------- */
html[data-pill="off"] .a11y { display: none !important; }
.a11y__all { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; }
.a11y__all svg { width: 18px; height: 18px; fill: currentColor; }
.a11y__all:hover, .a11y__all:focus-visible { background: rgba(255,255,255,.14); }
html[data-device="phone"] .a11y__all { width: 34px; height: 34px; }

/* ---------- Systems: the visitor's switches ---------- */
.sys.jp-glass { --r: 22px; --band: .4; padding: clamp(18px, 2.6vw, 32px); color: #f6efe6;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 12%, rgba(18,12,11,.82)), rgba(6,4,4,.9)); -webkit-backdrop-filter: blur(var(--jp-bblur, 16px)) saturate(1.2) brightness(.9); backdrop-filter: blur(var(--jp-bblur, 16px)) saturate(1.2) brightness(.9); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
.sys > * { position: relative; z-index: 3; }
.sys__note { margin: 0; font-size: 13px; color: rgba(246,239,230,.86); }
.sys__group { margin-top: 20px; }
.sys__group h2 { margin: 0 0 4px; font: 700 12px var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-2); }
.sys__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12); }
.sys__txt h3 { margin: 0; font: 700 15px var(--font-body); letter-spacing: 0; text-transform: none; color: #fff; -webkit-text-stroke: 0; }
.sys__txt p { margin: 3px 0 0; max-width: 60ch; font-size: 13px; line-height: 1.45; color: rgba(246,239,230,.84); }
.sys__switch { flex: none; position: relative; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); transition: background .25s; }
.sys__switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: transform .3s var(--jelly); }
.sys__switch[aria-checked="true"] { background: var(--accent); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45), 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }
.sys__switch[aria-checked="true"] span { transform: translateX(22px); }
.sys__seg { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.sys__seg button { padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: #efe3cf; cursor: pointer; font: 700 10px var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.sys__seg button:hover { color: #fff; background: rgba(255,255,255,.1); }
.sys__seg button[aria-checked="true"] { background: var(--accent-2); color: #140d06; }
.sys__select { flex: none; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.6); color: #fff; font: 600 13px var(--font-body); }
.sys__switch:focus-visible, .sys__seg button:focus-visible, .sys__select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.sys .btn { flex: none; }
.sys__state { min-height: 1.4em; margin: 14px 0 0; font-weight: 600; color: #5dff9b; }
html[data-device="phone"] .sys__row { flex-wrap: wrap; gap: 10px; }
.jp-header .jp-hint { display: none !important; }   /* the header engine's one-off intro line: the logo tip (above) does this job on the site */
html, body { overflow-x: clip; }   /* nothing may widen the page: the phone rolodex scales sections past the edge for a moment and the panels' liquid reaches 40 px out - a wider page makes phones zoom the whole site out (clip, not hidden: the sticky menu keeps working) */

/* ---------- readability: type that sits straight on the busy background gets a dark glass backing; light accents carry dark type ---------- */
:root { --on-accent: #fff; --scrim: rgba(8,5,5,.74); }
:root[data-style="blaq-gold"], :root[data-style="lakers-home"], :root[data-style="all-blaq"], :root[data-style="white-solid"] { --on-accent: #140d06; }          /* gold accents: white type on them reads at 2:1 - dark type at 9:1 */
.btn--primary, .btn--primary:hover { color: var(--on-accent); }
.a11y button[aria-pressed="true"] { color: var(--on-accent); }
.crumbs { justify-self: start; width: fit-content; max-width: 100%; padding: 8px 16px; border-radius: 999px; color: #efe3cf; background: var(--scrim); -webkit-backdrop-filter: blur(var(--jp-bblur, 10px)); backdrop-filter: blur(var(--jp-bblur, 10px)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.crumbs b { color: #fff; }
.notice { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, rgba(8,5,5,.86)), rgba(8,5,5,.86)); -webkit-backdrop-filter: blur(var(--jp-bblur, 10px)); backdrop-filter: blur(var(--jp-bblur, 10px)); color: #f6efe6; }
.field .text { padding: clamp(16px, 2vw, 24px); border-radius: 18px; background: var(--scrim); -webkit-backdrop-filter: blur(var(--jp-bblur, 12px)); backdrop-filter: blur(var(--jp-bblur, 12px)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.field .text p { color: #efe6da; }
.sec__head h2, .sec__head > a, .sec__head .kicker { width: fit-content; padding: 5px 14px; border-radius: 12px; background: var(--scrim); -webkit-backdrop-filter: blur(var(--jp-bblur, 8px)); backdrop-filter: blur(var(--jp-bblur, 8px)); }
.sec__head h2 { color: #fff; }
.sec__head > a { color: #efe3cf; }
.field > .sec > .kicker, .field > .sec > .lede, .field > .sec > p.table-line, .table-line { width: fit-content; max-width: 100%; padding: 6px 14px; border-radius: 12px; background: var(--scrim); -webkit-backdrop-filter: blur(var(--jp-bblur, 8px)); backdrop-filter: blur(var(--jp-bblur, 8px)); }
.lede { color: #efe6da; }
.facts span { background: var(--scrim); color: #f6efe6; -webkit-backdrop-filter: blur(var(--jp-bblur, 8px)); backdrop-filter: blur(var(--jp-bblur, 8px)); }
.rail__tag { color: #fff; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.62); white-space: nowrap; }
.slide__kind { width: fit-content; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.6); }

/* ---------- readability, pass 2 (from the second contrast audit, 13 Oct 2026) ---------- */
.foot { color: #170f05; }
.foot__dir a, .foot__legal a, .foot__games, .foot__extras, .foot__copy, .foot__lang, .foot small { color: #1b1206; }
.foot__dir li.is-off a { opacity: 1; font-style: italic; }                                   /* pages still being built: marked in italics, not faded, so they stay readable on the gold */
.jp-box:not([data-on="light"]) .jp-box__body  { box-shadow: inset 0 0 0 999px rgba(10,6,6,.42), 0 14px 40px rgba(0,0,0,.35); }   /* a smoked layer under the type: the glass still shows, the words always read */
.jp-box:not([data-on="light"]) .jp-box__sub,
.jp-box:not([data-on="light"]) .jp-box__title { box-shadow: inset 0 0 0 999px rgba(10,6,6,.3), 0 14px 40px rgba(0,0,0,.35); }
.jp-box { --box-text-dim: rgba(255,255,255,.94); }
.card__kicker { display: inline-block; width: fit-content; padding: 3px 8px; border-radius: 8px; background: var(--scrim); color: color-mix(in srgb, var(--accent-2) 50%, #fff); }
.card__state { background: color-mix(in srgb, var(--accent) 50%, #000); }
.btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 86%, #000)); }
.rules-hero .kicker, .rules-hero .lede { width: fit-content; max-width: 100%; padding: 6px 14px; border-radius: 12px; background: var(--scrim); -webkit-backdrop-filter: blur(var(--jp-bblur, 8px)); backdrop-filter: blur(var(--jp-bblur, 8px)); }
.sec__head .kicker, .field > .sec > .kicker, .rules-hero .kicker { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.rule h2, .mq-bar h2, .mq .rule h2 { color: color-mix(in srgb, var(--accent-2) 45%, #fff); }
.page-media figcaption, .video-slot small, .slide__detail small { padding: 4px 10px; border-radius: 8px; background: var(--scrim); color: #fff; }
.sys__seg button[aria-checked="true"] { background: #f2cd6b; color: #140d06; }
.sys__note { color: #f6efe6; }
.a11y__label { color: rgba(255,255,255,.8); }
.mq__t .bad { color: #ff8f86; } .mq__t .ok { color: #7dffb0; }
.mq code, .mq li, .mq td { color: #f3eadb; }
.cta p { color: #e9dfd0; }                                                                  /* the CTA panel is always dark, by day too */
.btn--primary .lg__in::before, .sys__seg button[aria-checked="true"] .lg__in::before { opacity: .14; }   /* the living glass stays, its dark bands lighter under the type */
.card__kicker { background: rgba(8,5,5,.84); color: #f1e7d6; }
.mq__t .bad { color: #ffb8b2; }


/* ---------- Master & Qommander: Sign Up / Sign In form editor (mq-signup.js) ---------- */
.mq-su{display:grid; gap:14px}
.mq-su__head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.mq-su__head h2{margin:0; font-size:16px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); flex:1 1 auto}
.mq-su__head h2 svg{vertical-align:-2px; margin-right:8px}
.mq-su__state{font:600 11px var(--font-display); letter-spacing:.16em; text-transform:uppercase; color:#ff6b7f; padding:4px 10px; border-radius:999px; border:1px solid currentColor}
.mq-su__state.ok{color:#2ecc71}
.mq-su__gate{display:grid; gap:10px; max-width:520px}
.mq-su__gate .row input{height:40px; border-radius:8px; border:1px solid var(--line); background:rgba(11,10,12,.5); color:var(--fg); padding:0 12px; font:15px var(--font-body); width:100%; max-width:300px}
.mq-su__msg{min-height:1.2em; color:#ff6b7f; font-size:13px; margin:0}
.mq-su__editor{display:grid; gap:10px}
.mq-su__group{border:1px solid var(--line); border-radius:12px; background:rgba(11,10,12,.35)}
.mq-su__group>summary{cursor:pointer; padding:12px 16px; font:600 13px var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--fg); list-style:none}
.mq-su__group>summary::-webkit-details-marker{display:none}
.mq-su__group>summary::before{content:"▸"; display:inline-block; margin-right:10px; color:var(--gold); transition:transform .2s}
.mq-su__group[open]>summary::before{transform:rotate(90deg)}
.mq-su__group>*:not(summary){padding:0 16px 16px}
.mq-su__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px 18px; max-height:560px; overflow:auto}
.mq-su__set{grid-column:1/-1; border:1px solid var(--line); border-radius:10px; padding:10px 12px 12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px 16px}
.mq-su__set legend{font:600 12px var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); padding:0 6px}
.mq-su__f{display:grid; gap:4px; font-size:13px}
.mq-su__lab{display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--fg-dim)}
.mq-su__f input[type=text],.mq-su__f input[type=url],.mq-su__f input[type=number],.mq-su__f textarea,.mq-su__table input[type=text],.mq-su__table input[type=url]{width:100%; border-radius:8px; border:1px solid var(--line); background:rgba(11,10,12,.5); color:var(--fg); padding:8px 10px; font:14px var(--font-body)}
.mq-su__f textarea{resize:vertical; min-height:64px}
.mq-su__f input:disabled{opacity:.55}
.mq-su__reset{background:none; border:1px solid var(--line); color:var(--gold); border-radius:6px; width:24px; height:22px; line-height:1; cursor:pointer}
.mq-su__table{grid-column:1/-1; display:grid; gap:8px}
.mq-su__sub{margin:0; font:600 12px var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.mq-su__tscroll{overflow:auto} .mq-su__table table{border-collapse:collapse; width:100%; min-width:520px}
.mq-su__table th{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); text-align:left; padding:4px 6px}
.mq-su__table td{padding:4px 6px; vertical-align:middle}
body.light .mq-su__group,body.light .mq-su__f input,body.light .mq-su__f textarea,body.light .mq-su__gate .row input{background:rgba(255,255,255,.7); color:#15131A}
@media (max-width:860px){ .mq-su{padding:14px} .mq-su__grid{grid-template-columns:1fr; max-height:none} .mq-su__set{grid-template-columns:1fr} }
.mq-su .mq-actions{display:flex; gap:12px; flex-wrap:wrap}
.mq-su .meta{font-size:12px; color:var(--fg-dim); margin:0}
.mq-su .bad{color:#ff6b7f; font-size:12px}
#mqSaved{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:200; padding:10px 16px; border-radius:12px; font-size:14px; max-width:min(92vw,640px); text-align:center; background:rgba(14,10,11,.92); color:var(--fg); border:1px solid var(--line); opacity:0; transition:opacity .3s; pointer-events:none}
#mqSaved.on{opacity:1}

/* =====================================================================================================================================
   v8 (Duane, 16 Oct 00:55) - 1. THE GLASS: A FROST AND A SLIGHT BLUR
   "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."
   The blur is the --jp-bblur block at the top of this file (5 px on desktops, each rule's own radius on phones). The frost: a milky
   layer over the blurred page (--jp-frost / --jp-frost-veil) and a soft inner highlight (--jp-frost-hi: a lit top edge, a fine rim, a
   glow just inside the edge), on every glass surface - the panels' frame and bars, crumbs, the section heads and kickers, the text
   blocks, the facts chips, notices, cards, the CTA, the rules, the chat, Systems and Master & Qommander's panels. Under the type a
   smoked layer stays (inset shadows paint over the background and under the type, in list order: the veil lies over the smoke), so the
   white type keeps its contrast: body >= 4.5:1, titles >= 3:1, measured on screenshots over the brightest tenth of what is behind
   the words, with the page's light and the panel's own light brought under them (v8 report). A panel the engine marks
   data-on="light" (a light backdrop) gets a milky frost with dark type and a white glow instead.
   ===================================================================================================================================== */
:root { --jp-frost-veil: rgba(255,255,255,.1); --jp-frost-chip: rgba(255,255,255,.08); --jp-smoke: rgba(10,6,6,.5); --jp-smoke-bar: rgba(10,6,6,.4);
  --jp-frost-top: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 72%); }   /* near-opaque panels: the frost catches the light along the top and leaves the type's ground dark */
.jp-box__frame.jp-glass { background: var(--jp-frost), linear-gradient(180deg, color-mix(in srgb, var(--box-tint) 12%, rgba(10,6,6,.3)) 0%, rgba(10,6,6,.36) 50%, rgba(10,6,6,.42) 100%); }   /* the frame round the bars: frosted, smoked enough for the play line and the meta row */
.jp-box:not([data-on="light"]) .jp-box__body { box-shadow: var(--jp-frost-hi), inset 0 0 0 999px var(--jp-frost-veil), inset 0 0 0 999px var(--jp-smoke), 0 12px 32px rgba(0,0,0,.32); }
.jp-box:not([data-on="light"]) .jp-box__sub,
.jp-box:not([data-on="light"]) .jp-box__title { box-shadow: var(--jp-frost-hi), inset 0 0 0 999px var(--jp-frost-veil), inset 0 0 0 999px var(--jp-smoke-bar), 0 12px 32px rgba(0,0,0,.32); }
.jp-box:not([data-on="light"]) { --box-text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.28); }
/* the type that sits on the frame itself: with the page's light and the panel's own light right behind it (and the heartbeat at its
   peak) the meta row and the play line's words fell to about 3.1:1 on the bare frame - the meta row is a frosted bar like the others,
   with the body's smoke. v9 (Duane, 16 Oct 13:02 - "remove the background from the Listen to the story line next to the play button"):
   the play line's words have no chip any more; they sit straight on the glass, at full strength, each letter in a close dark halo
   (on the light boxes they keep their dark type and white glow) */
.jp-box:not([data-on="light"]) .jp-box__meta { border-radius: calc(var(--box-r) - 6px); box-shadow: var(--jp-frost-hi), inset 0 0 0 999px var(--jp-frost-veil), inset 0 0 0 999px var(--jp-smoke); }
.jp-box:not([data-on="light"]) .jp-play__label { opacity: 1; background: none; box-shadow: none; padding: 0; border-radius: 0;
  text-shadow: 0 1px 1px #000, 0 0 2px #000, 0 0 4px rgba(0,0,0,.92), 0 0 8px rgba(0,0,0,.84), 0 0 14px rgba(0,0,0,.7), 0 0 26px rgba(0,0,0,.52); }
.jp-box[data-on="light"] .jp-box__frame.jp-glass { background: var(--jp-frost), linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.22)); }
.jp-box[data-on="light"] .jp-box__body, .jp-box[data-on="light"] .jp-box__sub, .jp-box[data-on="light"] .jp-box__title { box-shadow: var(--jp-frost-hi), inset 0 0 0 999px rgba(255,255,255,.36), 0 12px 32px rgba(0,0,0,.22); }
.jp-box[data-on="light"] { --box-text: #121014; --box-text-dim: rgba(18,16,20,.9); --box-text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.95); }   /* dark type with a white glow on the milky frost */
.crumbs, .field .text, .sec__head h2, .sec__head > a, .sec__head .kicker, .field > .sec > .kicker, .field > .sec > .lede, .field > .sec > p.table-line, .table-line,
.facts span, .rules-hero .kicker, .rules-hero .lede, .field--mq .crumbs { background: linear-gradient(var(--jp-frost-chip), var(--jp-frost-chip)), rgba(8,5,5,.8); box-shadow: var(--jp-frost-hi); }   /* the chips: a lighter veil over a deeper smoke, so their type (and the gold of a hovered link) keeps 4.5:1 over the light */
.sec__head .kicker, .field > .sec > .kicker, .rules-hero .kicker, .cta .kicker, .construct .kicker { color: color-mix(in srgb, var(--accent) 42%, #fff); }
/* a link under the mouse on the frosted chips: the page's second accent lifted toward white (every colourway - the legal pages' grey,
   the racing blue, the qard red - keeps 4.5:1 on the smoked chip; the plain accent fell to 2.4-4.4:1) and an underline as the cue */
.crumbs a:hover, .sec__head a:hover { color: color-mix(in srgb, var(--accent-2) 45%, #fff); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* the accent kickers a shade lighter on the frosted ground */
.notice { background: linear-gradient(var(--jp-frost-veil), var(--jp-frost-veil)), linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, rgba(8,5,5,.86)), rgba(8,5,5,.86)); box-shadow: var(--jp-frost-hi), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); }
.card { background: var(--jp-frost-top), linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 12%, rgba(12,8,9,.86)), color-mix(in srgb, var(--jp-tint) 4%, rgba(12,8,9,.9)) 40%, rgba(6,4,4,.94));
  box-shadow: var(--jp-frost-hi), 0 12px 32px rgba(0,0,0,.35); }   /* cards, the CTA, the rules and the notices are near-opaque glass: the frost and the highlight, no blur to pay for */
.cta { background: var(--jp-frost-top), linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 10%, rgba(12,8,9,.8)), rgba(6,4,4,.9)); box-shadow: var(--jp-frost-hi), 0 20px 50px rgba(0,0,0,.35); }
.rule { background: var(--jp-frost-top), linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 9%, rgba(12,8,9,.8)), rgba(6,4,4,.88)); box-shadow: var(--jp-frost-hi), 0 14px 36px rgba(0,0,0,.3); }
.construct { background: var(--jp-frost-top), linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 12%, rgba(12,8,9,.82)), rgba(6,4,4,.92)); box-shadow: var(--jp-frost-hi), 0 30px 80px rgba(0,0,0,.45); }
.jp-chat { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03) 40%, rgba(255,255,255,.05)), color-mix(in srgb, var(--hero-d) 82%, #000); box-shadow: var(--jp-frost-hi), 8px 0 30px rgba(0,0,0,.35); }
.mq-panel.jp-glass { background: var(--jp-frost), linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 13%, rgba(18,12,11,.80)) 0%, rgba(11,8,8,.85) 36%, rgba(5,3,3,.91) 100%); box-shadow: var(--jp-frost-hi), 0 22px 60px rgba(0,0,0,.5); }
.mq-menu.jp-glass { background: var(--jp-frost), linear-gradient(180deg, rgba(22,15,13,.84), rgba(6,4,4,.92)); box-shadow: var(--jp-frost-hi); }
.sys.jp-glass { background: var(--jp-frost), linear-gradient(180deg, color-mix(in srgb, var(--jp-tint) 12%, rgba(18,12,11,.82)), rgba(6,4,4,.9)); box-shadow: var(--jp-frost-hi), 0 22px 60px rgba(0,0,0,.5); }
.sys__txt p { color: rgba(246,239,230,.92); }   /* Systems' small print on the frost: 4.55:1 at .84 with the lights behind it - a shade brighter for room */
.search-hits { background: linear-gradient(var(--jp-frost-veil), var(--jp-frost-veil)), color-mix(in srgb, var(--hero-d) 94%, transparent); box-shadow: var(--jp-frost-hi), 0 20px 50px rgba(0,0,0,.5); }


/* =====================================================================================================================================
   v8 (Duane, 16 Oct 01:51) - 5. THE LOAD SEQUENCE: "When loading the website, have the background light turn up and gradually fade all
   of the assets into the scene, starting with the slideshow, then the sponsorship space image, and then everything else down the page."
   The page's head script sets html[data-seq] before the first paint: "in" (the scene dark, the parts held at 0) or "handoff" (straight
   after the sign-up's hand-off: the background is already up, only the parts are held). site.js runs the rest ("run", then "done"):
   the dark opens out from the light at the centre and lifts (1.1 s), then the slideshow, the sponsorship space and everything else fade in
   (Web Animations on each part; opacity and the translate property only, so nothing moves in the layout). No script: nothing is held. */
.bg::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; transform-origin: 50% 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.42) 0, rgba(0,0,0,.86) 22vmin, #000 46vmin); }
html[data-seq="in"] .bg::after { opacity: 1; }
html[data-seq="run"][data-seq-bg="dark"] .bg::after { animation: seq-light-up 1.1s cubic-bezier(.33, 0, .2, 1) both; }
@keyframes seq-light-up { 0% { opacity: 1; transform: scale(1); } 55% { opacity: .72; } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes seq-light-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes seq-fade { from { opacity: 0; } to { opacity: 1; } }
html:is([data-seq="in"], [data-seq="handoff"]) :is(main.field > *, .rail, .rail-strip, body > .foot, body > .jp-chat-tab, body > .a11y) { opacity: 0; }
.jp-header { background: none; }                                                                       /* the header's shading moves to a layer of its own, so it can come in with the slideshow */
.jp-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hero-d) 70%, transparent), color-mix(in srgb, var(--hero-d) 30%, transparent) 70%, transparent); }
html:is([data-seq="in"], [data-seq="handoff"]) .jp-header::before { opacity: 0; }
html[data-seq="run"] .jp-header::before { animation: seq-fade .8s cubic-bezier(.2, .7, .2, 1) var(--seq-head-d, .45s) both; }
@media (prefers-reduced-motion: reduce) { html[data-seq="run"][data-seq-bg="dark"] .bg::after { animation: seq-light-fade .35s ease both; } html[data-seq="run"] .jp-header::before { animation: seq-fade .3s ease both; } }
html[data-motion="reduce"][data-seq="run"][data-seq-bg="dark"] .bg::after { animation: seq-light-fade .35s ease both !important; }
html[data-motion="reduce"][data-seq="run"] .jp-header::before { animation: seq-fade .3s ease both !important; }
@media print { html[data-seq] :is(main.field > *, .rail, .rail-strip, body > .foot, body > .jp-chat-tab, body > .a11y), html[data-seq] .jp-header::before { opacity: 1 !important; } html[data-seq] .bg::after { display: none; } }

/* ---------- v9 (Duane, 16 Oct 11:17 - "On mobile, it appears to be choppy and responding slowly. Maximise the site for speed") ----------
   Measured first (Lighthouse mobile + Playwright with 4x CPU): ~400 animations ran at rest on the home page, ~340 of them in places nobody
   could see (the closed menu's ~60 buttons, five living-glass clocks each, one of them a custom property that costs a style pass a frame).
   The living glass now runs only on buttons on the screen (site.js sets data-lgv as they come into view) and never in the closed menu, the
   closed chat, the folded wings or the phone menu's rails while the menu is shut; the look of every button on the screen is unchanged. */
[data-lg][data-lgs] .lg__in::before, [data-lg][data-lgs] .lg__in::after, [data-lg][data-lgs] .lg__shine, [data-lg][data-lgs] .lg__shine::after, [data-lg][data-lgs] .lg__rim, [data-lg][data-lgs] .lg__rim::before,   /* v12: settled (site.js) - the glass holds its frame until the mouse comes near */
[data-lg]:not([data-lgv]) .lg__in::before, [data-lg]:not([data-lgv]) .lg__in::after, [data-lg]:not([data-lgv]) .lg__shine, [data-lg]:not([data-lgv]) .lg__shine::after, [data-lg]:not([data-lgv]) .lg__rim, [data-lg]:not([data-lgv]) .lg__rim::before,
.jp-menu:not([data-open="true"]) .lg__in::before, .jp-menu:not([data-open="true"]) .lg__in::after, .jp-menu:not([data-open="true"]) .lg__shine, .jp-menu:not([data-open="true"]) .lg__shine::after, .jp-menu:not([data-open="true"]) .lg__rim, .jp-menu:not([data-open="true"]) .lg__rim::before,
.jp-chat[aria-hidden="true"] .lg__in::before, .jp-chat[aria-hidden="true"] .lg__in::after, .jp-chat[aria-hidden="true"] .lg__shine, .jp-chat[aria-hidden="true"] .lg__shine::after, .jp-chat[aria-hidden="true"] .lg__rim, .jp-chat[aria-hidden="true"] .lg__rim::before,
.jp-header:not([data-wings="open"]) .jp-wing .lg__in::before, .jp-header:not([data-wings="open"]) .jp-wing .lg__in::after, .jp-header:not([data-wings="open"]) .jp-wing .lg__shine, .jp-header:not([data-wings="open"]) .jp-wing .lg__shine::after, .jp-header:not([data-wings="open"]) .jp-wing .lg__rim, .jp-header:not([data-wings="open"]) .jp-wing .lg__rim::before,
html:not([data-menu="open"]) .jp-roll-btn .lg__in::before, html:not([data-menu="open"]) .jp-roll-btn .lg__in::after, html:not([data-menu="open"]) .jp-roll-btn .lg__shine, html:not([data-menu="open"]) .jp-roll-btn .lg__shine::after, html:not([data-menu="open"]) .jp-roll-btn .lg__rim, html:not([data-menu="open"]) .jp-roll-btn .lg__rim::before { animation-play-state: paused; }
/* phones: a glass panel ran a backdrop filter for its frame, again for each of its three bars, and one more for each of the four bevels -
   eight filtered layers per panel, redrawn on every frame of the background's heartbeat. The bars sit inside the frame's glass, which already blurs the page behind
   them, so on phones they keep their frost, smoke and bevel but take no second blur of their own. */
html[data-device="phone"] .jp-box__frame > .jp-glass, html[data-device="phone"] .jp-box__frame > .jp-glass::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* (v9 tried content-visibility: auto on the footer and the lower rows: it moved the page during the load sequence on phones and took
   the footer's links out of the accessibility tree until they were near the screen - removed; the gain was small next to the rest) */
/* v9 (Duane, 16 Oct 11:17 - the play button's mask on phones): the living glass of every round or pill button sits in .lg, clipped by its
   rounded clip-path and a mask; on touch devices (iPhones, iPads) that wrapper is now a layer of its own, so WebKit applies the clip to the
   animated bands, fringes, shine and rim inside it instead of letting their squares show past the round edge; round buttons (the slideshow's
   arrows, the close and full-screen discs, the bell) also get a real circular mask */
html[data-touch="1"] .lg { transform: translateZ(0); }
.jp-x > .lg, .live__fs > .lg, .jp-show__btn > .lg, .jp-roll-btn > .lg, .jp-pill--bell > .lg { -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%); }

/* ---------- v9 (Duane, 16 Oct 13:05 - "make sure that section 1 and 2 resize to have the same margins between the sponsorship space
   frames. Always centered with the site logo."): section 1's slideshow frame is exactly as wide as section 2 at every size. It used to
   overflow its section to the right below ~1440 px (into the right sponsorship frame at 1366 and under): the slides' 300 px minimum
   height (and their words) came back through the 16:9 ratio as a minimum WIDTH, which widened section 1's auto grid column. The column
   is now the section's width and the slides may not widen it: where the words need more room the slide grows taller, never wider. Both
   sections sit in the field between the two frames with the same gap each side, centred under the logo. ---------- */
.stage { grid-template-columns: minmax(0, 1fr); }
.stage > *, .jp-show__track, .slide { min-width: 0; }
.jp-show__track > .slide { width: 100%; }   /* a ratio box in a grid cell is otherwise as wide as its 300 px minimum height makes it (533 px): the track's width, always */

/* ======================= v14 (Duane, 18 Oct 14:03) ======================= */
/* a page with no sponsorship space: the column opens to the full width (the legal policies, the Qard Game Room & Rules pages, About, Support, the AQQount portal) */
.site--open { grid-template-columns: 1fr; }
.site--open .field { grid-column: 1; max-width: 1040px; margin-inline: auto; width: 100%; }
/* the 18+ room: the age question first, the room hidden until it is answered */
.gate18 { padding: 28px clamp(18px, 3vw, 40px); border-radius: 24px; max-width: 720px; margin-inline: auto; text-align: center; }
.gate18 h2 { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 12px; }
.gate18 p { color: var(--fg-soft); max-width: 60ch; margin-inline: auto; }
.gate18__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.gate18__room[hidden] { display: none; }
.gate18__room { display: contents; }

/* ---------- BreaQing News: the drop ticker ----------
   The footer's look turned over: brushed BLACK gold - black with the gold's grain and a gold bevel - light gold type, the title in bold italic red.
   v15: it opens down from the top of the screen and pushes the whole site down (--jp-news-h, a registered property, so the push eases with
   the opening) over the same 1.3 s the two neon lines race round its growing frame with sparks (static under them for the first half
   second), then the badge blinks red, red, green, the title runs twice, and it closes: the lines run back and the sparks close out while the
   bar shrinks and the site moves back up (1.1 s). The source is cited at the end as an underlined link that opens a new tab. */
@property --jp-news-h { syntax: '<length>'; inherits: true; initial-value: 0px; }
html { --jp-news-h: 0px; transition: --jp-news-h 1.1s cubic-bezier(.7, 0, .8, .1); }       /* closing: the lines run back (race-draw played in reverse, 1.1 s) - the mirror of --ease, so bar and lines shut together */
html[data-news="open"] { --jp-news-h: var(--jp-news-size, 64px); transition: --jp-news-h 1.3s var(--ease); }   /* opening: with the lines racing round (race-draw, 1.3 s, --ease) */
body { padding-top: calc(var(--h-max) + env(safe-area-inset-top, 0px) + var(--jp-news-h)); }
.jp-header { top: var(--jp-news-h); }
.jp-menu, .jp-menu__frost, .jp-menu__bg, .jp-menu::before { top: var(--jp-news-h); }
.rail { top: calc(var(--h-min) + env(safe-area-inset-top, 0px) + var(--jp-news-h)); }
.jp-news { position: fixed; top: 0; left: var(--jp-chat-w); right: 0; z-index: 52; pointer-events: none; height: var(--jp-news-size, 64px); }
html[data-news="open"] .jp-news { pointer-events: auto; }
.jp-news__bar { clip-path: inset(0 0 calc(var(--jp-news-size, 64px) - var(--jp-news-h)) 0); }   /* v15: the bar opens downward as far as the site has moved: closed, nothing of it shows */
.jp-news__bar { position: relative; isolation: isolate; height: var(--jp-news-size, 64px); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 0 18px 0 14px; color: #e9cf85;
  background:
    linear-gradient(180deg, rgba(255,232,170,.16) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,0) 70%, rgba(0,0,0,.5) 100%),                   /* lit along the top edge, shade at the foot */
    repeating-linear-gradient(180deg, rgba(228,190,100,.11) 0 1px, rgba(0,0,0,.18) 1px 2px, rgba(255,255,255,0) 2px 3px),                 /* the brushing: the gold grain over black */
    repeating-linear-gradient(180deg, rgba(0,0,0,.14) 0 2px, rgba(214,174,86,.09) 2px 5px, rgba(0,0,0,0) 5px 11px),
    linear-gradient(100deg, #100c08 0%, #241b0f 21%, #0d0a07 40%, #2a2012 57%, #0b0806 77%, #1f170c 100%);                              /* black, with the gold's broad soft highlights */
  box-shadow: inset 0 1.5px 0 rgba(255,236,180,.85), inset 0 3px 0 rgba(150,104,30,.45), inset 0 -1.5px 0 rgba(230,190,110,.55), inset 0 -3px 0 rgba(0,0,0,.6), 0 12px 32px rgba(0,0,0,.55); }   /* the gold bevel: a light line over a dark one at the top, the reverse at the foot */
.jp-news__badge { position: relative; width: 40px; height: 40px; flex: none; }
.jp-news__badge img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(0,0,0,.7)); }
.jp-news__badge::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, var(--blink, transparent) 0 40%, transparent 72%); opacity: 0; z-index: -1; }
.jp-news__badge.is-blink::before { animation: badge-blink 1.3s steps(1) forwards; }
.jp-news__badge.is-blink img { animation: badge-tint 1.3s steps(1) forwards; }
.jp-news__line { position: relative; min-width: 0; overflow: hidden; white-space: nowrap; font: 500 15px/1.3 var(--font-body); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.jp-news__text { display: inline-block; white-space: nowrap; padding: 0 48px 0 14px; will-change: transform; opacity: 0; transition: opacity .4s; }   /* 14 px in from the line's left fade */
.jp-news__text.is-in { opacity: 1; }
.jp-news__text.is-run { animation: news-run var(--news-dur, 12s) linear var(--news-runs, 2); }                                                /* only a title too long for the bar marquees; a short one holds */
@keyframes news-run { from { transform: translateX(var(--news-from, 0px)); } to { transform: translateX(var(--news-to, -100%)); } }
.jp-news__kick { font: 800 italic 15px/1.3 var(--font-body); color: #ff3b47; letter-spacing: .01em; margin-right: 8px; text-shadow: 0 0 10px rgba(255,59,71,.35); }
.jp-news__title { color: #f3dfa6; }
.jp-news__src { margin-left: 12px; color: #e9cf85; }
.jp-news__src a { color: #ffe9b0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.jp-news__src a:hover { color: #fff; }
.jp-news__static { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); background-size: auto, 120px 120px; }
.jp-news__static.is-on { opacity: .85; animation: static-jitter .08s steps(2) infinite; }
.jp-news .race { inset: 0 0 auto 0; width: 100%; height: 1px; z-index: 53; }   /* over the bar, its height set each frame to the bar's (site.js) */
.jp-news .race__fx { z-index: 54; }
.jp-news__x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; z-index: 5; }
.jp-news__x::before, .jp-news__x::after { width: 11px; height: 1.6px; }
html[data-device="phone"] .jp-news__bar { --jp-news-size: 56px; gap: 10px; padding: 0 44px 0 10px; }
html[data-device="phone"] .jp-news { left: 0; }
html[data-device="phone"] .jp-news__badge { width: 32px; height: 32px; }
html[data-device="phone"] .jp-news__line, html[data-device="phone"] .jp-news__kick { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { html { transition: none; } .jp-news__text.is-run { animation: none; } .jp-news__static.is-on { animation: none; } }
html[data-motion="reduce"] { transition: none; }
html[data-motion="reduce"] .jp-news__text.is-run { animation: none; }

/* Master & Qommander - Readiness (v15): the status chips, the access register's doors */
.mq-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 700 10px/1.6 var(--font-display); letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.25); color: #e8e8e8; margin-right: 8px; vertical-align: middle; }
.mq-chip--ok, .mq-chip--live { border-color: #3fbf6a; color: #7fe3a1; }
.mq-chip--attention { border-color: #e04a52; color: #ff8a90; }
.mq-chip--needs, .mq-chip--planned { border-color: rgba(255,255,255,.35); color: #bdbdbd; }
.mq-chip--ready, .mq-chip--connected { border-color: var(--gold); color: #f1cf62; }
#mq-conn select { vertical-align: middle; }
.mq-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.mq-door { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.28); }
.mq-door h3 { font: 700 13px var(--font-display); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; color: #fff; }
.mq-door p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: #d6d6d6; }
.mq-door__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 6px; }
.mq-door__cols h4 { font: 700 10px var(--font-display); letter-spacing: .16em; text-transform: uppercase; margin: 6px 0 2px; }
.mq-door__pro h4 { color: #7fe3a1; } .mq-door__con h4 { color: #ff8a90; }
.mq-door ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.45; color: #cfcfcf; }
@media (max-width: 560px) { .mq-door__cols { grid-template-columns: 1fr; } }

/* Controllers, TV remotes and headset controllers (v15, js/jp-input.js): html[data-input] says what is in hand. A pad or a remote
   gets a thick, bright focus ring (the pointer's hover is the ring now), larger hit areas, and the hint toast once. */
:root[data-input="pad"] :focus, :root[data-input="remote"] :focus { outline: 3px solid var(--gold) !important; outline-offset: 4px !important; box-shadow: 0 0 0 7px rgba(212,160,23,.28), 0 0 22px rgba(212,160,23,.45) !important; transition: outline-offset .12s var(--ease); }
:root[data-input="pad"] :focus:not(:focus-visible), :root[data-input="remote"] :focus:not(:focus-visible) { outline: 3px solid var(--gold) !important; }
:root[data-input="remote"] { --rail: 0%; --field: 100%; font-size: 112.5%; }        /* ten feet from the screen: the field takes the width, the type grows */
:root[data-input="remote"] .rail, :root[data-input="remote"] .rail-strip { display: none !important; }
:root[data-input="remote"] .btn, :root[data-input="remote"] .jp-nav-item, :root[data-input="remote"] .jp-menu__tile, :root[data-input="pad"] .jp-menu__tile { min-height: 48px; }
:root[data-input="remote"] .jp-chat-tab, :root[data-input="remote"] .logo-tip { display: none !important; }
.jp-input-hint { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 9000; max-width: min(92vw, 640px); padding: 12px 18px; border-radius: 14px; background: rgba(8,5,5,.9); color: #f3f3f3; border: 1px solid rgba(212,160,23,.55); box-shadow: 0 10px 40px rgba(0,0,0,.5); font: 500 14px/1.45 var(--font-body); animation: jp-input-hint-in .35s var(--ease) both; }
.jp-input-hint b { color: var(--gold); font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
@keyframes jp-input-hint-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media print { .jp-input-hint { display: none !important; } }