/* Factory product page: same shell as Thunderlink and Spektrum (light page, dark film entrance). */
.project-page--factory{background:#ecebe6;color:#191c20}
.project-page--factory::before{display:none}
.project-page--factory .nav{color:#e9ecf1}
.project-page--factory header.nav::before{background:#08090b9c}
.project-page--factory .footer{background:#08090b;color:#e9ecf1}
/* Title-only scaffold: no full-screen intro until there is content to fill it. */
.project-page--factory .tl-page .tl-intro{min-height:0}
.factory-feedback{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-block:clamp(3rem,6vw,6rem);border-top:1px solid #191c2026;scroll-margin-top:6rem}
.factory-feedback h2{font-size:clamp(2.25rem,4.3vw,4.8rem);line-height:1.05;max-width:20ch}
.factory-feedback p{margin:0;max-width:43ch;color:#51575e;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.65}
.factory-feedback a{color:inherit;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.14em}
.factory-feedback a:hover{text-decoration-thickness:.12em}
@media(max-width:850px){.factory-feedback{grid-template-columns:1fr;gap:1.5rem}}

/* Entrance: the film fills the first screen behind the translucent nav. */
.factory-entrance{position:relative;width:100%;height:100svh;height:100dvh;min-height:20rem;overflow:hidden;background:#000}
.factory-entrance__frame{position:absolute;inset:0;overflow:hidden}
.factory-entrance__frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* No phone cut yet: portrait shows the whole 16:9 film below the navigation. */
@media(max-aspect-ratio:1/1){
 .factory-entrance{height:calc(var(--nav-h,69px) + 56.25vw);min-height:0}
 .factory-entrance__frame{top:var(--nav-h,69px)}
}

/* Film copy beats: sized from the frame width like the Spektrum film copy. */
@font-face{font-family:Inter;src:url('/_astro/inter-latin-wght-normal.Dx4kXJAl.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
.factory-entrance{container-type:inline-size;--factory-blur:7px}
/* A soft vignette hides the dark rim a CSS blur leaves at the frame edge. */
.factory-film{position:absolute;inset:0;container-type:size;box-shadow:inset 0 0 7cqw #08090b8c;pointer-events:none;color:#f3f4ed;font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
/* The film stays softly blurred throughout (blur only, no zoom, so the framing matches the live film). */
.factory-entrance__frame>video{filter:blur(var(--factory-blur)) brightness(.8)}
/* Constant left-hand shade behind the copy, so the blur and darkness never change. */
.factory-film::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#08090bb8 0%,#08090b70 38%,#08090b00 72%)}
/* Center each visible text/icon pair, with a shared 5.75cqw gap between the lettering and artwork. */
.factory-film__beat{--layout-text-x:26.68;--layout-text-y:50;--layout-text-size:3.48;--layout-text-width:27.5;--layout-icon-x:66.5;--layout-icon-y:50;--layout-icon-size:19;position:absolute;left:calc(var(--layout-text-x)*1cqw);top:calc(var(--layout-text-y)*1%);transform:translateY(-50%);width:calc(var(--layout-text-width)*1cqw);font-size:calc(var(--layout-text-size)*1cqw);visibility:hidden;transition:visibility 0s .5s}
.factory-film__beat[data-in="6.4"]{--layout-text-x:30.92;--layout-text-width:18.8;--layout-icon-x:62.17}
.factory-film__beat[data-in="11.6"]{--layout-text-x:32.02;--layout-text-width:20.3;--layout-icon-x:62.91}
.factory-film__beat[data-in="16.8"]{--layout-text-x:27.89;--layout-text-width:21.3;--layout-icon-x:63.4}
.factory-film__beat[data-in="22"]{--layout-text-x:31.04;--layout-text-width:20;--layout-icon-x:62.72}
.factory-film__beat.is-on{visibility:visible;transition-delay:0s}
.factory-film__beat>*{opacity:0;transform:translateY(.5em);transition:opacity .5s ease,transform .5s ease}
.factory-film__beat.is-on>*{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.factory-film h2{margin:0;font-size:1em;line-height:1.04;font-weight:500;letter-spacing:-.055em;text-wrap:balance}
.factory-film h2 a{color:inherit;text-decoration:underline;text-decoration-thickness:.035em;text-underline-offset:.12em;pointer-events:auto}
.factory-film h2 a:hover{text-decoration-thickness:.06em}
.factory-film h2 a:focus-visible{outline:1px solid currentColor;outline-offset:.1em}
/* One SVG canvas and shared scale keep the five symbols consistent with the copy. */
.factory-film__art{--factory-art-size:calc(var(--layout-icon-size)*1cqw);position:absolute;left:calc((var(--layout-icon-x) - var(--layout-text-x) - var(--layout-icon-size)/2)*1cqw);top:calc(50% + (var(--layout-icon-y) - var(--layout-text-y))*1cqh);width:var(--factory-art-size);max-width:none;height:var(--factory-art-size);margin-top:calc(var(--factory-art-size) / -2);object-fit:contain}
.factory-film__beat.is-on>.factory-film__art{transition-delay:.15s}
/* End of the run, like the Spektrum film: fade to black, then the Blitzwerk card (opacities set by factory-film.js). */
.factory-film__end{position:absolute;inset:0;background:#000;opacity:0}
.factory-film__card{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:1.875cqw;opacity:0}
.factory-film__card img{display:block;width:22.5cqw;height:auto}
.factory-film__card p{margin:0;font-size:6.5625cqw;line-height:1.12;font-weight:730;letter-spacing:.035em}
/* Phones: a wider, larger headline on the small 16:9 band. */
@container (max-width:44rem){
 .factory-film__beat[data-in]{--layout-text-x:4.5;--layout-text-y:50;--layout-text-size:4.6;--layout-text-width:46;--layout-icon-x:69.6;--layout-icon-y:50;--layout-icon-size:32.2}
}
@media(max-aspect-ratio:1/1){.factory-film{top:var(--nav-h,69px)}}
@media(prefers-reduced-motion:reduce){
 .factory-film__beat>*{transform:none}
}