/* One scene clock: footage → composition → title → invitation. */
:root { --intro: 1; --shot: 1; --title-in: 1; --invitation: 1; }
.opening { height:150svh; min-height:1050px; }
.cover { min-height:700px; max-height:none; background:var(--ivory); }
.cover-film { z-index:0;opacity:var(--intro);transform:scale(calc(1.09 - var(--intro)*.09));clip-path:none; }
.cover-film::after { content:''; position:absolute; inset:35% 0 0; background:linear-gradient(transparent 0%,#f8f4e915 20%,#f8f4e9e8 70%,var(--ivory) 100%); }
.opening-shot { position:absolute; inset:0; z-index:1; pointer-events:none; transform-origin:60% 28%; transform:translateY(calc(var(--shot)*-15svh)) scale(calc(1 - var(--shot)*.48)) rotate(calc(var(--shot)*10deg)); opacity:calc(1 - max(0,var(--shot) - .6)*2.5); clip-path:inset(calc(var(--shot)*8%) calc(var(--shot)*3%)); }
.opening-shot video { width:100%;height:100%;object-fit:cover;object-position:50% 40%; }
.opening-shot[data-view-hidden=true] { visibility:hidden; }
.opening-cut { position:absolute; z-index:2; left:7%; top:40%; color:#fff9e9; pointer-events:none; opacity:calc(1 - var(--shot)*2); transform:translateX(calc(var(--shot)*-60px)); text-shadow:0 3px 28px #0004; }
.opening-cut>span { font-size:clamp(50px,7.2vw,115px); letter-spacing:-.08em; font-weight:800; }
.opening-cut>i { display:block; height:4px; width:75%; margin-top:24px; background:var(--yellow); }
.opening-cut>small { display:block; font:10px monospace; letter-spacing:.1em; margin-top:16px; }
.masthead { top:32px;left:5%;right:5%; }
.logo-label { padding:0; background:transparent; box-shadow:none; width:190px; animation:none;opacity:var(--brand-in,1);transform:translateY(calc((1 - var(--brand-in,1))*-20px)); }
.logo-label img { filter:drop-shadow(0 0 15px #f8f4e9); }
.masthead nav { background:#f8f4e9ee;box-shadow:none;border-radius:30px;padding:8px 8px 8px 24px; }
.title-composition { left:7%; bottom:86px; width:86%; transform:translateY(calc(var(--cover-out)*50px)); opacity:calc(1 - var(--cover-out)*1.6); }
.opening-eyebrow { font-size:12px;letter-spacing:.16em;margin-bottom:22px;opacity:var(--title-in); }
h1 { font-size:clamp(65px,7.9vw,125px);line-height:1.13;letter-spacing:-.085em; }
.title-plane,.plane-first,.plane-second { padding:0; margin:0; width:fit-content; animation:none; background:transparent; color:var(--ink); box-shadow:none; transform:none; rotate:none; translate:none; }
.title-plane::before { display:none; }
.title-plane>span { animation:none; clip-path:inset(0 calc((1 - var(--title-in))*100%) -15% 0); transform:translateY(calc((1 - var(--title-in))*22px)); }
.plane-first { font-size:.70em; }
.plane-second { color:var(--blue);margin-top:9px;letter-spacing:-.095em; }
.plane-second>span { clip-path:inset(0 calc((1 - clamp(0,(var(--title-in) - .15)*1.18,1))*100%) -15% 0); }
.cover-action { margin:25px 0 0;gap:35px;animation:none;opacity:var(--invitation);transform:translateY(calc((1 - var(--invitation))*16px)); }
.cover-action p { padding:0;background:none;box-shadow:none;font-size:12px;line-height:1.85; }
.demo-link { background:var(--ink);color:var(--ivory);border-radius:40px;box-shadow:none;padding:8px 8px 8px 24px;font-size:12px;gap:24px; }
.round-arrow { background:var(--ivory);color:var(--ink);width:37px;height:37px; }
.cover-watch { animation:none;bottom:113px;right:7%;opacity:var(--invitation); }
.cover-watch>span:last-child { background:transparent;padding:0;font-size:11px; }
.watch-disc { width:52px;height:52px;background:transparent;border:1px solid #252b2366;box-shadow:none;font-size:13px; }
.cover-bottom { left:7%;right:7%;bottom:23px;opacity:var(--invitation); }
.cover-signature { font-size:8px;letter-spacing:.06em; }
.cover::after { display:none; }
/* The finished films carry their editorial intention with them. */
.films-heading { text-align:left;padding-top:80px;padding-bottom:0; }
.films-heading .section-kicker { border:0; }
.films-heading h2 { font-size:clamp(45px,6.2vw,88px);line-height:1.24; }
.films-heading>p:last-child { margin-top:30px; }
.featured-run { height:150svh;min-height:1160px; }
.featured-stage { height:100svh;min-height:800px; }
.featured-films .film-object { transition:filter .55s; }
.featured-films .film-object:nth-child(1) { --left:3%;--top:20%;--width:25%;--turn:-9deg; }
.featured-films .film-object:nth-child(2) { --left:37%;--top:8%;--width:28%;--turn:3deg; }
.featured-films .film-object:nth-child(3) { --left:74%;--top:24%;--width:22%;--turn:9deg; }
.film-direction { position:absolute;left:6%;top:1%;z-index:5;pointer-events:none; }
.film-direction>span { font:9px monospace;letter-spacing:.09em;color:var(--blue); }
.film-direction strong { display:block;font-size:clamp(23px,2.8vw,42px);line-height:1.3;letter-spacing:-.07em;margin-top:13px; }
.exhibition-type { font-size:16vw;top:52%;color:#eae4d6; }
.film-object figcaption { font-size:11px; }
.film-to-studio { padding:100px 6% 85px; }
.film-to-studio p { font-size:clamp(35px,4.5vw,64px);font-weight:800;line-height:1.4; }
.film-to-studio em { font-style:normal;color:var(--blue); }
.film-to-studio>span { background:var(--blue);height:85px; }
/* Each editorial choice owns a full stage, before the interactive editor. */
.studio { background:var(--ivory);padding-bottom:90px; }
.studio-heading { border-top:1px solid #d8d0bf;text-align:left;padding-top:85px; }
.studio-heading h2 { font-size:clamp(43px,5.7vw,84px);line-height:1.3; }
.studio-heading h2>span::after { display:none; }
.studio-heading h2>span { color:var(--blue); }
.decision-run { height:260svh;min-height:2150px;margin-top:45px; }
.decision-stage { position:sticky;top:0;height:100svh;min-height:760px;background:#eee9dc;overflow:hidden;isolation:isolate;transition:background .6s; }
.decision-stage[data-chapter=type] { background:#e4def0; }
.decision-stage[data-chapter=sound] { background:#f7e8a5; }
.decision-index { position:absolute;right:6%;top:10%;font:clamp(120px,16vw,245px)/1 Arial,sans-serif;font-weight:700;letter-spacing:-.1em;color:#d8d1c0;z-index:-1;transition:color .5s; }
.decision-index>span { font-size:12px;letter-spacing:0;margin-left:14px; }
[data-chapter=type] .decision-index { color:#cfc4e3; }
[data-chapter=sound] .decision-index { color:#e7d174; }
.edit-guide { border:0;position:absolute;inset:0; }
.guide-tabs { position:absolute;top:30px;left:7%;right:7%;margin:0;border-bottom:1px solid #171a1730;display:flex;width:auto;z-index:4; }
.guide-tabs button { flex:1;text-align:left;padding:15px 0 19px;color:#706b5f;font-size:14px;font-weight:600; }
.guide-tabs button small { font:10px monospace;margin-right:18px; }
.guide-tabs button[aria-selected=true] { color:var(--blue); }
.guide-tabs button[aria-selected=true]::after { background:var(--blue);height:3px; }
#guide-panel { position:absolute;inset:0;min-height:0; }
.guide-copy { position:absolute;top:18%;left:7%;padding:0;width:50%;z-index:2;pointer-events:none; }
.guide-number { display:none; }
.guide-copy h3 { font-size:clamp(30px,3.8vw,58px);line-height:1.25;font-weight:800;letter-spacing:-.065em;margin:0; }
.guide-copy p { font-size:13px;line-height:1.9;white-space:pre-line;max-width:430px;color:#4f4b43;margin-top:22px; }
.guide-film { position:absolute;width:min(61%,calc((100svh * .54 - 50px) * 1.779));right:5%;left:auto;top:43%;margin:0;transform:rotate(-3deg);transition:transform .65s var(--ease); }
.guide-film video { aspect-ratio:854/480;box-shadow:0 28px 45px -25px #41342277; }
.guide-film figcaption { color:#5f5749;font-size:10px;margin-top:14px; }
[data-chapter=type] .guide-film { transform:rotate(2deg); }
[data-chapter=sound] .guide-film { transform:rotate(0deg); }
.guide-note { display:none; }
.decision-progress { position:absolute;bottom:0;left:0;right:0;height:5px;background:#171a1710; }
.decision-progress i { display:block;height:100%;width:calc(var(--decision-progress,0)*100%);background:var(--blue); }
.decision-scroll { position:absolute;left:7%;bottom:6%;font:9px Arial,sans-serif;letter-spacing:.14em; }
.decision-scroll span { display:block;font-size:30px;margin-top:12px; }
.decision-stage.changing .guide-copy { animation:decision-word .55s var(--ease) both; }
@keyframes decision-word { from { opacity:0;translate:0 25px; } to { opacity:1;translate:0 0; } }
.hands-on-heading { padding:120px 7% 30px;text-align:center; }
.hands-on-heading>p { font:10px Arial,sans-serif;letter-spacing:.15em;margin-bottom:25px; }
.hands-on-heading h3 { font-size:clamp(42px,6vw,82px);line-height:1.3;letter-spacing:-.07em; }
.hands-on-heading h3>span { color:var(--blue); }
.hands-on-heading>span { display:block;font-size:13px;line-height:1.9;margin-top:27px; }
.editor-surround { margin-top:45px;max-width:1280px;width:90%; }
.editor-grid { grid-template-columns:180px minmax(0,1fr);grid-template-areas:'library monitor' 'timeline timeline'; }
.editor-unit { border-radius:7px;box-shadow:0 8px 0 #ded7c6,0 38px 70px -32px #5b504c55; }
.editor-header { height:60px; }
.editor-header>img { width:125px; }
.panel-label { font-size:11px; }
.library-item img { height:76px; }
.library-item>span { font-size:10px; }
.preview-text { font-size:clamp(13px,1.6vw,24px); }
.preview-controls output { font-size:11px; }
#preview-play { width:40px;height:40px;font-size:14px; }
.track-names { font-size:10px; }
.text-clip { font-size:10px; }
.editor-foot { font-size:9px;height:34px; }
.recording-entry>p { font-size:25px; }
.ai-aside { margin-top:85px; }
@media (min-width:701px) and (max-width:1100px) {
 .title-composition { bottom:90px; }
 .cover-watch { bottom:245px; }
 .guide-film { width:72%;top:47%;right:5%; }
 .guide-copy { width:80%; }
 .guide-copy h3 br { display:block; }
 .decision-index { top:16%; }
 .featured-films .film-object:nth-child(2) { --width:30%;--left:36%; }
}
@media (max-width:700px) {
 .opening { height:132svh;min-height:950px; }
 .cover { min-height:700px; }
 .masthead { top:25px;left:6%;right:6%; }
 .logo-label { width:146px; }
 .masthead nav { padding:5px 5px 5px 13px;font-size:9px; }
 .cover-film { height:65%; }
 .cover-film video { object-position:54% center;mask-image:linear-gradient(#000 0%,#000 80%,transparent 100%); }
 .cover-film::after { display:none; }
 .opening-shot { inset:12svh -22.5% auto;height:81.5vw;transform-origin:52% 25%;transform:translateY(calc(var(--shot)*-8svh)) scale(calc(1 - var(--shot)*.4)) rotate(calc(var(--shot)*10deg)); }
 .opening-shot video { object-fit:cover;object-position:50% center; }
 .opening-cut { top:45%;left:7%;color:var(--ink);text-shadow:none; }
 .opening-cut>span { font-size:14vw; }
 .opening-cut>i { margin-top:17px; }
 .opening-cut>small { font-size:8px; }
 .title-composition { left:7%;width:86%;bottom:139px; }
 .opening-eyebrow { font-size:9px;letter-spacing:.04em;margin-bottom:18px; }
 h1 { font-size:14vw;line-height:1.1; }
 .plane-first { font-size:.77em; }
 .plane-second { margin-top:8px; }
 .cover-action { display:block;margin:22px 0 0; }
 .cover-action p { font-size:11px; }
 .cover-action .demo-link { margin-top:20px;font-size:11px;padding:7px 7px 7px 21px;gap:24px; }
 .round-arrow { width:34px;height:34px; }
 .cover-watch { right:7%;bottom:63px;gap:12px; }
 .cover-watch>span:last-child { font-size:10px; }
 .watch-disc { width:37px;height:37px;font-size:10px; }
 .cover-bottom { bottom:18px; }
 .cover-signature { display:none; }
 .films-heading { padding-top:65px; }
 .films-heading h2 { font-size:9vw; }
 .films-heading>p:last-child { font-size:11px;margin-top:23px; }
 .featured-run { height:116svh;min-height:950px; }
 .featured-stage { height:88svh;min-height:670px; }
 .film-direction { left:7%;top:5%; }
 .film-direction>span { font-size:8px; }
 .film-direction strong { font-size:27px;margin-top:10px; }
 .featured-films .film-object:nth-child(1) { --left:-24%;--top:31%;--width:55%;--turn:-10deg; }
 .featured-films .film-object:nth-child(2) { --left:29%;--top:26%;--width:57%;--turn:3deg; }
 .featured-films .film-object:nth-child(3) { --left:85%;--top:37%;--width:48%;--turn:9deg; }
 .exhibition-type { font-size:25vw;top:60%; }
 .exhibition-hint { bottom:13px;font-size:8px; }
 .film-object figcaption { font-size:8px; }
 .film-to-studio { padding:65px 7% 65px; }
 .film-to-studio p { font-size:32px; }
 .film-to-studio>span { height:65px; }
 .studio-heading { padding-top:65px; }
 .studio-heading h2 { font-size:8.3vw; }
 .studio-heading>p:last-child { font-size:11px; }
 .decision-run { height:245svh;min-height:1900px;margin-top:30px; }
 .decision-stage { height:100svh;min-height:700px; }
 .guide-tabs { top:19px;left:7%;right:7%; }
 .guide-tabs button { font-size:12px;padding:17px 0; }
 .guide-tabs button small { font-size:8px;margin-right:10px; }
 .guide-copy { top:16%;left:7%;width:86%;padding:0; }
 .guide-copy h3 { font-size:8.5vw;line-height:1.35; }
 .guide-copy h3 br { display:block; }
 .guide-copy p { font-size:12px;line-height:1.8;margin-top:19px;max-width:90%; }
 .decision-index { top:27%;right:7%;font-size:130px; }
 .decision-index>span { font-size:10px; }
 .guide-film { width:93%;right:3.5%;top:48%;margin:0; }
 .guide-film figcaption { margin:12px 8px 0;font-size:9px; }
 .decision-scroll { bottom:7%;font-size:8px; }
 .decision-scroll span { font-size:23px;margin-top:9px; }
 .hands-on-heading { padding:70px 7% 15px; }
 .hands-on-heading>p { font-size:8px;margin-bottom:20px; }
 .hands-on-heading h3 { font-size:10vw; }
 .hands-on-heading>span { font-size:11px;margin-top:23px; }
 .editor-surround { margin-top:30px;width:94%; }
 .editor-grid { display:flex; }
 .editor-header { height:45px; }
 .editor-header>img { width:98px; }
 .panel-label { font-size:9px; }
 .library-item img { height:49px; }
 .library-item>span { font-size:9px; }
 .preview-text { font-size:11px; }
 .preview-controls output { font-size:9px; }
 #preview-play { width:35px;height:35px;font-size:12px; }
 .track-names { font-size:7px; }
 .text-clip { font-size:6px; }
 .editor-foot { font-size:8px;height:29px; }
 .recording-entry>p { font-size:16px; }
 .ai-aside { margin-top:55px; }
}
@media (prefers-reduced-motion:reduce) {
 .opening { height:auto;min-height:0; }
 .opening-shot,.opening-cut { display:none; }
 .cover-film { transform:none;clip-path:none; }
 .title-plane>span { clip-path:none;transform:none; }
 .title-composition,.opening-eyebrow,.cover-action,.cover-watch,.cover-bottom { opacity:1;transform:none; }
 .featured-run { height:auto;min-height:0; }
 .featured-stage { height:auto;min-height:0; }
 .film-direction { position:relative;left:auto;top:auto;margin:20px 7% 40px; }
 .decision-run { height:auto;min-height:0; }
 .decision-stage { position:relative;height:850px; }
 .hands-on-heading { padding-top:70px; }
}

/* The annotation is HTML, directed on the same clock as its film. */
.decision-overlay { position:absolute;inset:0 0 24px;pointer-events:none; }
.decision-overlay>span { position:absolute;opacity:0;transition:opacity .3s; }
.cut-mark { left:6%;top:62%;font-size:clamp(8px,1vw,15px);font-weight:700;background:var(--blue);color:white;padding:9px 13px;transform:translateX(calc((1 - var(--detail-in,1))*-15px)); }
.cut-mark i { position:absolute;top:50%;left:100%;width:6vw;height:1px;background:var(--blue); }
.cut-mark i::after { content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--blue); }
.type-mark { left:54%;top:calc(37% + var(--detail-in,1)*11%);transform:translate(-50%,-50%);font-size:clamp(8px,1.08vw,16px);font-weight:700;white-space:nowrap;background:#fff9ec;padding:7px 10px;border:1px solid #947ac3; }
.type-mark i { position:absolute;width:5px;height:5px;background:white;border:1px solid #947ac3; }
.type-mark i:nth-child(1){top:-3px;left:-3px}.type-mark i:nth-child(2){top:-3px;right:-3px}.type-mark i:nth-child(3){bottom:-3px;right:-3px}.type-mark i:nth-child(4){bottom:-3px;left:-3px}
.sound-mark { bottom:10%;left:11%;background:#fff8ed;padding:11px 15px;box-shadow:0 5px 13px #372f2118;width:26%;font-size:clamp(8px,.8vw,12px); }
.sound-mark>span { display:flex;align-items:center;gap:9px;white-space:nowrap;margin:4px 0; }
.sound-mark i { height:4px;width:calc(45% + var(--detail-in,1)*30%);background:var(--blue); }
.sound-mark>span:last-child i { width:calc(60% - var(--detail-in,1)*30%);background:#a98dcc; }
[data-chapter=cut] .cut-mark,[data-chapter=type] .type-mark,[data-chapter=sound] .sound-mark { opacity:var(--detail-in,1); }
@media(max-width:700px){.cut-mark{padding:6px 8px;left:2%;font-size:8px}.type-mark{padding:4px 5px;font-size:8px}.sound-mark{padding:5px 7px;width:29%;font-size:8px}.sound-mark>span{gap:4px;margin:2px 0}.sound-mark i{height:3px}}