@charset "UTF-8";
/* GENERATED from static/scss/book.scss by Sass. Do not edit this file: edit the .scss partials and recompile (npm run css). */
@layer tokens, reset, base, layout, components, includes, blocks, pages, utilities;
@layer tokens {
  /* =========================================================================
     The book look — applied under [data-section="book"]: on <body> for the whole Big Jump site (bigjump/base.html),
     on <main> for Mastering Management's /the-book/ page (MM header and footer keep the main look). Values from the 04_Book artboard.
     Only semantic tokens, fonts and type sizes change, so shared blocks restyle themselves.

     Type sizes follow the same tiers as the main site (css-guide §4 "Type"):
     - Tablet (48–64rem): fixed = the 1600px design scaled to 1024px, never below a readable minimum.
     - Small desktop (64–100rem): design px / 1600 × 100vw, from the tablet value up.
     - Large desktop (100rem+): fixed at the design value (the clamp maximum, reached at 1600px).
     - Mobile: there is no mobile book design yet. Headings use the same proportions as the
       main site's mobile headings; the giant title scales down from its tablet size; text sizes
       use the main site's mobile values. Revisit when a mobile book design exists.
     Because these are set on [data-section="book"], not :root, each tier is repeated here.
     ========================================================================= */
  [data-section=book] {
    --color-ink: var(--color-teal-darkest); /* book headings */
    --color-text: var(--color-teal-darkest); /* book body text */
    --color-surface-2: var(--color-yellow); /* highlight blocks behind headings */
    --color-accent: var(--color-teal-deep); /* buttons, duotone panels */
    --color-accent-2: var(--color-yellow); /* giant title, offset blocks */
    --color-highlight: var(--color-orange);
    --color-button-text: var(--color-orange-text); /* orange label on dark buttons */
    --font-display: "Oswald", "Arial Narrow", sans-serif;
    --font-body: "Open Sans", system-ui, sans-serif;
    /* Mobile (base) */
    --fs-book-title: min(16.6667vw, 8rem); /* "THE BIG JUMP": 65 @390, max 128 */
    --fs-book-h2: min(8.5714vw, 4rem); /* "About the author": 36 @420 (as main H1) */
    --fs-h2: min(5.7143vw, 2.64rem); /* section headings: 24 @420 (as main H2) */
    --fs-book-lead: clamp(1rem, 4.2857vw, 1.125rem); /* eyebrow, card lead: 18 @420, min 16 */
    --fs-body: clamp(.875rem, 3.3333vw, 1rem); /* 14 @420 → 16 */
    --fs-button: var(--fs-body);
    --fs-small: .875rem; /* 14 */
    --lh-h2: .98;
    --ls-h2: -.02em;
  }
  /* Tablet (48–64rem): fixed */
  @media (min-width: 48rem) {
    [data-section=book] {
      --fs-book-title: 8rem; /* 128 */
      --fs-book-h2: 4rem; /* 64 */
      --fs-h2: 2.64rem; /* 42 */
      --fs-book-lead: 1.125rem; /* 18 */
      --fs-body: 1rem; /* 16 */
      --fs-button: 1rem; /* 16 */
      --fs-small: .875rem; /* 14 */
    }
  }
  /* Small desktop (64–100rem): scales to the design; fixed from 100rem */
  @media (min-width: 64rem) {
    [data-section=book] {
      --fs-book-title: clamp(8rem, 12.5vw, 12.5rem); /* 128 → 200 */
      --fs-book-h2: clamp(4rem, 6.25vw, 6.25rem); /* 64 → 100 */
      --fs-h2: clamp(2.64rem, 4.125vw, 4.125rem); /* 42 → 66 */
      --fs-book-lead: clamp(1.125rem, 1.625vw, 1.625rem); /* 18 → 26 */
      --fs-body: clamp(1rem, 1.25vw, 1.25rem); /* 16 → 20 */
      --fs-button: clamp(1rem, 1.4375vw, 1.4375rem); /* 16 → 23 */
      --fs-small: clamp(.875rem, 1.125vw, 1.125rem); /* 14 → 18 */
    }
  }
}
@layer blocks {
  /* Block: two_column_text (book theme). One column on mobile; two from 48rem with the gap at --space-6.
     The yellow block behind each heading is a decorative ::before on the heading: no text inside, behind the
     text (isolation on the column + z-index -1), sized in em so it follows the heading (about 283px at 1600). */
  .b-two-column-text {
    margin-block: var(--space-9);
  }
  .b-two-column-text__grid {
    display: grid;
    gap: var(--space-8);
  }
  @media (min-width: 48rem) {
    .b-two-column-text__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-6);
    }
  }
  .b-two-column-text__column {
    isolation: isolate; /* the square (z-index -1) stays behind everything in the column */
    display: grid;
    align-content: start;
    gap: var(--space-5);
  }
  .b-two-column-text__heading {
    position: relative;
    max-inline-size: 7em; /* wraps over three lines as drawn */
  }
  .b-two-column-text__heading::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: -0.6em;
    inset-inline-start: 0.85em;
    inline-size: 4.3em;
    aspect-ratio: 1;
    background: var(--color-accent-2);
  }
  .b-two-column-text__text {
    max-inline-size: 26em;
  }
  .b-two-column-text__text > p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .b-two-column-text__action {
    justify-self: start;
    margin-block-start: var(--space-6);
  }
}
@layer blocks {
  /* Block: book_hero (book section). Mobile: text, then the photo with the book over it. From 64rem the photo is the right
     half of the block, full height, running to the screen edge; the title runs across the left half onto the photo and the
     book overlaps both. Page background is white. The yellow title (--color-accent-2) on white is the design's choice and
     has low contrast where it sits on the white half. */
  .b-book-hero {
    position: relative;
    display: grid;
    margin-block-end: var(--space-9);
  }
  .b-book-hero__content {
    position: relative;
    z-index: 2; /* above the photo, so the title reads across it */
    display: grid;
    justify-items: start;
    gap: var(--space-6);
    padding-block: var(--space-8);
  }
  .b-book-hero__eyebrow {
    font-size: var(--fs-book-lead);
    font-weight: 700;
    line-height: var(--lh-lead);
    color: var(--color-ink);
  }
  .b-book-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-book-title);
    font-weight: 700;
    line-height: var(--lh-h1);
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--color-accent-2);
    text-wrap: balance;
  }
  .b-book-hero__brand {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }
  .b-book-hero__brand-label {
    font-size: var(--fs-book-lead);
    font-weight: 700;
    line-height: var(--lh-lead);
    color: var(--color-ink);
  }
  .b-book-hero__logo {
    max-inline-size: 8.125rem;
  } /* 130px cap, as drawn */
  .b-book-hero__action {
    margin-block-start: var(--space-5);
  }
  .b-book-hero__media {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
  }
  .b-book-hero__photo {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    min-block-size: 100%;
    object-fit: cover;
  }
  .b-book-hero__book {
    position: absolute;
    inset-inline-start: 5%;
    inset-block-end: 0;
    inline-size: 90%;
  }
  @media (min-width: 64rem) {
    .b-book-hero {
      margin-block-end: 0;
    }
    .b-book-hero__content {
      padding-block: var(--space-9);
    }
    .b-book-hero__title {
      text-wrap: nowrap;
    } /* one line across the white half and onto the photo */
    .b-book-hero__media {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: 50%;
      aspect-ratio: auto;
      overflow: visible; /* the book may overlap the title side */
    }
    .b-book-hero__photo {
      object-position: center;
    }
    .b-book-hero__book {
      inset-inline-start: 6%;
      inset-block: auto;
      inset-block-start: 17%;
      inline-size: 94%;
    }
  }
}
@layer blocks {
  /* Block: reviews. Row of reviews (square photo, stars, title, text, reviewer) that starts on the content's left edge and
     runs off the right edge (.l-bleed-end). Item widths come from the block's own width (cqi), as in card_carousel:
     phones show one review with the next peeking in, tablet two, desktop three and a bit. */
  .b-reviews {
    --reviews-content: 90cqi; /* content width, same tiers as --page-width / --container */
    --reviews-gap: var(--space-6);
    --reviews-edge: calc((100% - min(var(--page-width), var(--container))) / 2);
    container-type: inline-size;
    margin-block: var(--space-9);
  }
  .b-reviews__heading {
    margin-block-end: var(--space-7);
    font-size: var(--fs-h2);
  }
  .b-reviews__list { /* scroll behaviour: components/_scroller.scss */
    --scroller-gap: var(--reviews-gap);
    padding-inline-end: var(--reviews-edge);
    scroll-padding-inline: var(--reviews-edge);
  }
  .b-reviews__item {
    display: flex;
    flex: 0 0 85cqi;
    scroll-snap-align: start;
  }
  .b-reviews__review {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--space-5);
    inline-size: 100%;
  }
  .b-reviews__avatar {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .b-reviews__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .b-reviews__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    color: var(--color-ink);
  }
  .b-reviews__quote {
    margin: 0;
  }
  .b-reviews__cite {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-small);
  }
  .b-reviews__name {
    font-weight: 700;
  }
  .b-reviews__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-block-start: var(--space-6);
  }
  @media (min-width: 48rem) {
    .b-reviews {
      --reviews-content: min(43.25rem, 100cqi);
    }
    .b-reviews__item {
      flex-basis: calc((var(--reviews-content) - var(--reviews-gap)) / 2);
    }
  }
  @media (min-width: 64rem) {
    .b-reviews {
      --reviews-content: min(88cqi, 87.875rem);
    }
    .b-reviews__item {
      flex-basis: calc((var(--reviews-content) - 2 * var(--reviews-gap)) / 3);
    } /* a third of the content: about 437px at 1600, a fourth peeking in */
  }
}
@layer blocks {
  /* Block: author_strip (book theme). Stacked on phones and tablets: the media wrapper holds the heading and the
     framed photo in one grid cell, so the heading overlaps the photo's top-right and runs onto the white. From 64rem
     the media sits beside the text. The yellow heading on white is as drawn (low contrast off the photo). */
  .b-author-strip {
    margin-block: var(--space-9);
  }
  .b-author-strip__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }
  .b-author-strip__media {
    display: grid;
    min-inline-size: 0;
    max-inline-size: 36rem;
  }
  .b-author-strip__media > * {
    grid-area: 1/1;
  }
  .b-author-strip__heading {
    z-index: 1;
    align-self: start;
    justify-self: start;
    inline-size: max-content;
    max-inline-size: 4.6em; /* breaks "About the / author" on two lines */
    margin-inline-start: 50%;
    margin-block-start: var(--space-8);
    color: var(--color-accent-2);
    font: 700 var(--fs-book-h2)/var(--lh-h2) var(--font-display);
    letter-spacing: var(--ls-h2);
    text-transform: uppercase;
  }
  .b-author-strip__frame .c-framed-image__img {
    aspect-ratio: 566/728;
  }
  .b-author-strip__body {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
    min-inline-size: 0;
  }
  .b-author-strip__text {
    max-inline-size: 20em;
    font-size: var(--fs-book-lead);
    font-weight: 700;
    line-height: var(--lh-body);
  }
  .b-author-strip__text > p + p {
    margin-block-start: var(--space-5);
  }
  @media (min-width: 64rem) {
    .b-author-strip__grid {
      grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
      gap: 0;
    }
    .b-author-strip__media {
      max-inline-size: none;
    }
    .b-author-strip__body {
      padding-inline-start: var(--space-8);
    }
  }
}
@layer blocks {
  /* Block: problem_solution (book theme; not designed, built from book styles). A coloured band (u-band, white by default).
     Phones: each pair is a stacked card: problem, a down arrow, then the solution on a yellow block with teal-darkest text.
     64rem and up: two columns; the visible column headings sit over all rows (aria-hidden copies; every item keeps its own
     labels, visually hidden there) and the arrow points sideways between them. */
  .b-problem-solution {
    padding-block: var(--space-9);
    margin-block: 0;
  }
  .b-problem-solution__inner {
    display: grid;
    gap: var(--space-7);
    justify-items: start;
  }
  .b-problem-solution__heading {
    font-size: var(--fs-h2);
  }
  .b-problem-solution__columns {
    display: none;
  }
  .b-problem-solution__list {
    list-style: none;
    margin: 0;
    padding: 0;
    inline-size: 100%;
    display: grid;
    gap: var(--space-6);
  }
  .b-problem-solution__pair {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 2px solid currentColor;
    border-radius: var(--radius);
  }
  .b-problem-solution__label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .b-problem-solution__problem,
  .b-problem-solution__solution {
    margin: 0;
    min-inline-size: 0;
  }
  .b-problem-solution__problem .b-problem-solution__text {
    font-size: var(--fs-book-lead);
    line-height: var(--lh-body);
  }
  .b-problem-solution__solution {
    inline-size: 100%;
    padding: var(--space-5);
    background: var(--color-yellow);
    color: var(--color-teal-darkest); /* the only text on yellow: contrast fixed regardless of band */
    border: 2px solid transparent; /* keeps the block visible in forced-colours mode */
  }
  .b-problem-solution__solution .b-problem-solution__text {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-h3);
    text-transform: uppercase;
  }
  .b-problem-solution__arrow {
    font-size: var(--fs-h3);
    rotate: 90deg; /* points down on phones */
  }
  @media (min-width: 64rem) {
    .b-problem-solution__inner {
      gap: var(--space-6);
    }
    .b-problem-solution__columns,
    .b-problem-solution__pair {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--fs-h3) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--space-6);
    }
    .b-problem-solution__columns {
      inline-size: 100%;
      margin: 0;
    }
    .b-problem-solution__column-label {
      margin: 0;
      grid-column: 1;
      font-family: var(--font-display);
      font-size: var(--fs-h3);
      font-weight: 700;
      line-height: var(--lh-h3);
      text-transform: uppercase;
    }
    .b-problem-solution__column-label--solution {
      grid-column: 3;
      padding-inline: var(--space-6);
    }
    .b-problem-solution__list {
      gap: var(--space-5);
    }
    .b-problem-solution__pair {
      padding: 0;
      border: 0;
      border-radius: 0;
      justify-items: stretch;
    }
    .b-problem-solution__arrow {
      rotate: 0deg;
    }
    /* Same clipping as .u-visually-hidden, copied because it must apply only from 64rem (labels show on phones). */
    .b-problem-solution__label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .b-problem-solution__solution {
      padding: var(--space-6);
    }
  }
}
@layer blocks {
  /* Block: buy_options (book section; not designed, built from the book styles). A band (u-band, white by default) with
     padding-block inside. Head: book image beside heading and intro from 48rem. Format cards: 1 column on phones, 2 from
     48rem, 4 from 64rem. Cards are outlined (no fill), so they work on every band colour.
     One format only (the book is only in paperback for now): from 48rem the card sits under the intro, beside the book. */
  .b-buy-options {
    padding-block: var(--space-9);
    scroll-margin-block-start: var(--space-8); /* clears the sticky book sub-nav when #buy is followed */
  }
  .b-buy-options__inner {
    display: grid;
    gap: var(--space-8);
  }
  .b-buy-options__head {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }
  .b-buy-options__image {
    inline-size: 100%;
    max-inline-size: 22rem;
    justify-self: center;
  }
  .b-buy-options__intro {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }
  .b-buy-options__heading {
    text-wrap: balance;
  }
  .b-buy-options__lead {
    max-inline-size: 65ch;
    font-size: var(--fs-book-lead);
    line-height: var(--lh-lead);
  }
  .b-buy-options__formats {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .b-buy-options__format {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 2px solid var(--color-ink); /* also the outline in forced-colours mode */
  }
  .b-buy-options__format-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .b-buy-options__icon {
    font-size: 2em;
    color: var(--color-ink);
  }
  .b-buy-options__format-name {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .b-buy-options__price {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-h3);
    color: var(--color-ink);
  }
  .b-buy-options__note {
    font-size: var(--fs-small);
    line-height: var(--lh-body);
  }
  .b-buy-options__retailers {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    margin-block-start: auto; /* buttons line up at the bottom of equal-height cards */
    padding-block-start: var(--space-4);
  }
  .b-buy-options__button {
    inline-size: 100%;
  }
  .b-buy-options__guarantee {
    max-inline-size: 65ch;
    padding-inline-start: var(--space-5);
    border-inline-start: var(--space-1) solid var(--color-accent-2);
    font-size: var(--fs-book-lead);
    line-height: var(--lh-lead);
  }
  .b-buy-options.u-band--yellow .b-buy-options__guarantee {
    border-inline-start-color: var(--color-ink);
  } /* yellow rule would vanish */
  @media (min-width: 48rem) {
    .b-buy-options__head--image {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--space-8);
    }
    .b-buy-options__formats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .b-buy-options__formats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .b-buy-options__formats:has(> :nth-child(4)) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    } /* 4 formats in one row; 1-3 share the width */
    .b-buy-options__formats:has(> :nth-child(2):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  /* One format: no choice to make, so no grid of cards. The head's two parts join the block's own grid: book on the left,
     intro, card and guarantee stacked on the right. */
  @media (min-width: 48rem) {
    .b-buy-options__inner:has(> .b-buy-options__formats > :only-child):has(.b-buy-options__head--image) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      column-gap: var(--space-8);
      row-gap: var(--space-7);
      align-items: start;
    }
    .b-buy-options__inner:has(> .b-buy-options__formats > :only-child) .b-buy-options__head--image {
      display: contents;
    }
    .b-buy-options__inner:has(> .b-buy-options__formats > :only-child) .b-buy-options__image {
      grid-column: 1;
      grid-row: 1/span 3;
      align-self: center;
    }
    .b-buy-options__inner:has(> .b-buy-options__formats > :only-child) > :not(.b-buy-options__head) {
      grid-column: 2;
    }
    .b-buy-options__formats:has(> :only-child) {
      grid-template-columns: minmax(0, 1fr);
      max-inline-size: 28rem;
    }
  }
}