/* Sinopia.vision — teaser. Film, gesture, origin. */
@font-face{font-family:Sora;src:url(assets/sora-400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/manrope-400.ttf) format('truetype');font-weight:400;font-display:swap}
:root{--ink:#141512;--ivory:#e8e4df;--paper:#e1e0d9;--titanium:#b3a895;--red:#c84b31;--gutter:clamp(24px,4.5vw,88px);--header:76px;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:Manrope,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:var(--ivory)}
h1,h2,p{margin:0}
h1,h2{font-family:Sora,Manrope,sans-serif;font-weight:400;letter-spacing:-.075em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #c98976;outline-offset:5px}
video,img{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:100;top:12px;left:24px;padding:12px;background:var(--paper);color:var(--ink);transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.header{position:fixed;inset:0 0 auto;height:var(--header);padding-inline:var(--gutter);z-index:50;display:flex;align-items:center;justify-content:space-between;background:var(--ink);border-bottom:1px solid #e8e4df1f}
.brand{display:flex;align-items:center;gap:10px;font-family:Sora,sans-serif;font-size:24px;letter-spacing:-1.4px}
.brand img{width:26px;height:26px;object-fit:contain}
.brand-suffix{color:var(--titanium)}
.languages{display:flex;align-items:center;gap:3px;font-size:12px}
.languages button{min-width:36px;min-height:44px;color:#a49f96}
.languages button[aria-pressed=true]{color:var(--ivory)}
.languages>span{color:#736e66}
.hero{margin-top:var(--header)}
.cinema{position:relative;height:calc(100svh - var(--header) - 82px);min-height:510px;max-height:1100px;overflow:hidden;background:#11120f}
.hero-image{position:absolute;inset:0}
.hero-image video{width:100%;height:100%;object-fit:contain}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#10120ed4,transparent 72%),linear-gradient(90deg,#10120e73,transparent 70%);transition:opacity .6s var(--ease)}
.hero-copy{position:absolute;left:var(--gutter);bottom:clamp(50px,7vh,90px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
h1{font-size:clamp(64px,7.5vw,130px);line-height:1.08}
h1>span{display:block}
.watch-film{position:absolute;right:var(--gutter);bottom:clamp(58px,7vh,90px);display:flex;align-items:center;gap:14px;min-height:50px;font-size:14px;transition:opacity .5s var(--ease),visibility .5s}
.play-mark{width:50px;height:50px;display:grid;place-items:center;border:1px solid #e8e4df77;font-size:30px;transition:background .25s,color .25s}
.watch-film:hover .play-mark{background:var(--ivory);color:var(--ink)}
.film-bar{min-height:82px;padding:12px var(--gutter);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(25px,4vw,76px)}
.scroll-cue{display:flex;gap:13px;align-items:center;min-height:44px;font-size:13px}
.scroll-cue>span:first-child{font-size:25px;transition:transform .3s}
.scroll-cue:hover>span:first-child{transform:translateY(4px)}
.film-timeline{display:flex;align-items:center;gap:15px;font-size:11px;color:#bdb8b0;font-variant-numeric:tabular-nums;min-width:90px}
#film-seek{--progress:0%;display:block;appearance:none;-webkit-appearance:none;flex:1;min-width:20px;width:100%;height:32px;cursor:pointer;margin:0;background:transparent}
#film-seek::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,#c98976 var(--progress),#e8e4df40 var(--progress))}
#film-seek::-moz-range-track{height:1px;background:#e8e4df40}
#film-seek::-moz-range-progress{height:1px;background:#c98976}
#film-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:5px;height:11px;margin-top:-5px;border-radius:0;background:#e0d7c8;border:0}
#film-seek::-moz-range-thumb{width:5px;height:11px;border-radius:0;background:#e0d7c8;border:0}
.film-controls{display:flex;align-items:center;gap:22px}
.film-controls button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:12px;color:#c6c1b8}
.film-controls button:hover{color:var(--ivory)}
.icon-button{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0}
.film-controls #fullscreen-toggle{font-size:25px}
#motion-toggle{border:1px solid #e8e4df30;font-size:13px}
.sound-bars{display:flex;align-items:center;gap:3px;width:17px;height:16px}
.sound-bars i{display:block;width:1px;height:6px;background:currentColor}
.sound-bars i:nth-child(2){height:13px}.sound-bars i:nth-child(3){height:9px}.sound-bars i:nth-child(4){height:15px}
#audio-toggle[aria-pressed=true]{color:#d5917c}
.cinema-mode .hero-copy{opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none}
.cinema-mode .watch-film{opacity:0;visibility:hidden;pointer-events:none}
.cinema-mode .hero-shade{opacity:0}
#cinema-screen:fullscreen{inset:0;background:#11120f;width:100%;height:100%}
#cinema-screen:fullscreen video{object-fit:contain;width:100%;height:100%}
.passing{background:var(--paper);color:var(--ink);padding:clamp(75px,9vw,155px) var(--gutter) clamp(65px,8vw,135px)}
.passing h2{font-size:clamp(48px,6.6vw,114px);line-height:1.12}
.diptych{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.6vw,30px);margin-top:clamp(42px,5vw,82px)}
.detail-frame{aspect-ratio:16/9;background:#2a261f;overflow:hidden}
.detail-frame video{height:100%;width:100%;object-fit:cover}
.detail-frame:nth-child(2){margin-top:clamp(40px,7vw,125px)}
.detail-frame:nth-child(2) video{object-position:58% center}
.detail-motion{position:absolute;right:14px;bottom:14px;border:1px solid #e8e4df66;background:#141512c9;color:var(--ivory);font-size:13px}
.origin-line{font-family:Sora,sans-serif;font-size:clamp(38px,5.8vw,100px);line-height:1.15;letter-spacing:-.07em;text-align:right;margin-top:clamp(45px,6vw,105px);color:#665f51}
.manifesto{position:relative;background:#151613;--manifesto-progress:0}
.manifesto-stage{position:relative;min-height:calc(100svh - var(--header));padding:38px var(--gutter);overflow:clip}
.manifesto-top,.manifesto-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:2}
.manifesto-top h2,.manifesto-top>span{font:400 12px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.manifesto-top>span{color:#a6a294;font-size:11px}
.manifesto-words{position:relative;z-index:2;padding-block:100px}
.manifesto-chapter{position:relative;padding-block:50px}
.manifesto-chapter h3{margin:0;font-family:Sora,sans-serif;font-size:clamp(62px,7.8vw,142px);font-weight:400;line-height:1.04;letter-spacing:-.075em}
.manifesto-chapter h3 em{font-style:normal;color:#c88e76}
.manifesto-chapter p{margin-top:32px;font-size:clamp(16px,1.35vw,22px);line-height:1.6;color:#bbb7ad;letter-spacing:-.025em}
.manifesto-chapter:last-child h3{color:var(--ivory)}
.manifesto-bottom{font-size:11px;color:#b3afa3;font-variant-numeric:tabular-nums}
.manifesto-bottom b{font-weight:400;color:var(--ivory)}
.manifesto-rule{height:1px;background:#e8e4df24;flex:1;max-width:320px;overflow:hidden}
.manifesto-rule i{display:block;height:100%;background:#c88e76;transform-origin:left;transform:scaleX(var(--manifesto-progress))}
.manifesto-skip{position:absolute;right:var(--gutter);bottom:20px;min-height:44px;display:flex;align-items:center;font-size:12px;z-index:3;opacity:0}
.manifesto-skip:focus-visible{opacity:1;background:var(--ink);padding-inline:15px}
.imprint{position:absolute;width:min(52vw,760px);right:-1vw;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.72;z-index:1}
.imprint svg{width:100%;height:auto;overflow:visible;color:#a58c70}
.imprint path{vector-effect:non-scaling-stroke;stroke:currentColor;stroke-width:1.15}
.imprint-point{position:absolute;left:48%;top:48%;width:7px;height:7px;background:#e3ad87;border-radius:50%}
.js .manifesto.is-animated{height:350svh}
.js .manifesto.is-animated .manifesto-stage{position:sticky;top:var(--header);height:calc(100svh - var(--header));min-height:580px;display:flex;flex-direction:column;justify-content:space-between}
.js .manifesto.is-animated .manifesto-words{position:absolute;inset:90px var(--gutter) 85px;padding:0;display:grid;align-items:center}
.js .manifesto.is-animated .manifesto-chapter{grid-area:1/1;padding:0;will-change:transform,opacity}
.js .manifesto.is-animated .manifesto-chapter:not(:first-child){opacity:0}
.js .manifesto.is-animated .imprint{will-change:transform,opacity}
.newsletter{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:clamp(80px,9vw,160px) var(--gutter);background:var(--paper);color:var(--ink);position:relative;z-index:3}
.section-index{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:34px}
.newsletter h2{font-size:clamp(52px,5.7vw,104px);line-height:1.1}
.news-heading>p{font-size:clamp(15px,1.2vw,18px);line-height:1.65;color:#5e5d54;margin-top:28px}
.news-form{align-self:center;min-width:0;position:relative}
.news-form>label:first-child{font-size:13px}
.email-line{display:flex;align-items:center;gap:12px;border-bottom:1px solid #615e52;margin-top:10px;transition:border-color .25s}
.email-line:focus-within{border-color:var(--red)}
.email-line input{min-width:0;width:100%;border:0;border-radius:0;font:400 clamp(20px,2vw,34px) Manrope,sans-serif;letter-spacing:-.035em;padding:16px 0 22px;background:transparent;color:var(--ink)}
.email-line input::placeholder{color:#7b786e}
.email-line input:focus-visible{outline-offset:1px}
.email-line button{flex-shrink:0;display:flex;align-items:center;gap:20px;min-height:58px;font-size:13px}
.email-line button>span:last-child{font-size:36px;transition:transform .25s var(--ease)}
.email-line button:hover>span:last-child{transform:translate(4px,-4px)}
.email-line button:disabled{opacity:.55;cursor:wait}
.news-consent{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.5;margin-top:24px;cursor:pointer}
.news-consent input{accent-color:var(--red);width:17px;height:17px;margin:2px 0 0;flex-shrink:0}
.news-privacy{margin:16px 0 0 29px;font-size:12px;color:#636055;line-height:1.7}
.news-privacy summary{cursor:pointer;text-underline-offset:3px;text-decoration:underline;width:fit-content}
.news-privacy p{padding-top:12px;max-width:530px}
.news-response{min-height:30px;margin-top:23px;font-size:15px;line-height:1.6}
.news-response[data-state=error]{color:#923e2a}
.news-response[data-state=success]{color:#375640}
#news-undo{font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:35px;color:#635d51}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.footer{padding:45px var(--gutter) 27px;background:var(--ink)}
.footer-top{display:flex;justify-content:space-between;gap:20px;align-items:center}
.status{display:flex;align-items:center;gap:10px;font-size:13px;color:#bdb8b0}
.status i{display:block;width:5px;height:5px;background:var(--red)}
.sinopia-link{min-height:44px;display:flex;align-items:center;gap:30px;font-size:14px}
.sinopia-link>span{font-size:24px;transition:transform .25s}
.sinopia-link:hover>span{transform:translate(3px,-3px)}
.footer-wordmark{display:block;font-family:Sora,sans-serif;font-size:clamp(55px,13.7vw,235px);letter-spacing:-.083em;line-height:1.35;white-space:nowrap;margin:25px 0 30px}
.footer-wordmark>span{color:var(--titanium)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.06em;color:#aba59a;padding-top:25px;border-top:1px solid #e8e4df25}
.footer-bottom>span:nth-child(2){letter-spacing:0}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.visible{opacity:1;transform:translateY(0)}
.no-script-note{padding:20px var(--gutter);font-size:14px}
html:not(.js) .film-controls,html:not(.js) .film-timeline,html:not(.js) .watch-film,html:not(.js) .detail-motion{display:none}
@media(max-width:1100px){
  .cinema{min-height:470px}
  h1{font-size:8vw}
  .hero-copy{bottom:110px}
  .watch-film{bottom:32px}
  .film-bar{gap:25px}
  .film-controls{gap:12px}
}
@media(max-width:760px){
  :root{--header:68px;--gutter:24px}
  .brand{font-size:21px;letter-spacing:-1.2px;gap:8px}
  .brand img{width:23px;height:23px}
  .languages{font-size:11px;gap:0}
  .languages button{min-width:31px}
  .cinema{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;overflow:visible}
  .hero-copy{position:relative;inset:auto;order:0;padding:40px var(--gutter) 32px;opacity:1!important;visibility:visible!important;transform:none!important}
  h1{font-size:clamp(40px,11.5vw,82px);line-height:1.1}
  .hero-image{position:relative;inset:auto;order:1;aspect-ratio:16/9;width:100%}
  .hero-image video{aspect-ratio:16/9;object-fit:contain}
  .hero-shade,.watch-film{display:none}
  .film-bar{grid-template-columns:1fr auto;gap:2px 15px;padding:10px var(--gutter) 15px;min-height:0}
  .film-timeline{grid-column:1/-1;grid-row:1;font-size:10px;gap:14px}
  .scroll-cue{font-size:12px;gap:10px}
  .film-controls{gap:10px}
  .film-controls button{font-size:12px}
  #cinema-toggle{display:none}
  .film-controls #fullscreen-toggle{font-size:24px;width:34px}
  #motion-toggle{width:36px;height:36px;min-height:36px}
  .sound-bars{width:13px;gap:2px}
  .passing{padding-top:62px;padding-bottom:62px}
  .passing h2{font-size:clamp(43px,10.8vw,75px)}
  .diptych{grid-template-columns:1fr;gap:14px;margin-top:35px}
  .detail-frame{aspect-ratio:16/9}
  .detail-frame:nth-child(2){margin:0;aspect-ratio:16/9}
  .detail-frame:nth-child(2) video{object-position:57% center}
  .origin-line{font-size:clamp(34px,8.8vw,58px);margin-top:35px;text-align:left}
  .manifesto-stage{padding-top:26px;padding-bottom:28px}
  .manifesto-top h2{font-size:11px}
  .manifesto-top>span{font-size:9px;letter-spacing:.03em}
  .manifesto-chapter h3{font-size:clamp(43px,10.8vw,76px);line-height:1.08}
  .manifesto-chapter p{font-size:16px;line-height:1.55;margin-top:25px;max-width:290px}
  .manifesto-words{padding-block:40px}
  .js .manifesto.is-animated{height:330svh}
  .js .manifesto.is-animated .manifesto-stage{min-height:510px}
  .js .manifesto.is-animated .manifesto-words{inset:85px var(--gutter) 95px}
  .imprint{width:104vw;right:-32vw;top:53%;opacity:.3}
  .manifesto-bottom{gap:16px;font-size:10px}
  .manifesto-bottom>span:last-child{max-width:135px;text-align:right;line-height:1.5}
  .manifesto-rule{max-width:80px}
  .newsletter{grid-template-columns:1fr;gap:50px;padding-top:70px;padding-bottom:60px}
  .newsletter h2{font-size:clamp(49px,12.5vw,76px)}
  .section-index{font-size:11px;margin-bottom:26px}
  .news-heading>p{margin-top:22px}
  .email-line{flex-wrap:wrap;gap:0;position:relative}
  .email-line input{font-size:25px;padding-block:18px}
  .email-line button{position:static;width:100%;justify-content:space-between;border-top:1px solid #14151221;font-size:14px}
  .email-line button>span:last-child{font-size:31px}
  .news-consent{font-size:12px;margin-top:22px}
  .news-privacy{font-size:12px}
  .footer{padding-top:29px}
  .status{font-size:12px;gap:8px}
  .sinopia-link{font-size:13px;gap:15px}
  .footer-wordmark{font-size:13.4vw;margin:24px 0}
  .footer-bottom{display:grid;grid-template-columns:1fr auto;gap:16px 10px;font-size:9px;line-height:1.5;padding-top:20px}
  .footer-bottom>span:nth-child(2){grid-row:2;grid-column:1/-1;font-size:10px}
}
@media(max-width:370px){
  :root{--gutter:20px}
  .brand{font-size:19px}
  h1{font-size:38px}
  .film-controls{gap:5px}
  .passing h2{font-size:39px}
  .origin-line{font-size:32px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .manifesto .imprint{transform:translateY(-50%)!important;opacity:.2!important}
}
@media(max-height:700px) and (min-width:761px){.manifesto-chapter h3{font-size:min(6.8vw,88px)}.manifesto-chapter p{font-size:15px;margin-top:20px}.js .manifesto.is-animated .manifesto-stage{min-height:0}}