/* Fraunces edition. This file belongs only to design-v4.html. */
@font-face{
 font-family:AbeFraunces;src:url('assets/fonts-wordmarks/fraunces.woff2') format('woff2');
 font-style:normal;font-weight:100 900;font-display:swap;
}
@font-face{
 font-family:AbeWorkSans;src:url('assets/fonts-pairings/worksans.woff2') format('woff2');
 font-style:normal;font-weight:100 900;font-display:swap;
}
:root{
 --editorial-font:AbeWorkSans,Arial,sans-serif;
 --display-font:AbeFraunces,Georgia,serif;
 --display-axes:'opsz' 28,'SOFT' 25,'WONK' 1;
}
html,body,button,input,textarea,select{font-family:var(--editorial-font);font-synthesis:none}

/* The name sets the width. The three credit words share precisely that row. */
.masthead{padding-top:11px;padding-bottom:11px;align-items:center}
.wordmark{display:inline-grid;grid-template-columns:max-content;flex:none;gap:6px;font-family:var(--display-font);font-size:28px;font-weight:500;line-height:1;letter-spacing:-.04em}
.wordmark .brand-name{
 display:block;margin:0;font:inherit;line-height:1;letter-spacing:inherit;word-spacing:normal;
 font-optical-sizing:none;font-variation-settings:var(--display-axes);color:var(--ink);opacity:1;
}
.wordmark .brand-credits{
 display:flex;justify-content:space-between;align-items:baseline;contain:inline-size;min-width:0;width:100%;
 margin:0;font:500 8px/1.4 var(--editorial-font);letter-spacing:.075em;word-spacing:normal;
 font-variation-settings:normal;color:var(--muted);opacity:1;
}
.wordmark .brand-credits>span{display:block;font:inherit;letter-spacing:inherit;word-spacing:normal;margin:0;opacity:1;color:inherit}
nav{font-family:var(--editorial-font);font-weight:550;letter-spacing:.015em}
.masthead nav{font-size:16px;gap:32px}
.masthead .text-button span{font-size:14px;font-weight:500;margin-left:8px;color:var(--ink);opacity:1}
.masthead #open-index,.masthead #open-index span,.masthead #open-contact{
 font:500 18px/1.1 var(--display-font);font-optical-sizing:none;font-variation-settings:var(--display-axes);
 letter-spacing:-.035em;text-transform:none;font-variant-numeric:normal;margin:0;color:var(--ink);opacity:1;white-space:nowrap;
}
.masthead #open-index,.masthead #open-contact{display:inline-flex;align-items:center;width:auto;min-height:44px;padding:0;border:0}
.masthead #open-contact>.contact-label{font:inherit;font-optical-sizing:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;transform:none}
.masthead nav .contact-button{font-weight:500;border-bottom-color:var(--ink)}
.masthead nav .contact-button span{font-size:28px;font-weight:500;line-height:1}
.text-button span,.position,.index-row>span:first-child,.index-row>span:last-child{font-family:var(--editorial-font);font-variant-numeric:tabular-nums}

/* Warm display type, then a crisp and consistently spaced line of credits. */
.caption-title,.index-row strong,dialog h2,.dialog-brand,.closing-contact h2,body.theater-mode #theater-bio{
 font-family:var(--display-font);font-optical-sizing:none;font-variation-settings:var(--display-axes);
 font-weight:500;letter-spacing:-.035em;
}
.caption-title{font-size:22px;line-height:1.15;text-wrap:balance}
.caption-roles{font:450 10px/1.5 var(--editorial-font);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
body:not(.theater-mode) .project-caption{gap:7px;padding-top:12px;margin-bottom:4px}
body.theater-mode .caption-title{font-size:18px;line-height:1.15;letter-spacing:-.025em}
body.theater-mode .caption-roles{font-size:9px;line-height:1.5;letter-spacing:.1em}
:root[data-theme="dark"] body.theater-mode .project-caption{align-items:center;gap:3px 10px;padding:7px 13px}
:root[data-theme="dark"] body.theater-mode .caption-roles::before{margin-right:10px}
body.theater-mode #theater-bio{font-size:21px;font-weight:500;letter-spacing:-.04em}
/* In upright fullscreen, keep widescreen details directly below the picture.
   Portrait exports retain the existing screen-bottom controls. */
@media(orientation:portrait){
 body.overlay-feed.theater-mode .film[data-format="landscape"] .film-details{
  top:calc(50% + min(50dvh,calc(50vw / var(--media-aspect))));bottom:auto;
 }
}

/* Apply the same hierarchy to the index, contact, and private-screening UI. */
dialog{background:#151515f5}
dialog h2{font-size:49px;line-height:1.08;text-transform:lowercase}
.dialog-header{font-family:var(--editorial-font);font-weight:450;letter-spacing:.14em}
.dialog-brand{font-size:26px;font-weight:600;line-height:1.05;letter-spacing:-.04em}
.dialog-section{font-family:var(--editorial-font);font-size:8px;font-weight:500;letter-spacing:.12em}
.dialog-brandline{align-items:baseline;gap:7px 16px}
.dialog-note{font-family:var(--editorial-font);opacity:1;color:var(--muted);line-height:1.6}
.index-row{grid-template-columns:24px 80px minmax(0,1fr) 35px;gap:20px;padding:18px 0}
.index-thumbnail{--thumbnail-width:80px;--thumbnail-height:50px}
.index-row strong{font-size:19px;line-height:1.25}
.index-row small{font-family:var(--editorial-font);font-weight:400;font-size:9px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;opacity:1;color:var(--muted)}
#contact-dialog p{font-family:var(--editorial-font);font-size:15px;font-weight:400;line-height:1.75;letter-spacing:-.01em}
#bio-copy p+p{margin-top:19px}
.contact-detail{font-family:var(--editorial-font);font-weight:400;letter-spacing:-.025em}
.phone-contact>a{flex:1;align-self:stretch}
.contact-detail[href],.phone-contact>a{touch-action:manipulation}
/* Invisible native links line up with the contact details printed on the
   chosen showreel cover, and leave the picture as soon as playback begins. */
.showreel-poster-contact{display:none;position:absolute;inset:50% auto auto 50%;width:min(100cqw,calc(100cqh * 16 / 9));height:min(100cqh,calc(100cqw * 9 / 16));transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.is-showreel:not(.has-played) .poster[data-contact-card="true"]~.showreel-poster-contact{display:block}
.showreel-poster-contact a{position:absolute;pointer-events:auto;touch-action:manipulation}
.poster-contact-call{left:64%;top:19%;width:31%;height:11%}
.poster-contact-email{left:60%;top:31%;width:38%;height:11%}
.phone-actions,.private-link,.closing-actions a,.private-lock,.private-submit{font-family:var(--editorial-font);font-weight:450;letter-spacing:.025em}
#private-form label{font-family:var(--editorial-font);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
#private-password{font-family:var(--editorial-font);font-weight:400;letter-spacing:.025em}
#private-dialog p,#private-error,.no-js,.skip-link{font-family:var(--editorial-font)}
#private-dialog h2{font-size:40px;line-height:1.1}
/* A compact portrait and a two-line invitation share one quiet composition. */
.closing-contact{position:relative;padding:clamp(40px,7dvh,80px) max(28px,env(safe-area-inset-left))}
.back-to-top{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;color:var(--muted);font-size:10px;letter-spacing:.05em;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
.back-to-top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
body.at-ending .back-to-top{opacity:.72;visibility:visible;pointer-events:auto;transition:opacity .3s ease .12s}
body.at-ending .back-to-top:is(:hover,:focus-visible){opacity:1;color:var(--ink)}
.closing-inner{width:min(100%,820px);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,64px)}
.closing-portrait{width:100%;max-width:300px;max-height:none;aspect-ratio:4/5;border-radius:0}
.closing-copy{min-width:0}
.closing-contact h2{font-size:clamp(36px,3.7vw,50px);font-weight:450;line-height:1.08;letter-spacing:-.035em;text-transform:lowercase;margin:0 0 15px}
.closing-copy>p:not(.closing-eyebrow){font-family:var(--editorial-font);font-size:15px;line-height:1.55;color:var(--muted)}
.closing-actions{gap:26px;margin-top:22px}
.closing-actions a{font-size:13px;font-weight:450;letter-spacing:.015em;line-height:1.4;min-height:44px;border-bottom-color:color-mix(in srgb,var(--ink) 35%,transparent);transition:border-color .2s,color .2s}
.closing-actions a:hover,.closing-actions a:focus-visible{border-bottom-color:var(--ink)}
.closing-actions a span{margin-left:12px;font-size:16px}
.closing-copy>.private-link{font-size:16px;font-weight:450;line-height:1.5;color:var(--ink);min-height:48px}
.feed-footer,.video-state{font-family:var(--editorial-font)}

@media(max-width:700px){
 .masthead{padding-top:9px;padding-bottom:9px}
 .wordmark{font-size:26px;gap:5px}
 .wordmark .brand-credits{font-size:7.5px;letter-spacing:.075em}
 .masthead nav{font-size:14px;gap:16px}
 .masthead .text-button span{font-size:13px}
 .masthead nav{gap:20px}
 .masthead #open-index,.masthead #open-index span,.masthead #open-contact{font-size:16px}
 .masthead nav .contact-button{width:44px;min-height:44px}
 .masthead nav .contact-button span{font-size:27px}
 .caption-title{font-size:20px;line-height:1.17}
 .caption-roles{font-size:9px;letter-spacing:.11em}
 body:not(.theater-mode) .project-caption{padding-top:11px;gap:6px;margin-bottom:3px}
 dialog h2{font-size:40px;letter-spacing:-.035em}
 .dialog-brand{font-size:24px}.dialog-brandline{gap:7px 10px}
 .dialog-section{font-size:7.5px;letter-spacing:.1em}
 #index-dialog{width:calc(100% - 24px);max-width:calc(100% - 24px);padding-left:18px;padding-right:18px}
 .index-row{grid-template-columns:20px 60px minmax(0,1fr);gap:14px}
 .index-row>span:last-child{display:none}
 .index-thumbnail{--thumbnail-width:60px;--thumbnail-height:38px}
 .index-row strong{font-size:17px}.index-row small{font-size:8px}
 #private-dialog h2{font-size:35px}
}
@media(max-width:700px) and (orientation:portrait){
 .closing-contact{padding:32px max(28px,env(safe-area-inset-left)) 40px}
 .closing-inner{width:min(100%,340px);grid-template-columns:1fr;gap:24px;text-align:center}
 .closing-portrait{width:min(54vw,180px,calc(27dvh * .8));max-height:none;justify-self:center}
 .closing-contact h2{font-size:clamp(32px,8.8vw,38px);line-height:1.1;margin-bottom:14px}
 .closing-copy>p:not(.closing-eyebrow){font-size:14px}
 .closing-actions{justify-content:center;gap:24px;margin-top:16px}
}
@media(orientation:landscape) and (max-height:600px){
 .masthead{padding-top:0;padding-bottom:0}
 .wordmark{font-size:21px;gap:0}
 .wordmark .brand-name{display:block}
 .wordmark .brand-credits{display:none}
 .masthead nav{font-size:14px;gap:28px}
 .masthead .text-button span{font-size:12px}
 .caption-title{font-size:18px;line-height:1.15}
 .caption-roles{font-size:8.5px;letter-spacing:.1em}
 body:not(.theater-mode) .project-caption{padding-top:5px;gap:3px;margin-bottom:1px}
 body.theater-mode .caption-title{font-size:17px}
 body.theater-mode .caption-roles{font-size:9px}
 dialog h2{font-size:34px}.dialog-brand{font-size:23px}
 #private-dialog h2{font-size:32px}
 .closing-contact,body.theater-mode .closing-contact{padding:24px max(32px,env(safe-area-inset-left))}
 .closing-inner{width:min(100%,700px);grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,5vw,48px)}
 .closing-portrait{width:min(100%,calc(60dvh * .8));max-height:none;justify-self:center}
 .closing-contact h2{font-size:32px;margin-bottom:12px}
 .closing-copy>p:not(.closing-eyebrow){font-size:14px}
 .closing-actions{margin-top:14px}
 .closing-copy>.private-link{font-size:14px}
}
@media(orientation:landscape) and (max-aspect-ratio:23/10){
 body.theater-mode #theater-bio{font-size:16px;letter-spacing:-.04em}
}

/* Private screenings unlock within the bio, in one quiet horizontal row. */
.inline-screenings{margin-top:22px}
#contact-dialog .inline-private-form,
#contact-dialog .inline-private-unlocked{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:16px;align-items:center}
#contact-dialog #private-form[hidden],
#contact-dialog #private-unlocked[hidden]{display:none}
#contact-dialog #private-form label,
#contact-dialog .inline-private-label{margin:0;font:450 12px/1.4 var(--editorial-font);letter-spacing:.01em;text-transform:none;white-space:nowrap}
.private-entry{display:flex;align-items:center;gap:6px;min-width:0}
#contact-dialog #private-password{height:44px;min-width:0;flex:1;width:0;padding:0 12px;background:transparent;border:1px solid #ffffff40;border-radius:2px;font-size:14px;letter-spacing:0}
#contact-dialog #private-password::placeholder{color:#969696;opacity:1}
#contact-dialog #private-submit{display:grid;place-items:center;justify-content:center;gap:0;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;background:transparent;border:1px solid #ffffff60;border-radius:2px;color:var(--ink);font-size:21px;line-height:1}
#contact-dialog #private-submit:hover{background:#ffffff10;border-color:#ffffffaa}
#contact-dialog #private-submit:disabled{opacity:.45;cursor:wait}
#contact-dialog #private-error{font:400 12px/1.5 var(--editorial-font);color:#e7b6ac;margin:9px 0 0;max-width:none;letter-spacing:0}
#contact-dialog #private-error:empty{display:none}
.private-open-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px;min-width:0}
.private-watch{min-height:44px;padding:0;font:450 12px/1.4 var(--editorial-font);white-space:nowrap}
.private-watch span{margin-left:8px}
#contact-dialog #lock-private{min-height:44px;margin:0;font-size:11px;color:var(--muted);border:0;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){
 #contact-dialog .inline-private-form,#contact-dialog .inline-private-unlocked{gap:12px}
 #contact-dialog #private-form label,#contact-dialog .inline-private-label{font-size:11px}
 #contact-dialog #private-password{font-size:16px;padding-inline:10px}
}

/* Picture-first feed: credits separate the films; titles and controls sit
   within the picture only when requested. Saved editions keep their layout. */
body.overlay-feed:not(.theater-mode) #feed{
 scroll-snap-type:y mandatory;scroll-padding:0;touch-action:pan-y pinch-zoom;
}
body.overlay-feed:not(.theater-mode) .film{
 --picture-height:min(var(--panel-height),var(--frame-height));
 --credits-height:40px;
 height:calc(var(--picture-height) + var(--credits-height));
 /* Hidden would create an intermediate scroll container and steal the
    picture's snap target from the feed. Clip preserves that target. */
 margin-bottom:12px;scroll-snap-align:none;overflow:clip;
}
body.overlay-feed:not(.theater-mode) .film.is-portrait{
 /* Leave a glimpse of neighboring pictures beyond their credits and gap. */
 --picture-height:min(calc(var(--frame-height) * .72),calc((100dvh - var(--header-height)) * .592));
 height:calc(var(--picture-height) + var(--credits-height));
}
body.overlay-feed:not(.theater-mode) .media-stage{
 bottom:auto;height:var(--picture-height);scroll-snap-align:center;scroll-snap-stop:always;
}
body.overlay-feed:not(.theater-mode) .film-credits{
 position:absolute;top:var(--picture-height);left:80px;right:80px;
 margin:0;padding:11px 0 12px;text-align:center;line-height:17px;
}
body.overlay-feed:not(.theater-mode) .film-details{
 left:0;right:0;bottom:0;width:min(100cqw,calc(100cqh * var(--media-aspect)));
 margin-inline:auto;padding:30px 20px 8px;container-type:inline-size;
 background:linear-gradient(transparent,#000b 42%,#000d);color:#fff;
 opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .2s ease,visibility 0s linear .2s;
}
body.overlay-feed:not(.theater-mode) .info-visible .film-details{
 opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease;
}
body.overlay-feed:not(.theater-mode) .project-caption{
 top:0;gap:0;margin:0 0 3px;padding:0;text-shadow:0 1px 8px #0009;
}
body.overlay-feed:not(.theater-mode) .project-caption .caption-roles{display:none}
body.overlay-feed:not(.theater-mode) .caption-title{color:#fff;font-size:22px;line-height:1.2}
body.overlay-feed:not(.theater-mode) .control-button{color:#fff}
body.overlay-feed:not(.theater-mode) .video-state{bottom:calc(var(--credits-height) + 10px)}
/* Let the portrait lead into the ending below the final centered film.
   Its full-height section still snaps to the top and clears the video. */
body.overlay-feed:not(.theater-mode) .closing-contact{align-items:flex-start;scroll-snap-align:start;scroll-snap-stop:always}
@media(max-width:700px) and (orientation:portrait){
 body.overlay-feed:not(.theater-mode) .closing-contact{padding:32px max(28px,env(safe-area-inset-left)) 40px}
 body.overlay-feed:not(.theater-mode) .closing-inner{gap:20px;transform:translateY(calc(var(--closing-progress,0) * max(44px,calc((100dvh - var(--header-height) - 72px - 100%) / 2))));transition:none}
 body.overlay-feed:not(.theater-mode) .closing-portrait{width:min(58vw,208px,calc(30dvh * .8));border-radius:3px;object-position:center 65%}
 body.overlay-feed:not(.theater-mode) .closing-eyebrow{display:none}
 body.overlay-feed:not(.theater-mode) .closing-contact h2{color:#e4ddd2}
 body.overlay-feed:not(.theater-mode) .closing-actions{gap:18px;flex-wrap:nowrap;margin-top:20px}
 body.overlay-feed:not(.theater-mode) .closing-actions a{min-width:44px;justify-content:center}
 body.overlay-feed:not(.theater-mode) .closing-actions a:first-child{min-width:138px;min-height:48px;padding:0 18px;border:0;border-radius:999px;background:#e4ddd2;color:#171714;font-weight:500}
 body.overlay-feed:not(.theater-mode) .closing-actions a:first-child:hover{background:#f4eee5}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:600px){
 body.overlay-feed:not(.theater-mode) .closing-inner{gap:14px}
 body.overlay-feed:not(.theater-mode) .closing-portrait{width:min(46vw,calc(25dvh * .8))}
 body.overlay-feed:not(.theater-mode) .closing-contact h2{font-size:30px;margin-bottom:10px}
 body.overlay-feed:not(.theater-mode) .closing-actions{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
 body.overlay-feed .closing-inner,body.overlay-feed .back-to-top{transition:none!important}
}
/* One focusable picture target per film, including the visible next preview. */
body.overlay-feed .film .next-teaser{display:none}
body.overlay-feed .film .video-tap{visibility:visible;pointer-events:auto}
body.overlay-feed .film .video-tap:focus-visible{outline-offset:-5px}
body.overlay-feed.theater-mode .film-credits{display:none}
@container(max-width:240px){
 body.overlay-feed:not(.theater-mode) .player-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
 body.overlay-feed:not(.theater-mode) .timeline{grid-column:1 / -1;grid-row:2;margin:0}
 body.overlay-feed:not(.theater-mode) .control-button{justify-self:center;max-width:100%}
}
@media(max-width:700px){
 body.overlay-feed:not(.theater-mode) .film{--credits-height:36px;margin-bottom:10px}
 body.overlay-feed:not(.theater-mode) .film-credits{left:20px;right:20px;padding:9px 0 10px}
 body.overlay-feed:not(.theater-mode) .film-details{padding:26px 12px 4px}
 body.overlay-feed:not(.theater-mode) .caption-title{font-size:19px}
}
@media(orientation:landscape) and (max-height:600px){
 body.overlay-feed:not(.theater-mode) .film{--credits-height:32px;margin-bottom:8px}
 body.overlay-feed:not(.theater-mode) .film-credits{left:var(--edge);right:var(--edge);padding:7px 0 8px}
 body.overlay-feed:not(.theater-mode) .caption-title{font-size:18px}
}

/* A simple white-line cinema symbol, bounded by the opening picture. */
.feed-intro{display:none}
body.overlay-feed:not(.theater-mode) .opening-film{
 --intro-reserve:124px;--opening-frame-inset:80px;
 --picture-height:min(var(--panel-height),var(--frame-height),calc(100dvh - 2 * var(--header-height) - 2 * var(--intro-reserve)));
 --opening-picture-width:min(calc(100vw - 2 * var(--opening-frame-inset)),calc(var(--picture-height) * var(--media-aspect)));
 --opening-space:max(176px,min(53.4vw,max(0px,calc((100dvh - 2 * var(--header-height) - var(--picture-height)) / 2))));
 height:calc(var(--opening-space) + var(--picture-height) + var(--credits-height));
 scroll-snap-align:start;scroll-snap-stop:always;
}
body.overlay-feed:not(.theater-mode) .opening-film .media-stage{top:var(--opening-space);scroll-snap-align:none}
body.overlay-feed:not(.theater-mode) .opening-film .film-credits{top:calc(var(--opening-space) + var(--picture-height))}
body.overlay-feed:not(.theater-mode) .feed-intro{
 position:absolute;inset:0 0 auto;height:var(--opening-space);display:grid;overflow:hidden;
 grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;gap:12px;padding:12px 0 22px;text-align:center;
}
.projector-scene{position:relative;container-type:inline-size;width:var(--opening-picture-width);height:calc(var(--opening-picture-width) / 6.8);isolation:isolate;color:#fff}
.projection-screen{position:absolute;left:27%;top:15%;width:46%;height:70%;border:1px solid currentColor;z-index:1;background:#000}
.projection-screen::before{content:"";position:absolute;left:-1px;right:-1px;bottom:100%;height:calc(var(--opening-picture-width) / 6.8 * .15 + 12px);pointer-events:none;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);background:linear-gradient(to top,#ffffff38,#ffffff1c 55%,#ffffff00);filter:blur(1px)}
.projection-screen::after{content:"";position:absolute;left:5%;right:5%;top:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffffdd,transparent);box-shadow:0 -3px 10px #ffffff38}
.projector-symbol{display:block;position:absolute;right:15%;top:0;height:100%;width:8%;pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;z-index:1}
.camera-symbol{left:15%;right:auto;transform:scale(1.2);transform-origin:50% 50%}
.razor-symbol{--editing-loop:1.4s;overflow:visible;transform:translateX(4px)}
.projector-symbol :is(circle,ellipse,rect,path){vector-effect:non-scaling-stroke}
.projector-symbol .reel-hub{fill:currentColor;stroke:none}
.camera-head{transform-box:view-box;transform-origin:47px 61px}
.camera-reel{transform-box:view-box;opacity:.8;stroke-width:.8}
.camera-reel-a{transform-origin:32px 20px}
.camera-reel-b{transform-origin:61px 20px}
.razor-grip{fill:#191919}
.razor-grip-fold{opacity:.55}
.tape-roll,.tape-fill{fill:#000}
.tape-fill{stroke:none}
.tape-strip{transform-box:view-box;transform-origin:62px 80px}
.tape-offcut{transform-box:view-box;transform-origin:95px 70px;opacity:0}
.feed-intro .studio-signature{position:absolute;inset:8% 6%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;white-space:nowrap;color:#fff}
.signature-title{font:normal 500 clamp(22px,4cqw,44px)/1 var(--display-font);letter-spacing:-.04em;word-spacing:normal;font-optical-sizing:none;font-variation-settings:var(--display-axes)}
.signature-foundation{font:400 clamp(8px,1.1cqw,11px)/1.3 var(--editorial-font);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.intro-enter .studio-signature{animation:projection-signature 1s ease-out both}
@keyframes projection-signature{from{opacity:.35}to{opacity:1}}
/* Paint the opening artwork and poster before any decorative motion starts. */
.opening-still,.opening-still *,
.opening-still *::before,.opening-still *::after{animation:none!important}
/* Added only after the opening pair is prepared. Animate existing layers,
   with no texture downloads, canvas work, or per-frame JavaScript. */
.projector-ready .projection-screen::before{animation:projector-beam 4.7s steps(1,end) infinite;animation-play-state:paused}
.projector-ready .projection-screen::after{animation:projector-glint 3.9s linear infinite;animation-play-state:paused}
.projector-ready .signature-title{animation:projector-weave 5.7s steps(1,end) infinite,projector-ink 3.9s linear infinite;animation-play-state:paused}
.projector-ready .signature-foundation{animation:projector-weave 5.7s steps(1,end) infinite;animation-play-state:paused}
.projector-ready .camera-head{animation:camera-tilt 6s ease-in-out infinite;animation-play-state:paused}
.projector-ready .camera-reel{animation:camera-reel-turn 3.6s linear infinite;animation-play-state:paused}
.projector-ready .camera-reel-b{animation-duration:4.4s}
.projector-ready .razor-motion{animation:razor-cut 1.4s linear infinite;animation-delay:.6s;animation-play-state:paused}
.projector-ready .tape-strip{animation:tape-pull var(--editing-loop) linear infinite;animation-play-state:paused}
.projector-ready .tape-offcut{animation:tape-tear var(--editing-loop) linear infinite;animation-delay:var(--editing-loop);animation-play-state:paused}
.projector-ready.projector-running :is(.signature-title,.signature-foundation,.camera-head,.camera-reel,.razor-motion,.tape-strip,.tape-offcut),
.projector-ready.projector-running .projection-screen::before,
.projector-ready.projector-running .projection-screen::after{animation-play-state:running}
/* Four uneven intensity levels, each held for an equal quarter-cycle. */
@keyframes projector-beam{
 0%,100%{opacity:.9}
 25%{opacity:.78}
 50%{opacity:1}
 75%{opacity:.84}
}
@keyframes projector-glint{0%,100%{opacity:.92}23%{opacity:.76}51%{opacity:1}77%{opacity:.84}}
@keyframes projector-ink{0%,100%{opacity:1}23%{opacity:.96}51%{opacity:.99}77%{opacity:.97}}
@keyframes projector-weave{
 0%,100%{transform:translate(0,0)}
 16%{transform:translate(.18px,-.1px)}
 33%{transform:translate(-.16px,.12px)}
 49%{transform:translate(.12px,.06px)}
 65%{transform:translate(-.08px,-.14px)}
 82%{transform:translate(.16px,.1px)}
}
@keyframes camera-reel-turn{to{transform:rotate(360deg)}}
@keyframes camera-tilt{
 0%,50%,100%{transform:rotate(0deg)}
 25%{transform:rotate(-5deg)}
 75%{transform:rotate(5deg)}
}
/* Start at 0.6s: 0.35s left, 0.35s right, then hold 0.7s.
   Each stroke finishes 0.1s before the next tape tear, including the first. */
@keyframes razor-cut{
 0%,50%,100%{transform:translateX(0)}
 25%{transform:translateX(-5px)}
}
/* Pull for 1.4s, then tear and restart instantly at the loop boundary. */
@keyframes tape-pull{
 0%{transform:translateY(0) scaleX(1)}
 100%{transform:translateY(-.7px) scaleX(1.35)}
}
/* The first offcut waits for a completed pull; later offcuts overlap the next. */
@keyframes tape-tear{
 0%{opacity:1;transform:translate(0,-.7px) rotate(0deg)}
 24%{opacity:.8;transform:translate(2px,2px) rotate(3deg)}
 60%,100%{opacity:0;transform:translate(6px,8px) rotate(8deg)}
}
.viewing-hints{display:grid;grid-template-columns:repeat(3,max-content);width:min(272px,calc(100% - 64px));align-items:center;justify-content:space-between;gap:0;font:400 9px/1.25 var(--editorial-font);letter-spacing:.025em;color:#fff}
.gesture-hint{display:flex;align-items:center;gap:5px;white-space:nowrap;opacity:.65}
.rotate-hint{justify-self:center}
.gesture-hint svg{width:16px;height:16px;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
/* Continuous, quiet motion keeps the phone gestures easy to recognize. */
.tap-hand{transform-origin:11px 7px;animation:gesture-tap 1.2s linear infinite}
.swipe-up,.swipe-down{animation:gesture-swipe 1.8s linear infinite}
.swipe-down{animation-delay:-.9s}
.rotate-phone{transform-origin:12px 12px;animation:gesture-rotate 2.4s linear infinite}
.rotate-arrows{opacity:.55}
@keyframes gesture-tap{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(2px) scale(.94)}}
@keyframes gesture-swipe{0%,100%{transform:translateY(2px)}50%{transform:translateY(-2px)}}
@keyframes gesture-rotate{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@media(max-width:700px){
 body.overlay-feed:not(.theater-mode) .opening-film{--opening-frame-inset:0px}
 .projector-scene{height:calc(var(--opening-picture-width) / 3.55)}
 .projection-screen{left:22%;width:56%}
 .projection-screen::before{height:calc(var(--opening-picture-width) * .11)}
 .projector-symbol{right:6%;width:11%}
 .camera-symbol{left:6%;right:auto}
 .signature-title{font-size:clamp(20px,6.7cqw,34px)}
 .signature-foundation{font-size:clamp(7px,2cqw,10px);letter-spacing:.11em}
 .feed-intro .studio-signature{gap:6px}
 .viewing-hints{letter-spacing:0}
 .gesture-hint svg{width:15px;height:15px}
}
@media(max-width:700px) and (max-height:700px){
 body.overlay-feed:not(.theater-mode) .opening-film{--intro-reserve:112px}
}
@media(hover:hover) and (pointer:fine){
 body.overlay-feed .viewing-hints{display:none}
 body.overlay-feed:not(.theater-mode) .opening-film{
  --picture-height:min(var(--panel-height),var(--frame-height),calc((100dvh - var(--header-height) - var(--credits-height) - 80px) / (1 + var(--media-aspect) / 6.8)));
  --opening-space:calc(var(--opening-picture-width) / 6.8 + 32px);
 }
 body.overlay-feed:not(.theater-mode) .feed-intro{grid-template-rows:1fr;gap:0;padding:12px 0 20px}
 .projector-scene{height:calc(var(--opening-picture-width) / 6.8)}
 .projection-screen{left:27%;width:46%}
 .projection-screen::before{height:calc(var(--opening-picture-width) / 6.8 * .15 + 12px)}
 .projector-symbol{right:15%;width:8%}
 .camera-symbol{left:15%;right:auto}
 .signature-title{font-size:clamp(22px,4cqw,44px)}
 .signature-foundation{font-size:clamp(8px,1.1cqw,11px)}
}
/* Quiet Black: the selected desktop signature, with the current upright wordmark. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 body.overlay-feed:not(.theater-mode) .opening-film{
  --opening-space:90px;
  --picture-height:min(var(--panel-height),var(--frame-height),calc(100dvh - 2 * var(--header-height) - 2 * var(--intro-reserve)));
 }
 body.overlay-feed:not(.theater-mode) .feed-intro{padding:0}
 .projector-scene{height:100%}
 .projection-screen{inset:0;width:100%;height:100%;border:0}
 .projection-screen::before,.projection-screen::after,.projector-symbol{display:none}
 .feed-intro .studio-signature{inset:0;flex-direction:row;gap:14px;background:#000;color:#f5f3ed;animation:none}
 .projector-scene .signature-title{font-size:clamp(30px,2.9vw,40px);animation:none}
 .projector-scene .signature-foundation{color:#c7c4bd;font:normal 500 clamp(20px,1.9vw,26px)/1.2 var(--display-font);font-optical-sizing:none;font-variation-settings:var(--display-axes);letter-spacing:-.02em;text-transform:none;animation:none}
 @media(max-height:600px){
  body.overlay-feed:not(.theater-mode) .opening-film{--opening-space:70px;--picture-height:min(var(--panel-height),var(--frame-height),calc(100dvh - var(--header-height) - var(--credits-height) - var(--opening-space) - 28px))}
 }
}
@media(orientation:landscape) and (max-height:600px) and (pointer:coarse){
 body.overlay-feed:not(.theater-mode) .opening-film{--intro-reserve:64px;--opening-space:128px}
 body.overlay-feed:not(.theater-mode) .feed-intro{grid-template-rows:1fr;padding:8px 0 14px;gap:0}
 .projector-scene{height:calc(var(--opening-picture-width) / 3.55)}
 .projection-screen{left:22%;width:56%}
 .projection-screen::before{height:calc(var(--opening-picture-width) * .11)}
 .projector-symbol{right:6%;width:11%}
 .camera-symbol{left:6%;right:auto}
 .signature-title{font-size:clamp(20px,6.7cqw,34px)}
 .signature-foundation{font-size:clamp(7px,2cqw,10px);letter-spacing:.11em}
 .viewing-hints{display:none}
}
@media(prefers-reduced-motion:reduce){
 .gesture-hint,.gesture-hint svg *,.studio-signature{animation:none!important}
 .projector-ready :is(.signature-title,.signature-foundation,.camera-head,.camera-reel,.razor-motion,.tape-strip,.tape-offcut),.projector-ready .projection-screen::before,.projector-ready .projection-screen::after{animation:none!important}
}
/* Each opening keeps its section label beneath the picture. */
body.overlay-feed:not(.theater-mode) .has-fixed-title{--credits-height:70px}
.showreel-title{
 position:absolute;top:calc(var(--opening-space,0px) + var(--picture-height) + 8px);left:20px;right:20px;
 margin:0;text-align:center;color:var(--ink);font:500 22px/1.2 var(--display-font);
 font-optical-sizing:none;font-variation-settings:var(--display-axes);letter-spacing:-.035em;text-transform:lowercase;
 pointer-events:none;z-index:5;
}
body.overlay-feed:not(.theater-mode) .has-fixed-title .film-credits{top:calc(var(--opening-space,0px) + var(--picture-height) + 32px)}
body.overlay-feed:not(.theater-mode) .is-showreel .project-caption{display:none}
body.overlay-feed.theater-mode .showreel-title{top:max(15px,env(safe-area-inset-top));left:80px;right:80px;font-size:18px;text-shadow:0 1px 8px #000,0 1px 3px #000;z-index:6;opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
body.overlay-feed.theater-mode.theater-info-hidden .showreel-title{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
@media(max-width:700px){
 body.overlay-feed:not(.theater-mode) .has-fixed-title{--credits-height:64px}
 .showreel-title{font-size:20px}
 body.overlay-feed:not(.theater-mode) .has-fixed-title .film-credits{top:calc(var(--opening-space,0px) + var(--picture-height) + 30px)}
}
/* A neutral veil quiets the neighboring pictures without changing playback
   or applying an expensive color filter to every decoded frame. */
body.overlay-feed .media-stage::after{
 content:"";position:absolute;inset:0;z-index:1;background:#000;
 opacity:var(--picture-shade,.48);pointer-events:none;transition:opacity .12s linear;
}
body.overlay-feed .is-active .media-stage{--picture-shade:0}
/* Match the film dividers, with a short white leader and a quiet hairline. */
body.overlay-feed .masthead::before,
body.overlay-feed .viewing-hints::after{
 content:"";position:absolute;left:var(--edge);right:var(--edge);bottom:0;height:1px;
 background:linear-gradient(to right,var(--ink) 0 26px,var(--editorial-rule) 26px 100%);
 pointer-events:none;
}
/* This absolute rule uses the intro as its containing block and hides with the tips. */
body.overlay-feed .viewing-hints::after{bottom:8px}
/* Text fades at the viewport edges independently of every video layer. */
body.overlay-feed .masthead::after{content:none}
body.overlay-feed:not(.theater-mode) :is(.feed-intro,.showreel-title,.film-credits,.project-caption,.closing-copy,.video-state){
 --text-edge-color:rgba(0,0,0,var(--text-edge-alpha,1));
 --text-edge-mask:linear-gradient(to bottom,
  var(--text-edge-color) var(--text-fade-top,0px),
  #000 calc(var(--text-fade-top,0px) + var(--text-edge-size,0px)),
  #000 calc(var(--text-fade-bottom,100dvh) - var(--text-edge-size,0px)),
  var(--text-edge-color) var(--text-fade-bottom,100dvh));
 -webkit-mask-image:var(--text-edge-mask);mask-image:var(--text-edge-mask);
}
body.overlay-feed .closing-copy:focus-within{-webkit-mask-image:none;mask-image:none}
@media(prefers-reduced-motion:reduce){body.overlay-feed .media-stage::after{transition:none}}

/* The selected audible iframe stays in one DOM position as films change.
   Keep it beneath the feed so the existing cover, shade and controls retain
   their stacking order; only its selected film opens a transparent window. */
body.overlay-feed #feed{position:relative;z-index:1;background:transparent}
body.overlay-feed #primary-player-layer{
 position:fixed;left:0;top:0;width:0;height:0;z-index:0;
 overflow:hidden;visibility:hidden;pointer-events:none;
 background:var(--paper);transform-origin:center;
}
body.overlay-feed #primary-player-layer iframe{
 display:block;position:absolute;inset:0;width:100%;height:100%;
 border:0;background:var(--paper);pointer-events:none;
}
/* Keep startup pixels covered through snap settling. The full film backing
   catches fractional edge bleed until the moving frame replaces its poster.
   Vimeo stays sized, visible and connected underneath the opaque backing. */
body.overlay-feed .player-wrap{overflow:clip}
/* A brief sound confirmation stays centered even when the controls close. */
body.overlay-feed .sound-feedback{
 position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:7;
 padding:9px 16px;border-radius:999px;background:#000b;color:#fff;
 font:500 14px/1.3 var(--editorial-font);letter-spacing:.01em;white-space:nowrap;
 pointer-events:none;user-select:none;opacity:0;visibility:hidden;
 transition:opacity .18s ease,visibility 0s linear .18s;
}
body.overlay-feed .sound-feedback.is-visible{opacity:1;visibility:visible;transition:opacity .1s ease}
@media(prefers-reduced-motion:reduce){body.overlay-feed .sound-feedback{transition:none}}
body.overlay-feed .film.has-primary.has-played,
body.overlay-feed .film.has-primary.has-played .media-stage,
body.overlay-feed .film.has-primary.has-played .player-wrap{background:transparent}

/* Keep complete titles visible even on compact phones. */
@media(max-width:400px){
 #index-dialog{width:calc(100% - 16px);max-width:calc(100% - 16px);padding-left:14px;padding-right:14px}
 .index-row{grid-template-columns:16px 48px minmax(0,1fr);gap:12px}
 .index-thumbnail{--thumbnail-width:48px;--thumbnail-height:32px}
}
@media(max-width:340px){
 .feed-intro{--signature-size:22px;--signature-caption-size:9px;--signature-gap:7px}
 .index-row strong{font-size:15px}
}