/* Spread: artwork as a book you can hold. */

.spread {
  --spread-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --spread-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --paper: #f7f4ee;
  --paper-ink: #1d1c1a;
  --paper-muted: #6f6a62;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  position: relative;
  display: block;
  overflow: hidden;
  color: var(--paper-ink);
  font-family: var(--spread-sans);
  background-color: var(--surface-color, #d2cfc8);
  background-image: var(--surface-image, none);
  background-size: cover;
  background-position: center;
  transition: background-color .5s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.spread:focus-visible { box-shadow: inset 0 0 0 3px rgba(27, 63, 208, .6); }

/* ---------- Surfaces: what the book rests on ---------- */

.spread::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spread[data-surface="studio"] { --surface-color: #d3d0c9; }
.spread[data-surface="studio"]::before {
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.35), transparent 60%),
    var(--grain);
  background-size: auto, 220px;
  opacity: .55;
  mix-blend-mode: soft-light;
}

.spread[data-surface="linen"] { --surface-color: #e6e0d4; }
.spread[data-surface="linen"]::before {
  background:
    repeating-linear-gradient(0deg, rgba(90,70,40,.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90,70,40,.06) 0 1px, transparent 1px 4px),
    var(--grain);
  background-size: auto, auto, 180px;
  opacity: .9;
  mix-blend-mode: multiply;
}

.spread[data-surface="oak"] { --surface-color: #a5754a; }
.spread[data-surface="oak"]::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .11' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .35  0 0 0 0 .2  0 0 0 0 .08  0 0 0 -1.6 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
    radial-gradient(110% 80% at 50% 35%, rgba(255,230,190,.25), rgba(40,20,5,.3));
  background-size: 900px 600px, auto;
  opacity: 1;
}

.spread[data-surface="concrete"] { --surface-color: #aeada9; }
.spread[data-surface="concrete"]::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='5' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    var(--grain);
  background-size: 600px, 160px;
  opacity: .45;
  mix-blend-mode: overlay;
}

.spread[data-surface="blush"] { --surface-color: #ead8d2; }
.spread[data-surface="blush"]::before {
  background: radial-gradient(100% 80% at 50% 35%, rgba(255,255,255,.4), transparent 65%), var(--grain);
  background-size: auto, 220px;
  opacity: .5;
  mix-blend-mode: soft-light;
}

.spread[data-surface="night"] { --surface-color: #1d1e23; color-scheme: dark; }
.spread[data-surface="night"]::before {
  background: radial-gradient(60% 55% at 50% 42%, rgba(255,236,210,.10), transparent 70%), var(--grain);
  background-size: auto, 220px;
  opacity: .22;
  mix-blend-mode: overlay;
}

/* ---------- Stage & book ---------- */

.spread-stage {
  position: relative;
  padding: clamp(28px, 6vw, 80px) clamp(16px, 5vw, 64px) 16px;
}

.spread-shift {
  transition: transform .9s cubic-bezier(.3, .7, .2, 1);
  filter: drop-shadow(0 22px 26px rgba(20, 16, 10, .22)) drop-shadow(0 3px 4px rgba(20, 16, 10, .18));
}
.spread-shift[data-state="front"] { transform: translateX(calc(var(--half-page, 0px) * -1)); }
.spread-shift[data-state="back"] { transform: translateX(var(--half-page, 0px)); }
.spread[data-surface="night"] .spread-shift { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }

@media (prefers-reduced-motion: reduce) {
  .spread-shift { transition-duration: .01s; }
}

/* ---------- Pages ---------- */

.spread-page {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  container-type: size;
  user-select: none;
  -webkit-user-select: none;
}

/* paper grain on everything, printed pages included */
.spread-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--grain);
  background-size: 200px;
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* the curve of the paper into the gutter */
.spread-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.spread-page.is-left::after {
  background: linear-gradient(to left, rgba(0,0,0,.22), rgba(0,0,0,.06) 3%, transparent 9%, transparent 97%, rgba(255,255,255,.12));
}
.spread-page.is-right::after {
  background: linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,.06) 3%, transparent 9%, transparent 97%, rgba(255,255,255,.12));
}

.spread-page img { display: block; -webkit-user-drag: none; }

.spread-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* one image across the gutter */
.spread-span {
  position: absolute;
  top: 0;
  height: 100%;
  width: 200%;
  max-width: none;
  object-fit: cover;
}
.spread-page--span-left .spread-span { left: 0; }
.spread-page--span-right .spread-span { left: -100%; }

/* plate: one piece, paper margin, caption */
.spread-plate {
  position: absolute;
  inset: 9cqw 10cqw 7cqw;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3.2cqw;
}
.spread-plate__frame {
  position: relative;
  flex: 1;
  min-height: 0;
}
.spread-plate__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
}
.spread-caption {
  display: flex;
  justify-content: space-between;
  gap: 4cqw;
  font-size: 2.3cqw;
  letter-spacing: .04em;
  color: var(--paper-muted);
}
.spread-caption__title { font-family: var(--spread-serif); font-size: 3.4cqw; letter-spacing: 0; color: var(--paper-ink); }
.spread-caption__note { align-self: flex-end; text-align: right; }

/* text, colophon, half */
.spread-text {
  position: absolute;
  inset: 12cqw 11cqw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3cqw;
}
.spread-page--text .spread-text { justify-content: center; }
.spread-text--half { inset: 50% 11cqw 10cqw; justify-content: center; }
.spread-eyebrow {
  margin: 0;
  font-size: 2.3cqw;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.spread-heading {
  margin: 0;
  font: 400 11cqw/0.95 var(--spread-serif);
  letter-spacing: -.01em;
  color: var(--paper-ink);
}
.spread-text--half .spread-heading { font-size: 8cqw; }
.spread-body {
  margin: 0;
  max-width: 30em;
  font-size: 3cqw;
  line-height: 1.5;
  color: #3f3b35;
}
.spread-page--colophon .spread-text { justify-content: flex-end; align-items: center; }
.spread-page--colophon .spread-body { font-family: var(--spread-serif); font-size: 3.4cqw; color: var(--paper-muted); }

.spread-half__image {
  position: absolute;
  inset: 0 0 50% 0;
}

/* endpapers */
.spread-page--endpaper { background: var(--endpaper, #e8331f); }
.spread-page--endpaper::before { opacity: .35; }

/* covers */
.spread-page--cover,
.spread-page--back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    var(--cover, #1b3fd0);
  color: var(--cover-ink, #fff);
}
.spread-page--cover::before,
.spread-page--back::before { opacity: .3; mix-blend-mode: overlay; }
.spread-page--cover::after {
  background: linear-gradient(to right, rgba(0,0,0,.35), rgba(255,255,255,.12) 1.2%, rgba(0,0,0,.1) 2.6%, transparent 5%);
}
.spread-page--back::after {
  background: linear-gradient(to left, rgba(0,0,0,.35), rgba(255,255,255,.12) 1.2%, rgba(0,0,0,.1) 2.6%, transparent 5%);
}
.spread-cover {
  position: absolute;
  inset: 10cqw 11cqw 11cqw 13cqw;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
}
.spread-cover__eyebrow {
  margin: 0;
  font-size: 2.5cqw;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .85;
}
.spread-cover__plate {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 2cqw 0 3cqw;
}
.spread-cover__plate img {
  position: absolute;
  inset: 1.2cqw;
  margin: auto;
  max-width: calc(100% - 2.4cqw);
  max-height: calc(100% - 2.4cqw);
  width: auto;
  height: auto;
  box-shadow: 0 .6cqw 1.4cqw rgba(0,0,0,.3), 0 2cqw 4cqw rgba(0,0,0,.2);
}
.spread-cover__title {
  margin: 0;
  font: 400 12cqw/0.9 var(--spread-serif);
  letter-spacing: -.015em;
}
.spread-cover__subtitle {
  margin: 0;
  font-size: 2.7cqw;
  letter-spacing: .04em;
  opacity: .85;
}
.spread-cover__mark {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font: italic 400 4cqw var(--spread-serif);
  opacity: .8;
}

/* ---------- Controls ---------- */

.spread-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 16px clamp(20px, 4vw, 40px);
}
.spread-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  color: #1d1c1a;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s, opacity .2s;
}
.spread-btn:hover { background: rgba(255, 255, 255, .85); }
.spread-btn:focus-visible { outline: 2px solid #1b3fd0; outline-offset: 2px; }
.spread-btn:disabled { opacity: .35; cursor: default; }
.spread-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spread-count {
  min-width: 7.5em;
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: rgba(29, 28, 26, .7);
}
.spread[data-surface="night"] .spread-count { color: rgba(255, 255, 255, .7); }
.spread[data-surface="night"] .spread-btn { background: rgba(255, 255, 255, .14); color: #fff; }
.spread[data-surface="night"] .spread-btn:hover { background: rgba(255, 255, 255, .26); }