/* ============================================================
   Project pages (redesign). Same artboard-unit system as base.css:
   1u = 1 design pixel on the 1920px artboard.
   Measurements come from page 3 of newportfolio.pdf.
   ============================================================ */

.pwrap {
  width: calc(1670 * var(--u));
  max-width: calc(100% - 40px);
  margin-inline: auto;
}

/* ---------------- Hero ---------------- */

.p-hero { padding-top: calc(109.5 * var(--u)); }
.p-hero-media {
  aspect-ratio: 1670 / 665;
  background: #ddd;
  overflow: hidden;
}
.p-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- Title ---------------- */

.p-title {
  margin-top: calc(30 * var(--u));
  font-weight: 500;
  font-size: calc(44.2 * var(--u));
  line-height: 1.325;
}

/* ---------------- Overview + info box ---------------- */

.p-overview {
  margin-top: calc(30 * var(--u));
  border-top: 1px solid var(--ink);
  padding: calc(41.3 * var(--u)) 0 calc(41.4 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(60 * var(--u));
}

.p-overview-text { width: calc(1070 * var(--u)); margin-top: calc(-1.5 * var(--u)); }
.p-h2 {
  font-weight: 500;
  font-size: calc(29.6 * var(--u));
  line-height: 1.325;
}
.p-overview-text .p-h2 { margin-bottom: calc(13.5 * var(--u)); }
.p-overview-text p {
  font-weight: 300;
  font-size: calc(24.3 * var(--u));
  line-height: 1.2;
}
.p-overview-text p + p { margin-top: calc(14 * var(--u)); }
.p-overview-text .p-block { margin-top: calc(40 * var(--u)); }
.p-overview-text .p-block p + p { margin-top: calc(14 * var(--u)); }
.logo-compare { display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u)); margin-bottom: calc(28 * var(--u)); }
.logo-tile { position: relative; margin: 0; height: calc(460 * var(--u)); display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink); }
.logo-tile { background: #fff; }
.logo-tile img { display: block; height: auto; }
.logo-tile.is-old img { width: calc(520 * var(--u)); }
.logo-tile.is-new img { width: calc(560 * var(--u)); }
.logo-tag { position: absolute; left: calc(26 * var(--u)); top: calc(22 * var(--u)); font-weight: 500; font-size: calc(22 * var(--u)); line-height: 1; }
.ba-flow { display: grid; column-gap: calc(28 * var(--u)); row-gap: calc(14 * var(--u)); align-items: start; }
.ba-posters { grid-template-columns: 1fr auto 1fr 1fr; }
.ba-sheets { grid-template-columns: 1fr 1fr auto 1fr 1fr; }
.ba-flow figure { margin: 0; grid-row: 2; min-width: 0; }
.ba-flow img { display: block; width: 100%; height: auto; outline: 1px solid rgba(16, 15, 13, 0.14); outline-offset: -1px; }
/* paired images (posters After, progress sheets Before + After): slightly overlapped, spread on hover */
@media (hover: hover) and (min-width: 901px) {
  .ba-flow :is(.a1, .a2, .b2) { position: relative; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .ba-flow img { transition: box-shadow 0.55s ease; }
  /* left image of a pair nudges right, right image nudges left */
  .ba-posters .a1, .ba-sheets .a1, .ba-sheets .b1 { transform: translateX(calc(12% + 12 * var(--u))) rotate(-2deg); position: relative; z-index: 1; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .ba-posters .a2, .ba-sheets .a2, .ba-sheets .b2 { transform: translateX(calc(-12% - 12 * var(--u))) rotate(2.5deg); z-index: 2; }
  .ba-flow :is(.a2, .b2) img { box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(16, 15, 13, 0.14); }
  /* invisible hit areas so the pair doesn't flicker while it spreads */
  .ba-posters .a1::after, .ba-sheets .a1::after, .ba-sheets .b1::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: calc(-1 * (60 * var(--u) + 15%)); }
  .ba-posters .a2::before, .ba-sheets .a2::before, .ba-sheets .b2::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: calc(-1 * (60 * var(--u) + 15%)); }
  .ba-flow:has(.a1:hover, .a2:hover) :is(.a1, .a2),
  .ba-flow:has(.b1:hover, .b2:hover) :is(.b1, .b2) { transform: none; }
  .ba-flow:has(.a1:hover, .a2:hover) :is(.a1, .a2) img,
  .ba-flow:has(.b1:hover, .b2:hover) :is(.b1, .b2) img { box-shadow: 0 0 0 rgba(16, 15, 13, 0); }
  .ba-posters .b1, .ba-posters .b1 img { transform: none; box-shadow: none; }
}
@media (hover: hover) and (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .ba-flow figure, .ba-flow img { transition: none !important; }
}
.ba-cap { grid-row: 1; margin: 0; font-weight: 500; font-size: calc(20 * var(--u)); line-height: 1; }
.ba-arrow { grid-row: 2; align-self: center; width: calc(44 * var(--u)); height: calc(33.5 * var(--u)); }
.ba-posters .ba-cap-b, .ba-posters .b1 { grid-column: 1; }
.ba-posters .ba-arrow { grid-column: 2; }
.ba-posters .ba-cap-a { grid-column: 3 / 5; }
.ba-posters .a1 { grid-column: 3; }
.ba-posters .a2 { grid-column: 4; }
.ba-sheets .ba-cap-b { grid-column: 1 / 3; }
.ba-sheets .b1 { grid-column: 1; }
.ba-sheets .b2 { grid-column: 2; }
.ba-sheets .ba-arrow { grid-column: 3; }
.ba-sheets .ba-cap-a { grid-column: 4 / 6; }
.ba-sheets .a1 { grid-column: 4; }
.ba-sheets .a2 { grid-column: 5; }
.p-caption-gap { margin-top: calc(56 * var(--u)); }
.p-caption { font-weight: 500; font-size: calc(24.3 * var(--u)); line-height: 1.2; margin: calc(18 * var(--u)) 0 calc(20 * var(--u)); }
.p-section .pwrap > .p-h2 + .p-note { margin-top: calc(-30 * var(--u)); }
.p-note { font-weight: 300; font-size: calc(24.3 * var(--u)); line-height: 1.2; max-width: calc(1070 * var(--u)); margin-bottom: calc(28 * var(--u)); }

.p-info {
  margin: 0;
  flex: none;
  width: calc(545.8 * var(--u));
  border: 1px solid var(--ink);
  padding: 0 calc(24.3 * var(--u)) 0 calc(33.1 * var(--u));
}
.p-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(24 * var(--u));
  font-size: calc(25 * var(--u));
  line-height: calc(30 * var(--u));
  /* a hair more below than above: the type's cap-height sits slightly lower in its line box, so this makes the visible space equal */
  padding: calc(12.5 * var(--u)) 0 calc(13.75 * var(--u));
}
.p-info-row + .p-info-row { border-top: 1px solid var(--ink); }
.p-info dt { font-weight: 500; white-space: nowrap; }
.p-info dd { margin: 0; font-weight: 300; text-align: right; }
.p-info dd span { display: block; }

/* ---------------- Sections ---------------- */

.p-section > .pwrap {
  border-top: 1px solid var(--ink);
  padding: calc(39 * var(--u)) 0 calc(85 * var(--u));
}
.p-section .pwrap > .p-h2 { margin-bottom: calc(46.6 * var(--u)); }
.p-section .amp { font-family: inherit; }

/* content blocks: every block carries its own trailing gap, reset when last */
.project-anthem,
.project-anthem-embed,
.external-video-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  margin-bottom: calc(28 * var(--u));
}
.project-anthem { cursor: pointer; }
.project-anthem video { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-anthem-embed iframe { width: 100%; height: 100%; display: block; border: 0; }

.vignette-grid,
.video-pair-grid,
.external-video-grid,
.project-gallery { margin-bottom: calc(28 * var(--u)); }

.project-anthem:last-child,
.project-anthem-embed:last-child,
.external-video-card:last-child,
.vignette-grid:last-child,
.video-pair-grid:last-child,
.external-video-grid:last-child,
.project-gallery:last-child { margin-bottom: 0; }

.vignette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(28 * var(--u)); }
.vignette-card { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--ink); cursor: pointer; }
.vignette-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette-duration {
  position: absolute; top: calc(18 * var(--u)); right: calc(18 * var(--u));
  background: rgba(255, 253, 248, 0.9); color: var(--ink);
  font-weight: 500; font-size: calc(16 * var(--u)); line-height: 1; padding: calc(7 * var(--u)) calc(11 * var(--u));
  pointer-events: none;
}

.video-pair-grid, .external-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(28 * var(--u)); }
.video-pair-card { position: relative; overflow: hidden; cursor: pointer; }
.video-pair-card video { width: 100%; aspect-ratio: 16 / 9; display: block; background: var(--ink); }
.video-pair-grid .project-anthem-embed,
.video-pair-grid .external-video-card,
.external-video-grid .external-video-card { margin-bottom: 0; }

.external-video-card { display: block; }
.external-video-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.external-video-card:hover img, .external-video-card:focus-visible img { transform: scale(1.03); }
.external-video-label {
  position: absolute; left: calc(20 * var(--u)); bottom: calc(20 * var(--u));
  background: var(--cream); color: var(--ink);
  font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.1; padding: calc(9 * var(--u)) calc(14 * var(--u));
}

/* play button: cream disc with ink triangle */
.play-button {
  position: absolute; top: 50%; left: 50%;
  width: calc(88 * var(--u)); height: calc(88 * var(--u));
  min-width: 56px; min-height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92);
  transition: background 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.play-button::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--ink);
}
.project-anthem:hover .play-button, .project-anthem:focus-visible .play-button,
.vignette-card:hover .play-button, .vignette-card:focus-visible .play-button,
.video-pair-card:hover .play-button, .video-pair-card:focus-visible .play-button,
.external-video-card:hover .play-button, .external-video-card:focus-visible .play-button {
  background: var(--pink);
  transform: translate(-50%, -50%) scale(1.06);
}
.project-anthem:hover .play-button::after, .vignette-card:hover .play-button::after,
.video-pair-card:hover .play-button::after, .external-video-card:hover .play-button::after { border-left-color: var(--cream); }

/* galleries */
.project-gallery { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.gallery-row { display: flex; gap: calc(28 * var(--u)); }
.gallery-row figure { margin: 0; min-width: 0; }
.gallery-row-single figure { flex: 1 1 auto; }
.gallery-row-single img { width: 100%; height: auto; display: block; }
.gallery-row-split { height: calc(678 * var(--u)); }
.gallery-row-split figure { height: 100%; overflow: hidden; flex: 1 1 0; }
.gallery-row-split img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-row-natural figure { flex: 1 1 0; }
.gallery-row-natural img { width: 100%; height: auto; display: block; }

/* ---------------- Previous / next ---------------- */

.p-nav > .pwrap {
  border-top: 1px solid var(--ink);
  padding: calc(68 * var(--u)) 0 calc(87 * var(--u));
}
.p-nav-row { display: flex; justify-content: space-between; align-items: flex-start; }
.p-nav-link { display: block; width: calc(520 * var(--u)); }
.p-nav-thumb { display: block; overflow: hidden; aspect-ratio: 7945 / 4569; background: #ddd; }
.p-nav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.p-nav-link:hover .p-nav-thumb img, .p-nav-link:focus-visible .p-nav-thumb img { transform: scale(1.04); }
.p-nav-label {
  display: flex; align-items: center; gap: calc(26 * var(--u));
  margin-top: calc(35 * var(--u));
  font-weight: 500; font-size: calc(29.6 * var(--u)); line-height: 1.325;
}
.p-nav-next .p-nav-label { justify-content: flex-end; }
.p-nav-label .arrow { transition: transform 0.25s ease; }
.p-nav-prev:hover .arrow, .p-nav-prev:focus-visible .arrow { transform: scaleX(-1) translateX(calc(8 * var(--u))); }
.p-nav-next:hover .arrow, .p-nav-next:focus-visible .arrow { transform: translateX(calc(8 * var(--u))); }

/* footer measurements on project pages (slightly different inset than home) */
.site-footer.on-project .footer-rule { margin-top: 0; }
.site-footer.on-project .wrap { width: calc(1648 * var(--u)); }
.site-footer.on-project .footer-heading { margin-top: calc(68 * var(--u)); }
.site-footer.on-project .email-box { margin-top: calc(36 * var(--u)); }
.site-footer.on-project { padding-bottom: calc(93 * var(--u)); }

/* ---------------- Video lightbox ---------------- */

.video-lightbox-overlay {
  position: fixed; inset: 0; background: rgba(16, 15, 13, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s; z-index: 1000;
}
.video-lightbox-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.28s ease, visibility 0s linear 0s; }
.video-lightbox { position: relative; width: 100%; max-width: 1200px; transform: scale(0.92); transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }
.video-lightbox-overlay.is-open .video-lightbox { transform: scale(1); }
.video-lightbox-video { position: relative; z-index: 1; width: 100%; max-height: 84vh; display: block; background: var(--ink); }
.video-lightbox-close {
  position: absolute; z-index: 2; top: 12px; right: 12px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: rgba(255, 253, 248, 0.92); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; padding: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.video-lightbox-close:hover, .video-lightbox-close:focus-visible { background: var(--pink); color: var(--cream); }
body.video-lightbox-locked { overflow: hidden; }

/* ---------------- Mobile (proposed reflow) ---------------- */

@media (max-width: 900px) {
  .pwrap { width: auto; max-width: none; margin-inline: 22px; }
  .p-hero { padding-top: 22px; }
  .p-title { margin-top: 22px; font-size: 27px; line-height: 1.25; }
  .p-overview { margin-top: 18px; padding: 26px 0 30px; flex-direction: column; gap: 26px; }
  .p-overview-text { width: auto; padding-top: 0; }
  .p-h2 { font-size: 22px; }
  .p-overview-text .p-h2 { margin-bottom: 10px; }
  .p-overview-text p { font-size: 16px; line-height: 1.4; }
  .p-overview-text p + p { margin-top: 12px; }
  .p-overview-text .p-block { margin-top: 26px; }
  .p-section .pwrap > .p-h2 + .p-note { margin-top: -6px; }
  .logo-compare { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
  .logo-tile { height: auto; padding: 46px 20px 26px; }
  .logo-tile.is-old img, .logo-tile.is-new img { width: min(78%, 420px); }
  .ba-flow { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 10px; }
  .ba-flow .ba-cap { font-size: 14px; grid-column: 1 / -1 !important; }
  .ba-flow .ba-cap-b { grid-row: 1; }
  .ba-flow .ba-arrow { grid-column: 1 / -1 !important; grid-row: 3; justify-self: center; width: 32px; height: 24px; transform: rotate(90deg); margin: 8px 0; }
  .ba-flow .ba-cap-a { grid-row: 4; }
  .ba-flow figure { grid-row: 5; }
  .ba-posters .b1, .ba-sheets .b1 { grid-row: 2; }
  .ba-posters .b1 { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
  .ba-sheets .b1 { grid-column: 1; }
  .ba-sheets .b2 { grid-column: 2; grid-row: 2; }
  .ba-posters .a1, .ba-sheets .a1 { grid-column: 1; }
  .ba-posters .a2, .ba-sheets .a2 { grid-column: 2; }
  .p-caption-gap { margin-top: 28px; }
  .logo-tag { left: 14px; top: 12px; font-size: 14px; }
  .p-caption { font-size: 16px; margin: 14px 0 12px; }
  .p-note { font-size: 16px; line-height: 1.4; max-width: none; margin-bottom: 14px; }
  .p-info { width: 100%; padding: 0 16px 0 18px; }
  .p-info-row { font-size: 16px; line-height: 22px; padding: 11px 0 11.8px; gap: 16px; }
  .p-info dt { top: 0; }
  .p-section > .pwrap { padding: 30px 0 52px; }
  .p-section .pwrap > .p-h2 { margin-bottom: 22px; }

  .project-anthem, .project-anthem-embed, .external-video-card { margin-bottom: 20px; }
  .vignette-grid, .video-pair-grid, .external-video-grid, .project-gallery { margin-bottom: 20px; }
  .vignette-grid { grid-template-columns: 1fr; gap: 14px; }
  .video-pair-grid, .external-video-grid { grid-template-columns: 1fr; gap: 14px; }
  .project-gallery { gap: 14px; }
  .gallery-row { gap: 14px; }
  .gallery-row-split { flex-direction: column; height: auto; }
  .gallery-row-split figure { height: auto; flex: none; }
  .gallery-row-split img { height: auto; object-fit: initial; }
  .gallery-row-natural { flex-direction: column; }
  .gallery-row-natural figure { flex: none; }
  .vignette-duration { top: 12px; right: 12px; font-size: 13px; padding: 5px 8px; }
  .external-video-label { left: 12px; bottom: 12px; font-size: 14px; padding: 7px 10px; }
  .play-button::after { border-width: 9px 0 9px 15px; }
  .video-lightbox-overlay { padding: 14px; }

  .p-nav > .pwrap { padding: 34px 0 48px; }
  .p-nav-row { flex-direction: column; gap: 34px; }
  .p-nav-link { width: 100%; }
  .p-nav-label { margin-top: 14px; font-size: 20px; gap: 14px; }
  .p-nav-next .p-nav-label { justify-content: flex-start; }

  .site-footer.on-project .wrap { width: auto; }
  .site-footer.on-project .footer-heading { margin-top: 44px; }
  .site-footer.on-project .email-box { margin-top: 24px; }
  .site-footer.on-project { padding-bottom: 40px; }
}

/* two book pages shown as one spread */
.gallery-row .fig-spread { display: flex; }
.fig-spread img { display: block; width: 50%; height: auto; }

/* ---------------- Flip-through book ---------------- */
.flipbook { --fb-ratio: 1.5455; --fb-paper: #ebe8e1; margin: 0 0 calc(8 * var(--u)); }
.flipbook:fullscreen { background: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: 3vh 4vw; }
.flipbook:-webkit-full-screen { background: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: 3vh 4vw; }
.fb-stage {
  position: relative; margin: 0 auto;
  width: min(100%, calc((100vh - calc(190 * var(--u))) * var(--fb-ratio)));
  width: min(100%, calc((100svh - calc(190 * var(--u))) * var(--fb-ratio)));
  outline: none;
}
.flipbook:fullscreen .fb-stage { width: min(100%, calc((100vh - 120px) * var(--fb-ratio))); }
.flipbook:-webkit-full-screen .fb-stage { width: min(100%, calc((100vh - 120px) * var(--fb-ratio))); }
.fb-stage:focus-visible { outline: 1px solid var(--ink); outline-offset: 10px; }
.fb-book {
  position: relative; width: 100%; aspect-ratio: 1224 / 792;
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.fb-shadow {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 0;
  box-shadow: 0 calc(22 * var(--u)) calc(44 * var(--u)) calc(-14 * var(--u)) rgba(16, 15, 13, 0.4);
  transition: left 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.fb-leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transform: perspective(2600px) rotateY(0deg);
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.fb-leaf.is-flipped { transform: perspective(2600px) rotateY(-180deg); }
.fb-leaf.is-turning { z-index: 400 !important; }
.fb-face {
  position: absolute; inset: 0; background: var(--fb-paper);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
}
.fb-face img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.fb-back { transform: rotateY(180deg); }
/* soft shading at the spine, plus a passing shade while a leaf turns */
.fb-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 1; }
.fb-front::after { background: linear-gradient(to right, rgba(16, 15, 13, 0.24), rgba(16, 15, 13, 0) 7%); }
.fb-back::after { background: linear-gradient(to left, rgba(16, 15, 13, 0.24), rgba(16, 15, 13, 0) 7%); }
.fb-leaf.is-turning .fb-front::after { animation: fb-shade-f 0.9s ease both; }
.fb-leaf.is-turning .fb-back::after { animation: fb-shade-b 0.9s ease both; }
@keyframes fb-shade-f { 0% { background: linear-gradient(to right, rgba(16,15,13,0.24), rgba(16,15,13,0) 7%); } 50% { background: rgba(16,15,13,0.22); } 100% { background: rgba(16,15,13,0.34); } }
@keyframes fb-shade-b { 0% { background: rgba(16,15,13,0.34); } 50% { background: rgba(16,15,13,0.22); } 100% { background: linear-gradient(to left, rgba(16,15,13,0.24), rgba(16,15,13,0) 7%); } }
.fb-hit { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 500; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fb-hit-prev { left: 0; }
.fb-hit-next { right: 0; }
.fb-hit[disabled] { cursor: default; pointer-events: none; }

.fb-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(44 * var(--u)); margin-top: calc(38 * var(--u)); }
.fb-btn { display: inline-flex; align-items: center; background: none; border: 0; padding: calc(10 * var(--u)); margin: 0; cursor: pointer; color: var(--ink); font: inherit; }
.fb-btn .arrow { transition: transform 0.25s ease; }
.fb-btn.fb-prev:hover .arrow, .fb-btn.fb-prev:focus-visible .arrow { transform: scaleX(-1) translateX(calc(8 * var(--u))); }
.fb-btn.fb-next:hover .arrow, .fb-btn.fb-next:focus-visible .arrow { transform: translateX(calc(8 * var(--u))); }
.fb-btn[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }
.fb-count { min-width: calc(230 * var(--u)); text-align: center; font-weight: 300; font-size: calc(20.2 * var(--u)); line-height: 1.2; }
.fb-full { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 300; font-size: calc(20.2 * var(--u)); padding: calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid transparent; transition: border-color 0.25s ease; }
.fb-full:hover, .fb-full:focus-visible { border-bottom-color: var(--ink); }

/* phones and small tablets: swipe through single pages */
.fb-strip {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 0 7%; margin: 0 -16px;
}
.fb-strip::-webkit-scrollbar { display: none; }
.fb-page { flex: 0 0 86%; scroll-snap-align: center; aspect-ratio: 612 / 792; background: var(--fb-paper); box-shadow: 0 10px 24px -12px rgba(16, 15, 13, 0.4); }
.fb-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .fb-bar { margin-top: 18px; gap: 22px; }
  .fb-count { min-width: 150px; font-size: 14px; }
  .fb-btn { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-book, .fb-shadow, .fb-leaf { transition-duration: 0.01s; }
  .fb-leaf.is-turning .fb-face::after { animation: none; }
}

/* single book pages, four across */
.gallery-row-pages { gap: calc(24 * var(--u)); }
@media (max-width: 900px) {
  .gallery-row-natural.gallery-row-pages { display: grid; grid-template-columns: 1fr 1fr; flex-direction: row; gap: 12px; }
}
@media (max-width: 900px) {
  .gallery-row-pages figure:first-child:nth-last-child(3) { grid-column: 1 / -1; }
}