/* =========================================================
   COLOUR THEMES: a preview for the client to choose from. Ice White is the default.
   Once one is picked, keep it, delete the others and the picker (the colourPick block in main-v2.js).
   Each theme only swaps the tokens in style-v2.css.
   ========================================================= */

/* 1. Honey Noir: espresso black with honey gold, warm cream text */
html[data-theme="honey"] {
  --bg: #0f0d0a; --bg-rgb: 15, 13, 10;
  --surface: #1a1712; --surface-2: #231f18;
  --sky: #1d1913;
  --text: #f2ecdd; --ink-rgb: 242, 236, 221;
  --text-dim: rgba(242, 236, 221, .66); --line: rgba(242, 236, 221, .14);
  --text-muted: #b9ae95;
  --sun: #d6a64f; --sun-deep: #b98a35; --sun-hover: #f0c06a; --sun-rgb: 214, 166, 79;
  --on-sun: #17120a;
  --prop: #060504; --shadow-rgb: 0, 0, 0;
  --hero-sky: #1b1813; --hero-sky-top: #0f0d0a;
  --theme-meta: #0f0d0a;
  color-scheme: dark;
}

/* 2. Copper Smoke: smoked charcoal with a glowing copper, like light through haze */
html[data-theme="copper"] {
  --bg: #120f0d; --bg-rgb: 18, 15, 13;
  --surface: #1c1815; --surface-2: #26201c;
  --sky: #1e1916;
  --text: #f5ede5; --ink-rgb: 245, 237, 229;
  --text-dim: rgba(245, 237, 229, .66); --line: rgba(245, 237, 229, .14);
  --text-muted: #bcab9b;
  --sun: #e0793a; --sun-deep: #c4622a; --sun-hover: #f2935a; --sun-rgb: 224, 121, 58;
  --on-sun: #1a0c04;
  --prop: #080605; --shadow-rgb: 0, 0, 0;
  --hero-sky: #1c1714; --hero-sky-top: #120f0d;
  --theme-meta: #120f0d;
  color-scheme: dark;
}

/* 3. Wine Velvet: deep wine black, champagne rose and warm white */
html[data-theme="wine"] {
  --bg: #14090c; --bg-rgb: 20, 9, 12;
  --surface: #1f0f14; --surface-2: #2b161c;
  --sky: #221116;
  --text: #f6eae5; --ink-rgb: 246, 234, 229;
  --text-dim: rgba(246, 234, 229, .66); --line: rgba(246, 234, 229, .14);
  --text-muted: #c7a69f;
  --sun: #e8a888; --sun-deep: #cf8b6b; --sun-hover: #f5c0a4; --sun-rgb: 232, 168, 136;
  --on-sun: #1e0b0e;
  --prop: #0a0406; --shadow-rgb: 0, 0, 0;
  --hero-sky: #1f0e13; --hero-sky-top: #14090c;
  --theme-meta: #14090c;
  color-scheme: dark;
}

/* 4. Forest Gold: deep forest green with old gold and ivory */
html[data-theme="forest"] {
  --bg: #0a120e; --bg-rgb: 10, 18, 14;
  --surface: #111c16; --surface-2: #18261e;
  --sky: #13201a;
  --text: #eff0e4; --ink-rgb: 239, 240, 228;
  --text-dim: rgba(239, 240, 228, .66); --line: rgba(239, 240, 228, .14);
  --text-muted: #a9b5a5;
  --sun: #d4b05a; --sun-deep: #b8953f; --sun-hover: #e8c672; --sun-rgb: 212, 176, 90;
  --on-sun: #141005;
  --prop: #050a07; --shadow-rgb: 0, 0, 0;
  --hero-sky: #101b15; --hero-sky-top: #0a120e;
  --theme-meta: #0a120e;
  color-scheme: dark;
}

/* 5. Ivory Gold: the light side of Honey Noir. Ivory paper, espresso ink, antique gold */
html[data-theme="ivory"] {
  --bg: #f6f1e7; --bg-rgb: 246, 241, 231;
  --surface: #fffdf8; --surface-2: #ece4d5;
  --sky: #efe6d4;
  --text: #1c1712; --ink-rgb: 28, 23, 18;
  --text-dim: rgba(28, 23, 18, .64); --line: rgba(28, 23, 18, .12);
  --text-muted: #6f6453;
  --sun: #9c7424; --sun-deep: #82601b; --sun-hover: #b3872f; --sun-rgb: 156, 116, 36;
  --on-sun: #fff;
  --prop: #1a140e; --shadow-rgb: 30, 22, 12;
  --hero-sky: #ebe3d4; --hero-sky-top: #f6f1e7;
  --theme-meta: #f6f1e7;
}

/* ===== From the client's reference sites ===== */

/* Zeal Z (zealzentertainment.com): cool white, near-black ink, a gold-to-burnt-orange accent */
html[data-theme="zeal"] {
  --bg: #f4f4f7; --bg-rgb: 244, 244, 247;
  --surface: #ffffff; --surface-2: #eaeaee;
  --sky: #eeeef2;
  --text: #111115; --ink-rgb: 17, 17, 21;
  --text-dim: rgba(17, 17, 21, .62); --line: rgba(17, 17, 21, .12);
  --text-muted: #76767f;
  --sun: #c25a0e; --sun-deep: #a84c0a; --sun-hover: #d96a16; --sun-rgb: 194, 90, 14;
  --on-sun: #fff;
  --prop: #0e0e12; --shadow-rgb: 17, 17, 21;
  --hero-sky: #e9e9ee; --hero-sky-top: #f4f4f7;
  --theme-meta: #f4f4f7;
}
html[data-theme="zeal"] .btn--sun { background: linear-gradient(135deg, #b38915, #d35400); border-color: transparent; }

/* Banijay Asia (banijayasia.com): deep plum, hot pink, white */
html[data-theme="banijay"] {
  --bg: #43012f; --bg-rgb: 67, 1, 47;
  --surface: #520239; --surface-2: #5c013f;
  --sky: #4e0236;
  --text: #ffffff; --ink-rgb: 255, 255, 255;
  --text-dim: rgba(255, 255, 255, .7); --line: rgba(255, 255, 255, .16);
  --text-muted: #dcb6cc;
  --sun: #ff4370; --sun-deep: #e8305e; --sun-hover: #ff6b8e; --sun-rgb: 255, 67, 112;
  --on-sun: #fff;
  --prop: #22011a; --shadow-rgb: 0, 0, 0;
  --hero-sky: #4a0134; --hero-sky-top: #43012f;
  --theme-meta: #43012f;
  color-scheme: dark;
}

/* BeeHive (beehiveproductions.in): near-black, honey gold and cream (very close to Honey Noir) */
html[data-theme="beehive"] {
  --bg: #0c0b08; --bg-rgb: 12, 11, 8;
  --surface: #151209; --surface-2: #1b1710;
  --sky: #151209;
  --text: #f2ecdd; --ink-rgb: 242, 236, 221;
  --text-dim: rgba(242, 236, 221, .62); --line: rgba(242, 236, 221, .13);
  --text-muted: #b5ab95;
  --sun: #d3a44c; --sun-deep: #b88a35; --sun-hover: #f4c56a; --sun-rgb: 211, 164, 76;
  --on-sun: #0c0b08;
  --prop: #080705; --shadow-rgb: 0, 0, 0;
  --hero-sky: #151209; --hero-sky-top: #0c0b08;
  --theme-meta: #0c0b08;
  color-scheme: dark;
}

/* ===== White backgrounds ===== */

/* White & Vermilion: clean white, black ink, a bright vermilion */
html[data-theme="paper-red"] {
  --bg: #ffffff; --bg-rgb: 255, 255, 255;
  --surface: #f7f7f5; --surface-2: #eeeeea;
  --sky: #f3f3ef;
  --text: #111111; --ink-rgb: 17, 17, 17;
  --text-dim: rgba(17, 17, 17, .62); --line: rgba(17, 17, 17, .12);
  --text-muted: #666660;
  --sun: #d8381c; --sun-deep: #b82c13; --sun-hover: #ea4a2b; --sun-rgb: 216, 56, 28;
  --on-sun: #fff;
  --prop: #121212; --shadow-rgb: 20, 20, 20;
  --hero-sky: #eeeeec; --hero-sky-top: #ffffff;
  --theme-meta: #ffffff;
}

/* White & Cobalt: clean white, ink, a confident cobalt blue */
html[data-theme="paper-blue"] {
  --bg: #ffffff; --bg-rgb: 255, 255, 255;
  --surface: #f7f7f5; --surface-2: #eeeeea;
  --sky: #f3f3ef;
  --text: #0f1220; --ink-rgb: 15, 18, 32;
  --text-dim: rgba(15, 18, 32, .62); --line: rgba(15, 18, 32, .12);
  --text-muted: #5d6275;
  --sun: #2446d8; --sun-deep: #1b37b4; --sun-hover: #3a5cf0; --sun-rgb: 36, 70, 216;
  --on-sun: #fff;
  --prop: #121212; --shadow-rgb: 20, 20, 20;
  --hero-sky: #eeeeec; --hero-sky-top: #ffffff;
  --theme-meta: #ffffff;
}

/* White & Emerald: clean white, ink, a deep emerald */
html[data-theme="paper-green"] {
  --bg: #ffffff; --bg-rgb: 255, 255, 255;
  --surface: #f7f7f5; --surface-2: #eeeeea;
  --sky: #f3f3ef;
  --text: #101814; --ink-rgb: 16, 24, 20;
  --text-dim: rgba(16, 24, 20, .62); --line: rgba(16, 24, 20, .12);
  --text-muted: #5d6a63;
  --sun: #0e7a53; --sun-deep: #0a6343; --sun-hover: #139066; --sun-rgb: 14, 122, 83;
  --on-sun: #fff;
  --prop: #121212; --shadow-rgb: 20, 20, 20;
  --hero-sky: #eeeeec; --hero-sky-top: #ffffff;
  --theme-meta: #ffffff;
}

/* White & Gold: clean white, espresso ink, antique gold */
html[data-theme="paper-gold"] {
  --bg: #ffffff; --bg-rgb: 255, 255, 255;
  --surface: #f7f7f5; --surface-2: #eeeeea;
  --sky: #f3f3ef;
  --text: #15120d; --ink-rgb: 21, 18, 13;
  --text-dim: rgba(21, 18, 13, .62); --line: rgba(21, 18, 13, .12);
  --text-muted: #6f6556;
  --sun: #a87c22; --sun-deep: #8c6619; --sun-hover: #c0912f; --sun-rgb: 168, 124, 34;
  --on-sun: #fff;
  --prop: #121212; --shadow-rgb: 20, 20, 20;
  --hero-sky: #eeeeec; --hero-sky-top: #ffffff;
  --theme-meta: #ffffff;
}

/* White & Black: pure editorial black and white */
html[data-theme="paper-mono"] {
  --bg: #ffffff; --bg-rgb: 255, 255, 255;
  --surface: #f7f7f5; --surface-2: #eeeeea;
  --sky: #f3f3ef;
  --text: #111111; --ink-rgb: 17, 17, 17;
  --text-dim: rgba(17, 17, 17, .62); --line: rgba(17, 17, 17, .12);
  --text-muted: #666660;
  --sun: #111111; --sun-deep: #000000; --sun-hover: #333333; --sun-rgb: 17, 17, 17;
  --on-sun: #fff;
  --prop: #121212; --shadow-rgb: 20, 20, 20;
  --hero-sky: #eeeeec; --hero-sky-top: #ffffff;
  --theme-meta: #ffffff;
}


/* ===== From the Skyora logo: icy blue, periwinkle, cyan, midnight and starlight white ===== */

/* Starlight Night: the logo on its night sky. Midnight blue, icy sky blue, starlight white */
html[data-theme="logo-night"] {
  --bg: #070b1a; --bg-rgb: 7, 11, 26;
  --surface: #0e1530; --surface-2: #141d3d;
  --sky: #0f1836;
  --text: #ecf1ff; --ink-rgb: 236, 241, 255;
  --text-dim: rgba(236, 241, 255, .66); --line: rgba(236, 241, 255, .14);
  --text-muted: #a3b0d4;
  --sun: #7cb4ff; --sun-deep: #5b97f0; --sun-hover: #a3cbff; --sun-rgb: 124, 180, 255;
  --on-sun: #06102a;
  --prop: #04060f; --shadow-rgb: 0, 0, 0;
  --hero-sky: #0e1530; --hero-sky-top: #070b1a;
  --theme-meta: #070b1a;
  color-scheme: dark;
}

/* Deep Indigo: the logo's violet side. Ink indigo, periwinkle, soft lilac white */
html[data-theme="logo-indigo"] {
  --bg: #0c0a24; --bg-rgb: 12, 10, 36;
  --surface: #15123a; --surface-2: #1d1949;
  --sky: #171340;
  --text: #eeecff; --ink-rgb: 238, 236, 255;
  --text-dim: rgba(238, 236, 255, .66); --line: rgba(238, 236, 255, .14);
  --text-muted: #aba7d6;
  --sun: #9b98ff; --sun-deep: #7d79f0; --sun-hover: #b9b7ff; --sun-rgb: 155, 152, 255;
  --on-sun: #0c0a24;
  --prop: #06051a; --shadow-rgb: 0, 0, 0;
  --hero-sky: #15123a; --hero-sky-top: #0c0a24;
  --theme-meta: #0c0a24;
  color-scheme: dark;
}

/* Arctic Cyan: the logo's brightest edge. Deep sea teal-black, electric cyan, ice white */
html[data-theme="logo-cyan"] {
  --bg: #061317; --bg-rgb: 6, 19, 23;
  --surface: #0b2026; --surface-2: #112a31;
  --sky: #0d242b;
  --text: #e8fbff; --ink-rgb: 232, 251, 255;
  --text-dim: rgba(232, 251, 255, .66); --line: rgba(232, 251, 255, .14);
  --text-muted: #9ec3cc;
  --sun: #4fd1ee; --sun-deep: #2fb4d3; --sun-hover: #7fe0f5; --sun-rgb: 79, 209, 238;
  --on-sun: #04161b;
  --prop: #030b0d; --shadow-rgb: 0, 0, 0;
  --hero-sky: #0b2026; --hero-sky-top: #061317;
  --theme-meta: #061317;
  color-scheme: dark;
}

/* Ice White: the logo on white. Cool white, midnight ink, the logo's bright blue */
html[data-theme="logo-ice"] {
  --bg: #f5f8ff; --bg-rgb: 245, 248, 255;
  --surface: #ffffff; --surface-2: #e8eefb;
  --sky: #e6edfb;
  --text: #0c1430; --ink-rgb: 12, 20, 48;
  --text-dim: rgba(12, 20, 48, .64); --line: rgba(12, 20, 48, .12);
  --text-muted: #56607d;
  --sun: #2b62e3; --sun-deep: #2156cc; --sun-hover: #4a82ff; --sun-rgb: 43, 98, 227;
  --on-sun: #fff;
  --prop: #0a1128; --shadow-rgb: 12, 20, 48;
  --hero-sky: #e6edfb; --hero-sky-top: #f5f8ff;
  --theme-meta: #f5f8ff;
}

/* Sky Mist: pale sky blue, deep navy ink, periwinkle */
html[data-theme="logo-mist"] {
  --bg: #eef3fb; --bg-rgb: 238, 243, 251;
  --surface: #ffffff; --surface-2: #e0e8f5;
  --sky: #dfe8f7;
  --text: #121a33; --ink-rgb: 18, 26, 51;
  --text-dim: rgba(18, 26, 51, .64); --line: rgba(18, 26, 51, .12);
  --text-muted: #5a6480;
  --sun: #5662e8; --sun-deep: #424dcc; --sun-hover: #6e79f5; --sun-rgb: 86, 98, 232;
  --on-sun: #fff;
  --prop: #0d1328; --shadow-rgb: 18, 26, 51;
  --hero-sky: #dfe8f7; --hero-sky-top: #eef3fb;
  --theme-meta: #eef3fb;
}


/* dark themes: the logo's original colours, the photo and grain soften */
:is(html[data-theme="honey"], html[data-theme="copper"], html[data-theme="wine"], html[data-theme="forest"], html[data-theme="banijay"], html[data-theme="beehive"], html[data-theme="logo-night"], html[data-theme="logo-indigo"], html[data-theme="logo-cyan"]) .brand__logo--on-light { display: none; }
:is(html[data-theme="honey"], html[data-theme="copper"], html[data-theme="wine"], html[data-theme="forest"], html[data-theme="banijay"], html[data-theme="beehive"], html[data-theme="logo-night"], html[data-theme="logo-indigo"], html[data-theme="logo-cyan"]) .brand__logo--on-dark { display: block; }
:is(html[data-theme="honey"], html[data-theme="copper"], html[data-theme="wine"], html[data-theme="forest"], html[data-theme="banijay"], html[data-theme="beehive"], html[data-theme="logo-night"], html[data-theme="logo-indigo"], html[data-theme="logo-cyan"]) .hero__photo img { filter: brightness(.82) contrast(1.05); }
:is(html[data-theme="honey"], html[data-theme="copper"], html[data-theme="wine"], html[data-theme="forest"], html[data-theme="banijay"], html[data-theme="beehive"], html[data-theme="logo-night"], html[data-theme="logo-indigo"], html[data-theme="logo-cyan"]) .grain { mix-blend-mode: screen; opacity: .025; }
:is(html[data-theme="honey"], html[data-theme="copper"], html[data-theme="wine"], html[data-theme="forest"], html[data-theme="banijay"], html[data-theme="beehive"], html[data-theme="logo-night"], html[data-theme="logo-indigo"], html[data-theme="logo-cyan"]) .hero .btn--ghost { background: rgba(var(--bg-rgb), .7); }

/* light palettes: their photos are busy, so the fade behind the hero text reaches further */
:is(html[data-theme="ivory"], html[data-theme="zeal"], html[data-theme^="paper-"], html[data-theme="logo-ice"], html[data-theme="logo-mist"]) .hero::after { background: linear-gradient(90deg, rgba(var(--bg-rgb), .97), rgba(var(--bg-rgb), .93) 45%, rgba(var(--bg-rgb), .55) 62%, rgba(var(--bg-rgb), 0) 80%), linear-gradient(to bottom, transparent 88%, var(--bg)); }

/* phones, every palette: a veil over the full-screen photo, clearing towards the bottom */
@media (max-width: 760px) { html[data-theme] .hero::after { background: linear-gradient(to bottom, rgba(var(--bg-rgb), .8), rgba(var(--bg-rgb), .74) 58%, rgba(var(--bg-rgb), .06) 72%, rgba(var(--bg-rgb), 0)); } }
@media (max-width: 760px) and (max-height: 700px) { html[data-theme] .hero::after { background: linear-gradient(to bottom, rgba(var(--bg-rgb), .82), rgba(var(--bg-rgb), .78) 80%, rgba(var(--bg-rgb), .15) 94%, rgba(var(--bg-rgb), 0)); } }

/* ---------- Ice White: everything the other palettes leave warm black or gold follows the logo's midnight blue ---------- */
/* on narrower screens the headline runs further across the photo, so the fade does too */
@media (min-width: 761px) and (max-width: 1180px) { html[data-theme="logo-ice"] .hero::after { background: linear-gradient(90deg, rgba(var(--bg-rgb), .97), rgba(var(--bg-rgb), .92) 70%, rgba(var(--bg-rgb), .5) 86%, rgba(var(--bg-rgb), 0) 100%), linear-gradient(to bottom, transparent 88%, var(--bg)); } }
html[data-theme="logo-ice"] { --rec: #2f6bf0; --on-dark: #ecf1ff; --on-dark-dim: rgba(236, 241, 255, .64); }
html[data-theme="logo-ice"] .intro__screen { background: #0a1128; }
html[data-theme="logo-ice"] .intro [fill="#141413"] { fill: #0a1128; }
html[data-theme="logo-ice"] .intro [stroke="#141413"] { stroke: #0a1128; }
html[data-theme="logo-ice"] .intro__skip:hover { background: #0a1128; }
html[data-theme="logo-ice"] .script .btn--sun:hover { background: #141d3d; }
/* film frames */
html[data-theme="logo-ice"] .frame__art { background: #0e1530; }
html[data-theme="logo-ice"] .frame__art::after { background: linear-gradient(180deg, rgba(7, 11, 26, 0) 30%, rgba(7, 11, 26, .92)); }
/* Why Skyora: a blue-white beam on a midnight stage */
html[data-theme="logo-ice"] .why__stage { background: radial-gradient(120% 80% at 50% 110%, #1a2a5e, #070b1a 62%); color: #ecf1ff; box-shadow: 0 40px 80px -50px rgba(12, 20, 48, .8), inset 0 0 0 1px rgba(236, 241, 255, .08); }
html[data-theme="logo-ice"] .why__lamps::before { background: linear-gradient(#2a3663, #141d3d); }
html[data-theme="logo-ice"] .why__lamp { color: rgba(236, 241, 255, .55); }
html[data-theme="logo-ice"] .why__bulb { background: linear-gradient(#25305a, #0e1530); box-shadow: inset 0 0 0 1px rgba(236, 241, 255, .14); }
html[data-theme="logo-ice"] .why__bulb::after { background: #2c3864; }
html[data-theme="logo-ice"] .why__lamp:hover { color: #ecf1ff; }
html[data-theme="logo-ice"] .why__lamp:hover .why__bulb::after { background: #5b6ea8; }
html[data-theme="logo-ice"] .why__lamp[aria-selected="true"] { color: #fff; }
html[data-theme="logo-ice"] .why__lamp[aria-selected="true"] .why__bulb::after { background: #eef5ff; box-shadow: 0 0 10px 3px rgba(190, 220, 255, .9), 0 0 30px 8px rgba(124, 180, 255, .6); }
html[data-theme="logo-ice"] .why__beam { background: linear-gradient(to bottom, rgba(225, 238, 255, .6), rgba(170, 205, 255, .24) 45%, rgba(124, 180, 255, .12) 80%, transparent); }
html[data-theme="logo-ice"] .why__pool { background: radial-gradient(closest-side, rgba(190, 220, 255, .34), rgba(124, 180, 255, .14) 55%, transparent); }
html[data-theme="logo-ice"] .why__ico { border-color: rgba(190, 220, 255, .55); color: #cfe2ff; background: rgba(190, 220, 255, .08); }
html[data-theme="logo-ice"] .why__big { text-shadow: 0 0 40px rgba(190, 220, 255, .4); }
html[data-theme="logo-ice"] .why__title { color: #7cb4ff; }
html[data-theme="logo-ice"] .why__line { color: rgba(236, 241, 255, .74); }
/* the clapperboard */
html[data-theme="logo-ice"] .board__body, html[data-theme="logo-ice"] .board__stick { outline-color: rgba(236, 241, 255, .1); }
html[data-theme="logo-ice"] .board__stick { background: repeating-linear-gradient(-55deg, #ecf1ff 0 22px, #0a1128 22px 44px); box-shadow: inset 0 0 0 2px #0a1128; }
html[data-theme="logo-ice"] .board__stick:not(.board__stick--top) { background: repeating-linear-gradient(55deg, #ecf1ff 0 22px, #0a1128 22px 44px); }
html[data-theme="logo-ice"] .board__body { background: #0a1128; color: #ecf1ff; }
html[data-theme="logo-ice"] .board__row { border-bottom-color: rgba(236, 241, 255, .2); }
html[data-theme="logo-ice"] .board__row span { color: rgba(236, 241, 255, .58); }
html[data-theme="logo-ice"] .board__row b { color: #ecf1ff; }
html[data-theme="logo-ice"] .board__row--split > div + div { border-left-color: rgba(236, 241, 255, .2); }
html[data-theme="logo-ice"] .board__name::placeholder { color: rgba(236, 241, 255, .42); }
/* the footer's credits screen */
html[data-theme="logo-ice"] .roll { background: #0a1128; color: #ecf1ff; box-shadow: inset 0 0 0 1px rgba(236, 241, 255, .08), 0 30px 60px -36px rgba(var(--shadow-rgb), .5); }
html[data-theme="logo-ice"] .roll::before { background: linear-gradient(#0a1128, rgba(10, 17, 40, 0)); }
html[data-theme="logo-ice"] .roll::after { background: linear-gradient(rgba(10, 17, 40, 0), #0a1128); }
html[data-theme="logo-ice"] .roll__label { color: #7cb4ff; background: linear-gradient(#0a1128 60%, rgba(10, 17, 40, 0)); }
html[data-theme="logo-ice"] .roll__list dt { color: rgba(236, 241, 255, .58); }
/* Lights page: the switch board, the rig bar and one logo colour per equipment group */
html[data-theme="logo-ice"] .page-lights { --gel-moving: #2f6bf0; --gel-effects: #5662e8; --gel-control: #0e87a8; --gel-rigging: #0c1430; }
html[data-theme="logo-ice"] .gear__tag--control, html[data-theme="logo-ice"] .gear__tag--rigging { color: #fff; }
html[data-theme="logo-ice"] .cue-board { background: linear-gradient(160deg, #141d3d, #070b1a); box-shadow: 0 50px 90px -40px rgba(12, 20, 48, .7), inset 0 0 0 1px rgba(236, 241, 255, .08); color: #ecf1ff; }
html[data-theme="logo-ice"] .cue-board__ask { color: #9cc4ff; }
html[data-theme="logo-ice"] .cue-board__ask::before { background: #9cc4ff; box-shadow: 0 0 10px 2px rgba(156, 196, 255, .7); }
html[data-theme="logo-ice"] .cue-board__count { background: rgba(7, 11, 26, .65); color: rgba(236, 241, 255, .82); }
html[data-theme="logo-ice"] .cue-board__count b { color: #9cc4ff; }
html[data-theme="logo-ice"] .cue-board__done { background: linear-gradient(transparent, rgba(7, 11, 26, .78)); }
html[data-theme="logo-ice"] .cue-board__done p { text-shadow: 0 0 30px rgba(156, 196, 255, .6); }
html[data-theme="logo-ice"] .cue-sw { border-color: rgba(236, 241, 255, .16); background: linear-gradient(#1b2650, #111a38); color: rgba(236, 241, 255, .8); box-shadow: 0 3px 0 #050814, inset 0 1px 0 rgba(236, 241, 255, .07); }
html[data-theme="logo-ice"] .cue-sw:active { box-shadow: 0 1px 0 #050814; }
html[data-theme="logo-ice"] .cue-sw__led { background: #2c3864; }
html[data-theme="logo-ice"] .cue-sw__no { color: rgba(236, 241, 255, .55); }
html[data-theme="logo-ice"] .cue-sw:hover { border-color: rgba(236, 241, 255, .38); color: #fff; }
html[data-theme="logo-ice"] .cue-sw[aria-pressed="true"] { border-color: rgba(156, 196, 255, .65); color: #fff; background: linear-gradient(#22346e, #16224a); }
html[data-theme="logo-ice"] .cue-sw[aria-pressed="true"] .cue-sw__led { background: #9cc4ff; box-shadow: 0 0 10px 3px rgba(156, 196, 255, .75); }
html[data-theme="logo-ice"] .cue-sw[aria-pressed="true"] .cue-sw__no { color: #9cc4ff; }
html[data-theme="logo-ice"] .cue-sw.is-next { animation-name: cueNextIce; }
@keyframes cueNextIce { 50% { border-color: rgba(156, 196, 255, .85); box-shadow: 0 3px 0 #050814, 0 0 0 4px rgba(156, 196, 255, .16); } }
html[data-theme="logo-ice"] .cue-sw:focus-visible, html[data-theme="logo-ice"] .cue-board__all:focus-visible { outline-color: #9cc4ff; }
html[data-theme="logo-ice"] .cue-board__stats { border-top-color: rgba(236, 241, 255, .12); }
html[data-theme="logo-ice"] .cue-board__stats li { border-left-color: rgba(236, 241, 255, .12); }
html[data-theme="logo-ice"] .cue-board__stats b { background: linear-gradient(100deg, #9cc4ff, #f0f6ff 50%, #9cc4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="logo-ice"] .cue-board__stats span { color: rgba(236, 241, 255, .6); }
html[data-theme="logo-ice"] .rigbar { background: #0a1128; color: #ecf1ff; }
html[data-theme="logo-ice"] .rigbar__toggle b { color: #7cb4ff; }
html[data-theme="logo-ice"] .rigbar__units, html[data-theme="logo-ice"] .rigbar__see, html[data-theme="logo-ice"] .rigbar__title, html[data-theme="logo-ice"] .rigbar__clear { color: rgba(236, 241, 255, .64); }
html[data-theme="logo-ice"] .rigbar__sheet { background: #141d3d; }
html[data-theme="logo-ice"] .rigbar__list li { border-bottom-color: rgba(236, 241, 255, .14); }
html[data-theme="logo-ice"] .rigbar__list .stepper { border-color: rgba(236, 241, 255, .22); }
html[data-theme="logo-ice"] .rigbar__list .stepper__btn { color: #ecf1ff; }
html[data-theme="logo-ice"] .rigbar__list .stepper__btn--add { background: #ecf1ff; color: #0a1128; }

/* Ice White on phones: the homepage opens on the logo's midnight, with white text over the photo */
@media (max-width: 760px) {
  html[data-theme="logo-ice"] .hero {
    --text: #f4f7ff; --text-dim: rgba(236, 241, 255, .82); --ink-rgb: 236, 241, 255;
    --sun: #8fbcff; --sun-hover: #b5d3ff; --sun-rgb: 143, 188, 255; --on-sun: #06102a; --rec: #8fbcff;
    color: var(--text);
  }
  html[data-theme="logo-ice"] .hero__photo { background: #0a1128; }
  html[data-theme="logo-ice"] .hero::after { background: linear-gradient(to bottom, rgba(10, 17, 40, .86), rgba(10, 17, 40, .78) 58%, rgba(10, 17, 40, .08) 74%, rgba(10, 17, 40, 0) 88%, rgba(10, 17, 40, .35)); }
  html[data-theme="logo-ice"] .hero .btn--ghost { background: rgba(255, 255, 255, .1); border-color: rgba(236, 241, 255, .5); color: #f4f7ff; }
  /* the nav sits on the same midnight until the page scrolls */
  html[data-theme="logo-ice"]:has(.hero__photo) .nav:not(.is-scrolled) .brand__logo--on-light { display: none; }
  html[data-theme="logo-ice"]:has(.hero__photo) .nav:not(.is-scrolled) .brand__logo--on-dark { display: block; }
  html[data-theme="logo-ice"]:has(.hero__photo) .nav:not(.is-scrolled) .nav__burger { color: #f4f7ff; }
}
@media (max-width: 760px) and (max-height: 700px) {
  html[data-theme="logo-ice"] .hero::after { background: linear-gradient(to bottom, rgba(10, 17, 40, .86), rgba(10, 17, 40, .8) 80%, rgba(10, 17, 40, .2) 95%); }
}

/* ---------- the picker (preview only) ---------- */
.colourpick { position: fixed; left: 16px; bottom: 16px; z-index: 300; font-family: var(--f-mono); }
html[data-stage] .colourpick, html.mnav-open .colourpick, html.order-open .colourpick { display: none; }
.colourpick__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 99px; border: 0; cursor: pointer;
  background: #141413; color: #f3f1ec; font: 500 12px var(--f-mono); letter-spacing: .06em; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
}
.colourpick__btn b { font-weight: 600; color: #fff; }
.colourpick__dots, .colourpick__swatches { display: inline-flex; }
.colourpick__dots i, .colourpick__swatches i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #141413; margin-left: -6px; }
.colourpick__dots i:first-child, .colourpick__swatches i:first-child { margin-left: 0; }
.colourpick__menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); padding: 10px; border-radius: 16px;
  background: #fff; color: #141413; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); display: grid; gap: 4px;
}
.colourpick__menu[hidden] { display: none; }
.colourpick__menu { width: min(380px, calc(100vw - 32px)); max-height: min(74vh, 640px); overflow-y: auto; overscroll-behavior: contain; gap: 3px; }
.colourpick__group { margin: 10px 8px 4px; font: 600 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #9a968e; }
.colourpick__opt { padding: 8px 10px; }
.colourpick__heroes[hidden] { display: none; }
.colourpick__filter { position: absolute; }
.hero__photo img.is-ice-tint, .colourpick__thumb.is-ice-tint img { filter: url(#iceTint); }
.colourpick__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 6px; }
.colourpick__thumb { display: grid; gap: 4px; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: #f6f5f2; cursor: pointer; text-align: left; font: 500 10.5px/1.2 var(--f-body); letter-spacing: 0; color: #141413; }
.colourpick__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: #d9d7d0; }
.colourpick__thumb span { padding: 0 2px 2px; }
.colourpick__thumb:hover { border-color: #e2dfd8; }
.colourpick__thumb[aria-pressed="true"] { border-color: #141413; background: #fff; }
.colourpick__note { margin: 4px 8px 8px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6b6862; }
.colourpick__opt {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 10px; border-radius: 12px;
  border: 2px solid transparent; background: #f6f5f2; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.colourpick__opt:hover { border-color: #e2dfd8; }
.colourpick__opt[aria-pressed="true"] { border-color: #141413; background: #fff; }
.colourpick__swatches { grid-row: span 2; }
.colourpick__swatches i { width: 26px; height: 26px; border-color: #fff; margin-left: -9px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.colourpick__name { font: 700 14px var(--f-body); letter-spacing: 0; }
.colourpick__meta { font: 400 12px var(--f-body); letter-spacing: 0; color: #6b6862; }
@media (max-width: 760px) {
  .colourpick { left: 12px; bottom: 12px; }
  .colourpick__btn { padding: 6px 12px 6px 7px; font-size: 11px; }
}