html.scrollytelling-standalone,
.home-entry {
  color-scheme: light;
  --story-ink: #282421;
  --story-muted: #81796f;
  --story-line: #aaa296;
  --story-paper: #fffefa;
  --story-warm: #fcfaf2;
  --story-floor: #f4eee2;
  --story-yellow: #e7c763;
  --story-orange: #cf7d3e;
  --story-red: #86121f;
}

html.scrollytelling-standalone,
html.scrollytelling-standalone *,
html.scrollytelling-standalone *::before,
html.scrollytelling-standalone *::after,
.home-entry,
.home-entry *,
.home-entry::before,
.home-entry::after,
.home-entry *::before,
.home-entry *::after {
  box-sizing: border-box;
}

html.scrollytelling-standalone {
  background: var(--story-warm);
  color: var(--story-ink);
  scroll-behavior: smooth;
}

body.scrollytelling-page {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--story-warm);
  color: var(--story-ink);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

.scrollytelling-page a {
  color: inherit;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.scrollytelling-page .skip-link {
  position: fixed;
  z-index: 30;
  top: 1rem;
  left: 1rem;
  padding: .55rem .8rem;
  background: var(--story-ink);
  color: var(--story-paper);
  font-size: .82rem;
  text-decoration: none;
  transform: translateY(-180%);
}

.scrollytelling-page .skip-link:focus {
  transform: translateY(0);
}

.story-main {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.story-scroll {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* The non-JavaScript document remains an ordinary, readable page. */
.story-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 500px;
  overflow: hidden;
  background: var(--story-warm);
}

html.js .story-stage {
  position: sticky;
  top: 0;
}

/* JavaScript prepares the first visual state before exposing the stage. The
   document background remains visible while this stage-only gate is active. */
html.js.story-initializing .story-stage {
  visibility: hidden;
}

html.js.story-office-init-timeout .story-stage {
  visibility: visible;
}

.stage-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  container-name: story-stage;
}

.world-camera {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  transform-origin: var(--camera-transform-origin);
  will-change: transform;
  --camera-transform-origin: 59.178% 38.676%;
  --office-before-image: none;
  --office-after-image: none;
  --office-workflow-image: none;
}

/*
 * Each photograph owns a stage of its own aspect ratio, sized to cover the
 * viewport. Everything that must stay glued to a photograph — the Scene 01 PC
 * overlay, the Scene 08 workflow screen — is a child of that stage, so the two
 * can never drift apart no matter how the camera moves or how wide the window
 * is.
 */
.office-stage {
  --stage-width: max(100cqw, calc(100cqh * var(--stage-aspect)));
  --stage-height: max(100cqh, calc(100cqw / var(--stage-aspect)));
  position: absolute;
  left: calc((100cqw - var(--stage-width)) / 2);
  top: calc((100cqh - var(--stage-height)) / 2);
  width: var(--stage-width);
  height: var(--stage-height);
  pointer-events: none;
}

.office-stage--before {
  z-index: 8;
  --stage-aspect: 1.776833;
  /* Liquid-crystal quad measured on office-before.webp (1672x941). */
  --monitor-x: 41.012%;
  --monitor-y: 18.939%;
  --monitor-width: 36.4%;
  --monitor-height: 41.086%;
  --monitor-clip: polygon(0% 0%, 98.51% .78%, 100% 90.14%, .5% 100%);
}

/* Without the photographs the overlay has to match the drawn monitor instead. */
html:not(.story-office-before-ready) .office-stage--before {
  --monitor-x: 46.86%;
  --monitor-y: 26.43%;
  --monitor-width: 26.02%;
  --monitor-height: 29.95%;
  --monitor-clip: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.office-stage--after {
  z-index: 9;
  opacity: 0;
  --stage-aspect: 1.675955;
  /* Liquid-crystal quad measured on office-after-final.webp (1624x969). */
  --after-monitor-x: 34.095%;
  --after-monitor-y: 27.785%;
  --after-monitor-width: 41.911%;
  --after-monitor-height: 42.577%;
  --after-monitor-clip: polygon(0% 0%, 97.35% 2.43%, 100% 89.79%, 1.03% 100%);
}

.office-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  opacity: 1;
  pointer-events: none;
  will-change: opacity;
}

.office-image-slot {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: var(--office-before-image, none);
  opacity: 1;
  pointer-events: none;
}

.office-image-slot--after {
  background-image: var(--office-after-image, none);
  opacity: 0;
}

/*
 * Scene 08 shows one single image element. It begins covering the viewport and
 * is then reduced, without ever being swapped, until it rests inside the
 * monitor of the After photograph.
 */
.workflow-screen {
  position: absolute;
  z-index: 2;
  left: var(--after-monitor-x);
  top: var(--after-monitor-y);
  width: var(--after-monitor-width);
  height: var(--after-monitor-height);
  overflow: hidden;
  clip-path: var(--after-monitor-clip);
  opacity: 0;
  pointer-events: none;
  will-change: left, top, width, height, opacity, clip-path;
}

.workflow-screen__image {
  position: absolute;
  inset: 0;
  display: block;
  /* The flat tone matches the screenshot's own margin, so the image reads as
     full bleed at every size while never losing an edge of its content. */
  background-color: #eff5fa;
  background-image: var(--office-workflow-image, none);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.office-illustration {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

html.story-office-before-ready .office-illustration,
html.story-office-images-ready .office-illustration {
  opacity: 0;
}

.office-before-state {
  opacity: 1;
}

.office-after-state {
  opacity: 0;
}

.office-person {
  opacity: .88;
}

.pc-display {
  position: absolute;
  z-index: 2;
  left: var(--monitor-x);
  top: var(--monitor-y);
  width: var(--monitor-width);
  height: var(--monitor-height);
  overflow: hidden;
  border: 2px solid #6d665e;
  border-radius: 1px;
  background: #f8f9f9;
  container-type: inline-size;
  container-name: pc-display;
  color: var(--story-ink);
  box-shadow: 0 4px 14px rgba(62, 53, 44, .1);
  isolation: isolate;
  clip-path: var(--monitor-clip);
  transform-origin: 50% 50%;
  will-change: left, top, width, height, opacity, border-radius, clip-path;
}

html.story-office-before-ready .pc-display,
html.story-office-images-ready .pc-display {
  border-color: transparent !important;
}

.monitor-screen-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f8f9f9;
}

.pc-display__toolbar {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  will-change: opacity, transform;
}

.pc-side-menu {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 3%;
  width: 16%;
  padding: 7% 4%;
  border-right: 1px solid #e2e5e5;
  background: #f1f3f3;
  color: #6a7272;
}

.pc-side-menu__brand,
.pc-side-menu__item {
  display: block;
  overflow: hidden;
  font-size: clamp(.32rem, 1.35cqw, .64rem);
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pc-side-menu__brand {
  margin-bottom: 12%;
  color: #4f5959;
  font-weight: 700;
}

.pc-side-menu__item--active {
  color: #3f5558;
  font-weight: 700;
}

.pc-topbar {
  position: absolute;
  inset: 0 0 auto 16%;
  display: flex;
  align-items: center;
  gap: 4%;
  height: 14%;
  padding: 0 4%;
  border-bottom: 1px solid #e2e5e5;
  background: #f5f7f7;
}

.pc-search {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-width: 34%;
  padding: .35em .6em;
  border: 1px solid #dfe3e3;
  border-radius: 2px;
  color: #8a9292;
  font-size: clamp(.3rem, 1.15cqw, .58rem);
  line-height: 1;
}

.pc-search__icon {
  color: #687575;
  font-size: 1.1em;
}

.pc-count {
  margin-left: auto;
  color: #6b7575;
  font-size: clamp(.3rem, 1.15cqw, .58rem);
  line-height: 1;
  white-space: nowrap;
}

.pc-workspace {
  position: absolute;
  z-index: 2;
  left: 16%;
  top: 14%;
  width: 84%;
  height: 86%;
  overflow: hidden;
  background: #f8f9f9;
  box-shadow: inset 0 0 16px rgba(92, 103, 103, .08);
  will-change: left, top, width, height, background-color;
}

.toolbar-label {
  color: #655d54;
  font-size: clamp(.42rem, .72vw, .68rem);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}

.toolbar-rule {
  display: block;
  width: 28%;
  height: 1px;
  margin-left: 7%;
  background: #b7aea1;
}

.toolbar-rule--short {
  width: 16%;
  margin-left: auto;
}

.pc-display__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  container-name: pc-canvas;
  background: #f8f9f9;
  box-shadow: inset 0 0 14px rgba(92, 103, 103, .08);
  will-change: background-color;
}

.canvas-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.pc-screen-before {
  position: absolute;
  z-index: 1;
  inset: 8% 7%;
  opacity: 1;
  pointer-events: none;
}

.screen-line {
  position: absolute;
  left: 0;
  display: block;
  height: 2px;
  background: #b8afa4;
}

.screen-line--wide {
  top: 14%;
  width: 64%;
}

.screen-line--medium {
  top: 31%;
  width: 44%;
}

.screen-line--short {
  top: 48%;
  width: 27%;
}

.whiteboard-surface {
  position: absolute;
  z-index: 6;
  left: 9%;
  top: 12%;
  width: 82%;
  height: 72%;
  overflow: visible;
  background: transparent;
  opacity: 1;
  pointer-events: none;
  transform: scale(.96);
  transform-origin: 50% 50%;
  will-change: left, top, width, height, opacity, transform;
}

.whiteboard-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fffefa;
  opacity: 0;
  will-change: opacity;
}

.whiteboard-texture {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.whiteboard-frame {
  position: absolute;
  z-index: 2;
  inset: -5px;
  border: 5px solid #9d9c91;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.whiteboard-rule {
  position: absolute;
  z-index: 1;
  display: block;
  height: 1px;
  background: #ebe4d7;
}

.whiteboard-rule--one {
  left: 7%;
  top: 24%;
  width: 31%;
}

.whiteboard-rule--two {
  left: 45%;
  top: 24%;
  width: 45%;
}

.whiteboard-rule--three {
  left: 7%;
  top: 52%;
  width: 83%;
}

.whiteboard-rule--four {
  left: 7%;
  top: 77%;
  width: 57%;
}

.whiteboard-tray {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: -16px;
  display: none;
  align-items: center;
  gap: 7px;
  width: 23%;
  height: 14px;
  padding: 0 8px;
  border: 2px solid #777970;
  background: #d9d8d0;
  opacity: 0;
  will-change: opacity;
}

.whiteboard-tray span {
  display: block;
  width: 27%;
  height: 4px;
  background: #8c8c82;
}

.relation-map {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.relation-lines--core {
  opacity: .78;
}

.relation-lines--board {
  opacity: 0;
}

.sticky-layer {
  --note-min-height: 10%;
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: opacity;
}

.sticky-note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10%;
  min-height: var(--note-min-height, 10%);
  padding: .14em .18em;
  border: 1px solid rgba(76, 67, 54, .22);
  border-radius: 1px;
  color: #3a332d;
  font-size: clamp(.42rem, 1.55cqw, .78rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: .01em;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 8px rgba(70, 58, 44, .11);
  transform: rotate(var(--rotation));
  transform-origin: 50% 50%;
  will-change: left, top, transform, opacity;
}

/* The first three scenes are a camera move through one PC canvas. Keep the
   line composition measured in Scene 01 while that camera is inside the PC;
   Scene 04 onward restores normal inline wrapping for the same nodes. */
.sticky-note__lines,
.sticky-note__line {
  display: inline;
  white-space: normal;
}

html[data-active-scene="1"] .sticky-note__lines,
html[data-active-scene="2"] .sticky-note__lines,
html[data-active-scene="3"] .sticky-note__lines {
  display: block;
  width: 100%;
}

html[data-active-scene="1"] .sticky-note__line,
html[data-active-scene="2"] .sticky-note__line,
html[data-active-scene="3"] .sticky-note__line {
  display: block;
  white-space: nowrap;
}

html[data-active-scene="4"] .sticky-note,
html[data-active-scene="5"] .sticky-note,
html[data-active-scene="6"] .sticky-note,
html[data-active-scene="7"] .sticky-note,
html[data-active-scene="8"] .sticky-note {
  color: #241f1a;
}

.sticky-note--paper {
  background: #f1f0eb;
}

.sticky-note--yellow {
  background: #f3dd8b;
}

.sticky-note--orange {
  background: #e9b184;
}

.sticky-note--red {
  background: #e3afb1;
}

.sticky-note[data-sticky="know"],
.sticky-note[data-sticky="ask"],
.sticky-note[data-sticky="manual"],
.sticky-note[data-sticky="standardization"] {
  width: 13%;
}

.sticky-note--extra {
  opacity: .82;
  transform: scale(.82) rotate(var(--rotation));
}

.classification-labels,
.method-areas {
  position: absolute;
  z-index: 10;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.classification-labels span,
.method-areas span {
  position: absolute;
  display: block;
  padding: .2em .4em;
  border-bottom: 1px solid #9c9285;
  color: #625a52;
  font-size: clamp(.48rem, .9vw, .78rem);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.classification-labels span[data-classification="keep"] {
  left: 4.9%;
  top: 2.2%;
  border-color: var(--story-orange);
}

.classification-labels span[data-classification="change"] {
  left: 42.7%;
  top: 2.2%;
  border-color: var(--story-yellow);
}

.classification-labels span[data-classification="stop"] {
  left: 82.9%;
  top: 2.2%;
  border-color: var(--story-red);
}

/* Two faint marker strokes; enough to read three groups, not a card grid. */
.classification-divider {
  position: absolute;
  top: 6.9%;
  display: block;
  width: 1px;
  height: 90.3%;
  background: linear-gradient(180deg, rgba(154, 145, 133, 0), rgba(154, 145, 133, .42) 12%, rgba(154, 145, 133, .42) 88%, rgba(154, 145, 133, 0));
}

.classification-divider--one {
  left: 22.6%;
}

.classification-divider--two {
  left: 79.3%;
}

.method-areas span {
  top: 5.6%;
  display: flex;
  align-items: flex-end;
  height: 77.8%;
  padding: 0 .55em .45em;
  border: 1px solid rgba(140, 130, 119, .36);
  color: rgba(98, 90, 82, .82);
  font-weight: 500;
}

.method-areas span[data-method="workflow"] {
  left: 0%;
  width: 35.4%;
}

.method-areas span[data-method="people"] {
  left: 33.5%;
  width: 34.8%;
}

.method-areas span[data-method="it"] {
  left: 67.1%;
  width: 31.7%;
}

.scene-index {
  position: absolute;
  z-index: 14;
  top: 50%;
  left: clamp(1rem, 2.8vw, 3rem);
  width: 2.5rem;
  transform: translateY(-50%);
}

.scene-index ol {
  display: grid;
  gap: .35rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.scene-index a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  min-height: 2rem;
  border-left: 1px solid transparent;
  color: var(--story-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  letter-spacing: .08em;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}

.scene-index a:hover,
.scene-index a:focus-visible,
.scene-index a[aria-current="true"] {
  border-left-color: var(--story-red);
  color: var(--story-red);
}

.scene-index a:focus-visible,
.scrollytelling-page .skip-link:focus-visible {
  outline: 2px solid var(--story-red);
  outline-offset: 3px;
}

/* In the animated state each marker occupies one viewport over the stage. */
.story-scenes {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
}

/* The scene track starts exactly at the top of the sticky stage, so Scene 01
   is the first thing the timeline shows. */
html.js .story-scenes {
  margin-top: -100vh;
  margin-top: -100svh;
}

.story-scene {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 120vh;
  min-height: 120svh;
  padding: clamp(6rem, 13vh, 9rem) clamp(4.5rem, 10vw, 9rem);
  pointer-events: none;
}

.scene-copy {
  max-width: min(44rem, 50vw);
  padding: 1rem 1.25rem;
  background: rgba(252, 250, 242, .9);
  pointer-events: auto;
}

.scene-number {
  display: block;
  margin-bottom: .85rem;
  color: var(--story-red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.15vw, 1.35rem);
  letter-spacing: .16em;
  line-height: 1;
}

.scene-copy__body p {
  max-width: 36rem;
  margin: 0;
  color: var(--story-ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-size: clamp(1.25rem, 2.25vw, 2.3rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .045em;
  text-wrap: pretty;
}

.scene-copy__body p + p {
  margin-top: .65rem;
}

.story-scene[data-scene="2"] .scene-copy {
  margin-top: -8vh;
  margin-left: 4vw;
}

.story-scene[data-scene="3"] .scene-copy {
  margin-top: 7vh;
  margin-left: 2vw;
}

.story-scene[data-scene="4"] .scene-copy {
  margin-top: -5vh;
  margin-left: 8vw;
}

.story-scene[data-scene="6"] .scene-copy {
  margin-top: 7vh;
  margin-left: 5vw;
}

.story-scene[data-scene="7"] .scene-copy {
  margin-top: -4vh;
  margin-left: 10vw;
}

/* Each half of these two lines is a complete thought, so a line may break
   between the halves but never inside one. */
.scene-copy__segment {
  display: inline-block;
}

@media (min-width: 701px) {
  /* Wide enough that both lines sit on a single line at 1368px. */
  .story-scene[data-scene="6"] .scene-copy,
  .story-scene[data-scene="7"] .scene-copy {
    max-width: min(52rem, 64vw);
  }

  .story-scene[data-scene="6"] .scene-copy__body p,
  .story-scene[data-scene="7"] .scene-copy__body p {
    max-width: 46rem;
  }
}

@media (min-width: 1100px) {
  /* Scene 01 keeps the approved copy size and position while giving the
     first sentence just enough room to remain a single line on desktop. */
  .story-scene[data-scene="1"] .scene-copy {
    width: min(41rem, 52vw);
    max-width: min(41rem, 52vw);
  }

  .story-scene[data-scene="1"] .scene-copy__body p:first-child {
    max-width: none;
    white-space: nowrap;
  }
}

.story-scene--visual-only {
  align-items: flex-end;
  padding-bottom: clamp(5rem, 11vh, 8rem);
}

/* A failed library load still exposes the ordinary static document. */
html.story-no-motion .story-stage,
html.story-motion-reduced .story-stage {
  position: relative;
  top: auto;
}

html.story-no-motion .story-scenes,
html.story-motion-reduced .story-scenes {
  margin-top: 0;
}

@media (max-width: 700px) {
  .story-stage {
    min-height: 430px;
  }

  html.js .story-scenes {
    margin-top: -100vh;
    margin-top: -100svh;
  }

  .scene-index {
    top: auto;
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
    width: auto;
    transform: none;
  }

  .scene-index ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .2rem;
  }

  .scene-index a {
    width: 1.75rem;
    min-height: 1.75rem;
    border-top: 1px solid transparent;
    border-left: 0;
    font-size: .62rem;
  }

  .scene-index a:hover,
  .scene-index a:focus-visible,
  .scene-index a[aria-current="true"] {
    border-top-color: var(--story-red);
    border-left-color: transparent;
  }

  .story-scene {
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100svh;
    padding: 20vh 1.25rem 7rem 3.75rem;
  }

  .scene-copy {
    max-width: min(86vw, 21rem);
    padding: .7rem .8rem;
  }

  .scene-copy__body p {
    font-size: clamp(1.02rem, 5.2vw, 1.42rem);
    line-height: 1.7;
    letter-spacing: .03em;
  }

  .scene-number {
    margin-bottom: .65rem;
    font-size: .9rem;
  }

  .story-scene[data-scene="2"] .scene-copy,
  .story-scene[data-scene="3"] .scene-copy,
  .story-scene[data-scene="4"] .scene-copy,
  .story-scene[data-scene="6"] .scene-copy,
  .story-scene[data-scene="7"] .scene-copy {
    margin-top: 0;
    margin-left: 0;
  }

  .story-scene--visual-only {
    align-items: flex-end;
    padding-bottom: 7rem;
  }

  .sticky-layer {
    --note-min-height: 11%;
  }

  .sticky-note {
    width: 12%;
    padding: .12em .14em;
    font-size: clamp(.34rem, 2.25cqw, .52rem);
  }

  .pc-side-menu {
    gap: 4%;
    width: 20%;
    padding: 8% 3%;
  }

  .pc-topbar {
    left: 20%;
    height: 16%;
    padding-inline: 3%;
  }

  .pc-workspace {
    left: 20%;
    top: 16%;
    width: 80%;
    height: 84%;
  }

  .toolbar-label {
    font-size: clamp(.34rem, 1.9vw, .52rem);
  }

  .whiteboard-frame {
    inset: -3px;
    border-width: 3px;
  }

  .whiteboard-tray {
    right: 6%;
    bottom: -11px;
    height: 10px;
    gap: 3px;
    padding-inline: 5px;
  }

  .classification-labels span,
  .method-areas span {
    padding-inline: .2em;
    font-size: clamp(.34rem, 1.45vw, .55rem);
  }

  .method-areas span {
    top: 10%;
    height: 72%;
    padding-bottom: .25em;
  }

  /*
   * A portrait window crops a landscape photograph hard. For Scene 08 the
   * After stage is therefore pulled back to a little over the window width, so
   * the last frame shows the desk as a whole instead of a slice of it.
   */
  .office-stage--after {
    --stage-width: 130cqw;
    --stage-height: calc(130cqw / var(--stage-aspect));
  }

  /* Keep camera work centred on a narrow viewport. */
  .world-camera {
    transform-origin: var(--camera-transform-origin);
    --camera-transform-origin: 59.178% 38.676%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .story-stage,
  html.js .story-stage {
    position: relative;
    top: auto;
  }

  html.js .story-scenes {
    margin-top: 0;
  }

  .scene-index a {
    transition: none;
  }
}

@media (max-width: 390px) {
  .story-stage {
    min-height: 390px;
  }

  .scene-index {
    bottom: .5rem;
  }

  .scene-index a {
    width: 1.55rem;
    min-height: 1.55rem;
    font-size: .57rem;
  }

  .story-scene {
    padding-left: 3.35rem;
    padding-right: 1rem;
  }

  .scene-copy__body p {
    font-size: clamp(.96rem, 5vw, 1.2rem);
  }
}

@media print {
  .story-stage {
    position: relative !important;
    height: 70vh;
  }

  html.js .story-scenes,
  html.story-no-motion .story-scenes,
  html.story-motion-reduced .story-scenes {
    margin-top: 0;
  }

  .scene-index {
    display: none;
  }
}