/* GenXT Worlds: design tokens and the homepage.
   One brand (ink base, Bebas headlines, serif text, lime signal) with a
   distinct palette per world. The page background follows the world in view. */
:root {
  color-scheme: dark;
  /* brand */
  --ink: #0A0B10; --ink-2: #12142B; --fg: #ECEDF3; --fg-2: #C8CAE0; --muted: #8B8FA8; --line: rgba(255,255,255,.12);
  --lime: #C6F432;
  /* worlds */
  --cin-bg: #1C070D; --cin-2: #3A0E19; --cin-acc: #E8233A; --cin-fg: #F6EBDD;
  --auto-bg: #0B111B; --auto-2: #16202F; --auto-acc: #22E4FF; --auto-race: #E5352B; --auto-fg: #E7EDF4;
  --mkt-bg: #F4F1EA; --mkt-2: #E9E4D8; --mkt-ink: #15171C; --mkt-muted: #5B5E66; --mkt-up: #11744A; --mkt-down: #B42D22; --mkt-line: #CFC8B8;
  --rel-bg: #14051F; --rel-2: #240A38; --rel-acc: #FFC83D; --rel-acc-2: #8B5CF6; --rel-fg: #F7ECFF;
  --mind-bg: #F2E4CC; --mind-2: #E8D3B0; --mind-acc: #6A3FC4; --mind-ink: #3B2410;
  /* type and rhythm */
  --display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --serif: 'Times New Roman', Times, serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  /* current world (the page background eases between these) */
  --page-bg: var(--ink); --page-fg: var(--fg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page-bg); color: var(--page-fg); font-family: var(--serif); font-size: 18px; line-height: 1.55; transition: background-color .8s var(--ease), color .8s var(--ease); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
html { overflow-x: clip; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
body[data-world="cinema"] { --page-bg: var(--cin-bg); --page-fg: var(--cin-fg); }
body[data-world="automotive"] { --page-bg: var(--auto-bg); --page-fg: var(--auto-fg); }
body[data-world="markets"] { --page-bg: var(--mkt-bg); --page-fg: var(--mkt-ink); }
body[data-world="reality"] { --page-bg: var(--rel-bg); --page-fg: var(--rel-fg); }
body[data-world="mind"] { --page-bg: var(--mind-bg); --page-fg: var(--mind-ink); }

.gx-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--lime); color: #000; padding: 8px 14px; border-radius: 8px; }
.gx-skip:focus { left: 12px; }

/* ---------- top bar ---------- */
.gx-top { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 50%; translate: -50% 0; width: min(calc(100% - 2 * var(--gutter)), calc(var(--max) - 2 * var(--gutter))); z-index: 50; display: flex; align-items: center; gap: 24px; padding: 8px 10px 8px 22px; border-radius: 999px; background: color-mix(in srgb, var(--page-bg) 22%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--page-fg) 14%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: background-color .5s var(--ease), box-shadow .5s; }
/* once the page moves, the pill gets a touch more body so links stay readable over busy art */
.gx-top.is-scrolled { background: color-mix(in srgb, var(--page-bg) 58%, transparent); box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.gx-logo { font: 400 30px/1 var(--display); letter-spacing: .03em; text-decoration: none; color: var(--page-fg); white-space: nowrap; }
.gx-logo span { color: var(--lime); }
body[data-world="markets"] .gx-logo span, body[data-world="mind"] .gx-logo span { color: #5E7A00; }
.gx-nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.gx-nav::-webkit-scrollbar { display: none; }
.gx-nav a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font-size: 16px; padding: 9px 14px; border-radius: 999px; color: var(--page-fg); opacity: .82; transition: opacity .2s, background-color .2s; }
.gx-nav a:hover, .gx-nav a.on { opacity: 1; background: color-mix(in srgb, var(--page-fg) 9%, transparent); }
.gx-nav a i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gx-nav small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
[data-w="cinema"] i { background: var(--cin-acc); } [data-w="automotive"] i { background: var(--auto-acc); }
[data-w="markets"] i { background: #2BE38A; } [data-w="reality"] i { background: var(--rel-acc); } [data-w="mind"] i { background: #B98CFF; }
.gx-ig { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center; color: #fff; flex: none; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 4px 14px rgba(214,36,159,.35); transition: transform .2s; }
.gx-ig:hover { transform: scale(1.08); }
.gx-ig svg { width: 18px; height: 18px; }

/* ---------- hero ---------- */
.gx-hero { position: relative; overflow-x: clip; max-width: var(--max); margin: 0 auto; padding: calc(clamp(40px, 7vh, 88px) + 70px) var(--gutter) clamp(48px, 8vh, 96px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: 100vh; min-height: 100svh; }
.gx-hero-glow { position: absolute; top: 0; right: 0; width: min(62vw, 820px); height: min(62vw, 820px); background: radial-gradient(closest-side, rgba(198,244,50,.12), rgba(139,92,246,.08) 45%, transparent 70%); pointer-events: none; filter: blur(10px); }
.gx-kicker { margin: 0 0 18px; font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: var(--lime); }
.gx-h1 { margin: 0; font: 400 clamp(60px, 7.2vw, 124px)/.86 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.gx-line { display: block; overflow: hidden; padding-bottom: .04em; white-space: nowrap; }
.gx-line > span { display: inline-block; }
.gx-lime { color: var(--lime); }
.gx-lede { margin: 26px 0 0; max-width: 520px; font-size: clamp(18px, 1.6vw, 21px); color: var(--fg-2); }
.gx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.gx-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--lime); color: #0A0B10; font-weight: 700; text-decoration: none; padding: 14px 22px; border-radius: 999px; font-size: 17px; transition: transform .25s var(--ease), box-shadow .25s; }
.gx-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(198,244,50,.25); }
.gx-btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.gx-btn.ghost:hover { box-shadow: none; border-color: var(--fg-2); }

/* the world deck: five tall cards fanned in perspective */
.gx-deck { position: relative; height: clamp(440px, 66vh, 640px); perspective: 1600px; }
.gx-card { --rot: calc((var(--i) - 2) * 6deg); --x: calc((var(--i) - 2) * 47% - 4%); position: absolute; left: 50%; top: 50%; width: clamp(160px, 14vw, 214px); aspect-ratio: 5 / 7; margin: 0; translate: -50% -50%; transform: translateX(var(--x)) rotate(calc(var(--rot) * (1 - var(--enter, 0)))) translateY(calc(var(--d) * 18px + var(--enter, 0) * 240px)); opacity: calc(1 - var(--enter, 0)); transform-origin: 50% 120%; border-radius: 22px; overflow: hidden; text-decoration: none; color: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) inset; transition: transform .55s var(--ease), box-shadow .3s; z-index: calc(10 - var(--d)); background: #222; }
.gx-card img, .gx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gx-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.78) 100%); }
.gx-card-n { position: absolute; top: 14px; left: 16px; font: 400 22px/1 var(--display); letter-spacing: .06em; opacity: .85; }
.gx-card-t { position: absolute; left: 16px; right: 16px; bottom: 44px; font: 400 clamp(30px, 2.6vw, 40px)/.9 var(--display); letter-spacing: .02em; }
.gx-card-s { position: absolute; left: 16px; right: 16px; bottom: 16px; font-size: 14px; line-height: 1.3; opacity: .9; }
.gx-deck:hover .gx-card { transform: translateX(calc(var(--x) * 1.08)) rotate(calc(var(--rot) * 1.2)) translateY(calc(var(--d) * 22px)); }
.gx-deck .gx-card:hover, .gx-deck .gx-card:focus-visible { transform: translateX(calc(var(--x) * 1.08)) rotate(0deg) translateY(-26px) scale(1.06); z-index: 20; box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 2px var(--lime) inset; }
/* no transition while dealing in, or the tween lags behind itself */
.gx-deck.is-dealing .gx-card { transition: none; pointer-events: none; }
.gx-card:hover img, .gx-card:hover .gx-art { transform: scale(1.06); }
.w-markets { background: var(--mkt-bg); color: var(--mkt-ink); }
.w-markets .gx-card-s, .w-markets .gx-card-n { color: var(--mkt-muted); opacity: 1; }
.w-mind { color: #3B2410; }
.gx-art svg { width: 100%; height: 100%; display: block; }
/* Side cards in the fan show a spine label on their visible edge, like books on a shelf. */
.gx-card.side-l .gx-card-t, .gx-card.side-r .gx-card-t { writing-mode: vertical-rl; bottom: auto; top: 54px; left: 12px; right: auto; font-size: clamp(30px, 2.4vw, 38px); }
.gx-card.side-l .gx-card-t { transform: rotate(180deg); }
.gx-card.side-r .gx-card-t { left: auto; right: 12px; }
.gx-card.side-r .gx-card-n { left: auto; right: 16px; }
.gx-card.side-l .gx-card-s, .gx-card.side-r .gx-card-s { opacity: 0; transition: opacity .3s; }
.gx-deck .gx-card.side-l:hover .gx-card-s, .gx-deck .gx-card.side-r:hover .gx-card-s, .gx-card:focus-visible .gx-card-s { opacity: .9; }
.gx-art-markets { background: linear-gradient(180deg, var(--mkt-bg), var(--mkt-2)); }

/* ---------- contents index ---------- */
.gx-index { max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter) 80px; }
.gx-index-h { font: 400 clamp(40px, 5vw, 64px)/1 var(--display); margin: 0 0 18px; letter-spacing: .01em; }
.gx-index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gx-index-list a { display: grid; grid-template-columns: 56px minmax(150px, 260px) minmax(0, 1fr) auto 32px; gap: 18px; align-items: center; padding: 22px 6px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .25s, padding .35s var(--ease); }
.gx-index-list a:hover { background: rgba(255,255,255,.04); padding-left: 16px; }
.gx-index-list .n { font: 400 24px/1 var(--display); color: var(--muted); }
.gx-index-list .t { font: 400 clamp(30px, 3.4vw, 44px)/1 var(--display); letter-spacing: .02em; }
.gx-index-list .d { color: var(--fg-2); font-size: 17px; }
.gx-index-list .c { font-size: 15px; color: var(--muted); white-space: nowrap; }
.gx-index-list .a { font-size: 22px; transition: transform .3s var(--ease); }
.gx-index-list a:hover .a { transform: translateX(6px); }
.gx-index-list [data-w="cinema"] .t { color: var(--cin-acc); } .gx-index-list [data-w="automotive"] .t { color: var(--auto-acc); }
.gx-index-list [data-w="markets"] .t { color: #2BE38A; } .gx-index-list [data-w="reality"] .t { color: var(--rel-acc); } .gx-index-list [data-w="mind"] .t { color: #B98CFF; }

/* ---------- chapters ---------- */
.gx-ch { position: relative; padding: clamp(80px, 12vh, 140px) 0; overflow: hidden; }
.gx-ch-in { position: relative; z-index: 3; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.gx-ch-k { margin: 0 0 10px; font-size: 14px; letter-spacing: .24em; text-transform: uppercase; }
.gx-ch-h { margin: 0 0 30px; font: 400 clamp(56px, 8vw, 120px)/.88 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.gx-ch-more { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 17px; }
.gx-ch-more a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.gx-loading { opacity: .7; }

/* cinema: burgundy + gold, letterbox reveal */
/* Each chapter paints its own world so its text never sits on a neighbour's colour;
   the body/header colour still eases between worlds as you scroll. */
.ch-cinema { color: var(--cin-fg); background: var(--cin-bg); }
.ch-cinema .gx-ch-k { color: var(--cin-acc); }
.gx-letterbox { position: absolute; inset: 0; opacity: .32; }
.gx-letterbox img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(1.1) brightness(.55); }
.gx-letterbox::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--cin-bg) 0%, transparent 30%, transparent 60%, var(--cin-bg) 100%); }
.lb { position: absolute; left: 0; right: 0; height: 50%; background: var(--cin-bg); z-index: 1; }
.lb-t { top: 0; transform-origin: top; } .lb-b { bottom: 0; transform-origin: bottom; }
.cin-feature { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.cin-poster { aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,90,.35); background: var(--cin-2); }
.cin-poster img { width: 100%; height: 100%; object-fit: cover; }
.cin-meta { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--cin-acc); }
.cin-title { margin: 8px 0 12px; font: 400 clamp(48px, 6vw, 92px)/.9 var(--display); }
.cin-witty { font-size: clamp(19px, 1.7vw, 23px); font-style: italic; max-width: 640px; color: #EAD9C2; margin: 0 0 22px; }
.cin-score { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cin-score b { font: 400 76px/.9 var(--display); color: var(--cin-acc); }
.cin-score span { font: 400 30px/1 var(--display); letter-spacing: .03em; }
.cin-score small { display: block; font-size: 15px; color: #CDBBA6; letter-spacing: 0; font-family: var(--serif); }
.cin-go { margin-left: 6px; background: var(--cin-acc); color: #FFFFFF; font-weight: 700; text-decoration: none; padding: 12px 20px; border-radius: 999px; }
.cin-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.cin-rail a { text-decoration: none; display: block; }
.cin-rail .p { aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--cin-2); }
.cin-rail img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cin-rail a:hover img { transform: scale(1.05); }
.cin-rail .r { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 15.5px; }
.cin-rail .r b { color: var(--cin-acc); font-weight: 700; }

/* automotive: graphite + midnight, speed lines */
.ch-automotive { color: var(--auto-fg); background: var(--auto-bg); }
.ch-automotive .gx-ch-k { color: var(--auto-acc); }
.gx-speed { position: absolute; inset: 0; pointer-events: none; }
.gx-speed i { position: absolute; left: -40%; height: 2px; width: 60%; background: linear-gradient(90deg, transparent, rgba(169,190,211,.55), transparent); }
.gx-speed i:nth-child(1) { top: 18%; } .gx-speed i:nth-child(2) { top: 31%; width: 45%; } .gx-speed i:nth-child(3) { top: 52%; width: 70%; }
.gx-speed i:nth-child(4) { top: 73%; width: 40%; background: linear-gradient(90deg, transparent, rgba(229,53,43,.6), transparent); } .gx-speed i:nth-child(5) { top: 86%; }
.auto-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.auto-spot { position: relative; border-radius: 22px; overflow: hidden; min-height: 460px; background: var(--auto-2); text-decoration: none; display: block; box-shadow: 0 0 0 1px rgba(169,190,211,.18) inset; }
.auto-spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auto-spot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(11,17,27,.94) 100%); }
.auto-spot .c { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 2; }
.auto-spot .k { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--auto-acc); }
.auto-spot h3 { margin: 6px 0 8px; font: 400 clamp(42px, 4.6vw, 70px)/.9 var(--display); }
.auto-spot .m { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; font-size: 16px; color: #C3D0DD; }
.auto-spot .m b { font: 400 54px/1 var(--display); color: #fff; }
.auto-side { display: grid; gap: 12px; align-content: start; }
.auto-tool { display: block; text-decoration: none; padding: 18px 20px; border-radius: 16px; background: var(--auto-2); box-shadow: 0 0 0 1px rgba(169,190,211,.14) inset; transition: transform .3s var(--ease), box-shadow .3s; }
.auto-tool:hover { transform: translateX(4px); box-shadow: 0 0 0 1px var(--auto-acc) inset; }
.auto-tool b { display: block; font: 400 26px/1 var(--display); letter-spacing: .02em; }
.auto-tool span { font-size: 15.5px; color: #B3C1CF; }
.auto-list { display: grid; gap: 2px; margin-top: 6px; }
.auto-list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 4px; text-decoration: none; border-bottom: 1px solid rgba(169,190,211,.16); font-size: 16px; }
.auto-list b { color: var(--auto-acc); }

/* markets: paper, ink, calm */
.ch-markets { color: var(--mkt-ink); background: var(--mkt-bg); }
.ch-markets .gx-ch-h { color: var(--mkt-ink); }
.mkt-mast { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 3px double var(--mkt-ink); padding-bottom: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.mkt-mast .gx-ch-k { margin: 0; color: var(--mkt-muted); }
.mkt-mast span { font-size: 15px; color: var(--mkt-muted); }
.mkt-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.mkt-lead .mood { display: inline-block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--mkt-ink); padding: 4px 10px; border-radius: 999px; }
.mkt-lead blockquote { margin: 16px 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; font-style: italic; }
.mkt-lead p { color: #33363D; font-size: 17px; }
.mkt-lead .src { font-size: 14px; color: var(--mkt-muted); }
.mkt-chart { margin: 0; background: #FBF9F4; border: 1px solid var(--mkt-line); border-radius: 14px; padding: 16px 18px; }
.mkt-chart figcaption { font-size: 15px; color: var(--mkt-muted); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mkt-chart figcaption b { color: var(--mkt-ink); }
.mkt-chart svg { width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.mkt-note { margin: 6px 0 0; font-size: 13.5px; color: var(--mkt-muted); }
.mkt-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.mkt-links a { text-decoration: none; border-top: 2px solid var(--mkt-ink); padding-top: 12px; }
.mkt-links b { display: block; font: 400 26px/1 var(--display); letter-spacing: .02em; }
.mkt-links span { font-size: 15px; color: var(--mkt-muted); }
.mkt-links a:hover b { text-decoration: underline; }

/* reality: neon */
.ch-reality { color: var(--rel-fg); background: var(--rel-bg); }
.ch-reality .gx-ch-k { color: var(--rel-acc); }
.rel-bg { position: absolute; inset: 0; opacity: .35; }
.rel-bg img { width: 100%; height: 100%; object-fit: cover; filter: hue-rotate(-40deg) saturate(1.4) brightness(.6); }
.rel-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(20,5,31,.95) 20%, rgba(20,5,31,.55) 60%, rgba(20,5,31,.9)); }
.ch-reality .gx-ch-h { text-shadow: 0 0 40px rgba(255,46,147,.35); }
.rel-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.rel-week { font: 400 clamp(70px, 10vw, 150px)/.85 var(--display); }
.rel-week span { color: var(--rel-acc); display: block; }
.rel-stats { display: flex; gap: clamp(18px, 3vw, 44px); margin-top: 14px; flex-wrap: wrap; }
.rel-stats b { display: block; font: 400 64px/1 var(--display); }
.rel-stats span { font-size: 15px; color: #D8C6EA; }
.rel-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rel-cards div { padding: 14px; border-radius: 14px; background: rgba(36,10,56,.8); box-shadow: 0 0 0 1px rgba(139,92,246,.35) inset; font-size: 15px; }
.rel-cards div b { display: block; font: 400 24px/1 var(--display); letter-spacing: .02em; }
.rel-cards div.out { box-shadow: 0 0 0 1px rgba(255,46,147,.5) inset; }
.rel-cards small { color: #CDB7E6; }

/* mind & living: warm, future */
.ch-mind { color: var(--mind-ink); background: var(--mind-bg); }
.ch-mind .gx-ch-k { color: var(--mind-acc); }
.mind-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.mind-lede { font-size: clamp(19px, 1.7vw, 23px); max-width: 620px; margin: 0 0 24px; }
.mind-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mind-topics li { padding: 14px 0; border-bottom: 1px solid rgba(59,36,16,.2); }
.mind-topics b { display: block; font: 400 30px/1 var(--display); letter-spacing: .02em; }
.mind-topics span { font-size: 16px; color: #6A4A2E; }
.mind-note { margin: 20px 0 0; font-size: 15px; color: #6A4A2E; border-left: 3px solid var(--mind-acc); padding-left: 12px; }
.mind-art { border-radius: 26px; overflow: hidden; aspect-ratio: 5 / 7; box-shadow: 0 30px 60px rgba(122,62,18,.35); max-width: 380px; justify-self: end; width: 100%; }
.mind-art svg { width: 100%; height: 100%; display: block; }

/* close + footer */
.gx-close { padding: 70px var(--gutter) 100px; max-width: var(--max); margin: 0 auto; position: relative; z-index: 2; background: var(--ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.gx-home .rhv-foot { margin-top: 0; position: relative; z-index: 2; }
.gx-close, .gx-index { color: var(--fg); }
.gx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 1px solid color-mix(in srgb, var(--page-fg) 18%, transparent); padding-top: 28px; }
.gx-stats b { display: block; font: 400 clamp(48px, 6vw, 84px)/1 var(--display); }
.gx-stats span { font-size: 16px; opacity: .75; }
/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .gx-hero { grid-template-columns: 1fr; min-height: 0; }
  .gx-deck { height: 480px; }
  .cin-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-grid, .mkt-grid, .rel-board, .mind-in { grid-template-columns: 1fr; }
  .mind-art { justify-self: start; max-width: 300px; }
  .mkt-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .gx-top { gap: 8px 12px; top: calc(env(safe-area-inset-top, 0px) + 10px); padding: 8px 8px 6px 16px; border-radius: 24px; flex-wrap: wrap; }
  .gx-hero { padding-top: 140px; }
  .gx-nav { order: 3; width: 100%; margin-left: 0; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .gx-ig { margin-left: auto; }
  /* deck becomes a swipeable row */
  .gx-deck { height: auto; perspective: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; }
  .gx-deck::-webkit-scrollbar { display: none; }
  .gx-card.side-l .gx-card-t, .gx-card.side-r .gx-card-t { writing-mode: horizontal-tb; transform: none; top: auto; bottom: 44px; left: 16px; right: 16px; }
  .gx-card.side-r .gx-card-n { right: auto; left: 16px; }
  .gx-card.side-l .gx-card-s, .gx-card.side-r .gx-card-s { opacity: .9; }
  .gx-card, .gx-deck:hover .gx-card, .gx-deck .gx-card:hover { position: relative; left: auto; top: auto; translate: none; transform: none; flex: 0 0 66vw; width: 66vw; scroll-snap-align: start; z-index: 1; }
  .gx-index-list a { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 4px 12px; }
  .gx-index-list .d { grid-column: 2 / 3; font-size: 15.5px; }
  .gx-index-list .c { display: none; }
  .gx-index-list .a { grid-row: 1 / 3; grid-column: 3; }
  .cin-feature { grid-template-columns: 1fr; }
  .cin-poster { max-width: 240px; }
  .auto-spot { min-height: 380px; }
  .rel-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-links { grid-template-columns: 1fr 1fr; }
  .gx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- Automotive: the garage dashboard ---------- */
.gr-board { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.gr-spot { position: relative; border-radius: 24px; overflow: hidden; min-height: 540px; background: var(--auto-2); box-shadow: 0 0 0 1px rgba(169,190,211,.18) inset, 0 30px 60px rgba(0,0,0,.35); isolation: isolate; }
.gr-spot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: gr-in .9s var(--ease) both; }
.gr-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,17,27,.55) 0%, transparent 22%, transparent 38%, rgba(11,17,27,.92) 68%, #0B111B 100%); }
@keyframes gr-in { from { transform: scale(1.08); opacity: .2; } to { transform: none; opacity: 1; } }
.gr-top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.gr-chip { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(11,17,27,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(169,190,211,.28); color: #DCE5EE; }
.gr-chip:first-child { background: var(--auto-race); border-color: var(--auto-race); color: #fff; }
.gr-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 26px; align-items: end; }
.gr-title h3 { margin: 0 0 6px; font: 400 clamp(40px, 4.4vw, 68px)/.9 var(--display); letter-spacing: .01em; }
.gr-title p { margin: 0 0 14px; color: #C3D0DD; font-size: 16px; }
.gr-go { display: inline-flex; padding: 10px 18px; border-radius: 999px; background: var(--auto-acc); color: #0B111B; text-decoration: none; font-size: 16px; font-weight: 700; transition: background-color .2s; }
.gr-go:hover { background: #fff; }
.gr-cluster { display: flex; gap: 18px; align-items: center; padding: 14px 16px; border-radius: 18px; background: rgba(11,17,27,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(169,190,211,.2); }
.gr-gauge { width: 150px; height: auto; flex: none; overflow: visible; }
.gr-gauge .trk { fill: none; stroke: rgba(169,190,211,.22); stroke-width: 5; stroke-linecap: round; }
.gr-gauge .red { fill: none; stroke: var(--auto-race); stroke-width: 5; stroke-linecap: round; }
.gr-gauge .tk line { stroke: #A9BED3; stroke-width: 1.4; }
.gr-gauge .tk text { fill: #8193A8; font-size: 9px; text-anchor: middle; font-family: var(--serif); }
.gr-gauge .ndl { fill: var(--auto-race); transform: rotate(-120deg); transition: transform 1.4s cubic-bezier(.3,1.4,.4,1); }
.gr-gauge .ndl circle { fill: #E7EDF4; }
.gr-spot.is-live .gr-gauge .ndl { transform: rotate(var(--a)); }
.gr-gauge .val { fill: #fff; font: 400 26px var(--display); text-anchor: middle; font-variant-numeric: tabular-nums; }
.gr-gauge .unit { fill: #8193A8; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; font-family: var(--serif); }
.gr-meters { display: grid; gap: 7px; min-width: 250px; }
.gr-m { display: grid; grid-template-columns: 92px 1fr 30px; gap: 10px; align-items: center; font-size: 13.5px; color: #B3C1CF; }
.gr-m b { color: #fff; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.gr-seg { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.gr-seg i { height: 9px; border-radius: 2px; background: rgba(169,190,211,.16); }
.gr-seg i.on { background: var(--auto-acc); }
.gr-seg i.hot { background: var(--auto-race); box-shadow: 0 0 8px rgba(229,53,43,.6); }
/* meters light up segment by segment, like a rev counter */
.gr-spot .gr-seg i.on { opacity: 0; }
.gr-spot.is-live .gr-seg i.on { opacity: 1; transition: opacity .12s; transition-delay: calc(.25s + var(--n) * .07s); }
.gr-tower { border-radius: 24px; background: var(--auto-2); box-shadow: 0 0 0 1px rgba(169,190,211,.14) inset; padding: 18px 18px 10px; display: flex; flex-direction: column; }
.gr-tower-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--auto-race); padding-bottom: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.gr-tower-h span { font: 400 26px/1 var(--display); letter-spacing: .04em; }
.gr-tower-h small { font-size: 13px; color: #8193A8; }
.gr-tower ol { list-style: none; margin: 0; padding: 0; display: grid; }
.gr-tower li a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 70px 34px; gap: 10px; align-items: center; padding: 11px 4px; text-decoration: none; border-bottom: 1px solid rgba(169,190,211,.12); transition: background-color .2s; border-radius: 8px; }
.gr-tower li a:hover { background: rgba(169,190,211,.08); }
.gr-tower .p { font: 400 20px/1 var(--display); color: #8193A8; }
.gr-tower li:first-child .p { color: var(--auto-race); }
.gr-tower .nm { min-width: 0; }
.gr-tower .nm b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-tower .nm small { font-size: 12.5px; color: #8193A8; }
.gr-tower .bar { height: 6px; border-radius: 3px; background: rgba(169,190,211,.14); overflow: hidden; }
.gr-tower .bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--auto-acc), #fff); border-radius: 3px; transform-origin: left; }
.gr-tower .sc { font: 400 22px/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.gr-strip-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 26px 0 10px; flex-wrap: wrap; }
.gr-strip-h span { font: 400 24px/1 var(--display); letter-spacing: .04em; }
.gr-strip-h small { font-size: 14px; color: #8193A8; }
.gr-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.gr-car { position: relative; display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--auto-2); cursor: pointer; color: #fff; text-align: left; font: inherit; box-shadow: 0 0 0 1px rgba(169,190,211,.16) inset; transition: transform .3s var(--ease), box-shadow .3s; }
.gr-car img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gr-car::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,17,27,.92)); }
.gr-car span { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; }
.gr-car b { display: block; font: 400 18px/.95 var(--display); letter-spacing: .02em; }
.gr-car small { font-size: 12px; color: #B3C1CF; }
.gr-car:hover { transform: translateY(-4px); }
.gr-car:hover img { transform: scale(1.06); }
.gr-car.on { box-shadow: 0 0 0 2px var(--auto-race) inset, 0 12px 30px rgba(229,53,43,.25); }
.gr-car:focus-visible { outline: 2px solid var(--auto-acc); outline-offset: 2px; }
.gr-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.gr-guide { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; text-decoration: none; padding: 16px 18px; border-radius: 16px; background: var(--auto-2); box-shadow: 0 0 0 1px rgba(169,190,211,.14) inset; transition: transform .3s var(--ease), box-shadow .3s; }
.gr-guide:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--auto-acc) inset; }
.gr-guide svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(229,53,43,.14); fill: none; stroke: var(--auto-race); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gr-guide b { font: 400 22px/1 var(--display); letter-spacing: .02em; }
.gr-guide span { font-size: 14.5px; color: #B3C1CF; }
@media (max-width: 1100px) { .gr-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .gr-board { grid-template-columns: 1fr; } .gr-body { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .gr-spot { min-height: 640px; }
  .gr-shade { background: linear-gradient(180deg, rgba(11,17,27,.55) 0%, transparent 14%, rgba(11,17,27,.82) 32%, #0B111B 62%); }
  .gr-cluster { flex-direction: column; align-items: stretch; }
  .gr-gauge { width: 140px; align-self: center; }
  .gr-meters { min-width: 0; }
  .gr-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .gr-strip::-webkit-scrollbar { display: none; }
  .gr-car { flex: 0 0 40vw; scroll-snap-align: start; }
  .gr-guides { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .gr-gauge .ndl, .gr-spot .gr-seg i.on { transition: none; } .gr-spot > img { animation: none; } }

/* ---------- Markets: ticker tape + live-feeling chart ---------- */
.mkt-tape { overflow: hidden; border-block: 1px solid var(--mkt-line); background: #15171C; color: #E9E4D8; margin: 0 0 22px; border-radius: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mkt-tape-track { display: flex; width: max-content; animation: mkt-tape 48s linear infinite; }
.mkt-tape:hover .mkt-tape-track { animation-play-state: paused; }
.mkt-tape-run { display: flex; flex: none; }
.mkt-tape .tk { padding: 10px 22px; font-size: 15px; white-space: nowrap; border-right: 1px solid rgba(233,228,216,.14); font-variant-numeric: tabular-nums; }
.mkt-tape .tk b { letter-spacing: .08em; font-size: 13px; color: #fff; }
.mkt-tape .tk i { font-style: normal; font-weight: 700; }
.mkt-tape .tk i.up { color: #4ADE80; } .mkt-tape .tk i.down { color: #F87171; } .mkt-tape .tk i.flat { color: #C9CCD3; }
.mkt-tape .tk small { color: #8B8FA8; font-size: 12px; margin-left: 4px; }
@keyframes mkt-tape { to { transform: translateX(-50%); } }
.mkt-chart .gx-pulse { transform-box: fill-box; transform-origin: center; animation: mkt-pulse 2s ease-out infinite; }
@keyframes mkt-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
.mkt-chart .gx-hit { cursor: crosshair; touch-action: pan-y; }
.mkt-chart .gx-scrub { transition: opacity .15s; pointer-events: none; }
.mkt-chart .gx-tip text { font-variant-numeric: tabular-nums; }
.mkt-links a { transition: transform .25s var(--ease), border-color .25s; }
.mkt-links a:hover { transform: translateY(-3px); border-top-color: var(--mkt-up); }
@media (prefers-reduced-motion: reduce) { .mkt-tape-track { animation: none; } .mkt-tape { overflow-x: auto; } .mkt-chart .gx-pulse { animation: none; opacity: 0; } }

/* Mind & Living: the first published post, above the coming-soon topics */
.mind-feature { display: block; text-decoration: none; margin: 4px 0 18px; padding: 18px 20px; border-radius: 18px; background: #3A2414; color: #F7E7CB; box-shadow: 0 16px 34px rgba(74,36,10,.22); transition: transform .3s var(--ease); }
.mind-feature:hover { transform: translateY(-3px); }
.mind-feature .k { display: block; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #F6C66B; }
.mind-feature b { display: block; font: 400 clamp(30px, 3vw, 40px)/1 var(--display); letter-spacing: .02em; margin: 6px 0 6px; color: #fff; }
.mind-feature .s { font-size: 16px; color: #EBD7B5; }
.mind-soon { margin: 0 0 4px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--mind-acc); }

.mind-topics a { display: contents; color: inherit; text-decoration: none; }
.mind-topics a:hover b { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Mind & Living: animated mandala (built by scripts/worlds/make_mandala.py) ---------- */
.mind-art { perspective: 900px; }
.mandala { transform: rotateX(calc(var(--py, 0) * -6deg)) rotateY(calc(var(--px, 0) * 6deg)); transition: transform .6s var(--ease); }
.mandala * { transform-box: view-box; transform-origin: 0 0; }
/* layers drift apart a little with the pointer, so the mandala has depth */
.mandala .px { transform: translate(calc(var(--px, 0) * var(--z) * 2.2px), calc(var(--py, 0) * var(--z) * 2.2px)); transition: transform .6s var(--ease); }
.md-a { animation: md-turn 120s linear infinite; }
.md-b { animation: md-turn 80s linear infinite reverse; }
.md-c { animation: md-turn 64s linear infinite; }
.md-d { animation: md-turn 40s linear infinite reverse; }
.md-star { animation: md-star 9s ease-in-out infinite; }
.md-orbit { animation: md-turn 14s linear infinite; }
.md-glow { animation: md-glow 6s ease-in-out infinite; }
.md-bindu { animation: md-bindu 3s ease-in-out infinite; }
.md-ripples circle { opacity: 0; animation: md-ripple 7.5s ease-out infinite; }
.md-ripples circle:nth-child(2) { animation-delay: 2.5s; }
.md-ripples circle:nth-child(3) { animation-delay: 5s; }
/* a wave of light travels round each petal ring */
.mandala .sp { fill: none; stroke: #FFF6E2; stroke-width: 1.6; opacity: 0; animation: md-spark 4.8s ease-in-out infinite; animation-delay: calc(var(--k) * 4.8s / var(--n)); }
.mandala .bd { animation: md-twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * -.13s); }
@keyframes md-turn { to { transform: rotate(360deg); } }
@keyframes md-star { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(30deg) scale(1.1); } }
@keyframes md-glow { 0%, 100% { opacity: .55; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes md-bindu { 50% { transform: scale(1.7); } }
@keyframes md-ripple { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }
@keyframes md-spark { 0%, 100% { opacity: 0; } 12% { opacity: .95; } 30% { opacity: 0; } }
@keyframes md-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Opening: lines trace in, then each ring of petals unfurls from the centre, outermost last. */
.mind-art.will-draw .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mind-art.will-draw .pt, .mind-art.will-draw .bd, .mind-art.will-draw .md-orbit, .mind-art.will-draw .md-bindu { opacity: 0; }
.mind-art.is-on .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1); }
.mind-art.is-on .ly .ln { transition-delay: calc(var(--l) * .18s); }
.mind-art.is-on .pt { opacity: 1; animation: md-bloom 1.5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.6s + (5 - var(--l)) * .32s + var(--k) * .03s); }
.mind-art.is-on .bd { opacity: 1; transition: opacity .6s 2.4s; }
.mind-art.is-on .md-orbit, .mind-art.is-on .md-bindu { opacity: 1; transition: opacity .8s 1s; }
@keyframes md-bloom { from { opacity: 0; transform: scale(.15) rotate(-50deg); } to { opacity: 1; transform: none; } }
.mind-art:not(.is-on) .mandala * { animation-play-state: paused; }
.mind-art.will-draw:not(.is-on) .pt { animation: none; }
@media (prefers-reduced-motion: reduce) { .mandala, .mandala * { animation: none !important; transition: none !important; } .md-ripples, .mandala .sp { display: none; } }

/* ---------- Site structure: sections with dropdowns in the floating menu ---------- */
.gx-nav { overflow: visible; }
.gx-item { position: relative; display: flex; }
.gx-tl { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font-size: 16px; padding: 9px 14px; border-radius: 999px; color: var(--fg, var(--page-fg)) !important; opacity: .85; transition: opacity .2s, background-color .2s; }
.gx-tl i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gx-tl:hover, .gx-tl.on, .gx-item:focus-within > .gx-tl { opacity: 1; background: color-mix(in srgb, var(--fg, var(--page-fg)) 10%, transparent); }
.gx-tl.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg, var(--page-fg)) 22%, transparent); }
.gx-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .7; transition: transform .2s; margin-left: -2px; }
.gx-dd { position: absolute; top: calc(100% + 12px); left: 0; min-width: 240px; padding: 8px; border-radius: 18px; display: none; flex-direction: column; gap: 2px; z-index: 90;
  background: color-mix(in srgb, #0A0B10 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--c); box-shadow: 0 22px 50px rgba(0,0,0,.4); }
.gx-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.gx-item.has-dd:hover .gx-dd, .gx-item.has-dd:focus-within .gx-dd { display: flex; }
.gx-item.has-dd:hover .gx-chev, .gx-item.has-dd:focus-within .gx-chev { transform: rotate(180deg); }
.gx-dd a, .gx-dd .soon { display: block; padding: 9px 12px; border-radius: 10px; font-size: 16px; white-space: nowrap; color: #F1EEE6 !important; text-decoration: none; }
.gx-dd a:hover, .gx-dd a:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.gx-dd a.on { box-shadow: inset 3px 0 0 var(--c); background: rgba(255,255,255,.06); }
.gx-dd .soon, .gx-sub .soon { color: #8E8A80 !important; cursor: default; }
.soon small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-left: 6px; opacity: .8; }
.gx-nav .gx-item:last-child .gx-dd { left: auto; right: 0; }
.gx-sub-h { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; align-self: center; padding: 0 6px; }
.gx-sub .soon { font-size: 15px; padding: 6px 12px; }
.gx-sub a.on { color: var(--fg) !important; border-color: var(--sec, currentColor) !important; }
@media (max-width: 760px), (hover: none) {
  .gx-dd, .gx-chev { display: none !important; }
  .gx-nav { overflow-x: auto; }
}
.gx-home .gx-tl { color: var(--page-fg) !important; }
.gx-home .gx-nav .gx-dd a { padding: 9px 12px; opacity: 1; background: none; }
.gx-home .gx-nav .gx-dd a:hover { background: rgba(255,255,255,.08); }

/* ---------- shared live footer (copied from rh-v2.css, unchanged) ---------- */
:root { --red: #FF3B30; --yellow: #FFD23F; --orange: #FF7A1A; --grey: #8B8FA8; --fg-muted: #8B8FA8; }
.rhv-stripe { display: flex; height: 6px; }
.rhv-stripe i { flex: 1; display: block; }
.rhv-stripe i:nth-child(1) { background: #E8233A; } .rhv-stripe i:nth-child(2) { background: #22E4FF; }
.rhv-stripe i:nth-child(3) { background: #2BE38A; } .rhv-stripe i:nth-child(4) { background: #FFC83D; }
.rhv-stripe i:nth-child(5) { background: #B98CFF; }
.rhv-foot { background: #06070B; margin-top: 60px; }
.rhv-foot-in { max-width: 1360px; margin: 0 auto; padding: 44px 40px 0; display: grid; grid-template-columns: minmax(0,1.5fr) repeat(4, minmax(0,1fr)); gap: 28px; }
.rhv-foot h4 { margin: 0 0 12px; font-size: 13px !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; font-family: 'Times New Roman', Times, serif !important; }
.rhv-foot .col { border-top: 3px solid var(--c, var(--line)); padding-top: 12px; }
.rhv-foot .col a { display: flex; align-items: center; min-height: 32px; color: var(--fg) !important; font-size: 17px; margin-bottom: 4px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232,233,240,.3); }
.rhv-foot .col a:hover { color: var(--c, var(--lime)) !important; }
.rhv-foot p { color: var(--fg-2); font-size: 17px; line-height: 1.55; margin: 0 0 14px; }
.rhv-foot .note { font-size: 14px; color: var(--fg-muted); line-height: 1.55; }
.rhv-foot h4.brand { color: #C6F432; }
.rhv-foot .ig { display: inline-flex; gap: 8px; align-items: center; background: #C6F432; color: #0A0B10 !important; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-size: 16px; font-weight: 600; }
.rhv-foot .ig:hover { background: #FF8A45; }
.rhv-foot .ig:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
/* the big footer lockup: star + GEN / orange XT / LABS, the same treatment as the header logo */
.rhv-foot-word { max-width: 1360px; margin: 18px auto 0; padding: 0 40px; display: flex; align-items: center; gap: .12em; font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: clamp(72px, 13vw, 200px); line-height: .8; color: #E8EEF5; white-space: nowrap; overflow: hidden; }
.rhv-foot-word .mk { height: .78em; width: auto; flex: none; color: #E8EEF5; transform: translateY(-.03em); }
.rhv-foot-word .w { font-family: inherit !important; color: inherit; letter-spacing: .02em; }
.rhv-foot-word b { color: #C6F432; font: inherit !important; }
.rhv-foot-word i { font: inherit !important; font-style: normal; opacity: .72; margin-left: .04em; }
.rhv-foot-bot { max-width: 1360px; margin: 0 auto; padding: 14px 40px 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--fg-muted); }
@media (max-width: 760px) {
  .rhv-foot-in { grid-template-columns: 1fr; padding: 34px 16px 0; }
  .rhv-foot-word, .rhv-foot-bot, .rhv-wrap { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1100px) and (min-width: 761px) { .rhv-foot-in { grid-template-columns: repeat(3, minmax(0,1fr)); } .rhv-foot-in > div:first-child { grid-column: 1 / -1; } }

/* motion is decoration: honour the user's setting */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* contents index: animated world icons in place of the numbers */
.gx-index-list .n { display: grid; place-items: center; width: 52px; height: 52px; }
.gx-index-list .wi { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.gx-index-list [data-w="cinema"] .n { color: var(--cin-acc); } .gx-index-list [data-w="automotive"] .n { color: var(--auto-acc); }
.gx-index-list [data-w="markets"] .n { color: #2BE38A; } .gx-index-list [data-w="reality"] .n { color: var(--rel-acc); } .gx-index-list [data-w="mind"] .n { color: #B98CFF; }
.wi-clap { transform-box: view-box; transform-origin: 7px 22px; animation: wiClap 2.4s ease-in-out infinite; }
@keyframes wiClap { 0%, 55%, 100% { transform: rotate(0); } 70% { transform: rotate(-22deg); } 80% { transform: rotate(0); } }
.wi-wheel { transform-box: view-box; transform-origin: 24px 24px; animation: wiSteer 3.2s ease-in-out infinite; }
@keyframes wiSteer { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-28deg); } 65% { transform: rotate(24deg); } }
.wi-line { stroke-dasharray: 60; stroke-dashoffset: 60; animation: wiDraw 2.8s ease-in-out infinite; }
.wi-tip { opacity: 0; animation: wiTip 2.8s ease-in-out infinite; }
@keyframes wiDraw { 0% { stroke-dashoffset: 60; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
@keyframes wiTip { 0%, 45% { opacity: 0; } 55%, 85% { opacity: 1; } 100% { opacity: 0; } }
.wi-eye { transform-box: view-box; transform-origin: 24px 24px; animation: wiBlink 3.6s ease-in-out infinite; }
.wi-iris { animation: wiLook 3.6s ease-in-out infinite; }
@keyframes wiBlink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
@keyframes wiLook { 0%, 20% { transform: translateX(0); } 30%, 40% { transform: translateX(-4px); } 60%, 75% { transform: translateX(4px); } 90%, 100% { transform: translateX(0); } }
.wi-flame { fill: currentColor; fill-opacity: .25; transform-box: view-box; transform-origin: 24px 21px; animation: wiFlick 1.3s ease-in-out infinite alternate; }
@keyframes wiFlick { 0% { transform: scale(1, 1) rotate(-3deg); } 50% { transform: scale(.9, 1.12) rotate(2deg); } 100% { transform: scale(1.05, .94) rotate(-1deg); } }
.gx-index-list a:hover .wi * { animation-duration: .9s; }
@media (max-width: 760px) { .gx-index-list .n { width: 40px; height: 40px; } .gx-index-list .wi { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .gx-index-list .wi * { animation: none !important; } .wi-line { stroke-dashoffset: 0; } .wi-tip { opacity: 1; } }

/* GenXT "Shift" star mark: the mark and wordmark take the page's own text colour, XT is the brand orange */
html body a.gx-logo { display: inline-flex; align-items: center; gap: 9px; }
html body a.gx-logo .gx-logo-mark { height: 1em; width: auto; flex: none; color: inherit; transform: translateY(-1px); }
html body a.gx-logo span.gx-logo-word, html body a.gx-logo span.gx-logo-word > span { color: inherit !important; }
html body a.gx-logo span.gx-logo-word b { color: #C6F432 !important; font: inherit !important; letter-spacing: inherit; }
html body a.gx-logo span.gx-logo-word > span { opacity: .72; margin-left: 2px; }