/* ============================================================
   THAT TRIVIA QUIZ — SELF-HOSTED FONTS  (fonts.css)
   ------------------------------------------------------------
   Font files live in ../fonts/ (sibling of this css/ folder).
   url() paths below are relative to THIS css file.

   ► IN BRICKS / WORDPRESS:
     - Upload the /fonts folder somewhere under your theme or
       /wp-content/uploads/fonts/, then update the url() paths,
       OR
     - Use Bricks → Settings → Custom Fonts to register
       "Luckiest Guy", "Poppins", "Lastica" and upload the .ttf
       files — Bricks then emits its own @font-face for you and
       you can skip this file entirely.

   FONT ROLES (do not mix up):
     • Luckiest Guy → headers, logo wordmark, score badge
     • Poppins      → questions, answers, buttons, all body/UI
     • Lastica      → the "MIDNIGHT MAGIC" studio wordmark ONLY
   ============================================================ */

/* ---- Luckiest Guy (headers / display) ---- */
@font-face { font-family:'Luckiest Guy'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/wp-content/uploads/ttq-site/fonts/LuckiestGuy-Regular.ttf') format('truetype'); }

/* ---- Lastica (Midnight Magic studio wordmark only) ---- */
@font-face { font-family:'Lastica'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/wp-content/uploads/ttq-site/fonts/FontsFree-Net-Lastica.ttf') format('truetype'); }

/* ---- Poppins (upright) ---- */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('/wp-content/uploads/ttq-site/fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('/wp-content/uploads/ttq-site/fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/wp-content/uploads/ttq-site/fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/wp-content/uploads/ttq-site/fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('/wp-content/uploads/ttq-site/fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap; src:url('/wp-content/uploads/ttq-site/fonts/Poppins-Black.ttf') format('truetype'); }

/* ---- Poppins (italic) ---- */
@font-face { font-family:'Poppins'; font-style:italic; font-weight:400; font-display:swap; src:url('/wp-content/uploads/ttq-site/fonts/Poppins-Italic.ttf') format('truetype'); }


/* ============================================================
   THAT TRIVIA QUIZ — GLOBAL VARIABLES  (variables.css)
   ------------------------------------------------------------
   These are the single source of truth for the brand.
   Every section stylesheet and the game reference these.

   ► IN BRICKS: two options —
     1. Quick: paste this whole file into
        Bricks → Settings → Custom code → Custom CSS (loads site-wide).
     2. Native (recommended): recreate each token in
        Bricks → Settings → Variables (Variable Manager) using the
        SAME names (without the leading `--`). Then you can pick them
        from the colour/length dropdowns on any element.
        e.g. variable name `neon-cyan` value `#00e5ff`.
   ============================================================ */

:root {
  /* ---- TYPE FAMILIES ---- */
  --font-title:  'Luckiest Guy', cursive;            /* headers, logo text, score badge */
  --font-studio: 'Lastica', system-ui, sans-serif;   /* "Midnight Magic" wordmark ONLY */
  --font-body:   'Poppins', system-ui, sans-serif;   /* questions, buttons, body, UI */

  /* ---- BACKGROUND / SURFACE ---- */
  --bg:          #05060f;               /* near-black deep space — page base */
  --bg-void:     #02030a;               /* deepest, behind background rays */
  --card-bg:     rgba(8, 10, 24, 0.85); /* glass card fill (use with blur 10px) */
  --btn-bg:      rgba(8, 10, 24, 0.70); /* answer button fill (blur 6px) */
  --bg-elevated: #111A30;               /* opaque raised sheets / menus */

  /* ---- NEON ANSWER PALETTE (one per quiz answer slot) ---- */
  --neon-a: #ff3d7f;   /* answer A — hot pink */
  --neon-b: #ffe04b;   /* answer B — gold */
  --neon-c: #00e5ff;   /* answer C — cyan */
  --neon-d: #b64dff;   /* answer D — purple */
  --glow-a: rgba(255,  61, 127, 0.45);
  --glow-b: rgba(255, 224,  75, 0.45);
  --glow-c: rgba(  0, 229, 255, 0.45);
  --glow-d: rgba(182,  77, 255, 0.45);

  /* ---- EXTENDED BRAND NEON (logo gradient + host characters) ---- */
  --neon-cyan:    #00e5ff;  /* Theo · "TRIVIA" · info */
  --neon-yellow:  #ffe04b;  /* Jett · selected state */
  --neon-green:   #00ff88;  /* Kai  · CORRECT answer */
  --neon-pink:    #ff3d7f;  /* Maya · highlight */
  --neon-purple:  #b64dff;  /* The Grand Master glow · option D */
  --neon-blue:    #00c6ff;  /* CTA gradient start */
  --neon-violet:  #7b2fff;  /* CTA gradient end */

  /* ---- SEMANTIC ROLES ---- */
  --correct:  #00ff88;
  --wrong:    rgba(255,255,255,0.20);
  --selected: var(--neon-yellow);

  /* ---- TEXT ---- */
  --text:       #ffffff;                 /* primary */
  --subtext:    rgba(255,255,255,0.50);  /* muted labels / counters */
  --fg-3:       rgba(255,255,255,0.30);  /* tertiary / disabled */
  --fg-on-neon: #06080f;                 /* dark text on a bright neon fill */

  /* ---- BORDERS ---- */
  --border-faint:  rgba(255,255,255,0.08);
  --border-soft:   rgba(255,255,255,0.15);
  --border-strong: rgba(255,255,255,0.28);

  /* ---- RADII ---- */
  --radius-card: 20px;   /* question / glass cards */
  --radius-btn:  16px;   /* (legacy) answer buttons */
  --radius-sm:   10px;
  --radius-pill: 50px;   /* CTA + capsules (the site overrides answers to full 999px) */
  --radius-full: 999px;  /* dots, timer track, pill answers */

  /* ---- SPACING (8pt rhythm) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 48px;

  /* ---- NEON GLOW SHADOWS (border-glow + soft inset) ---- */
  --shadow-a: 0 0 14px var(--glow-a), inset 0 0 20px rgba(255,61,127,0.06);
  --shadow-b: 0 0 14px var(--glow-b), inset 0 0 20px rgba(255,224,75,0.06);
  --shadow-c: 0 0 14px var(--glow-c), inset 0 0 20px rgba(0,229,255,0.06);
  --shadow-d: 0 0 14px var(--glow-d), inset 0 0 20px rgba(182,77,255,0.06);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---- SIGNATURE GRADIENTS ---- */
  --grad-cta:      linear-gradient(135deg, #00c6ff, #7b2fff);   /* CTA buttons */
  --grad-timer:    linear-gradient(90deg, #00e5ff, #b64dff);    /* countdown bar */
  --grad-spectrum: linear-gradient(90deg, #00e5ff 0%, #00ff88 25%, #ffe04b 50%, #ff3d7f 75%, #b64dff 100%);
  --grad-glow:     radial-gradient(ellipse at center, rgba(60,20,140,0.35) 0%, rgba(20,5,60,0.15) 50%, transparent 80%);

  /* ---- SITE-SPECIFIC CONTROLS (tweakable) ---- */
  --btn-icon:      16px;   /* icon size inside buttons */
  --hero-btn-minw: 215px;  /* min width of the two hero CTAs */
}


/* ============================================================
   That Trivia Quiz — Marketing Site Layout
   Builds on colors_and_type.css (tokens, .ttq-* presets).
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:#fff;font-family:var(--font-body);overflow-x:hidden;}
#root{position:relative;z-index:1;}
a{color:inherit;text-decoration:none;}
img{display:block;}
section{position:relative;z-index:1;}
::selection{background:rgba(0,229,255,.3);}

/* ---------- Cosmic backdrop (fixed, full viewport) ---------- */
.cosmos{position:fixed!important;inset:0!important;left:0!important;right:auto!important;top:0!important;bottom:auto!important;
  width:100vw!important;max-width:none!important;min-width:100vw!important;height:100vh!important;min-height:100vh!important;
  margin:0!important;padding:0!important;z-index:0;overflow:hidden;pointer-events:none;background:#03040d;}
.cosmos::before{content:'';position:absolute;top:50%;left:50%;width:240vmax;height:240vmax;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(0,140,255,.15) 4deg, transparent 9deg,
    rgba(255,255,255,.12) 16deg, transparent 21deg,
    rgba(255,45,150,.14) 28deg, transparent 34deg,
    transparent 50deg, rgba(0,200,255,.11) 55deg, transparent 60deg,
    rgba(255,255,255,.1) 70deg, transparent 75deg,
    rgba(255,45,150,.12) 84deg, transparent 90deg,
    transparent 112deg, rgba(0,140,255,.13) 117deg, transparent 122deg,
    rgba(255,255,255,.11) 132deg, transparent 137deg,
    rgba(255,45,150,.12) 148deg, transparent 154deg,
    transparent 178deg, rgba(0,200,255,.11) 183deg, transparent 188deg,
    rgba(255,255,255,.1) 198deg, transparent 203deg,
    rgba(255,45,150,.11) 214deg, transparent 220deg,
    transparent 250deg, rgba(0,140,255,.13) 255deg, transparent 260deg,
    rgba(255,255,255,.11) 270deg, transparent 275deg,
    rgba(255,45,150,.12) 288deg, transparent 294deg,
    transparent 320deg, rgba(0,200,255,.11) 325deg, transparent 330deg,
    rgba(255,255,255,.11) 342deg, transparent 347deg,
    rgba(255,45,150,.11) 354deg, transparent 360deg);
  animation:cos-spin 70s linear infinite;}
@keyframes cos-spin{from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(360deg);}}
.cosmos::after{content:'';position:absolute;inset:0;background:
  radial-gradient(50% 38% at 50% 8%, rgba(0,150,255,.20), transparent 70%),
  radial-gradient(45% 35% at 14% 42%, rgba(255,45,150,.14), transparent 72%),
  radial-gradient(48% 38% at 88% 64%, rgba(120,40,220,.18), transparent 72%),
  radial-gradient(60% 50% at 50% 90%, rgba(0,150,255,.10), transparent 70%);}
@media (prefers-reduced-motion: reduce){.cosmos::before{animation:none;}}

/* ---------- Layout helpers ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
#root{position:relative;z-index:1;width:100%;max-width:none;display:block;}
.brxe-section{width:100%;}
.brxe-container.wrap{width:100%;max-width:1200px;}
.nav,.hero,.band,.footer{width:100%;max-width:none;}
.nav-in,.nav-links,.hero-cta,.hero-art,.stats,.books-feature,.editions,.ed-row,.pod-wrap,.pod-listen,.club-wrap,.club-feat,.footer-in,.footer-bottom{width:100%;}
.nav-in,.nav-links,.hero-cta,.hero-art,.ed-row,.pod-listen,.club-feat,.footer-in,.footer-bottom{flex-direction:row;}
.hero-in,.stats,.books-feature,.editions,.pod-wrap,.club-wrap{display:grid;}
.hero-in,.stats,.books-feature,.editions,.pod-wrap,.club-wrap{flex-direction:initial;}
.hero-in>*,.stats>*,.books-feature>*,.editions>*,.pod-wrap>*,.club-wrap>*{width:auto;max-width:none;min-width:0;}
.nav-logo{flex:0 0 auto;display:block;}
.nav-logo img{display:block;height:42px;width:auto;}
.nav-links{width:auto;flex:0 1 auto;min-width:0;margin-left:auto;}
.book3d,.bf-cover,.footer-logo{display:block;height:auto;max-width:100%;}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(0,229,255,.75);}
.sec-head{text-align:center;max-width:680px;margin:0 auto 48px;display:flex;flex-direction:column;align-items:center;}
.sec-head .eyebrow{margin-bottom:14px;width:100%;text-align:center;}
.sec-title{font-family:var(--font-title);font-size:clamp(30px,4.4vw,52px);line-height:1.02;letter-spacing:.04em;
  text-shadow:0 0 20px rgba(0,200,255,.32);}
.sec-lead{font-weight:500;font-size:17px;line-height:1.6;color:rgba(255,255,255,.62);margin-top:16px;text-wrap:pretty;}
#quiznight .sec-head{max-width:1120px;margin-bottom:64px;}
#quiznight .sec-title{max-width:1040px;text-wrap:balance;font-size:clamp(42px,5.2vw,78px);}
#quiznight .sec-lead{max-width:880px;margin-left:auto;margin-right:auto;text-wrap:balance;}

/* ---------- Buttons ---------- */
:root{ --btn-icon:16px; --hero-btn-minw:215px; }
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 30px;background:var(--grad-cta);border-radius:var(--radius-pill);
  border:none;cursor:pointer;font-family:var(--font-title);font-size:16px;letter-spacing:.05em;color:#fff;
  box-shadow:0 0 20px rgba(0,180,255,.4),0 4px 20px rgba(100,0,255,.3);transition:transform .15s, box-shadow .15s;}
.btn-cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 30px rgba(0,180,255,.6),0 8px 30px rgba(100,0,255,.5);}
.btn-cta.sm{padding:11px 20px;font-size:13px;}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;background:transparent;
  border:1.5px solid rgba(255,255,255,.2);border-radius:var(--radius-pill);cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:14px;color:rgba(255,255,255,.85);transition:background .15s,border-color .15s,transform .15s;}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4);transform:translateY(-2px);}
.btn-ghost.sm{padding:10px 18px;font-size:13px;}
/* keep icons proportional to the label — never let an unsized SVG balloon the button */
.btn-cta>svg,.btn-ghost>svg{width:var(--btn-icon);height:var(--btn-icon);flex:0 0 auto;}
.btn-cta.sm>svg,.btn-ghost.sm>svg{width:calc(var(--btn-icon) - 2px);height:calc(var(--btn-icon) - 2px);}
/* hero CTAs: wider, evenly sized */
.hero-cta .btn-cta,.hero-cta .btn-ghost{min-width:var(--hero-btn-minw);}
/* club "Join" button: match the input fields' height exactly */
.club-form .btn-cta{padding:0 20px;min-height:53px;font-size:15px;}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(5,6,15,.62);
  border-bottom:1px solid rgba(255,255,255,.06);}
.nav-in{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:14px 40px;}
.nav-logo{height:42px;width:auto;filter:drop-shadow(0 0 14px rgba(0,180,255,.4));}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-weight:600;font-size:14.5px;color:rgba(255,255,255,.68);transition:color .15s;}
.nav-links a:hover{color:#fff;}
@media(max-width:860px){.nav-links a:not(.nav-cta){display:none;}.nav-in{padding:12px 22px;}}

/* ---------- Hero ---------- */
.hero{padding:70px 0 40px;}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;}
.hero h1{font-family:var(--font-title);font-size:clamp(46px,6.4vw,84px);line-height:.95;letter-spacing:.03em;margin:18px 0 0;
  text-shadow:0 0 22px rgba(0,200,255,.4),0 0 50px rgba(0,200,255,.22);}
.hero h1 .cy{color:var(--neon-cyan);}
.hero h1 .pk{color:var(--neon-pink);}
.hero-sub{font-weight:700;font-size:19px;line-height:1.45;color:rgba(255,255,255,.9);margin:22px 0 12px;}
.hero-lead{font-weight:500;font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.6);max-width:480px;text-wrap:pretty;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
.hero-art{display:flex;justify-content:center;position:relative;}
.hero-art .halo{position:absolute;inset:-8% -4%;background:radial-gradient(ellipse at center,rgba(120,40,220,.4),transparent 65%);
  filter:blur(20px);z-index:0;}
.book3d{position:relative;z-index:1;width:330px;border-radius:8px;
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 70px rgba(120,40,220,.3),inset 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(3deg) rotateY(-9deg);transition:transform .5s ease;animation:bob 6s ease-in-out infinite;}
.book3d:hover{transform:rotate(0) rotateY(0) scale(1.03);}
@keyframes bob{0%,100%{translate:0 -6px;}50%{translate:0 8px;}}
.hero-badge{position:absolute;z-index:2;top:-4px;right:18px;background:var(--neon-green);color:#06251a;
  font-family:var(--font-title);font-size:13px;letter-spacing:.05em;padding:8px 15px;border-radius:50px;
  box-shadow:0 0 22px rgba(0,255,136,.6);transform:rotate(6deg);}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px;}
.stat{background:var(--card-bg);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px 14px;text-align:center;backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.stat-n{font-family:var(--font-title);font-size:38px;letter-spacing:.03em;color:#fff;text-shadow:0 0 16px rgba(0,200,255,.45);}
.stat-l{font-weight:600;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--subtext);margin-top:5px;}

@media(max-width:880px){
  .hero-in{grid-template-columns:1fr;text-align:center;gap:36px;}
  .hero-lead{margin:0 auto;}.hero-cta{justify-content:center;}
  .hero-art{order:-1;}.book3d{width:230px;}
  .stats{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Section rhythm ---------- */
.band{padding:84px 0;}
.band-alt{background:linear-gradient(180deg,transparent,rgba(8,10,24,.55) 12%,rgba(8,10,24,.55) 88%,transparent);}

/* ============================================================
   GAME CONSOLE
   ============================================================ */
.game-stage{display:flex;justify-content:center;align-items:flex-start;width:100%;max-width:none;margin-inline:auto;}
.game-stage .brxe-html{display:flex;justify-content:center;width:100%;max-width:none;}
.game-stage iframe{display:block;width:min(100%,1180px)!important;height:880px!important;margin-inline:auto;background:transparent!important;}
.console{position:relative;width:100%;max-width:960px;background:rgba(6,8,20,.78);
  border:1px solid rgba(255,255,255,.1);border-radius:30px;padding:30px 30px 34px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07),0 0 60px rgba(80,30,180,.18);backdrop-filter:blur(12px);}
.console-rays{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.5;}
.console-rays::before{content:'';position:absolute;bottom:-30%;left:50%;width:200%;height:200%;transform:translateX(-50%);
  background:conic-gradient(from 250deg at 50% 100%,transparent 0deg,rgba(0,140,255,.1) 8deg,transparent 16deg,
    rgba(180,0,255,.09) 26deg,transparent 34deg,rgba(255,20,120,.1) 44deg,transparent 52deg,
    rgba(0,200,255,.08) 62deg,transparent 76deg);animation:cos-spin 24s linear infinite;}
@media (prefers-reduced-motion: reduce){.console-rays::before{animation:none;}}
.console-inner{position:relative;z-index:1;min-height:560px;display:flex;flex-direction:column;}

.game-top{display:flex;align-items:center;justify-content:space-between;min-height:34px;margin-bottom:6px;}
.sfx-toggle{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);background:rgba(8,10,24,.6);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);
  transition:border-color .15s,color .15s,background .15s;}
.sfx-toggle:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);background:rgba(0,229,255,.08);}
.sfx-toggle svg{width:17px;height:17px;}
.game-logo{font-family:var(--font-title);font-size:18px;letter-spacing:.03em;color:#fff;text-shadow:0 0 12px rgba(0,200,255,.5);}
.game-logo .cy{color:var(--neon-cyan);}.game-logo .pk{color:var(--neon-pink);}
.host-tag{display:inline-flex;align-items:center;gap:7px;border:1.5px solid;border-radius:50px;padding:4px 12px 4px 5px;
  font-family:var(--font-title);font-size:12px;letter-spacing:.04em;}
.host-tag img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:top center;}

/* fade between game steps */
.step{animation:stepin .4s ease;flex:1;display:flex;flex-direction:column;}
@keyframes stepin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* --- intro --- */
.g-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;}
.g-stacklogo{font-family:var(--font-title);font-size:46px;line-height:.92;letter-spacing:.03em;
  text-shadow:0 0 16px rgba(0,200,255,.55),0 0 38px rgba(0,200,255,.28);}
.g-stacklogo .cy{color:var(--neon-cyan);}.g-stacklogo .pk{color:var(--neon-pink);}
.g-tagline{font-weight:600;font-size:15px;color:rgba(255,255,255,.7);line-height:1.5;}
.g-tagline .cy{color:var(--neon-cyan);}
.intro-host{width:150px;aspect-ratio:4/5;height:auto;border-radius:18px;object-fit:cover;object-position:top center;
  border:1.5px solid rgba(255,255,255,.35);background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.10),transparent 70%);
  box-shadow:0 0 30px rgba(255,255,255,.30),0 14px 40px rgba(0,0,0,.5);}

/* --- host select --- */
.g-h2{font-family:var(--font-title);font-size:26px;letter-spacing:.03em;text-align:center;}
.host-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin:6px 0 4px;}
.host-pick{background:#0a0c1a;border:2px solid;border-radius:16px;overflow:hidden;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;transition:transform .2s,box-shadow .2s;}
.host-pick img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;}
.host-pick .hn{font-family:var(--font-title);font-size:14px;letter-spacing:.03em;padding:7px 0 8px;}
.host-pick .blurb{display:none;}

/* --- question --- */
.q-head{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px;}
.dots{display:flex;gap:9px;}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);transition:all .3s;}
.dot.active{background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan);}
.dot.done{background:var(--neon-green);box-shadow:0 0 8px rgba(0,255,136,.6);}
.q-count{font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--subtext);}
.q-card{background:rgba(8,10,24,.7);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px 22px;
  text-align:center;margin:4px 0 2px;box-shadow:var(--shadow-card);}
.q-text{font-family:var(--font-body);font-weight:800;font-size:21px;line-height:1.32;text-wrap:balance;}
.q-text sub{font-size:.7em;}
.timer{height:6px;width:100%;background:rgba(255,255,255,.08);border-radius:50px;overflow:hidden;margin:34px 0 2px;}
.timer span{display:block;height:100%;width:100%;background:var(--grad-timer);transform-origin:right;
  animation:tdrain linear forwards;border-radius:50px;}
@keyframes tdrain{from{transform:scaleX(1);}to{transform:scaleX(0);}}
.answers{display:flex;flex-direction:column;gap:11px;margin-top:8px;}
.ans{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:rgba(8,10,24,.7);border:1.8px solid;border-radius:999px;padding:15px 22px;
  font-family:var(--font-body);font-weight:700;font-size:16px;color:#fff;transition:transform .12s,box-shadow .2s,opacity .2s;}
.ans .lt{font-family:var(--font-body);font-weight:800;font-size:16px;opacity:.95;}
.ans.a{border-color:var(--neon-a);box-shadow:var(--shadow-a);}
.ans.b{border-color:var(--neon-b);box-shadow:var(--shadow-b);}
.ans.c{border-color:var(--neon-c);box-shadow:var(--shadow-c);}
.ans.d{border-color:var(--neon-d);box-shadow:var(--shadow-d);}
.ans:not(:disabled):hover{transform:translateY(-2px);}
.ans:not(:disabled):active{transform:scale(.98);}
.ans.correct{border-color:var(--correct)!important;box-shadow:0 0 22px rgba(0,255,136,.6),inset 0 0 30px rgba(0,255,136,.12)!important;
  background:rgba(0,255,136,.08)!important;animation:pop .35s ease;}
.ans.wrong{border-color:rgba(255,80,80,.8)!important;box-shadow:0 0 18px rgba(255,60,60,.4)!important;background:rgba(255,40,40,.08)!important;}
.ans.dim{opacity:.4;}
.ans .mark{margin-left:auto;font-family:var(--font-title);font-size:14px;}
@keyframes pop{0%{transform:scale(1);}45%{transform:scale(1.035);}100%{transform:scale(1);}}
.ans:disabled{cursor:default;}

/* --- results / conversion --- */
.res-top{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:4px;}
.res-host{width:80px;aspect-ratio:4/5;height:auto;border-radius:14px;object-fit:cover;object-position:top center;border:2px solid;}
.res-msg{font-family:var(--font-title);font-size:30px;letter-spacing:.03em;text-shadow:0 0 18px rgba(0,200,255,.4);}
.res-score{font-family:var(--font-title);font-size:54px;letter-spacing:.04em;line-height:1;
  text-shadow:0 0 22px rgba(0,229,255,.7),0 0 44px rgba(0,229,255,.35);}
.res-score small{font-size:24px;opacity:.55;}
.res-sub{font-weight:600;font-size:14px;color:rgba(255,255,255,.62);}
.conv-head{text-align:center;font-family:var(--font-title);font-size:18px;letter-spacing:.03em;margin:18px 0 12px;color:rgba(255,255,255,.92);}
.conv-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.conv-card{display:flex;flex-direction:column;gap:7px;background:rgba(10,13,28,.8);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:15px 15px 16px;cursor:pointer;transition:transform .18s,box-shadow .2s,border-color .2s;text-align:left;}
.conv-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.25);box-shadow:0 0 22px rgba(0,180,255,.2);}
.conv-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.conv-ico svg{width:19px;height:19px;}
.conv-t{font-family:var(--font-title);font-size:14px;letter-spacing:.02em;}
.conv-d{font-weight:500;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.6);}
.conv-card.club{grid-column:1/-1;border-color:rgba(0,229,255,.45);background:linear-gradient(135deg,rgba(0,120,255,.14),rgba(120,40,220,.14));
  box-shadow:0 0 26px rgba(0,180,255,.22);}
.conv-card.club:hover{border-color:rgba(0,229,255,.7);}
.conv-card.club{text-align:center;align-items:center;}
.conv-card.club p{max-width:560px;}
.club-row{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%;max-width:560px;}
.club-row input{width:100%;background:rgba(0,0,0,.4);border:1.5px solid rgba(255,255,255,.18);border-radius:50px;
  padding:11px 16px;color:#fff;font-family:var(--font-body);font-size:13px;outline:none;transition:border-color .15s;}
.club-row .btn-cta{width:100%;justify-content:center;}
.club-row input:focus{border-color:var(--neon-cyan);}
.club-row input::placeholder{color:rgba(255,255,255,.4);}
.club-badge{display:inline-block;background:var(--neon-green);color:#06251a;font-family:var(--font-title);font-size:10px;
  letter-spacing:.04em;padding:3px 9px;border-radius:50px;align-self:center;}
.replay{display:block;margin:14px auto 0;background:none;border:none;color:rgba(255,255,255,.55);font-weight:600;
  font-size:13px;cursor:pointer;font-family:var(--font-body);transition:color .15s;}
.replay:hover{color:#fff;}
.club-done{text-align:center;padding:14px;color:var(--neon-green);font-weight:700;font-size:13.5px;}

/* ============================================================
   BOOKS
   ============================================================ */
.books-feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;margin-bottom:64px;}
.bf-art{display:flex;justify-content:center;position:relative;}
.bf-art .halo{position:absolute;inset:-6%;background:radial-gradient(ellipse at center,rgba(120,40,220,.38),transparent 65%);filter:blur(18px);}
.bf-cover{position:relative;width:300px;border-radius:8px;box-shadow:0 36px 80px rgba(0,0,0,.6),0 0 60px rgba(120,40,220,.28);transform:rotate(-3deg);}
.bf-tag{font-family:var(--font-title);font-size:13px;letter-spacing:.06em;color:var(--neon-green);text-shadow:0 0 14px rgba(0,255,136,.5);}
.bf-title{font-family:var(--font-title);font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:.03em;margin:10px 0 16px;}
.bf-desc{font-weight:500;font-size:16px;line-height:1.65;color:rgba(255,255,255,.65);max-width:460px;text-wrap:pretty;}
.bf-list{list-style:none;margin:20px 0 26px;display:flex;flex-direction:column;gap:10px;}
.bf-list li{display:flex;align-items:center;gap:11px;font-weight:500;font-size:15px;color:rgba(255,255,255,.82);}
.bf-list svg{width:18px;height:18px;color:var(--neon-green);flex-shrink:0;}
.bf-cta{display:flex;flex-direction:column;gap:13px;align-items:flex-start;justify-content:flex-start;}
.bf-cta .btn-cta{align-self:flex-start;}
.bf-price{font-family:var(--font-title);font-size:22px;letter-spacing:.02em;}
.bf-price{order:-1;}
.bf-price small{font-size:13px;color:var(--subtext);font-family:var(--font-body);font-weight:600;}

.editions-head{text-align:center;margin-bottom:30px;}
.editions-head h3{font-family:var(--font-title);font-size:26px;letter-spacing:.04em;}
.editions-head p{font-weight:500;font-size:15px;color:rgba(255,255,255,.6);margin-top:8px;}
.editions{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.ed{background:var(--card-bg);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:18px;backdrop-filter:blur(10px);
  transition:transform .25s,box-shadow .25s,border-color .25s;}
.ed:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(0,0,0,.5);}
.ed-cover{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;margin-bottom:15px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 14px 40px rgba(0,0,0,.5);}
.ed-cover .cv-logo{font-family:var(--font-title);font-size:25px;line-height:.92;letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(0,0,0,.4);}
.ed-cover .cv-ed{font-family:var(--font-title);font-size:17px;letter-spacing:.05em;margin-top:10px;padding:5px 13px;border-radius:50px;}
.ed-cover .cv-q{font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:12px;opacity:.85;}
.ed-cover .cv-mm{position:absolute;bottom:13px;left:0;right:0;font-family:var(--font-studio);font-size:9px;letter-spacing:.14em;opacity:.7;}
/* original mini cover uses real image */
.ed-cover.real{padding:0;}
.ed-cover.real img{width:100%;height:100%;object-fit:cover;}
/* 80s */
.cv-80s{background:linear-gradient(180deg,#1a0033 0%,#3a0a55 42%,#ff2d95 72%,#ff7a3d 100%);}
.cv-80s::after{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(transparent 0 22px,rgba(0,229,255,.18) 22px 23px),
  radial-gradient(circle at 50% 30%,rgba(255,224,75,.35),transparent 38%);
  mask:linear-gradient(180deg,transparent 55%,#000 60%);pointer-events:none;}
.cv-80s .cv-logo,.cv-80s .cv-ed,.cv-80s .cv-q,.cv-80s .cv-mm{position:relative;z-index:1;}
.cv-80s .cv-ed{background:var(--neon-cyan);color:#06121a;box-shadow:0 0 16px rgba(0,229,255,.6);}
/* christmas */
.cv-xmas{background:linear-gradient(165deg,#04140c 0%,#0a3a22 45%,#7a0f18 100%);}
.cv-xmas::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 22% 20%,#fff 0 1.5px,transparent 2px),
  radial-gradient(circle at 70% 14%,#fff 0 1px,transparent 2px),
  radial-gradient(circle at 84% 40%,#fff 0 1.5px,transparent 2px),
  radial-gradient(circle at 30% 60%,#fff 0 1px,transparent 2px),
  radial-gradient(circle at 60% 78%,#fff 0 1.5px,transparent 2px),
  radial-gradient(circle at 12% 84%,#fff 0 1px,transparent 2px);opacity:.7;pointer-events:none;}
.cv-xmas .cv-logo,.cv-xmas .cv-ed,.cv-xmas .cv-q,.cv-xmas .cv-mm{position:relative;z-index:1;}
.cv-xmas .cv-ed{background:#ff3d4d;color:#fff;box-shadow:0 0 16px rgba(255,61,77,.6);}
.cv-xmas .cv-logo .l1{color:var(--neon-green);}.cv-xmas .cv-logo .l2{color:#fff;}.cv-xmas .cv-logo .l3{color:#ff5d5d;}
.cv-80s .cv-logo .l1{color:var(--neon-cyan);}.cv-80s .cv-logo .l2{color:#fff;}.cv-80s .cv-logo .l3{color:var(--neon-yellow);}

.ed-name{font-family:var(--font-title);font-size:18px;letter-spacing:.03em;}
.ed-meta{font-weight:600;font-size:12.5px;color:var(--subtext);margin:4px 0 13px;}
.ed-row{display:flex;align-items:center;justify-content:space-between;}
.ed-status{font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:50px;}
.ed-status.out{background:rgba(0,255,136,.14);color:var(--neon-green);border:1px solid rgba(0,255,136,.3);}
.ed-status.soon{background:rgba(255,224,75,.12);color:var(--neon-yellow);border:1px solid rgba(255,224,75,.3);}
.ed-status.next{background:rgba(0,229,255,.12);color:var(--neon-cyan);border:1px solid rgba(0,229,255,.3);}

@media(max-width:880px){
  .books-feature{grid-template-columns:1fr;text-align:center;gap:30px;}
  .bf-art{order:-1;}.bf-list{align-items:center;}.bf-desc{margin:0 auto;}.bf-cta{justify-content:center;align-items:center;}.bf-cta .btn-cta{align-self:center;}
  .editions{grid-template-columns:1fr;max-width:300px;margin:0 auto;}
  .conv-grid{grid-template-columns:1fr;}
}

/* ============================================================
   TRIVIA CLUB
   ============================================================ */
.club-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;}
.club-feats{display:flex;flex-direction:column;gap:16px;margin:26px 0 0;}
.club-feat{display:flex;gap:15px;align-items:flex-start;background:rgba(8,10,24,.5);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:17px 19px;}
.club-feat .ci{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.28);}
.club-feat .ci svg{width:21px;height:21px;color:var(--neon-cyan);}
.club-feat h4{font-family:var(--font-title);font-size:16px;letter-spacing:.02em;margin-bottom:4px;}
.club-feat p{font-weight:500;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.6);}
.club-card{background:rgba(8,10,24,.82);border:1px solid rgba(0,229,255,.3);border-radius:26px;padding:36px 32px;
  backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 50px rgba(0,180,255,.18);text-align:center;
  display:flex;flex-direction:column;align-items:center;}
.club-card .free{font-family:var(--font-title);font-size:48px;line-height:1;letter-spacing:.02em;
  background:var(--grad-spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;}
.club-card .free,.club-card .free-l,.club-card .free-sub,.club-fine{width:100%;text-align:center;}
.club-card .free-l{font-weight:700;font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.85);margin-top:4px;}
.club-card .free-sub{font-weight:500;font-size:13.5px;color:rgba(255,255,255,.55);margin:8px 0 24px;}
.club-form{display:flex;flex-direction:column;gap:11px;width:100%;max-width:560px;margin-inline:auto;}
.club-form input{background:rgba(0,0,0,.4);border:1.5px solid rgba(255,255,255,.18);border-radius:50px;
  padding:14px 20px;color:#fff;font-family:var(--font-body);font-size:14.5px;outline:none;transition:border-color .15s;text-align:center;width:100%;}
.club-form .btn-cta,.club-form button{width:100%!important;max-width:none;}
.club-form input:focus{border-color:var(--neon-cyan);}
.club-form input::placeholder{color:rgba(255,255,255,.4);}
.club-fine{font-weight:500;font-size:11.5px;color:rgba(255,255,255,.4);margin-top:14px;}
.club-success{padding:30px 10px;}
.club-success .big{font-family:var(--font-title);font-size:30px;color:var(--neon-green);text-shadow:0 0 20px rgba(0,255,136,.5);margin-bottom:10px;}
.club-success p{font-weight:500;font-size:14px;color:rgba(255,255,255,.7);line-height:1.6;}
@media(max-width:880px){.club-wrap{grid-template-columns:1fr;gap:34px;}}

/* ============================================================
   PODCAST
   ============================================================ */
.pod-wrap{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center;}
.pod-host{position:relative;display:flex;justify-content:flex-end;transform:translateX(88px);}
.pod-host .halo{position:absolute;inset:-4%;background:radial-gradient(ellipse at center,rgba(255,255,255,.22),transparent 62%);filter:blur(20px);}
.pod-host-card{position:relative;width:100%;max-width:330px;border-radius:24px;overflow:hidden;
  border:2px solid rgba(255,255,255,.55);background:#0a0c1a;
  box-shadow:0 0 30px rgba(255,255,255,.25),0 24px 60px rgba(0,0,0,.55);}
.pod-host-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;display:block;}
.pod-host-plate{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 16px;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(4,5,13,.92));}
.pod-host-plate .role{font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.pod-host-plate .name{font-family:var(--font-title);font-size:24px;letter-spacing:.04em;margin-top:3px;
  text-shadow:0 0 16px rgba(255,255,255,.5);}
.pod-listen{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px;}
.pod-latest{background:rgba(8,10,24,.7);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:20px;
  display:flex;align-items:center;gap:18px;box-shadow:var(--shadow-card);}
.pod-play{flex-shrink:0;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;background:var(--grad-cta);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 22px rgba(0,180,255,.5);transition:transform .15s;}
.pod-play:hover{transform:scale(1.06);}
.pod-play svg{width:22px;height:22px;color:#fff;margin-left:3px;}
.pod-latest-meta .ep{font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--neon-cyan);}
.pod-latest-meta h4{font-family:var(--font-title);font-size:19px;letter-spacing:.02em;margin:4px 0 6px;line-height:1.1;}
.pod-latest-meta .dur{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:13px;color:var(--subtext);}
.pod-latest-meta .dur svg{width:14px;height:14px;}
.pod-eps{margin-top:18px;display:flex;flex-direction:column;}
.pod-ep{display:flex;align-items:center;gap:15px;padding:14px 4px;border-top:1px solid rgba(255,255,255,.07);}
.pod-ep:first-child{border-top:none;}
.pod-ep .epno{font-family:var(--font-title);font-size:16px;color:rgba(255,255,255,.35);width:34px;flex-shrink:0;}
.pod-ep .ept{flex:1;font-weight:600;font-size:15px;color:rgba(255,255,255,.88);}
.pod-ep .epd{font-weight:500;font-size:13px;color:var(--subtext);}
.pod-ep .epplay{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);
  background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:border-color .15s,background .15s;}
.pod-ep .epplay:hover{border-color:var(--neon-cyan);background:rgba(0,229,255,.1);}
.pod-ep .epplay svg{width:13px;height:13px;margin-left:1px;}
@media(max-width:880px){
  .pod-wrap{grid-template-columns:1fr;gap:34px;}
  .pod-host{order:-1;transform:none;}.pod-listen{justify-content:center;}
  .pod-ep .epd{display:none;}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid rgba(255,255,255,.07);margin-top:40px;padding:50px 0 40px;}
.footer-in{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:56px;align-items:flex-start;}
.footer-in>div:first-child{width:auto;max-width:320px;}
.footer-logo{height:46px;filter:drop-shadow(0 0 14px rgba(0,180,255,.35));margin-bottom:14px;}
.footer-tag{font-weight:500;font-size:13.5px;color:rgba(255,255,255,.5);max-width:260px;line-height:1.6;}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:54px;justify-items:start;width:100%;margin-left:auto;}
.footer-col h5{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,229,255,.65);margin-bottom:14px;}
.footer-col a{display:block;font-weight:500;font-size:14px;color:rgba(255,255,255,.6);margin-bottom:10px;transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  margin-top:42px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);}
.footer-mm{font-family:var(--font-studio);font-size:15px;letter-spacing:.16em;color:var(--neon-pink);text-shadow:0 0 16px rgba(255,61,127,.5);}
.footer-copy{font-weight:500;font-size:12.5px;color:rgba(255,255,255,.4);}
@media(max-width:760px){
  .footer-in{grid-template-columns:1fr;gap:30px;}
  .footer-cols{grid-template-columns:1fr;gap:18px;}
}

/* TTQ desktop scale correction: match Claude reference hero proportions. */
@media (min-width: 1024px) {
  .wrap,
  .nav-in {
    max-width: 1532px;
  }

  .nav-in {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .nav-logo {
    height: 56px;
  }

  .nav-links {
    gap: 42px;
  }

  .nav-links a {
    font-size: 18px;
  }

  .nav-cta.btn-cta.sm {
    min-width: 180px;
    padding: 16px 26px;
    font-size: 15px;
  }

  .hero {
    padding-top: 145px;
    padding-bottom: 62px;
  }

  .hero-in {
    grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr);
    gap: 72px;
  }

  .hero h1 {
    font-size: clamp(72px, 5.4vw, 96px);
  }

  .hero-sub {
    font-size: 25px;
    margin-top: 32px;
  }

  .hero-lead {
    max-width: 660px;
    font-size: 21px;
    line-height: 1.6;
  }

  .hero-cta {
    gap: 20px;
    margin-top: 42px;
  }

  .hero-cta .btn-cta,
  .hero-cta .btn-ghost {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    min-width: 315px;
    min-height: 72px;
    font-size: 19px;
  }

  .book3d {
    width: 445px;
  }

  .hero-badge {
    top: -12px;
    right: -8px;
    font-size: 16px;
    padding: 12px 22px;
  }

  .stats {
    gap: 22px;
    margin-top: 70px;
  }

  .stat {
    min-height: 158px;
    padding: 34px 18px;
  }

  .stat-n {
    font-size: 52px;
  }

  .stat-l {
    font-size: 15px;
    margin-top: 14px;
  }
}

/* TTQ reference alignment correction. */
@media (min-width: 1024px) {
  .wrap,
  .nav-in {
    padding-left: 0;
    padding-right: 0;
  }

  .hero {
    padding-top: 88px;
  }

  .hero-in > .brxe-container:first-child {
    align-items: flex-start;
    text-align: left;
  }

  .hero-cta {
    justify-content: flex-start;
  }

  .hero-art {
    margin-top: 24px;
  }
}

/* TTQ links page + display type refinement. */
.hero h1,
.sec-title,
.bf-title,
.g-stacklogo,
.g-h2,
.res-msg,
.res-score,
.ed-name,
.editions-head h3,
.club-feat h4,
.footer-mm,
.ttq-bio-title,
.ttq-bio-link,
.ttq-bio-kicker {
  letter-spacing: .065em;
}

.ttq-bio-page {
  min-height: 100vh;
  padding: 54px 24px 78px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.ttq-bio-shell {
  width: min(100%, 560px);
  margin: 0 auto;
  text-align: center;
}

.ttq-bio-logo {
  width: min(220px, 54vw);
  margin: 0 auto 24px;
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, .45));
}

.ttq-bio-socials {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin-bottom: 32px;
}

.ttq-bio-social {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 24, .72);
  border: 1.8px solid var(--neon-cyan);
  box-shadow: var(--shadow-c);
  color: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ttq-bio-social:nth-child(2) { border-color: var(--neon-b); box-shadow: var(--shadow-b); }
.ttq-bio-social:nth-child(3) { border-color: var(--neon-a); box-shadow: var(--shadow-a); }
.ttq-bio-social:nth-child(4) { border-color: var(--neon-d); box-shadow: var(--shadow-d); }

.ttq-bio-social:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: #fff;
  box-shadow: 0 0 26px rgba(255,255,255,.28), 0 12px 32px rgba(0,0,0,.38);
}

.ttq-bio-social svg {
  width: 22px;
  height: 22px;
}

.ttq-bio-kicker {
  font-family: var(--font-title);
  color: var(--neon-cyan);
  font-size: 16px;
  margin-bottom: 8px;
  text-shadow: 0 0 14px rgba(0, 229, 255, .45);
}

.ttq-bio-title {
  font-family: var(--font-title);
  font-size: clamp(38px, 9vw, 64px);
  line-height: .95;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 229, 255, .45), 0 0 42px rgba(0, 229, 255, .22);
  margin-bottom: 16px;
}

.ttq-bio-intro {
  color: rgba(255,255,255,.66);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.55;
  max-width: 430px;
  margin: 0 auto 28px;
}

.ttq-bio-links {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.ttq-bio-link {
  min-height: 62px;
  justify-content: flex-start;
  text-align: left;
  padding: 16px 22px;
  font-family: var(--font-title);
  font-size: 17px;
  line-height: 1;
  letter-spacing: .06em;
}

.ttq-bio-link .lt {
  width: 31px;
  height: 31px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.09);
  font-family: var(--font-body);
  font-size: 14px;
}

.ttq-bio-link .mark {
  font-size: 20px;
  opacity: .85;
}

.ttq-bio-fine {
  margin-top: 24px;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .ttq-bio-page { padding-top: 38px; }
  .ttq-bio-link { font-size: 15px; padding-inline: 18px; }
}

/* TTQ links mobile width correction. */
.ttq-bio-title span {
  display: block;
}

@media (max-width: 640px) {
  .ttq-bio-shell {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  .ttq-bio-title {
    font-size: clamp(34px, 11vw, 44px);
  }

  .ttq-bio-link {
    width: 100%;
    max-width: 100%;
  }
}

/* TTQ links final mobile overflow guard. */
@media (max-width: 640px) {
  html,
  body,
  #brx-content,
  .brxe-html,
  .ttq-bio-page {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .ttq-bio-page {
    width: 100vw;
    padding-left: 16px;
    padding-right: 16px;
  }

  .ttq-bio-shell {
    width: min(100%, 342px);
    max-width: 342px;
  }

  .ttq-bio-intro {
    max-width: 318px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* TTQ links narrow phone button fit. */
@media (max-width: 430px) {
  .ttq-bio-links,
  .ttq-bio-intro,
  .ttq-bio-fine {
    width: min(100%, 310px);
    max-width: 310px;
    margin-left: auto;
    margin-right: auto;
  }
}