/* Generated by scripts/build-story-bundle.py from the stylesheets named below, in cascade order. Do not edit: change a source stylesheet and re-run the script, then update the ?v= token on the page. */ /* ==== base.css ==== */ :root{--paper:#f4efe3;--ink:#242721;--muted:#56594e;--red:#8b3029;--rule:#b9b4a7;--serif:Georgia,'Songti TC','PMingLiU',serif;--brush:'Kaiti TC','STKaiti','KaiTi','BiauKai','Songti TC',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang TC','Microsoft JhengHei',sans-serif} *{box-sizing:border-box}html{scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font:20px/1.75 var(--sans)}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:8;opacity:.055;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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")} .zh{display:none!important}html[lang=zh-Hant] .en{display:none!important}html[lang=zh-Hant] .zh{display:revert!important}html[lang=zh-Hant] body{line-height:1.95}a{color:inherit;text-underline-offset:5px}button,summary{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button{border:0}a:hover{color:var(--red)}:focus-visible{outline:3px solid var(--red);outline-offset:5px}h1,h2,h3,p,figure,blockquote{margin:0}h1,h2,h3{font-weight:400}h1,h2,blockquote{font-family:var(--serif)}html[lang=zh-Hant] h1,html[lang=zh-Hant] h2{font-family:var(--brush)}p+p{margin-top:1.15em}img{max-width:100%;height:auto;display:block}figure{min-width:0}figcaption,.note,.source,small{font-size:16px;line-height:1.65}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}figcaption{margin-top:14px;color:var(--muted)}.skip{position:fixed;left:15px;top:-150px;z-index:30;background:var(--paper);padding:12px}.skip:focus{top:10px}.rail{position:fixed;inset:0 auto 0 0;width:76px;border-right:1px solid var(--rule);z-index:12;background:var(--paper);display:flex;align-items:center;justify-content:space-between;flex-direction:column;padding:24px 0}.seal{font:26px/1 var(--brush);background:var(--red);color:var(--paper);padding:10px;text-decoration:none;border:1px solid var(--red);outline-offset:4px}.seal:hover{color:white}.rail-word{writing-mode:vertical-rl;font:27px/1.2 var(--brush);letter-spacing:.3em}.rail-date{writing-mode:vertical-rl;font:15px var(--sans);letter-spacing:.15em}.shell{margin-left:76px}.top{position:sticky;top:0;z-index:15;background:var(--paper);border-bottom:1px solid var(--rule);min-height:78px;padding:12px 4vw;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font:18px var(--serif);text-decoration:none;display:flex;align-items:center;min-height:44px}.tools{display:flex;align-items:center;gap:26px}.lang{background:var(--red);color:var(--paper);min-width:76px;min-height:46px;padding:6px 16px;font-size:18px}.lang:hover{background:#70251f}.menu summary{font-size:17px;min-height:46px;display:flex;align-items:center;gap:15px;list-style:none}.menu summary::-webkit-details-marker{display:none}.menu summary:after{content:'+';font:30px var(--sans)}.menu[open] summary:after{content:'−'}.chapter-links{position:absolute;right:0;top:100%;background:var(--paper);border:1px solid var(--rule);padding:24px 4vw 32px;width:min(650px,100%);max-height:calc(100dvh - 90px);overflow:auto;box-shadow:0 15px 24px #24272116}.chapter-links a{display:grid;grid-template-columns:38px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:18px;min-height:48px}.chapter-links .date{font-size:15px;color:var(--muted)}.chapter-links a[aria-current=true]{color:var(--red)}.edition{font-size:14px;color:var(--muted);letter-spacing:.06em}.opening{padding:26px 5vw 32px}.opening-meta{display:flex;justify-content:space-between;gap:20px;font-size:15px}.opening-grid{display:grid;grid-template-columns:1.06fr 1fr;gap:5vw;align-items:center;padding:48px 0 30px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:15px;line-height:1.6;color:var(--red)}h1{font-size:clamp(64px,7.6vw,124px);line-height:.97;letter-spacing:-.06em;margin:25px 0}.name-cn{font:clamp(28px,3.4vw,52px)/1.4 var(--brush);letter-spacing:.13em;margin:24px 0 18px}.intro{max-width:31rem;font:23px/1.55 var(--serif)}.hero-photo{position:relative;padding:0 0 20px 20px}.hero-photo:before{content:'';position:absolute;inset:22px 22px 0 0;border:1px solid var(--red)}.hero-photo img{position:relative;width:100%;aspect-ratio:4/4.5;object-fit:cover;object-position:57% 45%;filter:sepia(.12) saturate(.7)}.hero-photo figcaption{position:relative;font-size:14px}.opening-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--rule);padding-top:25px}.read-link{display:inline-flex;align-items:center;gap:45px;text-decoration:none;font-size:18px;min-height:48px}.read-link .arrow{font-size:30px}.horse-sign{display:flex;align-items:center;gap:15px}.horse-sign img{width:140px;height:96px;object-fit:contain}.horse-sign span{font:30px var(--brush);writing-mode:vertical-rl;letter-spacing:.15em}.prologue{padding:110px 8vw 120px;background:var(--ink);color:var(--paper)}.prologue .eyebrow{color:#e7bfb1}.prologue blockquote{max-width:1020px;margin:40px 0 30px;font-size:clamp(32px,4.5vw,68px);line-height:1.2;letter-spacing:-.035em}.prologue .note{color:#ddd7c9;max-width:46rem}.prologue a:hover{color:#e7bfb1}.prologue :focus-visible{outline-color:#e7bfb1}.translation{margin-top:25px;font:22px/1.65 var(--serif)}.section{padding:95px 7vw;border-bottom:1px solid var(--rule);scroll-margin-top:20px}.chapter-head{display:grid;grid-template-columns:180px 1fr;gap:4vw;margin-bottom:55px}.chapter-number{font:18px/1.5 var(--sans);color:var(--red);padding-top:12px}.chapter-number span{display:block}.chapter-number b{font:46px/1.1 var(--serif);display:block;margin-bottom:12px}.chapter-head h2{font-size:clamp(42px,5.3vw,82px);line-height:1.09;letter-spacing:-.04em}.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6vw;align-items:start}.story .copy{max-width:36rem}.story .copy p:first-child{font-family:var(--serif);font-size:25px;line-height:1.55}.story .copy .source{font-family:var(--sans);font-size:16px;line-height:1.65}.story-photo img{width:100%;max-height:640px;object-fit:contain;object-position:left;background:#e7e0d2}.source{margin-top:30px;color:var(--muted)}.source summary{min-height:44px;text-decoration:underline;text-underline-offset:4px;padding:8px 0}.source p{margin-top:12px!important;font:16px/1.7 var(--sans)!important}.subtle{background:#eae4d6}.education{list-style:none;padding:0;margin:35px 0}.education li{display:grid;grid-template-columns:78px 1fr;border-top:1px solid var(--rule);padding:17px 0;gap:15px}.education strong{font:26px var(--serif);color:var(--red)}.education small{display:block;color:var(--muted)}.ink-art{padding:35px 0 0}.ink-art img{width:100%}.art-caption{font:42px var(--brush);text-align:right;letter-spacing:.1em;color:var(--red)}.church-list{list-style:none;margin:30px 0 0;padding:0}.church-list li{border-top:1px solid var(--rule);padding:15px 0;font-size:18px}.church-list small{display:block;color:var(--muted)}.reading{max-width:800px;margin-left:auto}.writing-list{margin-top:38px;border-top:1px solid var(--rule)}.writing-row{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:25px 0;border-bottom:1px solid var(--rule)}.writing-row h3{font:30px/1.4 var(--brush)}.writing-row p{font-size:18px;line-height:1.65}.writing-row small{display:block;color:var(--muted);margin-top:5px}.wide-photo{margin-top:50px}.wide-photo img{width:100%;max-height:660px;object-fit:contain;background:#e7e0d2}.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:45px;align-items:start}.photo-pair img{width:100%;height:auto}.closing{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;padding:95px 7vw}.closing h2{font:clamp(48px,6vw,90px)/1.2 var(--brush);letter-spacing:.1em}.closing img{width:100%}.closing p{margin-top:25px;max-width:34rem}.footer{background:var(--ink);color:var(--paper);padding:60px 7vw}.footer h2{font:36px/1.3 var(--serif);margin-bottom:25px}.footer p{font-size:16px;max-width:65rem;color:#ddd7c9}.footer a{display:inline-flex;min-height:44px;align-items:center;margin-top:25px}.footer a:hover{color:#e7bfb1}.footer :focus-visible{outline-color:#e7bfb1}html[lang=zh-Hant] h1{font-size:clamp(60px,6.4vw,98px);letter-spacing:.02em;line-height:1.15}html[lang=zh-Hant] .name-cn{font:22px var(--serif);letter-spacing:0}html[lang=zh-Hant] .chapter-head h2{line-height:1.35;letter-spacing:.03em} @media(min-width:1700px){.opening,.section,.closing,.prologue,.footer{padding-left:max(7vw,calc((100vw - 1500px)/2));padding-right:max(7vw,calc((100vw - 1500px)/2))}} @media(max-width:1000px){.rail{width:56px}.shell{margin-left:56px}.chapter-head{grid-template-columns:120px 1fr}.top{padding:12px 4vw}.tools{gap:20px}.intro{font-size:21px}.opening-grid{gap:30px}h1{font-size:68px}.story{gap:35px}} @media(max-width:700px){body{font-size:19px}.rail{display:none}.shell{margin:0}.top{min-height:72px;gap:10px;padding:10px 20px}.brand{font-size:17px}.tools{gap:16px}.menu summary{font-size:16px;gap:7px}.lang{min-width:64px;padding:6px 12px}.opening{padding:23px 24px 30px}.opening-meta{font-size:14px}.opening-meta .edition{max-width:180px;text-align:right}.opening-grid{grid-template-columns:1fr;padding:35px 0 25px;gap:32px}h1{font-size:clamp(63px,15vw,90px);margin:20px 0}.name-cn{margin:16px 0;font-size:32px}.intro{font-size:22px}.hero-photo{padding:0 0 14px 14px}.hero-photo img{aspect-ratio:5/4;object-position:57% 46%}.opening-bottom{gap:10px}.horse-sign img{width:87px;height:66px}.horse-sign span{font-size:24px}.read-link{gap:20px;font-size:17px}.prologue{padding:70px 25px}.prologue blockquote{font-size:38px}.section{padding:65px 25px}.chapter-head{grid-template-columns:1fr;gap:20px;margin-bottom:32px}.chapter-number{display:flex;align-items:baseline;gap:18px;padding:0}.chapter-number b{font-size:30px;margin:0}.chapter-number span{display:inline;font-size:16px}.chapter-head h2{font-size:45px}.story{grid-template-columns:1fr;gap:35px}.story .copy p:first-child{font-size:23px}.story-photo{max-width:460px}.ink-art{padding:0}.art-caption{font-size:32px}.writing-row{grid-template-columns:1fr;gap:12px}.photo-pair{grid-template-columns:1fr;gap:30px}.closing{grid-template-columns:1fr;padding:65px 25px}.closing img{max-width:390px}.closing h2{font-size:54px}.footer{padding:50px 25px}.chapter-links{padding:12px 24px 24px}.chapter-links a{grid-template-columns:30px 1fr;font-size:17px}.chapter-links .date{grid-column:2}.translation{font-size:20px}html[lang=zh-Hant] h1{font-size:64px}.wide-photo{margin-top:32px}} @media(max-width:360px){.top{padding:10px 14px}.brand{font-size:15px}.tools{gap:10px}.menu summary{font-size:15px}.lang{min-width:58px}.opening,.section{padding-left:20px;padding-right:20px}h1{font-size:60px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} @media print{.rail,.top,.skip{display:none}.shell{margin:0}body:before{display:none}.section{break-inside:avoid}.prologue,.footer{background:white;color:black}.prologue .note,.footer p{color:black}} /* English reading labels follow the same language selection as the story. */ html[lang=en] .seal{font:22px/1 var(--serif);letter-spacing:-.07em} html[lang=en] .name-cn{font:clamp(25px,3vw,40px)/1.3 var(--serif);letter-spacing:0} html[lang=en] .horse-sign span{writing-mode:horizontal-tb;font:19px/1.2 var(--serif);letter-spacing:0;max-width:60px} html[lang=en] .closing h2{font-family:var(--serif);letter-spacing:-.035em;line-height:1.1} .prologue .ring-poem figcaption{color:#ddd7c9} @media(max-width:700px){html[lang=en] .horse-sign{gap:8px}html[lang=en] .horse-sign span{font-size:16px;max-width:42px}html[lang=en] .closing h2{font-size:52px}} /* ==== motion.css ==== */ /* Original scroll scenes: native document scrolling, no scroll hijack. */ .photo-interlude{position:relative;isolation:isolate;overflow:hidden;min-height:90svh;display:flex;align-items:center}.interlude-photo{position:absolute;right:0;top:-8%;width:70%;height:116%;max-width:none;object-fit:cover;object-position:55% center;filter:grayscale(1);opacity:.43;z-index:-2;will-change:transform}.photo-interlude:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#242721 3%,rgba(36,39,33,.82) 43%,rgba(36,39,33,.28));z-index:-1}.interlude-copy{width:min(100%,1040px)}.photo-interlude blockquote{max-width:820px}.photo-interlude .note{background:rgba(36,39,33,.78);padding:10px 12px;margin-left:-12px}html[data-motion=off] .interlude-photo{transform:none!important} @media(max-width:700px){.photo-interlude{min-height:85svh}.interlude-photo{width:100%;opacity:.32}.photo-interlude:after{background:rgba(36,39,33,.48)}} @media(prefers-reduced-motion:reduce){.interlude-photo{transform:none!important}} body{isolation:isolate}.shell{position:relative;z-index:1}.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.bg-layer{position:absolute;inset:0;opacity:0;transition:opacity .8s}.bg-layer.active{opacity:1}.bg-img{position:absolute;inset:-8% 0;background-size:cover;background-position:center;opacity:.13;will-change:transform;filter:grayscale(1)}.bg-layer-a .bg-img{background-size:min(80vw,1100px) auto;background-repeat:no-repeat;background-position:right center}.bg-far{opacity:.04}.opening,.section,.closing{background:rgba(244,239,227,.90)}.section.subtle{background:rgba(234,228,214,.94)} .sound-dock{position:fixed;bottom:14px;left:90px;z-index:24;display:flex;gap:8px;max-width:calc(100vw - 110px)}.sound,.motion-toggle{background:var(--paper);color:var(--ink);border:1px solid var(--muted);border-radius:24px;min-height:46px;min-width:46px;padding:8px 14px;font:16px/1.4 var(--sans);display:flex;align-items:center;gap:8px;box-shadow:0 2px 8px #24272120}.sound[aria-pressed=true]{background:var(--red);color:var(--paper)}.sound .wave{display:none}.sound[aria-pressed=true] .wave{display:block}.sound[aria-pressed=true] .mute{display:none}.sound:hover,.motion-toggle:hover{border-color:var(--red)}.audio-status{position:fixed;left:90px;bottom:72px;max-width:min(400px,80vw);margin:0;padding:10px 14px;border:1px solid var(--rule);box-shadow:0 8px 22px #24272122;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans);z-index:24}/* Hidden without resizing: the box keeps its place, so showing and hiding it never counts as a layout shift, and the live region stays in the accessibility tree. */ .audio-status{transition:opacity .2s}.audio-status.is-dismissed{opacity:0;pointer-events:none}.audio-status:empty{display:none} .history-context{border-left:3px solid var(--red);margin-top:36px;padding:18px 22px;background:var(--paper)}.history-context h3{font:25px/1.4 var(--serif);margin-bottom:14px}.history-context p,.history-context a{font:18px/1.7 var(--sans)}.copy blockquote{font:28px/1.6 var(--brush);margin:28px 0 12px}.copy .translation{font:19px/1.7 var(--serif)} .reveal{opacity:1;transform:none}.js-motion[data-motion=on] .reveal:not(.in){opacity:0;transform:translateY(20px)}.js-motion[data-motion=on] .reveal{transition:opacity .65s ease,transform .65s ease}.reveal:focus-within{opacity:1!important;transform:none!important} .horiz-section{margin:60px 0 20px;position:relative}.horiz-pin{background:var(--paper);padding:22px 0 24px;border-block:1px solid var(--rule)}.gallery-heading{display:flex;gap:20px;align-items:center;justify-content:space-between}.gallery-heading h3{font:32px/1.3 var(--serif);margin:10px 0}.gallery-hint{font:16px/1.6 var(--sans);max-width:44rem;margin:12px 0 24px;color:var(--muted)}.gallery-controls{display:none;gap:8px}.gallery-controls button{background:var(--paper);border:1px solid var(--muted);width:46px;height:46px;font-size:25px;flex:none}.horiz-wrap{padding:6px;scrollbar-width:thin;scrollbar-color:var(--red) var(--paper)}.horiz-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start}.horiz-track figure{min-width:0;margin:0}.horiz-track img{width:100%;max-height:400px;object-fit:contain;object-position:left top;aspect-ratio:4/5;background:#e7e0d2}.horiz-track figcaption{margin-top:12px}.quote-page{padding:24px;background:var(--ink);color:var(--paper)}.quote-page blockquote{font:32px/1.5 var(--brush);margin:0 0 20px}.quote-page figcaption{color:var(--paper)}.quote-page img{background:var(--paper);margin-top:20px;max-height:150px;aspect-ratio:900/620;object-fit:contain} .js-motion[data-motion=on] .gallery-controls{display:flex}.js-motion[data-motion=on] .horiz-wrap{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity}.js-motion[data-motion=on] .horiz-track{display:flex}.js-motion[data-motion=on] .horiz-track figure{flex:0 0 clamp(250px,30vw,370px);scroll-snap-align:start}.horiz-section.is-pinned .horiz-pin{position:sticky;top:94px}.js-motion .horiz-section.is-pinned .horiz-wrap{overflow:hidden;scroll-snap-type:none}.horiz-section.is-pinned .horiz-track{will-change:transform}.horiz-section.is-pinned .horiz-track img{max-height:min(42vh,370px)} html[data-motion=off] .bg-img{transform:none!important}html[data-motion=off] .bg-layer{transition:none}html[data-motion=off] .horiz-track{transform:none!important}.footer{padding-bottom:100px} .ring-poem{margin:30px auto 0;max-width:340px;background:rgba(36,39,33,.6);padding:18px 20px;border:1px solid #e7bfb1} .ring-poem pre{font:26px/1.9 var(--brush);letter-spacing:.25em;color:var(--paper);text-align:center;white-space:pre} @media(max-width:700px){.ring-poem pre{font-size:20px}} @media(max-width:1000px){.sound-dock,.audio-status{left:70px}.sound-dock{max-width:calc(100vw - 90px)}} @media(max-width:700px){.sound-dock,.audio-status{left:12px}.audio-status{bottom:64px;max-width:min(340px,calc(100vw - 24px));padding:9px 12px;font-size:14px}.sound-dock{bottom:10px;max-width:calc(100vw - 24px)}.sound,.motion-toggle{font-size:14px;padding:8px 12px}.gallery-heading{align-items:flex-start;gap:12px}.gallery-heading h3{font-size:28px}.horiz-track{grid-template-columns:1fr}.js-motion[data-motion=on] .horiz-track figure{flex-basis:82%;max-width:340px}.history-context{padding:16px}.copy blockquote{font-size:27px}} @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}.bg-img{transform:none!important}.bg-layer{transition:none!important}} @media print{.sound-dock,.audio-status,.bg,.gallery-controls{display:none!important}.horiz-section{height:auto!important}.horiz-pin{position:static!important}.horiz-track{display:block!important;transform:none!important}.horiz-track figure{break-inside:avoid}.reveal{opacity:1!important;transform:none!important}.horiz-wrap{overflow:visible!important}} /* ==== eras.css ==== */ /* Large year planes and counter-drifting titles, measured from the reference. Live text, original code; no bitmap numerals or scroll interception. */ .era-chapter{--chapter-pad:7vw;padding-top:0!important;padding-inline:var(--chapter-pad)!important} .era-chapter.prologue{--chapter-pad:8vw} .era-opening{position:relative;isolation:isolate;background:#171a16;color:var(--paper);margin:0 calc(-1 * var(--chapter-pad)) 70px;padding:44vw 5vw 10vw;overflow:clip;--era-accent:#d3b474} .era-opening:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;background:url('art/xu-beihong-galloping-horse-1938-640.webp') right center/contain no-repeat} /* The era watermark sits at 0.055 opacity behind the year plane. Wider screens load the full plate; a phone renders it a few hundred pixels wide and takes the narrow copy instead. */ @media (min-width:701px){.era-opening:after{background-image:url('art/xu-beihong-galloping-horse-1938-960.webp')}} @media (min-width:1200px){.era-opening:after{background-image:url('art/xu-beihong-galloping-horse-1938.webp')}} .era-kicker{position:absolute;top:22px;left:5vw;right:5vw;display:flex;align-items:baseline;justify-content:space-between;gap:15px;font:16px/1.6 var(--sans);z-index:3} .era-period{font:16px/1.6 var(--sans);text-align:right} .era-dates{position:absolute;inset:0;pointer-events:none;z-index:-1} .era-year{position:absolute;top:2.5vw;left:4vw;display:block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:31vw;font-weight:200;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.045em;color:var(--era-accent);background:linear-gradient(var(--era-accent) 12%,transparent 95%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap} .era-year.end{top:29vw;left:22vw} .era-heading{position:relative!important;margin:0!important;font-size:8.5vw!important;line-height:.98!important;letter-spacing:-.055em;font-family:var(--serif)!important;font-weight:400;text-transform:uppercase} .era-line{display:block;position:relative;width:fit-content;max-width:92%;margin:0 0 1.4vw;transform:none} .era-line:nth-child(2){margin-left:14vw;max-width:78%} html[lang=zh-Hant] .era-heading{font-family:var(--brush)!important;letter-spacing:.035em;line-height:1.2!important} .era-note{position:relative;max-width:42rem;font:16px/1.65 var(--sans);margin:30px 0 0!important;color:var(--paper)} .era-opening[data-tone=water]{--era-accent:#8ca8ab}.era-opening[data-tone=church]{--era-accent:#b3b69c}.era-opening[data-tone=books]{--era-accent:#c89481}.era-opening[data-tone=family]{--era-accent:#d2b58d} .era-opening[data-tone=reform]{--era-accent:#d4735f}.era-opening[data-tone=famine]{--era-accent:#bfa47c}.era-opening[data-tone=revolution]{--era-accent:#e2574a} .era-line:nth-child(3){margin-left:5vw;max-width:86%} body.story-edition .era-opening .era-epigraph{max-width:36rem;margin-top:3.2vw!important;font:italic 400 clamp(17px,1.45vw,22px)/1.55 var(--serif);opacity:.86} html[lang=zh-Hant] body.story-edition .era-opening .era-epigraph{font-style:normal;letter-spacing:.04em} .era-opening[data-tone=memory]{background:var(--paper);color:var(--ink);--era-accent:#946e38}.era-opening[data-tone=memory] .era-note{color:var(--ink)} html[data-motion=on] .era-year,html[data-motion=on] .era-line{will-change:transform} html[data-motion=off] .era-year,html[data-motion=off] .era-line{transform:none!important} @media(min-width:1700px){.era-chapter,.era-chapter.prologue{--chapter-pad:max(7vw,calc((100vw - 1500px)/2))}} @media(max-width:700px){.era-chapter,.era-chapter.prologue{--chapter-pad:25px}.era-opening{padding:65vw 6vw 14vw;margin-bottom:40px}.era-kicker{left:6vw;right:6vw;top:18px;font-size:14px}.era-period{font-size:14px}.era-year{font-size:37vw;top:14vw;left:2vw}.era-year.end{top:44vw;left:13vw}.era-heading{font-size:10vw!important;line-height:1.05!important;letter-spacing:-.055em}.era-line:nth-child(2){margin-left:9vw;max-width:84%}.era-note{margin-top:24px!important}.era-opening:after{background-size:100%}} @media(max-width:360px){.era-chapter,.era-chapter.prologue{--chapter-pad:20px}} @media(prefers-reduced-motion:reduce){.era-year,.era-line{transform:none!important;will-change:auto!important}} @media print{.era-opening{padding:30px;background:white!important;color:black;overflow:visible}.era-dates{display:none}.era-kicker{position:static}.era-heading{font-size:36px!important}.era-line{transform:none!important;margin-left:0!important}.era-note{color:black!important}.era-opening:after{display:none}} /* ==== navigation.css ==== */ /* Reference chapter picker with local control assets and display type. */ :root{--rail-width:clamp(52px,4vw,76px);--nav-height:clamp(52px,4vw,76px);--menu-ink:#191919;--menu-paper:#f6f5f1} .shell{margin-left:var(--rail-width)} .rail{width:var(--rail-width);z-index:55;padding:20px 0;gap:18px;overflow-y:auto;overscroll-behavior:contain;transition:background .2s,color .2s} /* The seal is a source-pixel crop of David's own red ink impression. */ .seal{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;flex:0 0 44px;line-height:1} .seal img{width:40px;height:40px;object-fit:contain}.mobile-seal{display:none} .rail-navigation{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,3vh,30px);margin:auto 0} .rail-navigation a,.rail-navigation button{writing-mode:vertical-rl;text-decoration:none;background:none;color:inherit;font:16px/1.4 var(--sans);min-width:44px;min-height:74px;padding:10px} .rail-navigation a:hover,.rail-navigation button:hover{text-decoration:underline;text-underline-offset:5px} .rail-navigation,.rail-date{flex-shrink:0}.rail-navigation :focus-visible{outline-offset:-3px} .rail-navigation .rail-library{font-weight:600;text-decoration:underline;text-underline-offset:5px}.rail-navigation a[aria-current=page]{color:var(--red)}.rail-date{font-size:12px} .top{z-index:50;display:flex;height:var(--nav-height);min-height:var(--nav-height);padding:0 1.8vw;gap:0}.top .brand{display:none}.top .tools{width:100%;gap:24px;min-width:0} .top .lang{padding:0 10px;min-width:50px;min-height:40px;font-size:15px;background:transparent;color:inherit;border-left:1px solid var(--rule)} .menu{position:static;flex:1;min-width:0}.menu summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;font:16px/1.5 var(--sans)}.menu summary::-webkit-details-marker{display:none}.menu summary:after{display:none} .picker-current{display:flex;gap:7px;align-items:center;min-width:0}.picker-label{opacity:.6;white-space:nowrap;margin-right:2px}.current-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .picker-icon{flex:0 0 29px;width:29px;height:29px;display:grid;place-items:center;margin-left:2px}.picker-icon img{width:29px;height:29px}.picker-icon .picker-x{display:none} .picker-meta{display:flex;gap:30px;text-align:right;white-space:nowrap;font:15px/1.5 var(--sans)}.picker-meta[hidden]{display:none} .chapter-links{position:fixed;inset:var(--nav-height) 0 0 var(--rail-width);width:auto;max-width:none;max-height:none;overflow-y:auto;overscroll-behavior:contain;background:var(--menu-ink);color:var(--menu-paper);padding:54px 1.8vw 70px;border:0;box-shadow:none;z-index:51} .chapter-links a{display:grid;grid-template-columns:minmax(0,1fr) 110px 100px;align-items:center;column-gap:30px;padding:19px 0;margin:0 0 18px;min-height:80px;border:0;text-decoration:none;color:inherit;animation:picker-entry .35s both} .chapter-links a:nth-of-type(2){animation-delay:.035s}.chapter-links a:nth-of-type(3){animation-delay:.07s}.chapter-links a:nth-of-type(4){animation-delay:.105s}.chapter-links a:nth-of-type(5){animation-delay:.14s}.chapter-links a:nth-of-type(6){animation-delay:.175s} .picker-name{font:300 clamp(28px,3.25vw,58px)/1 var(--serif);font-variant:small-caps;overflow-wrap:anywhere}html[lang=zh-Hant] .picker-name{font-family:var(--brush);font-variant:normal;line-height:1.4} .picker-num,.chapter-links .date{font:16px/1.5 var(--sans);color:inherit;text-align:right;white-space:nowrap}.chapter-links a:hover{color:#c5aa7e} .chapter-links a:hover .picker-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}.chapter-links :focus-visible{outline:2px solid #e7c99e;outline-offset:6px} .chapter-links .picker-library{border-top:1px solid #666;padding-top:28px;margin-top:26px}.picker-library-note{grid-column:2/4;font:16px/1.5 var(--sans);text-align:right} .picker-close{display:block;margin:32px 0 0 auto;background:none;color:inherit;border:1px solid #817f73;padding:9px 18px;min-height:44px;font:16px/1.4 var(--sans)} .chapters-open .top,.chapters-open .rail{background:var(--menu-ink);color:var(--menu-paper);border-color:#606060}.chapters-open .rail :focus-visible,.chapters-open .top :focus-visible{outline-color:#e7c99e}.chapters-open .rail a[aria-current=page]{color:#c5aa7e} .menu[open] .picker-book{display:none}.menu[open] .picker-x{display:block}.mobile-library,.mobile-comments,.mobile-gallery{display:none} .library-inline-link{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:40px 0 24px;padding:30px 0;border-block:1px solid var(--rule);font:clamp(30px,3vw,46px)/1.3 var(--serif);text-decoration:none;color:var(--red)} .library-inline-link small{display:block;font:17px/1.6 var(--sans);color:var(--muted);margin-top:12px}.library-inline-link>span:last-child{font-size:42px}.library-inline-link:hover>span:first-child{text-decoration:underline} .sound-dock,.audio-status{left:calc(var(--rail-width) + 14px)}.skip{z-index:80} @keyframes picker-entry{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}} @media(max-width:1000px){.picker-meta{gap:18px}.chapter-links a{grid-template-columns:minmax(0,1fr) 90px 95px;column-gap:20px}} .chapter-links .picker-comments,.chapter-links .picker-gallery,.chapter-links .picker-funeral{border-top:1px solid #666;padding-top:25px} .chapters-open .sound-dock,.chapters-open .audio-status,.chapters-open:before{visibility:hidden} .chapter-links a[aria-current=true]{color:var(--menu-paper)} .chapter-links a:hover{color:#c5aa7e} .mobile-menu-explore{display:none} .control-helper{position:fixed;z-index:90;width:max-content;max-width:min(260px,calc(100vw - 16px));padding:11px 14px;border:1px solid #68665e;border-radius:4px;background:#242721;color:#fffaf0;box-shadow:0 4px 18px #0003;font:14px/1.5 var(--sans);text-align:left;overflow-wrap:anywhere} .control-helper[hidden]{display:none} @media(max-width:700px){ :root{--rail-width:0px;--nav-height:60px} .rail{display:none}.shell{margin-left:0} .top{position:sticky;top:0;padding:0 16px} html.has-mobile-site-menu.overture-immersive .top{opacity:1;pointer-events:auto} .has-mobile-site-menu .overture__seal,.has-mobile-site-menu #intro-lang-toggle,.has-mobile-site-menu .overture__nav>a:not(.overture__skip){display:none} .has-mobile-site-menu .overture__nav{top:72px} .top .tools{display:flex;gap:16px;height:60px} .mobile-seal{display:inline-flex}.mobile-seal img{width:36px;height:36px} .top .menu{flex:1;min-width:0;padding:0} .menu summary{justify-content:flex-start;min-height:44px;width:max-content;max-width:100%;padding:0 12px;border:1px solid var(--rule);border-radius:4px} .picker-current{gap:12px;flex-direction:row-reverse} .picker-meta,.picker-current .current-name{display:none} .picker-label{opacity:1;margin-right:0}.picker-label .en,.picker-label .zh{font-size:0} .picker-label .en:after{content:'Menu';font:600 16px/1.4 var(--sans)} .picker-label .zh:after{content:'選單';font:600 17px/1.4 var(--sans)} .picker-icon{display:block;position:relative;width:20px;height:16px;flex:0 0 20px;margin:0;border-block:2px solid currentColor} .picker-icon img{display:none!important} .picker-icon:after{content:'';position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor} .menu[open] .picker-icon{border-color:transparent} .menu[open] .picker-icon:before,.menu[open] .picker-icon:after{content:'';position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor;transform:rotate(45deg)} .menu[open] .picker-icon:after{transform:rotate(-45deg)} .chapters-open .menu summary{border-color:#817f73} .top .lang{min-width:52px;min-height:44px;padding:0 0 0 12px;margin-left:auto} .chapter-links{padding:22px 24px max(40px,env(safe-area-inset-bottom));top:60px;max-height:calc(100dvh - 60px)} .chapter-links a{grid-template-columns:max-content 1fr;gap:4px 12px;padding:15px 0;margin:0 0 6px;min-height:84px;align-content:center} .picker-name{grid-column:1/-1;font-size:clamp(21px,5.6vw,24px);line-height:1.12} .picker-num{text-align:left;color:#b9b9b9;font-size:16px} .chapter-links .date{grid-column:2;text-align:left;color:#b9b9b9;font-size:16px} .chapter-links .date:before{content:'/';margin-right:12px} .picker-library-note{grid-column:1/-1;text-align:left;color:#b9b9b9} .chapter-links .picker-library{margin-top:20px;padding-top:26px} .mobile-menu-explore{display:block} .mobile-menu-heading{font:14px/1.5 var(--sans);color:#c5aa7e;letter-spacing:.06em} .mobile-menu-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 26px} .chapter-links .mobile-menu-links a{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:76px;margin:0;padding:14px;border:1px solid #77756e;border-radius:4px;font:500 18px/1.35 var(--sans);white-space:normal;overflow-wrap:anywhere;color:var(--menu-paper);background:#ffffff06;animation:none} .chapter-links .mobile-menu-links a:hover{background:#ffffff10} .chapter-links .mobile-menu-links a[aria-current=page]{border-color:#c5aa7e;color:#e7c99e} .mobile-menu-story-heading{padding-top:20px;border-top:1px solid #606060} .has-mobile-site-menu .chapter-links>.picker-library,.has-mobile-site-menu .chapter-links>.picker-gallery,.has-mobile-site-menu .chapter-links>.picker-comments,.has-mobile-site-menu .chapter-links>.picker-funeral{display:none} .top .tools>.mobile-library,.top .tools>.mobile-gallery,.top .tools>.mobile-comments{display:none} .picker-close{margin-top:20px}.sound-dock,.audio-status{left:12px} } @media(max-width:360px){.top{padding-inline:12px}.top .tools{gap:12px}.chapter-links{padding-inline:20px}.chapter-links .mobile-menu-links a{font-size:17px;padding:12px}} @media(prefers-reduced-motion:reduce){.chapter-links a{animation:none}.rail{transition:none}} @media print{.rail,.top,.control-helper{display:none}.shell{margin:0}} /* ==== story.css ==== */ /* The chapter narrative: quiet reading space around family voices and artwork. */ .hero-honorific{display:block;margin-bottom:18px;font:clamp(24px,2.5vw,34px)/1.3 var(--serif);letter-spacing:0} .timeline-age-note{font:14px/1.65 var(--sans);color:var(--muted);margin:0 0 28px;max-width:65ch} .era-period-group{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;column-gap:5px;text-align:right} .era-age{font:14px/1.6 var(--sans);white-space:nowrap} @media(max-width:700px){.era-period-group{display:block}.era-age{display:block;font-size:12px}.hero-honorific{margin-bottom:12px;font-size:24px}} body.story-edition .chapter-body { width: 100%; max-width: 1100px; margin-inline: auto; } body.story-edition .era-opening { padding-top: 38vw; padding-bottom: 8vw; margin-bottom: clamp(40px, 6vw, 76px); } body.story-edition .story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; } body.story-edition .story-grid > *, body.story-edition .story-endurance > * { min-width: 0; } body.story-edition .story-copy { max-width: 38rem; } body.story-edition .story-copy p { font: 21px/1.65 var(--serif); text-wrap: pretty; } body.story-edition p.story-lead, body.story-edition .story-lead > p:first-child, body.story-edition .story-lead > p.en, body.story-edition .story-lead > p.zh { font: 26px/1.5 var(--serif); } body.story-edition .story-visual img, body.story-edition .story-wide-art img, body.story-edition .story-family-photo img, body.story-edition .story-endurance img { width: 100%; height: auto; max-height: none; } body.story-edition .story-visual figcaption, body.story-edition .story-wide-art figcaption, body.story-edition .story-family-photo figcaption, body.story-edition .story-endurance figcaption { margin-top: 12px; color: var(--muted); font: 15px/1.6 var(--sans); text-wrap: pretty; } body.story-edition .story-beat { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); } body.story-edition .beat-date { margin-bottom: 9px; color: var(--red); font: 13px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; } body.story-edition .story-beat h3 { margin-bottom: 14px; font: 30px/1.25 var(--serif); letter-spacing: -.02em; text-wrap: balance; } body.story-edition .chapter-pullquote { margin: clamp(38px, 6vw, 68px) 0; padding-left: clamp(20px, 3vw, 38px); border-left: 2px solid var(--red); } body.story-edition .chapter-pullquote blockquote, body.story-edition .chapter-pullquote blockquote p { max-width: 900px; margin: 0; font: clamp(32px, 3.3vw, 42px)/1.35 var(--serif); letter-spacing: -.02em; text-wrap: pretty; } body.story-edition .chapter-pullquote cite, body.story-edition .chapter-pullquote figcaption { display: block; margin-top: 18px; color: var(--muted); font: 15px/1.65 var(--sans); } body.story-edition .history-thread { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px; margin: 44px 0; padding: 0; list-style: none; } body.story-edition .history-thread > li { min-width: 0; padding-top: 18px; border-top: 1px solid var(--rule); } body.story-edition .history-thread time { display: block; margin-bottom: 12px; color: var(--red); font: 15px/1.5 var(--sans); font-variant-numeric: lining-nums tabular-nums; } body.story-edition .history-thread strong { display: block; margin-bottom: 8px; font: 22px/1.3 var(--serif); } body.story-edition .history-thread p { margin-top: 0; color: var(--muted); font: 17px/1.65 var(--serif); text-wrap: pretty; } body.story-edition .chapter-sources { margin-top: 30px; padding-top: 8px; border-top: 1px solid var(--rule); color: var(--muted); font: 16px/1.7 var(--sans); overflow-wrap: anywhere; } body.story-edition .chapter-sources summary { min-height: 44px; padding: 10px 0; font: inherit; text-decoration: underline; text-underline-offset: 5px; } body.story-edition .chapter-sources p, body.story-edition .chapter-sources li { font: 16px/1.7 var(--sans); } body.story-edition .chapter-sources p, body.story-edition .chapter-sources ul, body.story-edition .chapter-sources ol { margin-top: 12px; } body.story-edition .chapter-sources ul, body.story-edition .chapter-sources ol { padding-left: 22px; } body.story-edition .chapter-sources li + li { margin-top: 8px; } body.story-edition .story-wide-art, body.story-edition .story-family-photo { margin-block: 40px; } body.story-edition .family-milestones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-block: 38px; padding: 0; list-style: none; } body.story-edition .family-milestones > * { min-width: 0; padding-top: 22px; border-top: 1px solid var(--rule); } body.story-edition .family-milestones time { display: block; color: var(--red); font: 22px/1.4 var(--serif); font-variant-numeric: lining-nums; } body.story-edition .family-milestones h3, body.story-edition .family-milestones strong { display: block; margin-top: 12px; font: 36px/1.25 var(--serif); } body.story-edition .family-milestones p { margin-top: 10px; color: var(--muted); font: 18px/1.6 var(--serif); } body.story-edition .story-readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-block: 32px; } body.story-edition .story-readings > * { min-width: 0; padding: 23px 0 10px; border-top: 1px solid var(--rule); } body.story-edition .story-readings h3 { margin-bottom: 12px; font: 22px/1.4 var(--serif); } body.story-edition .story-readings p { color: var(--muted); font: 16px/1.7 var(--serif); } body.story-edition .story-readings a { display: inline-flex; min-height: 44px; align-items: center; padding-block: 7px; color: var(--red); font: 16px/1.5 var(--sans); } body.story-edition .archive-next { margin-top: 30px; padding: 22px 26px; border: 1px solid var(--rule); background: rgba(244, 239, 227, .6); color: var(--muted); font: 16px/1.7 var(--sans); } body.story-edition .archive-next p { font: inherit; } body.story-edition .story-endurance { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; margin-block: 40px; } html[lang=zh-Hant] body.story-edition .story-copy p { line-height: 1.9; } html[lang=zh-Hant] body.story-edition .story-beat h3, html[lang=zh-Hant] body.story-edition .story-readings h3, html[lang=zh-Hant] body.story-edition .family-milestones h3 { font-family: var(--brush); line-height: 1.5; letter-spacing: .025em; } html[lang=zh-Hant] body.story-edition .chapter-pullquote blockquote, html[lang=zh-Hant] body.story-edition .chapter-pullquote blockquote p { line-height: 1.65; letter-spacing: .025em; } @media (max-width: 1000px) { body.story-edition .story-grid, body.story-edition .story-endurance { gap: 32px; } body.story-edition .history-thread { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { body.story-edition .era-opening { padding-top: 59vw; padding-bottom: 12vw; margin-bottom: 36px; } body.story-edition .story-grid, body.story-edition .story-endurance { grid-template-columns: minmax(0, 1fr); gap: 30px; } body.story-edition .story-copy { max-width: none; } body.story-edition .story-copy p { font-size: 20px; } body.story-edition p.story-lead, body.story-edition .story-lead > p:first-child, body.story-edition .story-lead > p.en, body.story-edition .story-lead > p.zh { font-size: 24px; } body.story-edition .story-beat h3 { font-size: 28px; } body.story-edition .chapter-pullquote { margin-block: 36px; padding-left: 20px; } body.story-edition .chapter-pullquote blockquote, body.story-edition .chapter-pullquote blockquote p { font-size: 30px; } body.story-edition .history-thread, body.story-edition .family-milestones, body.story-edition .story-readings { grid-template-columns: minmax(0, 1fr); gap: 22px; } body.story-edition .history-thread { margin-block: 34px; } body.story-edition .history-thread > li { padding-top: 15px; } body.story-edition .history-thread time { margin-bottom: 7px; } body.story-edition .family-milestones h3, body.story-edition .family-milestones strong { font-size: 32px; } body.story-edition .story-wide-art, body.story-edition .story-family-photo, body.story-edition .story-endurance { margin-block: 30px; } body.story-edition .archive-next { padding: 18px; } } @media print { body.story-edition .era-opening { padding: 30px; margin-bottom: 30px; } body.story-edition .story-grid, body.story-edition .story-endurance, body.story-edition .story-readings { gap: 24px; } body.story-edition .chapter-pullquote, body.story-edition .story-visual, body.story-edition .story-wide-art, body.story-edition .story-family-photo { break-inside: avoid; } } body.story-edition .story-copy .beat-date{font:13px/1.5 var(--sans)} body.story-edition .history-thread h4{margin:0 0 10px;font:22px/1.3 var(--serif);font-weight:400} body.story-edition .story-readings>a{display:flex;flex-direction:column;align-items:flex-start;position:relative;min-height:190px;padding:26px 38px 30px 0;text-decoration:none} body.story-edition .story-readings>a>span:last-child{position:absolute;bottom:24px;right:10px;font-size:24px} body.story-edition .story-readings>a:hover h3{text-decoration:underline;text-underline-offset:5px} body.story-edition .prologue .chapter-sources, body.story-edition .prologue .chapter-pullquote figcaption, body.story-edition .prologue .story-visual figcaption{color:#ddd7c9;border-color:#a49e90} body.story-edition .story-copy aside p{font:21px/1.65 var(--serif)} body.story-edition .prologue .chapter-pullquote{border-color:#d6b98b} body.story-edition .prologue .beat-date{color:#d6b98b} body.story-edition .prologue .horiz-pin{color:var(--ink)} body.story-edition .prologue .horiz-pin .eyebrow{color:var(--red)} body.story-edition .story-family-photo{margin-top:0} /* Dated scenes read from top to bottom in the same order on every screen. */ body.story-edition .story-beat > p:not(.beat-date){max-width:74ch;font:21px/1.65 var(--serif);text-wrap:pretty} body.story-edition .family-chronology{max-width:780px;margin:42px auto;padding-left:clamp(20px,4vw,52px);border-left:1px solid var(--rule)} body.story-edition .family-chronology .family-milestones{grid-template-columns:minmax(0,1fr);margin-block:32px} body.story-edition .family-chronology .family-milestones>article{border:0;padding-top:0} body.story-edition .family-chronology .story-family-photo{margin-block:40px} body.story-edition .horse-sign{display:grid;grid-template-columns:88px auto;gap:14px;max-width:230px;text-decoration:none} body.story-edition .horse-sign img{width:88px;height:auto;aspect-ratio:1525/1600;object-fit:contain} body.story-edition .horse-sign span{font:15px/1.4 var(--sans);writing-mode:horizontal-tb;letter-spacing:0;max-width:none} body.story-edition .horse-art{min-width:0;scroll-margin-top:100px} body.story-edition .horse-art img{width:100%;max-width:none;height:auto;object-fit:contain} body.story-edition .horse-art figcaption{font:15px/1.7 var(--sans);text-wrap:pretty} body.story-edition .bg-layer-a .bg-img{background-size:contain;filter:none} body.story-edition .crossing-intro{max-width:850px} body.story-edition .crossing-intro p{font:21px/1.7 var(--serif);text-wrap:pretty} body.story-edition .crossing-intro p.story-lead{font:clamp(26px,3vw,36px)/1.5 var(--serif)} body.story-edition #chapter-2 .story-wide-art{max-width:1100px;margin:48px auto} body.story-edition .freedom-context{padding:clamp(24px,4vw,48px);margin:48px 0;background:#e1e6e0;border:1px solid #8f9c94} body.story-edition .freedom-context h3{font:clamp(28px,3.5vw,42px)/1.3 var(--serif);margin:12px 0 22px} body.story-edition .freedom-context p{max-width:76ch;font:20px/1.7 var(--serif)} body.story-edition .freedom-context .eyebrow{font:13px/1.5 var(--sans);color:#3e5a4e} body.story-edition .freedom-context-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:26px} body.story-edition .freedom-context h4{margin:0 0 10px;font:24px/1.35 var(--serif);font-weight:400} body.story-edition .freedom-context .context-scope{margin-top:30px;border-top:1px solid #9bab9f;padding-top:18px;font:15px/1.7 var(--sans);color:#3f4c43} body.story-edition .crossing-resolution{max-width:850px;margin:64px auto} body.story-edition .sunny-photo{margin-bottom:0} body.story-edition #sunny-baby{max-width:600px;scroll-margin-top:110px} body.story-edition .crossing-approach{max-width:850px;margin-top:48px} body.story-edition .crossing-night{margin-block:48px;padding:clamp(24px,5vw,60px);background:#182d36;color:#f4efe3;border-top:1px solid #536671} body.story-edition .crossing-night .eyebrow{font:13px/1.6 var(--sans);color:#d9c6a4} body.story-edition .crossing-night h3{margin:24px 0 28px;font:clamp(32px,4vw,54px)/1.2 var(--serif);font-weight:400;letter-spacing:-.02em} body.story-edition .crossing-night > p:not(.eyebrow){max-width:70ch;font:22px/1.75 var(--serif);text-wrap:pretty} body.story-edition .crossing-night > p.crossing-memory-credit{margin-top:28px;padding-top:18px;border-top:1px solid #536671;font:15px/1.7 var(--sans);color:#d1d5d3} body.story-edition #hidden-journey, body.story-edition #swimming-by-stars{scroll-margin-top:110px} body.story-edition .footer .music-credit{margin-top:28px;padding-top:22px;border-top:1px solid #536671;font:15px/1.8 var(--sans)} body.story-edition .footer .music-credit a{display:inline;margin:0;min-height:0} html[lang=zh-Hant] body.story-edition .crossing-night h3{font-family:var(--brush);line-height:1.55;letter-spacing:.02em} html[lang=zh-Hant] body.story-edition .crossing-night > p:not(.eyebrow){line-height:1.9} body.story-edition .famine-memory{margin-block:44px;padding:clamp(22px,4vw,40px);border:1px solid var(--rule);border-left:3px solid var(--red);background:#ede5d7} body.story-edition .famine-memory > p.memory-credit{margin-top:24px;color:var(--muted);font:15px/1.65 var(--sans)} body.story-edition .story-beat > p.memory-credit{margin-top:24px;color:var(--muted);font:15px/1.65 var(--sans)} body.story-edition .school-sequence{max-width:850px} body.story-edition #famine-years, body.story-edition #school-conscience, body.story-edition #work-and-conscience{scroll-margin-top:120px} html[lang=zh-Hant] body.story-edition .freedom-context h3{font-family:var(--brush)} html[lang=zh-Hant] body.story-edition .crossing-intro p, html[lang=zh-Hant] body.story-edition .freedom-context p{line-height:1.9} html[lang=zh-Hant] body.story-edition .story-beat > p:not(.beat-date){line-height:1.9} @media(max-width:700px){body.story-edition .story-readings>a{min-height:160px}body.story-edition .horse-sign{grid-template-columns:58px auto;gap:8px;max-width:140px}body.story-edition .horse-sign img{width:58px}body.story-edition .horse-sign span{font-size:13px}body.story-edition .freedom-context-grid{grid-template-columns:1fr;gap:24px}body.story-edition .crossing-resolution{margin-block:42px}} /* Short, chronological ministry scenes retain the chapter's editorial rhythm. */ .ministry-scene{margin-top:34px;max-width:850px} .ministry-scene h4{font:500 clamp(23px,2.5vw,29px)/1.4 var(--serif);margin:0 0 12px;color:var(--ink)} body.story-edition .ministry-scene p{font:21px/1.65 var(--serif);text-wrap:pretty} html[lang=zh-Hant] body.story-edition .ministry-scene p{line-height:1.9} #across-chinese-communities,#easter-1987{scroll-margin-top:110px} #dementia-diagnosis,#austin-family,#parkinsons-diagnosis,#pdd-assessment{scroll-margin-top:110px} /* ==== overture.css ==== */ /* Original opening: native scroll, generated artwork, and one bounded canvas. Cormorant Garamond: fonts/overture-serif-LICENSE.txt (SIL OFL 1.1). */ @font-face{font-family:Overture Serif;src:url('fonts/overture-serif.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} .overture{--intro-serif:'Overture Serif',Georgia,serif;position:relative;height:760svh;margin-left:calc(-1 * var(--rail-width,76px));margin-top:calc(-1 * var(--nav-height,94px));width:calc(100% + var(--rail-width,76px));background:#03070d;color:#f3efe6;isolation:isolate} .overture__top-anchor{position:absolute;top:0;left:0} .overture__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#03070d;isolation:isolate} .overture__scene,.overture__poster,.overture__canvas,.overture__mist,.overture__shade,.overture__ui,.overture__wipe{position:absolute;inset:0;width:100%;height:100%} .overture__scene{overflow:hidden;pointer-events:none} .overture__poster{object-fit:cover;object-position:50% 50%;display:block} .overture__canvas{display:block;opacity:0;transition:opacity .45s} .overture[data-scene-ready] .overture__canvas{opacity:1} .overture[data-scene-ready] .overture__poster{visibility:hidden} .overture__mist{background:radial-gradient(ellipse 68% 52% at 50% 23%,#e5e4dec9 20%,#d4d6d1b0 52%,#c6cdc77a 75%,transparent 100%);pointer-events:none} .overture__shade{background:linear-gradient(90deg,#0207108c,transparent 80%),linear-gradient(0deg,#02071070,transparent 65%);opacity:0;pointer-events:none} .overture__ui{z-index:2;pointer-events:none} .overture__name{position:absolute;left:0;top:3vh;width:100%;margin:0!important;padding:0 7vw;text-align:center;font-weight:300;line-height:1} .overture__cn{display:block;margin:0 auto;width:min(74vw,1150px);mix-blend-mode:multiply} .overture__cn img{display:block;width:100%;height:auto;mix-blend-mode:multiply} .overture__latin{display:block;margin-top:-.5vw;font:300 clamp(38px,5.6vw,88px)/1 var(--intro-serif);text-transform:uppercase;letter-spacing:-.045em;color:#0b1011} .overture__lines{position:absolute;top:0;left:7%;width:86%;max-width:1440px;will-change:transform;transform:translate3d(0,110vh,0)} .overture__line{margin:0;padding:0 0 .48em;font:300 clamp(30px,4.3vw,76px)/1.15 var(--intro-serif);letter-spacing:-.014em;color:#f3efe6;text-shadow:0 2px 24px #020710;opacity:0;text-align:left;text-wrap:pretty} .overture__line:first-child{text-indent:14%} .overture__line:nth-child(4),.overture__line:last-child{padding-left:20%} html[lang=zh-Hant] .overture__line{font-family:'Songti TC','Noto Serif TC','PMingLiU',serif;font-size:clamp(27px,3.7vw,65px);line-height:1.48;letter-spacing:.025em;text-wrap:wrap} /* Chinese lines wrap at clauses, not characters. keep-all holds each clause of the three comma-delimited lines together so they break at their punctuation in every browser (anywhere is the emergency break for a measure too narrow for a clause); the opening line balances into two even halves; the fourth line balances only when it cannot fit. WebKit's 'pretty' moves single characters across lines, so the rest wrap plainly. */ html[lang=zh-Hant] .overture__line:nth-child(3),html[lang=zh-Hant] .overture__line:nth-child(5),html[lang=zh-Hant] .overture__line:nth-child(6){word-break:keep-all;overflow-wrap:anywhere} html[lang=zh-Hant] .overture__line:first-child,html[lang=zh-Hant] .overture__line:nth-child(4){text-wrap:balance} .overture__end{position:absolute;left:5%;top:42%;width:90%;opacity:0;text-shadow:0 2px 38px #0009} .overture__end-line{display:flex;align-items:center;gap:.25em;font:300 clamp(48px,8.5vw,154px)/.9 var(--intro-serif);text-transform:uppercase;letter-spacing:-.055em;white-space:nowrap} .overture__end-line:nth-child(1){margin-left:8%;font-size:clamp(40px,7.2vw,130px)} .overture__end-line:nth-child(2){margin-left:15%} .overture__end-line:nth-child(3){margin-left:1%} .overture__year{font:400 clamp(17px,2.2vw,36px)/1 var(--sans);letter-spacing:0;margin:.35em .5em 0} html[lang=zh-Hant] .overture__end-line{font-family:'Songti TC','PMingLiU',serif;line-height:1.1;letter-spacing:.01em} .overture__scroll{position:absolute;bottom:7vh;left:7%;font:14px/1.4 var(--sans);letter-spacing:.08em;margin:0} .overture__scroll:before{content:'';display:inline-block;width:40px;height:1px;background:currentColor;margin-right:18px;vertical-align:middle} .overture__setting{position:absolute;right:5%;bottom:7vh;text-align:right;font:11px/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#d5d8d8;margin:0} .overture__nav{position:absolute;right:4%;top:28px;z-index:5;display:flex;gap:25px;align-items:center;font:13px/1.4 var(--sans);color:#101819} .overture__seal{position:absolute;left:4%;top:28px;z-index:5}.overture__seal img{width:44px;height:44px} .overture__nav a,.overture__nav button{font:inherit;color:inherit;background:none;border:0;text-decoration:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:4px 0} .overture__nav a:hover,.overture__nav button:hover{text-decoration:underline;text-underline-offset:5px} .overture__nav :focus-visible{outline:2px solid currentColor;outline-offset:5px} .overture[data-dark] .overture__nav{color:#eee} .overture__wipe{z-index:4;background:#000;transform:translate3d(0,101%,0);pointer-events:none;will-change:transform} .overture__loader{display:none;position:absolute;inset:0;z-index:8;background:#080b0f;align-items:center;justify-content:center;flex-direction:column;color:#f3efe6;pointer-events:none} .overture-loading .overture__loader{display:flex;animation:overture-fail-open 1ms 7s forwards} .overture__loader-name{font:300 clamp(38px,7vw,92px)/1 var(--intro-serif);letter-spacing:-.03em} .overture__loader-caption{font:300 clamp(20px,2.5vw,32px)/1.3 var(--intro-serif);margin:24px 30px;text-align:center} .overture__loader-track{height:1px;width:min(340px,65vw);background:#ffffff24;margin-top:32px;overflow:hidden} .overture__loader-progress{display:block;height:100%;background:#efe7d2;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .2s linear} .overture__loader-label{font:11px/1.4 var(--sans);letter-spacing:.12em;margin-top:16px} @keyframes overture-fail-open{to{visibility:hidden}} html.overture-immersive .top,html.overture-immersive .rail{opacity:0;pointer-events:none} html.overture-immersive .annotation-dock{opacity:.7} html.overture-immersive .sound-dock{z-index:55} /* Static content is the default. A failed script never conceals the story. */ .overture[data-static]{height:auto} .overture[data-static] .overture__pin{position:relative;height:auto;min-height:100svh;padding:8vh 0} .overture[data-static] .overture__scene{height:100svh} .overture[data-static] .overture__ui{position:relative;height:auto;padding-top:54vh;background:linear-gradient(transparent 70vh,#03070d 100vh)} .overture[data-static] .overture__name{top:0} .overture[data-static] .overture__lines{position:relative;left:7%;transform:none!important;max-width:100%;padding-top:10vh} .overture[data-static] .overture__line{opacity:1!important;font-size:clamp(28px,3.2vw,50px);padding-bottom:.8em} .overture[data-static] .overture__end{position:relative;left:5%;top:auto;margin:14vh 0 5vh;opacity:1!important} .overture[data-static] .overture__end-line{font-size:clamp(27px,7.5vw,118px)} .overture[data-static] .overture__scroll,.overture[data-static] .overture__setting,.overture[data-static] .overture__wipe{display:none} .overture[data-static] .overture__mist{height:100svh} /* The HTML ships data-static and overture.js removes it a few seconds later on a slow network. Where overture-boot.js has marked the page before the first paint, paint the pinned layout from the first frame so that removal changes nothing (it moved the first viewport by 0.31 CLS). The mark is absent for a stored motion-off choice and is withdrawn if overture.js never takes over, so a failed script still never conceals the story. Reduced motion, print, no-JS and browsers without the scripting feature keep the static layout above. Values mirror the pinned rules. */ @media screen and (scripting:enabled) and (prefers-reduced-motion:no-preference){ html[data-overture=pinned]:not([data-motion=off]) .overture[data-static]{height:760svh;margin-top:calc(-1 * var(--nav-height,94px))} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__pin{position:sticky;height:100svh;min-height:0;padding:0} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] :is(.overture__scene,.overture__mist){height:100%} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__ui{position:absolute;height:100%;padding-top:0;background:none} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__name{top:3vh} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__lines{position:absolute;max-width:1440px;padding-top:0;transform:translate3d(0,110vh,0)!important} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__line{opacity:0!important} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__end{position:absolute;top:42%;margin:0;opacity:0!important} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__end-line{font-size:clamp(48px,8.5vw,154px)} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__end-line:nth-child(1){font-size:clamp(40px,7.2vw,130px)} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] :is(.overture__scroll,.overture__setting,.overture__wipe){display:block} @media(max-width:700px){ html[data-overture=pinned]:not([data-motion=off]) .overture[data-static]{height:850svh} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__name{top:14vh} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__end{top:51%} html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__end-line,html[data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__end-line:nth-child(1){font-size:9.5vw} html[lang=zh-Hant][data-overture=pinned]:not([data-motion=off]) .overture[data-static] .overture__end-line{font-size:12vw} } } @media(max-width:700px){ .overture{height:850svh} .overture__name{top:14vh;padding:0 4vw} .overture__cn{width:94vw} .overture__latin{font-size:10vw;margin-top:3vw} .overture__mist{background:radial-gradient(ellipse 110% 46% at 50% 25%,#e4e5ded9 15%,#d5d9d0b0 55%,transparent 100%)} .overture__line{font-size:clamp(26px,7.3vw,44px);line-height:1.2;padding-bottom:.8em} html[lang=zh-Hant] .overture__line,html[lang=zh-Hant] .overture[data-static] .overture__line{font-size:clamp(24px,6.8vw,39px);line-height:1.5} /* Under one character of indent lets the opening line balance 9/9; the closing line's deeper step leaves room for exactly ten characters before 神的僕人. */ html[lang=zh-Hant] .overture__line:first-child{text-indent:.8em} html[lang=zh-Hant] .overture__line:last-child{padding-left:15%} .overture__line:first-child{text-indent:10%} .overture__line:nth-child(4),.overture__line:last-child{padding-left:10%} .overture__end{top:51%;left:5%;width:90%} .overture__end-line,.overture__end-line:nth-child(1){font-size:9.5vw;line-height:1.02;letter-spacing:-.05em} .overture__end-line:nth-child(2){margin-left:5%} .overture__end-line:nth-child(3){margin-left:0} .overture__year{font-size:4vw;margin:.35em .3em 0} html[lang=zh-Hant] .overture__end-line{font-size:12vw;line-height:1.2} .overture__nav{top:14px;right:6%;gap:20px;font-size:12px} .overture__seal{top:14px;left:6%} .overture__setting{bottom:15vh;font-size:12px} .overture__scroll{bottom:10vh;font-size:12px} .overture__scroll:before{width:20px;margin-right:9px} .overture[data-static] .overture__ui{padding-top:62vh} .overture[data-static] .overture__name{top:11vh} } @media(prefers-reduced-motion:reduce){.overture__canvas{transition:none}.overture__loader{display:none!important}} @media print{.overture{margin:0;width:100%;height:auto!important;background:#fff;color:#111}.overture__pin{position:static;height:auto!important;padding:0!important;background:#fff}.overture__scene,.overture__mist,.overture__shade,.overture__nav,.overture__seal,.overture__loader,.overture__wipe,.overture__scroll,.overture__setting{display:none!important}.overture__ui,.overture__name,.overture__lines,.overture__end{position:static!important;transform:none!important;width:100%;padding:0!important;margin:0!important;opacity:1!important;height:auto}.overture__line{opacity:1!important;color:#111;text-shadow:none;font-size:18pt}.overture__latin{color:#111}.overture__end-line{color:#111;text-shadow:none;font-size:25pt!important}.overture__cn{width:70%}} /* Blend the complete name layer with the mist, so white around the ink disappears. */ .overture__ui{z-index:auto} .overture__name{z-index:2;mix-blend-mode:multiply} .overture__cn,.overture__cn img{mix-blend-mode:normal} .overture__lines,.overture__end,.overture__scroll,.overture__setting{z-index:2} .overture__scroll,.overture__setting{bottom:14vh} .overture__nav a,.overture__nav button{white-space:nowrap} @media(max-width:700px){.overture__setting{bottom:23vh;right:6%}.overture__scroll{bottom:17vh}} .overture[data-static]{margin-top:0} html.overture-immersive body:before{visibility:hidden} html.overture-immersive[data-music=blocked] .audio-status{opacity:0;pointer-events:none} /* The first-paint title card, before overture.js has run, conceals the note as the running overture does. */ html[data-overture=pinned]:not([data-motion=off]):not([data-overture-script]) .audio-status{opacity:0;pointer-events:none} .overture__keep{white-space:nowrap} /* At 320px twelve characters of a Chinese line must fit the measure, so lines break after the clause, not inside 少年 or 聖詩. */ @media(max-width:340px){html[lang=zh-Hant] .overture__line,html[lang=zh-Hant] .overture[data-static] .overture__line{font-size:22px}html[lang=zh-Hant] .overture__line:nth-child(4){padding-left:4%}} /* ==== archive-story.css ==== */ /* Archival scenes: complete photographs, readable source notes, native scrolling. */ body.story-edition .birth-scene{margin:15px 0 65px;scroll-margin-top:110px} .birth-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,80px);align-items:start} body.story-edition .birth-title{font:clamp(50px,6vw,82px)/1.06 var(--serif);font-weight:400;letter-spacing:-.05em;margin:14px 0;max-width:6ch;color:var(--red)} body.story-edition .birth-scene .story-copy{max-width:650px} .archive-spread{display:grid;grid-template-columns:.85fr 1.35fr;gap:clamp(32px,5vw,64px);align-items:center;margin:80px 0 110px;position:relative} .archive-narrative{min-width:0} body.story-edition .archive-narrative h3{font:clamp(32px,4vw,52px)/1.13 var(--serif);font-weight:400;letter-spacing:-.03em;margin:18px 0 26px} body.story-edition .archive-narrative>p:not(.beat-date){font:21px/1.7 var(--serif);max-width:44ch;text-wrap:pretty} .archive-sheet{margin:0;min-width:0;background:#f9f5ec;padding:clamp(14px,2vw,24px);box-shadow:0 16px 40px #24272118;border:1px solid #d3ccbd} .archive-image{display:block;position:relative;text-decoration:none;min-width:0;color:inherit} body.story-edition .archive-image img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;filter:none} .archive-image:focus-visible{outline:3px solid var(--red);outline-offset:6px} .archive-zoom{display:table;padding:5px 0 1px;border-bottom:1px solid currentColor;font:12px/1.6 var(--sans);letter-spacing:.04em} .archive-image:hover .archive-zoom{color:var(--red)} body.story-edition .archive-sheet figcaption, body.story-edition .archive-panel figcaption, body.story-edition .hong-kong-archive figcaption, body.story-edition .school-lamplight figcaption{font:15px/1.6 var(--sans);margin-top:16px;color:#50544a;text-wrap:pretty} body.story-edition .archive-credit{font:12px/1.65 var(--sans);color:#53584f;margin:9px 0 0;overflow-wrap:anywhere;max-width:90ch} .archive-credit a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} body.story-edition .artifact-reading, body.story-edition .archive-narrative>p.artifact-reading{font:15px/1.65 var(--sans);color:#53584f;margin-top:18px} body.story-edition .war-archive{margin:40px 0 80px} body.story-edition .war-archive .horiz-pin{background:#e8e1d3;padding:22px clamp(16px,2vw,28px) 24px} .war-archive .gallery-heading{align-items:center} .war-archive .gallery-heading h3{font-size:clamp(27px,3vw,40px);margin:6px 0 0} .war-archive .eyebrow{font-size:12px;margin:0;color:#744237} .war-archive .gallery-hint{font-size:14px;line-height:1.6;margin:12px 0 18px;max-width:75ch} .war-archive .horiz-track{grid-template-columns:1fr 1fr} .war-archive .archive-panel{padding-right:8px} .war-archive .archive-panel .archive-image img{height:clamp(240px,43vh,400px);aspect-ratio:auto;width:auto;max-width:100%;object-position:left center;background:none} .war-archive .archive-panel figcaption{max-width:65ch;margin-top:10px} /* Controls remain usable when animation is disabled. No-JS keeps a simple grid. */ .js-motion .gallery-controls{display:flex} .js-motion .horiz-wrap{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity} .js-motion .horiz-track{display:flex} .js-motion .horiz-track figure{flex:0 0 clamp(250px,30vw,370px);scroll-snap-align:start} .js-motion body.story-edition .war-archive .horiz-track figure{flex-basis:min(68vw,720px);max-width:none} .famine-archive{max-width:850px;margin:75px 0 65px} body.story-edition .famine-archive .famine-memory{border:0;border-left:2px solid var(--red);background:none;margin:0;padding:0 0 0 clamp(18px,2.5vw,30px)} body.story-edition .famine-archive .famine-memory h3{font-size:clamp(32px,4vw,48px);line-height:1.15;margin-block:18px 26px} body.story-edition .famine-archive .famine-memory>p:not(.beat-date):not(.memory-credit){font-size:20px} .school-lamplight{margin:40px 0 50px;max-width:680px} .school-lamplight img{display:block;width:100%;height:auto} .star-crossing{margin:70px 0 80px;background:#142b35;color:#f4efe3;position:relative;overflow:hidden;isolation:isolate;scroll-margin-top:90px} .star-art{margin:0;position:relative} .star-art-window{position:relative;overflow:hidden;isolation:isolate} .star-art-window img{display:block;width:100%;height:auto;max-width:none} .star-art-window:after{content:'';position:absolute;inset:75% 0 0;background:linear-gradient(transparent,#142b35);pointer-events:none} .star-plane{position:absolute;inset:0 0 45%;pointer-events:none;opacity:.7;background:radial-gradient(circle at 16% 29%,#e6dfc5 0 1px,transparent 2px),radial-gradient(circle at 72% 16%,#e6dfc5 0 1px,transparent 2px),radial-gradient(circle at 84% 43%,#e6dfc5 0 1px,transparent 2px)} .star-art figcaption{position:relative;font:13px/1.6 var(--sans);color:#c9d2d1;padding:14px clamp(24px,5vw,60px) 0;margin:0;max-width:80ch} body.story-edition .star-crossing .crossing-night{margin:0;padding:35px clamp(24px,5vw,60px) 55px;background:transparent;border:0} body.story-edition .star-crossing .crossing-night h3{font-size:clamp(36px,5vw,68px);max-width:18ch;margin:25px 0 32px} body.story-edition .star-crossing .crossing-night>p:not(.eyebrow):not(.crossing-memory-credit){max-width:56ch} .testimony-archive{margin:55px 0 95px;grid-template-columns:.85fr 1.3fr} .testimony-archive .archive-sheet{padding:16px} .hong-kong-archive{position:relative;margin:90px 0 80px;padding-top:65px;isolation:isolate} .archive-place{font:clamp(55px,10vw,150px)/.85 var(--sans);font-weight:600;letter-spacing:-.07em;color:#bdc4bb;margin:0 0 -15px;position:relative;z-index:-1;white-space:nowrap;max-width:100%} .archive-place>.place-year{font-size:1.4em} .hong-kong-photo{width:87%;margin-left:auto} .hong-kong-archive>figcaption,.hong-kong-archive>.archive-credit{margin-left:13%;max-width:80ch} html[lang=zh-Hant] .birth-title, html[lang=zh-Hant] .archive-narrative h3, html[lang=zh-Hant] body.story-edition .famine-archive .famine-memory h3{font-family:var(--brush);line-height:1.5;letter-spacing:.02em} html[lang=zh-Hant] body.story-edition .archive-narrative>p{line-height:1.9} html[lang=zh-Hant] .birth-title{max-width:5ch} html[data-motion=off] [data-drift-x],html[data-motion=off] [data-drift-y]{transform:none!important} @media(max-width:800px){ .birth-layout,.archive-spread,.famine-archive,.testimony-archive{grid-template-columns:minmax(0,1fr);gap:28px} body.story-edition .birth-title{font-size:clamp(46px,9vw,70px);max-width:12ch;margin:8px 0} html[lang=zh-Hant] body.story-edition .birth-title{max-width:none} .archive-spread{margin-block:55px 70px} .archive-sheet{max-width:650px;width:100%} .famine-archive{margin-block:60px} .hong-kong-photo{width:100%} .hong-kong-archive>figcaption,.hong-kong-archive>.archive-credit{margin-left:0} .hong-kong-archive{padding-top:0;margin-block:65px} .star-crossing{margin-block:50px} body.story-edition .star-crossing .crossing-night{padding-top:20px} body.story-edition .star-crossing .crossing-night h3{font-size:clamp(31px,6vw,48px);letter-spacing:-.025em} body.story-edition .star-crossing .crossing-night>p:not(.eyebrow):not(.crossing-memory-credit){font-size:20px} [data-drift-x],[data-drift-y]{transform:none!important} } @media(max-width:700px){ .war-archive .horiz-track{grid-template-columns:1fr;gap:30px} .js-motion .horiz-track figure{flex-basis:82%;max-width:340px} .js-motion body.story-edition .war-archive .horiz-track figure{flex-basis:90%;max-width:none} .war-archive .archive-panel .archive-image img{height:auto;max-height:none;width:100%} .war-archive .gallery-heading{align-items:flex-start} .war-archive .gallery-controls{gap:5px} .war-archive .gallery-controls button{width:42px;height:44px;font-size:23px} .war-archive .gallery-heading h3{font-size:25px;line-height:1.25} .archive-place{font-size:clamp(39px,10vw,70px)} } @media(prefers-reduced-motion:reduce){[data-drift-x],[data-drift-y]{transform:none!important}.star-plane{display:none}} @media print{[data-drift-x],[data-drift-y]{transform:none!important}.archive-spread,.famine-archive,.birth-layout{display:block}.archive-sheet{max-width:500px}.star-plane,.archive-zoom{display:none}.star-crossing{color:#000;background:none}.star-art figcaption{color:#000}.archive-credit{overflow-wrap:anywhere}.hong-kong-photo{width:100%}} /* Education unfolds as original records beside the years that earned them. */ .education-records{margin:70px 0;scroll-margin-top:110px} .education-record{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,5vw,64px);align-items:center;padding-block:50px;border-top:1px solid var(--rule);scroll-margin-top:110px} .education-copy{min-width:0;max-width:560px} body.story-edition .education-copy h3{font:clamp(30px,3.5vw,46px)/1.15 var(--serif);font-weight:400;letter-spacing:-.025em;margin:16px 0 24px} body.story-edition .education-copy>p:not(.beat-date){font:21px/1.7 var(--serif);text-wrap:pretty} .education-record .archive-sheet{transform:none;max-width:none} .education-record .archive-sheet figcaption strong{font-weight:500;color:var(--ink)} .graduation-portrait{max-width:203px;margin:30px 0 0} .graduation-portrait img{display:block;width:100%;height:auto;filter:none} .graduation-portrait figcaption{font:13px/1.65 var(--sans);color:var(--muted);margin-top:12px} html[lang=zh-Hant] body.story-edition .education-copy h3{font-family:var(--brush);line-height:1.5;letter-spacing:.02em} html[lang=zh-Hant] body.story-edition .education-copy>p:not(.beat-date){line-height:1.9} @media(max-width:800px){.education-record{grid-template-columns:minmax(0,1fr);gap:30px;padding-block:35px}.education-records{margin-block:50px}.education-copy{max-width:none}.graduation-portrait{max-width:203px;margin-inline:auto}.education-record .archive-sheet{width:100%}} @media print{.education-record{display:block;break-inside:avoid}.education-record .archive-sheet{max-width:600px}.graduation-portrait{max-width:160px}} .education-key-link{font:16px/1.6 var(--sans);display:inline-block;padding-block:10px;text-underline-offset:4px} body.story-edition .education-copy>p.artifact-reading{font:14px/1.7 var(--sans);color:var(--muted);margin-top:12px} .document-reading{grid-column:1/-1;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 0;max-width:850px;width:100%;justify-self:center} .document-reading summary{font:17px/1.65 var(--sans);padding:12px 0;cursor:pointer;min-height:48px;text-decoration:underline;text-underline-offset:4px} .document-reading>div{padding:8px 0 20px;max-width:72ch} .document-reading p{font:20px/1.75 var(--serif);margin:0 0 22px;text-wrap:pretty} .document-reading p.document-reading-note{font:14px/1.7 var(--sans);color:var(--muted)} html[lang=zh-Hant] .document-reading p{line-height:1.95} .gratitude-record .chapter-pullquote{margin-top:32px} /* Family originals remain complete, with readable captions and native scrolling. */ .student-archive{max-width:820px;margin:34px auto 44px;padding:clamp(12px,2vw,24px);background:#f9f5ec;border:1px solid var(--rule);box-shadow:0 14px 35px #24272114} .student-archive .archive-panel{margin:0} .hymn-memory{border-left:2px solid var(--red);padding-left:clamp(20px,3vw,38px)} body.story-edition .family-archive{margin:65px 0 80px} .family-archive .horiz-pin{background:#e8e1d3;padding:clamp(18px,3vw,34px)} .family-archive .gallery-heading{gap:20px;align-items:center} body.story-edition .family-archive .gallery-heading h3{font:clamp(29px,3.8vw,46px)/1.2 var(--serif);font-weight:400;letter-spacing:-.025em;margin:12px 0 0} body.story-edition .family-archive p.archive-intro{font:20px/1.7 var(--serif);max-width:70ch;margin:18px 0 25px;text-wrap:pretty} .family-archive .horiz-track{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:30px;align-items:start} .family-archive .archive-panel{margin:0;min-width:0} body.story-edition .family-archive .archive-image img{width:100%;height:clamp(300px,46vh,410px);object-fit:contain;background:#f9f5ec;object-position:left center} body.story-edition .family-archive .archive-panel figcaption{font-size:17px;line-height:1.65;max-width:58ch} .js-motion .family-archive .horiz-track{display:flex} .js-motion body.story-edition .family-archive .horiz-track figure{flex:0 0 min(66vw,730px);max-width:none;scroll-snap-align:start} .family-archive .archive-credit{margin-top:20px} .faith-artwork{margin:60px 0 70px;padding:clamp(22px,4vw,48px);background:#eee8db;border-top:1px solid var(--rule);scroll-margin-top:110px} body.story-edition .faith-artwork h3{font:clamp(30px,4vw,48px)/1.2 var(--serif);font-weight:400;letter-spacing:-.025em;margin:16px 0 24px} body.story-edition .faith-artwork>p:not(.beat-date){font:21px/1.7 var(--serif);max-width:62ch;text-wrap:pretty} .faith-artwork-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr);gap:clamp(24px,4vw,50px);align-items:start;margin:32px 0} .faith-artwork .archive-panel{margin:0;min-width:0} .faith-artwork .archive-panel:nth-child(2){padding-top:50px} .faith-artwork .document-reading{max-width:none} html[lang=zh-Hant] body.story-edition .family-archive .gallery-heading h3, html[lang=zh-Hant] body.story-edition .faith-artwork h3{font-family:var(--brush);letter-spacing:.02em;line-height:1.5} html[lang=zh-Hant] body.story-edition .family-archive p.archive-intro, html[lang=zh-Hant] body.story-edition .faith-artwork>p:not(.beat-date){line-height:1.9} @media(max-width:800px){ .faith-artwork-grid{grid-template-columns:minmax(0,1fr)} .faith-artwork .archive-panel:nth-child(2){padding-top:0;max-width:470px;margin-inline:auto} .family-archive .gallery-heading{align-items:flex-start} .family-archive .gallery-controls{gap:5px;flex-shrink:0} .family-archive .gallery-controls button{width:42px;height:44px;font-size:23px} .family-archive .horiz-track{grid-template-columns:minmax(0,1fr)} .js-motion body.story-edition .family-archive .horiz-track figure{flex-basis:92%} body.story-edition .family-archive .archive-image img{height:clamp(240px,43vh,360px);object-position:center} } @media(max-width:420px){ .family-archive .gallery-heading{flex-wrap:wrap} .family-archive .gallery-controls{margin-left:auto} body.story-edition .family-archive .gallery-heading h3{font-size:29px} .faith-artwork{padding:20px 16px} } @media print{ .student-archive,.faith-artwork,.family-archive .horiz-pin{background:none;box-shadow:none} .family-archive .horiz-track,.js-motion .family-archive .horiz-track,.faith-artwork-grid{display:block;transform:none!important} .family-archive .horiz-wrap{overflow:visible} .family-archive .archive-panel,.faith-artwork .archive-panel{max-width:500px;margin-bottom:24px} body.story-edition .family-archive .archive-image img{height:auto} } /* The government law remains a full, uncropped portrait document. */ .reform-spread{scroll-margin-top:105px;align-items:start} .reform-document{width:100%;max-width:560px;justify-self:center} /* ==== family-photo.css ==== */ /* Full family scan; identification is a presentation layer, never a pixel edit. */ body.story-edition .birth-layout--family-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 68px); row-gap: 24px; } body.story-edition .birth-layout--family-photo > .birth-title { grid-column: 1; grid-row: 1; margin-bottom: 0; } body.story-edition .birth-layout--family-photo > .story-copy { grid-column: 1; grid-row: 2; min-width: 0; } body.story-edition .birth-layout--family-photo > .childhood-family-photo { grid-column: 2; grid-row: 1 / span 2; } .childhood-family-photo { min-width: 0; width: 100%; max-width: 590px; margin: 12px 0 0; justify-self: center; } .childhood-family-photo__plane { display: block; position: relative; isolation: isolate; } body.story-edition .childhood-family-photo__plane img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; filter: none; } .childhood-family-photo__mark { position: absolute; left: 51.6%; top: 55.4%; width: 10.4%; height: 9.7%; border: 3px solid var(--red, #8b3029); border-radius: 46%; box-shadow: 0 0 0 2px #f4efe3cc, 0 0 16px 3px #1515154d, inset 0 0 0 2px #f4efe366; pointer-events: none; } .childhood-family-photo__mark::after { content: ''; position: absolute; top: 50%; left: 100%; width: clamp(12px, 2vw, 26px); height: 2px; background: var(--red, #8b3029); box-shadow: 0 0 0 1px #f4efe3aa; } .childhood-family-photo__name { position: absolute; left: calc(100% + clamp(9px, 1.7vw, 22px)); top: 50%; transform: translateY(-50%); padding: 4px 9px; background: #f4efe3; color: var(--red, #8b3029); border: 1px solid currentColor; font: 600 clamp(12px, 1.15vw, 15px)/1.25 var(--sans, sans-serif); letter-spacing: .04em; white-space: nowrap; } body.story-edition .childhood-family-photo figcaption { font: 14px/1.65 var(--sans, sans-serif); margin-top: 14px; color: #50544a; text-wrap: pretty; max-width: 58ch; } @media (max-width: 800px) { body.story-edition .birth-layout--family-photo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 24px; } body.story-edition .birth-layout--family-photo > .birth-title, body.story-edition .birth-layout--family-photo > .story-copy, body.story-edition .birth-layout--family-photo > .childhood-family-photo { grid-column: 1; grid-row: auto; } .childhood-family-photo { margin-top: 4px; } } @media print { body.story-edition .birth-layout--family-photo { display: block; } .childhood-family-photo { max-width: 95mm; break-inside: avoid; } .childhood-family-photo__name { print-color-adjust: exact; } } /* ==== chapter-one.css ==== */ /* Chapter I: a native-scroll archival prologue. All content is visible without JS. */ .chapter-intro { --chapter-black: #151515; position: relative; isolation: isolate; margin-inline: calc(-1 * var(--chapter-pad)); background: var(--chapter-black); color: #f3f0e9; overflow: clip; } .chapter-intro a { color: inherit; text-underline-offset: .2em; } .chapter-intro .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; } .chapter-intro__date { position: relative; min-height: calc(100svh - var(--nav-height)); display: grid; place-items: center; padding: 80px 7vw; text-align: center; } .chapter-intro__date > p { font: 400 clamp(16px, 1.55vw, 26px)/1.5 var(--sans); text-transform: uppercase; letter-spacing: .28em; margin: -4vh 0 0; } .chapter-intro__age { display:block;font:400 11px/1.5 var(--sans);letter-spacing:.2em;margin-top:20px;color:#aaa79f; } .chapter-intro__scroll { position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);font:10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#aaa79f; } .chapter-intro__scroll i { display:block;height:48px;width:1px;background:linear-gradient(#aaa79f,transparent);margin:20px auto 0; } .chapter-intro__context { position:relative;isolation:isolate; } .chapter-intro__backdrop { position:sticky;top:var(--nav-height);height:calc(100svh - var(--nav-height)); margin-bottom:calc(-100svh + var(--nav-height));overflow:hidden;pointer-events:none;z-index:-1; } .chapter-intro__backdrop::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,#15151505 15%,#1515155c 47%,#151515 85%),linear-gradient(#151515 0%,transparent 25%,transparent 65%,#151515 100%); } .chapter-intro__background-image { position:absolute;left:0;top:-80px;width:66%;height:calc(100% + 160px);object-fit:cover;object-position:50% 58%; opacity:.36;filter:grayscale(1);max-width:none!important; } .chapter-intro__context-content { position:relative;padding:12vw 0 10vw;min-height:102vw; } body.story-edition .chapter-intro__lead { width:70.8vw;max-width:calc(100% - 14.4vw);margin:0 0 9vw 7.2vw; font:400 4.11vw/1.045 var(--sans);letter-spacing:-.01vw;text-indent:13.3vw;text-wrap:pretty; } .chapter-intro__copy { width:27.15vw;margin-left:20.7vw; } body.story-edition .chapter-intro__copy p { font:400 1.6vw/1.34 var(--sans);margin:0 0 1.7em;letter-spacing:-.016em;color:#e7e4dd;text-wrap:pretty; } body.story-edition .chapter-intro__photo { position:absolute;top:44vw;left:57vw;width:32vw;max-width:none;margin:0; } body.story-edition .chapter-intro__photo img { display:block;width:100%;height:auto;object-fit:contain;filter:none; } .chapter-intro__photo .archive-image { background:transparent; } body.story-edition .chapter-intro__photo figcaption { color:#e0ded7;font:400 12px/1.5 var(--sans);margin:14px 0 8px; } body.story-edition .chapter-intro__photo .archive-credit { color:#aaa79f;font:400 10px/1.5 var(--sans);margin:8px 0; } .chapter-intro__photo .archive-credit a { text-decoration-color:#78766f; } /* Keep the reference's narrow copy and staggered foreground media in flow. */ .chapter-intro__body { display:grid;grid-template-columns:27.15vw 32vw;gap:9.15vw;margin-left:20.7vw;align-items:start; } .chapter-intro__body .chapter-intro__copy { width:auto;margin:0; } .chapter-intro__media { min-width:0;padding-top:5vw; } body.story-edition .chapter-intro__body .chapter-intro__photo { position:relative;top:auto;left:auto;width:100%;margin:0; } .chapter-intro__map-scene { position:relative;margin:10vw 0 5vw -6vw; } body.story-edition .chapter-intro__campaign-map { width:38vw;max-width:none;margin:0; } body.story-edition .chapter-intro__campaign-map img { display:block;width:100%;height:auto;max-height:none;object-fit:contain;filter:none; } body.story-edition .chapter-intro__campaign-map figcaption { color:#e0ded7;font:400 12px/1.5 var(--sans);margin:14px 0 8px; } body.story-edition .chapter-intro__campaign-map .archive-credit { color:#aaa79f;font:400 10px/1.5 var(--sans);margin:8px 0; } .chapter-intro__campaign-map .archive-image { background:transparent; } .chapter-intro__campaign-map .archive-credit a { text-decoration-color:#78766f; } .chapter-intro__loop-controls { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px; } .chapter-intro__loop-controls [hidden] { display:none; } /* The button keeps one line whatever its label ('Animation unavailable' is the longest); the time beside it wraps inside the 44px row instead, so a label change never moves the page. */ .chapter-intro__loop-toggle { flex:none;white-space:nowrap;min-height:44px;padding:8px 12px;border:1px solid #77756e;background:transparent;color:#f3f0e9;font:12px/1.4 var(--sans);cursor:pointer; } .chapter-intro__loop-toggle:hover { border-color:#e0ded7; } .chapter-intro__loop-toggle:focus-visible { outline:2px solid #e0ded7;outline-offset:4px; } .chapter-intro__loop-toggle:disabled { cursor:default;color:#aaa79f; } .chapter-intro__loop-time { color:#aaa79f;font:11px/1.5 var(--sans); } .chapter-intro__photo picture { display:block; } .chapter-intro__image-note { width:28vw;margin:8vw 0 0 7.2vw;color:#aaa79f;font:11px/1.5 var(--sans); } .chapter-intro__sources { margin:0 7.2vw;border-top:1px solid #45433e;border-bottom:1px solid #45433e;padding:20px 0; } .chapter-intro__sources summary { cursor:pointer;font:12px/1.5 var(--sans);letter-spacing:.05em;color:#c5c1b7; } .chapter-intro__sources > p { max-width:65ch;font:14px/1.65 var(--sans);color:#c5c1b7; } .chapter-intro__source-grid { display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin:35px 0;max-width:850px; } .chapter-intro__source-grid figure { margin:0;max-width:340px; } .chapter-intro__source-grid img { display:block;width:100%;height:auto;max-height:500px;object-fit:contain; } .chapter-intro__source-grid figcaption { color:#c5c1b7;font:12px/1.6 var(--sans);margin-top:14px; } .chapter-intro__title-block { position:relative;padding:9vw 7.2vw 11vw; } .chapter-intro__kicker { font:11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.15em;color:#bbb7ad;margin:0; } .chapter-intro__years { position:relative;height:57vw;margin-top:2vw;pointer-events:none; } .chapter-intro__year { position:absolute;top:0;left:-1vw;font:200 32vw/.9 'Helvetica Neue',Arial,sans-serif;letter-spacing:-.085em; } .chapter-intro__year:nth-child(2) { top:25vw;left:19vw; } .chapter-intro__year > span { display:block;color:#a58f61;background:linear-gradient(170deg,#c7b487 0%,#9c875e 32%,#3c362c 65%,#151515 92%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent; } body.story-edition .chapter-intro__heading { position:relative;z-index:1;margin:-8vw 0 0;font:300 8.5vw/.93 'Overture Serif',Georgia,'Songti TC',serif; letter-spacing:-.045em;text-transform:uppercase;color:#f4f1eb; } .chapter-intro__line { display:block;position:relative; } .chapter-intro__line + .chapter-intro__line { margin-top:1.4vw; } .chapter-intro__line:nth-child(2) { margin-left:14.4vw; } .chapter-intro__line > span { display:block; } .chapter-intro.is-animated .chapter-intro__line > span { opacity:.12;translate:0 50px;transition:opacity 1s ease,translate 1s cubic-bezier(.2,.65,.3,1); } .chapter-intro.is-animated.is-title-visible .chapter-intro__line > span { opacity:1;translate:0 0; } .chapter-intro.is-animated .chapter-intro__line:nth-child(2) > span { transition-delay:.1s; } .chapter-intro.is-animated .chapter-intro__line:nth-child(3) > span { transition-delay:.2s; } html[lang="zh-Hant"] .chapter-intro__lead { line-height:1.3;letter-spacing:.01em; } html[lang="zh-Hant"] .chapter-intro__copy p { line-height:1.65;letter-spacing:.02em; } html[lang="zh-Hant"] .chapter-intro__heading { font-family:'Songti TC','STSong','PMingLiU',serif;font-weight:300;line-height:1.12;letter-spacing:.06em; } /* Continue directly into the real family photograph before the 1949 story. */ #chapter-1 > .chapter-body > .timeline-age-note { margin-top:40px; } html.chapter-one-context-active .top,html.chapter-one-context-active .rail { background:#151515;color:#e8e3d7;border-color:#393732; } html.chapter-one-context-active .rail a,html.chapter-one-context-active .rail button,html.chapter-one-context-active .top button,html.chapter-one-context-active .top a,html.chapter-one-context-active .top summary { color:#e8e3d7; } html.chapter-one-context-active .picker-book { filter:invert(1); } html.chapter-one-context-active .seal { background:#151515; } @media(min-width:1440px) { body.story-edition .chapter-intro__copy p { font-size:1.4vw;line-height:1.32; } } @media(min-width:700px) and (max-width:991px) { body.story-edition .chapter-intro__copy p { font-size:16px;line-height:1.375; }.chapter-intro__copy{width:32vw;margin-left:16.7vw}.chapter-intro__context-content{min-height:125vw}.chapter-intro__image-note{margin-top:10vw} } @media(max-width:699px) { /* A half-screen beat after the dark overture wipe: present, but never a blank page. */ .chapter-intro__date { padding:64px 6.5vw 110px;min-height:50svh; } .chapter-intro__date > p { font-size:14px;letter-spacing:.17em;margin-top:0; } .chapter-intro__age { font-size:12px;margin-top:16px; } .chapter-intro__scroll { bottom:24px;font-size:12px; } .chapter-intro__scroll i { height:32px;margin-top:12px; } .chapter-intro__backdrop { display:none; } .chapter-intro__context-content { padding:13vw 6.5vw 12vw;min-height:0; } body.story-edition .chapter-intro__lead { width:auto;max-width:none;margin:0 0 14vw;font-size:7.4vw;line-height:1.12;text-indent:0;letter-spacing:-.01em; } .chapter-intro__copy { width:85%;margin-left:0; } .chapter-intro__body { display:block;margin:0; } .chapter-intro__body .chapter-intro__copy { width:100%; } .chapter-intro__media { padding-top:9vw; } .chapter-intro__map-scene { margin:15vw 0 0; } body.story-edition .chapter-intro__campaign-map { width:100%;transform:none!important; } body.story-edition .chapter-intro__campaign-map figcaption { font-size:13px; } body.story-edition .chapter-intro__campaign-map .archive-credit { font-size:12px; } .chapter-intro__loop-time { font-size:12px;text-align:right; } body.story-edition .chapter-intro__copy p { font-size:clamp(16px,4.55vw,24px);line-height:1.38;margin-bottom:1.6em; } body.story-edition .chapter-intro__photo { position:relative;top:auto;left:auto;width:100%;margin:16vw 0 0; } body.story-edition .chapter-intro__photo figcaption { font-size:13px; } body.story-edition .chapter-intro__photo .archive-credit { font-size:12px; } .chapter-intro__image-note { display:none; } .chapter-intro__sources { margin:0 6.5vw;padding:17px 0; } .chapter-intro__source-grid { gap:24px;grid-template-columns:1fr; } .chapter-intro__title-block { padding:16vw 6.5vw 22vw; } .chapter-intro__kicker { font-size:12px;letter-spacing:.06em; } .chapter-intro__years { height:99vw;margin-top:10vw; } .chapter-intro__year { font-size:47vw;top:0;left:-2vw; } .chapter-intro__year:nth-child(2) { top:42vw;left:6vw; } body.story-edition .chapter-intro__heading { font-size:10.8vw;line-height:1.02;margin-top:-8vw; } .chapter-intro__line:nth-child(2) { margin-left:8.5vw; } .chapter-intro__line + .chapter-intro__line { margin-top:2vw; } html[lang="zh-Hant"] .chapter-intro__lead { font-size:7.1vw;line-height:1.45; } html[lang="zh-Hant"] .chapter-intro__copy p { font-size:clamp(16px,4.55vw,24px);line-height:1.75; } } html[data-motion="off"] .chapter-intro__backdrop { position:absolute;top:0;margin:0;height:100%; } html[data-motion="off"] .chapter-intro__line > span { opacity:1;translate:none;transition:none; } html[data-motion="off"] .chapter-intro__campaign-map { transform:none!important; } @media(min-width:700px) and (max-width:991px) { .chapter-intro__body { grid-template-columns:32vw 32vw;gap:8vw;margin-left:16.7vw; } } @media(prefers-reduced-motion:reduce) { .chapter-intro * { transition:none!important;animation:none!important; }.chapter-intro__backdrop{position:absolute;top:0;margin:0;height:100%}.chapter-intro__line > span{opacity:1!important;translate:none!important} } @media(prefers-reduced-motion:reduce) { .chapter-intro__campaign-map { transform:none!important; } } @media print { .chapter-intro { margin:0!important;background:white;color:black;overflow:visible; } .chapter-intro__date { min-height:0;padding:10mm 0; } .chapter-intro__date > p,.chapter-intro__age { color:black; } .chapter-intro__scroll,.chapter-intro__backdrop,.chapter-intro__years,.chapter-intro__image-note { display:none; } .chapter-intro__context-content { min-height:0;padding:0; } .chapter-intro__body { display:block;margin:0; } .chapter-intro__media { padding:0; } .chapter-intro__map-scene { margin:8mm 0; } body.story-edition .chapter-intro__campaign-map { width:100%;max-width:150mm;transform:none!important; } .chapter-intro__loop-controls { display:none; } body.story-edition .chapter-intro__lead { font-size:20pt;line-height:1.3;width:auto;max-width:none;text-indent:0;margin:10mm 0; } .chapter-intro__copy { width:auto;margin:0; } body.story-edition .chapter-intro__copy p { color:black;font:11pt/1.5 serif; } body.story-edition .chapter-intro__photo { position:static;width:90mm;margin:10mm 0;transform:none!important;break-inside:avoid; } body.story-edition .chapter-intro__photo figcaption,body.story-edition .chapter-intro__photo .archive-credit,body.story-edition .chapter-intro__campaign-map figcaption,body.story-edition .chapter-intro__campaign-map .archive-credit { color:black; } .chapter-intro__title-block { padding:10mm 0; } .chapter-intro__kicker { color:black; } body.story-edition .chapter-intro__heading { font-size:32pt;color:black;margin:8mm 0; } .chapter-intro__line { transform:none!important; } .chapter-intro__line > span { opacity:1!important;translate:none!important; } } /* The existing root scroll-padding is 100px; land this full-screen scene below the actual rail header. */ #chapter-1 { scroll-margin-top:calc(var(--nav-height) - 100px); } .chapter-intro__source-grid .chapter-intro__road { grid-column:1 / -1;max-width:550px; } .chapter-intro__title-block { background:var(--chapter-black); } .chapter-intro__sources { padding-block:8px; } .chapter-intro__sources summary { min-height:44px;padding-block:12px; } /* The sound button already reports autoplay status; keep the live status available to assistive technology without covering the chapter's opening composition. */ html.chapter-one-context-active .audio-status { opacity:0!important;pointer-events:none!important; } /* ==== land-reform.css ==== */ /* Independent image and type planes follow the selected Sakharov interlude. */ .reform-history{--reform-red:#b7443d;--reform-light:#fff9ef;position:relative;isolation:isolate;margin:100px calc(-1 * var(--chapter-pad)) 85px;background:var(--reform-red);color:var(--reform-light);overflow:clip;scroll-margin-top:var(--nav-height)} .reform-history::before,.reform-history::after{content:"";position:absolute;left:0;width:100%;height:8.3vw;background:var(--paper);mask:url('art/history-torn-edge.svg') top/100% 100% no-repeat;pointer-events:none;z-index:4} .reform-history::before{top:-1px}.reform-history::after{bottom:-1px;transform:rotate(180deg)} .reform-history a{color:inherit;text-underline-offset:.2em}.reform-history a:hover{color:#fff}.reform-history :focus-visible{outline-color:#fff;outline-offset:5px} .reform-history [data-reform-layer]{transform:translate3d(var(--reform-shift-x,0px),var(--reform-shift-y,0px),0)} .reform-history__backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip;mix-blend-mode:multiply} .reform-history__backdrop-pin{position:absolute;top:12vw;right:-7%;width:114%} .reform-history__backdrop img{display:block;width:100%;height:auto;max-width:none;filter:grayscale(1);opacity:.85;mask-image:linear-gradient(#000 60%,transparent 98%)} .reform-history__inner{position:relative;z-index:1;width:82%;max-width:1390px;margin-inline:auto;padding:15vw 0 10vw} body.story-edition .reform-history .beat-date{color:var(--reform-light);font:400 12px/1.7 var(--sans);letter-spacing:.14em;margin:0 0 30px;max-width:none;text-transform:uppercase} body.story-edition .reform-history .reform-history__lead{font:400 clamp(36px,4.11vw,72px)/1.07 var(--sans);letter-spacing:-.025em;max-width:82%;text-indent:13.4vw;margin:0 0 60px;position:relative;z-index:2;color:var(--reform-light)} body.story-edition .reform-history :where(p){font:400 clamp(18px,1.6vw,24px)/1.4 var(--sans);text-wrap:pretty;color:var(--reform-light);max-width:none} body.story-edition .reform-history :where(p+p){margin-top:1.5em} body.story-edition .reform-history h4{font:400 clamp(27px,2.45vw,43px)/1.12 var(--sans);letter-spacing:-.025em;margin:0 0 24px;color:var(--reform-light)} .reform-history__opening{position:relative;min-height:290px} .reform-history__opening-copy{position:relative;z-index:2;width:31%;min-width:250px} body.story-edition .reform-history .reform-history__opening h4{font-size:clamp(23px,2vw,34px)} .reform-history__document-object{position:absolute;right:9%;top:25px;width:24%;max-width:320px;z-index:1} .reform-history__document-object img{display:block;width:100%;height:auto;transform:rotate(-7deg);box-shadow:0 12px 25px #441c1930} .reform-history__stat{position:relative;margin:3vw 0 8vw;padding:0} body.story-edition .reform-history .reform-history__stat-number{font:400 clamp(90px,17vw,280px)/.86 var(--serif);letter-spacing:-.065em;white-space:nowrap;margin:0 0 0 8%;max-width:none} body.story-edition .reform-history .reform-history__stat-label{font:400 clamp(25px,5.2vw,84px)/1.02 var(--sans);letter-spacing:-.04em;margin:22px 0 30px 12%;text-transform:uppercase;white-space:nowrap} body.story-edition .reform-history .reform-history__stat-note{max-width:39ch;margin:0 0 0 auto;font:400 clamp(17px,1.5vw,23px)/1.45 var(--sans)} .reform-history__struggle{display:grid;grid-template-columns:39% 34%;justify-content:space-between;align-items:center;gap:30px;margin:0 0 5vw} .reform-history__film{min-width:0;margin:0} body.story-edition .reform-history .reform-history__film-era{font:11px/1.6 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px} .reform-history__film picture{display:block;border-radius:2.5vw;overflow:hidden} .reform-history__film img{width:100%;height:auto;object-fit:contain;filter:none!important} body.story-edition .reform-history .reform-history__film figcaption{font:13px/1.55 var(--sans);color:var(--reform-light);margin-top:16px} body.story-edition .reform-history .reform-history__credit{font:11px/1.55 var(--sans);color:var(--reform-light);margin-top:10px} .reform-history .chapter-intro__loop-controls{gap:12px;flex-wrap:wrap;margin-top:12px} .reform-history .chapter-intro__loop-toggle{border-color:#fff9efb0;color:var(--reform-light)} .reform-history .chapter-intro__loop-time{color:var(--reform-light)} .reform-history .archive-zoom{font-size:12px;min-height:30px} .reform-history__film .archive-image:hover .archive-zoom{color:#fff} .reform-history__campaign{display:grid;grid-template-columns:35% 55%;justify-content:space-between;gap:5%;padding:40px 0 46px;border-top:1px solid #fff9ef60} .reform-history__campaign-body{max-width:53ch} body.story-edition .reform-history .reform-history__period{font:12px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:0 0 20px} .reform-history__family{display:grid;grid-template-columns:37% 55%;justify-content:space-between;gap:5%;padding:50px 0 55px} body.story-edition .reform-history .reform-history__family h4{font:400 clamp(36px,4.6vw,74px)/1.1 var(--serif);max-width:16ch;margin:0} .reform-history__family-copy{max-width:53ch} body.story-edition .reform-history .reform-history__image-note{font:12px/1.6 var(--sans);margin:10px 0 20px;max-width:80ch} .reform-history__sources{border-top:1px solid #fff9ef80;border-bottom:1px solid #fff9ef80;padding:14px 0} .reform-history__sources summary{font:16px/1.55 var(--sans);min-height:44px;padding:10px 0;cursor:pointer} .reform-history__sources ol{padding-left:24px;font:15px/1.65 var(--sans);max-width:82ch} .reform-history__sources li{margin:16px 0} .reform-history__sources .reform-document{max-width:510px;margin:38px auto 25px;box-shadow:none;color:#25241f} .reform-history__sources .reform-document a:hover,.reform-history__sources .reform-document .archive-image:hover .archive-zoom{color:#25241f} body.story-edition .reform-history .reform-history__sources .reform-document p,body.story-edition .reform-history .reform-history__sources .reform-document figcaption{color:#363730;font:15px/1.65 var(--sans)} .reform-history__source-photo{max-width:800px;margin:40px auto 20px}.reform-history__source-photo img{width:100%;height:auto} body.story-edition .reform-history .reform-history__source-photo figcaption{font:13px/1.6 var(--sans);margin-top:14px;color:var(--reform-light)} .water-horse-reading{padding:28px 0;margin-top:34px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} body.story-edition .water-horse-reading h4{font:400 29px/1.25 var(--serif);color:var(--red);margin-bottom:18px} body.story-edition .water-horse-reading p.water-horse-reading__sources{font:13px/1.65 var(--sans);margin-top:20px;color:var(--muted)} html[lang=zh-Hant] body.story-edition .reform-history :where(p){line-height:1.7} html[lang=zh-Hant] body.story-edition .reform-history .reform-history__lead{line-height:1.25;letter-spacing:0;text-indent:2em} html[lang=zh-Hant] body.story-edition .reform-history h4{line-height:1.35;letter-spacing:0} html[lang=zh-Hant] body.story-edition .reform-history .reform-history__stat-number{font-family:var(--serif);line-height:1} html[lang=zh-Hant] body.story-edition .reform-history .reform-history__stat-label{line-height:1.3} @media(max-width:1000px){.reform-history__opening-copy{width:37%}.reform-history__document-object{right:5%;width:27%}.reform-history__struggle{grid-template-columns:44% 41%;gap:20px}.reform-history__campaign{grid-template-columns:37% 55%}} @media(max-width:799px){ .reform-history{margin-block:70px 60px}.reform-history__inner{width:87%;padding:27vw 0 23vw} .reform-history__backdrop-pin{position:sticky;top:0;width:100%;height:100svh;right:auto} .reform-history__backdrop img{width:100%;height:100%;object-fit:cover;object-position:57% center;opacity:.62;mask-image:none} body.story-edition .reform-history .beat-date{font-size:12px;letter-spacing:.1em;margin-bottom:28px} body.story-edition .reform-history .reform-history__lead{max-width:100%;font-size:clamp(29px,8vw,55px);line-height:1.1;text-indent:12vw;margin-bottom:35px} .reform-history__opening{min-height:0}.reform-history__opening-copy{width:100%;min-width:0} .reform-history__document-object{position:relative;top:0;right:auto;width:38%;max-width:190px;margin:12px 7% 20px auto} body.story-edition .reform-history :where(p){font-size:18px;line-height:1.5}.reform-history__stat{margin:38px 0 50px;padding:0} body.story-edition .reform-history .reform-history__stat-number{font-size:28vw;margin-left:20vw} body.story-edition .reform-history .reform-history__stat-label{font-size:6.7vw;letter-spacing:-.04em;margin:16px 0 22px} body.story-edition .reform-history .reform-history__stat-note{font-size:16px;max-width:30ch} .reform-history__struggle{display:flex;flex-direction:column;align-items:stretch;gap:28px;margin-bottom:40px} .reform-history__struggle-copy{order:-1}.reform-history__film{width:100%;max-width:480px;margin-inline:auto}.reform-history__film picture{border-radius:24px} /* 12 px floor for phone credits and small labels (story-paintings.css sets the struggle credit at 11 px with four class selectors). */ body.story-edition .reform-history .reform-history__film-era,body.story-edition .reform-history .reform-history__credit,body.story-edition .reform-history .famine-history__photo figcaption,body.story-edition .reform-history .reform-history__struggle .reform-history__struggle-photo .reform-history__credit{font-size:12px} .reform-history__campaign{display:block;padding:30px 0 32px}.reform-history__campaign-body{max-width:none} body.story-edition .reform-history h4{font-size:28px}.reform-history__campaign h4{margin-bottom:22px!important} .reform-history__family{display:block;padding:35px 0 35px}.reform-history__family-copy{margin:0;max-width:none} body.story-edition .reform-history .reform-history__family h4{font-size:38px;margin-bottom:25px}.reform-history__sources summary{font-size:15px} .reform-history__sources ol{font-size:14px}.reform-history__sources .reform-document{padding:14px} html[data-motion=off] .reform-history__backdrop-pin{position:absolute} } /* The Great Famine page reuses the torn red sequence; its photographs float as separate planes on alternating sides. */ .famine-history .reform-history__opening{min-height:clamp(360px,38vw,580px)} .famine-history .reform-history__opening-copy{width:38%} .famine-history .reform-history__stat{margin-top:4vw} .famine-history .reform-history__family{border-top:1px solid #fff9ef60} body.story-edition .reform-history .famine-history__credit{font:13px/1.6 var(--sans);margin-top:18px} body.story-edition .reform-history .famine-history__warning{font:12px/1.6 var(--sans);letter-spacing:.06em;margin:-14px 0 34px} .famine-history__photo{position:relative;z-index:1;margin:0} .famine-history__photo img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.06);transform:rotate(var(--photo-tilt,0deg));box-shadow:0 16px 32px #441c1945} body.story-edition .reform-history .famine-history__photo figcaption{font:11px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--reform-light);margin-top:16px} .famine-history__photo--child{position:absolute;top:10px;right:7%;width:27%;max-width:360px;--photo-tilt:-4deg} .famine-history__photos{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;align-items:start;margin:0 0 8vw} .famine-history__photo--crowd{grid-column:1 / 8;--photo-tilt:1.5deg} .famine-history__photo--victim{grid-column:6 / 13;grid-row:1;margin-top:8vw;--photo-tilt:-2.5deg} .famine-history__photo--remains{grid-column:1 / 6;grid-row:1;margin-top:16vw;--photo-tilt:3deg} html[lang=zh-Hant] body.story-edition .famine-history .reform-history__stat-number{font-size:clamp(64px,11vw,190px)} @media(max-width:1000px){.famine-history .reform-history__opening-copy{width:44%}.famine-history__photo--child{right:2%;width:33%}} @media(max-width:799px){ .famine-history .reform-history__opening{min-height:0}.famine-history .reform-history__opening-copy{width:100%} .famine-history__photo--child{position:relative;top:0;right:auto;width:62%;max-width:300px;margin:30px 8% 44px auto} .famine-history__photos{display:block;margin:10px 0 50px} .famine-history__photo--crowd{width:92%} .famine-history__photo--victim{width:88%;margin:0 0 0 auto} .famine-history__photo--remains{width:70%;margin-top:40px} body.story-edition .famine-history .reform-history__stat-number{font-size:22vw;margin-left:18vw} html[lang=zh-Hant] body.story-edition .famine-history .reform-history__stat-number{font-size:13vw;margin-left:14vw} } /* Chapter 2 uses Mao's 1950 portrait; Chapter 4 carries the Cultural Revolution page. */ @media(min-width:800px){.reform-history__backdrop--portrait .reform-history__backdrop-pin{top:4vw;right:-5%;width:46%}} .reform-history__backdrop--portrait img{opacity:.6;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 58% 40%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 58% 40%,#000 52%,transparent 100%)} .reform-history__struggle--text{grid-template-columns:minmax(0,48%);justify-content:end} .revolution-history{--reform-red:#a9372f} body.story-edition .reform-history .revolution-history__slogan{position:relative;z-index:2;width:max-content;max-width:none;margin:1vw 0 7vw -4%;font:400 clamp(48px,8.5vw,150px)/1 var(--serif);letter-spacing:-.02em;white-space:nowrap;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px #fff9efc2} body.story-edition .reform-history .revolution-history__slogan span{color:var(--reform-light);-webkit-text-stroke:0} body.story-edition .revolution-history .reform-history__stat-label{font-size:clamp(24px,4vw,66px)} @media(max-width:799px){ .reform-history__backdrop--portrait img{object-position:50% 18%;opacity:.5} .reform-history__struggle--text{display:block} body.story-edition .revolution-history .reform-history__stat-label{white-space:normal;font-size:9vw} body.story-edition .reform-history .revolution-history__slogan{font-size:15vw;margin-bottom:50px} } /* The marquee's repeated phrase is only there to fill a wide screen. */ .slogan-repeat{font-weight:inherit} @media(max-width:699px){ /* Phones: the band wraps inside the viewport like the other slogan bands, without its repeat or its drift. */ body.story-edition .reform-history .revolution-history__slogan{width:auto;margin:1vw 0 50px;font-size:8.5vw;line-height:1.1;white-space:normal;transform:none} body.story-edition .reform-history .revolution-history__slogan span{white-space:nowrap} /* The Chinese reading rule for paragraphs in this section (line-height 1.7) would otherwise spread the wrapped band. */ html[lang=zh-Hant] body.story-edition .reform-history .revolution-history__slogan{line-height:1.1} .slogan-repeat{display:none} } @media print{.revolution-history__slogan{display:none!important}} @media print{ .famine-history .reform-history__opening{min-height:0}.famine-history .reform-history__opening-copy{width:100%}.famine-history .reform-history__stat-number{margin-left:0!important} .famine-history__photo--child{position:relative;top:auto;right:auto}.famine-history__photos{display:block}.famine-history__photo{max-width:80mm;margin:6mm 0}.famine-history__photo img{box-shadow:none;transform:none} } html[data-motion=off] .reform-history [data-reform-layer]{transform:none!important} @media(prefers-reduced-motion:reduce){.reform-history [data-reform-layer]{transform:none!important}.reform-history__backdrop-pin{position:absolute}} @media print{ .reform-history{background:none;color:#000;overflow:visible;margin:20mm 0;width:auto}.reform-history::before,.reform-history::after,.reform-history__backdrop,.reform-history__document-object{display:none}.reform-history__inner{width:100%;padding:0} .reform-history [data-reform-layer]{transform:none!important} body.story-edition .reform-history p,body.story-edition .reform-history h3,body.story-edition .reform-history h4,body.story-edition .reform-history figcaption,body.story-edition .reform-history .beat-date{color:#000!important} .reform-history__opening,.reform-history__struggle,.reform-history__campaign,.reform-history__family{display:block;min-height:0}.reform-history__opening-copy{width:100%} .reform-history__lead{font-size:24pt!important;max-width:100%!important;text-indent:0!important;margin:10mm 0!important}.reform-history__stat-number{font-size:50pt!important}.reform-history__stat-label{font-size:22pt!important} .reform-history__film{max-width:90mm}.reform-history .chapter-intro__loop-controls{display:none}.reform-history__family-copy{margin:0}.reform-history__stat-note{margin:0!important} } /* ==== scrapbook.css ==== */ /* Scrapbook devices: a non-pinned card strip and taped handwriting notes. */ .scrapbook-strip{position:relative;margin:80px 0 90px;scroll-margin-top:var(--nav-height)} .scrapbook-strip__heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 30px;margin:0 0 30px} body.story-edition .scrapbook-strip__heading .beat-date{flex-basis:100%;margin:0} body.story-edition .scrapbook-strip__heading h3{margin:0;max-width:17ch;font:400 clamp(32px,3.6vw,50px)/1.12 var(--serif);letter-spacing:-.015em;text-wrap:balance} html[lang=zh-Hant] body.story-edition .scrapbook-strip__heading h3{max-width:none;font-family:var(--brush,var(--serif));letter-spacing:.02em;line-height:1.35} .scrapbook-strip__controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font:14px/1.4 var(--sans)} .scrapbook-strip__button{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font:20px/1 var(--sans);cursor:pointer} .scrapbook-strip__button:disabled{opacity:.28;cursor:default} .scrapbook-strip__count{min-width:48px;text-align:center;font-variant-numeric:tabular-nums} .scrapbook-strip__skip{margin-left:10px;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px} .scrapbook-strip__viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 26px;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)} .scrapbook-strip__viewport.is-at-end{-webkit-mask-image:none;mask-image:none} .scrapbook-strip__viewport::-webkit-scrollbar{display:none} .scrapbook-strip__viewport.is-dragging{cursor:grabbing;scroll-snap-type:none} .scrapbook-strip__viewport:focus-visible{outline:2px solid var(--red);outline-offset:6px} .scrapbook-strip__track{display:flex;margin:0;padding:0;list-style:none} .scrapbook-card{position:relative;flex:0 0 clamp(270px,32%,350px);scroll-snap-align:start;margin:0;padding:10px 34px 12px;border-left:1px solid var(--rule)} .scrapbook-card:first-child{padding-left:0;border-left:0} .scrapbook-card__label{display:inline-block;margin:0 0 26px;padding:7px 13px 6px;border:2px solid var(--red);color:var(--red);font:400 22px/1 var(--brush,var(--serif));letter-spacing:.08em;transform:rotate(-3deg);user-select:none} .scrapbook-card:nth-child(even) .scrapbook-card__label{transform:rotate(2deg)} body.story-edition .scrapbook-card p.scrapbook-card__who{font:12px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px} body.story-edition .scrapbook-card h4{font:400 clamp(26px,2.3vw,34px)/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 16px} body.story-edition .scrapbook-card p{font-size:17px;line-height:1.62;margin:0;max-width:none} body.story-edition .scrapbook-card p.scrapbook-card__source{font:12px/1.5 var(--sans);color:var(--muted);margin-top:18px} body.story-edition .scrapbook-strip__hint{font:13px/1.5 var(--sans);color:var(--muted);margin:0} html[lang=zh-Hant] body.story-edition .scrapbook-card h4{font-family:var(--brush,var(--serif));letter-spacing:.02em;line-height:1.35} html[lang=zh-Hant] body.story-edition .scrapbook-card p{line-height:1.85} .handwriting-note{position:relative;margin:70px 0 80px;max-width:760px} .handwriting-note__paper{position:relative;padding:clamp(22px,4vw,50px);background:#f6f0e2;box-shadow:0 18px 40px #2b2a261c;transform:rotate(-1.2deg)} .handwriting-note__paper::before{content:"";position:absolute;top:-13px;left:12%;width:clamp(70px,14%,112px);height:28px;background:#e6d9bccc;transform:rotate(-4deg)} .handwriting-note__paper::after{content:"";position:absolute;right:9%;bottom:-12px;width:clamp(60px,11%,90px);height:26px;background:#e6d9bcb3;transform:rotate(5deg)} .handwriting-note img{display:block;width:100%;height:auto} body.story-edition .handwriting-note figcaption{font:15px/1.65 var(--sans);color:#50544a;margin-top:26px;max-width:62ch;text-wrap:pretty} @media(max-width:700px){ .scrapbook-strip{margin:60px 0 70px} .scrapbook-card{flex-basis:80%;padding:8px 22px 10px} .scrapbook-strip__skip{flex-basis:100%;margin:2px 0 0} .handwriting-note{margin:50px 0 60px} .handwriting-note__paper{transform:rotate(-.8deg)} } @media(prefers-reduced-motion:reduce){.scrapbook-strip__viewport{scroll-behavior:auto}} @media print{ .scrapbook-strip__controls,.scrapbook-strip__hint,.handwriting-note__paper::before,.handwriting-note__paper::after{display:none} .scrapbook-strip__viewport{overflow:visible;-webkit-mask-image:none;mask-image:none} .scrapbook-strip__track{display:block} .scrapbook-card{padding:14px 0;border:0;break-inside:avoid} .handwriting-note__paper{transform:none;box-shadow:none} } /* ==== chapter-transitions.css ==== */ /* Chapter openings in the Sakharov sequence: a pinned title screen, then history on a dark ground, then David's life. Everything stays readable without JS. */ /* ---- Title screen ---------------------------------------------------------- */ [data-chapter-transition] > .chapter-transition__stage { position: static; } .era-opening--history-next { margin-bottom: 0 !important; } @media screen and (min-width: 700px) { html.chapter-transitions-on [data-chapter-transition] { height: var(--transition-length, 230svh); padding: 0 !important; margin-bottom: 0 !important; overflow: visible; } html.chapter-transitions-on [data-chapter-transition] > .chapter-transition__stage { position: sticky; top: var(--nav-height); height: calc(100svh - var(--nav-height)); overflow: clip; isolation: isolate; } /* Era openings: the years fill the screen; the title rises over the second year. */ html.chapter-transitions-on .era-opening[data-chapter-transition]:after { display: none; } html.chapter-transitions-on .era-opening--history-next[data-chapter-transition] { background: #151515; } html.chapter-transitions-on .era-opening[data-chapter-transition] .era-kicker { top: 22px; } html.chapter-transitions-on .era-opening[data-chapter-transition] .era-dates { position: absolute; inset: 0; pointer-events: none; translate: 0 calc(var(--transition-progress, 0) * -9svh); } html.chapter-transitions-on .era-opening[data-chapter-transition] .era-year { top: 5.5svh; left: 3vw; font-size: min(31vw, 58svh); } html.chapter-transitions-on .era-opening[data-chapter-transition] .era-year.end { top: auto; bottom: -6svh; left: 21vw; } html.chapter-transitions-on .era-opening[data-chapter-transition] .era-heading { position: absolute !important; left: 5vw; right: 5vw; bottom: 9svh; font-size: min(8.5vw, 13svh) !important; } html.chapter-transitions-on .era-opening[data-chapter-transition] .era-epigraph { position: absolute; right: 5vw; top: 16svh; margin: 0 !important; text-align: right; } /* Chapter 1's title block uses the same stage with its own gold numerals. */ html.chapter-transitions-on .chapter-intro__title-block[data-chapter-transition] .chapter-transition__stage { padding: 22px 7.2vw 0; } html.chapter-transitions-on .chapter-intro__title-block[data-chapter-transition] .chapter-intro__years { position: absolute; inset: 0; height: auto; margin: 0; translate: 0 calc(var(--transition-progress, 0) * -9svh); } html.chapter-transitions-on .chapter-intro__title-block[data-chapter-transition] .chapter-intro__year { top: 6svh; left: 2vw; font-size: min(32vw, 60svh); } html.chapter-transitions-on .chapter-intro__title-block[data-chapter-transition] .chapter-intro__year:nth-child(2) { top: auto; bottom: -8svh; left: 20vw; } html.chapter-transitions-on .chapter-intro__title-block[data-chapter-transition] .chapter-intro__heading { position: absolute; left: 7.2vw; right: 7.2vw; bottom: 9svh; margin: 0; font-size: min(8.5vw, 13svh); } /* Lines arrive one by one as the reader scrolls, and leave again in reverse. */ html.chapter-transitions-on [data-chapter-transition].is-transition-active [data-transition-line] { opacity: 0; translate: 0 7svh; transition: opacity .75s ease, translate .9s cubic-bezier(.2, .65, .3, 1); } html.chapter-transitions-on [data-chapter-transition].is-transition-active [data-transition-line].is-line-in { opacity: 1; translate: 0 0; } } /* ---- History on a dark ground --------------------------------------------- */ .chapter-intro--history { scroll-margin-top: var(--nav-height); } .chapter-intro--history .chapter-intro__context-content { min-height: 0; padding: 9vw 0 8vw; } body.story-edition .chapter-intro--history .chapter-intro__lead { margin-bottom: 7vw; } .chapter-intro--history .chapter-intro__sources { margin-bottom: 0; } .chapter-intro--history .chapter-intro__image-note { margin-top: 5vw; } .chapter-intro--history .chapter-intro__sources ol { max-width: 82ch; padding-left: 22px; font: 14px/1.65 var(--sans); color: #c5c1b7; } .chapter-intro--history .chapter-intro__sources li { margin: 12px 0; } .chapter-intro--history .chapter-intro__source-grid figure { max-width: 340px; } /* A torn page directly after a dark history section tears from the dark. */ .chapter-intro--history + .reform-history { margin-top: 0; } .chapter-intro--history + .reform-history::before { background: #151515; } .history-slogan-scene { position: relative; margin: 0 0 7vw; } body.story-edition .history-slogan { width: max-content; max-width: none; margin: 0 0 0 7.2vw; font: 400 clamp(46px, 7.8vw, 140px)/1.02 var(--serif); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px #f3f0e9a6; } body.story-edition .history-slogan span { color: #f3f0e9; -webkit-text-stroke: 0; } body.story-edition .history-slogan + .history-slogan { margin-left: -12vw; } /* ---- Overlapping photographs with an oval caption ------------------------- */ .photo-collage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; margin: 0 7.2vw 6vw; } .photo-collage__item { margin: 0; min-width: 0; position: relative; } .photo-collage__item img { display: block; width: 100%; height: auto; } .photo-collage__back { grid-column: 1 / 6; grid-row: 1; z-index: 1; margin-top: 3vw; } .photo-collage__front { grid-column: 5 / 12; grid-row: 1; z-index: 2; margin-top: 12vw; } .photo-collage__oval { grid-column: 9 / 13; grid-row: 1; align-self: start; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; width: min(100%, 25vw); aspect-ratio: 2 / 1.02; margin: 4vw 0 0; padding: 2vw; border: 1px solid currentColor; border-radius: 50%; } body.story-edition .photo-collage__oval p { margin: 0; font: 400 clamp(13px, 1.05vw, 17px)/1.45 var(--sans); color: inherit; text-wrap: balance; } /* A soft fill keeps the caption legible where the oval crosses a photograph. */ .photo-collage--dark .photo-collage__oval { background: #151515d9; } .photo-collage--paper .photo-collage__oval { background: #f4efe3e0; } body.story-edition .photo-collage__item figcaption { font: 12px/1.55 var(--sans); margin: 12px 0 0; max-width: 42ch; } body.story-edition .photo-collage__item .archive-credit { font: 10px/1.5 var(--sans); margin: 6px 0 0; } .photo-collage--dark { color: #f3f0e9; } body.story-edition .photo-collage--dark figcaption { color: #e0ded7; } body.story-edition .photo-collage--dark .archive-credit { color: #aaa79f; } .photo-collage--dark .photo-collage__back img { filter: grayscale(1) contrast(1.05); opacity: .85; } .photo-collage--paper { color: var(--ink); } body.story-edition .photo-collage--paper figcaption { color: var(--muted); } .photo-collage .xiamen-print { box-shadow: 0 18px 38px #24272126; } .photo-collage .photo-collage__front .xiamen-print { transform: rotate(-2.5deg); } .photo-collage .photo-collage__back .xiamen-print { transform: rotate(2deg); } /* Chapter 2: the family photograph over Mao's 1950 portrait. */ .photo-collage--family .photo-collage__back { grid-column: 1 / 5; } .photo-collage--family .photo-collage__front { grid-column: 5 / 11; margin-top: 9vw; } .photo-collage--family .childhood-family-photo { max-width: none; margin: 9vw 0 0; justify-self: stretch; } body.story-edition .photo-collage--family .childhood-family-photo figcaption { color: #e0ded7; } .photo-collage--family .childhood-family-photo__name { background: #151515; color: #f3f0e9; } .photo-collage--family .childhood-family-photo__mark { border-color: #f3f0e9; } .photo-collage--family .childhood-family-photo__mark::after { background: #f3f0e9; } /* Chapter 3: two Xiamen prints. */ .xiamen-spread--collage { display: block; } .photo-collage--xiamen { margin: 50px 0 70px; max-width: 900px; } .photo-collage--xiamen .photo-collage__back { grid-column: 2 / 7; margin-top: 0; } .photo-collage--xiamen .photo-collage__front { grid-column: 6 / 12; margin-top: 150px; } .photo-collage--xiamen .photo-collage__oval { grid-column: 8 / 13; width: min(100%, 280px); margin: 60px 0 0 30px; } .photo-collage--xiamen .xiamen-photo { width: 100%; max-width: none; justify-self: stretch; } @media (max-width: 699px) { .photo-collage { display: block; margin: 0 6.5vw 14vw; } .photo-collage__back { width: 70%; margin: 0; } .photo-collage__front { width: 78%; margin: -14vw 0 0 auto; } .photo-collage__oval { width: 66vw; margin: 18px auto 0 0; padding: 7vw; position: relative; } .photo-collage--family .childhood-family-photo { margin-top: -10vw; } .photo-collage--xiamen { margin: 36px 0 56px; } /* Phones: each bilingual pair wraps inside the viewport instead of running off it; the Chinese phrase never breaks between characters. Decorative (aria-hidden). */ body.story-edition .history-slogan { width: auto; max-width: none; margin: 0 6.5vw; font-size: 8.5vw; line-height: 1.1; white-space: normal; } body.story-edition .history-slogan + .history-slogan { margin: .35em 6.5vw 0; } body.story-edition .history-slogan span { white-space: nowrap; } body.story-edition .photo-collage__item .archive-credit { font-size: 12px; } .chapter-intro--history .chapter-intro__context-content { padding: 14vw 0 12vw; } } @media (min-width: 700px) and (max-width: 991px) { .photo-collage__oval { width: min(100%, 34vw); } } @media print { [data-chapter-transition] { height: auto !important; } [data-chapter-transition] > .chapter-transition__stage { position: static !important; height: auto !important; } [data-transition-line] { opacity: 1 !important; translate: none !important; } .history-slogan-scene { display: none; } .photo-collage { display: block; margin: 8mm 0; color: black; } .photo-collage__item { width: 90mm; margin: 5mm 0; transform: none !important; break-inside: avoid; } .photo-collage__oval { border: 0; width: auto; aspect-ratio: auto; padding: 0; margin: 3mm 0; transform: none !important; } } @media (prefers-reduced-motion: reduce) { [data-transition-line] { opacity: 1 !important; translate: none !important; transition: none !important; } } /* Chapter 2: his mother's 1974 photograph beside the 1953 prayer. */ .photo-collage--mother { margin: 44px 0 64px; max-width: 760px; } .photo-collage--mother .photo-collage__front { grid-column: 2 / 8; margin-top: 0; } .photo-collage--mother .photo-collage__oval { grid-column: 7 / 12; width: min(100%, 250px); margin: 150px 0 0; } .collage-print { display: block; padding: 9px; background: #f9f5ec; border: 1px solid #d3ccbd; box-shadow: 0 18px 38px #24272126; transform: rotate(-2deg); } body.story-edition .collage-print img { display: block; width: 100%; height: auto; max-height: none; } .collage-print:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; } body.story-edition .photo-collage--mother figcaption { color: var(--muted); font: 14px/1.6 var(--sans); margin-top: 16px; max-width: 40ch; } @media (max-width: 699px) { .photo-collage--mother .photo-collage__front { width: 80%; margin: 0; } } @media print { .collage-print { transform: none; box-shadow: none; } } /* Chapter 3: China in 1959 (Fortepan). Chapter 4: Kowloon in 1955 (U.S. government). */ .photo-collage--china-1959 .photo-collage__back { grid-column: 1 / 9; margin-top: 0; } .photo-collage--china-1959 .photo-collage__front { grid-column: 8 / 12; margin-top: 16vw; } .photo-collage--china-1959 .photo-collage__oval { grid-column: 1 / 5; margin: 2vw 0 0 2vw; } .photo-collage--china-1959 .photo-collage__back img { opacity: .92; } .photo-collage--kowloon .photo-collage__front { grid-column: 3 / 9; margin-top: 0; } .photo-collage--kowloon .photo-collage__oval { grid-column: 8 / 12; margin: 6vw 0 0; } @media (max-width: 699px) { /* On a phone the photographs stack; none may cover another's caption. */ .photo-collage .photo-collage__front { margin-top: 18px; } .photo-collage--kowloon .photo-collage__front, .photo-collage--china-1959 .photo-collage__back { width: 100%; } /* The desktop 2vw offset is 8 px on a phone, which butts the oval against the credit above it. */ .photo-collage--china-1959 .photo-collage__oval { margin: 18px auto 0 0; } } /* Captions stay clear of overlapping prints; the 1959 oval sits in the dark beside the child. */ @media (min-width: 700px) { body.story-edition .photo-collage--xiamen .photo-collage__back figcaption { max-width: 68%; } .photo-collage--china-1959 .photo-collage__oval { grid-column: 5 / 9; margin: 44vw 0 0; } } @media (min-width: 700px) and (max-width: 991px) { /* Narrower tablets wrap the field caption onto more lines; keep the oval below it. */ .photo-collage--china-1959 .photo-collage__oval { grid-column: 1 / 5; margin: 50vw 0 0; } } /* ---- Dark chrome while a dark chapter screen sits under the navigation ---- */ html.chapter-dark-active .top, html.chapter-dark-active .rail { background: #151515; color: #e8e3d7; border-color: #393732; } html.chapter-dark-active .rail a, html.chapter-dark-active .rail button, html.chapter-dark-active .top button, html.chapter-dark-active .top a, html.chapter-dark-active .top summary { color: #e8e3d7; } html.chapter-dark-active .picker-book { filter: invert(1); } html.chapter-dark-active .seal { background: #151515; } /* Concealed without resizing, so revealing it again is not a layout shift (see motion.css). */ html.chapter-dark-active .audio-status { opacity: 0 !important; pointer-events: none !important; } /* ==== story-paintings.css ==== */ /* Artistic interpretations made for the story (AI-generated and captioned as such), the 1966 church collage, and David's handwritten Psalm 67. */ .story-painting { position: relative; margin: 52px 0 64px; } .story-painting picture, .story-painting img { display: block; width: 100%; height: auto; } body.story-edition .story-painting img { max-height: none; object-fit: contain; } .story-painting__frame { display: block; padding: 10px; background: #f9f5ec; border: 1px solid #d3ccbd; box-shadow: 0 18px 38px #24272122; } .story-painting--wide { max-width: 1100px; } .story-painting--strip { max-width: 1000px; } .story-painting--bench { max-width: 860px; } .story-painting--square { max-width: 560px; } .story-painting--portrait { max-width: 500px; } body.story-edition .story-painting figcaption { font: 14px/1.65 var(--sans); color: var(--muted); margin-top: 14px; max-width: 72ch; text-wrap: pretty; } body.story-edition .story-painting .story-painting__title { color: var(--ink); font-weight: 600; } body.story-edition .story-painting p.story-painting__credit { font: 11px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; max-width: none; } .story-painting .chapter-intro__loop-controls { justify-content: flex-start; gap: 14px; margin-top: 10px; } .story-painting .chapter-intro__loop-toggle { color: var(--ink); border-color: #9a968c; background: transparent; } .story-painting .chapter-intro__loop-toggle:hover { border-color: var(--ink); } .story-painting .chapter-intro__loop-toggle:focus-visible { outline-color: var(--red); } .story-painting .chapter-intro__loop-toggle:disabled { color: var(--muted); } /* Chapter 1: the family on the road beside his birth. */ body.story-edition .birth-layout--painting { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 68px); row-gap: 24px; } body.story-edition .birth-layout--painting > .birth-title { grid-column: 1; grid-row: 1; margin-bottom: 0; } body.story-edition .birth-layout--painting > .story-copy { grid-column: 1; grid-row: 2; min-width: 0; } body.story-edition .birth-layout--painting > .story-painting { grid-column: 2; grid-row: 1 / span 2; margin: 12px 0 0; justify-self: center; width: 100%; } /* Chapter 4: the painting of his vow over a photograph of an attacked church. */ .photo-collage--church { margin: 64px 0 84px; max-width: 1000px; } .photo-collage--church .photo-collage__back { grid-column: 1 / 8; margin-top: 0; } .photo-collage--church .photo-collage__back img { filter: grayscale(1) contrast(1.04); } .photo-collage--church .photo-collage__front.story-painting { grid-column: 7 / 12; margin: 110px 0 0; max-width: none; } body.story-edition .photo-collage--church .photo-collage__back figcaption, body.story-edition .photo-collage--church .photo-collage__back .archive-credit { max-width: 78%; } /* Below the photograph's credit and left of the painting; the margin tracks the photograph's height. */ .photo-collage--church .photo-collage__oval { grid-column: 1 / 7; justify-self: end; width: min(100%, 290px); margin: calc(77% + 190px) 0 0; } .handwriting-note--psalm { max-width: 400px; margin: 60px 0 84px 4%; } /* Chapter 1: his own ink painting beside the Water Horse reading. */ body.story-edition .birth-layout--horse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); column-gap: clamp(28px, 5vw, 68px); row-gap: 24px; align-items: start; margin-top: 8px; } body.story-edition .birth-layout--horse > .story-copy { grid-column: 1; min-width: 0; } body.story-edition .birth-layout--horse > .story-painting { grid-column: 2; margin: 34px 0 0; width: 100%; } .story-painting--ink { max-width: 520px; } .story-painting--ink .story-painting__frame { background: #fbf8f1; } body.story-edition .story-painting .archive-zoom { font: 12px/1.4 var(--sans); } /* Chapter 2: the family photograph now stands alone in its collage. */ .photo-collage--solo .photo-collage__front { grid-column: 3 / 11; margin-top: 3vw; } .photo-collage--solo .photo-collage__oval { grid-column: 1 / 5; margin: 34vw 0 0; } /* Land Reform: the struggle-session photograph beside "Accused before the village". */ .reform-history .reform-history__struggle--text { grid-template-columns: 39% 34%; justify-content: space-between; } .reform-history__struggle-photo { margin: 0; } .reform-history__struggle-photo img { width: 100%; height: auto; filter: grayscale(1) contrast(1.05); } body.story-edition .reform-history .reform-history__struggle-photo figcaption { font: 13px/1.6 var(--sans); margin-top: 12px; color: var(--reform-light); } body.story-edition .reform-history .reform-history__struggle-photo .reform-history__credit { font: 11px/1.5 var(--sans); margin-top: 6px; } @media (max-width: 991px) { .photo-collage--solo .photo-collage__oval { grid-column: 1 / 6; margin-top: 46vw; } } /* Chapter 6: graduation day, 1975 — the family photograph above his certificate. */ .graduation-sheets { display: grid; gap: clamp(20px, 3vw, 34px); min-width: 0; } .graduation-group { margin: 0; min-width: 0; background: #f9f5ec; padding: clamp(14px, 2vw, 24px); border: 1px solid #d3ccbd; box-shadow: 0 16px 40px #24272118; } .graduation-group img { display: block; width: 100%; height: auto; } .graduation-group .archive-image { position: relative; display: block; } body.story-edition .graduation-group figcaption { font: 14px/1.7 var(--sans); color: var(--muted); margin-top: 14px; text-wrap: pretty; } body.story-edition .graduation-group figcaption strong { font-weight: 500; color: var(--ink); } body.story-edition .graduation-group .archive-credit { font: 11px/1.55 var(--sans); color: var(--muted); margin-top: 8px; } @media print { .graduation-sheets { display: block; } .graduation-group { break-inside: avoid; max-width: 120mm; box-shadow: none; margin-bottom: 8mm; } } @media (max-width: 800px) { body.story-edition .birth-layout--horse { grid-template-columns: minmax(0, 1fr); } body.story-edition .birth-layout--horse > .story-painting { grid-column: 1; max-width: 420px; margin-top: 8px; } } @media (max-width: 699px) { .photo-collage--solo .photo-collage__front { width: 100%; margin: 0; } .photo-collage--solo .photo-collage__oval { margin: 18px auto 0 0; } } @media (max-width: 800px) { body.story-edition .birth-layout--painting { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 24px; } body.story-edition .birth-layout--painting > .birth-title, body.story-edition .birth-layout--painting > .story-copy, body.story-edition .birth-layout--painting > .story-painting { grid-column: 1; grid-row: auto; } body.story-edition .birth-layout--painting > .story-painting { max-width: 420px; } } @media (max-width: 699px) { .story-painting { margin: 36px 0 44px; } .photo-collage--church .photo-collage__back { width: 100%; } .photo-collage--church .photo-collage__front.story-painting { width: 86%; margin: 18px 0 0 auto; } .photo-collage--church .photo-collage__oval { margin: 18px auto 0 0; } .handwriting-note--psalm { max-width: 300px; margin: 40px auto 56px; } } @media print { .story-painting { break-inside: avoid; max-width: 120mm; } .story-painting .chapter-intro__loop-controls { display: none; } .story-painting__frame { box-shadow: none; } } /* Round 3e: 12px phone floor for the graduation group credit, matching the other photo credits. */ @media(max-width:699px){body.story-edition .graduation-group .archive-credit,body.story-edition .story-painting p.story-painting__credit{font-size:12px}} /* The credit may wrap on a narrow phone, but after the middle dot, never inside the hyphenated word. */ .story-painting__credit .credit-word{white-space:nowrap} /* ==== chapter-two.css ==== */ /* Chapter II: oversized dates, sliding type and a layered historical opening. Native scrolling and visible HTML remain the baseline. */ #chapter-2 { scroll-margin-top:calc(var(--nav-height) - 100px); } .freedom-opening { --freedom-black:#141a1c; position:relative;isolation:isolate;overflow:clip; margin-inline:calc(-1 * var(--chapter-pad)); background:var(--freedom-black);color:#f3f0e8; } .freedom-opening a { color:inherit;text-underline-offset:.2em; } .freedom-opening__title-block { position:relative;padding:35px 7.2vw 9vw; } .freedom-opening__kicker { display:flex;justify-content:space-between;gap:20px;font:11px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:#b0babb; } .freedom-opening__kicker .era-age { font-size:11px; } .freedom-opening__years { position:relative;height:48vw;margin:3vw 0 0;pointer-events:none; } .freedom-opening__year { position:absolute;top:0;left:-1vw;font:200 30vw/.9 'Helvetica Neue',Arial,sans-serif;letter-spacing:-.085em; } .freedom-opening__year:nth-child(2) { top:22vw;left:17vw; } .freedom-opening__year > span { display:block;padding-right:.1em;color:#769a9d;background:linear-gradient(175deg,#9bbabe,#668b91 30%,#344b51 65%,#141a1c 98%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent; } body.story-edition .freedom-opening__heading { position:relative;margin:0;font:300 7.8vw/.94 'Overture Serif',Georgia,serif;letter-spacing:-.035em;text-transform:uppercase; } .freedom-opening__line { display:block; } .freedom-opening__line + .freedom-opening__line { margin-top:.8vw; } .freedom-opening__line:nth-child(2) { margin-left:17vw; } .freedom-opening__line:nth-child(3) { margin-left:4vw; } .freedom-opening__line > span { display:block; } .freedom-opening.is-animated .freedom-opening__line > span { opacity:.2;translate:0 35px;transition:opacity .85s ease,translate .85s cubic-bezier(.2,.65,.3,1); } .freedom-opening.is-title-visible .freedom-opening__line > span { opacity:1;translate:0 0; } .freedom-opening.is-animated .freedom-opening__line:nth-child(2) > span { transition-delay:.1s; } .freedom-opening.is-animated .freedom-opening__line:nth-child(3) > span { transition-delay:.2s; } .freedom-opening__history { position:relative;isolation:isolate;padding:8vw 7.2vw 8vw; } .freedom-opening__backdrop { position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none; } .freedom-opening__background-image { position:absolute;inset:-70px 0 auto;width:100%;height:calc(100% + 140px);object-fit:cover;object-position:50% 45%;opacity:.17;filter:grayscale(1); } .freedom-opening__backdrop::after { content:'';position:absolute;inset:0;background:linear-gradient(#141a1c,transparent 22%,#141a1c66 60%,#141a1c),linear-gradient(90deg,#141a1c33,#141a1caa); } .freedom-opening__eyebrow { position:relative;font:11px/1.6 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:#b0babb;margin:0 0 3vw; } body.story-edition .freedom-opening__lead { position:relative;margin:0 0 5vw;width:57vw;max-width:100%;font:400 3.5vw/1.08 var(--sans);letter-spacing:-.025em;text-indent:10vw;text-wrap:pretty; } .freedom-opening__lead > p,.freedom-opening__coda > p { margin:0;font:inherit;letter-spacing:inherit; } .freedom-opening__columns { position:relative;display:grid;grid-template-columns:27vw 32vw;gap:7vw;align-items:start;margin:0 0 8vw 10vw; } body.story-edition .freedom-opening__copy p { font:400 clamp(17px,1.55vw,25px)/1.45 var(--sans);letter-spacing:-.01em;margin:0 0 1.8em;text-wrap:pretty; } body.story-edition .freedom-opening__photo { position:relative;margin:3vw 0 0;padding:0;max-width:none;width:100%; } .freedom-opening__photo .hong-kong-photo { width:100%;margin:0; } .freedom-opening__photo .archive-image { background:transparent; } .freedom-opening__photo img { display:block;width:100%;height:auto;filter:none; } body.story-edition .freedom-opening__photo figcaption { margin:14px 0 0;color:#c6cdcb;font:12px/1.55 var(--sans); } body.story-edition .freedom-opening__photo .archive-credit { margin:9px 0 0;color:#a7b3b2;font:10px/1.6 var(--sans); } .freedom-opening__echoes { position:absolute;top:54%;left:0;right:0;z-index:-1;pointer-events:none;overflow:hidden; } .freedom-opening__echo { display:block;width:max-content;font:300 16vw/.95 'Overture Serif',Georgia,serif;letter-spacing:-.04em;color:#4c686633;white-space:nowrap; } .freedom-opening__echo:nth-child(2) { margin-left:14vw; } body.story-edition .freedom-opening__coda { position:relative;max-width:58vw;margin:0 0 5vw 10vw;font:300 4.2vw/1.13 'Overture Serif',Georgia,serif;letter-spacing:-.02em;text-wrap:pretty; } .freedom-opening__notes { position:relative;border-top:1px solid #415052;padding-top:15px;max-width:65ch;font:12px/1.6 var(--sans);color:#abb8b8; } .freedom-opening__notes summary { padding:8px 0;cursor:pointer;min-height:44px; } .freedom-opening__notes p { font:13px/1.65 var(--sans); } .freedom-opening__notes ul { padding-left:20px; } .freedom-opening__notes li { margin:10px 0; } body.story-edition #chapter-2 > .chapter-body { padding-top:clamp(35px,6vw,90px); } body.story-edition #first-escape-attempt { margin-top:0;border:0; } body.story-edition #first-escape-attempt h3 { font:300 clamp(38px,5vw,68px)/1.12 'Overture Serif',Georgia,serif;max-width:15ch; } body.story-edition #first-escape-attempt > p:not(.beat-date):not(.memory-credit),body.story-edition #two-escape-attempts .crossing-intro p { max-width:70ch;font:clamp(21px,2vw,26px)/1.6 var(--serif); } html[lang="zh-Hant"] .freedom-opening__heading { font-family:'Songti TC','STSong','PMingLiU',serif;font-size:8.6vw;line-height:1.14;letter-spacing:.08em; } html[lang="zh-Hant"] .freedom-opening__line--connector { display:none; } html[lang="zh-Hant"] .freedom-opening__lead { line-height:1.4;letter-spacing:.025em;font-size:3.1vw; } html[lang="zh-Hant"] .freedom-opening__copy p { line-height:1.75;letter-spacing:.02em; } html[lang="zh-Hant"] .freedom-opening__coda { font-family:'Songti TC','STSong','PMingLiU',serif;line-height:1.45;letter-spacing:.035em; } html[lang="zh-Hant"] body.story-edition #first-escape-attempt h3 { font-family:var(--brush);line-height:1.45; } html.chapter-two-context-active .top,html.chapter-two-context-active .rail { background:#141a1c;color:#e7eeeb;border-color:#344346; } html.chapter-two-context-active .rail a,html.chapter-two-context-active .rail button,html.chapter-two-context-active .top button,html.chapter-two-context-active .top a,html.chapter-two-context-active .top summary { color:#e7eeeb; } html.chapter-two-context-active .picker-book { filter:invert(1); } html.chapter-two-context-active .seal { background:#141a1c; } html.chapter-two-context-active .audio-status { opacity:0!important;pointer-events:none!important; } @media(min-width:700px) and (max-width:991px) { .freedom-opening__columns { margin-left:5vw;grid-template-columns:32vw 32vw;gap:6vw; }.freedom-opening__copy p{font-size:17px;} } @media(max-width:699px) { .freedom-opening__title-block { padding:28px 6.5vw 18vw; } .freedom-opening__kicker { font-size:12px;letter-spacing:.06em;gap:12px; } .freedom-opening__kicker .era-age { font-size:12px; } .freedom-opening__years { height:90vw;margin-top:14vw; } .freedom-opening__year { font-size:46vw;left:-2vw; } .freedom-opening__year:nth-child(2) { top:40vw;left:3vw; } body.story-edition .freedom-opening__heading { font-size:10.8vw;line-height:1.02; } .freedom-opening__line:nth-child(2) { margin-left:16vw; } .freedom-opening__line:nth-child(3) { margin-left:0; } .freedom-opening__history { padding:12vw 6.5vw 16vw; } .freedom-opening__eyebrow { font-size:12px;margin-bottom:10vw;letter-spacing:.12em; } body.story-edition .freedom-opening__lead { width:auto;font-size:7.1vw;line-height:1.17;text-indent:8vw;margin-bottom:14vw; } .freedom-opening__columns { display:flex;flex-direction:column;gap:9vw;margin:0 0 17vw; } body.story-edition .freedom-opening__copy p { font-size:17px;line-height:1.6; } body.story-edition .freedom-opening__photo { margin:0; } body.story-edition .freedom-opening__photo figcaption { font-size:13px; } body.story-edition .freedom-opening__photo .archive-credit { font-size:12px; } .freedom-opening__echoes { display:none; } body.story-edition .freedom-opening__coda { margin:0 0 14vw;max-width:none;font-size:8.2vw;line-height:1.22; } html[lang="zh-Hant"] .freedom-opening__heading { font-size:13vw; } html[lang="zh-Hant"] .freedom-opening__lead { font-size:7vw;line-height:1.5; } html[lang="zh-Hant"] .freedom-opening__copy p { line-height:1.85; } .freedom-opening__background-image { opacity:.10; } } html[data-motion="off"] .freedom-opening__line > span { opacity:1;translate:none;transition:none; } @media(prefers-reduced-motion:reduce) { .freedom-opening *{transition:none!important;animation:none!important;}.freedom-opening__line > span{opacity:1!important;translate:none!important;} } @media print { .freedom-opening { margin:0;background:white;color:black;overflow:visible; } .freedom-opening__years,.freedom-opening__backdrop,.freedom-opening__echoes { display:none; } .freedom-opening__title-block,.freedom-opening__history { padding:8mm 0; } body.story-edition .freedom-opening__heading { font-size:32pt;margin:8mm 0; } .freedom-opening__line { transform:none!important; } .freedom-opening__line > span { opacity:1!important;translate:none!important; } body.story-edition .freedom-opening__lead,body.story-edition .freedom-opening__coda { font-size:19pt;line-height:1.4;max-width:none;width:auto;margin:8mm 0;text-indent:0; } .freedom-opening__columns { display:block;margin:0; } body.story-edition .freedom-opening__copy p { font:11pt/1.5 serif; } body.story-edition .freedom-opening__photo { width:95mm;transform:none!important;break-inside:avoid; } .freedom-opening__kicker,.freedom-opening__eyebrow,.freedom-opening__notes,body.story-edition .freedom-opening__photo figcaption,body.story-edition .freedom-opening__photo .archive-credit { color:black; } } /* ==== story-accents.css ==== */ /* Source-pixel handwriting and photographs remain in native document flow. */ body.story-edition .story-accent-scene{position:relative;padding:34px 24px 26px;min-width:0} body.story-edition .story-accent-scene>figcaption{position:relative;margin-top:40px} .story-accent-layer{transform:translate3d(var(--accent-x,0px),var(--accent-y,0px),0)} .story-accent-layer.is-accent-visible{will-change:transform} .story-accent-annotation{margin:0 0 30px;position:relative;z-index:1;mix-blend-mode:multiply} .story-accent-orbit{display:flex;justify-content:flex-end;align-items:center;gap:clamp(28px,5vw,70px);min-height:230px;padding:30px 28px 24px 0} body.story-edition .story-accent-orbit .story-accent-script{display:block;width:auto;height:210px;max-width:48%;max-height:none;object-fit:contain;mix-blend-mode:multiply} body.story-edition .story-accent-orbit .story-accent-script--home{height:150px;max-width:54%} body.story-edition .story-accent-orbit .story-accent-seal{display:block;width:54px;height:54px;max-width:none;object-fit:contain;align-self:flex-end;margin-bottom:12px;opacity:.9} body.story-edition .story-accent-annotation .story-accent-reading{margin:14px 0 0;max-width:36ch;color:var(--muted);font:12px/1.6 var(--sans);letter-spacing:.045em} .story-accent-reading a{color:inherit;text-underline-offset:3px} .story-accent-reading strong{font-weight:500;color:var(--ink)} html[data-motion=off] .story-accent-layer{transform:none!important;will-change:auto!important} @media(max-width:700px){ body.story-edition .story-accent-scene{padding:18px 12px 10px} body.story-edition .story-accent-scene>figcaption{margin-top:24px} .story-accent-annotation{margin-bottom:24px} .story-accent-orbit{min-height:175px;gap:38px;padding:18px 12px} body.story-edition .story-accent-orbit .story-accent-script{height:155px} body.story-edition .story-accent-orbit .story-accent-script--home{height:118px} body.story-edition .story-accent-orbit .story-accent-seal{width:40px;height:40px} } @media(prefers-reduced-motion:reduce){.story-accent-layer{transform:none!important;will-change:auto!important}} @media print{ .story-accent-annotation{display:none!important} body.story-edition .story-accent-scene{padding:0!important} .story-accent-layer{transform:none!important;will-change:auto!important} } /* ==== annotations.css (first-paint sound-control rules only; the rest loads lazily) ==== */ @media(max-width:700px){.story-edition .sound-dock{bottom:max(12px,env(safe-area-inset-bottom))}} @media(max-width:480px){.story-edition .sound-text{display:none}.story-edition .sound{width:46px;padding:0;justify-content:center}} /* ==== memory-forward-photos.css ==== */ /* Family photographs keep their complete frames beside the related story. */ body.story-edition .memory-photo { width: 100%; max-width: 820px; min-width: 0; margin: 38px auto 44px; padding: clamp(12px, 2vw, 22px); border: 1px solid var(--rule); background: #f9f5ec; box-shadow: 0 12px 32px #24272112; scroll-margin-top: 110px; } body.story-edition .memory-photo .archive-image img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; } body.story-edition .memory-photo figcaption { margin-top: 15px; color: var(--muted); font: 15px/1.75 var(--sans); text-wrap: pretty; overflow-wrap: anywhere; } body.story-edition .memory-photo--wide { grid-column: 1 / -1; justify-self: center; margin-block: 8px 0; } body.story-edition .memory-photo-pair { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); align-items: start; gap: clamp(18px, 3vw, 32px); margin-block: 38px 44px; } body.story-edition .memory-photo-pair .memory-photo { max-width: none; margin: 0; } body.story-edition .memory-photo-pair .archive-image img { height: clamp(270px, 32vw, 390px); } /* Leave room for the existing portrait motion above its enlargement label. */ body.story-edition .story-family-photo .archive-image[href$="mf-126-full.webp"] .archive-zoom { margin-top: 26px; } @media (max-width: 700px) { body.story-edition .memory-photo-pair { grid-template-columns: minmax(0, 1fr); } body.story-edition .memory-photo-pair .archive-image img { height: auto; } body.story-edition .memory-photo-pair .memory-photo:first-child { max-width: 420px; justify-self: center; } } @media print { body.story-edition .memory-photo { max-width: 600px; box-shadow: none; break-inside: avoid; } body.story-edition .memory-photo-pair { display: block; } body.story-edition .memory-photo-pair .memory-photo { margin: 24px auto; } body.story-edition .memory-photo-pair .archive-image img { height: auto; } } /* ==== family-memories.css ==== */ /* Family recollections live beside the narrative; narrow screens open a reading dialog. */ body.story-edition .school-sequence:has(.memory-story-layout) { max-width: none; } body.story-edition .memory-story-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 56px); row-gap: 0; align-items: start; } .memory-story-layout > .family-memory { grid-column: 2; grid-row: 1 / span 2; } .memory-story-layout > .story-beat { grid-column: 1; } .memory-story-layout > .memory-story-visual { grid-column: 1; grid-row: 2; } body.story-edition .memory-story-layout--balanced { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } body.story-edition .memory-story-layout--background { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .memory-story-main, .family-memory { min-width: 0; } body.story-edition .memory-story-main > p:not(.beat-date) { font: 21px/1.65 var(--serif); text-wrap: pretty; } html[lang=zh-Hant] body.story-edition .memory-story-main > p:not(.beat-date), html[lang=zh-Hant] body.story-edition .family-memory-body > p:not(.memory-credit) { line-height: 1.9; } .family-memory { scroll-margin-top: 120px; } .family-memory-anchor { display: block; scroll-margin-top: 120px; } .family-memory-card { padding: 26px clamp(22px, 2.5vw, 34px) 30px; border: 1px solid #c8bca6; border-top: 3px solid var(--red); background: #eae2d2; color: var(--ink); } body.story-edition .family-memory-label { margin: 0 0 15px; color: var(--red); font: 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; } body.story-edition .family-memory-title { margin: 0 0 16px; font: 29px/1.15 var(--serif); font-weight: 400; letter-spacing: -.025em; text-wrap: balance; } body.story-edition .family-memory-period { margin: 0 0 20px; color: var(--muted); font: 13px/1.6 var(--sans); } body.story-edition .family-memory-body > p:not(.memory-credit) { font: 18px/1.65 var(--serif); text-wrap: pretty; } body.story-edition .family-memory-body .memory-credit { margin: 24px 0 0; padding-top: 15px; border-top: 1px solid #b9ad96; color: var(--muted); font: 13px/1.65 var(--sans); } .family-memory-link, .family-memory-dialog:not([open]) { display: none; } .family-memory-link { padding: 16px 0 16px 18px; border-left: 2px solid var(--red); text-decoration: none; scroll-margin-top: 120px; } .family-memory-link-label { display: block; margin-bottom: 6px; color: var(--red); font: 12px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; } .family-memory-link-title { display: block; font: 24px/1.3 var(--serif); font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .family-memory-link-action { display: block; margin-top: 9px; font: 14px/1.5 var(--sans); } .family-memory-link:hover .family-memory-link-title { text-decoration-thickness: 2px; } .family-memory-dialog { position: fixed; inset: 0; width: min(620px, calc(100% - 28px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid #c8bca6; background: #eae2d2; color: var(--ink); box-shadow: 0 20px 70px #0005; } .family-memory-dialog::backdrop { background: #171a16b3; } .family-memory-dialog .family-memory-card { display: block; border: 0; padding: 12px 24px 30px; } .family-memory-dialog-bar { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 7px 12px; border-top: 3px solid var(--red); background: #eae2d2; z-index: 1; } .family-memory-close { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; background: transparent; font: 15px/1.5 var(--sans); } .family-memory-close > [aria-hidden] { font: 27px/1 var(--sans); } .family-memory-close:hover { color: var(--red); } html.family-memory-open { overflow: hidden; } @media (max-width: 1000px) { body.story-edition .memory-story-layout { display: block; } .family-memory { margin-top: 26px; } html.family-memories-ready .family-memory > .family-memory-card { display: none; } html.family-memories-ready .family-memory-link { display: block; } } @media print { body.story-edition .memory-story-layout { display: block; } .family-memory-link, .family-memory-dialog-bar { display: none !important; } .family-memory { margin-top: 20px; break-inside: avoid; } html.family-memories-ready .family-memory > .family-memory-card { display: block; } .family-memory-card { background: white; } .family-memory-dialog[open] { position: static; max-height: none; width: auto; overflow: visible; box-shadow: none; } } /* ==== xiamen-photos.css ==== */ /* Two complete family prints accompany the school years, in reading order. */ .xiamen-school-years { position: relative; } .xiamen-anchor { display: block; scroll-margin-top: 125px; } .xiamen-spread { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); column-gap: clamp(44px, 6vw, 82px); row-gap: 60px; align-items: center; margin-top: 26px; } .xiamen-copy { min-width: 0; } body.story-edition .xiamen-copy > p { max-width: 74ch; font: 21px/1.65 var(--serif); text-wrap: pretty; } html[lang=zh-Hant] body.story-edition .xiamen-copy > p { line-height: 1.9; } .xiamen-photo { margin: 0; min-width: 0; position: relative; } .xiamen-photo--portrait { width: 82%; max-width: 300px; justify-self: end; } .xiamen-photo--lion { width: 100%; max-width: 365px; justify-self: start; } .xiamen-print { display: block; padding: 9px; background: #f9f5ec; border: 1px solid #d3ccbd; box-shadow: 0 14px 30px #2427211a; transform: rotate(2deg); } .xiamen-photo--lion .xiamen-print { transform: rotate(-2deg); } body.story-edition .xiamen-print img { display: block; width: 100%; height: auto; max-height: none; } .xiamen-print:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; } body.story-edition .xiamen-photo figcaption { margin-top: 20px; color: var(--muted); font: 14px/1.65 var(--sans); text-wrap: pretty; } .xiamen-spread > .chapter-pullquote { grid-column: 1 / -1; margin-block: 0 18px !important; } @media (max-width: 850px) { .xiamen-spread { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .xiamen-photo--portrait { width: 78%; max-width: 280px; margin: 6px 10px 14px 0; } .xiamen-photo--lion { width: 90%; max-width: 350px; margin: 8px 0 18px 10px; } .xiamen-spread > .chapter-pullquote { margin-top: 10px !important; } } @media print { .xiamen-spread { display: block; } .xiamen-photo { width: 50%; max-width: 240px; margin: 24px auto; break-inside: avoid; } .xiamen-photo .xiamen-print { transform: none; box-shadow: none; } } /* ==== story-albums.css ==== */ /* Compact archive albums. The page keeps its native vertical reading flow. */ .story-album { --album-accent: #887044; --album-panel: #fbf8f0; --album-rule: #c9beaa; --album-muted: var(--muted); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 32px; min-width: 0; max-width: 100%; margin: clamp(42px, 6vw, 76px) 0; padding-top: 24px; border-top: 1px solid var(--album-rule); scroll-margin-top: calc(var(--nav-height, 90px) + 24px); } .story-album .album-heading { min-width: 0; max-width: 44rem; } body.story-edition .story-album .album-heading h3 { margin: 0 0 12px; font: 400 clamp(28px, 3vw, 40px)/1.17 var(--serif); letter-spacing: -.025em; text-wrap: balance; } body.story-edition .story-album .album-heading p { max-width: 62ch; margin: 0; color: var(--album-muted); font: 16px/1.65 var(--sans); text-wrap: pretty; } .story-album .album-controls { display: none; align-self: end; align-items: center; gap: 9px; padding-bottom: 3px; color: inherit; } .story-album.is-enhanced .album-controls { display: flex; } .story-album .album-controls button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid var(--album-accent); border-radius: 50%; background: transparent; color: inherit; font: 24px/1 var(--sans); cursor: pointer; transition: background-color .18s, border-color .18s; } .story-album .album-controls button:hover:not(:disabled) { background: #88704415; } .story-album .album-controls button:disabled { opacity: .3; cursor: default; } .story-album .album-position { min-width: 5.25rem; text-align: center; color: var(--album-muted); font: 13px/1.5 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; } .story-album .album-track { display: flex; align-items: flex-start; gap: clamp(18px, 2.8vw, 32px); grid-column: 1 / -1; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 8px; scrollbar-width: thin; scrollbar-color: var(--album-accent) transparent; padding: 6px 8px 22px; /* No touch-action or wheel override: vertical page scrolling stays native. */ } .story-album .album-track::-webkit-scrollbar { height: 5px; } .story-album .album-track::-webkit-scrollbar-thumb { background: var(--album-accent); border-radius: 4px; } .story-album .album-track::-webkit-scrollbar-track { background: transparent; } .story-album .album-page { flex: 0 0 min(var(--page-width, 30rem), calc(100% - 2.5rem)); min-width: 0; margin: 0; scroll-snap-align: start; } .story-album .album-page--portrait { --page-width: 22rem; } .story-album .album-page > a { position: relative; display: block; padding: 10px; border: 1px solid var(--album-rule); background: var(--album-panel); box-shadow: 0 9px 19px #2427210d; text-decoration: none; } body.story-edition .story-album .album-page img { display: block; width: 100%; height: clamp(240px, 28vw, 390px); max-height: 390px; object-fit: contain; object-position: center; } body.story-edition .story-album .album-page figcaption { max-width: 60ch; margin: 14px 0 0; color: var(--album-muted); font: 14px/1.65 var(--sans); text-wrap: pretty; overflow-wrap: anywhere; } .story-album .album-page figcaption strong { color: inherit; font-weight: 600; } .story-album .album-skip { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: -12px; font: 14px/1.5 var(--sans); text-underline-offset: 5px; } .story-album :is(.album-track, .album-controls button, .album-page > a, .album-skip):focus-visible { outline: 2px solid var(--album-accent); outline-offset: 4px; } .story-album--dark { --album-accent: #cbb483; --album-rule: #6e685a; --album-muted: #e0d7c5; color: #f4efe3; } .story-album--dark .album-page > a { color: var(--ink); } .story-album--dark .album-controls button:hover:not(:disabled) { background: #cbb4831a; } /* Two moments read together. Complete frames and their captions stay associated. */ .story-diptych { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 4vw, 46px); align-items: start; min-width: 0; margin: clamp(40px, 6vw, 72px) 0; } .story-diptych > figure { min-width: 0; margin: 0; } .story-diptych > :is(h3, p, header) { grid-column: 1 / -1; } .story-diptych figure > a { position: relative; display: block; padding: clamp(8px, 1.1vw, 14px); border: 1px solid #c9beaa; background: #fbf8f0; box-shadow: 0 12px 26px #24272110; } body.story-edition .story-diptych img { display: block; width: 100%; height: clamp(300px, 36vw, 440px); object-fit: contain; } body.story-edition .story-diptych figcaption, body.story-edition .manuscript-spread figcaption { margin-top: 15px; font: 14px/1.7 var(--sans); color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere; } /* An actual manuscript beside the story it illuminates, with room to read both. */ .manuscript-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; min-width: 0; margin: clamp(44px, 6vw, 76px) 0; } .manuscript-spread > * { min-width: 0; margin: 0; } .manuscript-spread figure > a { display: block; } body.story-edition .manuscript-spread figure img { display: block; width: 100%; height: auto; max-height: 540px; object-fit: contain; } body.story-edition .manuscript-spread blockquote { margin: 0; padding: 20px 0 20px clamp(20px, 3vw, 34px); border-left: 1px solid #a88c53; font: clamp(26px, 2.8vw, 38px)/1.35 var(--serif); letter-spacing: -.015em; text-wrap: pretty; } body.story-edition .manuscript-spread blockquote p { margin: 0; font: inherit; } body.story-edition .manuscript-spread blockquote cite { display: block; margin-top: 18px; font: normal 14px/1.7 var(--sans); letter-spacing: 0; color: var(--muted); } body.story-edition .ink-fragment, body.story-edition img.ink-fragment { display: block; width: min(100%, 23rem); height: auto; max-height: none; margin: 20px 0 24px auto; object-fit: contain; } body.story-edition .ink-fragment--signature { width: min(52%, 12rem); } html[lang=zh-Hant] body.story-edition .story-album .album-heading h3 { font-family: var(--brush, var(--serif)); line-height: 1.35; letter-spacing: .02em; } html[lang=zh-Hant] body.story-edition :is(.album-page, .story-diptych, .manuscript-spread) figcaption { line-height: 1.85; } @media (max-width: 700px) { .story-album { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 20px; } .story-album .album-controls { justify-self: end; } .story-album .album-page, .story-album .album-page--portrait { flex-basis: min(85vw, calc(100% - 24px)); } body.story-edition .story-album .album-page img { height: clamp(220px, 70vw, 350px); } .story-diptych { gap: 18px; } body.story-edition .story-diptych img { height: clamp(170px, 47vw, 320px); } .story-diptych figure > a { padding: 6px; } body.story-edition .story-diptych figcaption { font-size: 13px; } .manuscript-spread { grid-template-columns: minmax(0, 1fr); gap: 26px; } .manuscript-spread > figure { width: 100%; max-width: 480px; margin-inline: auto; } } @media (max-width: 380px) { .story-diptych { grid-template-columns: minmax(0, 1fr); gap: 28px; } body.story-edition .story-diptych img { height: auto; max-height: 390px; } } @media (prefers-reduced-motion: reduce) { .story-album .album-track { scroll-behavior: auto; } .story-album .album-controls button { transition: none; } } html[data-motion=off] .story-album .album-track { scroll-behavior: auto; } html[data-motion=off] .story-album .album-controls button { transition: none; } @media (forced-colors: active) { .story-album .album-controls button:disabled { opacity: 1; color: GrayText; border-color: GrayText; } } @media print { .story-album { display: block; margin: 24px 0; } .story-album .album-controls, .story-album.is-enhanced .album-controls, .story-album .album-skip { display: none; } .story-album .album-track { display: block; overflow: visible; padding: 0; } .story-album .album-page { margin: 24px 0; break-inside: avoid; } body.story-edition .story-album .album-page img { height: auto; max-height: 100mm; } .story-album .album-page > a, .story-diptych figure > a { box-shadow: none; } .story-diptych, .manuscript-spread { display: block; } .story-diptych > figure, .manuscript-spread > figure { margin: 24px 0; break-inside: avoid; } body.story-edition .story-diptych img { height: auto; max-height: 100mm; } .story-album--dark { color: #000; --album-muted: #333; } } /* ==== narrative-scrapbook.css ==== */ /* Evidence-led spreads: original objects, compact narrative, native scrolling. */ body.story-edition .story-album { width: 100%; } body.story-edition .story-album .memory-photo { max-width: none; padding: 0; } body.story-edition .honeymoon-inscription { display: block; width: min(100%, 24rem); margin: -20px 2% 32px auto; color: var(--muted); text-decoration: none; text-align: right; font: 12px/1.6 var(--sans); } body.story-edition .honeymoon-inscription .ink-fragment { margin: 0 0 8px; } .student-keepsake { max-width: 520px; margin: 32px 0 48px auto; } .student-keepsake-photo { margin: 0; } .student-keepsake-photo img { display: block; width: 100%; height: auto; } .student-keepsake-photo figcaption { margin-top: 12px; color: var(--muted); font: 14px/1.7 var(--sans); } body.story-edition .parents-manuscript { align-items: center; gap: clamp(24px, 3vw, 44px); } body.story-edition .parents-manuscript .mother-photo { transform: rotate(-1.2deg); } body.story-edition .parents-manuscript .hymn-manuscript { margin-top: 60px; transform: rotate(1deg); } body.story-edition .parents-manuscript img { max-height: 450px; } body.story-edition .parents-manuscript figcaption { transform: none; } body.story-edition .return-to-xiamen { position: relative; margin: 80px 0 40px; padding: clamp(24px, 5vw, 60px); background: #e8e0ce; border-top: 1px solid #b3a488; } body.story-edition .return-to-xiamen h3 { font: 400 clamp(30px,4vw,52px)/1.15 var(--serif); margin: 10px 0 24px; text-wrap: balance; } body.story-edition .return-to-xiamen > p:not(.beat-date) { font: 20px/1.65 var(--serif); max-width: 66ch; } body.story-edition .return-to-xiamen .story-diptych { margin: 32px 0 0; } body.story-edition .return-to-xiamen .story-diptych figure:nth-child(2) { margin-top: 38px; } body.story-edition .return-to-xiamen .story-diptych img { height: clamp(280px,34vw,420px); } body.story-edition .later-years-chronology { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 48px; margin: 48px 0 64px; border-top: 1px solid var(--rule); padding-top: 32px; } body.story-edition .later-years-chronology .story-beat { margin: 0; width: auto; } body.story-edition .later-years-chronology #dementia-diagnosis { grid-column: 1/-1; } body.story-edition .later-years-chronology #austin-family { grid-row: span 2; padding-right: 20px; border-right: 1px solid var(--rule); } body.story-edition .later-years-chronology .story-beat > p:not(.beat-date) { font-size: 19px; } body.story-edition .later-years-chronology .story-beat h3 { font-size: clamp(25px,3vw,36px); } body.story-edition #great-famine .reform-history__opening-copy { width: min(100%, 680px); } body.story-edition #great-famine .reform-history__opening { min-height: 0; padding-bottom: 10px; } body.story-edition #great-famine .reform-history__heading-scene { padding-bottom: 40px; } body.story-edition #great-famine .reform-history__stat { margin-bottom: 70px; } body.story-edition #great-famine .reform-history__campaigns { margin-bottom: 60px; } body.story-edition .education-record { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); padding-block: 36px; } body.story-edition .education-record .degree-certificate img { max-height: 360px; width: 100%; object-fit: contain; } body.story-edition .education-record .award-plaque img { max-height: 320px; object-fit: contain; } @media (min-width: 1000px) { body.story-edition .parents-manuscript { margin-inline: -24px; } body.story-edition #a-shared-life-album { margin-top: 32px; } } @media (max-width: 800px) { body.story-edition .education-record { grid-template-columns: minmax(0,1fr); } } @media (max-width: 700px) { body.story-edition .parents-manuscript .hymn-manuscript { margin-top: 0; } body.story-edition .parents-manuscript .mother-photo, body.story-edition .parents-manuscript .hymn-manuscript { transform: none; } body.story-edition .return-to-xiamen { padding: 24px 18px; margin-top: 50px; } body.story-edition .return-to-xiamen .story-diptych img { height: clamp(190px,49vw,330px); } body.story-edition .return-to-xiamen > p:not(.beat-date) { font-size: 18px; } body.story-edition .later-years-chronology { grid-template-columns: minmax(0,1fr); gap: 30px; } body.story-edition .later-years-chronology #austin-family { padding: 0; border: 0; grid-row: auto; } } @media (max-width: 380px) { body.story-edition .return-to-xiamen .story-diptych figure:nth-child(2) { margin: 0; } body.story-edition .return-to-xiamen .story-diptych img { height: auto; max-height: 360px; } } @media print { body.story-edition .parents-manuscript :is(.mother-photo,.hymn-manuscript) { transform: none; } body.story-edition .later-years-chronology { display: block; } } /* ---- Round 3 (16 September 2026) ------------------------------------------ */ /* A period photograph beside a text-only beat; the prose wraps around it. */ body.story-edition .beat-photo { float: right; width: min(38%, 320px); margin: 6px 0 22px clamp(22px, 3vw, 40px); } body.story-edition .beat-photo > a { display: block; padding: 8px; background: #fbf8f0; border: 1px solid #c9beaa; box-shadow: 0 10px 22px #2427211a; transform: rotate(1.5deg); } body.story-edition .beat-photo img { display: block; width: 100%; height: auto; } body.story-edition .beat-photo figcaption { margin-top: 12px; font: 13px/1.6 var(--sans); color: var(--muted); text-wrap: pretty; } body.story-edition #lausanne-1974::after { content: ""; display: block; clear: both; } /* Two Chicago keepsakes side by side. */ .student-keepsake--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); align-items: start; max-width: 860px; margin: 32px 0 48px auto; } .student-keepsake--pair .student-keepsake-photo:nth-child(2) { margin-top: 34px; } /* Photographs that stand alone in the ministry chapter. */ body.story-edition .memory-photo--brothers { max-width: 760px; margin-top: 44px; } body.story-edition .memory-photo--office { max-width: 640px; margin: 36px 0 44px auto; } /* A horse drawn for him: ink only, drifting in the margin like a pasted slip. */ .doodle-flourish { position: relative; z-index: 2; width: min(34vw, 380px); margin: 8px 2% -34px auto; pointer-events: none; } .doodle-flourish img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; opacity: .92; transform: rotate(-7deg); } body.story-edition .doodle-flourish figcaption { pointer-events: auto; margin: -4px 0 0; padding-right: 6px; font: 12px/1.55 var(--sans); color: var(--muted); text-align: right; max-width: 30ch; margin-left: auto; } /* The return to Xiamen as an album: the two lions come first, side by side. */ body.story-edition .return-to-xiamen .story-album { border-top: 0; padding-top: 4px; margin: 28px 0 0; } body.story-edition .return-to-xiamen .story-album .album-page--portrait { --page-width: 21rem; } body.story-edition .return-to-xiamen .story-album .album-page img { height: clamp(260px, 30vw, 430px); } body.story-edition .return-to-xiamen > p.zh, body.story-edition .return-to-xiamen > p.en { font: 20px/1.65 var(--serif); max-width: 66ch; } /* Chapter 6: the 1979 photograph, shown in grayscale on the dark page. */ .photo-collage--deng .photo-collage__front { grid-column: 4 / 11; margin-top: 0; } .photo-collage--deng .photo-collage__front img { filter: grayscale(1) contrast(1.05); opacity: .92; } .photo-collage--deng .photo-collage__oval { grid-column: 1 / 4; margin: 10vw 0 0 1vw; } @media (max-width: 991px) { .photo-collage--deng .photo-collage__oval { grid-column: 1 / 5; margin-top: 14vw; } } @media (max-width: 800px) { .student-keepsake--pair { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .student-keepsake--pair .student-keepsake-photo:nth-child(2) { margin-top: 0; } } @media (max-width: 700px) { body.story-edition .beat-photo { float: none; width: min(100%, 320px); margin: 0 0 26px; } body.story-edition .beat-photo > a { transform: none; } .doodle-flourish { width: 46vw; margin: 0 0 -10px auto; } body.story-edition .memory-photo--office { margin-inline: auto; } body.story-edition .return-to-xiamen .story-album .album-page img { height: clamp(220px, 64vw, 360px); } .photo-collage--deng .photo-collage__front { width: 100%; margin: 0; } } @media (prefers-reduced-motion: reduce) { .doodle-flourish img { transform: rotate(-7deg) !important; } } @media print { body.story-edition .beat-photo { float: none; width: 80mm; } body.story-edition .beat-photo > a { transform: none; box-shadow: none; } .doodle-flourish { width: 60mm; margin: 4mm 0; } .doodle-flourish img { transform: none; } .student-keepsake--pair { display: block; } } /* ---- Round 3b: photographs identified by Angell, 16 September 2026 ---------- */ .student-keepsake--trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 28px); align-items: start; max-width: 1000px; margin: 32px 0 48px auto; } .student-keepsake--trio .student-keepsake-photo:nth-child(2) { margin-top: 30px; } .student-keepsake--trio .student-keepsake-photo:nth-child(3) { margin-top: 12px; } body.story-edition .beat-photo--left { float: left; margin: 6px clamp(22px, 3vw, 40px) 22px 0; } body.story-edition .beat-photo--left > a { transform: rotate(-1.5deg); } body.story-edition #vancouver-closed-door::after { content: ""; display: block; clear: both; } body.story-edition .memory-photo--pomona { max-width: 760px; margin: 38px 0 44px; } body.story-edition .memory-photo-pair--1980 { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); max-width: 980px; } body.story-edition .memory-photo-pair--1980 .archive-image img, body.story-edition .memory-photo-pair--1980 .memory-photo > a img { height: clamp(240px, 26vw, 360px); width: 100%; object-fit: contain; } body.story-edition .memory-photo-pair--1980 .memory-photo > a { display: block; } body.story-edition .memory-photo--sunny-father { max-width: 400px; margin: 30px 0 10px; } body.story-edition .memory-photo--rooftop { max-width: 720px; margin: 34px 0 0; } body.story-edition .memory-photo--baptism { max-width: 620px; margin: 34px auto 40px 0; } body.story-edition .memory-photo-pair--boon { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); max-width: 1000px; margin: 36px 0 44px; } body.story-edition .memory-photo-pair--boon .memory-photo { margin: 0; max-width: none; } body.story-edition .memory-photo-pair--boon .memory-photo > a { display: block; } body.story-edition .memory-photo-pair--boon img { height: clamp(300px, 34vw, 480px); width: 100%; object-fit: contain; } body.story-edition .memory-photo--cruise { max-width: 720px; margin: 0 0 44px; } body.story-edition #journeys-home-1982 .album-page { --page-width: 26rem; } body.story-edition #journeys-home-1982 .album-page--portrait { --page-width: 22rem; } @media (max-width: 800px) { .student-keepsake--trio { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .student-keepsake--trio .student-keepsake-photo:nth-child(n) { margin-top: 0; } } @media (max-width: 700px) { body.story-edition .beat-photo--left { float: none; margin: 0 0 26px; } body.story-edition .beat-photo--left > a { transform: none; } body.story-edition .memory-photo-pair--1980, body.story-edition .memory-photo-pair--boon { grid-template-columns: minmax(0, 1fr); } body.story-edition .memory-photo-pair--1980 .archive-image img, body.story-edition .memory-photo-pair--1980 .memory-photo > a img, body.story-edition .memory-photo-pair--boon img { height: auto; } body.story-edition .memory-photo--baptism, body.story-edition .memory-photo--sunny-father { margin-inline: auto; } } @media print { .student-keepsake--trio { display: block; } } /* ---- Round 3c: the second set Angell identified, 16 September 2026 ---------- */ body.story-edition .memory-photo--fuller-1976, body.story-edition .memory-photo--glasser-1977 { max-width: 760px; margin: 30px auto 40px; } body.story-edition .memory-photo-pair--1985 { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); max-width: 1000px; margin: 34px 0 0; align-items: end; } body.story-edition .memory-photo-pair--1985 .memory-photo { margin: 0; max-width: none; } body.story-edition .memory-photo-pair--1985 .memory-photo > a { display: block; } body.story-edition .memory-photo-pair--1985 img { height: clamp(260px, 30vw, 420px); width: 100%; object-fit: contain; } body.story-edition .memory-photo--naturalization { max-width: 560px; margin: 34px 0 40px auto; } body.story-edition .memory-photo-pair--1997 { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); max-width: 1040px; margin: 34px 0 40px; align-items: start; } body.story-edition .memory-photo-pair--1997 .memory-photo { margin: 0; max-width: none; } body.story-edition .memory-photo-pair--1997 .memory-photo > a { display: block; } body.story-edition .memory-photo-pair--1997 img { height: clamp(260px, 30vw, 420px); width: 100%; object-fit: contain; } body.story-edition .memory-photo--graduation-1998 { max-width: 720px; margin: 30px 0 40px auto; } body.story-edition .memory-photo--brothers-2003 { max-width: 720px; margin: 32px 0 8px; } body.story-edition .memory-photo--melons { max-width: 640px; margin: 32px 0 44px; } @media (max-width: 700px) { body.story-edition .memory-photo-pair--1985, body.story-edition .memory-photo-pair--1997 { grid-template-columns: minmax(0, 1fr); } body.story-edition .memory-photo-pair--1985 img, body.story-edition .memory-photo-pair--1997 img { height: auto; } body.story-edition .memory-photo--naturalization, body.story-edition .memory-photo--graduation-1998 { margin-inline: auto; } } /* Round 3d (17 September 2026): archival clips play as muted inline video in the still's place; phone fixes from the mobile QA pass. */ body.story-edition .chapter-intro__photo video, .reform-history__film video { display: block; width: 100%; height: auto; object-fit: contain; background: #000; } .reform-history__film video { border-radius: 2.5vw; overflow: hidden; } @media (max-width: 699px) { .chapter-intro--history .chapter-intro__context-content { padding: 14vw 6.5vw 12vw; } .photo-collage--mother .photo-collage__oval, .photo-collage--xiamen .photo-collage__oval { width: 66vw; margin: 18px auto 0 0; } body.story-edition .doodle-flourish figcaption { margin-top: 16px; } .era-age-sep { display: none; } } @media (max-width: 799px) { html[lang=zh-Hant] body.story-edition .reform-history .reform-history__family h4 { font-size: 34px; text-wrap: balance; } .reform-history__struggle--text .reform-history__struggle-copy { margin-top: 28px; } } @media print { .chapter-clip { break-inside: avoid; } }