/* Cinematic navigation, using the portfolio's black and silver identity. */
#header{padding:23px 4.5%;background:linear-gradient(#0808089c,transparent);min-height:86px}
#header.scrolled{background:#080808f2;padding:14px 4.5%}
#header nav{gap:30px}
#header nav a{font-size:14px;letter-spacing:.015em;position:relative;padding:10px 0}
#header nav a:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent);scale:0 1;transition:scale .2s;transform-origin:left}
#header nav a:hover:after,#header nav a:focus-visible:after{scale:1 1}
#header .contact-small{font-size:13px;padding:12px 19px;border-color:#ffffff80;background:transparent;color:var(--paper);transition:transform .25s,background .25s}
#header .contact-small:hover{background:#ffffff0d;color:var(--paper);border-color:#ffffff;transform:translateY(-3px)}
.hero.hero-showcase{height:100svh;min-height:480px;max-height:none;isolation:isolate;touch-action:pan-y}
.hero-showcase .hero-video-stage{background:#080808;inset:0}
.hero-showcase .hero-video-stage video{object-fit:cover;object-position:center}
.hero-showcase .hero-bottom{display:none}
.showcase-navigation{position:absolute;right:6%;bottom:28px;display:flex;align-items:center;gap:13px;z-index:3}
.showcase-step{display:grid;place-items:center;width:40px;height:40px;background:transparent;border:0;border-radius:0;transition:color .2s}
.showcase-step:hover{color:var(--accent)}
.showcase-step svg{width:23px;height:23px}
.showcase-dots{display:flex;gap:10px;align-items:center}
.showcase-dot{display:block;position:relative;padding:18px 0;background:transparent;width:33px;border-radius:6px;transition:width .3s}
.showcase-dot:before{content:'';position:absolute;top:16px;left:0;right:0;height:5px;background:#ffffff50;border-radius:4px}
.showcase-dot span{display:block;position:absolute;top:16px;left:0;right:0;height:5px;border-radius:4px;background:white;transform-origin:left;scale:0 1}
.showcase-dot[aria-current=true]{width:75px}
.showcase-dot[aria-current=true] span{scale:var(--slide-progress,1) 1}
.showcase-count{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.1em;color:#d4d4d4b3;margin-left:6px}
.hero-showcase .hero-film-fallback{left:6%;top:auto;bottom:100px;right:auto;translate:none;font-size:13px;z-index:4}
@media(max-width:1000px) and (min-width:761px){#header nav{gap:21px}}
@media(max-width:760px){
 #header,#header.scrolled{padding:18px 6%;min-height:76px}#header nav{display:none}
 .showcase-navigation{right:6%;bottom:27px;gap:8px}
 .showcase-count{display:none}.showcase-dots{gap:7px}
 .showcase-dot{width:13px}.showcase-dot[aria-current=true]{width:34px}
 .showcase-step{width:33px;height:33px}
 .hero-showcase .hero-film-fallback{bottom:110px}
}
@media(max-width:360px){.showcase-navigation{gap:6px}.showcase-step{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.showcase-dot{transition:none}}
.hero-showcase .hero-video-stage{background-size:cover;background-position:center}
.hero-showcase .hero-video-stage video{opacity:0;transition:opacity .5s}
.hero-showcase .hero-video-stage video.is-ready{opacity:1}
/* A quieter editorial frame for the existing work, without changing the films. */
.pill{font-size:14px;font-weight:700;letter-spacing:.02em}
.feature{padding-top:95px;padding-bottom:110px}
.feature-copy .text-link,.comparison-footer .text-link{font-size:14px}
.cinema-content{left:6%}
.cinema-content h2{font-size:clamp(70px,8vw,125px)}
.collection{padding-top:110px;padding-bottom:110px}
.work-grid{gap:28px}
.work-card{background:#171717;border:1px solid #ffffff20;border-radius:7px;overflow:hidden;transition:border-color .25s,translate .25s}
.work-card:hover{border-color:var(--accent);translate:0 -5px}
.work-visual{border:0;aspect-ratio:4/4.6}
.work-visual>img{filter:none}
.work-meta{padding:0 24px;margin:23px 0 12px;font-size:12px;letter-spacing:.06em;color:#d4d4d4a6}
.work-card h3{padding:0 24px;margin-bottom:27px;font-size:clamp(24px,2.1vw,32px);line-height:1.1}

.outline-button{border-color:#ffffff73;padding:18px 35px;transition:transform .25s,background .25s}
/* Center the visible heading and copy together while preserving the copy column width. */
.join{--join-width:min(1180px,60vw);display:grid;grid-template-columns:max-content calc(var(--join-width)*.4714285714);align-items:start;gap:calc(var(--join-width)*.065);width:fit-content;max-width:88%;margin:0 auto;padding:105px 0 115px;border:0;text-align:left}
.join h3{font-size:clamp(58px,4.8vw,86px);font-weight:700;line-height:.9;letter-spacing:-.045em;margin:0;text-align:right}
@media(min-width:761px){.join h3{position:relative;top:-.04em}}
.join-subline{display:inline-block;font-size:.4em;line-height:1.3;letter-spacing:-.025em;vertical-align:top;margin-top:0}
.join-copy h4{font-size:clamp(23px,1.7vw,34px);font-weight:700;line-height:1;letter-spacing:-.025em;margin:0 0 8px}
.join-copy p{max-width:510px;font-size:16px;line-height:1.65;color:#bdbdbd;margin:0 0 30px}
.join-copy .pill{padding:18px 28px;font-size:14px;letter-spacing:0;background:white;color:var(--ink)}
.join-copy .pill:hover{background:var(--accent)}
@media(min-width:761px) and (max-width:1100px){.join{--join-width:80vw}}
@media(max-width:760px){.join{grid-template-columns:minmax(0,1fr);gap:32px;width:88%;padding:75px 0 80px}.join h3{font-size:clamp(58px,16vw,78px)}.join-copy h4{font-size:24px}.join-copy p{font-size:16px;max-width:510px}}
.contact{padding-top:100px;padding-bottom:90px;background:none}
.contact.support{position:relative;isolation:isolate;overflow:hidden;padding:85px 6% 100px;background:var(--ink)}
.support-art{position:absolute;inset:-30% -4%;z-index:-2;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:7px;transform:rotate(-8deg) scale(1.05);filter:grayscale(1);opacity:.36;pointer-events:none}
.support-tile{position:relative;min-width:0;min-height:0;overflow:hidden}
.support-art img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover}
.contact.support:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#08080850, #08080875 40%,#080808c9 78%,var(--ink)),radial-gradient(ellipse at center,#08080870,transparent 75%)}
.support-content{max-width:540px;margin:0 auto;text-align:center}
.support-heading{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}
.support-logo{width:48px;height:78px;object-fit:contain}
.contact.support h2{font-family:var(--body);font-size:clamp(32px,3vw,46px);font-weight:700;line-height:1.15;letter-spacing:-.035em;margin:0}
.support-content p{font-size:16px;line-height:1.65;color:#c7c7c7;margin:0 auto 30px;max-width:490px}
.support-content .pill{padding:18px 30px;background:white;color:var(--ink);font-size:14px;letter-spacing:0}
.support-content .pill:hover{background:var(--accent)}
@media(max-width:760px){.contact.support{padding:65px 7% 80px}.support-art{inset:-15% -12%;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));transform:rotate(-8deg)}.support-logo{width:40px;height:66px}.support-heading{gap:14px}.support-content p{font-size:15px;max-width:350px}}
footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding-top:45px;padding-bottom:45px}footer>.brand{justify-self:start}footer>div{font-size:12px;justify-self:end}
footer .footer-contact{font-size:12px;letter-spacing:.6px;margin:0;text-align:center}
#menu[open]{display:flex;flex-direction:column}
#menu>.eyebrow,#menu>nav,#menu>.menu-socials{flex-shrink:0}
#menu .menu-email{flex-shrink:0;align-self:flex-end;margin-top:auto;padding-top:40px;max-width:100%;font-size:12px;letter-spacing:.6px;color:#d4d4d4bf;text-align:right;overflow-wrap:anywhere}
@media(max-width:760px){footer{display:flex;flex-direction:column}footer .footer-contact{width:100%}}
.internship-intro-section{padding-top:155px}
.application-field :is(input,select,textarea){border-radius:6px}
@media(max-width:760px){
 .feature{padding-top:60px;padding-bottom:75px}
 .cinema-content{left:auto}
 .cinema-content h2{font-size:clamp(46px,11.5vw,80px)}
 .collection{padding:75px 6%}
 .work-grid{gap:16px}
 .work-meta{padding:0 13px;margin-top:17px;margin-bottom:9px;font-size:12px;letter-spacing:0}
 .work-card h3{padding:0 13px;font-size:21px;line-height:1.1;margin-bottom:21px}

 .internship-intro-section{padding-top:125px}
 .join{padding-top:45px;padding-bottom:45px}.contact{padding:70px 6%}
}
@media(max-width:360px){.work-grid{grid-template-columns:1fr}}

/* Bare icons throughout the portfolio. */
.showcase-step,.hero-film-controls button,.circle-play,.close-dialog,#menu .close-dialog,.compare-line span{border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.scene-image:hover .circle-play,.close-dialog:hover,#menu .close-dialog:hover{background:transparent;color:var(--accent)}
.circle-play,.compare-line span{color:var(--paper);text-shadow:0 1px 5px #000}
.showcase-step:focus-visible,.close-dialog:focus-visible,#menu .close-dialog:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Featured story plus four compact projects, drawn from the existing portfolio. */
.featured-work{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;width:min(1240px,86%);margin:0 auto;padding:90px 0 105px;align-items:stretch}
.featured-lead{display:flex;flex-direction:column;min-width:0;padding:0;text-align:left;background:#181818;border-radius:6px;overflow:hidden}
.featured-lead-image{display:block;position:relative;aspect-ratio:16/10;width:100%;overflow:hidden;background:#101010}
.featured-lead-image img{position:absolute;left:0;top:-18.7%;width:100%;height:auto;max-width:none;transition:transform .35s}
.featured-play{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:30px;color:var(--paper);text-shadow:0 1px 8px #0009}
.featured-lead-copy{display:flex;flex-direction:column;align-items:flex-start;padding:33px 38px 35px;flex:1}
.featured-label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;color:#bdbdbd;line-height:1.4}
.featured-lead h2{font-size:clamp(34px,3.3vw,52px);line-height:1.05;letter-spacing:-.025em;margin:17px 0 19px;text-transform:uppercase}
.featured-description{display:block;font-size:14px;line-height:1.6;color:#aaaaaa}
.featured-cta{display:block;font-size:12px;font-weight:600;letter-spacing:.035em;margin-top:26px;color:var(--paper);border-bottom:1px solid var(--accent);padding-bottom:8px}
.featured-lead:hover .featured-lead-image img{transform:scale(1.035)}
.featured-list{display:grid;grid-template-rows:repeat(4,1fr);gap:22px;min-width:0}
.featured-row{display:grid;grid-template-columns:38% 1fr;gap:20px;align-items:center;padding:0;background:transparent;text-align:left;min-width:0}
.featured-thumb{display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:5px;background:#181818}
.featured-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.featured-row-copy{display:block;min-width:0}
.featured-lead-copy,.featured-row-copy{text-transform:uppercase}
.featured-row h3{font:700 clamp(19px,1.7vw,26px)/1.2 var(--body);letter-spacing:-.025em;margin:12px 0}
.featured-row .featured-description{font-size:12px}
.featured-row:hover h3{color:var(--accent)}
.featured-row:hover img{transform:scale(1.035)}
@media(max-width:1000px) and (min-width:761px){.featured-work{width:88%;gap:20px;grid-template-columns:1.2fr 1fr}.featured-lead-copy{padding:25px}.featured-row{gap:14px}.featured-row h3{font-size:20px}.featured-list{gap:18px}.featured-row .featured-description{display:none}}
@media(max-width:760px){.featured-work{display:block;width:88%;padding:55px 0 65px}.featured-lead-copy{padding:25px}.featured-lead h2{font-size:36px;margin:15px 0}.featured-cta{margin-top:21px}.featured-list{margin-top:27px;gap:22px}.featured-row{grid-template-columns:108px 1fr;gap:20px}.featured-row h3{font-size:22px;margin:9px 0}.featured-label{font-size:10px}.featured-row .featured-description{font-size:12px}}
@media(max-width:360px){.featured-row{grid-template-columns:90px 1fr;gap:15px}.featured-row h3{font-size:20px}.featured-lead h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.featured-thumb img,.featured-lead-image img{transition:none}}

/* Keep the short project headings on one line, like Recent Projects. */
.feature-fire .feature-copy h2,.craft .section-top h2{font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.025em;white-space:nowrap}

/* Align Before & After with the Recent Projects content edges. */
.craft{width:min(1240px,86%);margin-inline:auto;padding-inline:0}

/* Recent projects: one tall film, one wide film, then two square films. */
.collection-mosaic{width:min(1240px,86%);margin:0 auto;padding:90px 0 100px}
.collection-mosaic .section-top{margin-bottom:35px;align-items:center;gap:24px}
.collection-mosaic .section-top h2{font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.025em}
.collection-mosaic .section-top .text-link{font-size:14px;white-space:nowrap;border:0}
.collection-mosaic .work-grid{display:grid;grid-template-columns:1fr;gap:24px}
.project-mosaic{display:grid;grid-template-columns:1.45fr 1fr 1fr;grid-template-rows:.68fr 1fr;gap:18px;aspect-ratio:2.05}
.collection-mosaic .work-card{position:relative;min-width:0;min-height:0;border:0;border-radius:6px;background:#181818;overflow:hidden;translate:none}
.project-mosaic .work-card:nth-child(4n+1){grid-column:1;grid-row:span 2}
.project-mosaic .work-card:nth-child(4n+2){grid-column:2 / 4}
.project-mosaic .work-card:nth-child(4n+3){grid-column:2}
.project-mosaic .work-card:nth-child(4n+4){grid-column:3}
.collection-mosaic .work-visual{position:absolute;inset:0;aspect-ratio:auto;border:0;background:none}
.collection-mosaic .work-visual>img,.collection-mosaic .work-visual>svg{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s;filter:none}
.collection-mosaic .work-card:hover .work-visual>img,.collection-mosaic .work-card:hover .work-visual>svg{transform:scale(1.025);filter:none}
.collection-mosaic .work-caption{position:absolute;inset:auto 0 0;padding:60px 23px 25px;background:linear-gradient(transparent,#080808cc 60%,#080808eb);pointer-events:none}
.collection-mosaic .work-meta{padding:0;margin:0 0 8px;font-size:12px;line-height:1.3;letter-spacing:.05em;color:#d4d4d4bc}
.collection-mosaic .work-card h3{padding:0;margin:0;font:700 clamp(20px,1.7vw,26px)/1.18 var(--body);letter-spacing:-.02em;text-transform:none;color:var(--paper)}
.collection-mosaic .work-card:first-child h3{font-size:clamp(25px,2.1vw,32px)}
.collection-mosaic .work-card:hover h3{color:var(--paper)}

.collection-mosaic .work-card:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.collection-mosaic .outline-button{margin-top:38px}
@media(max-width:1000px) and (min-width:761px){.project-mosaic{aspect-ratio:1.8;gap:14px}.collection-mosaic .work-caption{padding:50px 18px 20px}.collection-mosaic .work-card h3{font-size:20px}}
@media(max-width:760px){
 .craft{width:88%}
 .collection-mosaic{width:88%;padding:65px 0 75px}
 .collection-mosaic .section-top{display:flex;align-items:center;margin-bottom:25px;gap:15px}
 .collection-mosaic .section-top h2{max-width:220px;font-size:29px}
 .collection-mosaic .section-top .text-link{margin:0;font-size:12px}
 .collection-mosaic .work-grid{gap:20px}
 .project-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;aspect-ratio:auto;gap:12px}
 .project-mosaic .work-card:nth-child(4n+1){grid-column:1 / 3;grid-row:auto;aspect-ratio:1.15}
 .project-mosaic .work-card:nth-child(4n+2){grid-column:1 / 3;aspect-ratio:1.7}
 .project-mosaic .work-card:nth-child(4n+3){grid-column:1;aspect-ratio:.8}
 .project-mosaic .work-card:nth-child(4n+4){grid-column:2;aspect-ratio:.8}
 .collection-mosaic .work-caption{padding:50px 16px 18px}
 .collection-mosaic .work-card h3{font-size:20px}
 .collection-mosaic .work-card:first-child h3{font-size:26px}
 .collection-mosaic .work-meta{font-size:12px;letter-spacing:0;margin-bottom:6px}

}
@media(max-width:360px){.collection-mosaic .section-top h2{font-size:26px}.collection-mosaic .work-card h3{font-size:18px}.collection-mosaic .work-caption{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.collection-mosaic .work-visual>img,.collection-mosaic .work-visual>svg{transition:none}}

/* A film-only library: two unbroken rows, with no captions or overlaid controls. */
.work-library{--library-gap:14px;--library-width:clamp(210px,19vw,305px);position:relative;padding:26px 0 155px;overflow:hidden;background:var(--ink)}
.work-library:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#000,transparent 12%,transparent 54%,#00000045 73%,#000 97%)}
.library-copy{position:absolute;left:max(7%,calc((100% - 1240px)/2));bottom:clamp(180px,15vw,230px);z-index:1;pointer-events:none}
.library-copy h2{font:700 clamp(32px,3.2vw,48px)/1.12 var(--body);letter-spacing:-.025em;margin:0 0 25px;color:var(--paper)}
.library-watch{pointer-events:auto;background:white;color:var(--ink);padding:17px 29px;font-size:14px;letter-spacing:.025em}
.library-watch:hover{background:var(--accent);color:var(--ink)}
.library-anchor{position:absolute;top:0;left:0;pointer-events:none}
.library-row{overflow:hidden;width:100%;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;transition:filter 90ms linear}
.library-row,.library-card{cursor:grab}
.library-row.is-dragging,.library-row.is-dragging .library-card{cursor:grabbing}
.work-library .library-row.is-manual .library-track{animation-play-state:paused}
.library-row+.library-row{margin-top:var(--library-gap)}
.library-track{display:flex;width:max-content;animation:library-drift var(--library-duration,120s) linear infinite;animation-play-state:paused;will-change:transform}
.library-row+.library-row .library-track{animation-delay:-21s}
.library-set{display:flex;gap:var(--library-gap);padding-right:var(--library-gap);flex:none}
.library-card{display:block;position:relative;flex:0 0 auto;width:calc(var(--library-width)*1.25*var(--clip-ratio,1.77777778));height:calc(var(--library-width)*1.25);padding:0;border:0;border-radius:2px;overflow:hidden;background:#000}
.library-card img,.library-card video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none}
.library-card video{background:#000;opacity:0;transition:opacity .35s ease}
.library-card video.is-playing{opacity:1}
.library-card video[hidden]{display:none}
.work-library.is-running .library-track{animation-play-state:running}
.work-library:has(.library-card:focus-visible) .library-track{animation-play-state:paused}
.library-card:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@keyframes library-drift{to{transform:translate3d(-50%,0,0)}}
@media(min-width:1800px){.work-library{--library-width:calc((100vw - 70px)/6)}}
@media(max-width:760px){.work-library{--library-gap:9px;--library-width:44vw;padding:10px 0 155px}.library-copy{left:6%;bottom:145px}.library-copy h2{font-size:30px;margin-bottom:20px}.library-watch{padding:16px 25px}.library-row+.library-row .library-track{animation-delay:-13s}}
@media(prefers-reduced-motion:reduce){
 .library-track{animation:none!important;transform:none;will-change:auto}
 .library-row{overflow-x:auto;scrollbar-width:thin}
 .library-set[aria-hidden=true]{display:none}
 .library-card video{display:none}
}

/* All primary actions share the outlined Load More treatment. */
:is(.pill,.featured-cta,.text-link,.comparison-footer .text-link,.collection-mosaic .section-top .text-link){
 display:inline-flex;align-items:center;justify-content:center;
 width:fit-content;max-width:100%;padding:17px 29px;
 border:1px solid #ffffff73;border-radius:50px;
 background:transparent;color:var(--paper);
 font:700 14px/1.6 var(--body);letter-spacing:.025em;
 text-align:center;text-decoration:none;
 transition:transform .25s,background .25s;
}
:is(.pill,.outline-button,.featured-cta,.text-link,.comparison-footer .text-link,.collection-mosaic .section-top .text-link):hover,
.featured-lead:focus-visible .featured-cta{
 background:#ffffff0d;color:var(--paper);border-color:#ffffff;transform:translateY(-3px);
}
.text-link:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
@media(max-width:760px){
 :is(.pill,.featured-cta,.text-link,.comparison-footer .text-link,.collection-mosaic .section-top .text-link){padding:16px 25px}
}
/* The square-corner direction applies to every button, including dialogs. */
button,.pill,.outline-button,.contact-small,.text-link,.featured-cta{border-radius:0!important}
.featured-thumb,.gallery-thumbnails img{border-radius:0}

/* Project previews share the full-screen glass used by the menu and photo viewer. */
#project-dialog{position:fixed;inset:0;margin:0;width:100%;height:100svh;max-width:none;max-height:none;border:1px solid #ffffff24;border-radius:0;overflow:auto;background:linear-gradient(125deg,#ffffff12,transparent 48%,#d4d4d409),#08080870;box-shadow:inset 0 1px 0 #ffffff26}
#project-dialog::backdrop{background:#08080824;-webkit-backdrop-filter:blur(24px) saturate(120%);backdrop-filter:blur(24px) saturate(120%)}
#project-dialog[open]{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
#project-dialog .project-player{min-width:0;min-height:0;padding:64px 24px 24px;background:transparent}
#project-dialog .project-player img,#project-dialog .project-player video{width:100%;height:calc(100svh - 124px);max-height:none;object-fit:contain;background:transparent}
#project-dialog .project-description{padding:76px clamp(26px,4vw,72px) 44px;background:transparent}
#project-dialog .close-dialog{position:fixed;top:18px;right:18px}
html:has(#project-dialog[open]){overflow:hidden}
@media(max-width:760px){
 #project-dialog[open]{display:block;width:100%;max-height:none}
 #project-dialog .project-player{padding:64px 16px 8px}
 #project-dialog .project-player img,#project-dialog .project-player video{height:56svh}
 #project-dialog .project-description{padding:28px 24px 48px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#project-dialog{background:#080808f0}}

/* Pointer clicks and automatic dialog focus do not add instructional boxes. */
html.pointer-navigation :focus{outline:none!important}
html.pointer-navigation .comparison:focus-within{outline:none}
:is(#menu,#project-dialog,#image-gallery) .close-dialog:focus-visible{outline:none}
html:not(.pointer-navigation) :is(#menu,#project-dialog,#image-gallery) .close-dialog:focus-visible{text-decoration:underline;text-underline-offset:.12em}

/* One responsive space between page sections, without stacked outer padding. */
:root{--section-gap:clamp(48px,5vw,80px);--portfolio-gap:213px}
#main{display:flex;flex-direction:column;gap:var(--section-gap)}
#main>section{flex-shrink:0}
#main>section:not(.hero){padding-block:0;margin-block:0}
.internship-page .internship-intro-section{padding-bottom:calc(var(--section-gap)/2)}
.internship-page .application-section{padding-top:calc(var(--section-gap)/2);padding-bottom:calc(var(--section-gap)/2)}
footer{padding-block:calc(var(--section-gap)/2)}

/* Restore the earlier spacing at the requested section boundaries. */
#main>#work{margin-top:calc(-1 * var(--section-gap));padding-top:90px;padding-bottom:105px}
#main>#work-library{margin-top:calc(var(--portfolio-gap) - 131px - var(--section-gap));padding-top:26px;padding-bottom:calc(var(--portfolio-gap) - 100px)}
#main>#process{margin-top:calc(-1 * var(--section-gap));padding-top:100px;padding-bottom:100px}
#main>#all-work{margin-top:calc(-1 * var(--section-gap));padding-top:90px;padding-bottom:var(--portfolio-gap)}
#main>#about{margin-top:calc(-1 * var(--section-gap))}
#main>#internship{margin-top:calc(-1 * var(--section-gap));padding-top:var(--portfolio-gap);padding-bottom:var(--portfolio-gap)}
#main>#contact{margin-top:calc(-1 * var(--section-gap));padding-top:85px;padding-bottom:100px}
.portfolio-page>footer{padding-top:var(--portfolio-gap)}
@media(max-width:760px){
 :root{--portfolio-gap:162px}
 #main>#work{padding-top:55px;padding-bottom:65px}
 #main>#work-library{margin-top:calc(var(--portfolio-gap) - 75px - var(--section-gap));padding-top:10px;padding-bottom:calc(var(--portfolio-gap) - 70px)}
 #main>#process{padding-top:70px;padding-bottom:70px}
 #main>#all-work{padding-top:65px}
 #main>#internship{padding-top:calc(var(--portfolio-gap) - 48px)}
 #main>#contact{padding-top:65px;padding-bottom:80px}
}

/* About preview: keep the left-aligned copy and move the portrait clear of it. */
@media(min-width:761px){
 .artist-copy{width:55%;margin-right:12%;padding:40px 6% 88px}
 .artist-bio{margin-inline:0}
 .artist-art{right:7%}
 .artist-art:after{display:block;background:linear-gradient(90deg,transparent 82%,var(--ink))}
}

/* Balance the left hand's outer edge with the right edge of the biography. */
@media(min-width:1441px){
 .artist{--about-wide-shift:calc(23.4vw - 336.96px)}
 .artist-copy{left:var(--about-wide-shift)}
 .artist-art img{width:calc(108% + var(--about-wide-shift));max-width:none;right:calc(-1 * var(--about-wide-shift))}
}

/* Phone typography and portrait framing. */
@media(max-width:760px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 body{font-size:14px}
 .brand>span,footer .brand>span{font-size:21px}
 #menu nav a{font-size:clamp(26px,7.2vw,34px)}
 .featured-lead h2{font-size:30px}
 .featured-row h3{font-size:19px}
 .featured-description{font-size:13px}
 .featured-row .featured-description{font-size:11px}
 .craft .section-top h2,.collection-mosaic .section-top h2{font-size:26px}
 .collection-mosaic .work-card h3{font-size:18px}
 .collection-mosaic .work-card:first-child h3{font-size:22px}
 .collection-mosaic .work-meta{font-size:11px}
 .join h3{font-size:46px}
 .join-copy h4{font-size:21px}
 .join-copy p,.support-content p{font-size:14px;line-height:1.65}
 .contact.support h2{font-size:28px}
 :is(.pill,.outline-button,.featured-cta,.text-link,.comparison-footer .text-link,
     .collection-mosaic .section-top .text-link,.join-copy .pill,.support-content .pill,
     .submit-row .pill){font-size:12px;min-height:44px;padding:13px 22px}
 .comparison-footer{gap:16px;align-items:center}
 .project-description h2{font-size:30px}
 .project-description p{font-size:14px;line-height:1.65}
 #image-gallery #gallery-title{font-size:18px}

 /* The image height follows its frame, never the length of the biography. */
 .artist{display:block;min-height:0;aspect-ratio:auto}
 .artist-art{position:relative;inset:auto;width:100%;aspect-ratio:3/2}
 .artist-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
 .artist-art:after{display:block;position:absolute;inset:0;content:'';
   background:linear-gradient(180deg,transparent 78%,var(--ink));pointer-events:none}
 .artist-copy{width:100%;padding:18px 7% 48px}
 .artist-copy h2{font-size:32px;line-height:1.08;margin-bottom:20px}
 .artist-bio{max-width:520px;margin-inline:0;text-shadow:none}
 .artist-bio p{font-size:13.5px;line-height:1.65;margin-bottom:14px}
 .artist-bio p:last-child{margin-bottom:0}

 .internship-intro-section h1{font-size:34px}
 .application-aside h2{font-size:32px}
 .team-intro-copy p,.application-aside .team-aside-intro,
 .team-editorial p,.team-crafts dd,.application-form-intro p,
 .fieldset-intro,.application-closing{font-size:14px;line-height:1.65}
 .team-editorial h3{font-size:18px}
 .application-form-intro h3{font-size:20px}
 .application-field label{font-size:13px}
 /* Keep editable text at 16px so focusing the form does not zoom the phone. */
 .application-field :is(input,select,textarea){font-size:16px}
}

/* The live YouTube playlist follows the same width and spacing as Recent Projects. */
#main>#youtube-work{width:min(1240px,86%);margin-inline:auto;margin-top:calc(-1 * var(--section-gap));padding-bottom:var(--portfolio-gap);scroll-margin-top:110px}
.youtube-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:35px}
.youtube-heading h2{margin:0;font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.025em}
.youtube-heading p{margin:12px 0 0;color:#d4d4d4bf;font-size:16px;line-height:1.6}
.youtube-heading .pill{flex-shrink:0;white-space:nowrap}
.youtube-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 24px;align-items:start}
.youtube-player{position:relative;width:100%;min-width:0;aspect-ratio:16/9;min-height:200px;background:#000}
.youtube-player iframe{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:200px;border:0;visibility:hidden}
.youtube-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;border:1px solid #ffffff1a;background:radial-gradient(ellipse at center,#191919,#080808)}
.youtube-placeholder .youtube-mark{font-size:30px;color:#d4d4d4}
.youtube-placeholder p{margin:0;font-size:20px;font-weight:700}
.youtube-placeholder>span:last-child{font-size:14px;line-height:1.5;color:#a5a5a5}
.youtube-player[data-state="ready"] iframe,.youtube-player[data-state="unavailable"] iframe{visibility:visible}
.youtube-player[data-state="ready"] .youtube-placeholder,.youtube-player[data-state="unavailable"] .youtube-placeholder{display:none}
.youtube-feedback{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding-top:12px}
.youtube-status{margin:0;color:#aaa;font-size:14px;line-height:1.5}
.youtube-retry{flex-shrink:0;font-size:12px;padding:12px 18px}
#youtube-work .youtube-retry[hidden]{display:none}
.youtube-worklist{grid-column:2;grid-row:1;display:flex;flex-direction:column;height:0;min-height:100%;overflow:hidden;border:1px solid #ffffff24;background:#101010}
.youtube-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border-bottom:1px solid #ffffff1a;flex:none}
.youtube-list-heading h3{font-size:15px;letter-spacing:.035em;margin:0 0 4px}
.youtube-list-heading p{font-size:12px;color:#aaa;margin:0}
.youtube-count{font-size:12px;color:#aaa;white-space:nowrap}
.youtube-list{list-style:none;margin:0;padding:6px 0;overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 #101010}
.youtube-list:empty{display:none}
.youtube-list li{margin:0;padding:0}
.youtube-item{display:grid;grid-template-columns:14px 100px minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:11px 12px;text-align:left;border:0;background:transparent;color:#d4d4d4;cursor:pointer}
.youtube-item:hover{background:#ffffff0b}
.youtube-item[aria-current="true"]{background:#ffffff12;box-shadow:inset 2px 0 #d4d4d4}
.youtube-item:focus-visible{outline:2px solid #ddd;outline-offset:-3px}
.youtube-item-number{font-size:11px;color:#929292;text-align:center}
.youtube-item[aria-current="true"] .youtube-item-number{color:#eee}
.youtube-item img{display:block;width:100px;height:57px;object-fit:cover;background:#222}
.youtube-item-copy{min-width:0;display:block}
.youtube-item-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.youtube-item-channel{display:block;margin-top:5px;font-size:11px;color:#919191;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.youtube-list-notice{font-size:13px;line-height:1.6;color:#aaa;margin:0;padding:20px}
.youtube-list-notice[hidden]{display:none}
.youtube-details{grid-column:1;min-width:0}
.youtube-feedback{min-height:40px}
.youtube-status{font-size:12px}
.youtube-now-label{margin:18px 0 10px;font-size:10px;letter-spacing:.14em;color:#999}
.youtube-video-title{font-size:20px;line-height:1.4;letter-spacing:-.02em;margin:0;font-weight:600;overflow-wrap:anywhere}
.youtube-video-channel{font-size:13px;line-height:1.6;color:#aaa;margin:10px 0 16px}
.youtube-description-link{display:inline-flex;align-items:center;gap:10px;font-size:12px;line-height:1.5;color:#aaa;text-decoration:none;border-bottom:1px solid #ffffff40;padding-bottom:4px}
.youtube-description-link:hover{color:#eee;border-color:#eee}
@media(max-width:760px){
 #main>#youtube-work{width:88%;scroll-margin-top:95px}
 .youtube-heading{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:25px}
 .youtube-heading h2{font-size:26px}
 .youtube-heading p{margin-top:10px;font-size:14px}
 .youtube-feedback{align-items:flex-start;flex-direction:column;gap:12px}
 .youtube-status{font-size:12px}
 .youtube-layout{grid-template-columns:minmax(0,1fr);gap:0}
 .youtube-worklist{grid-column:1;grid-row:3;height:360px;min-height:0;margin-top:24px}
 .youtube-details{grid-row:2}
 .youtube-video-title{font-size:17px}
 .youtube-now-label{margin-top:12px}
}