@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=Spectral:wght@600&family=Cinzel:wght@600&family=Space+Grotesk:wght@600&family=IM+Fell+English&family=EB+Garamond:wght@600&display=swap");

/* Per-genre DISPLAY faces (IN-0538). Previously --g-serif pointed at system stacks the
   funnel never loaded — horror got "Times New Roman" (the browser default, faux-bolded),
   thriller "Arial Narrow" (absent on iOS/Android), historical "Hoefler Text" (Mac only) —
   so on Windows/Android seven genres collapsed to about three faces, two of them defaults.
   These six are loaded above at ONE weight each, display=swap, and every stack keeps its
   old fallback so a failed font can never leave a page unstyled. Headings only. */
/* ==========================================================================
   BAP GENRE LOOK-AND-FEEL — PP-4277 (presentation layer ONLY)
   Source of truth for tokens: the PP-4119 front door (:root[data-genre] set).
   How it works: a page opts in by linking this file; nothing changes until
   html carries data-genre="<family>". romance (or no attribute, or an unknown
   value) = the page renders EXACTLY as before — every mapping has the page's
   original value as its var() fallback.
   HARD CONSTRAINT (PP-4116/PP-4277): never read genre inside the engine or
   grader. This file must never carry logic — colors, fonts, texture only.
   ========================================================================== */

/* ---------- per-genre token set (lifted from the front door) ---------- */
html[data-genre="thriller"]{
  --g-accent:#e23b3b;--g-accent-dk:#c22a2a;--g-accent2:#5b7a99;--g-kicker:#ffd2d2;
  --g-bg:#f4f6f9;--g-serif:"Oswald","Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --g-grain:repeating-linear-gradient(90deg,rgba(91,122,153,.06) 0 1px,transparent 1px 96px);--g-grain-size:auto;
}
html[data-genre="mystery"]{
  --g-accent:#1f8a80;--g-accent-dk:#166b63;--g-accent2:#d9a72b;--g-kicker:#cfeee9;
  --g-bg:#faf5ea;--g-serif:"Spectral",Georgia,"Times New Roman",serif;
  --g-grain:radial-gradient(rgba(31,138,128,.06) 1px,transparent 1.6px);--g-grain-size:22px 22px;
}
html[data-genre="fantasy"]{
  --g-accent:#7c4dff;--g-accent-dk:#5f34d6;--g-accent2:#d4af37;--g-kicker:#efdca6;
  --g-bg:#f7f4fc;--g-serif:"Cinzel","Cormorant Garamond","Playfair Display",Georgia,serif;
  --g-grain:radial-gradient(circle at 26% 18%,rgba(212,175,55,.10),transparent 58%),radial-gradient(circle at 82% 72%,rgba(124,77,255,.09),transparent 55%);--g-grain-size:cover;
}
html[data-genre="scifi"]{
  --g-accent:#0fb9d8;--g-accent-dk:#0a94ad;--g-accent2:#7b8794;--g-kicker:#b8f1fb;
  --g-bg:#eef3f7;--g-serif:"Space Grotesk",ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --g-grain:repeating-linear-gradient(0deg,rgba(15,185,216,.045) 0 2px,transparent 2px 4px);--g-grain-size:auto;
}
html[data-genre="horror"]{
  --g-accent:#b3122b;--g-accent-dk:#8d0d21;--g-accent2:#d98a1f;--g-kicker:#e7aeae;
  --g-bg:#f5f3f2;--g-serif:"Im Fell English","IM FELL English","Times New Roman",Times,Georgia,serif;
  --g-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");--g-grain-size:160px 160px;
}
html[data-genre="historical"],html[data-genre="historical_fiction"]{
  --g-accent:#7b2d26;--g-accent-dk:#5e211c;--g-accent2:#a97442;--g-kicker:#e8c9a0;
  --g-bg:#f7efe0;--g-serif:"EB Garamond","Hoefler Text",Baskerville,Georgia,"Times New Roman",serif;
  --g-grain:radial-gradient(circle at 50% 40%,rgba(169,116,66,.08),transparent 70%);--g-grain-size:cover;
}

/* ---------- re-point each funnel page's own tokens ----------
   Grouped per themed genre; every mapping falls back to the page's original
   value, so an unthemed/unknown genre can never break a page. */
html[data-genre="thriller"],html[data-genre="mystery"],html[data-genre="fantasy"],
html[data-genre="scifi"],html[data-genre="horror"],
html[data-genre="historical"],html[data-genre="historical_fiction"]{
  /* bap-intake (pp-brand tokens) */
  --pp-coral:var(--g-accent,#E85D75);
  --pp-coral-ink:var(--g-accent-dk,#B8384F);
  --pp-coral-tint:color-mix(in srgb,var(--g-accent,#E85D75) 10%,#fff);
  --pp-grad-warm:linear-gradient(135deg,var(--g-accent,#E85D75),var(--g-accent2,#F2A65A));
  --pp-serif:var(--g-serif,'Cormorant Garamond',Georgia,serif);
  --pp-cream:var(--g-bg,#FBF7F1);
  /* bap-compose tokens */
  --crimson:var(--g-accent,#E85D75);
  --crimson-bright:var(--g-accent,#E85D75);
  --gold:var(--g-accent,#E85D75);
  --gold-bright:var(--g-kicker,#F5BE94);
  --cream:var(--g-bg,#FBF7F1);
  --serif:var(--g-serif,'Fraunces',Georgia,serif);
  /* bap-delivery tokens (its hero band reads --grad) */
  --purple:var(--g-accent-dk,#6B4286);
  --violet:var(--g-accent-dk,#4C1D95);
  --grad:linear-gradient(135deg,var(--g-accent-dk,#2D1845),var(--g-accent,#4C1D95));
  --gold2:var(--g-kicker,#e6cd86);
}

/* genre texture on the light body (Gary legibility rule: bg stays light) */
html[data-genre="thriller"] body,html[data-genre="mystery"] body,html[data-genre="fantasy"] body,
html[data-genre="scifi"] body,html[data-genre="horror"] body,
html[data-genre="historical"] body,html[data-genre="historical_fiction"] body{
  background-image:var(--g-grain,none);
  background-size:var(--g-grain-size,auto);
  background-attachment:fixed;
}

/* bap-compose's page header hard-codes the brand gradient — repaint it */
/* The composer's and delivery's own page headers. These used to be repainted with a
   flat two-stop accent gradient — a coloured bar. They now carry the SAME per-genre
   photograph as the front door and the intake hero, so the genre feeling does not
   drop out the moment the author moves from the sales page into the product. */
html[data-genre] header:not(.bap-hero),
html[data-genre] .hero{
  background-image:
    linear-gradient(180deg,rgba(8,6,12,.80) 0%,rgba(8,6,12,.62) 50%,rgba(8,6,12,.90) 100%),
    var(--g-hero,none);
  background-size:cover;
  background-position:center 38%;
  color:#fff;
}
html[data-genre] header:not(.bap-hero) h1,
html[data-genre] header:not(.bap-hero) h2,
html[data-genre] .hero h1{color:#fff;font-family:var(--g-serif,'Fraunces',Georgia,serif)}
html[data-genre] header:not(.bap-hero) p,
html[data-genre] .hero .sub{color:rgba(255,255,255,.88)}
html[data-genre] header:not(.bap-hero) .brand{color:rgba(255,255,255,.94)}

/* ==========================================================================
   IN-0526 — close the continuity gap.
   The chain used to break at checkout: bap-checkout, bap-app, bap-topup,
   bap-recover and bap-sales never linked this file, so an author who picked
   Fantasy at the front door hit a romance-pink payment page. These blocks
   re-point the tokens those pages actually declare.
   Same contract as above: accents and type only, every mapping keeps the page's
   original value as its var() fallback, and INK/PAPER are deliberately left
   alone so text contrast can never regress.
   ========================================================================== */

/* romance = the house look. Declared explicitly (rather than left to var()
   fallbacks) so any component reading --g-accent gets a real value when the
   author's genre IS romance, instead of silently falling back per-property. */
html[data-genre="romance"]{
  --g-accent:#E85D75;--g-accent-dk:#B8384F;--g-accent2:#F2A65A;--g-kicker:#F5BE94;
  --g-bg:#FBF7F1;--g-serif:'Cormorant Garamond',Georgia,serif;
  --g-grain:none;--g-grain-size:auto;
}

html[data-genre="romance"],
html[data-genre="thriller"],html[data-genre="mystery"],html[data-genre="fantasy"],
html[data-genre="scifi"],html[data-genre="horror"],
html[data-genre="historical"],html[data-genre="historical_fiction"]{
  /* bap-checkout — its own token names. --ink/--card/--line untouched. */
  --gold:var(--g-accent,#C9A227);
  /* --gold2 is a WARM SECONDARY on delivery (gold kicker + italic headline), not a dark
     accent. Mapping it to --g-accent-dk turned delivery's gold into the same purple as
     the hero gradient behind it. --g-accent2 is the genre's secondary and keeps it warm. */
  --gold2:var(--g-accent2,#96751B);
  --crimson2:var(--g-accent-dk,#B8384F);
  --bg:var(--g-bg,#FBF7F1);

  /* bap-app — accents only; --paper/--cream/--surface are left alone because
     that page has a prefers-color-scheme:dark block and repointing its
     surfaces to a light genre background would blow out dark mode. */
  --crimson:var(--g-accent,#8b1a1a);
  --crimson-bright:var(--g-accent,#b23030);
  --crimson-deep:var(--g-accent-dk,#5c0f0f);
  --gold-bright:var(--g-accent2,#e0ac4a);
}

/* NOTE: no --serif override here. checkout/compose <link> only Fraunces+Inter, so pointing
   --serif at a per-genre stack made them fall back to Georgia/Times — a downgrade, not a
   theme. Per-genre display faces need those fonts actually loaded first (open question). */

/* The genre badge the funnel shows so the author can SEE we kept their pick. */
.bap-genre-chip{
  display:inline-flex;align-items:center;gap:7px;
  font:700 11.5px/1 system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:.15em;text-transform:uppercase;
  color:#fff;background:var(--g-chip,var(--g-accent-dk,#B8384F));
  padding:6px 11px;border-radius:999px;vertical-align:middle;
}
/* White on --g-accent measured 2.35:1 (scifi), 3.36 (romance), 4.20 (mystery), 4.27 (thriller)
   — all under the 4.5:1 needed for this size. --g-accent-dk clears it everywhere except scifi
   (3.59), so scifi gets a darkened cyan used ONLY behind white text (5.2:1); the bright cyan
   stays the brand accent everywhere else. */
html[data-genre="scifi"]{--g-chip:#07778c;}

/* Cards in the staged reading view. Styles live here (not inline) so the JS can
   build the DOM once and patch it, instead of re-writing innerHTML every second —
   which is what stopped these transitions from ever firing. */
.bapr-card{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border-radius:14px;
  border:1px solid rgba(0,0,0,.09);background:rgba(0,0,0,.015);margin-bottom:10px;
  transition:border-color .45s ease,background .45s ease}
/* Pending cards are dimmed with COLOUR, not opacity. opacity:.62 dropped the body text to
   2.54:1 and the step numeral to 1.88:1 — and most cards are pending for most of the wait,
   so that was the majority state of the screen. */
.bapr-card .bapr-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font:700 13px/1 system-ui;background:rgba(0,0,0,.10);
  color:#544c44;transition:background .45s ease,color .45s ease}
.bapr-card .bapr-txt{min-width:0}
.bapr-card .bapr-t{font:700 14.5px/1.35 system-ui,-apple-system,sans-serif;margin-bottom:3px}
.bapr-card .bapr-b{font:400 13.5px/1.55 system-ui,-apple-system,sans-serif;color:#5d5349}
.bapr-card .bapr-b img{width:44px;height:44px;border-radius:10px;object-fit:cover;
  border:1px solid rgba(0,0,0,.1);margin-right:7px}
.bapr-card.is-in{opacity:1;border-color:var(--g-accent,#e0684f);
  background:color-mix(in srgb,var(--g-accent,#e0684f) 5%,#fff);
  animation:bapr-in .5s cubic-bezier(.2,.8,.2,1) both}
.bapr-card.is-in .bapr-ic{background:var(--g-accent,#e0684f);color:#fff}
@keyframes bapr-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bapr-card.is-in{animation:none}
  #bap-notice{transition:none!important}
  /* the composer's spinner/pulse ran for the full 3-8 minute wait (WCAG 2.3.3) */
  .analyzing .spinner,.dot{animation:none!important}
}

/* Keyboard focus. The intake's published/pre-launch choice hides its radio
   (opacity:0;width:0) and styled only :hover and :checked — so a keyboard user
   could select it but could not see where they were (WCAG 2.4.7). */
.pathopt:has(input:focus-visible),
.pathopt input:focus-visible + *{outline:3px solid var(--g-accent,#E85D75);outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--g-accent,#E85D75);outline-offset:2px}

/* --------------------------------------------------------------------------
   IN-0537 accessibility remediation (measured on the live funnel).
   -------------------------------------------------------------------------- */

/* Primary CTA. White 15.5px/700 sat on --pp-grad-warm, which ramps accent -> accent2:
   measured 6.91:1 falling to 2.76:1 (horror), 4.81 -> 2.10 (fantasy), -> 2.02 (romance).
   The right-hand half of "Read my book" was under half the required ratio in EVERY genre.
   Buttons now ramp between two dark stops, so both ends clear 4.5:1 and the button keeps
   its depth. --g-chip is the AA-safe per-genre dark (accent-dk, with scifi darkened). */
html[data-genre] .btn,
html[data-genre] .pp-btn,
html[data-genre] button.btn{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--g-chip,var(--g-accent-dk,#B8384F)) 84%,#000),
    var(--g-chip,var(--g-accent-dk,#B8384F)));
}

/* Footer contact link measured 156x16 at 375px — under even the 24x24 AA floor (2.5.8),
   and it is the only support route in the funnel. */
footer a{display:inline-block;padding:5px 2px;min-height:24px}

/* --------------------------------------------------------------------------
   IN-0538 — give each genre real PAPER and INK, not just an accent.
   Before this, every genre sat on a near-white page (1.07-1.14:1 vs white) and
   --ink/--line were deliberately frozen, so a horror page rendered romance-plum
   #2D1845 text over romance-pink #efe6e0 rules: a horror page and a fantasy page
   differed only in hue. Every pair below is >= 14:1 ink-on-paper (measured), so
   this raises distinctiveness without ever lowering text contrast.

   Scoped to the LIGHT scheme on purpose: bap-app (and any page with its own
   prefers-color-scheme:dark block) declares --ink/--paper at :root, and
   html[data-genre] outranks :root — so applying these unconditionally would win
   over that page's dark-mode override and leave dark ink on a dark surface.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference){
  html[data-genre="romance"]           {--g-paper:#FBF7F1;--g-ink:#2D1845;--g-rule:#efe6e0}
  html[data-genre="thriller"]          {--g-paper:#e9edf3;--g-ink:#101822;--g-rule:#ccd5e0}
  html[data-genre="mystery"]           {--g-paper:#f6efdf;--g-ink:#14201e;--g-rule:#ded2b8}
  html[data-genre="fantasy"]           {--g-paper:#f2edfa;--g-ink:#221540;--g-rule:#ddd0ee}
  html[data-genre="scifi"]             {--g-paper:#e8eef3;--g-ink:#0d1a20;--g-rule:#c9d6de}
  html[data-genre="horror"]            {--g-paper:#ece8e6;--g-ink:#14100f;--g-rule:#d8cfcb}
  html[data-genre="historical"],
  html[data-genre="historical_fiction"]{--g-paper:#f4e9d5;--g-ink:#241a10;--g-rule:#ddc9a8}

  html[data-genre="thriller"],html[data-genre="mystery"],html[data-genre="fantasy"],
  html[data-genre="scifi"],html[data-genre="horror"],
  html[data-genre="historical"],html[data-genre="historical_fiction"]{
    /* pp-brand pages: intake, sales, topup, recover */
    --pp-ink:var(--g-ink,#2D1845);
    --pp-cream:var(--g-paper,#FBF7F1);
    --pp-line:var(--g-rule,#efe6e0);
    --pp-line-2:var(--g-rule,#eadfe6);
    /* bap-compose / bap-checkout own token names */
    --ink:var(--g-ink,#2D1845);
    --cream:var(--g-paper,#FBF7F1);
    --bg:var(--g-paper,#FBF7F1);
    --line:var(--g-rule,#efe6e0);
  }
}

/* ==========================================================================
   THE GENRE HERO — carry the front door's "wow" through the whole funnel.
   The home page sells each genre with a full-bleed cinematic photo, a dark
   scrim and white type. Every page after it was a flat cream form, so the
   feeling died at the first click. These are the SAME seven images, lifted out
   of the front door (they were inline base64, so nothing else could use them)
   and served from R2.
   ========================================================================== */
html[data-genre="romance"]   {--g-hero:url("https://bookadpack.com/classroom/bap_hero_romance.jpg")}
html[data-genre="thriller"]  {--g-hero:url("https://bookadpack.com/classroom/bap_hero_thriller.jpg")}
html[data-genre="mystery"]   {--g-hero:url("https://bookadpack.com/classroom/bap_hero_mystery.jpg")}
html[data-genre="fantasy"]   {--g-hero:url("https://bookadpack.com/classroom/bap_hero_fantasy.jpg")}
html[data-genre="scifi"]     {--g-hero:url("https://bookadpack.com/classroom/bap_hero_scifi.jpg")}
html[data-genre="horror"]    {--g-hero:url("https://bookadpack.com/classroom/bap_hero_horror.jpg")}
html[data-genre="historical"],
html[data-genre="historical_fiction"]{--g-hero:url("https://bookadpack.com/classroom/bap_hero_historical.jpg")}

/* PP-4440 — an author who arrives WITHOUT a genre must get the house look, not a
   void. With no ?genre= and nothing stored, bap-funnel.js sets no data-genre, so
   --g-hero was undefined and the rule below painted its dark scrim over `none`:
   a black band where the cinematic photograph belongs. That is the "plain,
   non-genre" intake Gary reported. This file's own contract (line 13) already
   promised the romance house look in that case; declare it at html specificity so
   every html[data-genre="x"] rule above still outranks it and a real pick wins. */
html{--g-hero:url("https://bookadpack.com/classroom/bap_hero_romance.jpg")}

html[data-genre] .bap-hero,.bap-hero{
  position:relative;
  background-image:
    linear-gradient(180deg,rgba(8,6,12,.78) 0%,rgba(8,6,12,.55) 45%,rgba(8,6,12,.88) 100%),
    var(--g-hero,none);
  background-size:cover;background-position:center 38%;
  color:#fff;
  padding:0 0 34px;
  /* the genre's own display face, so the feeling starts at the very first line */
  font-family:var(--g-serif,'Fraunces',Georgia,serif);
}
.bap-hero .bap-hero-in{max-width:1080px;margin:0 auto;padding:0 22px}
.bap-hero h1,.bap-hero h2{color:#fff;font-family:var(--g-serif,'Fraunces',Georgia,serif)}
.bap-hero p{color:rgba(255,255,255,.88)}
.bap-hero a{color:#fff}
.bap-hero .kick,.bap-hero .kicker{color:var(--g-kicker,#F5BE94)}
.bap-hero .kick::before{background:var(--g-kicker,#F5BE94)}

/* the brand lockup, exactly as the home page presents it: the icon plus the
   BookAdPack wordmark in white — not an invented icon+grey-text pairing */
.bap-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:#fff;font-family:'DM Sans',Inter,system-ui,-apple-system,sans-serif;
  font-weight:800;font-size:16px;letter-spacing:.01em;
  text-shadow:0 1px 10px rgba(0,0,0,.45)}
.bap-brand img{height:40px;width:auto;border-radius:999px;background:#fdf7f4;padding:5px 13px;box-shadow:0 2px 10px rgba(0,0,0,.22);display:block}
@media(max-width:560px){.bap-brand img{height:30px;padding:4px 10px}}
.bap-brandbar{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 0 26px}
.bap-brandbar .bap-cta{display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff;font:600 13.5px/1 'DM Sans',Inter,system-ui,sans-serif;
  padding:10px 15px;border-radius:999px;text-decoration:none;backdrop-filter:blur(6px)}
.bap-brandbar .bap-cta:hover{background:rgba(255,255,255,.22)}
@media(max-width:560px){.bap-hero{padding-bottom:26px}.bap-brandbar{padding:13px 0 20px}}


/* Gary: "if you use a font for a genre, use it all the way through that genre's pages
   so they never lose their genre feeling." Every heading on a themed page now sets in
   that genre's display face — headings only, so body copy stays in the funnel's sans
   and long-form reading is unaffected. */
html[data-genre="thriller"] h1,html[data-genre="thriller"] h2,html[data-genre="thriller"] h3,
html[data-genre="mystery"] h1,html[data-genre="mystery"] h2,html[data-genre="mystery"] h3,
html[data-genre="fantasy"] h1,html[data-genre="fantasy"] h2,html[data-genre="fantasy"] h3,
html[data-genre="scifi"] h1,html[data-genre="scifi"] h2,html[data-genre="scifi"] h3,
html[data-genre="horror"] h1,html[data-genre="horror"] h2,html[data-genre="horror"] h3,
html[data-genre="historical"] h1,html[data-genre="historical"] h2,html[data-genre="historical"] h3,
html[data-genre="historical_fiction"] h1,html[data-genre="historical_fiction"] h2,
html[data-genre="historical_fiction"] h3,
html[data-genre] .serif,html[data-genre] .bapr-t{
  font-family:var(--g-serif,'Fraunces',Georgia,serif);
}

/* The composer's confirm button hardcodes linear-gradient(135deg,#E85D75,#F5B93B) —
   romance pink to gold — so the theme could not reach it and it read as a washed-out
   peach slab next to the genre's own crimson pay buttons. Same AA-safe dark ramp as
   every other primary action. */
html[data-genre] .cta,
html[data-genre] button.cta{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--g-chip,var(--g-accent-dk,#B8384F)) 84%,#000),
    var(--g-chip,var(--g-accent-dk,#B8384F)));
  color:#fff;
}


/* ==========================================================================
   PP-4440 — THE FUNNEL WEARS THE SITE'S FORMAT STANDARD.

   Gary, 2026-08-25: amazon-a-plus-content-design.html is the standard — the
   transparent BookAdPack lockup, on paper, at its own size, with nothing behind
   it. The funnel did not match it anywhere:

     - bap-intake hung the lockup inside a cream PILL (.bap-brand img: 40px,
       border-radius 999px, background #fdf7f4, drop shadow) over the hero. That
       pill entered src through an out-of-band edit adopted by IN-0801 (2a66b02),
       which replaced a 26x26 icon rule with a tile. PP-4393 then swapped the
       <img src> to the transparent lockup on four pages and byte-verified the
       src — but not the CSS the lockup lands in, so the badge PP-4393 set out to
       remove survived, now wrapped around the lockup itself.
     - bap-compose and bap-checkout carried NO lockup at all: a fixed purple
       "back" chip and nothing else. Three steps of one funnel, three chromes.

   One bar, defined once, used by intake + compose + checkout. Genre-aware: it
   sits on the genre's paper and rule, and carries the genre chip, so the pick
   the author made at the front door is visible on every step to checkout.
   Presentation only — the PP-4116/PP-4277 constraint still holds.
   ========================================================================== */
.bap-funnelbar{position:sticky;top:0;z-index:60;
  background:var(--g-paper,#FBF7F1);
  border-bottom:1px solid var(--g-rule,#eadfce)}
.bap-funnelbar .bap-funnelbar-in{max-width:1080px;margin:0 auto;padding:0 22px;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.bap-funnelbar .bap-lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
/* the lockup is transparent art: no tile, no pill, no shadow, ever. Every
   property the pill rule sets is reset here explicitly so no page-level or
   inherited .bap-brand rule can put the badge back. */
.bap-funnelbar .bap-lockup img{height:32px;width:auto;display:block;
  background:none;border-radius:0;padding:0;box-shadow:none}
@media(max-width:560px){.bap-funnelbar .bap-lockup img{height:26px}}
.bap-funnelbar .bap-navlinks{display:flex;align-items:center;gap:18px;font-size:14px}
.bap-funnelbar .bap-navlinks a{text-decoration:none;color:var(--g-ink,#2D1845);opacity:.7;white-space:nowrap}
.bap-funnelbar .bap-navlinks a:hover{opacity:1}
.bap-funnelbar .bap-navlinks a.bap-navcta{display:inline-flex;align-items:center;gap:7px;opacity:1;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--g-chip,var(--g-accent-dk,#B8384F)) 84%,#000),
    var(--g-chip,var(--g-accent-dk,#B8384F)));
  color:#fff;font-weight:600;font-size:13px;padding:9px 18px;border-radius:999px}
.bap-funnelbar .bap-navlinks a.bap-navcta:hover{opacity:1;filter:brightness(1.08)}
.bap-funnelbar .bap-genre-chip{margin-left:2px}
@media(max-width:700px){.bap-funnelbar .bap-navlinks a:not(.bap-navcta){display:none}
  .bap-funnelbar .bap-funnelbar-in{height:54px;padding:0 14px}}

/* The hero's top padding used to come from .bap-brandbar (padding:16px 0 26px),
   which held the lockup. With the lockup moved into the funnel bar, the hero
   needs its own or the kicker sits flush against the bar. */
.bap-funnelbar + .bap-hero{padding-top:34px}
@media(max-width:560px){.bap-funnelbar + .bap-hero{padding-top:22px}}