/* Full-screen portfolio: the first published project is the landing page. */
:root{--tung:#f1eee7;--tung-ink:#111415}
html{scroll-snap-type:y mandatory;scroll-padding-top:0}
body{padding:0}
.intro{height:0;scroll-snap-align:none}
.hero{display:none}
.top{position:fixed;inset:0 0 auto;z-index:6;padding:22px var(--gut);border:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);align-items:flex-start}
.brand{font-size:clamp(20px,2.2vw,36px);font-weight:600;letter-spacing:-.055em;text-transform:none;line-height:1.2}
.brand i{display:none}
.top nav{padding-top:8px;gap:24px;letter-spacing:.15em}
.top nav a{color:var(--fg)}
.slides{gap:0}
.slide{min-height:100svh;border-radius:0;scroll-snap-align:start;scroll-snap-stop:always;cursor:pointer}
.slide-media img{object-position:center}
.slide::after{background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 36%,rgba(0,0,0,.2) 54%,rgba(0,0,0,.84) 100%)}
.slide-text{padding:110px var(--gut) 76px;max-width:min(1150px,100%);gap:20px}
.count{color:#d0cec7;letter-spacing:.18em}
.slide h2{font-size:clamp(32px,5vw,80px);line-height:1.12;letter-spacing:-.045em;font-weight:600;text-transform:none;text-wrap:balance;overflow-wrap:break-word}
.slide .meta{display:none}
.slide p{font-size:clamp(14px,1.15vw,20px);line-height:1.7;max-width:68ch}
.slide .btn{background:var(--fg);color:var(--bg);border:0;border-radius:40px;padding:14px 24px;margin-top:6px}
.ind{background:none;border:0;backdrop-filter:none;padding:0;right:var(--gut);bottom:18px;letter-spacing:.18em}
.ind #ind-n{display:none}
.admin-btn{bottom:18px;left:var(--gut)}
.outro{padding:40px var(--gut);scroll-snap-align:start}
.empty{min-height:100svh;border:0;border-radius:0;padding:100px var(--gut)}
.site-section{scroll-margin-top:95px}
.anim .slide-text>:not(h2){opacity:1;transform:none;transition:none}
.anim .slide-media>*{transform:none;transition:none}
.anim .slide.is-active .slide-media>*{transform:none;transition:none}
@media(max-width:640px){
 .top{padding-top:20px;gap:18px}.top nav{gap:12px;padding-top:4px;letter-spacing:.04em;font-size:11px;flex-wrap:wrap;justify-content:flex-end}
 .brand{font-size:22px;white-space:nowrap}.slide-text{padding-bottom:70px;gap:14px}.slide h2{font-size:clamp(30px,8vw,48px)}
 .slide p{font-size:14px}.ind span:last-child{display:inline}.outro{padding-block:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Alte Haas Grotesk Bold: name and project titles. */
@font-face{font-family:'Alte Haas Grotesk';src:url('assets/fonts/AlteHaasGroteskBold.woff') format('woff');font-style:normal;font-weight:700;font-display:swap}
.brand,.slide h2,.dlg-top h2{font-family:'Alte Haas Grotesk',Arial,sans-serif;font-weight:700;letter-spacing:-.025em;font-synthesis:none}

@font-face{font-family:'Alte Haas Grotesk';src:url('assets/fonts/AlteHaasGroteskRegular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
.slide .btn{font-family:'Alte Haas Grotesk',Arial,sans-serif;font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;font-synthesis:none}
.dlg-top h2{text-transform:none}
.slide p{white-space:pre-line}

.slide p{line-height:1.35}
.slide .btn{text-transform:uppercase}
.ind{font-family:'Alte Haas Grotesk',Arial,sans-serif;font-size:10px;font-weight:400;letter-spacing:0;text-transform:none}

.slide p{font-family:'Alte Haas Grotesk',Arial,sans-serif;font-weight:400;font-size:clamp(9.333333px,.766667vw,13.333333px);width:calc(50vw - var(--gut));max-width:100%;font-synthesis:none}
.ind{text-transform:uppercase}
@media(max-width:640px){.slide p{font-size:9.333333px}}

#dlg .syn,#dlg .cap,#dlg .pager{font-family:'Alte Haas Grotesk',Arial,sans-serif;font-weight:400}
#d-title{font-family:'Alte Haas Grotesk',Arial,sans-serif;font-weight:700;text-transform:none;letter-spacing:-.025em}

/* Full-screen gallery; the image retains the landing cover crop. */
#dlg{position:fixed;inset:0;margin:0;width:100%;min-width:100%;height:100%;max-height:none;max-width:none;border:0;border-radius:0;overflow:hidden;background:var(--bg)}
#dlg .media{position:absolute;inset:0;padding:0}
#dlg #p-img,#dlg #p-vid{height:100%;width:100%}
#dlg .stage{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:var(--bg)}
#dlg .stage img,#dlg .stage canvas{object-fit:cover;object-position:center}
#dlg .media:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 36%,rgba(0,0,0,.2) 54%,rgba(0,0,0,.84) 100%)}
#dlg .gallery-identity{position:absolute;top:22px;left:var(--gut);z-index:5;max-width:calc(70% - var(--gut))}
#gallery-name{font-family:'Alte Haas Grotesk',Arial,sans-serif;font-size:clamp(20px,2.2vw,36px);font-weight:700;letter-spacing:-.025em;line-height:1.2}
#d-title{margin:8px 0 0;font-size:24px;line-height:1.2}
#dlg .dlg-top{position:absolute;top:16px;right:var(--gut);z-index:6;display:block;background:none;border:0;padding:0}
#dlg .x{width:44px;height:44px;border:0;background:none}
#dlg .tabs{position:absolute;top:52px;right:0}
#dlg .tab{font-family:'Alte Haas Grotesk',Arial,sans-serif;font-size:11px;background:none}
#dlg .info{position:absolute;top:112px;left:var(--gut);z-index:4;padding:0;display:block;width:calc(50% - var(--gut));max-height:calc(100% - 260px);overflow:auto}
#dlg .dir,#dlg .facts,#dlg .dlg-foot{display:none}
#dlg .syn{font-size:clamp(9.333333px,.766667vw,13.333333px);line-height:1.35}
#dlg .thumbs{position:absolute;left:var(--gut);right:var(--gut);bottom:22px;z-index:4;max-width:600px;padding:0;margin:0}
#dlg .thumb{flex:0 0 clamp(56px,10vw,110px);height:60px;border-radius:0}
#dlg .cap{z-index:3;bottom:106px;left:var(--gut);background:none;padding:0}
#dlg .nav-arrow{z-index:3}
#dlg .trailer-row{position:absolute;bottom:116px;left:var(--gut);z-index:4}
@media(max-width:640px){#dlg .gallery-identity{top:20px}#gallery-name{font-size:22px}#d-title{font-size:20px}#dlg .info{top:96px}#dlg .syn{font-size:9.333333px}#dlg .thumbs{bottom:20px}#dlg .thumb{height:44px}#dlg .cap{bottom:88px}}

#dlg .gallery-identity{width:calc(50% - var(--gut));max-width:none}
#dlg .gallery-identity .syn{margin-top:16px;max-height:40vh;overflow:auto;font-size:clamp(9.333333px,.766667vw,13.333333px);line-height:1.35}
#dlg .info{top:auto;bottom:142px;max-height:44px}
@media(max-width:640px){#dlg .gallery-identity .syn{font-size:9.333333px}}

/* First image carries description; the footer has balanced arrow navigation. */
#dlg{width:var(--gallery-width,100%);height:var(--gallery-height,100svh);min-width:0;min-height:0;box-sizing:border-box;--gallery-identity-size:clamp(20px,2.2vw,36px)}
#dlg .gallery-identity{width:calc(66.666667% - var(--gut))}
#gallery-name,#d-title{font-size:var(--gallery-identity-size);line-height:1.2;color:#fff}
#gallery-name{display:block;color:#fff;text-decoration:none}
#dlg .gallery-identity .syn{color:#fff;max-height:calc(var(--gallery-height,100svh) - 200px)}
#dlg .thumbs{display:none}
#dlg .cap{left:50%;bottom:22px;transform:translateX(-50%);height:44px;display:flex;align-items:center;color:#fff;text-align:center;background:none;font-size:12px}
#dlg .nav-arrow{top:auto;bottom:22px;translate:none;border:0;border-radius:0;background:none;width:88px;height:44px;display:flex;align-items:center;padding:0;color:#fff}
#dlg .nav-arrow.prev{left:var(--gut);justify-content:flex-start}
#dlg .nav-arrow.next{right:var(--gut);justify-content:flex-end}
#dlg .gallery-arrow{display:block;position:relative;width:64px;height:1px;background:currentColor}
#dlg .gallery-arrow:after{content:'';position:absolute;right:0;top:50%;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg)}
#dlg .prev .gallery-arrow{transform:rotate(180deg)}
@media(max-width:640px){#dlg{--gallery-identity-size:22px}#dlg .nav-arrow{width:72px;bottom:20px}#dlg .gallery-arrow{width:56px}#dlg .cap{bottom:20px}}

#dlg .syn p{max-width:none;width:100%}

#dlg{overscroll-behavior:none;touch-action:none}
#dlg .nav-arrow:disabled{opacity:.3;cursor:default}

.slide p,#dlg .syn,#dlg .syn p{color:#fff}
#dlg{touch-action:pan-y pinch-zoom}

#dlg{touch-action:pinch-zoom}
#dlg .stage img{user-select:none;-webkit-user-drag:none}

/* Larger descriptions; pointer entry never outlines the name. */
#gallery-name{width:max-content;max-width:calc(100vw - 2 * var(--gut));overflow-wrap:anywhere}
#gallery-name:focus,.brand:focus,#dlg:focus{outline:none;box-shadow:none}
#gallery-name:focus-visible,.brand:focus-visible{text-decoration:underline;text-underline-offset:.14em}
.slide p,#dlg .syn,#dlg .gallery-identity .syn{font-size:clamp(18.666666px,1.533334vw,26.666666px)}
@media(max-width:640px){.slide p,#dlg .syn,#dlg .gallery-identity .syn{font-size:18.666666px}}

/* Project information belongs to the gallery introduction only. */
#dlg{--project-description-size:clamp(18.666666px,1.533334vw,26.666666px)}
#dlg .gallery-identity{display:flex;flex-direction:column;max-height:calc(var(--gallery-height,100svh) - 120px)}
#gallery-name,#d-title,#d-meta{flex-shrink:0}
#dlg .project-meta{font-family:'Alte Haas Grotesk',Arial,sans-serif;font-weight:400;font-size:calc((var(--gallery-identity-size) + var(--project-description-size)) / 2);line-height:1.35;color:#fff;margin:12px 0 0;overflow-wrap:anywhere;white-space:pre-line}
#dlg .gallery-identity .syn{min-height:0;max-height:none;overflow:auto}
@media(max-width:640px){#dlg{--project-description-size:18.666666px}}

/* Each project fills the visible viewport, including mobile browser resizing. */
.slide{height:100vh;min-height:100vh}
@supports(height:100dvh){.slide{height:100dvh;min-height:100dvh}}