/* Photography — the photobook. Tokens, header, buttons, the window light and
   the colophon come from studio.css; this file is only the gallery itself. */

.pg { --gap: clamp(8px, 1vw, 16px); }

/* ---------------------------------------------------------------- cover */

.pg-cover {
  position: relative;
  padding: calc(var(--hd-h) + clamp(24px, 6vh, 64px)) var(--margin) clamp(80px, 14vh, 160px);
}
/* The light table: a lit box with a faint ruled grid, full height under the
   header, the title printed at its foot and the reader's prints dealt over it
   (light-table.js). The small words and the controls lie above the pile. */
.pg-table {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  margin: calc(-1 * (var(--hd-h) + clamp(24px, 6vh, 64px))) calc(-1 * var(--margin)) clamp(48px, 8vh, 96px);
  padding: calc(var(--hd-h) + clamp(18px, 3vh, 32px)) var(--margin) clamp(28px, 5vh, 56px);
  overflow: hidden;
  touch-action: pan-y;
  background:
    radial-gradient(80% 70% at 62% 40%, rgba(255, 251, 242, .96), rgba(255, 251, 242, 0) 72%),
    repeating-linear-gradient(0deg, rgba(120, 96, 60, .055) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(120, 96, 60, .055) 0 1px, transparent 1px 56px),
    #ede4d3;
}
.pg-table__pile {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.pg-cover__meta,
.pg-cover__lede,
.pg-deal { position: relative; z-index: 2; }
.pg-cover__title { position: relative; z-index: 0; user-select: none; }
.pg-cover__head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}

/* A print: paper border, the photograph, and a shadow that sharpens as it
   lands. Positioned by transform alone; hovering lifts it off the pile. */
.pile-print {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}
.pile-print__lift {
  position: relative;
  width: 100%;
  height: 100%;
  padding: clamp(5px, .5vw, 8px);
  background: #F8F4EC;
  transition: transform .5s var(--ease-expo);
}
.pile-print__shadow {
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0 1px 2px rgba(58, 38, 22, .22), 0 10px 22px -8px rgba(58, 38, 22, .42);
  transition: box-shadow .5s var(--ease-expo), translate .5s var(--ease-expo);
}
.pile-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #E4DACA;
  user-select: none;
  -webkit-user-drag: none;
}
html:not(.pg-dealing) .pile-print:hover .pile-print__lift { transform: translateY(-6px) scale(1.04); }
html:not(.pg-dealing) .pile-print:hover .pile-print__shadow {
  translate: 6px 14px;
  box-shadow: 0 2px 4px rgba(58, 38, 22, .16), 0 26px 40px -14px rgba(58, 38, 22, .5);
}
/* While a hand is sweeping, the pile is dealt onto, not picked from. */
html.pg-dealing .cursor-label { opacity: 0; scale: .2; }
html.pg-dealing .pile-print { cursor: default; }

/* Before the first print: one quiet line where the prints will go, with a
   brass bead running along a rule to show the sweep. */
.pg-table__cue {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 38%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 14px;
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
  pointer-events: none;
  transition: opacity .6s ease, translate .9s var(--ease-expo);
}
.pg-table__cue::after {
  content: "";
  width: clamp(120px, 14vw, 200px);
  height: 7px;
  background:
    radial-gradient(circle 3.5px, var(--accent) 98%, transparent) 0 50% / 7px 7px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat;
  animation: pgSweep 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes pgSweep {
  0% { background-position: 0 50%, 0 50%; }
  50% { background-position: 100% 50%, 0 50%; }
  100% { background-position: 0 50%, 0 50%; }
}
.pg-table.has-prints .pg-table__cue { opacity: 0; translate: -50% -12px; }
.pg-table:not(.is-live) .pg-table__cue,
.pg-table:not(.is-live) .pg-deal { display: none; }

/* The dealer's corner: how many of the archive have been dealt, how, and two
   controls for a keyboard, a touch screen or a hand that would rather not. */
.pg-deal {
  grid-column: 9 / 13;
  justify-self: end;
  display: grid;
  gap: 10px;
  width: min(100%, 34ch);
  padding-bottom: 4px;
}
.pg-deal__count {
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pg-deal__count em {
  margin-right: .3em;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 340;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  color: var(--accent-ink);
}
.pg-deal__hint { color: var(--fg-2); font-size: var(--f-small); text-wrap: pretty; }
.pg-deal__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pg-deal__btn {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #FBF8F2 70%, transparent);
  color: var(--fg);
  font-size: var(--f-small);
  font-weight: 500;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.pg-deal__btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.pg-deal__btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.pg-deal__btn[hidden] { display: none; }
.pg-cover__meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pg-cover__meta span:first-child { color: var(--accent-ink); }
.pg-cover__title {
  grid-column: 1 / -1;
  margin: clamp(10px, 2vh, 24px) 0 clamp(20px, 4vh, 44px) -.04em;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 15.4vw, 19rem);
  font-weight: 300;
  line-height: .82;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.pg-cover__title .w { padding-bottom: .14em; margin-bottom: -.14em; }
.pg-cover__title .w__i { animation: pgRise 1.3s var(--ease-expo) .1s both; }
.pg-cover__lede {
  grid-column: 1 / 6;
  max-width: 44ch;
  color: var(--fg-2);
  font-size: 1.0625rem;
  text-wrap: pretty;
  animation: pgFade 1.1s var(--ease-expo) .45s both;
}
@keyframes pgRise { from { transform: translateY(110%); } to { transform: none; } }
/* Revealed by a clip, not a fade: text is either fully legible or not drawn,
   never a low-contrast half-tone on its way in. */
@keyframes pgFade { from { clip-path: inset(0 0 100% 0); transform: translateY(16px); } to { clip-path: inset(0 0 -20% 0); transform: none; } }

/* The index: six rows, the way in. */
.pg-index {
  margin-top: clamp(64px, 12vh, 140px);
  border-top: 1px solid var(--line);
  animation: pgFade 1.2s var(--ease-expo) .6s both;
}
.pg-index li { border-bottom: 1px solid var(--line); }
.pg-index a {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(14px, 2.2vh, 26px) 0;
  transition: color .3s ease;
}
.pg-index img { display: none; }
.pg-index em {
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}
.pg-index strong {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.6vw, 6.4rem);
  font-weight: 320;
  line-height: .95;
  letter-spacing: -.035em;
  transition: translate .7s var(--ease-expo), color .3s ease;
}
.pg-index span { color: var(--fg-2); font-size: var(--f-small); transition: translate .7s var(--ease-expo); }
.pg-index b {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  font-weight: 340;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.pg-index a:hover strong,
.pg-index a:focus-visible strong { translate: 18px 0; color: var(--accent-ink); }
.pg-index a:hover span { translate: 18px 0; }

/* The preview travels with the pointer, framed as the studio's arched window. */
.pg-preview {
  position: fixed;
  z-index: 40;
  left: 0;
  top: 0;
  width: clamp(220px, 20vw, 320px);
  aspect-ratio: 4 / 5;
  margin: calc(clamp(220px, 20vw, 320px) * -.625) 0 0 calc(clamp(220px, 20vw, 320px) * -.5);
  overflow: hidden;
  border-radius: 999px 999px 10px 10px;
  pointer-events: none;
  opacity: 0;
  scale: .7;
  transition: opacity .4s ease, scale .6s var(--ease-expo);
  box-shadow: 0 40px 80px -30px rgba(31, 32, 34, .45);
}
.pg-preview.is-on { opacity: 1; scale: 1; }
.pg-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.12;
  transition: opacity .45s ease, scale .9s var(--ease-expo);
}
.pg-preview img.is-on { opacity: 1; scale: 1; }

/* ---------------------------------------------------------------- chapters */

.pg-chapter { position: relative; padding-bottom: clamp(80px, 14vh, 160px); scroll-margin-top: 0; }

.pg-lead {
  --open: 1;
  position: relative;
  height: max(480px, 88svh);
}
/* Also a .pg-open (the viewer's trigger), whose later `position: relative`
   would otherwise win and leave the photograph at its own height. */
.pg-lead > .pg-lead__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  background: #1c1915;
  /* An arched window that widens to the full frame as the chapter arrives. */
  clip-path: inset(calc((1 - var(--open)) * 10%) calc((1 - var(--open)) * 26%) 0 round calc((1 - var(--open)) * 50%) calc((1 - var(--open)) * 50%) 0 0);
}
.motion .pg-lead { --open: 0; }
.pg-lead__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.14 - var(--open) * .14));
  transform-origin: 50% 60%;
}
.pg-lead__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, .74), rgba(12, 10, 8, .18) 38%, transparent 60%);
  pointer-events: none;
}
.pg-lead__caption {
  position: absolute;
  z-index: 1;
  left: var(--margin);
  right: var(--margin);
  bottom: clamp(28px, 6vh, 64px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  color: #F6F2EA;
  pointer-events: none;
}
.pg-lead__no {
  grid-column: 1 / -1;
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: .08em;
  color: #D8BC7E;
}
.pg-lead__no span { color: rgba(246, 242, 234, .6); }
.pg-lead__title {
  grid-column: 1 / 9;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 10.6vw, 12rem);
  font-weight: 320;
  line-height: .88;
  letter-spacing: -.04em;
}
.pg-lead__line {
  grid-column: 9 / 13;
  font-family: var(--serif);
  font-size: var(--f-lede);
  font-weight: 360;
  line-height: 1.25;
  padding-bottom: .4em;
}
.pg-lead__meta {
  grid-column: 9 / 13;
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, .74);
}
.motion .pg-lead__caption:not(.is-in) > * { clip-path: inset(0 0 100% 0); transform: translateY(30px); }
.motion .pg-lead__caption.is-in > * { animation: pg-rise 1.2s var(--ease-expo) backwards; }
@keyframes pg-rise {
  from { clip-path: inset(0 0 100% 0); transform: translateY(30px); }
  to { clip-path: inset(0 0 -20% 0); transform: none; }
}
/* Not drawn at all until it arrives, which is also when the frame behind it
   has opened: a visible caption always sits on its photograph. */
.motion .pg-lead__caption:not(.is-in) { visibility: hidden; }
.motion .pg-lead__caption.is-in > :nth-child(2) { animation-delay: .08s; }
.motion .pg-lead__caption.is-in > :nth-child(3) { animation-delay: .18s; }
.motion .pg-lead__caption.is-in > :nth-child(4) { animation-delay: .26s; }

/* ---------------------------------------------------------------- the spreads
   photography.js reads each collection as a run of spreads by the shapes of
   its photographs and gives every frame its columns (--col, and --phone for
   two columns). A frame is as wide as its columns and as tall as its own
   ratio says, so nothing is cropped; the dropped frame of a pair sits lower,
   and on a wide screen also travels a little faster than its neighbour. */

.pg-sheet { padding: clamp(56px, 10vh, 120px) var(--margin) 0; }
.pg-spread {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.pg-spread + .pg-spread,
.pg-plates + .pg-spread { margin-top: clamp(48px, 9vh, 112px); }
.pg-frame {
  position: relative;
  grid-column: var(--col);
  min-width: 0;
}
.pg-frame.is-drop { margin-top: clamp(40px, 7vw, 128px); }
/* A pair of landscapes is a large print and a smaller one beside it. */
.pg-spread--ll .pg-frame.is-drop { margin-top: clamp(56px, 10vw, 180px); }
/* A strip stands on one line, whatever the shapes in it. */
.pg-spread--strip { align-items: end; }
.pg-open {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--fg) 8%, var(--bg));
  cursor: pointer;
}
.pg-frame .pg-open img,
.pg-plate .pg-open img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r);
  object-fit: cover;
  transition: transform 1.1s var(--ease-expo), filter .6s ease;
}
.pg-open:hover img { transform: scale(1.035); }
.pg-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
/* Each frame is numbered under its foot, as on a contact sheet's edge. */
.pg-frame figcaption,
.pg-plate figcaption {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  pointer-events: none;
}
.pg-frame figcaption em,
.pg-plate figcaption em {
  color: var(--accent-ink);
  transition: translate .6s var(--ease-expo);
}
.pg-frame figcaption span,
.pg-plate figcaption span { transition: opacity .4s ease; opacity: .7; }
.pg-frame:hover figcaption em,
.pg-plate:hover figcaption em { translate: 4px 0; }
.pg-frame:hover figcaption span,
.pg-plate:hover figcaption span { opacity: 1; }

/* With the print layer (photobook-gl.js) on a desktop pointer, the frames
   are drawn by WebGL behind the page: each shows its unexposed paper until
   its print is drawn, and the loupe is the cursor over it. */
.pg-gl {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pg-gl-on .pg-open.is-gl { cursor: none; }
.pg-gl-on .pg-open.is-gl img { opacity: 0; transition: none; transform: none; }
.pg-gl-on .pg-open.is-drawn { background: transparent; }
.pg-gl-on .pg-open.is-gl figcaption { transition: opacity .3s ease; }

/* Touch and no-WebGL: the frame's paper lifts off the photograph once. */
.pg-develop .pg-frame .pg-open::after,
.pg-develop .pg-plate .pg-open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--fg) 8%, var(--bg));
  pointer-events: none;
  transition: opacity 1.5s cubic-bezier(.45, 0, .2, 1);
}
.pg-develop .pg-open.is-developed::after { opacity: 0; }

/* A single photograph on its own, the way a book pauses on a full page. */
.pg-plates {
  display: flex;
  justify-content: center;
  padding: clamp(72px, 13vh, 168px) 0 clamp(24px, 4vh, 48px);
}
.pg-plate {
  position: relative;
  width: min(100%, calc(var(--r) * 74svh), 1320px);
}
.pg-plate figcaption { justify-content: center; }

/* ---------------------------------------------------------------- next collection
   The last page of a collection turns to the next: its name large, its line,
   and its opening photograph waiting in the arched window. */
.pg-next {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  margin: clamp(120px, 20vh, 240px) var(--margin) 0;
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--line);
}
.pg-next__label {
  grid-column: 1 / -1;
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pg-next__label em { margin-left: 10px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.pg-next__title {
  grid-column: 1 / 9;
  margin-top: clamp(18px, 3vh, 36px);
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 10rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.04em;
  transition: translate .8s var(--ease-expo), color .3s ease;
}
.pg-next__line {
  grid-column: 1 / 7;
  margin-top: 14px;
  color: var(--fg-2);
  font-size: 1.0625rem;
}
.pg-next__frame {
  grid-column: 10 / 13;
  grid-row: 2 / 4;
  justify-self: end;
  width: min(100%, 240px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 6px 6px;
  background: color-mix(in srgb, var(--fg) 8%, var(--bg));
}
.pg-next__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.08;
  transition: scale 1.2s var(--ease-expo);
}
.pg-next:hover .pg-next__title,
.pg-next:focus-visible .pg-next__title { translate: 22px 0; color: var(--accent-ink); }
.pg-next:hover .pg-next__frame img { scale: 1; }
.pg-next:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 8px; }

/* ---------------------------------------------------------------- frame counter */
.pg-counter {
  position: fixed;
  z-index: 30;
  left: var(--margin);
  bottom: clamp(14px, 2.4vh, 24px);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  pointer-events: none;
  opacity: 0;
  translate: 0 10px;
  transition: opacity .4s ease, translate .6s var(--ease-expo);
}
.pg-counter.is-on { opacity: 1; translate: 0 0; }
.pg-counter [data-c-name] { color: var(--fg); }
.pg-counter em { margin-left: 4px; color: var(--accent-ink); }
body.viewer-open .pg-counter,
body.menu-open .pg-counter { opacity: 0; }

/* ---------------------------------------------------------------- the end */

.pg-end { padding: clamp(120px, 20vh, 220px) 0 0; }
.pg-end__title {
  padding: 0 var(--margin);
  font-family: var(--serif);
  font-size: clamp(3.2rem, 9vw, 10rem);
  font-weight: 320;
  line-height: .9;
  letter-spacing: -.04em;
  max-width: 12ch;
}
.pg-end__lede { margin: 28px var(--margin) 0; max-width: 46ch; color: var(--fg-2); font-size: 1.0625rem; }
.pg-end__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px var(--margin) 0; }
.pg-noscript { padding: 40px var(--margin); color: var(--fg-2); }

/* The way back sits at the end of the collections list. */
.hd-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--f-small);
  font-weight: 500;
  color: var(--fg-2);
  transition: color .3s ease;
}
.hd-nav__back:hover { color: var(--fg); }

/* ---------------------------------------------------------------- viewer */

.pg-viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #100E0C;
  color: #F1EBE0;
  overflow: hidden;
}
.pg-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: pgViewerIn .45s ease both; }
.pg-viewer.is-closing { animation: pgViewerOut .5s ease .1s both; }
.pg-viewer::backdrop { background: transparent; }
@keyframes pgViewerIn { from { background-color: rgba(16, 14, 12, 0); } }
@keyframes pgViewerOut { to { background-color: rgba(16, 14, 12, 0); } }
.pg-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--margin);
}
.pg-viewer__title { display: flex; align-items: baseline; gap: 14px; }
.pg-viewer__title strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 360; letter-spacing: -.01em; }
.pg-viewer__title span { font-size: var(--f-label); letter-spacing: .08em; color: rgba(241, 235, 224, .62); font-variant-numeric: tabular-nums; }
.pg-viewer__close,
.pg-viewer__step {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(241, 235, 224, .24);
  border-radius: 50%;
  color: #F1EBE0;
  font-size: 1.1rem;
  transition: border-color .3s ease, background-color .3s ease;
}
.pg-viewer__close:hover,
.pg-viewer__step:hover { border-color: #C8A863; background: rgba(200, 168, 99, .14); }
.pg-viewer__close span { position: relative; width: 16px; height: 16px; }
.pg-viewer__close span::before,
.pg-viewer__close span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
  rotate: 45deg;
}
.pg-viewer__close span::after { rotate: -45deg; }
.pg-viewer__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 8px clamp(72px, 8vw, 140px);
  touch-action: pan-y pinch-zoom;
}
.pg-viewer__stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pg-viewer__step { position: absolute; top: 50%; translate: 0 -50%; }
.pg-viewer__step--prev { left: var(--margin); }
.pg-viewer__step--next { right: var(--margin); }
.pg-viewer__stage { position: relative; }
.pg-viewer__stage img.is-leaving { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.pg-viewer__foot { display: grid; gap: 8px; padding: 6px var(--margin) 14px; min-width: 0; }
.pg-viewer__strip {
  display: flex;
  gap: 6px;
  justify-content: safe center;
  overflow-x: auto;
  padding: 6px 2px;
  scrollbar-width: none;
}
.pg-viewer__strip::-webkit-scrollbar { display: none; }
.pg-viewer__strip button {
  display: block;
  height: 52px;
  overflow: hidden;
  border-radius: 2px;
  opacity: .4;
  transition: opacity .3s ease, translate .5s var(--ease-expo), box-shadow .3s ease;
}
.pg-viewer__strip button:hover,
.pg-viewer__strip button:focus-visible { opacity: .85; }
.pg-viewer__strip button[aria-current="true"] { opacity: 1; translate: 0 -4px; box-shadow: 0 0 0 1.5px #C8A863; }
.pg-viewer__strip img { display: block; width: auto; height: 100%; }
@media (max-width: 760px) {
  .pg-viewer__strip button { height: 40px; }
}
.pg-viewer__hint {
  padding: 0;
  text-align: center;
  font-size: var(--f-label);
  letter-spacing: .08em;
  color: rgba(241, 235, 224, .5);
}
body.viewer-open .cursor-label { display: none; }

/* ---------------------------------------------------------------- widths */

@media (max-width: 1099px) {
  .pg-cover__lede { grid-column: 1 / 9; }
  .pg-deal { grid-column: 1 / -1; justify-self: start; margin-top: clamp(20px, 3vh, 32px); }
  .pg-next__title { grid-column: 1 / 10; }
  .pg-next__line { grid-column: 1 / 9; }
  .pg-lead__title { grid-column: 1 / -1; }
  .pg-lead__line,
  .pg-lead__meta { grid-column: 1 / 10; }
  .pg-lead__line { margin-top: 12px; }
}
@media (hover: none), (max-width: 760px) {
  .pg-index a { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img title count" "img line count"; row-gap: 4px; align-items: center; }
  .pg-index img {
    display: block;
    grid-area: img;
    width: 64px;
    height: 80px;
    object-fit: cover;
    border-radius: 999px 999px 4px 4px;
  }
  .pg-index em { display: none; }
  .pg-index strong { grid-area: title; }
  .pg-index span { grid-area: line; }
  .pg-index b { grid-area: count; }
}
@media (max-width: 760px) {
  .pg-cover__lede { grid-column: 1 / -1; }
  .pg-cover__meta { flex-direction: column; gap: 6px; }
  .pg-table__cue { top: 30%; }
  .pg-index strong { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .pg-lead { height: max(420px, 74svh); }
  .pg-sheet { padding-top: 40px; }
  .pg-spread {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 28px;
  }
  .pg-spread + .pg-spread,
  .pg-plates + .pg-spread { margin-top: 48px; }
  .pg-frame { grid-column: var(--phone); }
  .pg-frame.is-drop,
  .pg-spread--ll .pg-frame.is-drop { margin-top: 0; }
  .pg-spread--lp .pg-frame.is-drop,
  .pg-spread--pp .pg-frame.is-drop,
  .pg-spread--trio .pg-frame.is-drop { margin-top: 44px; }
  .pg-spread--strip { align-items: start; }
  .pg-frame.is-narrow { width: 72%; justify-self: end; }
  .pg-frame.is-narrow.is-flip { justify-self: start; }
  .pg-frame figcaption { margin-top: 8px; }
  .pg-plates { padding: 56px 0 8px; }
  .pg-plate { width: 100%; }
  .pg-next { margin-top: 96px; }
  .pg-next__title { grid-column: 1 / -1; font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .pg-next__line { grid-column: 1 / 9; }
  .pg-next__frame { grid-column: 9 / 13; grid-row: 3; width: 100%; }
  .pg-counter { left: 50%; translate: -50% 10px; }
  .pg-counter.is-on { translate: -50% 0; }
  .pg-viewer__stage { padding: 8px 12px 72px; }
  .pg-viewer__step { top: auto; bottom: 18px; translate: none; }
  .pg-viewer__step--prev { left: calc(50% - 60px); }
  .pg-viewer__step--next { right: calc(50% - 60px); }
  .pg-viewer__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-cover__title .w__i,
  .pg-cover__lede,
  .pg-index,
  .pg-table__cue::after { animation: none; }
  .pg-viewer[open],
  .pg-viewer.is-closing { animation: none; }
}