/* One problem, one accumulating memory, one Timeline payoff. */
.problem-absence{width:100%;text-align:center;margin:60px auto 0;scroll-margin-top:110px}
.problem-absence h2{font:400 clamp(36px,3.8vw,57px)/1.08 var(--serif);letter-spacing:-.045em}
.problem-absence h2 em{font-style:normal;color:#6c7773}
.problem-question{font:400 29px/1.25 var(--serif);letter-spacing:-.025em;color:var(--teal);margin:30px auto 22px}
.reading-isolated{position:relative;width:min(540px,90%);margin:auto}
.reading-isolated figcaption{font-size:13px;color:var(--muted);margin-top:12px}
.key-emphasis{position:absolute;inset:0;width:100%;height:100%;color:var(--teal);pointer-events:none}
.key-emphasis path{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.key-emphasis circle{fill:var(--paper);stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.reading-isolated .key-emphasis{height:auto;aspect-ratio:1.5;opacity:.65}
.photo-carrier .key-emphasis{opacity:calc(var(--key-opacity,0)*.65);transform:scale(var(--photo-zoom,1));transform-origin:37% 48%}
.motion-story #pieces>.pieces-stage,.motion-story #pieces>.problem-absence{opacity:1}
.motion-story #pieces>.scene-heading>:not(h2){opacity:var(--fragments-opacity,0)}
.motion-story #pieces .pieces-stage>figure:not(.pieces-photo),.motion-story #pieces .archive-voice{opacity:var(--fragments-opacity,0)}
.motion-story #pieces .pieces-photo{background:transparent;box-shadow:none}
.motion-story .problem-absence{position:absolute;inset:0;margin:0;pointer-events:none}
.motion-story .problem-absence h2{position:absolute;top:120px;left:4vw;right:4vw;opacity:var(--absence-opacity,0)}
.motion-story .problem-question{position:absolute;top:var(--question-top);left:var(--question-left);margin:0;text-align:left;opacity:var(--question-opacity,0)}
.motion-story .reading-isolated{display:none}

/* A quiet editorial chapter break: text, atmosphere, and no photograph. */
#someone-still-can{min-height:75svh;padding:130px 6vw;justify-content:center;background:none}
.hinge-copy{width:min(1120px,100%);text-align:left}
.hinge-copy h2{font:400 clamp(58px,6.3vw,92px)/1.09 var(--serif);letter-spacing:-.045em}
.hinge-copy h2 em{font-style:normal;color:var(--teal)}
.motion-story .story-controls{opacity:var(--controls-opacity,1)}
.motion-story .archive-scatter>figure:not(.pieces-photo),.motion-story .archive-voice{will-change:transform,opacity}

/* A person first. The single capture surface forms beneath her, in the same composition. */
#memory{background:none;padding-top:150px}
#memory .memory-stage{position:relative;z-index:4;width:min(1080px,100%);text-align:left}
.memory-object{display:grid;grid-template-columns:1.08fr 1fr;gap:24px 48px}
.memory-photograph{grid-column:1;grid-row:1;min-width:0}
.memory-era{font:500 28px/1.15 var(--serif);color:var(--teal);margin-bottom:14px;letter-spacing:-.025em}
.memory-image{position:relative;width:100%;max-width:490px}
.detail-photo{width:100%;border-radius:7px}
.detail-photo img,.memory-image .key-emphasis{transform:scale(1.15);transform-origin:37% 48%}
.memory-image .key-emphasis{opacity:.55}
.memory-photograph figcaption{margin-top:15px}
.memory-photograph h3{font:500 28px/1.15 var(--serif);letter-spacing:-.025em}
.memory-photograph figcaption p{font-size:14px;line-height:1.5;color:var(--muted);margin-top:6px}
.human-context{grid-column:2;grid-row:1/3;min-width:0}
.elaine-identity{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.elaine-identity img{width:96px;height:112px;display:block;border-radius:9px;object-fit:cover;object-position:50% 33%;flex:none}
.elaine-identity strong{display:block;font:500 23px/1.25 var(--serif);letter-spacing:-.025em}
.identity-date{display:grid;margin-top:8px}
.identity-date span{grid-area:1/1;display:block;font:400 14px/1.5 var(--sans);color:var(--muted)}
.identity-date .identity-present{font-size:19px;color:var(--teal)}
.identity-recorded{display:none!important}
.solution-mechanism{font-size:16px;line-height:1.5;color:var(--teal);margin:0 0 19px;max-width:42ch}
.memory-contribution{min-width:0;padding:22px;border:1px solid #d1dfdd;border-radius:12px;background:var(--paper)}
.capture-brand{display:block;width:153px;height:auto;margin-bottom:22px}
.capture-prompt h3{font:400 26px/1.3 var(--serif);letter-spacing:-.025em;margin-bottom:24px;max-width:24ch}
.record-action{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:14px;font-weight:500;border-radius:99px;background:var(--teal);color:var(--paper);cursor:default}
.record-action .icon{width:17px;height:17px}
.recorded-context h3{font:500 23px/1.22 var(--serif);letter-spacing:-.025em;margin-bottom:12px}
.reading-recorded-date{font-size:13px;line-height:1.4;color:var(--muted);margin-bottom:12px}
.recorded-preview{font:400 19px/1.4 var(--serif);color:var(--muted)}
.recorded-meaning{margin-top:20px;padding-top:17px;border-top:1px solid var(--line)}
.quote-source{font-size:13px;line-height:1.4;color:var(--muted);margin-bottom:9px}
.recorded-meaning blockquote{margin:0;font:400 26px/1.27 var(--serif);letter-spacing:-.025em;color:var(--teal)}
.effort-note{margin-top:21px;color:var(--muted);line-height:1.4}
.effort-note strong{display:block;font:600 13px/1.4 var(--sans)}
.effort-note em{display:block;font:400 16px/1.35 var(--serif);margin-top:4px}
.memory-drawing{grid-column:1;grid-row:2;margin:0;padding-top:17px;border-top:1px solid var(--line);align-self:start}
.drawing-link{display:flex;align-items:center;gap:17px;width:100%;border:0;padding:0;background:none;text-align:left}
.drawing-link img{width:138px;height:auto;display:block;border-radius:4px;flex:none}
.drawing-link strong{display:block;font:500 21px/1.25 var(--serif);letter-spacing:-.025em}
.drawing-link small{display:block;color:var(--muted);font-size:13px;line-height:1.5;margin-top:6px}

/* Only this transformation introduces another product composition. */
#timeline .timeline-frame{position:relative;z-index:4;max-width:1100px}
#timeline .timeline-track{grid-template-columns:1fr 1.35fr .8fr 1fr;gap:25px;padding:0 26px 30px}
#timeline .year-label{display:block;min-height:69px;padding-bottom:23px;line-height:1.2}
#timeline .year-label>span{display:block;font-size:12px;margin-top:5px}
#timeline .timeline-track:before{top:55px}
#timeline .year-label:after{top:51px}
#timeline .timeline-anchor{max-width:none}
#timeline .timeline-anchor>span,#timeline .timeline-text>span{display:block;font-size:12px;color:var(--muted)}
#timeline .timeline-text p{font-size:22px;margin-top:24px}
#timeline .timeline-audio strong{font-size:14px}
#timeline .timeline-audio small{font-size:12px;line-height:1.4}

.product-shell-carrier,.drawing-carrier{display:none}
.motion-story .photo-bloom{z-index:2}
.motion-story .hinge-copy{position:relative;z-index:4}
.motion-story .product-shell-carrier{display:block;position:absolute;inset:0 auto auto 0;width:1000px;height:1000px;background:var(--paper);border:1px solid #dfe2da;border-radius:18px;box-shadow:0 20px 55px #1d332d08;transform-origin:0 0;opacity:0;pointer-events:none;z-index:3;will-change:transform}
.motion-story #timeline .timeline-frame{background:transparent;border-color:transparent;box-shadow:none}
.motion-story .memory-object{transform:var(--memory-transform,none);transform-origin:0 0;will-change:transform}
.motion-story .memory-era,.motion-story .memory-photograph figcaption{opacity:var(--memory-detail,1)}
.motion-story .memory-image .key-emphasis{visibility:hidden}
.motion-story .elaine-identity{opacity:var(--human,0)}
.motion-story .identity-present{opacity:calc(1 - var(--story,0))}
.motion-story .identity-recorded{display:block!important;opacity:var(--story,0)}
.motion-story .reading-recorded-date{display:none}
.motion-story .solution-mechanism{opacity:var(--mechanism,0)}
.motion-story .memory-contribution{display:grid;background:rgb(251 251 249 / var(--mechanism,0));border-color:rgb(113 152 146 / calc(var(--mechanism,0)*.3))}
.motion-story .capture-prompt,.motion-story .recorded-context{grid-area:1/1;align-self:start}
.motion-story .capture-prompt{opacity:var(--prompt,0)}
.motion-story .recorded-context{opacity:var(--story,0)}
.motion-story .recorded-meaning{opacity:var(--meaning,0)}
.motion-story .memory-drawing{opacity:var(--drawing,0)}
.motion-story #timeline .product-topbar,.motion-story #timeline .timeline-heading{opacity:var(--timeline-header,0)}
.motion-story #timeline .main-year{opacity:var(--timeline-anchor,0)}
.motion-story #timeline .before-year{opacity:var(--timeline-left,0);transform:translateX(calc((1 - var(--timeline-left,0))*16px))}
.motion-story #timeline .later-year{opacity:var(--timeline-right,0);transform:translateX(calc((1 - var(--timeline-right,0))*-16px))}
.motion-story #timeline .last-year{opacity:var(--timeline-last,0);transform:translateX(calc((1 - var(--timeline-last,0))*-20px))}
.motion-story #timeline .timeline-track:before{transform:scaleX(var(--timeline-spread,0));transform-origin:var(--timeline-origin,40%) 50%}
.motion-story .drawing-carrier{display:block;position:absolute;inset:0 auto auto 0;width:1000px;height:666.667px;transform-origin:0 0;opacity:0;pointer-events:none;z-index:6;will-change:transform;overflow:hidden;border-radius:5px}
.drawing-carrier img{display:block;width:100%;height:100%;object-fit:cover}
.motion-story .drawing-link img{opacity:var(--drawing-source,1)}
.motion-story .timeline-drawing img{opacity:var(--timeline-drawing-destination,1)}
.motion-story .measuring-continuity .memory-object,.motion-story .measuring-continuity .timeline-year{transform:none!important}

/* Reading order remains photograph/person -> mechanism -> prompt -> answer -> drawing. */
body:not(.motion-story) #memory{min-height:0;padding-top:80px}
body:not(.motion-story) #memory .memory-stage{max-width:780px}
body:not(.motion-story) .memory-object{display:flex;flex-direction:column;gap:32px}
body:not(.motion-story) .memory-image{max-width:none}
body:not(.motion-story) .human-context{width:100%}
body:not(.motion-story) .memory-contribution{display:flex;flex-direction:column;gap:30px}
body:not(.motion-story) .capture-prompt h3{max-width:35ch}
body:not(.motion-story) .recorded-context{padding-top:26px;border-top:1px solid var(--line)}
body:not(.motion-story) .recorded-preview{max-width:45ch}
body:not(.motion-story) .recorded-meaning blockquote{max-width:32ch}
body:not(.motion-story) .memory-drawing{width:100%}
@media(min-width:1000px) and (max-height:900px){
 .motion-story .problem-absence h2{top:108px;font-size:44px}
 .problem-question{font-size:25px}
 #memory{padding-top:128px}
 #memory .memory-stage{max-width:1000px}
 .memory-object{gap:20px 40px}
 .memory-era{font-size:25px;margin-bottom:10px}
 .memory-image{max-width:410px}
 .memory-photograph h3{font-size:25px}
 .memory-photograph figcaption{margin-top:12px}
 .memory-photograph figcaption p{font-size:13px}
 .elaine-identity{margin-bottom:15px;gap:16px}
 .elaine-identity img{width:80px;height:92px}
 .elaine-identity strong{font-size:22px}
 .solution-mechanism{font-size:15px;margin-bottom:15px}
 .memory-contribution{padding:18px}
 .capture-brand{width:145px;margin-bottom:18px}
 .capture-prompt h3{font-size:24px}
 .recorded-context h3{font-size:21px;margin-bottom:9px}
 .recorded-preview{font-size:17px}
 .recorded-meaning{margin-top:14px;padding-top:12px}
 .recorded-meaning blockquote{font-size:23px}
 .effort-note{margin-top:15px}
 .drawing-link img{width:112px}
 .drawing-link strong{font-size:19px}
 .memory-drawing{padding-top:12px}
 #timeline .timeline-frame{max-width:1080px}
 #timeline .timeline-heading{padding:15px 24px}
}
@media(max-width:999px){
 #memory,#timeline{min-height:0;background:var(--paper);padding-top:76px;padding-bottom:66px}
 .hinge-copy h2{font-size:clamp(42px,7vw,72px)}
 #timeline .timeline-track{grid-template-columns:1fr 1fr;gap:28px}
 #timeline .timeline-track:before{display:none}
 #timeline .year-label{padding-top:12px;min-height:66px}
 #timeline .year-label:after{top:-4px}
}
@media(max-width:600px){
 #memory,#timeline{padding:64px 16px}
 .memory-contribution{padding:18px}
 .drawing-link img{width:100px}
 .recorded-meaning blockquote{font-size:25px}
 #timeline .timeline-track{display:block;padding:0 20px 26px 30px}
 #timeline .year-label{min-height:0;padding-top:0;padding-bottom:20px}
 #timeline .year-label:after{top:8px}
 #timeline .timeline-anchor{max-width:100%}
}