/* ==========================================================================
   TELLY MONSTER MYCO
   ---------------------------------------------------------------------------
   The palette is lifted straight off two Michigan dusk photographs: the Blue
   Bridge at Grand Rapids and the Detroit waterfront at blue hour. Both run
   violet overhead down to an amber horizon, with sodium lamps and long gold
   reflections in dark water. The brand's purple-and-gold seal already lives in
   that light, so the city and the logo share one set of colours.
   ========================================================================== */

:root {
  /* night and water */
  --night:    #07050F;
  --ink:      #0B0820;
  --ink-2:    #120C2E;
  --ink-3:    #1A1140;
  --line:     rgba(178,104,255,.20);
  --line-2:   rgba(255,201,107,.26);

  /* the sky, top to horizon */
  --dusk-1:   #150C33;
  --dusk-2:   #2E1355;
  --dusk-3:   #5B1E63;
  --dusk-4:   #93305C;
  --ember:    #C4562F;
  --amber:    #F2A93B;
  --gold:     #FFC96B;

  /* the brand */
  --violet:   #8B44F0;
  --violet-2: #B268FF;
  --violet-3: #4A1690;
  --cyan:     #35C6E8;   /* the RenCen crown */
  --magenta:  #E0409B;   /* the one pink tower on the river */

  /* ink on night */
  --cream:    #F6EFE2;
  --muted:    #A79FC0;
  --muted-2:  #766D93;

  --shell:    1220px;
  --gap:      clamp(64px, 9vw, 132px);
  --r:        18px;
  --r-lg:     26px;

  --ease:     cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the whole page sits on a slow sky, deepening as you go down */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 620px at 12% -8%,  rgba(139,68,240,.22), transparent 60%),
    radial-gradient(760px 560px at 92% 6%,   rgba(53,198,232,.10), transparent 62%),
    radial-gradient(1100px 700px at 50% 108%, rgba(196,86,47,.14), transparent 64%);
  pointer-events: none;
  z-index: 0;
}
main, header, footer { position: relative; z-index: 1; }

img, svg { max-width: 100%; }
a { color: inherit; }
figure, blockquote, dl, dd { margin: 0; }   /* the UA gives figure 40px side margins */

/* ---------------------------------------------------------------- type ---- */
h1, h2, h3, h4, .display {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 7.4vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.35rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-variation-settings: "wdth" 104; letter-spacing: -.012em; }
p  { margin: 0 0 1.1em; }

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .745rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.is-centred { justify-content: center; }
.eyebrow.is-centred::after {
  content: ""; width: 34px; height: 1px; flex: none;
  background: linear-gradient(270deg, transparent, var(--gold));
}

.lede { font-size: clamp(1.06rem, 1.55vw, 1.22rem); color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.gold  { color: var(--gold); }

/* the hot band of light that sits under a heading, like the lamp run */
.glow-text {
  background: linear-gradient(96deg, var(--cream) 8%, var(--gold) 46%, var(--violet-2) 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* -------------------------------------------------------------- layout ---- */
.shell { width: min(var(--shell), calc(100% - 44px)); margin-inline: auto; }
.section { padding-block: var(--gap); }
.section-head { max-width: 68ch; margin-bottom: clamp(38px, 5vw, 62px); }
.section-head h2 + .lede, .band h2 + .lede { margin-top: 1.15rem; }
.section-head.is-centred { margin-inline: auto; text-align: center; }
.section-head.is-centred .lede { margin-inline: auto; }

/* the bridge truss, used as a rule between sections */
.truss {
  height: 30px;
  margin-block: clamp(18px, 3vw, 34px);
  background: url("../assets/truss.svg") center / 100% 100% no-repeat;
  opacity: .5;
}

/* ----------------------------------------------------------------- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(9,6,22,.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(255,201,107,.5) 22%, rgba(255,201,107,.5) 78%, transparent) 1;
  transition: background .3s var(--ease);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 74px; }
.nav-logo { display: flex; align-items: center; gap: 13px; flex: none; text-decoration: none; }
.nav-mark { width: 44px; height: 44px; display: block; flex: none; }
/* the name set in type, picking up the chrome banding off the rectangular logo */
.nav-name {
  font-family: Archivo, sans-serif;
  font-weight: 900; font-size: 1.04rem;
  font-variation-settings: "wdth" 108;
  letter-spacing: .035em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6E9FF 42%, #CFA6F7 72%, #A45CEE 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  border-bottom: 2px solid rgba(255,201,107,.7);
  padding-bottom: 4px;
}
.nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-links a {
  position: relative;
  font-size: .935rem; font-weight: 600;
  color: var(--muted); text-decoration: none;
  padding-block: 6px;
  transition: color .2s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--violet-2));
  transition: right .28s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cream); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
/* a button in the bar is a button, not a nav link */
.nav-links a.btn::after { content: none; }
.nav-links a.btn-gold, .nav-links a.btn-gold:hover { color: #2A1004; }
.nav-links a.btn-ghost, .nav-links a.btn-violet { color: var(--cream); }
.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 40px; border-radius: 11px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--cream); cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 3.5px auto; background: currentColor; border-radius: 2px; }

/* --------------------------------------------------------------- button --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: .96rem;
  font-variation-settings: "wdth" 106;
  letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.btn-gold {
  background: linear-gradient(140deg, var(--gold), var(--amber) 55%, var(--ember));
  color: #2A1004;
  box-shadow: 0 12px 34px -12px rgba(242,169,59,.75), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -12px rgba(242,169,59,.9), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-ghost { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--cream); }
.btn-ghost:hover { background: rgba(178,104,255,.14); border-color: rgba(178,104,255,.5); transform: translateY(-2px); }
.btn-violet {
  background: linear-gradient(140deg, var(--violet-2), var(--violet) 60%, var(--violet-3));
  color: #fff;
  box-shadow: 0 12px 34px -12px rgba(139,68,240,.8), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-violet:hover { transform: translateY(-2px); }
.btn-sm { padding: 11px 20px; font-size: .875rem; }

/* ---------------------------------------------------------------- hero ---- */
.hero { position: relative; overflow: hidden; padding-block: clamp(52px, 7vw, 84px) 0; }
.hero-sky {
  position: absolute; inset: auto 0 0 0;
  height: min(96%, 940px);
  background: url("../assets/skyline.svg") bottom center / cover no-repeat;
  /* the city fades up into the sky and down into the page */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 82%, transparent);
  opacity: .8;
  z-index: 0;
}
/* the city is beautiful and unreadable to set type on, so the middle is dimmed */
.hero-scrim {
  position: absolute; inset: 0;
  /* sized in percentages: a fixed pixel radius becomes a visible dark box on a phone */
  background:
    radial-gradient(150% 62% at 50% 66%, rgba(8,6,18,.94), rgba(8,6,18,.6) 46%, transparent 78%),
    linear-gradient(180deg, var(--ink) 2%, transparent 26%);
  z-index: 1;
  pointer-events: none;
}
.hero-in { position: relative; z-index: 2; text-align: center; padding-bottom: clamp(70px, 11vw, 150px); }

/* the seal hangs over the city like a moon, and the river gives it back */
.hero-seal { position: relative; width: clamp(210px, 27vw, 340px); margin: 0 auto clamp(26px, 3.4vw, 40px); }
.hero-seal .seal-art {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0 60px rgba(178,104,255,.5)) drop-shadow(0 22px 46px rgba(0,0,0,.65));
  animation: bob 9s ease-in-out infinite;
}
.hero-seal .seal-echo {
  position: absolute; top: 100%; left: 0; width: 100%; height: auto;
  transform: scaleY(-1);
  opacity: .16;
  filter: blur(7px) saturate(130%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 2%, transparent 42%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 2%, transparent 42%);
  pointer-events: none;
}
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-13px) } }

.hero h1 { margin-bottom: .5rem; }
.hero h1 .line-2 { display: block; }
.hero .lede { margin: 1.1rem auto 2.2rem; text-align: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* the little run of facts under the buttons, spaced like lamps on the deck */
.lamp-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 30px;
  margin-top: 2.6rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .77rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.lamp-strip li { list-style: none; display: flex; align-items: center; gap: .6rem; }
.lamp-strip li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(255,201,107,.16), 0 0 14px 3px rgba(255,201,107,.55);
}

/* ----------------------------------------------------------- page heads --- */
/* inner pages get a band of the same city, turned right down */
.page-head { position: relative; overflow: hidden; padding-block: clamp(54px, 7vw, 92px) clamp(28px, 4vw, 48px); }
.page-head::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 340px;
  background: url("../assets/skyline.svg") bottom center / cover no-repeat;
  opacity: .2;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 62%);
          mask-image: linear-gradient(180deg, transparent, #000 62%);
  pointer-events: none;
}
.page-head .shell { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); }
.page-head .lede { margin-top: 1.2rem; }

/* ---------------------------------------------------------------- cards --- */
/* dark glass slabs with a lit-window grid in the corner, like the towers */
.card {
  position: relative;
  background: linear-gradient(165deg, rgba(46,19,85,.5), rgba(11,8,32,.82));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.card::before {  /* the gold sill along the top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,201,107,.75), transparent);
}
.card::after {   /* lit windows */
  content: ""; position: absolute; right: 16px; top: 16px; width: 74px; height: 96px;
  background-image:
    radial-gradient(circle at 3px 3px, rgba(255,201,107,.5) 1.6px, transparent 1.9px);
  background-size: 13px 17px;
  opacity: .32;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 78%);
          mask-image: linear-gradient(200deg, #000, transparent 78%);
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,201,107,.42);
  box-shadow: 0 26px 54px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(255,201,107,.1);
}
.card h3 { margin-bottom: .55rem; }
.card p:last-child { margin-bottom: 0; }
a.card { display: block; text-decoration: none; }
a.card:hover h3 { color: var(--gold); }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ---------------------------------------------------------------- steps --- */
/* four piers with the deck running across them */
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 44px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}
.step { position: relative; text-align: center; padding-top: 0; }
.step-no {
  position: relative; z-index: 1;
  width: 88px; height: 88px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--ink-3), var(--night));
  border: 1px solid rgba(255,201,107,.4);
  box-shadow: 0 0 0 8px rgba(11,8,32,1), 0 0 34px -4px rgba(255,201,107,.45);
  font-family: Archivo, sans-serif; font-weight: 900; font-size: 1.65rem;
  color: var(--gold);
}
.step h3 { margin-bottom: .45rem; }
.step p { color: var(--muted); font-size: .96rem; margin: 0; }

/* --------------------------------------------------------------- product -- */
.product { display: flex; flex-direction: column; padding: 0; }
.product-art {
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 118%, rgba(139,68,240,.4), transparent 62%), var(--night);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* the artwork is square, so fit it by height or the bag loses its base */
.product-art img, .product-art svg { height: 90%; width: auto; max-width: 90%; }
.product-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { margin-bottom: .3rem; }
.product-sub {
  font-family: "IBM Plex Mono", monospace;
  font-size: .8rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
  margin: .55rem 0 1.15rem;
}
.product-buy { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.product-buy .price { font-size: 1.85rem; }
.product-latin {
  font-family: "IBM Plex Mono", monospace; font-size: .76rem;
  color: var(--muted-2); font-style: italic; letter-spacing: .02em;
  margin-bottom: .85rem;
}
.product p { font-size: .94rem; color: var(--muted); }
.product-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
}
.price { font-family: Archivo, sans-serif; font-weight: 900; font-size: 1.4rem; color: var(--cream); }
.price small { font-family: "IBM Plex Mono", monospace; font-size: .68rem; font-weight: 400; color: var(--muted-2); display: block; letter-spacing: .1em; }

.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 5px 11px; border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--gold);
  background: rgba(255,201,107,.08);
}
.tag-violet { border-color: rgba(178,104,255,.4); color: var(--violet-2); background: rgba(178,104,255,.1); }
.tag-cyan   { border-color: rgba(53,198,232,.4);  color: var(--cyan);     background: rgba(53,198,232,.1); }

/* ------------------------------------------------------------- michigan --- */
.mi {
  display: grid; gap: clamp(34px, 5vw, 70px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.mi-map { display: grid; place-items: center; position: relative; }
.mi-map svg { width: min(300px, 76%); height: auto; color: rgba(178,104,255,.55); filter: drop-shadow(0 0 30px rgba(139,68,240,.5)); }
.mi-map::after {
  content: ""; position: absolute; inset: -8%;
  background: radial-gradient(circle, rgba(255,201,107,.12), transparent 66%);
  pointer-events: none;
}
.mi-facts { display: grid; gap: 2px; margin-top: 26px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.mi-facts div { display: flex; justify-content: space-between; gap: 18px; padding: 14px 18px; background: rgba(11,8,32,.6); font-size: .93rem; }
.mi-facts dt { color: var(--muted); margin: 0; }
.mi-facts dd { margin: 0; font-weight: 600; color: var(--cream); text-align: right; }

/* --------------------------------------------------------------- notice --- */
.notice {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  background: linear-gradient(100deg, rgba(196,86,47,.14), rgba(11,8,32,.5));
  padding: 22px 26px;
  font-size: .93rem;
  color: var(--muted);
}
.notice strong { color: var(--cream); }
.notice.is-violet { border-left-color: var(--violet-2); border-color: var(--line); background: linear-gradient(100deg, rgba(139,68,240,.16), rgba(11,8,32,.5)); }

/* ------------------------------------------------------------------ faq --- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 22px 4px;
  cursor: pointer; list-style: none;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.06rem;
  font-variation-settings: "wdth" 104;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-3px,-3px);
  transition: transform .28s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.faq details p { padding: 0 4px 22px; margin: 0; color: var(--muted); max-width: 76ch; }

/* -------------------------------------------------------------- reviews --- */
.review { display: flex; flex-direction: column; gap: 14px; }
.review-stars { color: var(--gold); letter-spacing: .18em; font-size: .95rem; }
.review blockquote { margin: 0; font-size: 1.02rem; color: var(--cream); }
.review figcaption { font-family: "IBM Plex Mono", monospace; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: auto; }

/* ----------------------------------------------------------------- band --- */
/* the closing call to action, sat in the sky */
.band {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  padding: clamp(42px, 6vw, 76px) clamp(26px, 5vw, 62px);
  text-align: center;
  background:
    radial-gradient(700px 320px at 50% 130%, rgba(242,169,59,.34), transparent 66%),
    linear-gradient(168deg, var(--dusk-2), var(--ink) 62%);
}
.band::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--ember), var(--gold), transparent);
}
.band .lede { margin-inline: auto; }
.band .hero-cta { margin-top: 2rem; }

/* --------------------------------------------------------------- footer --- */
.footer { border-top: 1px solid var(--line); background: rgba(6,4,15,.72); margin-top: var(--gap); }
.footer-top { display: grid; gap: 42px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding-block: clamp(48px, 6vw, 76px) 44px; }
.footer-logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.footer-logo .nav-mark { width: 48px; height: 48px; }
.footer-brand p { margin-top: 18px; font-size: .9rem; color: var(--muted); max-width: 34ch; }
.footer h4 {
  font-family: "IBM Plex Mono", monospace; font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { color: var(--muted); text-decoration: none; font-size: .93rem; transition: color .2s var(--ease); }
.footer a:hover { color: var(--cream); }
.footer-legal {
  border-top: 1px solid var(--line);
  padding-block: 28px 44px;
  font-size: .8rem; color: var(--muted-2);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
}
.footer-legal p { margin: 0; max-width: 92ch; }

/* --------------------------------------------------------------- reveal --- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- misc --- */
.stack-sm > * + * { margin-top: 14px; }
.centre { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------------- misc --- */
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; inset: 74px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(9,6,22,.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    padding: 10px 22px 22px;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 15px 2px; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .nav-links .btn { margin-top: 16px; justify-content: center; }
  .nav-links .btn::after { display: none; }
  .steps::before { display: none; }
  .footer-legal { flex-direction: column; }
}
@media (max-width: 430px) {
  .nav-name { font-size: .86rem; letter-spacing: .02em; }
  .nav-mark { width: 38px; height: 38px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .shell { width: calc(100% - 34px); }
  .card { padding: 24px; }
}

/* ==========================================================================
   LOUD
   ---------------------------------------------------------------------------
   The rectangular logo is full-spectrum iridescent chrome over a melting,
   dripping, swirling mess. Everything below is that logo turned into a page.

   Every colour here comes from a variable, and every variable is redefined by
   the skins at the bottom of this file. Nothing in this layer is a hard-coded
   colour, which is the only reason the switcher can retint the whole site.
   Tinted values use the -rgb companions, e.g. rgba(var(--hot-rgb), .5).
   ========================================================================== */

:root {
  /* the chrome band, read left to right off the wordmark. The skins below
     override these six pairs and everything else follows. */
  --hot:    #FF2FB9;  --hot-rgb:   255,47,185;
  --tange:  #FF7A18;  --tange-rgb: 255,122,24;
  --gold:   #FFC96B;  --gold-rgb:  255,201,107;
  --lime:   #A8FF3E;  --lime-rgb:  168,255,62;
  --elec:   #22E4F5;  --elec-rgb:  34,228,245;
  --uv:     #C77DFF;  --uv-rgb:    199,125,255;

  /* the reading surface, overridden by the modes */
  --card-a:   rgba(70,26,120,.55);
  --card-b:   rgba(11,8,32,.86);
  --nav-bg:   rgba(9,6,22,.7);
  --scrim-rgb: 8,6,18;
  --aurora-op: 1;
  --star-op:   .5;
  --art-plate: var(--night);

  --spectrum: linear-gradient(100deg,
    #FFFFFF 0%, var(--gold) 12%, var(--tange) 24%, var(--hot) 38%,
    var(--uv) 52%, var(--elec) 66%, var(--lime) 80%, #FFFFFF 100%);
  --spectrum-hard: linear-gradient(90deg,
    var(--uv), var(--hot), var(--tange), var(--gold), var(--lime), var(--elec), var(--uv));
}

/* ------------------------------------------------------- the sky, moving --- */
body::before {
  content: "";
  position: fixed; inset: -35%;
  background:
    radial-gradient(closest-side, rgba(var(--hot-rgb),.55), transparent) 8% 12%/46% 46% no-repeat,
    radial-gradient(closest-side, rgba(var(--elec-rgb),.45), transparent) 88% 18%/42% 42% no-repeat,
    radial-gradient(closest-side, rgba(var(--lime-rgb),.30), transparent) 74% 82%/44% 44% no-repeat,
    radial-gradient(closest-side, rgba(var(--uv-rgb),.55), transparent) 16% 84%/50% 50% no-repeat,
    radial-gradient(closest-side, rgba(var(--tange-rgb),.32), transparent) 50% 50%/38% 38% no-repeat;
  filter: blur(72px);
  opacity: var(--aurora-op);
  animation: drift 34s ease-in-out infinite alternate;
  z-index: 0; pointer-events: none;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1)    rotate(0deg); }
  50%  { transform: translate3d(3%,-3%,0) scale(1.14) rotate(4deg); }
  100% { transform: translate3d(-4%,2%,0) scale(1.06) rotate(-3deg); }
}

body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 12%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 62% 8%,  rgba(var(--gold-rgb),.8), transparent),
    radial-gradient(1.6px 1.6px at 84% 26%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 33% 38%, rgba(var(--elec-rgb),.8), transparent),
    radial-gradient(1.4px 1.4px at 8%  56%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 71% 62%, rgba(var(--hot-rgb),.8), transparent),
    radial-gradient(1.5px 1.5px at 46% 78%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 92% 88%, rgba(var(--lime-rgb),.7), transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%,
                   100% 100%, 100% 100%, 100% 100%, 100% 100%, 140px 140px;
  opacity: var(--star-op);
  mix-blend-mode: screen;
}

/* ------------------------------------------------------- iridescent type --- */
.glow-text, .chrome {
  background: var(--spectrum);
  background-size: 190% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: chrome 11s linear infinite;
}
@keyframes chrome { to { background-position: 190% 0; } }

h1, h2 { letter-spacing: -.032em; }
h1 { font-size: clamp(3rem, 8.4vw, 6.2rem); }
h2 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
.hero h1, .band h2 { text-shadow: 0 0 46px rgba(var(--uv-rgb),.5); }

.eyebrow { color: var(--lime); }
.eyebrow::before, .eyebrow.is-centred::after { background: var(--spectrum-hard); height: 2px; width: 40px; }

/* ------------------------------------------------------------ the drips --- */
.drip {
  height: clamp(46px, 6vw, 76px);
  background: url("../assets/drips.svg") top center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 26px rgba(var(--hot-rgb),.4));
  margin-block: clamp(10px, 2vw, 22px) clamp(30px, 4vw, 52px);
}
.truss { display: none; }

/* ------------------------------------------------------------- the nav ---- */
.nav {
  background: var(--nav-bg);
  border-bottom: 2px solid transparent;
  border-image: var(--spectrum-hard) 1;
}
.nav-in { height: 106px; gap: 22px; }
.nav-logo { gap: 0; }
.nav-logo img { height: 84px; width: auto; display: block; filter: drop-shadow(0 0 18px rgba(var(--hot-rgb),.55)); }
.nav-mark, .nav-name { display: none; }
.nav-links a { color: var(--muted); font-weight: 700; }
.nav-links a::after { background: var(--spectrum-hard); height: 3px; }
.nav-links a:hover { color: var(--cream); text-shadow: 0 0 16px rgba(var(--elec-rgb),.8); }

/* ----------------------------------------------------------- the marquee -- */
.marquee {
  overflow: hidden;
  border-block: 2px solid transparent;
  border-image: var(--spectrum-hard) 1;
  background: linear-gradient(90deg, rgba(var(--hot-rgb),.16), rgba(var(--uv-rgb),.1) 40%, rgba(var(--elec-rgb),.16));
  padding-block: 15px;
}
.marquee-track { display: flex; width: max-content; animation: slide 30s linear infinite; }
.marquee-track > span {
  display: inline-flex; align-items: center; gap: 34px;
  padding-right: 34px;
  font-family: Archivo, sans-serif; font-weight: 900;
  font-size: clamp(1.05rem, 2vw, 1.7rem);
  font-variation-settings: "wdth" 112;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.marquee-track b {
  background: var(--spectrum); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: chrome 8s linear infinite; font-weight: 900;
}
.marquee-track i { font-style: normal; color: var(--lime); font-size: .8em; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ------------------------------------------------------------- the hero --- */
/* The city keeps its own dark plate in every mode. It is a night scene, and
   lightening it would just make it grey. */
.hero-sky { opacity: .95; }
.hero-scrim {
  background:
    radial-gradient(150% 62% at 50% 66%, rgba(var(--scrim-rgb),.9), rgba(var(--scrim-rgb),.5) 46%, transparent 80%),
    linear-gradient(180deg, var(--ink) 2%, transparent 26%);
}
.hero-seal::before {
  content: "";
  position: absolute; inset: -18%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--hot), var(--tange), var(--gold),
              var(--lime), var(--elec), var(--uv), var(--hot));
  filter: blur(42px);
  opacity: .62;
  animation: spin 20s linear infinite;
  z-index: -1;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero-seal .seal-art { animation: bob 9s ease-in-out infinite; filter: drop-shadow(0 0 40px rgba(var(--hot-rgb),.55)); }

.lamp-strip li:nth-child(1)::before { background: var(--hot);   box-shadow: 0 0 0 4px rgba(var(--hot-rgb),.18),   0 0 16px 4px var(--hot); }
.lamp-strip li:nth-child(2)::before { background: var(--elec);  box-shadow: 0 0 0 4px rgba(var(--elec-rgb),.18),  0 0 16px 4px var(--elec); }
.lamp-strip li:nth-child(3)::before { background: var(--lime);  box-shadow: 0 0 0 4px rgba(var(--lime-rgb),.18),  0 0 16px 4px var(--lime); }
.lamp-strip li:nth-child(4)::before { background: var(--gold);  box-shadow: 0 0 0 4px rgba(var(--gold-rgb),.18),  0 0 16px 4px var(--gold); }

/* ------------------------------------------------------------- the cards -- */
.card {
  background: linear-gradient(165deg, var(--card-a), var(--card-b));
  border-color: rgba(var(--uv-rgb),.3);
}
.card::before { height: 3px; background: var(--spectrum-hard); opacity: .9; }
.card::after { background-image: radial-gradient(circle at 3px 3px, rgba(var(--hot-rgb),.6) 1.6px, transparent 1.9px); opacity: .4; }
.card:hover { border-color: rgba(var(--hot-rgb),.6); }

.grid > .card:nth-child(4n+1):hover { box-shadow: 0 26px 60px -24px rgba(0,0,0,.85), 0 0 44px -6px var(--hot);  border-color: var(--hot); }
.grid > .card:nth-child(4n+2):hover { box-shadow: 0 26px 60px -24px rgba(0,0,0,.85), 0 0 44px -6px var(--elec); border-color: var(--elec); }
.grid > .card:nth-child(4n+3):hover { box-shadow: 0 26px 60px -24px rgba(0,0,0,.85), 0 0 44px -6px var(--lime); border-color: var(--lime); }
.grid > .card:nth-child(4n+4):hover { box-shadow: 0 26px 60px -24px rgba(0,0,0,.85), 0 0 44px -6px var(--gold); border-color: var(--gold); }

/* ------------------------------------------------------------- the steps -- */
.steps::before { background: var(--spectrum-hard); height: 3px; opacity: .55; }
.step-no {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    var(--spectrum-hard) border-box;
  font-size: 1.9rem;
  box-shadow: 0 0 0 8px var(--ink), 0 0 40px -4px rgba(var(--hot-rgb),.75);
}
.step:nth-child(1) .step-no { color: var(--hot); }
.step:nth-child(2) .step-no { color: var(--tange); }
.step:nth-child(3) .step-no { color: var(--lime); }
.step:nth-child(4) .step-no { color: var(--elec); }

/* ----------------------------------------------------------- the buttons -- */
.btn-gold {
  background: linear-gradient(100deg, var(--gold), var(--tange) 45%, var(--hot));
  background-size: 220% 100%;
  color: #2A0616;
  box-shadow: 0 12px 40px -10px rgba(var(--hot-rgb),.8), inset 0 1px 0 rgba(255,255,255,.5);
  animation: chrome 7s linear infinite;
}
.btn-gold:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 52px -10px rgba(var(--hot-rgb),.95), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-violet {
  background: linear-gradient(100deg, var(--uv), var(--hot) 50%, var(--elec));
  background-size: 220% 100%;
  animation: chrome 7s linear infinite;
  box-shadow: 0 12px 40px -10px rgba(var(--uv-rgb),.85);
}
.btn-ghost { border-color: rgba(var(--uv-rgb),.45); }
.btn-ghost:hover { background: rgba(var(--hot-rgb),.16); border-color: var(--hot); box-shadow: 0 0 30px -6px rgba(var(--hot-rgb),.7); }

/* ------------------------------------------------------------ the tags ---- */
.tag { border-color: rgba(var(--gold-rgb),.5); }
.tag-violet { border-color: var(--hot); color: var(--hot); background: rgba(var(--hot-rgb),.14); box-shadow: 0 0 20px -6px var(--hot); }
.tag-cyan   { border-color: var(--elec); color: var(--elec); background: rgba(var(--elec-rgb),.14); box-shadow: 0 0 20px -6px var(--elec); }

/* ------------------------------------------------------------- the band --- */
.band {
  position: relative; overflow: hidden;
  border: 2px solid transparent;
  background:
    linear-gradient(168deg, var(--card-a), var(--ink) 62%) padding-box,
    var(--spectrum-hard) border-box;
  box-shadow: 0 0 70px -18px rgba(var(--hot-rgb),.6);
}
.band::after { height: 4px; background: var(--spectrum-hard); }
.band::before {
  content: ""; position: absolute; right: -90px; top: -90px;
  width: 320px; height: 320px;
  background: url("../assets/swirl.svg") center / contain no-repeat;
  opacity: .2; animation: spin 42s linear infinite; pointer-events: none;
}

/* ------------------------------------------------------------ the notice -- */
.notice { border-left-width: 4px; border-left-color: var(--lime); background: linear-gradient(100deg, rgba(var(--lime-rgb),.1), var(--card-b)); }
.notice.is-violet { border-left-color: var(--hot); background: linear-gradient(100deg, rgba(var(--hot-rgb),.14), var(--card-b)); }

/* --------------------------------------------------------------- the faq -- */
.faq details { border-color: rgba(var(--uv-rgb),.28); }
.faq { border-top-color: rgba(var(--uv-rgb),.28); }
.faq summary:hover { color: var(--elec); }
.faq summary::after { border-color: var(--hot); }
.faq details[open] summary { color: var(--hot); }

/* ------------------------------------------------------------ the facts --- */
.mi-facts { border-color: rgba(var(--uv-rgb),.35); }
.mi-facts div { background: var(--card-a); }
.mi-facts div:nth-child(odd) { background: var(--card-b); }
.mi-facts dd { color: var(--gold); }
.mi-map svg { color: var(--hot); filter: drop-shadow(0 0 28px rgba(var(--hot-rgb),.85)); }

/* ---------------------------------------------------------- the reviews --- */
.review-stars { color: var(--gold); text-shadow: 0 0 16px rgba(var(--gold-rgb),.9); }

/* ----------------------------------------------------------- the product -- */
.product-art {
  background:
    radial-gradient(circle at 50% 112%, rgba(var(--hot-rgb),.55), transparent 60%),
    radial-gradient(circle at 22% 18%, rgba(var(--elec-rgb),.3), transparent 52%),
    var(--art-plate);
}
.product-art::before {
  content: ""; position: absolute; inset: -22%;
  background: url("../assets/swirl.svg") center / contain no-repeat;
  opacity: .16; animation: spin 50s linear infinite; pointer-events: none;
}
.product-art img { position: relative; filter: drop-shadow(0 0 34px rgba(var(--gold-rgb),.45)); }
.product-sub { color: var(--elec); text-shadow: 0 0 18px rgba(var(--elec-rgb),.6); }
.price { background: var(--spectrum); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: chrome 9s linear infinite; }
.price small { color: var(--muted-2); -webkit-text-fill-color: var(--muted-2); }

/* ------------------------------------------------------------ page heads -- */
.page-head::before { opacity: .34; }

/* ---------------------------------------------------------- the footer ---- */
.footer { border-top: 2px solid transparent; border-image: var(--spectrum-hard) 1; background: var(--nav-bg); }
.footer-logo img { height: 96px; width: auto; filter: drop-shadow(0 0 22px rgba(var(--hot-rgb),.5)); }
.footer h4 { color: var(--elec); }
.footer a:hover { color: var(--hot); }
.footer-legal { border-top-color: rgba(var(--uv-rgb),.25); }

/* --------------------------------------------------------------- spores --- */
.spores { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.spores b {
  position: absolute; bottom: -30px;
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 14px 3px currentColor;
  opacity: 0; animation: rise linear infinite;
}
.spores b:nth-child(1) { left: 8%;  background: var(--hot);   color: var(--hot);   animation-duration: 22s; animation-delay: 0s; }
.spores b:nth-child(2) { left: 24%; background: var(--elec);  color: var(--elec);  animation-duration: 28s; animation-delay: 4s; }
.spores b:nth-child(3) { left: 41%; background: var(--lime);  color: var(--lime);  animation-duration: 25s; animation-delay: 9s; }
.spores b:nth-child(4) { left: 58%; background: var(--gold);  color: var(--gold);  animation-duration: 31s; animation-delay: 2s; }
.spores b:nth-child(5) { left: 73%; background: var(--uv);    color: var(--uv);    animation-duration: 24s; animation-delay: 12s; }
.spores b:nth-child(6) { left: 89%; background: var(--tange); color: var(--tange); animation-duration: 27s; animation-delay: 7s; }
@keyframes rise {
  0%   { transform: translateY(0) scale(.6);        opacity: 0; }
  10%  {                                            opacity: .85; }
  90%  {                                            opacity: .5; }
  100% { transform: translateY(-105vh) scale(1.25); opacity: 0; }
}

/* ==========================================================================
   SKINS
   Six retints of the chrome band. Each one redefines the same six colour
   pairs, and every rule above reads from them, so one attribute on <html>
   repaints the entire site.
   ========================================================================== */

html[data-skin="chrome"] {
  --hot:#FF2FB9; --hot-rgb:255,47,185;     --tange:#FF7A18; --tange-rgb:255,122,24;
  --gold:#FFC96B; --gold-rgb:255,201,107;  --lime:#A8FF3E;  --lime-rgb:168,255,62;
  --elec:#22E4F5; --elec-rgb:34,228,245;   --uv:#C77DFF;    --uv-rgb:199,125,255;
}
/* the circular seal: violet and gold, nothing else */
html[data-skin="seal"] {
  --hot:#C77DFF; --hot-rgb:199,125,255;    --tange:#FFA53B; --tange-rgb:255,165,59;
  --gold:#FFD98A; --gold-rgb:255,217,138;  --lime:#E8C25A;  --lime-rgb:232,194,90;
  --elec:#9B6BE8; --elec-rgb:155,107,232;  --uv:#7E33D8;    --uv-rgb:126,51,216;
}
/* blacklight */
html[data-skin="uv"] {
  --hot:#FF3DFF; --hot-rgb:255,61,255;     --tange:#B14BFF; --tange-rgb:177,75,255;
  --gold:#7B5BFF; --gold-rgb:123,91,255;   --lime:#4DFFE1;  --lime-rgb:77,255,225;
  --elec:#3AA0FF; --elec-rgb:58,160,255;   --uv:#8A2BE2;    --uv-rgb:138,43,226;
}
html[data-skin="acid"] {
  --hot:#FF2E63; --hot-rgb:255,46,99;      --tange:#FF8A00; --tange-rgb:255,138,0;
  --gold:#FFE000; --gold-rgb:255,224,0;    --lime:#7CFF3D;  --lime-rgb:124,255,61;
  --elec:#00E5A0; --elec-rgb:0,229,160;    --uv:#FF4FD8;    --uv-rgb:255,79,216;
}
html[data-skin="ice"] {
  --hot:#4DA6FF; --hot-rgb:77,166,255;     --tange:#6EE7F9; --tange-rgb:110,231,249;
  --gold:#A8E6FF; --gold-rgb:168,230,255;  --lime:#7CFFDA;  --lime-rgb:124,255,218;
  --elec:#22E4F5; --elec-rgb:34,228,245;   --uv:#8AB4FF;    --uv-rgb:138,180,255;
}
/* the Michigan sunset off the reference photographs */
html[data-skin="ember"] {
  --hot:#FF3B6B; --hot-rgb:255,59,107;     --tange:#FF6A00; --tange-rgb:255,106,0;
  --gold:#FFC24B; --gold-rgb:255,194,75;   --lime:#FFE08A;  --lime-rgb:255,224,138;
  --elec:#FF8FB1; --elec-rgb:255,143,177;  --uv:#C43AD6;    --uv-rgb:196,58,214;
}

/* ==========================================================================
   MODES
   How bright the room is. The hero city and the product art keep their own
   dark plate in every mode, because they are night scenes and lifting them
   only turns them grey.
   ========================================================================== */

html[data-mode="dusk"] {
  --ink:#181038; --ink-2:#231650; --ink-3:#2E1B63;
  --cream:#FCF7F0; --muted:#C4BADD; --muted-2:#8E82AE;
  --card-a: rgba(96,40,160,.5); --card-b: rgba(24,16,56,.86);
  --nav-bg: rgba(20,12,48,.76);
  --scrim-rgb: 18,11,44;
  --aurora-op: .85;
}

html[data-mode="day"] {
  --night:#F2ECF7;
  --ink:#F7F2FA; --ink-2:#FFFFFF; --ink-3:#EFE6F7;
  --cream:#1A0F2E; --muted:#4C3F66; --muted-2:#6B5C88;
  --line: rgba(126,51,216,.24);
  --card-a: rgba(255,255,255,.94); --card-b: rgba(246,240,252,.98);
  --nav-bg: rgba(255,255,255,.82);
  --scrim-rgb: 8,6,18;
  --aurora-op: .5;
  --star-op: 0;
  --art-plate: #150C33;
}
html[data-mode="day"] { --muted:#4C3F66; }
html[data-mode="day"] body { color: var(--cream); }
html[data-mode="day"] .card { box-shadow: 0 12px 34px -20px rgba(60,20,110,.5); }
html[data-mode="day"] .card::after { opacity: .22; }
html[data-mode="day"] .card:hover { box-shadow: 0 22px 44px -22px rgba(60,20,110,.6); }
html[data-mode="day"] .step-no { background: linear-gradient(#fff,#fff) padding-box, var(--spectrum-hard) border-box; box-shadow: 0 0 0 8px var(--ink), 0 0 30px -6px rgba(var(--hot-rgb),.6); }
html[data-mode="day"] .btn-ghost { color: var(--cream); background: rgba(126,51,216,.06); }
html[data-mode="day"] .mi-facts div { background: #fff; }
html[data-mode="day"] .mi-facts div:nth-child(odd) { background: #F6F0FC; }
html[data-mode="day"] .mi-facts dd { color: #7E33D8; }
html[data-mode="day"] .eyebrow { color: #8A2BE2; }
html[data-mode="day"] .faq summary:hover, html[data-mode="day"] .faq details[open] summary { color: #B4108A; }
html[data-mode="day"] .product-sub { color: #0E7C8C; text-shadow: none; }
html[data-mode="day"] .footer h4 { color: #0E7C8C; }
html[data-mode="day"] .notice { color: var(--muted); }
html[data-mode="day"] .review blockquote { color: var(--cream); }
/* the hero and its type stay on the night city */
html[data-mode="day"] .hero-in, html[data-mode="day"] .hero h1 { color: #F6EFE2; }
html[data-mode="day"] .hero .lede { color: #D6CCE8; }
html[data-mode="day"] .hero { background: var(--night); }
html[data-mode="day"] .page-head::before { opacity: .2; }
html[data-mode="day"] .band { color: #F6EFE2; }
html[data-mode="day"] .band .lede { color: #D6CCE8; }

/* On white, the pale end of a skin (ice gold, ember lime) all but disappears.
   Outlining the glyphs keeps the rainbow and gives it an edge to read against. */
html[data-mode="day"] .chrome,
html[data-mode="day"] .glow-text,
html[data-mode="day"] .stat-n,
html[data-mode="day"] .price,
html[data-mode="day"] .marquee-track b {
  -webkit-text-stroke: .6px rgba(26,15,46,.62);
  paint-order: stroke fill;
}
/* the step figures take the ink and leave the colour to the ring around them */
html[data-mode="day"] .step .step-no { color: #2A0E4E; }
html[data-mode="day"] .step-no { box-shadow: 0 0 0 8px var(--ink), 0 6px 18px -6px rgba(60,20,110,.35); }
html[data-mode="day"] .stat-l { color: #5B4E78; }
html[data-mode="day"] .lamp-strip li { color: #F0E8FA; }

/* ==========================================================================
   THE SWITCHER
   ========================================================================== */

.skin-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--spectrum-hard) border-box;
  color: var(--cream); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 34px -8px rgba(var(--hot-rgb),.7);
  transition: transform .25s var(--ease);
}
.skin-btn:hover { transform: rotate(45deg) scale(1.08); }
.skin-btn::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--hot), var(--tange), var(--gold), var(--lime), var(--elec), var(--uv), var(--hot));
}

.skin-panel {
  position: fixed; right: 22px; bottom: 92px; z-index: 81;
  width: min(310px, calc(100vw - 44px));
  padding: 22px;
  border-radius: 22px;
  border: 2px solid transparent;
  background: linear-gradient(165deg, var(--card-a), var(--card-b)) padding-box, var(--spectrum-hard) border-box;
  box-shadow: 0 26px 70px -18px rgba(0,0,0,.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.skin-panel[hidden] { display: none; }
.skin-panel h4 {
  font-family: "IBM Plex Mono", monospace; font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 12px;
}
.skin-panel h4 + * { margin-bottom: 22px; }
.skin-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.skin-swatches button {
  display: grid; gap: 7px; justify-items: center;
  padding: 9px 4px 8px;
  border-radius: 13px; cursor: pointer;
  background: rgba(var(--uv-rgb),.09);
  border: 1.5px solid rgba(var(--uv-rgb),.28);
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.skin-swatches button:hover { transform: translateY(-2px); color: var(--cream); }
.skin-swatches button[aria-pressed="true"] { border-color: var(--gold); color: var(--cream); background: rgba(var(--gold-rgb),.14); }
.skin-swatches i { width: 100%; height: 22px; border-radius: 7px; display: block; }

.skin-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skin-modes button, .skin-motion button {
  padding: 10px 6px; border-radius: 11px; cursor: pointer;
  background: rgba(var(--uv-rgb),.09);
  border: 1.5px solid rgba(var(--uv-rgb),.28);
  color: var(--muted);
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .8rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.skin-modes button:hover, .skin-motion button:hover { color: var(--cream); }
.skin-modes button[aria-pressed="true"], .skin-motion button[aria-pressed="true"] {
  border-color: var(--elec); color: var(--cream); background: rgba(var(--elec-rgb),.16);
}
.skin-motion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.skin-panel p { margin: 0; font-size: .72rem; line-height: 1.5; color: var(--muted-2); }

/* ------------------------------------------------------------- stillness -- */
/* set by the panel, and by the operating system through the media query */
html[data-motion="calm"] body::before,
html[data-motion="calm"] .hero-seal::before,
html[data-motion="calm"] .band::before,
html[data-motion="calm"] .product-art::before,
html[data-motion="calm"] .marquee-track,
html[data-motion="calm"] .spores b,
html[data-motion="calm"] .glow-text,
html[data-motion="calm"] .chrome,
html[data-motion="calm"] .marquee-track b,
html[data-motion="calm"] .btn-gold,
html[data-motion="calm"] .btn-violet,
html[data-motion="calm"] .price,
html[data-motion="calm"] .seal-art { animation: none !important; }
html[data-motion="calm"] .spores { display: none; }

@media (prefers-reduced-motion: reduce) {
  body::before, .hero-seal::before, .band::before, .product-art::before,
  .marquee-track, .spores b, .glow-text, .chrome, .marquee-track b,
  .btn-gold, .btn-violet, .price, .seal-art { animation: none !important; }
  .spores { display: none; }
  .skin-btn:hover { transform: none; }
}

@media (max-width: 860px) {
  .nav-in { height: 84px; }
  .nav-logo img { height: 62px; }
  .nav-links { inset: 84px 0 auto 0; }
  .footer-logo img { height: 78px; }
  .skin-btn { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .skin-panel { right: 16px; bottom: 80px; }
}
@media (max-width: 430px) {
  .nav-in { height: 74px; }
  .nav-logo img { height: 52px; }
  .nav-links { inset: 74px 0 auto 0; }
}

/* ==========================================================================
   CRAFT
   ---------------------------------------------------------------------------
   The loud layer sets the volume. This one sets the build quality: how the
   surfaces catch light, how the type is spaced, how things move under the
   pointer. Loud is the easy half. This is the half that reads as expensive.
   ========================================================================== */

:root {
  /* one lighting model, used by every raised surface on the site */
  --lip:    inset 0 1px 0 rgba(255,255,255,.11);
  --lip-lo: inset 0 1px 0 rgba(255,255,255,.06);
  --lift-1: 0 1px 2px rgba(0,0,0,.28), 0 6px 14px -8px rgba(0,0,0,.5);
  --lift-2: 0 2px 4px rgba(0,0,0,.3), 0 14px 30px -14px rgba(0,0,0,.66);
  --lift-3: 0 4px 8px rgba(0,0,0,.32), 0 34px 70px -28px rgba(0,0,0,.82);
  --ease-out: cubic-bezier(.16,.84,.44,1);
}

::selection { background: var(--hot); color: #fff; }
html { scrollbar-color: rgba(var(--uv-rgb),.6) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border-radius: 99px; border: 3px solid transparent; background-clip: content-box;
  background-color: rgba(var(--uv-rgb),.55);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--hot); }

:focus-visible { outline: 2px solid var(--elec); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------ the rail ---- */
.scroll-rail {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90;
  pointer-events: none; background: rgba(0,0,0,.28);
}
.scroll-rail i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--spectrum-hard);
  box-shadow: 0 0 12px rgba(var(--hot-rgb),.9);
}

/* --------------------------------------------------------------- type ----- */
/* tighter at display sizes, looser at reading sizes: the usual optical fix */
h1 { letter-spacing: -.038em; }
h2 { letter-spacing: -.032em; }
h3 { letter-spacing: -.014em; line-height: 1.14; }
.lede { max-width: 54ch; line-height: 1.56; letter-spacing: -.006em; }
.card p, .step p { letter-spacing: -.003em; }

/* numbers should line up in columns, always */
.price, .mi-facts dd, .step-no, .stat-n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* the eyebrow gets a counter, so sections read as a numbered sequence */
.section-head { counter-increment: sect; }
.section-head .eyebrow::before { content: counter(sect, decimal-leading-zero) " "; width: auto; height: auto;
  background: none; color: var(--muted-2); letter-spacing: .2em; margin-right: 2px; }
main { counter-reset: sect; }
.eyebrow { gap: .55rem; }

/* ---------------------------------------------------------- the surfaces -- */
/* Every panel is lit from above: a bright lip on the top edge, and shadow
   stacked in three layers rather than one flat blur. */
.card, .band, .mi-facts, .notice, .skin-panel {
  box-shadow: var(--lip), var(--lift-2);
}
.card {
  border-radius: 22px;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .45s var(--ease-out);
}
.card:hover { transform: translateY(-6px); }
.grid > .card:nth-child(4n+1):hover { box-shadow: var(--lip), var(--lift-3), 0 0 52px -10px var(--hot); }
.grid > .card:nth-child(4n+2):hover { box-shadow: var(--lip), var(--lift-3), 0 0 52px -10px var(--elec); }
.grid > .card:nth-child(4n+3):hover { box-shadow: var(--lip), var(--lift-3), 0 0 52px -10px var(--lime); }
.grid > .card:nth-child(4n+4):hover { box-shadow: var(--lip), var(--lift-3), 0 0 52px -10px var(--gold); }

/* a soft light that follows the pointer across a tilting panel */
.tilt {
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  transform-style: preserve-3d;
}
.tilt::after {
  background-image: radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),
                    rgba(255,255,255,.13), transparent 62%);
  inset: 0; width: auto; height: auto; opacity: 0;
  transition: opacity .4s var(--ease-out);
  -webkit-mask-image: none; mask-image: none;
}
.tilt:hover::after { opacity: 1; }

/* ------------------------------------------------------------ the buttons - */
.btn {
  position: relative; overflow: hidden;
  box-shadow: var(--lip-lo), var(--lift-1);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
/* a specular sweep across the face on hover */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }
.btn-gold { box-shadow: var(--lip), var(--lift-2), 0 14px 44px -12px rgba(var(--hot-rgb),.8); }
.btn-gold:hover { box-shadow: var(--lip), var(--lift-3), 0 20px 56px -12px rgba(var(--hot-rgb),.95); }

/* ------------------------------------------------------------- the band --- */
/* corner ticks: cheap to draw, and the eye reads them as considered */
.band { border-radius: 30px; }
.band .tick { position: absolute; width: 26px; height: 26px; opacity: .8; pointer-events: none; }
.band .tick::before, .band .tick::after { content: ""; position: absolute; background: var(--gold); }
.band .tick::before { inset: 0 auto auto 0; width: 100%; height: 2px; }
.band .tick::after  { inset: 0 auto auto 0; width: 2px; height: 100%; }
.band .tick-tl { top: 16px; left: 16px; }
.band .tick-tr { top: 16px; right: 16px; transform: scaleX(-1); }
.band .tick-bl { bottom: 16px; left: 16px; transform: scaleY(-1); }
.band .tick-br { bottom: 16px; right: 16px; transform: scale(-1); }

/* ------------------------------------------------------------ the facts --- */
/* a spec sheet, not a table: hairlines, tabular figures, a hover state */
.mi-facts { border-radius: 18px; }
.mi-facts div {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(var(--uv-rgb),.14);
  transition: background .3s var(--ease-out);
}
.mi-facts div:last-child { border-bottom: 0; }
.mi-facts div:hover { background: rgba(var(--hot-rgb),.08); }
.mi-facts dt { font-family: "IBM Plex Mono", monospace; font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.mi-facts dd { font-weight: 700; letter-spacing: -.01em; }

/* --------------------------------------------------------------- figures -- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 18px; }
.stat {
  position: relative;
  padding: 40px 22px 26px; border-radius: 20px;
  border: 1px solid rgba(var(--uv-rgb),.26);
  background: linear-gradient(165deg, var(--card-a), var(--card-b));
  box-shadow: var(--lip), var(--lift-1);
  text-align: center;
}
.stat-n {
  display: block;
  font-family: Archivo, sans-serif; font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1;
  letter-spacing: -.04em;
  background: var(--spectrum); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: chrome 10s linear infinite;
}
/* sits in the padding above the figure, so a stat with a qualifier stays the
   same height as the three without one */
.stat-n em {
  position: absolute; inset: 15px 0 auto 0;
  font-family: "IBM Plex Mono", monospace; font-style: normal;
  font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2); -webkit-text-fill-color: var(--muted-2);
}
.stat-l {
  display: block; margin-top: 10px;
  font-family: "IBM Plex Mono", monospace; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------------ the product - */
.product-art { border-radius: 22px 22px 0 0; }
.product-buy .btn { flex: none; }

/* ------------------------------------------------------------- the steps -- */
.step-no { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.step:hover .step-no { transform: translateY(-5px) scale(1.06); }

/* -------------------------------------------------------------- the faq --- */
.faq details { transition: background .3s var(--ease-out); border-radius: 12px; }
.faq details[open] { background: rgba(var(--hot-rgb),.05); }
.faq summary { padding-inline: 14px; }
.faq details p { padding-inline: 14px; }

/* ------------------------------------------------------------- the drips -- */
/* the drips get a soft glow off the colour they are sitting in */
.drip { filter: drop-shadow(0 10px 30px rgba(var(--hot-rgb),.45)) drop-shadow(0 2px 0 rgba(255,255,255,.14)); }

/* ------------------------------------------------------------- the nav ---- */
.nav { transition: background .4s var(--ease-out), backdrop-filter .4s var(--ease-out); }
.nav-logo img { transition: transform .5s var(--ease-out), filter .5s var(--ease-out); }
.nav-logo:hover img { transform: scale(1.04); filter: drop-shadow(0 0 26px rgba(var(--hot-rgb),.85)); }

/* ---------------------------------------------------------- the reviews --- */
.review blockquote { font-size: 1.06rem; line-height: 1.6; letter-spacing: -.008em; }
.review blockquote::before {
  content: "\201C"; display: block;
  font-family: Archivo, sans-serif; font-weight: 900; font-size: 3rem; line-height: .6;
  color: var(--gold); opacity: .5; margin-bottom: 6px;
}

/* ---------------------------------------------------------- the switcher -- */
.skin-btn { box-shadow: var(--lip), var(--lift-2), 0 10px 34px -8px rgba(var(--hot-rgb),.7); }
.skin-panel { animation: pop .35s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ------------------------------------------------------------- the hero --- */
.hero-sky, .hero-seal { will-change: transform; }
.hero-in { transition: opacity .2s linear; }

/* the two rules that hold the hero together at the bottom */
.hero { border-bottom: 1px solid rgba(var(--uv-rgb),.22); }

@media (prefers-reduced-motion: reduce) {
  .btn::after, .tilt::after { display: none; }
  .card:hover, .step:hover .step-no { transform: none; }
  .skin-panel { animation: none; }
}
html[data-motion="calm"] .btn::after,
html[data-motion="calm"] .tilt::after { display: none; }
html[data-motion="calm"] .stat-n { animation: none; }