/* ==========================================================
   KickUp — Landing Page Styles
   Phone design: 390 x 844.  Everything is sized in "u" units
   (1u = 1 design pixel, scaled to the screen), so the page looks
   the same on every phone and on a PC (where it shows as a
   centred phone-width column).
   Colors: white #FDFDFD, black #0A0A0A, red #E50910
   ========================================================== */

@font-face { font-family:'Barlow Condensed'; font-style:italic; font-weight:700; font-display:block;
  src:url('../assets/fonts/barlow-700i.woff') format('woff'); }
@font-face { font-family:'Barlow Condensed'; font-style:italic; font-weight:800; font-display:block;
  src:url('../assets/fonts/barlow-800i.woff') format('woff'); }
@font-face { font-family:'Barlow Condensed'; font-style:italic; font-weight:900; font-display:block;
  src:url('../assets/fonts/barlow-900i.woff') format('woff'); }
@font-face { font-family:'Abril Fatface'; font-style:normal; font-weight:400; font-display:block;
  src:url('../assets/fonts/abril-400.woff') format('woff'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:block;
  src:url('../assets/fonts/inter-var.woff') format('woff'); }

:root {
  color-scheme: light dark;
  --color-bg: #FDFDFD;
  --ink-pure:#000; --surface:#fff; --surface-a:rgba(255,255,255,.7); --outer:#E9E7E4; --track:#D9D9D9; --dot:#D0D0D0;
  --mute:rgba(10,10,10,.62); --text-soft:rgba(10,10,10,.78); --line:rgba(10,10,10,.10); --footer-bg:#F4F3F1; --ghost:rgba(10,10,10,.14);
  --header-glass:rgba(255,255,255,.10); --header-line:rgba(255,255,255,.35); --header-solid:rgba(253,253,253,.95);
  --color-black: #0A0A0A;
  --color-red: #E50910;
  --color-red-deep: #C8060D;
  --color-quote: #E7140F;

  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-serif: 'Abril Fatface', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --col: min(100vw, 430px);                 /* width of the phone column */
  --u: min(calc(var(--col) / 390), calc(100vh / 844));
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (height: 100svh) {
  :root { --u: min(calc(var(--col) / 390), calc(100svh / 844)); }
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { background-color:var(--outer); font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:auto;
  scrollbar-width:none; -webkit-tap-highlight-color:transparent; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display:none; }
html.is-loading, html.is-loading body { overflow:hidden; }

body {
  font-family: var(--font-body);
  background: var(--outer);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display:block; max-width:100%; height:auto; -webkit-user-drag:none; user-select:none; }
a { text-decoration:none; color:inherit; }
button { background:none; border:none; cursor:pointer; font:inherit; color:inherit; }
ul { list-style:none; }

#uProbe   { position:fixed; left:0; top:0; width:var(--u); height:0; visibility:hidden; pointer-events:none; }
#svhProbe { position:fixed; left:0; top:0; width:0; height:100vh; visibility:hidden; pointer-events:none; }
@supports (height: 100svh) { #svhProbe { height:100svh; } }

/* --- the phone-width column --- */
.app {
  position: relative;
  width: var(--col);
  margin: 0 auto;
  background: var(--color-bg);
  overflow-x: clip;
  box-shadow: 0 0 80px rgba(0,0,0,.14);
}

/* ==========================================================
   LOADER
   ========================================================== */
.loader {
  position: fixed; top:0; bottom:0; left:0; right:0; margin:0 auto;
  width: var(--col);
  z-index: 1000;
  background: var(--color-bg);
  will-change: transform;
}
.loader__inner {
  position:absolute; top:44%; left:50%;
  margin-left: calc(var(--col) * -.275);
  margin-top: -60px;
  width: calc(var(--col) * .55);
  display:flex; flex-direction:column; align-items:center;
}
.loader__logo { width:100%; max-width:250px; height:auto; margin-bottom:28px; }
.loader__track { width:53%; max-width:200px; height:6px; background:var(--track); border-radius:999px; overflow:hidden; }
.loader__fill { height:100%; width:0%; background:var(--color-black); border-radius:999px; }

/* ==========================================================
   FIXED HEADER — transparent, background blurred
   ========================================================== */
.site-header {
  position: fixed; top:0; left:0; right:0; margin:0 auto;
  width: var(--col);
  z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(10px + var(--safe-top)) 18px 10px 20px;
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--header-line);
}
.js .site-header { opacity:0; }
.site-header__logo { display:block; width:112px; }
.site-header__logo img { width:100%; height:auto; }
.site-header__burger {
  width:44px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.site-header__burger span { display:block; width:24px; height:2.5px; background:var(--color-black); border-radius:2px;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; }

/* ==========================================================
   MOBILE MENU — full screen over a blurred page, no side panel
   ========================================================== */
.nav-overlay {
  position: fixed; top:0; bottom:0; left:0; right:0; margin:0 auto;
  width: var(--col);
  z-index: 980;                       /* below the header (and the loader at 1000) */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: calc(76px + var(--safe-top)) 22px calc(34px + var(--safe-bottom));
  background: rgba(253,253,253,.40);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
          backdrop-filter: blur(24px) saturate(1.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, visibility 0s linear .3s;
}
.nav-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .28s ease, visibility 0s linear 0s; }
.nav-overlay { overflow:hidden; background:rgba(253,253,253,.88);
  background-image:radial-gradient(120% 60% at 100% 0%, rgba(229,9,16,.16), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(229,9,16,.12), transparent 60%); }
.nav-overlay__orb { position:absolute; right:-70px; top:-70px; width:210px; height:210px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, #ff4a50, #e50910 60%, #a50006); opacity:.9; }
.nav-overlay__orb--b { right:auto; left:-60px; top:auto; bottom:-60px; width:150px; height:150px; opacity:.55; }
.nav-overlay__menu { position:relative; z-index:1; width:100%; max-width:340px; display:flex; flex-direction:column; align-items:stretch; }
.nav-overlay__menu > * { opacity:0; -webkit-transform:translateY(18px); transform:translateY(18px);
  transition:opacity .34s ease, transform .4s cubic-bezier(.2,.85,.28,1), color .2s ease, background .2s ease; }
.nav-overlay.is-open .nav-overlay__menu > * { opacity:1; -webkit-transform:none; transform:none; }
.nav-overlay.is-open .nav-overlay__menu > :nth-child(1) { transition-delay:.06s; }
.nav-overlay.is-open .nav-overlay__menu > :nth-child(2) { transition-delay:.12s; }
.nav-overlay.is-open .nav-overlay__menu > :nth-child(3) { transition-delay:.18s; }
.nav-overlay.is-open .nav-overlay__menu > :nth-child(4) { transition-delay:.24s; }
.nav-overlay.is-open .nav-overlay__menu > :nth-child(5) { transition-delay:.30s; }
.nav-overlay.is-open .nav-overlay__menu > :nth-child(6) { transition-delay:.36s; }
.nav-overlay__menu .nl { display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1px solid var(--line);
  font-family:var(--font-heading); font-weight:900; font-style:italic; text-transform:uppercase;
  font-size:29px; white-space:nowrap; line-height:1.1; letter-spacing:1px; color:var(--color-black); -webkit-tap-highlight-color:transparent; }
.nl i { font-family:var(--font-body); font-style:normal; font-weight:700; font-size:12px; letter-spacing:1.5px; color:var(--color-red); width:22px; }
.nl span { flex:1; }
.nl__arr { flex:none; width:22px; height:22px; color:var(--color-red); transition:transform .25s ease; }
.nav-overlay__menu .nl:hover, .nav-overlay__menu .nl:active { color:var(--color-red); }
.nl:hover .nl__arr, .nl:active .nl__arr { -webkit-transform:translateX(5px); transform:translateX(5px); }
.join { margin-top:22px; display:grid; gap:10px; }
.join__label { font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--mute); margin-bottom:2px; }
.nav-overlay__menu .join__card { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:18px;
  background:var(--surface); border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.06); color:var(--color-black);
  font-family:var(--font-body); font-style:normal; text-transform:none; letter-spacing:0; }
.join__ico { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#25D366; color:#fff; flex:none; }
.join__ico svg { width:23px; height:23px; }
.join__txt { display:flex; flex-direction:column; text-align:left; }
.join__txt b { font-size:15px; font-weight:700; line-height:1.2; }
.join__txt small { font-size:12px; color:var(--mute); margin-top:2px; }
.nav-overlay__menu .join__card:hover, .nav-overlay__menu .join__card:active { border-color:#25D366; }
.nav-overlay__menu .nav-overlay__cart {
  display:flex; align-items:center; justify-content:center; gap:9px; margin-top:16px;
  min-height:54px; padding:0 26px; border-radius:999px;
  background:var(--color-red); border:2px solid var(--color-red); color:#fff;
  font-family:var(--font-body); font-style:normal; font-weight:700; font-size:17px; line-height:1;
  letter-spacing:.6px; text-transform:none; box-shadow:0 10px 24px rgba(229,9,16,.32);
}
.nav-overlay__menu .nav-overlay__cart svg { width:20px; height:20px; color:#fff; }
.nav-overlay__tag {
  position:absolute; left:0; right:0; bottom:calc(26px + var(--safe-bottom)); text-align:center; z-index:1;
  font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--mute);
  opacity:0; transition:opacity .3s ease .22s;
}
.nav-overlay.is-open .nav-overlay__tag { opacity:1; }
@media (max-height:700px){ .nav-overlay__menu .nl { font-size:28px; padding:7px 4px; } .nav-overlay__tag { display:none; } }

/* burger becomes a cross; the header glass is dropped so only one blur runs */
html.nav-open, html.nav-open body { overflow:hidden; }
html.nav-open .site-header { z-index:990; background:transparent; border-bottom-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none; }
html.nav-open .site-header__burger span:nth-child(1) { -webkit-transform:translateY(7.5px) rotate(45deg); transform:translateY(7.5px) rotate(45deg); }
html.nav-open .site-header__burger span:nth-child(2) { opacity:0; -webkit-transform:scaleX(.2); transform:scaleX(.2); }
html.nav-open .site-header__burger span:nth-child(3) { -webkit-transform:translateY(-7.5px) rotate(-45deg); transform:translateY(-7.5px) rotate(-45deg); }

/* ==========================================================
   FOOTER — water glass
   ========================================================== */
.footer {
  position:relative; overflow:hidden; background:var(--footer-bg);
  padding: calc(var(--u)*70) 0 0;
}
.footer__blob { position:absolute; border-radius:50%; will-change:transform; pointer-events:none; }
.footer__blob--red   { width:calc(var(--u)*260); height:calc(var(--u)*260); right:calc(var(--u)*-110); top:calc(var(--u)*120);
  background:radial-gradient(circle at 35% 35%, #FF3B3F 0, #E50910 55%, #A5050B 100%); }
.footer__blob--black { width:calc(var(--u)*260); height:calc(var(--u)*260); left:calc(var(--u)*-110); top:calc(var(--u)*300);
  background:radial-gradient(circle at 35% 30%, #4a4a4a 0, #0A0A0A 65%); }
.footer__blob--grey  { width:calc(var(--u)*170); height:calc(var(--u)*170); right:calc(var(--u)*30); bottom:calc(var(--u)*60);
  background:radial-gradient(circle at 35% 35%, #ffffff 0, #D5D5D5 70%); }
.footer__ghost {
  position:absolute; left:0; right:0; top:calc(var(--u)*34); text-align:center; white-space:nowrap;
  font-family:var(--font-heading); font-weight:900; font-style:italic; font-size:calc(var(--u)*128); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--ghost); letter-spacing:calc(var(--u)*-2);
  pointer-events:none; user-select:none;
}

.footer__glass {
  position:relative; z-index:2;
  margin-top:calc(var(--u)*150);
  padding:calc(var(--u)*34) calc(var(--u)*26) calc(var(--u)*26 + var(--safe-bottom));
  border-radius:calc(var(--u)*34) calc(var(--u)*34) 0 0;
  background:linear-gradient(160deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.26) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.7); backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75); border-bottom:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.2), 0 calc(var(--u)*-10) calc(var(--u)*40) rgba(0,0,0,.10);
}
/* glossy highlight, like wet glass */
.footer__glass::before {
  content:''; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%);
}
.footer__glass > * { position:relative; }
.footer__logo { width:calc(var(--u)*150); height:auto; margin-bottom:calc(var(--u)*26); }

.footer__block + .footer__block { margin-top:calc(var(--u)*26); padding-top:calc(var(--u)*24); border-top:1px solid var(--line); }
.footer__heading {
  display:flex; align-items:center; gap:calc(var(--u)*10); margin-bottom:calc(var(--u)*10);
  font-family:var(--font-heading); font-weight:900; font-style:italic; font-size:calc(var(--u)*30); line-height:1; letter-spacing:calc(var(--u)*.5);
  text-transform:uppercase; color:var(--color-black);
}
.footer__heading i { display:block; width:calc(var(--u)*5); height:calc(var(--u)*24); border-radius:3px; background:var(--color-red); }
.footer__block p { font-size:calc(var(--u)*14.5); line-height:1.6; color:var(--text-soft); max-width:calc(var(--u)*320); }

.footer__social { display:flex; gap:calc(var(--u)*18); margin-top:calc(var(--u)*18); }
.footer__social li { display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*7); }
.footer__social span { font-size:calc(var(--u)*11.5); font-weight:600; letter-spacing:.3px; color:var(--text-soft); }
.social {
  width:calc(var(--u)*56); height:calc(var(--u)*56); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--color-black);
  background:linear-gradient(145deg, rgba(255,255,255,.85), rgba(255,255,255,.30));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 calc(var(--u)*8) calc(var(--u)*18) rgba(0,0,0,.12), inset 0 1px 0 #fff;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.social svg { width:calc(var(--u)*24); height:calc(var(--u)*24); }
.social:hover, .social:active { background:var(--color-red); color:#fff; transform:translateY(-3px); }
.footer__legal { margin-top:calc(var(--u)*28); padding-top:calc(var(--u)*16); border-top:1px solid var(--line); font-size:calc(var(--u)*12); color:var(--mute); text-align:center; }

.site-header__nav { display:none; }

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  :root { --col:100vw; --ud: min(calc(100vw / 1440), calc(100vh / 810)); --u: var(--ud); }
  @supports (height: 100svh) { :root { --ud: min(calc(100vw / 1440), calc(100svh / 810)); } }
  body { background:var(--color-bg); }
  .app { width:100%; box-shadow:none; }
  /* ----- header: logo left, links + cart right ----- */
  .site-header { width:100%; padding:calc(12px + var(--safe-top)) max(28px, calc(var(--u)*64)) 12px max(28px, calc(var(--u)*64)); }
  .site-header__logo { width:max(120px, calc(var(--u)*160)); }
  .site-header__burger { display:none; }
  .site-header__nav { display:flex; align-items:center; gap:max(22px, calc(var(--u)*44));
      font-family:var(--font-heading); font-weight:800; font-style:italic; text-transform:uppercase;
      font-size:max(16px, calc(var(--u)*22)); letter-spacing:1.2px; }
  .site-header__nav a { position:relative; padding:6px 0; }
  .site-header__nav a:not(.site-header__cart)::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background:var(--color-red); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
  .site-header__nav a:not(.site-header__cart):hover::after { transform:scaleX(1); }
  .site-header__cart { display:flex; align-items:center; gap:8px; padding:9px 20px !important; border:2px solid var(--color-red); border-radius:999px; background:var(--surface-a); color:var(--color-black); font-family:var(--font-body); font-style:normal; font-weight:700; font-size:max(13px, calc(var(--u)*15)); letter-spacing:.6px; transition:background .2s, color .2s; }
  .site-header__cart svg { width:18px; height:18px; color:var(--color-red); }
  .site-header__cart:hover { background:var(--color-red); color:#fff; }
  .site-header__cart:hover svg { color:#fff; }
  @supports (height: 100svh) { .gallery__frame { height:min(calc(var(--u)*690), calc(100svh - 150px)); } }
  /* ----- footer: wide glass card, 3 columns ----- */
  .footer { padding:calc(var(--u)*80) 0 calc(var(--u)*70); }
  .footer__blob--red   { width:calc(var(--u)*560); height:calc(var(--u)*560); right:calc(var(--u)*-120); top:calc(var(--u)*40); }
  .footer__blob--black { width:calc(var(--u)*470); height:calc(var(--u)*470); left:calc(var(--u)*-170); top:calc(var(--u)*250); }
  .footer__blob--grey  { width:calc(var(--u)*320); height:calc(var(--u)*320); right:calc(var(--u)*380); bottom:calc(var(--u)*30); }
  .footer__ghost { font-size:calc(var(--u)*330); top:calc(var(--u)*30); -webkit-text-stroke-width:2px; }
  .footer__glass { display:grid; grid-template-columns:1fr 1.45fr 1.3fr; column-gap:calc(var(--u)*64); align-items:start;
      width:min(calc(var(--u)*1240), calc(100% - 48px)); margin:calc(var(--u)*250) auto 0;
      padding:calc(var(--u)*64) calc(var(--u)*72) calc(var(--u)*34);
      border-radius:calc(var(--u)*46); border:1px solid rgba(255,255,255,.75);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 calc(var(--u)*24) calc(var(--u)*60) rgba(0,0,0,.12); }
  .footer__logo { width:calc(var(--u)*230); margin:0; }
  .footer__block + .footer__block { margin-top:0; padding-top:0; border-top:none; padding-left:calc(var(--u)*60); border-left:1px solid var(--line); }
  .footer__heading { font-size:calc(var(--u)*44); gap:calc(var(--u)*14); margin-bottom:calc(var(--u)*16); }
  .footer__heading i { width:calc(var(--u)*8); height:calc(var(--u)*34); }
  .footer__block p { font-size:calc(var(--u)*20); max-width:none; }
  .footer__social { gap:calc(var(--u)*26); margin-top:calc(var(--u)*26); }
  .footer__social span { font-size:calc(var(--u)*15); }
  .social { width:calc(var(--u)*76); height:calc(var(--u)*76); }
  .social svg { width:calc(var(--u)*32); height:calc(var(--u)*32); }
  .footer__legal { grid-column:1 / -1; margin-top:calc(var(--u)*54); padding-top:calc(var(--u)*22); font-size:calc(var(--u)*15); }
}

/* old-browser fallback */
@supports not (overflow-x: clip) { html, body { overflow-x:hidden; } }

/* lite / perf mode (copied from KickUp) */
.perf .site-header, .perf .footer__glass, .perf .social {
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.perf .site-header { background:var(--header-solid); }
.perf .footer__glass { background:rgba(255,255,255,.85); box-shadow:0 -4px 14px rgba(0,0,0,.08); }
.perf .social { background:rgba(255,255,255,.92); box-shadow:0 3px 8px rgba(0,0,0,.12); }
.perf .app { box-shadow:none; }

/* glass-lite: an ordinary phone. The glass look is kept, but the blur is
   cheaper and the small extra blur layers (the three social buttons) are
   dropped — four separate blurred surfaces is what makes a phone stutter. */
.glass-lite .site-header {
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4);
}
.glass-lite .footer__glass {
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
}
.glass-lite .social {
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.72));
}
:root[data-theme="dark"] .glass-lite .social {
  background:linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
}
.glass-lite .nav-overlay {
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
}

/* ==== DARK THEME (only when the visitor picks it with the bottom-left slider; default is white) ==== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]){--color-bg:#0E0E10; --color-black:#F4F4F5; --ink-pure:#fff; --surface:#1C1C20; --surface-a:rgba(28,28,32,.8); --outer:#050506; --track:#2B2B30; --dot:#3A3A40; --mute:rgba(244,244,245,.64); --text-soft:rgba(244,244,245,.8); --line:rgba(255,255,255,.12); --footer-bg:#141416; --ghost:rgba(255,255,255,.14); --header-glass:rgba(14,14,16,.55); --header-line:rgba(255,255,255,.08); --header-solid:rgba(14,14,16,.96); color-scheme:light dark;}
:root:not([data-theme="light"]) .footer__blob--black{background:radial-gradient(circle at 35% 30%, #6B6B72 0, #2B2B31 65%);}
:root:not([data-theme="light"]) .footer__blob--grey{background:radial-gradient(circle at 35% 35%, #4A4A50 0, #25252A 70%);}
:root:not([data-theme="light"]) .footer__glass,:root:not([data-theme="light"]) .perf .footer__glass{background:linear-gradient(160deg, rgba(48,48,56,.62) 0%, rgba(26,26,30,.5) 100%); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 calc(var(--u)*-10) calc(var(--u)*40) rgba(0,0,0,.45);}
:root:not([data-theme="light"]) .footer__glass::before{background:linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 32%);}
:root:not([data-theme="light"]) .social,:root:not([data-theme="light"]) .perf .social{background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.18); box-shadow:0 calc(var(--u)*8) calc(var(--u)*18) rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);}
:root:not([data-theme="light"]) .site-header__cart{background:var(--surface-a);}
}
:root[data-theme="dark"]{--color-bg:#0E0E10; --color-black:#F4F4F5; --ink-pure:#fff; --surface:#1C1C20; --surface-a:rgba(28,28,32,.8); --outer:#050506; --track:#2B2B30; --dot:#3A3A40; --mute:rgba(244,244,245,.64); --text-soft:rgba(244,244,245,.8); --line:rgba(255,255,255,.12); --footer-bg:#141416; --ghost:rgba(255,255,255,.14); --header-glass:rgba(14,14,16,.55); --header-line:rgba(255,255,255,.08); --header-solid:rgba(14,14,16,.96); color-scheme:light dark;}
:root[data-theme="dark"] .footer__blob--black{background:radial-gradient(circle at 35% 30%, #6B6B72 0, #2B2B31 65%);}
:root[data-theme="dark"] .footer__blob--grey{background:radial-gradient(circle at 35% 35%, #4A4A50 0, #25252A 70%);}
:root[data-theme="dark"] .footer__glass,:root[data-theme="dark"] .perf .footer__glass{background:linear-gradient(160deg, rgba(48,48,56,.62) 0%, rgba(26,26,30,.5) 100%); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 calc(var(--u)*-10) calc(var(--u)*40) rgba(0,0,0,.45);}
:root[data-theme="dark"] .footer__glass::before{background:linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 32%);}
:root[data-theme="dark"] .social,:root[data-theme="dark"] .perf .social{background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.18); box-shadow:0 calc(var(--u)*8) calc(var(--u)*18) rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);}
:root[data-theme="dark"] .site-header__cart{background:var(--surface-a);}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* menu veil follows the theme */
:root[data-theme="dark"] .nav-overlay{ background-color:rgba(10,10,12,.88); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-overlay{ background-color:rgba(10,10,12,.88); } }

/* reduced motion: the menu is still there, just without the moves */
@media (prefers-reduced-motion: reduce){
  .nav-overlay, .nav-overlay__menu > *, .nav-overlay__tag, .site-header__burger span { transition:none !important; }
  .nav-overlay__menu > * { opacity:1; -webkit-transform:none; transform:none; }
  .nav-overlay__tag { opacity:1; }
}