/* Film-first hero, retaining KAMI's existing typography and palette. */
.hero.hero-film{position:relative;isolation:isolate;display:flex;align-items:center;min-height: min(960px,100svh);padding:160px 7vw 100px;background:#192128;color:#f3f1ed;overflow:hidden}
.hero-film::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.3) 65%,rgba(0,0,0,.2))}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-film-content{width:100%;max-width:1100px}
.hero-author{font-size:14px;margin:0 0 32px;color:#d2d5d6}
.hero.hero-film h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(54px,7.6vw,120px);line-height:1.02;letter-spacing:-.065em;font-weight:500;max-width:1000px}
.hero.hero-film .hero-copy{color:#e0e2e3;max-width:490px;margin:32px 0 0;font-size:17px}
.hero-film .button{background:var(--paper);color:var(--ink)}
.hero-film .text-link{border-color:#d7d9db;color:var(--paper)}
.hero-motion{position:absolute;right:4.2vw;bottom:30px;border:1px solid #ffffff70;border-radius:30px;padding:12px 18px;color:white;background:#0005;font-size:12px}
.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:8vw;background:var(--ink);color:var(--paper)}
.faq-intro p{max-width:260px;color:#b9b9b5;line-height:1.6;margin-top:26px}
.faq-list{border-top:1px solid #ffffff30}
.faq details{border-bottom:1px solid #ffffff30}
.faq summary{position:relative;padding:26px 38px 26px 0;cursor:pointer;list-style:none;font-size:clamp(17px,1.65vw,24px);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:24px;color:var(--coral);font-size:27px;font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:0;padding:0 30px 28px 0;color:#b9b9b5;line-height:1.7;font-size:15px;max-width:680px}
.faq summary:focus-visible{outline:2px solid var(--coral);outline-offset:5px}
@media(max-width:760px){.hero.hero-film{min-height:760px;min-height:100svh;padding:140px 5vw 90px}.hero.hero-film h1{font-size:clamp(45px,10.5vw,78px)}.hero.hero-film .hero-copy{font-size:15px}.hero-film .hero-actions{gap:20px;flex-wrap:wrap}.hero-author{font-size:12px}.faq{display:block}.faq-intro{margin-bottom:40px}.faq summary{font-size:18px}.hero-motion{bottom:20px}}

/* Author-supplied property film. */
.work .work-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
[data-work-player]:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.property-player{border:0;padding:0;background:#111;color:white;width:min(1100px,94vw);max-width:94vw;max-height:94svh;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.08)}
.property-player::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(8px)}
.property-player video{display:block;width:100%;max-height:80svh;object-fit:contain;background:#000}
.property-close{display:block;margin:12px 16px 12px auto;padding:12px 16px;border:1px solid #777;background:transparent;color:white;cursor:pointer;font:inherit}
.property-close:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

/* Keep the portrait visible when the wide hero film is cropped. */
.hero-video{object-position:75% center}
@media(max-width:760px){
  .hero-video{object-position:78% center}
  .hero-film::after{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.72) 55%,rgba(0,0,0,.9))}
}

/* Widescreen screening room and original-format project frames. */
.hero.hero-film{display:block;aspect-ratio:21 / 9;min-height:0;padding:0;margin:86px auto 0;width:calc(100% - 8.4vw);max-width:1600px;border:0;background:#000;border-radius:8px}
.hero-screen{position:absolute;inset:0;background:#000}
.hero-screen .hero-video{z-index:0;object-fit:contain;object-position:center}
.hero.hero-film::after{display:none}
.hero-film-content{position:absolute;z-index:1;left:5%;top:50%;transform:translateY(-50%);width:43%;max-width:540px}
.hero.hero-film h1{font-size:clamp(28px,3.7vw,62px);line-height:1.08;letter-spacing:-.045em;max-width:12ch}
.hero-author{font-size:clamp(10px,.9vw,14px);margin-bottom:18px}
.hero.hero-film .hero-copy{font-size:clamp(12px,1.05vw,16px);max-width:34ch;margin:20px 0 0}
.hero-film .hero-actions{margin-top:22px;gap:16px}
.hero-motion{z-index:2;right:20px;bottom:16px;padding:9px 14px}
.film-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px;align-items:start}
.film-card{display:block;min-width:0}
.film-frame{position:relative;aspect-ratio:var(--film-ratio);padding:8px;background:#17191d;border:1px solid #414349;border-radius:14px;box-shadow:0 2px 5px #00000008,0 8px 20px #0000000a,0 20px 50px #00000014;overflow:hidden}
.film-frame img{display:block;width:100%;height:100%;object-fit:contain;border-radius:7px;background:#000}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:54px;padding-left:3px;border:1px solid #ffffff80;border-radius:50%;background:#10111490;color:#fff;backdrop-filter:blur(8px);font-size:18px;transition:background .2s}
.film-card:hover .film-play{background:#101114dd}
.film-caption{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px 3px 0}
.film-caption h3{font:500 clamp(18px,1.8vw,28px)/1.25 Manrope,Arial,sans-serif;letter-spacing:-.035em;margin:0}
.film-caption>span{font-size:25px}
.film-pending .film-frame{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 120%,#343740,#151619 70%);border-color:#45474b;box-shadow:none}
.film-empty-mark{font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.5vw,36px);letter-spacing:-.05em;color:#85868a}
.film-pending .film-caption{color:#777979}
@media(max-width:1000px){.hero-film .hero-copy{display:none}.hero-film .hero-actions{gap:12px}.hero-film .button{padding:11px 14px;font-size:11px}.hero-film .text-link{font-size:11px}}
@media(max-width:760px){
 .hero.hero-film{width:90%;margin-top:86px;aspect-ratio:auto;overflow:hidden;background:#101114}
 .hero-screen{position:relative;width:100%;aspect-ratio:21 / 9}
 .hero-film-content{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:none;padding:26px 24px 32px}
 .hero.hero-film h1{font-size:clamp(32px,8vw,48px);max-width:14ch}
 .hero-author{font-size:11px;margin-bottom:16px}
 .hero.hero-film .hero-copy{display:block;font-size:14px;margin-top:20px;max-width:34ch}
 .hero-film .hero-actions{margin-top:24px;flex-wrap:wrap;gap:20px}
 .hero-motion{top:12px;bottom:auto;right:12px;font-size:10px;padding:7px 10px}
 .film-gallery{grid-template-columns:1fr;gap:32px}
 .film-frame{padding:6px;border-radius:11px}.film-frame img{border-radius:5px}
 .film-caption{padding-top:14px}.film-caption h3{font-size:21px}
}

/* Black surround joins the film to a soft transition into the works section. */
.hero-surround{background:linear-gradient(to bottom,#000 0%,#000 calc(100% - 180px),#101010 calc(100% - 145px),#555451 calc(100% - 95px),#c4c2be calc(100% - 40px),var(--paper) 100%);padding:86px 0 180px}
.hero-surround .hero.hero-film{margin-top:0;border-radius:0;background:#000}
.nav{background:rgba(0,0,0,.94);color:var(--paper)}
.nav .nav-links{color:#d5d4d1}
.nav .nav-cta{color:var(--paper);border-color:#ffffff80}
#works.section{padding-top:48px}
@media(max-width:760px){
 .hero-surround{padding-top:86px;padding-bottom:120px;background:linear-gradient(to bottom,#000 0%,#000 calc(100% - 120px),#252525 calc(100% - 90px),#a3a19e calc(100% - 40px),var(--paper) 100%)}
 .hero-surround .hero.hero-film{background:#000}
 #works.section{padding-top:32px}
}

/* Feather the picture into its black surround without fading the text. */
.hero-screen .hero-video{
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 4%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 6%,#000 87%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent 0%,#000 4%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 6%,#000 87%,transparent 100%);
 mask-composite:intersect;
}
.hero-surround{background:linear-gradient(to bottom,#000 0%,#000 calc(100% - 180px),#080808 calc(100% - 157px),#242424 calc(100% - 130px),#585754 calc(100% - 98px),#9b9995 calc(100% - 65px),#cfcdc8 calc(100% - 32px),var(--paper) 100%)}
@media(max-width:760px){.hero-surround{padding-bottom:180px}}

/* Clean, original-format film gallery. */
#works .film-gallery{display:flex;align-items:flex-start;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:12px 4px 26px;border-radius:0;background:none;scrollbar-width:thin;scrollbar-color:#aaa9a5 transparent}
#works .film-card{flex:0 0 330px;scroll-snap-align:start}
#works .film-frame{padding:0;border:0;border-radius:6px;background:transparent;box-shadow:0 2px 5px rgba(0,0,0,.025),0 8px 18px rgba(0,0,0,.045)}
#works .film-frame img{border-radius:6px}
#works .section-head{border-bottom:0;margin-bottom:34px;padding-bottom:0}
#works .section-title{font-family:Manrope,Arial,sans-serif;font-weight:400;font-size:clamp(34px,4.8vw,72px);line-height:1.12;letter-spacing:-.055em}
#works .film-caption>span{display:none}
#works .film-caption{padding:16px 2px 0;gap:12px}
#works .film-caption h3{font-size:19px;line-height:1.35}
#works .film-play{width:44px;height:44px;font-size:15px;background:rgba(255,255,255,.9);color:#101114;border:0;backdrop-filter:none}
#works .film-card:hover .film-play{background:#fff}
.film-navigation{display:flex;justify-content:space-between;align-items:center;padding:18px 4px 0}
.film-counter{font-size:12px;color:#646561;font-variant-numeric:tabular-nums}
.film-arrows{display:flex;gap:10px}
.film-arrows button{width:44px;height:44px;border-radius:50%;border:1px solid #10111430;background:#ffffff50;font-size:23px}
.film-arrows button:disabled{opacity:.3;cursor:default}
.property-player{width:min(720px,92vw);max-width:92vw;border-radius:14px;box-shadow:0 8px 24px #00000010,0 20px 50px #00000014}
.property-player video{max-height:65svh}
.property-close{padding:8px 12px;margin:10px 12px 10px auto;border-radius:20px;font-size:12px}
@media(max-width:760px){#works .film-gallery{gap:18px;padding:10px 4px 24px;scroll-padding-inline:4px}#works .film-card{flex-basis:min(330px,76vw)}#works .film-caption h3{font-size:17px}.property-player{width:92vw}}