/* =========================================================================
   OMSR TECH — landing
   Midnight and gold, shared with chess.omsrtech.com so the properties read as
   one site. Surfaces are glass over a slow aurora; headings are set in the
   same serif Lantern uses, which is what ties the family together.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; }
a { color: inherit; }

:root {
  /* Lantern's palette, so the apex and the app read as one house rather than
     two products that happen to share a domain. */
  --gold: #d9b56c;
  --gold-soft: #efd9a6;
  --gold-deep: #a8823f;
  --ember: #d9853b;

  /* surfaces */
  --bg: #0b0907;
  --ink: #f4ece2;
  --ink-strong: #fffaf4;
  --ink-mute: #b9ab99;
  --ink-faint: #7b6d60;

  --line: rgba(255, 226, 184, .09);
  --line-strong: rgba(217, 181, 108, .32);

  --glass: rgba(23, 19, 15, .55);
  --glass-hi: rgba(255, 226, 184, .055);

  --ok: #6fd6a1;

  /* The three lights behind the page, as tokens so a look can restyle them
     without touching the rule that draws them. */
  --aura-a: rgba(217, 181, 108, .14);
  --aura-b: rgba(217, 133, 59, .10);
  --aura-c: rgba(168, 130, 63, .10);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, Inter, sans-serif;

  --radius: 20px;
  --radius-lg: 26px;
  --wrap: 1080px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Two slow lights behind everything. They are the only colour on the page that
   is not gold, and they are what stops a dark site reading as flat. */
body::before {
  content: "";
  position: fixed; inset: -20vh -10vw;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(48vw 42vh at 18% 8%,  var(--aura-a) 0%, transparent 62%),
    radial-gradient(42vw 38vh at 86% 22%, var(--aura-b) 0%, transparent 60%),
    radial-gradient(52vw 40vh at 62% 96%, var(--aura-c) 0%, transparent 62%);
  animation: drift 26s ease-in-out infinite alternate;
}
/* --sy is set by orbit.js from the scroll position, so the lights lag behind
   the page instead of being nailed to the viewport. */
@keyframes drift {
  from { transform: translate3d(0, var(--sy, 0px), 0) scale(1); }
  to   { transform: translate3d(-2.5%, calc(var(--sy, 0px) + 2vh), 0) scale(1.06); }
}

/* A whisper of grain, so the gradients do not band on cheap panels. */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.masthead, main, footer { position: relative; z-index: 1; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

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

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky; top: 0; z-index: 30;
  padding: 14px 0;
  background: rgba(11, 9, 7, .74);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.masthead.is-stuck { border-bottom-color: var(--line); }
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-strong);
}
.brand .mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: #1a1206;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 6px 18px -8px rgba(217, 181, 108, .75);
}

.masthead nav { display: flex; gap: 6px; align-items: center; }
.masthead nav a {
  padding: 7px 13px; border-radius: 999px;
  text-decoration: none; font-size: 14px; color: var(--ink-mute);
  transition: color .2s ease, background .2s ease;
}
.masthead nav a:hover { color: var(--ink-strong); background: var(--glass-hi); }

/* -------------------------------------------------------------------- hero */

.hero { padding: 78px 0 64px; max-width: 760px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin: 0 0 22px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow .pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 4px rgba(111, 214, 161, .15);
}

.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(38px, 6.4vw, 62px); line-height: 1.08;
  letter-spacing: -.015em; margin: 0 0 22px;
  color: var(--ink-strong);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gold-soft) 0%, var(--gold) 45%, var(--ember) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lede { color: var(--ink-mute); font-size: clamp(16px, 2vw, 18.5px); margin: 0 0 18px; max-width: 62ch; }
.lede strong { color: var(--ink); font-weight: 600; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 15px;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease;
}
.btn-primary {
  color: #1a1206;
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 58%, var(--gold-deep) 100%);
  box-shadow: 0 16px 34px -16px rgba(217, 181, 108, .7), 0 1px 0 rgba(255, 255, 255, .35) inset;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -16px rgba(217, 181, 108, .8), 0 1px 0 rgba(255, 255, 255, .45) inset;
}
.btn-ghost {
  color: var(--ink); border-color: var(--line);
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { border-color: var(--line-strong); color: var(--ink-strong); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ---------------------------------------------------------------- sections */

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 46px 0 22px;
}
.sec-head h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3.4vw, 32px);
  margin: 0; color: var(--ink-strong);
}
.sec-head .count { font-size: 13px; color: var(--ink-faint); letter-spacing: .04em; }

/* ------------------------------------------------------------------- cards */

.cards {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 13px;
  padding: 26px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--glass-hi) 0%, rgba(255, 226, 184, .012) 58%), var(--glass);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 26px 60px -44px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 226, 184, .06) inset;
  text-decoration: none; color: inherit;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* A thin light along the top edge, brighter on the ones you can actually use. */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 181, 108, .5), transparent);
  opacity: .35; transition: opacity .3s ease;
}
a.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 34px 70px -44px rgba(0, 0, 0, 1), 0 1px 0 rgba(217, 181, 108, .2) inset;
}
a.card:hover::before { opacity: 1; }

.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card h3 {
  font-family: var(--serif); font-weight: 500; font-size: 21px;
  margin: 0; color: var(--ink-strong);
}
.card p { margin: 0; color: var(--ink-mute); font-size: 15px; }

.badge {
  flex: 0 0 auto;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid transparent;
}
.badge-live {
  color: var(--ok); border-color: rgba(111, 214, 161, .32);
  background: rgba(111, 214, 161, .1);
}
.badge-soon {
  color: var(--ink-faint); border-color: var(--line);
  background: rgba(255, 226, 184, .04);
}

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px; }
.tag {
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; color: var(--ink-faint);
  border: 1px solid var(--line); background: rgba(255, 226, 184, .03);
}

.card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--gold);
}
.card-cta::after { content: "\2192"; transition: transform .25s ease; }
a.card:hover .card-cta::after { transform: translateX(4px); }

.card.is-soon { opacity: .82; }
.card.is-soon::before { opacity: .12; }

/* --------------------------------------------------------------------- ads */

.adwrap {
  margin: 46px 0 0; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.adlabel {
  display: block; margin-bottom: 8px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.adhouse { padding: 18px; text-align: center; }
.adhouse strong { display: block; color: var(--ink-strong); margin-bottom: 4px; }
.adhouse p { margin: 0 0 8px; color: var(--ink-mute); font-size: 14px; }
.adhouse a { color: var(--gold); text-decoration: none; font-size: 14px; }
.adhouse a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- about */

.about .panel {
  padding: 30px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--glass-hi) 0%, rgba(255, 226, 184, .012) 58%), var(--glass);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.about p { margin: 0 0 12px; color: var(--ink-mute); max-width: 68ch; }
.about p:last-child { margin-bottom: 0; }
.about a { color: var(--gold); text-decoration: none; }
.about a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ footer */

footer {
  margin-top: 70px; padding: 26px 0 56px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-faint);
}
footer .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
footer .links { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 620px) {
  .hero { padding: 52px 0 44px; }
  /* Four links do not fit beside the wordmark on a phone, and a wrapped
     masthead looks broken. The one that is reachable by scrolling goes. */
  .masthead nav { gap: 2px; }
  .masthead nav a { padding: 7px 10px; font-size: 13px; }
  .nav-extra { display: none; }
  .brand span:last-child { white-space: nowrap; }
  .brand { font-size: 15px; }
  .btn { width: 100%; justify-content: center; }
  .hero-actions { gap: 10px; }
  .card { padding: 22px; }
}

/* =========================================================================
   The system — Lantern at the centre, the rest in orbit
   Positions come from js/orbit.js. Everything here is appearance only, so a
   visitor with JavaScript off still gets a readable stack of links.
   ========================================================================= */

.progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 40;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--ember));
  will-change: transform;
}

.system-wrap { padding: 8px 0 18px; }

.system {
  position: relative;
  width: min(760px, 92vw);
  height: min(430px, 64vw);
  margin: 0 auto;
  display: grid; place-items: center;
}

/* --- orbit rings ------------------------------------------------------- */

.rings { position: absolute; inset: 0; display: grid; place-items: center; }
.ring {
  position: absolute;
  border: 1px dashed rgba(255, 226, 184, .15);
  border-radius: 50%;
  /* Sized by JS so each ellipse matches the path its planet actually takes. */
  width: 0; height: 0;
}

/* --- the sun ----------------------------------------------------------- */

.sun {
  position: relative; z-index: 25;
  display: grid; place-items: center;
  width: 168px; height: 168px; border-radius: 50%;
  text-decoration: none; color: inherit;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}
.sun:hover, .sun:focus-visible { transform: scale(1.045); }

.sun-glow {
  position: absolute; inset: -46px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 181, 108, .32) 0%, rgba(217, 133, 59, .10) 42%, transparent 68%);
  animation: breathe 6s ease-in-out infinite;
}
.sun-core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff6e2 0%, var(--gold-soft) 26%, var(--gold) 58%, var(--gold-deep) 100%);
  box-shadow:
    0 0 50px rgba(217, 181, 108, .45),
    0 24px 60px -24px rgba(240, 180, 41, .7),
    0 1px 0 rgba(255, 255, 255, .5) inset;
}
@keyframes breathe {
  0%, 100% { opacity: .85; transform: scale(1); }
  45%      { opacity: 1;   transform: scale(1.07); }
}

.sun-text {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: 2px;
  color: #1a1206; text-align: center;
}
.sun-name {
  font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: .02em;
}
.sun-cta {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  opacity: .72;
}
.sun:hover .sun-cta { opacity: 1; }

/* --- planets ----------------------------------------------------------- */

.planets { list-style: none; margin: 0; padding: 0; }
.planets li {
  position: absolute; inset: 0;
  display: grid; place-items: center; pointer-events: none;
}

.planet {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(13, 20, 36, .82);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  text-decoration: none; color: var(--ink);
  white-space: nowrap; pointer-events: auto;
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .95);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
/* JS owns `transform` on these, so hover must not touch it - the two would
   fight every frame. Colour and shadow carry the whole hover state. */
.planet:hover, .planet:focus-visible {
  border-color: var(--gold);
  background: rgba(26, 20, 8, .92);
  box-shadow: 0 0 0 4px rgba(217, 181, 108, .14), 0 20px 40px -20px rgba(217, 181, 108, .5);
}

.planet .dot {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 0 12px rgba(217, 181, 108, .75);
}
.planet .plabel { display: grid; line-height: 1.25; }
.planet .plabel b { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
.planet .plabel i {
  font-style: normal; font-size: 11px; color: var(--ink-faint); letter-spacing: .04em;
}

.system-hint {
  text-align: center; margin: 6px 0 0;
  font-size: 12.5px; color: var(--ink-faint); letter-spacing: .03em;
}

/* Before orbit.js has measured, the planets would all sit stacked at dead
   centre. Hide them for that one frame rather than showing a pile. */
.system:not(.is-live) .planet { opacity: 0; }

/* --- phones ------------------------------------------------------------ */

@media (max-width: 680px) {
  /* The orbit is charming on a desk and fiddly on a phone. Below this width it
     becomes an honest list, and the JS transforms are overridden away. */
  .system { height: auto; padding: 18px 0 0; }
  .rings { display: none; }
  .planets { display: grid; gap: 9px; justify-items: center; margin-top: 20px; }
  .planets li { position: static; inset: auto; }
  .planet { position: static; transform: none !important; opacity: 1 !important; }
  .system:not(.is-live) .planet { opacity: 1; }
  .sun { width: 150px; height: 150px; }
  .system-hint { display: none; }
}

/* =========================================================================
   Feature block — Lantern gets room the others do not
   ========================================================================= */

.feature {
  display: grid; gap: 26px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  margin: 58px 0 0; padding: 34px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(217, 181, 108, .12) 0%, transparent 58%),
    linear-gradient(160deg, var(--glass-hi) 0%, rgba(255, 226, 184, .012) 58%),
    var(--glass);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 34px 80px -54px rgba(0, 0, 0, 1), 0 1px 0 rgba(217, 181, 108, .16) inset;
}
.kicker {
  margin: 0 0 6px; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.feature h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.4vw, 42px);
  margin: 0 0 14px; color: var(--ink-strong);
}
.feature p { margin: 0 0 12px; color: var(--ink-mute); max-width: 56ch; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.facts li {
  display: grid; gap: 1px;
  padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 226, 184, .03);
}
.facts b { font-size: 13.5px; color: var(--gold); letter-spacing: .02em; }
.facts span { font-size: 12.5px; color: var(--ink-faint); }

@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; padding: 26px; }
}

/* =========================================================================
   Reveal on scroll
   ========================================================================= */

.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .7s cubic-bezier(.2, .8, .3, 1),
              transform .7s cubic-bezier(.2, .8, .3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Stagger the cards so a row does not arrive as one slab. */
.cards .reveal:nth-child(2) { transition-delay: .07s; }
.cards .reveal:nth-child(3) { transition-delay: .14s; }
.cards .reveal:nth-child(4) { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   Looks — the site wears a different palette each day
   Six grounds, all speaking the same tokens, so only the values change and
   nothing downstream has to know which one is on. `ember` is the base in
   :root above; the rest override it.

   The choice is deterministic from the UTC date, so everyone looking at the
   site on the same day sees the same thing.
   ========================================================================= */

/* Netflix-dark. Near-black ground, the red doing all the talking. */
[data-look="garnet"] {
  --gold: #e50914; --gold-soft: #ff5b63; --gold-deep: #9b0610; --ember: #ff3b42;
  --bg: #0a0809;
  --ink: #f2ecec; --ink-strong: #ffffff; --ink-mute: #b0a4a5; --ink-faint: #756a6b;
  --line: rgba(255, 175, 180, .085);
  --line-strong: rgba(229, 9, 20, .34);
  --glass: rgba(20, 17, 18, .58);
  --glass-hi: rgba(255, 175, 180, .05);
  --aura-a: rgba(229, 9, 20, .13);
  --aura-b: rgba(155, 6, 16, .12);
  --aura-c: rgba(120, 10, 18, .10);
}

/* The original midnight and gold, kept because chess.omsrtech.com wears it. */
[data-look="midnight"] {
  --gold: #f0b429; --gold-soft: #ffd979; --gold-deep: #c88a06; --ember: #d9853b;
  --bg: #080d18;
  --ink: #dde5f2; --ink-strong: #ffffff; --ink-mute: #8698b4; --ink-faint: #5d6c85;
  --line: rgba(190, 214, 255, .10);
  --line-strong: rgba(240, 180, 41, .30);
  --glass: rgba(18, 27, 45, .55);
  --glass-hi: rgba(190, 214, 255, .055);
  --aura-a: rgba(240, 180, 41, .13);
  --aura-b: rgba(90, 130, 255, .11);
  --aura-c: rgba(217, 133, 59, .09);
}

/* Cold light on deep blue. */
[data-look="ice"] {
  --gold: #63c8ff; --gold-soft: #a9e2ff; --gold-deep: #1f7ec4; --ember: #7ce0ff;
  --bg: #060b12;
  --ink: #e2edf6; --ink-strong: #ffffff; --ink-mute: #92a8bd; --ink-faint: #61758a;
  --line: rgba(180, 220, 255, .10);
  --line-strong: rgba(99, 200, 255, .32);
  --glass: rgba(14, 24, 36, .56);
  --glass-hi: rgba(180, 220, 255, .05);
  --aura-a: rgba(99, 200, 255, .13);
  --aura-b: rgba(60, 120, 200, .12);
  --aura-c: rgba(40, 90, 160, .10);
}

/* Ink and orchid. */
[data-look="violet"] {
  --gold: #b98cff; --gold-soft: #dcc4ff; --gold-deep: #7743c9; --ember: #c98cff;
  --bg: #0a0713;
  --ink: #e9e3f7; --ink-strong: #ffffff; --ink-mute: #a396bf; --ink-faint: #6f6390;
  --line: rgba(210, 190, 255, .10);
  --line-strong: rgba(185, 140, 255, .32);
  --glass: rgba(22, 16, 38, .56);
  --glass-hi: rgba(210, 190, 255, .05);
  --aura-a: rgba(185, 140, 255, .13);
  --aura-b: rgba(120, 70, 200, .12);
  --aura-c: rgba(90, 50, 160, .10);
}

/* Moss on charcoal. */
[data-look="matcha"] {
  --gold: #9bd75f; --gold-soft: #c6ec9c; --gold-deep: #55913a; --ember: #b6e07a;
  --bg: #070a07;
  --ink: #e6efdf; --ink-strong: #ffffff; --ink-mute: #9aae91; --ink-faint: #68785f;
  --line: rgba(200, 230, 190, .10);
  --line-strong: rgba(155, 215, 95, .30);
  --glass: rgba(16, 22, 16, .56);
  --glass-hi: rgba(200, 230, 190, .05);
  --aura-a: rgba(155, 215, 95, .12);
  --aura-b: rgba(80, 140, 70, .11);
  --aura-c: rgba(60, 110, 55, .10);
}

/* No colour at all. The one that makes the photographs do the work. */
[data-look="mono"] {
  --gold: #d8d2cb; --gold-soft: #f2eee9; --gold-deep: #8d857c; --ember: #cfc7be;
  --bg: #0a0a0a;
  --ink: #ebe8e4; --ink-strong: #ffffff; --ink-mute: #a09a93; --ink-faint: #6e6862;
  --line: rgba(235, 232, 228, .10);
  --line-strong: rgba(216, 210, 203, .30);
  --glass: rgba(20, 20, 20, .56);
  --glass-hi: rgba(235, 232, 228, .045);
  --aura-a: rgba(235, 232, 228, .07);
  --aura-b: rgba(180, 175, 170, .06);
  --aura-c: rgba(140, 135, 130, .05);
}

/* The switch itself, in the footer. Small on purpose - it is a curiosity,
   not a setting anyone came here to change. */
.looker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12px; color: var(--ink-faint);
}
.looker b { color: var(--ink-mute); font-weight: 600; letter-spacing: .02em; }
.looker button {
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  color: #141010; font-size: 12px; line-height: 1;
  transition: transform .2s ease, box-shadow .3s ease;
}
.looker button:hover { transform: rotate(35deg); box-shadow: 0 0 0 4px var(--glass-hi); }

/* Everything that carries colour eases between looks, so cycling reads as one
   move rather than a flash. Backgrounds and borders only - never transform,
   which the orbit owns. */
body, .masthead, .card, .glass, .feature, .about .panel, .adwrap,
.btn, .tag, .badge, .planet, .eyebrow, .facts li, .looker {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .masthead, .card, .glass, .feature, .about .panel, .adwrap,
  .btn, .tag, .badge, .planet, .eyebrow, .facts li, .looker { transition: none; }
}

.foot-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }