@property --fade-start { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* running text */
.chapter p + p, .end p + p, .entry p + p { margin-top: 1em; }

/* prints: every photo on the page */
.print { margin: 2.4rem 0 0; max-width: var(--figure); }
.print img { width: 100%; height: auto; border: 1px solid var(--hairline); filter: brightness(calc(1 - var(--night) * 0.18)) saturate(calc(1 - var(--night) * 0.25)); transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), opacity 200ms ease; }
.print figcaption { margin-top: 0.6rem; text-align: end; font-family: var(--font); font-variation-settings: "wdth" 85; }
.print button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.print button:hover img, .print button:focus-visible img { transform: translateY(-3px); box-shadow: 0 22px 40px -22px color-mix(in oklab, var(--shade) 60%, transparent); }
.print.is-lifted img { opacity: 0; transition: none; }
.print figcaption { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: transparent; transition: text-decoration-color 250ms ease; }
.print:has(button:hover, button:focus-visible) figcaption { text-decoration-color: var(--accent); }

/* the lead print: the one photo that takes the full figure width, with a sky-tinted shadow */
.print--lead img { box-shadow: 0 24px 48px -22px color-mix(in oklab, var(--shade) 60%, transparent); }
.print--lead button:hover img, .print--lead button:focus-visible img { box-shadow: 0 30px 56px -22px color-mix(in oklab, var(--shade) 65%, transparent); }

/* contact sheet: one strip of prints at a single height, scrolled or dragged sideways, with a hairline ruler instead of a scrollbar */
/* the edge fades lie over the band of photos only, so the captions beneath always read whole.
   The frame is its own stacking context, so the fades rise above the strip and never above the scene band that phones keep over the column */
.sheet-frame { --h: 240px; --fade-end: 3.5rem; --fade-start: 0px; position: relative; isolation: isolate; transition: --fade-start 300ms ease; }
.sheet-frame:has(.sheet.is-scrolled) { --fade-start: 2.5rem; }
.sheet-frame::before, .sheet-frame::after { content: ""; position: absolute; top: 2rem; height: var(--h); z-index: 1; pointer-events: none; }
.sheet-frame::before { inset-inline-start: 0; width: var(--fade-start); background: linear-gradient(to left, transparent, var(--surface)); }
.sheet-frame::after { inset-inline-end: calc(-1 * var(--pad-end)); width: var(--fade-end); background: linear-gradient(to right, transparent, var(--surface)); }
.sheet-frame:dir(rtl)::before { background: linear-gradient(to right, transparent, var(--surface)); }
.sheet-frame:dir(rtl)::after { background: linear-gradient(to left, transparent, var(--surface)); }
.no-js .sheet-frame::before, .no-js .sheet-frame::after { display: none; }
.sheet { display: flex; gap: 1.25rem; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2rem 0 0.75rem; margin: 0; margin-inline-end: calc(-1 * var(--pad-end)); padding-inline-end: var(--pad-end); scrollbar-width: none; cursor: grab; }
.sheet::-webkit-scrollbar { display: none; }
.no-js .sheet { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
.sheet.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.sheet__item { flex: 0 0 auto; scroll-snap-align: start; margin: 0; max-width: none; width: min-content; }
.sheet__item img { height: var(--h); width: auto; max-width: none; }
.sheet__item figcaption { text-align: start; min-height: 2.6em; }
.sheet__ruler { position: relative; height: 1px; width: min(100%, 18rem); margin: 0.4rem 0 0; background: var(--hairline); }
.sheet__count { display: block; margin-top: 0.55rem; font-family: var(--font); font-size: 0.9rem; color: var(--ink-2); font-variation-settings: "wdth" 85; }
.no-js .sheet__count { display: none; }
.sheet__ruler[hidden] { display: none; }
.sheet__ruler span { position: absolute; top: -1px; inset-inline-start: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0.3); transition: transform 120ms linear; }
.sheet__ruler span:dir(rtl) { transform-origin: right center; }

/* research entries: each project on a rail, its mark drawn large beside a plain name, one hairline between entries */
.entries { --rail: 4rem; display: grid; margin: 2.6rem 0 2.8rem; max-width: var(--figure); border-top: 1px solid var(--hairline); }
.entry { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 1.6rem; align-items: start; padding: 1.8rem 0 2rem; border-bottom: 1px solid var(--hairline); }
.entry__badge { grid-row: 1 / span 2; width: var(--rail); padding-top: 0.2rem; }
.entry__mark { display: block; width: 100%; height: auto; }
.entry__title, .shot h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.entry__title { grid-column: 2; margin-bottom: 0.5rem; }
.entry p { grid-column: 2; }
/* the mmore monogram: the "(m)" cut from the wordmark, parentheses in ink and the m in the project's yellow */
.entry__mark--mmore { position: relative; aspect-ratio: 252 / 93; }
.entry__mark--mmore::before, .entry__mark--mmore::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.entry__mark--mmore::before { --m: url("../../images/logos/mmore-mark-ink.png"); background: currentColor; }
.entry__mark--mmore::after { --m: url("../../images/logos/mmore-mark-yellow.png"); background: #f7cb46; }
.citation { border-inline-start: 1px solid var(--hairline); padding-inline-start: 1.2rem; margin: 2.4rem 0; max-width: var(--measure); }
.citation p { margin-bottom: 0.4rem; }

/* in their words: two letters on a rail. Each is quoted whole in italic with a large opening mark hanging before its first line;
   the letterhead (who, their role, when) stands in the rail beside the text, one hairline above each letter and one below the last */
.letters { margin: 3.6rem 0 0; max-width: var(--figure); }
.letters h3 { margin-bottom: 0.6rem; }
.letters > p { margin-bottom: 1.8rem; }
.letter { display: grid; grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr); grid-template-areas: "who text"; column-gap: 2.6rem; align-items: start; margin: 0; padding: 2rem 0 2.2rem; border-top: 1px solid var(--hairline); }
.letter:last-of-type { border-bottom: 1px solid var(--hairline); }
.letter__text { grid-area: text; position: relative; max-width: 46ch; }
.letter__text p { font-style: italic; font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.42; max-width: none; }
.letter__text p + p { margin-top: 0.7em; }
/* the opening mark hangs whole in the gutter between the letterhead and the text, so every line of the quote starts on the same edge */
.letter__text p:first-of-type::before { content: "\201C"; position: absolute; top: -0.06em; left: -0.56em; font-family: var(--font); font-style: normal; font-weight: 800; font-size: 3.4em; line-height: 1; color: color-mix(in oklab, var(--ink) 32%, transparent); }
.letter footer { grid-area: who; padding-top: 0.5rem; font-family: var(--font); font-size: 0.9rem; line-height: 1.35; color: var(--ink-2); font-variation-settings: "wdth" 90; }
.letter footer strong { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); font-variation-settings: "wdth" 100; }
.letter__role { display: block; }
.letter__date { display: block; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }

/* work: two large entries with their screenshots, then a ruled index of the rest */
.shots { display: grid; gap: 3.2rem; margin: 2rem 0 3rem; max-width: var(--figure); }
#work { container: work / inline-size; }
#work > h3 { margin: 0 0 0.8rem; }
.shot__link { display: block; text-decoration: none; }
.shot__link:focus-visible { outline-offset: 6px; }
.shot img { width: 100%; height: auto; border: 1px solid var(--hairline); filter: brightness(calc(1 - var(--night) * 0.22)) saturate(calc(1 - var(--night) * 0.15)); box-shadow: 0 18px 30px -24px color-mix(in oklab, var(--shade) 45%, transparent); transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.shot__link:hover img, .shot__link:focus-visible img { transform: translateY(-2px); box-shadow: 0 22px 34px -24px color-mix(in oklab, var(--shade) 55%, transparent); }
.shot__cue { display: block; margin-top: 0.6rem; text-align: end; font-family: var(--font); font-size: 0.9rem; color: var(--ink-2); font-variation-settings: "wdth" 85; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: transparent; transition: text-decoration-color 250ms ease, color 250ms ease; }
.shot__link:hover .shot__cue, .shot__link:focus-visible .shot__cue { color: var(--ink); text-decoration-color: var(--accent); }
.shot h3 { margin: 1.1rem 0 0.35rem; }
.shot p { margin-bottom: 0.5rem; }
.index { list-style: none; padding: 0; margin: 0 0 2.8rem; max-width: var(--figure); border-top: 1px solid var(--hairline); }
.index li { display: grid; grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr); column-gap: 1.6rem; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--hairline); }
.index strong { overflow-wrap: anywhere; font-family: var(--font); font-weight: 600; font-size: 1.05rem; line-height: 1.35; letter-spacing: -0.01em; }
.index span { color: var(--ink-2); max-width: var(--measure); }

/* where I started: the first two projects as two screens side by side, at one height, each played in place by a control of its own.
   Every shot of a screen lies in the same cell; the one on shows, a press on it opens the viewer */
/* each screen shares the rows of the pair (name, screen, controls, words), so both descriptions start on the same line */
.screens { display: grid; grid-template-columns: minmax(0, 1.31fr) minmax(0, 1fr); column-gap: clamp(1.4rem, 5cqw, 2.4rem); margin: 1.6rem 0 2.8rem; max-width: var(--figure); }
.screen { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-items: start; margin: 0; }
/* whose screen it is, set like the names in the list beneath */
.screen__name { display: flex; align-items: baseline; column-gap: 0.6rem; margin: 0 0 0.75rem; font-family: var(--font); font-weight: 600; font-size: 1.05rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.screen__year { font-weight: 400; font-size: 0.9rem; color: var(--ink-2); font-variation-settings: "wdth" 85; font-variant-numeric: tabular-nums; }
.screen__frame { position: relative; display: grid; border: 1px solid var(--hairline); background: #fff; overflow: hidden; box-shadow: 0 18px 30px -24px color-mix(in oklab, var(--shade) 45%, transparent); transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.screen--rechor .screen__frame { aspect-ratio: 1600 / 1242; }
.screen--icmon .screen__frame { aspect-ratio: 1058 / 1080; background: #000; }
.screen__frame:has(.screen__shot:hover, .screen__shot:focus-visible) { transform: translateY(-3px); box-shadow: 0 22px 40px -22px color-mix(in oklab, var(--shade) 60%, transparent); }
.screen__frame:has(.screen__shot:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.screen__shot { grid-area: 1 / 1; display: block; min-width: 0; padding: 0; border: 0; background: none; cursor: zoom-in; opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 320ms; }
.screen__shot:focus-visible { outline: none; }
.screen__shot.is-on { opacity: 1; visibility: visible; }
.screen__shot picture, .screen__shot img { display: block; width: 100%; height: 100%; }
.screen__shot img { object-fit: cover; object-position: center top; }
/* the map is wider than the window it shows in, so it fills the screen and follows the trip, from Ecublens on the left to Gruyères on the right */
.screen__shot--pan img { object-fit: cover; object-position: 50% 50%; }
.motion-ok .screen__shot--pan.is-on img { animation: follow-trip 5.5s 450ms cubic-bezier(0.45, 0, 0.25, 1) both; }
@keyframes follow-trip { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
.screen__shot.is-lifted img { opacity: 0; transition: none; }
/* ICMonGame cuts through black between scenes, as the game does between places */
.screen--icmon .screen__shot { transition: none; }
/* the scene eases down to dark, then the next one comes up, a little slower */
.screen__frame::after { content: ""; grid-area: 1 / 1; background: #000; opacity: 0; pointer-events: none; transition: opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.screen.is-turning .screen__frame::after { opacity: 1; transition: opacity 300ms cubic-bezier(0.45, 0, 0.55, 1); }
.screen__text { margin: 0.6rem 0 0; font-family: var(--font); font-size: 0.95rem; line-height: 1.4; font-variation-settings: "wdth" 85; color: var(--ink-2); }

/* ReCHor's trip, drawn as its own summary draws one: the times at each end, a filled stop at departure and arrival, and between them
   one stop per shot, filled while its shot is on */
.trip { display: flex; align-items: flex-start; column-gap: 0.45rem; margin-top: 1rem; font-family: var(--font); font-variation-settings: "wdth" 85; }
.trip__time { display: inline-flex; align-items: center; column-gap: 0.45rem; height: 0.75rem; font-size: 0.85rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.trip__time:first-child::after, .trip__time:last-child::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ink); }
.trip__line { position: relative; flex: 1; display: flex; }
.trip__line::before { content: ""; position: absolute; inset-inline: -0.45rem; top: calc(0.375rem - 1px); height: 2px; background: var(--ink); }
.trip__stop { all: unset; position: relative; flex: 1; display: grid; justify-items: center; row-gap: 0.4rem; padding-bottom: 0.2rem; cursor: pointer; font-size: 0.85rem; line-height: 1.2; color: var(--ink-2); text-align: center; }
.trip__stop::before { content: ""; box-sizing: border-box; width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); transition: background-color 200ms ease, border-color 200ms ease; }
.trip__stop:hover::before { border-color: var(--accent); }
.trip__stop[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.trip__stop[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }
.trip__stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ICMonGame's dialog box, as the game draws it: a white box in a blue frame, and a small arrow that bobs while there is more to read.
   The box itself is the button that moves on, so a press anywhere on it, or Space once it has focus, turns to the next scene */
.dialog { position: relative; margin-top: 0.9rem; padding-block: 0.7rem 0.8rem; padding-inline: 0.95rem 2.2rem; min-height: 4.2rem; border: 3px solid #7fa6d6; border-radius: 9px; background: #fbfcfe; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #c9d9ee; }
.dialog .screen__text { margin: 0; font-size: 0.95rem; color: #1d2733; font-variation-settings: "wdth" 90; transition: opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.screen.is-turning .dialog .screen__text { opacity: 0; transition: opacity 300ms cubic-bezier(0.45, 0, 0.55, 1); }
/* what the project is, under a hairline, once per project */
.screen__about { margin: 1.3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline); color: var(--ink-2); }
.dialog__next { all: unset; position: absolute; inset: -3px; border-radius: 9px; cursor: pointer; }
.dialog__next::before { content: ""; position: absolute; inset-inline-end: 0.85rem; bottom: 0.7rem; width: 0; height: 0; border: 0.35rem solid transparent; border-top: 0.45rem solid #d0453a; border-bottom: 0; animation: dialog-more 900ms steps(2, jump-none) infinite; }
.dialog__next:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes dialog-more { to { transform: translateY(3px); } }
.no-js .trip, .no-js .dialog__next { display: none; }

/* when the column cannot hold two screens at a readable size, they stack, the game a little narrower so it never fills a phone */
@container work (max-width: 26rem) {
  .screens { grid-template-columns: minmax(0, 1fr); }
  .screen + .screen { margin-top: 2.6rem; }
  .screen--icmon .screen__frame, .screen--icmon .dialog { width: min(100%, 16rem); }
}

/* off the clock: the pursuits run as one sentence of big condensed type, a sign at night. One word is lit and the rest wait unlit;
   the pointer carries light through them by distance (life.js), and the lit word's sentence shows in the ruled zone beneath */
@property --lit { syntax: "<number>"; inherits: false; initial-value: 0; }
.life { --zone: 8rem; display: grid; grid-template-rows: auto minmax(var(--zone), auto); max-width: var(--figure); }
.deflist { grid-column: 1 / -1; position: relative; margin: 0.4rem 0 2rem; font-family: var(--font); font-weight: 800; font-size: clamp(2.3rem, 4.2vw, 3.7rem); line-height: 1.02; letter-spacing: -0.025em; text-wrap: pretty; }
.deflist::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 0.9rem); height: 1px; background: var(--hairline); }
.deflist > div { display: contents; }
/* a word's light: from a quarter of the ink to the whole of it, warmed a little like the lamps, and a touch wider */
.deflist dt { display: inline; --lit: 0; color: color-mix(in oklab, color-mix(in oklab, var(--ink), var(--accent) calc(var(--lit) * 12%)) calc((50 + 50 * var(--lit)) * 1%), transparent); font-variation-settings: "wdth" calc(85 + 8 * var(--lit)); transition: --lit 450ms var(--ease-out); }
.deflist dt.is-active, .deflist dt:hover, .deflist dt:focus-within, .deflist:not(:has(.is-active, dt:hover, dt:focus-within)) > div:first-child dt { --lit: 1; }
/* the button is an atomic inline, so a phrase never breaks inside and its comma, drawn inside the button, never starts a line */
.deflist dt button { all: unset; display: inline; font: inherit; color: inherit; cursor: pointer; }
.deflist dt button::after { content: ","; color: color-mix(in oklab, var(--ink) 40%, transparent); }
.deflist dt button:lang(ar)::after { content: "،"; }
/* the lit word's comma carries the lamp */
.deflist dt.is-active button::after, .deflist:not(:has(.is-active)) > div:first-child dt button::after { color: color-mix(in oklab, var(--accent), var(--ink) 22%); }
.deflist > div:last-child dt button::after { content: "."; }
.deflist dt button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
/* the sweep: each word lights in turn and goes back out, the first stays lit */
.deflist.is-sweep dt { animation: word-passed 1000ms var(--ease-out) calc(var(--i, 0) * 110ms) backwards; }
.deflist.is-sweep dt.is-active { animation-name: word-lit; }
@keyframes word-passed { 0% { --lit: 0; } 40% { --lit: 1; } 100% { --lit: 0; } }
@keyframes word-lit { 0% { --lit: 0; } 40% { --lit: 1; } 100% { --lit: 1; } }
/* the sentences all sit in the zone under the rule, one showing at a time */
.deflist dd { position: absolute; inset-inline-start: 0; top: calc(100% + 2rem); width: 100%; max-width: 46ch; margin: 0; font-family: var(--font-text); font-style: italic; font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.42; letter-spacing: 0; color: var(--ink); opacity: 0; transform: translateY(0.35rem); transition: opacity 350ms ease, transform 450ms var(--ease-out); pointer-events: none; }
.deflist dt:hover + dd, .deflist dt:focus-within + dd, .deflist dd.is-shown, .deflist:not(:has(dd.is-shown, dt:hover, dt:focus-within)) > div:first-child dd { opacity: 1; transform: none; }
.scripts { display: block; margin-top: 0.9rem; font-style: normal; font-size: 1.15rem; color: var(--ink-2); }
.scripts span { display: inline-block; margin-inline-end: 1.1em; }
.scripts span:last-child { margin-inline-end: 0; }

/* with others: each association's words beside a pile of its prints, the sides trading places down the chapter.
   A print keeps its own shape on paper-white stock; the top one lies flat, three more show behind it, and the rest wait under the pile */
.groups { container-type: inline-size; max-width: var(--figure); }
.group { --pile: min(17rem, 44%); display: grid; grid-template-columns: minmax(0, 1fr) var(--pile); column-gap: clamp(1.6rem, 6cqw, 2.6rem); align-items: center; margin-top: 3.4rem; }
.group:first-child { margin-top: 1.2rem; }
.group:nth-child(even) { grid-template-columns: var(--pile) minmax(0, 1fr); }
.group:nth-child(even) .pile { order: -1; }
.group h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.group__name { display: inline-flex; align-items: center; gap: 0.7rem; }
.group__mark { flex: none; width: 30px; height: 30px; object-fit: contain; }
.group__mark--round { border-radius: 50%; object-fit: cover; }
.group__mark--wide { width: auto; height: 20px; color: var(--ink); }
.group__role { margin-top: 0.3rem; font-family: var(--font); font-size: 0.95rem; font-variation-settings: "wdth" 85; color: var(--ink-2); }
.group__words > p + p { margin-top: 0.7rem; }
.group__count { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.1rem; font-family: var(--font); font-size: 0.95rem; font-variation-settings: "wdth" 85; color: var(--ink-2); }
.group__open { all: unset; cursor: zoom-in; color: var(--ink); text-decoration: underline 1px; text-underline-offset: 0.25em; text-decoration-color: var(--hairline); transition: text-decoration-color 250ms ease; }
.group__open:hover, .group__open:focus-visible { text-decoration-color: var(--accent); }
.group__open:focus-visible, .pile:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.pile { --paper: #f3f5f7; all: unset; position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 5; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pile__photo { position: absolute; inset: 0; visibility: hidden; opacity: 0; will-change: transform; transition: transform 520ms var(--ease-out), opacity 300ms ease, visibility 600ms; }
.pile__photo img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; border: 5px solid var(--paper); border-bottom-width: 7px; box-shadow: 0 14px 28px -16px color-mix(in oklab, var(--shade) 80%, transparent); }
.pile__photo[data-pos="0"] { visibility: visible; opacity: 1; z-index: 4; transform: rotate(-1.4deg); }
.pile__photo[data-pos="1"] { visibility: visible; opacity: 1; z-index: 3; transform: translate(7px, 3px) rotate(3.2deg); }
.pile__photo[data-pos="2"] { visibility: visible; opacity: 1; z-index: 2; transform: translate(-8px, 5px) rotate(-4.4deg); }
.pile__photo[data-pos="3"] { visibility: visible; opacity: 1; z-index: 1; transform: translate(10px, 7px) rotate(5.4deg); }
/* a dealt print slides out towards the words, beside them or up to them when stacked, so it never widens the page or crosses into the scene;
   --words is the side they are on */
.pile { --words: -1; }
.group:nth-child(even) .pile, .pile:dir(rtl) { --words: 1; }
.group:nth-child(even) .pile:dir(rtl) { --words: -1; }
.pile__photo.is-dealt { z-index: 5; transform: translate(calc(var(--words) * 70%), -4%) rotate(calc(var(--words) * 9deg)); }
.no-js .group__open { display: none; }
.no-js .pile { cursor: default; }
@container (max-width: 29rem) {
  .group, .group:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; }
  .group:nth-child(even) .pile { order: 0; }
  .pile { justify-self: center; width: min(100%, 19rem); }
  .pile__photo.is-dealt { transform: translate(0%, -55%) rotate(-4deg); }
}

@media (max-width: 900px) {
  .print--lead { width: calc(100% + 2.5rem); max-width: none; margin-inline: -1.25rem; }
  .print--lead img { border-left: 0; border-right: 0; box-shadow: none; }
  .print--lead button:hover img { transform: none; box-shadow: none; }
  .sheet-frame { --h: 170px; --fade-end: 1.75rem; }
  .sheet-frame:has(.sheet.is-scrolled) { --fade-start: 1.5rem; }
  .sheet { cursor: auto; }
  .entries { --rail: 3rem; }
  .entry { column-gap: 1rem; padding: 1.4rem 0 1.6rem; }
  .entry__title, .shot h3 { font-size: 1.25rem; }
  .index li { grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr); column-gap: 1rem; }
  .deflist { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  .letter { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "text"; row-gap: 1rem; padding: 1.6rem 0 1.8rem; }
  .letter footer { padding-top: 0; }
  /* no gutter on phones: the mark floats one line tall at the start of the quote */
  .letter__text p:first-of-type::before { position: static; float: left; font-size: 2.4em; line-height: 0.5; margin: 0.04em 0.12em 0 -0.06em; }
}
@media (max-width: 600px) {
  .index li { grid-template-columns: 1fr; row-gap: 0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .print img, .shot img, .sheet__ruler span { transition: none; }
  .print button:hover img, .print button:focus-visible img, .shot__link:hover img, .shot__link:focus-visible img { transform: none; }
  .deflist dt { transition: none; animation: none; }
  .deflist dd { transition: none; transform: none; }
  .pile__photo { transition: none; }
  .screen__shot, .screen__shot--pan img, .screen__frame::after, .dialog__next::before { transition: none; animation: none; }
  .screen__frame:has(.screen__shot:hover, .screen__shot:focus-visible) { transform: none; }
}