/* Desktop: one composed scene at a time, sharing the opening's white stage. */
.scene-letter { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.scene-letter b { display: inline-block; font: inherit; }
.work-scene-controls { display: none; }
@media (min-width: 960px) {
  .work-reader.is-paged .work-reader__header { height: 64px; border: 0; padding-inline: 5%; }
  .work-reader.is-paged .work-nav button { padding: 21px 0; }
  .work-reader.is-paged .work-reader__progress { display: none; }
  .work-reader.is-paged .work-reader__scroll { position: relative; overflow: hidden; scroll-behavior: auto; }
  .work-reader.is-paged .work-reader__content { position: relative; width: 100%; height: 100%; margin: 0; }
  .work-reader.is-paged .work-section,
  .work-reader.is-paged .work-ending { position: absolute; inset: 0; display: none; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; background-color: #fff; }
  .work-reader.is-paged .is-current { display: block; }
  .work-reader.is-paged .work-reveal { opacity: 1; transform: none; transition: none; }
  /* Scene motion owns image transforms, including the frame after landing. */
  .work-reader.is-paged .work-image img,
  .work-reader.is-paged .work-metric__bars span { transition: none; }
  .work-reader.is-paged .work-image__open:hover img { transform: none; }
  .work-reader.is-paged .work-section__heading { position: absolute; z-index: 2; top: 26px; left: 5%; right: 5%; margin: 0; align-items: baseline; }
  .work-reader.is-paged .work-section__heading h3 { order: -1; font-size: 24px; line-height: 1.4; }
  .work-reader.is-paged .work-section__heading h3::before { content: '['; }
  .work-reader.is-paged .work-section__heading h3::after { content: ']'; }
  .work-reader.is-paged .work-section__heading p { font-size: 11px; color: #8b939b; text-align: right; }
  .work-scene__body { position: absolute; top: 92px; bottom: 28px; left: 5%; right: 5%; display: grid; align-items: safe center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d8d3cf #fff; }
  .work-scene__body > * { min-height: 0; }
  .work-reader.is-paged .work-project.is-current, .work-reader.is-paged .work-chapter.is-current,
  .work-reader.is-paged .work-ending.is-current { display: flex; flex-direction: column; justify-content: center; padding: 48px 8%; }
  .work-reader.is-paged .work-project { background: linear-gradient(90deg, transparent 49.95%, #f0eeec 50%, transparent 50.05%); }
  .work-reader.is-paged .work-project h2 { max-width: 1100px; font-size: clamp(40px, 5.1vw, 82px); }
  .work-reader.is-paged .work-project__arrow { bottom: 18%; right: 10%; }
  .work-reader.is-paged .work-chapter { background-color: #fff; text-align: center; align-items: center; }
  .work-reader.is-paged .work-chapter__number { margin-bottom: 36px; }
  .work-reader.is-paged .work-chapter h2 { font-size: clamp(72px, 9vw, 140px); }
  .work-reader.is-paged .work-chapter__word { bottom: 1%; left: 0; right: 0; font-size: clamp(100px, 16vw, 240px); }
  .work-reader.is-paged .work-ending h2 { font-size: clamp(72px, 9vw, 144px); }
  .work-reader.is-paged .work-system { width: min(100%, 1400px); margin: auto; gap: clamp(32px, 5vw, 88px); align-items: center; }
  .work-reader.is-paged .work-type { padding: clamp(24px, 3svh, 40px); }
  .work-reader.is-paged .work-type > h4 { margin: 20px 0; padding-bottom: 14px; font-size: clamp(24px, 2.3vw, 36px); }
  .work-reader.is-paged .work-type ul { gap: clamp(7px, 1.4svh, 16px); }
  .work-reader.is-paged .work-type li span:last-child { font-size: clamp(18px, 1.8vw, 27px); }
  .work-reader.is-paged .work-swatches { gap: 0; }
  .work-reader.is-paged .work-swatch { min-height: clamp(100px, 17svh, 150px); padding: 18px 22px; gap: 20px; }
  .work-reader.is-paged .work-swatch:first-child { min-height: clamp(150px, 24svh, 210px); }
  .work-reader.is-paged .work-swatch h4 { font-size: 20px; }
  .work-reader.is-paged .work-grid,
  .work-reader.is-paged .work-product-grid { height: 100%; min-height: 0; align-items: stretch; gap: clamp(18px, 3vw, 40px); }
  .work-reader.is-paged .work-grid--process { height: min(100%, 470px); align-self: center; }
  .work-reader.is-paged .work-grid--pair { grid-template-rows: minmax(0, 1fr); }
  .work-reader.is-paged .work-grid--pair:has(> :nth-child(3)) { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .work-reader.is-paged .work-grid--ads { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .work-reader.is-paged .work-grid--retouch { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .work-reader.is-paged .work-grid--retouch .work-image,
  .work-reader.is-paged .work-grid--retouch .work-image:nth-last-child(-n+2) { grid-column: auto; }
  .work-reader.is-paged .work-scene__body:has(> .work-product-grid) { container-type: size; }
  .work-reader.is-paged .work-product-grid {
    --product-main-ratio: 1;
    --product-side-ratio: 1;
    --product-gap: clamp(18px, 3vw, 40px);
    /* One main image and two stacked side images share the same outer height.
       Include the row gap when fitting the composition to both viewport axes. */
    --product-height: min(100cqh, calc((100cqw - (2 - var(--product-side-ratio)) * var(--product-gap)) / (var(--product-main-ratio) + var(--product-side-ratio))));
    height: var(--product-height);
    width: calc((var(--product-main-ratio) + var(--product-side-ratio)) * var(--product-height) + (2 - var(--product-side-ratio)) * var(--product-gap));
    margin-inline: auto;
    grid-template-columns: calc(var(--product-height) * var(--product-main-ratio)) repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--product-gap);
  }
  .work-reader.is-paged .work-image { min-height: 0; display: flex; flex-direction: column; }
  .work-reader.is-paged .work-image__open { min-height: 0; flex: 1; background: #fff; }
  .work-reader.is-paged .work-image img { width: 100%; height: 100%; object-fit: contain; }
  .work-reader.is-paged .work-image figcaption { flex: none; margin-top: 10px; font-size: 10px; }
  .work-reader.is-paged .work-grid--process .work-image__open { display: grid; align-items: center; }
  .work-reader.is-paged .work-grid--process .work-image img { max-height: 100%; object-fit: contain; }
  .work-reader.is-paged .work-goals { gap: clamp(32px, 5vw, 72px); min-height: 0; align-self: center; }
  .work-reader.is-paged .work-goals > .work-image img { max-height: calc(100svh - 265px); }
  .work-reader.is-paged .work-copy { max-width: none; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.85; }
  .work-reader.is-paged .work-copy p { margin-bottom: 20px; }
  .work-reader.is-paged .work-copy li { margin-bottom: 10px; }
  .work-reader.is-paged .work-copy > div:has(> section) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
  .work-reader.is-paged .work-copy section { border-top: 0; padding: 0; }
  .work-reader.is-paged .work-copy section > p:first-child { min-height: 28px; }
  .work-reader.is-paged .work-copy h3 { font-size: clamp(22px, 2vw, 32px); margin: 18px 0 24px; }
  .work-reader.is-paged .work-metrics { width: 100%; align-self: center; gap: clamp(24px, 4vw, 72px); }
  .work-reader.is-paged .work-render { min-height: 0; height: 100%; grid-template-columns: 1.05fr 1fr; gap: 8vw; }
  .work-reader.is-paged .work-compare { min-height: 0; height: 100%; display: flex; flex-direction: column; }
  .work-reader.is-paged .work-compare__stage { min-height: 0; flex: 1; aspect-ratio: auto; background: #fff; }
  .work-reader.is-paged .work-compare__control { flex: none; margin-top: 16px; }
  .work-reader.is-paged .work-render-pair { width: min(100%, 580px); height: 100%; }
  .work-reader.is-paged .work-long { width: min(100%, 560px); height: 100%; display: flex; flex-direction: column; }
  .work-reader.is-paged .work-long__crop { min-height: 0; flex: 1; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border: 1px solid #eee; }
  .work-reader.is-paged .work-long__crop::after { display: none; }
  .work-reader.is-paged .work-long__crop .work-image { display: block; }
  .work-reader.is-paged .work-long__crop .work-image__open { display: block; }
  .work-reader.is-paged .work-long__crop img { height: auto; }
  .work-reader.is-paged .work-expand { flex: none; padding: 14px 0; }
  .work-reader.is-paged .work-scene-controls { height: 66px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; }
  .work-scene-controls button { padding: 10px 0; border: 0; background: transparent; color: #687982; font-size: 12px; }
  .work-scene-controls > div { display: flex; align-items: center; gap: 24px; }
  .work-scene-controls [hidden] { display: none; }
  .work-scene-controls output { color: #9b9fa4; font-size: 11px; letter-spacing: .12em; }
  .work-scene-controls [data-scene-auto] { color: #a1a5aa; font-size: 10px; }
  @media (max-height: 740px) {
    .work-scene__body { top: 78px; bottom: 16px; }
    .work-reader.is-paged .work-scene-controls { height: 56px; }
    .work-reader.is-paged .work-type { padding: 20px 24px; }
    .work-reader.is-paged .work-type > h4 { margin: 14px 0; }
    .work-reader.is-paged .work-type li span:last-child { font-size: 19px; }
    .work-reader.is-paged .work-swatch { min-height: 88px; padding: 12px 18px; }
    .work-reader.is-paged .work-swatch:first-child { min-height: 125px; }
    .work-reader.is-paged .work-swatch h4 { font-size: 17px; }
  }
}

@media (min-width: 960px) {
  .work-reader.is-paged .work-swatch--contrast { grid-column: 1 / -1; min-height: 58px; display: flex; flex-direction: row; gap: 20px; align-items: center; }
  .work-reader.is-paged .work-swatch--contrast > span { display: none; }
  .work-reader.is-paged .work-swatch--contrast > div { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
  .work-reader.is-paged .work-swatch--contrast h4 { margin: 0; font-size: 16px; }
}

@media (min-width: 960px) {
  .work-reader.is-paged .work-colour:has(.work-swatch:nth-child(7)) .work-swatch { min-height: clamp(72px, 11svh, 110px); padding: 14px 20px; }
  .work-reader.is-paged .work-colour:has(.work-swatch:nth-child(7)) .work-swatch:first-child { min-height: clamp(100px, 17svh, 165px); }
}

@media (min-width: 960px) {
  .work-reader.is-paged .work-grid--pair:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .work-reader.is-paged .work-grid--process { grid-template-columns: 1.6fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: 100%; align-self: stretch; counter-reset: process; }
  .work-reader.is-paged .work-grid--process .work-image { counter-increment: process; }
  .work-reader.is-paged .work-grid--process .work-image:first-child { grid-column: 2; grid-row: 1; }
  .work-reader.is-paged .work-grid--process .work-image:nth-child(2) { grid-column: 2; grid-row: 2; }
  .work-reader.is-paged .work-grid--process .work-image:nth-child(3) { grid-column: 1; grid-row: 1 / 3; }
  .work-reader.is-paged .work-grid--process figcaption::before { content: counter(process, decimal-leading-zero) ' / '; color: #ba5c57; }
}