@font-face {
      font-family: 'Libre Baskerville';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url('assets/fonts/libre-baskerville-italic.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Libre Baskerville';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('assets/fonts/libre-baskerville-regular.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Libre Baskerville';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('assets/fonts/libre-baskerville-bold.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Libre Franklin';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('assets/fonts/libre-franklin-regular.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Libre Franklin';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('assets/fonts/libre-franklin-semibold.woff2') format('woff2');
    }

    :root {
      --indigo: #3c42b7;
      --indigo-dark: #31369b;
      --ink: #4a4a50;
      --wash: #f5f5f6;
      --white: #ffffff;
      --serif: 'Libre Baskerville', Georgia, serif;
      --sans: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
      --maxw: 1060px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    body {
      font-family: var(--serif);
      background: var(--white);
      color: var(--ink);
      line-height: 1.72;
      -webkit-font-smoothing: antialiased;
    }
    .container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

    .brand { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); }

    .eyebrow {
      font-family: var(--sans);
      font-size: 14px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(74,74,80,.5);
    }
    .btn {
      display: inline-block;
      font-family: var(--sans);
      font-size: 18px;
      text-align: center;
      padding: 14px 26px;
      transition: background .2s, color .2s;
    }
    .btn--solid { background: var(--indigo); color: var(--white); }
    .btn--solid:hover { background: var(--indigo-dark); }
    .btn--outline { border: 1px solid var(--indigo); color: var(--indigo); }
    .btn--outline:hover { background: var(--indigo); color: var(--white); }

    /* ── Hero ─────────────────────────────────── */
    .hero { padding: 50px 0 56px; }
    .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .hero-copy { max-width: 500px; }
    .hero h1 {
      font-family: var(--serif);
      font-size: clamp(34px, 5vw, 56px);
      font-weight: 400;
      line-height: 1.2;
      color: var(--indigo);
      max-width: 960px;
      margin: 0 auto 44px;
      text-align: center;
      text-wrap: balance;
    }
    .hero .lede { font-size: 18px; margin-bottom: 26px; }
    .hero .lede em { font-style: italic; }
    .hero .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
    @media (min-width: 980px) {
      .hero .actions { flex-wrap: nowrap; }
      .hero .actions .btn {
        flex: 1 1 0;
        padding-inline: 14px;
        font-size: 16px;
        white-space: nowrap;
      }
    }

    /* Book cover, built rather than pictured */
    .cover-wrap { display: grid; place-items: center; }
    .cover {
      position: relative;
      width: 300px;
      aspect-ratio: 409 / 558;
      background:
        radial-gradient(120% 80% at 12% 8%, rgba(255,255,255,.22) 0 38%, rgba(255,255,255,0) 70%),
        linear-gradient(118deg, #6f74cf 0 30%, var(--indigo) 30% 100%);
      color: var(--white);
      padding: 26px 26px 30px;
      display: flex; flex-direction: column;
      box-shadow: 0 22px 44px rgba(60,66,183,.28);
      overflow: hidden;
    }
    .cover::after {
      content: "";
      position: absolute;
      width: 260px; height: 260px;
      border-radius: 50%;
      background: rgba(255,255,255,.1);
      bottom: -90px; left: -110px;
    }
    .cover .author {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      opacity: .85;
      text-align: center;
    }
    .cover .title {
      font-family: var(--sans);
      font-size: 34px;
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -.01em;
      text-transform: uppercase;
      margin-top: auto;
    }
    .cover .stamp {
      position: absolute;
      right: 22px; bottom: 26px;
      width: 34px; height: 34px;
      border: 1px solid rgba(255,255,255,.6);
      border-radius: 50%;
    }

    /* ── Free reading access ──────────────────── */
    .retail { background: var(--wash); padding: 30px 0; }
    .retail .container { max-width: 1240px; display: grid; grid-template-columns: 1.15fr 1.3fr 1.15fr 1fr 1fr; }
    .retail-item { display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; padding: 8px 20px; }
    .retail-item + .retail-item { border-left: 1px solid var(--line); }
    .retail-item:first-child { padding-left: 0; }
    .retail-item:last-child { padding-right: 0; }
    .retail-icon { width: 36px; height: 36px; flex: 0 0 36px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .retail .eyebrow { font-size: 12px; white-space: nowrap; }
    .retail .name { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.4; white-space: nowrap; }
    @media (max-width: 1100px) {
      .retail .container { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
      .retail .retail-intro { grid-column: 1 / -1; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
      .retail-item { padding: 6px 14px; gap: 12px; }
      .retail-item:nth-child(2) { border-left: 0; padding-left: 0; }
      .retail-icon { width: 32px; height: 32px; flex-basis: 32px; }
      .retail .name { font-size: 15px; white-space: normal; }
    }
    @media (max-width: 700px) {
      .retail { padding: 26px 0; }
      .retail .container { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
      .retail .retail-intro { margin-bottom: 4px; }
      .retail-item { padding: 20px 10px; }
      .retail-item:nth-child(4) { border-left: 0; }
      .retail-item:nth-child(n + 4) { border-top: 1px solid var(--line); }
    }
    @media (max-width: 440px) {
      .retail-item:not(.retail-intro) { flex-direction: column; gap: 10px; padding: 20px 8px; text-align: center; }
      .retail .name { font-size: 14px; }
    }

    /* ── Chapter ──────────────────────────────── */
    .chapter { padding: 58px 0 10px; text-align: center; }
    .chapter .prose { max-width: 640px; margin: 30px auto 0; text-align: left; }
    .chapter .prose p { font-size: 18px; }
    .chapter .prose p + p { margin-top: 20px; }
    .chapter .prose p:first-child::first-letter {
      font-size: 80px;
      font-weight: 700;
      color: var(--indigo);
      float: left;
      line-height: .82;
      margin: 6px 10px 0 0;
    }
    .chapter .tail { margin-top: 40px; }

    /* ── Unlock card ──────────────────────────── */
    .unlock { padding: 26px 0 74px; }
    .unlock .card { background: var(--wash); text-align: center; padding: 44px 40px 50px; }
    .unlock h2 {
      font-family: var(--serif);
      font-size: clamp(26px, 3.6vw, 40px);
      font-weight: 400;
      color: var(--indigo);
      margin: 0 0 28px;
      text-wrap: balance;
    }
    .unlock p { font-size: 18px; max-width: 62ch; margin: 0 auto 28px; }
    .unlock p em { font-style: italic; }
    .unlock-benefits {
      display: grid;
      gap: 20px;
      max-width: 700px;
      margin: 0 auto 32px;
      padding: 0;
      list-style: none;
      text-align: left;
      font-size: 18px;
      line-height: 1.72;
    }
    .unlock-benefits li { position: relative; padding-left: 26px; }
    .unlock-benefits li::before {
      content: '';
      position: absolute;
      top: .72em;
      left: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold, var(--indigo));
    }
    .unlock-benefits strong { font-weight: 700; }
    .unlock .unlock-invitation { max-width: 700px; margin-bottom: 28px; }
    @media (max-width: 560px) {
      .unlock-benefits { font-size: 17px; gap: 18px; margin-bottom: 28px; }
      .unlock-benefits li { padding-left: 20px; }
    }

    /* ── Author ───────────────────────────────── */
    .author-sec { padding: 0 0 76px; }
    .author-sec .stage { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 46px; align-items: center; }
    .author-sec .panel { position: absolute; inset: -34px -8% -34px 22%; background: var(--wash); z-index: 0; }
    .author-sec .stage > *:not(.panel) { position: relative; z-index: 1; }
    .author-sec img { width: min(100%, 325px); aspect-ratio: 271 / 406; object-fit: cover; }
    .author-sec h3 {
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 400;
      color: var(--indigo);
      margin: 12px 0 12px;
      line-height: 1.35;
    }
    .author-sec p { font-size: 18px; }
    .author-sec p + p { margin-top: 20px; }
    .author-sec p em { font-style: italic; }

    /* ── Footer ───────────────────────────────── */
    footer { padding: 0 0 34px; }
    footer .container { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; text-align: center; }
    footer p { font-family: var(--sans); font-size: 14px; }
    footer a { text-decoration: underline; }

    :is(a, button):focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

    /* Subscription window: visual prototype, matching the original page. */
    .subscribe-trigger { border: 0; border-radius: 0; line-height: inherit; cursor: pointer; }
    .subscribe-dialog {
      position: fixed;
      inset: 0;
      margin: auto;
      width: min(500px, calc(100% - 32px));
      max-height: calc(100dvh - 32px);
      padding: 0;
      border: 0;
      border-top: 4px solid var(--indigo);
      background: var(--white);
      color: var(--ink);
      box-shadow: 0 24px 90px rgba(26, 28, 62, .22);
      overflow: auto;
      overscroll-behavior: contain;
    }
    .subscribe-dialog::backdrop { background: rgba(27, 28, 49, .52); backdrop-filter: blur(3px); }
    .subscribe-content { position: relative; padding: 32px 44px 0; text-align: center; }
    .subscribe-close {
      position: absolute; top: 12px; right: 12px;
      display: grid; place-items: center; width: 40px; height: 40px;
      border: 0; background: transparent; color: var(--ink); cursor: pointer;
    }
    .subscribe-close:hover { background: var(--wash); color: var(--indigo); }
    .subscribe-content .eyebrow { font-size: 11px; }
    .subscribe-content h2 {
      margin: 12px 0;
      color: var(--indigo); font-family: var(--serif);
      font-size: 32px; font-weight: 400; line-height: 1.24;
    }
    .subscribe-content h2:focus { outline: none; }
    #subscribe-description { max-width: 31ch; margin: 0 auto 20px; font-size: 15px; line-height: 1.7; }
    .subscribe-consent {
      display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 10px;
      margin: 0 0 18px; color: var(--ink-soft); text-align: left;
      font: 11px/1.45 var(--sans); cursor: pointer;
    }
    .subscribe-consent input {
      width: 16px; height: 16px; margin: 1px 0 0;
      accent-color: var(--gold); cursor: pointer;
    }
    .subscribe-consent input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
    .subscribe-google {
      display: flex; align-items: center; justify-content: center; gap: 14px;
      width: 100%; min-height: 54px; padding: 12px 16px;
      border: 1px solid #d9d9df; border-radius: 0;
      background: var(--white); color: var(--ink);
      font: 400 15px/1.5 var(--sans); cursor: pointer;
    }
    .subscribe-google:hover { background: var(--wash); border-color: #aaaab9; }
    .subscribe-google svg { flex-shrink: 0; }
    .subscribe-google-feedback { margin: 10px 0 0; font: 11px/1.5 var(--sans); }
    .subscribe-google-feedback--error { color: #8b3029; }
    .subscribe-divider { display: flex; align-items: center; gap: 16px; margin: 16px 0; color: #777780; font: 12px/1.5 var(--sans); }
    .subscribe-divider::before, .subscribe-divider::after { content: ''; flex: 1; height: 1px; background: #e5e5e9; }
    #subscribe-form { text-align: left; }
    #subscribe-form label { display: block; margin-bottom: 8px; font: 400 13px/1.5 var(--sans); }
    #subscribe-email {
      width: 100%; height: 54px; padding: 14px 16px;
      border: 1px solid #d9d9df; border-radius: 0;
      background: var(--white); color: var(--ink);
      font: 16px/1.5 var(--sans);
    }
    #subscribe-email::placeholder { color: #8b8b94; }
    #subscribe-email:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
    .subscribe-submit {
      display: flex; justify-content: center; align-items: center; gap: 16px;
      width: 100%; min-height: 54px; margin-top: 14px;
      padding: 14px 12px; border: 0; border-radius: 0;
      font-size: 15px; line-height: 1.6; cursor: pointer;
    }
    .subscribe-submit:disabled { cursor: wait; opacity: .72; }
    .subscribe-note { margin: 12px 0 20px; font: 11px/1.6 var(--sans); color: #777780; }
    .subscribe-feedback { margin: 12px 0 0; padding: 12px; background: var(--wash); color: var(--indigo); font: 12px/1.6 var(--sans); }
    .subscribe-feedback--loading { color: var(--ink-soft); }
    .subscribe-feedback--error { color: #8b3029; }
    .subscribe-feedback-link { margin-left: 2px; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    .subscribe-perk { margin: 0 -44px; padding: 16px 28px; background: var(--wash); font-size: 12px; line-height: 1.7; }
    .subscribe-perk strong { font-weight: 400; color: var(--indigo); }
    @media (max-width: 560px) {
      .subscribe-content { padding: 40px 24px 0; }
      .subscribe-content h2 { font-size: 30px; }
      .subscribe-perk { margin-inline: -24px; padding-inline: 24px; }
    }

    @media (min-width: 980px) and (max-width: 1100px) {
      .hero-grid {
        grid-template-columns: minmax(0, 500px) 300px;
        gap: 40px;
        max-width: 840px;
        margin-inline: auto;
      }
    }
    @media (max-width: 979px) {
      .hero h1 { margin-bottom: 32px; }
      .hero-grid { grid-template-columns: 1fr; gap: 36px; }
      .hero-copy { max-width: none; }
    }
    @media (max-width: 900px) {
      .author-sec .stage { grid-template-columns: 1fr; gap: 26px; }
      .author-sec .panel { display: none; }
    }
    @media (max-width: 560px) {
      .container { padding: 0 20px; }
      .hero .actions { flex-direction: column; align-items: stretch; }
      .unlock .card { padding: 32px 24px 38px; }
      .author-sec img { justify-self: center; }
      .chapter .prose p, .unlock p, .author-sec p { font-size: 17px; }
      .cover { width: 240px; }
    }

    /* Final light reading palette. Kept here to serve the page in one CSS request. */
    :root {
      --paper: #f7f3ea;
      --paper-deep: #eee7da;
      --paper-raised: #fdfbf6;
      --ink: #171713;
      --ink-soft: #625e56;
      --line: rgba(31, 27, 20, .14);
      --gold: #b67b08;
      --gold-bright: #dfa713;
      --gold-pale: #f1dfad;
      --sidebar: #171a18;
      --indigo: var(--gold);
      --indigo-dark: var(--gold-bright);
      --wash: var(--paper-deep);
      --white: var(--paper-raised);
    }

    body { background: var(--paper); }
    .hero h1, .unlock h2, .author-sec h3, .subscribe-content h2 { color: var(--ink); }
    .eyebrow { color: var(--ink-soft); }

    .btn--solid { background: var(--gold-bright); color: var(--ink); }
    .btn--solid:hover { background: var(--gold); color: var(--ink); }
    .btn--outline { border-color: var(--gold); color: var(--ink); }
    .btn--outline:hover { background: var(--gold-pale); color: var(--ink); }

    .book-cover-image {
      width: 300px;
      height: auto;
      box-shadow: 0 22px 44px rgba(23,26,24,.20);
    }
    @media (max-width: 560px) {
      .book-cover-image { width: min(82vw, 288px); }
    }

    .subscribe-dialog { box-shadow: 0 24px 90px rgba(23,26,24,.22); }
    .subscribe-dialog::backdrop { background: rgba(23,26,24,.52); }
    .subscribe-close:hover { color: var(--ink); }
    .subscribe-google, #subscribe-email { border-color: var(--line); }
    .subscribe-google:hover { border-color: var(--gold); background: var(--paper); }
    .subscribe-divider, .subscribe-note { color: var(--ink-soft); }
    .subscribe-divider::before, .subscribe-divider::after { background: var(--line); }
    #subscribe-email::placeholder { color: var(--ink-soft); }
    .subscribe-feedback { color: var(--ink); }