/* An editorial frame for four procedural, interactive short films. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;z-index:40;pointer-events:none}
.project-visual.film{height:auto;padding:0;display:block;border:0;isolation:isolate;position:relative;overflow:hidden;background:var(--film-bg);color:var(--film-ink);--film-accent:#cced58;--film-line:#ffffff24;--film-muted:#b8c1b2;--film-bg:#18271f;--film-ink:#eff3e4;box-shadow:0 0 0 1px #242d2320;transition:box-shadow .5s}
.film::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.4;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,40%),#fff1,transparent 65%);mix-blend-mode:soft-light}
.film:hover{box-shadow:0 18px 50px -30px #14221977,0 0 0 1px #242d2330}
.film-contract{--film-bg:#dce4d2!important;--film-ink:#293b2e!important;--film-muted:#5b6d57!important;--film-line:#243b2b25!important;--film-accent:#63833c!important}
.film-knowledge{--film-bg:#13231d!important;--film-accent:#d6f15b!important}
.film-privacy{--film-bg:#eaded0!important;--film-ink:#44362e!important;--film-muted:#7b6556!important;--film-line:#4e362125!important;--film-accent:#9c5b39!important}
.film-agents{--film-bg:#202434!important;--film-ink:#eeeefa!important;--film-muted:#aaaec6!important;--film-accent:#c7caf9!important}
.film-head{display:flex;justify-content:space-between;align-items:center;padding:23px 24px 0;gap:12px;position:relative;z-index:3}
.film-head>.mono{font-size:8px;letter-spacing:.08em}.film-badge{font:6px var(--mono);letter-spacing:.04em;color:var(--film-muted);white-space:nowrap;display:flex;gap:6px;align-items:center}.film-badge i{width:4px;height:4px;background:var(--film-accent);border-radius:50%;box-shadow:0 0 9px var(--film-accent)}
.film-stage{width:100%;aspect-ratio:1.88;position:relative;min-height:180px;touch-action:pan-y}.film-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.film-coordinate{position:absolute;left:24px;bottom:12px;font:5px var(--mono);letter-spacing:.06em;color:var(--film-muted);opacity:.75}
.film-caption{padding:3px 24px 20px;position:relative;z-index:3}.film-phase{display:block;font-size:6px;color:var(--film-muted);margin-bottom:7px;min-height:8px}.film-caption p{font:400 clamp(17px,1.7vw,27px)/1.2 var(--space);letter-spacing:-.045em;min-height:1.2em}
.film-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:0 24px}.film-step{text-align:left;color:var(--film-muted);font:7px var(--mono);letter-spacing:.03em;padding:5px 0 9px;min-height:32px;position:relative;z-index:3}.film-step i{height:2px;background:var(--film-line);display:block;margin-top:10px;overflow:hidden}.film-step b{height:100%;display:block;width:100%;background:var(--film-accent);transform:scaleX(0);transform-origin:left}.film-step[aria-current="step"]{color:var(--film-ink)}.film-step:hover{color:var(--film-ink)}.film-step:hover i{height:3px;margin-bottom:-1px}
.film-toolbar{display:flex;align-items:center;gap:18px;padding:9px 24px 16px;position:relative;z-index:3}.film-disclaimer{margin-right:auto;font:5px var(--mono);letter-spacing:.02em;color:var(--film-muted)}.film-toolbar button{font:7px var(--mono);display:flex;align-items:center;gap:7px;padding:5px 0;min-height:28px}.film-toolbar button>span{font:16px var(--space);transition:transform .3s}.film-expand:hover>span{transform:translate(2px,-2px)}.film-replay:hover>span{transform:rotate(-90deg)}
.film button:focus-visible{outline-color:var(--film-accent);outline-offset:4px}.film.is-static .film-badge i{box-shadow:none}
.cinema-dialog{width:min(1180px,94vw);max-width:none;max-height:92dvh;background:var(--paper);padding:0;border:0;overflow:auto;overscroll-behavior:contain;color:var(--ink)}.cinema-dialog::backdrop{background:#111a16df;backdrop-filter:blur(18px)}.cinema-dialog[open]{animation:cinema-open .55s cubic-bezier(.16,1,.3,1)}.cinema-top{display:flex;justify-content:space-between;align-items:center;padding:22px 30px;gap:15px}.cinema-top .eyebrow{font-size:7px}.cinema-top h2{font-size:27px;letter-spacing:-.04em;margin-top:7px}.cinema-close{font:9px var(--mono);display:flex;gap:25px;align-items:center;padding:10px}.cinema-close>span{font-size:27px}.cinema-content .film-head{display:none}.cinema-content .film-stage{height:min(53vh,600px);aspect-ratio:auto}.cinema-content .film-caption{padding-top:10px}.cinema-content .film-caption p{font-size:28px}.cinema-content .film-toolbar{padding-bottom:18px}.cinema-content .film-expand{display:none}.cinema-content .film-coordinate{font-size:7px}.cinema-content .film-step{font-size:9px}.cinema-content .film-disclaimer{font-size:7px}.cinema-content .film-phase{font-size:8px}.cinema-content .film-toolbar button{font-size:9px}.motion-paused .cinema-dialog[open]{animation:none}
@keyframes cinema-open{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@media(min-width:1100px){.project-grid{gap:70px 30px}.project-card:nth-child(even){transform:translateY(65px)}.js .project-card:nth-child(even).reveal:not(.is-visible){transform:translateY(95px)}.work-section{padding-bottom:165px}}
@media(max-width:800px){.film-head{padding:19px 18px 0}.film-head>.mono{font-size:6px}.film-badge{font-size:4.5px;gap:4px}.film-caption{padding-left:18px;padding-right:18px}.film-timeline{padding:0 18px;gap:7px}.film-caption p{font-size:18px}.film-toolbar{padding-left:18px;padding-right:18px;gap:12px}.film-toolbar button{font-size:6px}.film-disclaimer{font-size:4px}.film-step{font-size:6px}.film-coordinate{left:18px;font-size:4px}}
@media(max-width:600px){.film-head{padding:19px 18px 0}.film-head>.mono{font-size:7px}.film-badge{font-size:4.5px}.film-stage{aspect-ratio:1.65;min-height:190px}.film-caption{padding-top:8px;padding-bottom:15px}.film-caption p{font-size:20px}.film-phase{font-size:6px}.film-timeline{gap:9px}.film-step{font-size:7px;min-height:36px}.film-toolbar{padding-top:7px;padding-bottom:12px}.film-toolbar button{font-size:6px;min-height:30px}.film-disclaimer{font-size:4.5px}.film-coordinate{font-size:4.5px;bottom:5px}.cinema-dialog{width:96vw;max-height:92dvh}.cinema-top{padding:16px 18px;align-items:flex-start}.cinema-top h2{font-size:21px;max-width:230px}.cinema-close{gap:7px;font-size:6px;padding:3px 0}.cinema-close>span{font-size:23px}.cinema-top .eyebrow{font-size:5px}.cinema-content .film-stage{height:38vh;min-height:225px;max-height:360px}.cinema-content .film-caption p{font-size:23px}.cinema-content .film-step{font-size:7px}.cinema-content .film-disclaimer{font-size:5px}.cinema-content .film-phase{font-size:6px}.cinema-content .film-coordinate{font-size:5px}}
@media(prefers-reduced-motion:reduce){.cinema-dialog[open]{animation:none}.project-card:nth-child(even){transform:none!important}}

.film-play:disabled{cursor:default;opacity:.55}.film-play{min-width:40px}.film-play>span{font-size:12px!important}
@media(max-width:800px){.film-toolbar{gap:10px}.film-disclaimer{max-width:100px;line-height:1.5}.film-play{min-width:33px}}
@media(max-width:360px){.film-toolbar{gap:8px}.film-disclaimer{max-width:75px;font-size:4px}.film-toolbar button{font-size:5.5px}}

@media(max-width:600px){.film-toolbar button{font-size:7px}.film-toolbar{gap:12px}.film-disclaimer{max-width:88px}}