/* 1kamas: HALLOWEEN OVERLAY (the 5050 copy). Everything here applies only while <html> has the attribute
   data-k1hw, which is now always set, in both themes (dark, the default, and light; see 1k-hw-mode.js).
   In the dark theme it is the dark theme made darker; in the light theme the site's light colours stay,
   and the pieces that sit on light surfaces get their own colours (see "Light theme" at the end).
   Both get the animated scenes added by 1k-hw-mode.js: a moon with drifting clouds, the witch
   crossing the sky, bats beating their wings, falling leaves, a Chafer skeleton soldier, a black cat, a cauldron, candles, a graveyard with a waving skeleton, a hand coming out
   of the ground, flickering jack-o'-lanterns, a ghost, fog, a spider on its thread, and the Sram,
   Zobal, Sadida and Roublard emblems. The scenes are aria-hidden, cannot be clicked, sit under the
   texts and buttons and never move the layout. Purchase elements keep their purple.
   Reduced motion: everything stands still. Printing and high-contrast mode: no scenes.
   Disabled on the checkout pages (like the other site-wide sheets, see 1k-pages.js). */

/* ---------- Colours: the dark theme, one step darker and colder ---------- */
html[data-k1hw][data-theme="dark"] {
  --canvas: 12 9 17;        /* #0C0911 */
  --surface: 24 19 32;      /* #181320 */
  --surface-2: 40 33 52;
  --line: 46 38 58;
  --brand-soft: 38 30 50;
  --brand-tint: 30 24 40;
  scrollbar-color: #5b3c7a #0c0911;
}
html[data-k1hw] ::selection { background: #e8762b; color: #120b1c; }

/* ---------- Theme controls: two themes, Clair and Nuit ----------
   The site's switch (phone menu) and the header button's menu offer Clair · Auto · Nuit: "Auto" (the
   choice with the half-filled circle icon) is hidden, and so is the dot the button shows in Auto.
   The header button shows the active theme in orange: a moon in the dark theme, a sun in the light
   one (its label says the same; a click switches, see 1k-hw-mode.js). The checkout pages, where this
   sheet is switched off, have no theme controls. */
[role="radiogroup"] > [role="radio"]:has(path[d="M12 3a9 9 0 0 0 0 18Z"]) { display: none !important; }
[role="menu"] > [role="menuitemradio"]:has(path[d="M12 3a9 9 0 0 0 0 18Z"]) { display: none !important; }
.theme-toggle-btn > span[aria-hidden="true"] { display: none !important; }
/* (the site's own icon fades in on every load and switch with an animation, which would outweigh
   a plain opacity: it is stopped, so the other theme's icon never shows through) */
html[data-k1hw] .theme-toggle-btn .theme-toggle-icon { opacity: 0; animation: none !important; }
html[data-k1hw] .theme-toggle-btn::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; pointer-events: none;
  background: #f0a35a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-k1hw][data-theme="light"] .theme-toggle-btn::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.6' fill='%23000' stroke='none'/%3E%3Cpath d='M12 1.8v2.7M12 19.5v2.7M22.2 12h-2.7M4.5 12H1.8M19.2 4.8l-1.9 1.9M6.7 17.3l-1.9 1.9M19.2 19.2l-1.9-1.9M6.7 6.7L4.8 4.8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.6' fill='%23000' stroke='none'/%3E%3Cpath d='M12 1.8v2.7M12 19.5v2.7M22.2 12h-2.7M4.5 12H1.8M19.2 4.8l-1.9 1.9M6.7 17.3l-1.9 1.9M19.2 19.2l-1.9-1.9M6.7 6.7L4.8 4.8'/%3E%3C/svg%3E");
}
/* Windows high-contrast mode would paint the orange icon in the background colour (invisible):
   it takes the button text colour there */
@media (forced-colors: active) {
  html[data-k1hw] .theme-toggle-btn::after { forced-color-adjust: none; background: ButtonText; }
}
html:not([data-k1hw]) .k1hw, html:not([data-k1hw]) .k1hw-hdr { display: none; }

/* ---------- Scene boxes ---------- */
html[data-k1hw] .k1hw-host { position: relative; isolation: isolate; }
html[data-k1hw] .k1hw {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit;
  contain: layout paint;
}
html[data-k1hw] .k1hw i { position: absolute; display: block; font-style: normal; }
html[data-k1hw] .k1hw svg, html[data-k1hw] .k1hw img { display: block; width: 100%; height: 100%; }
html[data-k1hw] .k1hw img { object-fit: contain; }
/* Homepage hero: placed between the hero's picture and its content (not isolated) */
html[data-k1hw] .hp-hero > .k1hw--hero { z-index: auto; isolation: isolate; }
/* FAQ and loyalty heads: their plum is a grid item (::before); put it under the scene */
html[data-k1hw] body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1)::before { position: relative; z-index: -2; }
html[data-k1hw] .k1hw--faq { inset: auto; grid-area: 1 / 1 / 4 / 2; position: relative; align-self: stretch; justify-self: stretch; }

/* ---------- Pieces ---------- */
/* Night veil over the hero picture, and a soft lightning flash twice every 16s */
html[data-k1hw] .k1hw-night { inset: 0; background: rgb(6 3 14 / .38); }
html[data-k1hw] .k1hw-flash { inset: 0; background: #d8d0f0; opacity: 0; animation: k1hw-flash 16s linear infinite; }
@keyframes k1hw-flash { 0%, 61%, 63.5%, 64.5%, 66%, 100% { opacity: 0; } 62% { opacity: .1; } 65% { opacity: .07; } }

/* Moon and clouds */
html[data-k1hw] .k1hw-moon { width: 150px; height: 150px; }
html[data-k1hw] .k1hw-cloud { width: 170px; height: 42px; fill: #1b1328; opacity: .9; animation: k1hw-drift 46s linear infinite; }
html[data-k1hw] .k1hw-c2 { width: 120px; height: 30px; opacity: .75; animation-duration: 62s; animation-delay: -30s; }
@keyframes k1hw-drift { from { transform: translateX(calc(var(--W, 1200px) + 40px)); } to { transform: translateX(-220px); } }

/* The witch crosses the sky every 22s */
html[data-k1hw] .k1hw-witch { width: 64px; height: 42px; left: 0; animation: k1hw-witch 22s linear infinite; }
html[data-k1hw] .k1hw-witch svg { animation: k1hw-bob 1.6s ease-in-out infinite alternate; }
@keyframes k1hw-witch { 0% { transform: translateX(calc(var(--W, 1200px) + 20px)); } 45%, 100% { transform: translateX(-90px); } }
@keyframes k1hw-bob { from { transform: translateY(-2px) rotate(-3deg); } to { transform: translateY(3px) rotate(2deg); } }

/* Bats: wings beating; a flock crossing, and two hovering */
html[data-k1hw] .k1hw-bat { width: 30px; height: 15px; fill: #0f0918; }
html[data-k1hw] .k1hw-eye { fill: #f6a43c; }
html[data-k1hw] .k1hw-wing { transform-box: fill-box; animation: k1hw-flap .26s ease-in-out infinite alternate; }
html[data-k1hw] .k1hw-wl { transform-origin: 100% 35%; }
html[data-k1hw] .k1hw-wr { transform-origin: 0% 35%; }
@keyframes k1hw-flap { from { transform: scaleY(1); } to { transform: scaleY(-.45); } }
html[data-k1hw] .k1hw-flock { left: 0; top: 0; width: 120px; height: 50px; animation: k1hw-flock 17s linear infinite; animation-delay: -4s; }
html[data-k1hw] .k1hw-flock .k1hw-bat { animation: k1hw-wave 1.4s ease-in-out infinite alternate; }
html[data-k1hw] .k1hw-b1 { left: 0; top: 18px; }
html[data-k1hw] .k1hw-b2 { left: 34px; top: 4px; width: 24px; height: 12px; animation-delay: -.5s; }
html[data-k1hw] .k1hw-b3 { left: 62px; top: 26px; width: 22px; height: 11px; animation-delay: -.9s; }
html[data-k1hw] .k1hw-b4 { left: 92px; top: 10px; width: 18px; height: 9px; animation-delay: -.3s; }
html[data-k1hw] .k1hw-b2 .k1hw-wing { animation-delay: -.1s; }
html[data-k1hw] .k1hw-b3 .k1hw-wing { animation-delay: -.18s; }
html[data-k1hw] .k1hw-b4 .k1hw-wing { animation-delay: -.07s; }
@keyframes k1hw-flock { 0% { transform: translateX(-140px); } 40%, 100% { transform: translateX(calc(var(--W, 1200px) + 20px)); } }
@keyframes k1hw-wave { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
html[data-k1hw] .k1hw-hover { animation: k1hw-hover 3.2s ease-in-out infinite alternate; }
html[data-k1hw] .k1hw-b6 { width: 22px; height: 11px; animation-duration: 2.6s; animation-delay: -1.2s; }
@keyframes k1hw-hover { from { transform: translate(0, 0); } 50% { transform: translate(8px, -6px); } to { transform: translate(-6px, 4px); } }

/* Spider going down and up its thread */
html[data-k1hw] .k1hw-spider { top: 0; width: 14px; height: 24px; animation: k1hw-spider 9s ease-in-out infinite; }
@keyframes k1hw-spider { 0%, 100% { height: 18px; } 45%, 60% { height: var(--drop, 60px); } }

/* Ground: everything stands on the bottom line of its box */
html[data-k1hw] .k1hw-ground { left: 0; right: 0; bottom: 0; height: 100px; }
html[data-k1hw] .k1hw-ground > i { bottom: 0; }
html[data-k1hw] .k1hw-graves { width: 220px; height: 40px; }
html[data-k1hw] .k1hw-skel { width: 64px; height: 64px; }
html[data-k1hw] .k1hw-skelarm { transform-box: view-box; transform-origin: 18px 33px; animation: k1hw-wavehand 2.4s ease-in-out infinite; }
@keyframes k1hw-wavehand { 0%, 55%, 100% { transform: rotate(0); } 62%, 78% { transform: rotate(-22deg); } 70%, 86% { transform: rotate(12deg); } }
html[data-k1hw] .k1hw-hand { width: 24px; height: 34px; }
html[data-k1hw] .k1hw-handup { animation: k1hw-rise 7s ease-in-out infinite; }
@keyframes k1hw-rise { 0%, 100% { transform: translateY(26px); } 30%, 70% { transform: translateY(0); } 50% { transform: translateY(2px) rotate(-3deg); } }
html[data-k1hw] .k1hw-jack { width: 30px; height: 26px; }
html[data-k1hw] .k1hw-flame { animation: k1hw-flicker 2.3s steps(1) infinite; }
html[data-k1hw] .k1hw-j2 .k1hw-flame { animation-duration: 1.7s; animation-delay: -.6s; }
@keyframes k1hw-flicker { 0% { opacity: 1; } 12% { opacity: .62; } 18% { opacity: .95; } 40% { opacity: .78; } 47% { opacity: 1; } 70% { opacity: .55; } 76% { opacity: .9; } 90% { opacity: .7; } }
html[data-k1hw] .k1hw-tree { width: 120px; height: 90px; }
html[data-k1hw] .k1hw-rope { left: 82%; top: 17%; width: 1px; height: 38%; background: #6b5a52; transform-origin: 50% 0; animation: k1hw-swing 3.4s ease-in-out infinite alternate; }
html[data-k1hw] .k1hw-sadida { left: -11px; bottom: -20px; width: 22px; height: 22px; }
@keyframes k1hw-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
html[data-k1hw] .k1hw-zobal { width: 26px; height: 26px; animation: k1hw-glare 5s ease-in-out infinite; }
@keyframes k1hw-glare { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-4deg); } }
html[data-k1hw] .k1hw-roublard { width: 24px; height: 24px; }
html[data-k1hw] .k1hw-spark { right: -2px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 0 2px #e8762b; animation: k1hw-spark .5s steps(2) infinite; }
@keyframes k1hw-spark { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.15); opacity: 1; } }
html[data-k1hw] .k1hw-ghost { width: 30px; height: 38px; animation: k1hw-ghost 4.5s ease-in-out infinite alternate; }
html[data-k1hw] .k1hw-ghostbody { fill: rgb(236 230 248 / .9); }
html[data-k1hw] .k1hw-mouth { transform-box: fill-box; transform-origin: 50% 50%; animation: k1hw-boo 4.5s ease-in-out infinite alternate; }
@keyframes k1hw-ghost { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-12px) rotate(4deg); } }
@keyframes k1hw-boo { from { transform: scale(.6); } to { transform: scale(1.1); } }
html[data-k1hw] .k1hw-sram { width: 30px; height: 30px; animation: k1hw-float 5.5s ease-in-out infinite alternate; }
@keyframes k1hw-float { from { transform: translateY(0) rotate(-7deg); opacity: .85; } to { transform: translateY(-9px) rotate(6deg); opacity: 1; } }

/* Eyes blinking in the dark, between the headstones */
html[data-k1hw] .k1hw-eyes { width: 20px; height: 8px; fill: #f6a43c; transform-origin: 50% 50%; animation: k1hw-blink 5s steps(1) infinite; }
html[data-k1hw] .k1hw-e2 { width: 14px; height: 6px; fill: #e0503c; animation-duration: 6.5s; animation-delay: -2s; }
@keyframes k1hw-blink { 0%, 100% { transform: scaleY(1); opacity: 1; } 46% { transform: scaleY(.15); } 48% { transform: scaleY(1); } 70% { opacity: 0; } 82% { opacity: 1; } }

/* Fog: two slow bands of mist along the ground */
html[data-k1hw] .k1hw-fog { left: 0; right: 0; bottom: 0; height: 70px; }
html[data-k1hw] .k1hw-fog > i {
  left: 0; bottom: 0; width: 200%; height: 100%;
  background: radial-gradient(closest-side, rgb(214 204 236 / .16), transparent) 0 100% / 340px 60px repeat-x,
              radial-gradient(closest-side, rgb(214 204 236 / .1), transparent) 170px 70% / 260px 46px repeat-x;
  animation: k1hw-fog 38s linear infinite;
}
html[data-k1hw] .k1hw-fog > i + i { bottom: 8px; opacity: .8; animation-duration: 55s; animation-direction: reverse; }
@keyframes k1hw-fog { from { transform: translateX(0); } to { transform: translateX(-680px); } }

/* ---------- Homepage hero layout (variables measured by 1k-hw-mode.js, px from the hero's top-left) ----------
   --g: ground line (top of the promises strip) · --tL/--tT/--tR: game tiles · --qL/--qB: quick order
   --eT: "1KAMAS" label top · --textR/--textB: right and bottom of the text column (logos included)
   --colR: right edge of the text column */
html[data-k1hw] .k1hw--hero .k1hw-moon { left: calc(var(--tR) - 168px); top: -62px; width: 150px; height: 150px; }
html[data-k1hw] .k1hw--hero .k1hw-cloud { top: 6px; }
html[data-k1hw] .k1hw--hero .k1hw-c2 { top: 30px; }
html[data-k1hw] .k1hw--hero .k1hw-witch { top: max(4px, calc(var(--tT) / 2 - 24px)); }
html[data-k1hw] .k1hw--hero .k1hw-flock { top: max(0px, calc(var(--eT) - 66px)); }
html[data-k1hw] .k1hw--hero .k1hw-b5 { left: calc(var(--tR) - 236px); top: 8px; }
html[data-k1hw] .k1hw--hero .k1hw-b6 { left: calc(var(--tR) - 40px); top: 4px; }
html[data-k1hw] .k1hw--hero .k1hw-spider { left: calc(var(--tL) - 104px); --drop: calc(var(--eT) - 10px); }
html[data-k1hw] .k1hw--hero .k1hw-sram { left: calc(var(--tL) + 190px); top: 2px; width: min(30px, calc(var(--tT) - 4px)); height: min(30px, calc(var(--tT) - 4px)); }
/* Ground: from the ground line up to 14px under the logos (left) and 6px under the quick order (right) */
html[data-k1hw] .k1hw--hero .k1hw-ground { top: auto; bottom: calc(var(--H) - var(--g)); height: calc(var(--g) - var(--textB) - 14px); }
html[data-k1hw] .k1hw--hero .k1hw-graves { left: 14px; height: min(40px, 100%); width: auto; aspect-ratio: 220 / 40; }
html[data-k1hw] .k1hw--hero .k1hw-skel { left: 70px; height: min(64px, 100%); width: auto; aspect-ratio: 1; bottom: -2px; }
html[data-k1hw] .k1hw--hero .k1hw-hand { left: 246px; height: min(34px, 100%); width: auto; aspect-ratio: 24 / 34; }
html[data-k1hw] .k1hw--hero .k1hw-j1 { left: 286px; height: min(26px, 100%); width: auto; aspect-ratio: 30 / 26; }
html[data-k1hw] .k1hw--hero .k1hw-j2 { left: 322px; height: min(20px, 100%); width: auto; aspect-ratio: 30 / 26; }
/* The tree stands between the logos and the quick order when there is room for it */
html[data-k1hw] .k1hw--hero .k1hw-tree { left: calc(var(--textR) + 10px); width: clamp(0px, calc(var(--tL) - var(--textR) - 20px), 120px); height: auto; aspect-ratio: 120 / 90; }
/* Under the quick order: the Zobal mask on its stone and the Roublard bomb */
html[data-k1hw] .k1hw--hero .k1hw-zobal { left: calc(var(--qL) + 26px); bottom: 2px; height: min(26px, calc(var(--g) - var(--qB) - 8px)); width: auto; aspect-ratio: 1; }
html[data-k1hw] .k1hw--hero .k1hw-roublard { left: calc(var(--qL) + 96px); bottom: 2px; height: min(24px, calc(var(--g) - var(--qB) - 8px)); width: auto; aspect-ratio: 1; }
/* The ghost floats in the 40px lane between the texts and the tiles */
html[data-k1hw] .k1hw--hero .k1hw-ghost { left: calc(var(--tL) - 35px); top: calc(var(--tT) + 120px); }
html[data-k1hw] .k1hw--hero .k1hw-fog { bottom: calc(var(--H) - var(--g) - 30px); }
html[data-k1hw] .k1hw--hero .k1hw-e1 { left: 40px; bottom: 26px; }
html[data-k1hw] .k1hw--hero .k1hw-e2 { left: 214px; bottom: 14px; }
/* Stacked hero (below 1024px): moon and witch in the band above the label, the graveyard in the
   strip under the quick order, no tree, ghost or floating skull */
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-moon { left: auto; right: -20px; top: -46px; width: 96px; height: 96px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-b5 { left: auto; right: 74px; top: 4px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-b6 { left: auto; right: 104px; top: 18px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-flock { top: 0; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-spider { left: 62%; --drop: calc(var(--eT) - 8px); }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-ground { height: calc(var(--g) - var(--qB) - 4px); }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-skel { left: auto; right: 10px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-hand { left: 120px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-j1 { left: 156px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-j2 { left: 192px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-e1 { left: 40px; bottom: 12px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-e2 { display: none; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-witch { top: 2px; width: 46px; height: 30px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-zobal,
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-roublard { display: none; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-tree,
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-ghost,
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-sram { display: none; }

/* ---------- Plum page heads (servers, FAQ, blog, shop, service and legal pages) ---------- */
html[data-k1hw] .k1hw--head .k1hw-moon { right: 26px; top: -40px; width: 100px; height: 100px; }
html[data-k1hw] .k1hw--head .k1hw-cloud { top: 4px; width: 130px; height: 32px; }
html[data-k1hw] .k1hw--head .k1hw-b5 { right: 140px; top: 10px; }
html[data-k1hw] .k1hw--head .k1hw-b6 { right: 18px; top: 52px; }
html[data-k1hw] .k1hw--head .k1hw-flock { top: 0; transform-origin: 0 0; scale: .8; }
html[data-k1hw] .k1hw--head .k1hw-ground { height: 40px; }
html[data-k1hw] .k1hw--head .k1hw-graves { right: 16px; }
html[data-k1hw] .k1hw--head .k1hw-j1 { right: 250px; }
html[data-k1hw] .k1hw--head .k1hw-hand { right: 290px; }
@media (max-width: 767px) {
  html[data-k1hw] .k1hw--head .k1hw-moon { right: 10px; top: -34px; width: 64px; height: 64px; }
  html[data-k1hw] .k1hw--head .k1hw-b5 { right: 82px; top: 6px; }
  html[data-k1hw] .k1hw--head .k1hw-b6, html[data-k1hw] .k1hw--head .k1hw-ground { display: none; }
}

/* ---------- Kamas, items and accounts banners ---------- */
html[data-k1hw] .k1hw--banner .k1hw-flock { top: 0; transform-origin: 0 0; scale: .7; }
html[data-k1hw] .k1hw--banner .k1hw-ground { height: 22px; }
html[data-k1hw] .k1hw--banner .k1hw-graves { left: 176px; height: 22px; width: 121px; }
html[data-k1hw] .k1hw--banner .k1hw-j1 { left: 312px; width: 24px; height: 21px; }
/* Kamas pages from 1200px: the banner runs on under the buy box; the scene covers the title's half
   and the 48px strip before the box (the banner starts 6px down) */
@media (min-width: 1200px) { html[data-k1hw] .k1hw--prod { top: 6px; right: -48px; border-radius: 12px 0 0 12px; } }
@media (max-width: 1199px) { html[data-k1hw] .k1hw--prod .k1hw-ground { display: none; } }
/* Items and accounts: the graveyard at the right end from 1280px (the description ends before) */
html[data-k1hw] .k1hw--market .k1hw-graves { left: auto; right: 22px; }
html[data-k1hw] .k1hw--market .k1hw-j1 { left: auto; right: 250px; }
@media (max-width: 1279px) { html[data-k1hw] .k1hw--market .k1hw-ground { display: none; } }

/* ---------- Footer: the graveyard along its top edge, standing in the space above it ---------- */
html[data-k1hw] .k1hw--foot { inset: auto 0 auto 0; top: -56px; height: 76px; z-index: -1; border-radius: 0; }
html[data-k1hw] .k1hw--foot .k1hw-ground { height: 56px; bottom: 20px; }
html[data-k1hw] .k1hw--foot .k1hw-graves { right: max(24px, calc(50% - 700px)); }
html[data-k1hw] .k1hw--foot .k1hw-g2 { right: auto; left: max(24px, calc(50% - 700px)); transform: scaleX(-1); }
html[data-k1hw] .k1hw--foot .k1hw-skel { right: calc(max(24px, 50% - 700px) + 240px); height: 54px; width: 54px; }
html[data-k1hw] .k1hw--foot .k1hw-hand { left: calc(max(24px, 50% - 700px) + 250px); }
html[data-k1hw] .k1hw--foot .k1hw-j1 { right: calc(max(24px, 50% - 700px) + 310px); }
html[data-k1hw] .k1hw--foot .k1hw-j2 { left: calc(max(24px, 50% - 700px) + 290px); }
html[data-k1hw] .k1hw--foot .k1hw-tree { left: calc(max(24px, 50% - 700px) + 330px); width: 72px; height: 54px; }
html[data-k1hw] .k1hw--foot .k1hw-sram { left: 50%; bottom: 20px; }
html[data-k1hw] .k1hw--foot .k1hw-fog { bottom: 0; height: 60px; }
html[data-k1hw] .k1hw--foot .k1hw-e1 { right: calc(max(24px, 50% - 700px) + 150px); bottom: 8px; }
html[data-k1hw] body > footer.k1hw-host { overflow: visible; }
@media (max-width: 639px) {
  html[data-k1hw] .k1hw--foot .k1hw-g2, html[data-k1hw] .k1hw--foot .k1hw-tree, html[data-k1hw] .k1hw--foot .k1hw-hand,
  html[data-k1hw] .k1hw--foot .k1hw-j2, html[data-k1hw] .k1hw--foot .k1hw-sram { display: none; }
}

/* ---------- More references: Chafer, black cat, cauldron, candles, orange glows, falling leaves ---------- */
/* Orange small labels (the "1KAMAS" label and the labels above the page titles). Dark theme: they all
   sit on dark surfaces. The light theme has its own rule (see "Light theme" at the end) */
html[data-k1hw][data-theme="dark"] body main .eyebrow { color: #f0a35a !important; }

/* Chafer, the skeleton soldier: legs swinging, body bobbing, eyes glowing; it marches across the
   hero's ground (behind the quick order), and two stand guard above the footer */
html[data-k1hw] .k1hw-chafer { left: 0; bottom: 0; height: min(56px, 100%); width: auto; aspect-ratio: 40 / 71; }
html[data-k1hw] .k1hw-legb, html[data-k1hw] .k1hw-legf { transform-box: view-box; animation: k1hw-step .7s ease-in-out infinite alternate; }
html[data-k1hw] .k1hw-legb { transform-origin: 19px 41px; }
html[data-k1hw] .k1hw-legf { transform-origin: 23px 41px; animation-direction: alternate-reverse; }
@keyframes k1hw-step { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
html[data-k1hw] .k1hw-chbody { animation: k1hw-chbob .35s ease-in-out infinite alternate; }
@keyframes k1hw-chbob { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
html[data-k1hw] .k1hw-chEye { animation: k1hw-flicker 1.9s steps(1) infinite; }
html[data-k1hw] .k1hw--hero .k1hw-chafer { animation: k1hw-march 34s linear infinite; animation-delay: -6s; }
@keyframes k1hw-march { from { transform: translateX(-60px); } to { transform: translateX(calc(var(--W, 1200px) + 20px)); } }
/* Guards stand still (no steps), the second one faces the other way */
html[data-k1hw] .k1hw-guard .k1hw-legb, html[data-k1hw] .k1hw-guard .k1hw-legf { animation: none; }
html[data-k1hw] .k1hw-guard .k1hw-chbody { animation-duration: 2.4s; }
html[data-k1hw] .k1hw-guard2 { transform: scaleX(-1); }

/* Black cat: tail swishing, eyes blinking */
html[data-k1hw] .k1hw-cat { height: min(24px, 100%); width: auto; aspect-ratio: 30 / 31; }
html[data-k1hw] .k1hw-cattail { transform-box: view-box; transform-origin: 19px 28px; animation: k1hw-tail 2.8s ease-in-out infinite alternate; }
@keyframes k1hw-tail { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
html[data-k1hw] .k1hw-cateyes { transform-box: fill-box; transform-origin: 50% 50%; animation: k1hw-blink 4.4s steps(1) infinite; }

/* Cauldron: fire flickering, brew glowing, bubbles rising and bursting */
html[data-k1hw] .k1hw-cauldron { height: min(34px, 100%); width: auto; aspect-ratio: 40 / 42; }
html[data-k1hw] .k1hw-fire { animation: k1hw-flicker 1.3s steps(1) infinite; }
html[data-k1hw] .k1hw-bubbles circle { transform-box: fill-box; transform-origin: 50% 50%; animation: k1hw-bubble 2.2s ease-in infinite; }
html[data-k1hw] .k1hw-bubbles circle:nth-child(2) { animation-delay: -.8s; animation-duration: 1.8s; }
html[data-k1hw] .k1hw-bubbles circle:nth-child(3) { animation-delay: -1.5s; animation-duration: 2.6s; }
@keyframes k1hw-bubble { 0% { transform: translateY(2px) scale(.4); opacity: 0; } 25% { opacity: 1; } 85% { transform: translateY(-9px) scale(1); opacity: 1; } 100% { transform: translateY(-11px) scale(1.4); opacity: 0; } }

/* Candles */
html[data-k1hw] .k1hw-candle { height: min(18px, 100%); width: auto; aspect-ratio: 8 / 22; }
html[data-k1hw] .k1hw-candleflame { transform-box: fill-box; transform-origin: 50% 100%; animation: k1hw-candle 1.1s ease-in-out infinite alternate; }
@keyframes k1hw-candle { from { transform: scale(1, 1) skewX(-4deg); } to { transform: scale(.85, 1.12) skewX(5deg); } }

/* Soft orange light around the lanterns, candles and the cauldron, flickering */
html[data-k1hw] .k1hw-glow { width: 56px; height: 56px; bottom: -16px; border-radius: 50%; background: radial-gradient(circle, rgb(255 140 40 / .34), rgb(255 140 40 / 0) 70%); animation: k1hw-glow 2.6s ease-in-out infinite alternate; }
html[data-k1hw] .k1hw-gc1, html[data-k1hw] .k1hw-gc2 { width: 34px; height: 34px; bottom: -6px; }
html[data-k1hw] .k1hw-gca { width: 66px; height: 66px; bottom: -18px; }
@keyframes k1hw-glow { from { opacity: .6; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }

/* Falling autumn leaves (orange, amber, rust), swaying down through their box */
html[data-k1hw] .k1hw-leaf { top: -24px; width: 16px; height: 16px; animation: k1hw-leaf 14s linear infinite; }
html[data-k1hw] .k1hw-leaf svg { animation: k1hw-sway 2.6s ease-in-out infinite alternate; }
html[data-k1hw] .k1hw-l1 { left: 6%; fill: #e8762b; animation-delay: -2s; }
html[data-k1hw] .k1hw-l2 { left: 21%; fill: #f0a35a; width: 13px; height: 13px; animation-duration: 17s; animation-delay: -9s; }
html[data-k1hw] .k1hw-l3 { left: 37%; fill: #b4532a; animation-duration: 12s; animation-delay: -5s; }
html[data-k1hw] .k1hw-l4 { left: 56%; fill: #e8762b; width: 12px; height: 12px; animation-duration: 16s; animation-delay: -12s; }
html[data-k1hw] .k1hw-l5 { left: 73%; fill: #d9682a; animation-duration: 13s; animation-delay: -7s; }
html[data-k1hw] .k1hw-l6 { left: 90%; fill: #f2a057; width: 14px; height: 14px; animation-duration: 15s; animation-delay: -1s; }
html[data-k1hw] .k1hw-l2 svg, html[data-k1hw] .k1hw-l5 svg { animation-duration: 3.2s; animation-direction: alternate-reverse; }
@keyframes k1hw-leaf { 0% { top: -24px; opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
@keyframes k1hw-sway { from { transform: translateX(-14px) rotate(-35deg); } to { transform: translateX(14px) rotate(40deg); } }

/* Leaves fall in lanes without text: the hero's side margins, the lane between the texts and the
   tiles and the gaps between the tiles; the right side of the page heads and banners */
html[data-k1hw] .k1hw--hero .k1hw-l1 { left: 4px; }
html[data-k1hw] .k1hw--hero .k1hw-l2 { left: calc(var(--tL) - 30px); }
html[data-k1hw] .k1hw--hero .k1hw-l3 { left: calc((var(--tL) + var(--tR)) / 2 - 8px); }
html[data-k1hw] .k1hw--hero .k1hw-l4 { left: calc(var(--tR) + 4px); }
html[data-k1hw] .k1hw--hero .k1hw-l5 { left: 6px; }
html[data-k1hw] .k1hw--hero .k1hw-l6 { left: calc(var(--tL) - 24px); }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-l1 { left: 1px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-l4 { left: calc(var(--tR) + 1px); }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-l2, html[data-k1hw] .k1hw--hero[data-stack] .k1hw-l5,
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-l6 { display: none; }
html[data-k1hw] .k1hw--head .k1hw-leaf { left: auto; }
html[data-k1hw] .k1hw--head .k1hw-l1 { right: 4px; }
html[data-k1hw] .k1hw--head .k1hw-l2 { right: 14px; }
html[data-k1hw] .k1hw--head .k1hw-l3, html[data-k1hw] .k1hw--head .k1hw-l4 { display: none; }
html[data-k1hw] .k1hw--prod .k1hw-leaf { left: auto; }
html[data-k1hw] .k1hw--prod .k1hw-l1 { right: 12px; }
html[data-k1hw] .k1hw--prod .k1hw-l2 { right: 32px; }
html[data-k1hw] .k1hw--prod .k1hw-l3 { left: 4px; right: auto; }
html[data-k1hw] .k1hw--market .k1hw-leaf { left: auto; }
html[data-k1hw] .k1hw--market .k1hw-l1 { right: 4%; }
html[data-k1hw] .k1hw--market .k1hw-l2 { right: 10%; }
html[data-k1hw] .k1hw--market .k1hw-l3 { right: 17%; }

/* ---- Homepage hero: the new pieces on the ground (left part, under the logos) ---- */
html[data-k1hw] .k1hw--hero .k1hw-hand { left: 262px; }
html[data-k1hw] .k1hw--hero .k1hw-j1 { left: 300px; }
html[data-k1hw] .k1hw--hero .k1hw-j2 { left: 336px; }
html[data-k1hw] .k1hw--hero .k1hw-cat { left: 236px; }
html[data-k1hw] .k1hw--hero .k1hw-cauldron { left: 372px; }
html[data-k1hw] .k1hw--hero .k1hw-cd1 { left: 4px; }
html[data-k1hw] .k1hw--hero .k1hw-cd2 { left: 414px; }
html[data-k1hw] .k1hw--hero .k1hw-gj1 { left: 286px; }
html[data-k1hw] .k1hw--hero .k1hw-gj2 { left: 322px; }
html[data-k1hw] .k1hw--hero .k1hw-gca { left: 356px; }
html[data-k1hw] .k1hw--hero .k1hw-gc1 { left: -9px; }
html[data-k1hw] .k1hw--hero .k1hw-gc2 { left: 401px; }
/* The leaves fall to the ground line */
html[data-k1hw] .k1hw--hero .k1hw-leaf { animation-name: k1hw-leafhero; }
@keyframes k1hw-leafhero { 0% { top: -24px; opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(var(--g, 400px) - 14px); opacity: 0; } }
/* Stacked hero (phones and tablets): the strip under the quick order */
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-cat { left: 228px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-cauldron { left: 260px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-gj1 { left: 142px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-gj2 { left: 178px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-gca { left: 244px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-cd2,
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-gc2 { display: none; }

/* ---- Page heads ---- */
html[data-k1hw] .k1hw--head .k1hw-cat { right: 160px; }
html[data-k1hw] .k1hw--head .k1hw-gj1 { right: 237px; }
html[data-k1hw] .k1hw--head .k1hw-cd1 { right: 330px; }
html[data-k1hw] .k1hw--head .k1hw-gc1 { right: 317px; }
/* ---- Kamas, items and accounts banners ---- */
html[data-k1hw] .k1hw--banner .k1hw-gj1 { left: 296px; width: 50px; height: 50px; }
html[data-k1hw] .k1hw--banner .k1hw-cd1 { left: 150px; height: 16px; }
html[data-k1hw] .k1hw--banner .k1hw-gc1 { left: 137px; }
html[data-k1hw] .k1hw--market .k1hw-gj1 { left: auto; right: 234px; }
html[data-k1hw] .k1hw--market .k1hw-cd1 { left: auto; right: 330px; }
html[data-k1hw] .k1hw--market .k1hw-gc1 { left: auto; right: 317px; }

/* ---- Footer: the two Chafer guards, the cat, the cauldron and candles ---- */
html[data-k1hw] .k1hw--foot .k1hw-chafer { height: 54px; }
html[data-k1hw] .k1hw--foot .k1hw-guard { left: calc(max(24px, 50% - 700px) + 420px); }
html[data-k1hw] .k1hw--foot .k1hw-guard2 { left: auto; right: calc(max(24px, 50% - 700px) + 400px); }
html[data-k1hw] .k1hw--foot .k1hw-cat { left: calc(50% - 64px); }
html[data-k1hw] .k1hw--foot .k1hw-cauldron { left: calc(50% + 44px); height: 40px; }
html[data-k1hw] .k1hw--foot .k1hw-gca { left: calc(50% + 31px); }
html[data-k1hw] .k1hw--foot .k1hw-cd1 { left: calc(max(24px, 50% - 700px) + 232px); }
html[data-k1hw] .k1hw--foot .k1hw-gc1 { left: calc(max(24px, 50% - 700px) + 219px); }
html[data-k1hw] .k1hw--foot .k1hw-cd2 { left: auto; right: calc(max(24px, 50% - 700px) + 372px); }
html[data-k1hw] .k1hw--foot .k1hw-gc2 { left: auto; right: calc(max(24px, 50% - 700px) + 359px); }
html[data-k1hw] .k1hw--foot .k1hw-gj1 { left: auto; right: calc(max(24px, 50% - 700px) + 297px); }
html[data-k1hw] .k1hw--foot .k1hw-gj2 { left: calc(max(24px, 50% - 700px) + 277px); }
@media (max-width: 639px) {
  html[data-k1hw] .k1hw--foot .k1hw-guard { left: 16px; height: 44px; }
  html[data-k1hw] .k1hw--foot .k1hw-guard2, html[data-k1hw] .k1hw--foot .k1hw-cauldron, html[data-k1hw] .k1hw--foot .k1hw-gca,
  html[data-k1hw] .k1hw--foot .k1hw-cd1, html[data-k1hw] .k1hw--foot .k1hw-gc1, html[data-k1hw] .k1hw--foot .k1hw-gj2 { display: none; }
  html[data-k1hw] .k1hw--foot .k1hw-cat { left: 64px; }
}

/* ---- Header: a small jack-o'-lantern in the top row's gap, with its light ---- */
html[data-k1hw] .k1hw-hjack { left: var(--jx, -100px); top: 34px; width: 19px; height: 17px; }
html[data-k1hw] .k1hw-hjack .k1hw-flame { animation: k1hw-flicker 2.1s steps(1) infinite; }
html[data-k1hw] .k1hw-hjackglow { left: calc(var(--jx, -100px) - 9px); top: 24px; width: 37px; height: 37px; border-radius: 50%; background: radial-gradient(circle, rgb(255 140 40 / .3), rgb(255 140 40 / 0) 70%); animation: k1hw-glow 2.6s ease-in-out infinite alternate; }

/* Reduced motion: the marching Chafer and the leaves stay away; the rest stands still (above) */
@media (prefers-reduced-motion: reduce) {
  html[data-k1hw] .k1hw--hero .k1hw-chafer, html[data-k1hw] .k1hw-leaf { display: none !important; }
  html[data-k1hw] .k1hw-wander { transform: none !important; }
  html[data-k1hw] .k1hw-tofu { display: none !important; }
  html[data-k1hw] .k1hw-hdr * { animation: none !important; }
}

/* ---- Pumpkin Bouftous: grazing with little hops; one wanders to and fro ---- */
html[data-k1hw] .k1hw-bouftou { bottom: -2px; height: min(46px, 100%); width: auto; aspect-ratio: 194 / 200; }
html[data-k1hw] .k1hw-bouftou img { animation: k1hw-hop 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
html[data-k1hw] .k1hw-bf2 img { animation-duration: 2.1s; animation-delay: -.7s; }
html[data-k1hw] .k1hw-bf3 img { animation-duration: 1.9s; animation-delay: -1.2s; }
@keyframes k1hw-hop { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 70% { transform: translateY(0) scale(1.06, .92); } 80% { transform: translateY(-14%) scale(.97, 1.04); } 90% { transform: translateY(0) scale(1.04, .95); } }
html[data-k1hw] .k1hw-flip { transform: scaleX(-1); }
html[data-k1hw] .k1hw-wander { animation: k1hw-wander 16s linear infinite; }
@keyframes k1hw-wander { 0% { transform: translateX(0) scaleX(-1); } 46% { transform: translateX(var(--walk, 70px)) scaleX(-1); } 50% { transform: translateX(var(--walk, 70px)) scaleX(1); } 96% { transform: translateX(0) scaleX(1); } 100% { transform: translateX(0) scaleX(-1); } }
/* Homepage hero: right of the cauldron and candle, before the tree */
html[data-k1hw] .k1hw--hero .k1hw-bf1 { left: 432px; --walk: 46px; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-bf1 { left: 262px; --walk: 0px; animation: none; }
html[data-k1hw] .k1hw--hero[data-stack] .k1hw-cauldron, html[data-k1hw] .k1hw--hero[data-stack] .k1hw-gca { display: none; }
/* Page heads and banners */
html[data-k1hw] .k1hw--head .k1hw-bf1 { right: 196px; height: 34px; }
html[data-k1hw] .k1hw--banner .k1hw-bf1 { left: 342px; height: 24px; bottom: -1px; }
html[data-k1hw] .k1hw--market .k1hw-bf1 { left: auto; right: 268px; }
/* Footer: a little herd */
html[data-k1hw] .k1hw--foot .k1hw-bf1 { left: calc(50% - 170px); --walk: 60px; }
html[data-k1hw] .k1hw--foot .k1hw-bf2 { left: calc(max(24px, 50% - 700px) + 480px); height: 40px; }
html[data-k1hw] .k1hw--foot .k1hw-bf3 { left: auto; right: calc(max(24px, 50% - 700px) + 470px); height: 42px; }
@media (max-width: 639px) {
  html[data-k1hw] .k1hw--foot .k1hw-bf1 { left: 110px; --walk: 30px; }
  html[data-k1hw] .k1hw--foot .k1hw-bf2, html[data-k1hw] .k1hw--foot .k1hw-bf3 { display: none; }
}

/* ---- Pumpkin Tofu: it sprints, then takes off and flies (its wings flutter: a quick wobble) ---- */
html[data-k1hw] .k1hw-tofu { left: 0; top: 0; width: 30px; height: 36px; }
html[data-k1hw] .k1hw-tofubody { inset: 0; animation: k1hw-flutter .18s ease-in-out infinite alternate; }
@keyframes k1hw-flutter { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-3px) rotate(7deg); } }
/* Homepage: from the left along the ground (fast), up over the middle, across the sky, gone; every 11s */
html[data-k1hw] .k1hw-tf-hero { animation: k1hw-tofuhero 11s linear infinite; animation-delay: -2s; }
@keyframes k1hw-tofuhero {
  0% { transform: translate(-40px, calc(var(--g, 400px) - 34px)); }
  14% { transform: translate(calc(var(--W, 1200px) * .36), calc(var(--g, 400px) - 34px)); }
  17% { transform: translate(calc(var(--W, 1200px) * .4), calc(var(--g, 400px) - 54px)) rotate(-14deg); }
  30% { transform: translate(calc(var(--W, 1200px) * .5), calc(var(--g, 400px) * .4)) rotate(-18deg); }
  42% { transform: translate(calc(var(--W, 1200px) * .66), 6px) rotate(-6deg); }
  56% { transform: translate(calc(var(--W, 1200px) + 40px), -4px) rotate(4deg); }
  56.1%, 100% { transform: translate(calc(var(--W, 1200px) + 40px), -60px); }
}
/* Page heads: it flies across the top, right to left, every 13s */
html[data-k1hw] .k1hw-tf-fly { width: 24px; height: 29px; animation: k1hw-tofufly 13s linear infinite; animation-delay: -5s; }
html[data-k1hw] .k1hw-tf-fly .k1hw-tofubody { scale: -1 1; }
@keyframes k1hw-tofufly { 0% { transform: translate(calc(100cqw + 30px), 30px); } 8% { transform: translate(70cqw, 4px); } 22% { transform: translate(-40px, 14px); } 22.1%, 100% { transform: translate(-40px, -50px); } }
html[data-k1hw] .k1hw--head { container-type: size; }
/* Footer: it dashes along the graves, left to right, every 9s */
html[data-k1hw] .k1hw-tf-run { top: auto; bottom: 0; width: 26px; height: 31px; animation: k1hw-tofurun 9s linear infinite; }
html[data-k1hw] .k1hw-tf-run .k1hw-tofubody { animation-name: k1hw-hopfast; animation-duration: .22s; }
@keyframes k1hw-hopfast { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-7px) rotate(5deg); } }
@keyframes k1hw-tofurun { 0% { transform: translateX(-40px); } 30% { transform: translateX(calc(100vw + 20px)); } 30.1%, 100% { transform: translateX(-60px); } }

/* ---------- Reduced motion: still pictures (no crossing witch or flock) ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-k1hw] .k1hw, html[data-k1hw] .k1hw * { animation: none !important; }
  html[data-k1hw] .k1hw-witch, html[data-k1hw] .k1hw-flock, html[data-k1hw] .k1hw-flash { display: none !important; }
  html[data-k1hw] .k1hw-spider { height: 40px; }
}
/* ---------- Printing and Windows high-contrast mode: no scenes ---------- */
@media print, (forced-colors: active) {
  html[data-k1hw] .k1hw { display: none !important; }
}

/* ---------- Header ----------
   Inside it (1k-hw-mode.js measures the widest empty gap of each row and gives it as variables):
   a faint cobweb in its top-left corner, a spider going down and up in the gap next to the search
   bar, and a small night (two bats; no moon, which next to the theme button's moon or sun would look
   like a choice) in the menu row's gap. Nothing can be
   clicked; the header's own colours stay as they are */
html[data-k1hw] .k1hw-hdr { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
html[data-k1hw] .k1hw-hdr i { position: absolute; display: block; }
html[data-k1hw] .k1hw-hdr svg { display: block; width: 100%; height: 100%; }
html[data-k1hw] .k1hw-hweb { left: 0; top: 0; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100 0M0 0L94 34.2M0 0L74.3 66.9M0 0L40.7 91.4M0 0L0 100M19.2 0Q16.6 2.9 18.8 6.8Q15 9 15.5 13.9Q10.1 13.9 7.8 17.5Q3.5 16.5 0 20M38 0Q32.8 5.8 37.1 13.5Q28 16.8 27.1 24.4Q18.8 25.9 15.5 34.7Q6.9 32.6 0 39.5M59.3 0Q48.3 8.5 51.4 18.7Q41.2 24.7 42.4 38.1Q29.4 40.5 24.1 54.2Q10.2 47.9 0 54.7M73 0Q63.1 11.1 71.4 26Q57.1 34.3 58.7 52.9Q38.4 52.9 29.7 66.7Q13.3 62.7 0 76M96 0Q82.9 14.6 93.8 34.1Q70.8 42.5 68.5 61.7Q47.6 65.5 39 87.7Q17.5 82.4 0 99.8' fill='none' stroke='%23c9bde6' stroke-opacity='0.5' stroke-width='1' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
html[data-k1hw] .k1hw-hspider { left: var(--spx, -100px); top: var(--spt, 0); width: 14px; height: 12px; animation: k1hw-hspider 10s ease-in-out infinite; }
@keyframes k1hw-hspider { 0%, 100% { height: 10px; } 40%, 62% { height: var(--spdrop, 40px); } }
html[data-k1hw] .k1hw-hnight { left: var(--nx, -200px); top: var(--ny, 0); width: 96px; height: 22px; }
html[data-k1hw] .k1hw-hnight .k1hw-bat { fill: #e6dcf5; opacity: .75; }
html[data-k1hw] .k1hw-hnight .k1hw-eye { fill: #2a1238; }
html[data-k1hw] .k1hw-hb1 { right: 32px; top: 2px; width: 26px; height: 13px; animation: k1hw-hover 3.4s ease-in-out infinite alternate; }
html[data-k1hw] .k1hw-hb2 { right: 66px; top: 8px; width: 20px; height: 10px; animation: k1hw-hover 2.8s ease-in-out infinite alternate-reverse; }
@media (prefers-reduced-motion: reduce) {
  html[data-k1hw] .k1hw-hdr * { animation: none !important; }
  html[data-k1hw] .k1hw-hspider { height: 22px; }
}
@media print, (forced-colors: active) {
  html[data-k1hw] .k1hw-hdr { display: none; }
}

/* ---------- Light theme ----------
   The overlay is the same in the light theme. The homepage hero, the plum page heads, the header and
   the footer stay dark in both themes, so their scenes keep their night colours. What changes is
   what sits on a light surface:
   - the orange labels: a deeper orange on the light page and cards (#c2410c, 4.7:1 on the page,
     5.2:1 on white), the light orange kept on the plum blocks, where the site uses its lilac;
   - the graveyard standing above the footer, on the light page: the dark cut-outs (graves, tree,
     cat, cauldron) read well there, but the bones (waving skeleton, hand, Chafer guards) and the
     candles' wax were drawn light for a dark sky: they get a thin dark outline; the pale mist becomes
     a soft plum haze and the lanterns' light is a little weaker;
   - the kamas, items and accounts banners, lavender in the light theme: their graveyard and bats
     become pale lilac cut-outs (as discreet as the dark ones on the dark banner), the candle gets
     its outline, the mist turns white (it runs behind the rating line: a dark haze would dim it)
     and the lights are a little weaker. */
html[data-k1hw][data-theme="light"] body main .eyebrow { color: #c2410c !important; }
html[data-k1hw][data-theme="light"] body main :is(.hp-hero, section.rounded-hero[class*="linear-gradient"]) .eyebrow,
html[data-k1hw][data-theme="light"] body main.container-1k > header.max-w-content > .eyebrow,
html[data-k1hw][data-theme="light"] body main.container-1k > .grid > a.card.hp-lift .eyebrow,
html[data-k1hw][data-theme="light"] body main > section > div.card.hp-static.text-center > .eyebrow { color: #f0a35a !important; }
/* FAQ and loyalty heads (their plum needs :has(), so this rule is dropped with it where unsupported) */
html[data-k1hw][data-theme="light"] body main.py-12 > div.max-w-content:has(> .eyebrow + h1) > .eyebrow { color: #f0a35a !important; }

html[data-k1hw][data-theme="light"] .k1hw--foot :is(.k1hw-skel, .k1hw-hand, .k1hw-chafer, .k1hw-candle),
html[data-k1hw][data-theme="light"] .k1hw--banner .k1hw-candle {
  filter: drop-shadow(0 0 .6px rgb(42 24 64 / .95)) drop-shadow(0 0 .4px rgb(42 24 64 / .8));
}
html[data-k1hw][data-theme="light"] .k1hw--foot .k1hw-fog > i {
  background: radial-gradient(closest-side, rgb(91 74 122 / .12), transparent) 0 100% / 340px 60px repeat-x,
              radial-gradient(closest-side, rgb(91 74 122 / .08), transparent) 170px 70% / 260px 46px repeat-x;
}
html[data-k1hw][data-theme="light"] .k1hw--banner .k1hw-fog > i {
  background: radial-gradient(closest-side, rgb(255 255 255 / .6), transparent) 0 100% / 340px 60px repeat-x,
              radial-gradient(closest-side, rgb(255 255 255 / .4), transparent) 170px 70% / 260px 46px repeat-x;
}
html[data-k1hw][data-theme="light"] :is(.k1hw--foot, .k1hw--banner) .k1hw-glow { background: radial-gradient(circle, rgb(255 140 40 / .24), rgb(255 140 40 / 0) 70%); }
html[data-k1hw][data-theme="light"] .k1hw--banner .k1hw-bat { fill: #9a8dbd; }
html[data-k1hw][data-theme="light"] .k1hw--banner .k1hw-gravessvg > g:first-of-type { fill: #d3cae6; stroke: #b9add6; }
html[data-k1hw][data-theme="light"] .k1hw--banner .k1hw-gravessvg > g:nth-of-type(2) { stroke: #b9add6; }
html[data-k1hw][data-theme="light"] .k1hw--banner .k1hw-gravessvg > path:nth-of-type(1) { stroke: #c6bbde; }
html[data-k1hw][data-theme="light"] .k1hw--banner .k1hw-gravessvg > path:nth-of-type(2) { fill: #d3cae6; }

/* Promo bar above the header (text: 1k-promo.js). body::before keeps its room from the first paint,
   so the page does not move when the text arrives. The orange of the Halloween labels, with the header's
   plum for the text and the code, and the bats of the Halloween scenes on each side. Flat, like the site. */
html[data-k1hw] { --k1p-h: 36px; }
html[data-k1hw] body:has(> header)::before {
  content: ""; display: block; height: var(--k1p-h); box-sizing: border-box; background: #f0a35a;
}
.k1p {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40; height: var(--k1p-h); margin: 0; padding: 0 16px;
  color: #230a29; font-size: 14px; line-height: 36px; font-weight: 500; text-align: center;
}
/* Figures from the Halloween scenes at the far left and right, standing on the bar's bottom edge; only
   where there is room beside the sentence */
.k1p__side { display: none; }
@media (min-width: 1200px) {
  .k1p__side { position: absolute; bottom: 0; display: flex; align-items: flex-end; gap: 12px; height: 100%; pointer-events: none; }
  .k1p__side--l { left: 20px; }
  .k1p__side--r { right: 20px; }
  .k1p__fig { display: block; line-height: 0; }
  .k1p__fig svg { display: block; height: 100%; width: auto; overflow: visible; }
  .k1p__fig--skeleton, .k1p__fig--chafer { height: 34px; }
  .k1p__fig--jack { height: 20px; margin-bottom: 3px; }
  .k1p__fig--bat { height: 14px; align-self: center; }
}
.k1p strong:not(.k1p__code) { font-weight: 700; }
.k1p__code {
  display: inline-block; padding: 0 8px; border-radius: 6px; background: #230a29; color: #f0a35a;
  font-weight: 600; line-height: 22px; vertical-align: 1px;
}
/* The room has to be known in advance (measured). French, the long sentence: one line needs 974px,
   so two lines below 1000px and three below 450px. The other languages: two lines below 640px. */
@media (max-width: 999px) {
  html[data-k1hw][lang="fr"] { --k1p-h: 58px; }
  html[lang="fr"] .k1p { padding: 7px 16px; font-size: 13px; line-height: 22px; }
}
@media (max-width: 639px) {
  html[data-k1hw] { --k1p-h: 58px; }
  .k1p { padding: 7px 16px; font-size: 13px; line-height: 22px; }
}
@media (max-width: 449px) {
  html[data-k1hw][lang="fr"] { --k1p-h: 80px; }
}
/* The header's spider web carries on through the bar: one web from the page's top-left corner, as tall
   as the bar plus 26px of header. Same drawing and size in both places, the bar showing its top and the
   header its bottom (offset by the bar's height), so its lines meet at the seam. Plum lines on the orange. */
html[data-k1hw] { --k1w: calc(var(--k1p-h) + 26px); }
html[data-k1hw] body:has(> header)::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100 0M0 0L94 34.2M0 0L74.3 66.9M0 0L40.7 91.4M0 0L0 100M19.2 0Q16.6 2.9 18.8 6.8Q15 9 15.5 13.9Q10.1 13.9 7.8 17.5Q3.5 16.5 0 20M38 0Q32.8 5.8 37.1 13.5Q28 16.8 27.1 24.4Q18.8 25.9 15.5 34.7Q6.9 32.6 0 39.5M59.3 0Q48.3 8.5 51.4 18.7Q41.2 24.7 42.4 38.1Q29.4 40.5 24.1 54.2Q10.2 47.9 0 54.7M73 0Q63.1 11.1 71.4 26Q57.1 34.3 58.7 52.9Q38.4 52.9 29.7 66.7Q13.3 62.7 0 76M96 0Q82.9 14.6 93.8 34.1Q70.8 42.5 68.5 61.7Q47.6 65.5 39 87.7Q17.5 82.4 0 99.8' fill='none' stroke='%23230a29' stroke-opacity='0.55' stroke-width='1' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / var(--k1w) var(--k1w) no-repeat, #f0a35a; }
/* Below 1000px the web runs behind the sentence: much fainter on the orange so the text stays clear */
@media (max-width: 999px) {
  html[data-k1hw] body:has(> header)::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100 0M0 0L94 34.2M0 0L74.3 66.9M0 0L40.7 91.4M0 0L0 100M19.2 0Q16.6 2.9 18.8 6.8Q15 9 15.5 13.9Q10.1 13.9 7.8 17.5Q3.5 16.5 0 20M38 0Q32.8 5.8 37.1 13.5Q28 16.8 27.1 24.4Q18.8 25.9 15.5 34.7Q6.9 32.6 0 39.5M59.3 0Q48.3 8.5 51.4 18.7Q41.2 24.7 42.4 38.1Q29.4 40.5 24.1 54.2Q10.2 47.9 0 54.7M73 0Q63.1 11.1 71.4 26Q57.1 34.3 58.7 52.9Q38.4 52.9 29.7 66.7Q13.3 62.7 0 76M96 0Q82.9 14.6 93.8 34.1Q70.8 42.5 68.5 61.7Q47.6 65.5 39 87.7Q17.5 82.4 0 99.8' fill='none' stroke='%23230a29' stroke-opacity='0.22' stroke-width='1' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / var(--k1w) var(--k1w) no-repeat, #f0a35a; }
}
html[data-k1hw] .k1hw-hweb { width: var(--k1w); height: 26px; background-position: 0 calc(-1 * var(--k1p-h)); background-size: var(--k1w) var(--k1w); }
@media (min-width: 1200px) { .k1p__side--l { left: 72px; } }
/* Araknide on the header logo (1k-arak.js): a box over the logo, behind it (the link isolated so that
   "behind" stays above the header's background) or, with k1a--front, in front of it */
html[data-k1hw] body > header.sticky a[aria-label]:has(> img) { position: relative; isolation: isolate; }
.k1a { position: absolute; z-index: -1; display: block; pointer-events: none; }
.k1a--front { z-index: 1; }
.k1a__walker { position: absolute; top: 0; left: 0; display: block; width: 26px; height: 26px; offset-rotate: auto; }
.k1a__walker svg { display: block; width: 100%; height: 100%; overflow: visible; }
.k1a__legs path { fill: none; stroke: #e4dcf2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.k1a__legs { transform-origin: 11px 10px; }
.k1a__body { fill: #1d0a24; stroke: #e4dcf2; stroke-width: 1.1; }
.k1a__eye { fill: #f0503c; }
@media (prefers-reduced-motion: no-preference) {
  .k1a__walker[data-walk] .k1a__legs { animation: k1a-step .08s linear infinite alternate; }
  .k1a__walker[data-walk] .k1a__legs--b { animation-direction: alternate-reverse; }
}
@keyframes k1a-step { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
@media (prefers-reduced-motion: reduce) { .k1a { display: none; } }
/* Room above the footer: its Halloween strip stands 56px above the footer's top edge, so the page's content
   ran into it. The margin leaves 32px (phones) to 40px clear under the content. And on short pages the
   content takes most of the screen under the header, which brings the strip to the fold */
html[data-k1hw] body > footer { margin-top: 88px; }
@media (min-width: 1024px) { html[data-k1hw] body > footer { margin-top: 96px; } }
html[data-k1hw] body > .min-h-\[60vh\] { min-height: calc(100vh - 240px); }
/* Page background: Halloween silhouettes, barely visible (white at 3% at night, plum at 3.5% by day) on a
   640px tile, on the body. The page sections' own canvas fill would hide them, so it goes; their cards
   and the small canvas-filled pieces (dots, chips, inputs) keep theirs. Not on the checkout (sheet off) */
html[data-k1hw] { --k1bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='%23230a29' opacity='.035'%3E%3Cg transform='translate(96 92) rotate(-10) scale(1.5)'%3E%3Cpath d='M-2 0C-6-5-12-6-19-3C-17-1-16 1-16 3C-14 2-12 2-11 4C-9 2-7 2-6 4C-5 2-3 2-2 3ZM2 0C6-5 12-6 19-3C17-1 16 1 16 3C14 2 12 2 11 4C9 2 7 2 6 4C5 2 3 2 2 3Z'/%3E%3Cellipse cy='1.6' rx='2.7' ry='4.2'/%3E%3Ccircle cy='-2.6' r='2.3'/%3E%3Cpath d='M-2-3.800L-1.700-6.400-0.600-4.400ZM2-3.800L1.700-6.400 0.600-4.400Z'/%3E%3C/g%3E%3Cg transform='translate(420 60) rotate(8) scale(1.5)'%3E%3Cpath fill-rule='evenodd' d='M12 4.600C9.500 4 1 3.800 .6 12.600S8 21.300 12 20.400C16 21.300 23.800 21.400 23.400 12.600S14.500 4 12 4.600ZM5.600 11.200H9.800L7.700 7.800ZM14.200 11.200H18.400L16.300 7.800ZM5.400 14.400Q12 18.400 18.600 14.400L17.400 17.300 15.900 16.300 14.600 18.100 13 16.900 12 18.600 11 16.900 9.400 18.100 8.100 16.300 6.600 17.300Z'/%3E%3Cpath d='M11.200 5C11 2.600 12.400 1 14.400.6L14.700 2C13.600 2.400 13.100 3.600 13.100 5Z'/%3E%3C/g%3E%3Cg transform='translate(250 250) rotate(-6) scale(1.2)'%3E%3Cpath fill-rule='evenodd' d='M3 36V15A12 12 0 0 1 27 15V36L23.500 32.500 20 36 16.500 32.500 13 36 9.500 32.500 6 36ZM10.800 12.500a2.100 3 0 1 0 .01 0ZM19.200 12.500a2.100 3 0 1 0 .01 0Z'/%3E%3C/g%3E%3Cg transform='translate(540 280) rotate(35) scale(1.4)'%3E%3Cg fill='none' stroke-width='1.300' stroke-linecap='round' stroke-linejoin='round' stroke='%23230a29'%3E%3Cpath d='M12.500 8.400L15.500 5.200 18.500 6.200M11.600 8.200L13.200 3.600 16 2M10.600 8.300L9.400 3.600 7 1.800M9.600 8.600L6.400 5 3.200 4.600M12.500 11.600L15.500 14.800 18.500 13.800M11.600 11.800L13.200 16.400 16 18M10.600 11.700L9.400 16.400 7 18.200M9.600 11.400L6.400 15 3.200 15.400'/%3E%3C/g%3E%3Cellipse cx='7.600' cy='10' rx='4.200' ry='3.600'/%3E%3Ccircle cx='12.600' cy='10' r='2.500'/%3E%3C/g%3E%3Cg transform='translate(70 390) rotate(4) scale(1.1)'%3E%3Cpath fill-rule='evenodd' d='M1 34V13A12 12 0 0 1 25 13V34ZM11.500 8V13H7V16H11.500V25H14.500V16H19V13H14.500V8Z'/%3E%3C/g%3E%3Cg transform='translate(380 440) rotate(12) scale(1.1)'%3E%3Cpath d='M-2 0C-6-5-12-6-19-3C-17-1-16 1-16 3C-14 2-12 2-11 4C-9 2-7 2-6 4C-5 2-3 2-2 3ZM2 0C6-5 12-6 19-3C17-1 16 1 16 3C14 2 12 2 11 4C9 2 7 2 6 4C5 2 3 2 2 3Z'/%3E%3Cellipse cy='1.6' rx='2.7' ry='4.2'/%3E%3Ccircle cy='-2.6' r='2.3'/%3E%3Cpath d='M-2-3.800L-1.700-6.400-0.600-4.400ZM2-3.800L1.700-6.400 0.600-4.400Z'/%3E%3C/g%3E%3Cg transform='translate(190 540) rotate(-14) scale(1.1)'%3E%3Cpath d='M16 1A15 15 0 1 0 31 22 12 12 0 0 1 16 1Z'/%3E%3C/g%3E%3Cg transform='translate(520 520) rotate(-8) scale(1.3)'%3E%3Cpath fill-rule='evenodd' d='M12 4.600C9.500 4 1 3.800 .6 12.600S8 21.300 12 20.400C16 21.300 23.800 21.400 23.400 12.600S14.500 4 12 4.600ZM5.600 11.200H9.800L7.700 7.800ZM14.200 11.200H18.400L16.300 7.800ZM5.400 14.400Q12 18.400 18.600 14.400L17.400 17.300 15.900 16.300 14.600 18.100 13 16.900 12 18.600 11 16.900 9.400 18.100 8.100 16.300 6.600 17.300Z'/%3E%3Cpath d='M11.200 5C11 2.600 12.400 1 14.400.6L14.700 2C13.600 2.400 13.100 3.600 13.100 5Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
html[data-k1hw][data-theme="dark"] { --k1bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='%23ffffff' opacity='.03'%3E%3Cg transform='translate(96 92) rotate(-10) scale(1.5)'%3E%3Cpath d='M-2 0C-6-5-12-6-19-3C-17-1-16 1-16 3C-14 2-12 2-11 4C-9 2-7 2-6 4C-5 2-3 2-2 3ZM2 0C6-5 12-6 19-3C17-1 16 1 16 3C14 2 12 2 11 4C9 2 7 2 6 4C5 2 3 2 2 3Z'/%3E%3Cellipse cy='1.6' rx='2.7' ry='4.2'/%3E%3Ccircle cy='-2.6' r='2.3'/%3E%3Cpath d='M-2-3.800L-1.700-6.400-0.600-4.400ZM2-3.800L1.700-6.400 0.600-4.400Z'/%3E%3C/g%3E%3Cg transform='translate(420 60) rotate(8) scale(1.5)'%3E%3Cpath fill-rule='evenodd' d='M12 4.600C9.500 4 1 3.800 .6 12.600S8 21.300 12 20.400C16 21.300 23.800 21.400 23.400 12.600S14.500 4 12 4.600ZM5.600 11.200H9.800L7.700 7.800ZM14.200 11.200H18.400L16.300 7.800ZM5.400 14.400Q12 18.400 18.600 14.400L17.400 17.300 15.900 16.300 14.600 18.100 13 16.900 12 18.600 11 16.900 9.400 18.100 8.100 16.300 6.600 17.300Z'/%3E%3Cpath d='M11.200 5C11 2.600 12.400 1 14.400.6L14.700 2C13.600 2.400 13.100 3.600 13.100 5Z'/%3E%3C/g%3E%3Cg transform='translate(250 250) rotate(-6) scale(1.2)'%3E%3Cpath fill-rule='evenodd' d='M3 36V15A12 12 0 0 1 27 15V36L23.500 32.500 20 36 16.500 32.500 13 36 9.500 32.500 6 36ZM10.800 12.500a2.100 3 0 1 0 .01 0ZM19.200 12.500a2.100 3 0 1 0 .01 0Z'/%3E%3C/g%3E%3Cg transform='translate(540 280) rotate(35) scale(1.4)'%3E%3Cg fill='none' stroke-width='1.300' stroke-linecap='round' stroke-linejoin='round' stroke='%23ffffff'%3E%3Cpath d='M12.500 8.400L15.500 5.200 18.500 6.200M11.600 8.200L13.200 3.600 16 2M10.600 8.300L9.400 3.600 7 1.800M9.600 8.600L6.400 5 3.200 4.600M12.500 11.600L15.500 14.800 18.500 13.800M11.600 11.800L13.200 16.400 16 18M10.600 11.700L9.400 16.400 7 18.200M9.600 11.400L6.400 15 3.200 15.400'/%3E%3C/g%3E%3Cellipse cx='7.600' cy='10' rx='4.200' ry='3.600'/%3E%3Ccircle cx='12.600' cy='10' r='2.500'/%3E%3C/g%3E%3Cg transform='translate(70 390) rotate(4) scale(1.1)'%3E%3Cpath fill-rule='evenodd' d='M1 34V13A12 12 0 0 1 25 13V34ZM11.500 8V13H7V16H11.500V25H14.500V16H19V13H14.500V8Z'/%3E%3C/g%3E%3Cg transform='translate(380 440) rotate(12) scale(1.1)'%3E%3Cpath d='M-2 0C-6-5-12-6-19-3C-17-1-16 1-16 3C-14 2-12 2-11 4C-9 2-7 2-6 4C-5 2-3 2-2 3ZM2 0C6-5 12-6 19-3C17-1 16 1 16 3C14 2 12 2 11 4C9 2 7 2 6 4C5 2 3 2 2 3Z'/%3E%3Cellipse cy='1.6' rx='2.7' ry='4.2'/%3E%3Ccircle cy='-2.6' r='2.3'/%3E%3Cpath d='M-2-3.800L-1.700-6.400-0.600-4.400ZM2-3.800L1.700-6.400 0.600-4.400Z'/%3E%3C/g%3E%3Cg transform='translate(190 540) rotate(-14) scale(1.1)'%3E%3Cpath d='M16 1A15 15 0 1 0 31 22 12 12 0 0 1 16 1Z'/%3E%3C/g%3E%3Cg transform='translate(520 520) rotate(-8) scale(1.3)'%3E%3Cpath fill-rule='evenodd' d='M12 4.600C9.500 4 1 3.800 .6 12.600S8 21.300 12 20.400C16 21.300 23.800 21.400 23.400 12.600S14.500 4 12 4.600ZM5.600 11.200H9.800L7.700 7.800ZM14.200 11.200H18.400L16.300 7.800ZM5.400 14.400Q12 18.400 18.600 14.400L17.400 17.300 15.900 16.300 14.600 18.100 13 16.900 12 18.600 11 16.900 9.400 18.100 8.100 16.300 6.600 17.300Z'/%3E%3Cpath d='M11.200 5C11 2.600 12.400 1 14.400.6L14.700 2C13.600 2.400 13.100 3.600 13.100 5Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
html[data-k1hw] body { background-image: var(--k1bg); background-size: 640px 640px; background-repeat: repeat; }
html[data-k1hw] :is(div, section, article, main).bg-canvas:not([class*="rounded"]):not(.absolute):not(.fixed):not(.sticky) { background-color: transparent; }
@media print { html[data-k1hw] body { background-image: none; } }
/* The bar scrolls with the header: its room stays stuck to the top, the sentence over it, the header right
   under it. What is offset by the header's height moves down by the bar's as well. On phones the bar
   scrolls away, to leave the screen to the page (it is up to 80px tall there) */
@media (min-width: 640px) {
  html[data-k1hw] body:has(> header)::before { position: sticky; top: 0; z-index: 49; }
  .k1p { position: fixed; z-index: 49; }
  html[data-k1hw] body:has(> header) > header.sticky { top: var(--k1p-h); }
  html[data-k1hw] .k1m { scroll-margin-top: calc(120px + var(--k1p-h)); }
  html[data-k1hw] .k1b-side { top: calc(124px + var(--k1p-h)); }
  html[data-k1hw] body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k :is(h2, h3) { scroll-margin-top: calc(120px + var(--k1p-h)); }
}
/* Logged-in admins: the WordPress toolbar (kamas-sn-serve.php) is fixed at the top and pushes the page
   down by 32px (46px up to 782px). The sentence, its room and the sticky header go under it, not behind it */
html[data-k1hw]:has(#wpadminbar) { --k1ab: 32px; }
@media screen and (max-width: 782px) { html[data-k1hw]:has(#wpadminbar) { --k1ab: 46px; } }
html[data-k1hw]:has(#wpadminbar) .k1p { top: var(--k1ab); }
@media (min-width: 640px) {
  html[data-k1hw]:has(#wpadminbar) body:has(> header)::before { top: var(--k1ab); }
  html[data-k1hw]:has(#wpadminbar) body:has(> header) > header.sticky { top: calc(var(--k1p-h) + var(--k1ab)); }
}
/* Pages without the site header (login, account, cart) have no bar: its room above follows the header.
   Without :has() no room is reserved, so no bar either */
@supports not selector(:has(*)) { .k1p { display: none; } }
@media print { html[data-k1hw] body:has(> header)::before, .k1p { display: none; } }