/* Stories: eight photographed stories, told one screen at a time. The opening shows them as slices of photographs; each
   chapter is a photograph and its story, in one of three layouts (split, bleed, prints). md-stories.js opens the slices,
   reveals each chapter as it arrives, moves its photograph a little with the page and keeps the chapter index. */

/* The opening: the title, then six photographs, edge to edge; the stories after them in one line beneath. */
.st-intro { height: var(--screen); min-height: 520px; display: flex; flex-direction: column; padding-top: clamp(16px, 3.6svh, 48px); }
.st-intro-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 16px clamp(32px, 5vw, 96px); align-items: end; padding-bottom: clamp(18px, 3.4svh, 40px); }
.st-title { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, min(1rem + 4.2vw, 9svh), 6rem); line-height: 0.94; letter-spacing: -0.03em; }
.st-title em { color: var(--burgundy); }
.st-intro-aside { display: grid; justify-items: start; gap: 14px; }
.st-intro-aside p { max-width: 44ch; color: var(--ink-2); font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem); line-height: 1.5; }

.st-slices { flex: 1; min-height: 0; display: flex; gap: 3px; background: var(--sand); }
.st-slice {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--ink); color: var(--paper); text-decoration: none;
  transition: flex-grow 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.st-slice.is-open { flex-grow: 5; }
/* Each photograph is as wide as an open slice, so opening and closing only crops it; it never stretches. */
.st-slice img {
  position: absolute; top: 0; left: 50%; width: max(100%, 50vw); max-width: none; height: 100%; object-fit: cover; translate: -50% 0;
  filter: saturate(0.55) brightness(0.72); scale: 1.04;
  transition: filter 1100ms var(--ease-out), scale 1600ms var(--ease-out);
}
.st-slice.is-open img, .st-slice:focus-visible img { filter: none; scale: 1; }
.st-slice::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 13, 10, 0.72), rgba(11, 13, 10, 0) 46%); pointer-events: none; }
.st-slice-n { position: absolute; z-index: 1; top: 14px; left: 14px; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--paper); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.st-slice-text {
  position: absolute; z-index: 1; left: clamp(16px, 2vw, 32px); bottom: clamp(16px, 3svh, 32px); width: min(30rem, calc(50vw - 64px));
  display: grid; gap: 8px; opacity: 0; translate: 0 12px; transition: opacity 220ms ease-in, translate 220ms ease-in;
}
.st-slice.is-open .st-slice-text { opacity: 1; translate: 0 0; transition: opacity 600ms var(--ease-out) 420ms, translate 800ms var(--ease-out) 420ms; }
.st-slice-title { font-family: var(--serif); font-size: clamp(1.5rem, min(1rem + 1.3vw, 4.6svh), 2.5rem); line-height: 1.04; letter-spacing: -0.015em; }
.st-slice-meta { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--on-ink-2); }
.st-slice:focus-visible { outline: 2px solid var(--burgundy); outline-offset: -2px; }
.st-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px; padding-block: clamp(12px, 2svh, 20px); font-size: 0.9375rem; }
.st-more .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.st-more a { color: var(--ink); text-decoration: none; transition: color 200ms var(--ease-out); }
.st-more a:hover { color: var(--burgundy); }
.st-more-n { margin-right: 10px; font-family: var(--serif); font-style: italic; color: var(--ink-3); }

/* A chapter: one screen. */
.st-ch { position: relative; min-height: var(--screen); display: grid; overflow: hidden; scroll-margin-top: -16px; }
.st-ch-text, .st-ch-head, .st-ch-rest { display: grid; justify-items: start; align-content: start; }
.st-ch-n { font-family: var(--serif); font-style: italic; font-size: clamp(3.4rem, min(2rem + 3.6vw, 11svh), 7rem); line-height: 0.8; color: var(--burgundy); }
.st-ch-kicker { margin-top: clamp(14px, 2.6svh, 26px); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.st-ch-title { margin-top: 10px; max-width: 15ch; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, min(1rem + 2.7vw, 7.4svh), 4.5rem); line-height: 0.98; letter-spacing: -0.022em; }
.st-ch-title a { color: inherit; text-decoration: none; transition: color 220ms var(--ease-out); }
.st-ch-title a:hover { color: var(--burgundy); }
.st-ch-dek { margin-top: clamp(12px, 2.2svh, 22px); max-width: 38ch; color: var(--ink-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.5; }
.st-ch-open { margin-top: clamp(16px, 3.2svh, 36px); padding-top: clamp(10px, 1.8svh, 16px); max-width: 42ch; border-top: 1px solid var(--rule-strong); }
.st-ch-open-label { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.st-ch-q { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 0.95rem + 0.42vw, 1.35rem); line-height: 1.3; color: var(--burgundy); }
.st-ch-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: clamp(18px, 3.4svh, 36px); }
.st-ch-register { color: var(--ink-2); font-size: 0.9375rem; text-underline-offset: 3px; }
.st-ch-register:hover { color: var(--ink); }

/* The photograph: it fills its part of the screen and drifts a little against the page (--shift, from md-stories.js). */
.st-ch-photo { position: relative; margin: 0; min-height: 0; }
.st-ch-frame { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.st-ch-img { width: 100%; height: 100%; max-width: none; object-fit: cover; scale: 1.1; translate: 0 calc(var(--shift, 0) * 1px); }
.st-ch-photo figcaption {
  position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 14px; color: var(--paper); font-size: 0.75rem; line-height: 1.4;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}
/* A second photograph, laid on the first as a print. */
.st-ch-inset {
  position: absolute; z-index: 2; margin: 0; width: clamp(150px, 15vw, 270px); padding: 8px 8px 0; background: var(--paper);
  box-shadow: 0 30px 50px -26px rgba(20, 15, 10, 0.6), 0 2px 6px rgba(20, 15, 10, 0.18); rotate: -2.5deg;
}
.st-ch-inset-img { width: 100%; height: auto; }
.st-ch-inset figcaption { padding: 7px 2px 9px; font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); }

/* A panorama: the photograph across the top, the story in two columns beneath. */
.st-ch-panorama { --band: clamp(240px, 51svh, 620px); grid-template-rows: var(--band) minmax(0, 1fr); }
.st-ch-panorama .st-ch-body { align-self: center; padding-block: clamp(18px, 4svh, 56px); }
.st-ch-panorama .st-ch-inset { right: var(--gutter); top: clamp(16px, 3svh, 36px); rotate: 2deg; }

/* Prints on the desk */
.st-ch-prints { background: var(--sand-deep); }
.st-ch-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-block: clamp(28px, 6svh, 80px); }
.st-ch-desk { position: relative; height: min(70svh, 680px); }
.st-print {
  position: absolute; margin: 0; width: var(--size, 60%); padding: 10px 10px 0; background: var(--paper);
  box-shadow: 0 34px 60px -30px rgba(20, 15, 10, 0.55), 0 2px 6px rgba(20, 15, 10, 0.16);
  top: 4%; left: 4%; rotate: -2deg;
}
.st-print.is-second { top: auto; left: auto; right: 2%; bottom: 4%; rotate: 2.5deg; }
.st-ch-desk.is-single .st-print { top: 50%; left: 50%; translate: -50% -50%; rotate: -1.5deg; }
.st-print-img { width: 100%; height: auto; }
.st-print figcaption { padding: 8px 2px 10px; font-size: 0.75rem; line-height: 1.4; color: var(--ink-3); }
.st-ch-prints.is-flip .st-ch-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.st-ch-prints.is-flip .st-ch-desk { order: 2; }

/* The coda */
.st-coda {
  min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(28px, 6svh, 72px);
  padding-block: clamp(28px, 6svh, 88px); background: var(--burgundy); color: var(--on-burgundy); overflow: hidden;
}
.st-coda ::selection { background: var(--on-burgundy); color: var(--burgundy); }
.st-coda-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px clamp(32px, 5vw, 104px); align-items: end; }
.st-coda .md-kicker { color: var(--on-burgundy-2); }
.st-coda-title { margin-top: 14px; max-width: 13ch; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, min(1rem + 4.6vw, 10svh), 6.5rem); line-height: 0.95; letter-spacing: -0.03em; }
.st-coda-title em { display: block; color: var(--on-burgundy-2); }
.st-coda-text { max-width: 44ch; color: var(--on-burgundy-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.5; }
.st-coda-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(18px, 3.4svh, 34px); }
.st-coda .md-button { --bg: var(--sand); color: var(--burgundy); }
.st-coda .md-button:hover { --bg: #fff; color: var(--burgundy); }
.st-coda .md-arrow-link { color: var(--on-burgundy); }
.st-coda .md-arrow-link:hover { color: #fff; }
/* The band: two rows of open questions, drifting in opposite directions. Pointing at the band stops it. */
.st-band { border-block: 1px solid rgba(246, 244, 237, 0.24); }
.st-band-row { display: flex; width: max-content; animation: st-drift var(--t, 110s) linear infinite; }
.st-band-row.is-reverse { animation-direction: reverse; }
.st-band-row + .st-band-row { border-top: 1px solid rgba(246, 244, 237, 0.12); }
.st-band:hover .st-band-row { animation-play-state: paused; }
.st-band-list { display: flex; flex: none; }
.st-band-list li { display: flex; align-items: center; }
.st-band-list li::after { content: ""; flex: none; width: 7px; height: 7px; border-radius: 1px; background: var(--on-burgundy-2); opacity: 0.55; }
.st-band-list a { display: flex; align-items: baseline; gap: 16px; padding: clamp(12px, 2.2svh, 24px) clamp(22px, 2.6vw, 44px); color: inherit; text-decoration: none; white-space: nowrap; }
.st-band-sn { flex: none; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--on-burgundy-2); }
.st-band-q { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, min(0.9rem + 1.5vw, 4.4svh), 2.4rem); line-height: 1.1; transition: color 200ms var(--ease-out); }
.st-band-list a:hover .st-band-q { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@keyframes st-drift { to { transform: translateX(-50%); } }

/* The chapter index: eight numbers at the edge of the screen while the chapters are on it. */
.st-index { position: fixed; z-index: 20; right: clamp(10px, 1.4vw, 24px); top: 50%; translate: 0 -50%; opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-out); mix-blend-mode: difference; }
.md-stories-index.is-reading .st-index { opacity: 1; pointer-events: auto; }
.st-index ol { display: grid; gap: 2px; }
.st-index a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 26px; color: #fff; text-decoration: none; opacity: 0.45; transition: opacity 300ms var(--ease-out); }
.st-index a::after { content: ""; width: 12px; height: 1px; background: currentColor; transition: width 400ms var(--ease-out); }
.st-index span { font-size: 0.75rem; letter-spacing: 0.1em; opacity: 0; transition: opacity 300ms var(--ease-out); }
.st-index a:hover, .st-index a[aria-current="true"] { opacity: 1; }
.st-index a[aria-current="true"]::after { width: 28px; }
.st-index a:hover span, .st-index a[aria-current="true"] span { opacity: 1; }

/* Wide screens: split and bleed */
@media (min-width: 961px) {
  .st-ch-split { grid-template-columns: 56% minmax(0, 1fr); }
  .st-ch-split .st-ch-body { align-self: center; padding: clamp(32px, 6svh, 80px) var(--gutter) clamp(32px, 6svh, 80px) clamp(40px, 5.4vw, 112px); }
  .st-ch-split .st-ch-inset { left: calc(56% - clamp(150px, 15vw, 270px) - clamp(24px, 3vw, 48px)); bottom: clamp(48px, 9svh, 110px); }
  .st-ch-split.is-flip { grid-template-columns: minmax(0, 1fr) 56%; }
  .st-ch-split.is-flip .st-ch-photo { order: 2; }
  .st-ch-split.is-flip .st-ch-body { padding-left: max(var(--gutter), calc((100vw - var(--rail)) / 2)); padding-right: clamp(40px, 5.4vw, 112px); }
  .st-ch-split.is-flip .st-ch-inset { left: auto; right: calc(56% - clamp(150px, 15vw, 270px) - clamp(24px, 3vw, 48px)); rotate: 2.5deg; }
  .st-ch-split.is-flip .st-ch-photo figcaption { left: auto; text-align: right; right: clamp(44px, 4vw, 72px); }

  .st-ch-bleed { background: var(--ink); color: var(--paper); }
  .st-ch-bleed .st-ch-photo { position: absolute; inset: 0; }
  .st-ch-bleed .st-ch-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 13, 10, 0.86) 0%, rgba(11, 13, 10, 0.62) 34%, rgba(11, 13, 10, 0) 66%); }
  .st-ch-bleed .st-ch-photo figcaption { left: auto; right: clamp(44px, 4vw, 72px); bottom: auto; top: 16px; max-width: 42ch; text-align: right; }
  .st-ch-bleed .st-ch-body { position: relative; z-index: 1; align-self: end; padding-block: clamp(32px, 7svh, 96px); }
  .st-ch-bleed .st-ch-inset { right: clamp(56px, 7vw, 140px); bottom: clamp(48px, 9svh, 110px); rotate: 2deg; }

  .st-ch-panorama .st-ch-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 96px); align-items: start; }
  .st-ch-panorama .st-ch-n { font-size: clamp(2.6rem, min(1.6rem + 2.4vw, 8svh), 4.6rem); }
  .st-ch-panorama .st-ch-rest { padding-top: clamp(4px, 1svh, 12px); }
  .st-ch-panorama .st-ch-dek { margin-top: 0; }
}

/* Colours over a photograph */
.st-ch-bleed .st-ch-n { color: var(--on-burgundy-2); }
.st-ch-bleed .st-ch-kicker, .st-ch-bleed .st-ch-open-label { color: var(--on-ink-2); }
.st-ch-bleed .st-ch-dek { color: rgba(253, 252, 248, 0.86); }
.st-ch-bleed .st-ch-open { border-top-color: rgba(253, 252, 248, 0.3); }
.st-ch-bleed .st-ch-q { color: var(--sand); }
.st-ch-bleed .st-ch-title a:hover, .st-ch-bleed .md-arrow-link:hover { color: var(--on-burgundy-2); }
.st-ch-bleed .md-arrow-link, .st-ch-bleed .st-ch-register { color: var(--paper); }

/* Arriving: the photograph opens from the story's side, the prints settle, the words follow. */
.md-js .st-ch .st-ch-frame { clip-path: inset(0 0 0 0); transition: clip-path 1300ms cubic-bezier(0.7, 0, 0.2, 1); }
.md-js .st-ch-split:not(.is-in) .st-ch-frame { clip-path: inset(0 100% 0 0); }
.md-js .st-ch-split.is-flip:not(.is-in) .st-ch-frame { clip-path: inset(0 0 0 100%); }
.md-js .st-ch-bleed:not(.is-in) .st-ch-frame { clip-path: inset(0 0 100% 0); }
.md-js .st-ch-panorama:not(.is-in) .st-ch-frame { clip-path: inset(0 50% 0 50%); }
.md-js .st-ch .st-ch-img { transition: scale 2200ms var(--ease-out); }
.md-js .st-ch:not(.is-in) .st-ch-img { scale: 1.24; }
.md-js .st-ch-photo figcaption { transition: opacity 600ms var(--ease-out) 900ms; }
.md-js .st-ch:not(.is-in) .st-ch-photo figcaption { opacity: 0; }
.md-js .st-ch-inset { transition: opacity 700ms var(--ease-out), transform 1200ms var(--ease-out), rotate 1200ms var(--ease-out); }
.md-js .st-print { transition: opacity 700ms var(--ease-out), translate 1200ms var(--ease-out), rotate 1200ms var(--ease-out); }
.md-js .st-ch-inset { transition-delay: 700ms; }
.md-js .st-print.is-second { transition-delay: 180ms; }
.md-js .st-ch:not(.is-in) .st-ch-inset { opacity: 0; transform: translateY(48px); rotate: 0deg; }
.md-js .st-ch:not(.is-in) .st-print { opacity: 0; translate: 0 64px; rotate: 0deg; }
.md-js .st-ch:not(.is-in) .st-ch-desk.is-single .st-print { translate: -50% calc(-50% + 64px); }
.md-js .st-ch-head > *, .md-js .st-ch-rest > * { transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-out); }
.md-js .st-ch:not(.is-in) .st-ch-head > *, .md-js .st-ch:not(.is-in) .st-ch-rest > * { opacity: 0; translate: 0 18px; }
.md-js .st-ch.is-in .st-ch-head > :nth-child(1) { transition-delay: 300ms; }
.md-js .st-ch.is-in .st-ch-head > :nth-child(2) { transition-delay: 380ms; }
.md-js .st-ch.is-in .st-ch-head > :nth-child(3) { transition-delay: 450ms; }
.md-js .st-ch.is-in .st-ch-rest > :nth-child(1) { transition-delay: 530ms; }
.md-js .st-ch.is-in .st-ch-rest > :nth-child(2) { transition-delay: 610ms; }
.md-js .st-ch.is-in .st-ch-rest > :nth-child(3) { transition-delay: 690ms; }

/* Short laptop screens */
@media (min-width: 961px) and (max-height: 760px) {
  .st-ch-n { font-size: clamp(2.6rem, 8svh, 4rem); }
  .st-ch-open { margin-top: 14px; }
  .st-ch-links { margin-top: 16px; }
}

/* Phones and tablets: the photograph above, the story below. A dark photograph runs into a dark page. */
@media (max-width: 960px) {
  .st-intro-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  /* An open slice is half the row here, and a little more on phones. */
  .st-slice img { width: max(100%, 52vw); }
  .st-slice-text { width: calc(50vw - 40px); left: 14px; bottom: 16px; }
  .st-slice-title { font-size: clamp(1.1rem, 4.6vw, 1.6rem); }

  .st-ch { --ph: clamp(220px, 38svh, 520px); --inset: clamp(104px, 28vw, 210px); grid-template-rows: auto minmax(0, 1fr); }
  .st-ch-split .st-ch-photo, .st-ch-panorama .st-ch-photo { height: var(--ph); }
  .st-ch-panorama { grid-template-rows: auto minmax(0, 1fr); }
  .st-ch-panorama .st-ch-body { padding-block: clamp(18px, 3.4svh, 40px); }
  .st-ch-panorama .st-ch-inset { top: calc(var(--ph) - 14px); translate: 0 -100%; }
  .st-ch-split .st-ch-body { align-self: center; padding: clamp(18px, 3.4svh, 40px) var(--gutter); }
  /* The second print lies in the photograph's lower corner; the caption keeps clear of it. */
  .st-ch-inset { width: var(--inset); right: var(--gutter); }
  .st-ch-split .st-ch-inset { top: calc(var(--ph) - 14px); translate: 0 -100%; }
  .st-ch:has(.st-ch-inset):not(.st-ch-bleed) .st-ch-photo figcaption { right: calc(var(--inset) + var(--gutter) + 12px); }

  .st-ch-bleed { background: var(--ink); color: var(--paper); }
  .st-ch-bleed .st-ch-photo { height: var(--ph); }
  .st-ch-bleed .st-ch-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 13, 10, 0) 58%, var(--ink) 100%); }
  .st-ch-bleed .st-ch-photo figcaption { top: 14px; bottom: auto; right: 18px; }
  .st-ch-bleed .st-ch-body { align-self: center; padding-block: clamp(12px, 2.4svh, 32px) clamp(18px, 3.4svh, 40px); }
  .st-ch-bleed .st-ch-inset { top: clamp(44px, 8svh, 96px); rotate: 2deg; }

  .st-ch-prints .st-ch-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(8px, 2svh, 24px); padding-block: clamp(16px, 3svh, 40px); align-content: center; }
  .st-ch-prints.is-flip .st-ch-grid { grid-template-columns: minmax(0, 1fr); }
  .st-ch-prints.is-flip .st-ch-desk { order: 0; }
  .st-ch-desk { height: clamp(200px, 38svh, 460px); max-width: 560px; width: 100%; justify-self: center; }

  .st-ch-n { font-size: clamp(2.4rem, 7svh, 3.6rem); }
  .st-ch-kicker { margin-top: 10px; }
  .st-ch-title { max-width: 18ch; font-size: clamp(1.75rem, min(7.4vw, 5svh), 3rem); }
  .st-ch-dek { max-width: 46ch; }
  .st-index { display: none; }
  .st-coda-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .st-coda-title { max-width: 14ch; }
}
@media (max-width: 640px) {
  .st-title { font-size: clamp(2.3rem, 10.4vw, 3rem); }
  .st-intro-aside p { font-size: 0.9375rem; }
  .st-slices { gap: 2px; }
  .st-slice.is-open { flex-grow: 9; }
  .st-slice img { width: max(100%, 58vw); }
  .st-slice-text { width: calc(54vw - 28px); }
  .st-slice-n { top: 10px; left: 50%; translate: -50% 0; font-size: 0.875rem; }
  .st-slice.is-open .st-slice-n { left: 14px; translate: 0 0; }
  .st-more { display: grid; gap: 6px; }
  .st-ch-dek { font-size: 0.9375rem; }
  .st-ch-q { font-size: 1rem; }
  .st-ch-photo figcaption, .st-print figcaption, .st-ch-inset figcaption { font-size: 0.75rem; }
  .st-ch-open-label { letter-spacing: 0.05em; }
  .st-print { padding: 6px 6px 0; }
  .st-print:not(.is-second) { top: 0; }
  .st-ch-desk { height: clamp(200px, 36svh, 420px); }
  .st-print figcaption { padding: 5px 0 6px; }
  .st-ch-inset { padding: 5px 5px 0; }
  .st-ch-inset figcaption { padding: 4px 0 6px; }
  .st-coda-links { gap: 14px 20px; }
}
/* Short phones: a shorter photograph and a one-line account. */
@media (max-width: 640px) and (max-height: 760px) {
  .st-intro-aside p { display: none; }
  .st-ch { --ph: clamp(180px, 34svh, 260px); --inset: 96px; }
  .st-ch-desk { height: clamp(170px, 31svh, 240px); }
  .st-print { width: calc(var(--size, 60%) * 0.84); }
  .st-print figcaption { display: none; }
  .st-print { padding-bottom: 6px; }
  .st-ch-n { display: none; }
  .st-ch-kicker { margin-top: 0; }
  .st-ch-dek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; }
  .st-ch-open { margin-top: 12px; padding-top: 8px; }
  .st-ch-links { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-band-row { animation: none; }
  .st-band { overflow-x: auto; scrollbar-width: none; }
  .st-band-list + .st-band-list { display: none; }
  .st-slice, .st-slice img, .st-slice-text, .st-ch-frame, .st-ch-img, .st-ch-inset, .st-print, .st-ch-text > *, .st-ch-photo figcaption { transition: none !important; }
}