@font-face{font-family:"Raleway";font-weight:300;font-style:normal;font-display:swap;src:url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/raleway-lightibrpdz.ttf") format("truetype");}
@font-face{font-family:"Raleway";font-weight:400;font-style:normal;font-display:swap;src:url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/raleway-regularm7x3gf.ttf") format("truetype");}
@font-face{font-family:"Raleway";font-weight:400;font-style:italic;font-display:swap;src:url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/raleway-italicvn5fec.ttf") format("truetype");}
@font-face{font-family:"Raleway";font-weight:500;font-style:normal;font-display:swap;src:url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/raleway-mediumed83js.ttf") format("truetype");}
@font-face{font-family:"Raleway";font-weight:600;font-style:normal;font-display:swap;src:url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/raleway-semiboldxom9hu.ttf") format("truetype");}
@font-face{font-family:"Raleway";font-weight:700;font-style:normal;font-display:swap;src:url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/raleway-bold0kysqb.ttf") format("truetype");}
@font-face{font-family:"Raleway";font-weight:800;font-style:normal;font-display:swap;src:url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/raleway-extraboldyuk04p.ttf") format("truetype");}

/* =============================================================
   The Food Phoenix — Colors & Type
   Brand DNA: Rebellious Synthesist. Fire emerging from ash.
   ============================================================= */

/* ---------- Web fonts (all self-hosted from /fonts) ---------- */
@font-face {
  font-family: "Ricko";
  src: url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/root-files/Contrasts%20book%20assets/fonts/Ricko.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
  /* Ricko has rich ligatures — opt-in with `font-feature-settings: "liga", "dlig", "swsh"` on display elements */
}
@font-face {
  font-family: "Craos";
  src: url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/root-files/Contrasts%20book%20assets/fonts/Craos.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
  /* Craos has bold ligatures too — same feature settings recommended */
}
@font-face {
  font-family: "Organic Elements";
  src: url("https://cdn.grigora.app/projects/ca58f8da-c3bd-4e3f-a42c-2f856b942d43/root-files/Contrasts%20book%20assets/fonts/Organic-Elements.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
  /* THE TAGLINE FACE — used exclusively for "NOURISHED AND FLOURISHING" lockup,
     to match the logo's hand-drawn character. */
}




/* Note: 400 (regular) and 600 (semibold) fall back to nearest weight (500 / 800).
   If you need exact 400/600 weights, supply Raleway-Regular.ttf and Raleway-SemiBold.ttf. */

/* Helper: opt into display ligatures on Ricko/Craos */
.ligatures {
  font-feature-settings: "liga" 1, "dlig" 1, "swsh" 1, "calt" 1;
  font-variant-ligatures: discretionary-ligatures;
}

:root {
  /* ============================================================
     COLOUR TOKENS
     "The Fire" (accents) and "The Ashes & Earth" (grounds).
     ============================================================ */

  /* — The Fire — */
  --fp-orange:        #EF8633;  /* Vibrant orange — primary, H1/H2 only on dark grounds.
                                   Contrast on #100B09: 6.7:1 (AA pass at any size; AAA at large sizes 18px+/14px+ bold).
                                   DO NOT use --fp-orange for body text — too light at 16px (AA Large only). */
  --fp-orange-bright: #F59E4A;  /* Hover/lift accent */
  --fp-orange-deep:   #C96A1F;  /* Pressed / muted orange */
  --fp-rose:          #DEA9A4;  /* Soft rose-gold pink — H3-H6, secondary text */
  --fp-rose-soft:     #E8C2BE;  /* Lighter rose for de-emphasis */
  --fp-gold:          #EF8633;  /* Brand gold — sampled from logo. Same hue as --fp-orange; use --fp-gold semantically wherever a heading/border/glow is "the warm brand colour" so it can be retoned in one place if needed. */
  --fp-gold-warm:     #F59E4A;  /* Hover/lift tint for gold */
  --fp-gold-deep:     #C96A1F;  /* Pressed / muted gold */
  --fp-flame-top:     #FFD072;  /* Flame gradient top — paler warm gold */
  --fp-flame-mid:     #EF8633;  /* Flame gradient middle — brand gold/orange */
  --fp-flame-bot:     #E8522E;  /* Flame gradient bottom — warm orange-red. 5.29:1 on base (AA ✓). Replaces the earlier #DD3B30/#A82018 which failed WCAG on dark grounds. */
  --fp-flame: linear-gradient(260deg, #FFE6A8 0%, var(--fp-flame-top) 22%, var(--fp-flame-mid) 55%, #E05030 80%, var(--fp-flame-bot) 100%);
  --fp-mauve:         #8A7A99;  /* Pale mauve — small subheadings, footer category labels. Lifted from #50425D for AA on dark base. */
  --fp-mauve-soft:    #A294B0;  /* Lighter mauve — eyebrows, hover */
  --fp-crimson:       #DD3B30;  /* Deep red — DECORATIVE ONLY: ember glow tint, focus rings, alerts. NEVER as a heading colour. */
  --fp-crimson-glow:  #DD3B30;  /* Same — used in box-shadow blur for fiery glow */
  --fp-ember:         #FFB36A;  /* Highlight / spark; rare use */

  /* — The Ashes & Earth — */
  --fp-base:          #100B09;  /* Primary dark base — near-black, deepest brown */
  --fp-base-purple:   #170A27;  /* Alt deep purple ground */
  --fp-base-brown:    #170A07;  /* Alt deep brown ground */
  --fp-surface-1:     #181210;  /* Card / panel surface (one step up from base) */
  --fp-surface-2:     #211A17;  /* Elevated surface, hover row, input bg */
  --fp-surface-3:     #2B2320;  /* Border / divider on dark, hover surface */
  --fp-hairline:      #3A2F2A;  /* Subtle hairline border */

  /* — Text — */
  --fp-text:          #F5F1EE;  /* Body — warm off-white. 17.7:1 on #100B09 (AAA) */
  --fp-text-muted:    #C9C0BB;  /* De-emphasised. 11.5:1 on #100B09 (AAA) */
  --fp-text-dim:      #948B86;  /* Captions, meta only — 5.4:1 on base, AA Large only.
                                   NEVER use for body copy. */
  --fp-text-on-fire:  #100B09;  /* Text placed atop orange fills */

  /* — Semantic aliases — */
  --fg-1: var(--fp-text);
  --fg-2: var(--fp-text-muted);
  --fg-3: var(--fp-text-dim);
  --fg-accent: var(--fp-orange);
  --fg-accent-2: var(--fp-rose);
  --bg-1: var(--fp-base);
  --bg-2: var(--fp-surface-1);
  --bg-3: var(--fp-surface-2);
  --border: var(--fp-hairline);
  --link: var(--fp-orange);
  --link-hover: var(--fp-orange-bright);
  --focus: var(--fp-crimson);
  --danger: var(--fp-crimson);

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --font-display:  "Ricko", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-heading:  "Craos", "Cinzel", "Trajan Pro", "Cormorant SC", serif;
  --font-body:     "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-tagline:  "Organic Elements", "Ricko", "Cormorant Garamond", serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ============================================================
     TYPE SCALE (modular ~1.25)
     ============================================================ */
  --fs-display: clamp(3.5rem, 6vw + 1rem, 6rem);   /* 56–96px */
  --fs-h1:      clamp(2.5rem, 4vw + 1rem, 4rem);   /* 40–64px */
  --fs-h2:      clamp(2rem, 2.5vw + 1rem, 3rem);   /* 32–48px */
  --fs-h3:      clamp(1.5rem, 1.5vw + 1rem, 2rem); /* 24–32px */
  --fs-h4:      1.375rem;                          /* 22px */
  --fs-h5:      1.125rem;                          /* 18px */
  --fs-h6:      1rem;                              /* 16px */
  --fs-body:    1rem;                              /* 16px */
  --fs-body-lg: 1.125rem;                          /* 18px */
  --fs-small:   0.875rem;                          /* 14px */
  --fs-tiny:    0.75rem;                           /* 12px */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-loose:   1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;     /* eyebrow + small caps */
  --tracking-xwide: 0.18em;    /* tagline-style spacing, e.g. "NOURISHED AND FLOURISHING" */

  /* ============================================================
     SPACING / RADII / SHADOWS
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation — soft inkiness on dark grounds */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.55);

  /* The signature: fiery glow */
  --glow-ember: 0 0 24px rgba(221,59,48,0.45),
                0 0 56px rgba(221,59,48,0.25);
  --glow-orange:0 0 22px rgba(239,134,51,0.45),
                0 8px 32px rgba(221,59,48,0.30);

  /* Easing */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these by linking colors_and_type.css.
   ============================================================ */

html, body {
  background: var(--fp-base);
  color: var(--fp-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--fp-orange); color: var(--fp-text-on-fire); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--fp-flame-top);  /* fallback for browsers without background-clip:text */
  background-image: var(--fp-flame);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
  /* Subtle warm halo so even the lower (red) stop reads against any darker patch */
  filter: drop-shadow(0 0 22px rgba(239,134,51,0.18));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--fp-flame-top);
  background-image: var(--fp-flame);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(239,134,51,0.16));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  font-weight: 400;
  margin: 0 0 var(--space-4);
}

/* High-contrast preference: drop the gradient, use solid pale gold */
@media (prefers-contrast: more) {
  h1, .h1, h2, .h2 {
    background-image: none;
    -webkit-text-fill-color: currentColor;
            text-fill-color: currentColor;
    color: var(--fp-flame-top);
    filter: none;
  }
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--fp-rose);
  line-height: var(--lh-snug);
  font-weight: 400;
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  color: var(--fp-rose);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  margin: 0 0 var(--space-3);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  color: var(--fp-rose);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  color: var(--fp-rose);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-2);
}

/* The signature tagline — Organic Elements, matches the logo lockup exactly.
   Use this for "NOURISHED AND FLOURISHING" anywhere it appears on its own. */
.tagline {
  font-family: var(--font-tagline);
  font-weight: 400;
  color: var(--fp-crimson);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  /* Organic Elements is already characterful — keep tracking modest, not the 0.18em used for plain Raleway eyebrows */
}

/* Eyebrow labels (small caps above headings) — Raleway, the workhorse */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--fp-crimson);
  text-transform: uppercase;
  letter-spacing: var(--tracking-xwide);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--fp-text);
  text-wrap: pretty;
  max-width: 68ch;
}

p.lead {
  font-size: var(--fs-body-lg);
  color: var(--fp-text);
  line-height: var(--lh-loose);
}

small, .meta {
  font-size: var(--fs-small);
  color: var(--fp-text-dim);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--fp-orange) 50%, transparent);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); border-color: var(--fp-orange-bright); }

strong, b { color: var(--fp-text); font-weight: 700; }
em, i { font-style: italic; }

blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--fp-rose);
  line-height: var(--lh-snug);
  border-left: 2px solid var(--fp-orange);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-6) 0;
  font-style: italic;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fp-rose-soft);
  background: var(--fp-surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fp-hairline), transparent);
  margin: var(--space-7) 0;
}

/* The signature button — fiery glow against dark ground */
.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  color: var(--fp-text-on-fire);
  background: var(--fp-orange);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.85em 1.6em;
  cursor: pointer;
  box-shadow: var(--glow-orange);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.btn:hover {
  background: var(--fp-orange-bright);
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(221,59,48,0.6),
              0 14px 40px rgba(221,59,48,0.35);
}
.btn:active {
  transform: translateY(0);
  background: var(--fp-orange-deep);
}

.btn-ghost {
  background: transparent;
  color: var(--fp-orange);
  border: 1px solid var(--fp-orange);
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(239,134,51,0.08);
  color: var(--fp-orange-bright);
  border-color: var(--fp-orange-bright);
}

/* The Food Phoenix — Website UI Kit shared styles */


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--fp-base); color: var(--fp-text); font-family: var(--font-body); }

/* Layout primitives */
.fp-page { min-height: 100vh; background: var(--fp-base); }
.fp-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.fp-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }

/* Header — transparent so it merges seamlessly with the hero behind it.
   No solid background, no border-bottom. The text stays readable because the
   hero is dark and the embers/glow sit below the nav. */
.fp-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
.fp-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
/* Brand lockup (header uses logo only — no inline name + tagline).
   The Organic Elements tagline is reserved for the footer brand block. */
.fp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; border: 0; }
.fp-brand img { height: 48px; width: auto; }
.fp-nav { display: flex; align-items: center; gap: 32px; }
.fp-nav a {
  font-size: 14px; font-weight: 500;
  color: var(--fp-text);
  text-decoration: none; border: 0;
  transition: color 150ms var(--ease-out);
}
.fp-nav a:hover { color: var(--fp-orange); }
.fp-nav a.is-active { color: var(--fp-orange); }
.fp-nav .fp-cta {
  font-size: 13px; font-weight: 600; color: var(--fp-text-on-fire);
  background: var(--fp-orange); border-radius: 999px; padding: 10px 20px;
  box-shadow: 0 0 18px rgba(221,59,48,0.35);
  white-space: nowrap;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 150ms;
}
.fp-nav .fp-cta:hover { color: var(--fp-text-on-fire); background: var(--fp-orange-bright); transform: translateY(-1px); box-shadow: 0 0 26px rgba(221,59,48,0.55); }

/* Embers — rising particle layer */
.fp-embers {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .fp-embers { display: none; }
}
.fp-ember {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.5px);
  will-change: transform, opacity;
  animation-name: fp-ember-rise;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.32, 0.04, 0.45, 1);
}
.fp-ember--ember-orange {
  background: radial-gradient(circle, rgba(255,179,106,0.95) 0%, rgba(239,134,51,0.55) 50%, rgba(239,134,51,0) 80%);
  box-shadow: 0 0 8px rgba(239,134,51,0.5);
}
.fp-ember--ember-crimson {
  background: radial-gradient(circle, rgba(221,59,48,0.95) 0%, rgba(221,59,48,0.4) 50%, rgba(221,59,48,0) 80%);
  box-shadow: 0 0 10px rgba(221,59,48,0.6);
}
@keyframes fp-ember-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: calc(0.7 * var(--ember-intensity, 0.6)); }
  60%  { opacity: calc(0.6 * var(--ember-intensity, 0.6)); }
  100% { transform: translate3d(var(--drift, 0), -110vh, 0) scale(1); opacity: 0; }
}

/* Hero image — phoenix tree with gentle breathing scale.
   Honours prefers-reduced-motion. */
.fp-hero-image-wrap {
  position: absolute;
  right: -8%; top: 50%;
  transform: translateY(-50%);
  width: 58%;
  max-width: 820px;
  z-index: 1;
  pointer-events: none;
}
.fp-hero-image {
  width: 100%;
  display: block;
  -webkit-mask-image: radial-gradient(60% 70% at 55% 50%, #000 35%, transparent 90%);
          mask-image: radial-gradient(60% 70% at 55% 50%, #000 35%, transparent 90%);
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.6));
  transform-origin: 50% 55%;
  animation: fp-breathe 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes fp-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .fp-hero-image { animation: none; }
}
/* Hero shell + atmospheric glow */
.fp-hero {
  position: relative;
  padding: 120px 0 96px;
  overflow: hidden;
}
.fp-hero-inner { position: relative; z-index: 2; max-width: 880px; }
.fp-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(239,134,51,0.18), transparent 60%),
    radial-gradient(40% 50% at 10% 80%, rgba(239,134,51,0.10), transparent 70%);
  pointer-events: none;
}
/* Hero eyebrow — small mauve label sits above the H1.
   Mauve (--fp-mauve-soft) is preferred over crimson per brand owner. */
.fp-hero-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  color: var(--fp-mauve-soft);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 28px;
}

/* General eyebrow (used on cards, splits, CTAs) */
.fp-eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--fp-mauve-soft); text-transform: uppercase; letter-spacing: 0.22em;
  margin-bottom: 24px;
}

/* H1 — block lays out as a column of lines; each .fp-h1-line is its own painted
   box so background-clip:text repeats the flame from pale-gold top → red toe
   on every line independently. */
.fp-hero h1, .fp-h1-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.02;
  margin: 0 0 28px;
  letter-spacing: -0.015em;
  display: flex;
  flex-direction: column;
}
.fp-h1-line {
  display: block;
  color: var(--fp-flame-top);  /* fallback */
  background-image: linear-gradient(260deg,
    #FFE6A8 0%,
    var(--fp-flame-top) 22%,
    var(--fp-flame-mid) 55%,
    #E05030 80%,
    #E8522E 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(239,134,51,0.20));
}
.fp-h1-italic {
  font-style: italic;
  margin-top: 4px;
  background-image: none;
  -webkit-text-fill-color: var(--fp-rose);
          text-fill-color: var(--fp-rose);
  color: var(--fp-rose);
  filter: none;
}
.fp-swash-y {
  /* Render the PUA swash glyph in Ricko, slightly tighter to following letters.
     overflow:visible + small left padding stops the top-left tip of the swash
     being clipped by the H1's painting box. */
  font-family: var(--font-display);
  display: inline-block;
  margin-right: -0.04em;
  padding-left: 0.06em;
  letter-spacing: 0;
  overflow: visible;
}
.fp-hero-lede {
  font-size: 20px; line-height: 1.6; color: var(--fp-text);
  max-width: 640px; margin: 0 0 40px;
}
.fp-hero-cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* Section */
.fp-section { padding: 96px 0; position: relative; }
.fp-section--alt { background: var(--fp-base-brown); }
.fp-section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.fp-section-head .fp-eyebrow { display: block; }
/* Section heads — H2 in gold, lede in muted body */
.fp-section-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--fp-flame-top);
  background-image: linear-gradient(260deg,
    #FFE6A8 0%, var(--fp-flame-top) 22%,
    var(--fp-flame-mid) 55%, #E05030 80%, #E8522E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(239,134,51,0.16));
  margin: 0 0 20px;
}
.fp-section-head p { font-size: 18px; line-height: 1.65; color: var(--fp-text-muted); margin: 0 auto; max-width: 600px; }

/* Programme cards — ambient warm glow behind each card improves
   the sense of depth and helps card-vs-ground contrast for readability. */
.fp-prog-card {
  position: relative;
  background: var(--fp-surface-1);
  border: 1px solid var(--fp-hairline);
  border-radius: 12px;
  padding: 32px;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms;
  cursor: pointer;
  /* Inner ambient glow + soft outer halo */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px rgba(0,0,0,0) inset,
    0 18px 36px rgba(0,0,0,0.35),
    0 0 60px -10px rgba(239,134,51,0.14);
}
.fp-prog-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, rgba(239,134,51,0.10), transparent 70%);
  opacity: 0.7;
  transition: opacity 240ms var(--ease-out);
}
.fp-prog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239,134,51,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 24px 56px rgba(0,0,0,0.55),
    0 0 32px rgba(239,134,51,0.22);
}
.fp-prog-card:hover::before { opacity: 1; }
.fp-prog-num {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fp-mauve-soft);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
}
/* Programme card grid (sits above .fp-prog-card so the card has its own block) */
.fp-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fp-prog-card h3 {
  font-family: var(--font-heading);
  font-size: 26px; line-height: 1.2;
  color: var(--fp-rose);
  margin: 0 0 12px;
  position: relative;
}
.fp-prog-card p { font-size: 15px; line-height: 1.55; color: var(--fp-text-muted); margin: 0 0 20px; position: relative; }
.fp-prog-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fp-text-dim); position: relative; }

/* Module list (numbered) */
.fp-module-list { display: flex; flex-direction: column; gap: 1px; background: var(--fp-hairline); border: 1px solid var(--fp-hairline); border-radius: 12px; overflow: hidden; }
.fp-module-row {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 24px; align-items: center;
  background: var(--fp-surface-1);
  padding: 24px 28px;
  cursor: pointer;
  transition: background 150ms;
}
.fp-module-row:hover { background: var(--fp-surface-2); }
.fp-module-num { font-family: var(--font-mono); font-size: 14px; color: var(--fp-mauve-soft); letter-spacing: 0.1em; }
.fp-module-title { font-family: var(--font-heading); font-size: 22px; color: var(--fp-rose); }
.fp-module-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fp-text-dim); }

/* Quote */
.fp-pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.3;
  color: var(--fp-rose);
  border-left: 2px solid var(--fp-orange);
  padding: 12px 32px;
  margin: 0 auto;
  max-width: 800px;
}
.fp-pull-quote-cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  color: var(--fp-mauve-soft);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 24px;
  padding-left: 32px;
}

/* About / portrait split */
.fp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.fp-portrait {
  aspect-ratio: 4/5;
  border-radius: 4px;
  background: linear-gradient(160deg, #2B2320 0%, #181210 60%, #100B09 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fp-hairline);
}
.fp-portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(16,11,9,0.6) 100%);
}

/* CTA block — H2 gold, ambient glow */
.fp-cta-block {
  position: relative;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(239,134,51,0.16), transparent 60%),
    radial-gradient(40% 60% at 20% 80%, rgba(239,134,51,0.08), transparent 70%),
    var(--fp-base-brown);
  border: 1px solid var(--fp-hairline);
  border-radius: 16px;
  padding: 64px 56px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 24px 60px rgba(0,0,0,0.45),
    0 0 80px -20px rgba(239,134,51,0.22);
}
.fp-cta-block h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px); line-height: 1.1;
  color: var(--fp-flame-top);
  background-image: linear-gradient(260deg,
    #FFE6A8 0%, var(--fp-flame-top) 22%,
    var(--fp-flame-mid) 55%, #E05030 80%, #E8522E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(239,134,51,0.18));
  margin: 0 0 20px;
}
.fp-cta-block p { font-size: 18px; line-height: 1.6; color: var(--fp-text); max-width: 580px; margin: 0 auto 32px; }

/* Buttons */
.fp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--fp-text-on-fire); background: var(--fp-orange);
  border: 0; border-radius: 999px; padding: 16px 28px;
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 22px rgba(239,134,51,0.40), 0 8px 32px rgba(221,59,48,0.25);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), background 150ms;
}
.fp-btn:hover { background: var(--fp-orange-bright); color: var(--fp-text-on-fire); transform: translateY(-2px); box-shadow: 0 0 32px rgba(221,59,48,0.6), 0 14px 40px rgba(221,59,48,0.35); }
.fp-btn:active { transform: translateY(0); background: var(--fp-orange-deep); }

.fp-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--fp-orange); background: transparent;
  border: 1px solid var(--fp-orange); border-radius: 999px;
  padding: 15px 27px; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: all 200ms;
}
.fp-btn-ghost:hover { background: rgba(239,134,51,0.08); color: var(--fp-orange-bright); border-color: var(--fp-orange-bright); }

/* Footer — mauve subheadings; Organic Elements is reserved for the brand lockup here. */
.fp-footer { padding: 80px 0 40px; border-top: 1px solid var(--fp-hairline); background: var(--fp-base); }
.fp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.fp-footer h6 {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--fp-mauve-soft); margin: 0 0 20px;
}
.fp-footer-links { display: flex; flex-direction: column; gap: 12px; }
.fp-footer-links a { color: var(--fp-text); font-size: 14px; text-decoration: none; border: 0; transition: color 150ms; }
.fp-footer-links a:hover { color: var(--fp-gold-warm); }
.fp-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid var(--fp-hairline); font-family: var(--font-mono); font-size: 12px; color: var(--fp-text-dim); }

/* Footer brand lockup — the ONLY place Organic Elements appears outside the logo asset itself */
.fp-footer-brand img { height: 56px; }
.fp-footer-brand-text {
  display: flex; flex-direction: column; gap: 4px; line-height: 1;
}
.fp-footer-brand-name {
  font-family: var(--font-tagline);
  font-size: 22px;
  color: var(--fp-gold);
  letter-spacing: 0.02em;
  /* Title-case kept; never uppercased. Organic Elements has its own visual cadence. */
  text-transform: none;
}
.fp-footer-brand-tag {
  font-family: var(--font-tagline);
  font-size: 14px;
  color: var(--fp-rose);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-top: 2px;
}

/* Book / feature image */
.fp-book {
  aspect-ratio: 2/3;
  background: linear-gradient(160deg, #C96A1F 0%, #100B09 70%);
  border-radius: 4px;
  border: 1px solid var(--fp-hairline);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  padding: 32px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 60px rgba(221,59,48,0.2);
}
.fp-book-eyebrow { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fp-mauve-soft); margin-bottom: 16px; }
.fp-book-title { font-family: var(--font-display); font-size: 32px; line-height: 1.1; color: var(--fp-text); text-align: center; margin: 0 0 12px; }
.fp-book-sub { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--fp-rose); text-align: center; }
.fp-book-author { position: absolute; bottom: 24px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fp-rose-soft); }
/* Phosphor icon defaults — duotone style.
   Phosphor web component reads colour from the element's `color` CSS property
   for the primary stroke, and uses opacity (20%) on the secondary fill layer.
   We set color to --fp-gold for default, --fp-orange for active.
   The duotone secondary fill inherits as a translucent tint of the same colour —
   on dark grounds this creates a warm rose-gold glow effect naturally. */
.fp-icon     { font-size: 20px; color: var(--fp-gold); }
.fp-icon-lg  { font-size: 28px; color: var(--fp-gold); }
.fp-icon-xl  { font-size: 40px; color: var(--fp-gold); }
.fp-icon.is-rose, .fp-icon-lg.is-rose { color: var(--fp-rose); }
.fp-icon.is-active, .fp-icon-lg.is-active { color: var(--fp-orange); }
/* Explicit override for any icon needing rose secondary at higher opacity */
.fp-icon-duotone-rose { color: var(--fp-gold); opacity: 1; }
.fp-icon-duotone-rose::after { opacity: 0.45; }
.fp-form-row { display: flex; flex-direction: column; gap: 8px; }
.fp-form label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fp-rose); }
.fp-form input, .fp-form textarea, .fp-form select {
  font-family: var(--font-body); font-size: 15px;
  color: var(--fp-text); background: var(--fp-surface-2);
  border: 1px solid var(--fp-hairline); border-radius: 6px;
  padding: 14px 16px;
  transition: border-color 150ms;
}
.fp-form input:focus, .fp-form textarea:focus, .fp-form select:focus { outline: none; border-color: var(--fp-orange); }
.fp-form textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); }

/* Toast / banner — amber accent (not crimson) per brand owner */
.fp-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(239,134,51,0.10);
  border-bottom: 1px solid rgba(239,134,51,0.25);
  padding: 10px 24px;
  font-size: 13px; color: var(--fp-rose);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-banner b { color: var(--fp-gold-warm); font-weight: 600; }

/* "View" toggle pills for the demo */
.fp-view-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 6px;
  background: rgba(16,11,9,0.85);
  backdrop-filter: blur(14px);
  border: 1px solid var(--fp-hairline);
  border-radius: 999px;
  z-index: 100;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
.fp-view-bar button {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--fp-text-muted); background: transparent;
  border: 0; border-radius: 999px;
  padding: 10px 18px; cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 150ms;
}
.fp-view-bar button.is-active { background: var(--fp-orange); color: var(--fp-text-on-fire); }
.fp-view-bar button:not(.is-active):hover { color: var(--fp-orange); }

/* ===========================================================================
   book-styles.css — extensions on top of website-styles.css (the UI kit).
   The page leans HEAVILY on kit primitives (fp-hero, fp-section, fp-section-head,
   fp-prog-card, fp-pull-quote, fp-split, fp-cta-block). Only the things below
   are book-specific.
   =========================================================================== */

/* ============ HERO — book cover float right ============ */
/* A narrow grid band pulls copy and cover toward the centre, so neither sits
   flush with the screen edge on wider viewports. Cover hangs in the same
   atmospheric breathing layer as the home page's phoenix. */
.bk-hero-grid {
  position: relative;
  z-index: 3;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 480px) 260px;
  justify-content: center;
  gap: 64px;
  align-items: center;
}
.bk-hero-content { min-width: 0; }
.bk-hero-cover-wrap {
  position: relative;
  width: 100%;
  perspective: 1400px;
}
.bk-hero-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  transform-origin: 50% 55%;
  animation: bk-cover-breathe 7s ease-in-out infinite;
  will-change: transform;
}
.bk-hero-cover img {
  width: 100%; height: 100%;
  display: block;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 30px 70px rgba(0,0,0,0.65),
    0 80px 120px rgba(0,0,0,0.55);
}
/* Left-edge vignette no longer needed — grid keeps cover and copy apart.
   (Rule removed to let the cover present cleanly.) */
/* The fire halo that ties the cover into the page atmosphere */
.bk-hero-cover::before {
  content: "";
  position: absolute;
  inset: -32px -56px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,59,48,0.30),
      rgba(239,134,51,0.10) 50%,
      transparent 75%);
  filter: blur(24px);
  z-index: -1;
  animation: bk-halo-pulse 5s ease-in-out infinite;
}
@keyframes bk-cover-breathe {
  0%, 100% { transform: translateY(0)   rotate(-1.5deg); }
  50%      { transform: translateY(-8px) rotate(-0.8deg); }
}
@keyframes bk-halo-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-hero-cover, .bk-hero-cover::before { animation: none; }
}

/* Removed old .fp-hero-inner overrides — hero uses .bk-hero-grid now.
   Keep the H1 drop-shadow protection for the unlikely case the cover image
   ever loads slowly. */
.fp-hero .fp-h1-display .fp-h1-line {
  filter:
    drop-shadow(0 0 24px rgba(239,134,51,0.20))
    drop-shadow(0 2px 12px rgba(0,0,0,0.85));
}
.fp-hero .fp-h1-italic {
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.85));
}

/* Hero buy meta — small caption next to the Buy on Amazon button */
.bk-buy-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fp-text-dim);
  letter-spacing: 0.04em;
}

/* ============ Premise prose ============ */
.bk-prose-column {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 32px;
}
.bk-prose {
  font-size: 18px;
  line-height: 1.8;
  color: var(--fp-text);
  margin: 0 0 28px;
}
.bk-prose:last-child { margin-bottom: 0; }
.bk-prose--muted { color: var(--fp-text-muted); }
.bk-prose strong { color: var(--fp-rose); font-weight: 500; }
.bk-prose em { color: var(--fp-rose); font-style: italic; }

/* Embers inside a CTA panel — keep particles behind the panel content.
   The panel already clips overflow, so embers rise within the rounded block. */
.bk-cta-embers { position: relative; }
.bk-cta-embers > .fp-embers { z-index: 1; border-radius: inherit; }
.bk-cta-embers > :not(.fp-embers) { position: relative; z-index: 2; }

/* Inline arrow on buttons (replaces phosphor icon dependency) */
.bk-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 240ms var(--ease-out);
}
.fp-btn:hover .bk-arrow { transform: translateX(4px); }

/* ============ Atmospheric image break section ============ */
.bk-image-section {
  padding: 0 0 96px;
  background: var(--fp-base);
}
.bk-feature-image {
  margin: 0;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.55),
    0 0 80px -20px rgba(239,134,51,0.18);
}
.bk-feature-image img {
  display: block;
  width: 100%;
  height: auto;
}
/* Soft top/bottom vignette so the image dissolves into the page rather than
   sitting as a hard rectangle. */
.bk-feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(16,11,9,0.4) 0%,
      transparent 18%,
      transparent 82%,
      rgba(16,11,9,0.55) 100%);
  pointer-events: none;
}

/* ============ Image placeholder ============ */
.bk-img-placeholder {
  position: relative;
  width: 100%;
  border-radius: 12px;
  border: 1px dashed rgba(239,134,51,0.30);
  background:
    repeating-linear-gradient(135deg,
      rgba(239,134,51,0.022) 0px,
      rgba(239,134,51,0.022) 12px,
      transparent 12px,
      transparent 24px),
    linear-gradient(160deg, #1A1310 0%, #100B09 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  padding: 56px 48px;
  text-align: center;
  color: var(--fp-text-dim);
}
.bk-img-placeholder--wide    { aspect-ratio: 21/9; min-height: 280px; }
.bk-img-placeholder--tall    { aspect-ratio: 4/5; }
.bk-img-placeholder--square  { aspect-ratio: 1/1; }

.bk-placeholder-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fp-rose);
}
.bk-placeholder-prompt {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fp-text-dim);
  max-width: 520px;
}
.bk-placeholder-prompt em {
  font-style: italic;
  color: var(--fp-text-muted);
}

/* ============ Author's note — quiet narrow callout ============ */
.bk-note {
  position: relative;
  padding: 36px 40px;
  border-left: 2px solid var(--fp-orange);
  background:
    linear-gradient(90deg, rgba(239,134,51,0.04), transparent 75%);
  border-radius: 0 8px 8px 0;
  margin: 0;
}
.bk-note p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.75;
  color: var(--fp-text);
  margin: 0 0 16px;
}
.bk-note p:last-child { margin-bottom: 0; }
.bk-note p strong { color: var(--fp-rose); font-style: normal; font-weight: 600; }
.bk-note a {
  color: var(--fp-orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(239,134,51,0.35);
  transition: border-color 150ms;
}
.bk-note a:hover { border-bottom-color: var(--fp-orange); }
.bk-note-tag {
  font-style: normal !important;
  font-size: 15px !important;
  color: var(--fp-rose-soft) !important;
  padding-top: 12px;
  border-top: 1px solid var(--fp-hairline);
  margin-top: 22px !important;
}

/* ============ Inside the book — editorial two-column ============ */
.bk-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 72px;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
/* Vertical hairline between the two columns */
.bk-topics::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--fp-hairline) 12%,
    var(--fp-hairline) 88%,
    transparent 100%);
}
.bk-topics-col { position: relative; }
.bk-topics-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  color: var(--fp-rose);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: 36px;
  text-align: center;
}
.bk-topics-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 22px;
}
.bk-topic {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: baseline;
}
.bk-topic-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fp-mauve-soft);
  letter-spacing: 0.14em;
  padding-top: 2px;
}
.bk-topic-text {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.35;
  color: var(--fp-rose);
  margin: 0;
  letter-spacing: 0.005em;
}
.bk-topics-footnote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--fp-rose-soft);
  text-align: center;
  margin: 72px auto 0;
  max-width: 520px;
  letter-spacing: 0.005em;
}

/* ============ Expert endorsements — quote-only cards ============ */
.bk-endorsements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 64px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
.bk-endorsement {
  margin: 0;
  position: relative;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--fp-orange-deep);
}
.bk-endorsement blockquote {
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fp-text);
  text-wrap: pretty;
}
.bk-endorsement figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bk-endorsement-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fp-rose);
}
.bk-endorsement-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fp-text-dim);
  letter-spacing: 0.02em;
}
.bk-endorsement-meta i { font-style: italic; }

@media (max-width: 820px) {
  .bk-endorsements { grid-template-columns: 1fr; gap: 48px; }
}

/* ============ Amazon reader reviews ============ */
.bk-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  max-width: 640px;
  margin: 0 auto;
}
.bk-review {
  position: relative;
}
.bk-review-stars {
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--fp-orange);
  margin-bottom: 16px;
}
.bk-review h4 {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.3;
  color: var(--fp-rose);
  margin: 0 0 14px;
}
.bk-review p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fp-text-muted);
  margin: 0 0 14px;
}
.bk-review cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fp-text-dim);
}

/* ============ Author portrait ============ */
/* Pulls the split in from the container edges so the bio doesn't go
   edge-to-edge — the page reads as a more curated portrait, less like
   a CV layout. */
.bk-author-split {
  max-width: 1000px;
  margin: 0 auto;
  gap: 56px;
}
.bk-portrait {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--fp-surface-1);
}
.bk-portrait img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 22%;
}
/* Soft bottom vignette unifies the portrait with the page's dark grounds */
.bk-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 55%,
    rgba(16,11,9,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Legacy placeholder rule retained in case it's ever reused */
.bk-portrait-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px;
  text-align: center;
  z-index: 1;
}

/* ============ MOBILE PATCHES FOR INHERITED KIT STYLES ============ */
/* The website-styles.css kit has no viewport breakpoints. These rules patch the
   kit-level components (header nav, audience card grid, footer grid) so the
   page is mobile-friendly. Keep additions narrow — only the pieces the book
   page actually uses. */

/* Audience grid — two cards on desktop, stacked on mobile. Defined here (not
   inline) so the media query below can override cleanly. */
.bk-audience {
  grid-template-columns: 1fr 1fr;
  max-width: 920px;
  margin: 0 auto;
}

@media (max-width: 820px) {
  /* Audience cards (Considering / Already had) — stack */
  .bk-audience { grid-template-columns: 1fr !important; gap: 20px !important; }
  .fp-card-grid { grid-template-columns: 1fr !important; gap: 20px; }

  /* Endorsements already handled in their own block above, but enforce single
     column here too as a safety net */
  .bk-endorsements { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  /* Buttons — long copy ("Buy Contrasts: More Than Meets the MRI") can overflow
     a narrow viewport. Allow wrapping, tighten padding, and let the button
     reach full container width. */
  .fp-btn, .fp-btn-ghost {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 14px 22px;
    font-size: 14px;
    max-width: 100%;
  }
  /* CTA blocks — buttons should center and never push outside the panel */
  .fp-cta-block .fp-btn { width: auto; max-width: calc(100% - 8px); }
  .fp-hero-cta-row { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Banner — allow text to wrap rather than truncate */
  .fp-banner { white-space: normal; text-align: center; padding: 8px 16px; }

  /* Footer — single column at narrow widths so the four sections stack */
  .fp-footer { padding: 56px 0 32px; }
  .fp-footer-grid { grid-template-columns: 1fr; gap: 36px; margin-bottom: 36px; }
  .fp-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* CTA panel padding — tighter on narrow screens */
  .fp-cta-block { padding: 40px 24px; }

  /* Final CTA H2 can be long — soften */
  .fp-cta-block h2 { font-size: clamp(28px, 6vw, 40px); }
}

@media (max-width: 480px) {
  .fp-container { padding: 0 20px; }
  .fp-narrow    { padding: 0 20px; }
  .bk-prose-column { padding: 0 20px; }
  .fp-section { padding: 64px 0; }
  /* Hero copy: smaller H1 so it doesn't dominate the narrow screen */
  .fp-hero h1, .fp-h1-display { font-size: clamp(36px, 10vw, 56px); }
}
@media (max-width: 960px) {
  .bk-hero-grid {
    grid-template-columns: minmax(0, 440px) 220px;
    gap: 48px;
  }
}
@media (max-width: 720px) {
  .fp-hero { padding: 80px 0 56px; }
  .bk-hero-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 48px;
  }
  .bk-hero-cover-wrap {
    max-width: 240px;
    margin: 0 auto;
    order: -1;
  }
  .bk-topics { grid-template-columns: 1fr; gap: 48px; }
  .bk-topics::before { display: none; }
  .bk-reviews { grid-template-columns: 1fr; gap: 48px; }
  .fp-split { grid-template-columns: 1fr !important; gap: 48px; }
}

/* ============================================================================
   animations.css — high-end entry animation system for the static book page.
   Two layers:
     1. Hero orchestration — a one-time, staged reveal that plays on load.
     2. Scroll reveals — [data-reveal] elements rise + un-blur as they enter view
        (driven by an IntersectionObserver that adds .is-in).
   Everything is gated behind prefers-reduced-motion: no-preference, so the page
   renders fully static (no hidden content) for reduced-motion users, print,
   and any no-JS fallback.
   ============================================================================ */

/* The shared signature easing — a soft, expensive-feeling decelerate. */
:root {
  --bk-ease: cubic-bezier(0.16, 0.84, 0.34, 1);
  --bk-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Flame utility (the no-op .fp-flame-text replacement) ---------- */
.bk-flame {
  color: var(--fp-flame-top);
  background-image: linear-gradient(260deg,
    #FFE6A8 0%, var(--fp-flame-top) 22%,
    var(--fp-flame-mid) 55%, #E05030 80%, var(--fp-flame-bot) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(239,134,51,0.16));
}

@media (prefers-reduced-motion: no-preference) {

  /* ======================================================================
     1. HERO ORCHESTRATION — plays once on page load.
     We animate opacity + transform only (never `filter`), so the flame
     drop-shadow on the H1 lines is preserved.
     The `html.bk-anim` gate means the hidden start-state ONLY applies once
     JS has confirmed it's running — so if JS fails or is blocked, the hero
     renders fully visible instead of staying blank.
     ====================================================================== */

  html.bk-anim .bk-hero-content > * {
    opacity: 0;
    animation: bkRise 1.05s var(--bk-ease) forwards;
  }
  html.bk-anim .bk-hero-content .fp-hero-eyebrow { animation-delay: 0.15s; }
  html.bk-anim .bk-hero-content .fp-hero-cta-row { animation-delay: 0.85s; }

  /* Stage the two H1 lines individually inside the display block. */
  html.bk-anim .bk-hero-content .fp-h1-display {
    animation: none;            /* the block itself doesn't move… */
    opacity: 1;
  }
  html.bk-anim .bk-hero-content .fp-h1-line {
    opacity: 0;
    animation: bkRiseLine 1.05s var(--bk-ease) forwards;
  }
  html.bk-anim .bk-hero-content .fp-h1-line:nth-child(1) { animation-delay: 0.34s; }
  html.bk-anim .bk-hero-content .fp-h1-line:nth-child(2) { animation-delay: 0.50s; }

  /* The cover slides in from the right and settles, then the breathing
     animation (defined in book-styles.css) takes over on the inner element. */
  html.bk-anim .bk-hero-cover-wrap {
    opacity: 0;
    animation: bkCoverIn 1.4s var(--bk-ease) 0.45s forwards;
  }

  /* ======================================================================
     2. SCROLL REVEALS — driven by @keyframes + forwards (NOT transitions).
     Transitions stall in some engines; animations with fill-mode:forwards
     are reliable (same mechanism as the hero). The hidden base-state holds
     until .is-in adds the animation.
     ====================================================================== */
  html.bk-anim [data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
  }
  html.bk-anim [data-reveal].is-in {
    animation: bkReveal 0.95s var(--bk-ease) forwards;
    animation-delay: calc(var(--i, 0) * 95ms);
  }
  html.bk-anim [data-reveal="left"].is-in  { animation-name: bkRevealLeft; }
  html.bk-anim [data-reveal="right"].is-in { animation-name: bkRevealRight; }
  html.bk-anim [data-reveal="zoom"].is-in  { animation-name: bkRevealZoom; }

  /* --- Heading wipe: flame text wipes up into view behind a clip mask --- */
  html.bk-anim [data-reveal="wipe"].is-in {
    animation-name: bkWipeUp;
    animation-duration: 1.1s;
  }

  /* --- Curtain: a wide image reveals left→right behind a clip edge,
         then drifts with a slow Ken Burns --- */
  html.bk-anim [data-reveal="curtain"] { opacity: 0; }
  html.bk-anim [data-reveal="curtain"].is-in {
    animation: bkCurtain 1.25s var(--bk-ease) forwards;
  }

  /* --- Ken Burns drift on the atmospheric images (begins after reveal) --- */
  html.bk-anim .bk-feature-image img { animation: bkKenWide 26s ease-in-out 1.3s infinite alternate; }
  html.bk-anim .bk-portrait img      { animation: bkKenTall 30s ease-in-out 1.2s infinite alternate; }

  /* --- Word-by-word: the pull-quote reveals one word at a time --- */
  html.bk-anim [data-words] { opacity: 1; }
  html.bk-anim [data-words] .bk-word { display: inline-block; opacity: 0; will-change: transform, opacity; }
  html.bk-anim [data-words].is-in .bk-word {
    animation: bkWordUp 0.62s var(--bk-ease) forwards;
    animation-delay: calc(var(--w, 0) * 42ms);
  }
}

/* ======================================================================
   REDUCED MOTION — a calm, movement-free path so reveals still happen
   (gentle opacity fades only; no transform, blur, wipe, or Ken Burns).
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.bk-anim [data-reveal] { opacity: 0; }
  html.bk-anim [data-reveal].is-in {
    animation: bkFade 0.7s ease forwards;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  html.bk-anim .bk-hero-content > *,
  html.bk-anim .bk-hero-content .fp-h1-line,
  html.bk-anim .bk-hero-cover-wrap {
    opacity: 0;
    animation: bkFade 0.8s ease forwards;
  }
  html.bk-anim .bk-hero-content .fp-hero-eyebrow { animation-delay: 0.1s; }
  html.bk-anim .bk-hero-content .fp-h1-line:nth-child(1) { animation-delay: 0.2s; }
  html.bk-anim .bk-hero-content .fp-h1-line:nth-child(2) { animation-delay: 0.32s; }
  html.bk-anim .bk-hero-content .fp-hero-cta-row { animation-delay: 0.46s; }
  /* Words fade as a single group (no per-word travel) */
  html.bk-anim [data-words] .bk-word { opacity: 1; }
}

/* ---------- Failsafe: force-visible after JS timeout ---------- */
html.bk-shown .bk-hero-content > *,
html.bk-shown .bk-hero-content .fp-h1-line,
html.bk-shown .bk-hero-cover-wrap,
html.bk-shown [data-reveal],
html.bk-shown [data-words] .bk-word {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* ---------- Keyframes ---------- */
@keyframes bkFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bkWipeUp {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(10px); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: none; }
}
@keyframes bkCurtain {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes bkWordUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bkKenWide {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.5%, -1%, 0); }
}
@keyframes bkKenTall {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(0, -2%, 0); }
}
@keyframes bkReveal {
  from { opacity: 0; transform: translateY(34px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes bkRevealLeft {
  from { opacity: 0; transform: translateX(-40px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes bkRevealRight {
  from { opacity: 0; transform: translateX(40px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes bkRevealZoom {
  from { opacity: 0; transform: scale(1.04); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes bkRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bkRiseLine {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bkCoverIn {
  from { opacity: 0; transform: translateX(48px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}


/* ===== Overrides: neutralise Grigora theme bleed on this page ===== */
/* Grigora theme adds a decorative purple quote glyph via ::before/::after on
   blockquote/quote elements. Remove it so only our typographic quotes show. */
.fp-page blockquote::before,
.fp-page blockquote::after,
.fp-page .fp-pull-quote::before,
.fp-page .fp-pull-quote::after,
.fp-page .bk-endorsement blockquote::before,
.fp-page .bk-endorsement blockquote::after { content: none !important; display: none !important; }
/* Force quote text/marks to the design palette (kills theme color-3 purple) */
.fp-page blockquote, .fp-page .fp-pull-quote, .fp-page .bk-endorsement blockquote { color: var(--fp-rose); }

/* ========================================================================
   STANDALONE PAGE FIXES (appended) — chrome hide, quote fix, link scope,
   and animation-gate fallback so the page works injected into Grigora.
   ======================================================================== */

/* --- Hide Grigora theme header (menu) + footer on this page only --- */
.g-menu, .g-menu-links, .g-site-title, .g-site-title-logo, .g-hamburger,
.g-search-new, .g-social-links { display: none !important; }
/* Theme footer: the container(s) holding the site footer/disclaimer. We hide
   every top-level g-container that is NOT our injected design. Our design is
   .fp-page (appended after them). */
body > .g-container { display: none !important; }
body > .fp-page, .fp-page { display: block !important; }

/* --- Stop our global a{} link styles leaking onto theme menu (defensive;
   menu is hidden, but in case of any other theme links) --- */
.g-menu a, .g-menu-links a, nav a { border-bottom: 0 !important; }

/* --- Purple quote marks: Grigora theme colours quote glyphs via its
   color tokens. Force ALL quote text + any decorative ::before/::after in
   our design to the design palette, with high specificity + !important. --- */
.fp-page blockquote, .fp-page .fp-pull-quote, .fp-page .bk-endorsement blockquote,
.fp-page blockquote *, .fp-page .fp-pull-quote *:not(.fp-pull-quote-cite) {
  color: var(--fp-rose) !important;
}
.fp-page blockquote::before, .fp-page blockquote::after,
.fp-page .fp-pull-quote::before, .fp-page .fp-pull-quote::after,
.fp-page .bk-endorsement blockquote::before,
.fp-page .bk-endorsement blockquote::after { content: none !important; display: none !important; }

/* --- Animation fallback: if the bk-anim gate isn't set, ensure embers CSS
   still animates and content is visible. (JS adds bk-anim + builds embers.) --- */
html:not(.bk-anim) [data-reveal],
html:not(.bk-anim) [data-words] { opacity: 1 !important; }

/* Standalone legal footer (injected by JS) */
.fp-legal-footer { background:#0c0807; border-top:1px solid rgba(222,169,164,0.15); padding:56px 24px 64px; font-family:var(--font-body); }
.fp-legal-inner { max-width:760px; margin:0 auto; text-align:center; color:var(--fp-text-dim); font-size:13px; line-height:1.7; }
.fp-legal-h { font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--fp-rose); font-size:11px; margin:0 0 20px; }
.fp-legal-inner p { color:var(--fp-text-dim); max-width:none; }
.fp-legal-nav { margin:22px 0 18px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; }
.fp-legal-nav a { color:var(--fp-rose); border-bottom:0; font-size:13px; }
.fp-legal-nav a:hover { color:var(--fp-orange-bright); }
.fp-legal-copy { color:#6b625e !important; margin:0; }