/* HookGenius Learn and guide pages in the Studio's look (2026-10-22, queue "Site look 4").
 *
 * Loaded LAST on every page that links learn-editorial.css, so one file restyles all of them. It is the Studio's dark
 * theme (Night, utils/studioThemes.ts) on every device, not the light/dark-by-device of hg-studio.css: these pages carry
 * about 14,000 inline colours written for a dark ground, and a light ground would put that text on cream. The inline
 * backgrounds, buttons and pills that recur on hundreds of pages are re-coloured by attribute selector below; the
 * selectors start at `html body` because several pages define the same components in <style> blocks inside <body>,
 * which come after this file. No markup or copy changes. */

:root {
  --s-bg:#0F0F10; --s-panel:#171718; --s-card:#202022; --s-ink:#F6F3EC; --s-muted:#B8B2A7; --s-line:#000;
  --s-chorus:#FF2E88; --s-verse:#35B6F5; --s-lift:#FFC800; --s-bridge:#FF7A3D; --s-bookend:#A99BFF; --s-inst:#7BD94A;
  --s-on:#0E0E0E; --s-strip:linear-gradient(90deg,#35B6F5 0 20%,#FFC800 20% 40%,#FF2E88 40% 60%,#FF7A3D 60% 80%,#7BD94A 80%);
  --s-go:linear-gradient(100deg,#FF7A3D,#FF2E88);
  color-scheme:dark;
}
html, html body { background:var(--s-bg) !important; }
html body { color:var(--s-ink); font-family:Inter, system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing:antialiased; }
html body h1, html body h2, html body h3, html body h4,
html body [style*="Playfair"], html body [style*="Georgia"] {
  font-family:'Bricolage Grotesque', Inter, sans-serif !important; letter-spacing:-0.015em !important;
}
html body h2 { font-weight:800; }
html body p, html body li { color:inherit; }
html body .container a:not([class]):not([style]), html body main a:not([class]):not([style]) {
  color:var(--s-verse); text-decoration:underline; text-underline-offset:3px;
}
html body a:focus-visible, html body button:focus-visible { outline:3px solid var(--s-verse) !important; outline-offset:3px; }

/* Masthead: the Studio's bar — colour strip, word mark, the orange-to-pink button. */
html body .hg-masthead { background:var(--s-bg) !important; border-bottom:2px solid var(--s-line) !important; box-shadow:none !important; backdrop-filter:none !important; padding-top:5px; }
html body .hg-masthead::before { content:''; position:absolute; left:0; right:0; top:0; height:5px; background:var(--s-strip); }
html body .hg-masthead__name { font-family:'Bricolage Grotesque', Inter, sans-serif !important; font-weight:800 !important; font-size:1.3rem !important; color:var(--s-ink) !important; letter-spacing:-0.01em !important; }
html body .hg-masthead__version { color:var(--s-muted) !important; border-color:transparent !important; background:none !important; }
html body .hg-masthead__cta {
  background:var(--s-go) !important; color:var(--s-on) !important; border:2px solid var(--s-line) !important;
  border-radius:12px !important; box-shadow:3px 3px 0 var(--s-line) !important; font-weight:800 !important;
}
html body .hg-masthead__cta * { color:var(--s-on) !important; }

/* Hero: a plain band in place of the painted photograph; the headline carries it. */
html body .hg-hero > picture, html body .hg-hero__img { display:none !important; }
html body .hg-hero::after, html body .hg-hero::before { display:none !important; }
html body .hg-hero { background:var(--s-bg) !important; min-height:0 !important; height:auto !important; border-bottom:2px solid var(--s-line); }
html body .hg-hero__inner { padding-top:2.25rem !important; padding-bottom:2.25rem !important; }
html body .hg-hero h1, html body .hg-hero__title { color:var(--s-ink) !important; font-weight:800 !important; text-shadow:none !important; }
html body .hg-hero__eyebrow {
  display:inline-block !important; color:var(--s-on) !important; background:var(--s-inst); border:2px solid var(--s-line);
  border-radius:999px; padding:.2rem .7rem; box-shadow:3px 3px 0 var(--s-line); text-transform:none !important;
  letter-spacing:0 !important; font-size:.85rem !important; font-weight:700 !important;
}
html body .hg-hero__eyebrow::before { display:none !important; }
html body .hg-hero__back { color:var(--s-muted) !important; }
html body .hg-hero__sub { color:var(--s-muted) !important; }

/* Cards and panels that pages draw with inline navy: the Studio's neutral card, ink edge and hard shadow. */
html body [style*="radial-gradient(130% 130% at 0% 0%,#1b2434"],
html body [style*="background:#0f172a"], html body [style*="background:#1e293b"], html body [style*="background:#020617"],
html body [style*="background:rgba(30,41,59,0.35)"], html body [style*="background:rgba(39,39,42,0.6)"] {
  background:var(--s-card) !important;
}
html body [data-guide-card] { background:none !important; padding:0 !important; box-shadow:none !important; }
html body [data-guide-card] > div[style*="border-radius:20px"] {
  border:2px solid var(--s-line); border-top:10px solid var(--s-lift); box-shadow:6px 6px 0 var(--s-line) !important;
}
html body [style*="border:1px solid rgba(255,255,255,0.08)"], html body [style*="border:1px solid rgba(82,82,91"],
html body [style*="border:1px solid rgba(148,163,184,0.26)"], html body [style*="border:1px solid rgba(255,255,255,0.07)"] {
  border-color:#000 !important;
}

/* Buttons and pills drawn inline: amber becomes the Studio's yellow, indigo becomes its orange-to-pink. */
html body [style*="linear-gradient(135deg,#fde68a,#f59e0b)"], html body [style*="background:#f59e0b"] {
  background:var(--s-lift) !important; color:var(--s-on) !important; border:2px solid var(--s-line) !important;
  box-shadow:3px 3px 0 var(--s-line) !important; letter-spacing:0 !important; text-transform:none !important;
}
html body [style*="linear-gradient(135deg,#6366f1,#4f46e5)"], html body [style*="linear-gradient(135deg,#4f46e5,#6366f1)"],
html body [style*="linear-gradient(135deg,rgba(99,102,241,0.95)"], html body [style*="linear-gradient(135deg,#0e7490,#1d4ed8)"],
html body [style*="linear-gradient(135deg,#ff2d75,#8b5cf6)"], html body [style*="background:#6366f1"] {
  background:var(--s-go) !important; color:var(--s-on) !important; border:2px solid var(--s-line) !important;
  box-shadow:3px 3px 0 var(--s-line) !important;
}
html body [style*="linear-gradient(135deg,#6366f1,#4f46e5)"] *, html body [style*="linear-gradient(135deg,#4f46e5,#6366f1)"] *,
html body [style*="linear-gradient(135deg,#fde68a,#f59e0b)"] * { color:var(--s-on) !important; }
html body [style*="color:#fcd34d"] { color:var(--s-lift) !important; }
html body [style*="color:#6366f1"], html body [style*="color:#818cf8"], html body [style*="color:#a5b4fc"], html body [style*="color:#c4b5fd"] { color:var(--s-bookend) !important; }
html body [style*="color:#67e8f9"] { color:var(--s-verse) !important; }

/* The shared reading components (learn.css). */
html body .definition, html body .template, html body .faq-item, html body .related, html body .tg-reference {
  background:var(--s-card) !important; border:2px solid var(--s-line) !important; border-radius:16px !important;
  box-shadow:5px 5px 0 var(--s-line) !important;
}
html body .definition { border-left:10px solid var(--s-chorus) !important; }
html body .template pre, html body pre, html body code { background:var(--s-panel) !important; color:var(--s-ink) !important; }
html body .template-label { color:var(--s-lift) !important; }
html body table, html body .fix-table, html body .tg-table { border-collapse:collapse; border:2px solid var(--s-line) !important; background:var(--s-card); }
html body th { background:var(--s-panel) !important; color:var(--s-ink) !important; border-color:#000 !important; }
html body td { border-color:#2a2a2d !important; }
html body .cta { background:var(--s-card) !important; border:2px solid var(--s-line) !important; border-radius:18px !important; box-shadow:6px 6px 0 var(--s-line) !important; }
html body .cta::before { display:none !important; }
html body .cta a, html body .hg-cta-btn {
  background:var(--s-go) !important; color:var(--s-on) !important; border:2px solid var(--s-line) !important;
  border-radius:14px !important; box-shadow:4px 4px 0 var(--s-line) !important; font-weight:800 !important;
}
html body .cta a::after { display:none !important; }

/* The bottom bar every page carries. */
html body .hg-sticky-cta { background:var(--s-card) !important; color:var(--s-ink) !important; border-top:2px solid var(--s-line); box-shadow:none !important; }
html body .hg-sticky-cta__title { font-family:'Bricolage Grotesque', Inter, sans-serif; font-weight:800 !important; font-size:1rem !important; }
html body .hg-sticky-cta__sub { color:var(--s-muted) !important; }
html body .hg-sticky-cta__btn { background:var(--s-go) !important; color:var(--s-on) !important; border:2px solid var(--s-line) !important; border-radius:12px !important; box-shadow:3px 3px 0 var(--s-line) !important; font-weight:800 !important; }
html body .hg-sticky-cta__close { color:var(--s-muted) !important; }

@media (prefers-reduced-motion:reduce) { html body .hg-sticky-cta { transition:none !important; } }

/* Small letter-spaced capitals (inline labels, nav links) read in sentence case, as everywhere in the Studio. */
html body [style*="text-transform:uppercase"], html body [style*="text-transform: uppercase"] { text-transform:none !important; letter-spacing:0 !important; }
html body .hg-masthead__cta-credits, html body .hg-masthead__cta-dot, html body .hg-masthead__cta-arrow { color:var(--s-on) !important; }
html body [style*="background:#67e8f9"] { background:var(--s-go) !important; color:var(--s-on) !important; border:2px solid var(--s-line); box-shadow:3px 3px 0 var(--s-line); }

/* Tables: no navy rows. */
html body td, html body .fix-table td { background:var(--s-card) !important; }
html body tr:nth-child(even) td { background:#1A1A1C !important; }

/* The editorial hero on 60 pages (hg-hero-ed): a Studio card in place of the artwork, scrim and neon. */
html body .hg-hero-ed { background:var(--s-card) !important; border:2px solid var(--s-line); box-shadow:6px 6px 0 var(--s-line); color:var(--s-ink) !important; font-family:Inter, system-ui, sans-serif !important; }
html body .hg-hero-ed__media { min-height:0 !important; }
html body .hg-hero-ed__media > img, html body .hg-hero-ed__scrim { display:none !important; }
html body .hg-hero-ed__eyebrow { background:var(--s-chorus) !important; color:var(--s-on) !important; border:2px solid var(--s-line); text-transform:none !important; letter-spacing:0 !important; font-size:.85rem !important; }
html body .hg-hero-ed__h { font-family:'Bricolage Grotesque', Inter, sans-serif !important; text-transform:none !important; color:var(--s-ink) !important; }
html body .hg-hero-ed__sub { color:var(--s-muted) !important; }
html body .hg-hero-ed__pill { background:var(--s-go) !important; color:var(--s-on) !important; border:2px solid var(--s-line); box-shadow:4px 4px 0 var(--s-line) !important; text-transform:none !important; }
html body .hg-hero-ed__mq { background:var(--s-panel) !important; border-top:2px solid var(--s-line); }
html body .hg-hero-ed__mqt span { font-family:'Bricolage Grotesque', Inter, sans-serif !important; text-transform:none !important; color:var(--s-ink) !important; }
html body .hg-hero-ed__mqt em { font-family:'Bricolage Grotesque', Inter, sans-serif !important; text-transform:none !important; color:var(--s-lift) !important; -webkit-text-stroke:0 !important; }

/* The hub's guide lists. */
html body .guide-link { color:var(--s-ink) !important; }
html body .category-grid .guide-link { background:var(--s-card) !important; border:2px solid var(--s-line) !important; border-radius:12px !important; box-shadow:3px 3px 0 var(--s-line); }
html body .category-grid .guide-link:hover { border-color:var(--s-verse) !important; }
html body [style*="linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)"] { background:var(--s-card) !important; border:2px solid var(--s-line) !important; border-left:10px solid var(--s-verse) !important; box-shadow:5px 5px 0 var(--s-line); }
html body [style*="linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)"] .guide-link { background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; }

/* The guide sales pages (/guide/*) style their own display type and labels in-page; bring them into the Studio's type. */
html body :is(.num, .toc-num, .pullquote, .signoff, .cs-card h3, .cs-card .vol, .midpage-cta-h, .sample-chapter-h, .sample-chapter-title, .hero-subtitle, .lede, .scale-stat .num, .hero-v2-credits-num, .price) {
  font-family:'Bricolage Grotesque', Inter, sans-serif !important; font-style:normal !important;
}
html body :is(.eyebrow, .label, .crosssell-eyebrow, .midpage-cta-eyebrow, .sample-chapter-eyebrow, .sample-chapter-label, .hg-sharerow__label, .scale-stat .label, .genre-grid span, .toc-num) {
  text-transform:none !important; letter-spacing:0 !important;
}
html body .hero-v2-stats { background:var(--s-card) !important; border:2px solid var(--s-line) !important; box-shadow:5px 5px 0 var(--s-line); }
html body .hero-v2-stats .stat { border-color:#000 !important; background:transparent !important; }
html body .btn-primary { background:var(--s-go) !important; color:var(--s-on) !important; border:2px solid var(--s-line) !important; box-shadow:4px 4px 0 var(--s-line) !important; }
html body .btn-primary * { color:var(--s-on) !important; }