/* ═══════════════════════════════════════════════════════════════════
   THE ALBUM — a physical book at the centre of the screen.

   WHAT CHANGED, AND WHY
   The previous version made the PAGE behave like an album: full-screen
   panels that stacked and covered each other. It read as "a website with
   a scroll animation" because there was never a book on screen — only
   sections taking turns. This layer puts the object itself in front of
   the visitor: a closed album, centred, with covers, a spine, paper
   edges and a shadow. The album is the interface.

   THE BINDING IS ON THE RIGHT
   This is a Hebrew album, so it is right-bound: closed, the spine is the
   right edge and the fore-edge is on the left. You open it by lifting the
   LEFT edge of the cover and swinging it RIGHT, over the spine. Every
   leaf turns the same way — left to right — which is the opposite of a
   Latin book and the reason every geometric rule in this file is written
   in PHYSICAL properties (left/right), never logical ones. `inset-inline-
   start` in an RTL document resolves to the right, which would mirror the
   whole binding.

   THE MECHANISM
   Every leaf is a sheet: `.book__face--front` on one side, `--back` on
   the other, `backface-visibility: hidden` so exactly one is ever facing
   you. All leaves sit stacked on the LEFT half with `transform-origin:
   right center` — the spine. book.js turns leaf i by mapping scroll
   position straight onto its angle:

       theta(i) = ease( clamp(scrollProgress - i, 0, 1) ) * 180deg

   so the turn is the scroll. Scroll a little and the page lifts a
   little; stop and it stops mid-air. Nothing waits for an animation.

   THE PILE IS REAL
   Each leaf carries `translateZ(-i * 0.55px)` AFTER its rotation. Because
   the translate happens in the leaf's own rotated frame, one formula
   gives both piles correctly: unturned leaves sink away from the viewer
   in order (leaf 0 on top of the closed book), and once past 180 degrees
   the same offset resolves toward the viewer, so the turned leaves stack
   up on the right with the most recent on top. That is also what gives
   the book its thickness.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* --paper / --paper-edge / --table / --board live in design-system.css:
     the gallery chapters need the same material and neither layer owns it.
     The table is deliberately several steps darker than the paper — cream
     on cream gave a book with no edges. */

  /* Page geometry. A photo-album page is portrait; the spread is two of
     them. Capped on all three axes so the open spread always fits, and
     sized to clear the fixed header at the top of the viewport. */
  --page-h: min(70dvh, 46vw, 680px);
  --page-w: calc(var(--page-h) * 0.80);

  /* Scroll distance per page turn. This is the pace control: lower feels
     quicker and more responsive, higher gives a longer, slower turn. */
  --turn: 72dvh;
  --turn-m: 62dvh;
}

/* ── The scroll track ────────────────────────────────────────────────
   One screen to take in the closed album, then one turn-distance per
   leaf. --turns is written into the markup by book-pages.js, because
   only the generator knows how many leaves the album ended up with. */

.album {
  position: relative;
  background: var(--table);
  block-size: calc(100dvh + var(--turns, 6) * var(--turn));
}

.album__viewport {
  position: sticky;
  inset-block-start: 0;
  block-size: 100dvh;
  display: grid;
  place-items: center;
  /* The header is fixed and owns the top of the screen; padding here
     keeps the album out from under it without shrinking the page. */
  padding: 4.5rem 1rem 3.5rem;
  /* Gentle. A short perspective turns an album into a funfair. */
  perspective: 2600px;
  perspective-origin: 50% 44%;
}

/* A soft pool of light under the album, so it is not floating on a flat
   colour field. */
.album__viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 38%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 62%),
    radial-gradient(90% 70% at 50% 100%,
      rgba(74, 52, 38, 0.07) 0%,
      rgba(74, 52, 38, 0) 70%);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .album__viewport::before {
    background:
      radial-gradient(120% 90% at 50% 38%, rgba(255, 240, 225, 0.06) 0%, rgba(255, 240, 225, 0) 62%),
      radial-gradient(90% 70% at 50% 100%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%);
  }
}

/* ── The book ────────────────────────────────────────────────────────
   Two pages wide when open. Closed, only the left half exists, so the
   whole book is nudged right by half a page to keep the cover centred —
   and slides back to 0 as the cover opens. That slide IS the unfold. */

.book {
  position: relative;
  inline-size: calc(var(--page-w) * 2);
  block-size: var(--page-h);
  transform-style: preserve-3d;
  transform: translateX(calc((1 - var(--open, 0)) * 25%));
  will-change: transform;
}

/* Drop shadow. Its right edge tracks the unfold, so a closed album casts
   a shadow the size of a closed album. */
.book__shadow {
  position: absolute;
  inset-block: 2% -2.5%;
  left: 0;
  right: calc((1 - var(--laid, 0)) * var(--page-w));
  box-shadow: 0 34px 60px -18px rgba(52, 36, 26, 0.42),
              0 4px 10px rgba(52, 36, 26, 0.16);
  transform: translateZ(-10px);
  pointer-events: none;
}

/* Paper edges — the block of the book seen from the side. The right edge
   only exists once there are turned leaves to make it. */
.book__edge {
  position: absolute;
  inset-block: 1.2%;
  inline-size: 7px;
  transform: translateZ(-3px);
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    var(--paper) 0 1px,
    var(--paper-edge) 1px 2.5px);
}

.book__edge--left { left: -6px; border-radius: 3px 0 0 3px; }

.book__edge--right {
  right: -6px;
  border-radius: 0 3px 3px 0;
  opacity: var(--laid, 0);
}

/* The gutter. A real spread is never flat: the paper curves into the
   binding and the light dies there. Sits just above the leaves lying
   flat, and well below whichever leaf is mid-turn. */
.book__gutter {
  position: absolute;
  inset-block: 0;
  left: calc(var(--page-w) - 34px);
  inline-size: 68px;
  transform: translateZ(0.4px);
  pointer-events: none;
  opacity: var(--laid, 0);
  background: linear-gradient(to right,
    rgba(60, 42, 32, 0) 0%,
    rgba(60, 42, 32, 0.05) 26%,
    rgba(60, 42, 32, 0.17) 47%,
    rgba(60, 42, 32, 0.20) 50%,
    rgba(60, 42, 32, 0.17) 53%,
    rgba(60, 42, 32, 0.05) 74%,
    rgba(60, 42, 32, 0) 100%);
}

/* ── A leaf ──────────────────────────────────────────────────────────
   Physical properties only. The leaf lives on the LEFT half and hinges
   on its right edge, which is the spine. */

.book__leaf {
  position: absolute;
  top: 0;
  left: 0;
  inline-size: var(--page-w);
  block-size: 100%;
  transform-origin: right center;
  transform-style: preserve-3d;
  will-change: transform;
}

.book__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  /* A hairline so a white page never dissolves into the light pool. */
  box-shadow: inset 0 0 0 1px rgba(74, 52, 38, 0.07);
}

.book__face--back { transform: rotateY(180deg); }

/* The square: a bound album's boards overhang its pages on three sides
   and sit flush at the spine. Besides being what a real book does, it is
   what stops the leaf underneath rasterising a pixel proud of the cover —
   which showed as a sliver of page two along the closed fore-edge. */
.book__leaf:not([data-leaf="0"]) .book__face {
  top: 1.5%;
  bottom: 1.5%;
  left: 2%;
  right: 0;
}

/* A lifted sheet throws a shadow of its own. --lift is zero except
   while this leaf is actually mid-turn. */
.book__face {
  box-shadow:
    inset 0 0 0 1px rgba(74, 52, 38, 0.07),
    0 0 calc(var(--lift, 0) * 52px) calc(var(--lift, 0) * -8px) rgba(52, 36, 26, 0.5);
}

/* The shading that sells the turn: as a leaf lifts, its face catches
   less light. book.js drives --lit from the leaf's own angle. */
.book__face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(28, 18, 12, 1);
  opacity: calc(var(--lit, 0) * 0.24);
  z-index: 4;
}

/* ══════════════════════════════════════════════════════════════════
   PAGE COMPOSITIONS
   Five, so no two spreads read the same. The rule that matters most:
   a landscape photograph is MOUNTED on a portrait page, not bled into
   it. Bleeding a 3:2 frame into a 0.76 page throws away half its width.
   Mounting shows the whole photograph and is what a real album does.
   ══════════════════════════════════════════════════════════════════ */

/* NB: no `position` and no `block-size` here. Every .page is also a
   .book__face, which is absolutely positioned at inset:0 — and because
   .page comes later in this file at equal specificity, a `position:
   relative` here silently won, took both faces out of their absolute
   placement, and stacked them one BELOW the other instead of back to
   back. The whole spread was two pages tall and the right-hand page hung
   off the bottom of the book. */
.page {
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 0.4rem + 1.6vw, 2.1rem);
}

.page__folio {
  position: absolute;
  inset-block-end: clamp(0.7rem, 1.1vw, 1.15rem);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-widest);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  opacity: 0.6;
  z-index: 3;
}

/* The folio sits in the OUTER margin, the way a book sets one: the recto
   is the right-hand page, so its outer edge is the right. */
.page--recto .page__folio { right: clamp(1rem, 1.7vw, 2.1rem); }
.page--verso .page__folio { left: clamp(1rem, 1.7vw, 2.1rem); }

/* ── Cover ───────────────────────────────────────────────────────── */

.page--cover {
  background:
    /* a fine linen tooth — two hairline weaves, no image needed */
    repeating-linear-gradient(90deg, rgba(120, 88, 62, 0.030) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    repeating-linear-gradient(0deg, rgba(120, 88, 62, 0.024) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(150deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(200deg, #F6EEE7 0%, #EADCD0 54%, #DCC9B9 100%);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.5rem, 3vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  .page--cover {
    background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 46%),
      linear-gradient(200deg, #2A211C 0%, #1F1814 52%, #171210 100%);
  }
}

/* The board: a hairline inset frame, the way a bound album is blocked. */
.page--cover .page__frame {
  position: absolute;
  inset: clamp(0.85rem, 1.8vw, 1.7rem);
  border: 1px solid rgba(120, 88, 62, 0.30);
  pointer-events: none;
}

.page--cover .page__frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(120, 88, 62, 0.14);
}

@media (prefers-color-scheme: dark) {
  .page--cover .page__frame { border-color: rgba(220, 190, 160, 0.22); }
  .page--cover .page__frame::after { border-color: rgba(220, 190, 160, 0.10); }
}

.cover__name {
  font-family: var(--font-family-editorial);
  font-weight: 400;
  font-size: clamp(1.5rem, 0.7rem + 2.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.cover__rule {
  inline-size: clamp(2.5rem, 6vw, 4.5rem);
  block-size: 1px;
  background: rgba(120, 88, 62, 0.45);
  margin-block: clamp(0.8rem, 1.6vw, 1.4rem);
}

.cover__sub {
  font-size: clamp(0.68rem, 0.55rem + 0.35vw, 0.86rem);
  letter-spacing: var(--tracking-label);
  color: var(--ink-quiet);
  margin: 0;
}

.cover__year {
  position: absolute;
  inset-block-end: clamp(1.9rem, 3.6vw, 3.2rem);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-quiet);
}

/* The spine board, visible along the binding edge of the closed album. */
.cover__spine {
  position: absolute;
  inset-block: 0;
  right: 0;
  inline-size: clamp(10px, 1.4vw, 18px);
  background: linear-gradient(to left,
    rgba(90, 62, 42, 0.30) 0%,
    rgba(90, 62, 42, 0.12) 45%,
    rgba(90, 62, 42, 0) 100%);
}

/* ── Statement / text pages ──────────────────────────────────────── */

.page--text {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: clamp(1.4rem, 3.2vw, 3.2rem);
}

.page__statement {
  font-family: var(--font-family-editorial);
  font-weight: 400;
  font-size: clamp(0.95rem, 0.55rem + 1.15vw, 1.6rem);
  line-height: 1.55;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
  max-inline-size: 26ch;
  text-wrap: balance;
}

.page__eyebrow {
  font-size: clamp(0.56rem, 0.48rem + 0.22vw, 0.7rem);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  margin-block-end: clamp(0.7rem, 1.6vw, 1.5rem);
}

.page__note + .page__note { margin-block-start: clamp(0.9rem, 1.8vw, 1.6rem); }

.page__note h3 {
  font-family: var(--font-family-editorial);
  font-weight: 400;
  font-size: clamp(0.82rem, 0.6rem + 0.6vw, 1.1rem);
  line-height: 1.25;
  margin: 0 0 0.35em;
  color: var(--color-text-primary);
}

.page__note p {
  font-size: clamp(0.66rem, 0.55rem + 0.32vw, 0.84rem);
  line-height: 1.72;
  color: var(--color-text-secondary);
  margin: 0;
}

.page--notes { justify-content: center; text-align: start; }
.page--notes .page__eyebrow { align-self: center; }

/* ── Mounted plate: the whole photograph, on paper ───────────────── */

.page--mount {
  justify-content: center;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1.15rem);
  /* Optical centre, not geometric: a print dry-mounted with equal margins
     reads as hanging low, so the lower margin is the deeper one. */
  padding-block: clamp(1rem, 0.4rem + 1.6vw, 2.1rem) clamp(2rem, 0.8rem + 3.4vw, 4.4rem);
  padding-inline: clamp(0.9rem, 0.3rem + 1.3vw, 1.7rem);
}

.page__mount {
  margin: 0;
  inline-size: 100%;
  display: flex;
  justify-content: center;
  min-block-size: 0;
}

.page__mount picture { display: block; inline-size: 100%; }

.page__mount img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 100%;
  object-fit: contain;
  /* A print sits slightly proud of the page. */
  box-shadow: 0 2px 5px rgba(52, 36, 26, 0.13),
              0 12px 26px -10px rgba(52, 36, 26, 0.30);
}

.page__caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  text-align: center;
  flex: none;
}

.page__title {
  font-family: var(--font-family-editorial);
  font-weight: 400;
  font-size: clamp(0.8rem, 0.6rem + 0.6vw, 1.15rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.page__kicker {
  font-size: 0.6rem;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.page__link {
  font-size: clamp(0.6rem, 0.5rem + 0.3vw, 0.75rem);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  border-block-end: 1px solid currentColor;
  padding-block-end: 1px;
  transition: color var(--transition-fast);
}

.page__link:hover { color: var(--color-accent); }

/* On a phone this is the only way out of a plate and into the chapter, and it
   was a 29×17 target set in 9.6px type. The pseudo element paints nothing and
   changes no layout — it just extends the area a thumb can land on, which is
   why the album's spacing is untouched. Coarse pointers only: on a desktop
   the pages sit close enough that an invisible overlay could shadow its
   neighbour. */
@media (pointer: coarse) {
  .page__link {
    position: relative;
    font-size: 0.8125rem;
  }

  .page__link::after {
    content: '';
    position: absolute;
    inset: -14px -16px;
  }
}

/* ── Full plate: the photograph is the page ──────────────────────── */

.page--full { padding: 0; }

.page--full .page__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.page--full .page__figure picture { display: block; block-size: 100%; }

.page--full .page__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 46%);
}

.page--full .page__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  justify-content: flex-start;
  padding: clamp(0.85rem, 1.8vw, 1.6rem);
  padding-block-start: clamp(2.5rem, 6vw, 5rem);
  color: #fff;
  background: linear-gradient(to top,
    rgba(10, 8, 7, 0.62) 0%,
    rgba(10, 8, 7, 0.28) 48%,
    rgba(10, 8, 7, 0) 100%);
}

.page--full .page__title,
.page--full .page__kicker,
.page--full .page__link { color: #fff; }
.page--full .page__link { border-color: rgba(255, 255, 255, 0.55); }
.page--full .page__folio { color: rgba(255, 255, 255, 0.75); }

/* ── About page ──────────────────────────────────────────────────── */

.page--about { justify-content: center; text-align: start; gap: 0.6rem; }

.page--about .page__title { font-size: clamp(1rem, 0.7rem + 0.9vw, 1.5rem); }

.page--about p {
  font-size: clamp(0.66rem, 0.55rem + 0.32vw, 0.84rem);
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0;
}

.page__signature {
  font-family: var(--font-family-editorial);
  font-size: clamp(0.95rem, 0.7rem + 0.7vw, 1.35rem);
  color: var(--color-text-primary);
  opacity: 0.7;
  transform: rotate(-2deg);
  transform-origin: right center;
  margin-block-start: 0.2rem;
}

.page__cta {
  align-self: flex-start;
  margin-block-start: 0.5rem;
  font-size: clamp(0.62rem, 0.52rem + 0.3vw, 0.78rem);
  letter-spacing: var(--tracking-wide);
  padding: 0.55em 1.4em;
  background: var(--color-accent);
  color: #fff;
  border-radius: 1px;
  transition: background-color var(--transition-fast);
}

.page__cta:hover { background: var(--color-accent-hover); }

/* 88×27 — the smallest thing on the page, and the only one that asks for a
   booking. Real padding rather than an invisible overlay: this one has a
   filled background, so the target should be visible, not just present. */
@media (pointer: coarse) {
  .page__cta {
    padding: 0.95em 1.7em;
    font-size: 0.8125rem;
  }
}

@media (prefers-color-scheme: dark) { .page__cta { color: var(--color-bg-dark); } }

/* ── End page ────────────────────────────────────────────────────── */

.page--end {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-bg-secondary);
}

/* ══════════════════════════════════════════════════════════════════
   THE FURNITURE AROUND THE BOOK
   As little as possible: where you are in the album, and how to get out
   of it. Everything else belongs on a page.
   ══════════════════════════════════════════════════════════════════ */

.album__meter {
  position: absolute;
  inset-block-end: clamp(1rem, 3vh, 2.2rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: var(--tracking-widest);
  font-variant-numeric: tabular-nums;
  color: var(--ink-quiet);
  pointer-events: none;
  z-index: 3;
}

/* "01 / 06" is a Latin run inside an RTL paragraph, and the slash is a
   neutral character — without its own direction the two numbers swapped
   and it read "06 / 01". */
.album__meter-num { direction: ltr; unicode-bidi: isolate; }

.album__meter-track {
  inline-size: clamp(3rem, 7vw, 5rem);
  block-size: 1px;
  background: var(--color-line-strong);
  position: relative;
}

.album__meter-fill {
  position: absolute;
  inset-block: 0;
  /* right, not left: the album fills the way it is read */
  right: 0;
  inline-size: calc(var(--read, 0) * 100%);
  background: var(--color-accent);
}

.album__hint {
  position: absolute;
  inset-block-end: clamp(3.2rem, 8vh, 5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.64rem;
  letter-spacing: var(--tracking-label);
  color: var(--ink-quiet);
  opacity: var(--hint, 1);
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — one page at a time, still turning
   The leaf boxes dissolve (display: contents) so each FACE becomes a
   page in its own right, and the faces stack with the earliest on top.
   The page on top hinges on its right edge — the spine again — and
   swings away to reveal the next. It never leaves the viewport, because
   a rotation of less than 90 degrees around the right edge keeps every
   point left of that edge.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 879px) {
  .album { block-size: calc(100dvh + var(--turns-m, 12) * var(--turn-m)); }

  :root {
    --page-h: min(72dvh, 128vw);
    --page-w: min(88vw, calc(var(--page-h) * 0.80));
  }

  .album__viewport { perspective: 1400px; perspective-origin: 100% 44%; }

  .book {
    inline-size: var(--page-w);
    transform: none;
  }

  .book__leaf { display: contents; }

  .book__face {
    position: absolute;
    inset: 0;
    backface-visibility: visible;
    transform-origin: right center;
    will-change: transform, opacity;
  }

  .book__face--back { transform: none; }

  .book__shadow { right: 0; }
  .book__edge--right { display: none; }
  .book__gutter { display: none; }

  /* One page, so the spine is the page's own right edge. */
  .book::after {
    content: "";
    position: absolute;
    inset-block: 0;
    right: 0;
    inline-size: 10px;
    background: linear-gradient(to left, rgba(90, 62, 42, 0.22), rgba(90, 62, 42, 0));
    pointer-events: none;
    z-index: 5;
  }

  .page--full .page__caption { padding-block-start: clamp(2rem, 12vw, 4rem); }
}

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION — the album becomes a document
   No sticky, no 3D, no turning. Every face is simply a page in reading
   order, one after another, because the DOM order already IS the reading
   order: cover, inside cover, then front/back of each leaf in turn.
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .album { block-size: auto; }

  .album__viewport {
    position: static;
    block-size: auto;
    display: block;
    perspective: none;
    padding-block: var(--space-16);
  }

  .album__viewport::before { display: none; }
  .album__meter, .album__hint { display: none; }

  .book {
    inline-size: min(92vw, 46rem);
    block-size: auto;
    margin-inline: auto;
    transform: none;
    transform-style: flat;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .book__shadow, .book__edge, .book__gutter { display: none; }

  .book__leaf { display: contents; }

  .book__face {
    position: relative;
    inset: auto;
    transform: none !important;
    backface-visibility: visible;
    block-size: auto;
    min-block-size: 60vh;
    box-shadow: 0 1px 3px rgba(52, 36, 26, 0.10), 0 10px 30px -12px rgba(52, 36, 26, 0.22);
  }

  .book__face::after { display: none; }

  .page--full { min-block-size: 68vh; }
}

/* ══════════════════════════════════════════════════════════════════
   AFTER THE ALBUM
   One section, kept quiet on purpose. The album is the site; this is
   a word from a client and a way to reach the studio. Nothing here
   should compete with the book above it.
   ══════════════════════════════════════════════════════════════════ */

.closing {
  background: var(--color-bg-primary);
  padding-block: clamp(4rem, 2rem + 8vw, 8rem);
  padding-inline: var(--container-padding);
  border-block-start: 1px solid var(--color-line);
}

.closing__inner {
  inline-size: 100%;
  max-inline-size: 64rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(3rem, 1.5rem + 6vw, 6rem);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .closing__inner { grid-template-columns: 1fr 1fr; align-items: start; }
}

.closing__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  margin-block-end: var(--space-6);
}

.closing__eyebrow::before {
  content: "";
  inline-size: 2rem;
  block-size: 1px;
  background: var(--color-line-strong);
  flex: none;
}

.closing__quote .quote-text {
  font-family: var(--font-family-editorial);
  font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.5rem);
  line-height: 1.65;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-block-end: var(--space-6);
  text-wrap: pretty;
}

/* The card chrome from the old layout has no place here. */
.closing__quote .testimonial-card {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  max-inline-size: none;
  margin-inline: 0;
  text-align: start;
}

.closing__quote .testimonial-card::before { display: none; }
.closing__quote .stars { font-size: var(--font-size-base); letter-spacing: 0.18em; margin-bottom: var(--space-4); }
.closing__quote .testimonial-footer { justify-content: flex-start; }
.closing__quote .review-avatar { display: none; }
.closing__quote .testimonial-nav { justify-content: flex-start; margin-top: var(--space-8); }

.closing__title {
  font-family: var(--font-family-editorial);
  font-weight: 400;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.closing__lede {
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-block-end: var(--space-8);
  max-inline-size: 42ch;
}

/* .cta-section carries the contrast fix for the form fields — the base
   stylesheet colours them for a dark panel that no longer exists. Its
   own layout rules are the part that has to go. */
.closing__contact.cta-section {
  background: none;
  padding: 0;
  text-align: start;
}

.closing__contact .contact-form { margin: 0; max-inline-size: min(34rem, 100%); }
.closing__contact .contact-field { margin-bottom: var(--space-3); }
.closing__contact .contact-fields { gap: var(--space-3); }
.closing__contact .btn-primary { margin-block-start: var(--space-2); }

/* ── The footer address ──────────────────────────────────────────────
   Replaces the two social icons. js/site-chrome.js fills it from the
   contactEmail and contactPhone settings, and leaves it hidden while both
   are empty — a detail nobody has entered yet should show nothing at all,
   not a dead link. */

.footer-contact {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-wide);
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.88);
  border-block-end: 1px solid rgba(255, 255, 255, 0.35);
  padding-block-end: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.footer-contact a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
}

/* The dot between the address and the number. Not a border or a pseudo
   element: the line has two, one or no halves depending on what has been
   filled in, and a separator that is part of the markup disappears with the
   half it belongs to. */
.footer-contact__sep {
  display: inline-block;
  margin-inline: 0.7em;
  color: rgba(255, 255, 255, 0.4);
}