:root {
  --paper: #f4f3f5;
  --ink: #171716;
  --muted: rgba(23, 23, 22, .55);
  --line: rgba(23, 23, 22, .25);
  --faint: rgba(23, 23, 22, .12);
  --orange: #f35d27;
  --yellow: #fff100;
  --cyan: #049978;
  --magenta: #993370;
  --blue: #5984c9;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body {
  background-color: var(--paper);
}
body::after { content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .018; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
a:focus-visible, button:focus-visible, [contenteditable]:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.c2-header { position: fixed; top: 0; right: 0; left: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.4fr 1fr; min-height: 57px; padding: 14px 22px 10px; border-bottom: 1px solid var(--line); background: rgba(244, 243, 245, .95); font-size: 8px; line-height: 1.2; letter-spacing: .09em; text-transform: uppercase; }
.c2-header__back { width: max-content; }
.c2-header__back:hover { text-decoration: underline; text-underline-offset: 4px; }
.c2-header__title { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.c2-header__title strong { font-family: var(--font-display); font-size: 11px; letter-spacing: .03em; }
.c2-header__level { justify-self: end; text-align: right; }
.c2-header__level span, .c2-header__level strong { display: block; }
.c2-header__level strong { margin-top: 3px; color: var(--orange); }

.c2-footer { position: fixed; right: 0; bottom: 0; left: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 29px; padding: 8px 22px 6px; border-top: 1px solid var(--line); background: rgba(244, 243, 245, .96); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.c2-footer span:nth-child(2) { text-align: center; }
.c2-footer span:last-child { text-align: right; }

/* TRANSCRIPT INDEX */
.transcript-index-page { overflow-x: hidden; background: #080808; }
.transcript-index-page .c2-header,
.transcript-index-page .c2-footer {
  border: 0;
  color: var(--paper);
  background: transparent;
}
.transcript-index-page .c2-header__level strong { color: var(--paper); }
.transcript-index { padding-top: 57px; padding-bottom: 29px; }
.c2-introduction { --archive-lens-size: min(56vw, 72vh, 720px); --archive-lens-follow: .13; --archive-lens-return: .08; position: relative; min-height: calc(100vh - 57px); min-height: calc(100svh - 57px); overflow: hidden; padding: 24px 22px 40px; border-bottom: 1px solid var(--paper); color: var(--paper); background: #080808; }
@media (min-width: 701px) {
  .transcript-index-page { overflow: hidden; }
  .transcript-index-page .c2-header { display: block; height: 0; min-height: 0; padding: 0; }
  .transcript-index-page .c2-header__back { position: absolute; top: 14px; left: 22px; }
  .transcript-index-page .c2-header__title { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); }
  .transcript-index-page .c2-header__level { position: absolute; top: 14px; right: 22px; }
  .transcript-index-page .transcript-index { height: 100vh; padding-top: 0; padding-bottom: 0; overflow: hidden; }
  .transcript-index-page .c2-introduction { min-height: 100vh; min-height: 100svh; padding-top: 81px; border-bottom: 0; }
  .transcript-index-page .c2-introduction h1,
  .transcript-index-page .archive-reading-field__title { top: calc(17% + 47px); }
  .transcript-index-page .archive-orbit__index { transform: translateY(28.5px); }
}
.c2-introduction__meta { position: relative; z-index: 12; display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.c2-introduction__meta > span:last-child { text-align: right; }
.c2-introduction__archive-mode { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.c2-mode-switch { display: block; width: max-content; padding: 2px 5px 4px; cursor: pointer; }
.rainbow-flag { position: relative; display: grid; width: 24px; height: 15px; grid-template-rows: repeat(6, 1fr); border: 1px solid #171716; transform-origin: left center; transition: transform 520ms cubic-bezier(.22,1,.36,1); }
.rainbow-flag i { display: block; }
.rainbow-flag i:nth-child(1) { background: #f35d27; }
.rainbow-flag i:nth-child(2) { background: #fff100; }
.rainbow-flag i:nth-child(3) { background: #049978; }
.rainbow-flag i:nth-child(4) { background: #397f7f; }
.rainbow-flag i:nth-child(5) { background: #5984c9; }
.rainbow-flag i:nth-child(6) { background: #993370; }
.c2-mode-switch:hover .rainbow-flag,
.c2-mode-switch:focus-visible .rainbow-flag { transform: scaleX(1.2) translateY(-1px); }
.c2-mode-switch.is-launching .rainbow-flag { transform: scaleX(.7); }

.mode-transition { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: repeat(6, 1fr); pointer-events: none; }
.mode-transition span { display: block; transform: scaleX(0); transition: transform 520ms cubic-bezier(.76,0,.24,1) var(--delay); }
.mode-transition span:nth-child(odd) { transform-origin: left center; }
.mode-transition span:nth-child(even) { transform-origin: right center; }
.mode-transition span:nth-child(1) { background: #f35d27; }
.mode-transition span:nth-child(2) { background: #fff100; }
.mode-transition span:nth-child(3) { background: #049978; }
.mode-transition span:nth-child(4) { background: #397f7f; }
.mode-transition span:nth-child(5) { background: #5984c9; }
.mode-transition span:nth-child(6) { background: #993370; }
.mode-transition.is-active span { transform: scaleX(1); }
.c2-introduction h1,
.archive-reading-field__title { position: absolute; top: 17%; left: clamp(190px, 15vw, 255px); width: min(920px, 70vw); margin: 0; color: var(--paper); font-family: var(--font-display); font-size: clamp(72px, 8.2vw, 132px); font-weight: 600; line-height: .68; letter-spacing: -.075em; white-space: nowrap; }
.c2-introduction h1 { z-index: 1; outline-color: var(--paper); will-change: transform; }
.c2-introduction.has-archive-lens > h1 { opacity: .2; }
.c2-introduction__secondary { position: absolute; bottom: 12vh; left: clamp(190px, 15vw, 255px); z-index: 9; }
.c2-introduction__secondary p { margin: 0; font-family: var(--font-zh); font-size: clamp(16px, 1.45vw, 24px); letter-spacing: .08em; }
.c2-introduction__secondary strong { display: block; width: max-content; margin-top: 11px; font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 28px); font-weight: 400; letter-spacing: -.025em; }
.c2-introduction__note { position: absolute; right: 3.2vw; bottom: 8vh; z-index: 9; width: min(310px, 23vw); padding-top: 8px; border-top: 1px solid rgba(242,240,234,.65); }
.c2-introduction__note p { margin: 0; font-size: 8px; line-height: 1.5; }
.c2-introduction__note p + p { margin-top: 8px; color: rgba(242,240,234,.52); }
.c2-introduction__scroll { position: absolute; bottom: 15px; left: 22px; z-index: 12; font-size: 7px; letter-spacing: .09em; }

.archive-orbit { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.archive-orbit__position { position: absolute; top: 0; left: 0; z-index: 13; display: block; width: 26px; height: 26px; pointer-events: none; opacity: 0; transform: translate3d(-40px, -40px, 0); transition: opacity var(--site-motion-fast, 160ms) var(--site-ease-out, cubic-bezier(.23, 1, .32, 1)); will-change: transform, opacity; }
.archive-orbit__position i { position: absolute; inset: 0; display: block; border: 1px solid var(--lens-colour, var(--orange)); border-radius: 50%; background: radial-gradient(circle, var(--lens-colour, var(--orange)) 0 1.5px, transparent 1.7px); }
.archive-orbit__position i::before,
.archive-orbit__position i::after { content: ""; position: absolute; top: 50%; left: 50%; display: block; background: var(--lens-colour, var(--orange)); transform: translate(-50%, -50%); }
.archive-orbit__position i::before { width: 34px; height: 1px; }
.archive-orbit__position i::after { width: 1px; height: 34px; }
.c2-introduction.is-lens-engaged .archive-orbit__position { opacity: .92; }
.archive-orbit__index { position: absolute; top: 10vh; bottom: 9vh; left: 22px; z-index: 12; display: flex; width: clamp(205px, 14vw, 255px); flex-direction: column; justify-content: center; gap: 3px; pointer-events: auto; }
.archive-orbit__index button { display: grid; min-width: 0; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; align-items: baseline; padding: 4px 0; border: 0; background: none; color: rgba(242,240,234,.36); font-family: var(--font-display); font-size: 7px; font-weight: 700; line-height: 1.1; text-align: left; cursor: pointer; transition: color 180ms ease, transform 420ms cubic-bezier(.22,1,.36,1); }
.archive-orbit__index button:hover, .archive-orbit__index button:focus-visible, .archive-orbit__index button.is-active { color: var(--paper); transform: translateX(7px); }
.archive-orbit__index button span { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: .9; }
.archive-orbit__index button em { overflow: hidden; font-family: var(--font-display); font-size: 12px; font-style: normal; font-weight: 700; line-height: .92; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }

.archive-reading-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.archive-reading-field__layer { position: absolute; overflow: hidden; pointer-events: none; }
.archive-reading-field__layer--obscured { z-index: 3; inset: 0; color: rgba(242,240,234,.22); opacity: .34; }
.archive-reading-field__layer--revealed { top: 0; left: 0; z-index: 9; width: var(--archive-lens-size); height: var(--archive-lens-size); overflow: hidden; border-radius: 50%; color: var(--paper); contain: paint; backface-visibility: hidden; transform: translate3d(0, 0, 0); will-change: transform; -webkit-mask-image: radial-gradient(circle at center, #000 0 calc(50% - 1px), rgba(0,0,0,.86) calc(50% - .35px), transparent 50%); mask-image: radial-gradient(circle at center, #000 0 calc(50% - 1px), rgba(0,0,0,.86) calc(50% - .35px), transparent 50%); }
.archive-reading-field__canvas { position: absolute; top: 0; left: 0; overflow: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); will-change: transform; }
.archive-reading-field__title { opacity: .045; }
.archive-reading-field__layer--revealed .archive-reading-field__title { opacity: 1; }
.archive-reading-field__record { position: absolute; top: var(--field-y); left: var(--field-x); width: var(--field-width); margin: 0; overflow: hidden; color: currentColor; font-family: var(--font-sans); font-size: var(--field-size); font-weight: 560; line-height: 1.08; letter-spacing: -.035em; text-overflow: clip; white-space: nowrap; transform: translate3d(0, 0, 0) rotate(var(--field-rotate)); transform-origin: left center; }
.archive-reading-field__record b { color: var(--field-colour); font-weight: 650; }
.archive-reading-field__record span[lang] { font-family: var(--font-zh); }
.archive-reading-field__record small { font-size: .58em; font-weight: 520; letter-spacing: .025em; }
.archive-reading-field__layer--obscured .archive-reading-field__record { color: rgba(242,240,234,.23); }
.archive-reading-field__layer--obscured .archive-reading-field__record b { color: rgba(242,240,234,.31); }

.archive-orbit__stage { position: absolute; top: 50%; left: 57%; z-index: 7; width: min(56vw, 760px); height: min(72vh, 720px); pointer-events: auto; transform: translate(-50%, -50%); will-change: transform; }
.c2-introduction.has-archive-lens .archive-orbit__stage { top: 0; left: 0; }
.transcript-index-page .archive-orbit__stage:has(.archive-sphere.is-dragging) { z-index: 10; }
.transcript-index-page .archive-sphere,
.transcript-index-page .archive-reading-field { -webkit-user-select: none; user-select: none; }
.transcript-index-page .archive-reading-field__layer--revealed,
.transcript-index-page .archive-reading-field__canvas { transform-origin: 0 0; }
.archive-sphere { --sphere-size: var(--archive-lens-size); --sphere-scale: 1; --sphere-tilt: 0deg; --lens-colour: var(--orange); --lens-secondary: var(--cyan); position: absolute; top: 50%; left: 50%; isolation: isolate; width: var(--sphere-size); height: var(--sphere-size); overflow: hidden; border: 0; border-radius: 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--lens-secondary) 33%, #e6e0d4) 0 42%, color-mix(in srgb, var(--lens-colour) 38%, #e6e0d4) 42% 100%); box-shadow: inset 0 0 0 1px rgba(242,240,234,.82); cursor: grab; touch-action: pan-y; backface-visibility: hidden; transform: translate(-50%, -50%) scale(var(--sphere-scale)) rotate(var(--sphere-tilt)); transform-origin: center; will-change: transform; -webkit-mask-image: radial-gradient(circle at center, #000 0 calc(50% - 1px), rgba(0,0,0,.86) calc(50% - .35px), transparent 50%); mask-image: radial-gradient(circle at center, #000 0 calc(50% - 1px), rgba(0,0,0,.86) calc(50% - .35px), transparent 50%); animation: sphere-arrive 900ms cubic-bezier(.22,1,.36,1) both; }
.transcript-index-page .c2-introduction.has-archive-lens .archive-sphere { overscroll-behavior: auto; }
.archive-sphere:focus-visible { outline: 1px solid var(--orange); outline-offset: 7px; }
.archive-sphere.is-dragging { cursor: grabbing; }
.archive-sphere__source { position: absolute; inset: -10%; display: block; width: 120%; height: 120%; object-fit: cover; filter: grayscale(.35) contrast(1.04); opacity: .16; pointer-events: none; user-select: none; transform: translate(var(--image-x, 0), var(--image-y, 0)) scale(1.08); transition: opacity 240ms ease; }
.archive-sphere__source--previous { opacity: 0; }
.archive-sphere__source.is-switching { animation: sphere-source-switch 360ms ease both; }
.archive-sphere__source--previous.is-leaving { animation: sphere-source-leave 440ms cubic-bezier(.22,1,.36,1) both; }
.archive-sphere__bands { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .34; mix-blend-mode: multiply; }
.archive-sphere__band { position: absolute; top: var(--band-y); left: 50%; width: var(--band-width); height: var(--band-height); overflow: hidden; color: var(--band-colour); font-family: var(--font-sans); font-size: var(--band-size); font-weight: 600; line-height: var(--band-height); letter-spacing: -.03em; white-space: nowrap; opacity: var(--band-opacity); transform: translate(-50%, -50%); }
.archive-sphere__band span { display: block; width: max-content; transform: translateX(var(--band-shift)); }
.archive-sphere__axis { position: absolute; z-index: 4; display: block; background: rgba(8,8,8,.13); pointer-events: none; }
.archive-sphere__axis--horizontal { top: 50%; right: 4%; left: 4%; height: 1px; }
.archive-sphere__axis--vertical { top: 4%; bottom: 4%; left: 50%; width: 1px; }
.archive-orbit__instruction { position: absolute; bottom: 0; left: 50%; margin: 0; color: rgba(242,240,234,.52); font-size: 6px; letter-spacing: .12em; transform: translateX(-50%); }

@keyframes sphere-arrive { from { opacity: 0; transform: translate(-50%, -50%) scale(.76) rotate(-8deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(var(--sphere-scale)) rotate(var(--sphere-tilt)); } }
@keyframes sphere-source-switch { 0% { opacity: .04; } 100% { opacity: .16; } }
@keyframes sphere-source-leave { 0% { opacity: .16; } 100% { opacity: 0; } }

body[data-archive-lens="off"] .archive-reading-field,
body[data-archive-lens="off"] .archive-orbit__position { display: none; }
body[data-archive-lens="off"] .c2-introduction > h1 { opacity: 1; transform: none !important; }

.transcript-field__heading { position: sticky; top: 57px; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 9px 22px 7px; border-bottom: 1px solid var(--ink); background: rgba(244, 243, 245, .97); font-size: 7px; letter-spacing: .09em; }
.transcript-field__heading span:nth-child(2) { text-align: center; }
.transcript-field__heading span:last-child { text-align: right; }
.topic-list { margin: 0; padding: 0; list-style: none; }
.topic-record { --tone: var(--orange); --block: var(--cyan); position: relative; min-height: 305px; overflow: hidden; border-bottom: 1px solid var(--ink); background: var(--tone); transition: min-height 620ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease; }
.topic-record a { display: grid; min-height: inherit; grid-template-columns: clamp(120px, 10vw, 150px) minmax(280px, .95fr) minmax(330px, 1.1fr) 125px; }
.topic-record__number { display: block; width: 100%; overflow: hidden; padding: 23px 12px; border-right: 1px solid var(--ink); font-family: var(--font-display); font-size: clamp(55px, 7vw, 110px); font-weight: 600; line-height: .7; letter-spacing: -.08em; white-space: nowrap; }
.topic-record__title { align-self: end; min-width: 0; padding: 25px 24px 29px; }
.topic-record__title h2 { max-width: 520px; margin: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(27px, 3vw, 50px); font-weight: 400; line-height: .84; letter-spacing: -.05em; }
.topic-record__zh { max-width: 470px; margin: 15px 0 0 !important; font-family: var(--font-zh); font-size: clamp(15px, 1.35vw, 20px) !important; line-height: 1.18 !important; letter-spacing: .01em !important; }
.topic-record__archive { display: block; width: max-content; margin-top: 13px; font-family: var(--font-display); font-size: 14px; font-weight: 400; letter-spacing: -.02em; }
.topic-record__evidence { position: relative; min-width: 0; padding: 24px; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.topic-record__fragment { position: absolute; top: 52px; right: 7%; bottom: 33px; left: 8%; z-index: 3; overflow: hidden; padding: 17px; border: 1px solid var(--ink); background: var(--block); font-size: 11px; line-height: 1.45; transform: translateX(-2%); transition: transform 620ms cubic-bezier(.22, 1, .36, 1), opacity 240ms ease; }
.topic-record__fragment::after { content: "EXTRACTED / EDITABLE"; position: absolute; right: 7px; bottom: 6px; font-size: 6px; letter-spacing: .08em; }
.topic-record__pages { position: absolute; inset: 22px 8% 29px 18%; z-index: 2; margin: 0; }
.topic-record__pages img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 1px solid var(--ink); background: white; object-fit: cover; filter: grayscale(1); transform: translate(calc(var(--i) * 11px), calc(var(--i) * -8px)); transition: filter 280ms ease, transform 680ms cubic-bezier(.22, 1, .36, 1); }
.topic-record__meta { display: flex; flex-direction: column; justify-content: space-between; padding: 23px 13px; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.topic-record__meta strong { font-size: 10px; font-weight: 400; }
.topic-record:hover, .topic-record:focus-within, .topic-record.is-active { min-height: 370px; }
.topic-record:hover .topic-record__fragment, .topic-record:focus-within .topic-record__fragment, .topic-record.is-active .topic-record__fragment { opacity: .08; transform: translateX(-11%); }
.topic-record:hover .topic-record__pages img, .topic-record:focus-within .topic-record__pages img, .topic-record.is-active .topic-record__pages img { filter: grayscale(0); transform: translate(calc(var(--i) * 21px), calc(var(--i) * -14px)); }
.topic-list.has-focus .topic-record:not(.is-active) { opacity: .19; }
.topic-monitor { position: fixed; right: 22px; bottom: 50px; z-index: 55; display: grid; width: 260px; grid-template-columns: 50px 1fr; gap: 4px 10px; padding-top: 7px; border-top: 1px solid var(--ink); background: rgba(244, 243, 245, .9); font-size: 7px; letter-spacing: .08em; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); }
.topic-monitor.is-visible { opacity: 1; transform: translateY(0); }
.topic-monitor strong { overflow: hidden; font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: .9; text-overflow: ellipsis; white-space: nowrap; }
.topic-monitor span:last-child { grid-column: 2; color: var(--muted); }
.topic-transition-root { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.topic-flight { position: fixed; overflow: hidden; border: 1px solid var(--ink); background: var(--tone); }
.topic-flight img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* TOPIC DETAIL */
.transcript-topic-page { overflow-x: hidden; }
.topic-detail { padding: 83px 22px 48px; }
.topic-masthead { --tone: var(--orange); display: grid; grid-template-columns: clamp(120px, 11vw, 165px) minmax(0, 1.4fr) minmax(250px, .65fr); gap: 22px; align-items: end; min-height: 285px; padding: 20px; overflow: hidden; border: 1px solid var(--ink); background: var(--tone); }
.topic-masthead__number { align-self: start; display: block; width: 100%; overflow: hidden; padding-top: 2px; font-family: var(--font-display); font-size: clamp(88px, 9vw, 142px); font-weight: 600; line-height: .72; letter-spacing: -.08em; white-space: nowrap; }
.topic-masthead__titles { min-width: 0; padding-left: 20px; border-left: 1px solid rgba(23,23,22,.42); }
.topic-masthead p { margin: 0; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.topic-masthead h1 { max-width: 800px; margin: 18px 0 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(38px, 4.2vw, 68px); font-weight: 400; line-height: .82; letter-spacing: -.05em; }
.topic-masthead__zh { max-width: 680px; margin-top: 18px !important; font-family: var(--font-zh); font-size: clamp(18px, 1.7vw, 26px) !important; line-height: 1.18 !important; letter-spacing: .015em !important; text-transform: none !important; }
.topic-masthead__archive { display: block; width: max-content; margin-top: 15px; font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 25px); font-weight: 400; letter-spacing: -.02em; }
.topic-masthead dl { margin: 0; border-top: 1px solid var(--ink); }
.topic-masthead dl div { display: grid; grid-template-columns: 1fr auto; padding: 7px 0; border-bottom: 1px solid rgba(23,23,22,.35); font-size: 7px; letter-spacing: .07em; }
.topic-masthead dd { margin: 0; text-align: right; }

.topic-reader-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; align-items: start; margin-top: 18px; }
.transcript-sheet-stage { position: relative; min-width: 0; padding: 0 38px; }
.transcript-sheet { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--ink); background: white; }
.transcript-sheet:focus-visible { outline-color: var(--orange); outline-offset: 7px; }
.transcript-sheet img { display: block; width: 100%; aspect-ratio: 1.414; object-fit: contain; user-select: none; transition: opacity 180ms ease, transform 440ms cubic-bezier(.22, 1, .36, 1); }
.transcript-sheet.is-changing img { opacity: .08; transform: translateY(13px); }
.transcript-sheet figcaption { position: absolute; right: 7px; bottom: 6px; left: 7px; display: flex; justify-content: space-between; font-size: 6px; letter-spacing: .08em; }
.sheet-switch-line { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--magenta); transform: scaleY(0); transform-origin: top; }
.sheet-switch-line.is-active { animation: sheet-line 520ms cubic-bezier(.22, 1, .36, 1) both; }
.sheet-step { position: absolute; top: 50%; z-index: 7; width: 28px; height: 28px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: pointer; transform: translateY(-50%); }
.sheet-step:hover { color: var(--paper); background: var(--ink); }
.sheet-step:disabled { opacity: .2; cursor: default; }
.sheet-step--previous { left: 2px; }
.sheet-step--next { right: 2px; }
.sheet-instructions { margin: 8px 0 0; color: var(--muted); font-size: 6px; letter-spacing: .08em; text-align: center; }
.topic-page-rail { display: flex; gap: 6px; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line); }
.topic-page-rail button { position: relative; width: 72px; padding: 0; border: 0; background: none; cursor: pointer; }
.topic-page-rail img { display: block; width: 100%; aspect-ratio: 1.414; border: 1px solid transparent; object-fit: cover; filter: grayscale(1); opacity: .45; }
.topic-page-rail button.is-active img, .topic-page-rail button:hover img { border-color: var(--ink); filter: grayscale(0); opacity: 1; }
.topic-page-rail span { position: absolute; bottom: 3px; left: 3px; padding: 2px 3px; background: var(--paper); font-size: 6px; }

.editable-evidence { display: flex; height: min(76vh, 760px); min-height: 560px; flex-direction: column; overflow: hidden; border: 1px solid var(--ink); background: var(--paper); }
.editable-evidence__header { position: relative; z-index: 8; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px 9px; border-bottom: 1px solid var(--ink); background: var(--paper); }
.editable-evidence__header span { font-size: 6px; letter-spacing: .08em; }
.editable-evidence__header > span { color: var(--orange); text-align: right; }
.editable-evidence h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: 23px; font-weight: 400; letter-spacing: -.03em; }
.editable-transcript { font-family: var(--font-sans); white-space: pre-wrap; caret-color: var(--magenta); }
.transcript-collage__viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--paper); cursor: crosshair; touch-action: none; }
.transcript-collage__viewport:focus-visible { outline: 1px solid var(--orange); outline-offset: -5px; }
.transcript-collage__canvas { --canvas-x: 0px; --canvas-y: 0px; --canvas-scale: 1; position: absolute; inset: -3%; overflow: hidden; border: 1px solid transparent; transform: translate3d(var(--canvas-x), var(--canvas-y), 0) scale(var(--canvas-scale)); transform-origin: center; will-change: transform; }
.transcript-collage__canvas::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .055; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='40' height='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 17.5H40' stroke='%23171716' stroke-width='.5'/%3E%3C/svg%3E"); }
.transcript-collage__text { position: absolute; inset: 4.5%; z-index: 1; overflow: hidden; padding: 0; color: rgba(23,23,22,.78); font-size: clamp(7px, .62vw, 9.5px); line-height: 1.34; column-count: 2; column-gap: 18px; outline: 0; cursor: text; transition: color 180ms ease, background-color 180ms ease; }
.transcript-collage__text::selection, .transcript-collage__text *::selection { color: var(--paper); background: var(--magenta); }
.transcript-collage__text:focus { z-index: 9; overflow: auto; padding: 9px; color: var(--ink); background: rgba(244,243,245,.94); column-count: 1; }
.transcript-collage__ink { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.transcript-collage__ink span { position: absolute; display: block; max-width: 78%; color: var(--ink-colour, var(--ink)); font-family: var(--font-display); font-size: var(--ink-size, 21px); font-weight: 400; line-height: .82; letter-spacing: -.04em; opacity: .84; transform: translate(-50%, -50%) rotate(var(--ink-rotate, 0deg)); mix-blend-mode: multiply; }
.transcript-collage__pieces { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.transcript-collage__piece { --piece-x: 0px; --piece-y: 0px; --piece-r: 0deg; --piece-scale: 1; position: absolute; top: 0; left: 0; display: flex; min-width: 92px; min-height: 32px; align-items: center; justify-content: center; padding: 9px 12px; border: 1px solid var(--ink); color: var(--piece-ink, var(--ink)); background: var(--piece-colour, var(--yellow)); font-size: 7px; font-weight: 650; line-height: 1.05; letter-spacing: .04em; text-align: left; text-transform: uppercase; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; transform: translate3d(var(--piece-x), var(--piece-y), 0) rotate(var(--piece-r)) scale(var(--piece-scale)); transform-origin: center; will-change: transform; box-shadow: 2px 3px 0 rgba(23,23,22,.18); }
.transcript-collage__piece:hover { z-index: 20; }
.transcript-collage__piece.is-dragging { z-index: 30; cursor: grabbing; box-shadow: 5px 7px 0 rgba(23,23,22,.24); }
.transcript-collage__piece--image { display: block; width: 142px; height: 106px; padding: 0; overflow: hidden; background: white; }
.transcript-collage__piece--image img { display: block; width: 130%; height: 130%; object-fit: cover; object-position: var(--crop-x, 50%) var(--crop-y, 50%); pointer-events: none; filter: saturate(1.08) contrast(1.03); }
.transcript-collage__piece--tape { min-width: 115px; min-height: 25px; padding: 6px 10px; color: white; font-size: 8px; }
.transcript-collage__piece--note { width: 135px; min-height: 82px; align-items: flex-start; justify-content: flex-start; font-family: var(--font-display); font-size: 14px; font-weight: 400; line-height: .9; letter-spacing: -.02em; text-transform: none; }
.transcript-collage__piece--disc { width: 86px; min-width: 86px; height: 86px; min-height: 86px; padding: 11px; border-radius: 50%; font-family: var(--font-display); font-size: 12px; font-weight: 400; line-height: .9; text-transform: none; }
.transcript-collage__stamp { position: absolute; right: 4%; bottom: 6%; z-index: 3; display: grid; width: 144px; height: 82px; grid-template-rows: auto 1fr; padding: 7px; border: 1px solid var(--ink); background: rgba(244,243,245,.88); font-size: 5px; letter-spacing: .07em; pointer-events: none; transform: rotate(-1.2deg); }
.transcript-collage__stamp::before, .transcript-collage__stamp::after { content: ""; position: absolute; background: var(--ink); opacity: .65; }
.transcript-collage__stamp::before { top: 26px; right: 7px; bottom: 7px; width: 1px; }
.transcript-collage__stamp::after { right: 7px; bottom: 23px; width: 64px; height: 1px; }
.transcript-collage__stamp strong { align-self: end; max-width: 92px; font-size: 6px; font-weight: 400; overflow-wrap: anywhere; }
.transcript-collage__hint { position: absolute; right: 7px; bottom: 5px; left: 7px; z-index: 40; margin: 0; padding: 4px 6px; color: var(--paper); background: var(--ink); font-size: 5px; letter-spacing: .09em; pointer-events: none; opacity: .72; text-align: center; }
.transcript-collage__pieces, .transcript-collage__ink, .transcript-collage__stamp { transition: opacity 220ms ease; }
.transcript-collage.is-editing .transcript-collage__pieces, .transcript-collage.is-editing .transcript-collage__ink, .transcript-collage.is-editing .transcript-collage__stamp { opacity: .18; pointer-events: none; }
.editable-evidence__actions { position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-top: 1px solid var(--line); background: var(--paper); }
.editable-evidence__actions button { padding: 0; border: 0; border-bottom: 1px solid var(--ink); background: none; font-size: 7px; cursor: pointer; }
.editable-evidence__actions span { max-width: 190px; color: var(--muted); font-size: 6px; line-height: 1.3; text-align: right; }
.source-actions { position: relative; z-index: 8; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); background: var(--paper); }
.source-actions a { padding: 10px; font-size: 7px; letter-spacing: .06em; }
.source-actions a + a { border-left: 1px solid var(--ink); text-align: right; }
.source-actions a:hover { background: var(--ink); color: var(--paper); }
.topic-neighbours { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: 1px solid var(--ink); }
.topic-neighbours a { padding: 10px 0; font-size: 8px; letter-spacing: .08em; }
.topic-neighbours a:last-child { text-align: right; }

/* INTERWOVEN STORY TEXT FIELD */
.story-atlas-page { --story-paper: var(--paper); overflow: hidden; background: var(--story-paper); }
.story-atlas-page .c2-header,
.story-atlas-page .c2-footer { border: 0; background: transparent; pointer-events: none; }
.story-atlas-page .c2-header a,
.story-atlas-page .c2-header button { pointer-events: auto; }
.story-atlas { position: fixed; inset: 0; overflow: hidden; background: transparent; }
.story-atlas__rail { position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; width: clamp(205px, 14vw, 255px); border: 0; background: transparent; pointer-events: none; }
.story-atlas__index { top: 4vh; right: 14px; bottom: 7vh; left: 18px; width: auto; pointer-events: auto; }
.story-atlas__index button { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; padding: 4px 0; color: rgba(23,23,22,.46); font-family: var(--font-display); font-weight: 700; }
.story-atlas__index button span { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: .9; }
.story-atlas__index button em { font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: .92; letter-spacing: -.025em; }
.story-atlas__index button:hover,
.story-atlas__index button:focus-visible { color: var(--ink); }
.story-atlas__index button.is-active { color: var(--orange); transform: translateX(7px); }
.story-atlas__viewport { position: absolute; inset: 0; min-width: 0; overflow: hidden; background: transparent; cursor: grab; touch-action: none; }
.story-atlas__viewport.is-panning { cursor: grabbing; }
.story-atlas__viewport:focus-visible { outline: 1px solid var(--orange); outline-offset: -5px; }
.story-atlas__archive-mode { position: fixed; top: 67px; left: 50%; z-index: 88; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 3px 10px 0; color: var(--ink); background: transparent; font-size: 7px; letter-spacing: .09em; text-align: center; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.story-atlas__archive-mode .c2-mode-switch { padding: 0; border: 0; background: transparent; box-shadow: none; line-height: 0; }
.story-atlas__plane { --camera-x: 0px; --camera-y: 0px; --camera-scale: .92; position: absolute; top: 0; left: 0; width: 4580px; height: 2780px; transform: translate3d(var(--camera-x), var(--camera-y), 0) scale(var(--camera-scale)); transform-origin: 0 0; will-change: transform; }
.story-layer { position: absolute; top: 0; left: 0; z-index: var(--story-depth, 1); width: var(--layout-width, var(--story-width)); padding: 0; color: var(--ink); opacity: .24; cursor: pointer; transform: translate3d(var(--layout-x, var(--story-x)), var(--layout-y, var(--story-y)), 0) rotate(var(--layout-rotate, var(--story-rotate))); transform-origin: 50% 20%; transition: width 640ms cubic-bezier(.22,1,.36,1), min-height 520ms cubic-bezier(.22,1,.36,1), transform 640ms cubic-bezier(.22,1,.36,1), opacity 480ms ease, filter 480ms ease; mix-blend-mode: multiply; }
.story-layer:hover, .story-layer.is-near { opacity: .72; }
.story-layer.is-active { z-index: 15; opacity: 1; filter: contrast(1.025); }
.story-layer h2 { max-width: 88%; margin: 0 0 15px; color: var(--story-title-colour); font-family: var(--font-display); font-size: var(--story-title-size, 24px); font-weight: 400; line-height: .86; letter-spacing: -.04em; }
.story-layer__body { column-count: 2; column-gap: 24px; font-family: "OPPO Sans 4.0", Arial, sans-serif; font-size: var(--story-body-size, 15px); font-weight: 420; line-height: 1.32; }
.story-layer__body p { margin: 0 0 .56em; color: var(--paragraph-colour); break-inside: avoid; outline: 0; }
.story-layer__body p:focus { position: relative; z-index: 4; color: var(--ink); background: rgba(244,243,245,.92); outline: 1px solid currentColor; outline-offset: 3px; }
.story-layer.is-arriving .story-layer__body { animation: story-text-arrive 780ms cubic-bezier(.16,1,.3,1) both; }
.story-layer.is-arriving h2 { animation: story-title-arrive 620ms cubic-bezier(.16,1,.3,1) both; }

/* Pages 21–24 are one continuous interview. In the atlas it stays present as a
   dense publication field instead of becoming one tall conventional column. */
.story-atlas-page:not(.is-story-focused) .story-layer[data-story-id="topic-10"] .story-layer__body {
  column-count: 5;
  column-gap: 15px;
  font-size: 9.6px;
  line-height: 1.23;
}
.story-atlas-page:not(.is-story-focused) .story-layer[data-story-id="topic-10"] .story-layer__body p { margin-bottom: .78em; }
.story-atlas__zoom { position: fixed; bottom: 42px; left: 50%; z-index: 85; display: grid; width: min(430px, 36vw); min-width: 270px; height: 30px; grid-template-columns: auto minmax(150px, 1fr) auto; gap: 10px; align-items: center; transform: translateX(-50%); }
.story-atlas__zoom > span,
.story-atlas__zoom > output { color: rgba(23,23,22,.64); font-family: var(--font-display); font-size: 7px; font-weight: 700; letter-spacing: .06em; line-height: 1; white-space: nowrap; }
.story-atlas__zoom > output { min-width: 28px; color: var(--ink); text-align: right; }
.story-atlas__zoom input { display: block; width: 100%; height: 24px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; cursor: ew-resize; appearance: none; }
.story-atlas__zoom input::-webkit-slider-runnable-track { height: 1px; background: rgba(23,23,22,.64); box-shadow: 0 1px 0 rgba(255,255,255,.55); }
.story-atlas__zoom input::-webkit-slider-thumb { width: 3px; height: 17px; margin-top: -8px; border: 0; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 5px rgba(23,23,22,0); appearance: none; transition: height 220ms cubic-bezier(.22,1,.36,1), margin 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms ease; }
.story-atlas__zoom input:hover::-webkit-slider-thumb,
.story-atlas__zoom input:focus-visible::-webkit-slider-thumb { height: 21px; margin-top: -10px; box-shadow: 0 0 0 5px rgba(23,23,22,.055); }
.story-atlas__zoom input::-moz-range-track { height: 1px; background: rgba(23,23,22,.64); box-shadow: 0 1px 0 rgba(255,255,255,.55); }
.story-atlas__zoom input::-moz-range-thumb { width: 3px; height: 17px; border: 0; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 5px rgba(23,23,22,0); transition: height 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms ease; }
.story-atlas__zoom input:hover::-moz-range-thumb,
.story-atlas__zoom input:focus-visible::-moz-range-thumb { height: 21px; box-shadow: 0 0 0 5px rgba(23,23,22,.055); }

/* One continuous text-field system across the full zoom range. */
.story-atlas-page.is-story-focused .story-layer.is-active { min-height: var(--composition-min-height, 430px); padding: 0; background: none; mix-blend-mode: multiply; }
.story-atlas-page.is-story-focused .story-layer.is-active h2 { max-width: 76%; margin: 0 0 var(--composition-title-gap, 13px); font-size: var(--composition-title-size, 27px); font-weight: 400; line-height: .86; letter-spacing: -.04em; transition: margin 420ms cubic-bezier(.22,1,.36,1), font-size 420ms cubic-bezier(.22,1,.36,1); }
.story-atlas-page.is-story-focused .story-layer.is-active .story-layer__body { display: grid; min-height: var(--composition-min-height, 430px); column-count: initial; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--composition-row-gap, 10px) var(--composition-column-gap, 22px); align-content: start; align-items: start; font-size: var(--composition-font-size, 16px); font-weight: 430; line-height: 1.32; transition: min-height 520ms cubic-bezier(.22,1,.36,1), gap 420ms cubic-bezier(.22,1,.36,1), font-size 420ms cubic-bezier(.22,1,.36,1); }
.story-atlas-page.is-story-focused .story-layer.is-active .story-layer__body p { grid-column: span 2; min-width: 0; margin: 0; transition: margin-top 420ms cubic-bezier(.22,1,.36,1), opacity 320ms ease; }
.story-atlas-page.is-story-focused .story-layer.is-active .story-paragraph--slot-0 { grid-column: span 3; max-width: 760px; }
.story-atlas-page.is-story-focused .story-layer.is-active .story-paragraph--slot-1 { margin-top: var(--composition-offset-1, 0); }
.story-atlas-page.is-story-focused .story-layer.is-active .story-paragraph--slot-2 { opacity: var(--composition-fade-strong, 1); }
.story-atlas-page.is-story-focused .story-layer.is-active .story-paragraph--slot-3 { margin-top: var(--composition-offset-3, 0); }
.story-atlas-page.is-story-focused .story-layer.is-active .story-paragraph--slot-4 { grid-column: span 3; justify-self: center; width: 90%; margin-top: var(--composition-offset-4, 0); text-align: center; }
.story-atlas-page.is-story-focused .story-layer.is-active .story-paragraph--slot-5 { opacity: var(--composition-fade-soft, 1); }
.story-atlas-page.is-story-focused .story-layer.is-active .story-paragraph--slot-6 { margin-top: var(--composition-offset-6, 0); }
.story-atlas-page.is-story-focused .story-layer.is-active .story-paragraph--question { font-style: italic; font-weight: 520; }

/* The complete four-page transcript uses the same type and seven-colour system,
   but distributes the text like the supplied editorial references: connected,
   irregular blocks with controlled gaps, overlap and conditional legibility. */
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] h2 {
  max-width: 38%;
  margin-bottom: 18px;
}
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] .story-layer__body {
  min-height: 0;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--long-transcript-row-gap, 9px) var(--long-transcript-column-gap, 18px);
  font-size: var(--long-transcript-font-size, 11px);
  line-height: 1.24;
}
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] .story-layer__body p {
  grid-column: span 2;
  width: auto;
  max-width: none;
  margin: 0;
  text-align: left;
  opacity: .9;
}
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] .story-layer__body p:nth-child(9n + 1) { grid-column: span 3; }
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] .story-layer__body p:nth-child(11n + 4) { grid-column: span 1; font-size: .94em; }
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] .story-layer__body p:nth-child(7n + 2) { margin-top: 2.25em; }
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] .story-layer__body p:nth-child(8n + 5) { margin-top: .8em; }
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] .story-layer__body p:nth-child(10n + 3) { opacity: .48; }
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] .story-layer__body p:nth-child(13n + 6) { opacity: .66; }
.story-atlas-page.is-story-focused .story-layer.is-active[data-story-id="topic-10"] .story-layer__body .story-paragraph--question {
  grid-column: span 2;
  justify-self: center;
  max-width: 94%;
  padding-top: .7em;
  font-size: 1.05em;
  font-style: italic;
  font-weight: 540;
  opacity: 1;
}

.story-atlas-page:not(.is-story-focused)[data-zoom-layout="overview"] .story-layer { opacity: calc(var(--story-presence, .8) * .48); filter: saturate(.62) contrast(.95); }
.story-atlas-page:not(.is-story-focused)[data-zoom-layout="spread"] .story-layer { opacity: calc(var(--story-presence, .8) * .68); filter: saturate(.76); }
.story-atlas-page:not(.is-story-focused)[data-zoom-layout="reading"] .story-layer { opacity: calc(var(--story-presence, .8) * .86); filter: saturate(.9); }
.story-atlas-page:not(.is-story-focused)[data-zoom-layout="detail"] .story-layer { opacity: calc(var(--story-presence, .8) * .96); filter: none; }
.story-atlas-page:not(.is-story-focused) .story-layer h2 { margin-bottom: 9px; }
.story-atlas-page:not(.is-story-focused) .story-layer__body { column-gap: 18px; line-height: 1.27; transform: translate3d(var(--story-drift-x, 0), var(--story-drift-y, 0), 0); transition: transform 620ms cubic-bezier(.22,1,.36,1); }
.story-atlas-page:not(.is-story-focused) .story-layer:hover { z-index: 19; opacity: .96; filter: saturate(1) contrast(1.02); }
.story-atlas-page:not(.is-story-focused) .story-layer:hover .story-layer__body { transform: translate3d(0, 0, 0); }
.story-atlas-page:not(.is-story-focused) .story-layer.is-near { opacity: calc(var(--story-presence, .8) * .86); }
.story-atlas-page:not(.is-story-focused) .story-layer.is-active { opacity: .88; filter: contrast(1.02); }
.story-atlas-page.is-story-focused .story-layer:not(.is-active) { opacity: .055; filter: saturate(.58); }
.story-atlas-page.is-story-focused .story-layer.is-near:not(.is-active) { opacity: .1; }
.story-atlas-page.is-story-focused .story-layer.is-active { opacity: 1; filter: contrast(1.035); }

@keyframes story-text-arrive { 0% { opacity: .18; transform: translate3d(var(--arrival-x, 42px), var(--arrival-y, -18px), 0) scale(.94); } 58% { opacity: 1; transform: translate3d(-5px, 3px, 0) scale(1.012); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes story-title-arrive { 0% { opacity: 0; transform: translateY(24px) scale(.9); } 65% { opacity: 1; transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* ORIGINAL PUBLICATION READER */
.c2-reader-page { overflow: hidden; }
.c2-reader-controls { display: flex; justify-self: end; gap: 11px; }
.c2-reader-controls button { padding: 0; border: 0; background: none; cursor: pointer; }
.c2-reader-controls button:disabled { opacity: .2; }
.c2-reader-controls a { border-bottom: 1px solid var(--ink); }
.c2-publication-reader { position: fixed; inset: 57px 0 29px; overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; scroll-snap-type: x mandatory; }
.c2-publication-reader::-webkit-scrollbar { display: none; }
.c2-publication-reader.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.c2-spread-track { display: flex; width: max-content; min-width: 100%; height: 100%; align-items: center; gap: 5vw; padding: 3vh 18vw; }
.c2-spread { flex: 0 0 auto; width: min(76vw, 1180px); margin: 0; scroll-snap-align: center; opacity: .18; transform: scale(.94); transition: opacity 260ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1); }
.c2-spread.is-active { opacity: 1; transform: scale(1); }
.c2-spread img { display: block; width: 100%; max-height: 78vh; border: 1px solid var(--ink); background: white; object-fit: contain; box-shadow: 0 12px 32px rgba(23,23,22,.11); user-select: none; }
.c2-spread figcaption { display: flex; justify-content: space-between; margin-top: 6px; font-size: 7px; letter-spacing: .08em; }

@keyframes block-in { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sheet-line { 0% { transform: scaleY(0); transform-origin: top; } 48% { transform: scaleY(1); transform-origin: top; } 52% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 960px) {
  .c2-introduction h1,
  .archive-reading-field__title { left: 128px; width: 76vw; font-size: clamp(64px, 9vw, 92px); }
  .c2-introduction__secondary { left: 128px; }
  .archive-orbit__index { width: 105px; }
  .archive-orbit__index button { grid-template-columns: 22px 1fr; }
  .archive-orbit__stage { left: 61%; width: 66vw; }
  .c2-introduction__note { width: 27vw; }
  .topic-record a { grid-template-columns: 90px 1fr minmax(270px, .9fr); }
  .topic-record__meta { display: none; }
  .topic-reader-grid { grid-template-columns: 1fr; }
  .editable-evidence { height: min(72vh, 690px); min-height: 540px; }
  .topic-masthead { grid-template-columns: 100px 1fr; }
  .topic-masthead dl { grid-column: span 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .c2-spread { width: 88vw; }
  .c2-spread-track { padding-inline: 6vw; }
}

@media (max-width: 700px) {
  .c2-header { grid-template-columns: auto 1fr auto; gap: 12px; padding-inline: 14px; }
  .c2-header__title { align-items: flex-start; text-align: left; }
  .c2-header__title span, .c2-header__level span { display: none; }
  .c2-footer { grid-template-columns: 1fr auto; padding-inline: 14px; }
  .c2-footer span:nth-child(2) { display: none; }
  .c2-introduction { --archive-lens-size: min(88vw, 390px); min-height: 980px; padding-inline: 14px; }
  .c2-introduction__meta { grid-template-columns: 1fr auto; }
  .c2-introduction__archive-mode { position: absolute; top: 0; left: 50%; display: flex; transform: translateX(-50%); white-space: nowrap; }
  .c2-introduction h1,
  .archive-reading-field__title { top: 68px; left: 14px; width: calc(100% - 28px); font-size: 40px; }
  .transcript-index-page .archive-reading-field .archive-reading-field__title { top: 112px; }
  .c2-introduction__secondary { top: 150px; bottom: auto; left: 14px; }
  .c2-introduction__secondary p { font-size: 15px; }
  .c2-introduction__secondary strong { margin-top: 7px; font-size: 18px; }
  .archive-orbit__stage { top: 48%; left: 50%; width: 94vw; height: 440px; }
  .archive-orbit__position { display: none; }
  .c2-introduction.has-archive-lens > h1 { opacity: .42; }
  .archive-reading-field__layer--obscured { opacity: .46; }
  .archive-orbit__instruction { bottom: 5px; }
  .archive-orbit__index { top: auto; right: 14px; bottom: 150px; left: 14px; display: grid; width: auto; grid-template-columns: repeat(11, 1fr); gap: 0; }
  .archive-orbit__index button { display: block; padding: 5px 0; border-top: 1px solid rgba(242,240,234,.32); font-size: 0; text-align: center; }
  .archive-orbit__index button span { font-size: 8px; }
  .archive-orbit__index button em { display: none; }
  .archive-orbit__index button:hover, .archive-orbit__index button:focus-visible, .archive-orbit__index button.is-active { border-color: var(--orange); color: var(--orange); transform: translateY(-3px); }
  .c2-introduction__note { right: 14px; bottom: 27px; width: calc(100% - 28px); }
  .c2-introduction__note p { max-width: 530px; font-size: 7px; }
  .c2-introduction__note p + p { display: none; }
  .c2-introduction__scroll { bottom: 8px; left: 14px; }
  .transcript-field__heading { grid-template-columns: 1fr auto; padding-inline: 14px; }
  .transcript-field__heading span:nth-child(2) { display: none; }
  .topic-record { min-height: 520px; }
  .topic-record a { display: grid; grid-template-columns: 70px 1fr; grid-template-rows: auto 260px; }
  .topic-record__number { grid-row: span 2; padding-inline: 8px; font-size: 52px; }
  .topic-record__title { padding: 22px 14px; }
  .topic-record__title h2 { font-size: 32px; }
  .topic-record__evidence { grid-column: 2; border-right: 0; border-bottom: 0; }
  .topic-record:hover, .topic-record:focus-within, .topic-record.is-active { min-height: 540px; }
  .topic-list.has-focus .topic-record:not(.is-active) { opacity: 1; }
  .topic-monitor { display: none; }
  .topic-detail { padding: 75px 14px 48px; }
  .topic-masthead { grid-template-columns: 70px 1fr; gap: 13px; min-height: 300px; padding: 14px; }
  .topic-masthead__number { font-size: 68px; }
  .topic-masthead__titles { padding-left: 12px; }
  .topic-masthead h1 { font-size: 34px; }
  .topic-masthead dl { grid-column: span 2; grid-template-columns: 1fr; }
  .topic-reader-grid { margin-top: 12px; }
  .transcript-sheet-stage { padding-inline: 29px; }
  .sheet-step--previous { left: -1px; }
  .sheet-step--next { right: -1px; }
  .editable-transcript { font-size: 12px; }
  .transcript-collage__text { font-size: 8px; }
  .source-actions { grid-template-columns: 1fr; }
  .source-actions a + a { border-top: 1px solid var(--ink); border-left: 0; text-align: left; }
  .c2-reader-controls { gap: 7px; }
  .c2-spread { width: 94vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .archive-orbit__position { display: none !important; }
  .c2-introduction h1,
  .c2-introduction__secondary strong,
  .c2-introduction .rainbow-flag { transform: none !important; }
}

@media (hover: hover) and (pointer: fine) {
  .c2-introduction.has-archive-lens.is-lens-engaged,
  .c2-introduction.has-archive-lens.is-lens-engaged * { cursor: none !important; }
}

@media (max-width: 960px) {
  .story-atlas__rail { width: 112px; }
  .story-atlas__index { top: 18px; right: 9px; bottom: 54px; left: 12px; display: flex; width: auto; grid-template-columns: none; }
  .story-atlas__index button { display: grid; grid-template-columns: 22px minmax(0,1fr); padding: 3px 0; border: 0; text-align: left; }
  .story-atlas__index button em { display: block; }
  .story-atlas__zoom { left: 50%; width: min(360px, calc(100vw - 40px)); }
}

@media (max-width: 700px) {
  .story-atlas__rail { width: 62px; }
  .story-atlas__index { top: 8px; right: 8px; bottom: 8px; left: 8px; display: flex; grid-template-columns: none; }
  .story-atlas__index button { display: block; padding: 5px 0; border: 0; font-size: 0; text-align: center; }
  .story-atlas__index button span { font-size: 8px; }
  .story-atlas__index button em { display: none; }
  .story-atlas__index button:hover, .story-atlas__index button:focus-visible, .story-atlas__index button.is-active { border: 0; color: var(--orange); transform: translateX(3px); }
  .story-atlas__zoom { bottom: 38px; left: 50%; width: calc(100vw - 40px); }
}