:root{--site-font:Helvetica,sans-serif;--paper:#fff;--ink:#000;--muted:#676660;--line:#d7d5cf;font-family:var(--site-font);color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}button{border:0;background:none}p,h1,h2{margin:0}::selection{background:#d5d0c6}.skip{position:fixed;top:-80px;left:20px;background:var(--paper);padding:12px;z-index:30}.skip:focus{top:10px}.header{height:116px;margin:0 42px;display:flex;justify-content:space-between;align-items:center;position:relative;border-bottom:1px solid var(--line);font-size:13px}.count{color:var(--muted);margin-left:9px}.header nav{display:flex;gap:28px}.header a:not(.logo):hover{text-decoration:underline;text-underline-offset:5px}.logo{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:86px;height:76px;z-index:20;font-family:var(--site-font);font-size:83px;font-weight:900;line-height:.85;letter-spacing:-9px;text-align:center;padding-right:9px;transform-origin:center center}.logo-solid,.logo-image{position:absolute;inset:0}.logo-image{color:transparent;background:url('assets/ro-logo-poster.webp') center/cover;background-clip:text;-webkit-background-clip:text;opacity:0}.intro .logo{animation:logo-arrive 1.55s both cubic-bezier(.22,1,.36,1)}.intro .logo-image{animation:ink-in 1.55s both}.intro .logo-solid{animation:ink-out 1.55s both}.intro main,.intro .header nav,.intro .work-link{animation:page-in 1.55s both}.intro .header{border-color:transparent}@keyframes logo-arrive{0%,22%{transform:translate(-50%,calc(50svh - 56px)) scale(3.15)}100%{transform:translate(-50%,0) scale(1)}}@keyframes ink-in{0%,50%{opacity:1}85%,100%{opacity:0}}@keyframes ink-out{0%,45%{opacity:0}85%,100%{opacity:1}}@keyframes page-in{0%,45%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}main{padding:0 42px}.section-heading{display:flex;justify-content:space-between;align-items:end;padding:38px 0 32px;font-size:14px;line-height:1.5}.section-note{text-align:right;font-size:12px}.section-note span{color:var(--muted)}.projects{display:grid;grid-template-columns:1.15fr 1fr;column-gap:7.5%;row-gap:94px}.project:first-child{grid-column:1/-1;width:83%;justify-self:center}.project:nth-child(3){padding-top:100px}.poster{display:block;position:relative;overflow:hidden;background:#ddd9cf;aspect-ratio:1920/1318}.poster img{display:block;width:100%;height:100%;object-fit:cover}.watch{position:absolute;bottom:22px;left:24px;display:flex;gap:12px;align-items:center;color:white;font-size:12px;text-shadow:0 1px 6px #000;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}.play{border:1px solid #fff8;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;background:#0002}.poster:hover .watch,.poster:focus-visible .watch{opacity:1;transform:none}.project-caption{display:flex;justify-content:space-between;gap:16px;padding-top:18px}.project-caption h2{font-size:19px;font-weight:400;letter-spacing:-.5px;margin-bottom:5px}.project-caption p{font-size:13px;color:var(--muted)}.number{font-size:11px;padding-top:4px;color:var(--muted)}.project-caption a:hover{text-decoration:underline;text-underline-offset:4px}.about{margin-top:132px;border-top:1px solid var(--line);padding:38px 0 58px}.eyebrow{font-size:12px;margin-bottom:42px}.about h1{font-size:clamp(34px,4.9vw,76px);font-weight:400;letter-spacing:-.055em;line-height:1.12}.about-bottom{display:flex;justify-content:space-between;font-size:12px;margin-top:48px;color:var(--muted)}footer{border-top:1px solid var(--line);padding:38px 0 24px}.contact-title{font-size:clamp(38px,5vw,76px);letter-spacing:-.055em;line-height:1.06}.pending{font-size:12px;color:var(--muted);margin-top:24px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:100px;font-size:11px}.footer-bottom button{font-size:11px;padding:8px}.footer-bottom a:hover,.about-bottom a:hover{text-decoration:underline;text-underline-offset:4px}dialog{width:100vw;max-width:none;height:100dvh;max-height:none;border:0;padding:30px 40px;background:#11110f;color:var(--paper)}dialog::backdrop{background:#111}.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:14px}.viewer-top button{padding:12px 0 12px 20px}.viewer-top button span{font-size:23px;margin-left:12px}#player{height:calc(100% - 110px);display:grid;place-items:center}#player iframe{width:100%;height:100%;border:0}.viewer-note{text-align:center;font-size:12px;color:#aaa}.noscript{padding:30px}.noscript a{text-decoration:underline}@media(min-width:1600px){main,.header{max-width:1600px;margin-left:auto;margin-right:auto}}@media(max-width:700px){.header{height:94px;margin:0 20px;font-size:11px}.logo{top:20px;font-size:66px;width:70px;height:60px;letter-spacing:-7px;padding-right:7px}.header nav{gap:16px}.count{display:none}main{padding:0 20px}.section-heading{padding:28px 0 24px;font-size:12px}.section-note{font-size:10px}.projects{display:block}.project:first-child{width:100%}.project{margin-bottom:46px}.project:nth-child(3){padding-top:0}.project-caption{padding-top:13px}.project-caption h2{font-size:18px}.project-caption p{font-size:12px}.watch{opacity:1;transform:none;bottom:14px;left:14px}.watch-label{display:none}.play{width:30px;height:30px}.about{margin-top:72px;padding-top:26px}.eyebrow{margin-bottom:30px}.about-bottom{gap:20px}.footer-bottom{margin-top:70px;gap:12px;font-size:10px}.footer-bottom button{font-size:10px}dialog{padding:15px 20px}.viewer-top{font-size:12px}@keyframes logo-arrive{0%,22%{transform:translate(-50%,calc(50svh - 50px)) scale(2.9)}100%{transform:translate(-50%,0) scale(1)}}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.logo-image{opacity:0!important}.logo-solid{opacity:1!important}} 

/* Simplified masthead and email-only footer. */
.header .logo{top:50%;margin-top:-38px}
#work{padding-top:40px}
#info{margin-top:120px;padding:44px 0 48px;text-align:center;font-size:14px;border-top:0}
#info a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:700px){.header .logo{margin-top:-30px}#work{padding-top:28px}#info{margin-top:64px;padding:28px 0 40px;font-size:13px}}

/* One film per screen, with native magnetic scrolling. */
:root{--masthead-height:116px}
html{scroll-snap-type:y proximity;scroll-padding-top:var(--masthead-height)}
.header{position:fixed;top:0;left:42px;right:42px;margin:0;height:var(--masthead-height);background:transparent;border-bottom:0;pointer-events:none;z-index:25}
main{padding-top:var(--masthead-height)}
#work{padding-top:0}
.projects{display:block}
.project,.project:first-child,.project:nth-child(3){width:100%;height:calc(100svh - var(--masthead-height));min-height:320px;margin:0;padding:24px 0 22px;display:flex;flex-direction:column;align-items:center;scroll-snap-align:start;scroll-snap-stop:normal}
.poster{flex:1;min-height:0;width:100%;aspect-ratio:auto;background:transparent}
.poster img{object-fit:contain}
.project-caption{flex:none;text-align:center;justify-content:center;padding-top:16px}
.watch{left:50%;transform:translate(-50%,5px)}
.poster:hover .watch,.poster:focus-visible .watch{transform:translate(-50%,0)}
#info{margin:0;min-height:180px;padding:70px 0;display:grid;place-items:center;scroll-snap-align:end;scroll-snap-stop:normal}
@media(min-width:1600px){.header{max-width:none}}
@media(max-width:700px){:root{--masthead-height:94px}.header{left:20px;right:20px}#work{padding-top:0}.project,.project:first-child,.project:nth-child(3){padding:18px 0 24px}.watch{transform:translate(-50%,0)}#info{margin:0;padding:60px 0;min-height:160px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:y proximity}}
/* Keep the play affordance on the image at every aspect ratio. */
.watch{top:50%;bottom:auto;transform:translate(-50%,-50%)}
.poster:hover .watch,.poster:focus-visible .watch{transform:translate(-50%,-50%)}

/* Only the floating masthead links intercept pointer input. */
.header a{pointer-events:auto}

/* Firmer settling without forcing a stop at every film. The inter-film gap
   carries the previous caption above the masthead before the next snap. */
html{scroll-snap-type:y mandatory}
.project:not(:last-child){margin-bottom:calc(var(--masthead-height) + 40px)}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:y proximity}}

/* Centered mark: one-second hold, then movement at 90% speed. */
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;font-size:inherit;line-height:1.2;white-space:nowrap}
.brand-prefix{font-weight:400}
.header .brand .logo{position:relative;left:auto;top:auto;margin:0;padding:0;width:1.05em;height:1.2em;font-size:inherit;line-height:1.2;letter-spacing:-.09em;transform:none;--intro-scale:18;--intro-x:0px}
.intro .brand .logo{animation:credit-arrive 1.34333s 1s both cubic-bezier(.22,1,.36,1)}
.intro .header nav,.intro .work-link{animation:masthead-reveal .44444s 2.34333s both ease-out}
.intro .logo-image{animation:ink-in 1.34333s 1s both}
.intro .logo-solid{animation:ink-out 1.34333s 1s both}
.intro main{animation:project-arrive .95s 2.34333s both cubic-bezier(.22,1,.36,1)}
@keyframes project-arrive{from{opacity:1;transform:translateY(100svh)}to{opacity:1;transform:translateY(0)}}
html.intro{overflow:hidden;scroll-snap-type:none}
.intro body{overflow:hidden}
@keyframes credit-arrive{0%{transform:translate(var(--intro-x),calc(50svh - var(--masthead-height)/2)) scale(var(--intro-scale))}100%{transform:translate(0,0) scale(1)}}
@keyframes masthead-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.header .brand .logo{--intro-scale:17}}

/* Interaction releases the hold and preserves the full shrink/fade sequence. */
.intro.intro-releasing .brand .logo,
.intro.intro-releasing .logo-image,
.intro.intro-releasing .logo-solid{animation-delay:0s}
.intro.intro-releasing .header nav,
.intro.intro-releasing .work-link,
.intro.intro-releasing main{animation-delay:1.34333s}

/* PNG cursor assets work across Safari/WebKit and Chromium. Touch input
   does not display a cursor; no pointer-media assumption is needed. */
html,body{cursor:url("assets/cursor-dot-black.png") 8 8,auto}
a,button,[role="button"]{cursor:url("assets/cursor-dot-black.png") 8 8,pointer}
.poster,.poster *{cursor:url("assets/cursor-dot-black.png") 8 8,pointer}
.poster.over-image,.poster.over-image *{cursor:url("assets/cursor-dot-project.png") 8 8,pointer}

/* Project labels share the masthead's typography. */
.project-caption h2,.project-caption p{font-family:var(--site-font);font-size:13px;font-weight:400;letter-spacing:normal;line-height:normal}
@media(max-width:700px){.project-caption h2,.project-caption p{font-size:11px}}

/* Pure white pages; a black opening that clears as the mark settles. */
[hidden]{display:none!important}
html.intro{animation:intro-paper 1.34333s 1s both linear}
.intro.intro-releasing{animation-delay:0s}
@keyframes intro-paper{0%,15%{background:#000}90%,100%{background:#fff}}
.intro .brand .logo{--departure-scale:calc(var(--intro-scale)*1.08);animation:logo-breathe 1s both ease-in-out,credit-arrive 1.34333s 1s forwards cubic-bezier(.22,1,.36,1)}
@keyframes logo-breathe{from{transform:translate(0,calc(50svh - var(--masthead-height)/2)) scale(var(--intro-scale))}to{transform:translate(0,calc(50svh - var(--masthead-height)/2)) scale(var(--departure-scale))}}
@keyframes credit-arrive{from{transform:translate(0,calc(50svh - var(--masthead-height)/2)) scale(var(--departure-scale))}to{transform:translate(0,0) scale(1)}}
.intro.intro-releasing .brand .logo{animation:credit-arrive 1.34333s 0s both cubic-bezier(.22,1,.36,1)}
html.info-page{scroll-snap-type:none}
#info{display:block;min-height:calc(100svh - var(--masthead-height));margin:0;padding:24px 0 60px;text-align:left;scroll-snap-align:none}
#info p{max-width:1100px;font-size:clamp(24px,2.2vw,36px);font-weight:600;letter-spacing:-.035em;line-height:1.12}
#film-dialog{background:#000;color:#fff;padding:0;margin:0;inset:0}
#film-dialog[open]{display:grid;place-items:center}
#film-dialog::backdrop{background:#000}
#player{display:block;flex:none;max-width:calc(100vw - 40px);max-height:calc(100dvh - 80px)}
#close-film{position:absolute;right:28px;top:28px;width:40px;height:40px;z-index:2;cursor:url("assets/cursor-dot-project.png") 8 8,pointer}
#close-film span::before,#close-film span::after{content:"";position:absolute;left:10px;top:19px;width:20px;height:1px;background:#fff;transform:rotate(45deg)}
#close-film span::after{transform:rotate(-45deg)}
@media(max-width:700px){#info{padding-top:18px}#close-film{right:10px;top:10px}}

/* Keep pointer returns clean while retaining visible keyboard focus. */
.pointer-input .poster:focus{outline:none}
#film-dialog{outline:none;cursor:url("assets/cursor-dot-black.png") 8 8,auto}
#player,#player iframe{cursor:url("assets/cursor-dot-project.png") 8 8,pointer}
.info-links{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:36px;font-size:clamp(24px,2.2vw,36px);font-weight:600;letter-spacing:-.035em;line-height:1.12}
#info{place-items:normal}
.info-links{width:100%;max-width:1100px;margin-left:0;margin-right:0}

/* The supplied animation runs 5.5 seconds: grow for 4.5, land at 5.5. */
.intro .brand .logo{animation:logo-breathe 4.5s both ease-in-out,credit-arrive 1s 4.5s forwards cubic-bezier(.22,1,.36,1)}
.intro .logo-image{animation:ink-in 1s 4.5s both}
.intro .logo-solid{animation:ink-out 1s 4.5s both}
html.intro{animation:intro-paper 1s 4.5s both steps(1,end)}
@keyframes intro-paper{from{background:#000}to{background:#fff}}
@keyframes ink-in{0%,99%{opacity:1}100%{opacity:0}}
@keyframes ink-out{0%,99%{opacity:0}100%{opacity:1}}
.intro main{animation-delay:5.5s}
.intro .header nav,.intro .work-link{animation-delay:5.5s}
.intro.intro-releasing .brand .logo{animation:credit-arrive 1s 0s both cubic-bezier(.22,1,.36,1)}
.intro.intro-releasing .logo-image,.intro.intro-releasing .logo-solid,html.intro.intro-releasing{animation-delay:0s}
.intro.intro-releasing main,.intro.intro-releasing .header nav,.intro.intro-releasing .work-link{animation-delay:1s}
/* Center the info group in the viewport, using the masthead type scale. */
#info{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;min-height:calc(100svh - var(--masthead-height));padding:24px 0 calc(var(--masthead-height) + 24px)}
#info p,.info-links{font-family:var(--site-font);font-size:13px;font-weight:400;letter-spacing:normal;line-height:1.5}
#info p{max-width:480px}
.info-links{width:auto;align-items:center;margin:0;gap:5px}
#film-dialog{cursor:url("assets/cursor-dot-project.png") 8 8,auto}
#player,#player iframe{cursor:url("assets/cursor-dot-black.png") 8 8,pointer}
@media(max-width:700px){#info p,.info-links{font-size:11px}}

/* A custom interaction surface keeps Vimeo delivery behind our own controls. */
#player{position:relative}
#player iframe{display:block;pointer-events:none}
.film-surface{position:absolute;inset:0;width:100%;height:100%;padding:0;cursor:url("assets/cursor-dot-black.png") 8 8,pointer}
.film-controls{position:absolute;bottom:12px;left:20px;right:20px;display:flex;align-items:center;gap:24px;opacity:0;transition:opacity .25s;pointer-events:none}
.controls-visible .film-controls,.film-controls:has(:focus-visible){opacity:1;pointer-events:auto}
.film-mute{flex:none;color:#fff;font:400 13px var(--site-font);padding:10px 0;min-width:48px;text-align:right;cursor:url("assets/cursor-dot-black.png") 8 8,pointer;text-shadow:0 1px 4px #0005}
.film-progress{appearance:none;-webkit-appearance:none;flex:1;width:0;min-width:0;height:32px;margin:0;background:transparent;cursor:url("assets/cursor-dot-black.png") 8 8,pointer}
.film-progress::-webkit-slider-runnable-track{height:1px;background:#fff}
.film-progress::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;border:0;width:10px;height:10px;margin-top:-4.5px;border-radius:50%;background:#fff}
.film-progress::-moz-range-track{height:1px;background:#fff}
.film-progress::-moz-range-thumb{border:0;width:10px;height:10px;border-radius:50%;background:#fff}
.film-progress:focus-visible{outline:1px solid white;outline-offset:4px}
.film-status{position:absolute;left:0;right:0;top:100%;padding-top:14px;color:#fff;text-align:center;font-size:13px}
.film-status a{text-decoration:underline;cursor:url("assets/cursor-dot-project.png") 8 8,pointer}
@media(max-width:700px){.film-controls{left:12px;right:12px;bottom:4px;gap:18px}.film-mute{font-size:11px}}

/* Original PNG alpha silhouette, with its transparent margins compensated in CSS. */
.header .brand .logo{width:1.34884em;height:.8em}
.logo-solid,.logo-image{-webkit-mask-image:url('assets/ro-mark.png');mask-image:url('assets/ro-mark.png');-webkit-mask-size:113.850575% 138.662791%;mask-size:113.850575% 138.662791%;-webkit-mask-position:87.136929% 29.323308%;mask-position:87.136929% 29.323308%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.logo-solid{background:#000}
.logo-image{background:url('assets/ro-logo-poster.webp') center/cover;background-clip:border-box;-webkit-background-clip:border-box}

/* Native fullscreen retains the custom player controls. */
.film-fullscreen{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:5px;color:#fff;cursor:url("assets/cursor-dot-black.png") 8 8,pointer}
.film-fullscreen svg{width:24px;height:24px}
.film-fullscreen .reduce-icon,.is-fullscreen .expand-icon{display:none}
.is-fullscreen .reduce-icon{display:block}
.film-fullscreen:focus-visible{outline:1px solid #fff;outline-offset:2px}
#player:fullscreen{width:100vw!important;height:100dvh!important;max-width:none;max-height:none;background:#000}
#player:-webkit-full-screen{width:100vw!important;height:100vh!important;max-width:none;max-height:none;background:#000}

/* Hold the selected still in its original position until video is playing. */
#player{position:absolute}
.film-loading-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#player:fullscreen,#player:-webkit-full-screen{left:0!important;top:0!important}
#film-dialog,#film-dialog *{cursor:url("assets/cursor-viewer-white.png") 8 8,auto!important}
#film-dialog.cursor-idle,#film-dialog.cursor-idle *{cursor:none!important}
.film-surface:focus,.film-surface:focus-visible{outline:none}

/* Touch-screen fixes preserve desktop entrance and player geometry. */
@media(max-width:700px){
  .header .brand .logo{display:block}
  .logo-solid,.logo-image{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}
  .intro-assets-pending .brand .logo,.intro-assets-pending .logo-image,.intro-assets-pending .logo-solid,
  .intro-assets-pending main,.intro-assets-pending .header nav,.intro-assets-pending .work-link,
  html.intro-assets-pending{animation-play-state:paused!important}
  .film-fullscreen{width:44px;height:44px}
}
#player.is-expanded{position:fixed;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none;max-height:none;background:#000}
#player.is-expanded .film-controls{bottom:max(12px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}

/* Render the mobile entrance at its displayed size, then scale down. */
@media(max-width:700px){
  .intro .header .brand .logo{width:calc(1.34884em * 17);height:calc(.8em * 17);--intro-scale:1;--departure-scale:1.08;animation:logo-breathe-mobile 4.5s both ease-in-out,credit-arrive-mobile 1s 4.5s forwards cubic-bezier(.22,1,.36,1)}
  .intro.intro-releasing .header .brand .logo{animation:credit-arrive-mobile 1s 0s both cubic-bezier(.22,1,.36,1)}
  .intro .logo-solid,.intro .logo-image{transform:none;-webkit-backface-visibility:visible;backface-visibility:visible}
  @keyframes logo-breathe-mobile{from{transform:translateY(calc(50svh - var(--masthead-height)/2)) scale(1)}to{transform:translateY(calc(50svh - var(--masthead-height)/2)) scale(1.08)}}
  @keyframes credit-arrive-mobile{from{transform:translateY(calc(50svh - var(--masthead-height)/2)) scale(var(--departure-scale))}to{transform:translateY(0) scale(.0588235294)}}
}
.film-mobile-mute{display:none;color:#fff;font:400 11px var(--site-font);padding:10px 0;min-width:44px;min-height:44px}
@media(max-width:700px),(hover:none) and (pointer:coarse){
  .film-mobile-mute{display:block}
  .film-controls{gap:14px}
  #player.is-fullscreen,#player.is-expanded{width:100dvw!important;height:100dvh!important;max-width:none;max-height:none;background:#000}
  #player.is-fullscreen .film-controls{bottom:max(8px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
  #film-dialog,#film-dialog::backdrop,#player iframe{background:#000}
}

/* Keep mobile captions attached to the painted image, not its empty flex area. */
@media(max-width:700px),(hover:none) and (pointer:coarse){
  .project,.project:first-child,.project:nth-child(3){justify-content:center}
  .poster{flex:0 0 auto;height:min(calc((100vw - 40px) * .686632),calc(100svh - var(--masthead-height) - 100px))}
  .project-caption{padding-top:10px}
  .projects{padding-bottom:max(0px,calc(100dvh - 100svh));overflow-anchor:none}
  html:not(.info-page):not(.intro){overscroll-behavior-y:none}
}

.logo-video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.intro-assets-pending .brand .logo,.intro-assets-pending .logo-image,.intro-assets-pending .logo-solid,
.intro-assets-pending main,.intro-assets-pending .header nav,.intro-assets-pending .work-link,
html.intro-assets-pending{animation-play-state:paused!important}

/* Interactive scratch-mask intro. The image can later be replaced by video. */
.opening-screen{display:none}
html.opening{overflow:hidden;scroll-snap-type:none;overscroll-behavior:none;background:#000}
.opening body{position:fixed;inset:0;overflow:clip;touch-action:none}
.opening .opening-screen{display:block;position:fixed;inset:0;z-index:100;background:#000;overflow:hidden;touch-action:none;opacity:1;transition:opacity .8s ease;cursor:none!important}
.opening-screen *{cursor:none!important}
.intro-footage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.intro-ready .intro-footage{visibility:visible}
.intro-mask{position:absolute;inset:0;width:100%;height:100%}
.intro-brush{visibility:hidden;position:absolute;left:50%;top:50%;width:10px;height:10px;border:1px solid #fff9;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.opening .header,.opening main{opacity:0}
.opening main{transform:translateY(100svh)}
html.opening.opening-exit{background:var(--paper)}
.opening-exit body{background:var(--paper)}
.opening-exit .opening-screen{opacity:0}
.opening-exit .intro-brush{visibility:hidden}
.opening-exit .opening-screen,.opening-exit .opening-screen *{cursor:url("assets/cursor-viewer-white.png") 8 8,auto!important}
.opening-exit .header{opacity:1}
.opening-exit main{opacity:1;animation:project-arrive .95s both cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.opening-exit .opening-screen{transition:none}.opening-exit .header,.opening-exit main{transition:none}.opening-exit main{transform:none}}

/* Desktop editorial captions; mobile retains its original stacked captions. */
.project-details,.film-heading,.film-credits{display:none}
@media(min-width:701px) and (hover:hover) and (pointer:fine){
  .project{--image-width:min(calc(100% - 360px),calc((100svh - var(--masthead-height) - 98px) * var(--project-ratio)));position:relative}
  .project .poster{order:2;flex:none;width:var(--image-width);height:auto;aspect-ratio:var(--project-ratio)}
  .project .project-caption{position:absolute;top:24px;right:calc(50% + var(--image-width) / 2 + 24px);width:156px;text-align:left;justify-content:flex-start;padding:0;line-height:18px}
  .project-caption>div{display:block}
  .project-caption h2{margin:0}
  .project-caption h2,.project-caption p{line-height:18px}
  .project-caption p{color:#000}
  .project-details{display:block;position:absolute;top:24px;left:calc(50% + var(--image-width) / 2 + 24px);width:156px;font:13px/1.5 var(--site-font);text-align:left;color:#000}
  .film-heading,.film-credits{display:block;position:absolute;color:#fff;font:13px/1.5 var(--site-font);text-align:left;white-space:pre-line}
  .film-heading{top:0;right:calc(100% + 24px);width:156px;margin:0}
  .film-credits{top:0;left:calc(100% + 24px);width:var(--credits-width,156px);max-height:100%;overflow:auto;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:#555 transparent;overscroll-behavior:contain}
  #player:fullscreen .film-heading,#player:fullscreen .film-credits,#player:-webkit-full-screen .film-heading,#player:-webkit-full-screen .film-credits{display:none}
}

/* Consistent lowercase presentation without changing stored names or URLs. */
body{ text-transform:lowercase }

/* Regular-weight navigation and controls. */
.header a:not(.logo),.info-links a,button{font-weight:400}

/* Keep viewer scrolling available without visible scrollbar tracks. */
#film-dialog,.film-credits{scrollbar-width:none;-ms-overflow-style:none}
#film-dialog::-webkit-scrollbar,.film-credits::-webkit-scrollbar{display:none;width:0;height:0}


/* Reserve the full text layout while revealing characters in reading order. */
.type-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:no-preference){
  .text-typing .type-letter{visibility:hidden}
  .text-complete .type-letter{visibility:visible}
}

/* Photography-index reference: ten-column geometry and small hover stills. */
html.work-index-page{scroll-snap-type:none;overflow:hidden}
.work-index-page .header{z-index:40}
#work-index{position:fixed;inset:0;z-index:30;background:#fff;overflow-y:auto;padding:calc(var(--masthead-height) + 24px) 12px 24px 11px;font:13px/1.1 var(--site-font);animation:work-index-enter .7s cubic-bezier(.77,0,.175,1) both}
.work-index-list{margin-left:calc(20vw - 2.4px);width:calc(60vw - 19.2px);display:flex;flex-direction:column;gap:0}
.work-index-item{display:flex;width:100%;padding-bottom:3px;color:#000;font-weight:400;text-decoration:none}
.work-index-preview{position:fixed;left:12px;top:calc(var(--masthead-height) + 24px);width:calc(20vw - 15px);opacity:0;pointer-events:none;transition:opacity .1s ease-in-out}
.work-index-preview.is-visible{opacity:1;pointer-events:auto}
.work-index-preview img{display:block;width:100%;height:auto}
.work-index-details{display:none}
@media(max-width:767px){
  .work-index-list{margin-left:0;width:100%}
  .work-index-preview{display:none}
}

@keyframes work-index-enter{from{opacity:0}to{opacity:1}}

/* Match the archive overlay when entering info; switch secondary pages directly. */
html.info-page{overflow:hidden}
.info-page .header{z-index:40}
#info{position:fixed;inset:0;z-index:30;background:var(--paper);overflow-y:auto;min-height:100svh;padding:calc(var(--masthead-height) + 24px) 20px;animation:work-index-enter .7s cubic-bezier(.77,0,.175,1) both}
.direct-page-switch #info,.direct-page-switch #work-index{animation:none}

/* Cover-derived barcode draft: the selected film opens within the strip. */
#work-index{padding-left:42px;padding-right:42px}
.work-index-list{margin-left:0;width:100%}
.work-index-item{width:fit-content;max-width:100%}
.work-barcode{display:flex;width:100%;height:clamp(180px,32vw,360px);margin-top:64px;overflow:hidden;background:#111}
.barcode-film{position:relative;display:block;flex:1 1 0;min-width:0;overflow:hidden;transition:flex-grow 1.05s cubic-bezier(.4,0,.2,1)}
.barcode-film canvas,.barcode-film img{position:absolute;inset:0;width:100%;height:100%}
.barcode-film canvas{image-rendering:auto}
.barcode-film img{object-fit:cover;opacity:0;transition:opacity .65s cubic-bezier(.4,0,.2,1)}
.barcode-film.is-selected{flex-grow:7}
.barcode-film.is-selected img{opacity:1}
@media(max-width:767px){#work-index{padding-left:20px;padding-right:20px}.work-barcode{height:210px;margin-top:40px}.barcode-film.is-selected{flex-grow:12}}

/* Reveal a fixed-scale still through the expanding panel, without zooming. */
.barcode-film img{inset:auto;top:0;left:50%;width:var(--still-width,100%);max-width:none;transform:translateX(-50%)}

/* Open to the film's proportions and show the full still. */
.barcode-film.is-selected{flex-grow:var(--expanded-grow,7)}
.barcode-film img{object-fit:contain;background:#000}

/* Mobile: captions track the top-left of the actual film frame. */
@media(max-width:700px),(hover:none) and (pointer:coarse){
  .project{--mobile-image-width:min(100%,calc((100svh - var(--masthead-height) - 100px) * var(--project-ratio)))}
  .project .poster{width:var(--mobile-image-width);height:auto;aspect-ratio:var(--project-ratio)}
  .project .project-caption{order:-1;width:var(--mobile-image-width);padding:0;margin:0 0 10px;text-align:left;justify-content:flex-start}
  .project-caption h2,.project-caption p{font-size:11px;line-height:18px;color:#000;margin:0}
  .film-heading{display:block;position:absolute;left:0;bottom:calc(100% + 10px);margin:0;color:#fff;font:400 11px/18px var(--site-font);white-space:pre-line;pointer-events:none}
  #player:fullscreen .film-heading,#player:-webkit-full-screen .film-heading,#player.is-fullscreen .film-heading,#player.is-expanded .film-heading{display:none}
}

@media(max-width:700px),(hover:none) and (pointer:coarse){
  .barcode-film img{object-fit:cover}
}