/* Shared scale; deliberately different composition and timing for each act. */
.scene {
  --scene-progress:.5;
  position:relative;
  isolation:isolate;
  min-height:100svh;
  padding:100px var(--gutter);
  overflow:clip;
}
.scene-content { position:relative; z-index:1; width:100%; }
.scene .scene-heading { font-family:'Elsechord Serif','Songti SC','SimSun',serif; font-weight:400; letter-spacing:-.055em; line-height:1.15; }
.scene-heading span { display:block; }
.scene .scene-copy { padding:0; margin:0; white-space:pre-line; text-wrap:pretty; }
.scene-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; fill:none; }
.scene-path { stroke:currentColor; stroke-width:2; }
.scene-link { display:inline-block; width:fit-content; border-bottom:1px solid currentColor; padding:8px 0; font-size:18px; transition:opacity .2s; }
.scene-link:hover { opacity:.65; }
summary:focus-visible { outline:2px solid currentColor; outline-offset:6px; }

/* Disagreement: opposing reading directions, an open gap between the voices. */
.research-scene { background:var(--ink); color:var(--paper); display:flex; align-items:center; }
.research-scene .scene-heading { font-size:clamp(70px,8.8vw,150px); }
.research-scene .scene-heading > span:first-child { margin-left:2%; }
.research-scene .accent { margin:clamp(60px,10svh,130px) 3% 0 0; text-align:right; color:var(--violet); }
.research-scene .scene-copy { max-width:740px; margin:70px 0 0 3%; font-size:clamp(18px,1.5vw,24px); line-height:1.9; color:#ddd6e7; }
.research-lines { color:var(--violet); opacity:.28; }
.research-lines .line-field-two { opacity:.5; transform:translateY(100px); }
body[data-motion="full"] .research-scene .scene-heading > span:first-child { translate:calc((var(--scene-progress) - .5)*90px) 0; }
body[data-motion="full"] .research-scene .accent { translate:calc((var(--scene-progress) - .5)*-130px) 0; }
body[data-motion="full"] .line-field-one { transform:translateX(calc((var(--scene-progress) - .5)*-250px)); }
body[data-motion="full"] .line-field-two { transform:translate(calc((var(--scene-progress) - .5)*250px),100px); }

/* The project: read the proposition first, then uncover the name at the foot. */
.project-scene { background:#d9d0e9; color:var(--ink); padding-top:14svh; padding-bottom:7svh; display:flex; align-items:stretch; }
.project-scene .scene-content { display:flex; flex-direction:column; align-items:flex-start; min-height:79svh; }
.project-scene .scene-copy { order:0; max-width:1000px; font-family:'Elsechord Serif','Songti SC','SimSun',serif; font-size:clamp(26px,3.2vw,55px); line-height:1.65; letter-spacing:-.04em; }
.project-actions { order:1; display:flex; flex-wrap:wrap; gap:38px; align-items:baseline; margin-top:30px; width:100%; }
.project-status { max-width:570px; }
.project-status summary { cursor:pointer; list-style:none; padding:8px 0; font-size:17px; text-decoration:underline; text-underline-offset:8px; text-decoration-color:#22252b65; }
.project-status summary::-webkit-details-marker { display:none; }
.project-status p { font-size:16px; line-height:1.9; padding-top:15px; }
.scene .project-name { order:2; font-family:Manrope,sans-serif; font-size:clamp(70px,15.4vw,270px); font-weight:400; line-height:1.08; letter-spacing:-.065em; margin-top:auto; padding-top:12svh; width:100%; }
.project-shutter { position:absolute; inset:0; background:var(--purple); opacity:.17; clip-path:polygon(74% 0,100% 0,100% 100%,28% 100%); transform-origin:right center; }
body[data-motion="full"] .project-shutter { transform:translateX(calc((var(--scene-progress) - .5)*110px)); }

/* Signature: a large imprint above, the invitation held at the opposite corner. */
.closing-scene { background:var(--paper); color:var(--ink); padding-top:12svh; padding-bottom:110px; display:flex; align-items:stretch; }
.closing-scene .scene-content { min-height:calc(88svh - 110px); display:flex; flex-direction:column; align-items:flex-end; }
.closing-scene .scene-copy { order:2; margin-top:20px; font-size:clamp(18px,1.5vw,24px); line-height:1.8; }
.closing-scene .scene-link { order:1; font-family:'Elsechord Serif','Songti SC','SimSun',serif; font-size:clamp(30px,4vw,64px); line-height:1.5; margin-top:auto; padding-top:90px; letter-spacing:-.04em; border:0; text-align:right; }
.closing-wordmark { order:0; width:calc(100% + 3vw); margin-left:-3vw; align-self:flex-start; }
.closing-wordmark img { width:100%; height:auto; }
.closing-scene #replay { position:absolute; right:var(--gutter); bottom:30px; left:auto; transform:none; padding:10px 0; background:none; border:0; font-size:15px; }
.masthead nav { font-size:13px; }
html[lang="en"] .research-scene .scene-heading { font-family:Manrope,sans-serif; font-size:clamp(65px,8vw,140px); letter-spacing:-.07em; }
html[lang="en"] .project-scene .scene-copy { font-family:Manrope,sans-serif; font-size:clamp(25px,2.7vw,44px); letter-spacing:-.035em; }
html[lang="en"] .closing-scene .scene-link { font-family:Manrope,sans-serif; }

@media(max-width:700px) {
  .scene { padding:80px 24px; }
  .research-scene .scene-heading { font-size:12.7vw; }
  .research-scene .scene-heading > span:first-child { margin-left:0; }
  .research-scene .accent { margin:12svh 0 0; }
  .research-scene .scene-copy { font-size:16px; margin:10svh 0 0; max-width:350px; }
  .research-lines { width:170%; left:-35%; opacity:.23; }
  .project-scene { padding-top:15svh; padding-bottom:9svh; }
  .project-scene .scene-content { min-height:76svh; }
  .project-scene .scene-copy { font-size:clamp(20px,5vw,28px); line-height:1.8; white-space:pre-line; max-width:100%; }
  .project-actions { margin-top:25px; gap:28px; }
  .scene-link,.project-status summary { font-size:16px; }
  .project-status { max-width:100%; }
  .project-status p { font-size:14px; }
  .scene .project-name { font-size:14.1vw; padding-top:14svh; letter-spacing:-.06em; }
  .project-shutter { clip-path:polygon(100% 0,100% 0,100% 100%,0 100%); opacity:.14; }
  .closing-scene { padding-top:14svh; padding-bottom:110px; }
  .closing-scene .scene-content { min-height:calc(86svh - 110px); }
  .closing-scene .scene-copy { font-size:15px; }
  .closing-scene .scene-link { font-size:8.6vw; }
  .closing-wordmark { width:calc(100% + 30px); margin-left:-15px; }
  .closing-scene #replay { font-size:14px; bottom:26px; }
  html[lang="en"] .research-scene .scene-heading { font-size:12vw; }
  html[lang="en"] .project-scene .scene-copy { font-size:6vw; }
  html[lang="en"] .closing-scene .scene-link { font-size:8vw; }
}
@media(max-width:370px) { .scene { padding-inline:20px; } .research-scene .scene-copy { font-size:15px; } .project-scene .scene-copy { font-size:18px; } }
@media(max-height:650px) {
  .scene { padding-top:70px; padding-bottom:70px; }
  .project-scene .scene-content,.closing-scene .scene-content { min-height:calc(100svh - 140px); }
  .research-scene .accent { margin-top:45px; }
  .research-scene .scene-copy { margin-top:35px; }
}