/* ============================================================================
   JUICY LIFE - SITE HEADER + FOOTER ON THEME-DRAWN PAGES
   Used only where Salient draws the page (pages added later, archives, 404).
   Un-layered on purpose and scoped to .kk-chrome: the theme's CSS is
   un-layered too, so the plugin's layered files would lose to it. The rules
   below are the nav / menu / footer rules from tokens, base, layout,
   components and sections.css, restated so they win; the !important ones
   answer Salient rules that are more specific than a scoped class.
   ========================================================================= */

/* Salient's own header and footer give way to the site's. */
body.kk-chrome-page #header-outer,
body.kk-chrome-page #header-space,
body.kk-chrome-page #footer-outer,
body.kk-chrome-page #slide-out-widget-area,
body.kk-chrome-page #slide-out-widget-area-bg,
body.kk-chrome-page #search-outer,
body.kk-chrome-page .nectar-slide-in-cart { display: none !important; }

body.kk-chrome-page[data-scroll-locked] { overflow: hidden; }

/* ---------- Tokens ---------- */
.kk-chrome {
  --ink-900: #100d0a;
  --ink-800: #16120e;
  --ink-700: #201a15;
  --bone-50: #fbf8f3;
  --bone-100: #f5f0e7;
  --bone-200: #ede5d8;
  --sand-400: #c9bba4;
  --clay-500: #8b7c69;
  --clay-600: #6e6051;
  --amber-700: #a8410f;
  --amber-500: #d9631c;
  --amber-400: #ee8434;
  --amber-300: #f5a65c;

  --ground: var(--bone-100);
  --ground-alt: var(--bone-200);
  --fg: var(--ink-800);
  --fg-muted: var(--clay-600);
  --fg-faint: var(--clay-500);
  --accent: var(--amber-700);
  --accent-loud: var(--amber-500);
  --rule: color-mix(in oklab, var(--ink-800) 16%, transparent);
  --rule-strong: color-mix(in oklab, var(--ink-800) 32%, transparent);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-body: clamp(1rem, 0.95vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;
  --lh-body: 1.62;
  --tr-body: -0.005em;
  --tr-label: 0.16em;
  --wonk-on: "WONK" 1;

  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-8: 3rem;
  --page-max: 118rem;
  --gutter: clamp(1.25rem, 4.2vw, 6rem);
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 1.8vw, 2rem);
  --measure: 64ch;
  --measure-tight: 44ch;
  --hairline: 1px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
  --dur-slow: 900ms;
  --z-menu: 840;
  --z-nav: 860;
  --z-grain: 900;
  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.46'/%3E%3C/svg%3E");

  --wordmark-src: url("../img/wordmark-script.png");
  --wordmark-full-src: url("../img/wordmark.png");

  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-weight: 400;
  color: var(--fg);
  text-align: start;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.kk-chrome .ground--ink {
  --ground: var(--ink-800);
  --ground-alt: var(--ink-700);
  --fg: var(--bone-100);
  --fg-muted: #a79684;
  --fg-faint: #7d6f5f;
  --accent: var(--amber-400);
  --accent-loud: var(--amber-400);
  --rule: color-mix(in oklab, var(--bone-100) 15%, transparent);
  --rule-strong: color-mix(in oklab, var(--bone-100) 30%, transparent);
  color-scheme: dark;
}

/* ---------- Reset (zero specificity past the scope, so classes below win) ---------- */
.kk-chrome *, .kk-chrome *::before, .kk-chrome *::after { box-sizing: border-box; }
.kk-chrome :where(p, ul, ol, li, nav, header, footer, form, label, span, a, div) {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  box-shadow: none;
}
.kk-chrome :where(ul, ol, li) { list-style: none; }
.kk-chrome :where(a) { color: inherit; text-decoration: none; }
.kk-chrome :where(a):hover { color: inherit; opacity: 1; }
.kk-chrome :where(svg) { display: block; max-width: 100%; }
.kk-chrome :where(input, button) { font: inherit; color: inherit; margin: 0; }
.kk-chrome :where(a, button, input):focus-visible { outline: 2px solid var(--accent-loud); outline-offset: 3px; border-radius: 2px; }
.kk-chrome :focus:not(:focus-visible) { outline: none; }
.kk-chrome ::selection { background: var(--amber-500); color: var(--bone-50); }

.kk-chrome .skip-link {
  position: fixed; top: var(--s-4); left: var(--s-4); z-index: 1000;
  padding: var(--s-3) var(--s-5);
  background: var(--ink-800); color: var(--bone-100);
  font-size: var(--fs-small); font-weight: 500; border-radius: 2px;
  transform: translateY(calc(-100% - var(--s-6)));
  transition: transform var(--dur-fast) var(--ease-out);
}
.kk-chrome .skip-link:focus { transform: translateY(0); }

/* ---------- Type helpers used by the bar and footer ---------- */
.kk-chrome .t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg-muted);
  font-feature-settings: "tnum" 1;
}
.kk-chrome .t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.kk-chrome .u-max-tight { max-width: var(--measure-tight); }
.kk-chrome .u-mb-4 { margin-block-end: var(--s-4); }
.kk-chrome .shell { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.kk-chrome .grid { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); column-gap: var(--grid-gap); }

/* ---------- Buttons ---------- */
.kk-chrome .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  width: auto;
  height: auto;
  margin: 0;
  padding: 1.15em 1.9em !important;
  border: var(--hairline) solid var(--btn-line, var(--fg)) !important;
  border-radius: 2px !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--btn-fg, var(--fg)) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-label) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tr-label) !important;
  text-transform: uppercase;
  line-height: 1 !important;
  opacity: 1 !important;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-fast) var(--ease-out) !important;
}
.kk-chrome .btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--btn-fill, var(--fg));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-mid) var(--ease-out);
}
.kk-chrome .btn::after { display: none !important; }
.kk-chrome .btn:hover::before,
.kk-chrome .btn:focus-visible::before { transform: scaleY(1); }
.kk-chrome .btn:hover, .kk-chrome .btn:focus-visible { color: var(--btn-fg-hover, var(--ground)) !important; }
.kk-chrome .btn:active { transform: translateY(1px); }
.kk-chrome .btn span { color: inherit; }
.kk-chrome .btn--solid {
  --btn-fg: var(--ground);
  --btn-line: var(--fg);
  --btn-fill: var(--fg);
  --btn-fg-hover: var(--fg);
}
.kk-chrome .btn--solid::before { transform: scaleY(1); }
.kk-chrome .btn--solid:hover::before,
.kk-chrome .btn--solid:focus-visible::before { transform: scaleY(0); }
.kk-chrome .btn__arrow { width: 0.85em; height: auto; flex: none; transition: transform var(--dur-mid) var(--ease-out); }
.kk-chrome .btn:hover .btn__arrow,
.kk-chrome .btn:focus-visible .btn__arrow { transform: translateX(0.35em); }

.kk-chrome .link-inline {
  color: var(--accent);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--hairline);
  transition: background-size var(--dur-mid) var(--ease-out);
}
.kk-chrome .link-inline:hover,
.kk-chrome .link-inline:focus-visible { color: var(--accent); background-size: 100% var(--hairline); }

/* ---------- Bar ---------- */
.kk-chrome .site-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--gutter);
  color: var(--nav-fg, var(--bone-100));
  transition: color var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out),
              padding var(--dur-mid) var(--ease-out);
}
.admin-bar .kk-chrome .site-nav { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .kk-chrome .site-nav { inset-block-start: 46px; } }

.kk-chrome .site-nav[data-theme="bone"] {
  --nav-fg: var(--ink-800);
  --nav-ground: var(--bone-100);
  --nav-line: rgba(22, 18, 14, 0.18);
}
.kk-chrome .site-nav[data-theme="ink"] {
  --nav-fg: var(--bone-100);
  --nav-ground: var(--ink-800);
  --nav-line: rgba(245, 240, 231, 0.18);
}
.kk-chrome .site-nav .btn {
  --btn-fg: var(--nav-fg, var(--bone-100));
  --btn-line: var(--nav-fg, var(--bone-100));
  --btn-fill: var(--nav-fg, var(--bone-100));
  --btn-fg-hover: var(--nav-ground, var(--ink-800));
}
.kk-chrome .site-nav[data-stuck] {
  padding-block: var(--s-4);
  background: var(--nav-bg, color-mix(in oklab, var(--ink-800) 74%, transparent));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--nav-line);
}
/* Theme pages are usually light under the bar, where the 74% ink tint reads
   grey; keep it as dark as it looks over the plugin's ink sections. */
.kk-chrome .site-nav[data-stuck][data-theme="ink"] {
  --nav-bg: color-mix(in oklab, var(--ink-800) 95%, transparent);
}
.kk-chrome .site-nav[data-stuck][data-theme="bone"] {
  --nav-bg: color-mix(in oklab, var(--bone-100) 78%, transparent);
}

.kk-chrome .nav-brand { display: inline-flex; align-items: center; gap: 0.85rem; flex: none; }
.kk-chrome .nav-brand__mark {
  display: block;
  width: 66px;
  aspect-ratio: 654 / 490;
  background: currentColor;
  -webkit-mask: var(--wordmark-src) center / contain no-repeat;
  mask: var(--wordmark-src) center / contain no-repeat;
  transition: transform var(--dur-mid) var(--ease-out);
}
.kk-chrome .nav-brand:hover .nav-brand__mark { transform: rotate(-2deg) scale(1.04); }
.kk-chrome .nav-brand__name {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  line-height: var(--lh-body);
  opacity: 0.7;
  padding-block-start: 0.4em;
}

.kk-chrome .nav-links { display: none; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
@media (min-width: 62em) { .kk-chrome .nav-links { display: flex; } }

/* The live design's nav-link sizes (components.css overrides them with !important). */
.kk-chrome .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: var(--lh-body);
  padding: 6px 0;
  color: inherit;
  opacity: 0.72;
  overflow: hidden;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.kk-chrome .nav-link span {
  position: relative;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.kk-chrome .nav-link__icon { display: none; }
.kk-chrome .nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: var(--hairline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out);
}
.kk-chrome .nav-link:hover,
.kk-chrome .nav-link:focus-visible,
.kk-chrome .nav-link[aria-current] { color: inherit; opacity: 1; }
.kk-chrome .nav-link:hover::after,
.kk-chrome .nav-link:focus-visible::after,
.kk-chrome .nav-link[aria-current]::after { transform: scaleX(1); transform-origin: left; }

.kk-chrome .nav-cta { display: none; }
@media (min-width: 62em) {
  .kk-chrome .nav-cta { display: inline-flex; padding: 0.95em 1.5em !important; --btn-line: currentColor; }
}

.kk-chrome .nav-toggle {
  display: inline-flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  margin: 0 -10px 0 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer;
  color: inherit !important;
  transition: none !important;
}
@media (min-width: 62em) { .kk-chrome .nav-toggle { display: none !important; } }
.kk-chrome .nav-toggle__bar {
  display: block;
  height: var(--hairline);
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out), width var(--dur-mid) var(--ease-out);
}
.kk-chrome .nav-toggle__bar:nth-child(2) { width: 68%; margin-inline-start: auto; }
.kk-chrome [aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.kk-chrome [aria-expanded="true"] .nav-toggle__bar:nth-child(2) { width: 100%; transform: translateY(-3.5px) rotate(-45deg); }

/* Menu-bar cart (WooCommerce) */
.kk-chrome .nav-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; color: inherit; transition: color var(--dur-mid) var(--ease-out);
}
.kk-chrome .nav-cart:hover, .kk-chrome .nav-cart:focus-visible { color: var(--amber-400); }
.kk-chrome .nav-cart__icon { width: 1.4rem; height: 1.4rem; }
.kk-chrome .nav-cart__count {
  position: absolute; top: 0; right: -0.15rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
  border-radius: 999px; background: var(--amber-500); color: var(--ink-900);
  font-size: 0.6875rem; font-weight: 600; line-height: 1.15rem; text-align: center;
}
.kk-chrome .nav-cart__count[hidden] { display: none; }

/* Room for the fixed bar: an ink band, so the bar opens on the same dark
   ground as on the plugin's own pages. */
.kk-chrome-space { height: calc(3rem + 50px); background: #16120e; }

/* ---------- Film grain over the whole page, as on the plugin's pages ---------- */
.kk-chrome .grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: var(--grain-src);
  background-size: 190px 190px;
  will-change: transform;
}
@media (prefers-reduced-transparency: reduce) { .kk-chrome .grain { display: none; } }

/* ---------- Pour loader ---------- */
.kk-chrome .loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  background: var(--ink-800);
  clip-path: inset(0 0 0 0);
  transition: clip-path 780ms var(--ease-out);
  /* Failsafe: lifts on its own even if the script never arrives (loader.js switches this off). */
  animation: kk-loader-failsafe 1ms linear 3.4s forwards;
}
@keyframes kk-loader-failsafe { to { visibility: hidden; pointer-events: none; } }
.kk-chrome .loader[data-done] { clip-path: inset(0 0 100% 0); pointer-events: none; }
.kk-chrome .loader > span { display: block; }
.kk-chrome .loader__bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 40% at 50% 46%, color-mix(in oklab, var(--amber-500) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.kk-chrome .loader[data-fill] .loader__bloom { opacity: 1; }
.kk-chrome .loader__stage { position: relative; display: block; }
.kk-chrome .loader__word {
  position: relative;
  display: block;
  width: clamp(200px, 36vw, 440px);
  aspect-ratio: 654 / 490;
  -webkit-mask: var(--wordmark-src) center / contain no-repeat;
  mask: var(--wordmark-src) center / contain no-repeat;
  overflow: hidden;
}
.kk-chrome .loader__vessel {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--bone-100) 13%, transparent);
}
.kk-chrome .loader__juice {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--amber-300) 0%, var(--amber-500) 60%, #c4551a 100%);
  transform: translateY(103%);
  transition: transform 1000ms cubic-bezier(0.45, 0.05, 0.2, 1);
}
.kk-chrome .loader[data-fill] .loader__juice { transform: translateY(0); }
.kk-chrome .loader__surface {
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 0;
  width: 200%;
  max-width: none;
  height: clamp(6px, 1.4vw, 13px);
  color: var(--amber-300);
  animation: kk-loader-wave 2.6s linear infinite;
}
@keyframes kk-loader-wave { to { transform: translateX(-50%); } }
.kk-chrome .loader__drop {
  position: absolute;
  inset-block-start: 88%;
  inset-inline-start: 9%;
  width: clamp(7px, 1.5vw, 12px);
  aspect-ratio: 1;
  border-radius: 0 50% 50% 50%;
  background: var(--amber-400);
  opacity: 0;
  transform: rotate(45deg) translate(0, 0) scale(0.4);
}
.kk-chrome .loader[data-drop] .loader__drop { animation: kk-loader-drop 620ms cubic-bezier(0.5, 0, 0.9, 0.6) forwards; }
@keyframes kk-loader-drop {
  0%   { opacity: 0; transform: rotate(45deg) translate(0, 0) scale(0.35); }
  22%  { opacity: 1; transform: rotate(45deg) translate(0, 0) scale(1); }
  100% { opacity: 1; transform: rotate(45deg) translate(6vh, 6vh) scale(0.85); }
}
.kk-chrome .loader__name {
  color: var(--fg-faint);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 700ms var(--ease-out) 220ms, transform 700ms var(--ease-out) 220ms;
}
.kk-chrome .loader[data-fill] .loader__name { opacity: 1; transform: none; }
.kk-chrome .loader[data-done] .loader__stage,
.kk-chrome .loader[data-done] .loader__name {
  opacity: 0;
  transform: translateY(-1.25rem);
  transition: opacity 380ms var(--ease-out), transform 520ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .kk-chrome .loader { display: none; } }

/* ---------- Fullscreen menu ---------- */
.kk-chrome .menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(6rem, 18vh, 9rem) var(--gutter) var(--s-8);
  background: var(--ink-800);
  color: var(--bone-100);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: clip-path 780ms var(--ease-out), visibility 0s linear 780ms;
}
.kk-chrome .menu[data-open] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 780ms var(--ease-out), visibility 0s;
}
.kk-chrome .menu > nav { display: flex; align-items: center; }
.kk-chrome .menu__list { width: 100%; display: flex; flex-direction: column; gap: clamp(0.1rem, 1.2vh, 0.5rem); }
.kk-chrome .menu__item { overflow: hidden; }
.kk-chrome .menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, var(--wonk-on);
  font-size: clamp(2.25rem, 10.5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  transform: translate3d(0, 105%, 0);
  transition: transform 760ms var(--ease-out) var(--menu-delay, 0ms), color var(--dur-mid) var(--ease-out);
}
.kk-chrome .menu[data-open] .menu__link { transform: none; }
.kk-chrome .menu__link:hover,
.kk-chrome .menu__link:focus-visible { color: var(--amber-400); }
.kk-chrome .menu__num {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--amber-400);
  opacity: 0.75;
}
.kk-chrome .menu__icon {
  flex: none;
  width: clamp(1.5rem, 5vw, 2rem);
  height: clamp(1.5rem, 5vw, 2rem);
  margin-inline-start: auto;
  align-self: center;
  color: var(--amber-400);
  opacity: 0.34;
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.kk-chrome .menu__link:hover .menu__icon,
.kk-chrome .menu__link:focus-visible .menu__icon { opacity: 1; transform: translateX(2px); }
.kk-chrome .menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: var(--hairline) solid rgba(245, 240, 231, 0.16);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) 420ms;
}
.kk-chrome .menu[data-open] .menu__foot { opacity: 1; }

body[data-scroll-locked] .kk-chrome .site-nav {
  --nav-fg: var(--bone-100);
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-scroll-locked] .kk-chrome .nav-links,
body[data-scroll-locked] .kk-chrome .nav-cta { opacity: 0; pointer-events: none; }

/* ---------- Footer ---------- */
.kk-chrome .site-foot {
  position: relative;
  display: block;
  background: var(--ground);
  color: var(--fg);
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
  border-block-start: var(--hairline) solid var(--rule);
}
.kk-chrome .foot__top {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  padding-block-end: clamp(2.5rem, 6vw, 4rem);
  border-block-end: var(--hairline) solid var(--rule);
}
@media (min-width: 62em) {
  .kk-chrome .foot__top { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
}
.kk-chrome .foot__mark {
  display: block;
  width: clamp(96px, 12vw, 148px);
  aspect-ratio: 654 / 820;
  background: currentColor;
  color: var(--amber-400);
  -webkit-mask: var(--wordmark-full-src) top center / contain no-repeat;
  mask: var(--wordmark-full-src) top center / contain no-repeat;
  margin-block-end: var(--s-5);
}
.kk-chrome .foot__nav { display: grid; gap: 0.85rem; align-content: start; }
.kk-chrome .foot__nav a {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  transition: color var(--dur-mid) var(--ease-out);
  justify-self: start;
}
.kk-chrome .foot__nav a:hover, .kk-chrome .foot__nav a:focus-visible { color: var(--accent); }
.kk-chrome .foot__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4) var(--s-6);
  padding-block-start: clamp(1.5rem, 3vw, 2rem);
}
.kk-chrome .foot__legal { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); }
.kk-chrome .foot__legal a { transition: color var(--dur-mid) var(--ease-out); }
.kk-chrome .foot__legal a:hover, .kk-chrome .foot__legal a:focus-visible { color: var(--accent); }

/* ---------- Subscribe form ---------- */
.kk-chrome .subscribe { position: relative; display: flex; align-items: end; gap: var(--s-5); flex-wrap: wrap; }
.kk-chrome .field { flex: 1 1 15rem; min-width: 0; }
.kk-chrome .field__label {
  display: block;
  margin-block-end: 0.6rem;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.kk-chrome .field__input {
  display: inline-block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.85rem 0 !important;
  border: 0 !important;
  border-block-end: var(--hairline) solid var(--rule-strong) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--fg) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
  letter-spacing: normal !important;
  transition: border-color var(--dur-mid) var(--ease-out) !important;
}
.kk-chrome .field__input::placeholder { color: var(--fg-faint); opacity: 1; }
.kk-chrome .field__input:focus { outline: none; border-block-end-color: var(--accent-loud) !important; }
.kk-chrome .form-note { margin-block-start: var(--s-4); font-size: var(--fs-small); color: var(--fg-faint); }
.kk-chrome .form-note a { text-decoration: underline; }
.kk-chrome form.is-busy button[type="submit"] { opacity: .6 !important; pointer-events: none; }
.kk-chrome .kk-status { margin: var(--s-4) 0 0; font-size: .95rem; line-height: 1.5; color: var(--fg-muted); }
.kk-chrome .kk-status[hidden] { display: none; }
.kk-chrome .kk-status.is-ok { color: var(--accent); }
.kk-chrome .kk-status.is-error { color: #b3392b; }

@media (prefers-reduced-motion: reduce) {
  .kk-chrome *, .kk-chrome *::before, .kk-chrome *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
@media print {
  .kk-chrome .site-nav, .kk-chrome .grain, .kk-chrome .loader, .kk-chrome-space { display: none !important; }
}