/* Change the main colors here */
      :root {
        --navy: #071d3a;
        --ink: #102a4b;
        --gold: #a86d0a;
        --gold-light: #d59a32;
        --cream: #f7f3ed;
        --line: #d9d9d2;
        --serif: "Playfair Display", Georgia, serif;
        --sans: "DM Sans", Arial, sans-serif;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      .dynamic-book-thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
      body {
        margin: 0;
        color: var(--ink);
        background: #fff;
        font-family: var(--sans);
        font-size: 16px;
        line-height: 1.5;
      }
      a {
        color: inherit;
        text-decoration: none;
      }

      /* Shared layout */
      .container {
        width: min(1610px, calc(100% - 72px));
        margin: auto;
      }
      .topbar {
        background: var(--navy);
        color: #fff;
        font-size: 13px;
      }
      .topbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 34px;
      }
      .topbar span {
        display: flex;
        align-items: center;
        gap: 9px;
      }
      .topbar strong {
        color: #efb64d;
        font-size: 15px;
      }
      header {
        background: #fff;
        border-bottom: 1px solid #ece9e3;
        position: relative;
        z-index: 2;
      }
      .nav {
        min-height: 76px;
        display: flex;
        align-items: center;
        gap: 32px;
      }
      .brand {
        display: flex;
        align-items: center;
        margin-right: auto;
      }
      .brand img {
        width: 275px;
        height: 62px;
        object-fit: contain;
        object-position: left center;
      }
      .links {
        display: flex;
        align-items: center;
        gap: 27px;
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
      }
      .links a:first-child {
        color: var(--navy);
        position: relative;
      }
      .links a:first-child:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -23px;
        height: 2px;
        background: var(--gold);
      }
      
      .search {
        width: 240px;
        height: 38px;
        background: #f2f4f6;
        border-radius: 22px;
        display: flex;
        align-items: center;
        padding: 0 13px 0 17px;
        color: #728096;
        font-size: 13px;
      }
      .search b {
        margin-left: auto;
        color: var(--navy);
        font-size: 20px;
        line-height: 0;
      }
      .nav-icons {
        display: flex;
        gap: 18px;
        font-size: 24px;
        color: var(--navy);
      }
      /* Hero */
      .hero {
        min-height: 450px;
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(circle at 88% 50%, #d7d4c8, transparent 31%),
          linear-gradient(110deg, #f8f6f1 0%, #f9f7f2 48%, #d9d6ca 100%);
      }
      .hero:after {
        content: "";
        position: absolute;
        right: -80px;
        top: 0;
        width: 48%;
        height: 100%;
        opacity: 0.45;
        background: repeating-linear-gradient(
          115deg,
          transparent 0 28px,
          #f2eee6 29px 31px
        );
      }
      .hero .container {
        position: relative;
        z-index: 1;
        min-height: 450px;
        display: flex;
        align-items: center;
      }
      .hero-copy {
        width: 56%;
        padding: 37px 0 28px;
      }
      .eyebrow {
        color: var(--navy);
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: 700;
        margin: 0 0 12px;
      }
      h1,
      h2,
      h3 {
        font-family: var(--serif);
        margin: 0;
        line-height: 1.04;
      }
      h1 {
        font-size: 60px;
        letter-spacing: -1.2px;
        color: var(--navy);
        max-width: 620px;
      }
      h1 em {
        display: block;
        color: var(--gold);
        font-style: normal;
      }
      .hero-lead {
        max-width: 620px;
        font-size: 16px;
        font-weight: 600;
        margin: 11px 0 7px;
      }
      .hero-copy > p:not(.eyebrow):not(.hero-lead) {
        max-width: 590px;
        font-size: 15px;
        margin: 0 0 17px;
      }
      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 13px;
      }
      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 13px;
        padding: 10px 22px;
        border: 1px solid var(--gold);
        border-radius: 22px;
        font-size: 13px;
        font-weight: 700;
        color: var(--navy);
        background: #fff;
      }
      .button.primary {
        color: #fff;
        background: linear-gradient(100deg, #bf7e10, #8f5905);
        border-color: #aa700c;
      }
      .button span {
        font-size: 18px;
        line-height: 0;
      }
      .hero-books {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 48%;
        height: 88%;
        z-index: 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }
      .hero-book-image {
        display: block;
        width: min(100%, 700px);
        height: auto;
        max-height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 28px 30px rgba(10, 22, 35, 0.38));
        transform: rotate(-1deg);
      }
      .trust {
        display: flex;
        gap: 29px;
        margin-top: 23px;
      }
      .trust-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        line-height: 1.25;
      }
      .trust-item strong {
        color: var(--gold);
        font-size: 28px;
        font-family: Georgia, serif;
      }
      /* Content sections */
      section {
        padding: 32px 0;
      }
      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin-bottom: 15px;
      }
      h2 {
        font-size: 33px;
        color: var(--navy);
      }
      .under {
        width: 47px;
        height: 3px;
        background: var(--gold);
        margin-top: 9px;
      }
      .text-link {
        color: var(--navy);
        border-bottom: 1px solid var(--gold);
        font-size: 13px;
        font-weight: 700;
        padding-bottom: 4px;
      }
      .text-link span {
        color: var(--gold);
        font-size: 17px;
        margin-left: 8px;
      }
      .categories {
        background: #fff;
        padding-top: 0;
      }
      .category-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 8px;
      }
      .category {
        min-height: 155px;
        background: #faf4eb;
        text-align: center;
        padding: 13px 8px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .category:nth-child(2n) {
        background: #eff5fb;
      }
      .category:nth-child(6) {
        background: #fff0f1;
      }
      .category .icon {
        color: var(--gold);
        font-size: 36px;
        height: 48px;
        line-height: 1.1;
      }
      .category:nth-child(2n) .icon {
        color: var(--navy);
      }
      .category h3 {
        font-size: 16px;
        margin-bottom: 4px;
      }
      .category p {
        font-size: 11px;
        line-height: 1.35;
        margin: 0;
        flex: 1;
      }
      .round-arrow {
        display: grid;
        place-items: center;
        border: 1px solid var(--navy);
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 14px;
        margin-top: 7px;
      }
      .intro {
        background: #fbfaf8;
      }
      .intro-copy {
        max-width: 765px;
        text-align: center;
        margin: auto;
      }
      .intro-copy p {
        font-size: 15px;
        margin: 8px 0 0;
      }
      .intro-copy p + p {
        margin-top: 12px;
      }
      .featured-books {
        background: #fff;
        padding-top: 18px;
      }
      .slider-shell {
        position: relative;
        padding: 0 54px;
      }
      .slider-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d9c69b;
        background: rgba(255, 255, 255, 0.95);
        color: var(--navy);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(15, 41, 61, 0.12);
        transition: all 0.2s ease;
        z-index: 2;
      }
      .slider-btn.prev {
        left: 8px;
      }
      .slider-btn.next {
        right: 8px;
      }
      .slider-btn:hover {
        background: var(--gold);
        color: #fff;
        border-color: var(--gold);
      }
      .book-slider {
        display: flex;
        gap: 22px;
        overflow-x: hidden;
        padding: 12px 4px 4px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }
      .book-slider::-webkit-scrollbar {
        display: none;
      }
      /* Featured book cards
         Same visual style as books/index.php */
      .book-card {
        flex: 0 0 260px;
        background: #fff;
        border: 1px solid #eadfce;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: none;
        scroll-snap-align: start;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
      }

      .book-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 35px rgba(24, 43, 64, 0.10);
      }

      .book-thumb {
        height: 280px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        overflow: hidden;
        font: inherit;
        letter-spacing: normal;
        color: inherit;
        text-align: center;
        background: #f7f7f7;
      }

      .book-thumb img,
      .book-thumb .dynamic-book-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
      }

      .book-card:hover .book-thumb img,
      .book-card:hover .book-thumb .dynamic-book-thumb {
        transform: scale(1.03);
      }

      .book-info {
        padding: 18px 20px 20px;
      }

      .tag {
        display: inline-block;
        padding: 6px 11px;
        border-radius: 20px;
        background: #f4ead8;
        color: #9a6509;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .book-info h3 {
        margin-top: 12px;
        font-size: 20px;
        line-height: 1.25;
        color: var(--navy);
      }

      .book-info p {
        margin: 3px 0 0;
        font-size: 12px;
        color: #7c7c7c;
      }

      .rating {
        display: none;
      }

      .price-row {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 17px 0 18px;
      }

      .price-row strong {
        font-size: 21px;
        color: var(--navy);
      }

      .price-row span {
        color: #999;
        /* text-decoration: line-through; */
        font-size: 12px;
      }

      .card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .card-actions .button {
        min-width: 0;
        flex: unset;
        height: 38px;
        padding: 9px 10px;
        border-radius: 20px;
        font-size: 11px;
      }

      .card-actions .button.primary {
        background: #b87808;
        color: #fff;
        border-color: #b87808;
      }

      .card-actions .button.primary:hover {
        background: #986104;
        border-color: #986104;
      }

      .cart-btn {
        min-width: 0;
        flex: unset;
        height: 38px;
        border: 1px solid #d8bf98;
        background: #fff;
        color: #9a6509;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: .2s ease;
      }

      .cart-btn:hover {
        background: #faf5ec;
        border-color: #b87808;
      }

      .formats {
        background: linear-gradient(90deg, #fff 0 47%, #faf7f1 47%);
      }
      .format-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 52px;
      }
      .format {
        min-height: 190px;
        padding-left: 59px;
        position: relative;
      }
      .format + .format {
        border-left: 1px solid var(--gold);
        padding-left: 66px;
      }
      .format .format-icon {
        position: absolute;
        left: 0;
        top: 0;
        color: var(--gold);
        font-size: 38px;
      }
      .format + .format .format-icon {
        left: 8px;
      }
      .format h3 {
        font-size: 27px;
        margin-bottom: 8px;
      }
      .format p {
        font-size: 14px;
        max-width: 340px;
        margin: 0 0 13px;
        line-height: 1.4;
      }
      .format .button {
        padding: 8px 17px;
        font-size: 12px;
      }
      .feature-grid {
        display: grid;
        grid-template-columns: 1fr 1.6fr 1.6fr;
        gap: 9px;
      }
      .feature-panel {
        min-height: 210px;
        padding: 22px;
        background: #eef4f7;
      }
      .feature-panel.photo {
        background: linear-gradient(135deg, #ddd8ca, #f7f5ec 46%, #b6c4b6);
        display: flex;
        align-items: end;
      }
      .feature-panel:last-child {
        background: #f7f4ed;
      }
      .feature-panel h3 {
        font-size: 24px;
      }
      .feature-panel h3 span {
        font-family: var(--sans);
        font-size: 13px;
        display: block;
        margin-top: 5px;
      }
      .feature-panel p {
        font-size: 13px;
        line-height: 1.45;
      }
      .feature-panel .button {
        padding: 8px 16px;
        font-size: 12px;
      }
      .feature-panel .book-stack {
        align-self: center;
        width: 150px;
        transform: rotate(-7deg);
      }
      .book-stack i {
        display: block;
        height: 31px;
        padding: 6px 12px;
        background: #173d57;
        color: white;
        font: 11px var(--serif);
        margin: 1px 0;
        box-shadow: 2px 2px 4px #0004;
      }
      .book-stack i:nth-child(2) {
        background: #8e302b;
        margin-left: 8px;
      }
      .book-stack i:nth-child(3) {
        background: #235c69;
        margin-left: 16px;
      }
      .book-stack i:nth-child(4) {
        background: #9a5c29;
        margin-left: 4px;
      }
      .book-stack i:nth-child(5) {
        background: #273e50;
        margin-left: 10px;
      }
      .publish {
        background: linear-gradient(100deg, #f4f8f8, #fff 56%, #f1e9dc);
      }
      .publish-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        align-items: center;
        gap: 55px;
      }
      .publish-copy h2 {
        font-size: 28px;
      }
      .publish-copy h2 em {
        color: var(--gold);
        font-style: normal;
      }
      .publish-copy p {
        font-size: 14px;
        max-width: 530px;
      }
      .publish-art {
        min-height: 195px;
        position: relative;
        background: linear-gradient(135deg, transparent 55%, #e8dfd1 56%);
      }
      .publish-art .pen {
        position: absolute;
        right: 12%;
        top: 35%;
        width: 215px;
        height: 15px;
        border-radius: 8px;
        background: var(--navy);
        transform: rotate(-30deg);
        box-shadow: 0 0 0 3px #c89436;
      }
      .publish-art .pen:after {
        content: "";
        position: absolute;
        right: -15px;
        border-left: 18px solid var(--navy);
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
      .stats {
        background: #f5f7f6;
        border-top: 1px solid #e6e4df;
        border-bottom: 1px solid #e6e4df;
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .stat {
        text-align: center;
        border-right: 1px solid #b8c0c2;
        padding: 12px;
      }
      .stat:last-child {
        border: 0;
      }
      .stat strong {
        font: 26px var(--serif);
        color: var(--gold);
        display: block;
      }
      .stat span {
        font-size: 11px;
      }

      /* Footer */
      footer {
        background: var(--navy);
        color: #fff;
        padding: 34px 0 18px;
        font-size: 13px;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.25fr 0.8fr 0.9fr 1.1fr 1.25fr;
        gap: 22px;
      }
      .footer-col {
        border-right: 1px solid #557086;
        padding-right: 19px;
      }
      .footer-col:last-child {
        border: 0;
      }
      .footer-logo {
        width: 200px;
        height: 52px;
        object-fit: contain;
        filter: brightness(0) invert(1);
        object-position: left;
      }
      .footer-col h4 {
        margin: 0 0 11px;
        font-size: 14px;
      }
      .footer-col p {
        margin: 0 0 12px;
        line-height: 1.6;
      }
      .footer-col a {
        display: block;
        margin: 0 0 5px;
        color: #e9edf2;
      }
      .social {
        display: flex;
        gap: 7px;
      }
      .social span {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #2d4860;
        font-weight: bold;
      }
      .subscribe {
        display: flex;
        margin-top: 10px;
      }
      .subscribe input {
        min-width: 0;
        width: 100%;
        border: 0;
        padding: 10px;
        font-size: 12px;
      }
      .subscribe button {
        width: 39px;
        border: 0;
        background: var(--gold);
        color: #fff;
        font-size: 18px;
      }
      .copyright {
        border-top: 1px solid #315069;
        margin-top: 18px;
        padding-top: 13px;
        display: flex;
        justify-content: space-between;
      }

      /* Responsive layout */
      @media (max-width: 900px) {
        .container {
          width: min(100% - 34px, 680px);
        }
        .links {
          display: none;
        }
        .nav-icons {
          margin-left: 15px;
        }
        .brand img {
          width: 220px;
        }
        .hero-copy {
          width: 100%;
          position: relative;
          z-index: 2;
        }
        .hero-books {
          opacity: 0.32;
          width: 80%;
          right: -22%;
        }
        .hero-book-image {
          width: min(100%, 520px);
        }
        .category-grid {
          grid-template-columns: repeat(4, 1fr);
        }
        .footer-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .footer-col:nth-child(2) {
          border: 0;
        }
        .publish-grid {
          gap: 20px;
        }
        .format-grid {
          gap: 25px;
        }
      }
      @media (max-width: 600px) {
        .topbar .container {
          font-size: 9px;
          gap: 8px;
        }
        .topbar span:nth-child(2) {
          display: none;
        }
        .nav {
          min-height: 66px;
        }
        .brand {
          min-width: 0;
        }
        .brand img {
          width: 165px;
        }
        .nav-icons {
          font-size: 20px;
          gap: 10px;
          flex-shrink: 0;
        }
        .hero,
        .hero .container {
          min-height: 545px;
        }
        .hero-copy {
          padding-top: 38px;
        }
        h1 {
          font-size: 39px;
        }
        .hero-lead {
          font-size: 11px;
        }
        .trust {
          gap: 12px;
          flex-wrap: wrap;
        }
        .trust-item {
          font-size: 9px;
        }
        .trust-item strong {
          font-size: 22px;
        }
        .hero-books {
          right: -42%;
          bottom: -10px;
        }
        .section-head {
          align-items: start;
          gap: 12px;
        }
        .section-head .text-link {
          font-size: 9px;
        }
        .category-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 7px;
        }
        .intro-copy {
          text-align: left;
        }
        .formats {
          background: #fff;
        }
        .format-grid,
        .feature-grid,
        .publish-grid {
          grid-template-columns: 1fr;
        }
        .format + .format {
          border-left: 0;
          border-top: 1px solid var(--gold);
          padding: 25px 0 0 59px;
        }
        .feature-panel {
          min-height: 180px;
        }
        .publish-art {
          min-height: 120px;
        }
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .stat:nth-child(2) {
          border: 0;
        }
        .footer-grid {
          grid-template-columns: 1fr;
        }
        .footer-col {
          border: 0;
          border-bottom: 1px solid #315069;
          padding-bottom: 14px;
        }
        .copyright {
          display: block;
        }
        .copyright p {
          margin-top: 8px;
        }
      }