:root{--paper:#faf6ee;--ink:#302b2d;--red:#793c4c;--line:#302b2d30}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:Georgia,serif}a{color:inherit;text-underline-offset:5px}a:hover{color:var(--red)}a:focus-visible{outline:2px solid var(--red);outline-offset:5px}header{max-width:1280px;margin:auto;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.brand{font-size:24px;font-style:italic;text-decoration:none}nav{display:flex;flex-wrap:wrap;gap:20px}nav a{font:12px/1.5 Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;text-decoration:none;display:flex;align-items:center;min-height:44px}nav a[aria-current]{color:var(--red);text-decoration:underline}main{max-width:1180px;padding:0 5%;margin:auto}h1,h2,h3{font-weight:normal}h1{font-size:clamp(42px,6vw,76px);line-height:1.08;letter-spacing:-2px;text-wrap:balance;margin:16px 0 24px}h2{font-size:clamp(30px,4vw,42px);margin:0 0 20px}h3{font-size:27px;line-height:1.2;margin:12px 0}p{font-size:18px;line-height:1.75}.eyebrow{font:12px/1.6 Arial,sans-serif;text-transform:uppercase;letter-spacing:1.8px;color:var(--red)}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;padding:62px 0}.hero p{max-width:520px}.hero figure{margin:0;position:relative;padding-bottom:50px}.hero img{width:100%;height:460px;object-fit:cover}.hero .inset{position:absolute;bottom:0;left:-25px;width:145px;height:180px;border:8px solid var(--paper);transform:rotate(-5deg)}.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}.button{padding:14px 20px;min-height:48px;border:1px solid var(--ink);text-decoration:none;font:14px/1.5 Arial,sans-serif}.button.primary{background:var(--red);border-color:var(--red);color:var(--paper)}.button.primary:hover{background:#612e3d;border-color:#612e3d}.section{border-top:1px solid var(--line);padding:48px 0}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.story-card{display:block;text-decoration:none;border-top:1px solid var(--line);padding:24px 0}.story-card p{font-size:16px}.read{font:13px/1.6 Arial,sans-serif;color:var(--red)}.collections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px}.collection{text-decoration:none;display:block}.collection img{width:100%;height:250px;object-fit:cover}.collection p{margin-top:0}.author{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center}.author img{width:100%;height:250px;object-fit:cover}.heading{padding:54px 0 30px}.heading p{max-width:650px}.reading{max-width:720px;margin:0 auto;padding-bottom:40px}.reading .heading h1{font-size:clamp(38px,5vw,62px)}.story-body p{font-size:19px;line-height:1.9;margin:0 0 24px}.journal-photo{margin:35px 0}.journal-photo img{width:100%;height:auto}.journal-photo figcaption{font:13px/1.6 Arial,sans-serif;margin-top:10px}.chapter-nav{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);margin-top:45px;padding-top:25px}.chapter-nav a{min-height:44px;max-width:45%;font-size:16px;line-height:1.6}.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.timeline div{border-left:2px solid var(--red);padding-left:20px}.timeline p{font-size:16px}footer{max-width:1180px;margin:25px auto 0;padding:28px 5%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font:12px/1.6 Arial,sans-serif}.skip{position:absolute;left:12px;top:-100px;padding:15px;background:white;z-index:20}.skip:focus{top:12px}.tags{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}.tags a{font:12px/1.5 Arial,sans-serif;min-height:44px;display:flex;align-items:center}html{scroll-padding-top:24px}@media(max-width:800px){header{flex-direction:column;align-items:flex-start;gap:8px}nav{gap:15px}.hero{grid-template-columns:1fr;padding:35px 0;gap:25px}.hero img{height:340px}.hero .inset{left:auto;right:15px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{flex-wrap:wrap}.timeline{grid-template-columns:1fr}}@media(max-width:500px){.grid,.collections{grid-template-columns:1fr}.author{grid-template-columns:1fr;gap:20px}.author img{width:160px;height:210px}.section{padding:35px 0}.heading{padding-top:35px}footer{flex-wrap:wrap}h1{letter-spacing:-1px}.collection img{height:220px}}

.hero figure>img:first-child{object-position:center top;height:520px}.hero figure{max-width:425px;justify-self:center;width:100%}@media(max-width:500px){.hero figure>img:first-child{height:460px}}

.shanghai-feature{position:relative;min-height:660px;margin:0 calc(50% - 50vw) 56px;padding:370px max(6%,calc((100vw - 1200px)/2)) 56px;display:flex;justify-content:flex-end;align-items:flex-end;background:#8ba5b6 url("assets/shanghai-skyline.jpg") center 48%/cover no-repeat}.shanghai-panel{width:min(100%,480px);padding:36px 40px;background:#f0e1de;color:#302b2d;box-shadow:0 8px 28px #302b2d20}.shanghai-panel h2{font-size:34px;margin:0 0 16px}.shanghai-panel p{font-size:18px;line-height:1.7;margin:0 0 22px}.shanghai-panel a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;background:#793c4c;color:white;text-decoration:none;font:12px/1.5 Arial,sans-serif;letter-spacing:1px;text-transform:uppercase}.shanghai-panel a:hover{background:#612e3d}@media(max-width:600px){.shanghai-feature{min-height:590px;padding:320px 6% 28px;background-position:42% center;margin-bottom:32px}.shanghai-panel{padding:26px}.shanghai-panel h2{font-size:28px}.shanghai-panel p{font-size:17px}}

/* Shared site footer */
footer.site-footer{display:block;max-width:none;margin:48px 0 0;padding:0;background:#612e3d;color:#faf6ee;border:0;font:14px/1.7 Arial,sans-serif}.footer-inner{max-width:1180px;margin:auto;padding:48px 5% 26px}.footer-top{display:flex;justify-content:space-between;gap:30px;align-items:start}.site-footer .footer-brand{font:italic 28px/1.3 Georgia,serif;text-decoration:none}.site-footer p{font:14px/1.7 Arial,sans-serif;margin:10px 0 0}.site-footer .footer-tagline{color:#eadedc}.site-footer .footer-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 24px;max-width:490px}.site-footer .footer-nav a{color:inherit;font:13px/1.5 Arial,sans-serif;text-transform:none;letter-spacing:0;min-height:44px;border:0}.site-footer a:hover{color:#f4d6ce}.site-footer a:focus-visible{outline:2px solid #f4d6ce;outline-offset:5px}.footer-bottom{display:flex;justify-content:space-between;gap:28px;margin-top:32px;padding-top:22px;border-top:1px solid #ffffff35}.footer-bottom p{font-size:12px;margin:0;color:#eadedc}.footer-context{max-width:370px;text-align:right}.footer-context a{color:#faf6ee}@media(max-width:700px){.footer-top,.footer-bottom{flex-direction:column;gap:20px}.site-footer .footer-nav{justify-content:flex-start;max-width:none;width:100%}.footer-context{text-align:left}.footer-inner{padding-top:36px}.footer-bottom{margin-top:24px}}

/* Inline photographs keep their full composition on every screen. */
.story-photo{margin:2.5rem auto;clear:both}.story-photo img{display:block;width:100%;height:auto}.story-photo.portrait-photo{max-width:440px}.story-photo figcaption{color:#6b6064;text-align:center;padding:0 .5rem}

/* Illustrated chapter directory */
.chapter-list{display:block;padding-top:0;border-top:0}
.chapter-list .chapter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:38px;padding:30px 0;border-top:1px solid var(--line);color:var(--ink)}
.chapter-image{display:block;aspect-ratio:1.75;overflow:hidden;background:#f0e1de}
.chapter-image img{display:block;width:100%;height:100%;object-fit:cover}
.chapter-image.chapter-portrait img{object-fit:contain}
.chapter-summary{min-width:0}.chapter-summary h2{font-size:clamp(27px,3vw,36px);line-height:1.2;letter-spacing:-.5px;margin:10px 0 16px;text-wrap:balance}
.chapter-summary p{font-size:17px;line-height:1.65;margin:0 0 20px}.chapter-summary .read{display:inline-block;padding:6px 0}
.chapter-row:hover h2{color:var(--red)}.chapter-row:focus-visible{outline:2px solid var(--red);outline-offset:6px}
@media(max-width:650px){.chapter-list .chapter-row{grid-template-columns:1fr;gap:20px;padding:26px 0}.chapter-summary h2{font-size:29px}.chapter-image{aspect-ratio:1.6}.chapter-summary p{margin-bottom:12px}}

/* Persistent navigation across the site. */
body>header{position:sticky;top:0;z-index:100;background:var(--paper);max-width:none;padding-inline:max(5%,calc((100% - 1152px)/2));box-shadow:0 3px 12px #302b2d08}
html{scroll-padding-top:120px}.skip{z-index:200}
@media(max-width:800px){body>header{padding-top:14px;padding-bottom:12px}html{scroll-padding-top:150px}}
@media(max-width:380px){body>header nav{gap:6px 12px}body>header nav a{font-size:11px}html{scroll-padding-top:190px}}

/* Four periods of Rebecca's China journey. */
.journey-timeline{list-style:none;margin:38px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.journey-timeline li{position:relative;min-width:0;padding:0 26px 0 0}
.journey-timeline li:last-child{padding-right:0}
.journey-year{display:block;color:var(--red);font-family:Georgia,serif;font-size:28px;line-height:1.3;font-variant-numeric:lining-nums;white-space:nowrap;margin-bottom:23px}
.journey-dot{display:block;width:15px;height:15px;border:3px solid var(--red);border-radius:50%;background:var(--paper);position:relative;z-index:1;margin-bottom:25px;box-shadow:0 0 0 6px var(--paper)}
.journey-timeline li:not(:last-child)::after{content:"";position:absolute;left:7px;right:-7px;top:66px;height:2px;background:#b7919b}
.journey-timeline li:last-child .journey-dot{background:var(--red)}
.journey-timeline h3{font-size:25px;line-height:1.25;margin:0 0 15px}
.journey-timeline p{font-size:17px;line-height:1.65;margin:0;color:var(--ink)}
@media(max-width:800px){.journey-timeline{display:block;margin-top:30px}.journey-timeline li,.journey-timeline li:last-child{padding:0 0 32px 36px}.journey-timeline li:last-child{padding-bottom:0}.journey-year{font-size:25px;margin-bottom:10px}.journey-dot{position:absolute;left:0;top:8px;margin:0}.journey-timeline li:not(:last-child)::after{left:6px;right:auto;top:15px;bottom:-8px;width:2px;height:auto}.journey-timeline h3{font-size:25px;margin-bottom:9px}.journey-timeline p{max-width:48ch}}

/* A quiet, once-per-load introduction; each line keeps its layout space. */
.hero-reveal>span{display:block;animation:story-line-reveal .7s cubic-bezier(.22,1,.36,1) both}
.hero-reveal>span:nth-child(1){animation-delay:.15s}
.hero-reveal>span:nth-child(2){animation-delay:.95s}
.hero-reveal>span:nth-child(3){animation-delay:1.75s}
@keyframes story-line-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-reveal>span{animation:none;opacity:1;transform:none}}
@media print{.hero-reveal>span{animation:none;opacity:1;transform:none}}

/* Scroll-triggered timeline; content stays visible without JavaScript. */
@media(prefers-reduced-motion:no-preference){
.journey-motion li{--step-delay:0s}
.journey-motion li:nth-child(2){--step-delay:.45s}
.journey-motion li:nth-child(3){--step-delay:.9s}
.journey-motion li:nth-child(4){--step-delay:1.35s}
.journey-motion li>*{opacity:0;transform:translateY(12px);transition:opacity .65s ease var(--step-delay),transform .65s cubic-bezier(.22,1,.36,1) var(--step-delay)}
.journey-motion li:not(:last-child)::after{transform:scaleX(0);transform-origin:left center;transition:transform .6s ease calc(var(--step-delay) + .2s)}
.journey-motion li.milestone-visible>*{opacity:1;transform:translateY(0)}
.journey-motion li.milestone-visible::after{transform:scaleX(1)}
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
.journey-motion li:nth-child(n){--step-delay:0s}
.journey-motion li:not(:last-child)::after{transform:scaleY(0);transform-origin:center top}
.journey-motion li.milestone-visible::after{transform:scaleY(1)}
}
@media print{.journey-motion li>*{opacity:1;transform:none;transition:none}.journey-motion li::after{transform:none!important;transition:none}}

/* Five chapters of the journey, with room for life after China. */
@media(min-width:1001px){.journey-timeline{grid-template-columns:repeat(5,minmax(0,1fr))}.journey-year{font-size:24px;line-height:1.5}.journey-timeline li{padding-right:20px}.journey-timeline h3{font-size:23px}.journey-timeline p{font-size:16px}}
@media(min-width:801px) and (max-width:1000px){.journey-timeline{display:block;margin-top:30px}.journey-timeline li,.journey-timeline li:last-child{padding:0 0 32px 36px}.journey-timeline li:last-child{padding-bottom:0}.journey-year{font-size:25px;margin-bottom:10px}.journey-dot{position:absolute;left:0;top:8px;margin:0}.journey-timeline li:not(:last-child)::after{left:6px;right:auto;top:15px;bottom:-8px;width:2px;height:auto}.journey-timeline h3{font-size:25px;margin-bottom:9px}.journey-timeline p{max-width:48ch}}
@media(prefers-reduced-motion:no-preference){.journey-motion li:nth-child(5){--step-delay:1.8s}}
@media(max-width:1000px) and (prefers-reduced-motion:no-preference){.journey-motion li:nth-child(n){--step-delay:0s}.journey-motion li:not(:last-child)::after{transform:scaleY(0);transform-origin:center top}.journey-motion li.milestone-visible::after{transform:scaleY(1)}}

/* Photographs for the first three milestones; remaining stages await their images. */
.journey-photo{height:128px;margin:0 0 22px;background:#f0e1de;overflow:hidden}
.journey-photo img{display:block;width:100%;height:100%;object-fit:contain}
.journey-photo-empty{background:transparent}
@media(min-width:1001px){.journey-timeline li:not(:last-child)::after{top:216px}}
@media(max-width:1000px){.journey-photo{height:180px;max-width:320px}.journey-photo-empty{display:none}}

/* Reserved footer space for a future companion publication. */
.footer-link-space{display:block;width:126px;min-height:44px}
.footer-context-empty{min-height:42px}
/* Scroll-following return control. */
.back-to-top{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:90;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #faf6ee66;border-radius:50%;background:#793c4c;color:#faf6ee;box-shadow:0 4px 16px #302b2d26;cursor:pointer;transition:background .2s ease,transform .2s ease}
.back-to-top[hidden]{display:none}
.back-to-top:hover{background:#612e3d;transform:translateY(-3px)}
.back-to-top:focus-visible{outline:3px solid #793c4c;outline-offset:4px}
@media(max-width:600px){.back-to-top{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}.back-to-top:hover{transform:none}}
@media print{.back-to-top{display:none}}

/* Three welcoming routes into the stories. */
.start-exploring .explore-card{display:flex;flex-direction:column;min-width:0}
.explore-image{display:block;width:100%;aspect-ratio:4/3;margin:0 0 22px;overflow:hidden;background:#f0e1de}
.explore-image img{display:block;width:100%;height:100%;object-fit:contain}
.explore-card .read{margin-top:auto;padding-top:12px}
.explore-all{display:inline-block;margin-top:30px}