:root {
      --paper: #F4F1EA;
      --paper-soft: #FAF8F2;
      --ink: #2A2A3B;
      --purple: #6B5B86;
      --purple-dark: #58476F;
      --sage: #6F9278;
      --sage-soft: #DDE7DC;
      --copper: #C8846D;
      --line: #DED8CB;
    }

    html {
      scroll-behavior: smooth;
      background: var(--paper);
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 12% 8%, rgba(221, 231, 220, 0.48) 0 16%, transparent 34%),
        radial-gradient(circle at 86% 2%, rgba(200, 132, 109, 0.10) 0 12%, transparent 30%),
        var(--paper);
      color: var(--ink);
      font-family: Barlow, sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: 0.34;
      background-image:
        radial-gradient(rgba(42, 42, 59, 0.08) 0.55px, transparent 0.75px),
        radial-gradient(rgba(111, 146, 120, 0.08) 0.6px, transparent 0.8px);
      background-size: 18px 18px, 27px 27px;
      background-position: 0 0, 8px 11px;
    }

    * {
      box-sizing: border-box;
    }

    ::selection {
      background: rgba(200, 132, 109, 0.25);
    }

    .paper-panel {
      background:
        linear-gradient(135deg, rgba(255,255,255,0.42), rgba(250,248,242,0.68)),
        var(--paper-soft);
      border: 1px solid rgba(222, 216, 203, 0.82);
    }

    .book-image-shell {
      position: relative;
      isolation: isolate;
      padding: 10px;
      border-radius: 34px;
      background:
        linear-gradient(145deg, rgba(250, 248, 242, 0.74), rgba(244, 241, 234, 0.2)),
        rgba(250, 248, 242, 0.28);
      box-shadow:
        0 34px 86px rgba(42, 42, 59, 0.17),
        0 0 0 1px rgba(222, 216, 203, 0.58);
    }

    .book-image-shell::before {
      content: "";
      position: absolute;
      inset: -34px;
      z-index: -2;
      border-radius: 44px;
      background:
        radial-gradient(circle at 48% 40%, rgba(250, 248, 242, 0.72), transparent 48%),
        radial-gradient(circle at 36% 80%, rgba(111, 146, 120, 0.2), transparent 45%),
        radial-gradient(circle at 85% 14%, rgba(200, 132, 109, 0.12), transparent 34%);
      filter: blur(22px);
    }

    .book-image-shell::after {
      content: "";
      position: absolute;
      inset: 10px;
      z-index: 2;
      pointer-events: none;
      border-radius: 24px;
      box-shadow:
        inset 0 0 0 1px rgba(250, 248, 242, 0.62),
        inset 0 -24px 34px rgba(42, 42, 59, 0.035);
    }

    .book-image {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 24px;
      background: var(--paper-soft);
      box-shadow: 0 18px 42px rgba(42, 42, 59, 0.12);
    }

    .book-image-shell--small {
      padding: 7px;
      border-radius: 26px;
      box-shadow:
        0 22px 54px rgba(42, 42, 59, 0.2),
        0 0 0 1px rgba(222, 216, 203, 0.5);
    }

    .book-image-shell--small::after {
      inset: 7px;
      border-radius: 18px;
    }

    .book-image-shell--small .book-image {
      border-radius: 18px;
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -6px;
      height: 1px;
      transform: scaleX(0);
      transform-origin: center;
      background: var(--copper);
      transition: transform 180ms ease;
    }

    .nav-link:hover::after,
    .nav-link:focus-visible::after {
      transform: scaleX(1);
    }

    .botanical-fade {
      color: rgba(111, 146, 120, 0.16);
    }

    .vertical-title {
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }

    .section-pad {
      padding-top: clamp(3.25rem, 4.5vw, 4.75rem);
      padding-bottom: clamp(3.25rem, 4.5vw, 4.75rem);
    }

    @media (min-width: 1024px) {
      .section-pad {
        padding-top: 4rem;
        padding-bottom: 4rem;
      }
    }

    .hover-lift {
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }

    @media (hover: hover) {
      .hover-lift:hover {
        transform: translateY(-4px);
        border-color: rgba(111, 146, 120, 0.5);
        box-shadow: 0 26px 64px rgba(42,42,59,0.14);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }