:root {
    --ground: #1E2E43;
    --ink: #F3EEE4;
    --ink-soft: #C9D3DE;
    --rule: #4A5C72;
    --muted: #8FA0B3;
    --shelf: #EEE8DF;
    --shelf-ink: #1E2E43;
    --shelf-muted: #526171;
    --serif-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --serif-text: 'PT Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

    /* Carousel geometry — phone first */
    --book-w: min(54vw, 14.375rem);
    --book-h: calc(var(--book-w) * 1.434483);
    --gap: max(28px, calc(var(--book-w) * 0.12));
  }
  @media (min-width: 720px) {
    :root { --book-w: 14rem; --gap: max(34px, calc(var(--book-w) * 0.12)); }
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: var(--ground); }
  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 28px; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 100;
    padding: 12px 18px; background: var(--ink); color: var(--ground);
    transform: translateY(-200%); font-weight: 500;
  }
  .skip-link:focus { transform: none; outline: 3px solid var(--ink); outline-offset: 3px; }
  #main-content:focus { outline: none; }

  header.wrap { padding-top: 56px; }
  .imprint { text-align: center; font-weight: 500; line-height: 1.3; }
  .imprint .name { font-size: 0.9375rem; letter-spacing: 0.32em; }
  .imprint .sub  { font-size: 0.75rem; letter-spacing: 0.42em; color: var(--ink-soft); margin-top: 4px; }
  .rule { height: 1px; background: var(--rule); margin: 36px 0 48px; border: 0; }

  .masthead { text-align: center; padding-bottom: 44px; }
  .masthead h1 {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: clamp(1.875rem, 6.4vw, 3rem);
    letter-spacing: 0.12em;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  .masthead .descriptor {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(1rem, 2.2vw, 1.125rem);
    color: var(--ink-soft);
    margin-top: 10px;
  }

  /* ---------------- The shelf ---------------- */
  .shelf {
    background: var(--shelf);
    color: var(--shelf-ink);
    padding: 8px 0 36px;
    overflow: hidden;
  }
  .track {
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* The controller animates both navigation and settling. Native snapping
       would jump to a book between the programmatic animation frames. */
    scroll-behavior: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    outline: none;
    cursor: grab;
  }
  .track::-webkit-scrollbar { display: none; }
  .track.is-dragging { cursor: grabbing; }
  .book-rail {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--gap);
    width: max-content;
    padding: calc(var(--book-h) * 0.1 + 40px) calc((var(--track-width, 100vw) - var(--book-w)) / 2) calc(var(--book-h) * 0.1 + 44px);
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  /* Layout anchors stay stationary. Only their inner covers animate. */
  .book {
    --t: 0;
    position: relative;
    flex: 0 0 var(--book-w);
    height: var(--book-h);
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .book:focus-visible { outline: none; }
  .book::after {
    content: "";
    position: absolute;
    width: 40px; height: 4px;
    left: calc(50% - 20px); bottom: calc(-0.1 * var(--book-h) - 18px);
    border-radius: 2px;
    background: var(--shelf-ink);
    opacity: 0;
    pointer-events: none;
  }
  .book:focus-visible::after,
  .track:focus-visible .book.is-active::after { opacity: 1; }
  .book-visual {
    position: relative;
    display: block;
    height: 100%;
    isolation: isolate;
    transform: scale(calc(1 + 0.2 * var(--t)));
    transform-origin: center;
    will-change: transform;
  }
  .book.is-active { cursor: default; }
  .book img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }


  /* A fixed blur fades with the cover's depth; no filter switches mid-scroll. */
  .book-visual::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: 12%; bottom: 2%;
    border-radius: 8px;
    background: rgba(14, 22, 34, 0.22);
    filter: blur(12px);
    transform: translateY(7px);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  .book.is-active .book-visual::before {
    opacity: clamp(0, calc((var(--t) - 0.65) / 0.35), 1);
  }

  /* Caption + controls */
  .controls {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    margin: 8px auto 0;
    padding: 0 20px;
    position: relative;
    z-index: 20;
  }
  .caption { text-align: center; min-height: 5.5rem; display: flex; flex-direction: column; justify-content: center; }
  .caption .vol { font-size: 0.875rem; color: var(--shelf-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
  .caption .title { font-family: var(--serif-text); font-size: clamp(1.0625rem, 2.4vw, 1.25rem); line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; }
  .arrow {
    width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; border-radius: 50%;
    border: 1px solid #6A7787;
    background: transparent; color: var(--shelf-ink);
    display: grid; place-items: center; cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
  }
  .arrow:hover:not([aria-disabled="true"]) { background: rgba(30, 46, 67, 0.08); }
  .arrow:focus-visible { outline: 3px solid var(--shelf-ink); outline-offset: 3px; }
  .arrow[aria-disabled="true"] { opacity: 0.4; cursor: default; }
  .arrow svg { width: 18px; height: 18px; }

  .dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0 6px; margin-top: 16px; position: relative; z-index: 20; }
  .dot { width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
  .dot::before {
    content: ""; width: 8px; height: 8px; border-radius: 5px;
    background: #6A7787;
    transition: background 0.2s, width 0.2s;
  }
  .dot[aria-current="true"]::before { background: var(--shelf-ink); width: 18px; }
  .dot:focus-visible { outline: 3px solid var(--shelf-ink); outline-offset: -4px; border-radius: 50%; }

  .intro { padding-top: 52px; }
  .promise { font-family: var(--serif-text); font-size: clamp(1.25rem, 3vw, 1.5rem); line-height: 1.35; max-width: 30ch; }
  .body { color: var(--ink-soft); margin-top: 16px; max-width: 58ch; }
  .status { margin-top: 36px; font-family: var(--serif-text); font-size: 1.0625rem; }

  footer { margin-top: auto; padding: 56px 28px 40px; font-size: 0.8125rem; color: var(--muted); text-align: center; letter-spacing: 0.02em; }

  @media (max-width: 560px) {
    header.wrap { padding-top: 40px; }
    .wrap { padding: 0 22px; }
    .rule { margin: 28px 0 36px; }
    .masthead { padding-bottom: 32px; }
    .book-rail { padding-top: calc(var(--book-h) * 0.1 + 32px); padding-bottom: calc(var(--book-h) * 0.1 + 42px); }
    .intro { padding-top: 40px; }
    .controls { grid-template-columns: 1fr 1fr; gap: 16px; }
    .caption { grid-column: 1 / -1; grid-row: 1; min-height: 5.5rem; }
    #prev { grid-column: 1; grid-row: 2; justify-self: end; }
    #next { grid-column: 2; grid-row: 2; justify-self: start; }
  }
  @media (max-width: 360px) {
    .caption { min-height: 5.5rem; }
    .dots { gap: 0; }
  }
  @media (forced-colors: active) {
    .dot::before { background: ButtonText; }
    .dot[aria-current="true"]::before { background: Highlight; }
    .book::after { background: Highlight; forced-color-adjust: none; }
    .book-visual::before { display: none; }
  }