:root{--paper:#f5f5f1;--ink:#171816;--muted:#65655e;--line:#c9c9c1;--accent:#304fee;--header:86px;--footer:126px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.5 Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,a{color:inherit}button{cursor:pointer}button{background:none;border:0}a{text-underline-offset:5px}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}.skip{position:fixed;top:-100px;left:20px;z-index:50;background:white;padding:12px}.skip:focus{top:15px}.masthead{height:var(--header);position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;z-index:8;background:var(--paper);border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-weight:700;font-size:24px;letter-spacing:-1px;white-space:nowrap}.brand span{font-weight:400}.brand sup{font-size:16px;margin-left:6px}.masthead nav{display:flex;gap:28px}.masthead nav button{font-size:14px;padding:9px 0;position:relative}.masthead nav button[aria-pressed=true]:after{content:'';position:absolute;bottom:1px;left:0;right:0;height:2px;background:var(--ink)}.motion-toggle{font-size:12px;color:var(--muted);min-height:40px}#journey{position:relative}.stage{height:100svh;position:sticky;top:0;overflow:hidden;padding-top:var(--header)}.track{height:calc(100svh - var(--header) - var(--footer));display:flex;width:max-content;will-change:transform}.scene{height:100%;flex-shrink:0;position:relative}.opening{width:100vw;padding:30px 5vw 30px}.opening-meta{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;text-transform:uppercase;position:relative;z-index:3}.opening h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:400;font-size:clamp(90px,15vw,245px);line-height:.86;letter-spacing:-.04em;margin:6vh 0 0;position:relative;z-index:1}.opening h1 em{font:italic .94em/.9 Georgia,serif;letter-spacing:-.07em}.opening-images{position:absolute;top:18%;right:7%;width:44%;height:65%;pointer-events:none;z-index:2}.opening-images img{position:absolute;width:42%;height:80%;object-fit:contain;filter:drop-shadow(0 12px 15px #0002);transform:translateY(var(--drift,0px)) rotate(var(--tilt));background:white;transition:filter .4s}.opening-images img:nth-child(1){left:1%;top:7%;--tilt:-13deg}.opening-images img:nth-child(2){left:31%;top:-5%;--tilt:9deg}.opening-images img:nth-child(3){left:59%;top:14%;--tilt:17deg}.opening-bottom{position:absolute;bottom:24px;left:5vw;right:5vw;display:flex;align-items:flex-end;justify-content:space-between;z-index:3}.opening-bottom p{font-size:14px;margin:0}.opening-bottom button{font-size:14px;padding:12px 0;border-bottom:1px solid var(--ink)}.opening-bottom button span{margin-left:25px}.chapter-scenes{display:flex;height:100%;width:max-content}.chapter{width:130vw;padding:24px 6vw;display:flex;align-items:center;gap:6vw;border-left:1px solid var(--line)}.chapter-year{font:400 clamp(140px,23vw,340px)/1 Impact,'Arial Narrow',sans-serif;letter-spacing:-.05em;position:absolute;left:4vw;top:0;color:#deded6;z-index:0}.chapter-info{width:30vw;min-width:280px;position:relative;z-index:2;margin-top:16vh}.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:1.6px;font-weight:400}.chapter-info h2{font:400 clamp(40px,5vw,80px)/1.03 Georgia,serif;letter-spacing:-2px;margin:15px 0 20px}.chapter-info p{font-size:16px;max-width:28ch}.chapter-info button{padding:12px 0;border-bottom:1px solid var(--ink);font-size:14px}.folder{position:relative;z-index:1;flex:0 0 43vw;max-width:680px;padding:18px;background:#dedfd5;text-align:left;box-shadow:0 15px 40px #0001;transform:rotate(-3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1);margin-top:7vh}.folder:before{content:attr(data-label);position:absolute;bottom:100%;left:0;padding:8px 20px;background:#dedfd5;border-radius:9px 9px 0 0;font-size:12px;letter-spacing:1px}.folder:hover,.folder:focus-visible{transform:rotate(0) translateY(-8px)}.folder img{width:100%;display:block;max-height:40vh;object-fit:cover}.folder-caption{display:flex;justify-content:space-between;font-size:13px;padding-top:16px}.chapter-peek{width:24vw;flex-shrink:0;align-self:center;transform:rotate(7deg);padding:10px;background:white;box-shadow:0 14px 28px #0002;z-index:1}.chapter-peek img{display:block;width:100%;max-height:45vh;object-fit:cover}.ending{width:75vw;display:flex;flex-direction:column;justify-content:center;padding:45px 9vw;border-left:1px solid var(--line);background:#e6eaf8}.ending h2{font:400 clamp(64px,9vw,145px)/.93 Georgia,serif;letter-spacing:-5px;margin:28px 0}.ending h2 em{font-weight:400}.ending p{font-size:16px;max-width:40ch}.text-button{font-size:14px;padding:12px 0;border-bottom:1px solid;align-self:flex-start}.timeline-bar{position:absolute;bottom:0;left:0;right:0;height:var(--footer);padding:12px 4vw 10px;background:var(--paper);z-index:4}.timeline-caption,.timeline-bottom{display:flex;align-items:center;justify-content:space-between;font-size:12px}.timeline-caption{margin-bottom:18px;letter-spacing:.5px}#position-label{font-weight:600}.ruler{position:relative;height:25px;border-top:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(2% - 1px),#bdbdb4 calc(2% - 1px),#bdbdb4 2%) top/100% 6px no-repeat}#progress-line{position:absolute;height:2px;background:var(--accent);top:-2px;left:0;width:0}#year-stops{position:absolute;inset:0}#year-stops button{position:absolute;top:-9px;font-size:12px;transform:translateX(-50%);background:var(--paper);padding:0 8px;color:var(--accent);font-weight:bold}.timeline-bottom{color:var(--muted)}.timeline-bottom button{font-size:20px;padding:0 14px;min-height:32px}.timeline-bottom button:disabled{opacity:.3;cursor:default}#index-view{padding:calc(var(--header) + 55px) 6vw 70px;min-height:100svh}.index-heading h1{font:400 clamp(64px,10vw,140px)/1 Georgia,serif;letter-spacing:-5px;margin:15px 0 25px}.filters{display:flex;gap:35px;align-items:end;padding:28px 0;border-block:1px solid var(--line);margin:35px 0}.filters label{display:flex;flex-direction:column;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:1px}.filters select{min-width:160px;padding:8px 25px 8px 0;background:none;border:0;border-bottom:1px solid var(--ink);font-size:16px;text-transform:none;letter-spacing:0}.filters p{margin-left:auto;font-size:14px}#index-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.index-card{text-align:left;padding:0}.index-card img{width:100%;aspect-ratio:1.55;object-fit:contain;background:#e3e3dc;display:block}.index-card h2{font:400 28px/1.1 Georgia,serif;margin:17px 0 8px}.index-card p,.index-footnote{font-size:14px;color:var(--muted)}.index-footnote{margin-top:50px}dialog{padding:0;border:0;width:min(1100px,calc(100% - 32px));max-height:94svh;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#12140fe8;backdrop-filter:blur(8px)}body:has(dialog[open]){overflow:hidden}.dialog-top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:var(--paper);border-bottom:1px solid var(--line);z-index:3;font-size:12px;letter-spacing:1px}.close{font-size:14px;padding:8px}.detail-heading{padding:45px 7% 40px}.detail-heading h2{font:400 clamp(44px,6vw,80px)/1 Georgia,serif;letter-spacing:-2px;margin:20px 0 25px}.detail-heading p:not(.eyebrow){max-width:58ch}.detail-heading a,#detail-note{font-size:14px;color:var(--muted)}#detail-cover{margin:0 7% 50px}#detail-cover img{width:100%;height:auto;display:block}.gallery-heading{margin:0 7% 28px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px}.gallery{padding:0 7% 60px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;columns:unset}.gallery figure{margin:0;break-inside:avoid;display:flex;flex-direction:column}.gallery a{display:block;height:100%}.gallery img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1.1;background:#e7e4df}.gallery figcaption{font-size:12px;margin-top:9px;color:var(--muted)}.quiet .opening-images img{transform:rotate(var(--tilt))!important}.quiet .folder{transition:none}.quiet *{scroll-behavior:auto!important}body.index-mode{overflow-x:hidden}@media(max-width:900px){:root{--header:74px;--footer:115px}.masthead{padding:0 5vw}.brand{font-size:20px}.masthead nav{gap:18px}.opening h1{font-size:18vw;margin-top:12vh}.opening-images{width:55%;top:24%;right:3%;height:51%}.opening-bottom p{max-width:24ch;font-size:13px}.chapter{width:160vw;padding-inline:7vw;gap:10vw}.chapter-info{width:44vw;min-width:0}.chapter-info h2{font-size:7vw}.chapter-year{font-size:35vw}.folder{flex-basis:58vw}.chapter-peek{width:29vw}.ending{width:90vw;padding:7vw}.ending h2{font-size:13vw}#index-results{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){:root{--header:104px;--footer:106px}.masthead{height:104px;flex-wrap:wrap;align-content:center;gap:10px 20px}.brand{width:100%;font-size:22px}.masthead nav{gap:26px}.motion-toggle{margin-left:auto;font-size:12px;min-height:30px}.opening{padding:22px 6vw}.opening-meta{font-size:10px;letter-spacing:.5px}.opening h1{font-size:21vw;margin-top:7vh}.opening-images{width:70%;height:43%;top:32%;right:10%}.opening-bottom{left:6vw;right:6vw;bottom:22px;gap:20px}.opening-bottom p{font-size:12px;max-width:18ch}.opening-bottom button{font-size:12px;max-width:145px}.opening-bottom button span{margin-left:6px}.chapter{width:115vw;display:block;padding:0 8vw}.chapter-year{font-size:32vw;top:2vh;left:5vw}.chapter-info{width:auto;margin:0;position:absolute;bottom:18px;left:8vw;right:10vw}.chapter-info h2{font-size:9vw;margin:8px 0}.chapter-info p{display:none}.chapter-info .eyebrow{display:block;font-size:10px;margin:0}.chapter-info button{font-size:13px;padding:7px 0}.folder{position:absolute;width:82vw;max-width:none;top:18%;left:10vw;margin:0;padding:12px}.folder img{max-height:23vh}.folder-caption{font-size:11px;padding-top:8px}.chapter-peek{display:none}.ending{width:100vw;padding:9vw}.ending h2{font-size:18vw;letter-spacing:-3px}.ending p{font-size:14px}.timeline-caption,.timeline-bottom{font-size:10px}.timeline-bottom>span:first-child{max-width:110px}.timeline-caption{margin-bottom:14px}.filters{flex-wrap:wrap;gap:20px}.filters label{flex:1}.filters select{min-width:0;width:100%}.filters p{width:100%;margin:0}#index-results{grid-template-columns:1fr}.index-heading h1{letter-spacing:-3px}.gallery{grid-template-columns:1fr}.gallery-heading{gap:20px}.gallery-heading span:last-child{max-width:150px;text-align:right}.dialog-top{padding:10px 16px}.detail-heading{padding-top:28px}.detail-heading h2{font-size:42px}#detail-cover{margin-bottom:30px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.opening-images img{transform:rotate(var(--tilt))!important}}@media(max-height:650px) and (min-width:601px){.opening h1{font-size:17vh;margin-top:3vh}.chapter-info{margin-top:8vh}.chapter-info h2{font-size:7vh}.chapter-info p{font-size:14px}.opening-images{height:60%}.ending h2{font-size:12vh;margin:15px 0}}

/* Compact gallery preview; retain the light palette. */
.detail-heading{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;padding:26px 5% 24px;align-items:start}
.detail-title-block .eyebrow{margin:0 0 10px}
.detail-heading h2{font-size:clamp(32px,3.7vw,50px);line-height:1.05;letter-spacing:-1.5px;margin:0 0 14px}
.detail-story p{margin:0 0 12px;line-height:1.55}
.detail-story #detail-note{margin-bottom:0;font-size:14px}
#detail-note:empty{display:none}
.gallery-heading{margin:0 5% 18px;padding-top:14px}
.gallery{padding:0 5% 40px}
@media(max-width:600px){.detail-heading{grid-template-columns:1fr;gap:16px;padding:20px 5%}.detail-heading h2{font-size:36px;margin-bottom:10px}.detail-story p{font-size:15px;line-height:1.5}.detail-story #detail-note{font-size:13px}.gallery-heading{font-size:11px}}

/* Keep the whole Creative Sundays cover visible inside the folder. */
#chapter-creative-sundays .folder img { object-fit: contain; }

/* Uniform gallery thumbnails, with an optional larger view. */
.gallery{align-items:start}
.gallery-photo{display:block;width:100%;padding:0;cursor:zoom-in}
.gallery .gallery-photo img{width:100%;height:auto;aspect-ratio:1.1;object-fit:cover;background:#e7e4df}
#photo-preview{width:min(1400px,calc(100% - 24px));height:94svh;max-height:94svh;overflow:hidden}
#photo-preview[open]{display:flex;flex-direction:column}
.preview-toolbar,.preview-controls{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:10px 20px;gap:16px;font-size:14px}
.preview-toolbar{border-bottom:1px solid var(--line)}
.preview-toolbar button,.preview-controls button{min-height:44px;padding:8px 12px}
.preview-controls button:disabled{opacity:.35;cursor:default}
.preview-image{flex:1;min-height:0;padding:16px;display:flex;align-items:center;justify-content:center}
#preview-photo{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:600px){.preview-toolbar,.preview-controls{padding:6px 10px}.preview-image{padding:8px}}

/* Chapters can begin with a story before photographs are added. */
.cover-pending{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1.55;background:#e7e4df;color:var(--muted);font:italic 24px Georgia,serif;padding:24px}
.gallery-empty{grid-column:1/-1;color:var(--muted);padding:24px 0}

#gallery-view{padding:calc(var(--header) + 55px) 6vw 70px;min-height:100svh}.gallery-meta{padding:18px 0 28px;border-bottom:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted)}.gallery-archive{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:28px 0 0}.gallery-item{margin:0;display:flex;flex-direction:column;gap:10px}.gallery-archive .gallery-photo{display:block;width:100%;padding:0;background:none}.gallery-archive .gallery-photo img{display:block;width:100%;aspect-ratio:1.05;object-fit:cover;background:#e7e4df}.gallery-item figcaption{font-size:12px;color:var(--muted);line-height:1.4}.gallery-archive .gallery-photo:focus-visible{outline:3px solid var(--accent);outline-offset:4px}@media(max-width:900px){#gallery-view{padding-top:calc(var(--header) + 40px)}.gallery-archive{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.gallery-archive{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gallery-item figcaption{font-size:11px}.gallery-meta{padding-top:12px}}

/* Scroll-driven opening: overlap, stack, spread, then clear the headline. */
.opening-images{inset:0;width:100%;height:100%;perspective:none;overflow:visible;z-index:2}
.opening-card{position:absolute;left:0;top:0;width:clamp(170px,24vw,360px);height:52%;will-change:transform,opacity;overflow:hidden;background:transparent;box-shadow:0 10px 24px #0002}
.opening-images .opening-card img{position:static;display:block;width:100%;height:100%;object-fit:cover;background:transparent;transform:none!important;filter:none;animation:none;transition:none}
.opening-bottom{align-items:center}
.opening-bottom #begin{position:relative;width:96px;height:96px;min-width:96px;padding:0;border:0;background:transparent;color:var(--ink);max-width:none;}
.scroll-lettering{width:100%;height:100%;overflow:visible;animation:orbit 18s linear infinite}
.scroll-lettering text{font:13px Arial,Helvetica,sans-serif;fill:currentColor;letter-spacing:.4px}
.scroll-mouse{position:absolute;width:22px;height:34px;left:calc(50% - 11px);top:calc(50% - 17px);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.mouse-wheel{animation:wheel-drop 1.8s ease-in-out infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes wheel-drop{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(5px);opacity:.2}}
.quiet .scroll-lettering,.quiet .mouse-wheel{animation:none}
@media(max-width:600px){.opening-card{width:37vw;height:48%}.opening-bottom #begin{width:76px;height:76px;min-width:76px}.opening-bottom{bottom:8px}.opening-bottom p{max-width:18ch}}
@media(prefers-reduced-motion:reduce){.scroll-lettering,.mouse-wheel{animation:none!important}}

/* Year and project type stay together, including repeated years. */
.ruler-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-top:10px;margin-top:-10px}.ruler-viewport::-webkit-scrollbar{display:none}.ruler{min-width:1500px;height:43px}#year-stops button{width:100px;padding:0 4px;line-height:1.2}#year-stops .stop-year{display:block}#year-stops .stop-type{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:5px}#year-stops button[aria-current="step"] .stop-type{color:var(--accent);font-weight:600}#year-stops button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}:root{--footer:144px}@media(max-width:900px){:root{--footer:133px}}@media(max-width:600px){:root{--footer:124px}}

/* Screen-fit layout and navigation refinement. */
.opening h1{font-size:min(15vw,26svh);margin-top:4svh}
.chapter-info{margin-top:5vh;align-self:center}
.chapter-info h2{font-size:clamp(36px,min(5vw,8svh),72px)}
.chapter-info p{max-width:32ch;font-size:15px;line-height:1.5;margin:16px 0}
#index-view,#gallery-view{padding-top:calc(var(--header) + 28px)}
.index-heading h1{font-size:clamp(48px,6vw,84px);letter-spacing:-3px;margin:8px 0 12px}
.index-heading p{margin:10px 0}
.filters{padding:16px 0;margin:24px 0;gap:28px}
.timeline-caption{margin-bottom:14px;min-height:28px;gap:14px}
.year-jump{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:11px;color:var(--muted)}
.year-jump select{background:var(--paper);border:0;border-bottom:1px solid var(--line);color:var(--ink);font-size:12px;max-width:108px;padding:4px}
.ruler-viewport{mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
#year-stops button[aria-current="step"] .stop-year{background:var(--accent);color:white;border-radius:3px;padding:2px 4px;display:inline-block}
#year-stops button{min-height:38px}
@media(min-width:601px) and (max-height:700px){.chapter-info{margin-top:0}.chapter-info h2{font-size:clamp(30px,6.5svh,48px);margin:10px 0}.chapter-info p{font-size:14px;margin:10px 0}.folder{margin-top:2vh}.opening h1{font-size:min(15vw,23svh);margin-top:3svh}}
@media(max-width:900px) and (min-width:601px){.opening h1{font-size:min(18vw,25svh)}.chapter-info h2{font-size:min(7vw,7svh)}}
@media(max-width:600px){
 .opening h1{font-size:min(21vw,12svh);margin-top:5svh}
 .opening-card{width:33vw;height:39%}
 .chapter{width:115vw}
 .folder{top:14%;width:78vw;left:8vw;padding:10px}
 .folder img{height:22svh;max-height:22svh}
 .chapter-peek{display:block;position:absolute;top:47%;left:46vw;width:37vw;height:25%;padding:6px;transform:rotate(7deg);z-index:2}
 .chapter-peek img{width:100%;height:100%;max-height:none;object-fit:cover}
 .chapter-info{bottom:12px;left:8vw;right:17vw;margin:0;align-self:auto}
 .chapter-info h2{font-size:clamp(25px,8vw,36px);margin:8px 0;letter-spacing:-1px}
 .timeline-caption{gap:8px;margin-bottom:9px;min-height:28px}
 #position-label{max-width:55%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .year-jump{font-size:10px;gap:4px}.year-jump select{font-size:11px;width:82px}
 .filters{gap:14px}.filters label{flex:1 1 40%}
 #index-view,#gallery-view{padding-top:calc(var(--header) + 22px)}
 .index-heading h1{font-size:48px;letter-spacing:-2px}
}
@media(max-width:600px) and (max-height:700px){.chapter-peek{top:43%;left:53vw;width:29vw;height:22%}.folder{top:13%}.folder img{height:19svh;max-height:19svh}.chapter-info h2{font-size:26px}.opening h1{margin-top:3svh}.opening-bottom p{font-size:11px}}

/* Dock-like timeline: every desktop chapter stays visible. */
.opening h1{font-size:min(15vw,24svh)}
.timeline-caption{margin-bottom:10px}
.ruler-viewport{padding-top:24px;margin-top:-12px}
#year-stops button{transition:transform .25s ease,font-size .25s ease,flex-grow .25s ease;transform-origin:center bottom}
#year-stops button[aria-current="step"] .stop-year{background:none;color:var(--accent);border-radius:0;padding:0}
#year-stops button[data-distance="0"]{transform:translateX(-50%) translateY(-5px) scale(1.25)}
#year-stops button[data-distance="1"]{transform:translateX(-50%) translateY(-2px) scale(1.08)}
@media(min-width:601px){
 .ruler-viewport{overflow:visible;mask-image:none}
 .ruler{min-width:0!important;width:100%;height:48px}
 #year-stops{display:flex;align-items:flex-start;gap:3px}
 #year-stops button{position:relative;left:auto!important;top:-9px;width:0;min-width:0;flex:1;padding:0 2px;transform:none;font-size:11px}
 #year-stops .stop-type{font-size:9px;line-height:1.15;overflow-wrap:anywhere}
 #year-stops button[data-distance="0"]{flex-grow:1.7;transform:translateY(-7px);font-size:18px}
 #year-stops button[data-distance="0"] .stop-type{font-size:11px}
 #year-stops button[data-distance="1"]{flex-grow:1.35;transform:translateY(-3px);font-size:14px}
 #year-stops button[data-distance="2"]{flex-grow:1.12;transform:translateY(-1px);font-size:12px}
 #year-stops button:hover{color:var(--ink)}
}
@media(max-width:600px){.ruler{min-width:var(--ruler-width,1500px)}.opening h1{font-size:min(21vw,12svh)}}
.quiet #year-stops button{transition:none}
@media(max-width:600px){:root{--footer:144px}.chapter-peek{top:53%;height:22%}.ruler-viewport{padding-top:18px}.timeline-caption{margin-bottom:9px}}
@media(max-width:600px) and (max-height:700px){.chapter-peek{top:53%;height:20%;left:57vw;width:25vw}.chapter-info{bottom:8px}.chapter-info h2{font-size:24px}}
/* Keep focused timeline controls from scrolling the clipped stage itself. */
.stage{overflow:clip}

/* Gallery browsing and chapter collections. */
.gallery-filters{margin-bottom:0;flex-wrap:wrap}
.gallery-meta{padding:16px 0;margin:0}
.filter-reset{margin-left:auto;padding:10px 0;text-decoration:underline;text-underline-offset:4px;font-size:13px}
.chapter-link{display:inline-block;color:var(--ink);text-decoration:none;min-height:24px}
.chapter-link:hover{text-decoration:underline}
.gallery-item-meta{display:block;font-size:11px;color:var(--muted);margin-top:3px}
#gallery-sections{display:flex;flex-wrap:wrap;gap:8px;margin:0 5% 24px}
#gallery-sections button{padding:8px 12px;border:1px solid var(--line);border-radius:3px;font-size:12px;min-height:40px}
#gallery-sections button:hover{border-color:var(--ink)}
.gallery-group-title{grid-column:1/-1;font:400 28px/1.2 Georgia,serif;margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);scroll-margin-top:76px}
.gallery-group-title:first-child{margin-top:0}
.gallery-group-title span{font:12px Arial,sans-serif;color:var(--muted);display:block;margin-top:8px}
@media(max-width:600px){.gallery-filters .filter-reset{margin:0;min-height:44px}.gallery-group-title{font-size:25px}.chapter-link{line-height:1.5}#gallery-sections{gap:6px}#gallery-sections button{font-size:11px}}

/* Reliability: quiet mode, readable controls, and compact screens. */
.quiet *, .quiet *::before, .quiet *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.quiet .folder:hover,.quiet .folder:focus-visible{transform:rotate(-3deg)}
.masthead nav button,.motion-toggle,.close,.timeline-bottom button{min-height:44px}
.chapter-link{min-height:44px;display:flex;align-items:center}
.gallery figure,.detail-story,.detail-title-block{min-width:0}
.gallery-item figcaption,.detail-heading h2{overflow-wrap:anywhere}
.preview-controls button{min-width:100px}
#gallery-sections button{min-height:44px}
#position-label{max-width:100%}
@media(max-width:600px){
 .masthead{gap:0 16px}.masthead nav{gap:22px}
 .gallery-filters select{min-height:44px}
 .timeline-bottom>span:first-child{max-width:95px}
 .timeline-bottom button{padding:0 10px}
 .preview-toolbar,.preview-controls{gap:8px}
}
/* In short landscape windows, use a compact row for the story and covers. */
@media(min-width:601px) and (max-height:500px){
 :root{--header:58px;--footer:122px}
 .chapter{gap:4vw}.chapter-info{margin-top:0;width:35vw}
 .chapter-info h2{font-size:28px;margin:6px 0}.chapter-info p{display:none}
 .chapter-info .eyebrow{display:block;font-size:10px;margin:4px 0}
 .folder{margin-top:12px;flex-basis:34vw;padding:8px}.folder img{height:26svh;max-height:26svh}
 .folder-caption{font-size:10px;padding-top:6px}.folder:before{padding:4px 12px;font-size:10px}
 .chapter-peek{width:22vw;padding:5px}.chapter-peek img{max-height:30svh}
 .opening h1{font-size:18svh;margin-top:2svh}.opening-bottom{bottom:6px}
 .opening-bottom #begin{width:64px;height:64px;min-width:64px}.opening-bottom p{font-size:11px}
 .opening-meta{font-size:10px}.ending h2{font-size:15svh;margin:8px 0}.ending p{font-size:12px;margin:4px 0}
}

/* Centre the view tabs independently of the logo and motion control. */
.masthead{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.masthead .brand{justify-self:start}
.masthead nav{justify-self:center}
.masthead .motion-toggle{justify-self:end}
@media(max-width:600px){
 .masthead{grid-template-columns:1fr auto;grid-template-rows:40px 44px;gap:0;align-content:center}
 .masthead .brand{width:auto;grid-column:1;grid-row:1}
 .masthead .motion-toggle{grid-column:2;grid-row:1;margin:0}
 .masthead nav{grid-column:1/-1;grid-row:2}
 .folder{top:17%}
 .chapter-peek{top:56%}
}
@media(max-width:600px) and (max-height:700px){.folder{top:16%}}

.gallery-group-context{grid-column:1/-1;max-width:68ch;margin-top:-8px;font-size:14px;line-height:1.6}
.gallery-group-context p{margin:0 0 8px}
.gallery-group-context a{display:inline-block;min-height:44px;padding:8px 0}

/* Draw navigation arrows consistently, including on mobile emoji fonts. */
.arrow-icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chapter-link .arrow-icon{margin-left:.3em}

/* Activity dock: reserve room for magnification instead of overlapping neighbours. */
:root{--footer:184px;--dock-icon:clamp(20px,2.35vw,34px)}
.timeline-caption{margin:0 0 2px;min-height:22px}
.ruler-viewport{padding:0;margin:0;overflow:visible;mask-image:none}
.ruler{min-width:0!important;width:100%;height:112px;border:0;background:none}
.ruler:before{content:'';position:absolute;left:0;right:0;bottom:28px;height:34px;border-radius:14px;background:linear-gradient(#e9e9e280,#deded570);border:1px solid #d7d7cd80}
#progress-line{display:none}
#year-stops{display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:0 5px 8px}
#year-stops button{--magnify:1;position:relative;inset:auto!important;flex:1 1 0;min-width:0;width:0;min-height:72px;padding:4px 0 0;background:none;transform:none!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:var(--muted);transition:flex-grow .3s ease;line-height:1.2}
#year-stops button[data-distance="0"]{--magnify:1.9;flex-grow:1.95}
#year-stops button[data-distance="1"]{--magnify:1.4;flex-grow:1.45}
#year-stops button[data-distance="2"]{--magnify:1.15;flex-grow:1.18}
.activity-icon{width:min(100%,calc(var(--dock-icon)*var(--magnify)));aspect-ratio:1;display:grid;place-items:center;border-radius:25%;background:linear-gradient(145deg,var(--tile-top),var(--tile-bottom));border:1px solid #ffffff65;box-shadow:inset 0 1px 1px #fff7,0 3px 5px #24251e24;transition:width .3s ease,box-shadow .3s ease,transform .2s ease}
.activity-icon svg{display:block;width:69%;height:69%;fill:none;stroke:#fffdf5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #0002)}
#year-stops .stop-year{display:block;margin-top:9px;font-size:11px;font-weight:500;transition:font-size .3s ease;color:var(--muted)}
#year-stops button[data-distance="0"] .stop-year{font-size:16px;font-weight:700;color:var(--accent)}
#year-stops button[data-distance="1"] .stop-year{font-size:13px;color:var(--ink)}
#year-stops .stop-type{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
#year-stops button[aria-current="step"] .activity-icon{box-shadow:inset 0 1px 1px #fff8,0 7px 12px #24251e30,0 0 0 2px var(--paper),0 0 0 3px #304fee70}
#year-stops button:hover .activity-icon,#year-stops button:focus-visible .activity-icon{transform:translateY(-4px);box-shadow:inset 0 1px 1px #fff8,0 8px 14px #24251e35}
.timeline-bottom{min-height:30px}
@media(max-width:600px){
 :root{--footer:174px;--dock-icon:30px}
 .ruler-viewport{overflow-x:auto;overflow-y:hidden;mask-image:linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
 .ruler{width:max-content;min-width:100%!important;height:110px}
 #year-stops{position:relative;inset:auto;height:100%;width:max-content;gap:10px;padding:0 24px 8px}
 #year-stops button{flex:none!important;width:52px;min-height:78px}
 #year-stops button[data-distance="0"]{width:72px}
 #year-stops button[data-distance="1"]{width:58px}
 #year-stops .stop-year{font-size:11px}
 .timeline-caption{min-height:20px;margin-bottom:0}
}
@media(min-width:601px) and (max-height:500px){
 :root{--footer:146px;--dock-icon:22px}
 .ruler{height:82px}
 #year-stops button[data-distance="0"]{--magnify:1.65}
 #year-stops button{min-height:58px}
 .timeline-caption{min-height:18px}
}
.quiet .activity-icon,.quiet #year-stops .stop-year{transition:none}

/* Quiet, paper-toned tiles with readable activity labels. */
:root{--footer:208px}
.ruler{height:136px}
.ruler:before{bottom:52px;background:#e9e9e180;border-color:#deded580}
#year-stops button{padding-bottom:24px}
.activity-icon{background:color-mix(in srgb,var(--tile-top) 27%,var(--paper));border-color:color-mix(in srgb,var(--tile-bottom) 20%,var(--paper));box-shadow:0 2px 3px #24251e0d}
.activity-icon svg{stroke:var(--tile-bottom);filter:none}
#year-stops button[aria-current="step"] .activity-icon{box-shadow:0 4px 7px #24251e14,0 0 0 2px var(--paper),0 0 0 3px #304fee45}
#year-stops button:hover .activity-icon,#year-stops button:focus-visible .activity-icon{box-shadow:0 4px 7px #24251e1c}
#year-stops .stop-type{position:absolute;top:calc(100% - 20px);left:50%;transform:translateX(-50%);width:100%;max-width:110px;height:auto;min-height:14px;margin:0;padding:1px 4px;clip-path:none;overflow:visible;white-space:normal;overflow-wrap:anywhere;font-size:clamp(8px,.7vw,9px)!important;line-height:1.15;font-weight:400;text-align:center;color:var(--muted);visibility:visible;z-index:2;background:var(--paper);border-radius:3px}
#year-stops button[aria-current="step"] .stop-type,#year-stops button:hover .stop-type,#year-stops button:focus-visible .stop-type{visibility:visible}
#year-stops button[aria-current="step"] .stop-type{color:var(--ink);font-weight:500}
#year-stops button:hover .stop-type,#year-stops button:focus-visible .stop-type{z-index:3}
@media(max-width:600px){:root{--footer:198px}.ruler{height:134px}}
@media(min-width:601px) and (max-height:500px){:root{--footer:170px}.ruler{height:106px}}

/* Keep permanent labels inside each stop, including compact desktop widths. */
@media(min-width:601px) and (max-width:1000px){#year-stops button{padding-bottom:40px}#year-stops .stop-type{top:calc(100% - 36px);padding-inline:0}.ruler:before{bottom:68px}}
@media(max-width:600px){#year-stops .stop-type{font-size:9px!important;padding-inline:0}}

/* Centre resting tiles inside the shelf; enlarged tiles grow above it. */
#year-stops .stop-year{height:20px;line-height:20px;flex-shrink:0}
.ruler:before{height:calc(var(--dock-icon) + 12px);bottom:55px;border-radius:14px}
@media(min-width:601px) and (max-width:1000px){.ruler:before{bottom:71px}}

/* Compact dock proportions and whole-word activity labels. */
:root{--footer:188px;--dock-icon:clamp(18px,2.1vw,30px)}
.ruler{height:116px}
.ruler:before{height:calc(var(--dock-icon) + 10px);bottom:53px;border-radius:12px}
#year-stops button{padding-bottom:24px}
#year-stops .stop-year{font-size:10px;height:18px;line-height:18px;margin-top:8px}
#year-stops button[data-distance="0"] .stop-year{font-size:14px}
#year-stops button[data-distance="1"] .stop-year{font-size:12px}
#year-stops .stop-type{top:calc(100% - 20px);width:calc(100% + 6px);padding:1px 0;font-size:8px!important;overflow-wrap:normal;word-break:normal;hyphens:none;background:none}
@media(max-width:600px){
 :root{--footer:180px;--dock-icon:27px}
 .ruler-viewport{overflow-x:auto;overflow-y:hidden;mask-image:linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
 .ruler{width:max-content;min-width:100%!important;height:116px}
 #year-stops{position:relative;inset:auto;height:100%;width:max-content;gap:8px;padding:0 24px 8px}
 #year-stops button{flex:none!important;width:52px;min-height:72px}
 #year-stops button[data-distance="0"]{width:68px}
 #year-stops button[data-distance="1"]{width:56px}
 .ruler:before{bottom:53px}
}
@media(min-width:601px) and (max-height:500px){:root{--footer:154px;--dock-icon:20px}.ruler{height:90px}}

/* Colour marks the current chapter; other activities stay warm grey. */
#year-stops button:not([aria-current="step"]) .activity-icon{background:#e8e8e1;border-color:#d7d7cf}
#year-stops button:not([aria-current="step"]) .activity-icon svg{stroke:#77786e}