@layer reset, base, layout, components, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure { margin: 0; }
  img { display: block; max-width: 100%; }
  button, a { font: inherit; }
  button { border: 0; }
}

@layer base {
  :root {
    --green-1000: oklch(15% 0.025 169);
    --green-950: oklch(20% 0.04 169);
    --green-900: oklch(24% 0.055 169);
    --green-800: oklch(31% 0.06 169);
    --ivory-100: oklch(96% 0.018 82);
    --ivory-150: oklch(93.5% 0.024 82);
    --ivory-200: oklch(90% 0.03 82);
    --ink: oklch(22% 0.024 164);
    --gold: oklch(67% 0.105 76);
    --gold-bright: oklch(76% 0.105 78);
    --gold-dark: oklch(47% 0.075 76);
    --rose: oklch(56% 0.105 25);
    --rose-dark: oklch(44% 0.09 25);
    --rose-light: oklch(87% 0.04 24);
    --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
    --sans: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
    --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
    --page-pad: clamp(1rem, 2.3vw, 2.5rem);
    --header-height: 6rem;
    color-scheme: light;
  }

  html { background: var(--green-950); }

  body {
    min-width: 20rem;
    overflow-x: hidden;
    color: var(--ink);
    background:
      radial-gradient(circle at 11% 16%, oklch(100% 0.025 82 / 0.54), transparent 27rem),
      radial-gradient(circle at 89% 30%, oklch(86% 0.04 70 / 0.25), transparent 32rem),
      repeating-linear-gradient(93deg, oklch(35% 0.02 76 / 0.018) 0 1px, transparent 1px 7px),
      var(--ivory-100);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    content: "";
    opacity: 0.16;
    background-image:
      repeating-radial-gradient(circle at 18% 22%, transparent 0 2px, oklch(20% 0.02 85 / 0.11) 2.5px 3px, transparent 3.5px 6px);
    background-size: 17px 19px;
    mix-blend-mode: multiply;
  }

  .inner-page::before { display: none; }

  a { color: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }

  :focus-visible {
    outline: 3px solid var(--gold-bright);
    outline-offset: 4px;
  }

  ::selection { color: var(--ivory-100); background: var(--green-800); }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    color: var(--green-950);
    background: var(--gold-bright);
    transform: translateY(-160%);
    transition: transform 220ms var(--ease-soft);
  }

  .skip-link:focus { transform: translateY(0); }
}

@layer layout {
  .site-header {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(13rem, 0.8fr) minmax(28rem, 1.5fr) minmax(12.5rem, 0.8fr);
    align-items: center;
    min-height: var(--header-height);
    padding: 0.65rem var(--page-pad);
    color: var(--ivory-100);
    background:
      linear-gradient(90deg, oklch(14% 0.027 169 / 0.96), oklch(23% 0.05 169 / 0.97) 50%, oklch(14% 0.027 169 / 0.96)),
      var(--green-950);
    border-bottom: 1px solid var(--gold);
    box-shadow: 0 2px 0 var(--green-1000), 0 4px 0 var(--gold-dark), 0 8px 24px oklch(15% 0.03 169 / 0.26);
  }

  .brand-intro {
    position: relative;
    isolation: isolate;
    min-height: 10.8rem;
    padding: 1.4rem var(--page-pad) 0.9rem;
    text-align: center;
    overflow: hidden;
  }

  .collection-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(0.85rem, 1.8vw, 1.75rem);
    padding: 0 var(--page-pad);
  }

  .collection-panel {
    position: relative;
    min-height: clamp(29rem, 35vw, 35.5rem);
    padding: clamp(1rem, 1.7vw, 1.75rem) clamp(0.85rem, 1.6vw, 1.5rem) 1rem;
    overflow: hidden;
    border: 1px solid var(--gold-dark);
    box-shadow: 0 1.1rem 2.8rem oklch(28% 0.04 80 / 0.15);
  }

  .featured { padding: 0.6rem var(--page-pad) clamp(2.75rem, 6vw, 5.5rem); }

  .about {
    display: grid;
    grid-template-columns: minmax(13rem, 0.65fr) minmax(18rem, 1.35fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: center;
    padding: clamp(4rem, 9vw, 8rem) max(var(--page-pad), calc((100vw - 76rem) / 2));
    color: var(--ivory-100);
    background:
      radial-gradient(circle at 18% 42%, oklch(40% 0.075 164 / 0.4), transparent 24rem),
      linear-gradient(125deg, var(--green-900), var(--green-1000));
  }

  .site-footer {
    display: grid;
    place-items: center;
    min-height: 3.25rem;
    padding: 0;
    color: var(--gold-bright);
    background: var(--green-950);
    border-top: 4px double var(--gold-dark);
  }
}

@layer components {
  .brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    width: fit-content;
    color: var(--gold-bright);
    text-decoration: none;
  }

  .brand-mark img {
    display: none;
  }

  .brand-mark::before { width:5.2rem; height:4.7rem; flex:none; content:""; background:url('assets/brand/marcus-family-publishing-logo.webp') center 27%/11rem no-repeat; filter:drop-shadow(0 .35rem .5rem oklch(10% .03 164/.28)); }

  .brand-mark__name {
    font-family: var(--display);
    font-size: clamp(0.96rem, 1.45vw, 1.35rem);
    line-height: 0.96;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .brand-mark__name small {
    display: inline-block;
    margin-top: 0.45rem;
    font-family: var(--sans);
    font-size: 0.62em;
    font-weight: 600;
    letter-spacing: 0.2em;
  }

  .primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.4vw, 1.4rem);
  }

  .primary-nav a {
    position: relative;
    font-family: var(--display);
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .primary-nav a::after {
    position: absolute;
    right: 0;
    bottom: -0.42rem;
    left: 0;
    height: 1px;
    content: "";
    background: var(--gold-bright);
    transform: scaleX(0);
    transition: transform 420ms var(--ease-luxury);
  }

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

  .primary-nav i {
    color: var(--gold);
    font-size: 0.38rem;
    font-style: normal;
  }

  .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.75rem 1.4rem;
    overflow: hidden;
    font-family: var(--display);
    font-size: 0.79rem;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 350ms var(--ease-soft), background 350ms var(--ease-soft), box-shadow 450ms var(--ease-luxury), transform 450ms var(--ease-luxury);
  }

  .button::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(110deg, transparent 20%, oklch(96% 0.04 80 / 0.18) 48%, transparent 72%);
    transform: translateX(-120%);
    transition: transform 800ms var(--ease-luxury);
  }

  .button:hover::before { transform: translateX(120%); }
  .button:hover { transform: translateY(-2px); }

  .button--header {
    justify-self: end;
    color: var(--gold-bright);
    border: 1px solid var(--gold);
    box-shadow: inset 0 0 0 1px oklch(20% 0.03 169 / 0.65);
  }

  .menu-button { display: none; }

  .brand-intro h1 {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
  }

  .jewel-rule,
  .mini-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0.55rem auto 0.35rem;
    color: var(--gold);
  }

  .jewel-rule span { width: clamp(4.5rem, 11vw, 10rem); }
  .mini-rule span { width: 2.6rem; }

  .jewel-rule span,
  .mini-rule span {
    height: 1px;
    background: var(--gold);
    transform-origin: center;
  }

  .jewel-rule i,
  .mini-rule i { font-size: 0.55rem; font-style: normal; }

  .brand-intro__promise {
    font-family: var(--display);
    font-size: clamp(1.35rem, 2.05vw, 2.15rem);
    color: var(--gold-dark);
  }

  .brand-intro__support {
    margin-top: 0.05rem;
    font-family: var(--display);
    font-size: clamp(0.98rem, 1.35vw, 1.35rem);
  }

  .watermark {
    position: absolute;
    top: 50%;
    z-index: -1;
    color: var(--gold);
    font-family: var(--display);
    font-size: clamp(5rem, 9vw, 9rem);
    opacity: 0.14;
    transform: translateY(-50%) rotate(45deg);
  }

  .watermark--left { left: 3%; }
  .watermark--right { right: 3%; }

  .collection-panel::before,
  .collection-panel::after {
    position: absolute;
    inset: 0.55rem;
    z-index: 1;
    pointer-events: none;
    content: "";
  }

  .collection-panel::before { border: 1px solid var(--gold); }
  .collection-panel::after { inset: 0.8rem; border: 1px solid oklch(65% 0.08 75 / 0.58); }

  .collection-panel--heritage {
    color: var(--ivory-100);
    background:
      radial-gradient(circle at 50% 78%, oklch(50% 0.09 78 / 0.22), transparent 19rem),
      repeating-linear-gradient(97deg, transparent 0 5px, oklch(70% 0.05 78 / 0.025) 5px 6px),
      linear-gradient(150deg, var(--green-800), var(--green-1000) 72%);
  }

  .collection-panel--children {
    color: var(--ink);
    background:
      radial-gradient(circle at 50% 88%, oklch(100% 0.04 78 / 0.8), transparent 22rem),
      linear-gradient(150deg, var(--ivory-100), var(--ivory-150));
    border-color: oklch(68% 0.08 70 / 0.62);
  }

  .collection-panel--children::before { border-color: oklch(72% 0.08 69 / 0.68); }
  .collection-panel--children::after { border-color: oklch(68% 0.05 28 / 0.22); }

  .collection-panel__heading {
    position: relative;
    z-index: 4;
    text-align: center;
  }

  .collection-panel__heading h2 {
    font-family: var(--display);
    font-size: clamp(1.75rem, 2.55vw, 2.8rem);
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1;
    text-transform: uppercase;
  }

  .collection-panel__heading h2 span { font-style: italic; font-weight: 400; }

  .collection-panel--heritage .collection-panel__heading h2 { color: var(--gold-bright); }
  .collection-panel--children .collection-panel__heading h2 { color: var(--rose-dark); }

  .collection-panel__heading p {
    margin-top: 0.8rem;
    font-family: var(--display);
    font-size: clamp(0.94rem, 1.15vw, 1.15rem);
    line-height: 1.25;
  }

  .cover-stage {
    position: relative;
    z-index: 3;
    width: 100%;
    height: clamp(18rem, 23vw, 23rem);
    margin-top: -0.4rem;
    perspective: 1100px;
    transform-style: preserve-3d;
  }

  .cover-stage::after {
    position: absolute;
    right: 7%;
    bottom: 0;
    left: 7%;
    z-index: -1;
    height: 8%;
    content: "";
    background: transparent;
    filter: none;
    border-radius: 50%;
  }

  .stage-book {
    position: absolute;
    bottom: 2.5%;
    margin: 0;
    transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) rotateY(var(--book-rotate, 0deg));
    transform-origin: center bottom;
    transition: transform 700ms var(--ease-luxury), filter 700ms var(--ease-luxury);
    will-change: transform;
  }

  .stage-book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid oklch(70% 0.06 75 / 0.58);
    box-shadow: none;
  }

  .stage-book::after {
    position: absolute;
    top: 2%;
    right: -4.5%;
    bottom: 1%;
    width: 5%;
    content: "";
    background: linear-gradient(90deg, oklch(38% 0.035 76), oklch(75% 0.03 80), oklch(34% 0.03 76));
    transform: skewY(-9deg);
    transform-origin: left;
  }

  .stage-book:hover { transform: translate3d(var(--parallax-x, 0), calc(var(--parallax-y, 0) - 0.7rem), 2rem) rotateY(0deg) scale(1.025); }

  .stage-book--heritage { width: clamp(9.5rem, 19vw, 14.7rem); aspect-ratio: 7 / 10; }
  .stage-book--lamp { left: 17%; --book-rotate: 2deg; z-index: 2; }
  .stage-book--jewel { right: 17%; --book-rotate: -2deg; z-index: 1; }

  .cover-stage--heritage { overflow: hidden; }
  .heritage-carousel-rail {
    display: flex;
    align-items: center;
    gap: clamp(1.6rem, 4vw, 3.6rem);
    width: 100%;
    height: calc(100% - 4.7rem);
    padding: 1rem calc(50% - clamp(5rem, 9vw, 7rem)) .65rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .heritage-carousel-rail::-webkit-scrollbar { display: none; }
  .heritage-carousel-rail:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: -4px; }
  .heritage-carousel-book {
    --heritage-scale: .78;
    position: relative;
    flex: 0 0 clamp(10rem, 18vw, 14rem);
    aspect-ratio: 7 / 10;
    scroll-snap-align: center;
    opacity: .52;
    filter: saturate(.72) brightness(.82);
    transform: scale(var(--heritage-scale)) rotateY(4deg);
    transform-origin: center bottom;
    transition: transform 620ms var(--ease-luxury), opacity 420ms ease, filter 620ms var(--ease-luxury);
    will-change: transform;
  }
  .heritage-carousel-book::after {
    position: absolute;
    inset: 2% -4.5% 1% auto;
    width: 5%;
    content: "";
    background: linear-gradient(90deg, oklch(33% .03 72), oklch(74% .045 80), oklch(28% .025 70));
    transform: skewY(-8deg);
  }
  .heritage-carousel-book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid oklch(70% .08 77 / .68);
    box-shadow: none;
  }
  .heritage-carousel-book.is-centered { --heritage-scale: 1; z-index: 2; opacity: 1; filter: none; transform: scale(var(--heritage-scale)) rotateY(0); }
  .heritage-carousel-book:hover,
  .heritage-carousel-book:focus-visible { --heritage-scale: .88; z-index: 3; opacity: 1; filter: brightness(1.05); transform: scale(var(--heritage-scale)) rotateY(0); }
  .heritage-carousel-book:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 5px; }
  .cover-stage--heritage .carousel-edge--heritage { color: var(--gold-bright); background: oklch(14% .045 165 / .86); border-color: oklch(73% .1 77 / .68); }
  .cover-stage--heritage .carousel-edge--heritage:hover,
  .cover-stage--heritage .carousel-edge--heritage:focus-visible { background: var(--green-900); }
  .carousel-current--heritage { color: var(--gold-bright); letter-spacing: .055em; }

  .cover-stage--children {
    height: clamp(18.5rem, 23vw, 23rem);
    margin-top: 0;
    overflow: hidden;
  }
  .carousel-rail {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.4vw, 1.3rem);
    width: 100%;
    height: calc(100% - 4.8rem);
    padding: 1.2rem calc(50% - clamp(5rem, 8.2vw, 6.2rem)) 0.7rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
  }
  .carousel-rail::-webkit-scrollbar { display: none; }
  .carousel-rail[data-auto-scrolling="true"] { scroll-snap-type: none; scroll-behavior: auto; }
  .carousel-rail:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
  .carousel-book {
    --carousel-scale: 0.82;
    position: relative;
    flex: 0 0 clamp(10rem, 16.4vw, 12.4rem);
    aspect-ratio: 1;
    scroll-snap-align: center;
    opacity: 0.62;
    filter: saturate(0.78) brightness(0.94);
    transform: scale(var(--carousel-scale));
    transform-origin: center;
    transition: transform 520ms var(--ease-luxury), opacity 420ms ease, filter 520ms var(--ease-luxury);
    will-change: transform;
  }
  .carousel-book::after {
    position: absolute;
    inset: 3% -4% 2% auto;
    width: 4.5%;
    content: "";
    background: linear-gradient(90deg, oklch(38% 0.035 76), oklch(75% 0.03 80), oklch(34% 0.03 76));
    transform: skewY(-7deg);
    transform-origin: left;
  }
  .carousel-book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid oklch(63% 0.05 70 / 0.55);
    box-shadow: none;
  }
  .carousel-book.is-centered {
    --carousel-scale: 1.04;
    z-index: 2;
    opacity: 1;
    filter: saturate(1) brightness(1);
  }
  .carousel-book:hover,
  .carousel-book:focus-visible {
    --carousel-scale: 0.9;
    z-index: 3;
    opacity: 1;
    filter: saturate(1) brightness(1.02);
  }
  .carousel-book:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 5px; }
  .carousel-edge {
    position: absolute;
    top: 42%;
    z-index: 5;
    display: grid;
    width: 2.35rem;
    height: 3.8rem;
    place-items: center;
    color: var(--rose-dark);
    font: 400 2.2rem/1 var(--display);
    background: oklch(96% 0.02 83 / 0.88);
    border: 1px solid oklch(61% 0.07 66 / 0.45);
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 240ms ease, transform 360ms var(--ease-luxury), background 240ms ease;
  }
  .carousel-edge:hover,
  .carousel-edge:focus-visible { opacity: 1; background: var(--ivory-100); transform: scale(0.94); }
  .carousel-edge--previous { left: 0.15rem; }
  .carousel-edge--next { right: 0.15rem; }
  .carousel-current {
    position: absolute;
    right: 3.2rem;
    bottom: 3.85rem;
    left: 3.2rem;
    overflow: hidden;
    color: var(--rose-dark);
    font: 500 clamp(0.82rem, 1vw, 0.98rem)/1.2 var(--display);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .collection-panel .button {
    position: absolute;
    right: 26%;
    bottom: 1.35rem;
    left: 26%;
    z-index: 5;
  }

  .button--heritage {
    color: var(--gold-bright);
    background: var(--green-900);
    border: 1px solid var(--gold);
    box-shadow: 0 0 0 2px var(--green-950), 0 0 0 3px oklch(69% 0.09 76 / 0.68);
  }

  .button--children {
    color: var(--ivory-100);
    background: var(--rose);
    border: 1px solid var(--rose-dark);
    box-shadow: 0 0 0 2px var(--ivory-100), 0 0 0 3px oklch(56% 0.09 25 / 0.62);
  }

  .corner {
    position: absolute;
    z-index: 4;
    width: 2.25rem;
    height: 2.25rem;
    pointer-events: none;
  }

  .corner::before,
  .corner::after { position: absolute; content: ""; background: var(--gold-bright); }
  .corner::before { width: 100%; height: 1px; }
  .corner::after { width: 1px; height: 100%; }
  .corner--tl { top: 1.05rem; left: 1.05rem; }
  .corner--tr { top: 1.05rem; right: 1.05rem; transform: rotate(90deg); }
  .corner--bl { bottom: 1.05rem; left: 1.05rem; transform: rotate(-90deg); }
  .corner--br { right: 1.05rem; bottom: 1.05rem; transform: rotate(180deg); }

  .botanical {
    position: absolute;
    top: 1rem;
    z-index: 4;
    color: var(--rose);
    font-family: var(--display);
    font-size: 2.5rem;
    opacity: 0.58;
  }

  .botanical--left { left: 1.25rem; transform: rotate(-42deg); }
  .botanical--right { right: 1.25rem; transform: rotate(42deg) scaleX(-1); }

  .section-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.35rem;
  }

  .section-title span { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

  .section-title h2 {
    font-family: var(--display);
    font-size: clamp(1.35rem, 1.8vw, 1.85rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .section-title h2 i { color: var(--gold-dark); font-weight: 400; }

  .featured-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.6rem;
    margin-bottom: 0.5rem;
  }

  .filter-group { display: flex; gap: 0.4rem; flex-wrap: wrap; }

  .filter-button {
    padding: 0.35rem 0.68rem;
    color: var(--ink);
    background: transparent;
    border-bottom: 1px solid transparent;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .filter-button:hover,
  .filter-button.is-active { color: var(--green-800); border-bottom-color: var(--gold-dark); }

  .rail-controls { display: flex; gap: 0.4rem; }

  .rail-controls button {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    color: var(--green-800);
    background: transparent;
    border: 1px solid var(--gold-dark);
    cursor: pointer;
    transition: color 260ms ease, background 260ms ease, transform 360ms var(--ease-luxury);
  }

  .rail-controls button:hover { color: var(--ivory-100); background: var(--green-800); transform: translateY(-2px); }

  .book-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14.5rem, 1fr);
    gap: 0.65rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dark) transparent;
    padding: 0.25rem 0.12rem 0.75rem;
  }

  .book-rail[data-count="6"] { grid-template-columns: repeat(6, minmax(14.5rem, 1fr)); grid-auto-flow: initial; }

  .book-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(5.3rem, 38%) 1fr;
    gap: 0.8rem;
    min-height: 10.5rem;
    padding: 0.75rem;
    overflow: hidden;
    scroll-snap-align: start;
    background: oklch(98% 0.012 82 / 0.88);
    border: 1px solid oklch(68% 0.05 76 / 0.42);
    box-shadow: none;
    transition: transform 500ms var(--ease-luxury), box-shadow 500ms var(--ease-luxury), opacity 260ms ease;
  }

  .book-card:hover { transform: translateY(-0.35rem); box-shadow: none; }

  .book-card__cover-wrap { position: relative; min-height: 8.8rem; }

  .book-card__cover-wrap.has-placeholder {
    display: grid;
    place-items: center;
    color: var(--gold-bright);
    background: linear-gradient(145deg, var(--green-800), var(--green-1000));
    border: 1px solid var(--gold-dark);
  }

  .book-card__cover-wrap.has-placeholder::before { content: "MFP"; font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.2em; }

  .book-card__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    box-shadow: none;
    transition: transform 650ms var(--ease-luxury);
  }

  .book-card:hover .book-card__cover { transform: scale(1.018); }

  .book-card__cover-wrap[data-shape="portrait"] .book-card__cover { object-fit: contain; background: var(--ivory-150); }

  .book-card__body { display: flex; flex-direction: column; min-width: 0; }

  .book-card__collection {
    margin-bottom: 0.25rem;
    color: var(--gold-dark);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .book-card[data-collection="children"] .book-card__collection { color: var(--rose-dark); }
  .book-card[data-collection="faith"] .book-card__collection { color: var(--green-800); }

  .book-card h3 {
    font-family: var(--display);
    font-size: clamp(0.96rem, 1.08vw, 1.12rem);
    font-weight: 500;
    line-height: 1.05;
  }

  .book-card h3 a { color:inherit; text-decoration:none; }

  .book-card__author {
    margin-top: 0.45rem;
    font-family: var(--display);
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .book-card__buy {
    width: fit-content;
    margin-top: auto;
    padding: 0.42rem 0.62rem;
    color: var(--ivory-100);
    background: var(--green-800);
    border: 1px solid var(--green-950);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 260ms ease, transform 350ms var(--ease-luxury);
  }

  .book-card[data-collection="children"] .book-card__buy { background: var(--rose); border-color: var(--rose-dark); }
  .book-card__buy:hover { transform: translateY(-2px); background: var(--green-950); }
  .book-card[data-collection="children"] .book-card__buy:hover { background: var(--rose-dark); }
  .book-card__buy--soon { cursor:default; opacity:.78; }
  .book-card__buy--soon:hover { transform:none; background:var(--green-900); }
  .book-card__buy--complete { cursor:default; color:var(--green-950); background:var(--gold-bright); border-color:var(--gold-dark); }
  .book-card__buy--complete:hover { transform:none; color:var(--green-950); background:var(--gold-bright); }

  .book-card.is-leaving { opacity: 0; transform: translateY(0.5rem) scale(0.985); }

  .noscript-note { padding: 1rem; text-align: center; }

  .about__seal {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--gold-dark);
    outline: 1px solid oklch(68% 0.08 76 / 0.36);
    outline-offset: -0.75rem;
    border-radius: 50%;
  }

  .about__seal img { width: 74%; filter: drop-shadow(0 1rem 2rem oklch(10% 0.03 164 / 0.32)); }

  .eyebrow {
    color: var(--gold-bright);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }

  .about h2 {
    max-width: 18ch;
    margin-top: 0.7rem;
    font-family: var(--display);
    font-size: clamp(2.2rem, 4.6vw, 4.8rem);
    font-weight: 400;
    line-height: 0.98;
  }

  .about__copy > p:not(.eyebrow) { max-width: 62ch; margin-top: 1.5rem; color: var(--ivory-150); }

  .text-link {
    display: inline-flex;
    gap: 0.75rem;
    margin-top: 1.6rem;
    color: var(--gold-bright);
    font-family: var(--display);
    text-decoration: none;
  }

  .text-link span { transition: transform 350ms var(--ease-luxury); }
  .text-link:hover span { transform: translateX(0.45rem); }

  .site-footer__ornament { font-family: var(--display); font-size: 1.45rem; line-height: 1; transform: rotate(45deg); }
}

@layer motion {
  [data-reveal] {
    opacity: 0;
    transform: translateY(1.1rem);
    transition: opacity 900ms var(--ease-luxury), transform 1100ms var(--ease-luxury);
  }

  [data-reveal="header"] { transform: translateY(-1rem); }
  [data-reveal="intro"] { transition-delay: 140ms; }
  [data-reveal="panel"]:first-child { transition-delay: 260ms; transform: translateX(-1.5rem); }
  [data-reveal="panel"]:last-child { transition-delay: 340ms; transform: translateX(1.5rem); }
  [data-reveal="featured"] { transition-delay: 440ms; }

  body.is-ready [data-reveal].is-visible,
  body.is-ready [data-reveal="header"] {
    opacity: 1;
    transform: none;
  }

  body.is-ready .jewel-rule span,
  body.is-ready .mini-rule span { animation: rule-draw 1100ms 380ms var(--ease-luxury) both; }

  body.is-ready .stage-book { animation: book-arrive 1000ms var(--arrival-delay, 520ms) var(--ease-luxury) both; }
  .stage-book--jewel { --arrival-delay: 620ms; }

  @keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes book-arrive { from { opacity: 0; transform: translate3d(var(--parallax-x, 0), 2.2rem, 0) rotateY(var(--book-rotate, 0deg)) scale(0.96); } to { opacity: 1; transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) rotateY(var(--book-rotate, 0deg)) scale(1); } }
}

@layer components {
  .inner-page { min-height: 100vh; background: var(--ivory-100); }
  .inner-header { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 5.6rem; padding: .55rem clamp(1rem,4vw,4rem); color: var(--ivory-100); background: var(--green-950); border-bottom: 4px double var(--gold-dark); }
  .inner-brand { display:flex; align-items:center; gap:.8rem; width:max-content; color:var(--gold-bright); font-family:var(--display); font-size:1.05rem; line-height:1; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
  .inner-brand small { font-family:var(--sans); font-size:.55rem; letter-spacing:.22em; }
  .inner-brand__emblem { width:3.8rem; height:3.8rem; overflow:hidden; background-image:url('assets/brand/marcus-family-publishing-logo.webp'); background-size:8.2rem; background-position:center 27%; background-repeat:no-repeat; }
  .inner-header nav { display:flex; gap:2rem; font-family:var(--display); }
  .inner-header nav a { color:inherit; text-decoration:none; }
  .inner-header nav a[aria-current="page"] { color:var(--gold-bright); }
  .catalogue-hero { min-height:20rem; padding:5rem 1rem 4rem; text-align:center; border-bottom:1px solid var(--gold-dark); }
  .catalogue-hero--children { background:radial-gradient(circle at 50% 100%,var(--rose-light),transparent 32rem),var(--ivory-100); }
  .catalogue-hero--heritage { color:var(--ivory-100); background:radial-gradient(circle at 50% 100%,oklch(40% .07 76/.28),transparent 28rem),var(--green-900); }
  .catalogue-hero>p:first-child,.book-kicker,.book-preview header>p { color:var(--gold-dark); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
  .catalogue-hero h1 { margin:.7rem 0; font:500 clamp(2.7rem,6vw,5.8rem)/.95 var(--display); letter-spacing:.025em; text-transform:uppercase; }
  .catalogue-hero h1 i { color:var(--gold-dark); font-weight:400; }
  .catalogue-shell { max-width:88rem; margin:auto; padding:clamp(3rem,6vw,6rem) clamp(1rem,4vw,4rem) 7rem; }
  .catalogue-intro { display:flex; align-items:end; justify-content:space-between; padding-bottom:1rem; border-bottom:1px solid var(--gold-dark); }
  .catalogue-intro h2 { font:400 clamp(2rem,4vw,3.8rem)/1 var(--display); }
  .catalogue-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr)); gap:clamp(2rem,4vw,4.5rem) clamp(1.25rem,2.5vw,2.8rem); padding-top:3rem; }
  .catalogue-book { min-width:0; }
  .catalogue-book__cover { position:relative; display:block; aspect-ratio:1/1.12; overflow:hidden; background:var(--ivory-150); box-shadow:none; }
  .catalogue-book__cover img { width:100%; height:100%; object-fit:contain; transition:transform 700ms var(--ease-luxury); }
  .catalogue-book__cover span { position:absolute; inset:auto 0 0; padding:.75rem; color:var(--ivory-100); background:var(--green-900); text-align:center; text-transform:uppercase; letter-spacing:.12em; font-size:.65rem; transform:translateY(100%); transition:transform 450ms var(--ease-luxury); }
  .catalogue-book__cover:hover img { transform:scale(1.035); }
  .catalogue-book__cover:hover span { transform:none; }
  .catalogue-book>p:first-of-type { margin-top:1rem; color:var(--rose-dark); font-size:.58rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .catalogue-book h3 { margin-top:.35rem; font:500 1.25rem/1.08 var(--display); }
  .catalogue-book h3 a { text-decoration:none; }
  .catalogue-book__author { margin-top:.55rem; font:400 .85rem/1.3 var(--display); }
  .inner-footer { display:flex; justify-content:center; align-items:center; gap:1rem; min-height:4.5rem; color:var(--gold-bright); background:var(--green-950); border-top:4px double var(--gold-dark); }
  .inner-footer a { color:inherit; font-family:var(--display); text-decoration:none; text-transform:uppercase; letter-spacing:.12em; }
  .book-hero { position:relative; display:grid; grid-template-columns:minmax(18rem,32rem) minmax(20rem,42rem); justify-content:center; gap:clamp(3rem,8vw,9rem); align-items:center; min-height:calc(100vh - 5.6rem); padding:7rem clamp(1rem,5vw,6rem) 5rem; background:radial-gradient(circle at 20% 30%,oklch(100% .03 82/.65),transparent 30rem),var(--ivory-100); }
  .book-back { position:absolute; top:2rem; left:clamp(1rem,5vw,6rem); color:var(--gold-dark); text-decoration:none; }
  .book-hero__cover img { width:100%; max-height:68vh; object-fit:contain; filter:none; }
  .book-hero__copy h1 { max-width:18ch; margin:.7rem 0 1rem; font:500 clamp(2.7rem,5vw,5.6rem)/.92 var(--display); }
  .book-author { font:400 1.1rem var(--display); }
  .book-hero__copy .mini-rule { justify-content:flex-start; margin:1.5rem 0; }
  .book-description { max-width:58ch; font:400 clamp(1rem,1.25vw,1.18rem)/1.7 var(--display); }
  .book-buy { margin-top:2rem; color:var(--gold-bright); background:var(--green-900); border:1px solid var(--gold); }
  .book-actions { display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; margin-top:2rem; }
  .book-actions .book-buy { margin-top:0; }
  .book-preview-link { color:var(--green-950); background:transparent; border:1px solid var(--gold-dark); }
  .book-preview-link:hover,.book-preview-link:focus-visible { color:var(--ivory-100); background:var(--green-900); }
  .book-buy--soon { display:inline-flex; cursor:default; opacity:.78; }
  .book-buy--complete { display:inline-flex; cursor:default; color:var(--green-950); background:var(--gold-bright); }
  .book-about { display:grid; grid-template-columns:minmax(16rem,22rem) minmax(0,48rem); justify-content:center; gap:clamp(2.5rem,7vw,8rem); padding:clamp(4.5rem,8vw,8rem) clamp(1rem,5vw,6rem); background:linear-gradient(105deg,oklch(97% .018 82),var(--ivory-100)); border-top:1px solid oklch(58% .08 76/.45); }
  .book-about__heading { align-self:start; position:sticky; top:8rem; }
  .book-about__heading>p { color:var(--gold-dark); font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
  .book-about h2 { max-width:9ch; margin:.65rem 0 1.4rem; font:500 clamp(2.6rem,4.5vw,4.6rem)/.94 var(--display); }
  .book-about .mini-rule { justify-content:flex-start; }
  .book-about__copy { padding-top:.15rem; }
  .book-about__copy p { color:var(--green-950); font:400 clamp(1.05rem,1.25vw,1.2rem)/1.78 var(--display); }
  .book-about__copy p+p { margin-top:1.55rem; }
  .book-about__copy p:last-child { margin-top:2.25rem; padding:1.4rem 1.6rem; background:oklch(91% .035 80/.52); border-left:2px solid var(--gold-dark); font-size:clamp(.98rem,1.12vw,1.08rem); }
  .book-preview { padding:clamp(4rem,8vw,8rem) clamp(1rem,5vw,6rem); color:var(--ivory-100); background:var(--green-950); }
  .book-preview header { max-width:80rem; margin:0 auto 3rem; text-align:center; }
  .book-preview h2 { font:400 clamp(2.2rem,4vw,4.2rem)/1 var(--display); }
  .preview-spread { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,3vw,3rem); max-width:82rem; margin:auto; align-items:center; }
  .preview-spread button { padding:0; background:none; cursor:zoom-in; transition:transform 600ms var(--ease-luxury); }
  .preview-spread button:nth-child(1){transform:rotate(-2deg)} .preview-spread button:nth-child(3){transform:rotate(2deg)}
  .preview-spread button:hover { transform:translateY(-.7rem) rotate(0); }
  .preview-spread img { width:100%; box-shadow:0 1.5rem 3rem oklch(8% .02 160/.5); }
  .heritage-preview-carousel { position:relative; max-width:92rem; margin:auto; padding:0 4rem 3.4rem; }
  .heritage-preview-rail { --preview-gap:clamp(1rem,2vw,2rem); display:flex; gap:var(--preview-gap); padding:2.25rem .5rem 2.8rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; mask-image:none; }
  .heritage-preview-rail::-webkit-scrollbar { display:none; }
  .heritage-preview-rail:focus-visible { outline:1px solid var(--gold); outline-offset:-3px; }
  .heritage-preview-slide { flex:0 0 calc((100% - (2 * var(--preview-gap))) / 3); margin:0; scroll-snap-align:center; opacity:1; filter:none; transform:none; transform-origin:center; transition:transform 650ms var(--ease-luxury); }
  .heritage-preview-slide.is-centered { opacity:1; filter:none; transform:none; }
  .heritage-preview-zoom { display:block; width:100%; padding:0; background:transparent; border:0; cursor:zoom-in; }
  .heritage-preview-slide img { display:block; width:100%; max-height:72vh; object-fit:contain; background:oklch(97% .015 80); box-shadow:none; }
  .heritage-preview-slide figcaption { margin-top:1.15rem; color:var(--ivory-100); font:400 clamp(.95rem,1.3vw,1.15rem)/1.35 var(--display); text-align:center; letter-spacing:.025em; }
  .preview-carousel-control { position:absolute; top:43%; z-index:4; display:grid; width:3.25rem; height:5rem; place-items:center; color:var(--gold-bright); font:400 2.5rem/1 var(--display); background:oklch(12% .04 165/.9); border:1px solid oklch(72% .09 76/.7); cursor:pointer; transition:transform 360ms var(--ease-luxury),background 260ms ease; }
  .preview-carousel-control:hover,.preview-carousel-control:focus-visible { background:var(--green-900); transform:scale(.94); }
  .preview-carousel-control--previous { left:.25rem; }
  .preview-carousel-control--next { right:.25rem; }
  .heritage-preview-status { position:absolute; right:4rem; bottom:0; left:4rem; color:var(--gold-bright); font:.68rem/1 var(--sans); text-align:center; letter-spacing:.12em; text-transform:uppercase; }
  .preview-lightbox { width:min(94vw,78rem); max-width:none; height:94vh; max-height:none; padding:2.5rem 4rem 1.5rem; color:var(--ivory-100); background:var(--green-950); border:1px solid var(--gold-dark); }
  .preview-lightbox::backdrop { background:oklch(10% .035 165/.88); }
  .preview-lightbox[open] { display:grid; grid-template-rows:minmax(0,1fr) auto; place-items:center; }
  .preview-lightbox img { width:auto; max-width:100%; height:100%; max-height:calc(94vh - 6rem); object-fit:contain; background:oklch(99% .006 82); box-shadow:none; }
  .preview-lightbox p { margin-top:.8rem; color:var(--gold-bright); font:400 1rem/1.3 var(--display); text-align:center; }
  .preview-lightbox__close { position:absolute; top:.65rem; right:.85rem; display:grid; width:2.5rem; height:2.5rem; place-items:center; color:var(--gold-bright); font:400 2rem/1 var(--display); background:transparent; border:1px solid var(--gold-dark); cursor:pointer; }
  .preview-pending,.not-found { min-height:25rem; display:grid; place-content:center; text-align:center; }
  .preview-pending h3 { margin:.7rem; font:400 2rem var(--display); }
  .preview-pending p { max-width:42rem; }
}

@layer responsive {
  @media (min-width: 1200px) {
    body:not(.inner-page) .collection-panel { min-height:29.2rem; }
    body:not(.inner-page) .featured-toolbar { display:none; }
    body:not(.inner-page) .featured { padding-bottom:1rem; }
  }
  @media (max-width: 760px) {
    .inner-header { grid-template-columns:1fr auto; }
    .inner-header nav { order:3; grid-column:1/-1; justify-content:center; gap:1rem; padding:.65rem 0 .2rem; }
    .inner-header>.button { display:none; }
    .book-hero { grid-template-columns:1fr; padding-top:5rem; }
    .book-hero__cover img { max-height:30rem; }
    .book-about { grid-template-columns:1fr; gap:2rem; }
    .book-about__heading { position:static; }
    .book-about h2 { max-width:none; }
    .preview-spread { grid-template-columns:1fr; max-width:32rem; }
    .heritage-preview-carousel { padding-right:2.6rem; padding-left:2.6rem; }
    .heritage-preview-rail { padding-right:calc(50% - 39vw); padding-left:calc(50% - 39vw); }
    .heritage-preview-slide { flex-basis:78vw; }
    .preview-carousel-control { width:2.45rem; height:4rem; }
    .heritage-preview-status { right:2rem; left:2rem; }
    .preview-lightbox { width:96vw; height:92vh; padding:3rem .75rem 1rem; }
    .catalogue-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (max-width: 430px) { .catalogue-grid { grid-template-columns:1fr; } }
}

@layer responsive {
  @media (min-width: 93rem) {
    .site-header { padding-right: calc((100vw - 92rem) / 2); padding-left: calc((100vw - 92rem) / 2); }
    .brand-intro, .collection-stage, .featured { max-width: 96rem; margin-inline: auto; }
    .book-rail { grid-auto-columns: minmax(15.2rem, 1fr); }
  }

  @media (max-width: 72rem) {
    :root { --header-height: 5.2rem; }
    .site-header { grid-template-columns: 1fr auto auto; gap: 1rem; }
    .brand-mark img { width: 3.8rem; height: 3.8rem; }
    .brand-mark__name { font-size: 0.92rem; }
    .primary-nav {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      padding: 0.75rem var(--page-pad) 1.25rem;
      background: var(--green-950);
      border-top: 1px solid oklch(68% 0.08 76 / 0.35);
      border-bottom: 1px solid var(--gold-dark);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-0.75rem);
      transition: opacity 280ms ease, transform 420ms var(--ease-luxury);
    }

    .primary-nav.is-open { opacity: 1; pointer-events: auto; transform: none; }
    .primary-nav a { padding: 0.65rem 0; text-align: center; }
    .primary-nav i { display: none; }

    .menu-button {
      display: grid;
      gap: 0.28rem;
      width: 2.7rem;
      height: 2.7rem;
      place-content: center;
      color: var(--gold-bright);
      background: transparent;
      border: 1px solid var(--gold-dark);
      cursor: pointer;
    }

    .menu-button > span:not(.sr-only) { width: 1.15rem; height: 1px; background: currentColor; transition: transform 300ms var(--ease-soft), opacity 200ms ease; }
    .menu-button[aria-expanded="true"] > span:nth-child(1) { transform: translateY(0.34rem) rotate(45deg); }
    .menu-button[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
    .menu-button[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-0.34rem) rotate(-45deg); }

    .button--header { font-size: 0; min-width: 3.2rem; padding: 0.65rem; }
    .button--header::after { content: "Amazon"; font-size: 0.68rem; }

    .collection-panel { min-height: 31rem; }
    .collection-panel .button { right: 18%; left: 18%; }
    .book-rail[data-count="6"] { grid-template-columns: none; grid-auto-flow: column; }
  }

  @media (max-width: 53rem) {
    .collection-stage { grid-template-columns: 1fr; }
    .collection-panel { min-height: clamp(31rem, 82vw, 38rem); }
    .cover-stage { height: clamp(19rem, 55vw, 27rem); }
    .stage-book--heritage { width: clamp(10rem, 31vw, 16rem); }
    .stage-book--lamp { left: 21%; }
    .stage-book--jewel { right: 21%; }
    .carousel-book { flex-basis: clamp(10rem, 25vw, 12.5rem); }
    .heritage-carousel-book { flex-basis:clamp(10rem,28vw,13rem); }
    .about { grid-template-columns: 1fr; }
    .about__seal { max-width: 18rem; }
  }

  @media (max-width: 38rem) {
    :root { --page-pad: 0.8rem; }
    .site-header { min-height: 4.75rem; gap: 0.5rem; }
    .brand-mark img { width: 3.35rem; height: 3.35rem; }
    .brand-mark__name { display: none; }
    .button--header { display: none; }
    .site-header { grid-template-columns: 1fr auto; }
    .brand-intro { min-height: 10rem; padding-top: 1.35rem; }
    .brand-intro h1 { font-size: 1.8rem; letter-spacing: 0.055em; }
    .brand-intro__promise { font-size: 1.18rem; line-height: 1.18; }
    .brand-intro__support { max-width: 28rem; margin: 0.35rem auto 0; font-size: 0.92rem; }
    .watermark { display: none; }
    .collection-stage { gap: 0.8rem; padding: 0 0.55rem; }
    .collection-panel { min-height: 29.5rem; padding: 1.1rem 0.65rem 0.8rem; }
    .collection-panel__heading h2 { font-size: 1.62rem; }
    .cover-stage { height: 18.8rem; margin-top: 0.1rem; overflow: hidden; }
    .stage-book--heritage { width: 9.8rem; }
    .stage-book--lamp { left: 8%; }
    .stage-book--jewel { right: 8%; }
    .collection-panel--children { min-height: 30.5rem; }
    .cover-stage--children { height: 19.8rem; }
    .carousel-rail { gap: 0.8rem; height: calc(100% - 4.4rem); padding-right: calc(50% - 5.25rem); padding-left: calc(50% - 5.25rem); }
    .carousel-book { flex-basis: 10.5rem; }
    .heritage-carousel-rail { gap:1.1rem; padding-right:calc(50% - 5rem); padding-left:calc(50% - 5rem); }
    .heritage-carousel-book { flex-basis:10rem; }
    .carousel-edge { top: 39%; width: 2rem; height: 3.25rem; }
    .carousel-current { right: 2.7rem; bottom: 3.6rem; left: 2.7rem; font-size: 0.78rem; }
    .collection-panel .button { right: 10%; bottom: 1.2rem; left: 10%; }
    .featured { padding-right: 0.55rem; padding-left: 0.55rem; }
    .section-title { gap: 0.5rem; }
    .section-title h2 { font-size: 1.15rem; }
    .featured-toolbar { align-items: flex-end; }
    .filter-group { gap: 0.12rem; }
    .filter-button { padding: 0.35rem 0.35rem; font-size: 0.58rem; }
    .rail-controls { display: none; }
    .book-rail { grid-auto-columns: minmax(17rem, 82vw); }
    .book-card { min-height: 11.5rem; }
    .about { padding-right: 1.25rem; padding-left: 1.25rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .stage-book { --parallax-x: 0 !important; --parallax-y: 0 !important; }
    .carousel-book { transform: scale(0.92); }
    .carousel-book.is-centered { transform: scale(1); }
  }
}