@font-face {
    font-family: 'BN Cringe Sans';
    src: url('../fonts/BNCringeSans.woff2') format('woff2'),
         url('../fonts/BNCringeSans.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'BN Cringe Sans';
    src: url('../fonts/BNCringeSans-Medium.woff2') format('woff2'),
         url('../fonts/BNCringeSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Gopher';
    src: url('../fonts/Gopher-Regular.woff2') format('woff2'),
         url('../fonts/Gopher-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Gopher';
    src: url('../fonts/Gopher-Medium.woff2') format('woff2'),
         url('../fonts/Gopher-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Gopher';
    src: url('../fonts/Gopher-Bold.woff2') format('woff2'),
         url('../fonts/Gopher-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  /* ===========================================================
     DESIGN TOKENS
     Verbatim from index.html. Keep these in sync if homepage tokens change.
     =========================================================== */
  :root {
    --cream:      #F8EFDA;

    --navy-50:    #E3E7F1;
    --navy-100:   #C2CADF;
    --navy-200:   #8B98BE;
    --navy:       #3B4D85;
    --navy-dark:  #253464;
    --navy-900:   #161F3D;

    --sage:       #D5E2D2;
    --sage-dark:  #B7CDB1;

    --orange-50:  #FCE4D4;
    --orange-100: #F9C8A6;
    --orange-200: #F4A875;
    --orange:     #FF8552;
    --orange-2:   #F5943F;
    --orange-dark:#CF6133;
    --orange-900: #7A3219;

    --ink:        #1A1A1A;
    --paper:      #FEFEFE;
    --rule:       #CFD0CE;

    --font-display: 'Gopher', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'BN Cringe Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    --container: 1600px;
    --gutter: clamp(20px, 4vw, 96px);
  }

  /* ===========================================================
     RESET / BASE
     =========================================================== */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }

  /* ===========================================================
     OFFSET BUTTON (verbatim from index.html)
     =========================================================== */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid var(--navy);
    background: var(--navy);
    color: var(--cream);
    box-shadow: 5px 5px 0 0 var(--orange);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }
  .btn:hover {
    box-shadow: 2px 2px 0 0 var(--orange);
  }
  .btn:active {
    box-shadow: 0 0 0 0 var(--orange);
    transition-duration: 0.08s;
  }
  .btn:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 4px;
  }
  .btn--orange2 {
    box-shadow: 5px 5px 0 0 var(--orange-2);
  }
  .btn--orange2:hover {
    box-shadow: 2px 2px 0 0 var(--orange-2);
  }
  .btn--orange2:active {
    box-shadow: 0 0 0 0 var(--orange-2);
  }
  .btn--cream {
    background: var(--cream);
    color: var(--navy);
    border-color: var(--cream);
  }
  .btn--flat {
    box-shadow: none;
    margin-right: 0;
    margin-bottom: 0;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .btn--flat:hover {
    box-shadow: none;
    transform: none;
    background: transparent;
    color: var(--navy);
  }
  .btn--flat:active {
    box-shadow: none;
    transform: none;
  }

  /* ===========================================================
     NAVIGATION (verbatim from index.html)
     =========================================================== */
  .nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--cream);
    border-bottom: 1px solid #3B4D85;
  }
  .nav__inner {
    padding: 18px var(--gutter);
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .nav__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }
  .nav__mark {
    position: relative;
    width: 42px;
    height: 54px;
    flex-shrink: 0;
    transform: translateY(-4px);
  }
  .nav__mark > span {
    position: absolute;
    display: block;
    bottom: 0;
    border-radius: 1px;
  }
  .nav__mark .spine-1 {
    left: 16px;
    width: 8px;
    height: 50px;
    background: var(--sage);
    border: 1px solid var(--sage-dark);
  }
  .nav__mark .spine-2 {
    left: 28px;
    width: 14px;
    height: 42px;
    background: var(--navy);
    border: 1px solid var(--navy-dark);
    transform: rotate(-3deg);
    transform-origin: bottom center;
  }
  .nav__mark .spine-3 {
    left: 2px;
    width: 11px;
    height: 38px;
    background: var(--orange);
    border: 1px solid var(--orange-dark);
    transform: rotate(3deg);
    transform-origin: bottom center;
  }
  .nav__name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--navy);
    letter-spacing: 0.01em;
    line-height: 1;
  }
  .nav__inner > nav {
    margin-left: auto;
  }
  .nav__links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .nav__link {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.15s ease;
  }
  .nav__link:hover { opacity: 0.65; }
  .nav__link .caret { font-size: 0.5rem; opacity: 0.7; transform: translateY(-1.5px); }
  .nav__cta {
    margin-left: 8px;
    padding: 10px 22px;
  }
  .nav__toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    color: var(--navy);
    margin-left: auto;
  }
  .nav__drawer {
    display: none;
    background: var(--cream);
    border-bottom: 1px solid rgba(59, 77, 133, 0.12);
    padding: 8px var(--gutter) 24px;
  }
  .nav__drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .nav__drawer a {
    display: block;
    padding: 12px 0;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    border-bottom: 1px solid rgba(59, 77, 133, 0.08);
  }
  .nav__drawer .btn {
    margin-top: 16px;
    width: 100%;
    /* Override the generic .nav__drawer a rule (block, navy text, divider)
       so the CTA reads as a real centered button, not an invisible bar. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    background: var(--navy);
    color: var(--cream);
    text-align: center;
    border-bottom: none;
  }
  .nav__drawer .btn:hover,
  .nav__drawer .btn:focus {
    background: var(--navy-dark);
    color: var(--cream);
  }

  /* ===========================================================
     NAVIGATION, DROPDOWN MENUS
     Desktop: hover/focus reveals a panel beneath the nav link.
     Mobile:  accordion sub-list inside the drawer.
     =========================================================== */
  .nav__links .has-dropdown {
    position: relative;
  }
  /* Animated chevron, replaces the static ▼ glyph */
  .nav__link .caret {
    width: 8px;
    height: 8px;
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 0; /* hide any text fallback */
    line-height: 0;
  }
  .nav__link .caret svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .has-dropdown.is-open > .nav__link .caret,
  .has-dropdown:hover > .nav__link .caret,
  .has-dropdown:focus-within > .nav__link .caret {
    transform: rotate(180deg);
  }

  /* The dropdown panel itself */
  .nav__dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: -18px;
    min-width: 260px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: var(--cream);
    border: 1px solid var(--navy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 0.18s ease,
      transform 0.22s ease,
      visibility 0s linear 0.22s;
    z-index: 110;
  }
  /* The "bridge", an invisible strip between the nav link and the
     panel so the cursor can cross the gap without closing the menu. */
  .nav__dropdown::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
  }
  .has-dropdown:hover > .nav__dropdown,
  .has-dropdown:focus-within > .nav__dropdown,
  .has-dropdown.is-open > .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity 0.18s ease,
      transform 0.22s ease,
      visibility 0s linear 0s;
  }

  .nav__dropdown a {
    display: block;
    padding: 10px 22px;
    font-family: var(--font-body, inherit);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--navy);
    text-transform: none;
    line-height: 1.35;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
  }
  .nav__dropdown a:hover,
  .nav__dropdown a:focus-visible {
    background: var(--navy-50, #E3E7F1);
    color: var(--navy-dark);
    padding-left: 28px;
    outline: none;
  }
  .nav__dropdown__eyebrow {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy-200, #8B98BE);
    margin-bottom: 2px;
  }
  /* Grouped sections inside a dropdown (used when one menu contains
     multiple series). The header is a non-interactive label; items
     follow below. Subsequent groups get a thin divider on top. */
  .nav__dropdown__group {
    padding: 4px 0;
  }
  .nav__dropdown__group + .nav__dropdown__group {
    border-top: 1px solid rgba(59, 77, 133, 0.12);
    margin-top: 4px;
    padding-top: 8px;
  }
  .nav__dropdown__header {
    display: block;
    padding: 6px 22px 4px;
    font-family: var(--font-display, serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--navy);
  }
  .nav__dropdown__group ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* Slightly tighter item padding inside grouped dropdowns */
  .nav__dropdown__group a {
    padding: 7px 22px 7px 30px;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--navy);
    display: block;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
  }
  .nav__dropdown__group a:hover,
  .nav__dropdown__group a:focus-visible {
    background: var(--navy-50, #E3E7F1);
    color: var(--navy-dark);
    padding-left: 36px;
    outline: none;
  }
  .nav__dropdown__group .meta {
    color: var(--navy-200, #8B98BE);
    font-size: 0.7rem;
    margin-left: 6px;
  }

  /* ----- Mobile drawer accordion ----- */
  .nav__drawer .has-sub > button {
    width: 100%;
    background: none;
    border: 0;
    padding: 12px 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border-bottom: 1px solid rgba(59, 77, 133, 0.08);
  }
  .nav__drawer .has-sub > button .caret {
    width: 10px;
    height: 10px;
    transition: transform 0.2s ease;
  }
  .nav__drawer .has-sub > button .caret svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .nav__drawer .has-sub.is-open > button .caret {
    transform: rotate(180deg);
  }
  .nav__drawer .nav__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
  }
  .nav__drawer .has-sub.is-open .nav__sub {
    max-height: 800px;
  }
  .nav__drawer .nav__sub a {
    padding: 10px 0 10px 16px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 400;
    border-bottom: 1px solid rgba(59, 77, 133, 0.05);
  }
  .nav__drawer .nav__sub__header {
    padding: 14px 0 6px 0;
    font-family: var(--font-display, serif);
    font-size: 0.82rem;
    color: var(--navy);
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(59, 77, 133, 0.1);
  }
  .nav__drawer .nav__sub a .meta {
    color: var(--navy-200, #8B98BE);
    font-size: 0.7rem;
    margin-left: 6px;
  }

  /* ===========================================================
     SHARED SECTION SCAFFOLD (verbatim from index.html)
     =========================================================== */
  .section {
    padding: clamp(60px, 8vw, 110px) var(--gutter);
    max-width: var(--container);
    margin: 0 auto;
  }
  .section__head {
    margin-bottom: 56px;
    border-bottom: 1px solid var(--navy);
    padding-bottom: 28px;
  }
  .section__title {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0;
  }

  /* ===========================================================
     BOOK HERO (NEW, book detail layout)
     Two-column: cover left in a white-card frame, info stack right.
     Echoes the standalone__cover-card pattern from the homepage so
     the cover treatment feels native to the system.

     Background is cream, same as the body, for visual continuity
     coming out of the sticky nav. The grid is asymmetric (5fr / 7fr)
     because the info side carries more visual weight than the cover.
     =========================================================== */
  .book-hero {
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(40px, 5vw, 80px);
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(56px, 9vw, 140px);
    align-items: stretch;
  }
  /* Cover card, fills the full height of the hero row, with the cover
     image vertically centered inside. Reuses the visual language of
     standalone__cover-card. */
  .book-hero__cover-card {
    padding: clamp(28px, 3.5vw, 56px) clamp(36px, 4.5vw, 72px);
    border-radius: 12px;
    background: var(--paper);
    border: 2px solid var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Soft cast shadow to lift it off the cream */
    box-shadow: 0 24px 48px -24px rgba(37, 52, 100, 0.18);
    /* Large matted frame, fixed height so it's identical on every page;
       the cover floats inside at its true proportions (uncropped). */
    height: 560px;
    align-self: start;
    position: sticky;
    top: 96px;
  }
  .book-hero__cover {
    /* Uniform height on every page; width follows the cover's real shape
       so the full cover shows with no white bars and nothing cropped. */
    display: block;
    height: 420px;
    width: auto;
    max-width: 100%;
  }

  .book-hero__info {
    max-width: 580px;
    /* Center info content vertically within the stretched row */
    align-self: center;
  }
  .book-hero__eyebrow {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.75;
    margin: 0 0 18px;
  }

  .book-hero__eyebrow-sep {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--navy);
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin: 0 2px;
    font-size: 0;
    line-height: 0;
  }
  /* Title uses the display face at a generous scale, this is the
     editorial moment of the page, the equivalent of the homepage hero. */
  .book-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--navy);
    margin: 0 0 16px;
    letter-spacing: 0.005em;
  }
  .book-hero__byline {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.7;
    margin: 0 0 32px;
  }
  .book-hero__synopsis {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 40px;
    max-width: 540px;
  }
  .book-hero__synopsis p {
    margin: 0 0 16px;
  }
  .book-hero__synopsis p:last-child {
    margin-bottom: 0;
  }
  .book-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    /* Vertically center the button and the link with each other. */
    align-items: center;
    gap: 20px;
  }
  /* Audible link sits inline beside the primary Amazon button, small,
     underlined, with an arrow that nudges right on hover. Clearly secondary. */
  .audible-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--navy);
    border-bottom: 1px solid var(--navy);
    padding-bottom: 2px;
    transition: opacity 0.15s ease, gap 0.18s ease;
  }
  .audible-link:hover {
    opacity: 0.7;
    gap: 12px;
  }

  /* ===========================================================
     DETAILS STRIP, scoped inside the hero info column.
     Same visual treatment as before (navy top/bottom rules, uppercase
     dt labels, display-face dd values), just sized down to fit the
     narrower column under the CTAs.
     =========================================================== */
  .book-hero__details {
    margin-top: 40px;
    border-top: 1px solid var(--navy);
    border-bottom: 1px solid var(--navy);
    padding: 22px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 40px;
  }
  .book-hero__details dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .book-hero__details dt {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.6;
  }
  .book-hero__details dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--navy);
    line-height: 1.25;
  }

  /* ===========================================================
     STARS SUMMARY (in hero)
     Compact rating row that sits between synopsis and CTAs.
     The stars block is a button, clicking it opens the review panel.
     =========================================================== */
  .stars-summary {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 24px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    color: var(--navy);
    font-family: var(--font-body);
    transition: opacity 0.15s ease;
  }
  .stars-summary:hover { opacity: 0.7; }
  .stars-summary:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .stars-summary__stars {
    color: var(--orange);
    font-size: 1.125rem;
    letter-spacing: 0.12em;
    line-height: 1;
  }
  .stars-summary__rating {
    font-family: var(--font-body);
    font-size: 1.125rem;
    color: var(--navy);
    line-height: 1;
  }
  .stars-summary__count {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.65;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  /* ===========================================================
     REVIEW PANEL, slide-in from the right
     Off-canvas drawer with a backdrop. Closed by default.
     =========================================================== */
  .review-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(22, 31, 61, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 200;
  }
  .review-panel-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .review-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 92vw);
    background: var(--cream);
    border-left: 1px solid var(--navy);
    box-shadow: -24px 0 48px -16px rgba(22, 31, 61, 0.25);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .review-panel.is-open {
    transform: translateX(0);
  }
  .review-panel__header {
    padding: 28px 36px 24px;
    border-bottom: 1px solid var(--navy);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
  }
  .review-panel__heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--navy);
    margin: 0 0 6px;
    line-height: 1.1;
  }
  .review-panel__subhead {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.7;
    margin: 0;
  }
  .review-panel__subhead .stars {
    color: var(--orange);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
  }
  .review-panel__close {
    appearance: none;
    background: transparent;
    border: 1px solid var(--navy);
    color: var(--navy);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .review-panel__close:hover {
    background: var(--navy);
    color: var(--cream);
  }
  .review-panel__close:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
  }
  .review-panel__body {
    padding: 28px 36px 40px;
    overflow-y: auto;
    flex-grow: 1;
  }
  .review {
    padding: 24px 0;
    border-bottom: 1px solid rgba(59, 77, 133, 0.18);
  }
  .review:first-child { padding-top: 4px; }
  .review:last-child { border-bottom: 0; }
  .review__stars {
    color: var(--orange);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    line-height: 1;
    margin: 0 0 12px;
  }
  .review__quote {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink);
    margin: 0 0 14px;
  }
  .review__attrib {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.7;
    margin: 0;
  }

  /* ===========================================================
     MORE FROM GAYLE, horizontal scroll rail
     6 book cards in a scrolling row with snap.
     Prev/next arrow buttons match the hero carousel pattern.
     =========================================================== */
  .series-rail-wrap {
    position: relative;
    /* Bleed past the section padding on the right so scrolled-in cards
       feel like they extend off the page edge rather than hitting a wall. */
    margin-right: calc(var(--gutter) * -1);
  }
  .series-rail {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Bottom padding gives the card shadow room without clipping */
    padding: 4px var(--gutter) 28px 0;
    /* Hide horizontal scrollbar on webkit, keep keyboard scrolling */
    scrollbar-width: thin;
    scrollbar-color: var(--navy-200) transparent;
  }
  .series-rail::-webkit-scrollbar {
    height: 8px;
  }
  .series-rail::-webkit-scrollbar-track {
    background: transparent;
  }
  .series-rail::-webkit-scrollbar-thumb {
    background: var(--navy-200);
    border-radius: 4px;
  }
  .series-rail .book-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }

  /* Prev / next arrow buttons, sit centered vertically over the rail.
     Cream background with navy border, matching the brand system. */
  .rail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--navy);
    background: var(--cream);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 52, 100, 0.18);
    transition: background 0.18s ease, color 0.18s ease,
                opacity 0.18s ease, transform 0.18s ease;
  }
  .rail-arrow:hover {
    background: var(--navy);
    color: var(--cream);
  }
  .rail-arrow:active {
    transform: translateY(-50%) scale(0.95);
  }
  .rail-arrow:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
  }
  /* Disabled state, at start/end of scroll, the corresponding arrow dims */
  .rail-arrow[disabled],
  .rail-arrow[aria-disabled="true"] {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
  }
  .rail-arrow--prev {
    left: -12px;
  }
  .rail-arrow--next {
    right: calc(var(--gutter) - 12px);
  }
  .rail-arrow svg { display: block; }

  /* Book card, same visual treatment as homepage */
  .book-card {
    background: var(--paper);
    border: 1px solid var(--navy);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .book-card__cover-wrap {
    padding: 30px 24px 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 280px;
  }
  .book-card__cover {
    max-width: 100%;
    max-height: 260px;
    width: auto;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(37, 52, 100, 0.15);
  }
  .book-card__body {
    padding: 22px 24px 0;
  }
  .book-card__eyebrow {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 6px;
    opacity: 0.75;
  }
  .book-card__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--navy);
    margin: 0 0 18px;
    line-height: 1.1;
  }
  .book-card__cta {
    display: block;
    margin: auto 24px 24px;
    padding: 9px 0;
    text-align: center;
    background: var(--navy);
    color: var(--cream);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1px solid var(--navy);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .book-card__cta:hover {
    background: transparent;
    color: var(--navy);
  }

  /* ===========================================================
     FOOTER (verbatim from reviews.html, new arched design)
     =========================================================== */
  /* Footer wrapper: holds the SVG arch and footer content. */
  .footer-wrap {
    margin-top: clamp(80px, 10vw, 140px);
    position: relative;
  }
  /* Inlined SVG arch, exact Figma path geometry from node 386:575.
     aspect-ratio shrinks the rendered height while the SVG's preserveAspectRatio
     keeps the arch curve centered horizontally. */
  .footer-arch {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    margin-bottom: -1px;
  }
  .footer {
    position: relative;
    background: var(--navy);
    color: var(--cream);
    padding: 0 var(--gutter) 24px;
  }
  /* Hero block, pulled up into the navy area. */
  .footer__hero {
    position: relative;
    max-width: 1100px;
    margin: clamp(-380px, -28vw, -220px) auto clamp(140px, 16vw, 220px);
    padding: 40px 0 48px;
    text-align: center;
  }

  /* Floating pill labels around the hero headline. */
  .footer__pill {
    position: absolute;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    color: var(--cream);
    background: var(--navy);
    border: 1px solid var(--cream);
    border-radius: 999px;
    padding: 10px 22px;
    white-space: nowrap;
    line-height: 1;
    transform: rotate(var(--rot, 0deg));
    transition: background-color 0.2s ease;
    cursor: default;
  }
  .footer__pill:hover {
    background-color: var(--navy-dark);
  }
  /* ---- Mobile footer: Belle-style centered stack with generous spacing. ---- */
  @media (max-width: 720px) {
    .footer__pill { display: none; }

    /* padding-top keeps the navy fused to the arch (cancels the margin
       collapse that would otherwise open a cream seam below the arch). */
    .footer { padding-top: clamp(36px, 11vw, 64px); }

    /* Flex column + align-items:center keeps headline and copy on one axis
       regardless of font metrics; gap gives the airy headline/copy rhythm. */
    .footer__hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(40px, 12vw, 72px);
      margin: 0 auto clamp(56px, 16vw, 100px);
      padding: 0 4px;
      max-width: 560px;
    }
    .footer__hero-title {
      font-size: clamp(2.25rem, 9vw, 3rem);
      margin: 0;
      max-width: 16ch;
    }
    .footer__hero-copy {
      font-size: 1.0625rem;
      line-height: 1.6;
      margin: 0;
      max-width: 34ch;
    }
  }

  .footer__hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1.05;
    margin: 0 auto 28px;
    max-width: 18ch;
    letter-spacing: 0.005em;
  }
  .footer__hero-title em {
    font-style: italic;
  }
  .footer__hero-copy {
    font-family: var(--font-body);
    font-size: 1.25rem;
    line-height: 1.65;
    opacity: 0.85;
    margin: 0;
  }
  .footer__hero-copy a {
    color: var(--cream);
    border-bottom: 1px solid rgba(248, 239, 218, 0.45);
    padding-bottom: 1px;
    transition: border-color 0.15s ease, opacity 0.15s ease;
  }
  .footer__hero-copy a:hover {
    border-bottom-color: var(--cream);
    opacity: 1;
  }

  /* Bottom section: brand block left, link columns right */
  .footer__grid {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    padding-bottom: 40px;
  }
  .footer__brand {
    max-width: 320px;
    flex: 0 0 auto;
  }
  .footer__brand-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 14px;
    line-height: 1.2;
  }
  .footer__tagline {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.55;
    opacity: 0.75;
    margin: 0;
  }
  .footer__cols {
    margin-left: auto;
    display: flex;
    gap: clamp(48px, 8vw, 120px);
  }
  .footer__col {
    min-width: 120px;
  }
  .footer__col-head {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 28px;
    opacity: 0.55;
  }
  .footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .footer__col a {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    opacity: 0.92;
    transition: opacity 0.15s ease;
  }
  .footer__col a:hover { opacity: 0.6; }
  .footer__bottom {
    font-family: var(--font-body);
    padding-top: 28px;
    border-top: 1px solid rgba(248, 239, 218, 0.22);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  /* ===========================================================
     RESPONSIVE
     =========================================================== */
  @media (max-width: 960px) {
    .book-hero {
      grid-template-columns: 1fr;
      gap: 40px;
      text-align: left;
    }
    .book-hero__cover-card {
      position: static;
    }
    .book-hero__info {
      max-width: 100%;
    }
    .footer__grid {
      flex-direction: column;
      gap: 40px;
    }
    .footer__cols { margin-left: 0; }
  }

  @media (max-width: 720px) {
    .nav__links { display: none; }
    .nav__cta { display: none; }
    .nav__toggle { display: inline-flex; margin-left: auto; }
    .nav__drawer.is-open { display: block; }
    .nav__inner { padding: 14px var(--gutter); }

    .book-hero { padding-top: 40px; }
    .book-hero__title { font-size: 2.25rem; }

    .book-hero__details {
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .series-rail .book-card {
      flex: 0 0 240px;
    }

    /* Footer: Belle-style centered stack, generous spacing. */
    .footer__grid {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: clamp(44px, 13vw, 80px);
      padding-bottom: clamp(40px, 11vw, 60px);
    }
    .footer__brand { max-width: none; }
    .footer__cols {
      margin-left: 0;
      width: auto;
      display: flex;
      justify-content: center;
      gap: clamp(48px, 16vw, 88px);
    }
    .footer__col { min-width: 0; text-align: center; }
    .footer__col-head { margin-bottom: 18px; }
    .footer__col ul { gap: 14px; }
    .footer__bottom {
      flex-direction: column;
      gap: 10px;
      text-align: center;
      padding-top: clamp(28px, 7vw, 40px);
    }
  }

/* ===========================================================
   MICRO-INTERACTIONS — no card/image lifts.
   Offset-shadow ("push up") buttons keep their ORIGINAL hover.
   Only the flat nav button + book-card buttons get the blue fill-slide.
   =========================================================== */
.btn--flat:not(.btn--cream),
.book-card__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: var(--cream);
  transition: color 0.2s ease;
}
.btn--flat:not(.btn--cream)::before,
.book-card__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  z-index: -1;
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn--flat:not(.btn--cream):hover,
.book-card__cta:hover { background: transparent; color: var(--navy); }
.btn--flat:not(.btn--cream):hover::before,
.book-card__cta:hover::before { transform: translateY(100%); }

@media (prefers-reduced-motion: reduce) {
  .btn--flat:not(.btn--cream)::before,
  .book-card__cta::before { transition: none; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nav__mark .spine-1, .nav__mark .spine-2, .nav__mark .spine-3 {
    transform-origin: bottom center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav__brand:hover .spine-1 { transform: rotate(-4deg); }
  .nav__brand:hover .spine-2 { transform: rotate(-8deg); }
  .nav__brand:hover .spine-3 { transform: rotate(8deg); }
  .footer__pill { transition: background-color 0.2s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1); }
  .footer__pill:hover { transform: rotate(0deg); }
}